/* nanorails — classy handheld-console UX.
   The whole experience reads as one device: screen + in-screen HUD + an
   integrated route display + glass menus. game.js drives elements by id. */

:root{
  --ink:#eaeef6; --dim:#9aa3b6; --faint:#5d6677;
  --accent:#5fe0a0; --accent-2:#39b87f;
  --gold:#f3c969; --danger:#ff6f6f; --amber:#e8c25a;
  --glass:rgba(16,20,28,.62); --glass-2:rgba(22,28,38,.9);
  --edge:rgba(255,255,255,.08); --edge-2:rgba(255,255,255,.14);
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(1100px 700px at 50% -15%, #1a2030 0%, #0c0f16 55%, #07090d 100%) fixed;
  color:var(--ink); font:16px/1.5 var(--sans);
  display:flex; flex-direction:column; align-items:center; padding:24px 14px 48px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- wordmark ---------- */
.brand{ text-align:center; margin-bottom:16px; }
.brand .name{ font-size:26px; font-weight:700; letter-spacing:.6px; }
.brand .name .loco{ font-size:30px; vertical-align:-2px; }
.brand .tag{ color:var(--dim); font-size:13px; letter-spacing:.3px; margin-top:1px; }

/* ---------- the console ---------- */
.device{
  --w:512px; width:min(var(--w), 92vw);
  padding:14px 14px 12px; border-radius:22px;
  background:linear-gradient(180deg,#222a39,#141922 60%,#0f141c);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -18px 30px rgba(0,0,0,.35) inset,
    0 26px 60px -18px rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.5);
}

/* ---------- screen ---------- */
.screen{
  position:relative; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 0 0 2px #05070b, 0 0 0 5px #1b212c, 0 8px 24px rgba(0,0,0,.6) inset;
  aspect-ratio:256/240;
}
canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; }

/* subtle CRT: scanlines + vignette + glow */
.crt{ position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:12px; }
.crt::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.6; }
.crt::after{ content:""; position:absolute; inset:0;
  box-shadow:0 0 60px 12px rgba(0,0,0,.55) inset; border-radius:12px; }

