:root {
  color-scheme: light;
  --ink: #193a40;
  --muted: #5b7476;
  --paper: #fffdf3;
  --pond: #bfe9ee;
  --teal: #168b87;
  --teal-dark: #0d5f60;
  --coral: #ef6c61;
  --coral-dark: #a83e3a;
  --sun: #ffd55f;
  --leaf: #6ea94e;
  font-family: "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 760px; min-height: 620px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--pond); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #073f72; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { height: 100%; padding: 14px; }
.pond { position: relative; height: 100%; min-height: 590px; overflow: hidden; isolation: isolate; border: 1px solid #77bfc7; border-radius: 26px; background: #8fd1d5 url("art/pond-stage-01.webp") center/cover no-repeat; box-shadow: 0 9px 0 #73afb6, 0 24px 50px rgba(22,73,78,.22); }
.pond::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg,rgba(15,82,85,.12),transparent 28%,transparent 72%,rgba(15,82,85,.1)), linear-gradient(0deg,rgba(18,72,74,.1),transparent 40%); }

.stage-hud { position: absolute; z-index: 10; left: 20px; right: 20px; top: 18px; height: 70px; display: grid; grid-template-columns: 205px 1fr auto; align-items: center; gap: 18px; }
.show-badge,.difficulty-card,.scoreboard { border: 1px solid rgba(26,68,71,.19); background: rgba(255,253,243,.94); box-shadow: 0 5px 0 rgba(28,91,89,.17); backdrop-filter: blur(9px); }
.show-badge { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; border-radius: 16px; }
.show-badge span,.difficulty-card span,.scoreboard span { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.show-badge strong { margin-top: 3px; font-size: 17px; }
.difficulty-card { justify-self: center; width: min(355px,100%); display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 15px; }
.difficulty-card div strong { display: block; margin-top: 3px; font-size: 13px; }
.difficulty-card > i { height: 10px; overflow: hidden; border-radius: 999px; background: #d7e5dc; }
.difficulty-card > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--sun),var(--coral)); transition: width 220ms ease-out; }
.scoreboard { height: 70px; display: flex; align-items: stretch; padding: 7px; border-radius: 16px; }
.scoreboard > div { min-width: 70px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid #d4dfd8; }
.scoreboard strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1; }
.scoreboard strong i { color: #d9860b; font-style: normal; font-size: 17px; }

.mascot-rail { position: absolute; z-index: 3; left: 22px; top: 108px; bottom: 25px; width: 225px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 17px 14px; border: 1px solid rgba(20,79,78,.18); border-radius: 21px; background: linear-gradient(rgba(255,255,255,.3),rgba(22,123,116,.12)); backdrop-filter: blur(3px); }
.speech-bubble { align-self: stretch; margin-bottom: auto; padding: 15px 14px; border: 2px solid #f2ead2; border-radius: 18px 18px 18px 5px; background: rgba(255,253,243,.96); box-shadow: 0 6px 0 rgba(42,89,79,.16); font-size: 14px; font-weight: 850; line-height: 1.3; }
.mascot-wrap { position: relative; width: 185px; height: 235px; display: grid; place-items: end center; transform-origin: 50% 100%; transition: transform 180ms ease-out; }
.mascot-wrap img { display: block; width: 185px; max-height: 230px; object-fit: contain; filter: drop-shadow(0 9px 5px rgba(15,57,58,.24)); }
.music-notes i { position: absolute; opacity: 0; color: #fff6a6; font-size: 30px; font-style: normal; font-weight: 1000; text-shadow: 0 2px 0 #946614; }
.music-notes i:nth-child(1) { left: 8px; top: 72px; }.music-notes i:nth-child(2) { right: 4px; top: 36px; }.music-notes i:nth-child(3) { right: 28px; top: 105px; }
.pond.is-speaking .music-notes i { animation: note-float 900ms ease-out infinite; }.pond.is-speaking .music-notes i:nth-child(2) { animation-delay: 170ms; }.pond.is-speaking .music-notes i:nth-child(3) { animation-delay: 340ms; }
.pond.is-celebrating .mascot-wrap { transform: translateY(-8px) rotate(-4deg) scale(1.06); }
.pond.is-missing .mascot-wrap { animation: mascot-oops 340ms ease-out; }
.hear-again { width: 100%; min-height: 48px; margin-top: 8px; border: 2px solid #0d5f60; border-radius: 13px; color: white; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); font-size: 13px; font-weight: 1000; }
.hear-again:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--teal-dark); }.hear-again:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--teal-dark); }

.game-card { position: absolute; z-index: 3; left: 265px; right: 24px; top: 108px; bottom: 25px; display: grid; grid-template-rows: auto minmax(70px,auto) minmax(175px,1fr) 34px auto; align-content: start; padding: 22px 29px 24px; overflow: hidden; border: 1px solid #ded5bd; border-radius: 22px; background: rgba(255,253,243,.965); box-shadow: 0 9px 0 rgba(34,94,81,.18), 0 24px 44px rgba(20,70,62,.17); }
.challenge-heading { text-align: center; }.challenge-heading span { color: var(--coral-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.challenge-heading h1 { margin: 4px 0 5px; font-size: clamp(27px,3vw,42px); line-height: 1; letter-spacing: -.04em; }.challenge-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.target-strip { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; }
.target-word { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 2px solid #99bcb5; border-radius: 999px; background: #eaf7ee; box-shadow: 0 4px 0 #c4dbd0; font-size: 23px; font-weight: 1000; }
.target-word img { width: 45px; height: 45px; object-fit: contain; }.target-word .emoji { font-size: 38px; line-height: 1; }
.rhyme-link { color: var(--coral); font-size: 30px; font-weight: 1000; }
.choice-stage { min-height: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 14px; padding: 10px 0 8px; }
.choice-stage:has(.word-card:only-child) { grid-template-columns: minmax(220px,320px); justify-content: center; }
.choice-stage:has(.word-card:nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(200px,280px)); justify-content: center; }
.word-card { position: relative; min-height: 160px; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 10px 13px 12px; border: 3px solid #b8c9c2; border-radius: 20px; background: white; box-shadow: 0 7px 0 #d5dfd9; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.word-card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 10px 0 #c5ded5; }.word-card:active { transform: translateY(5px); box-shadow: 0 2px 0 #c5ded5; }
.word-card img { width: min(120px,70%); height: 105px; object-fit: contain; filter: drop-shadow(0 5px 3px rgba(27,59,55,.14)); }.word-card .emoji { display: grid; place-items: center; height: 105px; font-size: 76px; line-height: 1; filter: drop-shadow(0 5px 3px rgba(27,59,55,.12)); }
.word-card strong { display: flex; align-items: center; gap: 7px; font-size: 25px; letter-spacing: .01em; }.word-card strong::before { content: "🔊"; font-size: 16px; }
.word-card.is-correct { border-color: var(--leaf); background: #edfae8; box-shadow: 0 7px 0 #b9d6aa; animation: correct-pop 380ms ease-out; }.word-card.is-wrong { border-color: var(--coral); background: #fff0ed; animation: card-shake 330ms ease-out; }
.feedback { min-height: 30px; display: grid; place-items: center; color: var(--teal-dark); font-size: 15px; font-weight: 1000; text-align: center; }.feedback.is-error { color: var(--coral-dark); }
.action-area { min-height: 60px; display: flex; align-items: center; justify-content: center; }
.primary { min-width: 240px; min-height: 58px; padding: 0 24px; border: 2px solid var(--teal-dark); border-radius: 15px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 16px; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }.primary.is-coral { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }
.explain-grid { width: min(650px,100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.explain-choice { min-height: 64px; padding: 8px 15px; border: 2px solid #b8c9c2; border-radius: 15px; background: white; box-shadow: 0 5px 0 #d5dfd9; font-size: 14px; font-weight: 1000; }.explain-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.celebration { position: absolute; z-index: 20; left: 54%; top: 52%; pointer-events: none; }.celebration i { position: absolute; opacity: 0; color: var(--sun); font-size: 28px; font-style: normal; text-shadow: 0 2px 0 #a26c0c; }.pond.is-celebrating .celebration i { animation: burst 720ms ease-out both; }.celebration i:nth-child(1){--x:-155px;--y:-100px}.celebration i:nth-child(2){--x:-80px;--y:-145px;animation-delay:45ms}.celebration i:nth-child(3){--x:15px;--y:-135px;animation-delay:90ms}.celebration i:nth-child(4){--x:125px;--y:-95px;animation-delay:135ms}.celebration i:nth-child(5){--x:160px;--y:20px;animation-delay:180ms}.celebration i:nth-child(6){--x:-135px;--y:40px;animation-delay:225ms}.celebration i:nth-child(7){--x:45px;--y:85px;animation-delay:270ms}
.toast { position: absolute; z-index: 30; left: 57%; bottom: 38px; max-width: 68%; padding: 10px 17px; opacity: 0; transform: translate(-50%,12px); border-radius: 999px; color: white; background: var(--ink); pointer-events: none; font-size: 13px; font-weight: 1000; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes note-float { 0% { opacity: 0; transform: translateY(10px) rotate(-8deg) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-55px) rotate(12deg) scale(1.1); } }
@keyframes correct-pop { 50% { transform: translateY(-6px) scale(1.04); } }
@keyframes card-shake { 25% { transform: translateX(-7px) rotate(-1deg); } 50% { transform: translateX(6px) rotate(1deg); } 75% { transform: translateX(-3px); } }
@keyframes mascot-oops { 35% { transform: rotate(-7deg) scale(.96); } 70% { transform: rotate(5deg); } }
@keyframes burst { 0% { opacity: 0; transform: translate(0,0) scale(.25) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(1.25) rotate(180deg); } }
@media (max-height: 730px) { .stage-hud { top: 12px; }.mascot-rail,.game-card { top: 92px; bottom: 18px; }.mascot-wrap { height: 190px; }.mascot-wrap img { max-height: 185px; }.game-card { padding-top: 17px; padding-bottom: 17px; }.word-card { min-height: 135px; }.word-card img,.word-card .emoji { height: 80px; }.word-card .emoji { font-size: 60px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }