:root {
  color-scheme: light;
  --ink: #143d35;
  --ink-soft: #55736a;
  --cream: #fffdf2;
  --leaf: #2aa866;
  --leaf-dark: #116842;
  --lime: #aade55;
  --sun: #ffd34d;
  --coral: #f45b52;
  --blue: #3c82dd;
  --violet: #7d4bc6;
  --liquid: #66c46e;
  font-family: "Avenir Next", Avenir, "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: 1080px; min-height: 700px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #cbeedc; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid #075fc5; 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; }

.game { width: 100%; height: 100%; padding: 14px; }
.world { position: relative; width: 100%; height: 100%; overflow: hidden; border: 4px solid #174f3c; border-radius: 28px; background: #8bd6ec; box-shadow: 0 9px 0 #0f382d, 0 24px 54px rgba(10,55,42,.22); isolation: isolate; }
.world-art { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.world-tint { position: absolute; z-index: -3; inset: 0; background: linear-gradient(180deg, rgba(209,248,255,.05), rgba(24,95,68,.12)), radial-gradient(circle at 50% 44%, transparent 0 29%, rgba(24,78,57,.14) 82%); pointer-events: none; }

.topbar { position: absolute; z-index: 30; top: 14px; left: 18px; right: 18px; height: 64px; display: grid; grid-template-columns: 220px 1fr auto 48px; align-items: center; gap: 18px; padding: 8px 10px 8px 12px; border: 3px solid #184d3c; border-radius: 18px; background: rgba(255,253,242,.96); box-shadow: 0 6px 0 rgba(20,61,53,.32); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; transform: rotate(-5deg); border: 3px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--sun); box-shadow: 3px 3px 0 var(--ink); font-size: 15px; font-weight: 1000; }
.brand small, .brand strong { display: block; }
.brand small { color: var(--leaf-dark); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.brand strong { margin-top: 1px; font-size: 20px; line-height: 1; letter-spacing: -.035em; }
.campaign-track { justify-self: center; display: flex; align-items: center; gap: 7px; }
.campaign-dot { position: relative; width: 42px; height: 12px; overflow: hidden; border: 2px solid #7ba797; border-radius: 999px; background: #d7e7df; }
.campaign-dot::after { position: absolute; inset: 0; width: 0; content: ""; border-radius: inherit; background: var(--leaf); transition: width 180ms ease-out; }
.campaign-dot.is-current { box-shadow: 0 0 0 4px #dff2c3; }
.campaign-dot.is-current::after, .campaign-dot.is-done::after { width: 100%; }
.scores { display: flex; gap: 7px; }
.scores > span { min-width: 65px; padding: 5px 10px; border: 2px solid #b5cfc4; border-radius: 11px; background: white; text-align: center; }
.scores small, .scores strong { display: block; }
.scores small { color: var(--ink-soft); font-size: 8px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.scores strong { margin-top: 1px; font-size: 17px; line-height: 1; }
.sound { width: 44px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 14px; background: #e7f6ef; box-shadow: 0 4px 0 var(--ink); font-size: 22px; font-weight: 1000; }
.sound:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.sound-off { display: none; }
.sound[aria-pressed="true"] .sound-on { display: none; }
.sound[aria-pressed="true"] .sound-off { display: inline; }

.lab-stage { position: absolute; z-index: 2; inset: 91px 18px 210px; overflow: hidden; border: 3px solid rgba(20,61,53,.7); border-radius: 24px; background: rgba(226,252,238,.15); box-shadow: inset 0 0 54px rgba(255,255,255,.18); }
.mission-tag { position: absolute; z-index: 8; top: 15px; left: 16px; min-width: 190px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 13px; background: var(--sun); box-shadow: 4px 4px 0 var(--ink); }
.mission-tag span, .mission-tag strong { display: block; }
.mission-tag span { font-size: 9px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.mission-tag strong { margin-top: 2px; font-size: 18px; line-height: 1; }
.bottle-art { position: absolute; z-index: 2; left: 25%; bottom: 60px; width: 170px; height: 170px; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.12) contrast(1.03); transform: rotate(-3deg); }
.plant-zone { position: absolute; z-index: 5; left: 50%; bottom: 72px; width: 280px; height: 285px; transform: translateX(-50%); transition: filter 220ms ease-out; }
.flower-art { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.1) hue-rotate(var(--flower-hue, 0deg)); transform-origin: 50% 86%; transition: filter 420ms ease-out, transform 220ms ease-out; }
.sample-label { position: absolute; left: 50%; bottom: 1px; min-width: 160px; padding: 7px 12px; transform: translateX(-50%) rotate(-1deg); border: 3px solid var(--ink); border-radius: 10px; background: var(--cream); box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.sample-label small, .sample-label strong { display: block; }
.sample-label small { color: var(--leaf-dark); font-size: 8px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.sample-label strong { margin-top: 2px; font-size: 13px; line-height: 1; }
.sparkles i { position: absolute; z-index: 4; width: 14px; height: 14px; opacity: 0; border: 4px solid var(--sun); transform: rotate(45deg); }
.sparkles i:nth-child(1) { left: 18%; top: 25%; }.sparkles i:nth-child(2) { right: 16%; top: 18%; }.sparkles i:nth-child(3) { left: 10%; top: 49%; }.sparkles i:nth-child(4) { right: 9%; top: 50%; }.sparkles i:nth-child(5) { left: 47%; top: 7%; }
.meter { position: absolute; z-index: 9; left: 50%; bottom: 13px; width: min(760px, calc(100% - 370px)); min-width: 550px; padding: 9px 15px 8px; transform: translateX(-50%); border: 3px solid var(--ink); border-radius: 15px; background: rgba(255,253,242,.97); box-shadow: 0 5px 0 rgba(20,61,53,.72); transition: transform 180ms ease-out, filter 180ms ease-out; }
.meter-labels { display: flex; justify-content: space-between; margin-bottom: 5px; color: #54726a; font-size: 9px; font-weight: 1000; text-transform: uppercase; }
.meter-labels b { color: var(--leaf-dark); }
.meter-track { position: relative; }
.meter-rainbow { height: 24px; border: 2px solid var(--ink); border-radius: 8px; background: linear-gradient(90deg,#e63842,#f16a39 17%,#f6c746 34%,#77c951 48%,#42c798 58%,#3e91d5 72%,#5a61bf 86%,#8b42a8); }
.target-band { position: absolute; z-index: 3; top: -6px; height: 36px; border: 4px solid #143d35; border-radius: 8px; background: rgba(255,255,255,.35); box-shadow: 0 0 0 4px rgba(255,211,77,.8); }
.meter-pin { position: absolute; z-index: 5; top: -17px; left: 50%; width: 5px; height: 51px; transform: translateX(-50%); border-radius: 4px; background: #102f29; transition: left 620ms cubic-bezier(.2,.85,.2,1); }
.meter-pin::after { position: absolute; left: 50%; bottom: -4px; width: 14px; height: 14px; content: ""; transform: translate(-50%,50%); border: 3px solid white; border-radius: 50%; background: var(--ink); }
.meter-pin span { position: absolute; left: 50%; top: -25px; min-width: 38px; padding: 3px 6px; transform: translateX(-50%); border: 2px solid white; border-radius: 8px; color: white; background: var(--ink); font-size: 11px; font-weight: 1000; text-align: center; }
.meter-numbers { display: flex; justify-content: space-between; margin-top: 4px; font-size: 8px; font-weight: 900; }
.indicator { position: absolute; z-index: 8; right: 17px; top: 15px; min-width: 180px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 3px solid var(--ink); border-radius: 13px; background: var(--cream); box-shadow: 4px 4px 0 var(--ink); transition: transform 180ms ease-out, opacity 180ms ease-out; }
.indicator.is-hidden { opacity: .42; filter: grayscale(1); }
.indicator-dot { width: 36px; height: 36px; flex: none; border: 3px solid var(--ink); border-radius: 11px; background: var(--liquid); transition: background 420ms ease-out; }
.indicator small, .indicator strong { display: block; }
.indicator small { color: var(--ink-soft); font-size: 8px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.indicator strong { margin-top: 2px; font-size: 13px; }
.difficulty { position: absolute; z-index: 8; right: 17px; bottom: 13px; width: 165px; padding: 9px 11px; border: 3px solid var(--ink); border-radius: 13px; background: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.difficulty span small, .difficulty span strong { display: block; }
.difficulty span small { color: var(--ink-soft); font-size: 8px; font-weight: 1000; text-transform: uppercase; }
.difficulty span strong { margin-top: 2px; font-size: 12px; }
.difficulty > div { height: 9px; margin-top: 6px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: #d9e6df; }
.difficulty i { display: block; width: 20%; height: 100%; background: linear-gradient(90deg,var(--lime),var(--leaf)); transition: width 280ms ease-out; }

.mascot { position: absolute; z-index: 12; left: 24px; bottom: 190px; width: 220px; height: 310px; pointer-events: none; }
.mascot img { position: absolute; left: 0; bottom: 0; width: 205px; height: 238px; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.05); transform-origin: 50% 100%; }
.speech { position: absolute; z-index: 3; top: 1px; left: 72px; width: 160px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 15px 15px 15px 4px; background: var(--cream); box-shadow: 4px 4px 0 var(--ink); font-size: 12px; font-weight: 900; line-height: 1.25; }
.toast { position: absolute; z-index: 40; left: 50%; top: 48%; max-width: 430px; padding: 12px 18px; opacity: 0; transform: translate(-50%,12px) scale(.96); border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); box-shadow: 5px 5px 0 var(--ink); font-size: 14px; font-weight: 950; text-align: center; transition: opacity 140ms ease-out, transform 140ms ease-out; pointer-events: none; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0) scale(1); }

.challenge { position: absolute; z-index: 20; left: 18px; right: 18px; bottom: 15px; min-height: 176px; display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.65fr); align-items: center; gap: 24px; padding: 18px 22px; border: 3px solid var(--ink); border-radius: 20px; background: rgba(255,253,242,.98); box-shadow: 0 7px 0 var(--ink); }
.challenge-copy span { display: block; margin-bottom: 5px; color: var(--leaf-dark); font-size: 10px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.challenge-copy h1 { max-width: 390px; margin: 0; font-size: clamp(24px,2.1vw,32px); line-height: 1.02; letter-spacing: -.045em; }
.challenge-copy p { max-width: 400px; margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 650; line-height: 1.35; }
.action-area { min-width: 0; }
.choice-grid { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.choice-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choice { min-height: 104px; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 3px solid #8aada0; border-radius: 15px; background: white; box-shadow: 0 5px 0 #b8cfc6; text-align: left; transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out; }
.choice:hover { transform: translateY(-3px); border-color: var(--leaf-dark); box-shadow: 0 8px 0 #9cc7aa; }
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #9cc7aa; }
.choice-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 13px; color: white; background: var(--leaf); font-size: 23px; font-weight: 1000; box-shadow: 2px 2px 0 var(--ink); }
.choice[data-value="lower"] .choice-icon, .choice[data-value="acidic"] .choice-icon, .choice[data-value="acid-1"] .choice-icon { background: var(--coral); }
.choice[data-value="higher"] .choice-icon, .choice[data-value="basic"] .choice-icon, .choice[data-value="base-1"] .choice-icon, .choice[data-value="base-3"] .choice-icon, .choice[data-value="strong"] .choice-icon { background: var(--blue); }
.choice[data-value="neutral"] .choice-icon, .choice[data-value="same"] .choice-icon { color: var(--ink); background: var(--lime); }
.choice strong, .choice small { display: block; }
.choice strong { font-size: 14px; line-height: 1.12; }
.choice small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; font-weight: 750; line-height: 1.2; }
.primary { min-width: 240px; min-height: 58px; display: block; margin: auto; padding: 0 24px; border: 3px solid var(--ink); border-radius: 15px; color: white; background: var(--leaf); box-shadow: 0 7px 0 var(--ink); font-size: 16px; font-weight: 1000; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.primary:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ink); }
.primary:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.primary.coral { background: var(--coral); }
.feedback-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
.feedback-card { min-height: 86px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border: 3px solid #94b7a9; border-radius: 15px; background: #effaf3; }
.feedback-card.error { border-color: #e28c83; background: #fff1ee; }
.feedback-badge { width: 47px; height: 47px; flex: none; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; color: white; background: var(--leaf); font-size: 23px; font-weight: 1000; }
.feedback-card.error .feedback-badge { background: var(--coral); }
.feedback-card strong, .feedback-card span { display: block; }
.feedback-card strong { font-size: 15px; }.feedback-card span { margin-top: 3px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }

.intro-card { position: absolute; z-index: 50; left: 50%; top: 50%; width: 530px; min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 54px; transform: translate(-50%,-50%); border: 4px solid var(--ink); border-radius: 26px; background: rgba(255,253,242,.98); box-shadow: 0 13px 0 var(--ink), 0 32px 64px rgba(8,45,34,.32); text-align: center; }
.intro-card::before { position: absolute; inset: 10px; content: ""; border: 3px dashed #9ec4ae; border-radius: 17px; pointer-events: none; }
.intro-seal { z-index: 1; width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 15px; transform: rotate(-6deg); border: 4px solid var(--ink); border-radius: 19px; background: var(--sun); box-shadow: 5px 5px 0 var(--ink); font-size: 25px; font-weight: 1000; }
.intro-card small { z-index: 1; color: var(--leaf-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.intro-card h1 { z-index: 1; margin: 6px 0 10px; font-size: 42px; line-height: 1; letter-spacing: -.05em; }
.intro-card p { z-index: 1; max-width: 400px; margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; font-weight: 650; line-height: 1.45; }
.intro-card button { z-index: 1; min-width: 250px; min-height: 56px; padding: 0 24px; border: 3px solid var(--ink); border-radius: 15px; color: white; background: var(--leaf); box-shadow: 0 7px 0 var(--ink); font-weight: 1000; }

.world.is-pouring .bottle-art { animation: bottle-pour 720ms ease-out; }
.world.is-pouring .flower-art { animation: flower-wobble 720ms ease-out; }
.world.is-correct .flower-art { animation: flower-pop 620ms cubic-bezier(.2,1.55,.4,1); }
.world.is-correct .sparkles i { animation: sparkle 740ms ease-out; }
.world.is-correct .mascot img { animation: mascot-cheer 650ms ease-out; }
.world.is-wrong .challenge { animation: gentle-shake 360ms ease-out; }
.world.is-wrong .mascot img { animation: mascot-think 500ms ease-out; }
.world.is-level-up::after { position: absolute; z-index: 60; inset: 0; content: "GARDEN LEVEL UP!"; display: grid; place-items: center; color: var(--cream); background: rgba(20,61,53,.25); text-shadow: 0 4px 0 var(--ink); font-size: 46px; font-weight: 1000; letter-spacing: -.05em; animation: level-up 900ms ease-out forwards; pointer-events: none; }
.world.scale-focus .meter { transform: translateX(-50%) scale(1.035); filter: drop-shadow(0 0 14px white); }
.world.indicator-focus .indicator { transform: scale(1.08); filter: drop-shadow(0 0 14px white); }

@keyframes bottle-pour { 0% { transform: rotate(-3deg); } 38% { transform: translate(26px,-16px) rotate(28deg) scale(1.08); } 100% { transform: rotate(-3deg); } }
@keyframes flower-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(.96); } 55% { transform: rotate(6deg) scale(1.05); } }
@keyframes flower-pop { 0% { transform: scale(.93); } 45% { transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1); } }
@keyframes sparkle { 0% { opacity: 0; transform: scale(.3) rotate(45deg); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateY(-38px) scale(1.3) rotate(135deg); } }
@keyframes mascot-cheer { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-16px) rotate(-4deg); } }
@keyframes mascot-think { 0%,100% { transform: rotate(0); } 35% { transform: rotate(3deg) translateY(3px); } 70% { transform: rotate(-2deg); } }
@keyframes gentle-shake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-7px); } 65% { transform: translateX(6px); } }
@keyframes level-up { 0% { opacity: 0; transform: scale(.7); } 24% { opacity: 1; transform: scale(1.04); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }

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