:root{--accent:#6D28D9;--stage:#5B21B6;--stage-ink:#fff}
@media (prefers-color-scheme:dark){:root{--accent:#A78BFA;--accent-ink:#1e1033;--stage:#3B1A7A}}
.stage{position:relative;min-height:440px;border-radius:var(--r-panel);background:var(--stage);color:var(--stage-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden;transition:background .12s}
@media (max-width:600px){.stage{min-height:380px;padding:22px 14px}}
.stage .center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:560px}
.stage h2{color:inherit;font-size:clamp(24px,4vw,34px);margin:6px 0 2px}
.stage p{margin:0;opacity:.88}
.stage .small{font-size:14px;opacity:.75}
.stage .ico{opacity:.9;margin-bottom:4px}
.stage .row{justify-content:center;margin-top:18px}
.stage .btn.xl{min-width:150px;min-height:54px;font-size:18px;margin-top:14px}
.stage .row .btn.xl{margin-top:0}
.btn.light{background:#fff;color:#3b0f8c}
.btn.ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.stage.intro,.stage.play{cursor:default}
.stage.wait{background:#B91C1C;cursor:pointer}
.stage.go{background:#15803D;cursor:pointer}
.stage.early{background:#B45309;cursor:pointer}
.stage.fail{background:#7f1d1d}
.stage.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.huge{font-size:clamp(56px,10vw,96px)!important;letter-spacing:-.03em}
.score{font-size:clamp(52px,10vw,88px);font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.badge{display:inline-block;background:#fff;color:#3b0f8c;font-weight:800;padding:6px 14px;border-radius:999px;opacity:1!important;margin:4px 0}
.stage .chips{justify-content:center;margin-top:10px}
.stage .chip{background:rgba(255,255,255,.16);color:#fff;cursor:default;font-variant-numeric:tabular-nums}
.dots{display:flex;gap:8px;margin-bottom:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.4;animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none}}
/* 에임 */
.stage.play{justify-content:flex-start}
.aimbar{align-self:stretch;text-align:center;font-weight:700;margin-bottom:10px;font-variant-numeric:tabular-nums}
.aim-area{position:relative;align-self:stretch;flex:1;min-height:360px}
.target{position:absolute;width:72px;height:72px;border-radius:50%;border:0;padding:0;cursor:crosshair;background:radial-gradient(circle,#fff 0 18%,#5B21B6 19% 36%,#fff 37% 56%,#5B21B6 57% 74%,#fff 75%);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.target span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;color:#fff;font-weight:700;white-space:nowrap}
/* 숫자 */
.bignum{font-size:clamp(40px,9vw,80px);font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-all;line-height:1.15}
.bignum.sm{font-size:clamp(28px,6vw,48px)}
.timebar{width:min(320px,80%);height:6px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:18px}
.timebar i{display:block;height:100%;background:#fff;animation:shrink linear forwards}
@keyframes shrink{from{width:100%}to{width:0}}
#na{width:min(420px,90vw);font:inherit;font-size:30px;font-weight:700;text-align:center;letter-spacing:.06em;padding:12px;border-radius:var(--r-ctl);border:0;margin-top:12px;color:#1c1b19;background:#fff}
.cmp{display:grid;gap:4px;margin-bottom:10px;font-size:15px}
.cmp b{display:block;font-size:24px;letter-spacing:.06em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-all}
.cmp .x{color:#fecaca;text-decoration:underline wavy}
/* 그리드들 */
.lvl{font-weight:700;margin-bottom:14px!important;font-variant-numeric:tabular-nums}
.lives{letter-spacing:2px;margin-left:8px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(340px,82vw)}
.sgrid button,.vgrid button{aspect-ratio:1/1;border:0;border-radius:12px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .12s,transform .12s}
.sgrid button.on{background:#fff}
.sgrid button.tap{background:rgba(255,255,255,.6);transform:scale(.96)}
.cgrid{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:8px;width:min(640px,100%)}
.cgrid span,.cgrid button{aspect-ratio:1/1}
.cgrid button{border:2px solid rgba(255,255,255,.85);border-radius:10px;background:transparent;color:#fff;font:inherit;font-weight:800;font-size:clamp(16px,3vw,26px);cursor:pointer}
.cgrid button.mask{background:#fff;color:transparent}
.cgrid button.gone{visibility:hidden}
@media (max-width:600px){.cgrid{gap:5px}.cgrid button{border-radius:7px}}
.vgrid{display:grid;grid-template-columns:repeat(var(--s),1fr);gap:8px;width:min(400px,86vw)}
.vgrid button.on{background:#fff}
.vgrid button.x{background:rgba(0,0,0,.35)}
.vgrid button:disabled{cursor:default}
.word{font-size:clamp(34px,7vw,56px);font-weight:800;margin:20px 0 6px;letter-spacing:-.02em}
kbd{font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;padding:3px 5px;border-radius:5px;background:rgba(59,15,140,.12);margin-left:6px}
/* 기록 */
.bars{display:flex;align-items:flex-end;gap:4px;height:110px;margin-bottom:12px}
.bars i{flex:1;max-width:24px;border-radius:4px 4px 2px 2px;background:color-mix(in oklab,var(--accent) 45%,transparent)}
.bars i.best{background:var(--accent)}
#hist .muted{color:var(--muted);margin:0}
#hist .btn{margin-top:14px}
#board{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#board a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:baseline;text-decoration:none;padding:8px 10px;border-radius:var(--r-ctl);font-size:14px}
#board a:hover{background:var(--surface-2)}
#board b{color:var(--accent);font-variant-numeric:tabular-nums}
#board em{font-style:normal;color:var(--muted);font-size:12px;min-width:30px;text-align:right}
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tests a{display:flex;gap:12px;align-items:center;text-decoration:none;padding:14px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);transition:border-color .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.tests a:hover{border-color:var(--accent);transform:translateY(-1px)}
.tests a[aria-current]{border-color:var(--accent);background:var(--accent-soft)}
.tests i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-style:normal;font-weight:800}
.tests b{display:block}
.tests span{display:block;font-size:13px;color:var(--muted)}
.more{margin-top:28px}
.more h2{font-size:18px;margin-top:0}