/* ============================================================
   Wordquake — styles
   ============================================================ */

:root{
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2,.8,.25,1);
  --font: ui-rounded, "Segoe UI Variable Display", "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --dur: 1;
}

/* ---------- themes ---------- */
[data-theme="midnight"]{
  --bg:#080b1a; --bg2:#101533; --glow1:#3b2bd6; --glow2:#0b8ba8;
  --panel:rgba(255,255,255,.055); --panel-line:rgba(255,255,255,.11);
  --ink:#f2f4ff; --ink-dim:#a3a9d0; --ink-faint:#69709b;
  --tile:#1b2246; --tile-2:#141a38; --tile-edge:rgba(255,255,255,.14);
  --accent:#6c5cff; --accent-2:#22d3ee; --good:#2ee6a8; --bad:#ff5f7e;
  --gold:#ffc94d; --hazard:#ff6b4a; --ring:rgba(108,92,255,.55);
  --scrim:rgba(5,7,18,.72);
}
[data-theme="neon"]{
  --bg:#05050a; --bg2:#0d0a1f; --glow1:#ff2ea6; --glow2:#00e5ff;
  --panel:rgba(255,255,255,.05); --panel-line:rgba(255,46,166,.28);
  --ink:#f7f7ff; --ink-dim:#b9a6d6; --ink-faint:#7a6a99;
  --tile:#161029; --tile-2:#0e0a1c; --tile-edge:rgba(0,229,255,.35);
  --accent:#ff2ea6; --accent-2:#00e5ff; --good:#39ff14; --bad:#ff3b3b;
  --gold:#ffe600; --hazard:#ff6b4a; --ring:rgba(0,229,255,.6);
  --scrim:rgba(3,3,8,.78);
}
[data-theme="terminal"]{
  --bg:#03120a; --bg2:#052012; --glow1:#00ff88; --glow2:#0aa04f;
  --panel:rgba(0,255,136,.06); --panel-line:rgba(0,255,136,.22);
  --ink:#ccffe0; --ink-dim:#7fd8a6; --ink-faint:#4d9169;
  --tile:#08281a; --tile-2:#04190f; --tile-edge:rgba(0,255,136,.35);
  --accent:#00ff88; --accent-2:#a8ff60; --good:#00ff88; --bad:#ff5555;
  --gold:#ffe066; --hazard:#ff8a3d; --ring:rgba(0,255,136,.5);
  --scrim:rgba(1,10,5,.8);
  --font: var(--mono);
}
[data-theme="candy"]{
  --bg:#fff4fa; --bg2:#ffe8f4; --glow1:#ffb3d9; --glow2:#b8e6ff;
  --panel:rgba(255,255,255,.72); --panel-line:rgba(255,140,200,.35);
  --ink:#4a2b45; --ink-dim:#8a5f81; --ink-faint:#b08fa8;
  --tile:#ffffff; --tile-2:#ffeaf6; --tile-edge:rgba(255,120,190,.4);
  --accent:#ff5fa2; --accent-2:#48c6ff; --good:#22c98a; --bad:#ff4d6d;
  --gold:#ffb020; --hazard:#ff6b4a; --ring:rgba(255,95,162,.45);
  --scrim:rgba(90,40,70,.35);
}
[data-theme="paper"]{
  --bg:#f4f1ea; --bg2:#eae5da; --glow1:#d9d0bb; --glow2:#cfd8c9;
  --panel:rgba(255,255,255,.7); --panel-line:rgba(60,50,35,.14);
  --ink:#2b2620; --ink-dim:#6a6154; --ink-faint:#948b7c;
  --tile:#fffdf8; --tile-2:#f0e9dc; --tile-edge:rgba(60,50,35,.18);
  --accent:#bb6b3b; --accent-2:#3b7a8b; --good:#2f8f5b; --bad:#c0433f;
  --gold:#c99a2e; --hazard:#c0562f; --ring:rgba(187,107,59,.35);
  --scrim:rgba(40,34,24,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, color-mix(in srgb, var(--glow1) 42%, transparent), transparent 60%),
    radial-gradient(900px 600px at 105% 8%, color-mix(in srgb, var(--glow2) 34%, transparent), transparent 62%),
    linear-gradient(170deg, var(--bg2), var(--bg) 62%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit; color:inherit}
h1,h2,h3,p{margin:0}
kbd{
  font-family:var(--mono); font-size:.62em; padding:.15em .4em; margin-left:.5em;
  border:1px solid var(--panel-line); border-radius:5px; opacity:.6; background:rgba(0,0,0,.18);
}

#app{max-width:1180px; margin:0 auto; padding:14px clamp(10px,2.4vw,26px) 32px; min-height:100%; display:flex; flex-direction:column; gap:14px}

/* ---------------- top bar ---------------- */
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:10px 14px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--panel-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand{display:flex; flex-direction:column; gap:2px; min-width:0}
.logo{font-weight:900; letter-spacing:.14em; font-size:clamp(15px,2.1vw,21px)}
.logo-accent{color:var(--accent-2)}
.tagline{font-size:11.5px; color:var(--ink-dim); letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.hud{display:flex; align-items:stretch; gap:6px}
.hud-cell{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 16px; border-radius:12px; background:rgba(0,0,0,.22); min-width:92px;
  border:1px solid var(--panel-line);
}
.hud-label{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}
.hud-value{font-size:clamp(17px,2.6vw,25px); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.05}
.hud-timer .hud-value{color:var(--accent-2)}
.hud-timer.is-warn .hud-value{color:var(--gold)}
.hud-timer.is-low .hud-value{color:var(--bad); animation:pulse .9s infinite}
.timer-bar{position:absolute; left:10%; right:10%; bottom:3px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden}
.timer-bar i{display:block; height:100%; width:100%; background:var(--accent-2); transition:width .25s linear, background .3s}
.hud-timer.is-warn .timer-bar i{background:var(--gold)}
.hud-timer.is-low .timer-bar i{background:var(--bad)}
.hud-cell.is-bump{animation:cellBump .38s var(--ease)}
.hud-level{min-width:66px; opacity:.55; transition:opacity .3s}
.hud-level.is-live{opacity:1}

.topbar-actions{display:flex; gap:8px; justify-content:flex-end}
.icon-btn{
  width:38px; height:38px; border-radius:11px; cursor:pointer; font-size:14px;
  background:var(--panel); border:1px solid var(--panel-line); color:var(--ink);
  transition:transform .15s var(--ease), background .2s, border-color .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.12); transform:translateY(-1px)}
.icon-btn:active{transform:translateY(1px)}

/* ---------------- stage ---------------- */
.stage{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr); gap:16px; align-items:start}
@media (max-width:880px){ .stage{grid-template-columns:1fr} }

.board-col{display:flex; flex-direction:column; gap:12px}

/* rank strip */
.rank-strip{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-dim)}
.rank-name{font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.rank-track{flex:1; height:7px; border-radius:99px; background:rgba(0,0,0,.28); overflow:hidden; border:1px solid var(--panel-line)}
.rank-track i{display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .45s var(--ease)}
.rank-pct{font-variant-numeric:tabular-nums; min-width:38px; text-align:right}

/* board */
.board-shell{position:relative; padding:clamp(8px,1.6vw,14px); border-radius:22px;
  background:var(--panel); border:1px solid var(--panel-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  /* Keep the whole play area on one screen: a word game you have to scroll
     to reach the submit button is a word game you lose at. */
  width:clamp(280px, 58vh, 100%); margin-inline:auto}
.board{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1.1vw,11px)}
@media (max-width:520px){ .board{gap:6px} }

.tile{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius);
  display:grid; place-items:center; cursor:pointer; user-select:none; touch-action:none;
  font-size:clamp(20px,4.4vw,34px); font-weight:800; letter-spacing:.02em;
  color:var(--ink);
  background:linear-gradient(180deg, var(--tile), var(--tile-2));
  border:1px solid var(--tile-edge);
  box-shadow:0 5px 0 rgba(0,0,0,.32), 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .13s var(--ease), box-shadow .13s var(--ease), background .2s, border-color .2s;
}
.tile:hover{transform:translateY(-2px)}
.tile.is-used{transform:translateY(4px) scale(.985); box-shadow:0 1px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--ring);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, var(--tile)), color-mix(in srgb, var(--accent) 30%, var(--tile-2)))}
.tile.is-head{transform:translateY(4px) scale(1.03); box-shadow:0 0 0 3px var(--accent-2), 0 8px 26px color-mix(in srgb, var(--accent-2) 55%, transparent)}
.tile.is-gold{background:linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #7a4b00)); color:#2a1c00; border-color:rgba(255,255,255,.5)}
.tile.is-hazard{background:linear-gradient(180deg, color-mix(in srgb, var(--hazard) 82%, #000), color-mix(in srgb, var(--hazard) 45%, #000)); border-color:rgba(255,255,255,.35)}
.tile.is-gold::after,.tile.is-hazard::after{position:absolute; top:4px; right:6px; font-size:.42em; line-height:1}
.tile.is-gold::after{content:"★"}
.tile.is-hazard::after{content:"−1s"}
.tile.is-dead{opacity:.35; pointer-events:none}
.tile.is-bad{animation:shakeX .32s}
.tile.is-pop{animation:tilePop .3s var(--ease)}
.tile.is-flip{animation:flip .42s var(--ease)}
.tile-letter{pointer-events:none}

.bigword{
  position:absolute; inset:auto 0 46%; margin:auto; width:max-content; pointer-events:none;
  font-size:clamp(26px,7vw,64px); font-weight:900; letter-spacing:.05em; opacity:0;
  background:linear-gradient(90deg,var(--gold),var(--accent-2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 12px 40px rgba(0,0,0,.5);
}
.bigword.is-on{animation:bigWord 1s var(--ease)}

/* entry */
.entry{display:flex; flex-direction:column; gap:10px}
.entry-word{
  min-height:64px; display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-radius:var(--radius); background:rgba(0,0,0,.25); border:1px dashed var(--panel-line);
  transition:border-color .2s, background .2s;
}
.entry-word.is-active{border-style:solid; border-color:var(--ring); background:rgba(0,0,0,.34)}
.entry-placeholder{color:var(--ink-faint); font-size:15px}
.entry-text{font-size:clamp(22px,3.6vw,32px); font-weight:900; letter-spacing:.16em; text-transform:uppercase}
.entry-score{margin-left:auto; font-size:13px; font-weight:800; color:var(--good); opacity:0; transition:opacity .15s}
.entry-score.is-on{opacity:1}
.entry-actions{display:flex; gap:8px}
.btn-hint-inline{display:none}
.btn{
  border-radius:12px; padding:11px 18px; cursor:pointer; font-weight:700; font-size:14px;
  background:var(--panel); border:1px solid var(--panel-line); color:var(--ink);
  transition:transform .14s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 65%, #000)); border-color:transparent; color:#fff; box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn-primary:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%, #fff),var(--accent))}
.btn-ghost{background:transparent}
.btn-tiny{padding:6px 11px; font-size:12px; border-radius:9px}
.btn-large{padding:14px 34px; font-size:16px}
.btn-icon-only{padding:11px 14px}
.icon-btn:focus-visible,.btn:focus-visible,.tile:focus-visible,.mode-card:focus-visible,.segmented button:focus-visible,.tab:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

/* combo */
.combo{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-faint); opacity:.85}
.combo-text{font-weight:800; color:var(--ink-dim); min-width:82px}
.combo[data-active="true"] .combo-text{color:var(--gold)}
.combo-track{flex:1; height:8px; border-radius:99px; background:rgba(0,0,0,.28); overflow:hidden; border:1px solid var(--panel-line)}
.combo-track i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--bad)); transition:width .2s linear, background .3s}
.combo[data-hot="true"] .combo-track i{background:linear-gradient(90deg,var(--gold),var(--good),var(--accent-2))}

.hint-bar{display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px; font-size:13.5px;
  background:color-mix(in srgb, var(--gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.hint-pin{font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--gold)}

/* ---------------- side ---------------- */
.side-col{display:flex; flex-direction:column; gap:12px; position:sticky; top:14px}
@media (max-width:880px){ .side-col{position:static} }
.panel{border-radius:var(--radius); background:var(--panel); border:1px solid var(--panel-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:12px 13px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.panel-head h2{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); font-weight:800; display:flex; align-items:center; gap:8px}
.pill{display:inline-block; padding:1px 8px; border-radius:99px; background:rgba(0,0,0,.3); border:1px solid var(--panel-line); font-size:11px; font-variant-numeric:tabular-nums}

.wordlist{display:flex; flex-wrap:wrap; gap:6px; max-height:min(46vh,420px); overflow:auto; align-content:flex-start}
.wordlist-review{max-height:min(38vh,340px)}
.empty-note{color:var(--ink-faint); font-size:13px; line-height:1.5}

.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 10px; border-radius:9px; font-size:13.5px; font-weight:700; letter-spacing:.02em;
  background:rgba(0,0,0,.24); border:1px solid var(--panel-line); color:var(--ink);
  animation:chipIn .26s var(--ease); transition:transform .13s var(--ease), border-color .2s, background .2s;
}
.chip:hover{transform:translateY(-1px); border-color:var(--ring)}
.chip .chip-pts{font-size:10.5px; color:var(--ink-faint); font-weight:800}
.chip.is-common{border-color:color-mix(in srgb, var(--good) 45%, transparent)}
.chip.is-common .chip-pts{color:var(--good)}
.chip.is-missed{opacity:.92; background:transparent; border-style:dashed}
.chip.is-starred{background:color-mix(in srgb, var(--gold) 20%, transparent); border-color:color-mix(in srgb, var(--gold) 60%, transparent)}
.chip .star{font-size:11px; color:var(--gold)}

.live-row{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; border-bottom:1px dashed var(--panel-line)}
.live-row:last-child{border-bottom:none}
.live-row span{color:var(--ink-faint)}
.live-row strong{font-variant-numeric:tabular-nums; text-align:right}

/* ---------------- overlays ---------------- */
.overlay{
  position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:16px;
  background:var(--scrim); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); overflow:auto;
}
.overlay.is-open{display:grid; animation:fadeIn .18s var(--ease)}
.modal{
  width:min(660px,100%); border-radius:22px; padding:clamp(16px,2.6vw,28px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tile) 88%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  border:1px solid var(--panel-line); box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:modalIn .26s var(--ease);
}
.modal-wide{width:min(880px,100%)}
.modal-narrow{width:min(430px,100%)}
.modal-title{font-size:clamp(28px,6vw,46px); font-weight:900; letter-spacing:.12em; text-align:center; line-height:1}
.modal-title span{color:var(--accent-2)}
.modal-h2{font-size:21px; font-weight:800; letter-spacing:.02em}
.modal-sub{color:var(--ink-dim); font-size:14px; margin-top:6px; line-height:1.55}

.mode-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:18px 0 16px}
.mode-card{
  position:relative; text-align:left; cursor:pointer; padding:14px; border-radius:16px;
  background:rgba(0,0,0,.24); border:1px solid var(--panel-line); color:var(--ink);
  display:flex; flex-direction:column; gap:6px; transition:transform .15s var(--ease), border-color .2s, background .2s;
}
.mode-card:hover{transform:translateY(-2px)}
.mode-card.is-selected{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, rgba(0,0,0,.24)); box-shadow:0 0 0 1px var(--accent)}
.mode-emoji{font-size:22px}
.mode-name{font-weight:800; font-size:15.5px; letter-spacing:.03em}
.mode-desc{font-size:12.5px; color:var(--ink-dim); line-height:1.5}
.mode-best{font-size:11px; color:var(--ink-faint); font-weight:700; letter-spacing:.06em; margin-top:2px}

.setup-row{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:18px}
.setup-group{display:flex; flex-direction:column; gap:6px; align-items:center}
.setup-label{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:800}
.segmented{display:inline-flex; padding:3px; border-radius:12px; background:rgba(0,0,0,.3); border:1px solid var(--panel-line); gap:2px}
.segmented button{
  border:none; background:transparent; cursor:pointer; padding:7px 13px; border-radius:9px;
  font-size:12.5px; font-weight:700; color:var(--ink-dim); transition:background .2s, color .2s;
}
.segmented button:hover{color:var(--ink)}
.segmented button.is-on{background:var(--accent); color:#fff}
.segmented-sm button{padding:5px 10px; font-size:12px}

.start-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.mini-stats{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-dim)}
.mini-stats b{color:var(--ink); font-variant-numeric:tabular-nums}
.fineprint{text-align:center; font-size:12px; color:var(--ink-faint); margin-top:14px}
.link-btn{background:none; border:none; color:var(--accent-2); cursor:pointer; font-size:12px; padding:0; text-decoration:underline}

/* results */
.results-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap}
.eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:800}
.res-score{font-size:clamp(40px,9vw,68px); font-weight:900; line-height:1; font-variant-numeric:tabular-nums}
.res-rank{font-size:13.5px; color:var(--ink-dim); margin-top:4px}
.res-rank span:first-child{color:var(--accent-2); font-weight:800}
.res-badges{display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; max-width:340px}
.badge{padding:5px 11px; border-radius:99px; font-size:11.5px; font-weight:800; letter-spacing:.04em;
  background:color-mix(in srgb, var(--gold) 20%, transparent); border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); animation:chipIn .3s var(--ease)}
