:root {
  --pink: #ff6fae;
  --pink-deep: #e0428a;
  --sky: #8fd6ff;
  --ink: #3a2b3f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #bfe9ff;
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#game-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Crisp scaling of the virtual coordinate space to the device screen. */
  image-rendering: auto;
}

/* ---- In-game HUD (over the 3D canvas) ---- */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* viewport-fit=cover means the page runs under the notch, so the top row has
     to be pushed clear of it or the clock hides behind the camera cutout. */
  padding: calc(clamp(10px, 2.5vw, 20px) + env(safe-area-inset-top, 0px))
           calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-right, 0px))
           clamp(10px, 2.5vw, 20px)
           calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-left, 0px));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: opacity 0.25s ease;
}

.hud.hidden {
  opacity: 0;
}

/* White text sat straight on the pale sky, which is barely over 1:1 contrast —
   on a phone in daylight the score and clock were effectively invisible. Each
   readout gets its own soft dark pill so it reads against sky, sea or flamingo.
   The pills go on the three children, not on .hud itself, so the bar stays
   see-through between them and doesn't box in the top of the screen. */
.hud-pill,
.hud-timer,
.hud-times {
  background: rgba(28, 22, 40, 0.42);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  backdrop-filter: blur(2px);
}

.hud-pill {
  font-size: clamp(1rem, 3vw, 1.5rem);
}

.hud-timer {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 800;
}

.hud-timer.low {
  color: #ff4d6d;
}

.hud-times {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(0.85rem, 2.4vw, 1.2rem);
  line-height: 1.3;
}

/* ---- Overlay (menu / win / lose screens) ---- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 36, 0.55);
  backdrop-filter: blur(3px);
  transition: opacity 0.25s ease;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.card {
  background: linear-gradient(160deg, #fff, #ffe6f3);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  max-width: min(90vw, 480px);
  border: 4px solid var(--pink);
}

.card h1 {
  margin: 0 0 0.3em;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: var(--pink-deep);
}

.card p {
  margin: 0.4em 0;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  line-height: 1.4;
}

.card .stats {
  font-weight: 700;
  color: var(--pink-deep);
  min-height: 1.2em;
}

.card button {
  margin-top: 1em;
  padding: 0.7em 2.2em;
  font: inherit;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--pink-deep);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.card button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--pink-deep);
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.loading.hidden { display: none; }