:root{--bg:#0b0f1c;--panel:#141b30;--panel-2:#1b2440;--ink:#eef2ff;--ink-dim:#94a3c4;--accent:#38bdf8;--accent-2:#a78bfa;--danger:#f43f5e;--radius:16px;--vh:100dvh}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:var(--bg);color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Apple SD Gothic Neo,Malgun Gothic,sans-serif;overflow:hidden}#app{height:var(--vh);width:100%;position:relative;overflow:hidden}.stage{height:100%;padding:max(8px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));flex-direction:column;gap:8px;display:flex}.hud{flex:none}.hud-row{align-items:center;gap:10px;display:flex}.hud-sub{min-height:24px;margin-top:6px}.stat{flex-direction:column;line-height:1.1;display:flex}.stat-right{text-align:right;margin-left:auto}.stat-mid{text-align:center}.stat-label{letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase;font-size:11px}.stat-value{font-variant-numeric:tabular-nums;font-size:26px;font-weight:800}#timer-stat .stat-value{color:var(--accent)}#timer-stat.urgent .stat-value{color:var(--danger)}.icon-btn{background:var(--panel);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:12px;place-items:center;display:grid}.icon-btn svg{fill:currentColor;width:20px;height:20px}.gauge{align-items:center;gap:8px;display:flex}.gauge-label{letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase;font-size:11px}.gauge-dots{gap:5px;display:flex}.gauge-dot{background:0 0;border:2px solid #2b3552;border-radius:50%;width:14px;height:14px;transition:background-color .14s,transform .14s}.gauge-dot.filled{background:var(--accent-2);border-color:var(--accent-2);transform:scale(1.08)}.chain-flash{color:var(--accent);opacity:0;margin-left:auto;font-size:18px;font-weight:800;transform:translateY(4px)}.chain-flash.show{animation:.62s ease-out chain-pop}@keyframes chain-pop{0%{opacity:0;transform:translateY(8px)scale(.85)}25%{opacity:1;transform:translateY(0)scale(1.15)}to{opacity:0;transform:translateY(-6px)scale(1)}}.board-wrap{flex:auto;place-items:center;min-height:0;display:grid}#board{touch-action:none;border-radius:18px;display:block}.controls{flex:none;justify-content:space-between;align-items:center;gap:12px;padding-top:4px;display:flex}body[data-hand=left] .controls{flex-direction:row-reverse}.rotate-btn{background:linear-gradient(180deg, var(--panel-2), var(--panel));width:84px;height:62px;color:var(--accent-2);cursor:pointer;border:0;border-radius:18px;place-items:center;transition:transform 90ms,opacity .14s;display:grid}.rotate-btn:active{transform:scale(.94)}.rotate-btn[disabled]{opacity:.32;color:var(--ink-dim)}.rotate-btn svg{width:30px;height:30px}.next{flex-direction:column;align-items:center;gap:2px;display:flex}.next-label{letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase;font-size:11px}#next-canvas{width:72px;height:44px}.hint{text-align:center;min-height:16px;color:var(--ink-dim);opacity:0;flex:none;margin:0;font-size:13px;transition:opacity .26s}.hint.show{opacity:1}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));z-index:10;background:#060912d1;place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto}.overlay[hidden]{display:none}.panel{background:var(--panel);text-align:center;border-radius:22px;flex-direction:column;gap:12px;width:min(420px,100%);padding:22px 20px;animation:.22s ease-out panel-in;display:flex}@keyframes panel-in{0%{opacity:0;transform:translateY(12px)}}.panel h2{margin:0;font-size:22px}.logo{letter-spacing:.08em;background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:40px;font-weight:900}.tagline{color:var(--ink-dim);margin:-4px 0 8px;font-size:14px}.view-switch{background:var(--panel-2);border-radius:999px;gap:4px;width:max-content;margin:0 auto 2px;padding:4px;display:flex}.view-opt{color:var(--ink-dim);font:inherit;letter-spacing:.04em;cursor:pointer;background:0 0;border:0;border-radius:999px;min-width:72px;min-height:40px;padding:0 18px;font-size:15px;font-weight:800;transition:background .12s,color .12s}.view-opt.on{background:var(--accent);color:#06121f}.view-opt:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.mode-list{flex-direction:column;gap:10px;display:flex}.mode-btn{border-radius:var(--radius);background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer;border:0;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;min-height:60px;padding:14px 16px;transition:transform 90ms;display:grid}.mode-btn:active{transform:scale(.985)}.mode-name{font-size:17px;font-weight:700}.mode-desc{color:var(--ink-dim);grid-column:1;font-size:12px}.mode-best{color:var(--accent);font-variant-numeric:tabular-nums;grid-area:1/2/span 2;font-size:13px;font-weight:700}.primary-btn,.ghost-btn,.link-btn{border-radius:var(--radius);cursor:pointer;border:0;min-height:48px;padding:14px 18px;font-size:16px;font-weight:700}.primary-btn{background:linear-gradient(120deg, var(--accent), var(--accent-2));color:#06121f}.ghost-btn{background:var(--panel-2);color:var(--ink)}.link-btn{color:var(--ink-dim);background:0 0;padding:10px;font-weight:600}.title-links{justify-content:center;gap:4px;display:flex}.final-score{font-variant-numeric:tabular-nums;margin:0;font-size:46px;font-weight:900;line-height:1}.best-flag{color:var(--accent);margin:0;font-size:14px;font-weight:700}.result-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 8px;display:grid}.result-grid div{background:var(--panel-2);border-radius:12px;padding:10px 6px}.result-grid dt{color:var(--ink-dim);font-size:11px}.result-grid dd{font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:18px;font-weight:800}.settings-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.settings-list li{justify-content:space-between;align-items:center;gap:12px;padding:10px 4px;font-size:15px;display:flex}.toggle{cursor:pointer;background:#2b3552;border:0;border-radius:999px;flex:none;width:52px;height:30px;transition:background-color .16s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .16s;position:absolute;top:3px;left:3px}.toggle[aria-checked=true]{background:var(--accent)}.toggle[aria-checked=true]:after{transform:translate(22px)}.segment{color:var(--ink);cursor:pointer;background:#2b3552;border:0;border-radius:999px;min-height:36px;padding:8px 16px;font-size:14px;font-weight:700}.rules-list{text-align:left;color:#cdd6ee;flex-direction:column;gap:8px;margin:0;padding-left:20px;font-size:14px;line-height:1.5;display:flex}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));color:var(--ink);z-index:20;background:#141b30f5;border-radius:999px;padding:10px 18px;font-size:14px;animation:.18s ease-out panel-in;position:absolute;transform:translate(-50%)}.toast[hidden],.landscape-warn{display:none}@media (orientation:landscape) and (max-height:460px){.stage,.overlay{display:none}.landscape-warn{color:var(--ink-dim);text-align:center;place-items:center;padding:24px;font-size:16px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:760px){a.link-btn{justify-content:center;align-items:center;min-width:44px;min-height:44px;padding-inline-start:10px;padding-inline-end:10px;display:inline-flex}}