:root {
  color-scheme: light;
  --ink: #183f35;
  --muted: #57746a;
  --cream: #fffdf2;
  --leaf: #2d8a59;
  --leaf-dark: #17633f;
  --lime: #cbe86b;
  --sun: #ffd45a;
  --coral: #f47d5f;
  --pond: #3c9ca0;
  font-family: "Avenir Next", "Nunito Sans", ui-rounded, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1100px; min-height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid #196ca5; outline-offset: 4px; }
[hidden] { display: none !important; }

.game { position: relative; width: 100vw; height: 100vh; min-height: 720px; overflow: hidden; color: var(--ink); isolation: isolate; }
.world-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.world-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(234,248,219,.3), rgba(18,77,50,.2)), radial-gradient(circle at 50% 45%, rgba(255,255,240,.18), rgba(29,89,54,.18)); }

.lab-hud { position: absolute; z-index: 8; top: 24px; left: 50%; transform: translateX(-50%); width: min(1040px, calc(100% - 340px)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.mission-chip, .practice-hud { border: 1px solid rgba(255,255,255,.84); background: rgba(255,253,242,.92); box-shadow: 0 12px 30px rgba(22,67,48,.15); backdrop-filter: blur(12px); }
.mission-chip { padding: 10px 17px; border-radius: 18px; display: flex; align-items: baseline; gap: 12px; }
.mission-chip span { color: var(--leaf-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mission-chip strong { font-size: 15px; }
.practice-hud { display: flex; align-items: center; gap: 24px; padding: 8px 16px; border-radius: 18px; }
.practice-hud > div { display: grid; gap: 1px; min-width: 50px; }
.practice-hud span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.practice-hud strong { font-size: 19px; }
.difficulty-stat { min-width: 140px !important; }
.difficulty-stat i { width: 140px; height: 6px; overflow: hidden; border-radius: 99px; background: #dce9cf; }
.difficulty-stat i b { display: block; width: 16%; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--sun)); border-radius: inherit; transition: width 150ms ease-out; }

.lab-card { position: absolute; top: 78px; bottom: 32px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100% - 300px)); min-height: 620px; display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 22px; padding: 22px; border-radius: 36px; background: rgba(255,253,242,.94); border: 2px solid rgba(255,255,255,.86); box-shadow: 0 28px 80px rgba(21,63,43,.27), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(14px); }
.specimen-panel { display: flex; min-width: 0; flex-direction: column; padding: 16px 4px 10px 12px; }
.eyebrow { color: var(--leaf); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.specimen-panel h1 { margin: 8px 0 17px; font-family: "Cooper Black", "Avenir Next", ui-rounded, sans-serif; font-size: clamp(25px,2.2vw,34px); line-height: 1.02; letter-spacing: -.035em; }
.sticker-art { padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 12px 30px rgba(36,69,45,.14), inset 0 0 0 1px rgba(39,93,58,.08); }
.specimen-art { width: 196px; aspect-ratio: 1; transform: rotate(-1.5deg); }
.specimen-art.is-symbol { display: grid; place-items: center; }
.specimen-art.is-symbol::after { content: attr(data-symbol); font-size: 92px; filter: drop-shadow(0 8px 8px rgba(37,78,46,.14)); }
.sticker-art img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 18px; }
.field-note { margin-top: auto; padding: 14px 15px; min-height: 104px; border-radius: 18px; background: #f1f6d9; border: 1px solid #d6e4aa; transition: transform 150ms ease-out, background 150ms ease-out; }
.field-note.is-new { transform: rotate(-1deg) scale(1.025); background: #fff4b8; }
.field-note span { display: block; margin-bottom: 5px; color: var(--leaf-dark); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.field-note p { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 650; }

.cycle-workbench { min-width: 0; display: grid; grid-template-rows: minmax(350px,1fr) auto 78px 24px; align-items: center; }
.ring-wrap { position: relative; width: min(100%, 650px); height: 430px; margin: 0 auto; }
.cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle-ring ellipse { fill: rgba(202,232,107,.08); stroke: rgba(36,129,76,.46); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 7 17; marker-end: url(#arrowLeaf); }
.cycle-ring marker path { fill: var(--leaf); }
.ring-core { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #fffef2, #e7f1c2); border: 2px solid rgba(52,129,72,.2); box-shadow: inset 0 0 0 8px rgba(255,255,255,.45), 0 12px 28px rgba(28,89,53,.12); }
.ring-core span { color: var(--leaf-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ring-core strong { margin: 3px 0; font-size: 24px; }
.ring-core small { color: var(--muted); font-size: 11px; font-weight: 700; }
.slots { position: absolute; inset: 0; }
.cycle-slot { position: absolute; left: var(--x); top: var(--y); width: var(--slot-size,132px); height: 104px; transform: translate(-50%,-50%); padding: 8px; display: grid; place-items: center; border: 3px dashed rgba(43,116,72,.28); border-radius: 24px; background: rgba(247,251,230,.74); color: #6b8777; transition: transform 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out; }
.cycle-slot .slot-number { font-size: 13px; font-weight: 900; opacity: .65; }
.cycle-slot.is-next { border-style: solid; border-color: var(--coral); background: #fff8dc; box-shadow: 0 0 0 7px rgba(244,125,95,.13), 0 10px 22px rgba(50,88,53,.14); }
.cycle-slot.is-next::after { content: "Drop next"; position: absolute; bottom: -21px; padding: 3px 8px; border-radius: 99px; color: #8f3d2b; background: #ffe6d9; font-size: 10px; font-weight: 900; }
.cycle-slot.is-over { transform: translate(-50%,-50%) scale(1.05); background: #fff1a9; }
.cycle-slot.is-wrong { animation: gentleShake 260ms ease-out; border-color: #c84d3b; }
.cycle-slot.is-filled { border-style: solid; border-color: rgba(37,119,68,.35); background: #fff; box-shadow: 0 9px 22px rgba(31,78,48,.13); }
.cycle-slot.is-filled::after { display: none; }
.placed-stage { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 7px; animation: stageGrow 320ms cubic-bezier(.2,.9,.3,1.2); }
.stage-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: var(--stage-color,#eff5d8); font-size: 24px; }
.placed-stage strong { font-size: 13px; line-height: 1.05; text-align: left; overflow-wrap: anywhere; }
.ring-spark { position: absolute; z-index: 8; left: 50%; top: 50%; color: var(--sun); font-size: 54px; opacity: 0; pointer-events: none; text-shadow: 0 3px 0 #aa7622; }
.ring-spark.is-popping { animation: snapPop 520ms ease-out; }
.ring-wrap.is-observing .cycle-ring { animation: ringDiscover 520ms ease-out; }
.ring-wrap.is-observing .ring-core { animation: coreDiscover 520ms ease-out; }

.card-tray { min-height: 104px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 10px; border-radius: 24px; background: rgba(225,239,194,.66); border: 1px solid rgba(69,121,70,.14); }
.stage-card { position: relative; width: 124px; min-height: 86px; padding: 10px 8px 9px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; border-radius: 19px; color: var(--ink); background: #fff; box-shadow: 0 7px 0 #c9d9b3, 0 10px 18px rgba(27,67,41,.13); cursor: grab; touch-action: none; user-select: none; transition: transform 150ms ease-out, box-shadow 150ms ease-out, opacity 150ms ease-out; }
.stage-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 0 #c9d9b3, 0 15px 22px rgba(27,67,41,.15); }
.stage-card:active { cursor: grabbing; transform: translateY(2px) scale(.98); box-shadow: 0 4px 0 #c9d9b3; }
.stage-card .stage-icon { width: 39px; height: 39px; font-size: 26px; }
.stage-card strong { max-width: 100%; font-size: 13px; line-height: 1.08; text-align: center; }
.stage-card.is-dragging { opacity: .35; transform: scale(.95); }
.stage-card.is-wrong { animation: cardSpring 360ms ease-out; }
.stage-card[disabled] { pointer-events: none; opacity: 0; transform: translateY(-20px) scale(.6); }
.decision-area { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; }
.primary, .explain-choice { min-height: 50px; border: 0; border-radius: 17px; cursor: pointer; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.primary { padding: 0 27px; color: #fff; background: var(--leaf); box-shadow: 0 6px 0 var(--leaf-dark), 0 10px 20px rgba(20,86,51,.18); font-weight: 900; }
.primary:hover { transform: translateY(-2px); }
.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--leaf-dark); }
.explain-choice { max-width: 220px; padding: 9px 14px; color: var(--ink); background: #fff; border: 2px solid #cfe0b7; box-shadow: 0 5px 0 #c5d3ae; font-size: 13px; font-weight: 800; line-height: 1.18; }
.explain-choice:hover { transform: translateY(-2px); border-color: var(--leaf); }
.feedback { min-height: 22px; margin: 0; color: #9f3f2f; text-align: center; font-size: 13px; font-weight: 800; }

.mascot { position: absolute; z-index: 10; left: 22px; bottom: 25px; width: 175px; pointer-events: none; }
.mascot-art { width: 160px; height: 160px; padding: 7px; transform: rotate(2deg); }
.mascot p { position: absolute; z-index: 2; left: 106px; top: -52px; width: 165px; margin: 0; padding: 12px 14px; border-radius: 18px 18px 18px 5px; background: #fffdf2; box-shadow: 0 10px 28px rgba(30,70,44,.2); font-size: 13px; font-weight: 800; line-height: 1.25; }
.mascot.is-happy .mascot-art { animation: mascotHop 560ms ease-out; }
.mascot.is-thinking .mascot-art { animation: mascotTilt 400ms ease-out; }
.celebration { position: absolute; z-index: 20; left: 50%; top: 50%; width: 1px; height: 1px; pointer-events: none; }
.celebration i { position: absolute; color: var(--sun); opacity: 0; font-style: normal; font-size: 20px; }
.celebration.is-showing i { animation: confetti 780ms ease-out forwards; }
.celebration i:nth-child(1){--x:-390px;--y:-230px;color:var(--coral)} .celebration i:nth-child(2){--x:-310px;--y:250px;color:var(--pond)} .celebration i:nth-child(3){--x:-210px;--y:-290px;color:var(--sun)} .celebration i:nth-child(4){--x:-90px;--y:280px;color:var(--leaf)} .celebration i:nth-child(5){--x:20px;--y:-310px;color:var(--coral)} .celebration i:nth-child(6){--x:110px;--y:270px;color:var(--pond)} .celebration i:nth-child(7){--x:220px;--y:-270px;color:var(--sun)} .celebration i:nth-child(8){--x:310px;--y:230px;color:var(--leaf)} .celebration i:nth-child(9){--x:390px;--y:-190px;color:var(--coral)} .celebration i:nth-child(10){--x:60px;--y:-240px;color:var(--pond)}
.toast { position: absolute; z-index: 30; left: 50%; top: 96px; transform: translate(-50%,-12px); padding: 10px 17px; border-radius: 99px; color: #fff; background: #183f35; opacity: 0; pointer-events: none; font-size: 13px; font-weight: 850; transition: opacity 150ms ease-out, transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes stageGrow { 0%{transform:scale(.45) rotate(-8deg);opacity:.2} 65%{transform:scale(1.08) rotate(2deg)} 100%{transform:scale(1);opacity:1} }
@keyframes snapPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-20deg)} 40%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(22deg)} }
@keyframes gentleShake { 25%{transform:translate(calc(-50% - 7px),-50%) rotate(-1deg)} 65%{transform:translate(calc(-50% + 6px),-50%) rotate(1deg)} }
@keyframes cardSpring { 20%{transform:translateX(-9px) rotate(-2deg)} 55%{transform:translateX(7px) rotate(2deg)} 80%{transform:translateX(-3px)} }
@keyframes mascotHop { 35%{transform:translateY(-17px) rotate(-3deg)} 65%{transform:translateY(0) rotate(3deg)} }
@keyframes mascotTilt { 35%{transform:rotate(-4deg)} 70%{transform:rotate(3deg)} }
@keyframes confetti { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(520deg) scale(1.15)} }
@keyframes ringDiscover { 45%{transform:scale(1.035);filter:drop-shadow(0 0 12px rgba(255,212,90,.8))} }
@keyframes coreDiscover { 45%{transform:translate(-50%,-50%) scale(1.08)} }

@media (max-width: 1240px) {
  .lab-card { width: calc(100% - 260px); grid-template-columns: 205px minmax(0,1fr); }
  .specimen-art { width: 175px; }
  .stage-card { width: 108px; }
  .cycle-slot { --slot-size: 118px; }
  .mascot { left: 9px; width: 145px; }
  .mascot-art { width: 140px; height: 140px; }
  .mascot p { left: 87px; width: 145px; }
}

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