:root {
  --red: #ff3131;
  --red-deep: #d91f1f;
  --ink: #3a1d10;
  --cream: #fff6e8;
  --gold: #ffd23f;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
}

/* ---------- screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  background: rgba(255, 246, 232, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.screen.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Perf: a full-screen backdrop blur over the live canvas is re-blurred every
   frame; only the visible screen keeps it, and hidden screens stop ticking
   their infinite animations. */
.screen:not(.is-active) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.screen:not(.is-active) :is(.btn-pulse, .sparkle, .mystery-box, .intro-q, .intro-vortex-spin, .intro-chef, .box-lid, .box-medal, .box-twinkles i) { animation-play-state: paused; }
.screen:not(.is-active) .mystery-box::before, .screen:not(.is-active) .box-body::after { animation-play-state: paused; }
#play { display: none; }
.scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: safe center; }

h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 900; letter-spacing: -.02em; }
h1 { font-size: clamp(26px, 8vw, 34px); color: var(--red); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
h2 { font-size: 30px; color: var(--red); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  font: 900 20px/1 var(--font);
  padding: 16px 22px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn-primary { width: 100%; margin-top: 14px; font-size: 26px; background: var(--red); color: #fff; }
.btn-pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.035); } }

.hint { margin: 10px 0 0; font-size: 13px; font-weight: 700; opacity: .6; }

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0 0 auto 0;
  padding: calc(30px + var(--safe-top)) 14px 0;
  pointer-events: none;
  /* Own compositor layer + layout containment: HUD text changes never
     relayout the page or repaint the canvas layer. No paint containment, so
     the score's stroke/shadow and bump animation are never clipped. */
  contain: layout style;
  will-change: transform;
}
.hud-pill, .hud-clock, .hud-squad, .hud-score { contain: layout style; }
.hud-sub { margin-top: 4px; }
.hud-pill {
  font-size: 15px;
  font-weight: 900;
  background: rgba(255, 255, 255, .9);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.hud-pins { color: var(--red-deep); }
.hud-bar {
  height: 10px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
#hud-time {
  height: 100%;
  background: linear-gradient(90deg, #ffb100, var(--red));
  transform-origin: left center;
  will-change: transform;
}
.hud-timer { display: flex; align-items: center; gap: 8px; }
.hud-timer .hud-bar { flex: 1; }
.hud-clock {
  min-width: 64px;
  font-size: 17px;
  font-weight: 900;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
#hud.rush .hud-clock { background: var(--red); color: #fff; animation: pulse .5s ease-in-out infinite; }
#hud.rush .hud-bar { animation: shake .35s linear infinite; }
#hud.rush #hud-time { background: var(--red); }
@keyframes shake { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }

.hud-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.hud-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
#hud-score { display: inline-block; font-variant-numeric: tabular-nums; }
.hud-squad {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: var(--red);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}

.btn-mute {
  position: fixed;
  top: calc(2px + var(--safe-top));
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

@media (max-height: 800px) {
  .btn-primary { margin-top: 10px; padding: 12px; font-size: 22px; }
  .hint { margin-top: 6px; }
}

@media (max-height: 640px) {
  .btn-primary { padding: 12px; font-size: 22px; }
}

/* Landscape phones / short windows: HUD collapses to two slim rows so it
   doesn't cover the horizon where gates and crowds appear. */
@media (max-height: 500px) {
  #hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: calc(6px + var(--safe-top)) 48px 0 14px;
  }
  .hud-timer { flex-basis: 100%; }
  .hud-row { display: contents; }
  .hud-score { font-size: 26px; }
  .hud-squad { font-size: 16px; }
  .hud-pill { font-size: 13px; }
  .hud-sub .hud-pill:first-child { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}