:root{--ui-bg: rgba(10, 17, 30, .72);--ui-bg-solid: #0e1727;--ui-border: rgba(255, 255, 255, .1);--ui-fg: #f1f5fb;--ui-fg-muted: #93a3bc;--accent: #4fe3be;--warn: #ff9463;--danger: #f87171;--focus: #ffd166;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius: 12px;--radius-sm: 8px;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;touch-action:none}body{background:#0b1220;color:var(--ui-fg);font-family:var(--font-ui);font-size:16px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}#app{position:relative}canvas#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}button{font-family:inherit;font-size:15px;font-weight:600;color:var(--ui-fg);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius-sm);padding:10px 14px;min-height:44px;cursor:pointer;transition:background .16s ease,transform 90ms ease,border-color .16s ease;backdrop-filter:blur(10px)}button:hover{background:#1e2c44d9;border-color:#fff3}button:active{transform:scale(.96)}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button.primary{background:var(--accent);color:#06251d;border-color:transparent}button.primary:hover{background:#6cf0cf}button.icon{min-width:44px;padding:10px;display:grid;place-items:center}button svg{width:20px;height:20px;display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.hud{position:absolute;inset:0;pointer-events:none;padding:calc(var(--safe-t) + var(--space-3)) calc(var(--safe-r) + var(--space-3)) calc(var(--safe-b) + var(--space-3)) calc(var(--safe-l) + var(--space-3));display:flex;flex-direction:column;justify-content:space-between}.hud>*{pointer-events:auto}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);flex-wrap:nowrap}.level-chip{display:flex;align-items:baseline;gap:var(--space-2);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius);padding:8px 14px;backdrop-filter:blur(10px);min-width:0;flex:0 1 auto;overflow:hidden}.level-chip .num{flex:none}.level-chip>div{min-width:0}.level-chip .name,.level-chip .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-chip .num{font-family:var(--font-num);font-size:13px;color:var(--accent);letter-spacing:.5px}.level-chip .name{font-weight:700;font-size:16px}.level-chip .sub{font-size:12px;color:var(--ui-fg-muted)}.stats{display:flex;align-items:stretch;gap:var(--space-2);flex:none}.stat{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius);padding:6px 12px;min-width:78px;text-align:right;backdrop-filter:blur(10px)}.stat .label{display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ui-fg-muted)}.stat .value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:22px;font-weight:500}.stat .value .par{color:var(--ui-fg-muted);font-size:15px}.stat.over .value{color:var(--warn)}.actions{display:flex;gap:var(--space-2);flex:none;align-items:flex-start}.bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3)}.split-panel{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius);padding:var(--space-3);display:none;gap:var(--space-2);flex-direction:column;backdrop-filter:blur(10px);max-width:210px}.split-panel[data-active=true]{display:flex}.split-panel .title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ui-fg-muted)}.pieces{display:flex;gap:var(--space-2)}.piece{flex:1;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-sm);border:2px solid transparent;background:#ffffff0f;font-weight:700;font-size:14px}.piece .dot{width:12px;height:12px;border-radius:50%}.piece[data-id="0"] .dot{background:#4fe3be}.piece[data-id="1"] .dot{background:#ffb4a2}.piece[data-current=true]{border-color:var(--focus);background:#ffd16629}.dpad{display:none;grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,72px);gap:10px;margin-left:auto}body[data-touch=true] .dpad{display:grid}.dpad button{width:72px;height:72px;border-radius:18px;font-size:24px;position:relative}.dpad button:after{content:"";position:absolute;inset:-8px}.dpad .up{grid-area:up}.dpad .left{grid-area:left}.dpad .down{grid-area:down}.dpad .right{grid-area:right}.toasts{position:absolute;top:calc(var(--safe-t) + 84px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:var(--space-2);align-items:center;pointer-events:none}.toast{background:var(--ui-bg-solid);border:1px solid var(--ui-border);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:8px 14px;font-size:14px;font-weight:600;box-shadow:0 12px 32px #00000073;animation:toast-in .18s ease-out}.toast[data-kind=close]{border-left-color:var(--danger)}.toast[data-kind=fail]{border-left-color:var(--warn)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#060b14ad;backdrop-filter:blur(8px);padding:var(--space-5);z-index:10}.overlay[hidden]{display:none}.panel{background:var(--ui-bg-solid);border:1px solid var(--ui-border);border-radius:18px;padding:var(--space-6);width:min(440px,100%);max-height:100%;overflow:auto;box-shadow:0 24px 64px #00000080}.panel h1{margin:0 0 var(--space-2);font-size:32px;font-weight:800;letter-spacing:-.5px}.panel h2{margin:0 0 var(--space-4);font-size:22px;font-weight:800;letter-spacing:-.3px}.panel p{margin:0 0 var(--space-4);color:var(--ui-fg-muted)}.badge{display:inline-block;background:var(--accent);color:#06251d;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:var(--space-3)}.badge.perfect{background:var(--focus);color:#2a1e00}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-5)}.scoreboard div{background:#ffffff0d;border-radius:var(--radius-sm);padding:var(--space-3)}.scoreboard .label{display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ui-fg-muted)}.scoreboard .value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:24px}.row{display:flex;gap:var(--space-2);flex-wrap:wrap}.row>*{flex:1;min-width:110px}.levels{display:grid;gap:var(--space-2);margin-bottom:var(--space-4);max-height:min(52vh,460px);overflow-y:auto;padding-right:var(--space-1)}.act-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ui-fg-muted);padding:var(--space-3) 2px var(--space-1);border-bottom:1px solid var(--ui-border);position:sticky;top:0;background:var(--ui-bg-solid)}.act-heading:first-child{padding-top:0}.act-heading .tally{font-family:var(--font-num);color:var(--accent);letter-spacing:0}.level-row{display:flex;align-items:center;gap:var(--space-3);text-align:left;width:100%;justify-content:flex-start}.level-row .idx{font-family:var(--font-num);color:var(--accent);font-size:13px}.level-row .meta{margin-left:auto;font-family:var(--font-num);font-size:13px;color:var(--ui-fg-muted)}.level-row[disabled]{opacity:.45;cursor:not-allowed}.settings{display:grid;gap:var(--space-3);margin-bottom:var(--space-4)}.setting{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:#ffffff0d;border-radius:var(--radius-sm);padding:10px var(--space-3)}.setting label{font-size:14px;font-weight:600}.setting .hint{display:block;font-size:12px;color:var(--ui-fg-muted);font-weight:400}.switch{position:relative;width:52px;height:30px;border-radius:999px;border:1px solid var(--ui-border);background:#ffffff14;min-height:30px;padding:0;flex:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ui-fg-muted);transition:transform .16s ease,background .16s ease}.switch[aria-checked=true]{background:#4fe3be47}.switch[aria-checked=true]:after{transform:translate(22px);background:var(--accent)}.keys{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-3);font-size:13px;color:var(--ui-fg-muted);margin-bottom:var(--space-4)}.keys kbd{font-family:var(--font-num);background:#ffffff14;border:1px solid var(--ui-border);border-radius:6px;padding:1px 7px;color:var(--ui-fg)}.hints{margin:0 0 var(--space-4);padding-left:18px;color:var(--ui-fg-muted);font-size:14px}.hints li{margin-bottom:4px}@media (max-width: 720px){.level-chip .sub{display:none}.stat{min-width:66px;padding:6px 10px}.stat .value{font-size:19px}.panel{padding:var(--space-5)}.panel h1{font-size:26px}}@media (max-width: 560px){.level-chip{padding:7px 10px}.level-chip .name{font-size:14px;max-width:34vw}.stat.best{display:none}.stat{min-width:0;padding:5px 9px}.stat .label{font-size:10px;letter-spacing:.8px}.stat .value{font-size:17px}.stat .value .par{font-size:13px}button.icon{min-width:40px;padding:8px}}@media (max-width: 520px) and (orientation: portrait){.bottom{flex-direction:column;align-items:stretch}.dpad{margin:0 auto}.split-panel{max-width:none}}@media (max-height: 520px) and (orientation: landscape){.dpad{grid-template-columns:repeat(3,60px);gap:8px}.dpad button{width:60px;height:60px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}