:root {
  color-scheme: light;
  --ink: #102f2b;
  --muted: #526a63;
  --fern: #17705d;
  --fern-dark: #0d4b40;
  --sun: #f4c84d;
  --coral: #e96c4b;
  --paper: #fffdf5;
  font-family: "Avenir Next", "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: #0b342d; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 4px solid #ffe16f; 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; }
.ngahere { position: relative; height: 100%; min-height: 590px; overflow: hidden; isolation: isolate; border: 1px solid rgba(232,255,239,.34); border-radius: 26px; background: #315f4c url("./assets/ngahere-backdrop-01.webp") center/cover no-repeat; box-shadow: 0 10px 0 #092a25, 0 26px 60px rgba(2,20,17,.38); }
.canopy-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(6,31,26,.38),rgba(7,37,29,.07) 35%,rgba(5,33,27,.35)), radial-gradient(circle at 64% 46%,rgba(255,238,154,.18),transparent 38%); }

.game-hud { position: absolute; z-index: 10; left: 20px; right: 20px; top: 18px; height: 66px; display: grid; grid-template-columns: 190px 1fr 190px; align-items: center; gap: 18px; }
.trail-badge,.found-meter,.scoreboard { border: 1px solid rgba(16,47,43,.14); background: rgba(255,253,245,.94); box-shadow: 0 5px 0 rgba(6,44,36,.2); backdrop-filter: blur(10px); }
.trail-badge { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 15px; border-radius: 15px; }
.trail-badge span,.found-meter span,.scoreboard span,.missionKicker { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trail-badge strong { margin-top: 3px; font-size: 16px; }
.found-meter { justify-self: center; width: min(400px,100%); height: 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 999px; }
.found-meter strong { width: 30px; font-size: 22px; text-align: center; }
.feather-track { height: 9px; overflow: hidden; border-radius: 999px; background: #d9e4d8; }
.feather-track::after { display: block; width: var(--found,0%); height: 100%; border-radius: inherit; content: ""; background: linear-gradient(90deg,#5bae8c,var(--sun)); transition: width 250ms ease-out; }
.scoreboard { height: 66px; display: flex; align-items: stretch; padding: 7px; border-radius: 15px; }
.scoreboard div { flex: 1; display: grid; place-content: center; min-width: 75px; text-align: center; }
.scoreboard div + div { border-left: 1px solid #d8e0d8; }
.scoreboard strong { margin-top: 2px; font-size: 21px; line-height: 1; }

.rocky-perch { position: absolute; z-index: 4; left: 28px; top: 104px; bottom: 30px; width: 245px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.mascot-sticker { width: 205px; height: 245px; overflow: hidden; border: 8px solid var(--paper); border-radius: 46% 46% 44% 44%; background: white; box-shadow: 0 9px 0 rgba(10,51,41,.25), 0 20px 34px rgba(4,28,23,.26); transform: rotate(-2deg); transition: transform 160ms ease-out; }
.mascot-sticker img { width: 100%; height: 100%; object-fit: cover; }
.speech-bubble { position: relative; width: 100%; margin-bottom: 18px; padding: 17px 16px 15px; border: 1px solid rgba(16,47,43,.14); border-radius: 20px; background: rgba(255,253,245,.97); box-shadow: 0 7px 0 rgba(8,51,42,.24); text-align: center; }
.speech-bubble::after { position: absolute; left: 50%; bottom: -13px; width: 25px; height: 25px; content: ""; transform: translateX(-50%) rotate(45deg); background: var(--paper); border-radius: 3px; }
.speech-bubble span { color: #a44b35; font-size: 10px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.speech-bubble h1 { margin: 5px 0 4px; font-size: clamp(25px,2.4vw,34px); line-height: 1; letter-spacing: -.035em; }
.speech-bubble p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.ngahere.is-happy .mascot-sticker { transform: rotate(3deg) translateY(-9px) scale(1.035); }
.ngahere.is-miss .mascot-sticker { transform: rotate(-5deg); }

.play-card { position: absolute; z-index: 3; left: 292px; right: 28px; top: 105px; bottom: 28px; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; gap: 10px; padding: 20px 24px 18px; border: 1px solid rgba(21,66,55,.14); border-radius: 24px; background: rgba(249,251,241,.92); box-shadow: 0 9px 0 rgba(6,48,38,.23), 0 24px 50px rgba(3,28,22,.22); backdrop-filter: blur(9px); }
.difficulty-strip { width: min(460px,80%); justify-self: center; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 28px; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.difficulty-strip i { height: 7px; overflow: hidden; border-radius: 999px; background: #d8e2d8; }
.difficulty-strip i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4da17f,var(--sun),var(--coral)); transition: width 240ms ease-out; }
.difficulty-strip strong { color: var(--ink); font-size: 13px; }
.bird-grid { min-height: 0; display: grid; grid-template-columns: repeat(var(--columns,3),minmax(0,1fr)); align-items: stretch; gap: clamp(12px,1.5vw,20px); padding: 4px 0; }
.bird-card { position: relative; min-width: 0; min-height: 175px; overflow: hidden; padding: 0; border: 3px solid #fff; border-radius: 24px; background: white; box-shadow: 0 7px 0 #cbd9cc, 0 15px 24px rgba(24,65,54,.14); transition: transform 145ms ease-out, box-shadow 145ms ease-out, border-color 145ms ease-out; }
.bird-card:hover { transform: translateY(-5px) rotate(var(--tilt,0deg)); border-color: #7cb99f; box-shadow: 0 11px 0 #bed3c3, 0 20px 28px rgba(24,65,54,.18); }
.bird-card:active { transform: translateY(3px) scale(.985); box-shadow: 0 2px 0 #bed3c3; }
.bird-card[disabled] { pointer-events: none; }
.bird-art { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; background: white; }
.bird-art img { position: absolute; left: calc(var(--slot) * -100%); top: 50%; width: 500%; height: auto; max-width: none; transform: translateY(-50%); }
.bird-card::after { position: absolute; inset: auto 10px 10px; height: 8px; content: ""; border-radius: 50%; background: rgba(17,48,44,.12); filter: blur(4px); }
.bird-card.is-correct { border-color: var(--sun); box-shadow: 0 0 0 6px rgba(244,200,77,.28),0 8px 0 #c69a25; animation: bird-hop 500ms ease-out; }
.bird-card.is-wrong { animation: soft-shake 290ms ease-out; border-color: #e48c74; }
.bird-card.is-muted { opacity: .38; transform: scale(.94); }

.discovery { min-height: 88px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 11px 14px; border: 2px solid #b7d7c4; border-radius: 17px; background: #f0f9ed; box-shadow: inset 0 0 0 1px white; }
.fact-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #704f00; background: var(--sun); font-size: 22px; font-weight: 1000; }
.discovery span { color: #27705a; font-size: 10px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.discovery p { margin: 3px 0 0; font-size: 14px; font-weight: 800; line-height: 1.32; }
.explain-zone { display: flex; align-items: center; gap: 8px; }
.primary,.clue-choice { min-height: 48px; border: 2px solid var(--fern-dark); border-radius: 13px; font-weight: 900; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.primary { min-width: 160px; padding: 0 18px; color: white; background: var(--fern); box-shadow: 0 5px 0 var(--fern-dark); }
.primary:hover,.clue-choice:hover { transform: translateY(-2px); }
.primary:active,.clue-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--fern-dark); }
.clue-choice { max-width: 170px; padding: 7px 12px; border-color: #9eb9a7; background: white; box-shadow: 0 4px 0 #d0ddd2; font-size: 12px; }
.feedback { min-height: 25px; display: grid; place-items: center; color: #9a4937; font-size: 13px; font-weight: 900; text-align: center; }

.leaf-burst { position: absolute; z-index: 20; left: 66%; top: 51%; pointer-events: none; }
.leaf-burst i { position: absolute; width: 14px; height: 26px; opacity: 0; border-radius: 90% 0 90% 0; background: var(--sun); }
.leaf-burst i:nth-child(even) { background: #65ad83; }
.ngahere.is-celebrating .leaf-burst i { animation: leaf-fly 760ms ease-out both; }
.leaf-burst i:nth-child(1){--x:-120px;--y:-90px;--r:170deg}.leaf-burst i:nth-child(2){--x:95px;--y:-115px;--r:240deg;animation-delay:45ms}.leaf-burst i:nth-child(3){--x:155px;--y:15px;--r:320deg;animation-delay:90ms}.leaf-burst i:nth-child(4){--x:-155px;--y:35px;--r:210deg;animation-delay:135ms}.leaf-burst i:nth-child(5){--x:45px;--y:115px;--r:390deg;animation-delay:180ms}.leaf-burst i:nth-child(6){--x:-50px;--y:-145px;--r:280deg;animation-delay:225ms}
.toast { position: absolute; z-index: 30; left: 62%; bottom: 42px; max-width: 60%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border-radius: 999px; color: white; background: var(--ink); pointer-events: none; font-size: 13px; font-weight: 900; text-align: center; transition: opacity 150ms ease-out,transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes bird-hop { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-18px) rotate(2deg)} 70%{transform:translateY(-5px) rotate(-2deg)} }
@keyframes soft-shake { 25%{transform:translateX(-6px) rotate(-1deg)} 55%{transform:translateX(5px) rotate(1deg)} 80%{transform:translateX(-2px)} }
@keyframes leaf-fly { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)} 25%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.1)} }
@media (max-height: 730px) { .rocky-perch,.play-card { top: 91px; bottom: 20px; }.mascot-sticker { width: 165px; height: 195px; }.rocky-perch { width: 225px; }.play-card { left: 270px; padding-top: 15px; }.bird-card { min-height: 135px; }.discovery { min-height: 75px; }.speech-bubble { margin-bottom: 11px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }