@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');
:root { --blue:#171b52; --blue-deep:#111541; --yellow:#efe3b5; --muted:#b6b58e; --line:rgba(229,218,164,.34); --green:#a8cba9; --red:#ed9b78; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#d1d0c6; color:var(--yellow); font-family:Arial, sans-serif; }
.board-wrap { max-width:1220px; margin:0 auto; padding:38px 28px 28px; }
.board { position:relative; overflow:hidden; background:var(--blue); border:10px solid var(--blue-deep); border-radius:5px 5px 28px 28px; box-shadow:0 17px 34px rgba(17,21,65,.3), inset 0 0 0 2px #827d58; }
.board:before { content:''; position:absolute; inset:10px; border:2px solid #d5c987; border-radius:2px 2px 20px 20px; pointer-events:none; }
.board-topline { position:relative; z-index:1; display:flex; justify-content:space-between; margin:24px 30px 0; color:var(--yellow); font:500 12px 'DM Mono',monospace; letter-spacing:.08em; }
.board-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:20px; padding:22px 40px 26px; border-bottom:2px solid var(--line); text-align:center; }
h1 { margin:0; color:var(--yellow); font-size:clamp(25px,4vw,53px); line-height:1.08; letter-spacing:-.045em; font-weight:800; }
.train-form { display:inline-flex; flex:0 1 220px; min-width:180px; border:2px solid #cfc78c; background:#eae2b4; box-shadow:inset 0 0 0 3px rgba(23,27,82,.12); }
.train-form input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--blue); padding:11px 10px; font:500 18px 'DM Mono',monospace; }
.train-form input::placeholder { color:#77754f; }.train-form button { border:0; border-left:2px solid #cfc78c; padding:0 13px; color:var(--blue); background:#eae2b4; font-size:25px; cursor:pointer; }.train-form button:disabled { opacity:.45; }
.location-button { border:1px solid #cfc78c; background:transparent; color:var(--yellow); padding:10px 12px; font:11px 'DM Mono',monospace; cursor:pointer; white-space:nowrap; }.location-button:hover { background:rgba(239,227,181,.12); }.location-button:disabled { opacity:.45; cursor:wait; }
.board-subheader { display:flex; justify-content:space-between; align-items:center; padding:10px 30px; color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid var(--line); }.board-subheader label { display:flex; align-items:center; gap:10px; }.board-subheader input { width:170px; border:1px solid #aaa979; background:var(--blue-deep); color:var(--yellow); border-radius:0; padding:6px 8px; outline:0; font:11px 'DM Mono',monospace; }.board-subheader input::placeholder { color:#8f916f; }
.column-head, .board-row { display:grid; grid-template-columns:110px minmax(230px,1.5fr) 85px minmax(110px,.8fr) minmax(180px,1.2fr) minmax(130px,.8fr); gap:0; align-items:center; }.column-head { padding:10px 22px 8px; color:var(--yellow); text-transform:lowercase; font-size:15px; font-weight:700; border-bottom:2px solid var(--line); }.column-head span { padding:0 10px; }.results { min-height:130px; }.route-label { padding:7px 22px 6px; color:var(--green); border-bottom:1px solid var(--line); font:500 11px 'DM Mono',monospace; letter-spacing:.08em; }.route-label span { float:right; color:var(--muted); }.board-row { position:relative; min-height:57px; border-bottom:1px solid var(--line); font-size:14px; }.board-row > span { min-height:57px; display:flex; align-items:center; padding:8px 10px; border-left:1px solid var(--line); }.board-row > span:first-child { border-left:0; }.row-time { color:var(--yellow); font:500 25px 'DM Mono',monospace; letter-spacing:-.08em; }.row-station { display:block!important; padding-top:10px!important; }.row-station b { display:block; font-size:15px; }.row-station small { display:block; color:var(--muted); margin-top:3px; font:10px 'DM Mono',monospace; }.row-platform { color:var(--yellow); font:500 21px 'DM Mono',monospace; }.row-type, .row-via { color:#dfdbb0; font-size:13px; }.row-note { color:var(--muted); font:11px 'DM Mono',monospace; }.row-note.late { color:var(--red); }.row-note.early, .row-note.on-time { color:var(--green); }.board-row.target { background:rgba(170,205,169,.12); box-shadow:inset 5px 0 var(--green); }.target-label { position:absolute; right:10px; top:3px; color:var(--green); font:9px 'DM Mono',monospace; text-transform:uppercase; font-style:normal; }.empty-board { padding:42px 20px; color:var(--muted); text-align:center; font:13px 'DM Mono',monospace; }.loading { color:var(--yellow); }.message { margin:12px 22px; padding:11px 14px; background:#69323c; color:#f7d7a4; border:1px solid #b96960; font:12px 'DM Mono',monospace; }.board-footer { display:flex; justify-content:space-between; padding:15px 22px 8px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.08em; }.under-board { color:#5e655e; text-align:center; font:11px 'DM Mono',monospace; }
.location-results { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:11px 22px; border-bottom:1px solid var(--line); color:var(--muted); font:11px 'DM Mono',monospace; }.location-caption { margin-right:5px; }.candidate { border:1px solid #a7a871; background:var(--blue-deep); color:var(--yellow); padding:5px 8px; cursor:pointer; font:11px 'DM Mono',monospace; }.candidate:hover, .candidate.closest { background:#28316e; border-color:var(--green); }.candidate small { color:var(--muted); margin-left:6px; }
.train-map { height:220px; margin:0 22px 14px; border:2px solid #d5c987; z-index:0; }.train-map.stale { opacity:.65; }
@media (max-width:850px) { .board-wrap { padding:14px 8px 22px; }.board-header { flex-wrap:wrap; padding:18px 22px 22px; gap:12px; }.board-header h1 { font-size:30px; }.train-form { flex-basis:245px; }.location-button { flex-basis:245px; }.board-subheader { align-items:flex-start; flex-direction:column; gap:10px; }.column-head, .board-row { grid-template-columns:82px minmax(150px,1fr) 64px 90px; }.column-head span:nth-child(5), .column-head span:nth-child(6), .row-via, .row-note { display:none!important; }.column-head span:nth-child(4) { border-left:1px solid var(--line); }.board-row > span { padding-left:7px; padding-right:7px; }.row-time { font-size:19px; }.row-station b { font-size:13px; }.board-footer { padding-left:12px; padding-right:12px; } }
@media (max-width:520px) { .board { border-width:6px; }.board:before { inset:6px; }.board-topline { margin:19px 15px 0; font-size:9px; }.board-header { justify-content:flex-start; text-align:left; padding-left:15px; padding-right:15px; }.board-header h1 { font-size:24px; }.train-form { width:100%; flex-basis:100%; }.board-subheader { padding-left:15px; padding-right:15px; }.board-subheader label { width:100%; justify-content:space-between; }.board-subheader input { flex:1; }.column-head { padding-left:8px; padding-right:8px; font-size:11px; }.board-row { grid-template-columns:69px minmax(128px,1fr) 55px 78px; }.board-row > span { min-height:54px; }.row-time { font-size:16px; }.row-type { font-size:11px; }.route-label { padding-left:10px; padding-right:10px; }.board-footer { font-size:8px; } }