/* ================= Explore Dino Valley — styles ================= */
/* Loaded after styles.css — reuses the same :root variables & fonts */

.explore-hero{ padding-top: 18px; padding-bottom: 10px; text-align:center; }
.explore-hero h1{ font-size: 2rem; color: var(--pink-deep); margin-bottom: 8px; }
.explore-hero p{ max-width: 620px; margin: 0 auto; color:#6b5063; }

.map-wrap{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 40px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(122,14,69,0.25);
  border: 6px solid var(--white);
}
.map-wrap img{ width:100%; display:block; }

.map-pin{
  position:absolute;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,0.0);
  border: none;
  cursor: pointer;
  padding: 0;
}
.map-pin .pin-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border: 3px solid var(--gold);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  animation: pin-pulse 2.4s ease-in-out infinite;
}
@keyframes pin-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
.map-pin:hover .pin-ring, .map-pin:focus-visible .pin-ring{ border-color: var(--pink); background: rgba(255,255,255,0.32); }
.map-pin-label{
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family: var(--font-display); font-weight:700;
  font-size: 0.8rem; color: var(--berry-deep);
  background: var(--white); padding: 3px 10px; border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  opacity:0; transition: opacity .2s ease;
  pointer-events:none;
}
.map-pin:hover .map-pin-label, .map-pin:focus-visible .map-pin-label{ opacity:1; }

@media (max-width: 640px){
  .map-pin{ width:56px; height:56px; }
  .map-pin-label{ font-size:0.7rem; bottom:-24px; }
}

/* ---------- Scene overlay ---------- */
.scene-overlay{
  position: fixed; inset:0; z-index: 300;
  background: rgba(58,18,48,0.55);
  display:none; align-items:center; justify-content:center;
  padding: 16px;
}
.scene-overlay.open{ display:flex; }
.scene-card{
  position:relative;
  width: 100%; max-width: 900px;
  max-height: 92vh;
  overflow:auto;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.scene-frame{ position:relative; width:100%; line-height:0; }
.scene-frame img{ width:100%; display:block; border-radius: 24px 24px 0 0; }
.scene-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background: var(--white); border: none; font-size:1.2rem;
  cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.scene-title-bar{
  padding: 14px 20px;
  text-align:center;
  display:flex; justify-content:center;
}
.back-to-map-btn{ color: var(--pink-deep) !important; border-color: var(--pink-deep) !important; background: var(--cream) !important; font-size:0.9rem; padding:10px 20px; }
.scene-banner{
  display:flex; flex-direction:column; gap:16px;
  padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #3A1230, #2A0C22);
}
.scene-banner-prompt{
  text-align:center;
  font-family: var(--font-display); font-weight:700;
  font-size: 0.85rem; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.scene-banner-row{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
}
.scene-banner-item{
  flex: 0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width: 92px;
  background: none;
  border: none;
  padding: 4px;
  cursor:pointer;
  transition: transform .15s ease;
}
.scene-banner-item:hover, .scene-banner-item:focus-visible{ transform: translateY(-4px); }
.scene-banner-item img{ width:58px; height:58px; object-fit:contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.scene-banner-emoji{
  font-size:2.6rem; line-height:1;
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}
.scene-banner-label{
  font-family: var(--font-display); font-weight:700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.78rem; text-align:center; line-height:1.15;
}
@media (max-width: 640px){
  .scene-banner-item{ width:72px; }
  .scene-banner-item img{ width:44px; height:44px; }
  .scene-banner-emoji{ font-size:2rem; }
  .scene-banner-label{ font-size:0.66rem; }
}

/* ---------- Explainer / content modal ---------- */
.explain-overlay{
  position: fixed; inset:0; z-index: 400;
  background: rgba(58,18,48,0.65);
  display:none; align-items:center; justify-content:center;
  padding: 16px;
}
.explain-overlay.open{ display:flex; }
.explain-card{
  position:relative;
  width:100%; max-width: 520px;
  max-height: 88vh; overflow:auto;
  background: var(--cream);
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  text-align:center;
}
.explain-close{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  background: var(--white); border:none; font-size:1.1rem; cursor:pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.explain-card h3{ color: var(--pink-deep); margin-bottom:12px; font-size:1.3rem; }
.explain-card p{ color: var(--ink); line-height:1.55; margin-bottom: 10px; font-size:1.02rem; }
.explain-card img.explain-image{ width:100%; border-radius:14px; margin-bottom:14px; }
.explain-card .explain-icon{ width:72px; margin: 0 auto 12px; display:block; }
.explain-link-btn{ display:inline-block; margin-top:6px; }
.explain-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; margin-top:12px; }
.explain-video iframe{ width:100%; height:100%; border:0; }

/* ---------- Song tiles (studio headphones) ---------- */
.explore-song-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:10px; }
@media (max-width:480px){ .explore-song-grid{ grid-template-columns: 1fr; } }
.explore-song-card{
  display:flex; align-items:center; gap:10px;
  background: var(--white); border-radius:14px; padding:8px;
  border:none; cursor:pointer; text-align:left;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.explore-song-card img{ width:46px; height:46px; border-radius:8px; object-fit:cover; }
.explore-song-card span{ font-family: var(--font-display); font-size:0.85rem; color: var(--ink); }

/* ---------- Counting game (explorer chest) ---------- */
.coin-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 14px 0; }
.coin-btn{ width:44px; height:44px; border-radius:50%; border:3px solid var(--gold-deep); background: var(--gold); cursor:pointer; font-family: var(--font-display); font-weight:800; color: var(--berry-deep); }
.coin-btn.counted{ background: var(--pink); border-color: var(--pink-deep); color:#fff; }
.coin-count{ font-family: var(--font-display); font-size: 2rem; color: var(--pink-deep); }

/* audio sample buttons */
.explain-audio-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--purple); color:#fff; border:none;
  padding: 10px 20px; border-radius: 30px; font-family: var(--font-display);
  font-weight:700; cursor:pointer; margin-top: 6px;
}

/* ================= Phase 2 — video intros & mini-games ================= */

.scene-frame video{ width:100%; display:block; border-radius: 24px 24px 0 0; background:#000; }

.explain-card.wide{ max-width: 640px; }

.explain-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; margin-top:12px; }
.explain-video iframe{ width:100%; height:100%; border:0; }

.game-msg{ min-height:26px; font-family: var(--font-display); font-weight:700; color: var(--pink-deep); margin-top:8px; }

/* ---------- Music mixer ---------- */
.mixer-row{ display:flex; gap:14px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.mixer-btn{
  width: 100px; height: 100px; border-radius: 20px;
  border: 3px solid var(--purple); background: var(--white);
  font-family: var(--font-display); font-weight:700; font-size:0.85rem;
  cursor:pointer; line-height:1.6;
}
.mixer-btn.active{ background: var(--purple); color:#fff; box-shadow: 0 0 0 4px rgba(155,110,210,0.3); }

/* ---------- I-Spy ---------- */
.ispy-checklist{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin: 10px 0 14px; }
.ispy-check{
  font-family: var(--font-display); font-size:0.78rem; color: var(--ink);
  background: var(--white); border-radius: 20px; padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  opacity: 0.55;
}
.ispy-check.done{ opacity:1; background: var(--gold); color: var(--berry-deep); }
.ispy-imgwrap{ position:relative; width:100%; border-radius:14px; overflow:hidden; line-height:0; }
.ispy-imgwrap img{ width:100%; display:block; }
.ispy-hotspot{
  position:absolute; transform: translate(-50%,-50%);
  aspect-ratio:1; border-radius:50%;
  border: 3px dashed transparent;
  background: transparent;
  cursor:pointer;
}
.ispy-hotspot:hover{ border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.14); }
.ispy-hotspot.found{ border-color: var(--gold); background: rgba(255,210,63,0.35); }
.ispy-win{ display:none; margin-top:14px; font-family: var(--font-display); font-weight:700; color: var(--pink-deep); text-align:center; }
.ispy-win.show{ display:block; }

/* ---------- Gemstone ---------- */
.gem-tap{ border:none; background:none; cursor:pointer; padding:0; margin-top:10px; }
.gem-tap img{ width: 140px; transition: width .2s ease; }
.gem-progress{ width:100%; max-width:260px; height:12px; margin: 12px auto 0; background: var(--cream); border-radius:8px; overflow:hidden; border: 2px solid var(--gold-deep); }
.gem-progress-fill{ height:100%; background: linear-gradient(90deg, var(--gold), var(--pink)); transition: width .25s ease; }

/* ---------- Compass ---------- */
.compass-face{
  position:relative; width:180px; height:180px; margin: 14px auto;
  border-radius:50%; background: var(--white);
  border: 5px solid var(--purple); box-shadow: inset 0 0 0 6px var(--cream);
}
.compass-needle{
  position:absolute; left:50%; top:50%; width:6px; height:74px;
  margin-left:-3px; margin-top:-74px; transform-origin: bottom center;
  background: linear-gradient(180deg, var(--pink-deep), var(--gold));
  border-radius: 4px; transition: transform .5s ease;
}
.compass-label{ position:absolute; font-family: var(--font-display); font-weight:800; color: var(--berry-deep); font-size:0.9rem; }
.compass-label.n{ top:6px; left:50%; transform:translateX(-50%); }
.compass-label.s{ bottom:6px; left:50%; transform:translateX(-50%); }
.compass-label.e{ right:8px; top:50%; transform:translateY(-50%); }
.compass-label.w{ left:8px; top:50%; transform:translateY(-50%); }
.compass-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.compass-btn{
  font-family: var(--font-display); font-weight:700; font-size:0.8rem;
  border: 2px solid var(--purple); background: var(--white); color: var(--purple);
  border-radius: 20px; padding: 8px 14px; cursor:pointer;
}

/* ---------- Harvest game ---------- */
.harvest-row{ display:flex; gap:10px; justify-content:center; margin: 14px 0; flex-wrap:nowrap; }
.harvest-crop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width: 100px; border:none; background: none;
  padding: 6px; cursor:pointer;
  font-family: var(--font-display); font-size:0.7rem; color: var(--ink);
}
.harvest-crop img{ width:78px; height:78px; object-fit:contain; transition: transform .2s ease; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.harvest-crop.picked img{ transform: scale(1.15) translateY(-4px); }
.harvest-basket{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; }
.harvest-basket img{ width:70px; }
.harvest-count{ font-family: var(--font-display); font-weight:700; color: var(--pink-deep); }

/* ---------- Grow a flower ---------- */
#flowerImg{ max-width: 220px; margin: 0 auto 8px; }

/* ---------- Grow a flower (drag watering can) ---------- */
.grow-stage{ position:relative; }
.water-drop-fx{
  position:absolute; left:50%; top:10%; transform: translateX(-50%);
  font-size:1.6rem; opacity:0; pointer-events:none;
}
.water-drop-fx.show{ animation: drop-fall 0.7s ease; }
@keyframes drop-fall{
  0%{ opacity:1; top:0%; }
  100%{ opacity:0; top:60%; }
}
.can-drag-zone{ display:flex; justify-content:center; margin-top:16px; touch-action:none; }
.can-drag{
  width:72px; cursor: grab; touch-action:none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  transition: transform .15s ease;
}
.can-drag.dragging{ cursor: grabbing; z-index: 50; position:relative; transition:none; }
.game-hint{ text-align:center; font-size:0.78rem; color:#8a7a86; margin-top:6px; }

/* ---------- Harvest flying items ---------- */
.harvest-flyer{
  position: fixed; width:32px; height:32px; object-fit:contain;
  z-index: 999; pointer-events:none;
  transition: left .48s cubic-bezier(.3,.6,.4,1), top .48s cubic-bezier(.3,.6,.4,1), transform .48s ease, opacity .48s ease;
}
.harvest-basket-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; margin-top:10px; }
.harvest-basket-img{ width:170px; transition: transform .2s ease; }
.harvest-basket-img.bounce{ animation: basket-bounce .4s ease; }
@keyframes basket-bounce{
  0%{ transform: scale(1); } 40%{ transform: scale(1.18); } 100%{ transform: scale(1); }
}
.harvest-basket-items{
  position:absolute; left:20%; right:20%; top:8%; height:55%;
  display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:2px;
  pointer-events:none;
}
.basket-mini-item{ width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }

/* ---------- Compass v2 (drag-to-rotate) ---------- */
.compass-face{
  position:relative; width:190px; height:190px; margin: 14px auto 6px;
  border-radius:50%; background: var(--white);
  border: 5px solid var(--purple); box-shadow: inset 0 0 0 6px var(--cream);
  touch-action:none; cursor:grab;
}
.compass-face.correct-snap{ box-shadow: inset 0 0 0 6px var(--cream), 0 0 0 6px rgba(255,210,63,0.6); }
.compass-hub{ position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px; border-radius:50%; background: var(--purple); }
.compass-needle{
  position:absolute; left:50%; top:50%; width:6px; height:78px;
  margin-left:-3px; margin-top:-78px; transform-origin: bottom center;
  background: linear-gradient(180deg, var(--pink-deep), var(--gold));
  border-radius: 4px 4px 2px 2px;
  pointer-events:none;
}
.compass-label{ position:absolute; font-family: var(--font-display); font-weight:800; color: var(--berry-deep); font-size:0.9rem; pointer-events:none; }
.compass-label.n{ top:6px; left:50%; transform:translateX(-50%); }
.compass-label.s{ bottom:6px; left:50%; transform:translateX(-50%); }
.compass-label.e{ right:8px; top:50%; transform:translateY(-50%); }
.compass-label.w{ left:8px; top:50%; transform:translateY(-50%); }

/* ---------- Shape sorter ---------- */
.shape-slots{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin: 14px 0; }
.shape-slot{ width:52px; height:52px; opacity:0.5; }
.shape-slot.filled{ opacity:1; }
.shape-slot svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:5; stroke-dasharray:6 5; }
.shape-slot.filled svg{ fill: currentColor; stroke:none; }
.shape-tray{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.shape-piece{ width:52px; height:52px; border:none; background:none; cursor:grab; touch-action:none; padding:0; }
.shape-piece svg{ width:100%; height:100%; fill: currentColor; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2)); }
.shape-piece.dragging{ cursor:grabbing; z-index:50; position:relative; }

/* ---------- Number match ---------- */
.num-target{ font-family: var(--font-display); font-weight:700; color: var(--berry-deep); text-align:center; margin-bottom:12px; }
.num-target span{ color: var(--pink-deep); font-size:1.3rem; }
.num-cards{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.num-card{
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:4px;
  width:150px; min-height:120px; border: 3px dashed var(--purple); border-radius:18px;
  background: none; cursor:pointer; padding:10px;
}
.num-card img{ width:30px; height:30px; object-fit:contain; }
.num-card.correct{ background: var(--gold); border-color: var(--gold-deep); }
.num-card.wrong{ animation: shake 0.35s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

/* ---------- Rainbow order ---------- */
.rainbow-order-row{ display:flex; gap:6px; justify-content:center; min-height:28px; margin-bottom:14px; }
.rainbow-mini{ width:22px; height:22px; border-radius:50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.rainbow-gems{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.rainbow-gem{ width:44px; height:44px; border-radius:50%; border:3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.25); cursor:pointer; }
.rainbow-gem.used{ opacity:0.25; cursor:default; }
.rainbow-gem.shake{ animation: shake 0.35s ease; }

.scene-replay-btn{
  position:absolute; top:14px; left:14px; z-index:5;
  background: rgba(255,255,255,0.92); border:none; border-radius:20px;
  padding: 8px 14px; font-family: var(--font-display); font-weight:700; font-size:0.78rem;
  color: var(--pink-deep); cursor:pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.can-drag{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
.grow-stage.water-target-hover{ outline: 3px dashed var(--gold-deep); border-radius:14px; }

.scene-banner-badge{
  font-size: 0.52rem; font-family: var(--font-display); font-weight:700;
  color:#8a7a86; margin-bottom:2px; white-space:nowrap;
}
.scene-banner-item.is-video{ background: rgba(226,240,255,0.95); }
.scene-banner-item.is-game{ background: rgba(255,244,214,0.95); }

.chest-img.chest-pop{ animation: chest-pop 0.5s ease; }
@keyframes chest-pop{ 0%{transform:scale(1);} 40%{transform:scale(1.2) rotate(-4deg);} 100%{transform:scale(1);} }
.coin-btn{ transition: transform .2s ease; }

/* ---------- Rainbow arch (v2) ---------- */
.rainbow-arch{ position:relative; width:320px; height:170px; margin: 10px auto 4px; max-width:100%; }
.rainbow-slot{
  position:absolute; width:34px; height:34px; margin:-17px;
  border-radius:50%; border: 3px dashed rgba(0,0,0,0.25); background: rgba(255,255,255,0.6);
}
.rainbow-slot.filled{ border-style: solid; border-color: rgba(255,255,255,0.9); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.rainbow-gems{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.rainbow-gem{ border:none; touch-action:none; cursor:grab; }
.rainbow-gem.dragging{ cursor:grabbing; z-index:50; position:relative; }

/* ---------- Shape sorter room scene (v2) ---------- */
.explain-card.scene-style-card{ padding: 0 0 20px; overflow:auto; border-radius:22px; }
.explain-card.scene-style-card .explain-close{ z-index:20; }
.sorter-room{ position:relative; width:100%; line-height:0; }
.sorter-room-bg{ width:100%; display:block; }
.sorter-toy-img{
  position:absolute; left:50%; top:52%; width:54%;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}
.game-hint{ text-align:center; font-size:0.85rem; color:#8a7a86; margin: 22px 14px 10px; }
.shape-tray{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 380px; margin: 0 auto; padding: 6px 16px 0;
}
.shape-block{ border:none; background:none; cursor:grab; touch-action:none; padding:0; width:100%; justify-self:center; max-width:70px; }
.shape-block img{ width:100%; display:block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25)); }
.shape-block.dragging{ cursor:grabbing; z-index:50; position:relative; }
.shape-block.dropped-in{ animation: shape-drop 0.25s ease forwards; }
@keyframes shape-drop{ to{ transform: scale(0.2); opacity:0; } }
.shape-block.locked-in{
  cursor: default; pointer-events: none;
  z-index: 45;
  animation: shape-lock-in 0.35s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
@keyframes shape-lock-in{
  0%{ transform: translate(-50%,-50%) scale(1.3); opacity:0.6; }
  60%{ transform: translate(-50%,-50%) scale(0.9); }
  100%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}
.shape-block.shape-wrong{ animation: shake 0.35s ease; }
.sorter-progress{ text-align:center; font-family: var(--font-display); font-weight:700; color: var(--pink-deep); margin-top:10px; }

.harvest-crop{ touch-action:none; cursor:grab; }
.harvest-crop.dragging{ cursor:grabbing; z-index:50; position:relative; }
.harvest-basket-img{ width:96px; }

/* ---------- Chest-in-scene (v3) ---------- */
.chest-room{ position:relative; width:100%; line-height:0; }
.chest-room-bg{ width:100%; display:block; }
.chest-img-scene{
  position:absolute; left:50%; top:88%; width:22%;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transition: transform .2s ease;
  z-index: 5;
  pointer-events: none;
}
.chest-img-scene.chest-pop{ animation: chest-pop 0.5s ease; }
.chest-img-scene.chest-celebrate{
  animation: chest-celebrate 0.7s ease forwards;
  z-index: 30;
}
@keyframes chest-celebrate{
  0%{ transform: translate(-50%,-50%) scale(1); }
  100%{ transform: translate(-50%,-50%) scale(3.4); }
}
.chest-img-scene.chest-wiggle{ animation: chest-wiggle 0.3s ease; }
@keyframes chest-wiggle{ 0%,100%{transform:translate(-50%,-50%) rotate(0);} 50%{transform:translate(-50%,-50%) rotate(-4deg);} }
.coin-drag{
  position:absolute; width:8%; aspect-ratio:1;
  border:none; background:none; padding:0; cursor:grab; touch-action:none;
}
.coin-drag img{ width:100%; display:block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.coin-drag.dragging{ cursor:grabbing; z-index:50; }
.coin-drag.coin-deposited{ animation: shape-drop 0.22s ease forwards; }

/* ---------- Rainbow room (v3 — real gems, progressive art) ---------- */
.rainbow-room-stack{ width:100%; padding: 24px 20px 4px; background: linear-gradient(180deg, #eaf6ff, #ffffff); }
.rainbow-room-stack .rainbow-canvas{ width:100%; max-width:480px; display:block; margin:0 auto; }
.rainbow-canvas{ width:100%; max-width:480px; display:block; margin:0 auto; transition: opacity .15s ease; }
.rainbow-canvas.pop{ animation: rainbow-pop 0.4s ease; }
@keyframes rainbow-pop{ 0%{ transform: scale(1); } 45%{ transform: scale(1.04); } 100%{ transform: scale(1); } }
.rainbow-gems{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; padding: 4px 16px 0; }
.rainbow-gem-piece{ border:none; background:none; touch-action:none; cursor:grab; padding:0; width:56px; }
.rainbow-gem-piece img{ width:100%; display:block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3)); }
.rainbow-gem-piece.dragging{ cursor:grabbing; z-index:50; position:relative; }

/* ---------- Counting corner (reuses treehouse floor scene) ---------- */
.counting-room{ width:100%; line-height:0; }
.counting-room img{ width:100%; display:block; }
.counting-tray{ padding: 4px 16px 18px; }
.num-cards{ max-width: 480px; margin: 0 auto; }

.harvest-basket-img.basket-celebrate{
  animation: basket-celebrate 0.6s ease;
}
@keyframes basket-celebrate{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}

/* ---------- Gemstone game v2 (multi-tap + sparkles) ---------- */
.gem-stage-wrap{ position:relative; display:flex; justify-content:center; }
.gem-tap{ position:relative; overflow:visible; }
.gemImg, #gemImg{ transition: transform .15s ease; }
.gem-pulse{ animation: gem-pulse 0.25s ease; }
@keyframes gem-pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.12);} 100%{transform:scale(1);} }
.gem-tap.gem-done{ animation: gem-pulse 0.6s ease 2; }
.gem-spark{
  position:absolute; font-size:1.1rem; pointer-events:none;
  animation: gem-spark-fly 0.6s ease forwards;
}
@keyframes gem-spark-fly{
  0%{ opacity:1; transform: translate(-50%,-50%) scale(0.6); }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
}

.compass-explainer{
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e0d0da;
  font-size: 0.85rem; color: var(--ink); line-height:1.5; text-align:left;
}

/* ---------- Map animation (volcano, water, butterfly) ---------- */
.map-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:22px; }

.lava-glow{
  position:absolute; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,140,20,0.55), rgba(255,90,0,0) 70%);
  animation: lava-pulse 2.4s ease-in-out infinite;
}
@keyframes lava-pulse{
  0%,100%{ opacity:0.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:0.85; transform:translate(-50%,-50%) scale(1.18); }
}

.smoke-stack{ position:absolute; width:1px; height:1px; }
.smoke-puff{
  position:absolute; left:0; top:0;
  width:14px; height:14px; margin:-7px;
  border-radius:50%;
  background: rgba(255,255,255,0.6);
  filter: blur(1px);
  opacity:0;
  animation: smoke-rise 4s ease-out infinite;
}
@keyframes smoke-rise{
  0%{ opacity:0; transform: translate(0,0) scale(0.6); }
  15%{ opacity:0.55; }
  100%{ opacity:0; transform: translate(6px,-70px) scale(2.4); }
}

.water-shimmer{ display:none; }

@media (max-width: 640px){
  .smoke-puff{ width:9px; height:9px; margin:-4.5px; }
}

@media (max-width: 480px){
  .harvest-crop{ width: 62px; }
  .harvest-crop img{ width:50px; height:50px; }
  .harvest-row{ gap:6px; }
}

.video-pill{
  display:inline-block;
  background: var(--pink); color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:0.85rem;
  padding: 10px 22px; border-radius: 30px;
  margin: 10px 0 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  cursor: default;
}

/* ---------- Orientation & large-screen improvements ---------- */

/* Tablets/desktops: let modals use more of the available width instead of
   sitting narrow in a sea of empty space, especially in landscape. */
@media (min-width: 900px){
  .scene-card{ max-width: 1100px; }
  .explain-card.wide{ max-width: 820px; }
  .explain-card{ max-width: 620px; }
}

/* Short/landscape viewports (phone rotated, or any squeezed height):
   cap the video/image height so the banner and controls below it stay
   visible without a big scroll, instead of the 16:9 media claiming the
   whole viewport. */
@media (orientation: landscape) and (min-height: 340px){
  .chest-room{ height: 62vh; overflow:hidden; }
  .chest-room-bg{ width:100%; height:100%; object-fit:cover; }
  #flowerImg{ max-height: 32vh; width:auto; }
  .gem-tap img{ max-height: 30vh; width:auto; }
}

@media (orientation: landscape) and (max-height: 500px){
  .scene-frame img, .scene-frame video{
    max-height: 42vh; width:100%; object-fit: cover;
  }
  .scene-banner{ padding-top: 12px; }
  .scene-banner-prompt{ font-size: 0.72rem; }
  .scene-banner-item{ width: 70px; }
  .scene-banner-item img{ width:40px; height:40px; }
  .scene-banner-emoji{ width:40px; height:40px; font-size:1.9rem; }

  .explain-card{ padding: 18px 18px 16px; max-height: 94vh; }
  .explain-card h3{ font-size: 1.05rem; margin-bottom: 6px; }
  .explain-card p{ font-size: 0.88rem; margin-bottom: 6px; }
  .sorter-toy-img{ width: 78%; }
  .rainbow-canvas{ max-width: 320px; }
  .compass-face{ width: 140px; height: 140px; }
  .chest-room{ height: 48vh; }
  #flowerImg{ max-height: 22vh; }
  .gem-tap img{ max-height: 20vh; }
  .harvest-crop img{ width:56px; height:56px; }
  .harvest-basket-img{ width:76px; }
}

/* ---------- Split layout: media + controls side-by-side in landscape ---------- */
/* Default (portrait / narrow): behaves exactly like the old stacked layout. */
.split-layout{ display:flex; flex-direction:column; width:100%; }
.split-media{ width:100%; }
.split-controls{ width:100%; padding: 4px 16px 18px; }
.split-media .sorter-room, .split-media .counting-room, .split-media .rainbow-room{
  width:100%; line-height:0;
}
.split-media .sorter-room-bg, .split-media .counting-room img, .split-media .rainbow-canvas{
  width:100%; display:block;
}

/* Landscape: media on the left, controls on the right, both filling the
   available height — no rotation needed once a game is open. */
@media (orientation: landscape) and (min-height: 340px){
  .explain-card.scene-style-card{ max-height: 94vh; }
  .split-layout{
    flex-direction: row;
    align-items: stretch;
    height: calc(94vh - 20px);
  }
  .split-media{
    width: 46%; flex-shrink:0;
    height: 100%;
    position:relative;
    overflow:hidden; background:#000;
    border-radius: 24px 0 0 24px;
  }
  .split-media .sorter-room, .split-media .counting-room, .split-media .ispy-imgwrap{
    width:100%; height:100%;
  }
  .split-media .sorter-room-bg, .split-media .counting-room img{
    position:absolute; top:0; left:0; right:0; bottom:0;
    width:100%; height:100%; object-fit:cover; object-position: top left; max-width:none;
  }
  /* I-Spy is NOT decorative background — the hotspot % coordinates are
     calibrated to the whole image, so it must show uncropped or the tap
     targets drift out of alignment with the picture. */
  .split-media .ispy-imgwrap{ display:flex; align-items:center; justify-content:center; background: var(--cream); }
  .split-media .ispy-imgwrap img{
    position:relative; width:auto; height:auto;
    max-width:100%; max-height:100%; object-fit:contain;
  }
  .split-controls .ispy-checklist{ justify-content:flex-start; }
  .split-media .rainbow-canvas{
    height:100%; width:auto; object-fit:contain; background:#eaf6ff;
  }
  .sorter-toy-img{ position:absolute; width:92%; }
  .split-controls{
    width: 54%; overflow:visible;
    padding: 20px 48px 20px 22px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .shape-tray{ max-width:none; }
  .rainbow-gems{ margin-top: 6px; }
}

@media (orientation: landscape) and (min-height: 340px) and (max-height: 500px){
  .split-controls{ padding: 12px 44px 12px 16px; }
  .game-hint{ margin: 4px 0 8px; font-size:0.78rem; }
  .shape-block{ width: 56px; }
  .num-card{ width: 110px; min-height:90px; }
  .rainbow-gem-piece{ width: 44px; }
}

/* ---------- Grow a flower: can beside flower in landscape ---------- */
.flower-row{ display:flex; flex-direction:column; align-items:center; }
@media (orientation: landscape) and (min-height: 340px){
  .flower-row{ flex-direction:row; justify-content:center; align-items:center; gap:24px; }
  .flower-row .grow-stage{ flex-shrink:0; }
  .flower-row .can-drag-zone{ margin-top:0; }
  #flowerImg{ max-height: 30vh; }
}