* { box-sizing: border-box; }

:root {
  --panel: #fff;
  --text: #1f2937;
  --muted: #64748b;
  --accent: #16a34a;
}

html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at top, #e0f2fe, #f8fafc 55%);
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
}

button { -webkit-tap-highlight-color: transparent; }

/* Full-screen frame: the menu and the game each fill the whole viewport. */
.game-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  text-align: center;
}

.character-select {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px
           calc(env(safe-area-inset-bottom, 0px) + 24px);
  overflow-y: auto;
}
.character-select h1 { margin: 0; font-size: clamp(26px, 6vw, 34px); letter-spacing: 3px; }
.character-select h2 { margin: 6px 0 3px; font-size: 18px; }
.subtitle { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

.menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 500px;
  margin: auto;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 92px;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  touch-action: manipulation;
}
.menu-item:hover { transform: translateY(-2px); border-color: #94a3b8; }
.menu-item.selected {
  border-color: var(--accent);
  background: #f0fdf4;
  color: #166534;
  transform: scale(1.025);
  box-shadow: 0 5px 16px rgba(22, 163, 74, .15);
}
.character-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #dbe4ee;
  overflow: hidden;
}
.character-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.game-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}
.game-stage[hidden], .instructions[hidden] { display: none; }

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

/* HUD sits above the canvas. */
.game-hud {
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}
.score-hud {
  position:absolute;
  top:9px;
  right:10px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.9);
  color:#0f172a;
  font:bold 16px monospace;
  text-shadow:none;
  white-space:nowrap;
}
.health-hud {
  position:absolute;
  top:7px;
  left:10px;
  display:flex;
  gap:6px;
  font-size:34px;
  line-height:1;
}
.health-heart { display:inline-block; font-family:Arial,sans-serif; }
.health-heart.filled { color:#ef4444; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.health-heart.empty { color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.95); }

.stage-controls {
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:11;
  display:flex;
  gap:6px;
}
.stage-controls button {
  border:1px solid rgba(255,255,255,.8);
  border-radius:8px;
  padding:7px 10px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  touch-action:manipulation;
}
.stage-controls button:active { transform:scale(.97); }

/* Game-over / pause overlays sit above the score HUD (z:10) and controls. */
.game-overlay {
  position:absolute;
  inset:0;
  z-index:12;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(8,15,28,.62);
  color:#fff;
  text-align:center;
  pointer-events:none;
}
.game-overlay[hidden] { display:none !important; }
.game-overlay-title {
  font:bold clamp(22px, 6vw, 30px) Arial, sans-serif;
  letter-spacing:3px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.game-overlay-sub {
  font:500 clamp(12px, 3.5vw, 14px) Arial, sans-serif;
  color:#dbeafe;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

.instructions {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #475569;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .menu-list { gap:8px; }
  .menu-item { min-height:76px; padding:8px; gap:8px; font-size:14px; }
  .character-icon { width:52px; height:52px; flex-basis:52px; border-radius:12px; }
  .score-hud { font-size:14px; top:7px; right:7px; padding:6px 10px; }
  .health-hud { left:7px; top:6px; gap:5px; font-size:30px; }
  .stage-controls button { padding:6px 8px; font-size:12px; }
  .instructions { font-size:11px; }
}

/* On small/phone screens the keyboard hints would clutter the game area and
   collide with the top HUD; touch controls (tap to jump) are self-explanatory,
   so hide the hints there and rely on the visible overlay text. */
@media (max-width: 700px) {
  .instructions { display: none; }
}