:root{
    --night:#0a0d1c;
    --ink:#e8ecff;
    --dim:#8b93b8;
    --green:#5dff8f;
    --blue:#58b6ff;
    --danger:#ff5468;
    --gold:#ffc857;
    --font-hud:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
    --font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Noto Sans JP",Meiryo,sans-serif;
  }
  html,body{height:100%;}
  body{
    margin:0; background:var(--night); color:var(--ink);
    font-family:var(--font-hud); overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  #stage{position:fixed; inset:0;}
  canvas{display:block; width:100%; height:100%;}

  /* ---------- HUD ---------- */
  #hud{
    position:fixed; top:0; left:0; right:0;
    display:flex; align-items:center; gap:28px;
    padding:14px 22px; pointer-events:none;
    font-size:13px; letter-spacing:.08em;
    text-shadow:0 0 12px rgba(10,13,28,.9);
    z-index:5;
  }
  #hud .stat{display:flex; align-items:baseline; gap:8px;}
  #hud .stat[hidden]{display:none;}
  #hud .lbl{color:var(--dim); font-size:10px; letter-spacing:.22em; text-transform:uppercase;}
  #hud .val{font-variant-numeric:tabular-nums; font-size:16px;}
  #score-val{color:var(--gold);}
  #streak-val.hot{color:var(--green);}
  #lives-val{color:var(--danger); letter-spacing:.14em; font-size:14px;}
  #hud .spacer{flex:1;}
  #mute,#giveup,#furi-btn{
    pointer-events:auto; cursor:pointer;
    background:none; border:1px solid rgba(139,147,184,.35);
    color:var(--dim); font-family:inherit; font-size:10px;
    letter-spacing:.2em; padding:6px 12px; border-radius:3px;
  }
  #mute:hover,#furi-btn:hover{color:var(--ink); border-color:var(--dim);}
  #mute:focus-visible,#giveup:focus-visible,#furi-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  #giveup:hover{color:var(--danger); border-color:var(--danger);}
  #giveup[hidden],#furi-btn[hidden]{display:none;}

  /* ---------- session achievements (left rail) ---------- */
  #achievements{
    position:fixed; left:22px; top:64px; z-index:4;
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
  }
  .ach{
    display:flex; align-items:center; gap:6px;
    font-size:9px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold);
    border:1px solid rgba(255,200,87,.25);
    background:rgba(10,13,28,.4);
    padding:4px 8px; border-radius:3px;
    opacity:.5;
    animation:ach-in .5s ease-out;
    max-width:220px; pointer-events:auto;
  }
  .ach .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ach:hover{max-width:none; opacity:.9;}
  .ach .star{font-size:10px;}
  .ach.deck{
    color:#a5f3ff;
    border-color:rgba(165,243,255,.45);
    box-shadow:0 0 14px rgba(165,243,255,.2);
  }
  .ach.sent{
    color:var(--green);
    border-color:rgba(93,255,143,.3);
  }
  @keyframes ach-in{
    from{opacity:0; transform:translateX(-16px);}
    to{opacity:1; transform:none;}
  }

  /* ---------- input dock ---------- */
  #dock{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    z-index:5; width:min(440px,86vw);
  }
  #dock[hidden]{display:none;}
  #answer{
    width:100%; box-sizing:border-box;
    background:rgba(10,13,28,.78);
    border:1px solid rgba(139,147,184,.45);
    border-radius:4px;
    color:var(--ink);
    font-family:var(--font-hud);
    font-size:19px; letter-spacing:.04em;
    padding:12px 16px; text-align:center;
    backdrop-filter:blur(6px);
    transition:border-color .15s, box-shadow .15s;
  }
  #answer:focus{
    outline:none; border-color:var(--blue);
    box-shadow:0 0 0 1px var(--blue), 0 0 24px rgba(88,182,255,.25);
  }
  #answer.wrong{
    border-color:var(--danger);
    box-shadow:0 0 0 1px var(--danger), 0 0 24px rgba(255,84,104,.35);
    animation:shake .3s;
  }
  #answer::placeholder{color:rgba(139,147,184,.55);}
  #dock .hint{font-size:10px; color:var(--dim); letter-spacing:.18em; text-transform:uppercase;}
  @keyframes shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-7px);} 40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);} 80%{transform:translateX(3px);}
  }

  /* ---------- overlays ---------- */
  .overlay{
    position:fixed; inset:0; z-index:10;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 90% 70% at 50% 110%, rgba(29,78,122,.35), transparent 60%),
      rgba(10,13,28,.9);
    backdrop-filter:blur(4px);
  }
  .overlay[hidden]{display:none;}
  .panel{
    width:min(560px,90vw); max-height:86vh; overflow-y:auto;
    padding:44px 48px; box-sizing:border-box;
    border:1px solid rgba(139,147,184,.28);
    background:rgba(15,20,40,.72);
    border-radius:6px;
    text-align:center;
  }
  .title-jp{
    font-family:var(--font-jp); font-weight:800;
    font-size:clamp(30px,5.4vw,46px); letter-spacing:.1em;
    background:linear-gradient(100deg,var(--green) 20%,var(--blue) 80%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin:0; text-wrap:balance;
  }
  .title-en{
    margin:10px 0 0; font-size:13px; letter-spacing:.55em;
    color:var(--dim); text-transform:uppercase; text-indent:.55em;
  }
  .rules{
    margin:34px 0 0; display:flex; flex-direction:column; gap:14px; text-align:left;
  }
  .rule{
    display:flex; align-items:center; gap:16px;
    border:1px solid rgba(139,147,184,.22);
    border-radius:4px; padding:13px 16px;
    background:rgba(10,13,28,.5);
  }
  .rule .kana{
    font-family:var(--font-jp); font-size:24px; font-weight:700;
    min-width:82px; text-align:center;
  }
  .rule.g .kana{color:var(--green); text-shadow:0 0 14px rgba(93,255,143,.5);}
  .rule.b .kana{color:var(--blue); text-shadow:0 0 14px rgba(88,182,255,.5);}
  .rule .what{font-size:12.5px; line-height:1.65; color:var(--ink);}
  .rule .what b{letter-spacing:.06em;}
  .rule.g b{color:var(--green);} .rule.b b{color:var(--blue);}
  .rule .what .ex{color:var(--dim);}
  /* start-screen settings: one aligned label + controls row per setting */
  .settings{
    margin:30px auto 0; max-width:460px;
    display:flex; flex-direction:column; gap:10px;
  }
  .setting{
    display:grid; grid-template-columns:88px 1fr;
    gap:14px; align-items:center;
  }
  .setting.disabled{opacity:.35; pointer-events:none;}
  .opt-row{display:flex; flex-wrap:wrap; gap:6px;}
  #cats .count{opacity:.55; margin-left:5px;}
  .opt-lbl{
    font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--dim); text-align:right;
  }
  .opt{
    cursor:pointer; font-family:var(--font-hud); font-size:11px;
    letter-spacing:.1em; padding:7px 13px; border-radius:3px;
    background:rgba(10,13,28,.5); color:var(--dim);
    border:1px solid rgba(139,147,184,.3);
    min-width:52px; text-align:center;
  }
  .opt:hover{color:var(--ink); border-color:var(--dim);}
  .opt.on{
    color:var(--green); border-color:var(--green);
    box-shadow:0 0 12px rgba(93,255,143,.25);
  }
  .opt:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

  /* gameplay tips list */
  .tips{
    list-style:none; margin:26px auto 0; padding:0; max-width:460px;
    display:flex; flex-direction:column; gap:9px;
    font-size:12.5px; line-height:1.6; letter-spacing:.03em;
    color:var(--dim); text-align:left;
  }
  .tips li{display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:baseline;}
  .tips .ic{text-align:center; font-size:13.5px; font-family:var(--font-hud);}
  .t-danger{color:var(--danger);} .t-gold{color:var(--gold);}
  .t-ice{color:#a5f3ff;} .t-dim{color:var(--dim);} .t-heart{color:#ff9ec7;}

  /* command reference */
  .commands{margin:28px auto 0; max-width:460px; text-align:left;}
  .commands h3{
    font-size:10px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--dim); margin:0 0 10px; font-weight:400;
  }
  .commands ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .commands li{
    display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:baseline;
    font-size:12.5px; line-height:1.6; color:var(--dim);
  }
  .commands code{
    font-family:var(--font-hud); font-size:12px;
    color:var(--gold); letter-spacing:.05em;
  }
  .commands code.t-ice{color:#a5f3ff;}
  .commands code.t-heart{color:#ff9ec7;}
  .go{
    margin-top:30px; cursor:pointer;
    font-family:var(--font-hud); font-size:14px; letter-spacing:.3em; text-indent:.3em;
    color:var(--night); background:linear-gradient(100deg,var(--green),#38d977);
    border:none; border-radius:4px; padding:15px 42px; font-weight:700;
    box-shadow:0 0 30px rgba(93,255,143,.35);
  }
  .go:hover{filter:brightness(1.1);}
  .go:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
  .actions{display:flex; gap:14px; justify-content:center; margin-top:30px;}
  .actions .go{margin-top:0;}
  .go.ghost{
    background:none; color:var(--dim);
    border:1px solid rgba(139,147,184,.35); box-shadow:none;
  }
  .go.ghost:hover{color:var(--ink); border-color:var(--dim); filter:none;}

  /* results history on the start screen */
  #history{margin-top:6px; text-align:left;}
  #history .missed{margin-top:30px;}
  .missed td.gold{color:var(--gold);}
  .missed td.date{white-space:nowrap;}
  .clear-hist{
    margin-top:16px; cursor:pointer;
    background:none; border:none; text-decoration:underline;
    color:var(--dim); font-family:var(--font-hud);
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  }
  .clear-hist:hover{color:var(--danger);}
  .clear-hist:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

  /* deck-cleared prompt: same dock position as the boss answers */
  #deck-prompt{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:10px;
    z-index:5; width:min(520px,88vw);
  }
  #deck-prompt[hidden]{display:none;}
  #deck-prompt .prompt-title{
    margin:0; text-align:center; font-size:12px;
    letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  }

  /* boss fight: answers dock at the bottom, everything else on canvas */
  #boss-dock{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:10px;
    z-index:5; width:min(520px,88vw);
  }
  #boss-dock[hidden]{display:none;}
  #boss-dock .hint{
    margin:0; font-size:10px; color:var(--dim); text-align:center;
    letter-spacing:.18em; text-transform:uppercase;
  }
  .boss-opts{display:flex; flex-direction:column; gap:8px;}
  .boss-opt{
    cursor:pointer; display:flex; gap:14px; align-items:baseline;
    font-family:var(--font-hud); font-size:13px; text-align:left;
    padding:11px 16px; border-radius:4px;
    border:1px solid rgba(139,147,184,.35);
    background:rgba(10,13,28,.78); color:var(--ink);
    backdrop-filter:blur(6px);
  }
  .boss-opt .num{color:var(--gold); font-size:11px;}
  .boss-opt:hover:enabled{border-color:var(--dim);}
  .boss-opt:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .boss-opt:disabled{cursor:default;}
  .boss-opt.correct{
    border-color:var(--green); color:var(--green);
    box-shadow:0 0 14px rgba(93,255,143,.25);
  }
  .boss-opt.wrong{border-color:var(--danger); color:var(--danger);}
  .boss-opt.idk{
    color:var(--dim); font-style:italic;
    border-style:dashed; border-color:rgba(139,147,184,.3);
  }

  /* game-over extras */
  .final{
    display:flex; justify-content:center; gap:38px; margin-top:30px;
    font-variant-numeric:tabular-nums;
  }
  .final .f{display:flex; flex-direction:column; gap:6px;}
  .final .n{font-size:26px;}
  .final .n.gold{color:var(--gold);} .final .n.grn{color:var(--green);}
  .final .l{font-size:9.5px; letter-spacing:.24em; color:var(--dim); text-transform:uppercase;}
  .missed{
    margin:30px 0 0; text-align:left;
  }
  .missed h3{
    font-size:10px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--dim); margin:0 0 12px; font-weight:400;
  }
  .missed table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .missed td{padding:7px 8px; border-top:1px solid rgba(139,147,184,.16); line-height:1.5;}
  .missed td.k{font-family:var(--font-jp); font-size:16px; white-space:nowrap;}
  .missed td.r{color:var(--blue); white-space:nowrap;}
  .missed td.e{color:var(--dim);}
  .missed .none{color:var(--dim); font-size:12px;}

  @media (prefers-reduced-motion:reduce){
    #answer.wrong{animation:none;}
    .ach{animation:none;}
  }