:root{--sc-hit:var(--color-signal);--sc-near:#e0a314;--sc-miss:#8f8981;--sc-on:#fff;--sc-empty:var(--color-paper)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--sc-near:#c99212;--sc-miss:#47423c;--sc-on:#fff}}
:root[data-theme=dark]{--sc-near:#c99212;--sc-miss:#47423c;--sc-on:#fff}
#stage{gap:0}
.sc{--tile:min(58px,calc((100vw - 72px) / 5));width:100%;max-width:480px;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-xl);overflow-y:auto;touch-action:manipulation}
.sc-play{overflow:hidden}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc-time{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.sc-time.urgent{color:var(--color-danger-ink)}
.sc-progress{height:4px;flex:none;background:var(--color-line-soft);border-radius:4px;overflow:hidden}.sc-progress i{display:block;height:100%;width:100%;background:var(--color-signal);transform-origin:left;transition:transform .2s linear}
.sc-help{font-size:13px;line-height:1.5;color:var(--color-muted)}

.sc-row{display:grid;grid-template-columns:repeat(5,var(--tile));gap:6px;justify-content:center}
.sc-board{flex:1 1 0;min-height:150px;container-type:size;display:flex;flex-direction:column;justify-content:center;gap:6px;margin:2px 0}
.sc-board .sc-row{--tile:min(58px,calc((100cqw - 24px) / 5),calc((100cqh - 30px) / 6))}
.sc-tile{--c:var(--sc-empty);--t:var(--color-ink);height:var(--tile);display:grid;place-items:center;border:2px solid var(--color-line);border-radius:calc(var(--tile) * .18);background:var(--sc-empty);color:var(--color-ink);font-size:calc(var(--tile) * .5);font-weight:800;line-height:1;text-transform:uppercase;user-select:none}
.sc-row.current .sc-tile:not(:empty){border-color:var(--color-soft);animation:sc-pop .12s ease}
.sc-tile.hit{--c:var(--sc-hit);--t:var(--sc-on)}.sc-tile.near{--c:var(--sc-near);--t:var(--sc-on)}.sc-tile.miss{--c:var(--sc-miss);--t:var(--sc-on)}
.sc-tile.hit,.sc-tile.near,.sc-tile.miss{background:var(--c);border-color:var(--c);color:var(--t)}
.sc-row.flip .sc-tile{animation:sc-flip .5s ease both;animation-delay:calc(var(--k) * .12s)}
.sc-row.shake{animation:sc-shake .35s ease}
@keyframes sc-flip{0%,49%{background:var(--sc-empty);border-color:var(--color-soft);color:var(--color-ink)}0%{transform:rotateX(0)}50%{transform:rotateX(90deg);background:var(--c);border-color:var(--c);color:var(--t)}100%{transform:rotateX(0);background:var(--c);border-color:var(--c);color:var(--t)}}
@keyframes sc-pop{50%{transform:scale(1.08)}}
@keyframes sc-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.sc-note{min-height:18px;text-align:center;font-size:13px;font-weight:600;color:var(--color-muted)}.sc-note.good{color:var(--color-signal-ink)}.sc-note.bad{color:var(--color-danger-ink)}

.sc-keys{flex:none;display:flex;flex-direction:column;gap:6px}
.sc-keyrow{display:flex;gap:4px;justify-content:center}
.sc-key{flex:1 1 0;min-width:0;max-width:40px;height:min(48px,6.4dvh);min-height:34px;padding:0;border:0;border-radius:8px;background:var(--color-line);color:var(--color-ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .08s}
.sc-key:active{transform:scale(.92)}.sc-key:disabled{opacity:.55;cursor:default}
.sc-key.wide{flex:1.6 1 0;max-width:64px;font-size:13px}.sc-key.enter{background:var(--color-ink);color:var(--color-on-ink)}
.sc-key.hit{background:var(--sc-hit);color:var(--sc-on)}.sc-key.near{background:var(--sc-near);color:var(--sc-on)}.sc-key.miss{background:var(--sc-miss);color:var(--sc-on);opacity:.6}

.sc-foes{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;flex:none}
.sc-foe{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:var(--color-paper);border:1px solid transparent;border-radius:var(--radius-lg)}
.sc-foe.solved{border-color:var(--color-signal-soft)}
.sc-foe-head{display:flex;justify-content:space-between;gap:10px;font-size:12px}.sc-foe-head b{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-foe-head span{color:var(--color-muted);font-variant-numeric:tabular-nums}
.sc-mini{display:flex;flex-direction:column;gap:2px}.sc-mini .sc-row{grid-template-columns:repeat(5,9px);gap:2px;justify-content:start}
.sc-dot{height:9px;border-radius:2px;background:var(--color-line);font-size:0}
.sc-dot.hit{background:var(--sc-hit)}.sc-dot.near{background:var(--sc-near)}.sc-dot.miss{background:var(--sc-miss)}
.sc-mini.words .sc-row{grid-template-columns:repeat(5,16px)}.sc-mini.words .sc-dot{height:16px;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--sc-on);border-radius:3px}
.sc-mini.words .sc-row:has(.sc-dot:empty:not(.hit,.near,.miss)){display:none}

.sc-intro{justify-content:center;align-items:center;text-align:center;gap:16px}.sc-intro h1{font-size:32px}.sc-intro .sc-help{max-width:300px;font-size:15px}
.sc-intro{--tile:44px}
.sc-legend{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.sc-legend-item{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}.sc-legend .sc-tile{width:var(--tile)}
.sc-count{font-size:64px;font-weight:800;line-height:1;color:var(--color-signal-ink);font-variant-numeric:tabular-nums}

.sc-result{gap:12px;padding-bottom:0}.sc-result{--tile:min(52px,calc((100vw - 72px) / 5))}
.sc-answer{margin:4px 0 6px}
.sc-ranks{display:flex;flex-direction:column;gap:8px}
.sc-rank{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;background:var(--color-paper);border:1px solid transparent;border-radius:var(--radius-lg)}.sc-rank.me{border-color:var(--color-signal-soft)}
.sc-rank-info{display:flex;flex-direction:column;gap:3px;min-width:0}.sc-rank-info b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-rank-info span{font-size:12px;color:var(--color-muted)}
.sc-rank strong{min-width:30px;text-align:right;font-size:16px;color:var(--color-signal-ink);font-variant-numeric:tabular-nums}
.sc-foot{position:sticky;bottom:0;margin:auto -16px 0;padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--color-surface);border-top:1px solid var(--color-line-soft)}.sc-foot .sc-help{text-align:center;font-variant-numeric:tabular-nums}
.sc button:focus-visible{outline:2px solid var(--color-signal-deep);outline-offset:2px}
@media(max-width:380px),(max-height:700px){.sc{padding:10px 12px;gap:8px}.sc-key{font-size:15px}.sc-foe{padding:6px 8px}.sc-foot{margin:auto -12px 0;padding:10px 12px 12px}}
@media(prefers-reduced-motion:reduce){.sc *{animation:none!important;transition:none!important}}