:root{--bg:#f7f4fd;--panel:#fff;--soft:#f1ecfc;--ink:#1b1534;--mut:#6c6688;--line:#e4dcf6;--acc:#6b3df0;--acc2:#ff5c93;--ok:#12a574;--bad:#e5484d;--sh:0 14px 44px -14px rgba(80,40,200,.3);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0c0919;--panel:#161129;--soft:#211b3d;--ink:#f4f1ff;--mut:#a7a1c6;--line:#2d2650;--acc:#9d7dff;--acc2:#ff7aa8;--ok:#3de0a6;--bad:#ff6b7e;--sh:0 14px 44px -14px rgba(0,0,0,.7);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;color:var(--ink);font:16px/1.5 "Segoe UI Variable","SF Pro Display",Inter,system-ui,-apple-system,Roboto,sans-serif;padding:max(20px,env(safe-area-inset-top)) 16px 48px;background:radial-gradient(900px 500px at 90% -10%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 60%),radial-gradient(700px 420px at -10% 8%,color-mix(in srgb,var(--acc2) 18%,transparent),transparent 60%),var(--bg)}
main{max-width:780px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 30px}
h1{font-size:clamp(2rem,6vw,3rem);line-height:1.05;margin:0;font-weight:800;letter-spacing:-.035em;background:linear-gradient(100deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
header p{margin:6px 0 0;color:var(--mut)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.lang{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh)}
.lang button{font-weight:600;font-size:.85rem;padding:7px 14px;border:0;border-radius:999px;background:none;color:var(--mut);cursor:pointer}
.lang button[aria-pressed=true]{background:linear-gradient(100deg,var(--acc),var(--acc2));color:#fff}
.box{background:var(--panel);border:1px solid var(--line);border-radius:24px;margin-bottom:16px;overflow:hidden;box-shadow:var(--sh)}
.head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:22px 24px;background:none;border:0;color:var(--ink);cursor:pointer}
.head b{display:block;font-size:1.3rem;letter-spacing:-.01em}
.head span{color:var(--mut);font-size:.92rem}
.chev{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--acc);font-size:1.2rem;transition:transform .25s;flex:none}
.head[aria-expanded=true] .chev{transform:rotate(180deg)}
.body{padding:0 20px 24px}
.body[hidden]{display:none}
.soon{padding:20px;color:var(--mut);border:1.5px dashed var(--line);border-radius:24px;text-align:center}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.tabs button{font-size:.92rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;transition:transform .15s}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-pressed=true]{background:linear-gradient(100deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
.btn{font-size:.95rem;font-weight:700;padding:10px 22px;border-radius:999px;border:0;background:linear-gradient(100deg,var(--acc),var(--acc2));color:#fff;cursor:pointer;margin:6px 4px}
.btn:active{transform:scale(.97)}
#stage{min-height:120px;text-align:center;padding:18px 8px 8px;background:var(--soft);border-radius:18px}
.st{margin:4px 0 8px;min-height:1.5em;font-weight:700}
.hint{color:var(--mut);font-size:.85rem;margin:6px 0}
.g3,.g4,.gm,.g2k,.gs{display:grid;gap:8px;width:min(100%,300px);margin:12px auto}
.g3{grid-template-columns:repeat(3,1fr)}.g4,.g2k{grid-template-columns:repeat(4,1fr)}
.gm{grid-template-columns:repeat(8,1fr);gap:3px;width:min(100%,336px)}
.gs{grid-template-columns:repeat(2,1fr);width:min(100%,240px)}
.cell,.card,.mc,.tile{aspect-ratio:1;min-width:0;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:14px;font-weight:800}
.cell,.card,.mc{cursor:pointer}
.cell{font-size:2.2rem}.card{font-size:1.8rem}
.cell:hover,.card:hover{border-color:var(--acc)}
.card.up{background:var(--soft)}.card.done{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--panel))}
.mc{border-radius:8px;font-size:.95rem;padding:0}.mc.open{background:var(--soft);cursor:default}
.tile{display:grid;place-items:center;font-size:1.4rem;background:var(--panel);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.sm{aspect-ratio:1;border:0;border-radius:18px;opacity:.5;cursor:pointer;transition:opacity .1s,transform .1s}
.sm.on{opacity:1;transform:scale(1.05)}
.s0{background:#ff5c93}.s1{background:#3de0a6}.s2{background:#ffc83d}.s3{background:#5ca8ff}
.react{display:block;width:100%;height:170px;margin:12px 0;border:0;border-radius:18px;font-size:1.3rem;font-weight:800;background:linear-gradient(100deg,var(--acc),var(--acc2));color:#fff;cursor:pointer}
.react.wait{background:var(--bad)}.react.go{background:var(--ok);color:#06241a}
canvas{border:1px solid var(--line);border-radius:14px;max-width:100%;background:var(--panel);touch-action:none}
.pad{display:grid;grid-template-columns:repeat(3,56px);gap:6px;justify-content:center;margin:10px 0}
.pad button{height:48px;font-size:1.2rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;cursor:pointer}
.pad .u{grid-column:2}.pad .l{grid-column:1;grid-row:2}.pad .d{grid-column:2;grid-row:2}.pad .r{grid-column:3;grid-row:2}
input[type=number]{font:inherit;padding:10px 14px;width:110px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);text-align:center}
.rps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.rps button{font-size:2rem;padding:12px 18px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:16px;cursor:pointer}
.rps small{display:block;font-size:.8rem;color:var(--mut)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}