:root{--bg-top: #06111a;--bg-bottom: #10283a;--panel: rgba(8, 18, 28, .82);--panel-border: rgba(136, 226, 255, .16);--text: #f4fbff;--muted: rgba(228, 241, 247, .72);--accent: #7df0c8;--accent-strong: #99f6ff;--shadow: rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top,rgba(85,194,255,.18),transparent 32%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom))}body{min-height:100vh;min-height:100dvh;overflow:hidden}.app-shell{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(260px,320px);gap:18px;padding:18px}.hud-panel,.viewport-shell{min-height:0}.hud-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:24px;box-shadow:0 24px 70px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:22px;display:flex;flex-direction:column;gap:18px;overflow:auto}.back-link{color:var(--accent-strong);text-decoration:none;font-weight:600}.brand-lockup h1,.controls-card h2,.hint-card h2{margin:0}.eyebrow,.overlay-kicker,.stat-label{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem}.eyebrow,.overlay-kicker{color:var(--accent-strong)}.brand-lockup h1{font-size:clamp(2rem,3.2vw,3rem);line-height:1;margin-top:8px}.lede,.hint-card p,.overlay-card p{color:var(--muted);line-height:1.6}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-card,.controls-card,.next-card,.hint-card,.mobile-controls{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}.stat-value{display:block;margin-top:8px;font-size:1.8rem}.stat-value--small{font-size:1rem}.controls-list{display:grid;gap:10px;margin-top:12px}.controls-list div{display:flex;align-items:center;gap:10px;color:var(--muted)}kbd{border:1px solid rgba(153,246,255,.24);background:#99f6ff14;border-radius:9px;padding:4px 8px;color:var(--text);font:inherit;font-size:.82rem}.viewport-shell{display:flex;flex-direction:column;min-height:0}.action-btn,.touch-btn{border:0;border-radius:999px;padding:12px 16px;font:inherit;font-weight:700;cursor:pointer;color:#042029;background:linear-gradient(135deg,var(--accent),var(--accent-strong));box-shadow:0 12px 24px #5cebff2e}.canvas-wrap{position:relative;flex:1;min-height:0;border-radius:28px;overflow:hidden;touch-action:none;overscroll-behavior:contain;border:1px solid rgba(125,240,200,.16);background:radial-gradient(circle at 30% 20%,rgba(131,246,221,.12),transparent 26%),linear-gradient(180deg,#030a14db,#04121ff5);box-shadow:0 30px 80px #0000006b}#game-canvas,#next-canvas{display:block;width:100%;height:100%}#game-canvas{touch-action:none}.mobile-statbar{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;pointer-events:none}.mobile-stat{padding:10px 12px;border-radius:16px;background:#06121dc2;border:1px solid rgba(153,246,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px #0000003d}.mobile-stat__value{display:block;margin-top:6px;font-size:1rem;line-height:1.1}.mobile-stat__value--small{font-size:.82rem}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#020810a8}.overlay--hidden{display:none}.overlay-card{width:min(100%,460px);padding:28px;border-radius:24px;border:1px solid rgba(153,246,255,.18);background:#09131eeb;box-shadow:0 26px 60px #00000070;text-align:center}.overlay-card--small{width:min(100%,360px)}.overlay-card h2{margin:10px 0 8px;font-size:clamp(2rem,5vw,3rem)}.next-card{display:flex;flex-direction:column;gap:12px}#next-canvas{height:auto;aspect-ratio:1 / 1;border-radius:18px;background:radial-gradient(circle,#99f6ff24,#010811eb)}.mobile-controls{display:none;gap:10px}.touch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.touch-btn--wide{width:100%}@media (max-width: 1120px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;min-height:100dvh;grid-template-columns:1fr}.canvas-wrap{min-height:68vh}.mobile-controls{display:grid}}@media (max-width: 768px){.app-shell{padding:12px}.hud-panel,.canvas-wrap{border-radius:20px}.canvas-wrap{min-height:56vh}.hud-panel--left .stat-grid,.controls-card{display:none}.mobile-statbar{display:grid}.stat-grid{grid-template-columns:1fr 1fr}}