* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; overflow-x:hidden; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top left, #243b80 0, #0f172a 38%, #050816 100%);
  color:#f8fafc;
}
.page-shell { width:min(980px, 96vw); margin:0 auto; padding:18px 0 28px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.back-link { color:#dbeafe; text-decoration:none; border:1px solid rgba(255,255,255,.16); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); }
.back-link:hover { background:rgba(255,255,255,.14); }
.brand { font-size:13px; letter-spacing:.18em; color:#93c5fd; font-weight:700; }
.game-card { background:rgba(15,23,42,.82); border:1px solid rgba(148,163,184,.25); box-shadow:0 20px 60px rgba(0,0,0,.35); border-radius:24px; padding:18px; }
.game-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.eyebrow { margin:0 0 3px; color:#38bdf8; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(28px, 5vw, 46px); }
.status-pill { border:1px solid rgba(56,189,248,.35); color:#bae6fd; background:rgba(14,165,233,.12); padding:8px 12px; border-radius:999px; font-size:14px; white-space:nowrap; }
canvas { display:block; width:100%; max-width:900px; height:auto; max-height:430px; margin:0 auto; border-radius:18px; border:1px solid rgba(255,255,255,.18); background:#020617; outline:none; touch-action:none; }
.controls { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; color:#cbd5e1; font-size:13px; }
.controls div { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; }
@media (max-width: 760px) { .controls{grid-template-columns:1fr;} .game-card{padding:12px;} .topbar{align-items:flex-start; flex-direction:column;} }