:root {
  --bg: #06100e;
  --panel: #0c1916;
  --panel-2: #10201c;
  --line: rgba(205, 255, 229, .13);
  --text: #edf8f2;
  --muted: #8ba39a;
  --lime: #b7f34b;
  --blue: #27a7ff;
  --red: #ff5470;
  --green: #52d673;
  --gray: #879095;
  --amber: #ffc857;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; color: var(--text); background:
  radial-gradient(circle at 12% 0%, rgba(183,243,75,.09), transparent 30%),
  radial-gradient(circle at 90% 10%, rgba(39,167,255,.07), transparent 27%), var(--bg);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
}
button, input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; opacity: .12; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.app-shell { width: min(1500px, calc(100% - 40px)); margin: 0 auto; }
.topbar { height: 86px; display: flex; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; min-width: 260px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--lime); color: #10200f; font-weight: 950; transform: rotate(-4deg); }
.brand b { display:block; font-size: 18px; letter-spacing:.06em; }
.brand small { color:var(--muted); display:block; font-size:12px; letter-spacing:.04em; }
.top-stats { display:flex; gap: 44px; margin-left:auto; }
.top-stats div { display:flex; gap:10px; align-items:baseline; }
.top-stats span { color:var(--muted); font-size:13px; }
.top-stats strong { font: 700 20px/1 ui-monospace, monospace; }
.icon-btn { width:42px; height:42px; border:1px solid var(--line); background:transparent; cursor:pointer; }
.icon-btn.off { opacity:.45; }
main { padding: 28px 0 60px; }
.mission-rail { display:grid; grid-template-columns: 1fr 330px 92px; align-items:end; gap:40px; padding: 8px 0 28px; }
.eyebrow { color:var(--lime); font:700 12px/1.2 ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; }
.mission-copy h1 { margin:9px 0 4px; font-size:clamp(28px,3vw,46px); line-height:1.1; letter-spacing:-.04em; }
.mission-copy p { margin:0; color:var(--muted); }
.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-bottom:9px; }
.progress-label b { color:var(--text); }
.progress-track { height:7px; background:#14241f; overflow:hidden; }
.progress-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),#5ff5a0); transition:width .35s ease; }
.timer { text-align:right; }
.timer span { display:block; font-size:12px; color:var(--muted); }
.timer strong { font:700 25px/1.2 ui-monospace,monospace; }
.command-grid { display:grid; grid-template-columns: 250px minmax(520px,1fr) 250px; border:1px solid var(--line); background:rgba(9,22,18,.75); box-shadow:var(--shadow); min-height:610px; }
.agent-panel,.side-panel { padding:25px; background:rgba(12,25,22,.8); }
.agent-panel { border-right:1px solid var(--line); }
.side-panel { border-left:1px solid var(--line); display:flex; flex-direction:column; gap:22px; }
.agent-head { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; }
.agent-head h2 { margin:4px 0 0; line-height:1; }
.agent-orbit { width:46px; height:46px; border:1px solid rgba(183,243,75,.35); border-radius:50%; display:grid; place-items:center; position:relative; }
.agent-orbit:after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); animation:orbit 3s linear infinite; transform-origin:23px 23px; left:-3px; top:20px; }
.agent-orbit span { font:800 12px ui-monospace; color:var(--lime); }
@keyframes orbit { to { transform:rotate(360deg); } }
.online { font-size:11px; color:var(--lime); border:1px solid rgba(183,243,75,.25); padding:3px 7px; }
.agent-message { margin:24px 0 14px; min-height:138px; padding:17px; color:#c9d8d2; font-size:14px; border-left:2px solid var(--lime); background:#0b1513; }
.agent-message p { margin:0; }
.hint-btn { width:100%; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); background:transparent; padding:11px 12px; cursor:pointer; transition:.2s; }
.hint-btn:hover { border-color:var(--lime); color:var(--lime); }
kbd { font:700 11px ui-monospace; padding:2px 6px; background:#172822; color:var(--muted); }
.agent-facts { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:26px; padding:17px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.agent-facts span,.impact-card span,.impact-card small { display:block; color:var(--muted); font-size:12px; }
.agent-facts strong { font:700 19px ui-monospace; }
.impact-card { margin-top:22px; padding:18px; background:linear-gradient(135deg,rgba(183,243,75,.12),rgba(183,243,75,.025)); }
.impact-card strong { display:block; font:600 18px ui-monospace; margin:4px 0; }
.impact-card strong b { font-size:31px; color:var(--lime); }
.playfield { min-width:0; padding:27px 32px; display:flex; flex-direction:column; }
.field-head { display:flex; justify-content:space-between; align-items:start; }
.field-head h2 { margin:7px 0 0; font-size:27px; }
.difficulty { font-size:12px; color:var(--amber); border:1px solid rgba(255,200,87,.3); padding:5px 9px; }
.item-stage { flex:1; min-height:260px; margin:20px 0 26px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; outline:none; background:radial-gradient(circle at center,rgba(183,243,75,.09),transparent 42%),linear-gradient(rgba(205,255,229,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(205,255,229,.025) 1px,transparent 1px); background-size:auto,30px 30px,30px 30px; border:1px solid rgba(205,255,229,.08); cursor:grab; }
.item-stage:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.scan-line { position:absolute; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow:0 0 12px var(--lime); animation:scan 3.5s ease-in-out infinite; }
@keyframes scan { 0%,100%{top:15%;opacity:.2}50%{top:80%;opacity:.9} }
.item-visual { width:118px; height:118px; display:grid; place-items:center; background:#dce9e3; color:#10201c; border-radius:24% 42% 29% 35%; font-size:61px; filter:drop-shadow(0 20px 30px rgba(0,0,0,.32)); transform:rotate(-3deg); transition:transform .25s; user-select:none; }
.item-stage:hover .item-visual { transform:rotate(2deg) translateY(-4px); }
.material-tags { display:flex; gap:7px; margin-top:20px; }
.material-tags span { font-size:11px; border:1px solid var(--line); color:var(--muted); padding:4px 8px; background:rgba(6,16,14,.7); }
.drag-note { position:absolute; bottom:13px; color:var(--muted); font-size:12px; }
.bins { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.bin { min-height:125px; text-align:left; padding:0 13px 13px; border:1px solid var(--line); background:#0b1714; cursor:pointer; position:relative; transition:transform .18s,border-color .18s,background .18s; }
.bin:hover,.bin.drag-over { transform:translateY(-5px); border-color:var(--bin); background:color-mix(in srgb,var(--bin) 9%,#0b1714); }
.bin-lid { display:block; height:9px; margin:14px -3px 16px; background:var(--bin); box-shadow:0 0 18px color-mix(in srgb,var(--bin) 30%,transparent); }
.bin b { display:block; font-size:15px; }
.bin small { color:var(--muted); font-size:11px; line-height:1.25; display:block; margin-top:4px; }
.bin-key { position:absolute; top:28px; right:11px; font:700 10px ui-monospace; color:var(--bin); }
.recyclable { --bin:var(--blue); }.hazardous{--bin:var(--red)}.kitchen{--bin:var(--green)}.residual{--bin:var(--gray)}
.bin.correct { animation:correct .45s ease; }.bin.wrong { animation:wrong .35s ease; }
@keyframes correct { 50%{box-shadow:0 0 0 3px var(--lime);transform:translateY(-7px)} }
@keyframes wrong { 25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)} }
.feedback { height:0; text-align:center; font-size:13px; opacity:0; transition:.2s; }
.feedback.show { height:24px; opacity:1; padding-top:8px; }
.city-vitals,.daily-list { border:1px solid var(--line); padding:16px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); }
.city-ring { width:126px; height:126px; margin:22px auto; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle,#0e1e1a 57%,transparent 59%),conic-gradient(var(--lime) calc(var(--value,72)*1%),#1a2a25 0); }
.city-ring strong { font:700 35px/1 ui-monospace; }.city-ring span{font-size:11px;color:var(--muted);margin-top:4px}
.vital-bars label { display:grid; grid-template-columns:1fr auto; gap:7px; font-size:11px; color:var(--muted); margin-top:13px; }
.vital-bars i { grid-column:1/-1; height:4px; background:#1b2b26; }.vital-bars b { display:block;height:100%;background:var(--blue);transition:width .3s}.vital-bars b.risk{background:var(--red)}
.daily-list { flex:1; }
.challenge { display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.challenge:last-child{border:0}.challenge i{font:700 10px ui-monospace;color:var(--muted);font-style:normal}.challenge b{display:block;font-size:13px}.challenge small{display:block;color:var(--muted);font-size:11px}.challenge em{font:700 11px ui-monospace;color:var(--lime);font-style:normal}.challenge.done{opacity:.45}.challenge.done i:after{content:' ✓';color:var(--lime)}
.knowledge-dock { margin-top:28px; display:grid; grid-template-columns:270px 1fr; gap:26px; border-top:1px solid var(--line); padding-top:25px; }
.dock-copy h2 { font-size:21px; margin:7px 0; line-height:1.25; }
.knowledge-tabs { display:flex; gap:8px; justify-content:flex-end; align-items:start; }
.knowledge-tabs button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:7px 13px; cursor:pointer; font-size:12px; }
.knowledge-tabs button.active { color:#0d1b16; background:var(--lime); border-color:var(--lime); }
.knowledge-strip { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.knowledge-card { min-height:116px; padding:14px; border:1px solid var(--line); background:rgba(12,25,22,.65); position:relative; }
.knowledge-card span { font-size:26px; }.knowledge-card b { display:block;font-size:13px;margin-top:6px}.knowledge-card small{color:var(--muted);font-size:11px}.knowledge-card i{position:absolute;right:10px;top:10px;width:7px;height:7px;background:var(--cat);border-radius:50%;box-shadow:0 0 10px var(--cat)}
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:20; display:none; place-items:center; backdrop-filter:blur(8px); }
.modal.open{display:grid}.modal-card{width:min(480px,calc(100% - 30px));background:#0d1b17;border:1px solid var(--line);padding:36px;text-align:center;box-shadow:var(--shadow);position:relative}.modal-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--muted)}.modal-card h2{margin:10px 0}.grade{font:900 82px/1 ui-monospace;color:var(--lime);text-shadow:0 0 35px rgba(183,243,75,.3);margin:18px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:16px 0}.result-grid span{display:block;color:var(--muted);font-size:11px}.result-grid strong{font:700 20px ui-monospace}.modal-card p{color:var(--muted);font-size:14px}.primary-btn{width:100%;border:0;background:var(--lime);color:#10200f;padding:13px;font-weight:800;cursor:pointer;margin-top:8px}
@media (max-width:1100px){.command-grid{grid-template-columns:220px 1fr}.side-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}.knowledge-strip{grid-template-columns:repeat(3,1fr)}.top-stats div:nth-child(2){display:none}}
@media (max-width:760px){.app-shell{width:min(100% - 24px,680px)}.topbar{height:74px}.brand{min-width:0}.brand small,.top-stats{display:none}.icon-btn{margin-left:auto}.mission-rail{grid-template-columns:1fr auto;gap:15px}.mission-copy{grid-column:1/-1}.progress-cluster{min-width:210px}.command-grid{display:flex;flex-direction:column}.agent-panel{border-right:0;border-bottom:1px solid var(--line)}.agent-message{min-height:auto}.agent-facts,.impact-card{display:none}.playfield{padding:22px 15px}.item-stage{min-height:230px}.bins{grid-template-columns:1fr 1fr}.side-panel{display:block;border-left:0}.daily-list{margin-top:15px}.knowledge-dock{grid-template-columns:1fr}.knowledge-tabs{justify-content:flex-start;overflow:auto}.knowledge-strip{grid-template-columns:repeat(2,1fr)}.timer strong{font-size:20px}.mission-copy h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Full-viewport game layout */
.main-nav { display:flex; align-items:center; gap:6px; margin-left:8px; }
.main-nav a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; padding:8px 12px; border-bottom:2px solid transparent; }
.main-nav a:hover,.main-nav a.active { color:var(--text); border-bottom-color:var(--lime); }
.item-platform { width:150px; height:120px; display:grid; place-items:center; position:relative; }
.item-platform:after { content:""; position:absolute; width:130px; height:26px; border-radius:50%; background:rgba(183,243,75,.11); box-shadow:0 0 32px rgba(183,243,75,.18); bottom:2px; }
.item-visual { width:auto; height:auto; background:transparent; border-radius:0; font-size:88px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.46)); transform:rotate(-3deg); z-index:1; }
.bin { display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; padding:10px 12px; min-height:100px; }
.bin-illustration { grid-row:1/3; width:56px; height:70px; position:relative; display:block; }
.bin-illustration i { position:absolute; left:8px; top:16px; width:42px; height:50px; border:3px solid var(--bin); border-top-width:5px; border-radius:3px 3px 9px 9px; background:color-mix(in srgb,var(--bin) 13%,transparent); transform:perspective(50px) rotateX(-2deg); }
.bin-illustration i:after { content:""; position:absolute; inset:8px 9px; border-inline:2px solid color-mix(in srgb,var(--bin) 55%,transparent); }
.bin-illustration em { position:absolute; left:3px; top:8px; width:52px; height:7px; border-radius:3px; background:var(--bin); box-shadow:0 0 14px color-mix(in srgb,var(--bin) 35%,transparent); }
.bin b,.bin small { grid-column:2; }.bin b{align-self:end;font-size:16px}.bin small{align-self:start;font-size:12px}.bin-key{top:8px;right:8px}.bin-lid{display:none}
.countdown-layer { position:fixed; inset:0; z-index:30; display:none; place-items:center; background:rgba(3,11,9,.84); backdrop-filter:blur(14px); }
.countdown-layer.open { display:grid; }
.countdown-content { width:min(540px,calc(100% - 30px)); text-align:center; border:1px solid rgba(183,243,75,.25); padding:46px; background:radial-gradient(circle at 50% 0,rgba(183,243,75,.12),transparent 50%),#0a1713; box-shadow:var(--shadow); }
.countdown-content>strong { display:block; font:900 clamp(74px,12vw,132px)/.9 ui-monospace,monospace; color:var(--lime); letter-spacing:-.08em; margin:23px 0 14px; text-shadow:0 0 45px rgba(183,243,75,.27); }
.countdown-content h2 { margin:0; font-size:31px; }.countdown-content p{color:var(--muted);font-size:15px;max-width:420px;margin:12px auto 22px}.start-btn{max-width:260px}
.feedback { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; opacity:0!important; }
.answer-toast { --toast:#b7f34b; position:fixed; z-index:25; left:50%; bottom:34px; width:min(560px,calc(100% - 30px)); min-height:132px; display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center; padding:20px 52px 20px 22px; background:linear-gradient(125deg,color-mix(in srgb,var(--toast) 17%,#0b1a15),#0a1713 62%); border:1px solid color-mix(in srgb,var(--toast) 62%,transparent); box-shadow:0 22px 70px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--toast) 14%,transparent); transform:translate(-50%,calc(100% + 70px)); opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .25s; }
.answer-toast.show { transform:translate(-50%,0); opacity:1; pointer-events:auto; }.answer-toast.wrong{--toast:#ff5470}
.answer-symbol { width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:var(--toast);color:#0a1713;font:900 52px/1 ui-monospace;box-shadow:0 0 26px color-mix(in srgb,var(--toast) 34%,transparent); }
.answer-copy span { color:var(--toast);font:800 12px ui-monospace;letter-spacing:.12em}.answer-copy h3{font-size:24px;margin:4px 0 2px}.answer-copy p{color:#b5c8c0;font-size:14px;margin:0;line-height:1.45}.answer-close{position:absolute;right:12px;top:9px;border:0;background:transparent;color:var(--muted);font-size:27px;cursor:pointer;line-height:1}.answer-close:hover{color:#fff}

@media (min-width: 761px) {
  html,body { height:100%; overflow:hidden; }
  .app-shell { height:100vh; }
  .topbar { height:70px; }
  main { height:calc(100vh - 70px); padding:15px 0 18px; display:grid; grid-template-rows:auto minmax(0,1fr); }
  .mission-rail { grid-template-columns:1fr 330px 92px; padding:4px 0 15px; gap:34px; }
  .mission-copy h1 { font-size:clamp(28px,2.4vw,40px); }
  .mission-copy p { font-size:15px; }
  .command-grid { min-height:0; height:100%; grid-template-columns:250px minmax(500px,1fr) 250px; overflow:hidden; }
  .agent-panel,.side-panel { padding:20px; overflow:hidden; }
  .playfield { min-height:0; padding:20px 26px 16px; display:grid; grid-template-rows:auto minmax(170px,1fr) auto auto; }
  .item-stage { min-height:0; margin:13px 0 14px; }
  .bins { gap:9px; }
  .agent-message { min-height:116px; margin:18px 0 12px; font-size:15px; }
  .agent-facts { margin-top:18px; }.impact-card{margin-top:16px}.city-ring{width:112px;height:112px;margin:14px auto}.daily-list{min-height:0}.challenge{padding:10px 0}
}
@media (max-width: 1180px) and (min-width:761px){.command-grid{grid-template-columns:210px minmax(480px,1fr) 220px}.top-stats{gap:18px}.agent-panel,.side-panel{padding:16px}.playfield{padding-inline:18px}.bin{grid-template-columns:45px 1fr;padding:8px}.bin-illustration{transform:scale(.78);transform-origin:left center}.bin small{font-size:10px}}
@media (max-height: 740px) and (min-width:761px){.topbar{height:60px}.topbar .brand small{display:none}main{height:calc(100vh - 60px);padding:8px 0 10px}.mission-rail{padding-bottom:8px}.mission-copy h1{font-size:28px}.mission-copy p{display:none}.agent-message{min-height:88px}.agent-facts{padding:10px 0}.impact-card{padding:10px}.city-ring{width:92px;height:92px}.challenge{padding:6px 0}.item-visual{font-size:72px}.item-platform{height:92px}.bins .bin{min-height:82px}}
@media (max-width:760px){.main-nav{order:3;width:100%;margin:0;border-top:1px solid var(--line)}.topbar{height:auto;min-height:74px;flex-wrap:wrap;padding-top:10px}.main-nav a{flex:1;text-align:center}.bin{min-height:105px}.countdown-content{padding:34px 22px}.item-visual{font-size:76px}}
@media (max-width:560px){.answer-toast{grid-template-columns:64px 1fr;gap:13px;min-height:112px;padding:16px 42px 16px 16px}.answer-symbol{width:60px;height:60px;font-size:38px}.answer-copy h3{font-size:19px}.answer-copy p{font-size:12px}}