:root { --bar: 52px; --bg:#0f1b2d; --fg:#fff; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#bar { position:fixed; top:0; left:0; right:0; height:var(--bar); background:var(--bg); color:var(--fg);
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.25); padding-top: env(safe-area-inset-top); }
.title { font-weight:700; font-size:18px; white-space:nowrap; }
.sub { font-weight:600; font-size:11px; background:#e4002b; padding:2px 6px; border-radius:4px; vertical-align:middle; margin-left:4px; text-transform:uppercase; letter-spacing:.5px; }
.stats { display:flex; gap:10px; align-items:center; font-size:14px; }
.pill { background:#fff; color:#0f1b2d; border:0; border-radius:999px; padding:6px 12px; font-weight:700; font-size:14px; cursor:pointer; }
.pill.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.pill.alert { background:#ffb000; }
.muted { opacity:.8; font-size:13px; }
#map { position:absolute; top:var(--bar); left:0; right:0; bottom:0; }
.panel { position:fixed; top:calc(var(--bar) + 10px); right:10px; z-index:1001; background:#fff; border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.25); padding:12px 14px; max-height:calc(100% - var(--bar) - 30px); overflow:auto; width:min(360px, calc(100% - 20px)); font-size:14px; }
.panel h3 { margin:0 0 8px; font-size:15px; }
.legend-row { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; user-select:none; }
.legend-row.off { opacity:.35; }
.swatch { width:22px; height:6px; border-radius:3px; flex:none; }
.legend-row .n { margin-left:auto; font-variant-numeric: tabular-nums; color:#555; }
.alert-item { border-top:1px solid #eee; padding:8px 0; }
.alert-item:first-of-type { border-top:0; }
.alert-item .h { font-weight:600; }
.alert-item .m { color:#666; font-size:12px; margin-top:2px; }
.alert-item.future { opacity:.65; }
.train-icon { background:none; border:0; }
.popup h4 { margin:0 0 4px; font-size:15px; }
.popup .badge { display:inline-block; padding:1px 7px; border-radius:4px; font-weight:700; font-size:12px; margin-right:6px; }
.popup table { border-collapse:collapse; font-size:13px; }
.popup td { padding:1px 6px 1px 0; vertical-align:top; }
.popup td:first-child { color:#777; white-space:nowrap; }
.late { color:#c00; font-weight:600; } .early { color:#06c; font-weight:600; } .ontime { color:#080; font-weight:600; }
.station-label { font-size:11px; }
@media (max-width: 600px) {
  .title { font-size:15px; } .sub { display:none; } .muted { font-size:11px; } .stats { gap:6px; }
  .pill { padding:5px 9px; font-size:13px; }
}
/* mini train icons: .tp = line-colour frame, .tb = side-view drawing (train-icons.js), .tl = type label (zoom >= 14) */
.tm { position:relative; width:100%; height:100%; }
.tp { position:absolute; inset:0; border-radius:4px; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.55); }
.tb { display:block; background-repeat:no-repeat; background-size:100% 100%; }
.tm.w .tb { transform:scaleX(-1); }
.tm.stale { opacity:.45; }
.tl { display:none; position:absolute; left:50%; top:100%; margin-top:2px; transform:translateX(-50%); white-space:nowrap;
  font:700 10px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; color:#0f1b2d; background:rgba(255,255,255,.92);
  border:1.5px solid #555; border-radius:3px; padding:0 3px; pointer-events:none; }
.labels .tl { display:block; }
.compact .tm { transform:scale(.75); }
.tiny .tm { transform:scale(.55); }
.ticon { width:52px; flex:none; display:flex; align-items:center; }
.ticon .tb { transform:none; }
.swatch.dashed { background-image:repeating-linear-gradient(90deg, transparent 0 7px, #fff 7px 10px) !important; }
.vbadge { display:inline-block; background:#8F1A95; color:#fff; border-radius:3px; padding:0 5px; font-size:11px; font-weight:700; }
.big .tm { transform:scale(1.3); }
/* preview: rotated top-down trains */
.tv { position:relative; width:0; height:0; }
.tv .rot { position:absolute; transform-origin:50% 50%; filter:drop-shadow(0 0 1px rgba(0,0,0,.45)); }
.tv.stale { opacity:.5; }
.tv .tl { left:0; top:8px; margin-top:0; transform:translateX(-50%); }
.ticon2 { display:inline-block; height:11px; margin-right:6px; vertical-align:middle; }
.ticon { width:64px; }
/* stations overlay */
.st-label { white-space:nowrap; font:600 12px/16px -apple-system, "Segoe UI", Roboto, sans-serif; color:#0f1b2d;
  background:rgba(255,255,255,.95); border:1px solid rgba(15,27,45,.35); border-radius:8px; padding:0 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.25); pointer-events:none; position:absolute; }
.st-label.major { font-weight:800; border-color:#0f1b2d; }
.st-label.vl { border-color:#8F1A95; color:#4a0d50; }
.st-label.sm { font-size:11px; line-height:15px; }
.st-icon { background:none; border:0; }
.stations-btn { background:#fff; border:2px solid rgba(0,0,0,.2); border-radius:4px; padding:4px 7px; font:600 13px sans-serif; cursor:pointer; }
.stations-btn.on { background:#0f1b2d; color:#fff; }
.legend-check { display:flex; align-items:center; gap:8px; padding:6px 2px 10px; font-weight:600; border-bottom:1px solid #eee; margin-bottom:6px; }
/* direction effects */
.leaflet-pane .dir-fx { position:absolute; left:0; top:0; pointer-events:none; }
.tv.dot .rot { filter:drop-shadow(0 0 1.5px rgba(0,0,0,.5)); }
.night .leaflet-tile-pane { filter:brightness(.55) saturate(.75) contrast(1.05); }
.tv.side .rot { filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); }
/* >= 36 px invisible tap target centred on each train */
.tv .hit { position:absolute; left:-18px; top:-18px; width:36px; height:36px; border-radius:50%; background:transparent; }
.tv:not(.dot):not(.side) .rot { filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px rgba(0,0,0,.5)); }

/* round 4: bigger, high-visibility trains: thick white halo + line-colour glow + soft dark shadow (all symmetric, so they rotate/flip cleanly) */
.tv.side .rot, .tv.dot .rot {
  filter: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff)
          drop-shadow(0 0 3px var(--gc, transparent)) drop-shadow(0 0 2.5px rgba(0,0,0,.55));
}
.tv .hit { left:-22px; top:-22px; width:44px; height:44px; }
.ticon { width:64px; }
/* crowding: the train under the finger/cursor (or with an open popup) comes to the front */
.leaflet-marker-icon.train-icon:hover, .leaflet-marker-icon.train-icon:active { z-index:100000 !important; }
/* round 5: type label from zoom 13; overlapping labels hidden by declutterLabels() */
.labels .tl.hid { display:none; }
/* round 5 colours: keep the crisp white outline, drop the line-colour glow and the soft dark blur that washed the liveries out
   (5 cheap 0-blur/1px shadows instead of 6 incl. two blurred ones) */
.tv.side .rot { filter: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff)
          drop-shadow(0 0 .8px rgba(0,0,0,.7)); }

/* r5d: side-view artwork is a canvas (immune to Samsung Internet forced dark mode recolouring inline SVG) */
.tv .rot canvas.tcv { position:absolute; display:block; pointer-events:none; }

/* r5f: side-on type labels rotate with the train (transform written by applyAngle) */
.tv.side .tl { left:0; top:0; transform-origin:0 0; }

/* r5g: anonymous live viewer count in the header */
.viewers { font-size:13px; font-weight:600; opacity:.85; white-space:nowrap; }
/* r5g: longer title "Melbourne Trains Live" + viewer count: on phones the title wraps to two lines so everything fits */
.pill { white-space:nowrap; }
.title { flex:0 1 auto; min-width:0; margin-right:8px; }
@media (max-width: 600px) {
  #bar { padding:0 8px; }
  .title { white-space:normal; font-size:14px; line-height:1.1; max-width:100px; }
  .stats { gap:5px; } #updated { line-height:1.15; text-align:center; }
  .pill { padding:5px 8px; }
}
@media (max-width: 380px) {
  .title { font-size:13px; min-width:88px; max-width:92px; margin-right:4px; }
  .stats { gap:3px; } .pill { padding:4px 7px; font-size:12px; } .viewers { font-size:12px; }
  #updated { font-size:10px; max-width:50px; }
}
/* r5g: title always on two lines ("Melbourne" over "Trains Live"), left-aligned, tight so it fits the 52px bar */
.title, .title * { white-space:nowrap; }
.title { display:flex; align-items:center; gap:6px; flex:none; max-width:none; min-width:0; font-size:16px; line-height:1.05; text-align:left; }
.title .ico { font-size:20px; line-height:1; }
.title .name { display:block; }
@media (max-width: 600px) { .title { font-size:14px; gap:4px; max-width:none; } .title .ico { font-size:17px; } }
@media (max-width: 380px) { .title { font-size:13px; max-width:none; min-width:0; } .title .ico { font-size:15px; } }