/* Screens: home, map, station host, celebration and the overlays (plan §5, §11; mockups 00, 09, 11). */

/* ---- home ---- */
.home .milo { left: 4%; bottom: 6%; height: 52%; }
.home .bubble { left: 22%; bottom: 52%; }
.home .center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; }
.home .jar { position: absolute; right: 5%; bottom: 7%; width: 15%; z-index: 5; pointer-events: none; }
.jar-glass { position: relative; aspect-ratio: 3 / 4; border-radius: 22% 22% 26% 26%; background: rgba(221, 239, 245, .55);
  border: 5px solid rgba(255, 253, 247, .9); box-shadow: inset 0 -12px 24px rgba(62, 138, 140, .15), var(--shadow-lift);
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 2px; padding: 12% 8% 8%; overflow: hidden; }
.jar-glass::before { content: ""; position: absolute; left: 14%; right: 14%; top: -14px; height: 22px; border-radius: 8px;
  background: var(--petrol); }
.jar-glass img { width: 28%; }
.home .next-sticker { position: absolute; right: 5%; top: 18%; width: 13%; aspect-ratio: 1; border-radius: 50%;
  border: 5px dashed var(--paper-edge); background: rgba(255, 251, 242, .7); display: grid; place-items: center; z-index: 5; }
.next-sticker img, .next-sticker .emoji { width: 66%; filter: brightness(0) opacity(.18); font-size: 5vw; text-align: center; }
.eltern { position: absolute; right: calc(2 * var(--u)); top: calc(2 * var(--u)); z-index: 30; min-height: 44px;
  padding: 8px 16px; border: 0; border-radius: 22px; background: rgba(255, 253, 247, .78); color: var(--ink-soft);
  font: 600 15px var(--font-parent); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.eltern img { width: 16px; height: 16px; opacity: .7; }

/* ---- map (Lesereise) ---- */
.map { background: linear-gradient(var(--sky-light), var(--meadow-light) 42%, var(--meadow) 100%); }
.map svg.path { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .decor img { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.map .decor .d-wash-lake { opacity: .8; transform: translate(-50%, -50%) scaleY(.45); }
.map .cloud { position: absolute; width: 16%; aspect-ratio: 3; border-radius: 50%; background: var(--white); opacity: .75;
  filter: blur(2px); box-shadow: 30px -18px 0 4px var(--white), -34px -8px 0 2px var(--white); }
.map .cloud.c1 { left: 12%; top: 9%; } .map .cloud.c2 { left: 52%; top: 5%; width: 12%; } .map .cloud.c3 { left: 78%; top: 13%; width: 10%; }
.map .station { position: absolute; z-index: 5; width: calc(13 * var(--u)); min-width: var(--tap); aspect-ratio: 1;
  transform: translate(-50%, -78%); border: 0; padding: 0; background: none; cursor: pointer; }
.map .station img.house { width: 100%; }
.map .station .sign { position: absolute; left: 50%; top: 58%; transform: translate(-50%, 0) rotate(-2deg);
  font: 700 calc(4 * var(--u)) var(--font-read); background: var(--white); color: var(--ink); padding: 2px 12px;
  border-radius: 10px 12px 10px 14px; box-shadow: var(--shadow-lift); white-space: nowrap; }
.map .station .badge { position: absolute; right: -6%; top: -4%; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-lift); display: grid; place-items: center; overflow: hidden; }
.map .station .badge img { width: 74%; } .map .station .badge .emoji { font-size: calc(3.4 * var(--u)); }
.map .station.current::before { content: ""; position: absolute; inset: 8% 8% 18%; border-radius: 50%;
  box-shadow: 0 0 0 10px var(--glow); animation: breathe 2.4s ease-in-out infinite; }
.map .station.locked { opacity: .5; filter: saturate(.4) blur(1px); cursor: default; }
.map .station.misty { opacity: .2; filter: blur(3px); pointer-events: none; }
.map .milo { width: calc(9 * var(--u)); transform: translate(-30%, -95%); }

/* ---- station host: activity area + top bar ---- */
.station-host .stage { position: absolute; inset: calc(11 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  display: grid; place-items: center; z-index: 5; }
.station-host .milo { left: 1.5%; bottom: 2%; height: 26%; }
.station-host .bubble { left: 1.5%; bottom: 29%; }

/* ---- celebration (station geschafft) ---- */
.celebrate .milo { left: 10%; bottom: 6%; height: 50%; }
.celebrate .sticker { position: absolute; left: 50%; top: 46%; width: min(30 * var(--u), 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--white); display: grid; place-items: center;
  box-shadow: 0 0 0 12px var(--white), 0 0 0 26px var(--glow), var(--shadow-float); z-index: 6;
  animation: sticker-in 900ms var(--ease-pop) both; }
.celebrate .sticker img { width: 76%; } .celebrate .sticker .emoji { font-size: min(16 * var(--u), 150px); }
@keyframes sticker-in { from { transform: translate(-50%, -30%) scale(.2) rotate(-25deg); opacity: 0; } }

/* ---- a told scene: the frame story's painting, a friend's introduction (F45) ---- */
.scene .milo { left: 4%; bottom: 5%; height: 40%; }
.scene .scene-pic { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); border: 0; padding: 0;
  cursor: pointer; background: var(--white); box-shadow: var(--shadow-float); animation: scene-in 650ms var(--ease-pop) both; }
.scene .scene-pic.frame { width: min(64vw, 72vh); aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; }
.scene .scene-pic.frame img { width: 100%; height: 100%; object-fit: cover; }
.scene .scene-pic.friend { width: min(30 * var(--u), 300px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 12px var(--white), 0 0 0 26px var(--glow), var(--shadow-float); }
.scene .scene-pic.friend img { width: 78%; } .scene .scene-pic .emoji { font-size: min(16 * var(--u), 150px); }
.scene .scene-name { position: absolute; left: 50%; top: calc(45% + min(15 * var(--u), 150px) + 40px); transform: translateX(-50%);
  font-size: min(10 * var(--u), 96px); }
@keyframes scene-in { from { transform: translate(-50%, -40%) scale(.6); opacity: 0; } }
@media (orientation: landscape) { .scene .scene-pic.frame { left: 56%; } } /* clear of Milo on the left */
@media (orientation: portrait) {
  .scene .milo { left: 3%; bottom: 3%; height: 22%; }
  .scene .scene-pic { top: 36%; }
  .scene .scene-pic.frame { width: min(84vw, 58vh); }
  .scene .scene-name { top: calc(36% + min(15 * var(--u), 150px) + 40px); }
}
/* the sticker's letters, like a stamp on its rim (second play session: "stickers should have the letters on them") */
.stk-letter { position: absolute; right: -6%; bottom: -2%; padding: .08em .32em .14em; border-radius: var(--r-chip);
  background: var(--white); color: var(--ink); font: 700 1em/1 var(--font-read); white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 3px var(--sun-light), var(--shadow-lift); }
.celebrate .sticker .stk-letter { font-size: min(7 * var(--u), 64px); }
.album .stk .stk-letter { font-size: min(3.2vw, 4.6vh); right: -4%; bottom: 0; rotate: 4deg; }
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.petals i { position: absolute; top: -6%; width: 18px; height: 26px; border-radius: 0 100% 0 100%;
  animation: fall 3.4s linear both; }
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }

/* ---- overlays ---- */
.overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; }
.needs-tap { background: rgba(251, 245, 233, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.needs-tap .big-speaker { width: min(34 * var(--u), 240px); aspect-ratio: 1; border: 0; border-radius: 50%;
  background: var(--lake); box-shadow: 0 0 0 16px rgba(94, 156, 194, .25), var(--shadow-float); display: grid;
  place-items: center; animation: breathe 1.8s ease-in-out infinite; cursor: pointer; }
.needs-tap .big-speaker img { width: 46%; }
.needs-tap .milo { left: 22%; bottom: 14%; height: 36%; }
.demo-hand { position: absolute; z-index: 60; width: 120px; pointer-events: none; opacity: 0;
  transform: translate(var(--x, 50vw), var(--y, 60vh)); transition: transform 900ms var(--ease-soft), opacity 300ms; }
.demo-hand.on { opacity: .92; }
.demo-hand.tap { animation: hand-tap 420ms ease-in-out 2; }
@keyframes hand-tap { 50% { margin-top: 18px; scale: .92; } }

/* ---- portrait (iPad held upright): stack instead of side by side, smaller Milo (plan §8.6 both orientations) ---- */
@media (orientation: portrait) {
  .home .milo { height: 30%; left: 3%; bottom: 3%; }
  .home .bubble { left: 24%; bottom: 30%; }
  .home .center { place-items: start center; padding-top: 30vh; }
  .home .jar { width: 22%; bottom: 5%; }
  .home .next-sticker { width: 20%; top: 9%; }
  .station-host .stage { inset: calc(10 * var(--u)) calc(3 * var(--u)) 17vh; }
  .station-host .milo { height: 14%; }
  .station-host .bubble { left: 3%; bottom: 15%; }
  .celebrate .milo { height: 30%; left: 4%; }
  .map .station { width: calc(17 * var(--u)); }
  .map .milo { width: calc(12 * var(--u)); }
}

/* ---- sticker album (mockup 00 frame 5): cloth book, two pages of four slots, petrol ribbon ---- */
.album { background: radial-gradient(ellipse at 50% 0%, var(--sun-light), var(--paper) 45%, var(--paper-deep)); }
.album .book { position: absolute; left: 10.2%; top: 14.4%; width: 79.7%; height: 73.7%; z-index: 4;
  border-radius: 26px 30px 28px 24px; box-shadow: 0 36px 60px -26px rgba(var(--shade-rgb), .7), inset 0 0 0 3px rgba(255, 255, 255, .08);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px), var(--meadow-deep); }
.album .page { position: absolute; top: 2.6%; bottom: 3.6%; width: calc(50% - 18px); padding: 4% 3%; display: grid;
  grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.album .page.l { left: 18px; border-radius: 16px 4px 4px 18px;
  background: linear-gradient(90deg, var(--paper) 0, var(--paper) 80%, var(--paper-deep) 100%);
  box-shadow: inset -16px 0 30px -14px rgba(var(--shade-rgb), .55), -3px 3px 0 var(--paper-deep), -6px 6px 0 var(--paper), -8px 8px 0 var(--paper-edge); }
.album .page.r { right: 18px; border-radius: 4px 16px 18px 4px;
  background: linear-gradient(270deg, var(--paper) 0, var(--paper) 80%, var(--paper-deep) 100%);
  box-shadow: inset 16px 0 30px -14px rgba(var(--shade-rgb), .55), 3px 3px 0 var(--paper-deep), 6px 6px 0 var(--paper), 8px 8px 0 var(--paper-edge); }
.album .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; }
.album .stk { position: relative; width: min(14.6vw, 21vh); aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  border: 0; background: none; cursor: pointer; }
.album .stk img, .album .stk .emoji { width: 86%; font-size: min(9vw, 13vh); text-align: center;
  filter: drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white)) drop-shadow(0 3px 0 var(--white))
    drop-shadow(0 -3px 0 var(--white)) drop-shadow(0 6px 6px rgba(var(--shade-rgb), .34)); }
.album .stk.sil { cursor: default; }
.album .stk.sil::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 3px dashed var(--paper-edge); }
.album .stk.sil img, .album .stk.sil .emoji { width: 66%; filter: brightness(0) invert(.86) sepia(.25); }
.album .slot.next-up .stk::before { border-color: var(--sun); animation: breathe 2.6s ease-in-out infinite; }
.album .slot.later { opacity: .7; }
/* a new sticker flies from the middle of the book to its place (F44) */
.album .stk.arriving { animation: sticker-fly 1100ms var(--ease-pop) both; z-index: 8; }
@keyframes sticker-fly { 0% { transform: translateY(-30%) scale(2.4) rotate(-18deg); opacity: 0; }
  25% { opacity: 1; } }
.album .album-next { z-index: 9; animation: arrow-late 1.4s step-end both; }
/* the arrow waits for the sticker to land: a double tap on the celebration's arrow cannot skip the album (review) */
@keyframes arrow-late { from { visibility: hidden; } }
.album .slot-g { font: 700 min(2.9vw, 4.2vh)/1 var(--font-read); color: var(--ink-soft); }
.album .ribbon { position: absolute; left: 50.7%; top: 12.2%; width: 2.9%; height: 84%; z-index: 6;
  background: linear-gradient(90deg, var(--petrol), color-mix(in srgb, var(--petrol) 80%, var(--white)) 50%, var(--petrol));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 94%, 0 100%); }
.album .turn { top: 46%; }
.album .turn.prev { left: 1.5%; } .album .turn.prev img { transform: scaleX(-1); }
.album .turn.next { right: 1.5%; }
.album .turn:disabled { opacity: .45; cursor: default; }
.album .album-milo { position: absolute; right: 1%; bottom: 0; height: 22%; z-index: 7; }

/* ---- small cheer after an activity; a speaker that pulses when a clip could not play (plan §5, §6.3) ---- */
.station-host .milo.cheer { animation: milo-cheer .7s ease-in-out 2; }
@keyframes milo-cheer { 50% { transform: translateY(-14px) rotate(-3deg); } }
.chip.speaker.pulse { animation: breathe 1.2s ease-in-out infinite; box-shadow: 0 0 0 10px var(--glow), var(--shadow-lift); }
.station-host.waiting .bubble { animation: breathe 1.4s ease-in-out infinite; }

/* ---- map regions 2–3 (decisions F30): the same path, the region's light; page arrows like the album ---- */
.map.r-wald { background: linear-gradient(var(--sky-light), color-mix(in srgb, var(--moss) 45%, var(--meadow-light)) 40%, var(--moss) 100%); }
.map.r-see { background: linear-gradient(var(--sky-light), color-mix(in srgb, var(--lake) 25%, var(--meadow-light)) 42%, var(--meadow) 100%); }
.map.r-see .decor .d-wash-lake { opacity: .9; }
.map .turn { top: 46%; z-index: 21; }
.map .turn.prev { left: 1.5%; } .map .turn.prev img { transform: scaleX(-1); }
.map .turn.next { right: 1.5%; }
.map .turn:disabled { opacity: .45; cursor: default; }
/* a soft cloud on a house whose media is not on the iPad yet (F33): tapping it plays the latest offline station */
.map .station .offline-cloud { position: absolute; left: -4%; top: 2%; width: 40%; aspect-ratio: 1.6; border-radius: 50%;
  background: radial-gradient(circle at 30% 60%, var(--white) 0 34%, transparent 35%),
    radial-gradient(circle at 62% 42%, var(--white) 0 40%, transparent 41%),
    radial-gradient(circle at 80% 66%, var(--white) 0 28%, transparent 29%);
  filter: drop-shadow(0 2px 3px rgba(var(--shade-rgb), .25)); opacity: .95; pointer-events: none; }

/* ---- the fast path's "go back" offer (decisions F32): two big buttons over the activity, Milo asks ---- */
.offer-back { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  gap: calc(8 * var(--u)); background: color-mix(in srgb, var(--paper) 82%, transparent); animation: screen-in 300ms both; }
.offer-btn { width: max(150px, 18 * var(--u)); aspect-ratio: 1; border: 0; border-radius: var(--r-blob); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform 160ms var(--ease-pop); }
.offer-btn:active { transform: scale(.95); }
.offer-btn.back { background: radial-gradient(circle at 34% 28%, var(--white), var(--paper) 55%, var(--paper-deep)); }
.offer-btn.back img { width: 72%; }
.offer-btn.stay { background: radial-gradient(circle at 34% 28%, var(--sun-light), var(--sun) 50%, var(--sun-deep)); }
.offer-btn.stay img { width: 46%; }

/* ---- "Schluss für heute" (first play session): an adult's pill under "Eltern"; the goodbye screen is the quiet home ---- */
.eltern.ende { top: calc(2 * var(--u) + 56px); }
.goodbye .milo { height: 60%; left: 34%; bottom: 8%; }
.goodbye .bubble { left: 62%; bottom: 58%; }
@media (orientation: portrait) { .goodbye .milo { height: 40%; left: 22%; bottom: 10%; } .goodbye .bubble { left: 66%; bottom: 46%; } }