:root{color-scheme:dark;--cyan:#56eeff;--pink:#ff54dd;--navy:#050915;--muted:#7892aa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--navy);color:#effbff}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 50% 25%,#15344d70,transparent 65%),linear-gradient(#030714b8,#040713ef),linear-gradient(135deg,#071120,#20103a) fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #2c4b66;background:linear-gradient(145deg,#14283d,#09121f);border-radius:6px;min-height:38px;transition:border-color .15s,background .15s,box-shadow .15s}button:hover{border-color:var(--cyan);background:#17334a}button:active,button.pressed{background:#23526b;box-shadow:0 0 16px #56eeff45 inset}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #fcff9b;outline-offset:4px}button[data-action]{touch-action:none;user-select:none;-webkit-user-select:none}a{color:var(--cyan);text-decoration:none}.arcade{width:min(100%,790px);margin:auto;padding:12px 20px 8px}.masthead{height:64px;display:flex;align-items:center;justify-content:space-between}.back{font-size:11px;font-weight:800;letter-spacing:2px}.brand{text-align:center}.brand h1{font-size:32px;letter-spacing:9px;line-height:1;margin:0;text-shadow:2px 0 #ff44cc,-2px 0 #32e9ff,0 0 23px #67e8ff70}.brand>span{font-size:8px;letter-spacing:4px;color:#b3cedf;display:block;margin-top:7px}.icon-button{width:34px;min-height:32px;color:var(--cyan)}.cabinet{padding:0 22px;border:1px solid #345168;border-radius:16px 16px 9px 9px;background:linear-gradient(105deg,#17243bdf,#080e1bf5 20%,#080e1bf5 80%,#152138df);box-shadow:0 0 0 5px #060a14,0 0 0 6px #26334d,0 20px 80px #000b,inset 0 0 40px #171d37;position:relative}.cabinet:before,.cabinet:after{content:"";position:absolute;width:3px;height:55%;top:19%;background:linear-gradient(transparent,#38eeff,#ff45db,transparent);box-shadow:0 0 15px #61d8ff60;pointer-events:none}.cabinet:before{left:5px}.cabinet:after{right:5px}.cabinet-top{height:37px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#87a3b7;gap:8px}.cabinet-top i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#70ffc0;box-shadow:0 0 9px #70ffc0;margin-right:5px}#status{color:var(--cyan);text-align:right}.arena{--well-h:min(calc(100dvh - 275px),calc((100vw - 340px)*2),600px);display:flex;justify-content:center;gap:20px;position:relative;padding-bottom:26px;isolation:isolate}.well-wrap{position:relative;height:var(--well-h);min-height:180px;aspect-ratio:1/2;flex:none;border:1px solid #8cfcff;box-shadow:0 0 4px #5effff,0 0 24px #22ccee35,inset 0 0 20px #1c8ddd25;z-index:2;background:#040e1b}#gameCanvas{display:block;width:100%;height:100%;touch-action:none}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#040a1733,#040918cf 45%,#04091830);text-align:center;padding:9px}.game-overlay[hidden]{display:none}.overlay-content{width:100%;padding:18px 2px}.eyebrow{color:#b5efff;font-size:8px;font-weight:700;letter-spacing:2px}.overlay-content h2{font-size:clamp(23px,4vw,42px);margin:10px 0;color:white;letter-spacing:3px;text-shadow:0 0 20px #56eeff}.overlay-content p{font-size:11px;line-height:1.7;color:#b8c9df;max-width:180px;margin:0 auto 20px}.primary{color:#00121c;background:linear-gradient(120deg,#9dffff,#37dcff);border-color:#b3ffff;box-shadow:0 0 22px #36dfff40;font-weight:900;letter-spacing:2px;padding:12px 22px}.primary:hover{background:#b2ffff;color:#051624}.overlay-hint{display:block;font-size:7px;letter-spacing:1.5px;margin-top:16px;color:#aad5e1}.rail{width:108px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;padding-top:3px;z-index:2}.panel{background:linear-gradient(125deg,#102036b8,#080f1dde);border:1px solid #29455e;border-radius:5px;padding:10px 9px;box-shadow:inset 0 1px #6ba1b116}.panel h2{font-size:9px;letter-spacing:2px;margin:0;color:#91aabd;font-weight:700}.panel small{float:right;color:#497086;font-size:8px}.panel canvas{display:block;width:100%;height:auto}.preview-panel>span{font-size:6px;letter-spacing:1px;display:block;text-align:center;color:#668397}.panel strong{display:block;font-size:21px;letter-spacing:1px;margin-top:7px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.best-panel{border-color:#634276}.best-panel strong{color:#eea5ff;font-size:18px}.best-panel>span{display:block;font-size:7px;line-height:1.7;letter-spacing:2px;color:#876e9c;margin-top:7px}.score-stat strong{color:var(--cyan);text-shadow:0 0 12px #44ddff60}.level-stat strong{color:#c2ff53}.lines-stat strong{color:#ff86dd}.rail-decoration{margin-top:auto;color:#34556a;padding:12px 8px}.rail-decoration b{font-size:32px;font-style:italic;font-weight:300}.rail-decoration span{font-size:8px;letter-spacing:3px;display:block;line-height:1.8}.floor{position:absolute;bottom:0;left:0;right:0;height:95px;overflow:hidden;z-index:0;pointer-events:none;opacity:.7;mask-image:linear-gradient(transparent,#000)}.floor:before{content:"";position:absolute;inset:-30px -20% -25px;background:repeating-linear-gradient(90deg,transparent 0 33px,#27d6ff60 34px 35px),repeating-linear-gradient(0deg,transparent 0 17px,#378bbc60 18px 19px),radial-gradient(ellipse at 50% 0,#ff48d54a,transparent 70%);transform:perspective(120px) rotateX(47deg);transform-origin:center bottom}.control-deck{max-width:540px;margin:auto;position:relative;z-index:2}.touch-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.touch-controls button{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-bottom:2px solid #35637c}.touch-controls b{font-size:20px;color:#c6f5ff;line-height:1}.touch-controls span{font-size:7px;letter-spacing:1px;color:#85a8bd}.touch-controls .drop-control{border-color:#a03b96;background:linear-gradient(#471b46,#1d122c)}.drop-control b{color:#ff9bed}.utility-controls{display:flex;gap:7px;margin-top:9px}.utility-controls button{flex:1;min-width:0;min-height:32px;font-size:9px;letter-spacing:1px;color:#93afc3;background:#09121f}.cabinet-footer{height:29px;display:flex;justify-content:space-between;align-items:center;font-size:6px;letter-spacing:1.5px;color:#46657c}.live-dot{color:#528c82}.keyboard-note{text-align:center;font-size:8px;letter-spacing:1px;color:#58768c;margin:14px 0 0}.keyboard-note span{margin:0 14px}dialog{width:min(92vw,410px);max-height:90dvh;overflow:auto;border:1px solid var(--cyan);border-radius:12px;background:#091321;color:#dcefff;padding:24px;box-shadow:0 0 50px #19bddd25}dialog::backdrop{background:#020714da;backdrop-filter:blur(6px)}dialog h2{font-size:18px;letter-spacing:2px;color:var(--cyan)}dialog dl{display:grid;grid-template-columns:95px 1fr;gap:13px;font-size:12px}dialog dt{color:#ffa3ee}dialog dd{margin:0;color:#b8ccdc}dialog p{font-size:12px;line-height:1.7;color:#89a6ba}dialog button{width:100%}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.arcade:fullscreen{width:100%;max-width:none;overflow:auto;background:radial-gradient(ellipse at 50% 30%,#13223d,#040713);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.arcade:fullscreen .cabinet{width:min(750px,100%)}.arcade:fullscreen .masthead{width:min(750px,100%)}
@media(max-width:600px){.arcade{padding:6px 9px 10px}.masthead{height:53px}.brand h1{font-size:26px;letter-spacing:7px}.brand>span{font-size:6px;letter-spacing:3px}.back{font-size:8px;letter-spacing:1px}.cabinet{padding:0 9px;border-radius:11px}.cabinet:before{left:2px;width:2px}.cabinet:after{right:2px;width:2px}.cabinet-top{height:29px;font-size:6px;letter-spacing:.6px}.arena{--well-h:min(calc(100dvh - 242px),calc((100vw - 146px)*2),600px);gap:8px;padding-bottom:18px}.rail{width:46px;gap:7px}.panel{padding:7px 3px;border-radius:3px}.panel h2{font-size:6px;letter-spacing:.8px;text-align:center}.panel small{display:none}.panel strong,.best-panel strong{font-size:12px;text-align:center;letter-spacing:0;margin-top:4px}.best-panel>span{font-size:5px;letter-spacing:.3px;text-align:center}.preview-panel>span{font-size:4px;letter-spacing:.2px}.rail-decoration{padding:0;text-align:center}.rail-decoration b{font-size:23px}.rail-decoration span{font-size:5px;letter-spacing:1px}.next-panel canvas{margin:3px 0}.touch-controls{gap:5px;grid-template-columns:repeat(3,minmax(0,1fr))}.touch-controls button{height:37px;min-height:37px;flex-direction:row;gap:7px}.touch-controls b{font-size:20px}.touch-controls span{font-size:7px}.utility-controls{margin-top:7px;gap:5px}.utility-controls button{font-size:7px;letter-spacing:.6px;min-height:30px}.cabinet-footer{font-size:5px;letter-spacing:.7px;height:22px}.keyboard-note{display:none}.overlay-content p{font-size:9px;margin-bottom:14px}.eyebrow{font-size:6px;letter-spacing:1px}.primary{font-size:11px;padding:10px 15px}.overlay-hint{font-size:5px;letter-spacing:1px;margin-top:12px}.floor{height:65px}}
@media(max-height:540px) and (min-width:540px){.arcade{width:min(100%,900px);padding:4px 14px}.masthead{height:43px}.brand h1{font-size:24px}.brand>span{font-size:5px}.cabinet{padding:0 16px;width:100%}.cabinet-top{height:24px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center}.arena{--well-h:min(calc(100dvh - 100px),calc((100vw - 400px)*2),600px);gap:12px;padding-bottom:16px}.rail{width:65px;gap:5px}.panel{padding:5px}.panel h2{font-size:7px;letter-spacing:1px}.panel strong{font-size:14px;margin-top:2px}.next-panel canvas{max-height:100px;object-fit:contain}.best-panel>span,.rail-decoration,.keyboard-note{display:none}.touch-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.touch-controls button{height:45px;flex-direction:column;gap:3px}.touch-controls span{font-size:6px;letter-spacing:0}.utility-controls{flex-direction:column}.utility-controls button{min-height:30px}.cabinet-footer{height:19px}.control-deck{width:100%}.overlay-content h2{font-size:23px}.overlay-content p{font-size:9px;margin-bottom:12px}.eyebrow{font-size:6px}.overlay-hint{font-size:5px}.primary{padding:9px 13px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}