:root{font-family:'DM Sans',sans-serif;color:#253c38;background:#f7f8f2}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #d89945;outline-offset:3px}header{height:88px;border-bottom:1px solid #dde2d8;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:25px;font-weight:700;letter-spacing:-1px}.logo{background:#263e38;color:#fff;border-radius:50%;height:35px;width:35px;text-align:center;line-height:30px;font-weight:500}.edition{font-size:10px;letter-spacing:2px;font-weight:500;margin-left:23px;color:#7c8980}.quiet{border:0;background:none;color:#64746c;font-size:12px;padding:12px}main{max-width:1400px;margin:auto;padding:42px 5vw 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#698074}h1{font-family:Manrope,sans-serif;font-size:clamp(25px,3.3vw,43px);font-weight:600;letter-spacing:-1.9px;margin:10px 0}p{font-size:14px;color:#7b877e;margin:0}.stats{display:flex;gap:40px}.stats div{display:flex;flex-direction:column}.stats strong{font-family:Manrope,sans-serif;font-size:33px;font-weight:500}.stats span{font-size:10px;color:#839085;margin-top:5px}.game{border:1px solid #d9e0d5;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 35px #233c3505}.mapbar{height:49px;display:flex;justify-content:space-between;align-items:center;padding:0 23px;font-size:11px;color:#7d8b81;border-bottom:1px solid #e7ebe1}.live{display:inline-block;width:6px;height:6px;background:#6c9776;border-radius:50%;margin-right:7px}.mapbar button{border:0;background:none;color:#536b60;min-width:36px;height:30px}.canvas-wrap{height:440px;position:relative;background:#f4f5ed}canvas{width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair}.map-label{position:absolute;left:25px;top:25px;font-size:11px;font-weight:600;letter-spacing:3px;pointer-events:none;color:#91a08f}.map-label span{font-size:8px;letter-spacing:1px;line-height:25px;color:#abb5a6}.river-label{position:absolute;left:55%;top:68%;font-size:9px;letter-spacing:4px;color:#87a6a6;transform:rotate(-30deg);pointer-events:none}#tip{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#758374;font-size:11px;background:#fffffff0;padding:10px 17px;border-radius:30px;pointer-events:none}.toolbar{display:flex;justify-content:space-between;align-items:center;min-height:77px;padding:10px 22px;gap:10px}.lines{display:flex;gap:9px}.line{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;border-radius:7px;border:1px solid transparent;background:transparent;color:#728078;font-size:11px}.line.selected{border-color:var(--line);background:color-mix(in srgb,var(--line) 6%,white)}.line b{display:grid;place-items:center;background:var(--line);color:white;width:27px;height:27px;border-radius:50%;font-size:12px}.capacity{font-size:10px;color:#859186}.train-icon{color:#546e60;font-size:22px;vertical-align:middle;margin-right:8px}.instructions{display:flex;gap:32px;padding:30px 0}.instructions>div{display:flex;gap:12px;flex:1}.instructions>div>span{font-size:11px;color:#9ba996;padding-top:3px}.instructions p{font-size:11px;line-height:1.8}.instructions b{display:block;color:#4e6658;font-weight:500;font-size:12px;margin-bottom:3px}.bottom{border-top:1px solid #e0e5da;padding-top:18px;font-size:8px;letter-spacing:1.5px;color:#97a38f;display:flex;justify-content:space-between}.bottom span{letter-spacing:0;font-size:10px}.overlay{position:absolute;inset:0;background:#f5f7eff0;display:grid;place-items:center;text-align:center;padding:24px;backdrop-filter:blur(5px)}.overlay>div{max-width:410px}h2{font-family:Manrope,sans-serif;font-size:34px;letter-spacing:-1px;margin:12px 0}.overlay p{font-size:14px;line-height:1.9}.primary{border:0;border-radius:6px;padding:13px 24px;color:white;background:#2e5144;margin-top:24px}.hidden{display:none}@media(max-width:750px){header{height:67px}.edition{display:none}main{padding:25px 4vw}.heading{align-items:flex-start;gap:18px;flex-direction:column}.stats{width:100%;justify-content:space-between}.stats strong{font-size:24px}.canvas-wrap{height:430px}.line{padding:5px}.line span,.capacity{display:none}.toolbar{padding:10px}.instructions{gap:15px;flex-direction:column;padding:24px 0}.bottom span{display:none}#tip{max-width:90%;white-space:normal;text-align:center;font-size:10px}.quiet{font-size:11px}}

.city-picker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;color:#64746c}.city-picker select{font:inherit;padding:10px 30px 10px 12px;border:1px solid #d9e0d5;border-radius:6px;background:#fff;color:#253c38}.city-picker>span{font-size:10px;color:#859186;margin-left:auto}#erase[aria-pressed="true"]{background:#fae8df;color:#b84b35;border-radius:6px}.map-label b{font-weight:600}@media(max-width:750px){.city-picker{flex-wrap:wrap;gap:9px}.city-picker>span{width:100%;margin:0}.toolbar{flex-wrap:wrap}.toolbar .lines{width:100%}}

canvas{touch-action:none;user-select:none;-webkit-user-select:none}button{touch-action:manipulation}#move[aria-pressed="true"]{background:#deebe1;border-radius:6px;color:#284d3d}.overlay{overflow-y:auto;overscroll-behavior:contain}.mapbar>div{display:flex;align-items:center}body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:750px){header{height:54px;padding:0 14px}.brand{font-size:21px}.logo{height:30px;width:30px;line-height:26px}main{padding:12px 10px 16px}.heading{margin-bottom:12px;gap:10px}.heading>div:first-child{display:none}.stats{padding:0 8px}.stats strong{font-size:22px}.stats span{font-size:10px}.city-picker{margin-bottom:10px}.city-picker label{display:none}.city-picker select{min-height:44px;font-size:16px;flex:1;min-width:0}.city-picker>span{font-size:10px}.game{border-radius:10px}.mapbar{height:auto;min-height:88px;flex-direction:column;align-items:stretch;padding:3px 5px;gap:2px}.mapbar>span{padding:6px 8px;font-size:10px}.mapbar>div{justify-content:space-between;gap:0}.mapbar button{min-width:40px;min-height:44px;padding:0 5px;font-size:13px}#move{font-size:11px}#fit{font-size:10px}.canvas-wrap{height:clamp(280px,calc(100svh - 343px),700px);overflow:hidden}.map-label{top:12px;left:12px}#tip{bottom:8px;width:94%;max-width:94%;padding:7px 9px;font-size:10px;border-radius:8px;line-height:1.4}.toolbar{display:grid;grid-template-columns:1fr 1fr;padding:7px;gap:5px}.toolbar .lines{grid-column:1/-1;display:flex;width:100%;gap:5px}.line{flex:1;justify-content:center;min-height:44px;padding:5px 9px}.line span{display:inline;font-size:11px}.line b{width:28px;height:28px}.toolbar .quiet{min-height:44px;border:1px solid #e2e7dd;border-radius:6px;padding:5px;font-size:11px}.instructions{gap:10px;padding:18px 6px}.bottom{font-size:7px}.overlay{padding:16px}.overlay h2{font-size:26px}.overlay p{font-size:12px;line-height:1.65}.primary{min-height:44px;margin-top:12px}}
@media(max-width:750px) and (orientation:landscape){header,.heading,.city-picker,.instructions,.bottom{display:none}main{padding:4px}.game{display:grid;grid-template-columns:minmax(0,1fr) 125px}.mapbar{grid-column:1/-1;flex-direction:row;min-height:44px;padding:0 8px}.mapbar>div{gap:3px}.canvas-wrap{height:calc(100svh - 58px)}.toolbar{display:flex;flex-direction:column;justify-content:flex-start;gap:6px}.toolbar .lines{flex-direction:column}.line,.toolbar .quiet{width:100%;flex:none}.line span{display:inline}.map-label{display:none}}

.zoom-controls{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:3px;background:#fffffff2;border:1px solid #d9e0d5;border-radius:10px;padding:4px;box-shadow:0 3px 12px #253c3812}.zoom-controls button{border:0;background:#edf2e9;color:#253c38;border-radius:6px;min-width:44px;height:44px;font-size:25px;font-weight:600}.zoom-controls output{font-size:11px;min-width:37px;text-align:center;color:#536b60}.zoom-controls #fit{font-size:11px;padding:0 9px}.overlay{z-index:2}@media(max-width:750px){.zoom-controls{right:8px;top:8px}.map-label{top:70px}.mapbar{min-height:80px}.canvas-wrap{height:clamp(300px,calc(100svh - 325px),720px)}}

@media(max-width:750px) and (orientation:landscape){.mapbar{min-height:44px}.canvas-wrap{height:calc(100svh - 58px)}}

.overview .river-label,.overview .map-label span{display:none}html[dir="rtl"] .stats,html[dir="rtl"] .toolbar{direction:rtl}html[dir="rtl"] .zoom-controls{direction:ltr}html[dir="rtl"] .overlay p{text-align:right}

.session-strip{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#7a887f;margin:14px 0 10px}.session-strip #save-status:before{content:'●';color:#6c9776;margin-inline-end:7px}.session-strip #save-status[data-state="unavailable"]:before{color:#c98d3a}.network-health{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;background:#fbfcf6;border-bottom:1px solid #e7ebe1}.network-health button{border:1px solid #e3e7d4;border-radius:20px;background:#f1f4e6;color:#6c7641;font-size:11px;padding:8px 13px}.network-health button[data-level="danger"]{background:#fff0e9;color:#b7442f;border-color:#f0c3af}.network-health button[data-level="good"]{background:#ebf3ea;color:#4d785c}.network-health>span{font-size:10px;color:#92a08f}button:disabled{cursor:default;opacity:.5}.network-health button:disabled{opacity:1}.canvas-wrap{isolation:isolate}@media(max-width:750px){.session-strip{font-size:10px;margin:7px 2px}.session-strip>span:last-child{display:none}.network-health{padding:5px 8px;gap:6px;min-height:43px}.network-health button{font-size:11px;min-height:32px}.network-health>span{display:none}.canvas-wrap{height:clamp(280px,calc(100svh - 385px),700px)}}@media(max-width:750px) and (orientation:landscape){.session-strip{display:none}.network-health{grid-column:1/-1;min-height:32px;padding:2px 8px}.canvas-wrap{height:calc(100svh - 94px)}}

@media(max-width:750px) and (orientation:portrait){.canvas-wrap{height:clamp(220px,calc(100svh - 455px),650px)}}

.play-modes{display:flex;align-items:center;gap:8px;margin:0 0 18px}.play-modes button{min-height:44px;border:1px solid #dce3d6;background:#fdfef9;color:#64786a;padding:10px 17px;border-radius:8px;font-size:12px}.play-modes button[aria-pressed="true"]{background:#294d3d;color:#fff;border-color:#294d3d}.play-modes button span{font-size:10px;opacity:.7;margin-inline-start:7px}.mission-status{padding:14px 17px;border:1px solid #dce4d4;background:#eef4e7;border-radius:8px;margin-bottom:14px}.mission-status>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.mission-status strong{color:#355f45}.mission-status span{color:#6e7c68}.mission-status progress{display:block;width:100%;height:5px;border:0;margin-top:12px;accent-color:#548565}#campaign-menu{border:1px solid #dce3d6;border-radius:16px;padding:26px;max-width:820px;width:calc(100% - 28px);max-height:88dvh;background:#f7f8f2;color:#253c38;box-shadow:0 20px 100px #17382c25}#campaign-menu::backdrop{background:#1c332a70;backdrop-filter:blur(4px)}.campaign-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.campaign-heading h2{font-size:29px;margin:8px 0}.campaign-heading p{font-size:12px}.campaign-heading .quiet{min-width:44px;min-height:44px;font-size:20px}.mission-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.mission-card{border:1px solid #dce3d6;border-radius:10px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:185px}.mission-card[disabled]{background:#f0f2eb;opacity:.65}.mission-card .mission-city{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:#7c8d79}.mission-card h3{font-size:14px;line-height:1.4;margin:0;font-weight:600}.mission-card p{font-size:11px;line-height:1.7}.mission-card .mission-award{font-size:10px;color:#97763b;margin-top:auto}.mission-card .mission-action{font-size:11px;color:#37664c}.campaign-footnote{margin-top:19px;font-size:11px;line-height:1.7}.tutorial-station{font-weight:700}@media(max-width:750px){.play-modes{margin:0 0 9px;gap:5px}.play-modes button{flex:1;min-width:0;font-size:11px;padding:8px 5px}.play-modes button span{font-size:9px;margin-inline-start:3px}.mission-status{padding:9px 11px;margin-bottom:8px}.mission-status>div{align-items:flex-start;flex-direction:column;gap:5px;font-size:11px}.mission-status progress{margin-top:8px}.mission-list{grid-template-columns:1fr;gap:9px;margin-top:17px}.mission-card{min-height:145px;padding:14px}.campaign-heading h2{font-size:23px}#campaign-menu{padding:19px}.campaign-footnote{font-size:10px}body.in-mission .canvas-wrap{height:clamp(220px,calc(100svh - 570px),650px)}body:not(.in-mission) .play-modes~.game .canvas-wrap{height:clamp(220px,calc(100svh - 508px),650px)}}@media(max-width:750px) and (orientation:landscape){.play-modes{margin-bottom:4px}.play-modes button{min-height:36px}.mission-status{padding:5px 10px;margin-bottom:4px}.mission-status>div{flex-direction:row}.mission-status progress{margin-top:4px}body.in-mission .canvas-wrap{height:calc(100svh - 185px)}body:not(.in-mission) .play-modes~.game .canvas-wrap{height:calc(100svh - 135px)}.mission-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