.badge.is-new{background:color-mix(in srgb, var(--good) 22%, transparent); border-color:color-mix(in srgb, var(--good) 60%, transparent)}

.res-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:9px; margin:18px 0}
.res-stat{padding:11px 12px; border-radius:13px; background:rgba(0,0,0,.24); border:1px solid var(--panel-line)}
.res-stat span{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:800}
.res-stat strong{font-size:19px; font-variant-numeric:tabular-nums}

.tabs{display:flex; gap:6px; border-bottom:1px solid var(--panel-line); margin-bottom:12px}
.tab{background:none; border:none; cursor:pointer; padding:9px 13px; font-size:13.5px; font-weight:800; color:var(--ink-faint);
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s}
.tab.is-on{color:var(--ink); border-bottom-color:var(--accent-2)}
.tab span{font-size:11px; opacity:.7}
.missed-controls{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.missed-note{font-size:11.5px; color:var(--ink-faint)}
.modal-actions{display:flex; gap:9px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
.modal-actions-col{flex-direction:column; align-items:stretch}

/* word card */
.word-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-word h2{font-size:29px; font-weight:900; letter-spacing:.05em; text-transform:uppercase}
.word-meta{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); font-weight:800; margin-top:4px}
.word-def{font-size:14.5px; line-height:1.62; color:var(--ink-dim); margin-top:12px; white-space:pre-line}
.word-def b{color:var(--ink)}

/* help + settings */
.help-list{margin:16px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.6; color:var(--ink-dim)}
.help-list strong{color:var(--ink)}
.settings-list{display:flex; flex-direction:column; gap:4px; margin-top:16px}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 4px; border-bottom:1px dashed var(--panel-line); font-size:14px}
.setting-row:last-child{border-bottom:none}
.setting-row input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); cursor:pointer}
.setting-hint{display:block; font-style:normal; font-size:11.5px; color:var(--ink-faint); margin-top:2px}
.settings-note{font-size:11.5px; line-height:1.55; color:var(--ink-faint); margin-top:12px}
.def-off{color:var(--ink-faint)}
.theme-dots{display:flex; gap:8px}
.theme-dot{width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s var(--ease), border-color .2s}
.theme-dot:hover{transform:scale(1.1)}
.theme-dot.is-on{border-color:var(--ink)}

