:root{
  --bg:#14162e; --bg2:#1c1f3f; --ink:#f3f1ff; --mute:#a3a6cc; --line:#2f3360;
  --ok:#ff6b57; --ok-ink:#14162e; --ok-t:#ff6b57; --in:#67d4e8; --no:#2a2d55; --no-ink:#a3a6cc;
  --key:#2a2e5a; --key-ink:#f3f1ff; --sheet:#1c1f3f; --glow:0 0 0 1px rgba(255,255,255,.04),0 18px 40px -18px rgba(0,0,0,.6);
  --r:14px; --disp:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Figtree",system-ui,sans-serif;
  --tile:min(62px,calc((100vw - 64px)/5),max(34px,calc((100svh - 440px)/6)));
}
:root[data-t="light"]{
  --bg:#f6f3ec; --bg2:#ffffff; --ink:#1b1c33; --mute:#595c7b; --line:#dcd7cb;
  --no:#d9d5cb; --no-ink:#4f4d47; --key:#e7e2d6; --key-ink:#1b1c33; --sheet:#ffffff; --in:#0b7285; --ok-t:#c4301b;
  --glow:0 1px 2px rgba(27,28,51,.06),0 18px 40px -20px rgba(27,28,51,.3);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--sans);overflow-x:hidden;transition:background .3s,color .3s}
body::before{content:"";position:fixed;inset:-20% -20% auto;height:70vh;pointer-events:none;background:radial-gradient(40% 60% at 20% 20%,rgba(255,107,87,.16),transparent 70%),radial-gradient(40% 60% at 85% 10%,rgba(103,212,232,.14),transparent 70%);z-index:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:0 12px env(safe-area-inset-bottom)}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font:800 24px/1 var(--disp);letter-spacing:-.03em}
.brand em{font-style:normal;color:var(--ok-t)}
.logo{display:grid;grid-template-columns:repeat(3,9px);gap:3px}
.logo i{height:9px;border-radius:3px;background:var(--ok)}
.logo i:nth-child(2){background:none;box-shadow:inset 0 0 0 2px var(--in)}
.logo i:nth-child(3){background:var(--no)}
.ib{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--mute);transition:background .2s,color .2s}
.ib:hover{background:var(--bg2);color:var(--ink)}
.top-r{display:flex}

/* mode */
.mode{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--bg2);box-shadow:var(--glow);margin:4px auto 0;width:max-content;max-width:100%}
.mode button{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mute);white-space:nowrap;transition:background .25s,color .25s}
.mode button.on{background:var(--ink);color:var(--bg)}
.mode span{opacity:.6;font-weight:500}

