:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#101321;color:#f4f5ff;--muted:#a2abc7;--cyan:#76eee0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#252449 0,transparent 55%),#101321;min-height:100svh}main{max-width:650px;margin:auto;padding:24px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--cyan);margin:0 0 6px;font-weight:700}h1{font-size:clamp(27px,6vw,40px);letter-spacing:-1.3px;margin:0}h1 span{color:var(--cyan)}button{font:inherit;font-size:14px;font-weight:650;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid #343c56;background:#20263a;color:#eff2ff;border-radius:12px;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){background:#2e3751}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#1b2032;border:1px solid #30364d;border-radius:16px;padding:13px 8px;margin-bottom:16px;text-align:center}.stats span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.stats strong{font-size:22px;font-variant-numeric:tabular-nums}.stats div+div{border-left:1px solid #343950}.board{position:relative;width:min(100%,calc((100svh - 270px)*.75));min-width:220px;margin:auto;border:1px solid #39415c;border-radius:18px;overflow:hidden;background:#14192b;box-shadow:0 15px 60px #0005}canvas{display:block;width:100%;aspect-ratio:3/4;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#101321b8;backdrop-filter:blur(4px)}.overlay>div{max-width:320px}.badge{font-size:10px;letter-spacing:2px;color:var(--cyan);font-weight:750}h2{font-size:clamp(22px,5vw,30px);line-height:1.15;letter-spacing:-.6px;margin:14px 0}.overlay p{font-size:14px;line-height:1.5;color:#c1c9e2}.primary{background:var(--cyan);color:#102c32;border:0;padding:14px 22px}.primary:hover:not(:disabled){background:#a1fff2}.controls{display:flex;gap:8px;justify-content:center;margin-top:14px}.controls button:first-child,.controls button:last-child{font-size:22px;min-width:52px}.instructions{text-align:center;font-size:13px;line-height:1.7;color:#ced5eb;margin:13px 0 10px}.instructions span{color:var(--muted);font-size:11px}footer{text-align:center;font-size:10px;color:var(--muted);line-height:1.6}footer button{margin-top:8px;font-size:12px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-height:600px){.board{width:min(100%,300px)}main{padding-top:12px}}@media(prefers-reduced-motion:reduce){.overlay{backdrop-filter:none}}
:is(.board,.board *,button){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#left,#right{touch-action:none}