/* Eva's & Max's Fire Rescue – overlay UI styles.
   Same family look as the other Eva's & Max's games (see ../BRAND.md):
   Fredoka, chunky rounded buttons with a solid bottom edge, the ink and
   toy-box colours below. The 3D town (#scene) sits behind #ui. */

@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fredoka-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/fredoka-latin-700-normal.woff2) format('woff2'); }

:root {
  --ink: #3d2c55;
  --ink-soft: #7d6c93;
  --paper: #fffaf2;
  --line: #efe3d2;
  --line-d: #e3d3bc;
  --green: #4cc76a;
  --green-d: #2f9a4c;
  --blue: #4dabf7;
  --blue-d: #2b84cc;
  --yellow: #ffd43b;
  --yellow-d: #dba600;
  --red: #ff6b6b;
  --red-d: #d14848;
  --orange: #ffa94d;
  --purple: #9775fa;
  /* this game's own accents */
  --fire: #f03e3e;
  --fire-d: #b02525;
  --sky-top: #bfe6ff;
  --sky-bottom: #eaf7ff;
  --font: 'Fredoka', ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 12px 34px rgba(61, 44, 85, 0.22);
  --edge: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%) fixed;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
}

#scene { position: fixed; inset: 0; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

button, a.btn { font-family: inherit; color: inherit; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(77, 171, 247, 0.7); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- chunky buttons (shared brand style) ---------- */

.btn {
  --b: #fff;
  --bd: var(--line-d);
  --fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 18px;
  font-size: 21px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%), var(--b);
  box-shadow: 0 6px 0 var(--bd), 0 12px 18px rgba(61, 44, 85, 0.16);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--bd), 0 4px 8px rgba(61, 44, 85, 0.16); }
