:root{--bg:#0b0f1a;--bg2:#141a2e;--glass:#ffffff0f;--glass2:#ffffff1c;--line:#ffffff17;--ink:#eef1fa;--dim:#a3adc9;--a1:#5eead4;--a2:#818cf8;--danger:#fb7185;--grad:linear-gradient(135deg, var(--a1), var(--a2));--safe-t:env(safe-area-inset-top);--safe-b:env(safe-area-inset-bottom)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}#hud,#side,#stage,#controls,button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body{height:100%;background:var(--bg);height:100dvh;color:var(--ink);overscroll-behavior:none;margin:0;font:600 14px/1.25 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;overflow:hidden}body{background:radial-gradient(120% 70% at 50% -10%, #1b2447 0%, var(--bg) 60%)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:1em;height:1em;display:block}#app{height:100%;max-width:560px;height:100dvh;padding:calc(var(--safe-t) + 8px) 14px calc(var(--safe-b) + 10px);flex-direction:column;gap:10px;margin:0 auto;display:flex}#hud{flex:none;align-items:center;gap:8px;display:flex}#scoreBlock{flex:1;min-width:0}#scoreBlock small{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:10px;display:block}#score{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:28px;font-weight:800;line-height:1.05}.icon{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);border-radius:14px;place-items:center;width:44px;height:44px;font-size:20px;transition:transform .1s,background .15s;display:grid}.icon:active{background:var(--glass2);transform:scale(.93)}.icon.muted{color:var(--danger)}#stage{flex:auto;min-height:0;display:flex}#boardWrap{flex:1 1 0;min-width:0;min-height:0;position:relative}canvas#board{border:1px solid var(--line);touch-action:none;background:linear-gradient(#0e1428,#090c17);border-radius:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 40px #00000073,inset 0 0 0 1px #818cf814}#side{flex:none;gap:6px;display:flex}#side .card{flex-direction:column;flex:1;justify-content:center;min-width:0;padding:6px 2px;display:flex}.card{background:var(--glass);border:1px solid var(--line);text-align:center;-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:8px 6px}.card small{color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;font-size:10.5px;display:block}.card b{font-variant-numeric:tabular-nums;font-size:17px}canvas.mini{width:58px;height:29px;margin:0 auto;display:block}#controls{touch-action:none;flex:none;align-items:flex-end;gap:10px;display:flex}#controls.s-off{display:none}#controls.lefty{flex-direction:row-reverse}.pad{background:var(--glass);border:1px solid var(--line);touch-action:none;border-radius:22px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;height:68px;font-size:26px;transition:transform 80ms,background .12s,box-shadow .12s;display:flex}.pad small{letter-spacing:.12em;color:var(--dim);text-transform:uppercase;font-size:11px}.pad.on,.pad:active{background:var(--glass2);box-shadow:0 0 0 2px var(--a1) inset;transform:scale(.95)}.pad.wide{flex:1.6}.cluster{flex:1;align-items:flex-end;gap:8px;display:flex}.cluster.ab .pad{border-radius:50%;flex:0 0 76px;height:76px}.cluster.ab{justify-content:flex-end;gap:12px}.cluster.ab .pad:last-child{margin-bottom:14px}#controls.lefty .cluster.ab{justify-content:flex-start}#sheet{z-index:20;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}#sheet.show{display:flex}#sheetBackdrop{-webkit-backdrop-filter:blur(6px);background:#04060e99;animation:.2s fade;position:absolute;inset:0}#sheetPanel{border:1px solid var(--line);width:100%;max-width:520px;max-height:92%;padding:18px 18px calc(var(--safe-b) + 20px);touch-action:pan-y;background:linear-gradient(#1a2140,#10152a);border-bottom:0;border-radius:28px 28px 0 0;animation:.28s cubic-bezier(.2,.9,.3,1) rise;position:relative;overflow:auto}#sheet.full #sheetPanel{height:100%;max-height:100%;padding-top:calc(var(--safe-t) + 18px);background:radial-gradient(120% 60% at 50% -10%,#1f2a55 0%,#0b0f1a 65%);border:0;border-radius:0}#sheetPanel:before{content:"";background:var(--line);border-radius:4px;width:38px;height:4px;margin:-6px auto 14px;display:block}#sheet.full #sheetPanel:before{display:none}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}@keyframes fade{0%{opacity:0}}h1{letter-spacing:-.03em;margin:0;font-size:34px;font-weight:800}h1 span{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}h2{letter-spacing:-.02em;margin:0 0 12px;font-size:22px}h3{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px;font-size:11px}p{color:var(--dim);margin:6px 0;font-weight:500;line-height:1.45}p b{color:var(--ink)}.btn{background:var(--glass);border:1px solid var(--line);border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:10px;padding:15px;font-size:16px;display:flex}.btn:active{background:var(--glass2);transform:scale(.99)}.btn.primary{background:var(--grad);color:#071019;border:0;font-weight:800}.btn.small{padding:11px;font-size:14px}.modes{gap:8px;margin-top:16px;display:grid}.mode{text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:18px;align-items:center;gap:12px;padding:14px 16px;display:flex}.mode.sel{background:linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box;border:1.5px solid #0000}.mode b{font-size:16px;display:block}.mode span{color:var(--dim);font-size:12.5px;font-weight:500}.mode em{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;font-size:12px;font-style:normal}.chips{scrollbar-width:none;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{background:var(--glass);border:1px solid var(--line);font-variant-numeric:tabular-nums;text-align:center;border-radius:12px;flex:none;min-width:44px;min-height:44px;padding:10px 12px}.chip.sel{background:var(--grad);color:#071019;border:0;font-weight:800}.seg{background:var(--glass);border:1px solid var(--line);border-radius:14px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.seg button{border-radius:10px;min-height:44px;padding:12px 4px;font-size:13px}.seg button.sel{background:var(--grad);color:#071019;font-weight:800}.row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.row:last-child{border:0}.row span{color:var(--ink)}.row small{color:var(--dim);margin-top:2px;font-size:12px;font-weight:500;display:block}.switch{background:var(--glass2);border:1.5px solid #ffffff47;border-radius:32px;flex:none;width:52px;height:32px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .18s;position:absolute;top:2px;left:2px}.switch.on{background:var(--a1);border-color:var(--a1)}.switch.on:after{transform:translate(20px)}input[type=range]{width:150px;accent-color:var(--a1)}.btn:disabled{opacity:.45;pointer-events:none}.btn.danger{border-color:var(--danger);color:#ffd5dc;background:#fb71852e}#count{z-index:30;pointer-events:none;color:#fff;text-shadow:0 6px 40px #000000b3;background:#04060e59;place-items:center;font-size:min(34vw,200px);font-weight:800;display:none;position:fixed;inset:0}#count.show{animation:.5s ease-out infinite pop;display:grid}@keyframes pop{0%{opacity:.4;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.homeGrid>div{display:block}.grid2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.result{text-align:center}.result canvas{border:1px solid var(--line);border-radius:16px;width:100%;max-width:260px;height:auto;margin:6px auto 4px;display:block}.stats{color:var(--dim);justify-content:center;gap:18px;margin:6px 0 2px;font-size:13px;display:flex}.stats b{color:var(--ink);font-size:18px;display:block}.hint{color:var(--dim);text-align:center;margin-top:10px;font-size:12px}#toast{left:50%;top:calc(var(--safe-t) + 66px);border:1px solid var(--line);opacity:0;pointer-events:none;z-index:50;white-space:nowrap;background:#141a2ef2;border-radius:30px;padding:9px 16px;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,-8px)}#toast.show{opacity:1;transform:translate(-50%)}@media (max-height:640px){#score{font-size:22px}.pad{height:56px}.cluster.ab .pad{flex-basis:62px;height:62px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.pad{direction:ltr}@media (min-width:700px) and (orientation:portrait){#app{gap:14px;max-width:760px;padding-left:24px;padding-right:24px}#score{font-size:38px}.icon{border-radius:16px;width:50px;height:50px;font-size:24px}#side{gap:10px}.card{padding:10px 6px}.card b{font-size:22px}canvas.mini{width:76px;height:38px}.pad{height:clamp(72px,8dvh,104px);font-size:32px}.cluster.ab .pad{flex-basis:clamp(84px,9dvh,112px);height:clamp(84px,9dvh,112px)}}@media (min-width:700px){#sheet{align-items:center}#sheetPanel,#sheet.full #sheetPanel{border:1px solid var(--line);background:linear-gradient(#1a2140,#10152a);border-radius:28px;max-width:540px;height:auto;max-height:92%;padding:22px 22px 24px}#sheetPanel:before,#sheet.full #sheetPanel:before{display:none}}@media (max-width:340px){.pad small{display:none}#side .card b{font-size:15px}}#rotate{z-index:100;text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:none;position:fixed;inset:0}#rotate svg{width:56px;height:56px;color:var(--a1);animation:2.4s ease-in-out infinite turn}#rotate b{font-size:20px}#rotate span{color:var(--dim);font-weight:500}@keyframes turn{0%,20%{transform:rotate(90deg)}60%,to{transform:rotate(0)}}@media (orientation:landscape) and (pointer:coarse) and (max-height:700px){#rotate{display:flex}}.ico{font-size:1.15em;display:inline-flex}#update{left:50%;bottom:calc(var(--safe-b) + 14px);z-index:60;background:var(--grad);color:#071019;border-radius:30px;padding:12px 18px;font-weight:800;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #00000080}#update[hidden]{display:none}