:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #e6ebdb; background: #101c20; }
* { box-sizing: border-box; }
body { margin: 0; display: flex; height: 100dvh; overflow: hidden; }
aside { width: 300px; flex-shrink: 0; padding: 32px 25px; background: #142328; border-right: 1px solid #35453e; z-index: 1; overflow: auto; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; color: #91aa98; }
h1 { font-size: 44px; letter-spacing: -4px; margin: 20px 0 8px; font-weight: 600; }
h1 span { color: #d7d787; }
.intro { color: #b1c0ae; font-size: 11px; margin: 0 0 36px; }
label { display: block; font-size: 11px; color: #b1c0ae; margin: 20px 0; }
.hint { float: right; color: #72877a; }
input, select { width: 100%; margin-top: 9px; border: 1px solid #425348; padding: 11px 9px; background: #1c3030; color: #e6ebdb; font: inherit; border-radius: 3px; }
button { background: #d6d88c; color: #162823; padding: 13px; border: 0; border-radius: 3px; font: inherit; font-size: 11px; cursor: pointer; }
form button { width: 100%; text-align: left; margin-top: 7px; }
button span { float: right; }
button:hover { filter: brightness(1.12); }
:focus-visible { outline: 2px solid #ecedb5; outline-offset: 3px; }
.readout { border-top: 1px solid #35483d; margin-top: 35px; padding-top: 23px; }
.readout span { font-size: 9px; letter-spacing: 2px; color: #8ba391; display: block; }
.readout strong { font-size: 12px; line-height: 1.8; font-weight: 400; display: block; margin-top: 10px; }
.help, .notice { font-size: 10px; line-height: 1.9; color: #8aa08f; margin-top: 25px; }
.notice { color: #c3bf8b; }
#error { font-size: 11px; color: #ffc2a2; }
.visibility { border: 1px solid #35483d; margin: 25px 0 0; padding: 10px 12px; }
.visibility legend { color: #91aa98; font-size: 10px; padding: 0 6px; }
.visibility label { margin: 9px 0; }
.visibility input { width: auto; margin: 0 7px 0 0; accent-color: #d6d88c; }
kbd { float: right; color: #819585; font: inherit; }
main { position: relative; flex: 1; min-width: 0; background: #101c20; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.map-title { pointer-events: none; position: absolute; left: 30px; top: 28px; font-size: 16px; text-shadow: 0 2px 4px #101c20; }
.map-title small { display: block; margin-top: 7px; font-size: 9px; color: #93aa98; letter-spacing: 2px; }
.fit { position: absolute; right: 25px; top: 25px; background: #22372f; color: #dce4c5; border: 1px solid #50624c; }
.tile-info { position: absolute; bottom: 24px; left: 30px; background: #142328e8; border: 1px solid #425348; padding: 12px 16px; font-size: 11px; pointer-events: none; }
@media (max-width: 650px) { aside { width: 210px; padding: 20px 16px; } h1 { font-size: 36px; } .map-title { left: 15px; top: 75px; } .tile-info { left: 10px; bottom: 10px; font-size: 9px; } }
[hidden] { display: none !important; }
#game-controls { border-top: 1px solid #425348; padding-top: 18px; margin-top: 20px; }
#game-controls strong { font-size: 12px; color: #d6d88c; }
#game-controls label { margin: 10px 0; }
#game-controls input, #game-controls select { padding: 7px 5px; }
#game-controls input[type=checkbox] { width: auto; }
.paired { display: flex; gap: 8px; }.paired label { flex: 1; min-width: 0; }
#game-controls details { margin-top: 20px; font-size: 11px; }
#game-controls summary { cursor: pointer; color: #d6d88c; }
#game-controls output, #loan-list, #loan-request-list { font-size: 10px; line-height: 1.7; display: block; margin: 10px 0; }
.train-row { display: block; width: 100%; margin: 7px 0; padding: 8px; background: #294036; color: #e6ebdb; text-align: left; }
#production-graph { position: absolute; width: 260px; height: 70px; left: 30px; bottom: 86px; pointer-events: none; }
#spawn-progress { position: fixed; left: 300px; top: 0; width: calc(100vw - 300px); height: 8px; accent-color: #d6d88c; z-index: 4; }
.tile-info { max-width: calc(100% - 60px); line-height: 1.7; }

.playing aside { padding-top: 18px; }
.playing h1 { font-size: 32px; margin-top: 12px; }
.playing .intro { margin-bottom: 12px; }
.playing #game-controls { margin-top: 12px; }
#game-controls button { margin: 4px 0; }

input[type=checkbox] { width: auto; }
a { color: #d6d88c; }

#auction-inspection { font-size: 10px; line-height: 1.7; max-height: 320px; overflow: auto; border-left: 2px solid #617253; padding-left: 9px; }

/* Match layout: map fills the window; controls live at its edges. */
.playing aside, .playing .map-title, .playing main > #fit { display: none; }
.game-hud { display: none; }
.playing .game-hud { display: contents; }
.toolbar { position: fixed; z-index: 12; left: 12px; right: 12px; top: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 6px; background: #f5f4ec; border: 1px solid #c9cbbd; box-shadow: 0 3px 12px #11221f40; }
.toolbar > .tool-group:first-child { grid-column: 2; }
.toolbar > .utilities { grid-column: 3; justify-self: end; }
.tool-group { display: flex; gap: 3px; align-items: center; }
.tool-group [data-tool="pan"] { margin-right: 10px; }
.tool-group [data-tool="demolish"] { margin-left: 10px; }
.icon-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; flex-shrink: 0; background: transparent; color: #364840; border: 1px solid transparent; }
.tool-shortcut { position: absolute; right: 2px; bottom: 1px; font: 7px/1.1 ui-monospace, monospace; color: inherit; opacity: .8; pointer-events: none; }
.icon-button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover { background: #e2e6d8; }
.icon-tooltip { position: fixed; z-index: 1000; max-width: min(320px,calc(100vw - 16px)); padding: 7px 10px; background: #183d32; color: #fff; border: 1px solid #78988a; border-radius: 4px; box-shadow: 0 3px 12px #11221f40; font-size: 12px; pointer-events: none; }
.icon-button[aria-pressed=true] { color: #f8faed; background: #285648; border-color: #173a31; }
.utilities { border-left: 1px solid #cccec0; padding-left: 8px; }
#pause { background: #e0e6d5; color: #263c33; white-space: nowrap; }
#pause[aria-pressed=true] { background: #ffcf53; }
.statbar { position: fixed; left: 12px; top: 112px; z-index: 11; display: flex; flex-direction: column; gap: 5px; padding: 5px; background: #f5f4ec; border: 1px solid #c9cbbd; }
.hud-panel { position: fixed; z-index: 14; top: 78px; width: 355px; max-width: calc(100vw - 86px); max-height: calc(100dvh - 190px); overflow: auto; padding: 16px; background: #192d2a; border: 1px solid #688473; box-shadow: 0 5px 24px #07171280; font-size: 11px; }
.hud-panel.right { right: 12px; }.hud-panel.left { left: 74px; top: 112px; }
.hud-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #466254; margin-bottom: 12px; }
.panel-controls { display: flex; align-items: center; gap: 4px; }
.panel-pin { width: 30px; height: 30px; padding: 5px; color: #a8bdae; }
.panel-pin:hover { color: #f2f6e8; background: #355347; }
.panel-pin[aria-pressed=true] { color: #ffedaa; background: #365c49; border-color: #8ca379; }
.panel-close { padding: 4px 9px; background: transparent; color: #dce9d8; font-size: 20px; }
.hud-panel label { margin: 12px 0; }.hud-panel input,.hud-panel select { padding: 8px; }
.hud-panel details { margin: 18px 0; }.hud-panel summary { color: #dfdfa7; cursor: pointer; }
.hud-panel button { margin: 4px 0; }.hud-panel output { display: block; line-height: 1.7; }
.match-options { width: 380px; overscroll-behavior: contain; }
.match-clock { display: grid; gap: 7px; padding: 16px; background: #243e35; border: 1px solid #526e5b; }
.match-clock-head { display: flex; gap: 10px; align-items: baseline; color: #b6c8ae; }
.match-clock .match-elapsed { margin: 0; font-size: 30px; line-height: 1.25; font-variant-numeric: tabular-nums; color: #f1ecc1; }
.match-countdown { position: fixed; z-index: 13; top: var(--toolbar-bottom, 78px); right: 12px; width: 346px; max-width: calc(100vw - 120px); font-size: 11px; pointer-events: none; }
#panel-settings:not([hidden]) ~ .match-countdown, #panel-parameters:not([hidden]) ~ .match-countdown { display: none; }
.match-clock-status { color: #deead4; }
.match-clock-status.paused { color: #ff4c55; }
.match-option-actions { display: grid; gap: 8px; margin: 16px 0; }
.match-option-actions button { margin: 0; text-align: left; font-size: 12px; }
.match-option-actions #new-map { background: #334e42; color: #e6ebdb; border: 1px solid #71876d; }
.bug-report-popup { position: fixed; margin: 0; width: min(380px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 16px; color: #e6ebdb; background: #192d2a; border: 1px solid #688473; box-shadow: 0 5px 24px #07171280; }
.bug-report-popup::backdrop { background: transparent; }
.bug-report-popup header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #466254; margin-bottom: 12px; }
.bug-report-popup form { display: grid; gap: 10px; }
.bug-report-popup textarea { box-sizing: border-box; width: 100%; min-height: 110px; resize: vertical; padding: 8px; font: inherit; }
.bug-report-remaining { color: #b6c8ae; font-size: 11px; }
.bug-report-privacy { margin: 0; color: #b6c8ae; font-size: 11px; line-height: 1.4; }
.bug-report-status { margin: 0; min-height: 1.3em; }
.match-option-section { border-top: 1px solid #466254; padding: 14px 0 0; margin-top: 16px; }
.match-option-section h3 { margin: 0 0 12px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #afc3a7; }
.match-options .match-option-section details { margin: 12px 0; }.match-options summary { line-height: 1.6; }
.match-options .help { margin: 10px 0; }
.match-options-back { background: #334e42; color: #e6ebdb; width: 100%; text-align: left; }
.match-status { position: fixed; z-index: 10; top: 73px; left: 82px; right: 82px; text-align: center; pointer-events: none; font-size: 12px; text-shadow: 0 1px 3px #172921; }
#match-info { display: block; color: #fffef2; }
#spawn-objective { margin: 8px auto 14px; max-width: 900px; color: #fffef2; text-shadow: 0 2px 5px #102e25,0 0 12px #102e25; }
#spawn-objective-title { display: block; font-size: clamp(24px,3.4vw,40px); line-height: 1.12; text-wrap: balance; }
#spawn-objective-detail { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; }
#spawn-progress { position: static; display: block; width: min(720px,100%); margin: 8px auto; height: 26px; accent-color: #ffcc32; border: 2px solid #ffedaa; background: #152638; }
#spawn-progress::-webkit-progress-bar { background: #152638; }#spawn-progress::-webkit-progress-value { background: #ffcc32; }
#construction-quote { display: inline-block; background: #142b26d9; color: #fff; padding: 4px 9px; margin-top: 6px; }#construction-quote:empty { display: none; }
body > #error { position: fixed; bottom: 14px; left: 320px; right: 20px; z-index: 25; pointer-events: none; background: #541c16ed; padding: 8px 14px; margin: 0; }
body > #error:empty { display: none; }.playing > #error { top: var(--toolbar-bottom, 74px); bottom: auto; left: 12px; right: 12px; }
.tile-info { bottom: auto; top: 100px; left: 20px; max-width: min(430px,calc(100% - 28px)); z-index: 8; box-shadow: 0 2px 8px #0d24194d; }
.tile-info:empty { display: none; }
.tile-coordinates { position: fixed; right: 12px; bottom: var(--cash-clearance, 92px); z-index: 16; width: 68px; height: 68px; display: grid; place-content: center; white-space: pre; font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; background: #f5f4ec; color: #263c33; border: 1px solid #c9cbbd; box-shadow: 0 2px 8px #0d24194d; pointer-events: none; }
#production-graph { bottom: auto; z-index: 8; }
.layer-control { display: block; width: 100%; text-align: left; background: #dce4d0; }.layer-control[data-level="1"] { opacity: .7; }.layer-control[data-level="2"] { background: #697c70; }
.asset-row { display: block; width: 100%; text-align: left; background: #26483b; color: #ebf2dd; padding: 12px; }
.asset-row > span { float: none; display: block; line-height: 1.7; font-size: 10px; }.asset-row strong { color: #f3e6a4; }
.asset-row .consist { height: 50px; width: 100%; object-fit: contain; }
.factory-card { margin-bottom: 10px; }
.factory-card .asset-row[aria-expanded=true] { outline: 1px solid #b8c98c; background: #315440; }
.factory-editor { padding: 0 12px 12px; border: 1px solid #688473; border-top: 0; }
.factory-growth h3 { font-size: 11px; padding-top: 12px; margin: 0 0 8px; color: #dfdfa7; }
.factory-growth button { width: 100%; }
.bridge-card { padding: 10px 0; border-top: 1px solid #4b6655; }.bridge-card canvas { width: 100%; height: 100px; object-fit: contain; }.bridge-card strong,.bridge-card small { display: block; }.bridge-card button { width: 100%; }
.cash-window { position: fixed; z-index: 15; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; background: #fff; color: #183526; padding: 10px; border: 1px solid #deded6; }
/* Both bar containers reserve the same gutter, even when rivals need a scrollbar. */
.cash-main, .rival-cash { min-width: 0; scrollbar-gutter: stable; }
.cash-main { grid-column: 1; grid-row: 2; display: flex; overflow: hidden; }.cash-track { flex: 1; min-width: 0; position: relative; height: 32px; background: #edf1e9; overflow: hidden; }
.cash-controls { grid-column: 2; grid-row: 1 / 3; align-self: end; display: flex; gap: 8px; align-items: center; }
.cash-fill { position: absolute; height: 100%; left: 0; background: #46ae66; transition: width .12s linear; }
.cash-amount { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #102e1b; text-shadow: 0 1px #ffffff55; pointer-events: none; }
.cash-forecast { position: absolute; left: 0; top: 0; height: 100%; background: repeating-linear-gradient(125deg,#0d713d80 0 3px,#ffffff55 3px 7px); border-right: 2px solid #126740; color: #102b1c; white-space: nowrap; font-size: 11px; padding: 9px 5px; text-shadow: 0 0 3px #fff,0 0 3px #fff; z-index: 2; }
.cash-forecast.negative { background: repeating-linear-gradient(125deg,#ae4e2870 0 3px,#ffffff55 3px 7px); border-color: #9d3f27; }
.cash-cost { position: absolute; top: 0; height: 100%; background: #ffe881b3; box-shadow: inset 0 0 12px #ffffd7,0 0 10px #ffce36; border-left: 2px solid #fff3b3; animation: cash-glow .8s ease-in-out infinite alternate; }
@keyframes cash-glow { to { background: #fff6c7; box-shadow: inset 0 0 12px #fff,0 0 16px #ffba22; } }
.rivals-toggle { width: 36px; height: 32px; padding: 5px; background: #e1e8dc; font-size: 18px; }.cash-note { grid-column: 1 / -1; grid-row: 3; display: block; margin-top: 5px; font-size: 9px; color: #46644c; }
.rival-cash { grid-column: 1; grid-row: 1; max-height: 126px; overflow-y: auto; margin-bottom: 8px; overscroll-behavior: contain; }
.rival-row { position: relative; height: 42px; padding: 4px 0; border-bottom: 1px solid #fff; background: #edf1e9; }.rival-fill { position: absolute; top: 4px; bottom: 4px; left: 0; opacity: .7; }.rival-row span { position: relative; display: block; padding: 8px; font-size: 11px; color: #183526; text-shadow: 0 1px #ffffffb0; }
.auction-paper { position: fixed; z-index: 11; top: 112px; right: 12px; width: 320px; max-height: calc(100dvh - 220px); background: #f3ecd7; color: #342f25; border: 1px solid #b2a78d; box-shadow: 3px 5px 0 #101f2140; }
.auction-paper > header { display: flex; align-items: center; padding: 10px; gap: 5px; border-bottom: 3px double #746752; }.auction-paper > header strong { font-family: Georgia,serif; font-size: 15px; flex: 1; }.auction-paper > header button { padding: 3px 7px; background: transparent; color: #342f25; font-size: 18px; }
.paper-body { max-height: calc(100dvh - 265px); overflow: auto; padding: 0 14px 12px; font-family: Georgia,serif; font-size: 12px; }.auction-content > summary { display: none; }
.auction-paper label { color: #514736; margin: 10px 0; }.auction-paper input,.auction-paper select { background: #fff9e8; color: #342f25; border-color: #a79878; padding: 7px; margin-top: 4px; }.auction-paper button { background: #514a39; color: #fff4da; }
.auction-paper #auction-inspection { font-family: Georgia,serif; font-size: 12px; line-height: 1.5; border: 0; padding: 0; max-height: none; }
.auction-paper #auction-list { font-size: 11px; }.auction-paper #focus-auction,.auction-paper #clear-auction-focus { display: none; }
.bid-history { border-top: 3px double #877b61; padding-top: 12px; }.bid-history p { margin: 7px 0; }.auction-pager { display: flex; justify-content: space-between; margin-top: 12px; }.auction-pager button { min-width: 70px; }
.auction-paper.retracted .paper-body { display: none; }
@media(max-width:1100px) { .toolbar { gap: 3px; }.tool-group { gap: 1px; }.icon-button { width: 32px; padding: 5px; }.utilities { padding-left: 3px; }#pause { padding: 8px 5px; font-size: 10px; } }
@media(max-width:1000px) { .toolbar { grid-template-columns: minmax(0,1fr); }.toolbar > .tool-group:first-child { grid-column: 1; justify-self: center; overflow-x: auto; max-width: 100%; }.toolbar > .utilities { grid-column: 1; }.match-status { top: 116px; }.statbar { top: 158px; }.hud-panel { top: 120px; max-height: calc(100dvh - 220px); }.hud-panel.left { top: 158px; }.auction-paper { top: 158px; width: min(300px,calc(100vw - 90px)); max-height: calc(100dvh - 265px); }.paper-body { max-height: calc(100dvh - 315px); }.cash-note { font-size: 8px; } }
@media(max-width:1000px) { .match-countdown { top: calc(var(--toolbar-bottom, 120px) + 32px); } }
@media(prefers-reduced-motion:reduce) { .cash-cost { animation: none; }.cash-fill { transition: none; } }

.station-popup { box-sizing: border-box; position: fixed; margin: 0; z-index: 1500; width: min(460px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; background: #192d2a; color: #e1ead9; border: 1px solid #91ac8f; box-shadow: 0 12px 60px #071712a0; font-size: 12px; line-height: 1.7; }

.station-popup header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #688473; padding-bottom: 12px; }
.station-popup h2 { margin: 0; font-size: 18px; }
.station-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin: 20px 0; }
.station-popup dt { color: #a5b6a0; }.station-popup dd { margin: 0; overflow-wrap: anywhere; }
.station-popup label { margin: 12px 0; }.station-popup .paired { grid-template-columns: 1fr 1fr; }
.station-popup #station-network-submit { width: 100%; margin-top: 10px; }
.station-popup button:disabled { opacity: .65; cursor: default; }
.station-train-wizard { width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px; background: #192d2a; color: #e1ead9; border: 1px solid #91ac8f; }
.station-train-wizard header, .train-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.station-train-wizard h2 { font-size: 20px; margin: 0; }
.station-train-wizard h3 { font-size: 17px; }
.train-wizard-progress { color: #d6d88c; margin-top: 22px; font-size: 12px; }
.station-train-wizard .help { margin-top: 12px; }
.station-train-wizard form button { width: auto; text-align: center; }
.station-train-wizard .car-handle { width: 100%; }
.station-train-wizard .wizard-cars h3 { margin: 14px 0 0; }
.station-train-wizard .car-palette { margin-top: 8px; }
.station-train-wizard .car-palette-item { flex: 1 1 58px; padding: 2px; font-size: 9px; }
.station-train-wizard .car-preview { width: 38px; height: 44px; }
.station-train-wizard .wizard-locomotives h3 { margin: 14px 0 0; }
.station-train-wizard .wizard-locomotives-body { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.station-train-wizard .wizard-locomotive { flex: 1 1 58px; padding: 2px; font-size: 9px; }
.station-train-wizard .wizard-locomotive[aria-pressed="true"] { outline: 3px solid #f3e6a4; outline-offset: -3px; }
.station-train-wizard .car-layout-list { margin: 4px 0 0; padding: 4px 0; background: transparent; }
.station-train-wizard .car-slot, .station-train-wizard .car-locomotive, .station-train-wizard .car-drop-end { flex: 0 0 56px; }
.station-train-wizard fieldset { min-width: 0; margin: 14px 0; border: 1px solid #698373; }
.station-train-wizard legend, .train-wizard-review { overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; }
.train-wizard-actions { position: sticky; bottom: -22px; padding: 12px 0; background: #192d2a; }
.train-wizard-actions button { min-width: 90px; }
.station-train-wizard button:disabled { opacity: .55; cursor: default; }
@media (max-width: 500px) { .station-train-wizard { padding: 14px; }.station-train-wizard .paired { display: block; }.train-wizard-actions { bottom: -14px; } }
#station-network-terms { font-size: 11px; color: #c3bf8b; }#station-network-error { color: #ffc2a2; }#station-network-error:empty { display: none; }

.bank-breakdown { overflow-x:auto; font-size:11px; }.bank-breakdown table { width:100%; border-collapse:collapse; margin:14px 0; }.bank-breakdown th,.bank-breakdown td { padding:5px; text-align:right; border-bottom:1px solid #47615b; }.bank-breakdown th:first-child,.bank-breakdown td:first-child { text-align:left; }
.bank-periods { display:flex; flex-wrap:wrap; gap:5px; margin:14px 0; }
.bank-periods button { padding:7px 9px; font-size:10px; background:#365348; color:#eaf0dc; border:1px solid #6e877a; }
.bank-periods [aria-selected="true"] { background:#e0eabd; color:#183526; border-color:#e0eabd; }
.bank-chart { margin:12px 0; padding:10px 5px; background:#1a332a; border:1px solid #47615b; }
.bank-chart figcaption { font-size:12px; margin:0 8px 8px; color:#eaf0dc; }
.bank-chart svg { width:100%; display:block; }

.bankruptcy-prompt { max-width:min(580px,calc(100vw - 40px)); padding:40px; background:#f3ecd7; color:#342f25; border:3px double #847657; box-shadow:0 15px 70px #0008; text-align:center; }
.bankruptcy-prompt h1 { font: bold clamp(26px,5vw,42px) Georgia,serif; margin:0 0 20px; }
.bankruptcy-prompt p { line-height:1.6; }
.bankruptcy-prompt > div { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:25px; }
.bankruptcy-prompt button { padding:13px 20px; }

.factory-demolition-prompt { width:min(440px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); overflow:auto; padding:24px; color:#342f25; background:#f3ecd7; border:2px solid #514a39; border-radius:6px; box-shadow:0 16px 60px #0008; }
.factory-demolition-prompt h1 { font:bold 27px Georgia,serif; letter-spacing:normal; margin:0 0 18px; }
.factory-demolition-prompt p { line-height:1.6; }
.factory-demolition-prompt > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:24px; }
.factory-demolition-prompt button { min-width:80px; padding:12px 20px; }
.factory-demolition-prompt button:focus-visible { outline-color:#342f25; }
.factory-demolition-prompt [data-answer="yes"] { background:#9c3f32; color:#fff4da; }

.auction-paper { width:min(365px,calc(100vw - 90px)); }
.gazette-rail { display:none; }
.auction-paper.retracted { right:0; width:38px; height:min(440px,calc(100dvh - 240px)); min-height:150px; }
.auction-paper.retracted > header { display:none; }
.auction-paper.retracted .gazette-rail { display:block; height:100%; width:100%; padding:16px 8px; writing-mode:vertical-rl; font: bold 18px Georgia,serif; letter-spacing:2px; background:#f3ecd7; color:#342f25; border:0; }
.gazette-tabs { display:flex; gap:4px; margin:0 0 12px; }
.gazette-tabs button { flex:1; padding:8px 5px; background:#ded5bc; color:#514736; font-size:11px; border:1px solid #b2a78d; }
.gazette-tabs [aria-selected="true"] { background:#514a39; color:#fff4da; }
.gazette-story { font:13px/1.55 Georgia,serif; padding:10px 0; border-bottom:1px solid #b2a78d; overflow-wrap:anywhere; }
.gazette-story time { font:10px monospace; color:#746752; }.gazette-story p { margin:5px 0; }.gazette-story button { padding:8px 14px; }
.gazette-story .gazette-event { display:block; width:100%; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; border-radius:0; }
.gazette-event .gazette-story-text { display:block; float:none; margin:5px 0; }
.gazette-event:hover { background:#ded5bc; filter:none; }
.gazette-event:focus-visible { outline-color:#514736; }
.auction-content > summary,.auction-content #auction-list { display:none; }

/* Train editing keeps stable controls while snapshots update the simulation. */
#panel-trains { width: min(610px, calc(100vw - 100px)); }
.train-card { margin: 10px 0; border: 1px solid #537461; }
.train-card > .asset-row { margin: 0; overflow-wrap: anywhere; }
.asset-row > .train-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 11px; }
.train-heading > strong, .train-heading > .train-status { min-width: 0; max-width: 100%; }
.train-heading > .train-status { float: none; font: italic 12px/1.5 system-ui, sans-serif; color: #dce9d8; }
.train-editor { padding: 12px; background: #183d30; }
.train-editor button:disabled, #expand-factory:disabled { background: #596b60; color: #d0d6cd; cursor: default; }
.train-editor .train-retire:enabled { background: #ff9500; }
.train-actions, .train-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.train-actions button { flex: 1 1 140px; padding: 8px; }
.train-action-pair { display: flex; flex: 1 1 140px; min-width: 0; gap: 5px; }
.train-action-pair button { flex: 1 1 0; min-width: 0; }
.train-tabs { margin: 12px 0; border-bottom: 1px solid #859885; }
.train-tabs button { flex: 1; padding: 9px 5px; background: #dce4d0; }
.train-tabs [aria-selected="true"] { background: #f3e6a4; box-shadow: inset 0 -3px #9f7940; }
.train-error { color: #ffd2b5; overflow-wrap: anywhere; }
.train-quote { font-size: 12px; line-height: 1.5; }
.train-profit { width: 100%; border-collapse: collapse; font-size: 12px; }
.train-profit th, .train-profit td { padding: 10px 5px; border-bottom: 1px solid #5e7d69; text-align: right; }
.train-profit th:first-child { text-align: left; }
.train-net > span { float: none; }
.train-profit-positive { color: #87ef9c; font-weight: 700; }
.train-profit-negative { color: #ff8e8e; font-weight: 700; }
.train-purchase > summary { padding: 8px 0; }
.car-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.car-palette-item { flex: 1 1 70px; padding: 6px 4px; font-size: 10px; }
.car-preview { display: block; width: 54px; height: 64px; margin: auto; }
.car-layout-list { display: flex; align-items: stretch; gap: 4px; padding: 8px 0; margin: 6px 0; overflow-x: auto; list-style: none; background: #0e2c24; }
.car-slot, .car-locomotive, .car-drop-end { flex: 0 0 68px; text-align: center; border: 1px solid #5a7f67; border-radius: 3px; font-size: 10px; }
.car-locomotive { color: #eadf9f; padding: 5px 0; }
.car-slot button { padding: 5px; margin: 2px 0; font-size: 11px; }
.car-slot .car-handle { display: block; width: 100%; margin: 0; background: transparent; color: #f2edce; }
.car-drop-end { display: grid; place-content: center; justify-items: center; gap: 4px; border-style: dashed; color: #e5eacc; }
[data-car-drag] { touch-action: none; cursor: grab; user-select: none; }
.dragging-car [data-car-drag] { cursor: grabbing; }
.car-drop-target { outline: 3px solid #f3e6a4; outline-offset: -3px; background: #496946; }
.car-drop-target[data-drop-side=before] { box-shadow: inset 4px 0 #f3e6a4; }
.car-drop-target[data-drop-side=after] { box-shadow: inset -4px 0 #f3e6a4; }
.car-drag-ghost { position: fixed; z-index: 100; pointer-events: none; background: #f3e6a4; color: #163629; padding: 8px 14px; box-shadow: 0 3px 12px #0007; }
.route-orders { padding-left: 24px; }
.route-stop { border-bottom: 1px solid #5d7c66; padding-bottom: 10px; }
.route-stop select { width: 100%; min-width: 0; }
.route-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.route-header > :last-child { margin-left: auto; }
.route-stop-name { display: block; font-weight: 700; overflow-wrap: anywhere; padding: 2px 0; }
@media (max-width: 650px) {
  #panel-trains { left: 58px; width: calc(100vw - 70px); }
  .train-editor { padding: 7px; }
  .train-tabs button { font-size: 11px; }
  .route-stop .paired { display: block; }
}

.gazette-date { font: 11px monospace; white-space: nowrap; letter-spacing: 0; }
.gazette-rail .gazette-date { margin-inline-start: 18px; }

.route-controls { border: 0; padding: 0; margin: 0; min-width: 0; }

.match-results { box-sizing:border-box; width:min(1040px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:28px; color:#eef0df; background:#192d2a; border:1px solid #b1bc9a; box-shadow:0 18px 80px #05100db0; }
.match-results h1 { font:bold clamp(28px,5vw,44px) Georgia,serif; margin:0 0 14px; letter-spacing:normal; }
.match-results p { line-height:1.5; }
.result-actions { display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 8px; }
.result-actions button { padding:12px 20px; }
.result-actions button:first-child { background:#dbdfa2; color:#182b24; }
.result-note { font-size:12px; color:#c8d0bc; }
.result-error { color:#ffc0a5; }.result-error:empty { display:none; }
.result-report { margin-top:28px; padding-top:20px; border-top:1px solid #527064; }
.result-report h2 { margin:0 0 10px; font:bold 24px Georgia,serif; }
.result-members { display:block; margin-top:5px; font-weight:normal; color:#c8d0bc; }
.result-winner { background:#dbe4a00c; }
.result-stats { overflow-x:auto; margin:22px 0; }
.result-stats table { width:100%; border-collapse:collapse; font-size:12px; }
.result-stats th,.result-stats td { text-align:right; padding:9px 8px; border-bottom:1px solid #527064; white-space:nowrap; }
.result-stats th:first-child { text-align:left; white-space:normal; min-width:120px; }
.result-chart { margin:24px 0 0; }.result-chart figcaption { font-size:17px; font-weight:bold; }
.result-chart svg { width:100%; height:auto; display:block; overflow:visible; margin-top:15px; background:#132521; }
.result-chart svg text { font:12px system-ui,sans-serif; fill:#d8e0cf; }
.result-grid { stroke:#3d554b; stroke-width:1; }.result-zero { stroke:#789380; stroke-width:1; }
.result-chart-filters,.result-player-legend,.result-team-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; }
.result-chart label { margin:0; display:flex; flex-direction:row; align-items:center; gap:6px; font-size:12px; cursor:pointer; }
.result-chart input { width:16px; height:16px; margin:0; }.result-swatch { width:16px; height:4px; display:inline-block; }
.match-results :focus-visible { outline:2px solid #ecf9ac; outline-offset:3px; }
@media(max-width:600px) { .match-results { padding:18px; }.result-actions { flex-direction:column; }.result-actions button { width:100%; }.result-chart svg { min-width:0; }.result-stats { margin-top:16px; } }
.result-chart-scroll { overflow-x:auto; }.result-chart-scroll svg { min-width:650px; }

.factory-chart { margin: 16px 0 0; min-width: 0; }
.factory-chart figcaption { color: #e3e4b7; font-size: 12px; font-weight: bold; }
.factory-chart .help { margin: 6px 0; line-height: 1.6; }
.factory-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.factory-chart svg text { fill: #c4d2c3; font: 14px ui-monospace, monospace; }
.factory-chart-grid { stroke: #78917c; stroke-opacity: .3; }
.factory-chart-inspect { margin: 6px 0; font-size: 10px; }
.factory-chart-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.factory-chart-legend label { display: grid; grid-template-columns: 14px 14px minmax(0, 1fr) auto; align-items: center; gap: 4px; margin: 0; font-size: 10px; color: #c4d2c3; cursor: pointer; }
.factory-chart-legend input { width: auto; padding: 0; margin: 0; accent-color: #d6d88c; }
.factory-chart-swatch { display: inline-block; width: 14px; border-top: 2px solid; }
.factory-chart-legend b { color: #f3f2e6; overflow-wrap: anywhere; }

.guide-button{display:block;text-align:center;text-decoration:none;border:1px solid #567c72;border-radius:6px;padding:10px 16px;margin:16px 0 22px;font-weight:700;color:#d5e9d9;background:#294940}.guide-button:hover{background:#365b50}.guide-button:focus-visible{outline:3px solid #e8bf78;outline-offset:3px}

/* Nonmodal popups; the train builder stays below the construction toolbar. */
dialog.cursor-popup { position:fixed; inset:auto; margin:0; transform:none; box-sizing:border-box; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; }

dialog.station-train-wizard { left: 12px; top: var(--toolbar-bottom, 74px); max-height: calc(100dvh - var(--toolbar-bottom, 74px) - 8px); }
dialog.exit-confirmation { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(420px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #8c9971; border-radius: 6px; background: #f5f4ec; color: #29453f; }
.exit-confirmation::backdrop { background: #102a2459; }
.exit-confirmation h2 { margin-top: 0; color: inherit; }
.exit-confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.graphics-settings{border:1px solid #66857955;border-radius:4px;margin:12px 0;padding:12px;min-width:0}
.graphics-settings legend{padding:0 6px;font-weight:700}
.graphics-settings .menu-setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.graphics-settings select{max-width:58%;min-width:0}

#panel-parameters { z-index: 17; }
#game-shortcuts .menu-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
#game-shortcuts strong { font-size: 12px; }
#game-shortcuts kbd { flex-shrink: 0; max-width: 48%; font-size: 11px; }

.car-load { display: block; padding: 6px 2px; }
.train-profit-scroll { overflow-x: auto; }
.train-profit th { font-weight: 600; }
.train-profit td { white-space: nowrap; }
.train-profit-views { display: flex; gap: 6px; margin-bottom: 10px; }
.train-profit-views [aria-pressed="true"] { background: #eadf9f; color: #163629; }
.train-profit-periods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.train-profit-periods[hidden] { display: none; }
.train-profit-periods button { flex: 1 1 105px; }
.train-profit-periods [aria-pressed="true"] { background: #eadf9f; color: #163629; }
.train-profit-graph { display: block; width: 100%; height: auto; }
.train-profit-graph[hidden] { display: none; }

.auction-paper > header .panel-pin { padding:5px; }
.auction-paper > header .panel-pin[aria-pressed=true] { color:#493a15; background:#e3cf91; border-color:#897449; }

#construction-quote.bridge-guidance { font-size: 18px; font-weight: 600; line-height: 1.4; padding: 8px 12px; }
.bridge-popup { width: 320px; padding: 18px; background: #192d2a; color: #e1ead9; border: 1px solid #91ac8f; box-shadow: 0 12px 60px #071712a0; font-size: 13px; line-height: 1.5; }
.bridge-popup .help { font-size: 12px; }
.bridge-popup button:disabled { opacity: .5; cursor: default; }
.bridge-popup > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Match tutorial: a small nonmodal guide pinned above the cash bar. */
.match-tutorial { position: fixed; z-index: 16; left: 50%; transform: translateX(-50%); bottom: var(--cash-clearance, 92px); box-sizing: border-box; width: min(560px, calc(100vw - 200px)); background: #192d2a; color: #e1ead9; border: 1px solid #91ac8f; box-shadow: 0 5px 24px #07171280; font-size: 12px; line-height: 1.55; }
.match-tutorial > header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #466254; }
.match-tutorial > header strong { flex: 1; color: #f3e6a4; letter-spacing: .02em; }
.match-tutorial-controls { display: flex; gap: 4px; }
.match-tutorial-controls button { min-height: 28px; padding: 3px 9px; background: transparent; color: #dce9d8; border: 1px solid #688473; cursor: pointer; }
.match-tutorial-controls button:hover { background: #355347; }
.match-tutorial-text { margin: 10px 12px 12px; }
.match-tutorial-finish { display: block; margin: 0 12px 12px; padding: 7px; background: #246b61; color: #fff; border: 1px solid #3d8a7d; cursor: pointer; }
.match-tutorial-finish:hover { background: #2d7f73; }
.match-tutorial-finish[hidden], .match-tutorial-skip[hidden] { display: none; }
.match-tutorial.minimised > header { border-bottom: 0; }
.match-tutorial.minimised .match-tutorial-text, .match-tutorial.minimised .match-tutorial-skip, .match-tutorial.minimised .match-tutorial-finish, .match-tutorial.minimised .match-tutorial-confirm { display: none; }
.match-tutorial-confirm { padding: 10px 12px 12px; border-top: 1px dashed #466254; }
.match-tutorial.confirming > header, .match-tutorial.confirming > .match-tutorial-text, .match-tutorial.confirming > .match-tutorial-finish { display: none; }
.match-tutorial.confirming .match-tutorial-confirm { padding: 10px 12px 12px; border-top: 0; }
.match-tutorial-confirm[hidden] { display: none; }
.match-tutorial-confirm p { margin: 0 0 8px; }
.match-tutorial-confirm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.match-tutorial-confirm-actions button { padding: 6px 10px; background: #26483b; color: #ebf2dd; border: 1px solid #688473; cursor: pointer; }
.match-tutorial-confirm-actions button:hover { background: #315440; }
.match-tutorial-confirm-actions [data-answer="all"] { background: #6b2f23; border-color: #8c4a37; color: #ffe9dc; }
.match-tutorial-confirm-actions [data-answer="all"]:hover { background: #7d3a2b; }
@media(max-width:1100px) { .match-tutorial { width: calc(100vw - 180px); } }
@media(max-width:700px) { .match-tutorial { left: 12px; right: 12px; transform: none; width: auto; } }