:root {
  color-scheme: light;
  --navy: #092f43;
  --navy-2: #124b5d;
  --cream: #fff8e8;
  --paper: #fffdf6;
  --teal: #16b7a3;
  --teal-dark: #08786f;
  --blue: #3698e7;
  --purple: #8a62d4;
  --coral: #f36f55;
  --coral-dark: #b94232;
  --yellow: #ffd34e;
  --green: #57c271;
  --muted: #55717d;
  font-family: ui-rounded, "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: 1100px; min-height: 720px; overflow: hidden; }
body { margin: 0; color: var(--navy); background: #d9eef0; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 4px solid #ffe063; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.game { height: 100%; display: grid; grid-template-rows: minmax(500px, 1fr) 205px; gap: 12px; padding: 14px 16px 16px; }
.factory { position: relative; min-height: 0; overflow: hidden; border: 4px solid #0a5262; border-radius: 30px; background: #62cad0; box-shadow: 0 9px 0 #073c4c, 0 22px 45px rgba(4,44,58,.22); isolation: isolate; }
.world-art { position: absolute; z-index: -4; inset: -3%; width: 106%; height: 106%; object-fit: cover; }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(7,59,71,.12), rgba(255,255,255,.06) 45%, rgba(7,59,71,.15)), radial-gradient(circle at 50% 50%, transparent 25%, rgba(4,54,66,.15)); }
.factory::after { position: absolute; z-index: 20; inset: 0; border: 4px solid rgba(255,255,255,.35); border-radius: 25px; content: ""; pointer-events: none; }

.status-dock { position: absolute; z-index: 12; top: 14px; left: 16px; display: flex; align-items: stretch; gap: 7px; padding: 7px; border: 2px solid rgba(9,47,67,.16); border-radius: 18px; background: rgba(255,253,246,.94); box-shadow: 0 7px 0 rgba(9,47,67,.18); backdrop-filter: blur(8px); }
.mode-pill { min-width: 156px; padding: 7px 13px; border-radius: 12px; color: white; background: var(--navy); }
.mode-pill span, .stat > span { display: block; font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.mode-pill span { color: #9eece2; }
.mode-pill b { display: block; margin-top: 2px; font-size: 15px; }
.stat { min-width: 66px; padding: 6px 10px 4px; text-align: center; border-left: 1px solid #d8e2df; }
.stat > span { color: var(--muted); }
.stat b { display: block; margin-top: 1px; font-size: 23px; line-height: 1; }
.streak-stat b { color: #b94d2d; }
.streak-stat i { color: var(--yellow); font-style: normal; filter: drop-shadow(0 1px 0 #8a5c00); }
.difficulty { width: 140px; padding: 5px 9px 3px; border-left: 1px solid #d8e2df; }
.difficulty > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.difficulty > div:first-child b { font-size: 16px; }
.difficulty-track { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 9px; background: #d9e4df; }
.difficulty-track i { display: block; height: 100%; width: 18%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--yellow), var(--coral)); transition: width 280ms ease-out; }

.work-order { position: absolute; z-index: 9; top: 14px; right: 16px; width: 250px; padding: 13px 17px 12px 25px; transform: rotate(1deg); border: 3px solid #e2b437; border-radius: 6px 15px 15px 6px; background: #fff0a9; box-shadow: 0 7px 0 rgba(101,72,10,.2); }
.work-order::before { position: absolute; left: 8px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: repeating-linear-gradient(#d89b31 0 7px, transparent 7px 13px); content: ""; }
.work-order span { color: #865f0c; font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.work-order strong { display: block; margin-top: 3px; font-size: 16px; }
.work-order p { margin: 3px 0 0; color: #6d5a2c; font-size: 12px; font-weight: 700; }

.cell-floor { position: absolute; z-index: 2; inset: 82px 110px 72px 90px; }
.organelle { position: absolute; z-index: 4; width: 180px; height: 185px; transform: translate(-50%,-50%); transition: transform 150ms ease-out, filter 150ms ease-out, opacity 150ms ease-out; }
.organelle img { position: absolute; left: 50%; top: 40%; width: 142px; height: 142px; object-fit: contain; transform: translate(-50%,-50%); filter: drop-shadow(0 8px 2px rgba(5,46,58,.25)); }
.organelle > div:last-child { position: absolute; left: 50%; bottom: 0; min-width: 168px; padding: 8px 11px 7px; transform: translateX(-50%); border: 3px solid var(--navy); border-radius: 12px; background: var(--paper); box-shadow: 0 5px 0 rgba(9,47,67,.25); text-align: center; }
.organelle strong { display: block; font-size: 14px; line-height: 1.05; }
.organelle small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.machine-light { position: absolute; z-index: 5; top: 10px; right: 18px; width: 18px; height: 18px; border: 4px solid white; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--navy), 0 0 14px rgba(87,194,113,.8); }
.nucleus { left: 18%; top: 46%; }
.ribosome { left: 43%; top: 34%; }
.mitochondria { left: 53%; top: 76%; }
.membrane { left: 79%; top: 48%; }
.gate-art { position: absolute !important; left: 50% !important; top: 39% !important; bottom: auto !important; min-width: 0 !important; width: 125px; height: 105px; padding: 0 !important; transform: translate(-50%,-50%) !important; border: 7px solid var(--navy) !important; border-radius: 20px !important; background: #39c5b2 !important; box-shadow: inset 0 0 0 5px rgba(255,255,255,.26), 0 8px 2px rgba(5,46,58,.24) !important; }
.gate-art i { position: absolute; top: 13px; bottom: 13px; width: 35px; border: 5px solid var(--navy); background: #8ce4d5; }
.gate-art i:first-child { left: 12px; border-radius: 10px 3px 3px 10px; }
.gate-art i:nth-child(2) { right: 12px; border-radius: 3px 10px 10px 3px; }
.gate-art b { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; transform: translate(-50%,-50%); border: 4px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--yellow); font-size: 21px; }
.organelle.is-focus { z-index: 10; transform: translate(-50%,-50%) scale(1.12); filter: drop-shadow(0 0 6px white) drop-shadow(0 0 16px var(--yellow)); }
.organelle.is-working img, .organelle.is-working .gate-art { animation: machine-work 480ms ease-in-out 3; }
.organelle.is-working .machine-light { background: var(--yellow); animation: light-blink 180ms steps(2) 8; }
.organelle.is-disabled { opacity: .38; filter: grayscale(.8); }
.organelle.is-disabled .machine-light { background: var(--coral); box-shadow: 0 0 0 3px var(--navy); }

.conveyor { position: absolute; z-index: 1; left: 22%; right: 18%; top: 52%; height: 34px; transform: rotate(3deg); border: 5px solid var(--navy); border-radius: 999px; background: #44758a; box-shadow: 0 6px 0 rgba(9,47,67,.25); }
.conveyor i { position: absolute; top: 5px; width: 14px; height: 14px; border: 3px solid var(--navy); border-radius: 50%; background: #b9e3e1; }
.conveyor i:nth-child(1) { left: 10%; }.conveyor i:nth-child(2) { left: 30%; }.conveyor i:nth-child(3) { left: 50%; }.conveyor i:nth-child(4) { left: 70%; }.conveyor i:nth-child(5) { left: 90%; }
.message-token { position: absolute; z-index: 12; left: 25%; top: 42%; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 3px solid var(--navy); border-radius: 10px; color: white; background: var(--purple); box-shadow: 0 5px 0 rgba(9,47,67,.25); font-size: 11px; font-weight: 900; transition: left 650ms ease-in-out, top 650ms ease-in-out; }
.message-token i { padding: 3px 5px; border-radius: 5px; color: var(--navy); background: white; font-style: normal; font-size: 9px; }
.protein-crates { position: absolute; z-index: 8; right: 5%; bottom: 4%; display: flex; align-items: end; gap: 4px; }
.protein-crates i { width: 31px; height: 28px; border: 4px solid var(--navy); border-radius: 5px; background: var(--coral); box-shadow: inset 0 0 0 3px #ffab79, 0 4px 0 rgba(9,47,67,.24); animation: crate-pop 330ms cubic-bezier(.2,.8,.25,1.25); }

.meters { position: absolute; z-index: 11; left: 16px; bottom: 13px; width: 255px; padding: 10px 13px; border: 2px solid rgba(9,47,67,.2); border-radius: 15px; background: rgba(255,253,246,.93); box-shadow: 0 6px 0 rgba(9,47,67,.18); }
.meters > div:nth-child(odd) { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.meters > div:nth-child(odd) b { color: var(--navy); }
.meters > div:nth-child(3) { margin-top: 7px; }
.energy-dot, .output-dot { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: var(--yellow); }
.output-dot { background: var(--coral); }
.meter { height: 8px; margin-top: 4px; overflow: hidden; border-radius: 8px; background: #d8e2df; }
.meter i { display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--yellow); transition: width 420ms ease-out, background 150ms; }
.output-meter i { width: 0; background: var(--coral); }

.control-deck { position: relative; display: grid; grid-template-columns: 205px minmax(270px, .72fr) minmax(510px, 1.4fr); align-items: center; gap: 18px; min-height: 0; padding: 15px 70px 15px 18px; border: 3px solid #0a5262; border-radius: 24px; background: var(--paper); box-shadow: 0 7px 0 #073c4c; }
.foreman-wrap { position: relative; align-self: stretch; }
.foreman { position: absolute; left: 15px; bottom: -15px; width: 136px; height: 168px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 7px 2px rgba(9,47,67,.2)); transform-origin: bottom center; }
.foreman-bubble { position: absolute; z-index: 2; left: 105px; top: -2px; width: 124px; padding: 8px 10px; border: 3px solid var(--navy); border-radius: 14px 14px 14px 4px; background: #fff2a8; box-shadow: 0 4px 0 rgba(9,47,67,.16); font-size: 10px; font-weight: 900; line-height: 1.25; }
.foreman-wrap.is-cheering .foreman { animation: mascot-cheer 600ms cubic-bezier(.2,.8,.3,1.2); }
.foreman-wrap.is-worried .foreman { animation: mascot-worry 340ms ease-out; }
.briefing { padding-left: 8px; }
.briefing > span { color: var(--teal-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.briefing h1 { margin: 4px 0 5px; max-width: 440px; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.02; letter-spacing: -.035em; }
.briefing p { margin: 0; max-width: 430px; color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.35; }
.decision-content { min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.choice-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.choice { position: relative; min-height: 74px; padding: 10px 9px 8px; border: 3px solid #cadbdc; border-radius: 15px; background: white; box-shadow: 0 5px 0 #b7cccf; text-align: left; transition: transform 120ms ease-out, border-color 120ms, box-shadow 120ms; }
.choice:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 8px 0 #8dc8c2; }
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #8dc8c2; }
.choice strong { display: block; padding-right: 30px; font-size: 14px; line-height: 1.05; }
.choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.2; }
.symbol { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border: 2px solid var(--navy); border-radius: 8px; color: var(--navy); background: var(--yellow); font-size: 10px; font-weight: 950; }
.primary { min-height: 54px; min-width: 250px; padding: 12px 23px; border: 3px solid var(--navy); border-radius: 15px; color: white; background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); font-size: 15px; font-weight: 950; transition: transform 120ms ease-out, box-shadow 120ms; }
.primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--coral-dark); }
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--coral-dark); }
.evidence { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid #aad7c1; border-radius: 16px; background: #e4faed; }
.evidence-badge { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--navy); border-radius: 50%; color: white; background: var(--green); font-size: 20px; font-weight: 950; }
.evidence div { flex: 1; }
.evidence strong { display: block; font-size: 13px; }
.evidence p { margin: 3px 0 0; color: var(--muted); font-size: 10px; font-weight: 700; }
.evidence .primary { min-width: 160px; min-height: 46px; padding: 8px 14px; font-size: 12px; }
.practice-feedback { padding: 13px 16px; border: 3px solid #aad7c1; border-radius: 16px; background: #e4faed; }
.practice-feedback.is-miss { border-color: #efb2a7; background: #fff0ed; }
.practice-feedback strong { display: block; font-size: 16px; }
.practice-feedback p { margin: 4px 0 9px; color: var(--muted); font-size: 11px; }
.practice-feedback .primary { min-width: 190px; min-height: 43px; padding: 7px 15px; font-size: 12px; }
.mute { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #c8d9d9; border-radius: 50%; background: white; box-shadow: 0 4px 0 #b7cccf; font-size: 20px; font-weight: 900; }
.mute .sound-off, .mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: inline; }

.callout { position: absolute; z-index: 30; left: 50%; top: 84px; max-width: 520px; padding: 10px 17px; transform: translate(-50%,-14px) scale(.95); border: 3px solid var(--navy); border-radius: 999px; color: white; background: var(--navy); box-shadow: 0 6px 0 rgba(9,47,67,.25); font-size: 12px; font-weight: 900; opacity: 0; pointer-events: none; transition: 160ms ease-out; }
.callout.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.fx-layer { position: absolute; z-index: 25; inset: 0; pointer-events: none; }
.fx-layer i { position: absolute; left: 50%; top: 48%; width: 14px; height: 14px; border: 3px solid var(--navy); background: var(--yellow); animation: confetti 780ms ease-out forwards; }
.factory.is-shaking { animation: factory-shake 300ms ease-out; }

@keyframes machine-work { 35% { transform: translate(-50%,-54%) rotate(-2deg) scale(1.05); } 70% { transform: translate(-50%,-48%) rotate(2deg); } }
@keyframes light-blink { 50% { opacity: .25; } }
@keyframes crate-pop { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mascot-cheer { 30% { transform: translateY(-16px) rotate(-6deg) scale(1.06); } 65% { transform: translateY(-4px) rotate(5deg); } }
@keyframes mascot-worry { 25% { transform: translateX(-7px) rotate(-3deg); } 75% { transform: translateX(7px) rotate(3deg); } }
@keyframes factory-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes confetti { to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(300deg) scale(.6); } }

@media (max-height: 800px) {
  .game { grid-template-rows: minmax(475px,1fr) 188px; }
  .cell-floor { inset: 74px 100px 62px 80px; }
  .organelle { transform: translate(-50%,-50%) scale(.92); }
  .organelle.is-focus { transform: translate(-50%,-50%) scale(1.04); }
  .foreman { height: 150px; }
}

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