/* ✨ style.css ✨ */
/* ✨ REFACTORED CSS FOR UNIFIED MENU + MODE BACKGROUND SYSTEM ✨ */

/* 🌌 Global Reset */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 320px;
  min-height: 568px;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  background: transparent;
  touch-action: manipulation;
  overscroll-behavior: contain;

  /* 🧃 Mobile polish (iOS & Android) */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

* {
  user-select: none;
  box-sizing: border-box;
  touch-action: manipulation;
}

#startup-screen {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: auto; /* 👈 was none; card + button need clicks */
}

/* fade-out state driven by JS (startup-hide class) */
#startup-screen.startup-hide {
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   Startup festival welcome card (under the cone)
   ────────────────────────────────────────────────────────── */

/* Main card container */
#startup-screen .startup-festival-card {
  margin-top: 1.5rem;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;

  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);

  /* 🔥 make the text actually visible */
  color: #f6feff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);

  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  line-height: 1.5;

  /* 🌟 NEW: fade in after the cone */
  opacity: 0;
  transform: translateY(8px);
  animation: startupCardIn 0.8s ease-out 2s forwards;
}
@keyframes startupCardIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Welcome */
#startup-screen .startup-welcome-line {
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  font-size: 1.50em;         /* 🔸 slightly bigger than the rest */
  letter-spacing: 0.03em;    /* tiny bit of breathing room */
}

/* Streak line under welcome */
#startup-screen .startup-streak-line {
  margin: 0 0 0.35rem 0;
  font-size: 0.9em;
  opacity: 0.95;
}



/* Title / band name */
#startup-screen .startup-title-line {
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main line */
#startup-screen .startup-main-line {
  margin: 0 0 0.3rem 0;
}

/* Completion line */
#startup-screen .startup-progress-line {
  margin: 0 0 0.25rem 0;
  opacity: 0.95;
}

/* Suggestion / badge nudge */
#startup-screen .startup-suggestion-line {
  margin: 0 0 0.6rem 0;
  opacity: 0.9;
}

/* Play button → simple pill */
#startup-screen .startup-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.42rem 1.7rem;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  cursor: pointer;

  background: linear-gradient(135deg, #fffd9a 0%, #ff80f0 50%, #80fff1 100%);
  color: #101020;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
}

#startup-screen .startup-play-btn:active {
  transform: scale(0.97);
}


.startup-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeInStars 1.5s ease forwards;
}

.startup-cone {
  width: 30vw;
  max-width: 250px;
  opacity: 0;
  z-index: 2;
  animation: fadeInCone 1s ease 1.5s forwards;
  transform: translateY(-6vh); /* 🍧 move up 8% of the viewport height */
}

@keyframes fadeInStars {
  to {
    opacity: 1;
  }
}

@keyframes fadeInCone {
  to {
    opacity: 1;
  }
}


/* 🌌 Background Floaters*/ 
.background-floater, .menu-floater {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: -10;
  opacity: 0.85;
}

.menu-floater {
  z-index: -20;
  opacity: 1;
}

@keyframes cosmicDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(50px, 100px); }
}

.aspect-wrap {
  position: relative;
  width: auto;
  height: 100vh;
  aspect-ratio: 11 / 16;
  max-width: 100vw;
  overflow: hidden;
}

/* 🏊 Background System*/ 
.background-fill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 100svh;
  aspect-ratio: 11 / 16;
  object-fit: cover; /* ⚠️ change this from contain */
  z-index: 0;
  pointer-events: none;
  opacity: 0.99;
  will-change: transform, opacity;
}

.game-frame {
  width: auto;
  height: 100%;
  max-height: 100svh;
  max-width: 100vw;
  aspect-ratio: 11 / 16;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.menu-frame {
  position: relative;
  z-index: 5;/* z-index: 5; // ☠️ was breaking modals — safe now, but test before trusting */
  width: 100%;
  height: 100svh;
  aspect-ratio: 11 / 16;
  max-width: 100%;
  max-height: 100svh;
  display: grid;
  grid-template-areas:
    "title title title"
    "grid  grid  grid";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  place-items: center;
  overflow: hidden;
  position: relative;

  font-size: calc(1.25vh + 0.25vw); /* 🎯 Scales with window size smoothly */
  outline: 2px solid yellow;
}

/* ✨ Main Menu Layout */
.menu-layout {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.menu-wrapper {
  position: fixed; /* use fixed to anchor to screen always */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  max-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}





.menu-grid {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  z-index: 5;
  pointer-events: auto; /*changed from none*/

  justify-items: center;
  align-items: center;
  overflow: hidden;
}

.menu-title-top {
  margin-top: 1.25em;
  grid-area: title;
  grid-column: 1 / span 3;
  justify-self: center;
  align-self: center;
  height: clamp(4.5em, 9.5em, 11em); /* ⬆️ Slightly larger title */
  width: auto;
  max-width: 90%; /* or 90% if you want it big */
  aspect-ratio: 9 / 2;
  object-fit: contain;
  pointer-events: auto;
  animation: neon-glow-cycle 6s linear infinite;
  transform-origin: center top;
  position: relative;
  z-index: 3;
}


.menu-title-top:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px white) drop-shadow(0 0 16px white);
}