/* toasts */
.toast-wrap{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(420px,92vw)}
.toast{
  padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:700; text-align:center;
  background:rgba(10,12,24,.92); border:1px solid var(--panel-line); color:var(--ink);
  box-shadow:0 14px 40px rgba(0,0,0,.5); animation:toastIn .22s var(--ease);
}
.toast.is-good{border-color:color-mix(in srgb, var(--good) 60%, transparent); color:var(--good)}
.toast.is-bad{border-color:color-mix(in srgb, var(--bad) 60%, transparent); color:var(--bad); animation:shakeX .32s}
.toast.is-info{border-color:var(--panel-line)}
.toast.is-out{animation:toastOut .25s var(--ease) forwards}

/* floating fx */
.fx-layer{position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden}
.float-pts{position:absolute; font-weight:900; font-size:22px; color:var(--good); text-shadow:0 4px 18px rgba(0,0,0,.55); animation:floatUp .95s var(--ease) forwards}
.float-pts.is-big{font-size:34px; color:var(--gold)}
.spark{position:absolute; width:7px; height:7px; border-radius:2px; background:var(--gold); animation:sparkFly .7s var(--ease) forwards}

/* ---------------- animation ---------------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
@keyframes cellBump{0%{transform:scale(1)}45%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes tilePop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg) scale(.92)}100%{transform:rotateX(0)}}
@keyframes bigWord{0%{opacity:0; transform:scale(.7) rotate(-3deg)}25%{opacity:1; transform:scale(1.04) rotate(1deg)}70%{opacity:1}100%{opacity:0; transform:scale(1.1) translateY(-18px)}}
@keyframes chipIn{from{opacity:0; transform:translateY(4px) scale(.94)}to{opacity:1; transform:none}}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px)}}
@keyframes floatUp{0%{opacity:0; transform:translateY(6px) scale(.8)}25%{opacity:1; transform:translateY(-6px) scale(1.05)}100%{opacity:0; transform:translateY(-58px) scale(1)}}
@keyframes sparkFly{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes quake{0%,100%{transform:translate(0,0)}10%{transform:translate(-7px,3px)}25%{transform:translate(6px,-4px)}40%{transform:translate(-5px,-3px)}55%{transform:translate(4px,4px)}70%{transform:translate(-3px,1px)}85%{transform:translate(2px,-2px)}}
.is-quaking{animation:quake .6s var(--ease)}

/* reduced motion */
html[data-motion="low"] *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.01s !important}
@media (prefers-reduced-motion: reduce){
  :root{--dur:.2}
}

