/* Animal Sounds Farm (Newel Labs Play). Self-contained: no shared stylesheet, system fonts only, no inline styles. */
:root {
  color-scheme: light dark;
  --bg: #f3f6ef;
  --card: #fdfdfa;
  --card-edge: #dfe5d6;
  --ink: #1d2a22;
  --ink-2: #3b4a40;
  --muted: #5a685e;
  --line: #dde4d4;
  --accent: #2c6a46;
  --accent-hi: #357d54;
  --on-accent: #ffffff;
  --focus: #9a6c1c;
  --shadow: 0 1px 2px rgba(29, 42, 34, 0.06), 0 14px 34px -18px rgba(29, 42, 34, 0.35);
  /* farm */
  --sky-top: #b9e0f2;
  --sky-low: #e4f4f6;
  --grass-hi: #8fd070;
  --grass-lo: #76bd5d;
  --hill-far: #a9da8c;
  --hill-near: #93cf74;
  --sun: #ffd45c;
  --cloud: #ffffff;
  --barn: #d9574a;
  --barn-roof: #8e3c34;
  --barn-trim: #fff5e6;
  --barn-door: #b9463b;
  --fence: #edd6ad;
  --fence-post: #cfae7b;
  --hay: #f1cf6a;
  --hay-line: #d4a83a;
  --leaf: #5fae4f;
  --trunk: #8a5a3a;
  --apple: #e2463f;
  --pond: #6cc3e0;
  --pond-rim: #a4d7a0;
  --pond-glint: #d6f2fb;
  --reed: #4f8f3a;
  --cattail: #8a5a3a;
  --petal-1: #f59ab0;
  --petal-2: #ffd45c;
  --petal-3: #9ec5ff;
  --hud-bg: rgba(255, 255, 255, 0.86);
  --hud-ink: #1d2a22;
  --outline: #3b302c;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1612;
    --card: #17211b;
    --card-edge: #26352b;
    --ink: #e7efe9;
    --ink-2: #c3cfc6;
    --muted: #98a79c;
    --line: #26342b;
    --accent: #8fd3a8;
    --accent-hi: #a7e2bc;
    --on-accent: #0d1f15;
    --focus: #e3b863;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.75);
    --sky-top: #16213a;
    --sky-low: #2d3f63;
    --grass-hi: #3b6e45;
    --grass-lo: #305c3a;
    --hill-far: #2b4f3c;
    --hill-near: #34613f;
    --sun: #f3ead0;
    --cloud: #42557a;
    --barn: #a8473e;
    --barn-roof: #642a25;
    --barn-trim: #dcd0bd;
    --barn-door: #8e3a33;
    --fence: #9c8a6b;
    --fence-post: #7f6d50;
    --hay: #b39a4c;
    --hay-line: #8e7735;
    --leaf: #2f6e40;
    --trunk: #5f4232;
    --apple: #b8443d;
    --pond: #2e6382;
    --pond-rim: #3b6b48;
    --pond-glint: #5f93b3;
    --reed: #3a6d34;
    --cattail: #6d4a33;
    --petal-1: #c77a8e;
    --petal-2: #c9a948;
    --petal-3: #7c9ed0;
    --hud-bg: rgba(22, 33, 58, 0.86);
    --hud-ink: #eef3ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
a { color: var(--accent); text-underline-offset: 3px; -webkit-touch-callout: none; }
a:hover { color: var(--accent-hi); }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 16px; }

