/* Tick — cyanotype survey board. One committed dark look: a blueprint-blue
   railway survey sheet with enamel-coloured track and a brass signal-lamp accent. */
:root {
  --ink: #0b1f38;          /* page ground */
  --sheet: #10294a;        /* sea on the map */
  --land: #173a64;         /* land on the map */
  --panel: #0d2442;        /* side panels */
  --rule: rgba(205, 225, 250, 0.16);
  --rule-strong: rgba(205, 225, 250, 0.32);
  --paper: #e8f0fa;        /* main text, city markers */
  --muted: #94adcb;
  --brass: #f0b44c;        /* signal lamp: whose turn, primary actions */
  --brass-ink: #2a1a02;
  --danger: #ff8a80;
  --ok: #7fe0a0;

  --c-red: #e5484d; --c-orange: #f08a2b; --c-yellow: #f3cf3e; --c-green: #46b866;
  --c-blue: #3f8cf2; --bullet: #e9f0f7; --c-pink: #e27fc0; --c-black: #20242c; --c-white: #f5f2ea; --c-gray: #a7b2c0;

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(11, 31, 56, 0.55) 0%, rgba(11, 31, 56, 0.35) 45%, rgba(11, 31, 56, 0.7) 100%),
    url("../img/bg.jpg") center 60% / cover fixed,
    var(--ink);
  color: var(--paper);
  font: 15px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}

