:root{--bg:#0a0c10;--panel-bg:#0c0e12c7;--panel-border:#ffffff14;--panel-shadow:0 8px 24px #00000059;--text:#dce2ecc7;--accent:#38bdf8;--done:210, 220, 235}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}#board-wrap{position:absolute;inset:76px 8px 8px}#scene{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.floating-dock{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:36px;align-items:center;gap:10px;padding:8px 14px;display:flex;position:absolute}.top-dock{top:max(12px, env(safe-area-inset-top,0px));max-width:calc(100vw - 12px);left:50%;transform:translate(-50%)}.dock-separator{background:#ffffff1f;flex:none;width:1px;height:28px;margin:0 4px}.icon-btn{width:52px;height:52px;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;flex:none;justify-content:center;align-items:center;transition:color .2s,border-color .2s,background .2s,transform .15s,opacity .2s;display:flex}.icon-btn[hidden]{display:none}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}.icon-btn svg .dot{fill:currentColor;stroke:none}.icon-btn:hover{color:var(--accent);background:#38bdf80f;border-color:#38bdf840}.icon-btn:active{transform:scale(.94)}.icon-btn:disabled{opacity:.28;color:#dce2ec8c;pointer-events:none}#btn-sound .off,#btn-sound.muted .on{display:none}#btn-sound.muted .off{display:inline}#btn-next.ready{color:var(--accent);opacity:1;border-color:#38bdf866}#btn-hint.ready:not(:disabled){color:var(--accent);opacity:1}.level-dots{align-items:center;gap:6px;min-height:52px;padding:0 4px;display:flex}.lvl-num{color:#dce2ec61;font-variant-numeric:tabular-nums;letter-spacing:.02em;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;min-width:2em;height:36px;padding:0 6px;font:500 16px/1 ui-monospace,SF Mono,Consolas,monospace;transition:color .2s,background .2s,opacity .2s}.lvl-num:hover:not(:disabled){color:var(--accent);background:#38bdf814}.lvl-num.done{color:rgba(var(--done), .72)}.lvl-num.current{color:var(--accent);background:#38bdf81f}.lvl-num.current.done{color:var(--accent)}.lvl-num:disabled{opacity:.28;cursor:default}.lvl-num[hidden]{display:none}.dev-banner{z-index:11;left:50%;top:max(76px, calc(env(safe-area-inset-top,0px) + 64px));color:#dce2ec59;letter-spacing:.03em;pointer-events:none;white-space:nowrap;background:0 0;border:none;margin:0;padding:0;font-size:12px;position:absolute;transform:translate(-50%)}.dev-banner[hidden]{display:none}@media (width<=768px){#board-wrap{top:max(72px, calc(env(safe-area-inset-top,0px) + 60px));right:4px;bottom:max(4px, env(safe-area-inset-bottom,0px));left:4px}.dev-banner{top:max(70px, calc(env(safe-area-inset-top,0px) + 58px));font-size:11px}.top-dock{border-radius:32px;gap:6px;padding:6px 12px}.icon-btn{width:46px;height:46px}.icon-btn svg{width:24px;height:24px}.dock-separator{height:24px;margin:0 2px}.level-dots{gap:4px;min-height:46px;padding:0 2px}.lvl-num{min-width:1.85em;height:32px;padding:0 4px;font-size:14px}}
