:root{
  --bg:#f6f1e7;--bg2:#efe7d7;--ink:#2b2620;--mut:#94897a;--card:#fffdf9;--line:#e6ddcd;
  --ok:#3a8d4f;--ok-ink:#256436;--bad:#c0392b;--accent:#a96a2c;--accent-ink:#8a531d;--hl:#e8b04b;
  --tile:#efe7d7;--tile-line:#dcd0bb;
  --correct:#3f9d52;--absent:#9a8f78;--missed:#c0392b;
  --correct-ink:#fff;--absent-ink:#fff;--missed-ink:#fff;
  --key:#e7dcc7;--key-ink:#2b2620;
  --wrapmax:520px;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#17140f;--bg2:#1e1a13;--ink:#efe9df;--mut:#8c8275;--card:#241f17;--line:#3a3326;
  --ok:#62c47d;--ok-ink:#8ad8a0;--bad:#e07a6c;--accent:#d9a066;--accent-ink:#e8b87f;--hl:#caa23d;
  --tile:#1e1a13;--tile-line:#3a3326;
  --correct:#5cc173;--absent:#6b6353;--missed:#e07a6c;
  --correct-ink:#08230f;--absent-ink:#e8dcc0;--missed-ink:#1a0d0a;
  --key:#352e22;--key-ink:#efe9df;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%,var(--bg2),var(--bg));min-height:100vh;
  display:flex;justify-content:center;padding:20px 16px 200px;-webkit-tap-highlight-color:transparent}
.wrap{width:100%;max-width:var(--wrapmax)}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
h1{font-size:clamp(20px,5vw,26px);margin:0;letter-spacing:-.01em}
.tools{display:flex;align-items:center;gap:8px}
.toolbtn{background:var(--card);border:1px solid var(--line);color:var(--accent-ink);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.toolbtn:hover{border-color:var(--accent)}
.gc{font:700 13px/1 ui-monospace,monospace;color:#fff;background:var(--accent);text-decoration:none;
  border-radius:999px;padding:7px 12px}
.sub{color:var(--mut);font-size:14.5px;margin:12px 2px 10px}
.sub b{color:var(--ink)}
.category{text-align:center;font:700 12px/1.3 system-ui;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent-ink);margin:4px 2px 2px}

/* ---- peril scene ---- */
.scene{width:100%;max-width:280px;height:190px;margin:4px auto 2px}
.scene svg{display:block;width:100%;height:100%}
.scene.miss{animation:shake .34s ease}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}

/* ---- lives ---- */
.lives{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 2px 6px;
  font:600 14px/1 system-ui;color:var(--mut)}
.pips{display:inline-flex;gap:5px}
.pip{width:12px;height:12px;border-radius:50%;background:var(--correct)}
.pip.spent{background:var(--missed);opacity:.4}
.lives.low{color:var(--bad)}

/* ---- blanks ---- */
.board{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:center;margin:10px auto 6px}
.hword{display:inline-flex;gap:5px;margin:3px 6px}
.blank{width:clamp(22px,7vw,30px);height:clamp(30px,9vw,38px);display:flex;align-items:flex-end;
  justify-content:center;font:800 clamp(20px,6vw,26px)/1.1 ui-monospace,monospace;text-transform:uppercase;
  color:var(--ink);border-bottom:3px solid var(--tile-line)}
.blank.fixed{border-color:transparent}
.blank.pop{animation:pop .18s ease}
.blank.missed{color:var(--missed)}
@keyframes pop{0%{transform:translateY(6px);opacity:0}60%{transform:translateY(-2px)}100%{transform:translateY(0);opacity:1}}

/* ---- wrong letters ---- */
.wrong{text-align:center;font:600 13.5px/1.4 system-ui;color:var(--mut);min-height:20px;margin:2px 2px 6px}
.wrong b{color:var(--bad);font-family:ui-monospace,monospace;letter-spacing:.06em}

