:root{--bg: #07071a;--bg-2: #0e0e2e;--cyan: #00ffe7;--magenta: #ff00d4;--violet: #8a2be2;--yellow: #fff700;--text: #e6e6ff;--muted: #8a8ab8}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:radial-gradient(ellipse at top,#1a0a3e 0%,var(--bg) 60%,#000 100%);color:var(--text);font-family:Orbitron,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.stars{position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 80%,#fff,transparent),radial-gradient(1px 1px at 40% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 20%,#fff,transparent),radial-gradient(2px 2px at 50% 50%,#fff,transparent),radial-gradient(1px 1px at 10% 90%,#fff,transparent),radial-gradient(1px 1px at 85% 45%,#fff,transparent),radial-gradient(1px 1px at 25% 75%,#fff,transparent);opacity:.45;animation:drift 60s linear infinite;pointer-events:none}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-200px)}}.app{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}.hud{width:min(calc(100vh - 90px),calc(100vw - 16px));display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-weight:900;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:2px;display:flex;gap:8px}.stats{display:flex;gap:14px}.stat{display:flex;flex-direction:column;align-items:flex-end}.label{font-size:.65rem;color:var(--muted);letter-spacing:2px}.value{font-weight:700;font-size:1.4rem;font-variant-numeric:tabular-nums}.glow-cyan{color:var(--cyan);text-shadow:0 0 4px var(--cyan),0 0 10px var(--cyan),0 0 20px rgba(0,255,231,.5)}.glow-magenta{color:var(--magenta);text-shadow:0 0 4px var(--magenta),0 0 10px var(--magenta),0 0 20px rgba(255,0,212,.5)}.board-wrap{position:relative;width:min(calc(100vh - 90px),calc(100vw - 16px));aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0b0b25,#050514);border:1px solid rgba(138,43,226,.4);box-shadow:0 0 30px #8a2be259,inset 0 0 40px #00ffe714}#game{width:100%;height:100%;display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#050514b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .25s ease;z-index:2}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{text-align:center;padding:28px 32px;border-radius:14px;background:#0f0f28d9;border:1px solid rgba(0,255,231,.35);box-shadow:0 0 25px #00ffe740;max-width:90%}#overlay-title{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:8px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}#overlay-text{color:var(--muted);margin-bottom:18px;font-size:.9rem;letter-spacing:1px}#start-btn{font-family:inherit;font-weight:700;letter-spacing:3px;font-size:1rem;padding:12px 28px;background:linear-gradient(135deg,var(--cyan),var(--magenta));color:#07071a;border:none;border-radius:999px;cursor:pointer;box-shadow:0 0 18px #00ffe799;transition:transform .15s ease,box-shadow .15s ease}#start-btn:hover{transform:translateY(-1px);box-shadow:0 0 28px #ff00d4b3}#start-btn:active{transform:translateY(1px)}.controls{display:flex;flex-direction:column;align-items:center;gap:6px}.row{display:flex;gap:6px}.dpad{width:54px;height:54px;border-radius:12px;border:1px solid rgba(0,255,231,.35);background:#0f0f28b3;color:var(--cyan);font-size:1.4rem;cursor:pointer;transition:all .1s ease;box-shadow:inset 0 0 12px #00ffe726}.dpad:hover{background:#00ffe71f}.dpad:active{transform:scale(.93);background:#ff00d433;border-color:var(--magenta);color:var(--magenta)}@media (hover: hover) and (pointer: fine){.controls{display:none}}.foot{color:var(--muted);font-size:.65rem;letter-spacing:2px;opacity:.6;height:14px;line-height:14px}