@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#eef0dc;background:#101c1d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#263633,transparent 70%),#101c1d}main{max-width:1240px;margin:auto;padding:30px 42px 18px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible,#steering:focus-visible{outline:3px solid #fff;outline-offset:4px}.masthead{height:66px;display:flex;align-items:flex-start;justify-content:space-between}.brand{font-size:25px;font-weight:900;letter-spacing:3px;color:#faf4d8;text-decoration:none}.brand span{color:#e9b953}.brand small{font-size:8px;letter-spacing:2px;display:block;margin-top:2px}.edition{font-size:11px;color:#b5c2b3;letter-spacing:2px;padding-top:6px}.edition span{display:block;text-align:center;color:#f6edd0;font-size:14px;margin-top:4px}#sound{background:none;border:1px solid #52605a;border-radius:5px;color:#b7c2b5;font-size:10px;padding:10px 12px;letter-spacing:1px}.game-frame{border:1px solid #728276;border-radius:12px;overflow:hidden;box-shadow:0 25px 75px #0005}.hud{background:#1019a6;display:flex;align-items:center;min-height:95px;padding:16px 23px;gap:23px;border-bottom:4px solid #060e56}.metric{min-width:99px}.metric>span,.cargo>span{font-size:9px;font-weight:700;letter-spacing:1px;color:#b6c6ff;display:block}.metric strong{display:block;font-family:Impact,'Arial Narrow',monospace;color:#baff3c;font-size:38px;font-weight:900;line-height:1.3;text-shadow:2px 3px #050736}.metric small{font-family:monospace;font-size:13px;color:white;margin-left:8px}.speed strong{color:white}.route{flex:1;padding:0 15px;border-left:1px solid #6876ca55;border-right:1px solid #6876ca55}.route-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:12px}#distance{color:#c2cdff;font-size:10px}#stations{display:flex;justify-content:space-between;font-size:9px;color:#c2cdff}#stations span.active{color:#c6ff38}#stations span.done{color:#fff}.route-track{height:5px;background:#030b56;margin-top:7px;border-radius:4px;overflow:hidden}.route-track i{display:block;width:0;height:100%;background:#c6ff38}.cargo{min-width:126px}.cargo strong{color:#ffd767;letter-spacing:3px;display:block;font-size:19px}.cargo small{font-size:9px;color:#d4dcff}.viewport{position:relative;background:#87cde5;aspect-ratio:12/7;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.corner-label{position:absolute;left:21px;top:18px;color:#fff;font-size:10px;letter-spacing:2px;text-shadow:0 1px 3px #000}.corner-label b{display:inline-block;background:#0a57a7;padding:4px 8px;clip-path:polygon(0 0,100% 0,85% 80%,50% 100%,15% 80%);margin-left:6px}#pause{position:absolute;right:18px;top:15px;background:#102d3488;border:1px solid #fff7;color:#fff;width:33px;height:33px;border-radius:4px;display:none}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#052b2bcb,#052b2b70 56%,#052b2b0d);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:5% 8%}.intro-tag{font-size:9px;letter-spacing:3px;color:#d8ecd9;border:1px solid #bcd7bc66;padding:7px 10px}.eyebrow{font-size:13px;letter-spacing:3px;margin:25px 0 2px}h1{font-size:clamp(42px,7vw,86px);line-height:1.2;letter-spacing:4px;margin:0;font-weight:900;text-shadow:4px 5px #13352f}h1 span{color:#f6c857}.title-en{font-size:10px;letter-spacing:5px;margin:10px 0 14px;color:#d3dfc6}#introText{font-size:12px;line-height:2;color:#e6ead7}#start{margin-top:13px;border:0;background:#f7c95b;border-radius:4px;padding:14px 24px;color:#25382d;font-size:14px;font-weight:900;min-width:235px;box-shadow:0 4px #9f7635;text-align:left}#start span{float:right;font-size:20px;line-height:20px}.start-note{font-size:9px;letter-spacing:1px;color:#ccdbc7;margin-top:17px}#cityLabel{position:absolute;bottom:18px;left:21px;font-size:10px;letter-spacing:3px;color:#fff;text-shadow:1px 1px 3px #000}#cityLabel span{letter-spacing:1px;margin-left:10px;font-size:9px}#toast{position:absolute;top:65px;left:50%;transform:translateX(-50%);background:#142921e8;border:1px solid #f2d26e;color:#fff2bc;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}.controls{display:flex;justify-content:space-between;align-items:center;background:#eee9d8;color:#334438;padding:17px 30px;gap:15px;min-height:148px}.instruction{display:flex;gap:12px;align-items:flex-start}.number{color:#909882;font-size:11px;border-top:2px solid #9da38c;padding-top:4px}.instruction b{font-size:11px}.instruction p{font-size:10px;line-height:1.9;color:#7b8371;margin:6px 0}.steering-wrap{display:flex;align-items:center;gap:16px}.direction{font-size:10px;white-space:nowrap;color:#7b8371}#steering{position:relative;width:112px;height:112px;touch-action:none;background:#d8ddc9;border:1px solid #a9b29b;border-radius:50%;box-shadow:inset 0 0 0 6px #e5e7d9,inset 0 0 0 7px #b8c1aa;cursor:crosshair}#steering:before,#steering:after{content:'';position:absolute;background:#a9b29b}#steering:before{left:50%;top:12px;bottom:12px;width:1px}#steering:after{top:50%;left:12px;right:12px;height:1px}#knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:27px;height:27px;border-radius:50%;background:#344d3b;border:5px solid #f8f5e4;box-shadow:0 2px 6px #0003;z-index:1}#steering>span{position:absolute;bottom:14px;width:100%;text-align:center;font-size:8px;color:#7b8371}footer{display:flex;justify-content:space-between;color:#8b9a8e;font-size:8px;letter-spacing:1px;margin-top:19px}footer b{color:#c0c8b3;margin-left:6px}[hidden]{display:none!important}@media(max-width:760px){main{padding:15px 10px}.edition{display:none}.hud{padding:10px;gap:10px;flex-wrap:wrap}.metric{min-width:74px}.metric strong{font-size:29px}.metric>span,.cargo>span{font-size:8px}.cargo{min-width:105px;margin-left:auto}.route{order:4;flex-basis:100%;border:0;padding:0}.route-heading{margin-bottom:5px}.controls{padding:12px;gap:5px}.instruction{gap:5px}.instruction b{font-size:9px}.instruction p{font-size:8px}.number,.direction{display:none}#steering{width:90px;height:90px}.viewport{aspect-ratio:1.25}canvas{object-fit:cover}#overlay{padding:7%}.eyebrow{margin-top:14px;font-size:10px}.intro-tag{font-size:7px}h1{font-size:52px}.title-en{margin:6px 0}#introText{font-size:10px}#start{padding:10px 15px;margin-top:5px}.start-note{font-size:7px}footer span:last-child{display:none}#toast{font-size:11px;padding:8px 10px}}
@media(min-width:761px){main{max-width:min(1240px,calc((100dvh - 320px)*1.714 + 56px));min-width:740px;padding:20px 28px 12px}.masthead{height:60px}.hud{min-height:80px;padding:10px 16px;gap:14px}.controls{min-height:124px;padding:10px 18px}.steering-wrap{gap:10px}#steering{width:100px;height:100px}footer{margin-top:14px}.route{padding:0 10px}.metric{min-width:76px}.metric strong{font-size:32px}.cargo{min-width:112px}.intro-tag{font-size:8px}.eyebrow{margin-top:16px}h1{font-size:clamp(48px,6vw,80px)}#introText{margin:7px 0}.title-en{margin:6px 0 8px}#start{margin-top:8px}.start-note{margin-top:12px}}
canvas{image-rendering:auto}#overlay{background:linear-gradient(90deg,#052b2bd6,#052b2b55 57%,#052b2b00)}#start:disabled{opacity:.45;cursor:not-allowed}

.header-actions{display:flex;align-items:center;gap:8px}.model-link{font-size:9px;color:#d9c18b;text-decoration:none;border-bottom:1px solid #86774b;padding:6px 0}@media(max-width:760px){.header-actions{gap:7px}.model-link{font-size:8px}}