/* Game page: canvas, HUD chips, overlays, touch pad buttons. */
#game-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { position: fixed; top: 12px; left: 12px; right: 12px; pointer-events: none; z-index: 30; }
.hud-row { display: flex; gap: 8px; }
.hud-row.right { justify-content: flex-end; margin-top: 8px; }
.hud-chip {
  background: rgba(20, 14, 40, 0.72); border: 1px solid rgba(232, 164, 76, 0.4);
  border-radius: 10px; padding: 6px 12px; font-size: 14px; letter-spacing: 0.06em;
  color: #cbb98f; backdrop-filter: blur(4px);
}
.hud-chip b { color: var(--paper); font-size: 16px; }
.hud-chip.danger b { color: #ff7a5c; }
.marble-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 6px;
  background: radial-gradient(circle at 35% 30%, #ffb59a, var(--coral) 55%, #7c1f10);
  box-shadow: 0 0 8px rgba(232, 86, 63, 0.7);
}
.marble-dot.spent { background: transparent; box-shadow: none; border: 1px dashed rgba(232, 86, 63, 0.35); }
#hud-banner {
  margin-top: 14px; text-align: center; font-size: clamp(16px, 3.4vw, 26px);
  font-weight: 800; color: var(--mint); text-shadow: 0 0 18px rgba(125, 255, 176, 0.5);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s;
}
#hud-banner.show { opacity: 1; transform: none; }
/* overlays */
#overlays { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.ov { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(12, 8, 24, 0.72); backdrop-filter: blur(5px); pointer-events: auto; }
.ov.open { display: flex; }
#ov-start, #ov-end, #ov-pause { display: none; }
#ov-start.open, #ov-end.open, #ov-pause.open { display: flex; }
.ov-card {
  max-width: min(480px, 92vw); padding: 30px 34px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, #2a1c46, #1a1130);
  border: 1px solid rgba(232, 164, 76, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.ov-title { margin: 0 0 8px; font-size: clamp(34px, 8vw, 56px); letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--amber), var(--coral), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-title.small { font-size: clamp(24px, 6vw, 38px); }
.ov-sub { color: #c9b8a0; line-height: 1.55; margin: 0 0 14px; }
.ov-keys { list-style: none; padding: 0; margin: 0 0 18px; color: #a99c86; font-size: 14px; }
.ov-keys li { margin: 4px 0; }
.ov-keys b { color: var(--paper); }
.ov-btn {
  font: inherit; font-weight: 800; font-size: 17px; letter-spacing: 0.04em;
  color: #1d1206; background: linear-gradient(180deg, #ffd166, #e8a44c);
  border: none; border-radius: 12px; padding: 13px 28px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(232, 164, 76, 0.45);
}
.ov-btn:hover { transform: translateY(-2px); }
/* touch d-pad */
.tbtn {
  width: 60px; height: 60px; border-radius: 16px; font-size: 22px; color: var(--paper);
  background: rgba(36, 22, 56, 0.75); border: 1px solid rgba(232, 164, 76, 0.5);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.tbtn:active { background: rgba(232, 164, 76, 0.4); }
.tbtn.small { border-radius: 10px; }