/* Pelipuisto — Shared game page styles
   Include in every game page: <link rel="stylesheet" href="/shared/game.css">
   Games override only what differs (colors, background gradient, custom selectors).

   CSS variable contract — games set these inline on html,body:
     --g-bg          page background color
     --g-text        text color
     --g-surface     canvas/stage background
     --g-overlay     overlay backdrop color
     --g-shadow-text HUD text shadow
     --g-max-width   game wrapper max-width (default 520px)               */

/* === Reset === */
* { box-sizing: border-box; }

/* === Base === */
html, body {
  margin: 0; padding: 0;
  width: 100%; min-height: 100vh;
  --g-bg: #0a1428;
  --g-text: #e4ecf7;
  --g-surface: #06101e;
  --g-overlay: rgba(6, 16, 30, 0.78);
  --g-shadow-text: 0 1px 8px rgba(0,0,0,0.6);
  background: var(--g-bg);
  color: var(--g-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh;
}

/* === Layout wrapper === */
#wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 12px;
  width: 100%; max-width: var(--g-max-width, 800px);
}

/* === HUD (score bar) === */
#hud {
  display: flex; gap: 24px;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: var(--g-shadow-text);
}
#hud .label { opacity: 0.7; font-weight: 500; margin-right: 6px; }
#hud .val       { color: #7df9c8; }
#hud .val.high  { color: #ffd97a; }
#hud .val.lives { color: #ff6b6b; }
#hud .val.time  { color: #4dc8ff; font-variant-numeric: tabular-nums; }

/* === Stage (canvas wrapper with overlay inside) === */
#stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 10px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(125, 249, 200, 0.15) inset,
    0 0 60px rgba(80, 200, 220, 0.08) inset;
  background: var(--g-surface);
}

/* === Canvas === */
canvas { display: block; touch-action: none; }

/* Direct-canvas games (no #stage wrapper) */
#wrap > canvas {
  border-radius: 14px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.55);
  cursor: pointer;
}

/* === Overlay — start / game-over screen === */
#overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: var(--g-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center; padding: 24px;
  transition: opacity 0.25s ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

/* Full-viewport variant (flappy, mushroom-basket, etc.) */
#overlay.fixed,
body > #overlay {
  position: fixed;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
}

#overlay h1 {
  margin: 0; font-size: 32px; font-weight: 700;
  background: linear-gradient(135deg, #7df9c8 0%, #6db8ff 60%, #b692ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
}
#overlay p {
  margin: 0; opacity: 0.8; max-width: 320px;
  line-height: 1.5; font-size: 15px;
}
#overlay .score-line { font-size: 18px; opacity: 0.95; }
#overlay .score-line strong { color: #7df9c8; font-weight: 700; }
#overlay .score-line.new strong { color: #ffd97a; }

/* === Start button === */
button.start {
  cursor: pointer;
  background: linear-gradient(135deg, #7df9c8 0%, #4dc8ff 100%);
  color: #062018;
  border: none;
  padding: 14px 32px;
  font-size: 17px; font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(125, 249, 200, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.02em;
  font-family: inherit;
}
button.start:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(125, 249, 200, 0.45);
}
button.start:active { transform: translateY(0); }

/* === Hint text === */
.hint {
  font-size: 13px; opacity: 0.55;
  margin-top: 4px;
}

/* === Responsive === */
@media (max-width: 520px) {
  #hud { font-size: 14px; gap: 16px; }
  #overlay h1 { font-size: 26px; }
}