:root {
  --ink: #183a38;
  --muted: #617773;
  --cream: #fffaf0;
  --teal: #177d7f;
  --teal-dark: #0a565b;
  --coral: #e5614e;
  --coral-dark: #b33f34;
  --gold: #efb64c;
  --cold: #4da9c7;
  --hot: #ed7a3a;
  --flow-speed: 1.2s;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; overflow: hidden; color: var(--ink); background: #e8f0eb; font-family: ui-rounded, "Avenir Next", "Nunito Sans", system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid #123d70; outline-offset: 4px; }
.game-shell { width: min(1330px, calc(100vw - 44px)); height: min(824px, calc(100vh - 34px)); margin: 17px auto; display: grid; grid-template-rows: 50px minmax(0,1fr) 166px; gap: 13px; }
.topline { display: grid; grid-template-columns: 260px 1fr 270px; align-items: center; padding: 0 10px; }
.brand-mark { display: flex; flex-direction: column; gap: 2px; }.brand-mark span,.eyebrow,.mission-copy>span { color: var(--teal-dark); font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }.brand-mark strong { font-size: 16px; }
.progress { display: flex; justify-content: center; gap: 8px; }.progress i { width: 33px; height: 7px; border-radius: 99px; background: #cad8d0; transition: transform 150ms, background 150ms; }.progress i.current { background: var(--gold); transform: scaleX(1.14); }.progress i.done { background: var(--teal); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }.practice-stats { display: flex; gap: 14px; color: var(--muted); font-size: 12px; font-weight: 800; }.practice-stats b { color: var(--ink); font-size: 18px; }
.icon-button { width: 44px; height: 44px; border: 0; border-radius: 15px; color: white; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); cursor: pointer; font-size: 20px; }

.world { position: relative; min-height: 0; display: grid; grid-template-columns: 170px minmax(0,1fr) 220px; gap: 16px; overflow: hidden; padding: 20px; border-radius: 32px; background: linear-gradient(180deg,#b8e1df 0 68%,#d6c0a2 68%); box-shadow: 0 19px 52px rgba(35,67,54,.15); isolation: isolate; }
.street { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg,rgba(236,252,248,.45),rgba(143,202,199,.2)); }
.street i { position: absolute; bottom: 31%; width: 70px; height: 160px; border-radius: 24px 24px 0 0; background: rgba(60,126,132,.12); }.street i:nth-child(1){left:9%;height:120px}.street i:nth-child(2){left:74%;height:190px}.street i:nth-child(3){left:87%;height:140px}
.cart-side,.evidence-panel { align-self: center; min-height: 370px; padding: 18px; border-radius: 24px; background: rgba(255,250,240,.9); box-shadow: 0 11px 29px rgba(48,72,55,.12); }
.cart-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #147f82; color: white; }
.awning { position: absolute; top: 0; left: 0; right: 0; height: 96px; background: repeating-linear-gradient(90deg,var(--coral) 0 40px,#fff1db 40px 80px); clip-path: polygon(0 0,100% 0,100% 78%,92% 100%,84% 78%,76% 100%,68% 78%,60% 100%,52% 78%,44% 100%,36% 78%,28% 100%,20% 78%,12% 100%,0 78%); }
.cart-badge { display: grid; place-items: center; min-height: 150px; border: 4px solid rgba(255,255,255,.6); border-radius: 24px; background: rgba(255,255,255,.12); }.cart-badge span { font-size: 30px; font-weight: 1000; letter-spacing: .1em; }.cart-badge i { color: #f2864e; font-size: 44px; }
.cart-side p { margin: 18px 0 0; font-size: 13px; font-weight: 800; line-height: 1.35; }

.thermal-stage { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(24,78,72,.1); border-radius: 29px; background: radial-gradient(circle at 50% 50%,#fffdf7 0 38%,#edf6ef 76%); box-shadow: inset 0 1px 0 white, 0 12px 29px rgba(42,71,54,.1); }
.environment { position: absolute; top: 17px; left: 18px; z-index: 8; min-width: 116px; padding: 10px 12px; display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; border-radius: 17px; background: rgba(255,255,255,.91); box-shadow: 0 7px 20px rgba(40,71,58,.12); }.environment>span { grid-row: 1/3; font-size: 26px; }.environment b { font-size: 20px; }.environment small { color: var(--muted); font-size: 10px; font-weight: 800; }
.pot-drop { position: absolute; left: 50%; top: 51%; z-index: 5; width: 334px; height: 330px; transform: translate(-50%,-50%); border-radius: 48%; cursor: pointer; }
.pot-drop.drop-ready { filter: drop-shadow(0 0 18px rgba(239,182,76,.75)); }
.pot-shell { position: absolute; left: 50%; bottom: 24px; width: 270px; height: 218px; transform: translateX(-50%); overflow: hidden; border: 14px solid #f3eee0; border-top-width: 10px; border-radius: 27px 27px 62px 62px; background: #f2eee2; box-shadow: inset 0 0 0 7px #9eb4ae, 0 18px 25px rgba(41,62,50,.2); transition: background 170ms ease-out, border-color 170ms ease-out; }
.pot-shell.dark { background: #385057; border-color: #4a6065; }.pot-shell.shiny { background: linear-gradient(120deg,#eaf4f0,#a9c5c1,#f7fbf6); }
.soup { position: absolute; left: 18px; right: 18px; top: 23px; bottom: 27px; overflow: hidden; border-radius: 18px 18px 47px 47px; background: linear-gradient(180deg,#f59d43,#de5d2f); box-shadow: inset 0 12px 18px rgba(255,216,103,.38); transition: filter 240ms; }
.particles { position: absolute; inset: 0; }.particles i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffd66a; opacity: .75; animation: particle-rise var(--flow-speed) ease-in-out infinite alternate; }.particles i:nth-child(2n){animation-delay:-.4s}.particles i:nth-child(3n){animation-delay:-.8s}
.pot-face { position: absolute; left: 50%; bottom: 31px; width: 74px; height: 35px; transform: translateX(-50%); }.pot-face i { position: absolute; top: 0; width: 10px; height: 13px; border-radius: 50%; background: #233936; }.pot-face i:first-child{left:12px}.pot-face i:nth-child(2){right:12px}.pot-face b { position: absolute; left: 50%; top: 13px; width: 28px; height: 13px; transform: translateX(-50%); border-bottom: 4px solid #233936; border-radius: 0 0 50% 50%; }
.wrap { position: absolute; left: 50%; bottom: 4px; z-index: -1; width: 316px; height: 244px; transform: translateX(-50%); border: 22px solid transparent; border-radius: 43px 43px 74px 74px; transition: border-color 180ms, box-shadow 180ms, filter 180ms; }.wrap.cloth { border-color: #e56752; background: repeating-linear-gradient(45deg,transparent 0 12px,rgba(120,43,37,.12) 13px 14px); box-shadow: inset 0 0 0 7px #f1aa87; }.wrap.airgap { border-color: #78b7b3; box-shadow: inset 0 0 0 8px rgba(255,255,255,.85),0 0 0 7px #dff0eb; }.wrap.metal { border-color: #99aaa9; background: linear-gradient(115deg,#cad6d2,#849a99,#e8efeb); }.wrap.bare { opacity: .08; border-color: #809895; }
.lid { position: absolute; left: 50%; top: 68px; z-index: 9; width: 284px; height: 34px; transform: translateX(-50%); border: 8px solid #869c99; border-radius: 50%; background: #f5f0e5; box-shadow: 0 9px 10px rgba(36,56,48,.18); transition: transform 190ms ease-out; }.lid i { position: absolute; left: 50%; top: -22px; width: 42px; height: 24px; transform: translateX(-50%); border-radius: 13px 13px 5px 5px; background: var(--teal-dark); }.lid.open { transform: translate(-38%,-42px) rotate(11deg); }
.steam { position: absolute; left: 50%; top: 32px; z-index: 4; width: 170px; height: 100px; transform: translateX(-50%); }.steam i { position: absolute; bottom: 0; width: 25px; height: 78px; border: 8px solid rgba(255,255,255,.62); border-left: 0; border-bottom: 0; border-radius: 50%; animation: steam 1.4s ease-in-out infinite; }.steam i:nth-child(1){left:24px}.steam i:nth-child(2){left:72px;animation-delay:-.5s}.steam i:nth-child(3){left:120px;animation-delay:-.9s}.steam.closed { opacity: .24; transform: translateX(-50%) scale(.65); }
.transfer-arrow { position: absolute; top: 48%; z-index: 3; width: 146px; height: 34px; }.transfer-arrow.left { left: 7%; }.transfer-arrow.right { right: 7%; }.transfer-arrow i { position: absolute; inset: 11px 0; border-radius: 99px; background: var(--hot); animation: flow var(--flow-speed) ease-in-out infinite alternate; }.transfer-arrow i::after { content:""; position:absolute; right:-17px; top:-10px; border:17px solid transparent; border-left-color:var(--hot); border-right:0; }.transfer-arrow.inward i::after { right:auto; left:-17px; border-left:0; border-right:17px solid var(--hot); }.transfer-arrow.left.outward i { transform: rotate(180deg); }.transfer-arrow.left.inward i { transform: none; }.transfer-arrow.right.outward i { transform:none; }.transfer-arrow.right.inward i { transform:rotate(180deg); }
.temperature-card { position: absolute; z-index: 7; width: 150px; padding: 11px 13px; border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 7px 20px rgba(43,67,54,.11); }.temperature-card span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing:.08em; }.temperature-card b { display:block; margin:2px 0 7px; font-size:20px; }.temperature-card>i { display:block; height:7px; overflow:hidden; border-radius:99px; background:#dbe5df; }.temperature-card em { display:block; width:50%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cold),var(--hot)); transition:width 180ms; }.soup-card { left: 16px; bottom: 18px; }.rate-card { right: 16px; bottom: 18px; }.rate-card em { background: var(--coral); }
.thermal-vision { position:absolute; right:15px; top:15px; z-index:12; width:210px; padding:12px; border-radius:18px; color:white; background:rgba(22,48,52,.92); box-shadow:0 9px 25px rgba(19,36,38,.28); }.thermal-vision>span,.thermogram>span { display:block; margin-bottom:8px; color:#f7c85b; font-size:10px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }.thermal-vision>div { display:grid; grid-template-columns:28px 1fr; align-items:center; gap:8px; margin-top:7px; }.thermal-vision i { width:25px; height:8px; border-radius:99px; background:#ef7e43; }.thermal-vision i.air { background:#57b8cd }.thermal-vision i.rays { background:#f6c85c }.thermal-vision b { font-size:12px; }.thermal-vision small { display:block; color:#c7dbd8; font-size:9px; }
.thermogram { position:absolute; right:15px; top:15px; z-index:12; width:208px; padding:12px; border-radius:18px; color:white; background:#173940; box-shadow:0 9px 25px rgba(19,36,38,.28); }.thermogram>div { height:92px; display:grid; place-items:center; border-radius:11px; background:radial-gradient(circle,#fff26c 0 14%,#f26a37 25%,#9e2a74 49%,#244b92 73%,#11274f 100%); }.thermogram>div i { width:74px; height:50px; border-radius:15px 15px 24px 24px; border:5px solid rgba(255,255,255,.55); }.thermogram small { display:block; margin-top:7px; color:#c9dad8; font-size:9px; line-height:1.3; }
.impact { position:absolute; left:50%; top:42%; z-index:20; transform:translate(-50%,-50%) scale(.7); opacity:0; font-size:42px; font-weight:1000; text-shadow:0 4px 0 white; pointer-events:none; }.impact.show { animation: impact 700ms ease-out forwards; }

.evidence-panel { display:flex; flex-direction:column; gap:15px; }.direction-card { display:grid; grid-template-columns:1fr; gap:3px; padding:16px; border-radius:18px; background:#edf3ed; text-align:center; }.direction-card small { color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; }.direction-card b { font-size:19px; }.direction-card i { color:var(--coral); font-size:26px; font-style:normal; }.journey-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:13px; border-radius:17px; background:#fff; box-shadow:inset 0 0 0 1px #dce5dd; }.journey-card span { font-size:17px; font-weight:950; }.journey-card i { height:6px; border-radius:99px; background:linear-gradient(90deg,var(--hot),var(--cold)); }.evidence-panel p { margin:auto 0 0; color:var(--muted); font-size:13px; font-weight:760; line-height:1.4; }
.celebration { position:absolute; inset:0; z-index:30; pointer-events:none; }.celebration i { position:absolute; left:50%; top:50%; width:10px; height:19px; border-radius:3px; opacity:0; }.celebration.on i { animation:confetti 800ms ease-out forwards; }

.action-tray { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(600px,1.7fr); align-items:center; gap:26px; padding:22px 28px; border-radius:27px; background:var(--cream); box-shadow:0 12px 34px rgba(36,57,47,.11); }.mission-copy h1 { margin:5px 0 4px; max-width:520px; font-size:clamp(23px,2vw,31px); line-height:1.05; letter-spacing:-.035em; }.mission-copy p { margin:0; color:var(--muted); font-size:13px; font-weight:720; }.controls { min-width:0; display:flex; justify-content:flex-end; align-items:center; gap:11px; }
.option,.choice,.primary { min-height:60px; border:0; border-radius:17px; cursor:pointer; transition:transform 140ms ease-out,box-shadow 140ms ease-out; }.option:hover,.choice:hover,.primary:hover { transform:translateY(-3px); }.option:active,.choice:active,.primary:active { transform:translateY(1px) scale(.98); }
.option { min-width:155px; padding:10px 14px; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:9px; color:var(--ink); background:#edf2ed; text-align:left; font-weight:900; touch-action:none; }.option span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:white; background:var(--teal); font-size:20px; }.option small { display:block; color:var(--muted); font-size:10px; }.choice { min-width:170px; padding:11px 15px; color:var(--ink); background:#edf2ed; font-weight:900; }.primary { min-width:210px; padding:14px 24px; color:white; background:var(--teal); box-shadow:0 7px 0 var(--teal-dark); font-size:16px; font-weight:950; }.primary.coral { background:var(--coral); box-shadow:0 7px 0 var(--coral-dark); }.primary.gold { color:#55380c; background:var(--gold); box-shadow:0 7px 0 #b97d19; }.feedback { max-width:365px; color:var(--muted); font-size:14px; font-weight:750; line-height:1.35; }.feedback strong { display:block; color:var(--ink); font-size:19px; }
.option.pointer-dragging { opacity:.35; }
.pointer-drag-ghost { position:fixed!important; z-index:1000; width:190px; margin:0; pointer-events:none; transform:translate(-50%,-50%) rotate(-2deg) scale(1.04); box-shadow:0 18px 36px rgba(24,58,56,.28); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@keyframes particle-rise { to { transform:translateY(-17px) translateX(5px); opacity:.35; } } @keyframes steam { 0%{transform:translateY(10px) scale(.7);opacity:.2}100%{transform:translateY(-12px) scale(1.1);opacity:.7} } @keyframes flow { to { filter:brightness(1.18); opacity:.55; } } @keyframes impact { 20%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-2deg)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1)} } @keyframes confetti { 15%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-185px) rotate(220deg)} }
@media (max-width:900px){body{overflow:auto}.game-shell{width:calc(100vw - 20px);height:auto;min-height:calc(100vh - 20px);margin:10px auto;grid-template-rows:50px minmax(520px,1fr) auto}.topline{grid-template-columns:1fr auto}.progress{display:none}.world{grid-template-columns:minmax(0,1fr);padding:12px}.cart-side{display:none}.thermal-stage{min-height:496px}.evidence-panel{position:absolute;right:18px;top:18px;z-index:14;width:180px;min-height:0;padding:12px;gap:8px}.evidence-panel .direction-card{padding:9px}.evidence-panel .journey-card{padding:8px}.evidence-panel p{display:none}.action-tray{grid-template-columns:1fr;gap:15px;padding:18px}.controls{justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:560px){.game-shell{grid-template-rows:50px minmax(470px,1fr) auto}.brand-mark span{font-size:9px}.brand-mark strong{font-size:14px}.world{min-height:470px}.thermal-stage{min-height:446px}.pot-drop{transform:translate(-50%,-50%) scale(.78)}.transfer-arrow{width:82px}.transfer-arrow.left{left:3%}.transfer-arrow.right{right:3%}.temperature-card{width:122px;padding:8px}.temperature-card b{font-size:16px}.evidence-panel{display:none}.option{min-width:min(155px,calc(50vw - 31px));padding:8px;grid-template-columns:36px 1fr}.option span{width:36px;height:36px}.primary,.choice{min-width:0;width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}