:root{
  --bg:#2a1f16; --on-bg:#f1e4c4; --on-bg-muted:#c7b48f;
  --panel:#f1e6cc; --panel-2:#faf4e4; --ink:#2b1d12; --muted:#6b5a45; --line:#d6c6a2;
  --accent:#8c2f1c; --accent-ink:#fff7ea; --warn:#9b2c20; --ok:#2f6b3a; --portal:#8a6fd0;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Alegreya",Georgia,"Times New Roman",serif; --caps:"Spectral","Arial Narrow",sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#1b140e; --panel:#2b2219; --panel-2:#352a1f; --ink:#f1e4c4; --muted:#c2ad88; --line:#4a3b2b; --warn:#f08a7e; --ok:#8fd19e; } }
:root[data-theme="dark"]{ --bg:#1b140e; --panel:#2b2219; --panel-2:#352a1f; --ink:#f1e4c4; --muted:#c2ad88; --line:#4a3b2b; --warn:#f08a7e; --ok:#8fd19e; }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--on-bg);font:16px/1.4 var(--body)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #e0a23a;outline-offset:2px}
[hidden]{display:none!important}
.top{display:flex;align-items:baseline;gap:14px;padding:10px 16px}
.top h1{margin:0;font:400 26px/1.1 var(--display)}
.top p{margin:0;color:var(--on-bg-muted);font-style:italic}
.top .sp{flex:1}
/* phones: the title takes its own row and is scaled to the width, so nothing wraps badly or is cut off */
@media (max-width:640px){
  .top{flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 12px 6px}
  .top h1{flex:1 0 100%;white-space:nowrap;font-size:clamp(14px,6.2vw,26px)}
  .top p{font-size:clamp(11px,3.3vw,14px);white-space:nowrap}
  .top .sp{display:none}
  .top .linkbtn{font-size:clamp(11px,3.3vw,14px);white-space:nowrap;padding:2px 0;margin-left:auto}
  .top p + .linkbtn{margin-left:auto}
}
.linkbtn{background:none;border:0;color:var(--on-bg-muted);text-decoration:underline;cursor:pointer}
/* lobby */
#lobby{max-width:980px;margin:12px auto 40px;padding:0 16px}
.card{background:var(--panel);color:var(--ink);border-radius:10px;padding:22px 24px 26px}
.card h2{font:400 28px/1.1 var(--display);margin:0 0 8px}
.card p{margin:0 0 12px;max-width:64ch}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.choice{background:var(--panel-2);border:1.5px solid var(--line);border-radius:8px;padding:14px;text-align:left;cursor:pointer}
.choice strong{display:block;font:400 22px/1.2 var(--display)}
.choice span{color:var(--muted)}
.choice:hover:not(:disabled){border-color:var(--accent)}
.choice:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:3px;margin:0 0 10px}
.field span{font-size:14px;color:var(--muted)}
.field input,.field select{padding:8px 10px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel-2)}
.seats{display:grid;gap:8px;margin:12px 0}
.seat{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 10px;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--line)}
.seat .seat-pizza{grid-column:2}
.seat .lbl{display:block;font-size:14px;color:var(--muted);margin-bottom:3px}
.seat .no{font:700 18px var(--caps);padding-bottom:12px}
/* Pizza picker (lobby): a picture + full name per option; a pizza someone else
   holds is dimmed, disabled and marked "taken". */
