:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;color:#eaf3ff;background:#0d1727}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 25% 0,#213b5c 0,#101c2e 50%,#0b1423 100%)}button{font:inherit;cursor:pointer;color:inherit;background:#263d57;border:1px solid #415c78;border-radius:12px;padding:11px 14px;transition:.15s}button:hover{background:#345574}button:focus-visible{outline:3px solid #65d5ef}header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 25px;background:#111d30;border-bottom:1px solid #2c425c}.brand{display:flex;gap:12px;align-items:center}.logo{background:#274765;border-radius:15px;padding:12px;font-size:24px}.brand b{letter-spacing:1px;font-size:19px}.brand em{color:#ffbd5d;font-style:normal}.brand small{display:block;font-size:10px;color:#91a9c5;letter-spacing:2px;margin-top:5px}.stats{display:flex;gap:10px}.stats span{background:#1d3048;padding:12px 16px;border:1px solid #344e6c;border-radius:13px;white-space:nowrap}.iconbtn{padding:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:16px;max-width:1580px;margin:auto;padding:20px}.stage,.panel{background:#192a40;border:1px solid #324a67;border-radius:20px;overflow:hidden}.stagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px}.stagehead h2{font-size:21px;margin:0}.stagehead p,.panel p{color:#b0c3da;font-size:12px;line-height:1.6}.stagehead p{margin:7px 0 0}.live{font-size:10px;color:#59e5b1;letter-spacing:1px}.topbuttons{display:flex;gap:8px}#viewport{height:min(68vh,680px);min-height:420px;position:relative;overflow:hidden;background:linear-gradient(#263d56,#142538);touch-action:none}canvas{display:block;width:100%;height:100%}.viewhint{position:absolute;top:15px;left:15px;pointer-events:none;color:#d5e9fa;background:#0b1b2bbb;border:1px solid #4c6b85;border-radius:8px;padding:8px 10px;font-size:10px;letter-spacing:1px}.zoom{position:absolute;right:15px;bottom:15px;display:grid;gap:7px}.zoom button{width:42px;height:42px;font-size:22px;padding:0}#toast{position:absolute;left:50%;top:15px;transform:translateX(-50%);background:#203d58;border:1px solid #4f86a3;border-radius:10px;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;font-size:13px}#toast.show{opacity:1}.legend{display:flex;gap:18px;flex-wrap:wrap;padding:14px 20px;color:#9eb6ce;font-size:11px}.panel{padding:18px;margin-bottom:13px}.panel label{font-size:10px;letter-spacing:1.7px;color:#ffc56d;font-weight:800}.panel h3{font-size:17px;margin:8px 0}.panel p{margin:8px 0 0}.progress{height:9px;background:#314760;border-radius:20px;overflow:hidden;margin:16px 0 9px}.progress>div{height:100%;background:linear-gradient(90deg,#46ddb4,#7ee5cf);width:0;transition:.25s}.split,.metric{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:7px 0}.split b{color:#73e7b7}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0}.tool{padding:12px 4px;display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0}.tool span{font-size:24px}.tool b{font-size:10px}.tool small{font-size:9px;color:#aac0d7}.tool.active{background:#236c83;border:2px solid #65d8f0}.rotation button,.upgrade,.help button{width:100%;margin-top:6px}.rotation strong{font-size:18px;color:#8dece4}.upgrade{background:#2d6578}.muted{font-size:11px!important}.metric{color:#b9cbe0}.metric b{color:white}.overlay{position:fixed;inset:0;z-index:10;background:#030913c9;display:grid;place-items:center;padding:20px}.hidden{display:none}.dialog{position:relative;max-width:490px;width:100%;background:#1b3149;border:1px solid #51758e;border-radius:23px;padding:26px;box-shadow:0 30px 90px #0009}.dialog .big{font-size:45px}.dialog h2{margin:10px 0}.dialog p,.dialog li{color:#c2d5e8;font-size:14px;line-height:1.65}.dialog ol{padding-left:22px}.dialog .close{position:absolute;right:15px;top:15px}.primary{background:#15a88e;border:0;width:100%;font-weight:800;margin-top:12px}@media(max-width:950px){main{grid-template-columns:1fr}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.panel{margin:0}#viewport{height:55vh}}@media(max-width:580px){header{padding:10px;height:auto;flex-wrap:wrap}.brand b{font-size:15px}.stats{order:3;width:100%;justify-content:space-between}.stats span{padding:8px;font-size:12px}main{padding:9px;gap:10px}.stagehead{padding:12px;align-items:start;flex-direction:column}.stagehead h2{font-size:18px}.topbuttons button{padding:8px 11px}#viewport{height:54vh;min-height:330px}.viewhint{font-size:8px;max-width:70%;line-height:1.5}.legend{gap:8px;padding:10px}aside{grid-template-columns:1fr}.panel{padding:14px}}

