:root{color-scheme:light;--ink:#51475f;--cream:#fff0d6;--teal:#278c8c;font-family:'Trebuchet MS','Segoe UI',sans-serif;color:var(--ink);background:#b4a6d3}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:radial-gradient(ellipse at 50% 40%,#d0cae5,#aa9fca)}
.app{position:relative;width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .562799));max-width:560px;aspect-ratio:941/1672;isolation:isolate;overflow:hidden;box-shadow:0 16px 70px #695a8428}
.scene-background{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.yard,#board{position:absolute;inset:0}
#board{touch-action:none;user-select:none;-webkit-user-select:none}
#board>svg{width:100%;height:100%;display:block}
.goal{position:absolute;z-index:2;left:29.5%;top:2.05%;width:41%;height:6.8%;text-align:center}
#brief-open{position:absolute;inset:-4px;background:transparent;border:0;border-radius:12px;min-height:44px;width:100%}
#brief-open:focus-visible{outline:3px solid #278c8c}
#cheat-toggle{position:absolute;z-index:6;left:3%;top:1.8%;width:22%;min-height:44px;padding:5px;border:1px solid #bda6cf;border-radius:13px;background:#f4e6ff;color:#6b427f;font-size:12px;font-weight:800;box-shadow:0 3px 0 #9275a33b}
#cheat-toggle[aria-expanded=true]{background:#d5b5ed}
#cheat-panel{position:absolute;z-index:7;left:5%;right:5%;top:10.2%;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;padding:8px;background:#fff4e8f5;border:1px solid #c4a7d4;border-radius:16px;box-shadow:0 4px 14px #67477742}
#cheat-panel button{min-width:44px;min-height:44px;border:1px solid #bda6cf;border-radius:10px;background:#ebd7f6;font-size:29px;font-weight:800;line-height:1;color:#66407b}
#cheat-panel button:disabled{opacity:.4;cursor:default}
#cheat-panel select{max-width:100%;width:100%;min-width:0;min-height:44px;padding:4px;font-size:12px;background:#fffaf2}
#dispatch{position:absolute;z-index:4;left:24%;width:52%;top:81%;min-height:44px}
.ticket-next{font-size:38px;font-weight:800;fill:#4a5b61;text-anchor:middle}
.clear-track:not(.legal-target):not(.blocked-target) .track-hit{fill:#ffc66818;stroke:#df9b48;stroke-width:7;stroke-dasharray:18 12}
.clear-label rect{fill:#ffedc5;stroke:#c8934d}.clear-label text{text-anchor:middle;fill:#81562f}
#brief-dialog{text-align:center}
#brief-kicker{font-size:11px;font-weight:800;letter-spacing:1px;color:#80718d;margin:0 0 12px}
#brief-where{font-size:15px;font-weight:900;color:#226b60;background:#d5edda;border:1px solid #9cbeaa;border-radius:12px;padding:10px}
#brief-order{height:65px;margin:14px 0}#brief-order svg{width:100%;height:100%}
#brief-rule{font-size:15px;line-height:1.5}#brief-finish{font-size:13px;color:#6b5b6c;margin-bottom:20px}
.order-label{font-size:clamp(10px,2.75vw,15px);font-weight:900;letter-spacing:.2px;margin:0;line-height:1.2}
#target{position:absolute;left:2%;right:2%;top:22%;bottom:0}
#target>svg{width:100%;height:100%;overflow:visible}
.wagon{cursor:grab}.wagon:active{cursor:grabbing}
.wagon{transform-origin:0 0;transform-box:view-box}
.wagon svg,.wagon text,.depot-decoration{pointer-events:none}
.wagon-hit{fill:transparent;stroke:transparent;stroke-width:5}
.wagon-selected{filter:drop-shadow(0 0 5px #fff9a4) drop-shadow(0 0 10px #ffc746)}
.wagon-selected .wagon-hit{stroke:#fff4b394;fill:#fff6a312}
.wagon-letter{font-size:30px;font-weight:900;font-family:'Trebuchet MS','Segoe UI',sans-serif;fill:#484c66;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff8e5;stroke-width:1.1}
.mini-letter{font-size:40px;stroke-width:1.5}
.ticket-manifest{font-size:49px;font-weight:900;fill:#4a5b61;text-anchor:middle;font-family:'Trebuchet MS','Segoe UI',sans-serif}
.front-label{font-size:29px;fill:#496a64;paint-order:stroke;stroke:#e6f5dd;stroke-width:5;stroke-linejoin:round}
#mission-info{white-space:pre-line}
.track-zone{cursor:pointer}
.track-hit{fill:transparent;stroke:transparent;stroke-width:5}
.legal-target .track-hit{fill:#adffc02a;stroke:#d9ffe8;stroke-dasharray:13 9;filter:drop-shadow(0 0 9px #69ffb7)}
.blocked-target .track-hit{stroke:#da776275;stroke-dasharray:11 12}
.drop-hover .track-hit{fill:#a1ffb652;stroke-width:8}
.blocked-target.drop-hover .track-hit{fill:#ff947433;stroke:#e9785d}
.empty-berth{fill:#ffffff06;stroke:#effffba1;stroke-dasharray:10 10;stroke-width:3;pointer-events:none}
.delivery-track:not(.legal-target):not(.blocked-target) .track-hit{stroke:#ffdf83;stroke-width:7;stroke-dasharray:12 9;fill:#ffedb118}
.yard-signs{pointer-events:none;font-weight:900;font-size:32px;fill:#465e60}
.yard-signs rect{fill:#fff4da;stroke:#d8bd91;stroke-width:3}
.delivery-sign rect{fill:#fff2c8;stroke:#dcad60}
.delivery-sign path{fill:none;stroke:#4c8a79;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.capacity-text,.capacity-sign text,.holding-sign text,.order-slot text{text-anchor:middle}
.capacity-sign rect{fill:#e6f6e8;stroke:#8cc5b1}.capacity-sign text{fill:#326c62}
.order-slot rect{fill:#fff1cf;stroke:#d0b282}.order-slot text{fill:#7b674c}
.order-slot.matched rect{fill:#b3e5bf;stroke:#5d9d7d}.order-slot.matched text{fill:#2b6354}
.holding-sign rect{fill:#fff4dfeF}.holding-sign text{fill:#635675}.holding-sign .sign-explanation{font-size:28px;font-weight:700}
.moving #board{pointer-events:none}
button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}
.scene-button{position:absolute;z-index:4;display:grid;place-items:center;background:none;border:0;padding:0;transform:translate(-50%,-50%);width:15%;aspect-ratio:1;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}
.scene-button svg{width:59%;height:59%;filter:drop-shadow(0 2px 1px #9d775940);pointer-events:none}
.scene-button:active:not(:disabled) svg{transform:translateY(2px) scale(.95)}
.scene-button:disabled{cursor:default}.scene-button:disabled svg{opacity:.45}
#pause{left:93.1%;top:4.15%;width:10.3%}#pause svg{width:55%;height:55%}
#undo{left:10.9%;top:93.8%}#hint{left:89.6%;top:93.8%}
.move-counter{position:absolute;left:50%;bottom:.9%;transform:translateX(-50%);text-align:center;pointer-events:none;line-height:1.1}
#moves{display:block;font-size:clamp(21px,5.7vw,31px);font-weight:900;color:#6f607d}
.move-caption{font-size:clamp(10px,2.6vw,14px);font-weight:700;color:#7d6c8d}
#coach{position:absolute;z-index:3;left:21%;right:21%;top:80%;margin:0;border:1px solid #eee0c6;border-radius:20px;background:#fff7e6;padding:8px 9px;color:#51475b;box-shadow:0 3px 1px #80736830;font-size:clamp(10px,2.7vw,14px);font-weight:800;line-height:1.35;text-align:center;white-space:pre-line;pointer-events:none}
#coach.warning{background:#fff3d9;border-color:#edb583}
#coach.in-motion{background:#e3f9e6;border-color:#78b89a;color:#285f53}
.hint-text{position:absolute;z-index:5;left:8%;right:8%;bottom:16%;margin:0;border:2px solid #dfbd88;border-radius:20px;background:#fff6df;padding:16px;box-shadow:0 7px 18px #6b557348;font-size:14px;line-height:1.5}
.success{position:absolute;z-index:5;left:11%;right:11%;top:65%;padding:17px;text-align:center;border-radius:23px;background:linear-gradient(#fff7e7,#fce6be);border:2px solid #e8c494;box-shadow:0 6px 0 #b5957040,0 9px 25px #68576d40}
.success h2{margin:0;font-size:21px;color:#387f72}.success p{font-size:13px;line-height:1.4;margin:8px 0 12px}
.primary,.menu-action{display:block;width:100%;min-height:44px;border:1px solid #c9aa86;border-radius:14px;padding:10px 14px;font-weight:800;background:linear-gradient(#fff8e8,#f2dab7);box-shadow:0 3px 0 #b4936e36}
.primary{background:linear-gradient(#8cdeba,#54baa1);color:#194f4d;border-color:#439c83}
button:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #137f9a;outline-offset:3px}
.wagon:focus-visible .wagon-hit{stroke:#26869a}
.scene-button:focus-visible{border-radius:50%}
dialog{background:linear-gradient(#fff7e7,#f7e6cb);color:var(--ink);border:2px solid #d5b995;border-radius:25px;padding:22px;width:min(88vw,360px);max-height:85dvh;overflow:auto;box-shadow:0 18px 80px #53446975}
dialog::backdrop{background:#564b6873;backdrop-filter:blur(3px)}
dialog h2{font-size:22px;margin:0 0 13px}dialog h3{font-size:15px;margin:16px 0 8px}dialog p{font-size:13px;line-height:1.45}dialog ol{padding-left:21px;font-size:14px;line-height:1.55}dialog li{margin:8px 0}
.menu-actions{display:grid;gap:10px;margin:14px 0}.menu-field{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:14px;margin-top:16px}
select{min-height:44px;max-width:65%;background:#fffbef;border:1px solid #cdb58f;border-radius:11px;padding:8px}
#progress{font-size:12px;color:#807386}#lesson-title{font-size:13px;font-weight:700}#notice{position:absolute;z-index:9;left:8%;right:8%;top:11%;font-size:12px;background:#fff0cf;border-radius:12px;padding:10px}
#drag-preview{position:fixed;z-index:20;pointer-events:none;transform:translate(-50%,-50%);border:2px solid #e0ba78;border-radius:15px;background:#fff2ca;color:#5c4a54;font-weight:900;padding:9px 15px;box-shadow:0 4px 16px #71596c44;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#world-maps{position:absolute;z-index:4;left:27%;top:1.8%;min-height:44px;display:flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid #d5c0a3;border-radius:13px;background:#fff5df;color:#4f7c70;font-size:clamp(10px,2.7vw,14px);font-weight:900;text-decoration:none;box-shadow:0 3px 0 #89768b25}
[hidden]{display:none!important}
@media(max-width:350px){.success{padding:12px}.success h2{font-size:18px}.success p{font-size:12px}.hint-text{font-size:12px;padding:12px}}
@media(prefers-reduced-motion:no-preference){.scene-button svg{transition:transform .12s}.wagon-hit,.track-hit{transition:fill .15s,stroke .15s}}

#world-maps{left:3%;top:7.7%;width:22%;padding:7px 4px}