/* Header + intro */
.top { padding-top: 10px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }
.crumb span[aria-hidden] { opacity: 0.6; font-weight: 400; }
.crumb-mark { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.intro { padding: 2px 16px 14px; }
h1 { margin: 0 0 8px; line-height: 1.05; }
.h1-name { display: block; font: 600 clamp(2rem, 6vw, 3rem)/1.04 var(--serif); letter-spacing: -0.02em; }
.h1-sub { display: block; margin-top: 6px; font: 500 clamp(1rem, 2.4vw, 1.2rem)/1.3 var(--font); color: var(--accent); }
.lede { margin: 0; max-width: 660px; color: var(--ink-2); }
.lede-short { display: none; }
@media (max-width: 599px) { .lede-long { display: none; } .lede-short { display: inline; } }
/* No text selection next to the farm: on a phone a long press on text opens the system menu (Look Up, Search Web,
   Share), which is a way off the page. The notes for parents stay selectable with a mouse; on touch screens they
   are sealed too, because a child can scroll down to them. */
.top, .intro { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse), (hover: none) {
  .parents { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* ------------------------------------------------------------------ stage */
.stage {
  --hz: 34%;            /* horizon, as a share of the stage height */
  --as: 120px;          /* animal base size; farm-app.js sets it from the panel size */
  --pw: 100%;           /* panel width; farm-app.js sets it */
  position: relative;
  width: calc(100% - 32px); max-width: 1088px;
  height: clamp(300px, calc(100vh - 200px), 760px);
  height: clamp(300px, calc(100svh - 200px), 760px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--grass-lo);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;  /* before Play, a swipe on the farm scrolls the page; play mode allows only sideways */
}
/* Pinch zoom. While the farm is on, two fingers must not zoom it: zoomed in, the lock is off the screen and a child
   cannot get back. So the page as a whole, the stage and the scene give up pinch while playing, and the dialogs,
   which sit above the stage in the browser's top layer, carry their own rule (see .sheet). If the page is zoomed
   anyway (it was zoomed before Play, or the browser zoomed it in a way no page can stop), farm-app.js sets
   html.zoomed and every one of these rules steps aside, so a pinch on the farm itself always brings it back. */
html.playing:not(.zoomed), html.playing:not(.zoomed) body { touch-action: pan-x pan-y; }
html.playing:not(.zoomed) .stage { touch-action: pan-x; }
html.zoomed .stage, html.zoomed .scene, html.zoomed .start, html.zoomed .animal { touch-action: auto; }
@media (min-width: 720px) { .stage { width: calc(100% - 56px); } }
@media (max-height: 500px) and (orientation: landscape) {
  .top { padding-top: 2px; }
  .crumb { min-height: 40px; }
  .intro { padding-bottom: 8px; }
  .h1-name { display: inline; font-size: 1.6rem; }
  .h1-sub { display: inline; margin-left: 8px; font-size: 0.95rem; }
  .lede { display: none; }
  .stage { height: max(280px, calc(100vh - 100px)); height: max(280px, calc(100svh - 100px)); }
}
html.playing, html.playing body { overflow: hidden; overscroll-behavior: none; height: 100%; }
html.playing .stage {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
  width: auto; max-width: none; height: auto; margin: 0;
  border-radius: 0; box-shadow: none;
}

.scene {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
html.playing:not(.zoomed) .scene { touch-action: pan-x; }
.scene::-webkit-scrollbar { display: none; }
.strip {
  position: relative; display: flex; height: 100%; width: max-content; min-width: 100%;
  background:
    linear-gradient(to bottom, var(--sky-top), var(--sky-low) var(--hz), var(--grass-hi) var(--hz), var(--grass-lo));
}
@media (prefers-color-scheme: dark) {
  .strip {
    background:
      radial-gradient(1.5px 1.5px at 12% 8%, #fff8 60%, transparent 70%),
      radial-gradient(1.5px 1.5px at 31% 16%, #fff7 60%, transparent 70%),
      radial-gradient(2px 2px at 47% 6%, #fff9 60%, transparent 70%),
      radial-gradient(1.5px 1.5px at 63% 19%, #fff6 60%, transparent 70%),
      radial-gradient(2px 2px at 78% 10%, #fff8 60%, transparent 70%),
      radial-gradient(1.5px 1.5px at 92% 22%, #fff6 60%, transparent 70%),
      linear-gradient(to bottom, var(--sky-top), var(--sky-low) var(--hz), var(--grass-hi) var(--hz), var(--grass-lo));
  }
}
.hills { position: absolute; left: 0; width: 100%; top: calc(var(--hz) - 10%); height: 12%; pointer-events: none; }
.hill-far { fill: var(--hill-far); }
.hill-near { fill: var(--hill-near); }
.panel { position: relative; flex: none; width: var(--pw); height: 100%; scroll-snap-align: start; }

/* props */
.prop { position: absolute; pointer-events: none; overflow: visible; }
.sun { width: calc(var(--as) * 0.62); height: calc(var(--as) * 0.62); right: 7%; top: 5%; }
.sun-disc { fill: var(--sun); }
.sun-rays { stroke: var(--sun); stroke-width: 6; stroke-linecap: round; fill: none; }
.moon-cut { fill: var(--sky-top); opacity: 0; }
@media (prefers-color-scheme: dark) { .sun-rays { opacity: 0; } .moon-cut { opacity: 1; } }
.cloud { width: calc(var(--as) * 0.9); height: calc(var(--as) * 0.375); fill: var(--cloud); opacity: 0.95; }
.c1 { left: 6%; top: 7%; }
.c2 { left: 38%; top: 12%; width: calc(var(--as) * 0.75); }
.c3 { right: 10%; top: 6%; }
.barn { width: calc(var(--as) * 1.45); height: calc(var(--as) * 1.12); left: 3%; bottom: calc(100% - var(--hz) - 3%); }
.barn-roof { fill: var(--barn-roof); }
.barn-wall { fill: var(--barn); }
.barn-trim { fill: none; stroke: var(--barn-trim); stroke-width: 6; stroke-linejoin: round; }
.barn-loft { fill: var(--barn-door); stroke: var(--barn-trim); stroke-width: 4; }
.barn-loft-x, .barn-door-x { fill: none; stroke: var(--barn-trim); stroke-width: 4; }
.barn-door { fill: var(--barn-door); stroke: var(--barn-trim); stroke-width: 5; }
.fence { height: calc(var(--as) * 0.3); }
.fence-rail { stroke: var(--fence); stroke-width: 7; fill: none; }
.fence-post { stroke: var(--fence-post); stroke-width: 9; stroke-linecap: round; fill: none; }
.f-barn { width: 46%; left: 54%; bottom: calc(100% - var(--hz) - 2%); }
.f-field { width: 100%; left: 0; bottom: calc(100% - var(--hz) - 2%); }
.hay { width: calc(var(--as) * 0.5); height: calc(var(--as) * 0.35); left: 2%; bottom: calc(100% - var(--hz) - 6%); }
.hay-bale { fill: var(--hay); }
.hay-line { stroke: var(--hay-line); stroke-width: 3; stroke-linecap: round; fill: none; }
.tree { width: calc(var(--as) * 0.95); height: calc(var(--as) * 1.27); }
.t-pond { left: 40%; bottom: calc(100% - var(--hz) - 2%); }
.t-field { left: 4%; bottom: calc(100% - var(--hz) - 3%); z-index: 1; }
.trunk { fill: var(--trunk); }
.leaf { fill: var(--leaf); }
.apple { fill: var(--apple); }
.pond { left: 2%; width: 96%; top: 60%; height: 34%; }
.pond-rim { fill: var(--pond-rim); }
.pond-water { fill: var(--pond); }
.pond-glint { stroke: var(--pond-glint); stroke-width: 4; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
.reeds { width: calc(var(--as) * 0.4); height: calc(var(--as) * 0.6); left: 1%; top: 54%; }
.reed { stroke: var(--reed); stroke-width: 4; stroke-linecap: round; fill: none; }
.cattail { fill: var(--cattail); }
.flowers { width: calc(var(--as) * 0.7); height: calc(var(--as) * 0.28); right: 4%; bottom: 3%; }
.stem { stroke: var(--reed); stroke-width: 3; fill: none; }
.p1 { fill: var(--petal-1); } .p2 { fill: var(--petal-2); } .p3 { fill: var(--petal-3); }
.bud { fill: #fff3c4; }

/* ---------------------------------------------------------------- animals */
.animal {
  --s: 1;
  position: absolute; z-index: 2;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--as) * var(--s)); height: calc(var(--as) * var(--s));
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%);
  border-radius: 28%;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}
.animal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.animal:focus-visible { outline: 4px solid var(--focus); outline-offset: -4px; }
.shadow { fill: #000; opacity: 0.13; }
.o { stroke: var(--outline); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.m-open { display: none; }
.sing .m-open, .cheer .m-open, .prompt-art .m-open { display: inline; }
.sing .m-shut, .cheer .m-shut { display: none; }
.prompt-art .m-open { display: none; }

/* where each animal stands: x and y are the centre, as % of its panel; s scales its box */
[data-animal="rooster"] { --x: 62; --y: 25; --s: 0.84; }
[data-animal="cat"]     { --x: 27; --y: 50; --s: 0.86; }
[data-animal="pig"]     { --x: 70; --y: 63; --s: 1.02; }
[data-animal="chicken"] { --x: 30; --y: 81; --s: 0.82; }
[data-animal="cow"]     { --x: 29; --y: 46; --s: 1.1; }
[data-animal="dog"]     { --x: 74; --y: 51; --s: 0.9; }
[data-animal="duck"]    { --x: 31; --y: 76; --s: 0.8; }
[data-animal="frog"]    { --x: 72; --y: 81; --s: 0.78; }
[data-animal="horse"]   { --x: 71; --y: 44; --s: 1.1; }
[data-animal="sheep"]   { --x: 28; --y: 56; --s: 0.98; }
[data-animal="donkey"]  { --x: 70; --y: 72; --s: 1.04; }
[data-animal="goat"]    { --x: 30; --y: 84; --s: 0.86; }
/* Short phones held sideways, where the animals are at their smallest allowed size (farm-core.js MIN_ANIMAL): the
   horse and donkey stand a little further apart so their boxes don't overlap, and on the narrowest screens the
   rooster moves along the fence, clear of the Find picture in the corner. */
@media (max-height: 330px) and (orientation: landscape) {
  [data-animal="horse"]  { --y: 40; }
  [data-animal="donkey"] { --y: 74; }
}
@media (max-height: 500px) and (max-width: 620px) and (orientation: landscape) {
  [data-animal="rooster"] { --x: 72; }
}
/* drawn facing right; these four face back towards the middle of their panel */
[data-animal="rooster"] svg, [data-animal="pig"] svg, [data-animal="horse"] svg, [data-animal="donkey"] svg { transform: scaleX(-1); }

/* motion: idle breathing and blinking, a hop when tapped. All slow (well under 3 flashes a second, no flashing at all). */
.art { transform-box: fill-box; transform-origin: 50% 100%; }
.eye { transform-box: fill-box; transform-origin: 50% 50%; }
.tail, .ear, .pouch { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .art { animation: breathe 3.8s ease-in-out infinite alternate; }
  .animal:nth-of-type(2n) .art { animation-duration: 4.4s; animation-delay: -1.3s; }
  .animal:nth-of-type(3n) .art { animation-duration: 3.4s; animation-delay: -2.1s; }
  .eye { animation: blink 6s infinite; }
  .animal:nth-of-type(2n) .eye { animation-delay: -2.5s; animation-duration: 7s; }
  .animal:nth-of-type(3n) .eye { animation-delay: -4s; }
  .sing .art { animation: hop 0.62s cubic-bezier(.3, .7, .4, 1) 2; }
  .cheer .art { animation: cheer 0.9s cubic-bezier(.3, .7, .4, 1) 2; }
  .sing .tail, .cheer .tail { transform-origin: 0% 50%; animation: wag 0.3s ease-in-out 4 alternate; }
  .sing .pouch { transform-origin: 50% 50%; animation: puff 0.32s ease-in-out 4 alternate; }
  .cloud { animation: drift 26s ease-in-out infinite alternate; }
  .c2 { animation-duration: 32s; animation-delay: -9s; }
}
@media (prefers-reduced-motion: reduce) {
  .sing svg, .cheer svg { filter: drop-shadow(0 0 10px rgba(255, 236, 150, 0.95)); }
}
@keyframes breathe { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.025); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.12); } }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.06, 0.92); }
  45% { transform: translateY(-9%) scale(0.97, 1.05); }
  75% { transform: translateY(0) scale(1.04, 0.96); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes cheer {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-14%) rotate(-5deg); }
  60% { transform: translateY(-14%) rotate(5deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes wag { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes puff { from { transform: scale(0.85); } to { transform: scale(1.15); } }
@keyframes drift { from { transform: translateX(-12px); } to { transform: translateX(14px); } }

/* -------------------------------------------------------------------- HUD */
.hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.prompt {
  position: relative; flex: none;
  width: clamp(84px, 21vmin, 128px); height: clamp(84px, 21vmin, 128px);
  border: 4px solid #fff; border-radius: 50%; padding: 6px;
  background: var(--hud-bg); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
.prompt[hidden] { display: none; }
.prompt-art, .prompt-art svg { display: block; width: 100%; height: 100%; }
.prompt-art svg { overflow: visible; }
.prompt-q {
  position: absolute; right: -6px; bottom: -6px;
  width: 38%; height: 38%; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 clamp(18px, 5vmin, 30px)/1 var(--round);
  background: #ffd45c; color: #3b302c; border: 3px solid #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .prompt.new { animation: pop-in 0.5s cubic-bezier(.3, 1.4, .5, 1); }
  .prompt-q { animation: nudge 2.4s ease-in-out infinite; }
}
@keyframes pop-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(0.96); } }
.name {
  position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top));
  margin: 0; padding: 6px 22px 8px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--hud-bg); color: var(--hud-ink);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%); opacity: 0; transition: opacity 0.25s;
  pointer-events: none; white-space: nowrap;
  max-width: calc(100% - 2 * clamp(96px, 23vmin, 140px));
}
.name.show { opacity: 1; }
.find .name { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
.name-word { font: 800 clamp(28px, 8vmin, 60px)/1.05 var(--round); letter-spacing: 0.01em; }
.name-sound { font: 700 clamp(15px, 3.6vmin, 24px)/1.2 var(--round); opacity: 0.75; }
.no-names .name { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .name.show { animation: rise 0.35s cubic-bezier(.3, 1.3, .5, 1); }
}
@keyframes rise { from { transform: translate(-50%, 10px) scale(0.9); } to { transform: translate(-50%, 0) scale(1); } }
.lock {
  flex: none; margin-left: auto;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--hud-bg); color: var(--hud-ink); opacity: 0.55;
  cursor: pointer; touch-action: manipulation;
}
.lock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lock:hover, .lock:focus-visible { opacity: 1; }
.stage:not(.is-playing) .lock { display: none; }

.nav {
  position: absolute; z-index: 4; top: calc(var(--hz) * 0.62);
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; padding: 0;
  display: grid; place-items: center;
  background: var(--hud-bg); color: var(--hud-ink);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer; touch-action: manipulation;
}
.nav[hidden] { display: none; }
.nav svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { left: max(8px, env(safe-area-inset-left)); }
.nav-next { right: max(8px, env(safe-area-inset-right)); }
.stage:not(.is-playing) .nav { display: none; }

/* sparkles and stars */
.fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--c, #ffd45c);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}
.ring { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.9); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: spark 0.9s ease-out forwards; }
  .spark.big { width: 30px; height: 30px; margin: -15px 0 0 -15px; animation-duration: 1.2s; }
  .ring { animation: ring 0.6s ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .spark { animation: fade 0.9s ease-out forwards; transform: translate(var(--dx), var(--dy)); }
  .ring { animation: fade 0.5s ease-out forwards; }
}
@keyframes spark {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(140deg); }
}
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fade { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ start card */
.start {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; touch-action: pan-x pan-y;
  display: grid; place-items: center; padding: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08));
}
.stage.is-playing .start { display: none; }
.start-card {
  display: grid; gap: 12px; width: min(340px, 100%);
  padding: 18px; border-radius: 24px;
  background: var(--hud-bg); color: var(--hud-ink);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.go {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 800 1.35rem/1 var(--round);
  touch-action: manipulation;
}
.go svg { width: 28px; height: 28px; flex: none; }
.go-play { background: var(--accent); color: var(--on-accent); }
.go-play svg { fill: currentColor; }
.go-find { background: #ffd45c; color: #3b302c; font-size: 1.15rem; }
.go-find svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.start-note { margin: 0; text-align: center; font-size: 0.9rem; color: var(--hud-ink); opacity: 0.8; }
@media (max-height: 500px) and (orientation: landscape) {
  .start-card { grid-template-columns: 1fr 1fr; width: min(520px, 100%); padding: 14px; }
  .go { font-size: 1.15rem; }   /* still 64 px tall: a child's target */
  .start-note { grid-column: 1 / -1; }
}
.nojs { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 9; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--card); color: var(--ink); }

/* ------------------------------------------------------------- dialogs */
.sheet {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: 24px; padding: 22px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y;   /* the menu scrolls on short screens; no pinch zoom on a dialog (see "Pinch zoom" above) */
}
.sheet::backdrop { background: rgba(12, 20, 16, 0.5); touch-action: none; }
html.zoomed .sheet, html.zoomed .sheet::backdrop { touch-action: auto; }
/* A dialog dims the whole screen, so it never appears or vanishes at once: it fades in and out (with reduced motion
   too: a fade is not movement). farm-app.js also lets the gate open at most once every 1.5 s, so no tapping or held
   key can make the screen flicker. `.swap` is one dialog taking over from another: the dimming stays as it is. */
.sheet[open] { animation: sheet-in 0.28s ease-out both; }
.sheet[open]::backdrop { animation: sheet-in 0.28s ease-out both; }
.sheet.closing { animation: sheet-out 0.24s ease-in both; }
.sheet.closing::backdrop { animation: sheet-out 0.24s ease-in both; }
.sheet.swap[open], .sheet.swap[open]::backdrop { animation: none; }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-out { from { opacity: 1; } to { opacity: 0; } }
.sheet h2 { margin: 0 0 6px; font: 700 1.4rem/1.2 var(--font); }

/* The gate. The round hold button sits in one of the four corners (data-corner, picked afresh each time):
   0 top left, 1 top right, 2 bottom left, 3 bottom right. The safe button fills the rest of that row. */
.gate[open] { display: flex; flex-direction: column; }
.gate-why { margin: 0 0 8px; color: var(--ink-2); }
.gate-tip { margin: 0; font-size: 0.88rem; color: var(--muted); min-height: 4.8em; }   /* farm-app.js sets the exact height of its longest text */
.gate-tip.warn { color: var(--ink); font-weight: 600; }
.gate-pad { display: flex; align-items: center; gap: 22px; }
.gate[data-corner="0"] .gate-pad, .gate[data-corner="1"] .gate-pad { order: -1; margin-bottom: 16px; }
.gate[data-corner="2"] .gate-pad, .gate[data-corner="3"] .gate-pad { margin-top: 14px; }
.gate[data-corner="1"] .gate-pad, .gate[data-corner="3"] .gate-pad { flex-direction: row-reverse; }
.hold {
  position: relative; flex: none; padding: 0; border-radius: 50%;
  width: clamp(60px, 20vmin, 76px); height: clamp(60px, 20vmin, 76px);   /* never more than 3% of the screen */
  border: 0; background: transparent; color: var(--accent); cursor: pointer;
  display: grid; place-items: center;
  font: 700 clamp(0.95rem, 4.6vmin, 1.05rem)/1 var(--font);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.hold > * { pointer-events: none; }
/* the ring: a faint track, and an arc that grows clockwise with the hold (--p goes 0..1) */
.hold-ring, .hold-ring::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; }
.hold-ring { border: 8px solid var(--line); border-color: color-mix(in srgb, var(--accent) 24%, var(--card)); }
.hold-ring::after {
  content: ""; top: -8px; right: -8px; bottom: -8px; left: -8px;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.hold-label { position: relative; }
.hold.holding { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hold.refused .hold-ring { border-color: var(--focus); }
@media (prefers-reduced-motion: no-preference) { .hold.refused { animation: refuse 0.36s ease-in-out; } }
@keyframes refuse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
.btn-quiet { display: block; width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 600; }
.gate-pad .btn-quiet { flex: 1; width: auto; min-height: 60px; }

/* A phone held sideways: the gate's text on one side and its two buttons on the other, so it fits a 280 px tall
   screen without scrolling. The corners still work: the button column is left or right, the round button top or bottom. */
@media (max-height: 500px) and (orientation: landscape) {
  .gate { width: min(620px, calc(100vw - 32px)); padding: 16px 22px; }
  .gate[open] { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 22px; align-items: start; }
  .gate[data-corner="0"][open], .gate[data-corner="2"][open] { grid-template-columns: 168px minmax(0, 1fr); }
  .gate h2, .gate .gate-why, .gate .gate-tip { grid-column: 1; }
  .gate[data-corner="0"] h2, .gate[data-corner="0"] .gate-why, .gate[data-corner="0"] .gate-tip,
  .gate[data-corner="2"] h2, .gate[data-corner="2"] .gate-why, .gate[data-corner="2"] .gate-tip { grid-column: 2; }
  .gate .gate-tip { min-height: 0; }
  .gate[data-corner] .gate-pad { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; order: 0; margin: 0; flex-direction: column; justify-content: space-between; gap: 12px; }
  .gate[data-corner="0"] .gate-pad, .gate[data-corner="2"] .gate-pad { grid-column: 1; }
  .gate[data-corner="2"] .gate-pad, .gate[data-corner="3"] .gate-pad { flex-direction: column-reverse; }
  .gate[data-corner] .gate-pad .btn-quiet { flex: none; width: 100%; min-height: 52px; }
}

/* "Leave the farm?": two plain buttons that look the same, in an order that changes, so it takes reading. They
   stay dimmed until nothing has touched the screen for a moment (farm-app.js), so drumming fingers can't press them. */
.leave-what { margin: 0 0 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.leave-btns { display: flex; flex-direction: column; gap: 10px; }
.leave-btns.flip { flex-direction: column-reverse; }
.leave-btns .btn { width: 100%; min-height: 56px; transition: opacity 0.2s; }
.leave.wait .leave-btns .btn { opacity: 0.45; }
.leave.done .leave-btns { display: none; }
.leave.done .leave-what { margin-bottom: 0; }

.row { margin: 0 0 16px; padding: 0; border: 0; }
.row-label { display: block; margin-bottom: 6px; font-weight: 700; padding: 0; }
.vol { display: flex; align-items: center; gap: 12px; }
.range { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
.btn-small { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 48px; padding: 6px 10px; border-radius: 14px; border: 2px solid var(--line); font-weight: 600; text-align: center; line-height: 1.2; }
.seg input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.row-check label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.row-check input { width: 22px; height: 22px; accent-color: var(--accent); }
.sound-warn { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #e2463f 14%, transparent); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.btn {
  display: grid; place-items: center; min-height: 48px; padding: 6px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  font-weight: 600; text-decoration: none; color: var(--ink); text-align: center; line-height: 1.2;
}
.btn[hidden] { display: none; }
.btn-primary { width: 100%; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.toast { min-height: 1.4em; margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); text-align: center; }
.toast:empty { min-height: 0; margin: 0; }
/* A phone held sideways: settings on the left, buttons on the right, so the whole menu fits without scrolling. */
@media (max-height: 500px) and (orientation: landscape) {
  .panel-sheet { width: min(720px, calc(100vw - 32px)); padding: 16px 22px; }
  .panel-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
  .panel-sheet .row { margin-bottom: 10px; }
  .panel-sheet .row-check { margin-bottom: 0; }
}

/* ------------------------------------------------------------ parents */
.parents { max-width: 780px; padding-top: 30px; padding-bottom: 56px; }
.parents h2 { margin: 0 0 6px; font: 600 clamp(1.6rem, 4vw, 2.1rem)/1.15 var(--serif); }
.parents h3 { margin: 26px 0 6px; font-size: 1.12rem; }
.parents p, .parents li { color: var(--ink-2); }
.parents ol { padding-left: 1.4em; }
.parents li { margin: 4px 0; }
.parents details { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.parents summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.parents details p { margin: 8px 0 2px; }
.credits { padding-left: 1.2em; font-size: 0.92rem; }
.made { margin-top: 26px; font-size: 0.92rem; color: var(--muted); }

/* small cues: the lock wiggles when a child presses Escape; an arrow glows when the animal to find is off screen */
@media (prefers-reduced-motion: no-preference) {
  .lock.nudge { animation: nudge 0.8s ease-in-out; opacity: 1; }
  .nav.hint { animation: glow 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .nav.hint { border-color: #ffd45c; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 92, 0); } 50% { box-shadow: 0 0 0 10px rgba(255, 212, 92, 0.7); } }