:root {
  color-scheme: light;
  --ink: #18392f;
  --muted: #60796f;
  --paper: #fffdf1;
  --leaf: #33865d;
  --leaf-dark: #19543b;
  --coral: #ee755e;
  --coral-dark: #ad4437;
  --gold: #f4c85c;
  --sky: #9fd4d2;
  --line: rgba(24,57,47,.16);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1000px; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #d8eee1; font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

.game { width: 100%; height: 100%; padding: 18px; }
.island {
  position: relative;
  width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: 28px;
  background-color: #b7d59b;
  background-image: linear-gradient(90deg, rgba(14,39,28,.12), transparent 35%), url("art/backdrop-forest.webp");
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(19,58,40,.16), 0 20px 50px rgba(30,68,48,.2);
  transition: background-image 180ms ease-out;
}
.game[data-environment="pale-beach"] .island { background-image: linear-gradient(90deg, rgba(65,80,52,.08), transparent 45%), url("art/backdrop-beach.webp"); }
.game[data-environment="drought"] .island { background-image: linear-gradient(90deg, rgba(75,45,18,.12), transparent 45%), url("art/backdrop-drought.webp"); }
.game[data-environment="wetlands"] .island { background-image: linear-gradient(90deg, rgba(14,53,51,.14), transparent 45%), url("art/backdrop-forest.webp"); filter: saturate(.9); }
.canopy { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10,34,25,.15), transparent 25%, rgba(15,40,27,.18)); pointer-events: none; }
.weather { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .5; }
.game[data-environment="drought"] .weather { background: repeating-linear-gradient(105deg, transparent 0 105px, rgba(255,235,160,.11) 106px 110px); }