/* board */
.play{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0 8px}
.board{display:grid;grid-template-rows:repeat(6,var(--tile));gap:7px}
.row{display:grid;grid-template-columns:repeat(5,var(--tile));gap:7px}
.row.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.t{position:relative;display:grid;place-items:center;border-radius:var(--r);font:700 calc(var(--tile)*.5)/1 var(--disp);text-transform:uppercase;box-shadow:inset 0 0 0 2px var(--line);background:rgba(255,255,255,.015);transition:box-shadow .15s}
.t.f{box-shadow:inset 0 0 0 2px var(--mute);animation:pop .12s}
@keyframes pop{50%{transform:scale(1.08)}}
.t.flip{animation:flip .5s ease both}
@keyframes flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}51%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.t.ok{background:var(--ok);color:var(--ok-ink);box-shadow:none}
.t.ok::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:rgba(20,22,46,.7)}
.t.in{background:rgba(103,212,232,.10);color:var(--in);box-shadow:inset 0 0 0 3px var(--in);border-radius:50%}
.t.dia{color:var(--ok-ink);box-shadow:none;background:repeating-linear-gradient(135deg,var(--ok) 0 7px,#ffa292 7px 14px)}
.t.no{background:var(--no);color:var(--no-ink);box-shadow:none}
.row.win .t{animation:bounce .5s ease both}
@keyframes bounce{40%{transform:translateY(-14px)}70%{transform:translateY(2px)}}

.toast{position:absolute;top:6px;left:50%;transform:translate(-50%,-6px);padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;z-index:5}
.toast.on{opacity:1;transform:translate(-50%,0)}
.pick{position:absolute;top:54px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;border-radius:16px;background:var(--sheet);box-shadow:var(--glow);z-index:6;max-width:94%}
.pick p{width:100%;text-align:center;font-size:13px;color:var(--mute)}
.pick button{padding:8px 14px;border-radius:10px;background:var(--key);font:700 18px var(--disp);text-transform:uppercase}

/* tools */
.tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
.hint{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg2);box-shadow:var(--glow);font-size:14px;font-weight:600;color:var(--ink)}
.hint svg{width:18px;height:18px;color:var(--ok-t)}
.hint[disabled]{opacity:.45;cursor:default}
.week{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.week b{color:var(--ink)}
.week i{width:9px;height:9px;border-radius:50%;background:var(--no)}
.week i.on{background:var(--ok)}

/* keyboard */
.kb{display:flex;flex-direction:column;gap:7px;padding-bottom:12px;user-select:none}
.kr{display:flex;gap:5px;justify-content:center}
.k{flex:1;max-width:46px;height:54px;border-radius:10px;background:var(--key);color:var(--key-ink);font:700 18px var(--disp);text-transform:uppercase;display:grid;place-items:center;position:relative;transition:transform .08s,background .25s,color .25s}
.k:active{transform:scale(.94)}
.k.w{max-width:72px;flex:1.5;font:600 13px var(--sans);text-transform:none}
.k.dk{background:transparent;box-shadow:inset 0 0 0 2px var(--key);font:700 18px var(--disp)}
.k.ok{background:var(--ok);color:var(--ok-ink)}
.k.in{background:transparent;color:var(--in);box-shadow:inset 0 0 0 2px var(--in)}
.k.no{background:transparent;color:var(--no-ink);opacity:.8}
.k small{position:absolute;top:3px;right:5px;font:600 10px var(--sans);opacity:1;color:var(--mute);text-transform:none}
.k.ok small{color:var(--ok-ink)}
.pop{position:fixed;z-index:20;display:flex;gap:4px;padding:6px;border-radius:14px;background:var(--sheet);box-shadow:var(--glow)}
.pop button{width:44px;height:50px;border-radius:10px;background:var(--key);font:700 20px var(--disp);text-transform:uppercase}
.pop button.sel{background:var(--ok);color:var(--ok-ink)}

/* sheet */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(8,9,22,.55);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-in{position:relative;width:100%;max-width:520px;max-height:88svh;overflow:auto;background:var(--sheet);border-radius:26px 26px 0 0;padding:26px 22px 30px;animation:up .3s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (min-width:700px){.sheet{align-items:center}.sheet-in{border-radius:26px}}
.x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mute)}
.sheet h2{font:800 26px/1.1 var(--disp);letter-spacing:-.02em;margin-bottom:12px}
.sheet h3{font:700 17px var(--disp);margin:20px 0 8px}
.sheet p{color:var(--mute);margin-bottom:10px}
.ex{display:flex;gap:6px;margin:10px 0 4px}
.ex .t{--tile:44px;width:44px;height:44px;font-size:22px}
.legend{display:grid;gap:10px;margin:8px 0}
.legend>div{display:flex;align-items:center;gap:14px;color:var(--mute);font-size:15px}
.legend .t{display:grid;place-items:center;width:38px;height:38px;flex:none;font-size:17px;color:inherit}
.legend .t.ok,.legend .t.dia{color:var(--ok-ink)}.legend .t.in{color:var(--in)}.legend .t.no{color:var(--no-ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 14px}
.stats div{background:var(--bg2);border-radius:14px;padding:12px 6px;text-align:center}
:root[data-t="light"] .stats div{background:var(--bg)}
.stats b{display:block;font:800 26px/1 var(--disp)}
.stats span{font-size:12px;color:var(--mute)}
.dist{display:grid;gap:5px}
.dist div{display:flex;align-items:center;gap:8px;font-size:14px}
.dist i{display:block;height:22px;border-radius:7px;background:var(--no);color:var(--ink);font-style:normal;font-weight:700;font-size:13px;padding:2px 8px;text-align:right;min-width:26px}
.dist i.me{background:var(--ok);color:var(--ok-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;background:var(--ok);color:var(--ok-ink);font-weight:700}
.btn.g{background:var(--bg2);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.row-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.count{font:800 34px/1 var(--disp);letter-spacing:.02em;margin:4px 0}
.ans{font:800 30px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;color:var(--ok-t);margin:4px 0 10px}
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-top:10px}
.arch button{padding:10px 4px;border-radius:12px;background:var(--bg2);font-size:13px;color:var(--mute);box-shadow:inset 0 0 0 2px var(--line)}
:root[data-t="light"] .arch button{background:var(--bg)}
.arch button b{display:block;font:700 17px var(--disp);color:var(--ink)}
.arch button.w{box-shadow:inset 0 0 0 2px var(--ok)}
.arch button.l{box-shadow:inset 0 0 0 2px var(--line);border-style:dashed}
.menu a,.menu button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.tip{display:flex;gap:14px;align-items:center;margin-top:18px;padding:14px;border-radius:16px;background:var(--bg2);text-decoration:none;color:var(--ink)}
:root[data-t="light"] .tip{background:var(--bg)}
.tip b{display:block;font:700 16px var(--disp)}
.tip span{font-size:13px;color:var(--mute)}
.tip em{margin-left:auto;font-style:normal;color:var(--ok-t);font-weight:700;white-space:nowrap}
.tip .tl{width:44px;height:44px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--ok),#ffa38f);display:grid;place-items:center;color:var(--ok-ink);font:800 18px var(--disp)}
.small{font-size:13px;color:var(--mute)}
.small a{color:var(--mute)}
.ns{padding:30px;text-align:center}
@media (max-width:360px){.k{height:48px;font-size:16px}.kr{gap:4px}.mode button{padding:7px 10px;font-size:13px}}
@media (min-width:900px){.app{padding-top:10px}.k{height:58px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pick[hidden]{display:none}
.hint[hidden]{display:none}.tools:has(.hint[hidden]){justify-content:flex-end}

.arch button .mk{display:block;font-size:11px;font-weight:600;margin-top:2px}
.arch button.w .mk{color:var(--ok-t)}
@media (min-width:900px) and (max-height:800px){.k{height:48px}.k.w{font-size:13px}}
.sheet-in:focus{outline:none}
:focus-visible{outline:3px solid var(--in);outline-offset:2px}
.arch button .mk{white-space:nowrap}
.week[role=button]{cursor:pointer}