:root {
  color-scheme: light;
  --ink: #173b38;
  --muted: #64736d;
  --cream: #fff8e9;
  --paper: #fffdf7;
  --teal: #087f78;
  --teal-dark: #07534f;
  --tomato: #e74932;
  --tomato-dark: #9f2e20;
  --mustard: #f4b629;
  --leaf: #3f8753;
  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: #d9a953; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #075e86; outline-offset: 3px; }
.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; }
.market { position: relative; height: 100%; min-height: 590px; overflow: hidden; isolation: isolate; border: 1px solid #936931; border-radius: 25px; background: url("art/market-backdrop-01.webp") center/cover no-repeat; box-shadow: 0 8px 0 #9e7137, 0 24px 52px rgba(54,34,11,.28); }
.world-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(13,55,51,.34),rgba(37,58,42,.04) 40%,rgba(48,35,16,.16)), linear-gradient(rgba(255,248,224,.07),rgba(16,43,38,.18)); }

.delivery-hud { position: absolute; z-index: 10; left: 20px; right: 20px; top: 18px; height: 68px; display: grid; grid-template-columns: 205px 1fr 250px; align-items: center; gap: 16px; }
.mode-card,.difficulty-card,.scoreboard { border: 1px solid rgba(51,53,31,.2); background: rgba(255,253,247,.95); box-shadow: 0 5px 0 rgba(69,51,25,.2); backdrop-filter: blur(9px); }
.mode-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; border-radius: 15px; }
.mode-card span,.difficulty-card span,.scoreboard span,.route-stamp span { color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.mode-card strong { margin-top: 3px; font-size: 17px; }
.route-track { justify-self: center; display: flex; align-items: center; width: min(340px,100%); }
.route-track i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; background: rgba(23,59,56,.72); box-shadow: 0 3px 0 rgba(38,42,24,.24); font-style: normal; font-size: 13px; font-weight: 1000; }
.route-track i.is-current { color: var(--ink); background: var(--mustard); transform: scale(1.12); }
.route-track i.is-done { background: var(--teal); }
.route-track b { height: 5px; flex: 1; background: rgba(255,255,255,.64); }
.difficulty-card { justify-self: center; width: min(330px,100%); display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 9px 14px; border-radius: 14px; }
.difficulty-card span b { color: var(--ink); font-size: 15px; }.difficulty-card strong { font-size: 12px; }
.difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #e4ded0; }
.difficulty-card > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mustard),var(--tomato)); transition: width 240ms ease-out; }
.scoreboard { height: 68px; display: flex; justify-self: end; align-items: stretch; padding: 7px; border-radius: 14px; }
.scoreboard > div { min-width: 70px; display: grid; place-content: center; padding: 0 9px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid #ded7c8; }.scoreboard strong { margin-top: 2px; font-size: 21px; line-height: 1; }.scoreboard strong i { color: #d58b04; font-style: normal; font-size: 15px; }

.game-shell { position: absolute; z-index: 2; inset: 105px 24px 24px; display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 18px; }
.mascot-zone { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 20px; background: linear-gradient(rgba(7,83,79,.74),rgba(14,69,58,.88)); box-shadow: 0 8px 0 rgba(48,42,20,.24); }
.speech { position: absolute; z-index: 3; left: 16px; right: 16px; top: 16px; min-height: 62px; display: grid; place-items: center; padding: 11px 13px; border-radius: 15px 15px 15px 5px; color: var(--ink); background: var(--paper); box-shadow: 0 4px 0 rgba(31,43,27,.2); text-align: center; font-size: 13px; font-weight: 850; line-height: 1.25; }
.mascot { position: absolute; z-index: 2; left: 4px; top: 68px; width: 232px; height: 300px; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(13,29,23,.32)); transform-origin: 54% 75%; transition: transform 180ms ease-out, filter 180ms ease-out; }
.mascot.is-thinking { animation: mascot-think 1.8s ease-in-out infinite; }.mascot.is-cheer { animation: mascot-cheer 600ms cubic-bezier(.2,.9,.3,1.3); }.mascot.is-oops { animation: mascot-oops 380ms ease-out; filter: drop-shadow(0 9px 7px rgba(110,34,23,.32)) saturate(.82); }
.scooter { position: absolute; z-index: 1; left: 62px; bottom: 42px; width: 180px; opacity: .54; transform: rotate(-4deg); filter: drop-shadow(0 8px 6px rgba(12,28,22,.25)); }
.route-stamp { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 15px; padding: 10px 12px; border: 2px dashed #e0a828; border-radius: 12px; background: rgba(255,248,233,.93); text-align: center; transform: rotate(-1deg); }
.route-stamp strong { display: block; margin-top: 2px; font-size: 14px; }

.challenge-card { min-width: 0; display: grid; grid-template-rows: auto minmax(235px,1fr) auto auto; align-content: start; padding: 24px 30px 25px; overflow: hidden; border: 1px solid #dacfb9; border-radius: 20px; background: rgba(255,253,247,.97); box-shadow: 0 8px 0 rgba(67,49,22,.22), 0 22px 44px rgba(49,38,18,.18); }
.challenge-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; }
.challenge-heading > div:first-child { min-width: 0; }.challenge-heading span { color: var(--tomato-dark); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.challenge-heading h1 { margin: 5px 0 5px; font-size: clamp(27px,3vw,42px); line-height: 1; letter-spacing: -.045em; }.challenge-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.equation-ticket { min-width: 220px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 17px; border: 2px dashed #d4aa52; border-radius: 15px; background: #fff6d9; box-shadow: 0 4px 0 #e1cf9f; transform: rotate(1deg); }
.equation-ticket b,.equation-ticket strong { font-size: 28px; }.equation-ticket strong { min-width: 38px; padding: 2px 7px; border-radius: 8px; color: white; background: var(--tomato); text-align: center; }.equation-ticket span { color: #83672f; font-size: 19px; font-weight: 900; }

.delivery-stage { min-height: 0; display: grid; place-items: center; padding: 15px 4px 9px; }
.stage-layout { width: 100%; display: grid; grid-template-columns: minmax(150px,.7fr) minmax(300px,1.6fr); align-items: center; gap: 20px; }
.pantry { min-height: 176px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 15px; border: 2px dashed #d39c4f; border-radius: 18px; background: #fff6df; }
.pantry > span,.boxes-label,.model-label,.remainder-dock span,.long-step span { color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.pantry strong { font-size: 18px; }.items { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 250px; }
.food-item { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #773923; border-radius: 50%; background: radial-gradient(circle at 37% 35%,#ffd874 0 18%,#e85135 19% 30%,#f2b63d 31% 70%,#bd6c2b 71%); box-shadow: 0 3px 0 rgba(91,52,24,.2); animation: item-pop 300ms both; }
.food-item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #a32920; box-shadow: 7px 4px #a32920,-5px 6px #a32920; }
.more-items { align-self: center; padding: 4px 7px; border-radius: 8px; color: white; background: var(--teal); font-size: 11px; font-weight: 900; }
.boxes-wrap { min-width: 0; }.boxes-label { display: block; margin-bottom: 8px; text-align: center; }
.boxes { display: grid; grid-template-columns: repeat(var(--group-columns,4),minmax(54px,1fr)); gap: 8px; }
.delivery-box { min-height: 110px; display: grid; align-content: center; justify-items: center; gap: 5px; padding: 9px 6px; border: 2px solid #9b6233; border-radius: 12px 12px 16px 16px; background: linear-gradient(#f5cf83,#e4aa51); box-shadow: inset 0 4px rgba(255,255,255,.34),0 4px 0 rgba(92,61,31,.16); transition: transform 260ms ease-out; }
.delivery-box:nth-child(even) { transform: rotate(1deg); }.delivery-box:nth-child(odd) { transform: rotate(-1deg); }.delivery-box strong { font-size: 13px; }.delivery-box .items { gap: 3px; }.delivery-box .food-item { width: 22px; height: 22px; border-width: 1px; }
.empty-box { opacity: .62; border-style: dashed; background: #f5e3bb; }.empty-box::after { content: "?"; color: #8c6b45; font-size: 20px; font-weight: 1000; }
.remainder-dock { grid-column: 1 / -1; justify-self: center; min-width: 150px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 6px; padding: 8px 12px; border: 2px dashed var(--tomato); border-radius: 12px; background: #fff0e9; }.remainder-dock strong { color: var(--tomato-dark); font-size: 14px; }
.model-card { width: min(620px,100%); display: grid; justify-items: center; gap: 13px; padding: 18px; border: 2px dashed #9fae8c; border-radius: 18px; background: #f6f4df; }.model-card strong { font-size: clamp(28px,4vw,47px); letter-spacing: -.04em; }.model-card p { margin: 0; color: var(--muted); text-align: center; }
.array-grid { display: grid; grid-template-columns: repeat(var(--cols),30px); gap: 5px; padding: 12px; border-radius: 15px; background: #dceee1; }.array-grid .food-item { width: 28px; height: 28px; }
.long-board { width: min(650px,100%); display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: stretch; }.long-problem { display: grid; place-items: center; padding: 20px; border-radius: 18px; color: white; background: var(--teal-dark); font-size: 31px; font-weight: 950; }.long-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.long-step { display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px 8px; border: 2px solid #d8c9a7; border-radius: 13px; background: #fff9e9; text-align: center; }.long-step b { font-size: 18px; }.long-step.is-mystery { border-color: var(--tomato); background: #fff0e9; }

.feedback { min-height: 26px; display: grid; place-items: center; color: var(--teal-dark); font-size: 13px; font-weight: 850; text-align: center; }.feedback.is-error { color: var(--tomato-dark); }
.action-area { min-height: 65px; display: grid; place-items: end center; }
.choice-grid { width: min(680px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.choice { min-height: 58px; padding: 10px 15px; border: 2px solid #d1c4a9; border-radius: 14px; background: white; box-shadow: 0 4px 0 #d9ceb8; font-size: 22px; font-weight: 1000; transition: transform 130ms ease-out,box-shadow 130ms ease-out,border-color 130ms ease-out; }
.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 6px 0 #b9cbbb; }.choice:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9ceb8; }
.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 750; }.explain-grid .choice { font-size: 14px; }
.primary { min-width: 260px; min-height: 56px; padding: 12px 24px; border: 2px solid #07534f; border-radius: 14px; color: white; background: var(--teal); box-shadow: 0 5px 0 #07534f; font-size: 15px; font-weight: 950; transition: transform 130ms ease-out,box-shadow 130ms ease-out; }.primary:hover { transform: translateY(-2px); }.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #07534f; }.primary.is-tomato { border-color: var(--tomato-dark); background: var(--tomato); box-shadow: 0 5px 0 var(--tomato-dark); }

.challenge-card.is-miss { animation: card-shake 330ms ease-out; }.celebration-art { position: absolute; z-index: 20; left: 50%; top: 45%; width: min(500px,42vw); pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.45); }.celebration-art.is-showing { animation: celebrate-burst 760ms ease-out; }
.market.is-level-up::after { position: absolute; z-index: 18; inset: 0; content: "LEVEL UP!"; display: grid; place-items: center; pointer-events: none; color: #fff; background: rgba(7,83,79,.28); text-shadow: 0 5px 0 var(--teal-dark); font-size: clamp(42px,8vw,88px); font-weight: 1000; letter-spacing: -.05em; animation: level-flash 850ms ease-out both; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 30px; max-width: 520px; padding: 11px 17px; border-radius: 999px; color: white; background: var(--tomato-dark); box-shadow: 0 5px 0 rgba(74,28,17,.3); opacity: 0; transform: translate(-50%,16px); transition: opacity 160ms ease-out,transform 160ms ease-out; font-size: 13px; font-weight: 850; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes item-pop { from { opacity: 0; transform: scale(.4) rotate(-15deg); } 70% { transform: scale(1.12) rotate(3deg); } to { opacity: 1; transform: scale(1); } }
@keyframes mascot-think { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes mascot-cheer { 0% { transform: scale(1); } 45% { transform: translateY(-18px) rotate(-5deg) scale(1.08); } 100% { transform: scale(1); } }
@keyframes mascot-oops { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-7px) rotate(-2deg); } 65% { transform: translateX(6px) rotate(2deg); } }
@keyframes card-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 55% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
@keyframes celebrate-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-6deg); } 25%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(1.08); } }
@keyframes level-flash { 0% { opacity: 0; transform: scale(.7); } 25%,68% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

@media (max-width: 1000px) {
  .delivery-hud { grid-template-columns: 180px 1fr 224px; }.game-shell { grid-template-columns: 205px minmax(0,1fr); }.mascot { left: -4px; width: 210px; }.challenge-card { padding-inline: 22px; }.stage-layout { gap: 12px; }.equation-ticket { min-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}