/* ---------------------------------------------------------------- basics */
:root {
  --bg: #101722;
  --bg2: #16202e;
  --panel: #1b2635;
  --panel2: #223043;
  --line: #2c3b52;
  --ink: #e8eef7;
  --dim: #93a4bb;
  --accent: #f2b544;
  --accent2: #4f9cf0;
  --good: #3ec07a;
  --bad: #e2564a;
  --radius: 12px;
  --card-red: #d6483f;
  --card-orange: #e0821f;
  --card-yellow: #e5c223;
  --card-green: #33a45c;
  --card-blue: #2f7de1;
  --card-purple: #9159cd;
  --card-black: #2b3240;
  --card-white: #e9e6dd;
  --card-grey: #7d8ca0;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; }
.hidden { display: none !important; }
.muted { color: var(--dim); }
h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.hint { color: var(--dim); font-size: 12.5px; margin: 6px 0 0; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- buttons */
.btn {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: #2b3c53; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #2a1d05; border-color: #d79f31; }
.btn.primary:hover:not(:disabled) { background: #ffc757; }
.btn.big { padding: 12px 18px; font-size: 16px; width: 100%; }
.btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); border-color: #4a2b2b; }

/* ---------------------------------------------------------------- home */
.home { align-items: center; justify-content: center; padding: 24px; }
.home-card {
  width: min(430px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.logo { margin: 0; font-size: 44px; letter-spacing: -.02em; }
.logo::after { content: ' 🚂'; font-size: 32px; }
.tagline { color: var(--dim); margin: 4px 0 22px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
input, select {
  width: 100%; background: var(--bg2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent2); outline-offset: -1px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dim); margin: 18px 0; font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 10px; }
.join-row .btn { width: auto; }
.code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; font-size: 20px; }
.home-foot { margin-top: 22px; color: #5f6f86; font-size: 11.5px; text-align: center; max-width: 460px; }

/* ---------------------------------------------------------------- lobby */
.lobby { align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.lobby-card {
  width: min(940px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px;
}
.lobby-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lobby-head-actions { display: flex; gap: 8px; }
.label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.code-display { font-size: 34px; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.lobby-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 20px; }
.player-list { list-style: none; margin: 0 0 18px; padding: 0; }
.player-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; background: var(--bg2);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
.dot.off { background: #55627a; }
.tag { font-size: 11px; color: var(--accent); border: 1px solid #4a3d1c; border-radius: 6px; padding: 1px 6px; }
.settings { margin-bottom: 16px; }
.settings .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.settings .row span { font-size: 14px; }
.settings .row select { width: auto; min-width: 130px; }
.settings .row input[type=checkbox] { width: auto; }
.map-picker { display: grid; gap: 8px; margin-bottom: 14px; }
.map-opt {
  text-align: left; display: block; width: 100%; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px; cursor: pointer; color: var(--ink);
}
.map-opt:hover { border-color: var(--accent2); }
.map-opt.on { border-color: var(--accent); background: #24303f; }
.map-opt b { display: block; font-size: 15px; }
.map-opt small { color: var(--dim); }
.chat-col { display: flex; flex-direction: column; min-height: 260px; }
.chat-log { flex: 1; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13.5px; }
.chat-log.small { font-size: 12.5px; }
.chat-log div { margin-bottom: 4px; word-break: break-word; }
.chat-log .sys { color: var(--dim); font-style: italic; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form .btn { width: auto; }

/* ---------------------------------------------------------------- game */
.game { height: 100%; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-right { flex: none; }
.topbar-left { overflow: hidden; }
.btn .ico { display: none; }
.brand { font-weight: 800; letter-spacing: -.01em; }
.code-chip { font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.turn-banner { font-weight: 700; font-size: 14.5px; text-align: center; flex: 1; min-width: 0; }
.turn-banner .you { color: var(--accent); }

.game-body { flex: 1; min-height: 0; display: flex; }
.players-panel {
  width: 210px; flex: none; overflow-y: auto; padding: 10px;
  background: var(--bg2); border-right: 1px solid var(--line);
}
.pcard {
  border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px;
  padding: 8px 9px; margin-bottom: 8px; background: var(--panel);
}
.pcard.turn { box-shadow: 0 0 0 1px var(--accent) inset; }
.pcard .pname { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.pcard .prow { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 3px; }
.pcard .pts { color: var(--accent); font-weight: 700; }
.off-badge { font-size: 10px; color: #8a97ac; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }

.board-wrap { flex: 1; min-width: 0; position: relative; background:
  radial-gradient(circle at 50% 40%, #16202e 0%, #0d131c 100%); overflow: hidden; }
.board-host { position: absolute; inset: 0; }
.board-host svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.board-host svg.dragging { cursor: grabbing; }
.city-dot { fill: #f4f1e8; stroke: #10161f; stroke-width: 2; pointer-events: none; }
.city-label { font: 600 13px system-ui, sans-serif; fill: #e6ecf5; paint-order: stroke;
  stroke: #0d131c; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.slot { stroke: #0e141d; stroke-width: 1.4; pointer-events: none; }
.slot.open { opacity: .95; }
.slot-line { fill: none; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.slot-line.halo { stroke: #0b1017; stroke-width: 17; }
.slot-line.body { stroke-width: 12.5; }
.car-divider { fill: #0b1017; opacity: .75; pointer-events: none; }
.route-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: default; pointer-events: stroke; }
.route-hit.can { cursor: pointer; }
.route-glow { fill: none; stroke: var(--accent); stroke-width: 20; opacity: 0;
  transition: opacity .12s; pointer-events: none; }
.route-glow.on { opacity: .2; }
.route:hover .route-glow.on { opacity: .38; }
.loco-pip { fill: #12181f; pointer-events: none; }

.board-prompt {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  background: rgba(20,28,40,.94); border: 1px solid var(--accent); color: var(--ink);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  pointer-events: none; max-width: 90%; text-align: center;
}
.route-tip {
  position: absolute; pointer-events: none; background: rgba(14,20,29,.96);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12.5px;
  z-index: 5; white-space: nowrap;
}

.side-panel {
  width: 290px; flex: none; display: flex; flex-direction: column;
  background: var(--bg2); border-left: 1px solid var(--line); padding: 8px;
}
.side-panel.closed { display: none; }
.log-box { flex: 1; overflow-y: auto; font-size: 12.5px; padding: 6px; }
.log-box div { padding: 2px 0; border-bottom: 1px solid #1d2837; color: #c3cede; }
.chat-box { flex: none; height: 190px; display: flex; flex-direction: column; margin-top: 6px; }

/* --------------------------------------------------------- action bar */
.actionbar {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--line);
}
.market, .hand, .actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.actions { margin-left: auto; }
.tcard {
  width: 42px; height: 58px; border-radius: 8px; border: 1px solid rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 19px; box-shadow: inset 0 -12px 18px rgba(0,0,0,.18);
}
.tcard.clickable { cursor: pointer; }
.tcard.clickable:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.tcard.dim { opacity: .4; }
.tcard .n {
  position: absolute; right: -4px; bottom: -5px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; min-width: 20px; height: 20px;
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.tcard.c-red { background: var(--card-red); }
.tcard.c-orange { background: var(--card-orange); }
.tcard.c-yellow { background: var(--card-yellow); }
.tcard.c-green { background: var(--card-green); }
.tcard.c-blue { background: var(--card-blue); }
.tcard.c-purple { background: var(--card-purple); }
.tcard.c-black { background: var(--card-black); border-color: #5d6879; }
.tcard.c-white { background: var(--card-white); }
.tcard.c-loco {
  background: linear-gradient(135deg, #f2b544, #e0564a 35%, #9159cd 65%, #2f7de1);
  color: #fff;
}
.tcard.deck { background: repeating-linear-gradient(45deg, #26344a, #26344a 6px, #2e3f58 6px, #2e3f58 12px); }
.tcard.tickets { background: #3a4c33; color: #dfe9d5; font-size: 15px; text-align: center; line-height: 1.1; }
.bar-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; margin-right: 2px; }
.sep { width: 1px; align-self: stretch; background: var(--line); }

/* --------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,10,16,.72); display: flex;
  align-items: center; justify-content: center; padding: 18px; z-index: 40;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.modal h2 { margin: 0 0 6px; font-size: 20px; }
.modal .sub { color: var(--dim); font-size: 13.5px; margin: 0 0 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.modal-actions .btn { width: auto; }
.ticket {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg2); cursor: pointer;
}
.ticket.on { border-color: var(--accent); background: #24303f; }
.ticket .route { flex: 1; font-weight: 600; }
.ticket .pts { font-weight: 800; color: var(--accent); }
.ticket.done { border-color: #2f6b47; }
.ticket.done .pts { color: var(--good); }
.ticket .lr { font-size: 10.5px; color: var(--accent); border: 1px solid #4a3d1c; border-radius: 5px; padding: 0 5px; }
.pay-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--bg2); color: var(--ink);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; font-size: 14px;
}
.pay-opt:hover { border-color: var(--accent); }
.chip {
  width: 20px; height: 26px; border-radius: 4px; border: 1px solid rgba(0,0,0,.4);
  display: inline-flex; align-items: center; justify-content: center;
}
.cglyph { display: block; pointer-events: none; }
.tcard .cglyph { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.score-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.score-table th, .score-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table tr.win td { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------- misc */
.conn {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: var(--bad); color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; z-index: 60;
}
.toasts { position: fixed; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent2);
  padding: 9px 14px; border-radius: 10px; font-size: 13.5px; max-width: 320px;
  animation: pop .18s ease-out;
}
.toast.bad { border-left-color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.badge {
  background: var(--bad); color: #fff; border-radius: 999px; font-size: 10px;
  padding: 0 5px; margin-left: 4px;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .players-panel { width: 168px; }
  .side-panel { width: 250px; }
}
@media (max-width: 900px) {
  .lobby-body { grid-template-columns: 1fr; }
  .players-panel { display: none; }
  .side-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; width: 300px; }
  .game-body { position: relative; }
  /* On a phone the top bar is the first thing to overflow: the labels go and
     the icons stand in for them, so nothing is pushed off the right edge. */
  .btn .lbl { display: none; }
  .btn .ico { display: inline; font-size: 15px; }
  .topbar { padding: 6px 8px; gap: 6px; }
  .topbar .btn.small { padding: 5px 8px; }
  .turn-banner { font-size: 12.5px; }
  .map-chip { display: none; }
  .tcard { width: 36px; height: 50px; font-size: 16px; }
  .actionbar { gap: 8px; padding: 6px 8px; }
  .actions { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------- zoom controls */
.zoom-controls {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.zoom-controls button {
  width: 30px; height: 30px; padding: 0;
  font: 600 17px/1 var(--ui); color: var(--ink);
  background: rgba(18, 26, 38, .82); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
  backdrop-filter: blur(3px);
}
.zoom-controls button:hover { background: rgba(30, 42, 58, .95); border-color: #40506a; }
.zoom-controls button:active { transform: translateY(1px); }
.zoom-pct {
  font: 500 10px/1 var(--ui); color: var(--dim); text-align: center;
  padding: 3px 0; opacity: 0; transition: opacity .18s;
}
.zoom-pct.on { opacity: 1; }

/* ------------------------------------------------- destination ticket map */
.tmini {
  flex: 0 0 auto; width: 122px; height: 84px; display: block;
  border-radius: 6px; background: #0d1420; border: 1px solid var(--line);
}
.ticket .tbody { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket .tbody .route { flex: 1 0 auto; }
.ticket.with-mini:hover { border-color: var(--accent); }
.mini-hint { font-size: 11px; color: var(--dim); margin: -2px 0 10px; }
@media (max-width: 560px) {
  .tmini { width: 96px; height: 66px; }
}

/* ------------------------------------------------- floating ticket panels */
.modal-backdrop.floating {
  background: none; pointer-events: none;
  align-items: flex-start; justify-content: flex-end; padding: 74px 22px 22px;
}
.modal-backdrop.floating .modal {
  pointer-events: auto; max-height: calc(100vh - 110px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .65); border-color: #3b4a63;
}
.drag-grip { cursor: move; user-select: none; touch-action: none; }
.drag-grip::before {
  content: '⠿'; float: right; color: var(--dim); font-size: 15px;
  letter-spacing: -1px; margin-left: 10px; opacity: .8;
}

/* ------------------------------------------------------ board decorations */
.city-mark { fill: #17202e; pointer-events: none; }
.hi-link {
  fill: none; stroke: #6ea8ff; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 11 8; opacity: .95;
}
.hi-ring {
  fill: none; stroke: #6ea8ff; stroke-width: 3.2; opacity: .95;
}
.hi-ring.inner { stroke-width: 2; opacity: .55; }
#ticket-hi { pointer-events: none; }