:root {
  color-scheme: dark;
  --ink: #12342f;
  --paper: #fffaf0;
  --muted: #5f716a;
  --swamp: #164d43;
  --swamp-dark: #0b332f;
  --lime: #a8e647;
  --lime-dark: #4c861e;
  --gold: #ffd34d;
  --coral: #f57d4a;
  --coral-dark: #9d3b23;
  --water: #1c8178;
  font-family: "Avenir Next Rounded", "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: 880px; min-height: 620px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--swamp-dark); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #fff09b; 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; }
.swamp { position: relative; height: 100%; min-height: 590px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.2); border-radius: 25px; background: linear-gradient(rgba(5,37,34,.2),rgba(3,31,29,.45)), url("art/swamp-backdrop-01.webp") center / cover; box-shadow: 0 8px 0 #082824, 0 24px 55px rgba(0,0,0,.35); }
.swamp::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 65% 22%,transparent 0 18%,rgba(5,34,31,.16) 54%,rgba(3,23,22,.48) 100%); }

.game-hud { position: absolute; z-index: 20; left: 20px; right: 20px; top: 18px; height: 68px; display: grid; grid-template-columns: 215px 1fr auto; align-items: center; gap: 18px; }
.mission-chip,.difficulty-card,.scoreboard { border: 1px solid rgba(255,255,255,.22); background: rgba(9,49,44,.88); box-shadow: 0 5px 0 rgba(3,29,26,.52); backdrop-filter: blur(10px); color: white; }
.mission-chip { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 11px 16px; border-radius: 15px; }
.mission-chip span,.difficulty-card span,.scoreboard span { color: #cce2d0; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mission-chip strong { margin-top: 3px; font-size: 16px; }
.difficulty-card { justify-self: center; width: min(350px,100%); display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 9px 14px; border-radius: 15px; }
.difficulty-card span b { color: var(--gold); font-size: 15px; }.difficulty-card strong { font-size: 12px; }
.difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.15); }
.difficulty-card > i b { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--lime),var(--gold),var(--coral)); transition: width 220ms ease-out; }
.scoreboard { height: 68px; display: flex; align-items: stretch; padding: 7px; border-radius: 15px; }
.scoreboard > div { min-width: 70px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(255,255,255,.18); }
.scoreboard strong { display: block; margin-top: 2px; color: white; font-size: 21px; line-height: 1; }.scoreboard strong i { color: var(--gold); font-style: normal; font-size: 15px; }

.mascot-dock { position: absolute; z-index: 5; left: 20px; bottom: 8px; width: 265px; height: calc(100% - 112px); pointer-events: none; }
.gator { position: absolute; left: -30px; bottom: 15px; width: 310px; max-height: 77%; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(0,0,0,.32)); transform-origin: 50% 80%; transition: transform 180ms ease-out, filter 180ms ease-out; }
.lilypads { position: absolute; left: -70px; bottom: -90px; width: 350px; opacity: .92; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); }
.speech { position: absolute; z-index: 3; left: 75px; top: 4px; width: 190px; padding: 12px 14px; border: 2px solid #d7e8c5; border-radius: 18px 18px 18px 4px; background: var(--paper); box-shadow: 0 6px 0 rgba(8,45,39,.35); font-size: 13px; font-weight: 900; line-height: 1.25; text-align: center; }
.mascot-dock.is-cheering .gator { transform: translateY(-8px) rotate(-3deg) scale(1.06); filter: drop-shadow(0 18px 10px rgba(0,0,0,.3)); }
.mascot-dock.is-oops .gator { animation: gator-oops 390ms ease-out; }
.mascot-dock.is-thinking .gator { transform: rotate(1deg); }

.game-card { position: absolute; z-index: 8; left: 285px; right: 24px; top: 105px; bottom: 24px; display: grid; grid-template-rows: auto minmax(220px,1fr) auto auto; align-content: start; padding: 24px 31px 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 22px; background: rgba(255,250,240,.96); box-shadow: 0 9px 0 rgba(4,42,37,.44), 0 24px 48px rgba(0,0,0,.24); }
.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: 5px 0; font-size: clamp(28px,3.1vw,43px); line-height: 1; letter-spacing: -.045em; }
.challenge-heading p { margin: 0; color: var(--muted); font-size: 14px; }