.route-line{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #39536a;font-size:13px}.route-line b{flex:1}.route-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}.route-ok{color:#64e5b4}.route-bad{color:#ffb4a6}.panel .upgrade{cursor:pointer}
/* v2 layout polish: keep the 3D canvas panel compact instead of stretching to sidebar height */
.stage{align-self:start;min-width:0;box-shadow:0 18px 50px #050d1b35}
aside{min-width:0}
#viewport{height:clamp(440px,65vh,720px)}
.panel{box-shadow:0 8px 22px #050d1b1c}
button{transition:background .18s ease,border-color .18s ease,transform .18s ease}
button:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed}
#toast{z-index:3;max-width:calc(100% - 32px);white-space:normal;text-align:center}
@media(max-width:950px){.stage{align-self:stretch}#viewport{height:clamp(370px,58vh,620px)}}
@media(max-width:580px){#viewport{height:clamp(330px,52vh,500px)}.stage{border-radius:14px}.viewhint{letter-spacing:0}.topbuttons{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){button,.progress>div,#toast{transition:none!important}}

/* Dispatch challenge */
.rush-panel{border-color:#527b94;background:linear-gradient(135deg,#1b354e,#182a40)}
.rush-panel .progress{margin:12px 0}
.rush-panel .split strong{font-size:12px;color:#eaf3ff}
#language{font-size:12px;font-weight:800;white-space:nowrap}
@media(max-width:580px){#language{padding:9px 10px}.rush-panel{order:1}}

/* Parcel Empire 2.0 responsive polish */
#viewport canvas{display:block;touch-action:none}button{transition:filter .16s ease,transform .16s ease}button:active{transform:scale(.97)}button:focus-visible{outline:3px solid #5de1f8;outline-offset:3px}.tool.active{box-shadow:0 0 0 2px rgba(93,225,248,.35),0 8px 24px rgba(0,0,0,.14)}.stage{min-width:0}.stagehead{gap:12px}.viewhint{max-width:calc(100% - 30px);white-space:normal;line-height:1.5}@media(max-width:850px){main{display:flex;flex-direction:column;padding:12px;gap:14px}main>.stage,main>aside{width:100%;min-width:0}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}aside>.panel{margin:0}#viewport{height:min(65vh,540px);min-height:360px}header{flex-wrap:wrap;gap:10px;padding:12px}.stats{order:3;width:100%;justify-content:center}.stagehead{flex-wrap:wrap}.topbuttons{margin-left:auto}}@media(max-width:560px){aside{grid-template-columns:1fr}#viewport{height:53vh;min-height:330px}.stagehead{padding:12px}.legend{flex-wrap:wrap;gap:8px}.tools{gap:7px}.tool{min-width:0}.viewhint{font-size:10px;top:8px;left:8px}.zoom{right:8px;bottom:8px}}

/* v3: player-first dispatch station */
.dispatch-panel{border:1px solid #68b7d0;background:linear-gradient(155deg,#21435a,#1a2b43);box-shadow:0 0 0 1px #53bdd02a,0 12px 35px #08152455}.dispatch-order{display:flex;align-items:center;gap:15px;padding:16px;border:1px solid #4d7189;border-radius:14px;margin:12px 0;background:#101f33}.dispatch-order>span{font-size:35px}.dispatch-order div{display:grid;gap:5px}.dispatch-order small{font-size:10px;letter-spacing:1.4px;color:#a5c3d7}.dispatch-order strong{font-size:23px;letter-spacing:1.4px}.dispatch-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.dispatch-actions button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 3px;font-size:15px;font-weight:800;border-width:2px;min-height:76px}.dispatch-actions button span{font-size:11px}.dispatch-actions button small{font-size:10px;color:#a4bed2}.dispatch-blue{border-color:#4cd4ff}.dispatch-orange{border-color:#ffb24c}.dispatch-purple{border-color:#d783ff}#dispatchStreak{font-weight:700;color:#9fe7c9}@media(max-width:950px){.dispatch-panel{grid-column:1/-1}.dispatch-actions{gap:10px}.dispatch-actions button{min-height:72px}}@media(max-width:580px){.dispatch-order{padding:12px}.dispatch-actions button span{font-size:12px}}
