:root{
  --bg:#FFF3D6; --card:#FFFDF6; --ink:#4A3B23; --ink2:#7E6C46; --ink3:#7A6844; --line:#F0E2C0;
  --c1:#F25C43; --c2:#3E97E0; --c3:#4CB463; --c4:#A05FD0;
  --d1:#C23E28; --d2:#2C74B4; --d3:#35914A; --d4:#7E44AC;
  --t1:#FFDCD2; --t2:#CDE6F9; --t3:#D3F0D9; --t4:#EADAF8;
  --gold:#FFB020; --goldT:#FFE7B8; --goldInk:#8A5E06;
  --press:rgba(74,59,35,.16);
  --srf:#fff; --srf2:#FFF6E3; --onInk:#FFF6E3; --inkSh:#2E2415; --inkSh2:#241B0C;
  --keyN:#8A7754; --cream2:#C9B893;
  --nudgeTx:#B3341F; --goodTx:#2E7D3E;
  --wonBg:rgba(255,253,246,.98); --scrim:rgba(74,59,35,.5);
  --dis:#E4D7B4; --disTx:#A6946C; --disSh:#C7B78E;
  --spotSh:rgba(74,59,35,.28);
  --cell:72px;
  --font:ui-rounded,'Segoe UI',system-ui,sans-serif; --display:ui-rounded,'Segoe UI',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#221B10; --card:#2E261A; --ink:#F3E9D2; --ink2:#C2B291; --ink3:#A9976F; --line:#4A3E28;
  --c1:#F26A52; --c2:#4EA3E8; --c3:#57BF6E; --c4:#B075DC;
  --d1:#A93A26; --d2:#2B6FA9; --d3:#337F44; --d4:#7443A0;
  --t1:#4E2A22; --t2:#24384C; --t3:#25402B; --t4:#3A2B4A;
  --goldT:#4A3812; --goldInk:#FFC95E;
  --press:rgba(0,0,0,.42);
  --srf:#3B3222; --srf2:#332B1D; --onInk:#FFF6E3; --inkSh:#0F0B05; --inkSh2:#0F0B05;
  --keyN:#A08A5F; --cream2:#6B5B3A;
  --nudgeTx:#FFB3A3; --goodTx:#7BD98F;
  --wonBg:rgba(40,33,20,.97); --scrim:rgba(12,9,4,.62);
  --dis:#3A3324; --disTx:#8A7B58; --disSh:#241E12;
  --spotSh:rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--font);color:var(--ink)}
a{color:var(--ink2)} a:hover{color:var(--ink)}
button{font-family:inherit;color:inherit}
/* ---------- shell: one shared grid ---------- */
.shell{min-height:100vh;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:20px 28px 34px}
.topbar{display:flex;flex-direction:column;gap:12px}
.brand-row{position:relative;display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:13px;background:var(--c1);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;box-shadow:0 4px 0 var(--d1);transform:rotate(-4deg);flex:none}
.brandcopy{min-width:0}
.title{font-family:var(--display);font-weight:800;font-size:25px;line-height:1.05}
.subtitle{font-size:12px;font-weight:600;color:var(--ink3);margin-top:1px;white-space:nowrap}
.topactions{display:flex;gap:7px;margin-left:auto}
.btn-ghost{font-size:13px;font-weight:800;border:none;border-radius:999px;padding:9px 15px;cursor:pointer;background:var(--srf);color:var(--ink);box-shadow:0 3px 0 var(--press);white-space:nowrap}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 var(--press)}
.sound-btn{min-width:96px}
.sound-btn.is-muted{opacity:.72;text-decoration:line-through;text-decoration-thickness:2px}
/* nav row: difficulty segments + puzzle stepper share one line */
.nav-row{display:flex;gap:10px;align-items:stretch}
.pills{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pill{border:none;background:var(--srf);border-radius:999px;padding:7px 8px;min-height:52px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.1;box-shadow:0 3px 0 var(--press);color:var(--ink2)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--press)}
.pill.on{background:var(--ink);color:var(--bg);box-shadow:0 3px 0 var(--inkSh)}
.size-label{font-size:13px;font-weight:800}
.size-count{font-size:9px;font-weight:700;white-space:nowrap}
.pill.on .size-count{opacity:.8}
.nav{flex:0 0 350px;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:7px}
.navbtn{font-size:17px;font-weight:800;color:var(--ink2);background:var(--srf);border:none;border-radius:999px;width:100%;min-height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 3px 0 var(--press)}
.navbtn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--press)}
.navbtn:disabled{opacity:.35;cursor:default}
.picksel{font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--srf);border:none;border-radius:999px;padding:8px 14px;width:100%;cursor:pointer;box-shadow:0 3px 0 var(--press)}
/* ---------- main columns ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"play side";gap:18px;align-items:start}
.playfield{grid-area:play;min-width:0}
.side{grid-area:side;min-width:0;display:flex;flex-direction:column;gap:14px}
/* ---------- playfield card: board + keypad + check, one unit ---------- */
.boardcard{position:relative;width:100%;background:var(--card);border-radius:24px;padding:22px;box-shadow:0 8px 0 var(--press),0 22px 40px var(--spotSh);display:flex;flex-direction:column;align-items:center;gap:15px}
#board-root{display:flex;flex-direction:column;align-items:center;gap:13px}
.board-frame{position:relative;flex:none;margin-inline:auto}
.board{position:relative;transform-origin:top left}
.board > svg{position:absolute;inset:0;pointer-events:none}
.pangram-halo{stroke:var(--gold);opacity:.9;filter:drop-shadow(0 0 5px rgba(255,176,32,.8))}
.pangram-halo.new{animation:pangram-awaken 1.2s ease-out both}
.word-complete-flash{opacity:.78;filter:drop-shadow(0 0 8px currentColor);animation:word-cage-pulse .42s ease-out both}
.cellbtn{position:absolute;width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tile{width:56px;height:56px;border-radius:15px;background:var(--srf);box-shadow:0 4px 0 var(--press);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:27px;line-height:1}
.tile.given{color:#fff;animation:none}
.tile.proved{animation:none}
.tile.checking-pressed{animation:check-tile-press .2s ease-in both}
.tile.proved.just-locked{animation:lock-in .55s cubic-bezier(.2,.9,.25,1.2) both}
.dot{width:7px;height:7px;border-radius:50%;background:var(--press)}
.outs{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none}
.outs span{font-size:14px;font-weight:800;text-decoration:line-through;text-decoration-thickness:2.5px}
.marks{position:absolute;bottom:5px;left:3px;right:3px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;pointer-events:none;line-height:1}
.marks span{font-size:13px;font-weight:800}
.mark-note{opacity:.9}
.mark-out{text-decoration:line-through;text-decoration-thickness:2.5px;opacity:.62}
.cage-glow{opacity:0;transition:opacity .16s ease;pointer-events:none}
.badge.spot{transform:scale(1.22);transition:transform .16s cubic-bezier(.2,.9,.25,1.4)}
.cursor-ring{position:absolute;width:60px;height:60px;border-radius:17px;border:3px solid var(--ink);box-shadow:0 0 0 5px rgba(255,197,49,.55);animation:cursor 1.4s ease-in-out infinite;pointer-events:none}
.badge{position:absolute;width:21px;height:21px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;pointer-events:none}
.badge.pangram-complete{background:var(--gold)!important;box-shadow:0 2px 0 #D18E12,0 0 12px rgba(255,176,32,.65)!important}
/* ---------- keypad ---------- */
.keys{display:flex;flex-direction:column;align-items:center;gap:9px}
.key-row{display:flex;gap:9px;justify-content:center}
.key-row.tools{gap:10px}
.key{position:relative;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;width:52px;height:62px;border-radius:15px;background:var(--srf);border:none;box-shadow:0 4px 0 var(--press);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform .08s}
.key:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--press)}
.key .L{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);line-height:1.1}
.key .n{font-size:10px;font-weight:700;color:var(--keyN)}
.key.backspace-key{background:var(--ink);box-shadow:0 4px 0 var(--inkSh)}
.key.backspace-key .L{color:var(--bg)}
.key.backspace-key .n{color:var(--cream2);font-size:8.5px}
.key.tool-key{width:auto;min-width:108px;height:44px;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:13px}
.key.tool-key .L{font-size:17px;line-height:1}
.key.tool-key .n{font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.key:disabled{opacity:.35;cursor:default;transform:none}
.key.dim{opacity:.35}
.key.struck{background:var(--t1)}
.key.struck .L{color:var(--d1);text-decoration:line-through;text-decoration-thickness:2.5px}
.keyhelp{font-size:12px;font-weight:600;color:var(--ink3);text-align:center;max-width:100%;min-height:30px;text-wrap:pretty}
.notes-key .L{font-size:19px}
.notes-key.on{background:var(--ink);box-shadow:0 4px 0 var(--inkSh2)}
.notes-key.on .L,.notes-key.on .n{color:var(--bg)}
.key.noted{box-shadow:0 4px 0 var(--press),inset 0 0 0 2.5px var(--c2)}
.key.noting .L{color:var(--d2)}
/* ---------- check bar: docked with the keypad ---------- */
.checkbar{width:100%}
.checkbar-inner{width:100%;display:flex;align-items:center;gap:16px;padding-top:6px}
.check-trigger{border:none;border-radius:18px;background:var(--c1);color:#fff;box-shadow:0 7px 0 var(--d1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform .1s,box-shadow .1s,filter .15s;flex:none;min-width:208px;min-height:70px;padding:6px 26px}
.check-trigger:hover:not(:disabled){filter:brightness(1.06)}
.check-trigger:not(:disabled):active{transform:translateY(5px);box-shadow:0 1px 0 var(--d1)}
.check-trigger:disabled{background:var(--dis);color:var(--disTx);box-shadow:0 4px 0 var(--disSh);cursor:default}
.checkbar-inner.checking .check-trigger{transform:translateY(5px);box-shadow:0 1px 0 var(--d1)}
.check-label{font-size:23px;font-weight:800;letter-spacing:.1em;line-height:1.1}
.check-caption{font-size:10.5px;font-weight:700;opacity:.9}
.check-trigger:disabled .check-caption{color:var(--disTx);opacity:1}
.check-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.check-meter{display:flex;align-items:center;gap:9px}
.check-meter>span{font-size:11px;font-weight:700;color:var(--ink2);white-space:nowrap}
.check-lights{display:flex;gap:7px}
.check-light{display:block;width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:0 2px 0 #D18E12,inset 0 2px 2px rgba(255,255,255,.6)}
.check-light.spent{background:var(--dis);box-shadow:inset 0 2px 3px var(--press)}
.check-note{font-size:11px;font-weight:700;color:var(--ink3);text-wrap:pretty}
.practice-tag{align-self:flex-start;background:var(--t2);color:var(--d2);border-radius:999px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.08em}
.check-totals{display:flex;gap:6px}
.check-stat{min-width:62px;background:var(--srf2);border-radius:11px;padding:7px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.check-stat b{font-size:17px;font-weight:800}
.check-stat span{margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.check-stat.locked-total b{color:var(--d3)}
.check-stat.popped-total b{color:var(--d1)}
.check-restart{background:var(--srf);color:var(--ink2);border:none;border-radius:10px;padding:7px 10px;font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 var(--press);flex:none}
/* ---------- side rail ---------- */
.panel{background:var(--card);border-radius:18px;padding:15px 17px;box-shadow:0 5px 0 rgba(74,59,35,.08);display:flex;flex-direction:column;gap:10px}
.panel h3{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--ink3)}
.panel .note{font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ink2)}
.wchips{display:flex;flex-wrap:wrap;gap:6px}
.wchip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:800;line-height:1.2;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.wchip .wnum{font-size:10px;font-weight:800;opacity:.7}
.wchip.todo{border:2px dashed var(--line);color:var(--ink3);background:none}
.wchip.star{box-shadow:0 0 0 2px var(--goldT)}
.wchip.spot{transform:translateY(-2px) scale(1.05);box-shadow:0 0 0 2.5px var(--ink)}
.wchip .wstar{color:var(--gold)}
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sc-stat{background:var(--bg);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.sc-stat b{font-size:19px;font-weight:800;color:var(--ink);line-height:1.05}
.sc-stat span{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.sc-stat.gold{background:var(--goldT)}
.sc-stat.gold b{color:var(--goldInk)}
.sc-stat.gold span{color:var(--goldInk)}
.sc-line{position:relative;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--ink3)}
.tier-badge{position:relative;z-index:2;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--goldInk);background:var(--goldT);border-radius:999px;padding:5px 14px;box-shadow:0 0 0 2px var(--gold)}
.tier-badge.perfect{color:var(--bg);background:var(--ink);box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(255,176,32,.55);animation:tier-pop .6s cubic-bezier(.2,.9,.25,1.5) both}
/* ---------- coach (tour card inside the tutorial modal) ---------- */
.coach{position:relative;width:100%;background:var(--card);border-radius:20px;padding:16px 17px 13px;box-shadow:0 5px 0 rgba(74,59,35,.16),0 14px 30px rgba(60,44,18,.14);display:flex;flex-direction:column;gap:7px;animation:coach-in .34s cubic-bezier(.2,.9,.25,1.35) both}
.coach-kicker{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--ink3)}
.coach h3{margin:0;font-size:18px;font-weight:800;line-height:1.18;color:var(--ink);text-wrap:balance}
.coach p{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.coach{min-height:142px}
.coach-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.coach-dots{display:flex;gap:5px}
.coach-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.coach-dots i.past{background:var(--ink3)}
.coach-dots i.on{background:var(--ink);width:16px;border-radius:3px}
.coach-cta{border:0;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 18px;font-size:13px;font-weight:800;letter-spacing:.03em;cursor:pointer;box-shadow:0 4px 0 var(--inkSh2);min-height:44px}
.coach-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--inkSh2)}
.coach-ring{animation:coach-ring 1.5s ease-in-out infinite}
.cellbtn.coach-ring{z-index:6;border-radius:12px}
.intro-tip{background:var(--bg);border-radius:12px;padding:9px 12px;font-size:13px}
/* ---------- settings popover ---------- */
.settings-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(320px,calc(100vw - 24px));background:var(--card);border-radius:18px;padding:16px 17px;box-shadow:0 8px 0 var(--press),0 24px 50px var(--spotSh)}
.settings-pop[hidden]{display:none}
.settings-pop .panel{padding:0;box-shadow:none;border-radius:0;background:none}
.fx-row{display:flex;align-items:center;gap:9px}
.fx-row label{font-size:12px;font-weight:800;color:var(--ink2);white-space:nowrap}
.fx-row output{margin-left:auto;font-size:11px;font-weight:800;color:var(--ink3);min-width:56px;text-align:right}
.fx-slider{flex:1;min-width:70px;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--t2),var(--c1));outline:none;cursor:pointer}
.fx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--srf);box-shadow:0 3px 0 var(--press),0 0 0 2px var(--c1);cursor:pointer}
.fx-slider::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--srf);box-shadow:0 3px 0 var(--press),0 0 0 2px var(--c1);cursor:pointer}
.fx-slider:focus-visible{outline:3px solid rgba(62,151,224,.5);outline-offset:3px}
/* ---------- footer ---------- */
.pagefoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--ink3);font-size:11px;font-weight:600;text-align:center}
.linklike{border:0;background:none;font-size:11px;font-weight:800;color:var(--ink2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.linklike:hover{color:var(--ink)}
.feedback-launch{display:none;position:fixed;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;border:0;border-radius:999px;padding:10px 15px;background:var(--ink);color:var(--bg);box-shadow:0 4px 0 var(--inkSh);font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer}
/* ---------- fx layers ---------- */
.wrong-pop{position:absolute;width:72px;height:72px;z-index:8;pointer-events:none}
.fx-layer{position:absolute;transform-origin:top left;pointer-events:none;z-index:20;overflow:visible}
.pop-letter{position:absolute;left:8px;top:8px;width:56px;height:56px;border-radius:15px;font-family:var(--display);background:var(--srf);border:4px solid currentColor;box-shadow:0 4px 0 var(--press);display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800;animation:wrong-letter-pop .5s cubic-bezier(.3,-.6,.7,1.6) both}
.pop-ring{position:absolute;left:20px;top:20px;width:32px;height:32px;border:6px solid currentColor;border-radius:50%;animation:pop-ring .7s cubic-bezier(.1,.8,.3,1) both}
.pop-ring.two{border-width:3px;border-color:var(--gold);animation:pop-ring .85s cubic-bezier(.1,.8,.3,1) 90ms both}
.pop-flash{position:absolute;left:2px;top:2px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,224,150,.85) 45%,rgba(255,197,49,0) 72%);animation:pop-flash .34s ease-out both}
.shard{position:absolute;width:16px;height:16px;border-radius:4px;background:currentColor;z-index:9;pointer-events:none;animation:shard-fly .8s cubic-bezier(.16,.72,.32,1) var(--delay,0ms) both}
.board.kick{animation:board-kick .42s cubic-bezier(.36,.07,.19,.97) both}
.confetto{position:absolute;width:9px;height:14px;border-radius:2.5px;z-index:9;pointer-events:none;animation:confetti-blast 1.35s cubic-bezier(.11,.62,.36,1) var(--delay,0ms) both}
.confetto.streamer{border-radius:1px;animation-duration:1.6s}
.readout{display:none}
.word-moment{position:absolute;z-index:12;min-width:160px;max-width:230px;transform:translate(-50%,-50%) rotate(-2deg);border:2.5px solid rgba(255,255,255,.8);border-radius:15px;background:var(--ink);color:var(--bg);padding:9px 15px;text-align:center;pointer-events:none;box-shadow:0 10px 26px var(--spotSh);animation:word-moment-in .45s cubic-bezier(.2,.85,.25,1.15) both}
.word-moment span{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cream2)}
.word-moment b{display:block;margin-top:2px;font-size:21px;font-weight:800;letter-spacing:.07em}
.word-moment .wm-gold{color:var(--gold)}
/* ---------- end overlay ---------- */
.won{position:absolute;inset:-20px;border-radius:24px;background:var(--wonBg);display:flex;align-items:center;justify-content:center;animation:rise .4s ease-out both;padding:0;overflow:hidden}
.won-inner{position:relative;z-index:2;width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px 16px;text-align:center}
.won-inner>*{position:relative;z-index:2;flex:none}
.won h2{margin:0;font-weight:800;font-size:25px;line-height:1.12;text-wrap:balance}
.won .big{font-weight:800;font-size:34px;color:var(--d1);line-height:1}
.won .sub{font-size:13.5px;font-weight:600;color:var(--ink2)}
.won .bonus-line{font-size:12.5px;font-weight:800;color:var(--goldInk);background:var(--goldT);border-radius:999px;padding:4px 12px}
.won .wchips{justify-content:center;max-width:340px}
.won .sub,.won .sc-line{max-width:330px;text-wrap:pretty}
.end-actions{position:relative;z-index:2;width:min(100%,330px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.end-actions .btn-ghost{margin:0;padding:9px 10px}
.end-actions .end-primary{background:var(--c1);color:#fff;box-shadow:0 3px 0 var(--d1)}
.celebration{position:absolute;inset:0;z-index:1;pointer-events:none}
.celebration-piece{--x:50%;--delay:0ms;--drift:20px;position:absolute;left:var(--x);top:-14px;width:9px;height:16px;border-radius:2px;animation:confetti-fall 1.8s cubic-bezier(.15,.65,.35,1) var(--delay) both}
.celebration-piece.c0{background:var(--c1)}.celebration-piece.c1{background:var(--c2)}.celebration-piece.c2{background:var(--c3)}.celebration-piece.c3{background:var(--gold)}
/* ---------- modals ---------- */
.modal-open{overflow:hidden}
.lk-modal[hidden]{display:none}
.lk-modal{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:18px}
.lk-dialog{position:relative;width:min(100%,500px);max-height:calc(100vh - 36px);overflow:auto;background:var(--card);border-radius:24px;padding:26px;box-shadow:0 12px 0 var(--spotSh),0 30px 70px var(--spotSh)}
.lk-dialog{scrollbar-gutter:stable}
.lk-dialog h2{margin:0 36px 4px 0;font-size:25px;font-weight:800}
.lk-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--srf2);color:var(--ink);font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--press)}
.lk-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--press)}
.q-form{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.q-field{display:flex;flex-direction:column;gap:8px}
.q-label{font-size:13px;font-weight:800;color:var(--ink)}
.q-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.q-options.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.q-option{position:relative;cursor:pointer}
.q-option input{position:absolute;opacity:0;pointer-events:none}
.q-option span{min-height:40px;border:none;border-radius:12px;background:var(--srf2);box-shadow:0 3px 0 var(--press);display:flex;align-items:center;justify-content:center;padding:7px 4px;text-align:center;font-size:12px;font-weight:700;color:var(--ink2)}
.q-option input:checked+span{background:var(--ink);color:var(--bg);box-shadow:0 3px 0 var(--inkSh)}
.q-option input:focus-visible+span{outline:3px solid rgba(62,151,224,.5);outline-offset:2px}
.q-notes{width:100%;min-height:76px;resize:vertical;border:none;border-radius:12px;background:var(--srf2);box-shadow:inset 0 2px 0 rgba(74,59,35,.08);color:var(--ink);padding:11px;font:600 13px/1.4 'Baloo 2',sans-serif}
.q-actions{display:flex;gap:8px;margin-top:2px}
.q-actions button{flex:1;border:none;border-radius:999px;padding:11px 14px;font-size:12.5px;font-weight:800;cursor:pointer}
.q-primary{background:var(--c1);color:#fff;box-shadow:0 3px 0 var(--d1)}
.q-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--d1)}
.q-done{background:var(--srf);color:var(--ink);box-shadow:0 3px 0 var(--press)}
.q-status{min-height:16px;text-align:center;font-size:11px;font-weight:600;color:var(--ink3)}
html[data-theme="dark"] .tile.given,html[data-theme="inked"] .tile.given{color:var(--onInk)}
html[data-theme="dark"] .won .big,html[data-theme="inked"] .won .big{color:var(--c1)}
html[data-theme="dark"] .check-stat.locked-total b,html[data-theme="inked"] .check-stat.locked-total b{color:var(--c3)}
html[data-theme="dark"] .check-stat.popped-total b,html[data-theme="inked"] .check-stat.popped-total b{color:var(--c1)}
html[data-theme="dark"] .check-lights .check-light:not(.spent){box-shadow:0 2px 0 #8A5E06,inset 0 2px 2px rgba(255,255,255,.35)}
html[data-theme="dark"] .word-moment,html[data-theme="inked"] .word-moment{border-color:rgba(255,246,227,.35)}
html[data-theme="dark"] .cursor-ring{border-color:var(--gold)}
/* ---------- keyframes ---------- */
@keyframes coach-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes coach-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes coach-ring{0%,100%{box-shadow:0 0 0 0 rgba(242,92,67,.55)}50%{box-shadow:0 0 0 9px rgba(242,92,67,0)}}
@keyframes tier-pop{0%{transform:scale(.6) rotate(-4deg);opacity:0}60%{transform:scale(1.12) rotate(1.5deg)}100%{transform:scale(1);opacity:1}}
@keyframes lock-in{0%{transform:scale(1.16);filter:brightness(1.3);box-shadow:0 0 0 8px rgba(255,255,255,.7)}55%{transform:scale(.92)}100%{transform:scale(1);filter:none}}
@keyframes wrong-letter-pop{0%{transform:scale(1) rotate(0);opacity:1}18%{transform:scale(1.28) rotate(-9deg);filter:brightness(1.15)}34%{transform:scale(1.5) rotate(7deg);filter:brightness(1.6) saturate(1.4)}46%{transform:scale(1.62) rotate(-4deg);filter:brightness(2.2);opacity:.95}58%{transform:scale(.28) rotate(16deg);opacity:.5}100%{transform:scale(.02) rotate(26deg);opacity:0}}
@keyframes pop-ring{0%{transform:scale(.2);opacity:1}70%{opacity:.55}100%{transform:scale(3.4);opacity:0}}
@keyframes pop-flash{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}100%{transform:scale(2);opacity:0}}
@keyframes shard-fly{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 210px)) rotate(var(--rot)) scale(.55);opacity:0}}
@keyframes board-kick{0%{transform:var(--boardT) translate(0,0)}18%{transform:var(--boardT) translate(calc(-5px * var(--kick,1)),calc(3px * var(--kick,1)))}36%{transform:var(--boardT) translate(calc(5px * var(--kick,1)),calc(-3px * var(--kick,1)))}54%{transform:var(--boardT) translate(calc(-3px * var(--kick,1)),calc(2px * var(--kick,1)))}72%{transform:var(--boardT) translate(calc(3px * var(--kick,1)),calc(-1px * var(--kick,1)))}100%{transform:var(--boardT) translate(0,0)}}
@keyframes confetti-blast{0%{transform:translate(0,0) rotate(0) scale(1.15);opacity:1}28%{transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .6 - 34px)) rotate(calc(var(--rot) * .45)) scale(1)}75%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(var(--rot)) scale(.85);opacity:0}}
@keyframes pangram-awaken{0%{opacity:0;filter:drop-shadow(0 0 0 rgba(255,176,32,0))}40%{opacity:1;filter:drop-shadow(0 0 13px rgba(255,199,49,1))}100%{opacity:.9;filter:drop-shadow(0 0 5px rgba(255,176,32,.8))}}
@keyframes check-tile-press{0%{transform:translateY(0) scale(1);box-shadow:0 4px 0 var(--press)}100%{transform:translateY(5px) scale(.96);filter:brightness(.92);box-shadow:0 0 0 var(--press),inset 0 3px 5px rgba(0,0,0,.1)}}
@keyframes word-cage-pulse{0%{opacity:0;stroke-width:58}48%{opacity:.95;stroke-width:72}100%{opacity:.5;stroke-width:66}}
@keyframes word-moment-in{0%{opacity:0;transform:translate(-50%,-40%) rotate(-2deg) scale(.82)}65%{opacity:1;transform:translate(-50%,-52%) rotate(-2deg) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-2deg) scale(1)}}
@keyframes confetti-fall{0%{transform:translate(0,-20px) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--drift),620px) rotate(760deg);opacity:.85}}
@keyframes cursor{0%,100%{box-shadow:0 0 0 5px rgba(255,197,49,.55)}50%{box-shadow:0 0 0 8px rgba(255,197,49,.32)}}
@keyframes rise{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
/* ---------- responsive ---------- */
@media(max-width:1140px){
  .nav{flex-basis:300px}
}
@media(max-width:960px){
  .shell{padding:12px 12px 30px;gap:12px}
  .topbar{gap:9px}
  .logo{width:38px;height:38px;border-radius:11px;font-size:16px}
  .title{font-size:21px}
  .subtitle{font-size:11px}
  .btn-ghost{padding:8px 12px;font-size:12px}
  .sound-btn{min-width:0}
  .nav-row{flex-wrap:wrap;gap:8px}
  .pills{flex:1 1 100%;gap:6px}
  .pill{min-height:46px;padding:7px 3px}
  .size-label{font-size:12px}
  .size-count{font-size:8.5px}
  .nav{flex:1 1 100%;grid-template-columns:46px minmax(0,1fr) 46px;gap:8px}
  .navbtn{min-height:46px}
  .cols{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .playfield{order:1}
  .side{order:2}
  .boardcard{padding:14px;border-radius:18px;gap:11px;overflow:hidden}
  #board-root{width:100%}
  .checkbar-inner{padding:0 0 2px;gap:10px}
  .checkbar{order:-1}
  .check-trigger{min-width:150px;min-height:58px;padding:6px 14px;border-radius:16px}
  .check-label{font-size:19px}
  .check-caption{font-size:9.5px}
  .check-note{display:none}
  .check-mid{gap:4px}
  .keys{width:100%;gap:6px}
  .keys .key-row{width:100%;justify-content:center;gap:6px}
  .keys .key-row.tools{gap:8px}
  .keys .key{width:auto;min-width:0;max-width:52px;height:54px;flex:1 1 0}
  .keys .key .L{font-size:20px}
  .keys .key.tool-key{flex:0 1 auto;width:auto;max-width:none;min-width:104px;height:46px}
  .keys .key.tool-key .L{font-size:17px}
  .feedback-launch{display:block}
  .coach{padding:14px 15px 12px}
}
@media(max-width:560px){
  .checkbar-inner .check-stat.locked-total,.checkbar-inner .check-stat.popped-total{display:none}
  .checkbar-inner{gap:8px}
  .check-restart{padding:7px 8px}
  .brand-row{flex-wrap:wrap;row-gap:8px}
  .topactions{flex:1 1 100%;margin-left:0}
  .topactions .btn-ghost{flex:1 1 0;padding:8px 6px;font-size:11.5px}
  .check-meter>span{display:none}
  .check-trigger{min-width:132px}
  .check-stat{min-width:54px;padding:6px 6px}
  .keyhelp{font-size:11px;padding:0 8px 4px}
  .boardcard{padding-bottom:56px}
  .feedback-launch{padding:8px 12px;font-size:11px}
}
.key.refused-shake{animation:refused-shake .3s ease}
@keyframes refused-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.tile.checking-pressed,.word-complete-flash,.word-moment,.wrong-pop,.confetto,.shard,.board.kick,.tile.proved.just-locked,.pangram-halo.new,.key.refused-shake{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* ---------- welcome + tutorial modal ---------- */
.tut-dialog{width:min(100%,600px)}
.welcome-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12px 4px 4px}
.welcome-view[hidden]{display:none}
.welcome-logo{width:58px;height:58px;border-radius:17px;background:var(--c1);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;box-shadow:0 5px 0 var(--d1);transform:rotate(-4deg)}
.welcome-view h2{margin:6px 0 0;font-size:26px}
.welcome-pitch{margin:0;max-width:380px;font-size:15.5px;font-weight:600;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.welcome-actions{display:flex;flex-direction:column;gap:9px;width:min(100%,320px);margin:12px 0 4px}
.welcome-actions button{border:none;border-radius:999px;padding:12px 18px;font-size:14.5px;font-weight:800;cursor:pointer}
.welcome-actions .q-primary{display:flex;flex-direction:column;align-items:center;gap:1px}
.welcome-actions .q-primary span{font-size:10.5px;font-weight:700;opacity:.85}
.welcome-actions .q-done:active{transform:translateY(2px);box-shadow:0 1px 0 var(--press)}
.tut-stage{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.tut-stage[hidden]{display:none}
.tut-board.boardcard{padding:16px;border-radius:18px;background:var(--bg);box-shadow:inset 0 2px 0 rgba(74,59,35,.06);gap:12px}
.tut-board .check-note{display:none}
.tut-board .check-stat.locked-total,.tut-board .check-stat.popped-total{display:none}
.tut-board .check-trigger{min-width:132px;min-height:54px}
.tut-board .won{inset:-16px;border-radius:18px}
.tut-side .panel{padding:2px 4px;box-shadow:none;background:none}
.tut-side .note{display:none}
.tut-leave{align-self:center;padding-bottom:2px}

/* ---------- look: letterpress ---------- */
html[data-theme="letterpress"]{
  --bg:#E7DFCB; --card:#F4EEDF; --ink:#26231D; --ink2:#5C5647; --ink3:#6E6656; --line:#D6CBB0;
  --c1:#A34A38; --c2:#3D6480; --c3:#5C7A3B; --c4:#6E5379;
  --d1:#7A3427; --d2:#2C4A60; --d3:#455C2C; --d4:#523E5B;
  --t1:#EBD5CC; --t2:#D3DDE4; --t3:#DCE2CE; --t4:#DFD6E3;
  --gold:#BC8F2E; --goldT:#EFE2C0; --goldInk:#7A5A12;
  --press:rgba(38,35,29,.17);
  --srf:#FBF7EC; --srf2:#EFE8D6; --onInk:#F4EEDF; --inkSh:#16140F; --inkSh2:#16140F;
  --keyN:#77705E; --cream2:#B9AF97;
  --nudgeTx:#9C3B27; --goodTx:#47632F;
  --wonBg:rgba(244,238,223,.98); --scrim:rgba(38,35,29,.5);
  --dis:#DCD3BC; --disTx:#9A927E; --disSh:#C2B89E;
  --spotSh:rgba(38,35,29,.28);
  --font:'Figtree',sans-serif; --display:'Young Serif',serif;
}
html[data-theme="letterpress"] .tile,html[data-theme="letterpress"] .key,html[data-theme="letterpress"] .pop-letter{border-radius:5px;font-weight:400}
html[data-theme="letterpress"] .tile,html[data-theme="letterpress"] .pop-letter{font-size:25px;box-shadow:0 2px 0 var(--press)}
html[data-theme="letterpress"] .key{box-shadow:0 2px 0 var(--press)}
html[data-theme="letterpress"] .logo,html[data-theme="letterpress"] .welcome-logo{border-radius:6px;box-shadow:0 2px 0 var(--d1)}
html[data-theme="letterpress"] .title{font-weight:400;letter-spacing:.01em}
html[data-theme="letterpress"] .cursor-ring{border-radius:7px;box-shadow:0 0 0 4px rgba(188,143,46,.45)}
html[data-theme="letterpress"] .boardcard,html[data-theme="letterpress"] .panel{border-radius:6px}
html[data-theme="letterpress"] .check-trigger{border-radius:6px}

/* ---------- look: inked ---------- */
html[data-theme="inked"]{
  --bg:#F1EAD8; --card:#FCF8EE; --ink:#1F2A3C; --ink2:#4E5A6E; --ink3:#6B7688; --line:#DED5C0;
  --c1:#B0392E; --c2:#2C5C8F; --c3:#4A7A54; --c4:#6E4B86;
  --d1:#7E2419; --d2:#1B3F66; --d3:#33583A; --d4:#4C3260;
  --t1:#F0DCD6; --t2:#DAE3EE; --t3:#DDE8DC; --t4:#E6DDEE;
  --gold:#B08A2E; --goldT:#F0E5C6; --goldInk:#6E5210;
  --press:rgba(31,42,60,.14);
  --srf:#FCF8EE; --srf2:#F1EADA; --onInk:#FCF8EE; --inkSh:#0E1522; --inkSh2:#0E1522;
  --keyN:#6B7688; --cream2:#AFBACA;
  --nudgeTx:#A33124; --goodTx:#3B6B45;
  --wonBg:rgba(252,248,238,.98); --scrim:rgba(31,42,60,.5);
  --dis:#E3DBC8; --disTx:#9A9382; --disSh:#CCC3AC;
  --spotSh:rgba(31,42,60,.26);
  --font:'Spectral',serif; --display:'Spectral',serif;
}
html[data-theme="inked"] .tile,html[data-theme="inked"] .pop-letter{border-radius:4px;font-weight:600;font-size:26px;box-shadow:inset 0 0 0 1.5px rgba(31,42,60,.22)}
html[data-theme="inked"] .key{border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(31,42,60,.18)}
html[data-theme="inked"] .key .L{font-weight:600}
html[data-theme="inked"] .key:not(:disabled):active{transform:translateY(1px);box-shadow:inset 0 0 0 2px var(--ink)}
html[data-theme="inked"] .key.backspace-key{box-shadow:none}
html[data-theme="inked"] .title{font-weight:600;font-style:italic;letter-spacing:0}
html[data-theme="inked"] .welcome-view h2{font-weight:600;font-style:italic}
html[data-theme="inked"] .logo,html[data-theme="inked"] .welcome-logo{border-radius:50%;box-shadow:none}
html[data-theme="inked"] .boardcard,html[data-theme="inked"] .panel,html[data-theme="inked"] .settings-pop{border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line)}
html[data-theme="inked"] .check-trigger{border-radius:4px}
html[data-theme="inked"] .check-trigger:not(:disabled){box-shadow:0 3px 0 var(--d1)}
html[data-theme="inked"] .check-trigger:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--d1)}
html[data-theme="inked"] .cursor-ring{border-radius:5px;border-width:2px;box-shadow:0 0 0 3px rgba(176,138,46,.4)}
html[data-theme="inked"] .wchip{font-style:italic}
html[data-theme="inked"] .navbtn,html[data-theme="inked"] .btn-ghost,html[data-theme="inked"] .picksel{box-shadow:inset 0 0 0 1.5px var(--line)}

/* ---------- look: porcelain ---------- */
html[data-theme="porcelain"]{
  --bg:#FAFAF7; --card:#FFFFFF; --ink:#3A3A36; --ink2:#77776F; --ink3:#93938A; --line:#E8E8E2;
  --c1:#D98E82; --c2:#8FAEC4; --c3:#93B79A; --c4:#B2A2C7;
  --d1:#9A5648; --d2:#4E7590; --d3:#4F7B5C; --d4:#71618A;
  --t1:#F6E7E3; --t2:#E8F0F5; --t3:#E9F2EB; --t4:#EFEAF4;
  --gold:#D9B45C; --goldT:#F7EDD6; --goldInk:#8A6A18;
  --press:rgba(58,58,54,.10);
  --srf:#FFFFFF; --srf2:#F3F3EE; --onInk:#FAFAF7; --inkSh:#26261F; --inkSh2:#26261F;
  --keyN:#93938A; --cream2:#C8C8BE;
  --nudgeTx:#B4574A; --goodTx:#4E8259;
  --wonBg:rgba(255,255,255,.98); --scrim:rgba(58,58,54,.4);
  --dis:#EFEFE9; --disTx:#B0B0A6; --disSh:#DFDFD7;
  --spotSh:rgba(58,58,54,.18);
  --font:'Figtree',sans-serif; --display:'Figtree',sans-serif;
}
html[data-theme="porcelain"] .tile,html[data-theme="porcelain"] .pop-letter{font-weight:500;font-size:25px;border-radius:12px;box-shadow:0 1px 2px rgba(58,58,54,.10),inset 0 0 0 1px var(--line)}
html[data-theme="porcelain"] .key{border-radius:12px;box-shadow:0 1px 2px rgba(58,58,54,.10),inset 0 0 0 1px var(--line)}
html[data-theme="porcelain"] .key .L{font-weight:600}
html[data-theme="porcelain"] .title{font-weight:300;letter-spacing:.03em}
html[data-theme="porcelain"] .logo,html[data-theme="porcelain"] .welcome-logo{box-shadow:0 2px 6px rgba(58,58,54,.18)}
html[data-theme="porcelain"] .panel{box-shadow:0 1px 3px rgba(58,58,54,.07),inset 0 0 0 1px var(--line)}
html[data-theme="porcelain"] .boardcard{box-shadow:0 2px 10px rgba(58,58,54,.06),inset 0 0 0 1px var(--line)}
html[data-theme="porcelain"] .check-trigger:not(:disabled){box-shadow:0 3px 0 var(--d1)}
html[data-theme="porcelain"] .cursor-ring{box-shadow:0 0 0 4px rgba(217,180,92,.4)}
html[data-theme="porcelain"] .welcome-view h2{font-weight:300}