/* ---------- in-screen HUD (top status bar) ---------- */
.hud{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; gap:10px;
  padding:7px 9px;
  background:linear-gradient(180deg, rgba(6,9,14,.78), rgba(6,9,14,.30) 70%, transparent);
  font:600 13px/1 var(--mono); letter-spacing:.3px;
  opacity:0; transform:translateY(-6px); transition:opacity .5s, transform .5s;
}
.hud.live{ opacity:1; transform:none; }
.hud .chip{ display:flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:999px;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hud .money{ color:var(--gold); }
.hud .money .ico{ font-size:12px; filter:saturate(1.2); }
.hud .train{ color:var(--ink); }
.hud .train .upg{ color:var(--accent); font-size:11px; }

/* fuel gauge fills the middle */
.hud .fuel{ flex:1; display:flex; align-items:center; gap:7px;
  padding:4px 10px; border-radius:999px;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hud .fuel .lbl{ color:var(--faint); font-size:10px; letter-spacing:1px; }
.hud .gauge{ position:relative; flex:1; height:7px; border-radius:6px;
  background:rgba(255,255,255,.08); overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset; }
.hud .gauge .fill{ position:absolute; inset:0 auto 0 0; width:100%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border-radius:6px; transition:width .15s linear, background .3s; }
.hud .fuel .num{ color:var(--dim); font-size:10.5px; min-width:62px; text-align:right; }
.hud .fuel.empty .lbl{ color:var(--danger); }

/* out-of-fuel flash (centered on screen) */
.oof{ position:absolute; z-index:4; left:50%; top:44%; transform:translate(-50%,-50%);
  font:700 12px/1 var(--mono); letter-spacing:1.5px; color:#1a0606;
  background:var(--danger); padding:7px 13px; border-radius:8px;
  box-shadow:0 6px 20px rgba(255,111,111,.4); animation:oofblink 1s steps(2) infinite; }
@keyframes oofblink{ 50%{ opacity:.4 } }

/* ---------- route display (integrated in the bezel) ---------- */
.route{ position:relative; height:40px; margin:11px 6px 3px; }
.route .head{ position:absolute; top:-3px; left:2px;
  font:600 9px/1 var(--mono); letter-spacing:2px; color:var(--faint); }
.route .rail{ position:absolute; left:18px; right:18px; top:24px; height:3px; border-radius:3px;
  background:repeating-linear-gradient(90deg,#39435a 0 6px,#212a39 6px 12px); }
.route .stn{ position:absolute; top:18px; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:#222a39; border:2px solid #46556f; transition:.3s; }
.route .stn.origin{ left:18px } .route .stn.dest{ left:calc(100% - 18px) }
.route .stn.active{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 10px 2px rgba(95,224,160,.6); }
.route .lab{ position:absolute; top:30px; font:10px var(--mono); color:var(--dim);
  transform:translateX(-50%); white-space:nowrap; }
.route .lab.o{ left:18px } .route .lab.d{ left:calc(100% - 18px) }
.route .train{ position:absolute; top:9px; left:0; font-size:16px;
  transform:translateX(-50%); transition:left .15s linear; filter:drop-shadow(0 1px 2px #000a); }

/* ---------- route chain (dynamic list of locations) ---------- */
.route .chain{ position:relative; height:34px; margin-top:7px; }
.route .chain::before{ content:""; position:absolute; left:10px; right:10px; top:13px; height:3px;
  border-radius:3px; background:repeating-linear-gradient(90deg,#39435a 0 6px,#212a39 6px 12px); }
.cstn{ position:absolute; top:8px; width:11px; height:11px; margin-left:-5px; border-radius:50%;
  background:#222a39; border:2px solid #46556f; transition:.3s; z-index:1; }
.cstn.active{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 10px 2px rgba(95,224,160,.6); }
.clab{ position:absolute; top:21px; font:9px/1 var(--mono); color:var(--faint);
  transform:translateX(-50%); white-space:nowrap; transition:.3s; }
.clab.active{ color:var(--accent); }
.ctrain{ position:absolute; top:-3px; font-size:15px; transform:translateX(-50%);
  transition:left .15s linear; filter:drop-shadow(0 1px 2px #000a); z-index:2; }

/* ---------- visible train controls ---------- */
.controls{ display:flex; gap:8px; margin:12px 4px 2px; }
.ctl{ flex:1; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none;
  padding:11px 8px; border-radius:11px; border:1px solid var(--edge-2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--ink); font:700 13px/1 var(--sans); letter-spacing:.4px; transition:.08s; }
.ctl .k{ color:var(--dim); font:600 12px/1 var(--mono); }
.ctl:hover{ border-color:#3f4d68; }
.ctl.on{ transform:translateY(1px); }
.ctl.throttle.on{ background:linear-gradient(180deg,#74e9ad,#46c489); color:#06281a; border-color:transparent; }
.ctl.brake.on{ background:linear-gradient(180deg,#ff8a8a,#e25b5b); color:#2a0808; border-color:transparent; }
.ctl.whistle, .ctl.bell{ flex:0 0 22%; }
.ctl.whistle.on{ background:linear-gradient(180deg,#ffe08a,#e8c25a); color:#2a2206; border-color:transparent; }
.ctl.bell.on{ background:linear-gradient(180deg,#9fd8ff,#5aa8e8); color:#06223a; border-color:transparent; }

/* ---------- footer hint / toolbar ---------- */
.hint{ display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:12px; color:var(--dim); font-size:13px; }
.hint kbd{ background:#1c2331; border:1px solid var(--edge-2); border-bottom-width:2px;
  border-radius:5px; padding:1px 7px; font:12px var(--mono); color:#dce3f1; }
.hint .tool{ cursor:pointer; background:transparent; border:none; color:var(--dim);
  font:inherit; padding:2px 4px; }
.hint .tool:hover{ color:var(--accent); }

.foot{ color:var(--faint); font-size:12.5px; text-align:center; margin-top:20px; max-width:480px; }
.foot a{ color:var(--accent); text-decoration:none; } .foot a:hover{ text-decoration:underline; }

/* ---------- overlays (title / pause / shop) — glass cards on the screen ---------- */
.scrim{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(5,7,11,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity .25s; }
.scrim[hidden]{ display:none; }
.scrim.fade{ opacity:0; }
.panel{ width:100%; max-width:300px; text-align:center;
  background:linear-gradient(180deg,rgba(30,38,52,.96),rgba(18,23,32,.96));
  border:1px solid var(--edge-2); border-radius:16px; padding:20px 18px 16px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08) inset;
  animation:rise .28s cubic-bezier(.2,.8,.25,1); }
@keyframes rise{ from{ opacity:0; transform:translateY(8px) scale(.97) } }
.panel .ttl{ font-size:22px; font-weight:700; letter-spacing:.4px; margin:0 0 2px; }
.panel .ttl .loco{ font-size:26px; vertical-align:-2px; }
.panel .sub{ color:var(--dim); font-size:12.5px; margin:0 0 15px; }
.panel h2{ font-size:15px; font-weight:700; letter-spacing:.4px; margin:0 0 13px;
  color:var(--ink); text-transform:uppercase; }

.btns{ display:grid; gap:8px; }
.btn{ display:flex; align-items:center; justify-content:center; gap:8px;
  font:600 14px/1 var(--sans); cursor:pointer; user-select:none;
  padding:12px 14px; border-radius:11px; border:1px solid var(--edge-2);
  background:rgba(255,255,255,.04); color:var(--ink); transition:.13s; }
.btn:hover:not(:disabled){ background:rgba(255,255,255,.09); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.primary{ background:linear-gradient(180deg,#74e9ad,#46c489); color:#06281a;
  border-color:transparent; box-shadow:0 8px 22px rgba(95,224,160,.35); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; color:var(--dim); border-color:var(--edge); }
.btn.danger{ color:#ffb3b3; border-color:rgba(255,111,111,.35); }
.btn.danger:hover:not(:disabled){ background:rgba(255,111,111,.12); }

/* shop */
.bal{ font:700 18px/1 var(--mono); color:var(--gold); margin-bottom:14px; }
.item{ display:flex; align-items:center; gap:11px; text-align:left;
  padding:10px 11px; border:1px solid var(--edge); border-radius:12px;
  background:rgba(255,255,255,.03); margin-bottom:9px; }
.item .ico{ font-size:22px; width:26px; text-align:center; }
.item .meta{ flex:1; min-width:0; }
.item .meta .name{ font-weight:600; font-size:13.5px; }
.item .meta .desc{ font-size:11px; color:var(--dim); margin-top:2px; line-height:1.35; }
.item .buy{ flex:0 0 auto; min-width:60px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--edge-2); background:rgba(255,255,255,.05); color:var(--ink);
  font:700 13px/1 var(--mono); cursor:pointer; transition:.13s; }
.item .buy:hover:not(:disabled){ background:var(--accent); color:#06281a; border-color:transparent; }
.item .buy:disabled{ opacity:.4; cursor:not-allowed; }
.muted-note{ font-size:11.5px; color:var(--faint); margin-top:12px; }

@media (max-width:540px){
  .hud .fuel .num{ display:none; }
}