.pizzas{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.pz{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;padding:8px 4px 6px;background:var(--panel-2);border:2px solid var(--line);border-radius:10px;font-size:13px;line-height:1.15;text-align:center;cursor:pointer}
.pz:hover:not(:disabled){border-color:var(--accent)}
.pz[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pz:disabled{opacity:.4;cursor:not-allowed}
.pz em{position:absolute;top:4px;left:50%;transform:translateX(-50%);font:700 11px var(--caps);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--panel);padding:1px 6px;border-radius:999px}
.marker-empty{display:inline-block;width:36px;height:36px;border-radius:50%;border:2px dashed var(--line)}
.pizzatag{font-size:.82em;font-weight:400;color:var(--muted)}
.code{font:700 40px/1 var(--caps);letter-spacing:.14em}
.plist{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:6px}
.plist li{display:flex;gap:10px;align-items:center;background:var(--panel-2);border-radius:6px;padding:6px 10px}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:9px 16px;font-weight:500;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.small{padding:5px 10px;font-size:14px}
.warn{color:var(--warn)}
/* game */
#game{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;padding:0 12px 12px;height:calc(100vh - 56px)}
@media (max-width:1000px){#game{grid-template-columns:1fr;height:auto}
  /* the frame is the board's own shape plus a band above and below (room for the zoom buttons and edge labels): no dead space */
  .mapbox{height:min(calc((100vw - 24px) * 2296 / 3376 + 92px),78vh)}}
.mapbox{position:relative;border-radius:8px;overflow:hidden;background:#e9dfc0;touch-action:manipulation;cursor:default}
.board-stack{position:absolute;top:0;left:0;width:3376px;height:2296px;transform-origin:0 0;will-change:transform}
#board-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
#map,#dots{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
#dots-stack{pointer-events:none}
#dots .station .mk,#dots .station .ring{pointer-events:all}
#station-tip{position:fixed;left:0;top:0;z-index:20;pointer-events:none;background:#2b1d12;color:#f1e4c4;font:700 13px var(--caps);padding:3px 8px;border-radius:5px;white-space:nowrap}
.mapbar{position:absolute;right:8px;top:6px;z-index:6}
.mapbar button{height:38px;padding:0 12px;border-radius:8px;border:0;background:rgba(43,29,18,.88);color:#f1e4c4;font:500 15px var(--body);cursor:pointer;display:flex;align-items:center;gap:6px}
.mapbar button b{font-size:19px;font-weight:400}
.map-hint{display:none;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;background:rgba(43,29,18,.88);color:#f1e4c4;border-radius:999px;padding:6px 14px;font-size:14px;white-space:nowrap;pointer-events:none;z-index:6}
/* full screen: the board fills the window, the sidebar and the page header go away */
body.map-full{overflow:hidden}
body.map-full .top,body.map-full .panel{display:none}
body.map-full #game{display:block;padding:0;height:100vh;height:100dvh}
body.map-full .mapbox{position:fixed;inset:0;height:auto;border-radius:0;z-index:8}
@media (orientation:portrait){body.map-full .map-hint{display:block}}
#pieces-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.st-piece-px{position:absolute;top:0;left:0;display:block;will-change:transform}
.st-piece-px svg{width:100%;height:100%;overflow:visible;display:block}
/* #panel-wrap is the visual sidebar card; #score-track sits above the fold
   at a fixed height, #panel (.panel-scroll) is the part that scrolls, so the
   score track and player list stay readable no matter how long the log or
   draft grid grows below them. */
.panel{background:var(--panel);color:var(--ink);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:0}
.panel-scroll{flex:1;min-height:0;overflow:auto}
.status{font:400 22px/1.15 var(--display);display:flex;align-items:center;gap:12px}
.status small{display:block;font:15px var(--body);color:var(--muted);margin-top:2px}
.block{border-top:1.5px solid var(--line);margin-top:10px;padding-top:10px}
.block h3{margin:0 0 6px;font:700 15px var(--caps);letter-spacing:.04em;display:flex;justify-content:space-between}
.block h3 small{font:400 13px var(--body);color:var(--muted)}
.players{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.players li{display:grid;grid-template-columns:32px 1fr auto;column-gap:8px;align-items:center;background:var(--panel-2);border-radius:6px;padding:5px 8px}
.players li.active{box-shadow:inset 3px 0 0 var(--accent)}
.players .pn{font-weight:500}
.players .ps{font:700 20px var(--caps)}
.players .pm{grid-column:2/4;font-size:13px;color:var(--muted)}
.market{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.tcard{aspect-ratio:5/7;border-radius:5px;border:1.5px solid rgba(0,0,0,.45);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font:700 11px var(--caps);padding:0 0 3px;position:relative;background-repeat:repeat;background-size:9px 9px}
.tcard:disabled{cursor:not-allowed;opacity:.5}
.tcard.deck{background:repeating-linear-gradient(135deg,#5a4633 0 6px,#6b5540 6px 12px);color:#f1e4c4;justify-content:center}
.tcard.empty{background:transparent;border-style:dashed}
/* §6.3: a colour field, a simple icon, and a pattern per colour, so colour
   isn't the only thing telling two cards apart. Adjacent hues that are
   commonly confused (red/green, orange/yellow, purple/blue) always get a
   different pattern type — same scheme as the map's route slots (§6/M3). */
.tcard::before{content:"";position:absolute;top:26%;width:56%;height:30%;background-image:var(--tcard-icon);background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.8}
.c-purple{background-color:#8b5fa8;color:#fff;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 3px,transparent 3px 9px)}
.c-white{background-color:#f4f2ea;color:#222;background-image:radial-gradient(circle,rgba(0,0,0,.22) 1.4px,transparent 1.5px)}
.c-blue{background-color:#3a74b8;color:#fff;background-image:radial-gradient(circle,rgba(255,255,255,.35) 1.4px,transparent 1.5px)}
.c-yellow{background-color:#e7c233;color:#222;background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 3px,transparent 3px 9px)}
.c-orange{background-color:#e0802e;color:#222;background-image:radial-gradient(circle,rgba(0,0,0,.2) 1.4px,transparent 1.5px)}
.c-black{background-color:#2b2b2b;color:#fff;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 3px,transparent 3px 9px)}
.c-red{background-color:#c8413b;color:#fff;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.3) 0 3px,transparent 3px 9px)}
.c-green{background-color:#4f9a4a;color:#fff;background-image:radial-gradient(circle,rgba(255,255,255,.32) 1.4px,transparent 1.5px)}
.c-purple,.c-blue,.c-black,.c-red,.c-green{--tcard-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 28"><rect x="2" y="2" width="44" height="18" rx="3" fill="none" stroke="white" stroke-width="2.5"/><circle cx="13" cy="24" r="3.5" fill="white"/><circle cx="35" cy="24" r="3.5" fill="white"/></svg>')}
.c-white,.c-yellow,.c-orange{--tcard-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 28"><rect x="2" y="2" width="44" height="18" rx="3" fill="none" stroke="%232b1d12" stroke-width="2.5"/><circle cx="13" cy="24" r="3.5" fill="%232b1d12"/><circle cx="35" cy="24" r="3.5" fill="%232b1d12"/></svg>')}
.c-loco{background-color:#c8413b;background-image:conic-gradient(#c8413b,#e7c233,#4f9a4a,#3a74b8,#8b5fa8,#c8413b);color:#fff;text-shadow:0 1px 2px #000}
.c-loco::before{display:none}
.hand{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:flex;align-items:center;gap:5px;background:var(--panel-2);border-radius:999px;padding:2px 9px 2px 2px;font-size:14px;font-weight:500}
.chip i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.4);display:block}
.tickets{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ticket{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left;background:var(--panel-2);border:1.5px solid transparent;border-radius:6px;padding:5px 8px 5px 5px;font-size:14px;cursor:pointer}
.ticket .pts{font:700 16px var(--caps)}
.ticket.done{border-color:var(--ok)}.ticket.done .pts::before{content:"✓ ";color:var(--ok)}
.ticket.hl{border-color:#e11d1d;box-shadow:0 0 0 1px #e11d1d}
.ticket input{margin-right:5px}
.ticket-map{position:relative;width:64px;height:44px;flex:none;border-radius:5px;overflow:hidden;border:1.5px solid var(--line);background-color:#9fc4c2}
.ticket-map svg{position:absolute;inset:0;width:100%;height:100%}
.ticket-map .tm-dot{fill:#e11d1d;stroke:#2b1d12;stroke-width:1.4}
.ticket-map .tm-line{stroke:#e11d1d;stroke-width:2;stroke-dasharray:3 2;opacity:.85}
.log{list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted);max-height:170px;overflow:auto}
.log .logline{display:flex;gap:6px;align-items:center;padding:1px 0}
/* power cards */
.power-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.power-card{background:var(--panel-2);border:1.5px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer}
.power-card:hover{border-color:var(--accent)}
.power-card .art{aspect-ratio:4/3;overflow:hidden;background:#2b1d12}
.power-card .art img{width:100%;height:100%;object-fit:cover;display:block}
.power-card .body{padding:7px 9px}
.power-card .name{font:700 13px var(--caps);letter-spacing:.02em;margin:0 0 3px}
.power-card .flavour,.power-detail .flavour,.rules-power .flavour{font-style:italic;font-size:12px;line-height:1.35;color:var(--muted);margin:0 0 6px}
.trojan-choice .row{flex-wrap:wrap;gap:8px}
.trojan-choice .btn{min-height:44px}
.power-card .blurb{font-size:12px;line-height:1.35;color:var(--muted);margin:0 0 6px}
.power-card .pips{display:flex;gap:4px}
.power-card .pip{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.power-card .pip.filled{background:var(--accent)}
.power-card .power-badge{display:inline-block;font:700 10px var(--caps);letter-spacing:.05em;color:var(--muted);background:var(--panel);padding:2px 7px;border-radius:999px}
.power-card{position:relative}
.power-card.taken{opacity:.6;filter:grayscale(.7);border-style:dashed}
.power-card .art{position:relative}
.power-card .taken-tag{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px;background:rgba(20,12,6,.82);color:#fff;font:700 11px var(--caps);letter-spacing:.03em}
.power-card .pick-btn{margin-top:8px;width:100%;min-height:44px}
.draft-turn{margin:0 0 6px;font-size:14px}
.draft-turn.mine{font-weight:700;color:var(--accent)}
.draft-order{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 10px}
.draft-order li{display:flex;align-items:center;gap:5px;padding:2px 8px 2px 3px;border:1.5px solid var(--line);border-radius:999px;font-size:12px}
.draft-order li.done{opacity:.5;text-decoration:line-through}
.draft-order li.now{border-color:var(--accent);background:var(--panel-2);font-weight:700}
.power-card.small{display:flex;flex-direction:row;align-items:center;gap:7px;background:transparent;border:0;border-radius:0}
.power-card.small .art{width:44px;height:33px;flex:none;border-radius:5px}
.power-card.small .body{padding:0}
.power-card.small .name{font-size:11px;margin:0}
.hint{font-size:14px;color:var(--muted);margin:6px 0}
.results{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.results th:first-child,.results td:first-child{width:19%}
.results th,.results td{padding:3px 5px;text-align:right;border-bottom:1px solid var(--line)}
.results th:first-child,.results td:first-child{text-align:left}
.results th.who{vertical-align:bottom;font-weight:500;font-size:11px;line-height:1.1;padding:3px 1px}
.results th.who .marker,.results th.who span,.results th.who small{display:block;margin:0 0 0 auto}
.results th.who small{font-size:9.5px;color:var(--muted);font-weight:400}
.results tr.total td{font:700 18px var(--caps)}
.banner{background:var(--warn);color:#fff;border-radius:6px;padding:5px 10px;font-size:14px;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.banner .btn{background:rgba(255,255,255,.22);color:#fff}
.connbadge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:6px;padding:1px 6px;border-radius:999px;vertical-align:middle}
.connbadge.conn-reconnecting{background:#e0a23a;color:#2b1d12}
.connbadge.conn-offline{background:var(--warn);color:#fff}
.connbadge.conn-connecting{background:var(--line);color:var(--muted)}
/* map overlay */
.route{cursor:pointer}
.route .track{fill:none;stroke:#2b1d12;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;pointer-events:none}
.route.portal .track{stroke:#5a4691}
.route .slot{stroke:#2b1d12;stroke-width:2.4}
.route .slot-body,.route .slot-strip,.route .slot-divider,.route .slot-keyline{pointer-events:none}
.route.portal .slot{stroke:#8a6fd0;stroke-width:3}
/* the three special borders (unclaimed routes), on EVERY slot: a ferry is a thick teal border, a tunnel a thick brown BUMPY (dashed) one, the Ryanair Link a thick navy one.
   --special-w is set in js/ui.js from the board's scale, so the border is at least ~2.2 px on screen at any size. */
.route.ferry .slot:not(.claimed){stroke:#0b8fa8;stroke-width:var(--special-w,6.2)}
.route.tunnel .slot:not(.claimed){stroke:#3b2414;stroke-width:var(--special-w,6.2);stroke-dasharray:calc(var(--special-w,6.2) * 1.05) calc(var(--special-w,6.2) * .55);stroke-linejoin:round}
.route.flight .slot:not(.claimed){stroke:#0a2270;stroke-width:var(--special-w,6.2)}
.route-icon *{fill:#fff;stroke:#1b1208;stroke-width:1.8;stroke-linejoin:round;paint-order:stroke}
.route-icon{pointer-events:none}
.legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.legend .swatch{vertical-align:middle}
.tunnel-choice .flips{margin:6px 0}
.tcard.sel{outline:3px solid #e0a23a;transform:translateY(-3px)}
.tcard.flipped{width:34px;height:46px;cursor:default;font-size:10px}
.tcard.flipped.match{outline:3px solid #c0392b}
.route:hover .slot:not(.claimed){stroke:#e0a23a;stroke-width:4.5}
.route .slot.claimed,.route.portal .slot.claimed{stroke:#0d0805;stroke-width:var(--claim-w,3.8);stroke-linejoin:round;stroke-dasharray:none}
.slot-tex{stroke:none;pointer-events:none}
.slot-bevel{mix-blend-mode:overlay;pointer-events:none}
.claim-line{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.85;pointer-events:none}
.route.closed{opacity:.28;cursor:not-allowed}
.route .hit{fill:none;stroke:transparent;stroke-width:30}
.station .mk{fill:#fbf6e8;stroke:#2b1d12;stroke-width:4}
.station.portal .ring{fill:none;stroke:#8a6fd0;stroke-width:5}
.station.hl .mk{fill:#e11d1d}
/* Station labels: a screen-space overlay, not part of #board-stack's scaled
   content, so font-size is constant CSS px at every zoom level (js/ui.js's
   updateLabelOverlay repositions these divs from board coordinates on every
   pan/zoom frame, and hides lower-priority ones that would collide). */
#labels-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Station labels: solid white with a dark outline, the same for all 40, at full opacity. Where a label still sits over a
   route slot after moving to its least crowded side it gets a small dark plate behind its own text (never faded, never
   without its outline). */
.station-label-el{position:absolute;top:0;left:0;padding:.08em .31em;border-radius:.31em;font-family:"Spectral","Arial Narrow",sans-serif;font-weight:700;font-size:13px;line-height:1.2;color:#fff;white-space:nowrap;text-align:center;will-change:transform;opacity:1;
  -webkit-text-stroke:.23em #1b1208;paint-order:stroke fill;
  text-shadow:-.077em -.077em 0 #1b1208,.077em -.077em 0 #1b1208,-.077em .077em 0 #1b1208,.077em .077em 0 #1b1208,0 -.115em 0 #1b1208,0 .115em 0 #1b1208,-.115em 0 0 #1b1208,.115em 0 0 #1b1208}
.station-label-el.plated{background:rgba(20,12,6,.55)}
@media (max-width:640px){.station-label-el{font-size:10px;padding:.04em .2em;line-height:1.1;border-radius:.25em}
  /* the board runs edge to edge on a phone: every pixel of width is worth 3% more room for the names */
  #game{padding:0 0 12px}.mapbox{border-radius:0}.panel{margin:0 12px}}
@keyframes claim-pop{from{transform:scale(.35);opacity:.5}to{transform:scale(1);opacity:1}}
.claim-pop{animation:claim-pop .32s cubic-bezier(.2,1.3,.4,1)}
/* Player marker (§6.5): reads assets/markers/marker-<colour>.webp once that
   art exists; until then (or if it 404s) it falls back to a small disc using
   the same per-player SVG pattern already defined for claimed routes, so the
   fallback and the real art carry the same identity. One shared look across
   the score track, the player list and the turn indicator. */
.marker{position:relative;display:inline-block;flex:none;border-radius:50%;overflow:hidden}
.marker img,.marker svg{display:block;width:100%;height:100%}
/* score track */
#score-track{flex:none;padding-bottom:10px;margin-bottom:2px;border-bottom:1.5px solid var(--line)}
.score-title{margin:0 0 8px;font:700 15px var(--caps);letter-spacing:.04em;color:var(--muted)}
.score-rows{display:grid;gap:3px}
.score-row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;min-height:28px}
.score-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
.score-name small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.score-row.leading .score-name{font-weight:700;color:var(--ink)}
.score-lane{position:relative;height:6px;background:var(--panel-2);border-radius:3px;box-shadow:inset 0 0 0 1px var(--line)}
.score-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;opacity:.4}
.score-marker{position:absolute;top:50%;transform:translate(-50%,-50%)}
.score-num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;min-width:2.2em}
.score-axis{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:10px;margin-top:4px}
.score-axis .score-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
/* overlays */
.overlay{position:fixed;inset:0;background:rgba(20,12,6,.62);display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}
.dialog{background:var(--panel);color:var(--ink);border-radius:10px;padding:18px 20px;max-width:430px;width:100%;max-height:90vh;overflow:auto}
.dialog h2{margin:0 0 4px;font:400 24px/1.15 var(--display)}
.pay{display:grid;gap:6px;margin:10px 0 12px}
.curtain .dialog{text-align:center}
.curtain .who{font:400 36px/1.1 var(--display);margin:6px 0 12px}
.curtain .marker{margin:2px auto 0;display:block}
.power-detail{max-width:420px;position:relative;padding-top:0;overflow:hidden}
.power-detail .art{aspect-ratio:4/3;margin:0 -20px 14px;overflow:hidden}
.power-detail .art img{width:100%;height:100%;object-fit:cover;display:block}
.power-detail h2{font:700 20px var(--caps);letter-spacing:.02em}
.power-detail p{font-size:15px;line-height:1.5;margin:0 0 10px}
.icon-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(20,12,6,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:1}
.rules-dialog{max-width:760px;position:relative}
.rules-dialog h2{margin:0 0 10px}
.rules-dialog h3{font:700 16px var(--caps);letter-spacing:.03em;margin:20px 0 6px;border-top:1.5px solid var(--line);padding-top:14px}
.rules-dialog h3:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.rules-dialog p,.rules-dialog li{font-size:15px;line-height:1.5}
.rules-dialog ul,.rules-dialog ol{margin:4px 0 10px;padding-left:22px}
.rules-dialog table{border-collapse:collapse;margin:6px 0 10px}
.rules-dialog th,.rules-dialog td{border:1px solid var(--line);padding:4px 12px;text-align:center;font-size:14px}
/* the gallery (start screen) */
.gallery-dialog{max-width:860px;position:relative}
.gallery-dialog h2{margin:0 0 4px}
.chr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.chr-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;background:var(--panel-2);border:2px solid var(--line);border-radius:10px;cursor:pointer;text-align:center;font:inherit;font-size:13px;line-height:1.2;color:var(--ink)}
.chr-card:hover{border-color:var(--accent)}
.chr-pic{display:flex;align-items:center;justify-content:center;width:100%;height:130px}
.chr-crop{position:relative;display:block;overflow:hidden;flex:none}
.chr-crop img{position:absolute;max-width:none;height:auto;display:block}
/* a character's card (tap a character on the map): the power card's frame, with the sprite flying in */
.character-card{width:min(400px,88vw);cursor:default;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;max-height:92vh;max-height:92dvh;color:var(--ink)}   /* a long list of routes scrolls inside the card, never off the screen */
@media (max-height:640px),(max-width:640px){.character-card .art{aspect-ratio:auto;height:34vh}}   /* the picture gives room to the text on a phone */
.character-card:hover{border-color:var(--line)}
.character-card .art{aspect-ratio:1/1;background:radial-gradient(circle at 50% 45%,#5a4632 0,#2b1d12 75%)}
.character-card .chr-fly{position:fixed;transform-origin:0 0;pointer-events:none;will-change:transform}
.character-card .chr-fly img{width:100%;height:100%;display:block;pointer-events:none}
.character-card .name{font-size:17px;line-height:1.25}
.mapbox.over-character{cursor:pointer}
.rules-power{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
.rules-power img{width:96px;height:72px;object-fit:cover;border-radius:6px;flex:none;background:#2b1d12}
.rules-power h4{margin:0 0 3px;font:700 14px var(--caps);letter-spacing:.02em}
.rules-power p{margin:0;font-size:14px;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#2b1d12;color:#f1e4c4;padding:8px 14px;border-radius:6px;z-index:40;max-width:90vw}

/* train stations: a house in the owner's colour over the city's dot (js/ui.js stationPiece), never a rounded train bar */
.st-piece .st-halo{fill:#fff;stroke:#fff;stroke-width:5.5;stroke-linejoin:round}
.st-piece .st-body{stroke:#0d0805;stroke-width:2.4;stroke-linejoin:round}
.st-piece .st-tint{opacity:.62;stroke:none}
.st-piece .st-roof{display:none}
.st-piece .st-door{fill:#0d0805}
.st-piece .st-dot{fill:#fbf6e8;stroke:#0d0805;stroke-width:2}
.st-pips{display:inline-flex;gap:2px;vertical-align:middle;margin-left:6px}
.st-pips.big{display:flex;gap:6px;margin:2px 0 6px}
.st-pip{width:20px;height:17px}.st-pips.big .st-pip{width:32px;height:27px}
.st-pip path{fill:none;stroke:var(--muted);stroke-width:5;stroke-dasharray:9 6;stroke-linejoin:round}
.st-pip.on path{stroke:#0d0805;stroke-width:5;stroke-dasharray:none}
.pay.compact{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pay.compact .btn{padding:8px 4px;font-size:14px}

.warnbar{background:#8a3b12;color:#fff;font-weight:500}
.power-card.closed .art img{filter:grayscale(.85) brightness(.7)}
.closed-tag{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(20,12,6,.86);color:#fff;border-radius:6px;padding:4px 6px;font:600 13px var(--body);text-align:center}
.power-card.small .closed-tag{left:2px;right:2px;bottom:2px;padding:1px 2px;font-size:10px;border-radius:3px}

#label-leaders{position:absolute;inset:0;overflow:visible;pointer-events:none}
/* dotted, so a connector can't be taken for a route (the routes are solid bars, and one of them is white) */
#label-leaders line{stroke:#fff;stroke-width:1.9;stroke-dasharray:.1 3.1;stroke-linecap:round;filter:drop-shadow(0 0 .7px #1b1208) drop-shadow(0 0 .7px #1b1208)}

/* the ticket's two cities: circled in red, a ring whose width is the same on screen at any board size */
.hl-halo{fill:none;stroke:#fff;stroke-width:calc(var(--hl-w,6px) * 2.2);opacity:.92}
.hl-red{fill:rgba(225,29,29,.14);stroke:#e11d1d;stroke-width:var(--hl-w,6px);transform-box:fill-box;transform-origin:center;animation:hl-pulse 1.5s ease-in-out infinite}
@keyframes hl-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* the route claimed last: a subtle golden outline under it, and a glow that runs along it when it is new */
.claim-outline{fill:none;stroke:#ffc21a;stroke-width:var(--glow-w,30);stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.claim-edge{fill:none;stroke:#6b4300;stroke-width:calc(var(--glow-w,30) + 2.4 / var(--sc,.2));stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.claim-sweep,.claim-sweep-soft{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:claim-sweep 2.1s ease-out forwards}
.claim-sweep{stroke:#fff3b0;stroke-width:calc(var(--sweep-w,40px) * .55);filter:drop-shadow(0 0 5px #ffcf3a) drop-shadow(0 0 12px #ffb300)}
.claim-sweep-soft{stroke:#ffc933;stroke-width:var(--sweep-w,40px);opacity:.75;filter:blur(2px)}
@keyframes claim-sweep{0%{stroke-dashoffset:1;opacity:1}45%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* the hand: real cards with their counts, right under the market and the deck */
.handhead{margin:12px 0 5px;font:700 13px var(--caps);letter-spacing:.04em;display:flex;justify-content:space-between}
.handhead small{font:400 13px var(--body);color:var(--muted)}
.hand-tiles .htile{cursor:default;justify-content:flex-start;padding:0}
.htile b{position:absolute;top:2px;left:0;right:0;text-align:center;font:700 21px/1.1 var(--caps);-webkit-text-stroke:3px rgba(0,0,0,.55);paint-order:stroke fill;color:#fff}
.htile.c-white b,.htile.c-yellow b,.htile.c-orange b{color:#fff}
.htile::before{top:48%}
.power-card.spent .art img{filter:grayscale(.75) brightness(.72)}
/* "your turn": a big banner over everything */
#turn-banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:max-content;z-index:60;display:flex;align-items:center;gap:12px;background:linear-gradient(#efc24e,#d19a24);color:#2b1d12;padding:11px 20px 11px 12px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 3px #fff8;max-width:92vw;cursor:pointer;animation:banner-in .5s cubic-bezier(.2,1.3,.4,1)}
#turn-banner[hidden]{display:none}
#turn-banner strong{display:block;font:600 24px/1.1 var(--display)}
#turn-banner small{display:block;font:15px/1.25 var(--body);opacity:.85;margin-top:2px}
#turn-banner.pick{background:linear-gradient(#b99cf0,#8d6bd0)}
@keyframes banner-in{from{transform:translate(-50%,-140%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* the end: the final count in front of the map, with fireworks behind it */
.overlay.final{background:rgba(12,7,3,.8);z-index:50}
.fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.final-dialog{position:relative;max-width:470px;animation:final-in .6s cubic-bezier(.2,1.2,.4,1);box-shadow:0 0 0 3px #f2c14e,0 20px 60px rgba(0,0,0,.6)}
.final-dialog h2{text-align:center;font-size:32px}
.winner{display:flex;align-items:center;gap:14px;justify-content:center;margin:6px 0 12px}
.winner span{display:block;font-size:16px}.winner small{display:block;color:var(--muted);font-size:13px}.winner strong{display:block;font:600 28px/1.1 var(--display)}
@keyframes final-in{from{transform:scale(.7) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hl-red,.claim-sweep,.claim-sweep-soft,.final-dialog,#turn-banner{animation:none}.claim-sweep,.claim-sweep-soft{display:none}}

/* first look on a phone held upright: say plainly that sideways is much better (js/ui.js rotateHint) */
#rotate-hint{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:#f2c14e;color:#2b1d12;border-radius:0;padding:10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#rotate-hint[hidden]{display:none}
#rotate-hint p{margin:0;font-size:15px;line-height:1.3}
#rotate-hint em{font-size:13px;opacity:.85}
#rotate-hint .rh-icon{font-size:34px;line-height:1}
#rotate-hint .rh-buttons{grid-column:1/3;display:flex;gap:8px;justify-content:flex-end}
#rotate-hint .btn.ghost{color:#2b1d12;box-shadow:inset 0 0 0 1.5px #2b1d12}
@media (min-width:641px),(orientation:landscape){#rotate-hint{display:none}}
body.map-full #rotate-hint{display:none}
.route-pick{flex-wrap:wrap;gap:6px}.route-pick .btn{text-align:left}