@keyframes neon-glow-cycle {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px white)
      drop-shadow(0 0 8px #00ffff)
      drop-shadow(0 0 16px #00ccff)
      drop-shadow(0 0 24px #00ccff);
  }
  25% {
    filter:
      drop-shadow(0 0 4px #ffee00)
      drop-shadow(0 0 8px #ffee00)
      drop-shadow(0 0 16px #ffcc00);
  }
  50% {
    filter:
      drop-shadow(0 0 4px #cc66ff)
      drop-shadow(0 0 8px #cc66ff)
      drop-shadow(0 0 16px #9933ff);
  }
  75% {
    filter:
      drop-shadow(0 0 4px #00ff88)
      drop-shadow(0 0 8px #00ff88)
      drop-shadow(0 0 16px #00cc88);
  }
}



.menu-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.2em, 1.8em, 2.2em);
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  text-shadow:
    0 0 6px currentColor,
    0 0 12px currentColor,
    0 0 18px currentColor;
  color: white;
  line-height: 1.0;
  transform-origin: center center; /* no longer center top */
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  pointer-events: auto;
}


.menu-label:hover {
  transform: scale(1.05);
}

.menu-label.kids {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: end;
}

.menu-label.quick {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: end;
}


.menu-label.tips {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}

.menu-label.story {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}


.menu-label.infinity {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: center;
}

.menu-label.options {
  grid-column: 2;
  grid-row: 5;
  justify-self: center;
  align-self: center;
  margin-top: 0.50em; /* ⬇️ tiny bump down */
}




/* ❌ Hide Elements */
.hidden {
  display: none !important;
}

/* 🌈 QuickServe Mode Zones */
#game-container {
  position: relative; /*chaged from absolute*/
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  background: transparent;
}
@media (max-width: 600px) {
  .background-fill {
    height: 100dvh; /* ← Dynamic viewport height respects toolbars */
  }

  .menu-frame {
    height: 100dvh;
    max-height: 100dvh;
  }

  .menu-grid {
    height: 100%;
    max-height: 100%;
  }
  .menu-title-top {
    margin-top: 1.25em;
    height: clamp(4.5em, 9.5em, 11em); /* ⬆️ slightly taller but not pushing */
  }
}

@media (max-width: 279px), (max-height: 519px) {  /* was 399 / 499 */
  html, body { overflow: hidden; }

  .menu-frame,
  .kc-game-frame { filter: blur(1px); }

  /* keep your reduced-motion bit as-is if it worked yesterday */
  @media (prefers-reduced-motion: reduce) {
    .menu-frame, .kc-game-frame { filter: none; }
  }

  body::after {
    content: "For the full festival, make the window bigger or rotate your device 🍧";
    position: fixed;
    inset: 0;                 /* cover everything */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* iOS safe areas, plus comfy padding */
    padding:
      calc(env(safe-area-inset-top, 0px) + 1rem)
      calc(env(safe-area-inset-right, 0px) + 1rem)
      calc(env(safe-area-inset-bottom, 0px) + 1rem)
      calc(env(safe-area-inset-left, 0px) + 1rem);

    background: rgba(0,0,0,0.82);
    color: #00ffee;
    font-family: 'Orbitron', monospace;

    /* scales nicely on tiny screens */
    font-size: clamp(12px, 2.2vh, 18px);
    line-height: 1.2;
    z-index: 2147483647; /* above everything */
    pointer-events: auto; /* absorb taps */
  }
}

/* strongest cross-browser block for iOS selection + loupe + highlights */
:root,
:root *:not(.allow-select):not(input):not(textarea) {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important; /* no iOS press menu */
  -webkit-tap-highlight-color: transparent !important;
  caret-color: transparent !important;
}

/* kill double-tap/pinch; iOS honors 'none' better than 'manipulation' */
#game-container,
#game-container * {
  touch-action: none !important;
}

/* if anything ever does get selected, make it invisible */
#game-container ::selection,
#game-container *::selection {
  background: transparent !important;
  color: inherit !important;
}

/* if you need copyable text somewhere, opt-in */
.allow-select,
.allow-select * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  caret-color: auto !important;
}
/* somewhere global */
.badge-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; padding:10px 14px;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-weight:600; z-index:9999; backdrop-filter:saturate(140%) blur(4px);
  pointer-events: none; /* 👈 taps/clicks pass through to the game */
}
/* Layout */
.modal-hero { text-align: center; margin-bottom: 1rem; }
.tagline { color: #9ff; margin: .25rem 0 .5rem; text-shadow: 0 0 8px #00ffee66; }
.byline { color: #eaffff; opacity: .95; }

/* CTA buttons */
.cta-row {
  display: grid; gap: .6rem;
  grid-template-columns: 1fr; margin: .8rem auto 0; width: min(560px, 92%);
}
@media (min-width: 560px) { .cta-row { grid-template-columns: 1fr 1fr; } }

.cta {
  display: inline-block; text-align: center; font-weight: 800;
  padding: .65rem 1rem; border-radius: 12px; text-decoration: none;
  border: 2px solid #00ffee66; color: #00ffee; background: #001416;
  box-shadow: 0 0 12px #00ffee33; transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.cta:hover { filter: brightness(1.06); box-shadow: 0 0 16px #00ffee66; }
.cta:active { transform: translateY(1px) scale(.99); }
.cta-primary {
  background: linear-gradient(135deg, #00ffee 0%, #2ef7ff 50%, #00ffee 100%);
  color: #001b1b; border-color: transparent; box-shadow: 0 0 14px #00ffee88;
}

/* Lists */
.dot-list { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.dot-list li { margin: .35rem 0; }
.dot-list li::marker { content: none; }

/* Scroll bounds */
.scrollable-modal { max-height: min(86dvh, 720px); overflow: auto; }

/* Small tidy */
.support-note { margin-top: .8rem; color: #cfe; opacity: .95; }
/* ——— Header legibility ——— */
#infoModal .modal-hero h2 {
  color: #eaffff !important;
  text-shadow: 0 0 14px #00ffee66, 0 0 28px #00ffee33;
  margin: 0 0 .25rem 0;
}
#infoModal .modal-hero .tagline { color: #9ff; }
#infoModal .modal-hero .byline { color: #eaffff; opacity: .95; }

/* Optional: a subtle backdrop behind the hero text for contrast */
#infoModal .modal-hero {
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  border: 1px solid #00ffee33;
  border-radius: 14px;
  padding: .9rem 1rem;
}

/* ——— CTA buttons: single stacked column ——— */
#infoModal .cta-row {
  display: grid;
  grid-template-columns: 1fr;   /* ← always one column */
  gap: .65rem;
  width: min(520px, 92%);
  margin: .9rem auto 0;
}
#infoModal .cta {
  width: 100%;
  justify-self: stretch;         /* make anchors fill the column */
}

/* (keep your existing .cta / .cta-primary styles) */
/* 🍄 Secret Menu SnowCone XP – "Mushroom Popper" */

/* Invisible hitbox sitting over the cone in the menu art */
.mushroom-popper-hitbox {
  position: absolute;
  /* Centered horizontally, roughly where the cone lives */
  left: 50%;
  top: 24vh; /* tweak this if you want it higher/lower */
  transform: translateX(-50%);

  /* Size feels like the cone head and a bit of cone */
  width: min(18vh, 26vw);
  height: min(18vh, 26vw);

  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;

  /* Make sure it sits above grid labels but under modals */
  z-index: 6;

  /* No default button chrome */
  appearance: none;
  -webkit-appearance: none;
}

/* 🍏 iOS-only: nudge the hitbox lower to match the shifted art */
:root[data-platform='ios'] .mushroom-popper-hitbox {
  top: 35vh; /* tweak this until it hugs the cone just right */
}

/* kill focus ring (we’re using it like a pure hitbox) */
.mushroom-popper-hitbox:focus {
  outline: none;
}

.mushroom-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0) scale(0.9);

  font-family: 'Orbitron', sans-serif;
  font-weight: 700;

  /* 🔼 slightly bigger */
  font-size: clamp(1.05rem, 1.6vh + 0.5rem, 1.7rem);

  color: #fffd9a;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(255, 255, 150, 0.9),
    0 0 18px rgba(255, 255, 150, 0.7);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;

  z-index: 9990;

  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.75));
}

.mushroom-pop.mushroom-pop-live {
  animation: mushroom-pop-float 0.9s ease-out forwards;
}

@keyframes mushroom-pop-float {
  0% {
    opacity: 0;
    /* 🔼 start a little higher & bigger so it clears the thumb */
    transform: translate(-50%, 4px) scale(0.95);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -32px) scale(1);
  }
}
/* Full-screen-ish overlay inside menu wrapper */
.menu-highscore-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(4, 8, 24, 0.72); /* festival night glass */
  z-index: 40; /* above truck + labels but below global modals */
}

/* Hidden state helper */
.menu-highscore-overlay.hidden {
  display: none;
}

/* The small card over the truck – no scroll */
.menu-highscore-panel {
  width: min(340px, 90vw);
  max-height: 70vh;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at 10% 0%, rgba(95, 255, 234, 0.16), transparent 60%),
              radial-gradient(circle at 90% 100%, rgba(255, 184, 240, 0.14), transparent 55%),
              rgba(8, 10, 30, 0.96);
  border: 1px solid rgba(180, 255, 255, 0.3);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(168, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden; /* 🚫 no scrollbars */
}

/* Title + subtitle */
.menu-highscore-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f7ffff;
  text-align: center;
}

.menu-highscore-sub {
  font-size: 0.78rem;
  text-align: center;
  color: rgba(230, 255, 255, 0.85);
}

/* Stat grid – small and tidy */
.menu-highscore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

/* Individual stat card */
.menu-highscore-card {
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(25, 40, 80, 0.9),
    rgba(15, 15, 40, 0.9)
  );
  border: 1px solid rgba(160, 230, 255, 0.35);
}

.menu-highscore-card h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e9fcff;
}

.menu-highscore-card .stat-line {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(210, 240, 255, 0.95);
}

/* Close button */
.menu-highscore-close {
  margin-top: 8px;
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle at 20% 0%, #fffef0 0, #ffd3f7 35%, #80fff1 95%);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  color: #15152b;
}

.menu-highscore-close:active {
  transform: translateY(1px) scale(0.99);
}
/* 🏆 Invisible High Score hitbox over the truck */
/* 🏆 Invisible High Score hitbox over the truck */
.menu-frame {
  position: relative;
}

.menu-highscore-hitbox {
  position: absolute;
  left: 50%;
  top: 70%;              /* tuned to sit over the truck */
  transform: translateX(-50%);
  width: 38%;
  height: 15%;
  z-index: 20;
  cursor: pointer;

  /* invisible but tappable */
  background: transparent;
  border: none;
}

/* Accessibility: visible focus ring */
.menu-highscore-hitbox:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}


/* 🏆 High Score Overlay */
/* 🏆 High Score Overlay */
.hs-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 260; /* above menu */
  pointer-events: auto;   /* 👈 was none – overlay can now catch clicks */
}

.hs-overlay.hidden {
  display: none;
}

.hs-card {
  pointer-events: auto;
  max-width: min(480px, 90vw);
  max-height: 90vh;
  padding: 1.5rem 1.75rem;
  border-radius: 18px;
  background: rgba(4, 8, 24, 0.96);
  border: 1px solid rgba(0, 255, 200, 0.7);
  box-shadow:
    0 0 40px rgba(0, 255, 200, 0.5),
    0 0 80px rgba(140, 120, 255, 0.35);
  color: #fefcff;
  font-family: 'Orbitron', system-ui, sans-serif;
  text-align: left;
  position: relative;
}

.hs-card h2 {
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
}

.hs-subtitle {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.hs-grid {
  display: grid;
  gap: 0.9rem;
}

.hs-entry h3 {
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.hs-entry p {
  margin: 0.05rem 0;
  font-size: 0.85rem;
}

.hs-entry span {
  color: #7fffd4;
}

/* Close button */
.hs-close-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
}

/* Optional: prevent background scrolling when any modal is open */
body.modal-open {
  overflow: hidden;
}
:root[data-platform="ios"] .menu-title-top {
  margin-top: 6vh;              /* ✂️ no layout push */
  transform: translateY(4vh); /* 📱 push further only on iOS */
}

:root[data-platform="ios"] .menu-title-top:hover {
  transform: translateY(4vh) scale(1.05);
}