/* ---- reveal-on-demand hint ---- */
.hintwrap{text-align:center;margin:2px 2px 8px}
.hintwrap .sub{color:var(--accent-ink);margin:8px 2px 0}

/* ---- fading feedback toast ---- */
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-12px);
  background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:9px 18px;font:600 14.5px/1.2 system-ui;box-shadow:0 6px 22px rgba(0,0,0,.14);
  opacity:0;pointer-events:none;z-index:30;max-width:90vw;text-align:center;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{color:var(--bad);border-color:var(--bad)}

/* ---- on-screen keyboard ---- */
.keyboard{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.06);z-index:5}
.keyboard-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.krow{display:flex;gap:5px;justify-content:center}
.kbtn{flex:1;min-width:0;height:52px;border:0;border-radius:8px;background:var(--key);color:var(--key-ink);
  font:700 16px/1 system-ui;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;
  user-select:none;transition:transform .08s,background .15s,opacity .15s}
.kbtn:active{transform:scale(.92)}
.kbtn.correct{background:var(--correct);color:var(--correct-ink)}
.kbtn.absent{background:var(--absent);color:var(--absent-ink);opacity:.65}

/* ---- end card ---- */
.end{display:none;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 18px;margin-top:18px}
.end.show{display:block}
.end h2{margin:.1em 0;font-size:23px;color:var(--ok-ink)}
.end.lose h2{color:var(--bad)}
.end .esub{color:var(--mut);font-size:14px;margin:6px 0 0}
.end .word{font:800 clamp(18px,6vw,24px)/1.3 ui-monospace,monospace;color:var(--ink);letter-spacing:.04em;margin:8px 0 0}
.kw{margin:16px 0 6px}
.kw .label{font:600 11px/1 system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.kw .val{font:800 clamp(22px,7vw,30px)/1.2 ui-monospace,monospace;letter-spacing:.02em;color:var(--accent-ink);
  margin-top:6px;user-select:all}
.playagain{margin-top:16px;border:0;border-radius:12px;padding:12px 20px;background:var(--accent);
  color:#fff;font-weight:700;font-size:15px;cursor:pointer}

/* ---- modals ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;
  padding:18px;z-index:20}
.modal.show{display:flex}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:18px;max-width:440px;width:100%;
  padding:22px;max-height:85vh;overflow:auto}
.sheet h2{margin:0 0 10px;font-size:20px}
.sheet p{font-size:14.5px;color:var(--ink);margin:0 0 10px}
.sheet .legend{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0}
.sheet .dot{width:16px;height:16px;border-radius:4px;flex:none}
.sheet .dot.correct{background:var(--correct)}
.sheet .dot.absent{background:var(--absent)}
.sheet .close{margin-top:8px;width:100%;border:0;border-radius:12px;padding:12px;background:var(--accent);
  color:#fff;font-weight:700;cursor:pointer}
.sheet .ghost{margin-top:8px;width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;
  background:transparent;color:var(--accent-ink);font-weight:700;cursor:pointer}
.opt{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.opt:first-of-type{border-top:0}
.opt small{color:var(--mut);font-size:12.5px}
.opt.dontask{font-size:14px}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;border-radius:999px;
  background:var(--line);position:relative;cursor:pointer;transition:background .15s;margin-top:2px}
.switch:checked{background:var(--accent)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .15s}
.switch:checked::after{transform:translateX(18px)}
.sheet.confirm h2{margin:0 0 4px}
.confirm-row{display:flex;gap:10px;margin-top:6px}
.confirm-row button{flex:1;margin-top:8px}

@media(max-width:430px){
  .gc{display:none}
  .kbtn{height:48px;font-size:15px}
  .keyboard-in{gap:5px}
  .krow{gap:4px}
  .scene{height:168px}
}
@media(prefers-reduced-motion:reduce){
  .scene.miss,.blank.pop{animation:none}
}