.play-stage { min-height: 0; display: grid; place-items: center; padding: 15px 4px 8px; }
.compare-board { width: min(720px,100%); display: grid; grid-template-columns: minmax(150px,1fr) 142px minmax(150px,1fr); align-items: center; gap: 16px; }
.number-card { position: relative; min-height: 178px; display: grid; place-items: center; padding: 18px; overflow: hidden; border: 3px solid #c6d7c5; border-radius: 25px; background: linear-gradient(155deg,#fff 0 60%,#edf7e8 100%); box-shadow: 0 8px 0 #b5c8b1, 0 15px 25px rgba(34,71,58,.12); }
.number-card::before { position: absolute; inset: 12px; content: ""; border: 2px dashed rgba(83,132,66,.2); border-radius: 16px; }
.number-card strong { position: relative; z-index: 1; font-size: clamp(52px,7vw,86px); line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.number-card small { position: absolute; bottom: 13px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.number-card.is-bigger { border-color: var(--lime-dark); background: #f0ffda; box-shadow: 0 8px 0 #91bd50, 0 0 0 8px rgba(168,230,71,.2); }
.number-card.is-equal { border-color: #d2a729; background: #fff8cd; box-shadow: 0 8px 0 #d6ba57; }
.chomp-slot { position: relative; min-height: 150px; display: grid; place-items: center; }
.chomp-symbol { position: relative; z-index: 2; display: grid; place-items: center; width: 126px; height: 126px; color: var(--swamp-dark); font-family: Georgia,serif; font-size: 105px; font-weight: 1000; line-height: .8; text-shadow: 0 4px 0 rgba(255,255,255,.7); transition: transform 220ms cubic-bezier(.2,.9,.25,1.2); }
.chomp-symbol.is-left { transform: rotate(0deg) scale(1.12); }.chomp-symbol.is-right { transform: rotate(0deg) scale(1.12); }.chomp-symbol.is-equal { color: #c68a11; transform: scale(1.08); }
.chomp-slot::after { position: absolute; z-index: 1; width: 124px; height: 124px; content: ""; border-radius: 50%; background: radial-gradient(circle,#c8f272 0 42%,#7cac3f 44% 63%,transparent 65%); opacity: .32; transform: scale(.7); transition: opacity 180ms ease-out,transform 180ms ease-out; }
.chomp-slot.is-snapping::after { opacity: .8; transform: scale(1.2); }
.place-hint { position: absolute; bottom: -3px; width: 150px; color: var(--muted); font-size: 10px; font-weight: 900; text-align: center; text-transform: uppercase; }
.place-value { position: absolute; top: 13px; display: flex; gap: 4px; }
.place-value b { min-width: 28px; padding: 4px 5px; border-radius: 7px; background: #dcefd2; color: #34651d; font-size: 10px; text-align: center; }

.symbol-tray { width: min(470px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.symbol-button,.primary,.order-card,.order-slot { min-height: 62px; border: 2px solid #a9bca9; border-radius: 16px; background: white; box-shadow: 0 6px 0 #c9d4c4; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.symbol-button { position: relative; font-family: Georgia,serif; font-size: 42px; }
.symbol-button small { display: block; margin-top: -5px; color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 900; }
.symbol-button:hover,.order-card:hover { transform: translateY(-3px); border-color: var(--lime-dark); box-shadow: 0 9px 0 #bdcfb3; }
.symbol-button:active,.order-card:active,.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #bdcfb3; }
.primary { min-width: 220px; padding: 0 24px; border-color: var(--swamp-dark); color: white; background: var(--swamp); box-shadow: 0 6px 0 var(--swamp-dark); font-size: 16px; }
.primary.is-coral { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }

.order-board { width: min(760px,100%); display: grid; gap: 16px; }
.order-label { color: var(--muted); font-size: 11px; font-weight: 1000; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.order-bank,.order-raft { display: grid; grid-template-columns: repeat(var(--card-count,4),1fr); gap: 10px; }
.order-card,.order-slot { min-width: 0; padding: 8px; font-size: clamp(23px,3vw,38px); font-variant-numeric: tabular-nums; }
.order-card[disabled] { opacity: .22; cursor: default; transform: none; box-shadow: 0 3px 0 #c9d4c4; }
.order-slot { position: relative; border-style: dashed; color: var(--swamp); background: #eef7e9; box-shadow: none; }
.order-slot:empty::after { content: attr(data-step); color: #9cae9c; font-size: 12px; text-transform: uppercase; }
.raft-arrow { display: flex; align-items: center; justify-content: space-between; color: var(--swamp); font-size: 11px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.raft-arrow i { flex: 1; height: 2px; margin: 0 12px; background: var(--swamp); }.raft-arrow i::after { float: right; width: 9px; height: 9px; margin-top: -4px; content: ""; transform: rotate(45deg); border-top: 2px solid var(--swamp); border-right: 2px solid var(--swamp); }
.order-board.is-correct .order-raft { animation: raft-float 650ms ease-out; }

.feedback { min-height: 30px; display: grid; place-items: center; color: var(--swamp); font-size: 14px; font-weight: 900; text-align: center; }
.feedback.is-error { color: var(--coral-dark); }
.action-area { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.firefly-burst { position: absolute; z-index: 30; left: 55%; top: 49%; width: 330px; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.35); }
.firefly-burst img { display: block; width: 100%; }
.swamp.is-celebrating .firefly-burst { animation: firefly-pop 850ms ease-out both; }
.swamp.is-miss .game-card { animation: miss-shake 390ms ease-out; }
.toast { position: absolute; z-index: 40; left: 58%; bottom: 37px; max-width: 68%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border-radius: 999px; color: white; background: var(--swamp-dark); box-shadow: 0 4px 0 rgba(0,0,0,.3); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes gator-oops { 25%{transform:rotate(-4deg)} 55%{transform:rotate(4deg)} 80%{transform:rotate(-2deg)} }
@keyframes firefly-pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)} 35%{opacity:1} 100%{opacity:0;transform:translate(-50%,-58%) scale(1.25) rotate(5deg)} }
@keyframes miss-shake { 20%{transform:translateX(-8px)} 45%{transform:translateX(7px)} 70%{transform:translateX(-4px)} }
@keyframes raft-float { 40%{transform:translateY(-8px) rotate(-1deg)} 70%{transform:translateY(2px) rotate(.5deg)} }
@media (max-height: 730px) { .game-hud{top:12px}.game-card{top:91px;bottom:17px;padding-top:17px;padding-bottom:17px}.mascot-dock{height:calc(100% - 95px)}.number-card{min-height:145px}.action-area{min-height:68px}.symbol-button,.primary{min-height:55px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }