/* ============================================================
   Build & Blast! — style.css
   Big, bright, tactile — a premium toddler-app feel.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', 'Fredoka', sans-serif;
  background: #aee9ff;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: 'Fredoka', sans-serif; border: none; cursor: pointer; }

h1, h2, h3, .fredoka { font-family: 'Fredoka', sans-serif; }

/* ---------------- screens ---------------- */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.screen.active { display: flex; animation: screenIn .35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

.bg-cover {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center bottom;
  z-index: 0;
}

/* ---------------- HOME ---------------- */
#screen-home { justify-content: flex-start; }
#screen-home .bg-cover { background-image: url('../assets/img/title_scene.webp'); }
#screen-home::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  pointer-events: none;
}

.home-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%;
  padding: max(3vh, 16px) 16px 12px;
}

.game-title {
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 0 rgba(47,53,66,.25), 0 8px 24px rgba(0,0,0,.18);
  display: flex; gap: .04em;
  margin-top: 1vh;
}
.game-title span { display: inline-block; animation: titleBob 2.6s ease-in-out infinite; }
.game-title span:nth-child(odd)  { color: #ffd166; }
.game-title span:nth-child(3n)   { color: #ff70a6; }
.game-title span:nth-child(4n)   { color: #7ee8fa; }
.game-title span:nth-child(1) { animation-delay: 0s; }
.game-title span:nth-child(2) { animation-delay: .1s; }
.game-title span:nth-child(3) { animation-delay: .2s; }
.game-title span:nth-child(4) { animation-delay: .3s; }
.game-title span:nth-child(5) { animation-delay: .4s; }
.game-title span:nth-child(6) { animation-delay: .5s; }
.game-title span:nth-child(7) { animation-delay: .6s; }
.game-title span:nth-child(8) { animation-delay: .7s; }
.game-title span:nth-child(9) { animation-delay: .8s; }
.game-title span:nth-child(10) { animation-delay: .9s; }
.game-title span:nth-child(11) { animation-delay: 1s; }
.game-title span:nth-child(12) { animation-delay: 1.1s; }
.game-title span:nth-child(13) { animation-delay: 1.2s; }
@keyframes titleBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

.tagline {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #2f3542;
  background: rgba(255,255,255,.85);
  padding: 6px 22px; border-radius: 999px;
  margin-top: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.big-btn {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  padding: .55em 1.6em;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffa62b, #ff5d8f);
  box-shadow: 0 8px 0 #d63f74, 0 14px 30px rgba(0,0,0,.25);
  transition: transform .12s, box-shadow .12s;
  animation: btnPulse 1.8s ease-in-out infinite;
}
.big-btn:active { transform: translateY(6px) scale(.98); box-shadow: 0 2px 0 #d63f74, 0 6px 14px rgba(0,0,0,.2); }
@keyframes btnPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

#btn-play { margin-top: 4vh; }

/* library shelf */
.library-panel {
  position: relative; z-index: 2;
  margin-top: auto;
  width: min(1000px, 96vw);
  background: rgba(255,255,255,.9);
  border-radius: 26px 26px 0 0;
  padding: 12px 18px 10px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.15);
}
.library-title {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: #2f3542; text-align: center; margin-bottom: 8px;
}
#library-shelf {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.lib-card {
  flex: 0 0 auto;
  width: clamp(96px, 14vw, 136px);
  background: linear-gradient(180deg, #fdfefe, #eef4fb);
  border: 3px solid #dbe4f0;
  border-radius: 18px;
  padding: 8px 6px 6px;
  text-align: center;
  animation: popIn .3s ease-out;
}
.lib-thumb svg { width: 100%; height: clamp(56px, 9vw, 84px); }
.lib-name { font-family: 'Fredoka', sans-serif; font-size: .78rem; color: #56607a; margin-top: 2px; }
#library-empty {
  text-align: center; color: #7a8494;
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  padding: 14px 6px 18px;
}

/* ---------------- PICKER SCREENS ---------------- */
#screen-vehicle, #screen-video { background: linear-gradient(180deg, #8fd7ff, #d8f4ff 70%, #baf0c0); }
.pick-title {
  position: relative; z-index: 2;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  color: #fff;
  text-shadow: 0 3px 0 rgba(47,53,66,.3);
  margin-top: max(9vh, 58px);
  text-align: center;
}
.pick-grid {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: clamp(12px, 2.5vw, 26px);
  padding: 3vh 3vw;
  flex: 1;
  width: 100%;
  overflow-y: auto;
}
.pick-card {
  background: #fff;
  border-radius: 24px;
  border: 4px solid #fff;
  box-shadow: 0 8px 0 rgba(47,53,66,.12), 0 14px 30px rgba(0,0,0,.14);
  padding: 14px;
  width: clamp(180px, 26vw, 270px);
  transition: transform .15s, border-color .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pick-card:active, .pick-card.picked { transform: scale(1.07); border-color: #ffd166; }
.pick-thumb { width: 100%; }
.pick-thumb svg { width: 100%; height: clamp(90px, 15vw, 150px); }
.pick-name { font-family: 'Fredoka', sans-serif; font-size: clamp(1.15rem, 2.8vw, 1.6rem); color: #2f3542; font-weight: 600; }
.pick-name.small { font-size: clamp(.95rem, 2.2vw, 1.2rem); line-height: 1.15; }
.pick-sub { font-size: clamp(.85rem, 2vw, 1.05rem); color: #7a8494; }

.video-card { width: clamp(140px, 19vw, 190px); padding: 12px 10px; }
.video-emoji { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.2; }
.video-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: .85rem; color: #fff;
  background: #2ec4b6; border-radius: 999px; padding: 3px 12px;
}
.video-card.not-ready .video-badge { background: #b8c0cf; }
.video-card.not-ready { opacity: .85; }

.corner-btn {
  position: absolute; top: max(2vh, 12px); left: max(2vw, 12px); z-index: 40;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  background: #fff; color: #2f3542;
  border-radius: 999px; padding: .5em 1em;
  box-shadow: 0 4px 0 rgba(47,53,66,.15), 0 8px 18px rgba(0,0,0,.15);
}
.corner-btn:active { transform: scale(.94); }

/* global mute */
#btn-mute {
  position: fixed; top: max(2vh, 12px); right: max(2vw, 12px); z-index: 1200;
  width: clamp(48px, 7vh, 62px); height: clamp(48px, 7vh, 62px);
  border-radius: 50%;
  font-size: clamp(1.3rem, 3.4vh, 1.8rem);
  background: #fff;
  box-shadow: 0 4px 0 rgba(47,53,66,.15), 0 8px 18px rgba(0,0,0,.18);
}
#btn-mute:active { transform: scale(.92); }
#btn-mute.muted { background: #e8ecf3; }

/* ---------------- BUILD SCENE ---------------- */
#screen-build { background: #bde9ff; }
#build-bg { z-index: 0; }
#bg-patch {
  position: absolute; z-index: 0;
  display: none;
  pointer-events: none;
  background: linear-gradient(180deg, #7deef4, #b5fbfa);
  filter: blur(6px);
}
#ambient-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

.build-topbar {
  position: absolute; top: max(2vh, 10px); left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none;
  padding: 0 80px;
}
.build-topbar > * { pointer-events: auto; }
#btn-home {
  position: absolute; left: max(2vw, 12px);
  width: clamp(48px, 7vh, 62px); height: clamp(48px, 7vh, 62px);
  border-radius: 50%; font-size: clamp(1.2rem, 3.2vh, 1.7rem);
  background: #fff;
  box-shadow: 0 4px 0 rgba(47,53,66,.15), 0 8px 18px rgba(0,0,0,.18);
}
#btn-home:active { transform: scale(.92); }

.progress-wrap {
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  min-width: min(46vw, 420px);
}
#scene-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(.85rem, 2.2vw, 1.15rem);
  color: #56607a; white-space: nowrap;
}
.progress-bar {
  flex: 1; height: clamp(14px, 2.4vh, 20px);
  background: #e4e9f2; border-radius: 999px; overflow: hidden;
}
#progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffd166, #ff5d8f);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.34,1.4,.5,1);
}
#progress-label {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(.95rem, 2.4vw, 1.25rem); color: #2f3542; white-space: nowrap;
}

/* vehicle placement per environment */
.vehicle-area { position: absolute; z-index: 5; }
.vehicle-area > div { position: absolute; inset: 0; }
.vehicle-svg, .vehicle-area svg { width: 100%; height: 100%; overflow: visible; }

.pos-rocket { left: 50%; bottom: 16%; height: 60%; aspect-ratio: 400/470; transform: translateX(-50%); }
.pos-car    { left: 50%; bottom: 5%;  height: 34%; aspect-ratio: 480/260; transform: translateX(-55%); }
.pos-digger { left: 50%; bottom: 10%; height: 44%; aspect-ratio: 480/340; transform: translateX(-38%); }

#vehicle-ghost svg { filter: grayscale(1) brightness(1.75); opacity: .25; }

/* part states */
.part-hidden { visibility: hidden; }
.part.slot-glow {
  visibility: visible;
  opacity: .5;
  animation: slotPulse 1.1s ease-in-out infinite;
}
.part.slot-glow.near { opacity: .9; animation-duration: .5s; }
@keyframes slotPulse {
  0%, 100% { filter: grayscale(.35) drop-shadow(0 0 6px #ffd166) drop-shadow(0 0 14px #ffd166); }
  50%      { filter: grayscale(.1)  drop-shadow(0 0 14px #ffe08a) drop-shadow(0 0 30px #ffd166); }
}
.part.placed { visibility: visible; }
.pop-in {
  animation: popIn .45s cubic-bezier(.34,1.9,.5,1);
  transform-box: fill-box; transform-origin: center;
}
@keyframes popIn { 0% { transform: scale(.2); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* placed-part life */
.part.placed .blinky { animation: blink 1.5s ease-in-out infinite; }
.part.placed .blinky.d2 { animation-delay: .75s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.part.placed .wavy {
  animation: flagWave 1s ease-in-out infinite alternate;
  transform-box: fill-box; transform-origin: left center;
}
@keyframes flagWave { from { transform: scaleY(.92) skewY(-3deg); } to { transform: scaleY(1.06) skewY(3deg); } }

/* wheels / belt / arm animation hooks */
.spinning .wheelspin { animation: spinWheel .32s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spinWheel { to { transform: rotate(360deg); } }
.trundling .trackbelt { animation: beltRoll .5s linear infinite; }
@keyframes beltRoll { to { stroke-dashoffset: -46; } }
.trundling { animation: trundleBob .3s ease-in-out infinite alternate; }
@keyframes trundleBob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.scooping .arm-group {
  animation: scoopDig 1.7s ease-in-out;
  transform-box: view-box; transform-origin: 265px 205px;
}
@keyframes scoopDig {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(24deg); }
  55% { transform: rotate(24deg); }
  100% { transform: rotate(0deg); }
}

/* rocket flame + launch moves */
.fx-flame { display: none; }
.launching .fx-flame { display: block; animation: flick .12s linear infinite alternate; transform-box: fill-box; transform-origin: 50% 0%; }
@keyframes flick { from { transform: scaleY(.85) scaleX(.95); } to { transform: scaleY(1.12) scaleX(1.05); } }

.pos-rocket.shaking { animation: rocketShake .09s linear infinite; }
@keyframes rocketShake {
  0% { transform: translateX(calc(-50% - 3px)) translateY(1px); }
  50% { transform: translateX(calc(-50% + 3px)) translateY(-1px); }
  100% { transform: translateX(calc(-50% - 2px)) translateY(2px); }
}
.pos-rocket.liftoff {
  transition: transform 2.3s cubic-bezier(.55,0,.85,.36);
  transform: translateX(-50%) translateY(-170vh) !important;
  animation: none;
}

.pos-car.revving { animation: carRev .08s linear infinite; }
@keyframes carRev {
  0% { transform: translateX(calc(-55% - 2px)) translateY(1px); }
  100% { transform: translateX(calc(-55% + 2px)) translateY(-1px); }
}
.pos-car.zoom {
  transition: transform 1.45s cubic-bezier(.6,0,.9,.4);
  transform: translateX(130vw) rotate(-2deg) !important;
  animation: none;
}

.pos-digger.trundle-off {
  transition: transform 2.9s linear;
  transform: translateX(130vw) !important;
}

/* countdown */
#countdown {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(7rem, 26vh, 15rem);
  font-weight: 700; color: #fff;
  text-shadow: 0 6px 0 rgba(47,53,66,.35), 0 14px 40px rgba(0,0,0,.3);
  pointer-events: none;
}
#countdown.show { display: flex; }
#countdown.pop { animation: cdPop .85s cubic-bezier(.3,1.6,.5,1); }
@keyframes cdPop { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }

/* launch button — bottom-right so it never covers the child's new vehicle */
#launch-btn {
  position: absolute; bottom: max(4vh, 22px); right: max(4vw, 20px); transform: scale(0);
  z-index: 40;
  font-size: clamp(1.7rem, 5.5vw, 3rem);
  font-weight: 700; color: #fff;
  padding: .5em 1.4em; border-radius: 999px;
  background: linear-gradient(180deg, #43d477, #12a15c);
  box-shadow: 0 8px 0 #0b7a45, 0 16px 34px rgba(0,0,0,.3);
  transition: transform .3s cubic-bezier(.34,1.8,.5,1);
}
#launch-btn.show { transform: scale(1); animation: launchThrob 1.1s ease-in-out infinite; }
@keyframes launchThrob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
#launch-btn:active { transform: scale(.95); }

/* ---------------- QUESTION CARD ---------------- */
#question-card {
  position: absolute; z-index: 35;
  left: 50%; bottom: -60vh;
  transform: translateX(-50%);
  width: min(660px, 94vw);
  background: rgba(255,255,255,.97);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -8px 34px rgba(0,0,0,.22);
  padding: clamp(12px, 2.6vh, 24px) clamp(14px, 3vw, 30px) clamp(14px, 3vh, 26px);
  text-align: center;
  transition: bottom .4s cubic-bezier(.34,1.3,.5,1);
}
#question-card.show { bottom: 0; }

#q-text {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(2.4rem, 8vh, 4.4rem);
  font-weight: 700; color: #2f3542;
  letter-spacing: .04em;
}
.dots-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 5px; margin-top: 6px; min-height: 22px;
}
.dot {
  width: clamp(13px, 2.2vh, 19px); height: clamp(13px, 2.2vh, 19px);
  border-radius: 50%; display: inline-block;
  border: 2px solid rgba(47,53,66,.3);
}
.dot-a { background: #ff5d8f; }
.dot-b { background: #4d8cff; }
.dot-gone { opacity: .25; position: relative; }
.dot-gone::after { content: '✖'; position: absolute; inset: 0; font-size: .7em; color: #2f3542; display: flex; align-items: center; justify-content: center; }
.dot-plus { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; color: #7a8494; margin: 0 4px; }
.dot-group { display: inline-flex; gap: 4px; padding: 3px 7px; border: 2px dashed #b8c0cf; border-radius: 999px; margin: 0 3px; }

#q-choices {
  display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 22px);
  margin-top: clamp(10px, 2vh, 18px);
}
.choice-btn {
  font-size: clamp(2rem, 6.5vh, 3.4rem);
  font-weight: 700; color: #fff;
  min-width: clamp(86px, 15vw, 130px);
  padding: .28em .5em;
  border-radius: 24px;
  box-shadow: 0 7px 0 rgba(47,53,66,.22), 0 10px 22px rgba(0,0,0,.15);
  transition: transform .1s;
}
.choice-btn:nth-child(1) { background: linear-gradient(180deg, #5eb8ff, #3a7bff); }
.choice-btn:nth-child(2) { background: linear-gradient(180deg, #ffb84d, #ff8c1a); }
.choice-btn:nth-child(3) { background: linear-gradient(180deg, #58d68d, #1faa59); }
.choice-btn:active { transform: translateY(4px); }
.choice-btn.right { animation: rightPop .5s cubic-bezier(.34,1.8,.5,1); }
@keyframes rightPop { 0% { transform: scale(1); } 50% { transform: scale(1.2) rotate(3deg); } 100% { transform: scale(1); } }
.choice-btn.wrong { animation: wobble .5s ease; opacity: .35; }
@keyframes wobble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-2deg); } 75% { transform: translateX(8px) rotate(2deg); } }
.choice-btn.hint { animation: hintPulse 1s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { transform: scale(1); box-shadow: 0 7px 0 rgba(47,53,66,.22), 0 0 0 0 rgba(255,209,102,.9); } 50% { transform: scale(1.08); box-shadow: 0 7px 0 rgba(47,53,66,.22), 0 0 0 14px rgba(255,209,102,0); } }
.choice-btn:disabled { cursor: default; }

.q-cheer {
  min-height: 1.6em;
  margin-top: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.1rem, 3vh, 1.6rem);
  color: #7a8494;
}
.q-cheer.good { color: #12a15c; animation: popIn .3s ease-out; }
.q-cheer.soft { color: #ff8c1a; }

/* ---------------- TRAY ---------------- */
#tray {
  position: absolute; z-index: 34;
  left: 50%; bottom: -40vh;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #ffe9c7, #ffd79a);
  border: 4px solid #e8b96a;
  border-radius: 26px;
  padding: 12px 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: bottom .45s cubic-bezier(.34,1.5,.5,1);
}
#tray.show { bottom: max(3vh, 16px); }
#tray-slot {
  width: clamp(88px, 15vh, 130px); height: clamp(88px, 15vh, 130px);
  background: rgba(255,255,255,.75);
  border: 3px dashed #d9a44f;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  cursor: grab;
  animation: trayBounce 1.4s ease-in-out infinite;
}
@keyframes trayBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
#tray-slot.empty { animation: none; }
#tray-slot.empty svg { visibility: hidden; }
.tray-svg { width: 88%; height: 88%; pointer-events: none; }
.tray-text { display: flex; flex-direction: column; gap: 4px; max-width: 40vw; }
#tray-label {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1rem, 2.8vh, 1.4rem); color: #7c5218; font-weight: 600;
}
#tray-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(.9rem, 2.4vh, 1.15rem); color: #a06b1e;
}
#tray-hint .hand { font-size: 1.5em; animation: handNudge 1s ease-in-out infinite; display: inline-block; }
@keyframes handNudge { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,-14px); } }

/* the piece while dragging */
#drag-ghost {
  position: fixed; z-index: 999;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.3));
}
#drag-ghost.show { display: block; }
#drag-ghost svg { width: 100%; height: 100%; }
#drag-ghost.near { filter: drop-shadow(0 0 18px #ffd166) drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
#drag-ghost.returning { transition: left .24s ease-out, top .24s ease-out; }

/* ---------------- OVERLAYS ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}
.overlay.show { display: flex; animation: screenIn .3s ease-out; }

#celebrate { background: linear-gradient(180deg, rgba(120,80,255,.85), rgba(255,93,143,.85)); }
#celebrate-emoji { font-size: clamp(4rem, 16vh, 8rem); animation: titleBob 2s ease-in-out infinite; }
.congrats-text {
  font-size: clamp(2.6rem, 10vw, 5.6rem);
  color: #fff;
  text-shadow: 0 5px 0 rgba(47,53,66,.3), 0 12px 30px rgba(0,0,0,.25);
  animation: congratsZoom .6s cubic-bezier(.34,1.8,.5,1);
}
@keyframes congratsZoom { from { transform: scale(.2) rotate(-6deg); } to { transform: scale(1) rotate(0); } }
#celebrate-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.2rem, 3.6vw, 1.9rem);
  color: #fff; margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.celebrate-btns { display: flex; gap: 18px; margin-top: 4vh; flex-wrap: wrap; justify-content: center; }
.big-btn.green { background: linear-gradient(180deg, #43d477, #12a15c); box-shadow: 0 8px 0 #0b7a45, 0 14px 30px rgba(0,0,0,.25); }
.big-btn.plain {
  background: rgba(255,255,255,.92); color: #2f3542;
  box-shadow: 0 8px 0 rgba(47,53,66,.2), 0 14px 30px rgba(0,0,0,.2);
  animation: none;
}

/* video overlay */
#video-overlay { background: rgba(20, 24, 40, .93); }
#video-title {
  font-family: 'Fredoka', sans-serif;
  color: #fff; font-size: clamp(1.3rem, 4vw, 2.1rem);
  margin-bottom: 14px;
}
.video-frame {
  width: min(92vw, calc(70vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border: 8px solid #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, #35406b, #232a4a);
}
.vp-emoji { font-size: clamp(3rem, 10vh, 5rem); }
.vp-text {
  font-family: 'Fredoka', sans-serif;
  color: #fff; font-size: clamp(1.1rem, 3.4vh, 1.7rem); line-height: 1.5;
}
#btn-video-close { margin-top: 3vh; }

/* confirm leave */
#confirm-leave { background: rgba(47,53,66,.55); z-index: 950; }
.confirm-card {
  background: #fff; border-radius: 28px;
  padding: clamp(20px, 5vh, 40px) clamp(24px, 6vw, 50px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.confirm-card h2 { font-size: clamp(1.4rem, 4.5vw, 2.2rem); color: #2f3542; }
.confirm-card p { font-size: clamp(1rem, 2.8vw, 1.3rem); color: #7a8494; margin-top: 6px; }
.confirm-btns { display: flex; gap: 16px; justify-content: center; margin-top: 22px; }
.mid-btn {
  font-size: clamp(1.1rem, 3.2vw, 1.5rem); font-weight: 600; color: #fff;
  padding: .55em 1.4em; border-radius: 999px;
}
.mid-btn.stay { background: linear-gradient(180deg, #43d477, #12a15c); box-shadow: 0 5px 0 #0b7a45; }
.mid-btn.leave { background: #dfe4ee; color: #56607a; box-shadow: 0 5px 0 #b8c0cf; }
.mid-btn:active { transform: translateY(3px); box-shadow: none; }

/* fx canvas above everything fun */
#fx-canvas {
  position: fixed; inset: 0; z-index: 1100;
  pointer-events: none;
}

/* ---------------- small screens / portrait ---------------- */
@media (max-aspect-ratio: 1/1) {
  .pos-rocket { height: 46%; bottom: 24%; }
  .pos-car    { height: 22%; bottom: 22%; }
  .pos-digger { height: 30%; bottom: 24%; }
  .progress-wrap { min-width: 60vw; }
  #scene-title { display: none; }
}
@media (max-height: 460px) {
  #q-text { font-size: 2.1rem; }
  .choice-btn { font-size: 1.8rem; }
  .dots-row { display: none; }
}