/* ═══════════════════════════════════════════════
   Little Adventure Town | game layouts
   Sizes use --u (set by the engine): 1/16 of the long side or 1/9 of the
   short side of the stage, so everything scales with the screen.
   ═══════════════════════════════════════════════ */

.game-screen {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(#bfeaff, #e8f8ff 55%, #b9e8a4 55.2%, #a2dc8b);
}
.game-rescue { background: linear-gradient(#ffe2c4, #fff3e3 55%, #b9e8a4 55.2%, #a2dc8b); }
.game-music { background: linear-gradient(#d9c9ff, #f1e9ff); }
.game-dino { background: linear-gradient(#bfeaff, #e8f8ff 34%, #cdeaa0 34.2%, #b6dd86); }
.game-road { background: linear-gradient(#c9efff, #e8f8ff); }
.game-traffic { background: linear-gradient(#bfeaff, #e8f8ff); }
.game-delivery { background: linear-gradient(#c8f3ef, #eafaf8 55%, #b9e8a4 55.2%, #a2dc8b); }
.game-adventure { background: #9fdf8a; }

.stage {
  --u: 40px;
  position: relative; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 0 calc(var(--u) * .3) calc(var(--u) * .3);
}
.stage.round-in > * { animation: fade-in .3s both; }

/* ---------- shared: tray of big choices ---------- */
.tray {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .3) calc(var(--u) * .6); border-radius: calc(var(--u) * .8);
  background: rgba(255,255,255,.55); min-height: calc(var(--u) * 2.6); max-width: 100%;
}
.choice {
  position: relative; flex: none; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9);
  min-width: 84px; min-height: 84px;
  display: grid; place-items: center; padding: calc(var(--u) * .25);
  background: #fff; border-radius: 22%; border: 5px solid #fff;
  box-shadow: 0 7px 0 rgba(0,0,0,.14); touch-action: none;
}
.choice:active { box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.choice.truck-choice { flex: 0 1 calc(var(--u) * 4.1); width: auto; min-width: 96px; }
.choice.flying, .choice.dragging { z-index: 20; }
.choice.flying { background: transparent; border-color: transparent; box-shadow: none; }
.choice.bare { background: transparent; border-color: transparent; box-shadow: none; }
.dragging { z-index: 20; cursor: grabbing; filter: drop-shadow(0 12px 10px rgba(0,0,0,.25)); scale: 1.08; }
.tray-icon { width: calc(var(--u) * 2.2); min-width: 64px; opacity: .95; }
.tray-icon.turn-icon { background: var(--purple); border-radius: 50%; padding: calc(var(--u) * .3); border: 5px solid #fff; animation: spin 4s linear infinite; }

/* ═════════ 1 + 7: garages ═════════ */
.g-row { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * .3); width: 100%; }
.garage {
  position: relative; flex: none; width: min(calc(var(--u) * 4.7), calc((100% - var(--u)) / var(--n)));
  transform-origin: 50% 100%; transition: scale .15s;
}
.garage.size-small { scale: .62; transform-origin: 50% 100%; }
.garage.near { scale: 1.07; }
.garage.size-small.near { scale: .68; }
.g-door { transform-box: fill-box; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.garage.open .g-door { transform: translateY(-90%); }
.garage.peek:not(.open) .g-door { animation: peek 1.3s ease-in-out; }
.g-dock { display: flex; align-items: center; justify-content: center; min-height: calc(var(--u) * 2.9); width: 100%; }
.g-car { position: relative; z-index: 10; width: calc(var(--u) * 3.7); min-width: 110px; cursor: grab; touch-action: none; }
.g-car.size-big { width: calc(var(--u) * 4.6); }
.g-car.size-small { width: calc(var(--u) * 2.6); min-width: 86px; }

/* ═════════ 8: fix my car ═════════ */
.fc-car { position: relative; width: min(calc(var(--u) * 8.2), 92%); }
.slot {
  fill: rgba(255,255,255,.45); stroke: #fff; stroke-width: 3.5; stroke-dasharray: 7 5; stroke-linecap: round;
  animation: slot-pulse 1.1s ease-in-out infinite;
}
.mud {
  position: absolute; width: 17%; aspect-ratio: 1.25; translate: -50% -50%; rotate: var(--r, 0deg);
  background: radial-gradient(circle at 35% 30%, #a8744a, #7a4f2b 70%);
  border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
  box-shadow: 14px 10px 0 -6px #7a4f2b, -10px 12px 0 -7px #8a5a33;
  transition: opacity .1s, scale .1s;
}
.pump-choice { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); }

/* ═════════ 9: delivery ═════════ */
.dl-top { display: flex; align-items: flex-end; justify-content: space-between; width: min(100%, calc(var(--u) * 15)); padding-top: calc(var(--u) * 1.5); }
.dl-dino { width: calc(var(--u) * 3.2); min-width: 84px; touch-action: none; }
.dl-truck { position: relative; width: calc(var(--u) * 7.2); }
.dl-load { position: absolute; left: 5%; width: 55%; bottom: 57%; height: 34%; display: flex; align-items: flex-end; justify-content: center; }
.dl-mini { flex: 0 1 30%; min-width: 0; margin: 0 -3%; }
.dl-count {
  position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; gap: calc(var(--u) * .25);
  background: #fff; border-radius: 999px; padding: calc(var(--u) * .08) calc(var(--u) * .4); box-shadow: 0 4px 0 rgba(0,0,0,.1);
}
.dl-num { font-size: calc(var(--u) * 1.15); font-weight: 900; line-height: 1.1; color: var(--blue); }
.dl-dots { display: flex; gap: calc(var(--u) * .16); }
.dl-dot { width: calc(var(--u) * .55); height: calc(var(--u) * .55); border-radius: 50%; border: 3px dashed #aab4c2; }
.dl-dot.on { background: var(--yellow); border: 3px solid #e0a400; }
.dl-field {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * .35);
  width: 100%; padding: calc(var(--u) * .3); border-radius: calc(var(--u) * .8); background: rgba(255,255,255,.5);
}
.dl-item {
  position: relative; z-index: 5; width: calc(var(--u) * 2.15); min-width: 78px; aspect-ratio: 1; display: grid; place-items: center;
  padding: calc(var(--u) * .28); background: #fff; border-radius: 50%; box-shadow: 0 6px 0 rgba(0,0,0,.12); cursor: grab; touch-action: none;
  transition: opacity .3s, scale .3s;
}
.dl-item.locked { background: transparent; box-shadow: none; z-index: 20; }
.dl-item.fade-away { opacity: 0; scale: .5; pointer-events: none; }

/* ═════════ 2: rescue ═════════ */
.rs-scene {
  width: min(calc(var(--u) * 8.4), 94%); border-radius: calc(var(--u) * .7);
  background: rgba(255,255,255,.55); border: 5px solid #fff;
}
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .5s ease-in-out infinite alternate; }
.smoke { animation: floaty 2s ease-in-out infinite; }

/* ═════════ 5: traffic ═════════ */
.tf-scene { position: relative; width: 100%; flex: 1; min-height: 0; }
.tf-road {
  position: absolute; left: -5%; right: -5%; bottom: 5%; height: calc(var(--u) * 2.3);
  background: linear-gradient(90deg, #fff 50%, transparent 0) 0 50% / calc(var(--u) * 1.4) 5px repeat-x, #6b7280;
  border-top: 5px solid #868d9b; border-bottom: 5px solid #868d9b;
}
.tf-zebra {
  position: absolute; right: 29%; top: 0; bottom: 0; width: calc(var(--u) * 2);
  background: repeating-linear-gradient(#fff 0 14%, #6b7280 14% 28%);
}
.tf-veh { position: absolute; left: 7%; bottom: calc(5% + var(--u) * .55); width: calc(var(--u) * 5); z-index: 3; }
.tf-light { position: absolute; right: 8%; bottom: 3%; height: min(calc(var(--u) * 5.6), 96%); aspect-ratio: 100 / 240; z-index: 5; }
.tf-light svg { height: 100%; width: 100%; }
.lamp.on { filter: drop-shadow(0 0 8px currentColor); }
.lamp-red { color: #ff4b4b; } .lamp-yellow { color: #ffd23f; } .lamp-green { color: #3ee07a; }
.tf-ducks { position: absolute; right: calc(29% - var(--u) * .2); bottom: 0; display: flex; width: calc(var(--u) * 2.4); z-index: 4; }
.tf-ducks svg { flex: 1 1 0; min-width: 0; width: auto; animation: waddle .5s ease-in-out infinite alternate; }
.tf-ducks svg:nth-child(2) { animation-delay: .15s; } .tf-ducks svg:nth-child(3) { animation-delay: .3s; }
.tf-tray { gap: calc(var(--u) * 1.2); min-height: 0; padding-top: calc(var(--u) * .15); padding-bottom: calc(var(--u) * .15); }
.tf-btn { display: flex; flex-direction: column; align-items: center; width: calc(var(--u) * 2.5); min-width: 92px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); }
.tf-btn:active { translate: 0 4px; }
.tf-label { font-size: calc(var(--u) * .5); font-weight: 900; line-height: 1.15; }

/* ═════════ 6: music ═════════ */
.mu-band { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * .8); height: calc(var(--u) * 2.7); }
.mu-d { height: 100%; } .mu-d svg { height: 100%; width: auto; }
.mu-d.d2 { height: 86%; } .mu-d.d3 { height: 70%; }
.mu-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .5); width: min(100%, calc(var(--u) * 15.4)); }
.mu-pad {
  aspect-ratio: 1 / .92; display: grid; place-items: center;
  background: var(--c); border: 6px solid #fff; border-radius: 22%;
  box-shadow: 0 calc(var(--u) * .25) 0 var(--cd); transition: translate .08s, filter .15s;
}
.mu-pad svg { width: 68%; }
.mu-pad.lit, .mu-pad:active { translate: 0 calc(var(--u) * .18); box-shadow: 0 calc(var(--u) * .07) 0 var(--cd); filter: brightness(1.25) saturate(1.2); }
.mu-pads.listening .mu-pad:not(.lit) { filter: saturate(.75) brightness(.96); }
.mode-btn.on { --c: var(--green); }

/* ═════════ 3: road ═════════ */
.rd-grid {
  --cell: 100px;
  position: relative; display: grid; flex: none;
  grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell));
  background: var(--grass); border-radius: calc(var(--cell) * .16); border: 6px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.1);
}
.rd-cell { position: relative; display: grid; place-items: center; }
.rd-cell.road > svg, .rd-rot svg { width: 100%; height: 100%; }
.rd-cell.deco-cell svg { width: 56%; opacity: .95; }
.rd-cell.hole { background: rgba(255,255,255,.3); border-radius: 14%; outline: 5px dashed #fff; outline-offset: -5px; animation: slot-pulse 1.1s ease-in-out infinite; }
.rd-cell.turn { cursor: pointer; background: rgba(255,255,255,.3); border-radius: 14%; outline: 5px dashed #fff; outline-offset: -5px; }
.rd-rot { width: 100%; height: 100%; transition: rotate .25s ease; }
.rd-car { position: absolute; z-index: 4; width: calc(var(--cell) * .8); translate: -50% -62%; }
.rd-star { position: absolute; z-index: 3; width: calc(var(--cell) * .52); translate: -50% -50%; animation: pulse 1.2s ease-in-out infinite; pointer-events: none; transition: scale .3s, opacity .3s; }
.rd-star.got { scale: 2; opacity: 0; }
.road-choice { padding: 0; overflow: hidden; border-radius: 20%; }
.road-choice svg { width: 100%; height: 100%; }
.road-choice.flying { background: #fff; }

/* ═════════ 4: dino ═════════ */
.dn-dino { width: calc(var(--u) * 3.3); min-width: 90px; z-index: 6; pointer-events: none; }
.dn-dino.walker { position: absolute; left: 12%; top: 16%; translate: -50% -50%; width: calc(var(--u) * 2.5); }
.dn-hide { display: flex; align-items: flex-end; justify-content: space-evenly; width: 100%; padding-top: calc(var(--u) * 1.2); }
.dn-spot { position: relative; width: min(calc(var(--u) * 4.4), calc(92% / var(--n))); }
.dn-cover { display: block; position: relative; z-index: 2; }
.dn-peek { position: absolute; z-index: 1; left: 22%; width: 56%; bottom: 20%; opacity: 0; transition: translate .35s cubic-bezier(.3,1.5,.5,1), opacity .15s; }
.dn-spot.found .dn-peek { opacity: 1; translate: 0 -52%; }
.dn-spot.peeking .dn-peek { opacity: 1; translate: 0 -22%; }
.dn-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * .5) calc(var(--u) * 1); width: min(96%, calc(var(--u) * 13)); margin-top: calc(var(--u) * 1.4); }
.dn-stone {
  aspect-ratio: 1.55; display: grid; place-items: center;
  background: radial-gradient(ellipse at 40% 30%, #e6d3b0, #cdb38b); border: 5px solid #b39468; border-radius: 50%;
  box-shadow: 0 7px 0 rgba(0,0,0,.14);
}
.dn-print { width: 38%; opacity: 0; scale: .6; transition: opacity .25s, scale .25s; }
.dn-stone.on { background: radial-gradient(ellipse at 40% 30%, #fff3b8, #ffd966); border-color: #e0a400; }
.dn-stone.on .dn-print { opacity: 1; scale: 1; }
.dn-stone.glimpse .dn-print { animation: glimpse 1.2s ease-in-out; }
.dn-copy-top { height: calc(var(--u) * 3); flex: none; }
.dn-pads { display: flex; justify-content: center; gap: calc(var(--u) * .8); width: 100%; }
.dn-pad {
  width: calc(var(--u) * 4); min-width: 96px; aspect-ratio: 1.5; display: grid; place-items: center;
  background: var(--c); border: 6px solid #fff; border-radius: 50%; box-shadow: 0 calc(var(--u) * .25) 0 var(--cd);
}
.dn-pad svg { width: 30%; }
.dn-pad.lit, .dn-pad:active { translate: 0 calc(var(--u) * .15); box-shadow: 0 calc(var(--u) * .1) 0 var(--cd); filter: brightness(1.25); }

/* ═════════ 10: adventure ═════════ */
.game-adventure .stage { padding: 0; }
.adv-map { position: absolute; inset: 0; }
.adv-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.adv-roads rect { fill: none; vector-effect: non-scaling-stroke; }
.adv-roads .rd-base { stroke: #6b7280; stroke-width: calc(var(--u) * 1.05); fill: #b3e79f; }
.adv-roads .rd-line { stroke: #ffd23f; stroke-width: 4; stroke-dasharray: 14 12; }
.adv-place { position: absolute; z-index: 2; width: min(calc(var(--u) * 2.6), 19%); }
.adv-place.edge-t { translate: -50% calc(-100% - var(--u) * .5); }
.adv-place.edge-b { translate: -50% calc(var(--u) * .5); }
.adv-place:active svg.place { scale: .94; }
.adv-new { position: absolute; right: -4%; top: -6%; width: 34%; animation: pulse 1.2s ease-in-out infinite; pointer-events: none; }
.adv-place.seen .adv-new { display: none; }
.adv-car { position: absolute; z-index: 5; width: calc(var(--u) * 1.9); min-width: 56px; translate: -50% -70%; pointer-events: none; }
.adv-car.flip svg { transform: scaleX(-1); }
.adv-deco { position: absolute; width: calc(var(--u) * 1.5); translate: -50% -50%; pointer-events: none; }
.adv-deco.small { width: calc(var(--u) * .7); }
.adv-pond { position: absolute; left: 50%; top: 50.5%; width: 22%; height: 12%; translate: -50% -50%; border-radius: 50%; background: #9fdcff; border: 5px solid #d9f2ff; pointer-events: none; }

.adv-panel {
  position: absolute; inset: 3%; z-index: 10; display: flex; flex-direction: column;
  background: #fffbe9; border: 6px solid #fff; border-radius: calc(var(--u) * .9);
  box-shadow: 0 0 0 100vmax rgba(30,40,80,.45), 0 14px 30px rgba(0,0,0,.25);
  opacity: 0; scale: .9; transition: opacity .22s, scale .22s cubic-bezier(.3,1.5,.5,1);
}
.adv-panel.show { opacity: 1; scale: 1; }
.adv-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .3); }
.adv-actions { display: flex; justify-content: center; gap: calc(var(--u) * 1.2); padding: 0 0 calc(var(--u) * .35); }
.act-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * .6); max-width: 100%; }
.act-car { position: relative; width: min(calc(var(--u) * 6.4), 80%); }
.act-car.small { width: calc(var(--u) * 3.6); }
.act-big { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); }
.act-gauge { position: relative; width: calc(var(--u) * 1); height: calc(var(--u) * 3.3); border: 5px solid #fff; border-radius: 999px; background: #dfe5ec; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.1); }
.act-gauge i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#7be39a, #43c46b); transition: height .3s; }
.act-eater { width: calc(var(--u) * 3.6); }
.act-field { position: relative; width: 92%; height: calc(var(--u) * 4.4); }
.act-kicker { position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 2.8); }
.act-kicker.right { left: auto; right: 0; }
.act-kicker.right svg { transform: scaleX(-1); }
.act-ball { position: absolute; left: 22%; bottom: 0; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); min-width: 70px; min-height: 70px; padding: 0; }
.act-pad { width: calc(var(--u) * 2.9); }
.swatches .opt { width: calc(var(--u) * 1.9); min-width: 64px; }
.act-box { overflow: hidden; background: #fff4d6; }
.box-item { width: 78%; opacity: 0; scale: .4; transition: opacity .2s .1s, scale .3s .1s cubic-bezier(.3,1.6,.5,1); }
.box-lid {
  position: absolute; inset: 0; background: linear-gradient(90deg, transparent 44%, #c98a4a 44% 56%, transparent 56%), #e3ab6f;
  border-radius: 14%; transition: translate .35s ease-in, rotate .35s;
}
.act-box.open .box-lid { translate: 0 -115%; rotate: -12deg; }
.act-box.open .box-item { opacity: 1; scale: 1; }

/* ═════════ PORTRAIT ═════════ */
.stage.portrait .mu-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(96%, calc(var(--u) * 8.4)); }
.stage.portrait .dn-field { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(92%, calc(var(--u) * 8)); }
.stage.portrait .tray { flex-wrap: wrap; }
.stage.portrait .dn-pad { width: calc(var(--u) * 2.7); min-width: 84px; }
.stage.portrait .dn-pads { gap: calc(var(--u) * .3); }
.stage.portrait .dl-top { padding-top: calc(var(--u) * 1.8); }
.stage.portrait .dl-truck { width: calc(var(--u) * 5.6); }
.stage.portrait .tf-veh { width: calc(var(--u) * 3.8); left: 4%; }
.stage.portrait .tf-zebra { right: 34%; width: calc(var(--u) * 1.6); }
.stage.portrait .tf-ducks { right: 33%; width: calc(var(--u) * 1.9); }
.stage.portrait .tf-light { right: 3%; height: min(calc(var(--u) * 6), 80%); }
.stage.portrait .tf-tray { gap: calc(var(--u) * .5); }
.stage.portrait .adv-panel { inset: 2%; }
.stage.portrait .act-pad { width: calc(var(--u) * 3.4); }
.stage.portrait .choice.truck-choice { flex: 0 1 42%; height: calc(var(--u) * 2.5); min-height: 76px; }
.stage.portrait .tray { gap: calc(var(--u) * .35); }