/* THE STATION EXPRESS — Railroad Black / Urban Putty / Warm Stone / Vintage Cream / Antique Brass / Weathered Rust / Signal Red */
@font-face{font-family:'Fields of Cathay';src:url(../assets/fields-of-cathay.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --black:#171717;
  --putty:#918879;
  --stone:#C5B8A4;
  --cream:#F0E6D5;
  --brass:#C49A52;
  --rust:#844C39;
  --red:#A63D32;
  --font-title:'Oswald',sans-serif;
  --font-display:'Fields of Cathay','Oswald',sans-serif;
  --font-ui:'Barlow',sans-serif;
  --font-ticket:'Special Elite',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--black);color:var(--cream);font-family:var(--font-ui);overflow:hidden}
#app{position:fixed;inset:0;overflow:hidden;background:var(--black)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;z-index:5}
#hud button{pointer-events:auto}
.hud-label{font-family:var(--font-title);font-size:11px;letter-spacing:.18em;color:var(--stone)}
.hud-score{font-family:var(--font-title);font-weight:700;font-size:34px;line-height:1;color:var(--brass);text-shadow:0 2px 0 #000}
.hud-mult{margin-top:4px;display:inline-block;background:var(--brass);color:#171717;font-family:var(--font-title);font-weight:700;font-size:13px;letter-spacing:.08em;padding:2px 8px;border:2px solid var(--cream)}
.hud-center{text-align:center}
.hud-lives{display:flex;gap:6px;justify-content:center;margin-top:4px}
.life{width:18px;height:18px;border-radius:50%;background:var(--red);border:2px solid var(--cream);box-shadow:0 0 0 2px #000}
.life.off{background:#3a332e;border-color:#6b6257}
.hud-right{display:flex;gap:8px}
.icon-btn{background:#000;border:2px solid var(--brass);color:var(--cream);font-family:var(--font-title);font-weight:600;font-size:12px;letter-spacing:.08em;padding:8px 10px;cursor:pointer}
.icon-btn:active{background:var(--brass);color:#171717}

/* ---------- Overlays / cards ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(23,23,23,.82);z-index:10;padding:20px;overflow-y:auto}
.card{background:#211c17;border:3px solid var(--brass);box-shadow:0 0 0 3px #000,0 12px 40px rgba(0,0,0,.6);max-width:520px;width:100%;padding:24px 22px;text-align:center}
.card h2{font-family:var(--font-display);font-size:30px;letter-spacing:.08em;margin:0 0 12px;color:var(--cream)}
.card p{font-size:16px;line-height:1.5;color:var(--cream);margin:10px 0}
.card p.small,.small{font-size:13px;color:var(--stone)}
.ticket-card{border-style:dashed}
.ticket-stub{font-family:var(--font-ticket);font-size:13px;letter-spacing:.14em;color:var(--brass);margin-bottom:10px}

/* ---------- Menu ---------- */
.menu-inner{text-align:center;max-width:520px;width:100%}
#menu-logo{width:min(240px,52vw);height:auto;border:3px solid var(--brass);box-shadow:0 0 0 3px #000;display:block;margin:0 auto 14px;background:#fff}
.game-title{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,11vw,72px);line-height:.95;letter-spacing:.04em;margin:0;color:var(--cream);text-shadow:0 3px 0 #000}
.tagline{font-family:var(--font-title);font-weight:600;font-size:clamp(13px,3.4vw,18px);letter-spacing:.22em;color:var(--brass);margin:10px 0 18px}
.btn-brass{background:var(--brass);border:3px solid var(--cream);color:#171717;font-family:var(--font-title);font-weight:700;letter-spacing:.12em;padding:12px 26px;font-size:17px;cursor:pointer;box-shadow:0 4px 0 #000}
.btn-brass:active{transform:translateY(2px);box-shadow:0 2px 0 #000}
.btn-big{font-size:26px;padding:16px 64px;letter-spacing:.18em}
.btn-ghost{background:transparent;border:2px solid var(--stone);color:var(--cream);font-family:var(--font-title);font-weight:600;letter-spacing:.1em;padding:10px 16px;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-ghost:active{background:var(--stone);color:#171717}
.btn-link{line-height:1.4}
.btn-menu{background:var(--cream);border:3px solid var(--brass);color:#171717;font-family:var(--font-title);font-weight:700;letter-spacing:.12em;padding:16px 28px;font-size:20px;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 4px 0 #000}
.btn-menu:active{transform:translateY(2px);box-shadow:0 2px 0 #000}
.menu-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.menu-foot{font-family:var(--font-title);font-size:12px;letter-spacing:.2em;color:var(--stone);margin:18px 0 0}
.menu-foot.small{margin-top:6px;letter-spacing:.06em;font-family:var(--font-ui)}

/* ---------- Legend ---------- */
.legend{width:100%;border-collapse:collapse;margin:14px 0;text-align:left;font-size:15px}
.legend td{padding:7px 4px;border-bottom:1px solid #3a332e}
.legend td:last-child{font-family:var(--font-title);font-weight:700;color:var(--brass);text-align:right;white-space:nowrap}
.dot{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:1px solid var(--cream)}
.dot-gold{background:var(--brass);border-radius:50%}
.dot-cream{background:var(--cream)}
.dot-brass{background:var(--brass)}
.dot-rust{background:var(--rust)}
.dot-red{background:var(--red)}

/* ---------- Departure board ---------- */
.board-card{background:#100d0a}
.board-mode{font-family:var(--font-ticket);font-size:13px;letter-spacing:.14em;color:var(--brass);margin:0 0 8px}
.board-list{list-style:none;margin:0;padding:0;text-align:left;font-family:var(--font-title)}
.board-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-bottom:1px solid #3a332e;font-size:19px;letter-spacing:.06em}
.board-list li .rank{color:var(--brass);min-width:2.2em}
.board-list li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list li .sc{color:var(--brass);font-weight:700}

/* ---------- Game over ---------- */
.gameover-title{font-size:38px !important;letter-spacing:.1em !important}
.final-label{font-family:var(--font-title);font-size:12px;letter-spacing:.24em;color:var(--stone);margin:14px 0 0 !important}
.final-score{font-family:var(--font-title);font-weight:700;font-size:58px;line-height:1;color:var(--brass);margin:2px 0 !important}
.best-score{font-family:var(--font-title);font-weight:600;font-size:26px;color:var(--cream);margin:2px 0 14px !important}
#save-row{border-top:1px dashed var(--putty);border-bottom:1px dashed var(--putty);padding:12px 0;margin:6px 0 4px}
.save-line{display:flex;gap:8px;margin-top:8px}
#nickname{flex:1;min-width:0;background:#171717;border:2px solid var(--putty);color:var(--cream);font-family:var(--font-title);font-size:18px;letter-spacing:.1em;padding:10px;text-transform:uppercase}
#nickname:focus{outline:2px solid var(--brass)}

/* ---------- Footer ---------- */
#foot{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--font-title);font-size:11px;letter-spacing:.18em;color:var(--putty);padding:0 10px calc(8px + env(safe-area-inset-bottom));z-index:4;pointer-events:none}

@media (max-width:420px){
  .card{padding:20px 14px}
  .btn-big{padding:14px 48px}
  .hud-score{font-size:28px}
  .gameover-title{font-size:32px !important}
}