.field-hud { position: absolute; z-index: 5; top: 18px; left: 22px; right: 22px; display: grid; grid-template-columns: 230px 1fr 292px; align-items: center; gap: 16px; }
.expedition-mark, .generation-chip, .scoreboard { border: 1px solid rgba(26,66,48,.14); background: rgba(255,253,241,.93); box-shadow: 0 8px 22px rgba(24,57,47,.13); backdrop-filter: blur(8px); }
.expedition-mark { width: fit-content; padding: 10px 16px; transform: rotate(-1deg); border-radius: 8px 20px 8px 20px; }
.expedition-mark span, .generation-chip span, .scoreboard span, .difficulty span { display: block; color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.expedition-mark strong { display: block; margin-top: 1px; color: var(--leaf-dark); font-size: 20px; }
.generation-chip { justify-self: center; padding: 9px 22px; border-radius: 999px; text-align: center; }
.generation-chip strong { display: block; margin-top: 1px; font-size: 15px; }
.scoreboard { display: grid; grid-template-columns: repeat(3,1fr); padding: 8px; border-radius: 18px; }
.scoreboard div { padding: 3px 12px; text-align: center; border-right: 1px solid var(--line); }.scoreboard div:last-child { border: 0; }
.scoreboard strong { display: block; margin-top: 1px; font-size: 22px; }

.mission-card { position: absolute; z-index: 2; top: 90px; right: 24px; bottom: 24px; left: 236px; display: grid; grid-template-rows: auto minmax(0,1fr) 26px 74px; gap: 9px; padding: 22px 26px 20px; border: 1px solid rgba(24,57,47,.16); border-radius: 26px; background: rgba(255,253,241,.95); box-shadow: 0 18px 50px rgba(20,53,38,.2); backdrop-filter: blur(10px); }
.mission-copy { text-align: center; }.mission-copy > span { color: var(--coral-dark); font-size: 11px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.mission-copy h1 { margin: 4px 0 4px; font-size: clamp(27px,3vw,40px); line-height: 1; letter-spacing: -.045em; }.mission-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.lab { min-height: 0; display: grid; grid-template-columns: minmax(420px,1.55fr) minmax(240px,.75fr); gap: 16px; }
.habitat-panel, .data-panel { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; }
.habitat-panel { display: grid; place-items: center; padding: 50px 18px 16px; background: linear-gradient(180deg, rgba(215,237,208,.9), rgba(236,235,194,.86)); }
.game[data-environment="dark-forest"] .habitat-panel { background: linear-gradient(160deg,#bfd5b5,#799a71); }.game[data-environment="pale-beach"] .habitat-panel { background: linear-gradient(160deg,#dff0df,#f4dfad); }.game[data-environment="drought"] .habitat-panel { background: linear-gradient(160deg,#ead79d,#c79b62); }.game[data-environment="wetlands"] .habitat-panel { background: linear-gradient(160deg,#cce3c1,#8cbab2); }
.pressure-tag { position: absolute; top: 12px; left: 14px; padding: 8px 12px; border: 1px solid rgba(26,65,48,.15); border-radius: 13px; background: rgba(255,253,241,.87); box-shadow: 0 5px 13px rgba(31,57,36,.1); }.pressure-tag span { display: block; color: var(--muted); font-size: 9px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }.pressure-tag strong { font-size: 13px; }
.population { width: 100%; display: grid; grid-template-columns: repeat(5,minmax(60px,1fr)); align-items: end; justify-items: center; gap: 2px; }
.critter { position: relative; width: min(100%,102px); border: 0; padding: 0; background: transparent; transform-origin: 50% 100%; transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.2,.8,.25,1), filter 180ms; }
.critter img { display: block; width: 100%; height: 105px; object-fit: contain; filter: drop-shadow(0 7px 4px rgba(33,55,32,.23)); }.critter b { position: absolute; left: 50%; bottom: 1px; translate: -50% 0; padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.88); font-size: 9px; white-space: nowrap; }
.critter.is-survivor { animation: survivor-hop 560ms ease-out; filter: drop-shadow(0 0 8px rgba(255,222,89,.85)); }.critter.is-selected { transform: translateY(-8px) scale(1.06); }.critter.is-lost { opacity: .16; transform: translateY(16px) scale(.72); filter: grayscale(1); }
.survival-flash { position: absolute; z-index: 3; inset: 50% auto auto 50%; padding: 8px 16px; opacity: 0; transform: translate(-50%,-40%) rotate(-3deg) scale(.6); border: 3px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--gold); box-shadow: 5px 5px 0 var(--ink); font-size: 23px; font-weight: 1000; letter-spacing: .04em; }.habitat-panel.is-running .survival-flash { animation: flash-pop 780ms ease-out both; }
.habitat-panel.is-wrong { animation: shake 280ms ease-out; }

.data-panel { display: grid; grid-template-rows: auto 1fr auto; padding: 16px; background: #f8f3df; box-shadow: inset 0 0 0 5px rgba(92,104,70,.05); }
.chart-heading span { display: block; color: var(--coral-dark); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.chart-heading strong { display: block; margin-top: 2px; font-size: 16px; }
.chart { min-height: 170px; display: flex; align-items: stretch; justify-content: center; gap: 17px; padding: 16px 6px 4px; border-bottom: 2px solid #8d9b83; }
.bar-wrap { flex: 1; max-width: 92px; display: grid; grid-template-rows: 1fr auto auto; align-items: end; gap: 3px; text-align: center; }.bar-slot { height: 100%; min-height: 105px; display: flex; align-items: end; justify-content: center; }.bar { width: 62%; min-height: 8px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--gold); box-shadow: inset -6px 0 rgba(255,255,255,.2); transition: height 650ms cubic-bezier(.2,.8,.2,1); }.bar-wrap:nth-child(2) .bar { background: var(--coral); }.bar-wrap b { font-size: 18px; }.bar-wrap span { color: var(--muted); font-size: 10px; font-weight: 900; }
.generation-track { display: flex; gap: 5px; padding-top: 9px; }.generation-track i { flex: 1; height: 7px; border-radius: 9px; background: #d9dac6; }.generation-track i.is-filled { background: var(--leaf); }
.feedback { display: grid; place-items: center; color: var(--leaf-dark); font-size: 14px; font-weight: 900; text-align: center; }.feedback.is-error { color: var(--coral-dark); }
.action-area { min-height: 70px; display: flex; align-items: center; justify-content: center; }
.choice-grid { width: min(720px,100%); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.choice-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice, .primary { min-height: 58px; border: 2px solid #b9c9ba; border-radius: 16px; background: white; box-shadow: 0 6px 0 #ccd8cb; color: var(--ink); font-weight: 1000; cursor: pointer; transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms; }.choice { padding: 8px 13px; font-size: 15px; }.choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }.choice:hover { transform: translateY(-2px); border-color: var(--leaf); box-shadow: 0 8px 0 #b6ccb9; }.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 #b6ccb9; }
.primary { min-width: 235px; padding: 0 25px; border-color: var(--leaf-dark); color: white; background: var(--leaf); box-shadow: 0 6px 0 var(--leaf-dark); font-size: 16px; }.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--leaf-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--leaf-dark); }.primary.is-coral { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }

.scout-card { position: absolute; z-index: 3; left: 22px; bottom: 24px; width: 192px; padding: 0 12px 14px; border: 1px solid rgba(24,57,47,.16); border-radius: 90px 90px 22px 22px; background: rgba(255,253,241,.94); box-shadow: 0 14px 38px rgba(25,61,43,.2); text-align: center; }.scout-card > img { width: 165px; height: 190px; margin: -34px auto -16px; object-fit: contain; filter: drop-shadow(0 9px 6px rgba(30,52,32,.22)); }.speech { position: relative; padding: 12px; border-radius: 16px; background: #f6e9b8; transform: rotate(-1deg); }.speech span { color: #826516; font-size: 9px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }.speech p { min-height: 52px; margin: 4px 0 0; color: #4b482c; font-size: 12px; font-weight: 800; line-height: 1.35; }
.scout-card.is-happy img { animation: mascot-hop 600ms ease-out; }.scout-card.is-thinking img { animation: mascot-tilt 360ms ease-out; }
.difficulty { margin-top: 12px; text-align: left; }.difficulty > div { display: flex; align-items: end; justify-content: space-between; }.difficulty b { font-size: 18px; }.difficulty > i { display: block; height: 8px; margin: 6px 0; overflow: hidden; border-radius: 8px; background: #d9e1d7; }.difficulty > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 300ms ease-out; }.difficulty > strong { color: var(--muted); font-size: 11px; }
.skill-pins { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }.skill-pins i { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #bccabe; border-radius: 50%; color: #849187; font-size: 10px; font-style: normal; font-weight: 1000; }.skill-pins i.is-active { border-color: var(--leaf); color: white; background: var(--leaf); transform: scale(1.08); }
.toast { position: absolute; z-index: 20; left: 50%; bottom: 34px; max-width: 70%; 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: 900; transition: 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.confetti { position: absolute; z-index: 12; left: 58%; top: 45%; pointer-events: none; }.confetti i { position: absolute; width: 10px; height: 18px; opacity: 0; background: var(--gold); }.confetti i:nth-child(2n) { background: var(--coral); }.confetti i:nth-child(3n) { background: var(--sky); }.island.is-celebrating .confetti i { animation: confetti 780ms ease-out both; }.confetti i:nth-child(1){--x:-140px;--y:-95px}.confetti i:nth-child(2){--x:-75px;--y:-145px;animation-delay:40ms}.confetti i:nth-child(3){--x:5px;--y:-160px;animation-delay:80ms}.confetti i:nth-child(4){--x:80px;--y:-130px;animation-delay:110ms}.confetti i:nth-child(5){--x:145px;--y:-75px;animation-delay:150ms}.confetti i:nth-child(6){--x:-120px;--y:40px;animation-delay:180ms}.confetti i:nth-child(7){--x:120px;--y:55px;animation-delay:210ms}.confetti i:nth-child(8){--x:15px;--y:90px;animation-delay:230ms}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes survivor-hop { 45% { transform: translateY(-18px) rotate(-3deg) scale(1.08); } }.critter:nth-child(2n).is-survivor { animation-delay: 60ms; }
@keyframes flash-pop { 0% { opacity: 0; transform: translate(-50%,-20%) rotate(-6deg) scale(.45); } 30%,70% { opacity: 1; transform: translate(-50%,-50%) rotate(-3deg) scale(1); } 100% { opacity: 0; transform: translate(-50%,-70%) rotate(2deg) scale(1.1); } }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes mascot-hop { 45% { transform: translateY(-10px) rotate(3deg); } }
@keyframes mascot-tilt { 50% { transform: rotate(-5deg); } }
@keyframes confetti { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(230deg); } }
@media (max-height: 760px) { .field-hud { top: 11px; }.mission-card { top: 77px; bottom: 14px; }.scout-card { bottom: 14px; }.scout-card > img { height: 155px; }.speech p { min-height: 40px; }.mission-card { padding-top: 16px; }.critter img { height: 86px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }