* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", sans-serif; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
img { width: 100%; height: 100%; display: block; object-fit: cover; }
button:focus-visible { outline: 5px solid #fff; outline-offset: 4px; }
svg { width: 100%; height: 100%; display: block; }
button { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

.screen { isolation: isolate; }
#app, .screen { position: absolute; inset: 0; overflow: hidden; }

/* ---------- scenes ---------- */
.scene-sky { background: #5ec8ff url("../assets/art/lookout.jpg") center / cover; }
.scene-town { background: #9aa3ad url("../assets/art/town.jpg") center / cover; }
.scene-park { background: #7bd655 url("../assets/art/park.jpg") center / cover; }
.scene-mountain { background: #a3896b url("../assets/art/mountain.jpg") center / cover; }
.scene-road { background: #7bd655 url("../assets/art/park.jpg") center / cover; }
.scene-sea { background: #2fa8e0 url("../assets/art/sea.jpg") center / cover; }

/* ---------- common ---------- */
.title { position: absolute; top: 5vh; left: 42%; right: 3vw; margin: 0; text-align: center; font-size: 7vmin; line-height: 1; color: #fff; -webkit-text-stroke: 0.5vmin #1b3f8f; text-shadow: 0 0.8vmin 0 #e63946; }
.title span { color: #ffd60a; font-size: 0.75em; }
.big-btn { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2vmin; padding: 1.5vmin 5vmin 1.5vmin 1.5vmin; border-radius: 99px; background: #e63946; color: #fff; font-size: 7vmin; font-weight: 800; box-shadow: 0 1.2vmin 0 #9b1d27; animation: button-glow 1.4s infinite; z-index: 5; white-space: nowrap; }
.big-btn svg { width: 12vmin; height: 12vmin; }
.big-btn:active { transform: translateX(-50%) translateY(1vmin); box-shadow: 0 0.2vmin 0 #9b1d27; }

.lookout { position: absolute; left: 50%; bottom: 30vh; width: 50vmin; height: 50vmin; transform: translateX(-50%); }
.lookout.small { left: 4vw; bottom: 32vh; width: 40vmin; height: 40vmin; transform: none; }
.ryder { position: absolute; left: 4vw; bottom: 4vh; width: 24vmin; height: 24vmin; z-index: 2; }
.hq .ryder { left: 48vw; bottom: 25vh; }
.briefing .ryder { bottom: 32vh; }
.villain { position: absolute; width: 24vmin; height: 31vmin; z-index: 3; }
.villain img { object-fit: contain; }
.villain.peek { right: 3vw; top: 14vh; animation: peek 2.4s ease-in-out infinite; }
.villain.watch { right: 2vw; top: 14vh; width: 18vmin; height: 24vmin; animation: peek 3s ease-in-out infinite; }
.villain.run-away { right: 2vw; bottom: 6vh; animation: runaway 3s ease-in forwards; }

.pup-parade { position: absolute; left: 0; right: 0; bottom: 22vh; display: flex; justify-content: center; gap: 1vw; }
.pup-parade .pup { width: 13vmin; height: 13vmin; }
.pup img, .ryder img { border-radius: 50%; border: 0.6vmin solid #fff; box-shadow: 0 0.8vmin 0 rgba(17, 55, 99, .3); }
.pup.corner { position: absolute; left: 1vw; bottom: 2vh; width: 16vmin; height: 16vmin; z-index: 4; }
.pup.hero { position: absolute; left: 50%; bottom: 30vh; width: 32vmin; height: 32vmin; transform: translateX(-50%); }

.badges { position: absolute; top: 2vh; right: 2vw; padding: .7vmin 1vmin; background: rgba(255,255,255,.9); border-radius: 99px; display: flex; gap: 1vmin; }
.badge { width: 9vmin; height: 9vmin; filter: grayscale(1) opacity(0.35); }
.badge.earned { filter: none; animation: pop 0.5s; }
.badge-big { position: absolute; right: 8vw; top: 12vh; width: 26vmin; height: 26vmin; }

/* ---------- HQ / briefing ---------- */
.pup-pad { position: absolute; right: 12vw; bottom: 18vh; width: 30vmin; height: 40vmin; border-radius: 4vmin; background: #1b3f8f; border: 1.5vmin solid #2b2b3a; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffd60a; font-size: 12vmin; font-weight: 900; box-shadow: 0 1.5vmin 0 #0d2357; }
.pup-pad svg { width: 18vmin; height: 18vmin; }
.pup-pad.ringing { animation: ring 0.9s infinite; }

.mission-card { position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); width: min(60vw, 75vmin); background: #fff; border: 1vmin solid #1b3f8f; border-radius: 4vmin; text-align: center; padding: 2vmin; box-shadow: 0 1.5vmin 0 rgba(0, 0, 0, 0.2); animation: popup 0.5s; }
.mission-card h2 { margin: 0; font-size: 6vmin; color: #1b3f8f; }
.mission-pic { width: 22vmin; height: 22vmin; margin: 1vmin auto 0; animation: wobble 1.6s ease-in-out infinite; }

.lineup { position: absolute; left: 0; right: 0; bottom: 3vh; display: flex; justify-content: center; gap: 1.5vw; z-index: 3; }
.pup.pick { width: 15vmin; display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.85); border-radius: 3vmin; padding: 1vmin; border: 0.6vmin solid #1b3f8f; animation: popup 0.4s backwards; }
.pup.pick img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 2vmin; border: 0; box-shadow: none; }
.pup.pick span { font-size: 3.6vmin; font-weight: 800; color: #1b3f8f; }
.pup.pick:nth-child(2) { animation-delay: 0.1s; } .pup.pick:nth-child(3) { animation-delay: 0.2s; }
.pup.pick:nth-child(4) { animation-delay: 0.3s; } .pup.pick:nth-child(5) { animation-delay: 0.4s; } .pup.pick:nth-child(6) { animation-delay: 0.5s; }
.pup.pick.shake { animation: shake 0.5s; }
.pup.pick.chosen { transform: scale(1.15) translateY(-2vmin); background: #ffd60a; transition: transform 0.4s; }
.pup.pick:disabled:not(.chosen) { opacity: 0.4; }

/* ---------- ride ---------- */
.vehicle.drive { position: absolute; bottom: 14vh; left: -50vmin; width: 50vmin; height: 33vmin; animation: drive 2.2s ease-in-out forwards; }

/* ---------- mini-games ---------- */
.field { position: absolute; inset: 0; }
.target { position: absolute; width: 16vmin; height: 16vmin; transition: transform 0.5s, opacity 0.5s; z-index: 2; }
.target:active { transform: scale(0.9); }
.target.gone { transform: scale(0) rotate(30deg); opacity: 0; pointer-events: none; }

.flame { width: 14vmin; height: 17vmin; }
.flame svg { animation: flicker 0.4s ease-in-out infinite alternate; }

.bush { width: 22vmin; height: 18vmin; }
.bush.rustle { animation: shake 0.5s; }
.popout { position: absolute; left: 25%; top: -55%; width: 55%; height: 70%; animation: popup 0.5s; }
.popout.run { animation: popup 0.5s, kittyrun 1.6s 0.6s forwards; }

.heli { position: absolute; right: 2vw; top: 12vh; width: 34vmin; height: 23vmin; }
.hover { animation: hover 1.2s ease-in-out infinite alternate; }
.target.rescued.gone { transform: translate(var(--rescue-x), var(--rescue-y)) scale(0.15); opacity: 0; }

.road { position: absolute; left: 0; right: 0; top: 55%; height: 30%; background: #555b63; border-top: 1vmin solid #2b2b3a; border-bottom: 1vmin solid #2b2b3a; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 8%; background: repeating-linear-gradient(90deg, #ffd60a 0 6%, transparent 6% 12%); }
.rock { width: 18vmin; height: 14vmin; }

.bin { position: absolute; right: 10%; top: 30%; width: 24vmin; height: 28vmin; z-index: 1; }
.trash { width: 13vmin; height: 13vmin; touch-action: none; }
.trash.dragging { transform: scale(1.2); z-index: 5; transition: none; }
.trash.into-bin { transform: scale(0); opacity: 0; pointer-events: none; transition: all 0.5s; }

.waves { position: absolute; left: 0; right: 0; top: 36%; height: 6vmin; background: radial-gradient(circle at 50% 0, transparent 60%, #fff 62%, transparent 70%) 0 0 / 10vmin 6vmin repeat-x; opacity: 0.6; animation: waves 3s linear infinite; }
.turtle { width: 16vmin; height: 13vmin; }
.bob svg { animation: bob 1.6s ease-in-out infinite alternate; }

/* ---------- effects ---------- */
.confetti { position: absolute; top: -3vh; width: 1.6vmin; height: 2.6vmin; border-radius: 0.3vmin; animation: fall linear forwards; z-index: 6; pointer-events: none; }
.bounce { animation: bounce 1s ease-in-out infinite alternate; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 50% { scale: 1.06; } }
@keyframes bounce { to { translate: 0 -2.5vmin; } }
@keyframes pop { from { transform: scale(0); } }
@keyframes popup { from { translate: 0 60%; scale: 0.2; } }
@keyframes ring { 50% { box-shadow: 0 1.5vmin 0 #0d2357, 0 0 4vmin 1vmin #ffd60a; } }
@keyframes button-glow { 50% { box-shadow: 0 1.2vmin 0 #9b1d27, 0 0 3vmin rgba(255,255,255,.8); } }
@keyframes shake { 20%, 60% { translate: -2vmin 0; } 40%, 80% { translate: 2vmin 0; } }
@keyframes wobble { 50% { rotate: 6deg; scale: 1.05; } }
@keyframes flicker { to { scale: 1.08 0.92; } }
@keyframes hover { to { translate: 0 3vmin; } }
@keyframes bob { to { translate: 0 2vmin; rotate: 4deg; } }
@keyframes waves { to { background-position: 10vmin 0; } }
@keyframes drive { 60% { left: 30vw; } 100% { left: 110vw; } }
@keyframes peek { 0%, 100% { translate: 0 0; } 50% { translate: 0 2vmin; rotate: -4deg; } }
@keyframes runaway { 30% { translate: 0 0; } 100% { translate: 60vw 0; rotate: 15deg; } }
@keyframes kittyrun { to { translate: 80vw -10vh; } }
@keyframes fall { to { translate: 0 110vh; rotate: 720deg; } }

/* Picture controls remain usable by children who cannot read. */
.home-btn, .replay-btn { position: absolute; top: 2vmin; width: 9vmin; height: 9vmin; min-width: 48px; min-height: 48px; padding: 1.5vmin; border: .5vmin solid #fff; border-radius: 50%; color: #fff; background: #1b3f8f; box-shadow: 0 .6vmin 0 #0d2357; z-index: 10; }
.home-btn { left: 2vmin; }
.replay-btn { right: 2vmin; }
.replay-btn:disabled { opacity: .4; }
.rescue-vehicle { position: absolute; right: 3vw; bottom: 2vh; width: 28vmin; height: 19vmin; z-index: 1; pointer-events: none; }
.rescue-progress { position: absolute; top: 2vmin; left: 50%; transform: translateX(-50%); display: flex; gap: 1vmin; padding: .7vmin 1.4vmin; border-radius: 99px; background: rgba(255,255,255,.92); z-index: 4; }
.rescue-progress i { width: 6vmin; height: 6vmin; opacity: .25; filter: grayscale(1); }
.rescue-progress i.complete { opacity: 1; filter: none; animation: popup .4s; }
.water-jet { position: absolute; height: 1.5vmin; border-radius: 99px; transform-origin: left center; background: linear-gradient(#fff, #8de4ff, #3ebaff); box-shadow: 0 0 1vmin #fff; z-index: 3; pointer-events: none; animation: spray .5s forwards; }
@keyframes spray { from { scale: .2 1; opacity: .4; } to { scale: 1 1; opacity: 0; } }

/* ---------- Kryštůfek & Evelínka ---------- */
.kid { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.kid img { border-radius: 50%; border: 0.9vmin solid #ffd60a; box-shadow: 0 0.8vmin 0 rgba(17, 55, 99, .3); aspect-ratio: 1; height: auto; }
.kid span { margin-top: -2.4vmin; padding: .4vmin 2vmin; border-radius: 99px; background: #1b3f8f; color: #fff; font-size: 3.6vmin; font-weight: 800; white-space: nowrap; }
.start .kid.cadet { right: 14vw; top: 30vh; width: 22vmin; }
.hq .kid.cadet { left: 26vw; bottom: 25vh; width: 20vmin; }
.win .kid.cadet { left: calc(4vw + 25vmin); bottom: 4vh; width: 18vmin; }
.finale .kid.hero { left: 50%; bottom: 32vh; width: 30vmin; translate: -50% 0; }
.finale .kid.hero img { border-width: 1.2vmin; }
.kid-badge { position: absolute; right: -2vmin; top: -2vmin; width: 11vmin; height: 11vmin; }
.finale .kid.cheer { left: calc(50% - 30vmin); bottom: 40vh; width: 12vmin; }
.kid.evelinka img { border-color: #ff7eb6; }
.popout.kid { position: absolute; width: 60%; }
.keys-hint { position: absolute; left: 42%; right: 3vw; top: 21vh; margin: 0; text-align: center; font-size: 3vmin; font-weight: 800; color: #fff; text-shadow: 0 0.3vmin 0.6vmin rgba(0, 0, 0, .6); }

/* ---------- keyboard highlight ---------- */
.kbd-focus { z-index: 6; outline: 1.2vmin solid #ffd60a; outline-offset: 0.6vmin; border-radius: 3vmin; box-shadow: 0 0 0 2.2vmin rgba(255, 255, 255, .55); }
.target.kbd-focus { border-radius: 50%; }
.big-btn.kbd-focus { border-radius: 99px; }

@media (max-aspect-ratio: 6/5) {
  .title { left: 4vw; right: 4vw; font-size: 8vmin; }
  .start.scene-sky, .hq.scene-sky, .finale.scene-sky { background-position: 30% center; }
  .pup-parade { gap: 1vmin; }
  .pup-parade .pup { width: 14vmin; height: 14vmin; }
  .lineup { left: 8vw; right: 8vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vmin; }
  .pup.pick { width: 100%; padding: 1vmin; }
  .pup.pick img { height: 14vmin; width: 14vmin; }
  .pup.pick span { font-size: 4vmin; }
  .briefing .ryder { bottom: 42vh; width: 20vmin; height: 20vmin; }
  .mission-card { top: 12vh; width: 82vw; }
  .mission-card h2 { font-size: 6vmin; }
  .mission-pic { width: 18vmin; height: 18vmin; }
  .hq .ryder { left: 8vw; bottom: 23vh; }
  .pup-pad { right: 12vw; bottom: 24vh; }
  .badges { top: 14vh; right: 3vw; }
  .win .ryder, .finale .ryder { bottom: 25vh; width: 20vmin; height: 20vmin; }
  .finale .ryder { bottom: 35vh; }
  .badge-big { right: 6vw; top: 17vh; width: 22vmin; height: 22vmin; }
  .start .kid.cadet { right: auto; left: 50%; top: 26vh; translate: -50% 0; }
  .hq .kid.cadet { left: 38vw; bottom: 46vh; width: 18vmin; }
  .win .kid.cadet { bottom: 25vh; left: calc(4vw + 22vmin); width: 16vmin; }
  .finale .kid.hero { bottom: 48vh; width: 26vmin; }
  .finale .kid.cheer { bottom: 35vh; left: calc(4vw + 22vmin); width: 12vmin; }
  .keys-hint { left: 0; right: 0; top: auto; bottom: 0.5vh; }
}

.finale .badges { top: 23vh; right: 5vw; }