.btn .ico { font-size: 0.95em; }
.btn-green { --b: var(--green); --bd: var(--green-d); --fg: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.btn-blue { --b: var(--blue); --bd: var(--blue-d); --fg: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.btn-red { --b: var(--red); --bd: var(--red-d); --fg: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.btn-yellow { --b: var(--yellow); --bd: var(--yellow-d); --fg: #5a3d00; }
.btn-soft { --b: #fff; --bd: var(--line-d); --fg: var(--ink); }
.btn-big { min-height: 64px; font-size: 24px; border-radius: 20px; padding: 0 28px; }
.btn-huge { min-height: 72px; font-size: 29px; border-radius: 24px; box-shadow: 0 8px 0 var(--bd), 0 16px 24px rgba(61, 44, 85, 0.2); }
.btn-huge:active:not(:disabled) { transform: translateY(7px); }

.round-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  box-shadow: 0 4px 0 var(--line-d), 0 6px 14px rgba(61, 44, 85, 0.16);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s, filter 0.2s;
}
.round-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-d); }
.round-btn.off { opacity: 0.55; filter: grayscale(1); }
.round-btn.on { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-d), 0 6px 14px rgba(61, 44, 85, 0.16); }

/* ---------- screens (overlays) ---------- */

.screen { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.screen.in { opacity: 1; }
.screen.out { opacity: 0; pointer-events: none; }

/* the red and yellow chevrons from the back of a fire engine */
.chevrons {
  height: 26px;
  flex: none;
  background: repeating-linear-gradient(-45deg, var(--fire) 0 18px, var(--yellow) 18px 36px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

/* ---------- title ---------- */

.title-screen { display: flex; align-items: stretch; padding: var(--edge); }
.title-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  max-height: 100%;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateX(-30px);
  transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.title-screen.in .title-card { transform: none; }
.title-home, .title-music { position: absolute; top: 36px; z-index: 2; }
.title-home { left: 16px; }
.title-music { right: 16px; }
.title-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 26px 6px; }
.title-hero { --kid-h: 132px; position: relative; padding: 0 calc(var(--kid-h) * 0.62); min-width: 0; }
.logo { margin: 6px 0 0; text-align: center; line-height: 1; }
.logo-top { display: block; font-size: 40px; font-weight: 700; letter-spacing: 0.5px; }
.logo-top .ltr {
  display: inline-block;
  color: var(--c);
  transform: rotate(var(--tilt));
  text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff, 0 7px 0 rgba(61, 44, 85, 0.22);
  animation: letterIn 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) calc(var(--i) * 45ms + 150ms) both;
}
.logo-top .sp { display: inline-block; width: 0.3em; }
.logo-game { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; margin-top: 2px; animation: gameIn 0.7s cubic-bezier(0.2, 1.8, 0.4, 1) 0.7s both; }
.logo-fire, .logo-rescue {
  display: inline-block;
  font-size: 58px;
  font-weight: 700;
  letter-spacing: 4px;
  text-shadow: 4px 0 var(--ink), -4px 0 var(--ink), 0 4px var(--ink), 0 -4px var(--ink), 3px 3px var(--ink), -3px -3px var(--ink), 3px -3px var(--ink), -3px 3px var(--ink), 0 9px 0 var(--ink), 3px 9px 0 var(--ink), -3px 9px 0 var(--ink);
}
.logo-fire { color: #ff5a3c; transform: rotate(-3deg); }
.logo-rescue { color: var(--yellow); transform: rotate(2deg); }
.tagline { margin: 14px 0 6px; text-align: center; font-size: 17px; color: var(--ink-soft); }
.section { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 19px; }

.kid { position: absolute; bottom: -6px; width: calc(var(--kid-h) * 0.8); height: var(--kid-h); overflow: visible; animation: kidIn 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 1s both; }
.kid-eva { left: -12px; }
.kid-max { right: -12px; animation-delay: 1.15s; }
.kid-shadow { fill: rgba(61, 44, 85, 0.16); animation: kidShadow 0.9s ease-in-out infinite alternate; }
.kid-body { animation: kidBob 0.9s ease-in-out infinite alternate; }
.kid-head { animation: kidTilt 1.8s ease-in-out infinite alternate; }
.kid-eyes { animation: kidBlink 4.2s infinite; }
.kid-pony { animation: kidPony 0.9s ease-in-out infinite alternate; }
.kid-eva .kid-wave { animation: kidWaveL 0.42s ease-in-out infinite alternate; }
.kid-max .kid-wave { animation: kidWaveR 0.42s ease-in-out -0.2s infinite alternate; }
.kid-max .kid-body, .kid-max .kid-shadow { animation-delay: -0.45s; }
.kid-max .kid-head { animation-delay: -0.9s; animation-direction: alternate-reverse; }
.kid-max .kid-eyes { animation-delay: 1.6s; }
/* Family mode: the family's kids (ui/avatar.js) where Eva and Max stand; with
   3 or 4 the inner ones stand half a kid further in, behind the outer ones. */
.family { isolation: isolate; }
.family .kid { animation-delay: calc(1s + var(--k) * 0.15s); }
.summary-hero.family .kid { animation-delay: calc(0.3s + var(--k) * 0.15s); }
.title-hero.family .kid.l { left: calc(-12px + var(--j) * var(--kid-h) * 0.5); }
.title-hero.family .kid.r { right: calc(-12px + var(--j) * var(--kid-h) * 0.5); }
.summary-hero.family .kid.l { left: calc(18px + var(--j) * var(--kid-h) * 0.5); }
.summary-hero.family .kid.r { right: calc(18px + var(--j) * var(--kid-h) * 0.5); }
.title-hero.family.many { padding: 0 calc(var(--kid-h) * 1.08); }
.summary-hero.family.many { padding-left: calc(var(--kid-h) * 1.2); padding-right: calc(var(--kid-h) * 1.2); }
.family .kid.inner { z-index: -1; }
.family .kid .kid-body, .family .kid .kid-shadow { animation-delay: calc(var(--k) * -0.3s); }
.family .kid .kid-head { animation-delay: calc(var(--k) * -0.6s); }
.family .kid .kid-eyes { animation-delay: calc(var(--k) * 0.9s); }
.family .kid.l .kid-wave { animation: kidWaveL 0.42s ease-in-out calc(var(--k) * -0.1s) infinite alternate; }
.family .kid.r .kid-wave { animation: kidWaveR 0.42s ease-in-out calc(var(--k) * -0.1s) infinite alternate; }
@media (max-width: 640px) {
  /* Four kids and the wordmark must still fit a 360px phone. */
  .title-hero.family.many { --kid-h: min(66px, 15.5vw); padding: 0 calc(var(--kid-h) * 0.98); }
  .title-hero.family.many .kid.l { left: calc(-8px + var(--j) * var(--kid-h) * 0.42); }
  .title-hero.family.many .kid.r { right: calc(-8px + var(--j) * var(--kid-h) * 0.42); }
  .title-hero.family.many .logo-top { font-size: min(27px, 7vw); }
  .summary-hero.family.many { --kid-h: 70px; }
}

.mode-list { display: grid; gap: 10px; }
.mode-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 46px 10px 12px;
  border: 3px solid var(--line);
  border-radius: 20px;
  background: #fff;
  text-align: left;
  box-shadow: 0 5px 0 var(--line-d);
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.mode-card:active { transform: translateY(3px); }
.mode-card.on { border-color: var(--fire); background: #fff5f5; box-shadow: 0 5px 0 var(--fire-d); }
.mode-emoji { display: grid; place-items: center; width: 54px; height: 54px; flex: none; font-size: 32px; border-radius: 16px; background: #ffe8e8; }
.mode-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mode-text b { font-size: 20px; }
.mode-text small { font-size: 14px; color: var(--ink-soft); line-height: 1.25; }
.mode-best { font-size: 13px; font-weight: 600; color: #b08800; }
.mode-card .tick { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; color: #fff; font-weight: 700; background: var(--fire); opacity: 0; transform: scale(0.4); transition: 0.2s; }
.mode-card.on .tick { opacity: 1; transform: none; }

.how { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 16px 0 6px; font-size: 14px; color: var(--ink-soft); }
.how b { color: var(--ink); }
.title-actions { display: flex; gap: 12px; padding: 14px 22px 22px; border-top: 3px dashed var(--line); }
.title-actions .btn-huge { flex: 1; }

/* ---------- the alarm: station control panel ---------- */

.panel-screen { display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--edge); background: radial-gradient(ellipse at 70% 40%, rgba(255, 60, 40, 0) 30%, rgba(255, 40, 30, 0.18) 100%); animation: alarmGlow 0.8s ease-in-out infinite alternate; }
.console {
  width: min(430px, 100%);
  padding: 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, #5c6475, #3e4452);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 10px 0 #2b303a, var(--shadow);
  color: #fff;
  transform: translateY(40px) scale(0.9);
  transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.panel-screen.in .console { transform: none; }
.console-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.console-title { font-size: 30px; font-weight: 700; letter-spacing: 2px; color: #ffe066; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); animation: blink 0.5s steps(1) infinite; }
.beacon { position: relative; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb3b3, #ff2b2b 55%, #a51111); box-shadow: 0 0 0 4px #2b303a, 0 0 24px 6px rgba(255, 50, 50, 0.7); animation: beacon 0.5s ease-in-out infinite alternate; }
.beacon + .console-title + .beacon { animation-delay: 0.25s; }
.lcd { padding: 14px 16px; border-radius: 16px; background: #1b2b22; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5); color: #8cf5a6; font-weight: 600; }
.lcd-row { display: flex; justify-content: space-between; font-size: 14px; letter-spacing: 1.5px; opacity: 0.85; }
.lcd-blink { color: #ff8787; animation: blink 1s steps(1) infinite; }
.lcd-call { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.lcd-emoji { font-size: 52px; line-height: 1; filter: drop-shadow(0 0 8px rgba(140, 245, 166, 0.4)); animation: wobble 0.6s ease-in-out infinite alternate; }
.lcd-title { font-size: 28px; color: #fff; line-height: 1.1; }
.lcd-where { font-size: 20px; color: #c3fae8; }
.lcd-where b { color: #fff; }
.console-bottom { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'sw go' 'hint go'; align-items: center; gap: 6px 12px; margin-top: 14px; }
.console-switches { grid-area: sw; display: flex; gap: 10px; }
.sw { width: 22px; height: 34px; border-radius: 8px; background: #2b303a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1); position: relative; }
.sw::after { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 12px; border-radius: 5px; background: #868e96; }
.sw.on::after { top: auto; bottom: 4px; background: #69db7c; box-shadow: 0 0 8px #69db7c; }
.console-hint { grid-area: hint; font-size: 15px; color: #dee2e6; }
.go-btn {
  grid-area: go;
  display: grid;
  place-items: center;
  align-content: center;
  width: 128px;
  height: 128px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff8a8a, #f03e3e 55%, #c92a2a);
  box-shadow: 0 0 0 7px #2b303a, 0 0 0 11px var(--yellow), 0 10px 0 11px #a8860a, 0 18px 30px rgba(0, 0, 0, 0.4);
  animation: goPulse 0.9s ease-in-out infinite;
}
.go-btn:active { transform: translateY(6px) scale(0.97); animation: none; }
.go-text { font-size: 40px; font-weight: 700; line-height: 0.9; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.go-sub { font-size: 30px; }

/* ---------- results, summary, menu ---------- */

.result-screen, .menu-screen, .summary-screen { display: grid; place-items: center; padding: var(--edge); background: rgba(61, 44, 85, 0.18); }
.result-card, .menu-card, .summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 24px 26px;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.in > .result-card, .in > .menu-card, .in > .summary-card { transform: none; }
.result-emoji { font-size: 64px; line-height: 1; animation: wobble 0.7s ease-in-out infinite alternate; }
.result-title { margin: 8px 0 2px; font-size: 32px; }
.result-thanks { margin: 0 0 6px; font-size: 18px; color: var(--ink-soft); }
.result-stars { display: flex; gap: 6px; margin: 4px 0 10px; }
.big-star { font-size: 54px; filter: grayscale(1) opacity(0.25); transform: scale(0.6); }
.big-star.on { filter: none; animation: starPop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) var(--d) both; }
.result-time { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--line-d); font-size: 18px; font-weight: 600; }
.pill-green { background: #ebfbee; color: #2b8a3e; box-shadow: 0 3px 0 #b2f2bb; }
.pill-yellow { background: #fff9db; color: #a07800; box-shadow: 0 3px 0 #ffe066; }
.menu-card { gap: 14px; }
.menu-card h2 { margin: 0 0 4px; font-size: 30px; }
.menu-card .btn { width: 100%; }

.summary-card { padding: 0 0 24px; width: min(520px, 100%); overflow: hidden; }
.summary-card .chevrons { width: 100%; }
.summary-hero { --kid-h: 120px; position: relative; display: flex; justify-content: center; width: 100%; padding: 18px calc(var(--kid-h) * 0.7) 0; min-height: calc(var(--kid-h) + 18px); }
.summary-hero .kid { animation-delay: 0.3s; }
.summary-hero .kid-max { animation-delay: 0.45s; }
.summary-hero .kid-eva { left: 18px; }
.summary-hero .kid-max { right: 18px; }
.badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation: starPop 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) 0.2s both; }
.badge-icon { font-size: 64px; line-height: 1; }
.badge b { font-size: 18px; color: var(--fire-d); }
.summary-title { margin: 10px 0 0; font-size: 34px; }
.summary-sub { margin: 4px 24px 12px; font-size: 18px; color: var(--ink-soft); }
.summary-stats { display: flex; gap: 12px; }
.stat { display: flex; flex-direction: column; min-width: 130px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--line-d); }
.stat b { font-size: 26px; }
.stat b small { font-size: 16px; color: var(--ink-soft); }
.stat span { font-size: 14px; color: var(--ink-soft); }
.new-best { margin: 12px 0 0; font-size: 20px; font-weight: 700; color: #b08800; }
.summary-again { margin-top: 18px; }
.summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; padding: 0 18px; }

.star-off { filter: grayscale(1) opacity(0.3); }

.toast { position: absolute; top: 86px; left: 50%; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 19px; font-weight: 600; box-shadow: var(--shadow); transform: translate(-50%, -20px); opacity: 0; transition: 0.3s; white-space: nowrap; pointer-events: none; }
.toast.in { transform: translate(-50%, 0); opacity: 1; }

/* ---------- HUD ---------- */

.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.hud.on { opacity: 1; }
.hud.on > * { pointer-events: auto; }
.hud-top { position: absolute; top: var(--edge); left: var(--edge); right: var(--edge); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none !important; }
.hud-top > * { pointer-events: auto; }
.hud-left, .hud-right, .hud-mid { display: flex; align-items: center; gap: 8px; }
.hud-mid { flex-direction: column; gap: 6px; }
.call-card { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 0 rgba(61, 44, 85, 0.12), 0 6px 14px rgba(61, 44, 85, 0.12); min-width: 0; }
.call-emoji { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffe3e3; font-size: 24px; flex: none; }
.call-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.call-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-where { font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { min-width: 96px; padding: 4px 14px; border-radius: 14px; background: #1b2b22; color: #8cf5a6; font-size: 28px; font-weight: 700; letter-spacing: 1px; text-align: center; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 4px 0 rgba(61, 44, 85, 0.2); font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 0 rgba(61, 44, 85, 0.15); }
.dots i.done { background: var(--green); }
.dots i.now { background: var(--fire); animation: beacon 0.6s ease-in-out infinite alternate; }

.zoom-col { position: absolute; right: var(--edge); top: 50%; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.zoom-col .round-btn { width: 54px; height: 54px; font-size: 28px; }
.map-btn { font-size: 26px !important; }

.dpad { --s: 74px; position: absolute; left: var(--edge); bottom: var(--edge); display: grid; grid-template-columns: repeat(3, var(--s)); grid-template-rows: repeat(3, var(--s)); gap: 4px; }
.dir {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 22px;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%), var(--blue);
  box-shadow: 0 6px 0 var(--blue-d), 0 10px 16px rgba(61, 44, 85, 0.2);
  transition: transform 0.06s, box-shadow 0.06s, opacity 0.2s, filter 0.2s, background 0.2s;
  touch-action: none;
}
.dir span { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2)); }
.dir:active:not(:disabled), .dir.flash { transform: translateY(5px); box-shadow: 0 1px 0 var(--blue-d); }
.dir:disabled { opacity: 0.32; filter: grayscale(0.8); cursor: default; }
.dir.ready { animation: readyPulse 1s ease-in-out infinite alternate; }
.dir.hint { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), var(--yellow); box-shadow: 0 6px 0 var(--yellow-d), 0 0 0 5px rgba(255, 212, 59, 0.5), 0 10px 22px rgba(255, 170, 0, 0.5); color: #5a3d00; animation: hintBounce 0.6s ease-in-out infinite alternate; }
.dir.queued { box-shadow: 0 6px 0 var(--blue-d), 0 0 0 5px #fff, 0 0 0 9px var(--green); }
.dir-up { grid-area: 1 / 2; }
.dir-left { grid-area: 2 / 1; }
.dir-right { grid-area: 2 / 3; }
.dir-down { grid-area: 3 / 2; }
.dpad-hub { grid-area: 2 / 2; display: grid; place-items: center; margin: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); font-size: 30px; box-shadow: inset 0 -3px 0 rgba(61, 44, 85, 0.12); pointer-events: none; }

.drive-col { position: absolute; right: var(--edge); bottom: var(--edge); display: flex; gap: 12px; align-items: flex-end; }
.drive-btn {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--line-d), 0 10px 18px rgba(61, 44, 85, 0.18);
  transition: transform 0.06s, box-shadow 0.06s, background 0.2s;
  touch-action: none;
}
.drive-btn .big { font-size: 40px; line-height: 1.05; }
.drive-btn .lbl { font-size: 16px; font-weight: 700; }
.drive-btn:active, .drive-btn.down { transform: translateY(5px); box-shadow: 0 1px 0 var(--line-d); }
.siren-btn.on { background: #e7f5ff; box-shadow: 0 6px 0 var(--blue-d), 0 0 0 4px var(--blue), 0 0 26px rgba(77, 171, 247, 0.8); animation: sirenGlow 0.5s steps(1) infinite; }
.horn-btn.down { background: var(--yellow); }

.action-btn {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) + 6px);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 0 34px 0 24px;
  border: 0;
  border-radius: 30px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), var(--blue);
  box-shadow: 0 8px 0 var(--blue-d), 0 16px 26px rgba(61, 44, 85, 0.25);
  transform: translate(-50%, 160%);
  transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.06s;
  touch-action: none;
  overflow: hidden;
}
.action-btn.on { transform: translate(-50%, 0); animation: actPulse 0.8s ease-in-out 0.5s infinite alternate; }
.action-btn.down { transform: translate(-50%, 6px); box-shadow: 0 2px 0 var(--blue-d); animation: none; }
.action-btn.busy { filter: saturate(0.6); animation: none; }
.action-btn[data-kind='ladder'] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), var(--fire); box-shadow: 0 8px 0 var(--fire-d), 0 16px 26px rgba(61, 44, 85, 0.25); }
.action-btn[data-kind='fix'] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), var(--orange); box-shadow: 0 8px 0 #d9822b, 0 16px 26px rgba(61, 44, 85, 0.25); }
.act-icon { font-size: 44px; }
.act-pips { display: flex; gap: 6px; }
.act-pips i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.act-pips i.done { background: #fff; }
.act-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(0, 0, 0, 0.15); }
.act-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.1s linear; }
.hud.rescuing .dpad, .hud.rescuing .drive-col { opacity: 0; pointer-events: none; transform: translateY(30px); }
.dpad, .drive-col { transition: opacity 0.3s, transform 0.3s; }

.call-pointer { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--fire), 0 8px 16px rgba(61, 44, 85, 0.25); opacity: 0; transition: opacity 0.2s; pointer-events: none !important; }
.call-pointer.on { opacity: 1; pointer-events: auto !important; animation: none; }
.cp-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; }
.cp-arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.cp-arrow i { position: absolute; left: 30px; top: -15px; font-size: 24px; font-style: normal; line-height: 30px; color: var(--fire); text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.prompt { position: absolute; left: 50%; top: 92px; padding: 10px 22px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 var(--line-d), var(--shadow); font-size: 21px; font-weight: 600; transform: translate(-50%, -12px); opacity: 0; transition: 0.25s; white-space: nowrap; pointer-events: none !important; }
.prompt.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- small screens ---------- */

@media (max-width: 760px), (orientation: portrait) {
  .title-screen { padding: 10px; align-items: flex-end; }
  .title-card { width: 100%; max-height: min(100%, 760px); transform: translateY(40px); }
  .panel-screen { justify-content: center; padding: 10px; }
}

@media (max-width: 640px) {
  :root { --edge: 10px; }
  .title-scroll { padding: 10px 16px 4px; }
  .title-hero { --kid-h: min(96px, 21vw); }
  .logo-top { font-size: min(32px, 7.4vw); }
  .logo-fire, .logo-rescue { font-size: min(44px, 10.4vw); letter-spacing: 2px; }
  .title-home, .title-music { top: 32px; width: 42px; height: 42px; font-size: 19px; }
  .title-home { left: 8px; }
  .title-music { right: 8px; }
  .tagline { font-size: 15px; margin-top: 10px; }
  .mode-card { padding: 8px 40px 8px 10px; }
  .mode-emoji { width: 46px; height: 46px; font-size: 27px; }
  .mode-text b { font-size: 18px; }
  .mode-text small { font-size: 13px; }
  .how { display: none; }
  .title-actions { padding: 12px 14px 14px; gap: 8px; }
  .title-actions .new-town { padding: 0 18px; font-size: 24px; }
  .new-town .lbl { display: none; }
  .btn-huge { min-height: 62px; font-size: 23px; }
  .hud-right .toggle:nth-child(3) { display: none; }
  .round-btn { width: 44px; height: 44px; font-size: 20px; }
  .call-card { height: 46px; padding-right: 12px; }
  .call-emoji { width: 34px; height: 34px; font-size: 20px; }
  .call-title { font-size: 15px; }
  .call-where { font-size: 12px; }
  .timer { min-width: 74px; font-size: 22px; padding: 3px 10px; }
  .dpad { --s: 62px; }
  .dir { font-size: 30px; border-radius: 18px; }
  .drive-btn { width: 74px; height: 74px; border-radius: 22px; }
  .drive-btn .big { font-size: 32px; }
  .drive-btn .lbl { font-size: 14px; }
  .drive-col { flex-direction: column; gap: 10px; }
  .zoom-col { top: auto; bottom: calc(var(--edge) + 182px); transform: none; }
  .zoom-col .round-btn { width: 46px; height: 46px; font-size: 24px; }
  .action-btn { font-size: 24px; min-height: 76px; padding: 0 24px 0 18px; }
  .act-icon { font-size: 36px; }
  .go-btn { width: 108px; height: 108px; }
  .lcd-title { font-size: 23px; }
  .lcd-emoji { font-size: 44px; }
  .console-title { font-size: 24px; }
  .summary-hero { --kid-h: 92px; }
  .result-title { font-size: 27px; }
}

/* phones in portrait: the call card gets its own row under the top bar */
@media (max-width: 520px) {
  .hud-top { flex-wrap: wrap; }
  .hud-left { order: 1; }
  .hud-right { order: 2; }
  .hud-mid { order: 3; flex: 1 0 100%; flex-direction: row; justify-content: center; }
  .call-card { position: absolute; left: 54px; right: 104px; top: 0; }
  .prompt { top: 116px; font-size: 18px; padding: 8px 16px; }
  .toast { top: 116px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .dpad { --s: 56px; }
  .dir { font-size: 26px; border-radius: 16px; }
  .drive-btn { width: 68px; height: 68px; border-radius: 20px; }
  .drive-btn .big { font-size: 28px; }
  .drive-btn .lbl { font-size: 13px; }
  .zoom-col .round-btn { width: 44px; height: 44px; font-size: 22px; }
  .title-hero { --kid-h: 92px; }
  .logo-top { font-size: 30px; }
  .logo-fire, .logo-rescue { font-size: 42px; }
  .how { display: none; }
  .console { padding: 12px; }
  .go-btn { width: 100px; height: 100px; }
  .lcd-emoji { font-size: 40px; }
}

/* ---------- animations ---------- */

@keyframes letterIn { from { opacity: 0; transform: translateY(-30px) rotate(var(--tilt)) scale(0.4); } to { opacity: 1; transform: rotate(var(--tilt)); } }
@keyframes gameIn { from { opacity: 0; transform: scale(0.3) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes kidIn { from { opacity: 0; transform: translateY(40px) scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes kidBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes kidShadow { from { transform: scale(1); } to { transform: scale(0.86); } }
@keyframes kidTilt { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes kidWaveL { from { transform: rotate(-18deg); } to { transform: rotate(-46deg); } }
@keyframes kidWaveR { from { transform: rotate(18deg); } to { transform: rotate(46deg); } }
@keyframes kidPony { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes kidBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes beacon { from { filter: brightness(0.75); } to { filter: brightness(1.35); } }
@keyframes alarmGlow { from { background-color: rgba(255, 40, 30, 0); } to { background-color: rgba(255, 40, 30, 0.1); } }
@keyframes wobble { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.06); } }
@keyframes goPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes readyPulse { from { filter: brightness(1); } to { filter: brightness(1.15); } }
@keyframes hintBounce { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes sirenGlow { 50% { box-shadow: 0 6px 0 var(--red-d), 0 0 0 4px var(--red), 0 0 26px rgba(255, 107, 107, 0.8); } }
@keyframes actPulse { from { filter: brightness(1); } to { filter: brightness(1.12); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}