:root {
  --leaf: #4fe38d;
  --deep: #101522;
  --road: #252a34;
  --water: #1467bd;
  --line: rgba(255, 255, 255, 0.18);
  --yellow: #ffe47a;
  --pink: #ff80a8;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: #f7fbff;
  background:
    radial-gradient(circle at 20% 12%, rgba(79, 227, 141, 0.22), transparent 26%),
    linear-gradient(135deg, #17251c, #11141f 50%, #1a1020);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.home-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #f7fbff;
  background: rgba(16, 21, 34, 0.78);
  text-decoration: none;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.game-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 72px 18px 28px;
}

.cabinet {
  width: min(100%, 980px);
  border: 10px solid #0a0d13;
  border-radius: 8px;
  overflow: hidden;
  background: #090b10;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.hud,
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  color: var(--yellow);
  background: #07090e;
  text-transform: uppercase;
}

.hud div {
  display: grid;
  gap: 2px;
}

.hud span {
  color: #90ffd1;
  font-size: clamp(0.68rem, 1.8vw, 0.86rem);
  font-weight: 900;
}

.hud strong {
  font-size: clamp(1.05rem, 3vw, 1.75rem);
  line-height: 1;
}

.build-version {
  color: #ffd4e3;
  font-size: clamp(0.82rem, 2vw, 1.1rem);
}

.screen-wrap {
  position: relative;
  background: #030609;
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 6;
  image-rendering: pixelated;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(4, 7, 10, 0.82);
}

.overlay.hidden { display: none; }

.overlay h1 {
  margin: 0;
  color: var(--leaf);
  font-size: clamp(2.1rem, 7vw, 4.5rem);
  line-height: 1;
}

.overlay p {
  max-width: 520px;
  margin: 0;
  color: #dce8f2;
  line-height: 1.5;
  font-weight: 700;
}

button {
  min-width: 48px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #08120d;
  background: var(--leaf);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}

button:active { transform: translateY(2px); }

.controls button:last-child {
  min-width: 92px;
  background: var(--yellow);
}

@media (max-width: 640px) {
  .game-shell { padding-inline: 8px; }
  .cabinet { border-width: 6px; }
  .hud, .controls { padding: 8px; }
  .hud { flex-wrap: wrap; }
}