:root {
  --bg: #0b1220;
  --panel: #0f1b31;
  --ink: #e9eefc;
  --muted: #a8b0c6;
  --brand: #5aa2ff;
  --bad: #ef4444;
  --ok: #22c55e;
}
* { box-sizing: border-box; }
body {
  margin:0;
  font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  background: var(--bg);
  color: var(--ink);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.app { width:min(1200px,100%); }
header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.title { font-weight:800; font-size:clamp(18px,3vw,28px) }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
button {
  background:linear-gradient(180deg, #7bb2ff, #3b82f6);
  color:white; border:0; border-radius:12px;
  padding:10px 14px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 16px rgba(59,130,246,.35);
}
button.secondary { background:#16223a; border:1px solid rgba(255,255,255,.12); box-shadow:none; color:var(--ink) }
button:disabled { opacity:.6; cursor:not-allowed }
a.btn{display:inline-block;background:#16223a;border:1px solid rgba(255,255,255,.18);color:var(--ink);padding:8px 10px;border-radius:10px;text-decoration:none}

.grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:16px }
.stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.metric{ background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 10px; text-align:center }
.metric .label{ color:var(--muted); font-size:12px; margin-bottom:6px }
.metric .value{ font-size:clamp(18px,4vw,28px); font-weight:800 }

.game-wrap{ display:flex; flex-direction:column; gap:12px; align-items:center; }
canvas {
  border:2px solid rgba(255,255,255,.15);
  border-radius:12px;
  background: linear-gradient(#4fc3f7, #0288d1);
  width: min(100%, 1100px);
  aspect-ratio: 16 / 7;
  display:block;
}
.help{ color:var(--muted); font-size:12px; text-align:center }

.flash{ animation: flash .15s ease }
@keyframes flash { 0%{filter:brightness(1.35)} 100%{filter:brightness(1)} }

@media (max-width:760px){
  body{ padding:16px }
  .help{ font-size:11px }
}