:root {
    --bg: #14141c; --fg: #f0f0f5; --accent: #ffb454;
    --hero: #5ab0ff; --enemy: #ff6b6b; --ki: #b48cff;
    --panel: #20202c; --ok: #6bd98a;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg);
    font-family: system-ui, -apple-system, sans-serif; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; padding: 1rem; }
  h1 { font-size: 1.3rem; margin: 0.3rem 0; }
  .sub { color: #9a9ab0; font-size: 0.85rem; margin-bottom: 1rem; text-align:center;}
  button.big { font-size: 1.4rem; padding: 1rem 2rem; margin: 1rem 0;
    background: var(--accent); color: #14141c; border: none; border-radius: 12px;
    cursor: pointer; font-weight: bold; }
  button.big:focus { outline: 4px solid #fff; }
  .menu { max-width: 640px; width: 100%; }
  fieldset { border: 2px solid #3a3a4a; border-radius: 10px; margin: 1rem 0; padding: 0.8rem 1rem; }
  legend { padding: 0 0.5rem; font-weight: bold; color: var(--accent); }
  details.settings-section { margin: 1rem 0; }
  details.settings-section > summary { cursor: pointer; font-weight: bold; color: var(--accent);
    font-size: 1.05rem; padding: 0.6rem 0.8rem; background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; }
  details.settings-section[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; }
  details.settings-section > summary:focus { outline: 3px solid #fff; }
  details.settings-section fieldset { margin-top: 0; border-radius: 0 0 10px 10px; }
  .opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 1rem; }
  .opt input { width: 22px; height: 22px; }
  .opt:focus-within { outline: 2px solid var(--accent); border-radius: 6px; }
  .bars { display: flex; gap: 2rem; width: 100%; max-width: 640px; margin-bottom: 1rem; }
  .fighter { flex: 1; }
  .fighter h2 { font-size: 1rem; margin: 0 0 0.3rem; }
  .bar-wrap { background: #000; border-radius: 8px; overflow: hidden; height: 22px; margin-bottom: 0.4rem; position: relative; }
  .bar-fill { height: 100%; transition: width 0.15s; }
  .hp .bar-fill { background: var(--hero); }
  .enemy-hp .bar-fill { background: var(--enemy); }
  .ki .bar-fill { background: var(--ki); }
  .bar-label { position: absolute; left: 8px; top: 2px; font-size: 0.75rem; font-weight: bold; text-shadow: 0 0 3px #000; }
  #state-display { font-size: 1.5rem; font-weight: bold; text-align: center; min-height: 2.5rem; margin: 1rem 0; color: var(--accent); }
  #log { width: 100%; max-width: 640px; height: 120px; overflow-y: auto; background: var(--panel); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; line-height: 1.5; }
  #log p { margin: 0 0 0.2rem; }
  .cross { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 6px; margin: 1.2rem 0; }
  .key { background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; text-align: center; }
  .key.up { grid-column: 2; grid-row: 1; } .key.left { grid-column: 1; grid-row: 2; }
  .key.center { grid-column: 2; grid-row: 2; } .key.right { grid-column: 3; grid-row: 2; }
  .key.lit { background: var(--accent); color: #14141c; border-color: #fff; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .help { max-width: 640px; font-size: 0.85rem; color: #9a9ab0; line-height: 1.6; }
  .help code { background: #2a2a38; padding: 1px 6px; border-radius: 4px; color: var(--fg); }