:root {
  color-scheme: dark;
  --bg: #0f1720;
  --panel: #1a2533;
  --ink: #e8f2ff;
  --accent: #48d8b2;
  --warn: #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, #24364a, var(--bg) 55%);
  color: var(--ink);
}

.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.top h1 { margin: 0; font-size: 2rem; }
.top p { margin: 4px 0 0; opacity: 0.88; }

button {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #2abf98, var(--accent));
  color: #03231b;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
}

.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.chip { background: var(--panel); border: 1px solid #2e4258; border-radius: 12px; padding: 10px 12px; }
.chip span { display: block; font-size: 0.75rem; opacity: 0.8; }

.game-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #2e4258; }
canvas { width: 100%; height: auto; display: block; background: #0d141d; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(10, 15, 21, 0.82);
}
.hidden { display: none; }

.tip { opacity: 0.85; margin: 10px 0; }
.mobile-controls { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; }

@media (max-width: 720px) {
  .hud { grid-template-columns: repeat(2, 1fr); }
  .mobile-controls { display: grid; }
}