:root {
  --sun: #f7c94b;
  --coral: #f47764;
  --leaf: #2d8b57;
  --sky: #55b9e9;
  --ink: #4a301b;
  --cream: #fff9e9;
  --shadow: 0 10px 30px rgba(62, 42, 20, .22);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  background: #183a45;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

#app { width: 100%; height: 100%; display: grid; place-items: center; }

.book {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: #bce9ff;
  box-shadow: 0 0 60px rgba(0,0,0,.35);
  isolation: isolate;
}

.scene-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  transition: opacity .32s ease, transform .45s ease;
}

.book.is-changing .scene-image { opacity: .15; transform: scale(1.025); }

.opening-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 57%;
  padding: 4%;
  text-align: center;
}

.opening-ui h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 6.2vw, 6rem);
  line-height: .86;
  letter-spacing: -.05em;
  text-shadow: 0 .06em 0 #dd743f, 0 .11em .15em rgba(72,48,23,.25);
}

.opening-ui h1 span { color: #fff7bb; }
.opening-ui p {
  margin: 3% 0;
  padding: .35em .8em;
  border-radius: 99px;
  color: #225b49;
  background: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: clamp(1rem, 2.2vw, 2rem);
}

.play-button {
  min-width: 10em;
  min-height: 2.8em;
  border: .12em solid #fff8d7;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(#f68b69, #e85b4e);
  box-shadow: 0 .18em 0 #ae3c36, var(--shadow);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 2.1rem);
  cursor: pointer;
  transition: transform .15s ease;
}

.play-button:active { transform: translateY(.15em); box-shadow: 0 .04em 0 #ae3c36; }

.scene-ui, .quiz-ui, .final-ui { position: absolute; inset: 0; }

.topbar {
  position: absolute;
  z-index: 20;
  top: 2%; left: 2%; right: 2%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1%;
  pointer-events: none;
}

.topbar button { pointer-events: auto; }
.scene-heading { display: none; }
.scene-heading h2 {
  display: inline-block;
  margin: 0;
  padding: .22em .75em;
  border: .08em solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(55,100,76,.88);
  box-shadow: var(--shadow);
  font-size: clamp(1rem, 2.25vw, 2rem);
}

.scene-heading p {
  width: max-content;
  margin: .25em auto 0;
  padding: .2em .7em;
  border-radius: 999px;
  background: rgba(255,249,233,.9);
  font-size: clamp(.72rem, 1.25vw, 1.15rem);
  font-weight: 900;
}

.round-button, .nav-button {
  display: grid;
  place-items: center;
  border: .14em solid rgba(255,255,255,.92);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,249,233,.93);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.round-button { width: clamp(2.5rem, 5vw, 4.5rem); aspect-ratio: 1; font-size: clamp(1rem, 2vw, 1.8rem); }
.parents-button { font-size: clamp(1rem, 1.7vw, 1.6rem); }

.hotspots { position: absolute; inset: 0; z-index: 6; }

.animal-button, .sofie-reaction {
  position: absolute;
  border: 0;
  border-radius: 38%;
  background-repeat: no-repeat;
}

.layered-sprite {
  position: absolute;
  z-index: 8;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.layered-sofie { left: 18%; top: 12%; width: 30%; height: 72%; }
.layered-animal { left: 73%; top: 42%; width: 27%; height: 53%; }
.animal-button.layered-hotspot { background: transparent !important; }
.animal-button.sprite-animal {
  border-radius: 0;
  background-position: center;
  background-size: contain;
}

.animal-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  color: transparent;
  outline: none;
  touch-action: manipulation;
}

.animal-button:focus-visible {
  filter: drop-shadow(0 0 .35rem rgba(255,255,255,.8));
}

.animal-button.is-active { z-index: 10; animation: animalBounce .85s ease both; }
.animal-button[data-action="fly"].is-active { animation: animalFly 1.15s ease both; }
.animal-button[data-action="swim"].is-active { animation: animalSwim 1.15s ease both; }
.animal-button[data-action="hop"].is-active { animation: animalHop .95s ease both; }
.animal-button[data-action="trot"].is-active { animation: animalTrot 1.05s ease both; }
.animal-button[data-action="nod"].is-active { animation: animalNod 1s ease both; }
.animal-button[data-action="swing"].is-active { transform-origin: 50% 8%; animation: animalSwing 1.1s ease both; }
.animal-button[data-action="crawl"].is-active { animation: animalCrawl 1.2s ease both; }
.animal-button[data-action="paddle"].is-active { animation: animalPaddle 1.1s ease both; }
.animal-button[data-action="leap"].is-active { animation: animalLeap 1.15s ease both; }
.animal-button[data-action="roar"].is-active { animation: animalRoar 1s ease both; }
.animal-button[data-action="stretch"].is-active { animation: animalStretch 1.05s ease both; }
.animal-button[data-action="bounce"].is-active { animation: animalBounceSteps 1.05s ease both; }
.animal-button[data-action="scurry"].is-active { animation: animalScurry 1.1s ease both; }
.animal-button[data-action="buzz"].is-active { animation: animalBuzz 1.05s ease both; }
.animal-button[data-action="inch"].is-active { animation: animalInch 1.2s ease both; }
.animal-button[data-action="bob"].is-active { animation: animalBob 1.15s ease both; }
.animal-button[data-action="dart"].is-active { animation: animalDart 1.05s ease both; }
.animal-button[data-action="stomp"].is-active { animation: animalStomp 1.1s ease both; }
.animal-button[data-action="reach"].is-active { transform-origin: 50% 100%; animation: animalReach 1.1s ease both; }
.animal-button[data-action="wag"].is-active { animation: animalWag 1.05s ease both; }
.animal-button[data-action="circle"].is-active { animation: animalCircle 1.2s ease both; }
.animal-button[data-action="float"].is-active { animation: animalFloat 1.15s ease both; }
.animal-button[data-kind="hen"].is-active { animation: none; }
.animal-button.frame-animated.is-active {
  will-change: transform, background-image;
  image-rendering: auto;
}

.sofie-reaction { z-index: 5; pointer-events: none; opacity: 0; }
.sofie-reaction.is-active { opacity: 1; z-index: 9; animation: sofieReact .95s ease both; }

.word-card {
  position: absolute;
  z-index: 30;
  left: 50%; top: 18%;
  transform: translateX(-50%);
  min-width: 16%;
  padding: .5% 2%;
  border: .18em solid #fff;
  border-radius: 1.2em;
  text-align: center;
  background: rgba(255,249,233,.96);
  box-shadow: var(--shadow);
  animation: cardPop .35s ease both;
}

.word-card span { display: block; color: var(--coral); font-size: clamp(.7rem, 1.2vw, 1.1rem); font-weight: 900; }
.word-card strong { display: block; color: #276b51; font-size: clamp(1.4rem, 3.5vw, 3.4rem); line-height: 1; }

.book-nav {
  position: absolute;
  z-index: 25;
  bottom: 2%; left: 2%; right: 2%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  pointer-events: none;
}

.book-nav button { pointer-events: auto; }
.nav-button { width: clamp(2.7rem, 5vw, 5rem); aspect-ratio: 1; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; }
.page-dots { display: flex; align-items: center; justify-content: center; gap: .55em; padding-bottom: .55em; }
.page-dots i { width: clamp(.4rem,.75vw,.7rem); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.page-dots i.active { transform: scale(1.45); background: var(--sun); }

.quiz-ui { background: linear-gradient(135deg, #bceeff, #fff1ad); }
.quiz-panel {
  position: absolute;
  inset: 6% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tiny-label { font-weight: 900; color: #467866; letter-spacing: .18em; font-size: clamp(.65rem,1vw,1rem); }
.quiz-panel h2 { margin: .15em 0; font-size: clamp(1.5rem,3.2vw,3.2rem); }
.quiz-panel h2 strong { color: #d94f42; }
.listen-button { border: 0; border-radius: 999px; padding: .45em 1em; color: #fff; background: #3c8b70; font-weight: 900; cursor: pointer; }
.quiz-choices { flex: 1; width: min(82%, 62rem); display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 4%; }
.quiz-choice {
  position: relative;
  aspect-ratio: 1.15;
  border: .4em solid #fff;
  border-radius: 25%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 300% auto;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .18s;
}
.quiz-choice:hover, .quiz-choice:focus-visible { transform: translateY(-3%) scale(1.03); outline: .3em solid var(--sun); }
.quiz-choice.correct { animation: correctChoice .8s ease both; outline: .45em solid #4fc27a; }
.quiz-choice.try-again { animation: gentleNo .45s ease both; }
.quiz-feedback { margin: 0; min-height: 1.4em; font-size: clamp(1rem,1.8vw,1.7rem); font-weight: 900; color: #356b59; }
.quiz-back { position: absolute; z-index: 5; left: 2%; bottom: 2%; }

.final-ui { display: grid; place-items: center; }
.final-card {
  margin-top: -1%;
  padding: 1.5% 4% 2%;
  border: .25em solid rgba(255,255,255,.95);
  border-radius: 2em;
  text-align: center;
  background: rgba(255,249,233,.91);
  box-shadow: var(--shadow);
}
.final-card > span { color: var(--sun); font-size: clamp(2rem,4vw,4rem); }
.final-card h2 { margin: -.15em 0 0; color: #d95046; font-size: clamp(2rem,5vw,5rem); line-height: 1; }
.final-card p { margin: .35em 0 .7em; color: #356b59; font-size: clamp(1rem,1.8vw,1.8rem); font-weight: 900; }

.parents-dialog { border: 0; border-radius: 1.5rem; padding: 0; color: var(--ink); box-shadow: 0 20px 70px rgba(0,0,0,.35); }
.parents-dialog::backdrop { background: rgba(23,44,49,.65); }
.parents-dialog form { display: grid; gap: 1rem; width: min(88vw, 30rem); padding: 2rem; background: var(--cream); }
.parents-dialog h2, .parents-dialog p { margin: 0; }
.parents-dialog label { display: flex; gap: .7rem; align-items: center; min-height: 2.8rem; font-weight: 800; }
.parents-dialog input { width: 1.4rem; height: 1.4rem; }
.parent-links { display: flex; flex-wrap: wrap; gap: .65rem; }
.parent-links a { min-height: 2.7rem; display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; color: #285f50; background: #e5f3d9; font-weight: 900; text-decoration: none; }
.parent-links a:focus-visible { outline: .2rem solid var(--sun); }
.close-button { min-height: 3rem; border: 0; border-radius: 999px; color: white; background: #3c8b70; font-weight: 900; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

[hidden] { display: none !important; }

@keyframes animalBounce { 0%,100%{transform:none} 28%{transform:translateY(-10%) scale(1.08)} 55%{transform:translateY(1%) scale(.98)} 76%{transform:translateY(-4%) scale(1.03)} }
@keyframes animalHop { 0%,100%{transform:none} 35%{transform:translateY(-30%) rotate(-3deg) scale(1.05)} 68%{transform:translateY(1%) rotate(2deg)} }
@keyframes animalFly { 0%,100%{transform:none} 30%{transform:translate(20%,-20%) rotate(8deg)} 62%{transform:translate(-12%,-8%) rotate(-7deg)} }
@keyframes animalSwim { 0%,100%{transform:none} 35%{transform:translateX(18%) rotate(3deg)} 70%{transform:translateX(-10%) rotate(-3deg)} }
@keyframes animalWiggle { 0%,100%{transform:none} 20%{transform:rotate(-7deg) scale(1.04)} 40%{transform:rotate(7deg) scale(1.07)} 60%{transform:rotate(-5deg) scale(1.05)} 80%{transform:rotate(4deg)} }
@keyframes animalTrot { 0%,100%{transform:none} 18%{transform:translate(8%,-5%) rotate(2deg)} 38%{transform:translate(18%,0) rotate(-2deg)} 58%{transform:translate(10%,-5%) rotate(2deg)} 78%{transform:translate(2%,0) rotate(-1deg)} }
@keyframes animalNod { 0%,100%{transform:none} 28%{transform:rotate(7deg) translateY(3%)} 55%{transform:rotate(-2deg)} 78%{transform:rotate(6deg) translateY(2%)} }
@keyframes animalSwing { 0%,100%{transform:none} 25%{transform:rotate(10deg)} 55%{transform:rotate(-10deg)} 78%{transform:rotate(6deg)} }
@keyframes animalCrawl { 0%,100%{transform:none} 25%{transform:translateX(9%) scaleX(1.04)} 50%{transform:translateX(18%) scaleX(.96)} 75%{transform:translateX(8%) scaleX(1.03)} }
@keyframes animalPaddle { 0%,100%{transform:none} 30%{transform:translate(10%,2%) rotate(2deg)} 62%{transform:translate(18%,-2%) rotate(-2deg)} }
@keyframes animalLeap { 0%,100%{transform:none} 38%{transform:translate(17%,-28%) rotate(-8deg) scale(1.05)} 70%{transform:translate(-4%,-5%) rotate(3deg)} }
@keyframes animalRoar { 0%,100%{transform:none} 28%{transform:scale(1.08) rotate(-2deg)} 48%{transform:scale(1.12) rotate(2deg)} 72%{transform:scale(1.07)} }
@keyframes animalStretch { 0%,100%{transform:none} 35%{transform:scaleX(1.12) scaleY(.9) translateX(5%)} 70%{transform:scaleX(1.04) scaleY(1.04)} }
@keyframes animalBounceSteps { 0%,100%{transform:none} 22%{transform:translateY(-18%) rotate(-2deg)} 45%{transform:translateY(0)} 67%{transform:translateY(-12%) rotate(2deg)} }
@keyframes animalScurry { 0%,100%{transform:none} 20%{transform:translate(10%,-3%)} 45%{transform:translate(24%,1%)} 68%{transform:translate(13%,-4%)} }
@keyframes animalBuzz { 0%,100%{transform:none} 18%{transform:translate(8%,-12%) rotate(5deg)} 38%{transform:translate(18%,2%) rotate(-5deg)} 62%{transform:translate(4%,-16%) rotate(4deg)} 82%{transform:translate(-5%,-4%) rotate(-3deg)} }
@keyframes animalInch { 0%,100%{transform:none} 25%{transform:scaleX(.82) scaleY(1.12)} 52%{transform:translateX(18%) scaleX(1.12) scaleY(.9)} 76%{transform:translateX(9%) scaleX(.92) scaleY(1.06)} }
@keyframes animalBob { 0%,100%{transform:none} 30%{transform:translateY(-15%) rotate(4deg)} 62%{transform:translateY(8%) rotate(-3deg)} }
@keyframes animalDart { 0%,100%{transform:none} 28%{transform:translateX(30%) scaleX(.92)} 55%{transform:translateX(-12%) scaleX(1.08)} 78%{transform:translateX(8%)} }
@keyframes animalStomp { 0%,100%{transform:none} 24%{transform:translateY(-8%) rotate(-2deg)} 42%{transform:translateY(3%) scaleY(.96)} 62%{transform:translateY(-6%) rotate(2deg)} 80%{transform:translateY(2%) scaleY(.98)} }
@keyframes animalReach { 0%,100%{transform:none} 35%{transform:rotate(-7deg) scaleY(1.06)} 70%{transform:rotate(5deg) scaleY(1.03)} }
@keyframes animalWag { 0%,100%{transform:none} 20%{transform:rotate(-5deg) translateY(-4%)} 40%{transform:rotate(5deg) translateY(-8%)} 60%{transform:rotate(-4deg) translateY(-5%)} 80%{transform:rotate(4deg) translateY(-2%)} }
@keyframes animalCircle { 0%,100%{transform:none} 25%{transform:translate(12%,-10%) rotate(4deg)} 50%{transform:translate(22%,4%) rotate(-2deg)} 75%{transform:translate(5%,10%) rotate(-5deg)} }
@keyframes animalFloat { 0%,100%{transform:none} 28%{transform:translateY(-10%) scaleX(1.05) scaleY(.96)} 58%{transform:translateY(5%) scaleX(.96) scaleY(1.06)} 80%{transform:translateY(-4%) scale(1.02)} }
@keyframes sofieReact { 0%,100%{transform:none} 30%{transform:translateY(-5%) scale(1.03)} 55%{transform:rotate(-2deg)} 75%{transform:rotate(2deg)} }
@keyframes cardPop { from{opacity:0;transform:translate(-50%,-20%) scale(.75)} to{opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes correctChoice { 35%{transform:translateY(-12%) scale(1.06)} 65%{transform:translateY(0) scale(1.04)} }
@keyframes gentleNo { 25%{transform:translateX(-3%)} 50%{transform:translateX(3%)} 75%{transform:translateX(-2%)} }

@media (orientation: portrait) {
  body { overflow: auto; }
  #app { min-height: 100%; padding: 4.5rem 0 1rem; }
  body::before {
    content: "For a larger view, turn your device sideways";
    position: fixed;
    z-index: 999;
    top: .7rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: .55rem 1rem;
    border-radius: 999px;
    color: white;
    background: rgba(35, 91, 94, .94);
    box-shadow: var(--shadow);
    text-align: center;
    font-size: .9rem;
    font-weight: 900;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}