:root{
  --bg:#0d1117; --panel:#151b23; --panel2:#1b2230; --line:#2a3341;
  --ink:#e6edf3; --dim:#8b98a8; --amber:#f0b429; --green:#3fb950;
  --red:#f0553a; --blue:#58a6ff; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden; user-select:none; -webkit-font-smoothing:antialiased;
}
#app{
  height:100%; display:grid;
  grid-template-columns:1fr 310px;
  grid-template-rows:56px 1fr;
  grid-template-areas:"top top" "stage panel";
}

/* ---------- top bar ---------- */
#topbar{
  grid-area:top; display:flex; align-items:center; gap:22px; padding:0 16px 0 148px;
  background:linear-gradient(180deg,#1a2230,#121820);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:210px}
.logo{
  width:32px;height:32px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(160deg,#f0b429,#c8871a); color:#20160a; font-size:18px;
  box-shadow:0 2px 8px rgba(240,180,41,.25);
}
.bname{font-size:13px;font-weight:700;letter-spacing:.12em}
.bsub{font-size:10px;color:var(--dim);letter-spacing:.08em}
/* Nine readouts have to share this bar with the brand and the controls,
   so the labels are allowed to clip before the numbers ever do. */
.stats{display:flex;gap:16px;flex:1;min-width:0}
.stat{display:flex;flex-direction:column;gap:1px;min-width:0;flex:0 1 auto}
.stat label{font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat span{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
#s-clock{color:var(--amber)}
#s-elapsed{color:#c3cede}
#s-score{color:var(--green)}
.lives span{color:var(--red);letter-spacing:2px}
#s-disp{color:var(--green)}
.late span{color:var(--red)}
/* The combo readout carries a two-decimal multiplier and the streak, which
   is the widest value on the bar; below full width, tighten the spacing and
   the digits rather than let any number clip. */
@media (max-width:1240px){
  #topbar{gap:14px}
  .brand{min-width:0}
  .stats{gap:10px}
  .stat span{font-size:15px}
}
/* Narrower still, the station's name gives way to the numbers — it's on
   the tab title, and the menu, anyway. */
@media (max-width:1160px){
  .brand > div{display:none}
}
@media (max-width:1060px){
  .stats{gap:7px}
  .stat span{font-size:14px}
  .stat label{font-size:8px;letter-spacing:.1em}
}
.ctrls{display:flex;gap:8px;align-items:center}
.vol{
  display:flex;align-items:center;gap:7px;padding:0 9px 0 3px;height:34px;
  border:1px solid var(--line);border-radius:7px;background:var(--panel2);
}
.vol button{width:24px;height:24px;border:none;background:none;font-size:14px;
  line-height:1;padding:0;cursor:pointer;color:var(--ink);opacity:.9}
.vol button:hover{opacity:1;background:none}
.vol.off button{opacity:.4}
#vol{
  -webkit-appearance:none;appearance:none;width:78px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) var(--fill,65%),#2f3947 var(--fill,65%));
  outline:none;cursor:pointer;
}
#vol::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#e9eef5;border:1px solid #55606f;cursor:pointer;
}
#vol::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:#e9eef5;border:1px solid #55606f;cursor:pointer;
}
.vol.off #vol{background:#2f3947}
@media (max-width:1180px){ #vol{width:52px} }
.ctrls button{
  width:34px;height:34px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font-size:15px;cursor:pointer;
}
.ctrls button:hover{background:#26303f;border-color:#3a4757}
.ctrls button.wide{width:auto;padding:0 11px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--dim)}
.ctrls button.wide:hover{color:var(--ink)}

/* ---------- stage ---------- */
#stage{grid-area:stage;position:relative;overflow:hidden;background:#0a0e13}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

#toasts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.toast{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:15px;font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.9); white-space:nowrap;
  animation:float 1.5s ease-out forwards;
}
.toast.good{color:#6ee787}.toast.bad{color:#ff8a72}.toast.info{color:#f0b429}
@keyframes float{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  18%{opacity:1;transform:translate(-50%,-58%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-130%) scale(1)}
}
#banner{
  position:absolute;left:50%;top:16%;transform:translateX(-50%);
  pointer-events:none;text-align:center;
}
.bnr{
  font-size:34px;font-weight:800;letter-spacing:.18em;color:var(--amber);
  text-shadow:0 4px 24px rgba(0,0,0,.9); animation:bpop 2.2s ease-out forwards;
}
.bnr small{display:block;font-size:13px;letter-spacing:.2em;color:#cfd8e3;margin-top:6px;font-weight:600}
@keyframes bpop{0%{opacity:0;transform:scale(.85)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}

/* ---------- panel ---------- */
#panel{
  grid-area:panel;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
#panel h2{
  margin:0;padding:12px 14px 9px;font-size:10px;letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase;border-bottom:1px solid var(--line);
}
#board{flex:1;overflow-y:auto;padding:8px}
#board::-webkit-scrollbar{width:8px}
#board::-webkit-scrollbar-thumb{background:#2c3644;border-radius:4px}
.row{
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  padding:8px 9px;margin-bottom:7px;cursor:pointer;transition:.12s;
  border-left-width:4px;
}
.row:hover{background:#232d3d}
.row.sel{border-color:var(--amber);background:#2c2718;box-shadow:0 0 0 1px var(--amber) inset}
/* Line 1: direction, service name, route, road. The road is pinned hard
   right by its own auto margin, so it stays put however long the rest is.
   The route gives up space first (it is the one part that can be read off
   the canvas label instead); the short service code never needs to. A
   timetabled service carries no route, and its long name takes the slack
   instead — that is what .grow is for. */
.row .r1{display:flex;align-items:baseline;gap:6px}
.row .dir{font-size:11px;color:var(--dim);flex:none;line-height:1}
.row .code{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;flex:none}
.row .code.grow{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .route{font-size:9.5px;color:var(--dim);letter-spacing:.02em;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .road{font-family:var(--mono);font-size:12px;color:var(--blue);font-weight:700;
  flex:none;margin-left:auto;padding-left:4px}
/* Line 2: formation and booked time on the left, status pill on the right. */
.row .r2{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:6px}
.row .kind{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .stat2{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;flex:none}
.st-wait{background:#3a2f10;color:#f0b429}
.st-run{background:#10331d;color:#6ee787}
.st-dwell{background:#12293f;color:#79c0ff}
.st-late{background:#3d1712;color:#ff8a72}
.empty{color:#5b687a;font-size:12px;text-align:center;padding:26px 10px;line-height:1.6}

/* ---------- cab view ---------- */
/* A picture-in-picture over the empty top-left corner of the map: the grass
   beyond the fence, west of the station building. cab.js sizes it to exactly
   that space for the window and station you have, so it never covers a
   track or a train. */
#cab{position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-direction:column;
  background:rgba(13,17,23,.93);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 6px 24px rgba(0,0,0,.55);padding:6px 7px 7px}
.cabhead{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex:none;min-height:20px}
.cabtitle{font-size:9px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;flex:none}
#cabname{flex:1;min-width:0;font-family:var(--mono);font-size:11px;font-weight:700;color:#58c6ff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cabtoggle{width:22px;height:20px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);
  color:var(--dim);font-size:10px;line-height:1;cursor:pointer;padding:0;flex:none}
#cabtoggle:hover{color:var(--ink);border-color:#3a4757}
.cabwrap{position:relative;flex:1;min-height:0;border-radius:6px;overflow:hidden;background:#07090c;
  box-shadow:0 0 0 1px #2a3341 inset}
#cabcv{position:absolute;inset:0;width:100%;height:100%;display:block}
#cabhint{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 20px;
  font-size:11px;letter-spacing:.06em;color:#5b687a;line-height:1.5}
#cabhint[hidden]{display:none}
/* Collapsed, or with no room to show a picture worth looking at: just the
   header, as a pill in the corner. */
#cab.off,#cab.tight{width:auto!important;height:auto!important}
#cab.off .cabwrap,#cab.tight .cabwrap{display:none}
#cab.off .cabhead,#cab.tight .cabhead{margin-bottom:0}
#cab.tight:not(.off)::after{content:'Make the window bigger to see it';display:block;margin-top:4px;
  font-size:10px;letter-spacing:.04em;color:#5b687a}

#assign{border-top:1px solid var(--line);padding:10px}
.ahead{font-size:9px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-bottom:7px}
.akeys{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.akey{
  border:1px solid var(--line);background:var(--panel2);border-radius:7px;
  padding:6px 2px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:.12s;
}
.akey b{font-family:var(--mono);font-size:13px}
.akey span{font-family:var(--mono);font-size:10px;font-weight:700;color:#c3cede;letter-spacing:.02em}
.akey i{font-style:normal;font-size:8px;letter-spacing:.06em;color:var(--dim)}
.akey i::before{content:"max "}
.ahead2{font-size:9px;color:#5b687a;letter-spacing:.04em;margin:-3px 0 6px}
.akey.ok{border-color:var(--green);background:#122a1a}
.akey.ok:hover{background:#183a24}
.akey.no{opacity:.32;cursor:not-allowed}
#hint{margin-top:8px;font-size:11px;color:var(--dim);line-height:1.45;min-height:32px}
#hint b{color:var(--amber)}

/* ---------- overlay ---------- */
#overlay{
  position:fixed;inset:0;background:rgba(6,9,13,.9);backdrop-filter:blur(6px);
  display:none;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:58px 14px 24px;
}
#overlay.show{display:flex}
.card{
  width:min(660px,92vw);margin:auto;background:linear-gradient(170deg,#18202c,#10161e);
  border:1px solid #2c3644;border-radius:16px;padding:30px 34px;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
/* Persistent "back to the site" pill — lives outside #app/#overlay so the
   game's DOM rewrites never remove it; reachable from every screen. */
#site-home{
  position:fixed;left:12px;top:10px;z-index:80;display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 13px;border-radius:8px;text-decoration:none;
  background:rgba(13,17,23,.9);border:1px solid #2a3341;color:#c3cede;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;backdrop-filter:blur(6px);
}
#site-home:hover{color:#fff;border-color:#3a4757}
#site-home .hi{font-size:15px;line-height:1}
.card h1{margin:0;font-size:33px;letter-spacing:.16em;font-weight:800}
.card h1 em{color:var(--amber);font-style:normal}
.tag{margin:6px 0 16px;color:var(--dim);font-size:12px;letter-spacing:.14em}
.stations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.stations .stn{
  width:auto;text-align:left;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;
  color:var(--ink);display:flex;flex-direction:column;gap:3px;font:inherit;
  letter-spacing:normal;
}
.stations .stn:hover{background:#232d3d;border-color:#3a4757}
.stations .stn.sel{border-color:var(--amber);background:#2c2718;box-shadow:0 0 0 1px var(--amber) inset}
.stn-name{font-size:13px;font-weight:700}
.stn-meta{font-size:9.5px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.stn-blurb-line{margin:0 0 20px;font-size:12px;color:#9aa7b8;line-height:1.5;min-height:18px}
.rules{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.rules div{font-size:13px;line-height:1.55;color:#c3cede}
.rules b{color:var(--amber);margin-right:4px}
.rules i{color:#fff;font-style:italic}
kbd{
  font-family:var(--mono);font-size:11px;background:#232d3d;border:1px solid #38445a;
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;
}
.card button{
  width:100%;padding:13px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#f0b429,#d4941a);color:#1a1206;
  font-size:14px;font-weight:800;letter-spacing:.18em;
}
.card button:hover{filter:brightness(1.08)}
.card .btnrow{display:flex;gap:10px}
.card button.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.foot{margin-top:14px;text-align:center;font-size:11px;color:#5b687a;letter-spacing:.06em}
.final{display:flex;gap:26px;margin:16px 0 22px;flex-wrap:wrap}
.final div{display:flex;flex-direction:column;gap:2px}
.final label{font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.final span{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--amber)}

@media (max-width:1100px){
  #app{grid-template-columns:1fr 250px}
}
/* ---------- phones / narrow: stack the register under the stage ---------- */
@media (max-width:760px){
  #app{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr minmax(210px,40vh);
    grid-template-areas:"top" "stage" "panel";
  }
  #topbar{gap:10px;padding:0 10px 0 54px}
  .stats{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:12px}
  .stats::-webkit-scrollbar{height:0}
  .brand > div{display:none}
  #panel{border-left:none;border-top:1px solid var(--line)}
  #site-home{padding:0 10px}
  #site-home .label{display:none}
  .stations{grid-template-columns:1fr}
  .card{padding:24px 20px}
  .card h1{font-size:25px;letter-spacing:.1em}
  .rules div{font-size:12.5px}
}