:root{--cream:#f5eedc;--panel:#17101f;--cell:#a5b4b8;--cell-dark:#718087}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{min-width:320px;background:radial-gradient(circle at 50% 0,#493760,#120c1b 58%,#08050d);color:var(--cream);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.game{height:100dvh;padding:18px 24px;position:relative}.brand{position:absolute;left:28px;top:25px;z-index:2;font:900 clamp(34px,5vw,70px)/.7 system-ui;letter-spacing:-.09em;transform:skewY(-4deg);text-shadow:4px 4px #09050d}.brand span{display:block;color:#70f27d}.brand b{color:#f15b70}.brand small{display:block;margin-top:18px;color:#bcaec2;font:9px ui-monospace,monospace;letter-spacing:.14em}.stage{height:100%;display:grid;grid-template-columns:minmax(0,auto) 165px;align-items:center;justify-content:center;gap:clamp(18px,3vw,42px)}.play-area{min-width:0}.board{position:relative;width:min(88vh,calc(100vw - 240px));aspect-ratio:1;display:grid;grid-template:repeat(9,1fr)/repeat(9,1fr);border:5px solid #ded5b8;background:#58686e;box-shadow:inset 0 0 0 2px #26343a,8px 9px #050308}.cell{position:relative;min-width:0;padding:0;border:1px solid #dce4df;background:var(--cell);box-shadow:inset 2px 2px #eef5ed,inset -2px -2px var(--cell-dark);cursor:pointer}.cell:hover{background:#bdd0cf}.cell.selected{outline:3px solid #ffe269;outline-offset:-3px;z-index:2}.ball{--ball:#fff;width:86%;aspect-ratio:1;display:block;margin:auto;border-radius:50%;background:radial-gradient(circle at 29% 21%,#fff9 0 7%,transparent 8%),radial-gradient(circle at 39% 34%,var(--ball),color-mix(in srgb,var(--ball),#000 42%));border:1px solid #fff8;box-shadow:inset -7px -8px 11px #0006,0 2px 4px #0008}.selected .ball{animation:selected .52s ease-in-out infinite alternate}.cell.born .ball{animation:born .52s cubic-bezier(.15,.85,.25,1.3) both}.cell.clearing .ball{animation:clear .42s ease-in both}.route-ball{position:absolute;z-index:5;width:9.55%;margin:0;left:calc(var(--x)*11.111% + .78%);top:calc(var(--y)*11.111% + .78%);transition:left 90ms linear,top 90ms linear;animation:step-hop 90ms ease-in-out infinite alternate;pointer-events:none}.cell.ghost .ball{visibility:hidden}@keyframes selected{to{transform:translateY(-17%) scale(1.07);filter:brightness(1.18)}}@keyframes step-hop{to{transform:translateY(-22%) scale(1.05)}}@keyframes born{from{transform:scale(.04);filter:brightness(3)}65%{transform:scale(1.2)}}@keyframes clear{to{transform:scale(.02) rotate(120deg);opacity:0;filter:brightness(3)}}.message{height:20px;margin:10px 0 0;color:#e8dfe9;font-size:11px}.sidebar{display:grid;gap:11px}.meter,.preview,.records{padding:10px;border:1px solid #766b86;background:#0e0a15bb}.sidebar small{display:block;margin-bottom:6px;color:#bcaec2;font-size:9px;letter-spacing:.1em}.meter strong{color:#ffdd76;font-size:20px}.preview>div{display:flex;gap:6px}.preview .ball{width:19px;margin:0}.action,.overlay button{padding:10px 7px;border:2px solid #75ed84;background:#1d5737;color:#fff;font:bold 10px ui-monospace,monospace;letter-spacing:.08em;box-shadow:3px 3px #050308;cursor:pointer}.records p{display:flex;justify-content:space-between;margin:5px 0;font-size:9px}.records b{color:#ffdd76}.records em{color:#8f8496;font-size:9px;font-style:normal}.overlay{position:absolute;inset:24% 7%;z-index:8;display:grid;place-content:center;gap:12px;padding:18px;border:2px solid #ffe278;background:#160e1dea;text-align:center;animation:curtain .48s cubic-bezier(.1,.8,.2,1)}.overlay b{color:#78f387;font-size:20px}.overlay span{font-size:10px}@keyframes curtain{from{opacity:0;transform:scale(.7) rotate(-3deg)}}@media(max-width:680px){.game{padding:10px}.brand{top:14px;left:14px;font-size:34px}.brand small{display:none}.stage{grid-template-columns:minmax(0,1fr) 96px;gap:9px}.board{width:calc(100vw - 125px)}.sidebar{gap:7px}.meter,.preview,.records{padding:6px}.meter strong{font-size:13px}.records p,.records em{font-size:7px}.message{font-size:8px}}