:root{
  --bg:#0f1226;          /* deep navy */
  --fg:#e8eaf6;          /* soft off‑white */
  --accent:#7ee787;      /* mint */
  --muted:#9aa3b2;       /* muted text */
  --danger:#ff7b7b;      /* game over */
  --card:#171a38;        /* panel */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 70% -20%, #1c2050 0, transparent 60%), var(--bg);
  color:var(--fg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.wrap{max-width:980px; width:100%;}
header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:16px;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#7ee787, #42c7b0 60%, #54b1ff);
  box-shadow:0 8px 20px rgba(84,177,255,.25), inset 0 0 30px rgba(255,255,255,.2);
}
h1{margin:0; font-size: clamp(20px, 2.6vw, 28px)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08)), var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.soon h2{margin:.2rem 0 .5rem; font-size: clamp(18px, 2.2vw, 22px)}
.soon p{margin:.5rem 0; color:var(--muted)}
.meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:.6rem}
.tag{border:1px solid rgba(255,255,255,.1); padding:.35rem .6rem; border-radius:999px; font-size:13px; color:var(--fg); opacity:.8}
.cta{display:flex; gap:10px; margin-top:12px}
.btn{appearance:none; cursor:pointer; border-radius:12px; border:1px solid rgba(255,255,255,.12); padding:.7rem 1rem; font-weight:600; color:var(--bg); background:var(--accent)}
.btn.secondary{background:transparent; color:var(--fg)}

/* Game panel */
.game{display:flex; flex-direction:column; gap:10px}
canvas{width:100%; aspect-ratio: 16/9; border-radius:12px; background: linear-gradient(180deg, #121530, #0d1024 70%); border:1px solid rgba(255,255,255,.1)}
.hud{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.stat{font-variant-numeric: tabular-nums; letter-spacing:.5px}
.hint{color:var(--muted)}
.controls{display:flex; gap:8px; align-items:center}
.pill{font-size:13px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); opacity:.85}
.gameover{color:var(--danger); font-weight:700}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}