.app {
  min-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding-block: 12px 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- header ---------- */
.bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 {
  margin: 0; font: 800 34px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase;
}
.brand h1 span { color: var(--brass); }
.brand small { font: 500 13px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bar .spacer { flex: 1; }
.btn {
  border: 1px solid var(--rule-strong); background: transparent; border-radius: 6px;
  padding: 7px 14px; cursor: pointer; font: 600 14px/1 var(--f-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.btn:hover { border-color: var(--paper); }
.btn.primary { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- players strip ---------- */
.players { display: flex; gap: 8px; flex-wrap: wrap; }
.pchip {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  padding: 8px 12px 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(13, 36, 66, 0.86); backdrop-filter: blur(6px);
  min-width: 0; flex: 1 1 170px; max-width: 290px;
}
.pchip.current { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset; }
.pchip .sw { width: 14px; height: 34px; border-radius: 3px; grid-row: span 2; border: 1.5px solid var(--paper); }
.pchip .nm { font: 600 15px/1.1 var(--f-label); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip .nm em { font-style: normal; color: var(--muted); font-size: 12px; letter-spacing: 0.12em; margin-left: 6px; }
.pchip .st { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 500 13px/1.2 var(--f-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.pchip .st span { white-space: nowrap; }
.pchip .st b { color: var(--paper); font-weight: 700; }
.pchip .st .score b { color: var(--brass); }
.pchip .st small { font-size: inherit; }

/* ---------- main layout ---------- */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .main { grid-template-columns: minmax(0, 1fr); } }

.mapwrap {
  position: relative; border: 1px solid var(--rule-strong); border-radius: 10px; background: rgba(16, 41, 74, 0.8);
  overflow-x: auto; overflow-y: hidden;
}
.mapwrap svg { display: block; width: 100%; min-width: 720px; height: auto; }
.tip {
  position: absolute; left: 12px; top: 10px; pointer-events: none;
  background: rgba(8, 22, 41, 0.92); border: 1px solid var(--rule-strong); border-radius: 6px;
  padding: 6px 10px; font: 600 13px/1.25 var(--f-label); letter-spacing: 0.04em;
}
.tip small { display: block; color: var(--muted); font-weight: 500; }

/* svg map */
.graticule { stroke: var(--rule); stroke-width: 0.8; fill: none; }
.landmass { fill: rgba(23, 58, 100, 0.9); stroke: rgba(205, 225, 250, 0.42); stroke-width: 1.3; stroke-linejoin: round; }
.lake { fill: var(--sheet); stroke: rgba(205, 225, 250, 0.35); stroke-width: 1; }
.car { stroke: #07162a; stroke-width: 1.3; }
.route:not(.claimed) .car.gray { fill: var(--c-gray); }
.route { cursor: pointer; }
.route .hit { stroke: transparent; stroke-width: 18; fill: none; stroke-linecap: round; }
.route:hover .car, .route.sel .car { stroke: var(--paper); stroke-width: 2; }
.route.claimed .car { stroke: var(--paper); stroke-width: 1.8; }
.route.closed .car { opacity: 0.25; }
.route.flash .car { animation: flash 1.1s ease-out 2; }
@keyframes flash { 0%, 100% { filter: none; } 40% { filter: brightness(1.8) drop-shadow(0 0 5px var(--paper)); } }
.route.longest .car { stroke: var(--brass); stroke-width: 2.4; }
.city circle.ring { fill: var(--paper); stroke: #07162a; stroke-width: 2.5; }
.city circle.dot { fill: #07162a; }
.city circle.halo { fill: none; stroke: var(--brass); stroke-width: 3; opacity: 0; }
.city.hl circle.halo { opacity: 1; }
.city.hl circle.ring { fill: var(--brass); }
.city text {
  font: 600 12.5px var(--f-label); letter-spacing: 0.07em; text-transform: uppercase; fill: var(--paper);
  paint-order: stroke; stroke: #0a1c33; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none;
}
.cartouche text { font-family: var(--f-label); fill: var(--paper); }
.cartouche .t { font-size: 10px; letter-spacing: 0.16em; fill: var(--muted); }
.cartouche .n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartouche rect { fill: rgba(8, 22, 41, 0.75); stroke: var(--rule-strong); }

/* ---------- side panel ---------- */
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card {
  background: rgba(13, 36, 66, 0.86); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.card h2 {
  margin: 0; font: 600 13px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px;
}
.card h2 b { color: var(--paper); font-weight: 600; white-space: nowrap; }
.status { border-color: var(--rule-strong); }
.status.mine { border-color: var(--brass); }
.status .who { font: 700 22px/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.status p { margin: 0; color: var(--muted); }
.status .row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-final {
  align-self: flex-start; background: var(--brass); color: var(--brass-ink); border-radius: 4px; padding: 3px 8px;
  font: 700 12px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase;
}
.err { color: var(--danger); font-weight: 500; }

/* train cards */
.tcard {
  --cc: var(--c-gray); --art: none;
  position: relative; width: 56px; height: 84px; border-radius: 7px; border: 3px solid transparent;
  background: var(--art) center / cover padding-box, var(--cc) border-box;
  cursor: pointer; padding: 0; flex: none;
  box-shadow: 0 0 0 1px rgba(232, 240, 250, 0.55), 0 3px 0 rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease;
}
.tcard:hover:not(:disabled) { transform: translateY(-3px); }
.tcard:disabled { opacity: 0.35; cursor: not-allowed; }
.tcard.loco { --cc: conic-gradient(from 200deg, var(--c-red), var(--c-orange), var(--c-yellow), var(--c-green), var(--c-blue), var(--c-pink), var(--c-red)); }
.tcard[data-c="red"] { --art: url("../img/cards/red.jpg"); }
.tcard[data-c="orange"] { --art: url("../img/cards/orange.jpg"); }
.tcard[data-c="yellow"] { --art: url("../img/cards/yellow.jpg"); }
.tcard[data-c="green"] { --art: url("../img/cards/green.jpg"); }
.tcard[data-c="blue"] { --art: url("../img/cards/blue.jpg"); }
.tcard[data-c="pink"] { --art: url("../img/cards/pink.jpg"); }
.tcard[data-c="black"] { --art: url("../img/cards/black.jpg"); }
.tcard[data-c="white"] { --art: url("../img/cards/white.jpg"); }
.tcard[data-c="loco"] { --art: url("../img/cards/loco.jpg"); }
.tcard .n {
  position: absolute; top: 2px; left: 2px; min-width: 20px; padding: 3px 4px; border-radius: 4px;
  background: rgba(7, 22, 42, 0.85); font: 700 14px/1 var(--f-label); color: var(--paper); text-align: center;
}
.cards { display: flex; gap: 6px; flex-wrap: wrap; }
.deckbtn {
  flex: 1 1 120px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; border: 2px dashed var(--rule-strong); background: transparent; cursor: pointer;
  font: 600 11px/1.15 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px;
}
.deckbtn b { font-size: 18px; color: var(--paper); letter-spacing: 0; }
.deckbtn:hover:not(:disabled) { border-color: var(--paper); }
.deckbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.market { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.market .sep { display: none; }

.hand { display: flex; gap: 6px; flex-wrap: wrap; }
.hand .tcard { cursor: default; }
.hand .tcard:hover { transform: none; }
.hidden-note { color: var(--muted); margin: 0; font-style: italic; }

/* tickets */
.tickets { display: flex; flex-direction: column; gap: 6px; }
.ticket {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--rule); border-radius: 6px; background: rgba(232, 240, 250, 0.04);
  font: 500 14px/1.2 var(--f-label); letter-spacing: 0.03em; text-align: left; width: 100%;
}
.ticket .pts { font: 700 16px/1 var(--f-label); color: var(--brass); font-variant-numeric: tabular-nums; }
.ticket.done { border-color: rgba(127, 224, 160, 0.5); }
.ticket.done .pts { color: var(--ok); }
.ticket.done .route-name::after { content: "  ✓ connected"; color: var(--ok); font-size: 12px; letter-spacing: 0.08em; }
.ticket.pick { cursor: pointer; }
.ticket.pick[aria-pressed="true"] { border-color: var(--brass); background: rgba(240, 180, 76, 0.12); }
.ticket.pick[aria-pressed="false"] { opacity: 0.6; }

/* claim panel */
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.paybtn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: transparent; padding: 6px 10px; cursor: pointer; font: 600 14px/1 var(--f-label); letter-spacing: 0.04em;
}
.paybtn:hover { border-color: var(--brass); }
.paybtn i { width: 12px; height: 16px; border-radius: 2px; border: 1px solid var(--paper); display: inline-block; }

/* log */
.log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 4px; font-size: 13.5px; }
.log div { display: flex; gap: 8px; color: var(--muted); }
.log div i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--rule-strong); }
.log div:first-child { color: var(--paper); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow-y: auto;
  background: rgba(5, 14, 27, 0.78); backdrop-filter: blur(3px);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.sheet {
  width: min(640px, 100%); background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 12px;
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 16px;
}
.sheet h2 { margin: 0; font: 800 30px/1 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.sheet h3 { margin: 0; font: 600 13px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sheet p { margin: 0; color: var(--muted); max-width: 62ch; }
.sheet .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.seats { display: flex; flex-direction: column; gap: 8px; }
.seat { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.seat .sw { width: 14px; height: 28px; border-radius: 3px; border: 1.5px solid var(--paper); }
.seat input {
  min-width: 0; width: 100%; background: var(--ink); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 7px 10px;
  color: var(--paper); font: 500 15px var(--f-body);
}
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 7px 10px; cursor: pointer; font: 600 13px/1 var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.iconbtn { border: 1px solid var(--rule); background: transparent; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); }
.iconbtn:hover { color: var(--paper); border-color: var(--paper); }

.pass { text-align: center; align-items: center; }
.pass .sw { width: 60px; height: 14px; border-radius: 3px; border: 1.5px solid var(--paper); }

.results { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--f-label); font-variant-numeric: tabular-nums; }
.results th { text-align: right; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--rule-strong); }
.results th:first-child, .results td:first-child { text-align: left; }
.results td { text-align: right; padding: 8px; border-bottom: 1px solid var(--rule); }
.results td.tot { font-weight: 700; font-size: 17px; color: var(--brass); }
.results tr.win td:first-child { color: var(--brass); }
.tablewrap { overflow-x: auto; }
.tlist { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); margin-top: 3px; }
.tlist .y { color: var(--ok); } .tlist .n { color: var(--danger); }

.rules ul { margin: 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.rules li b { color: var(--paper); font-weight: 600; }
.rules table { border-collapse: collapse; font: 600 14px var(--f-label); font-variant-numeric: tabular-nums; }
.rules td, .rules th { border: 1px solid var(--rule-strong); padding: 4px 10px; text-align: center; }
.rules th { color: var(--muted); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11.5px; }

@media (max-width: 560px) {
  .brand h1 { font-size: 28px; }
  .seat { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .seat .iconbtn { grid-column: 3; }
  .seat .seg { grid-column: 2 / 4; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .route.flash .car { animation: none; }
  .tcard { transition: none; }
}
.route .pin { fill: #07162a; display: none; }
.route.shared .pin { display: inline; }
.route .glow { fill: none; stroke-width: 15; stroke-linecap: round; opacity: 0; }

/* Claimed routes look like trains placed on the board: a dark bed with a rim in the owner's colour, solid cars
   stamped with the owner's shape. Unclaimed track is slightly translucent, like paint on the map. */
.route .bed { fill: none; stroke: #07162a; stroke-width: 13.5; stroke-linecap: round; opacity: 0; pointer-events: none; }
.route.claimed .bed { opacity: 0.92; }
.route.claimed .glow { stroke-width: 19; opacity: 0.85; }
.route:not(.claimed) .car { fill-opacity: 0.8; }
.route:not(.claimed):is(:hover, .sel) .car { fill-opacity: 1; }
.route .mark { fill: rgba(7, 22, 42, 0.9); pointer-events: none; }
.mk { display: block; width: 10px; height: 10px; fill: rgba(7, 22, 42, 0.9); }
.pchip .sw, .seat .sw { display: grid; place-items: center; }
.route .pin { stroke: var(--paper); stroke-width: 0.8; }
.terrain { filter: saturate(0.9) brightness(0.88) contrast(1.02); }
.car.tunnel { stroke: #07162a; stroke-width: 2.4; stroke-dasharray: 3 2.2; }
.route.claimed .car.tunnel { stroke: var(--paper); }
.ferrymark { fill: url(#rainbow); stroke: #07162a; stroke-width: 1.4; pointer-events: none; }
.city.can-station { cursor: pointer; }
.city.sel circle.ring { fill: var(--brass); }
.city .station { stroke: #07162a; stroke-width: 1.4; }
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.mapbtn {
  display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: transparent;
}
.mapbtn b { font: 700 20px/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.mapbtn small { color: var(--muted); font: 500 13px/1.3 var(--f-label); letter-spacing: 0.04em; }
.mapbtn[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset; background: rgba(240, 180, 76, 0.08); }
.mapbtn:hover { border-color: var(--paper); }
.tcard[data-static] { pointer-events: none; }
.mapwrap svg { max-height: calc(100vh - 150px); }
.techs { display: flex; flex-wrap: wrap; gap: 6px; }
.techchip { font: 600 12px/1 var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--brass); color: var(--brass); }
.techlist { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.techrow { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; }
.techrow small { color: var(--muted); }
.techrow.owned { opacity: 0.6; }
.techrow .ok { color: var(--ok); font: 600 13px var(--f-label); }
.route.shared .glow { stroke-dasharray: 6 4; }
.mapbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.ticket.done.tour .route-name::after { content: "  ✓✓ grand tour"; color: var(--brass); }
.city .borderpost { fill: var(--brass); stroke: #07162a; stroke-width: 2; }
.city text.bordertext { font-size: 10.5px; letter-spacing: 0.12em; fill: var(--brass); }
.ticket .opts { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; margin-top: 2px; }

/* ---------- selected route: brass lamp on the route, the rest of the board steps back ---------- */
.route, .city { transition: opacity 0.18s ease; }
#board.selecting .route:not(.sel) { opacity: 0.38; }
.route.sel .car { stroke: var(--brass); stroke-width: 2.6; }
.route.sel .glow { stroke: var(--brass); opacity: 0.75; animation: lamp 1.4s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.35; } }

/* ---------- desktop: the whole game fits one screen; the side panel scrolls on its own ---------- */
@media (min-width: 1001px) and (min-height: 620px) {
  .app { height: 100vh; height: 100dvh; }
  .main { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .mapwrap { display: flex; overflow: hidden; }
  .mapwrap svg { width: 100%; height: 100%; min-width: 0; max-height: none; }
  .side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; padding-right: 4px; margin-right: -4px; }
  .side .status { position: sticky; top: 0; z-index: 2; min-height: 168px; background: rgba(13, 36, 66, 0.97); flex: none; }
  .side > .card { flex: none; }
  .log { max-height: 180px; }
  .main { justify-content: center; }
  .side.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .side.two .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .side.two .log { max-height: 360px; }
}
.col { display: contents; }
@media (prefers-reduced-motion: reduce) { .route.sel .glow { animation: none; } .route, .city { transition: none; } }

/* ---------- zoom controls & tips (all sizes) ---------- */
.mapwrap svg { touch-action: none; -webkit-user-select: none; user-select: none; }
.mapwrap.zoomed svg { cursor: grab; }
.mapwrap.zoomed svg:active { cursor: grabbing; }
.zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.mapwrap.zrow .zoom { flex-direction: row; }
.zbtn {
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--rule-strong); cursor: pointer;
  background: rgba(8, 22, 41, 0.88); backdrop-filter: blur(4px); color: var(--paper);
  font: 600 20px/1 var(--f-label); display: grid; place-items: center; padding: 0;
}
.zbtn:hover:not(:disabled) { border-color: var(--paper); }
.zbtn:disabled { opacity: 0.35; cursor: default; }
.hint {
  position: absolute; left: 10px; right: 58px; top: 10px; z-index: 4; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(8, 22, 41, 0.94); border: 1px solid var(--brass); border-radius: 8px; padding: 9px 10px 9px 12px;
  font: 500 14px/1.35 var(--f-body); color: var(--paper);
}
.hint span { flex: 1; }
.hint .iconbtn { flex: none; width: 28px; height: 28px; }
.paylbl { margin: 0; font: 600 12px/1 var(--f-label) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pay.grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pay.grid .paybtn { padding: 7px 8px; justify-content: flex-start; min-height: 34px; }
.tabs { display: none; }

/* ---------- phones, tablets and short windows: board fills the screen, panels in tabs ---------- */
@media not all and (min-width: 1001px) and (min-height: 620px) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  .app {
    height: 100vh; height: 100dvh; min-height: 0; display: grid; gap: 8px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding-block: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  .main { display: contents; }
  .bar { gap: 8px; flex-wrap: nowrap; min-width: 0; }
  .brand { min-width: 0; gap: 8px; }
  .brand h1 { font-size: 24px; }
  .brand small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bar .btn { padding: 7px 10px; font-size: 12px; flex: none; }
  .players { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .players::-webkit-scrollbar { display: none; }
  .pchip { flex: 0 0 auto; max-width: none; padding: 5px 10px 5px 7px; column-gap: 8px; }
  .pchip .sw { width: 10px; height: 28px; }
  .pchip .nm { font-size: 14px; }
  .pchip .st { flex-wrap: nowrap; gap: 8px; font-size: 12.5px; }
  .pchip .st .minor { display: none; }

  .mapwrap { min-height: 0; display: flex; overflow: hidden; border-radius: 8px; }
  .mapwrap svg { width: 100%; height: 100%; min-width: 0; max-height: none; }

  /* the panel: tabs on top, one tab's cards below */
  .side {
    min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain;
    max-height: 48dvh; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
  }
  .side .col { display: contents; }
  .tabs {
    display: flex; gap: 4px; position: sticky; top: 0; z-index: 3; flex: none;
    background: rgba(8, 22, 41, 0.96); border: 1px solid var(--rule); border-radius: 10px; padding: 4px;
  }
  .tabs [role="tab"] {
    flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 9px 6px; min-height: 40px; cursor: pointer;
    font: 600 13px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }
  .tabs [role="tab"] b { color: var(--paper); font-weight: 600; letter-spacing: 0.04em; margin-left: 4px; }
  .tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); }
  .tabs [role="tab"][aria-selected="true"] b { color: var(--ink); }
  .tabs .collapse { flex: none; width: 44px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; position: relative; }
  .tabs .collapse::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -7px 0 0 -5px;
    border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(45deg);
  }
  .side.collapsed .tabs .collapse::before { transform: rotate(-135deg); margin-top: -2px; }
  .side > .col > .card { flex: none; padding: 10px 12px; gap: 8px; }
  .side[data-tab="play"] :is(#ticketsCard, #logCard),
  .side[data-tab="tickets"] :is(#status, #marketCard, #handCard, #logCard),
  .side[data-tab="log"] :is(#status, #marketCard, #handCard, #ticketsCard) { display: none; }
  .side.collapsed :is(#marketCard, #handCard, #ticketsCard, #logCard) { display: none; }
  .side.collapsed #status { display: flex; }
  .status .who { font-size: 19px; }
  .log { max-height: none; }

  /* smaller cards; the hand stays on one scrolling row */
  .tcard { width: 46px; height: 68px; border-width: 2.5px; border-radius: 6px; }
  .tcard .n { font-size: 13px; min-width: 18px; padding: 2px 3px; }
  .market { gap: 5px; }
  .deckbtn { height: 38px; flex-basis: 110px; }
  .hand { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .hand::-webkit-scrollbar { display: none; }
  .tickets .ticket { padding: 9px 10px; }
  .zbtn { width: 42px; height: 42px; }
}

.status .row.stick { position: sticky; bottom: 0; padding: 18px 0 2px; margin: -10px 0 -2px; background: linear-gradient(rgba(13, 36, 66, 0), rgba(13, 36, 66, 0.98) 16px); z-index: 1; }

/* ---------- stage 5: feedback ---------- */
/* tunnels: a dark dashed bore around the cars; ferries: a dotted surf line and rainbow locomotive marks */
.casing { fill: none; stroke-linecap: butt; pointer-events: none; }
.tunnelcase { stroke: var(--paper); stroke-width: 15; stroke-dasharray: 4 3; opacity: 0.8; }
.ferrycase { stroke: #5fb4ff; stroke-width: 16; stroke-linecap: round; opacity: 0.5; }
.car.tunnel { stroke: var(--paper); stroke-width: 1.2; stroke-dasharray: none; }
.ferrymark { stroke: #07162a; stroke-width: 1.3; }
.route.claimed .casing { opacity: 0.45; }
.cartouche .casing { stroke-width: 13; }

/* a claimed route fills in car by car */
.route.claiming .car { animation: carIn 0.5s ease-out both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes carIn { 0% { opacity: 0; } 45% { opacity: 1; filter: brightness(1.9) drop-shadow(0 0 4px var(--paper)); } 100% { opacity: 1; filter: none; } }
.route.claiming .glow { animation: glowIn 1.2s ease-out both; }
@keyframes glowIn { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0.85; } }

/* score pop */
.pop { font: 800 26px var(--f-display); letter-spacing: 0.02em; paint-order: stroke; stroke: #07162a; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; animation: popUp 1.6s ease-out forwards; }
@keyframes popUp { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: translateY(-4px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.pchip.bump .score b { display: inline-block; animation: bump 0.7s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.5); color: var(--paper); } 100% { transform: scale(1); } }

/* new face-up cards deal in; gained hand cards lift */
.tcard[data-fresh] { animation: dealIn 0.42s cubic-bezier(.2,.9,.3,1.2) both; }
.tcard[data-fresh="1"] { animation-delay: 40ms; } .tcard[data-fresh="2"] { animation-delay: 80ms; } .tcard[data-fresh="3"] { animation-delay: 120ms; } .tcard[data-fresh="4"] { animation-delay: 160ms; }
@keyframes dealIn { 0% { opacity: 0; transform: translateY(-14px) rotate(-4deg) scale(0.9); } 100% { opacity: 1; transform: none; } }
.tcard[data-gain] { animation: gain 0.6s ease-out; }
.tcard[data-gain] .n { animation: gainN 0.9s ease-out; }
@keyframes gain { 0% { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--brass), 0 0 14px var(--brass); } 100% { transform: none; } }
@keyframes gainN { 0%, 40% { background: var(--brass); color: var(--brass-ink); } 100% { } }

@media (prefers-reduced-motion: reduce) {
  .route.claiming .car, .route.claiming .glow, .tcard[data-fresh], .tcard[data-gain], .tcard[data-gain] .n, .pchip.bump .score b { animation: none; }
  .pop { animation: popFade 1.6s linear forwards; }
  @keyframes popFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------- phones, session 3b: map first ----------
   The board fills the screen. Players float over it as badges (tap one for details), Rules/New game sit behind a
   menu button, and a slim dock below the board holds the turn line, your hand and three panel buttons. Panels slide
   up over the map when a dock button is tapped or a decision needs you. placePanels() moves .tabs and #handCard
   into #dock. */
.dock, .pinfo, .bar .more, .sheetclose, .tabs .lbl-m { display: none; }
.ico { display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-cards { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='4' width='9' height='13' rx='1.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='9' y='2.5' width='9' height='13' rx='1.6'/%3E%3C/svg%3E"); }
.ico-tix { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 5h16v3a2 2 0 0 0 0 4v3H2v-3a2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }
.ico-log { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3.5' width='16' height='2.4' rx='1'/%3E%3Crect x='2' y='8.8' width='16' height='2.4' rx='1'/%3E%3Crect x='2' y='14.1' width='11' height='2.4' rx='1'/%3E%3C/svg%3E"); }
.ico-menu { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='4' width='16' height='2.4' rx='1.2'/%3E%3Crect x='2' y='8.8' width='16' height='2.4' rx='1.2'/%3E%3Crect x='2' y='13.6' width='16' height='2.4' rx='1.2'/%3E%3C/svg%3E"); }

@media not all and (min-width: 1001px) and (min-height: 620px) {
  .app {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "board" "dock"; row-gap: 6px;
    padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px));
    padding-block: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-bottom, 0px));
  }
  .mapwrap { grid-area: board; }

  /* players: badges over the top-left of the map */
  .players { grid-area: board; align-self: start; justify-self: start; z-index: 5; margin: 6px; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 56px); overflow: visible; }
  .pchip {
    display: flex; align-items: center; gap: 5px; flex: none; min-width: 0; max-width: none; cursor: pointer;
    padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(8, 22, 41, 0.8); border-color: var(--rule-strong);
  }
  .pchip.current { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset, 0 0 10px rgba(240, 180, 76, 0.45); }
  .pchip .sw { width: 24px; height: 24px; border-radius: 50%; grid-row: auto; }
  .pchip .sw .mk { width: 10px; height: 10px; }
  .pchip .nm { display: none; }
  .pchip .st { flex-direction: column; flex-wrap: nowrap; gap: 0; font-size: 12px; line-height: 1.08; }
  .pchip .st small, .pchip .st .cd, .pchip .st .minor { display: none; }
  .pchip .st .tr::after {
    content: ""; display: inline-block; width: 10px; height: 8px; margin-left: 2px; vertical-align: 0; background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Crect x='0.5' y='1' width='11' height='5.6' rx='1'/%3E%3Ccircle cx='3' cy='8.4' r='1.4'/%3E%3Ccircle cx='9' cy='8.4' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Crect x='0.5' y='1' width='11' height='5.6' rx='1'/%3E%3Ccircle cx='3' cy='8.4' r='1.4'/%3E%3Ccircle cx='9' cy='8.4' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pinfo:not([hidden]) {
    display: block; position: fixed; z-index: 30; width: 220px; padding: 10px 12px; border-radius: 10px;
    background: rgba(8, 22, 41, 0.97); border: 1px solid var(--rule-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .pinfo .pi-h { display: flex; align-items: center; gap: 8px; font: 600 16px/1.1 var(--f-label); letter-spacing: 0.03em; margin-bottom: 8px; }
  .pinfo .pi-h em { font-style: normal; color: var(--muted); font-size: 11px; letter-spacing: 0.12em; }
  .pinfo .sw { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--paper); }
  .pinfo .pi-g { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font: 500 13px/1.2 var(--f-label); color: var(--muted); }
  .pinfo .pi-g b { color: var(--paper); font-size: 15px; }

  /* menu: a button over the top-right of the map; Rules and New game drop down from it */
  .bar { grid-area: board; align-self: start; justify-self: end; z-index: 6; margin: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .brand, .bar .spacer, .bar #btnRules, .bar #btnMenu { display: none; }
  .bar .more { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; order: -1; background: rgba(8, 22, 41, 0.85); }
  .bar.open #btnRules, .bar.open #btnMenu { display: block; background: rgba(8, 22, 41, 0.97); min-width: 120px; padding: 10px 12px; font-size: 13px; }
  .hint { top: 48px; }

  /* the panel: a sheet over the bottom of the map */
  .side {
    grid-area: board; align-self: end; z-index: 7; max-height: 60%; margin: 0 2px 2px; gap: 8px;
    padding: 16px 8px 8px; border-radius: 14px; border: 1px solid var(--rule-strong);
    background: rgba(8, 22, 41, 0.96); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  }
  .side.collapsed { display: none; }
  .side > .col > .card { background: rgba(13, 36, 66, 0.7); }
  .sheetclose {
    display: block; position: sticky; top: -16px; z-index: 4; flex: none; align-self: center; width: 72px; height: 22px;
    margin: -16px auto -6px; border: 0; background: transparent; cursor: pointer; padding: 0;
  }
  .sheetclose::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--rule-strong); }

  /* the dock: turn line + panel buttons, then your hand */
  .dock {
    grid-area: dock; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "turn tabs" "hand hand";
    align-items: center; gap: 5px 8px; padding: 0 2px;
  }
  .turnline { grid-area: turn; min-width: 0; font: 500 14px/1.2 var(--f-label); letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .turnline b { color: var(--paper); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .turnline.mine b { color: var(--brass); }
  .turnline .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
  .turnline .chip-final { font-size: 10px; padding: 2px 5px; margin-left: 4px; }
  .dock .tabs { grid-area: tabs; display: flex; gap: 4px; position: static; background: none; border: 0; padding: 0; }
  .dock .tabs [role="tab"] {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 42px; height: 36px; min-height: 0;
    padding: 0 9px; border: 1px solid var(--rule-strong); border-radius: 9px; background: rgba(13, 36, 66, 0.86); color: var(--paper);
    font: 600 12px/1 var(--f-label); letter-spacing: 0.04em;
  }
  .dock .tabs [role="tab"] .lbl-d, .dock .tabs .lbl, .dock .tabs [data-tab="log"] span { display: none; }
  .side.deciding #marketCard { display: none; }
  .side .status .who { display: none; }
  .dock .tabs [role="tab"] b { margin: 0; color: var(--paper); }
  .dock.open .tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .dock.open .tabs [role="tab"][aria-selected="true"] b { color: var(--ink); }
  .dock .tabs .collapse { display: none; }
  .turnline.mine ~ .tabs [data-tab="play"], .dock:has(.turnline.mine) .tabs [data-tab="play"]:not([aria-selected="true"]) { border-color: var(--brass); }
  .dock #handCard { grid-area: hand; padding: 0; gap: 0; background: none; border: 0; backdrop-filter: none; }
  .dock #handCard h2 { display: none; }
  .dock .hand { flex-wrap: nowrap; gap: 4px; overflow: visible; }
  .dock .hand .tcard { flex: 1 1 0; min-width: 28px; max-width: 40px; width: auto; height: auto; aspect-ratio: 46 / 64; border-width: 2px; }
  .dock .hand .tcard .n { font-size: 11.5px; min-width: 15px; padding: 2px 3px; }
  .dock .hand .hidden-note { font-size: 13px; padding: 4px 2px; }

  /* train cards inside the sheet: one row */
  .market { flex-wrap: nowrap; gap: 4px; align-items: stretch; }
  .market .tcard { flex: 1 1 0; min-width: 0; max-width: 54px; width: auto; height: auto; aspect-ratio: 46 / 66; }
  .market .deckbtn {
    flex: 1 1 0; min-width: 0; max-width: 60px; height: auto; flex-direction: column; gap: 3px; padding: 2px;
    font-size: 9px; letter-spacing: 0.02em; line-height: 1.1;
  }
  .market .deckbtn b { font-size: 17px; }
  .status { padding: 9px 12px; gap: 6px; }
  .status p { font-size: 14px; line-height: 1.35; }
  .zbtn { width: 38px; height: 38px; }
}

/* sideways (body.land is set by applyOrientation(): the page's own shape, which may be turned): the sheet becomes a
   panel down the right of the map, and the dock is a single row */
@media not all and (min-width: 1001px) and (min-height: 620px) {
  body.land .side { justify-self: end; align-self: start; width: min(340px, 46%); max-height: calc(100% - 4px); margin: 2px; }
  body.land .dock { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "turn hand tabs"; gap: 10px; }
  body.land .turnline { max-width: 230px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; }
  body.land .dock .hand .tcard { max-width: 34px; }
}

/* forced orientation: the page is laid out at the turned size and rotated a quarter-turn clockwise */
html.rot, html.rot body { overflow: hidden; }
html.rot body {
  position: fixed; top: 0; left: 0; width: var(--lw); height: var(--lh);
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
}
@media not all and (min-width: 1001px) and (min-height: 620px) {
  html.rot .app { height: var(--lh); }
}

/* ---------- session 3: what happened since your last turn ---------- */
/* routes other players claimed since your last turn pulse gently in the owner's colour */
.route.claimed.recent .glow { animation: recentPulse 1.8s ease-in-out infinite; stroke-width: 24; }
@keyframes recentPulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .route.claimed.recent .glow { animation: none; opacity: 1; } }
.recapcard { gap: 6px; padding: 10px 12px; border-color: var(--rule-strong); cursor: pointer; }
.recap-h { font: 600 12px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 500 14px/1.3 var(--f-label); letter-spacing: 0.02em; color: var(--muted); }
.recap li { display: flex; gap: 7px; align-items: baseline; }
.recap .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.recap b { color: var(--paper); font-weight: 600; }
.recap .who-n { color: var(--paper); font-weight: 700; }
.recap .cc { display: inline-block; width: 9px; height: 13px; border-radius: 2px; margin: 0 1px; vertical-align: -2px; border: 1px solid rgba(232, 240, 250, 0.6); }
.speedrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.speedrow small { color: var(--muted); }
@media (min-width: 1001px) and (min-height: 620px) {
  .side .recapcard { position: sticky; top: 180px; z-index: 1; }
}
@media not all and (min-width: 1001px) and (min-height: 620px) {
  /* phones: a note floating just above the dock; tap it to dismiss (it also goes after a few seconds) */
  .app > .recapcard {
    grid-area: board; align-self: end; justify-self: start; z-index: 6; margin: 0 52px 8px 6px; max-width: 420px;
    background: rgba(8, 22, 41, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); animation: recapIn 0.3s ease-out;
  }
  .app > .recapcard .recap { font-size: 13px; }
  @keyframes recapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- desktop, tall boards (session 3): the board runs the full window height ----------
   layout() adds .app.tall when that makes the board clearly bigger; the title, buttons and players move into the
   side column above the panels. */
@media (min-width: 1001px) and (min-height: 620px) {
  .app.tall {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; justify-content: center;
  }
  .app.tall .main { display: contents; }
  .app.tall .mapwrap { grid-column: 1; grid-row: 1 / 4; }
  .app.tall .bar { grid-column: 2; grid-row: 1; gap: 10px; flex-wrap: nowrap; min-width: 0; }
  .app.tall .brand { min-width: 0; }
  .app.tall .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .app.tall .bar .btn { flex: none; }
  .app.tall .players { grid-column: 2; grid-row: 2; }
  .app.tall .side { grid-column: 2; grid-row: 3; }
  .app.tall .pchip { flex: 1 1 160px; max-width: none; }
}

/* ---------- setup screen (session 3): board thumbnails, Start always reachable ---------- */
.sheet.setup { width: min(760px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
.sheet.setup .actions {
  position: sticky; bottom: 0; z-index: 2; margin: 0 -22px; padding: 12px 22px 16px;
  background: linear-gradient(rgba(13, 36, 66, 0), var(--panel) 14px); border-top: 1px solid var(--rule);
}
.sheet.setup .note { font-size: 13.5px; }
.maps { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mapbtn { padding: 0; overflow: hidden; gap: 0; }
.mapbtn .thumb { display: block; width: 100%; height: 112px; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.mapbtn .thumb line { stroke-width: 9; stroke-linecap: round; opacity: 0.9; }
.mapbtn .thumb circle { fill: var(--paper); stroke: #07162a; stroke-width: 4; }
.mapbtn .mt { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.mapbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(240, 180, 76, 0.28); }
.mapbtn[aria-pressed="true"] .thumb { border-bottom-color: var(--brass); }
.mapbtn:not([aria-pressed="true"]) .thumb { filter: saturate(0.75) brightness(0.85); }
.mapbtn:hover .thumb { filter: none; }
@media not all and (min-width: 1001px) and (min-height: 620px) {
  /* phones: the maps scroll sideways in one row, so players and Start stay close */
  .sheet.setup { padding: 16px 16px 0; gap: 12px; }
  .sheet.setup h2 { font-size: 24px; }
  .sheet.setup .actions { margin: 0 -16px; padding: 10px 16px 14px; }
  .maps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .maps::-webkit-scrollbar { display: none; }
  .mapbtn { flex: 0 0 150px; scroll-snap-align: start; }
  .mapbtn .thumb { height: 86px; }
  .mapbtn .mt { padding: 7px 9px 9px; }
  .mapbtn b { font-size: 17px; }
  .mapbtn small { font-size: 12px; }
}
/* setup fixes: the scrolling map row must not shrink inside the sheet; seats stay two compact rows */
.sheet.setup .maps { flex: none; }
.sheet.setup .mapbtn .thumb { flex: none; }
@media (max-width: 560px) {
  .sheet.setup .seat { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 6px; }
  .sheet.setup .seat .iconbtn { grid-column: 3; grid-row: 1; }
  .sheet.setup .seat .seg { grid-column: 2 / 4; grid-row: 2; }
  .sheet.setup .seat .seg button { padding: 6px 10px; font-size: 12px; }
}
@media not all and (min-width: 1001px) and (min-height: 620px) {
  .sheet.setup .seats { gap: 10px; }
  .sheet.setup .seat input { padding: 6px 9px; }
}
@media (max-height: 460px) {
  .sheet.setup .mapbtn { flex-basis: 132px; }
  .sheet.setup .mapbtn .thumb { height: 60px; }
  .sheet.setup .mapbtn small:last-child { display: none; }
  .sheet.setup h2 { font-size: 20px; }
}

/* ---------- tickets on the map (session 3): checkbox to keep, tap to preview ---------- */
/* the shortest open route for the ticket being looked at glows brass; other track steps back */
.route.path .bed { opacity: 0.9; stroke: var(--brass); stroke-width: 15; }
.route.path .car { fill-opacity: 1; stroke: var(--brass); stroke-width: 1.6; }
#board.pathing .route:not(.path) { opacity: 0.4; }
.ticket.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.ticket.pick.drop { opacity: 1; }
.ticket.pick.drop .tview { opacity: 0.55; }
.ticket.pick.keep { border-color: var(--brass); background: rgba(240, 180, 76, 0.1); }
.ticket.viewing { box-shadow: 0 0 0 2px var(--paper) inset; }
div.ticket:not(.pick) { cursor: pointer; }
.tcheck {
  width: 44px; align-self: stretch; border: 0; border-right: 1px solid var(--rule); background: transparent; cursor: pointer; position: relative; padding: 0;
}
.tcheck::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 5px;
  border: 2px solid var(--muted); box-sizing: border-box;
}
.tcheck[aria-checked="true"]::before { background: var(--brass); border-color: var(--brass); }
.tcheck[aria-checked="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -7px 0 0 -3px;
  border: solid var(--brass-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.tview {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent;
  text-align: left; cursor: pointer; font: 500 14px/1.2 var(--f-label); letter-spacing: 0.03em; color: var(--paper); min-width: 0;
}
.tview .route-name { overflow: hidden; text-overflow: ellipsis; }

@media not all and (min-width: 1001px) and (min-height: 620px) {
  /* phones, choosing tickets: a compact list that leaves the map visible (right-hand column when sideways,
     a short strip at the bottom when upright); the handle collapses it and the turn line brings it back */
  .side.picking { max-height: 46%; }
  .side.picking .status { padding: 8px 8px 6px; gap: 6px; }
  .side.picking .tkhead { font: 500 13px/1.2 var(--f-label); letter-spacing: 0.04em; }
  .side.picking .tkhead b { color: var(--paper); text-transform: uppercase; letter-spacing: 0.08em; }
  .side.picking .tickets { gap: 4px; }
  .side.picking .tcheck { width: 38px; }
  .side.picking .tcheck::before { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .side.picking .tview { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
  .side.picking .tview .pts { font-size: 14px; }
  .side.picking .row.stick { padding-top: 10px; }
  .side.picking #btnKeep { padding: 8px 14px; font-size: 13px; }
  body.land .side.picking { width: min(250px, 34%); max-height: calc(100% - 4px); }
  .turnline { cursor: pointer; }
}
.route.path .glow { stroke: var(--brass); opacity: 0.5; stroke-width: 22; }
#board.pathing .route:not(.path) { opacity: 0.32; }

/* ---------- sound switch (session 3) ---------- */
.ico-snd { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 7.5h3l4.5-4v13L6 12.5H3z'/%3E%3Cpath d='M13 6.5a5 5 0 0 1 0 7M15.5 4a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico-mute { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 7.5h3l4.5-4v13L6 12.5H3z'/%3E%3Cpath d='M13.5 7.5l5 5M18.5 7.5l-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.btn.snd { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.btn.snd span { display: none; }
.btn.snd[aria-pressed="false"] { color: var(--muted); }
@media not all and (min-width: 1001px) and (min-height: 620px) {
  .bar #btnSound { display: none; }
  .bar.open #btnSound { display: inline-flex; background: rgba(8, 22, 41, 0.97); min-width: 120px; padding: 10px 12px; font-size: 13px; }
  .bar.open #btnSound span { display: inline; }
}
@media not all and (min-width: 1001px) and (min-height: 620px) {
  .bar.open :is(#btnSound, #btnRules, #btnMenu) { width: 150px; justify-content: center; text-align: center; }
}

/* Hawaii: island names on the sea, island-hopper progress in the tickets panel */
#board .isle { font-family: var(--f-label); font-weight: 600; font-size: 15px; letter-spacing: 0.32em; fill: var(--paper); opacity: 0.55; paint-order: stroke; stroke: rgba(8, 20, 38, 0.55); stroke-width: 3px; pointer-events: none; }
.hopper { margin-top: 8px; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px; font-size: 13px; }
.hopper b { font-family: var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; color: var(--muted); margin-right: 4px; }
.hopper .pts { color: var(--brass); font-weight: 600; }
.hopper small { color: var(--muted); margin-left: 6px; }
.hopper .isl { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Old West: city markers, Alvin, start-city choice */
#board .cmark .flag { stroke: var(--ink); stroke-width: 1.3; }
#board .cmark .mk { fill: var(--ink); }
#board .cmark.home .flag { stroke: var(--paper); stroke-width: 1.6; }
#board .alvin { pointer-events: none; }
.cityseg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* Japan: insets, bullet train routes */
#board .inset rect { fill: rgba(11, 31, 56, 0.28); stroke: var(--paper); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 6 4; }
#board .inset text { font: 600 12px var(--f-label); letter-spacing: 0.24em; fill: var(--paper); opacity: 0.8; }
#board .route.bullet rect.car { stroke: #3f8cf2; stroke-width: 1.6; }
#board .route.bulletdone rect.car { stroke: #8fc3ff; stroke-width: 1.6; }
#board .cartouche .bullet rect.car { stroke: #3f8cf2; stroke-width: 1.4; }
.bulletinfo { color: var(--muted); }

/* Italy: ferry cards */
.ferrycard { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; width: 52px; height: 74px; border-radius: 6px; padding-bottom: 6px;
  background: repeating-linear-gradient(170deg, #1d5f8f 0 6px, #2a77ad 6px 12px); border: 2px solid #9fd0ff; font: 700 11px/1 var(--f-label); letter-spacing: 0.12em; color: #fff; }
.ferrycard .n { position: absolute; top: 4px; left: 5px; font-size: 13px; background: rgba(11,31,56,0.8); border-radius: 4px; padding: 1px 4px; }

/* Africa: port anchors */
#board .city .port { pointer-events: none; }
#board .city .port circle { fill: #1b4f86; stroke: var(--paper); stroke-width: 1.2; }
#board .city .port path { fill: none; stroke: var(--paper); stroke-width: 1.1; stroke-linecap: round; }

/* ---------- Team Asia: teams, the shared holder, junctions ---------- */
.pchip .nm em.teamtag { color: var(--brass); }
.pchip.team0, .pchip.team1, .pchip.team2 { border-left: 3px solid transparent; }
.pchip.team0 { border-left-color: #c9a227; }
.pchip.team1 { border-left-color: #6fa8dc; }
.pchip.team2 { border-left-color: #b4a7d6; }
.drawto { display: inline-flex; flex-direction: column; gap: 3px; margin-left: 6px; }
.drawto small { color: var(--muted); font: 600 11px/1 var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; }
.drawto .seg button { padding: 6px 8px; font-size: 11.5px; }
.drawto .seg button:disabled { opacity: 0.4; cursor: default; }
.teamhand { flex-basis: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.teamhand small { display: block; color: var(--muted); font: 600 12px/1.2 var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.teamhand small b { color: var(--paper); }
#hand:has(.teamhand) { flex-wrap: wrap; overflow: visible; }
h3.teamtix { margin: 12px 0 6px; font: 600 13px/1.2 var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); }
h3.teamtix b { color: var(--brass); }
h3.teamtix small { display: block; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.tshare { flex: none; border: 1px solid var(--rule-strong); background: transparent; color: var(--muted); border-radius: 4px; padding: 0 8px; margin-left: 4px; cursor: pointer; font: 600 11px/1 var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; }
.tshare[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.tshare:disabled { opacity: 0.35; cursor: default; }
.teamnote { color: var(--muted); }
.seathead { font: 600 12px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); margin: 8px 0 2px; }
.results .tmem { margin-top: 6px; }
.results .tmem small { color: var(--muted); }
#board .city .jdot { fill: #1d1d1d; stroke: #f3e7c9; stroke-width: 1.6; }
.city text.jtext { font-size: 10px; font-style: italic; letter-spacing: 0.06em; opacity: 0.8; }
.ticket.pick:has(.tshare) { grid-template-columns: auto minmax(0, 1fr) auto; }
.ticket.pick .tshare { margin: 6px 8px 6px 0; align-self: center; padding: 6px 8px; }
@media not all and (min-width: 1001px) and (min-height: 620px) {
  .dock #hand:has(.teamhand) { flex-wrap: nowrap; }
  .dock .teamhand { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; margin: 0 0 0 4px; padding: 0 0 0 6px; border-top: 0; border-left: 1px dashed var(--rule-strong); }
  .dock .teamhand small { display: none; }
  .dock .teamhand { border-left: 2px solid var(--brass); }
  .dock .teamhand .hand { display: flex; gap: 4px; }
  .dock .teamhand .hidden-note { font-size: 12px; }
}

/* ---------- online play and TV mode ---------- */
.together { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.together .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px; height: auto; white-space: normal; }
.together .btn b { font: 600 14px/1.1 var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); }
.together .btn small { font: 400 13px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.sheet .fld { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sheet .fld input, .sheet.lobby input, .sheet.lobby select {
  min-width: 0; background: var(--ink); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 9px 11px;
  color: var(--paper); font: 500 16px var(--f-body); letter-spacing: 0; text-transform: none;
}
.sheet.lobby select { width: 100%; }
#joinCode { text-transform: uppercase; letter-spacing: 0.3em; font: 700 24px var(--f-label); }
.sheet.lobby { width: min(680px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
.sheet.lobby .actions { position: sticky; bottom: 0; background: var(--panel); padding: 12px 0 18px; margin-top: -4px; border-top: 1px solid var(--rule); }
.sheet.lobby.tv { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 28px; align-content: start; }
.sheet.lobby.tv > * { grid-column: 2; }
.sheet.lobby.tv > h2, .sheet.lobby.tv > .lobbyjoin { grid-column: 1; }
.sheet.lobby.tv > h2 { grid-row: 1; }
.sheet.lobby.tv > .lobbyjoin { grid-row: 2 / span 20; align-self: start; flex-direction: column; align-items: flex-start; }
.sheet.lobby.tv > h3:first-of-type { grid-row: 1; align-self: end; }
.sheet.lobby h2 small.code { font: 700 22px var(--f-label); letter-spacing: 0.2em; color: var(--brass); margin-left: 8px; }
.lobbyjoin { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.lobbyjoin .qr { background: #fff; border-radius: 10px; padding: 6px; line-height: 0; }
.sheet .lobbyjoin p.url { font: 600 20px var(--f-label); color: var(--paper); letter-spacing: 0.04em; }
.lobbyjoin .url input { width: min(360px, 70vw); font-size: 14px; }
.sheet .lobbyjoin p.code { font: 700 56px/1 var(--f-label); letter-spacing: 0.22em; color: var(--brass); }
.lobbyjoin.small { gap: 14px; }
.lobbyjoin.small > div:last-child { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sheet.lobby.tv { width: min(920px, 100%); }
.sheet.lobby.tv h2 { font-size: 44px; }
.sheet.lobby.tv .lobbyjoin p:not(.code) { font-size: 20px; }
.lseats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lseats li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 8px; }
.lseats li b { font: 600 17px var(--f-label); letter-spacing: 0.04em; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseats li small { color: var(--muted); font-size: 13px; }
.lseats li.thead, .lseats li.empty { display: block; border: 0; padding: 4px 2px 0; font: 600 12px var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.lseats li.empty { color: var(--muted); text-transform: none; letter-spacing: 0; font: 400 14px var(--f-body); }
.lseats .sw { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; }
.lseats .sw .mk { width: 12px; height: 12px; fill: #0b1f38; }
.lseats .lact { display: flex; gap: 4px; }
.sheet.join { width: min(420px, 100%); }

/* the TV: the board and the table, nobody's hand */
.couchjoin { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 10px;
  background: rgba(11, 31, 56, 0.86); border: 1px solid var(--rule-strong); color: var(--muted); font: 500 13px/1.35 var(--f-body); z-index: 3; }
.couchjoin svg { border-radius: 4px; width: 84px; height: 84px; flex: none; }
.couchjoin b { color: var(--paper); }
.couchjoin .code { color: var(--brass); letter-spacing: 0.18em; font: 700 16px var(--f-label); }
body.couch-board #handCard, body.couch-board #ticketsCard { display: none; }
body.couch-board .status .who { font-size: 34px; }
body.couch-board .status p { font-size: 18px; }

/* ---------- link back to punatic.org (setup screen + menu) ---------- */
.moregames {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px;
  font: 500 13px/1.2 var(--f-label); letter-spacing: 0.06em; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.moregames:hover, .moregames:focus-visible { color: var(--paper); text-decoration-color: var(--paper); }
.sheet.setup .moregames-row { margin: 0; text-align: center; }
@media not all and (min-width: 1001px) and (min-height: 620px) {
  .moregames { min-height: 44px; font-size: 14px; }
  /* in play, phones keep it inside the closed menu */
  .bar #lnkMore { display: none; order: 2; }
  .bar.open #lnkMore {
    display: flex; justify-content: center; min-width: 150px; white-space: nowrap; padding: 0 12px; border-radius: 6px; text-align: center;
    background: rgba(8, 22, 41, 0.97); border: 1px solid var(--rule-strong); color: var(--paper); font-size: 13px; line-height: 1.15;
  }
}