/* small screens */
@media (max-width:640px){
  #app{padding:8px 8px 18px; gap:8px}
  .topbar{grid-template-columns:1fr auto; gap:6px; padding:8px 10px}
  .topbar .hud{grid-column:1/-1; order:3; justify-content:space-between}
  .hud-cell{flex:1; min-width:0; padding:4px 8px}
  .hud-value{font-size:18px}
  .tagline{display:none}
  .topbar-actions{justify-content:flex-end}
  .side-col{order:2}
  .board-col{order:1}
  .wordlist{max-height:26vh}
  .entry-word{min-height:48px; padding:8px 12px}
  .entry-text{font-size:22px}
  .entry-actions .btn{padding:10px 12px}
  .entry-actions kbd{display:none}
  .board-shell{padding:6px}
  .board{gap:5px}
  .combo{gap:8px; font-size:11.5px}
  .btn-hint-inline{display:inline-flex}
  #btnHint{display:none}
  /* Keep the whole setup on one screen: nobody should have to scroll to
     find the Play button on the device most people actually use. */
  .mode-grid{grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 10px}
  .overlay{padding:10px}
  .modal{padding:14px}
  .mode-card{padding:10px; gap:3px}
  .mode-emoji{font-size:17px}
  .mode-name{font-size:13.5px}
  .mode-desc{font-size:11px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .mode-best{font-size:10px}
  .setup-row{gap:10px; margin-bottom:10px}
  .setup-label{font-size:9.5px}
  .segmented button{padding:6px 9px; font-size:11.5px}
  .modal-title{font-size:30px}
  .modal-sub{font-size:12.5px}
  .fineprint{margin-top:10px}
  .mini-stats{gap:10px; font-size:11.5px}
}