/* Michigan Rails' table: the map, the players, the rail yard, your hand,
   your tickets and the dock, on the room's structure (games/room/room.css),
   from the tokens in michigan-rails.css.

   Steadiness first: the map is as big as the window allows and never
   changes size; the yard, the hand and the dock never change size; what
   comes and goes (glows, rings, the tooltip, banners) is drawn over what's
   there, so nothing you might be about to press moves. */

/* ── the frame ───────────────────────────────────────────────────────── */
.felt.mrails { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.mrails.docked { grid-template-columns: minmax(0, 1fr) 320px; }
.mrails .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.mrails .logdock { min-height: 0; display: flex; flex-direction: column; }
.mrails .logdock:empty { display: none; }
.mrails .logdock .gamelog { flex: 1; }
.mrails .gamelog.drawer {
  position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 230px; width: min(340px, calc(100% - 28px));
  box-shadow: -10px 10px 30px rgba(0, 0, 0, .35);
}
.mrails .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }
.mrails .bar .tools .stop.unseen { visibility: hidden; }
.mrails .dock > .watchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-note); }
.mrails .gamelog .who svg { vertical-align: -1px; margin-right: 3px; }
.mrails .logroute { font-weight: 700; }
.mrails .loglines .scores .sep { display: none; }
.mrails .logcard { white-space: nowrap; font-weight: 600; }
.mrails .logcard .swatch { --sw: 11px; }

/* The stage: the map beside the rest on a wide (or sideways) window, above
   it on a tall one. The map's width is what its height allows, leaving the
   side at least 380px (two columns' worth on a very wide window). */
.mrails .stagebox { flex: 1; min-height: 0; min-width: 0; container-type: size; }
.mrails .stage {
  --mapw: min(calc(100cqh * 1000 / 1028), calc(100cqw - 396px));
  height: 100%; display: grid; gap: 16px;
  grid-template-columns: var(--mapw) min(600px, calc(100cqw - var(--mapw) - 16px)); justify-content: center;
}
.felt.mrails.wide .stage { --mapw: min(calc(100cqh * 1000 / 1028), calc(100cqw - 876px)); grid-template-columns: var(--mapw) min(860px, calc(100cqw - var(--mapw) - 16px)); }
.mrails .mapcol { position: relative; min-height: 0; min-width: 0; container-type: size; }
.mrails .side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; min-width: 0; }
.felt.mrails.wide .side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.mrails .sidemain { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.mrails .sidex { display: none; min-height: 0; min-width: 0; flex-direction: column; gap: 10px; }
.felt.mrails.wide .sidex { display: flex; }
.mrails .ticketsmain { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.felt.mrails.wide .ticketsmain { display: none; }
.mrails .sidelog { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.felt.mrails.wide .sidex .tickets { flex: 1 1 0; }
.mrails .sidelog:empty { display: none; }
.mrails .sidelog .gamelog { flex: 1; min-height: 0; }
.mrails .sidelog :is(.logpin, .logclose) { display: none; }
.felt.mrails.sidelogged .bar .logbtn { display: none; }
.mrails .ticketsbtn { display: none; }

.mrails .secthead { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; font: var(--display-weight) var(--t-heading)/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.mrails .secthint { font: 600 12px/1.2 var(--ui-font); letter-spacing: .02em; text-transform: none; color: var(--soft); }

/* ── the map ─────────────────────────────────────────────────────────── */
.mrails .mapwrap { position: absolute; inset: 0; display: flex; }
.mapframe {
  position: relative; margin: auto; width: min(100cqw, calc(100cqh * 1000 / 1028)); aspect-ratio: 1000 / 1028; overflow: hidden; border-radius: 3px;
  background: var(--map-paper); touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 1px color-mix(in srgb, var(--brass) 40%, transparent), 0 18px 44px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .4);
}
.mapframe.zoomed { cursor: grab; }
.mapframe.dragging { cursor: grabbing; }
.mapview { position: absolute; inset: 0; transform-origin: 0 0; }
.mapview.easing { transition: transform 240ms var(--ease-out, ease-out); }
.mapsvg { display: block; width: 100%; height: 100%; overflow: hidden; }

/* the printed map's words */
.mapsvg .mapname { font-family: var(--map-italic); font-style: italic; }
.mapsvg .mapname.water { fill: var(--map-water-line); fill-opacity: .92; }
.mapsvg .mapname.land { font-family: var(--display); font-style: normal; font-weight: 600; fill: var(--map-beyond-coast); }
.mapsvg .rosen { font: 800 17px var(--display); fill: var(--map-ink); }
.mapsvg .cartkicker { font: 700 8.5px var(--ui-font); letter-spacing: .32em; fill: var(--map-ink); }
.mapsvg .carttitle { font: 900 37px var(--display); letter-spacing: .07em; fill: var(--map-ink); }
.mapsvg .cartsub { font: italic 11.5px var(--map-italic); fill: var(--map-ink); }

/* routes: printed cars in their color and mark; tunnels with dashed edges */
.mapsvg .route .edge { fill: none; stroke: var(--map-ink); stroke-width: .8; }
/* (printed spaces lie flat and a touch light, so the players' raised cars stand off them) */
.mapsvg .route .shade, .mapsvg .route .bevel { display: none; }
.mapsvg .route .slot { opacity: .86; }
.mapsvg .route .hachure { fill: none; stroke-linejoin: round; stroke: var(--map-coast); stroke-opacity: .38; stroke-width: 16; stroke-dasharray: .9 2.1; }
.mapsvg .route .hatch { opacity: .12; }
.mapsvg .route.c-white .hatch, .mapsvg .route.c-yellow .hatch { opacity: .07; }
.mapsvg .route.tunnel .edge { stroke-width: 1.6; stroke-dasharray: 2.4 1.5; }
.mapsvg .route .carmark { opacity: .85; }
.mapsvg .route { transition: opacity 200ms; }
.mapsvg .route.taken { opacity: .14; }
.mapsvg .route.taken .carmark { display: none; }
.mapsvg .route.shut { opacity: .32; }
/* the helper's glow under routes you can claim, and the one pointed at */
.mapsvg .glow { fill: none; stroke-linejoin: round; stroke: var(--turn); stroke-width: 16; stroke-linecap: round; opacity: 0; transition: opacity 160ms; }
.mapsvg .glow.lit { opacity: .62; animation: mrglow 1.8s ease-in-out infinite alternate; }
.mapsvg .glow.hot { opacity: .5; stroke: var(--map-ink); stroke-width: 15; animation: none; }
.mapsvg .glow.lit.hot { opacity: 1; stroke: var(--turn); stroke-width: 19; }
.mapsvg .route.hot .edge { stroke-width: 1.4; }
/* a route picked to claim: its cars lifted off the paper on a steady glow,
   until it's claimed (a second press, or Claim) or let go (Escape) */
.mapsvg .glow.picked { opacity: 1; stroke: var(--turn); stroke-width: 21; animation: none; }
.mapsvg .route.picked { transform: translateY(-1.6px); filter: drop-shadow(0 2.4px 1.2px rgba(0, 0, 0, .45)); transition: transform var(--m-quick, 120ms) ease-out; }
.mapsvg .route.picked .edge { stroke-width: 1.6; }
@keyframes mrglow { from { opacity: .38; } to { opacity: .72; } }
/* a ticket's cheapest way: a dotted line over the cars */
.mapsvg .plan { fill: none; stroke-linejoin: round; stroke: var(--map-ink); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 1.5 6.5; opacity: 0; transition: opacity 160ms; }
.mapsvg .plan.on { opacity: .8; }
/* the players' trains */
.mapsvg .claim .car.laying { animation: mrlay 420ms cubic-bezier(.3, 1.45, .5, 1) backwards; transform-box: fill-box; transform-origin: center; }
@keyframes mrlay { from { opacity: 0; transform: translateY(-10px) scale(1.6); } 55% { opacity: 1; filter: brightness(1.55); } }
/* a claimed route's bed: the claimer's color under the whole route, edged in ink */
.mapsvg .claim .bedcase { fill: none; stroke: var(--piece-edge); stroke-opacity: .45; stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .claim .bed { fill: none; stroke-opacity: .55; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .claim.fresh .bed, .mapsvg .claim.fresh .bedcase { animation: mrbed 600ms ease-out backwards; }
@keyframes mrbed { from { opacity: 0; } }
.mapsvg .claim.flash { animation: mrflash 1.2s ease-out; }
@keyframes mrflash { 25% { filter: drop-shadow(0 0 4px var(--turn)) drop-shadow(0 0 2px var(--turn)); } }
/* cities: a stop each, the helpers' rings round them, their names */
.mapsvg .city { cursor: pointer; outline: none; }
.mapsvg .city .hit { fill: transparent; }
.mapsvg .city .stop { fill: var(--map-paper); stroke: var(--map-ink); stroke-width: 1.8; }
.mapsvg .city .hub { fill: var(--map-ink); }
.mapsvg .city .kring { fill: none; stroke: none; }
.mapsvg .city.hot .stop { stroke-width: 2.6; }
.mapsvg .city.kfocus .kring { stroke: var(--map-ink); stroke-width: 2.6; }
.mapsvg .city.kfocus .stop { fill: var(--turn); }
.mapsvg .ring { fill: none; stroke: none; transition: opacity 160ms; }
.mapsvg .ring.on.tix { stroke: var(--map-ink); stroke-width: 2; stroke-dasharray: 3.2 2.4; fill: color-mix(in srgb, var(--turn) 30%, transparent); }
.mapsvg .ring.on.offering { stroke: var(--map-ink); stroke-width: 2.4; fill: color-mix(in srgb, var(--turn) 45%, transparent); }
.mapsvg .ring.on.hot { stroke: var(--map-ink); stroke-width: 3; fill: color-mix(in srgb, var(--turn) 75%, transparent); r: 13px; }
/* (a city's name as large as the map holds it: at 12.5 the names would lie
   over a quarter more of the routes' cars than they do at 12) */
.mapsvg .cname { font: 650 12px var(--ui-font); fill: var(--map-name); paint-order: stroke; stroke: var(--map-paper); stroke-width: 3.2px; stroke-linejoin: round; letter-spacing: .01em; }
.mapsvg .stn .stationtoken { overflow: visible; }
.mapsvg .stninner.dropping { animation: mrdrop 420ms cubic-bezier(.3, 1.4, .5, 1) backwards; transform-box: fill-box; transform-origin: center bottom; }
@keyframes mrdrop { from { opacity: 0; transform: translateY(-16px) scale(1.4); } }
.mapsvg .stn.flash { animation: mrflash 1.2s ease-out; }

/* a ticket in the spotlight: the rest of the map steps back, its cities
   ring and pulse with their names called out, its cheapest way glows */
.mapsvg .spot .scrim { fill: #0d1720; opacity: .52; }
.mapsvg .spot { animation: mrfadein 180ms ease-out; }
@keyframes mrfadein { from { opacity: 0; } }
.mapsvg .spot .spotcase { fill: none; stroke-linejoin: round; stroke: var(--map-ink); stroke-width: 11; stroke-linecap: round; opacity: .7; }
.mapsvg .spot .spotline { fill: none; stroke-linejoin: round; stroke: var(--turn); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 9 5; filter: drop-shadow(0 0 3px var(--turn)); animation: mrmarch 1s linear infinite; }
@keyframes mrmarch { to { stroke-dashoffset: -14; } }
.mapsvg .spot .spotring { fill: color-mix(in srgb, var(--turn) 35%, transparent); stroke: var(--map-ink); stroke-width: 4; }
.mapsvg .spot .spotpulse { fill: none; stroke: var(--turn); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: mrpulse 1.4s ease-out infinite; }
@keyframes mrpulse { from { transform: scale(1); opacity: .95; } to { transform: scale(2.3); opacity: 0; } }
.mapsvg .spot .spotname rect { fill: var(--map-ink); stroke: var(--turn); stroke-width: 1.5; }
.mapsvg .spot .spotname text { font: 800 15px var(--display); letter-spacing: .06em; text-transform: uppercase; fill: var(--map-paper); }
/* the move just made: lit until the next */
.mapsvg .lastline { fill: none; stroke-linejoin: round; stroke: var(--turn); stroke-width: 19; stroke-linecap: round; opacity: .75; filter: drop-shadow(0 0 4px var(--turn)); }
.mapsvg .lastring { fill: color-mix(in srgb, var(--turn) 30%, transparent); stroke: var(--turn); stroke-width: 4; }
.mapsvg .ripple { fill: none; stroke: var(--turn); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mrripple 900ms ease-out forwards; }
@keyframes mrripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
/* a claim's points, floating up off its route */
.floatpts {
  position: absolute; z-index: 6; pointer-events: none; translate: -50% -50%; padding: 2px 10px; border-radius: 99px;
  font: 800 22px/1.1 var(--display); color: var(--turn-ink); background: var(--turn); box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  animation: mrfloat 1300ms ease-out forwards;
}
@keyframes mrfloat { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
/* a tunnel's three cards, turned over large in the middle of the map */
.tunnelshow { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; background: rgba(8, 16, 24, .38); animation: mrfadein 160ms ease-out; }
.tunnelshow.going { opacity: 0; transition: opacity 220ms; }
.tunnelshow .tsbox { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 18px 12px; border-radius: 14px; background: color-mix(in srgb, var(--sheet) 94%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.tunnelshow .tshead { font: var(--display-weight) 20px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.tunnelshow .tscards { display: flex; gap: 12px; }
.tunnelshow .tscard { display: block; border-radius: 8px; transition: translate 200ms, box-shadow 200ms; }
.tunnelshow .tscard .tcard { --tw: clamp(46px, 9cqmin, 76px); }
.tunnelshow .tscard.hit { translate: 0 -6px; box-shadow: 0 0 0 3px var(--turn), 0 0 16px 2px var(--turn); }
.tunnelshow .tssay { min-height: 1.4em; font: 800 18px/1.3 var(--display); letter-spacing: .04em; color: var(--turn); text-transform: uppercase; }
/* the room's seat bar (Take my seat back, Replace with bot) as a slim strip
   over the map's foot: never in the side column, so it never takes your
   tickets' room; each button a full 44px */
.mrails .seatslot {
  position: absolute; z-index: 8; left: 50%; bottom: 12px; translate: -50% 0;
  width: calc(min(100cqw, 100cqh * 1000 / 1028) - 24px); display: flex; justify-content: center; pointer-events: none;
}
.mrails .seatslot:empty { display: none; }
.mrails .seatslot > .seatbar {
  pointer-events: auto; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 6px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--sheet) 95%, transparent); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.mrails .seatslot .seatrow { gap: 14px; }
.mrails .seatslot .seatrow.mine { padding-left: 0; }

/* the tooltip over the map */
.maptip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; width: max-content; max-width: min(380px, calc(100% - 12px));
  padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--sheet) 94%, transparent); color: var(--ink);
  font: 13.5px/1.4 var(--ui-font); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.maptip[hidden] { display: none; }
.maptip .tipcolor { white-space: nowrap; }
.maptip .tipcolor .swatch { --sw: 13px; }
.maptip .tipcan { color: var(--turn); font-weight: 700; }
.maptip .tipown svg, .maptip .tipstn svg { vertical-align: -2px; margin-right: 4px; }

/* the zoom strip, top right of the map (over Ontario, where there are no routes) */
.mrzoom { position: absolute; right: 8px; top: 8px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.mrzoom .zoom-btn {
  min-width: 36px; min-height: 36px; padding: 0 6px; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  font: 700 13px/1 var(--ui-font); background: color-mix(in srgb, var(--sheet) 88%, transparent); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.mrzoom .zoom-btn .zoomicon { width: 16px; height: 16px; display: block; }
.mrzoom .zoom-btn[disabled] { opacity: .45; cursor: default; }
.mrzoom .zoom-btn[hidden] { display: none; }
.mrzoom .zoom-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── the players: slim, their details in a popover ─────────────────── */
.mrails .playerswrap { flex: none; position: relative; display: flex; flex-direction: column; gap: 6px; }
.mrails .lastround { margin: 0; padding: 5px 10px; border-radius: 8px; font-size: var(--t-note); background: color-mix(in srgb, var(--turn) 18%, var(--panel)); border: 1.5px solid var(--turn); }
.mrails .lastround[hidden] { display: none; }
.mrails .lastround b { color: var(--turn); }
.mrails .players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 4px 6px; }
.mrails .prow {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; min-width: 0; min-height: 40px;
  padding: 3px 9px 3px 5px; border-radius: 10px; background: var(--panel); border: 1.5px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.mrails .prow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mrails .prow[aria-expanded="true"] { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.mrails .prow.me { background: color-mix(in srgb, var(--ink) 7%, var(--panel)); }
.mrails .prow.turn { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 10%, var(--panel)); }
.mrails .prow.away .pname b { color: var(--soft); }
.mrails .prow.landed { animation: mrlanded 700ms ease-out; }
@keyframes mrlanded { 30% { box-shadow: 0 0 0 2px var(--turn), 0 0 12px color-mix(in srgb, var(--turn) 60%, transparent); } }
/* The turn passing to this row: a ring that swells and settles (HANDOFF_MS in table.js). */
.mrails .prow.handoff { animation: mrhandoff 1400ms ease-out both; }
@keyframes mrhandoff {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--turn) 0%, transparent); transform: scale(1); }
  25% { box-shadow: 0 0 0 4px var(--turn), 0 0 22px color-mix(in srgb, var(--turn) 70%, transparent); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--turn) 0%, transparent); transform: scale(1); }
}
.mrails .pmark { display: block; width: 26px; height: 26px; }
.mrails .pmark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mrails .pmain { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mrails .pname { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mrails .pname b { flex: 0 1 auto; font-size: 15px; line-height: 1.2; font-weight: 700; min-width: 1.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrails .ptag { flex: none; font: 700 12px/1 var(--ui-font); letter-spacing: .03em; color: var(--soft); padding: 4.5px 6px; text-box: trim-both cap alphabetic; border-radius: 99px; border: 1px solid currentColor; }
.mrails .ptag.up { color: var(--turn); }
.mrails .ptag.choosing { color: var(--ink); }
.mrails .pdid { font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.mrails .ptrains { display: inline-flex; align-items: center; gap: 5px; }
.mrails .ptrains b, .mrails .ppts b { font: 800 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.mrails .icar { display: block; width: 15px; height: 7px; border-radius: 3px; background: var(--seat, var(--ink)); box-shadow: 0 0 0 1px var(--piece-edge), 0 0 0 2px color-mix(in srgb, var(--card-face) 70%, transparent); }
.mrails .icard { display: block; width: 9px; height: 13px; border-radius: 2px; background: var(--card-back); box-shadow: inset 0 0 0 1px var(--card-back-ink), 2px -2px 0 -1px var(--card-back), 2px -2px 0 0 var(--card-back-ink); }
.mrails .iticket { display: block; width: 14px; height: 9px; border-radius: 1.5px; background: var(--ticket); box-shadow: inset 3px 0 0 -2px var(--ticket-ink); }
.mrails .ppts { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 2.6em; }
.mrails .ppts small { font-size: 12px; color: var(--soft); font-weight: 700; letter-spacing: .04em; }
/* a player's details: pointed at, focused or pressed */
.mrails .pinfo {
  position: absolute; z-index: 25; width: min(330px, 100%); padding: 10px 12px; border-radius: 12px;
  background: var(--sheet); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.mrails .pinfo[hidden] { display: none; }
.mrails .pihead { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: var(--t-note); }
.mrails .pihead .soft { color: var(--soft); }
.mrails .pistats { margin: 0; display: grid; gap: 6px; font-size: var(--t-note); }
.mrails .pistats > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.mrails .pistats dt { color: var(--soft); }
.mrails .pistats dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.mrails .pistats .stocksvg { width: 96px; height: auto; display: block; color: var(--ink); }
.mrails .pistns { display: flex; gap: 2px; color: var(--ink); }
.mrails .pistns svg { display: block; }

/* ── the rail yard ───────────────────────────────────────────────────── */
.mrails .yard { flex: none; container-type: inline-size; padding: 8px 10px 4px; border-radius: var(--panel-radius); background: var(--panel); border: var(--panel-edge); }
.mrails .yardrow { --yw: min(64px, calc((100cqi - 6 * 8px - 12px) / 7)); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mrails .faceup { display: flex; gap: 8px; flex: none; }
.mrails .yard .tcard { --tw: var(--yw); }
.mrails .faceslot, .mrails .pile {
  all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 7px; cursor: default; -webkit-tap-highlight-color: transparent;
}
.mrails .faceslot { width: var(--yw); }
.mrails .faceslot .tcard { transition: transform var(--m-quick, 120ms) ease-out, filter var(--m-quick, 120ms); }
.mrails .faceslot.can, .mrails .pile.can { cursor: pointer; }
.mrails .faceslot.can .tcard { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
@media (hover: hover) {
  .mrails .faceslot.can:hover .tcard, .mrails .pile.can:hover .pilecards { transform: translateY(-4px); }
}
.mrails .faceslot.can:active .tcard, .mrails .pile.can:active .pilecards { transform: translateY(-1px); }
.mrails .faceslot.nope .tcard { filter: saturate(.4) brightness(.7); }
.mrails :is(.faceslot, .pile):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.mrails .faceslot.flipin .tcard { animation: mrflip 300ms ease-out; }
@keyframes mrflip { from { transform: rotateY(90deg); } }
.mrails .faceempty { display: block; width: var(--yw); aspect-ratio: 60 / 86; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.mrails .facekey {
  position: absolute; top: calc(var(--yw) * 86 / 60 - 9px); left: 50%; translate: -50% 0; visibility: hidden;
  font: 700 12px/1 var(--ui-font); padding: 2px 5px; border-radius: 4px; background: var(--sheet); color: var(--soft); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
:root[data-house-keys="on"] .mrails .facekey { visibility: inherit; }
.mrails .pile { width: var(--yw); }
.mrails .pilecards { position: relative; display: block; width: var(--yw); aspect-ratio: 60 / 86; transition: transform var(--m-quick, 120ms) ease-out; }
.mrails .pilecards > .tcard { position: absolute; left: 0; top: 0; }
.mrails .pilecards > .tcard:nth-child(1) { translate: 3px 3px; }
.mrails .pilecards > .tcard:nth-child(2) { translate: 1.5px 1.5px; }
.mrails .pile.empty .pilecards { opacity: .3; }
/* The ticket deck asking "Take 3 tickets?" (a second press takes them): lifted,
   ringed in the turn's yellow, as a picked route is lifted on its glow. */
.mrails .pile.ticketpile.asking .pilecards { transform: translateY(-8px); filter: drop-shadow(0 0 0 var(--turn)) drop-shadow(0 0 6px var(--turn)); }
.mrails .pile.ticketpile.asking .pilelabel { outline: 2px solid var(--turn); outline-offset: 1px; }
/* a pile's name and count, on a pill at its foot (as your hand's counts are) */
.mrails .pilelabel {
  position: absolute; left: 50%; top: calc(var(--yw) * 86 / 60 - 10px); translate: -50% 0; z-index: 1; display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
  padding: 2px 7px; border-radius: 99px; background: var(--sheet); border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.mrails .pilename { font: 700 12px/1.2 var(--ui-font); letter-spacing: .03em; text-transform: uppercase; color: var(--soft); }
.mrails .pilecount { font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; }
/* the ticket deck: tickets on their backs, stacked */
.mrails .pilecards.tix { display: grid; place-items: center; }
.mrails .tixback, .ticketfly .tixback {
  position: absolute; left: 50%; top: 50%; width: calc(var(--yw) * 1.0); height: calc(var(--yw) * .62); translate: -50% -50%; rotate: -90deg;
  border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(0, 0, 0, .06) 5px 6px), var(--ticket-long);
  box-shadow: inset 0 0 0 1.5px var(--ticket-ink), inset 0 0 0 4px var(--ticket-long), inset 0 0 0 5px color-mix(in srgb, var(--ticket-ink) 60%, transparent), 0 1.5px 2px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
}
.mrails .pilecards.tix .tixback:nth-child(1) { translate: calc(-50% + 3px) calc(-50% + 3px); }
.mrails .pilecards.tix .tixback:nth-child(2) { translate: calc(-50% + 1.5px) calc(-50% + 1.5px); }
.mrails .tixword, .ticketfly .tixword { font: 800 calc(var(--yw) * .2)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ticket-ink); }
.mrails .yardnote { margin: 12px 0 0; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--soft); line-height: 1.3; }
.mrails .discards { flex: none; font-variant-numeric: tabular-nums; }
.cardfly { position: fixed; z-index: 40; pointer-events: none; }
.cardfly .tcard { --tw: 56px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.ticketfly { position: fixed; z-index: 40; pointer-events: none; width: 60px; height: 40px; --yw: 60px; }

/* ── your hand: held in a wooden rack, fanned ───────────────────────── */
.mrails .hand { flex: none; container-type: inline-size; }
.mrails .hand[hidden] { display: none; }
.mrails .rack { --hw: min(74px, 18cqi); --ch: calc(var(--hw) * 86 / 60); position: relative; height: calc(var(--ch) + 22px); margin-top: 4px; }
.mrails .rackback {
  position: absolute; left: 4%; right: 4%; bottom: 14px; height: calc(var(--ch) * .55); border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--rack-lo), color-mix(in srgb, var(--rack-lo) 70%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -6px 10px rgba(0, 0, 0, .35);
}
.mrails .fan { --step: min(calc(var(--hw) * .8), calc((100cqi - var(--hw) - 32px) / max(1, var(--m) - 1))); position: absolute; inset: 0 0 0 0; }
.mrails .held {
  all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent;
  position: absolute; left: calc(50% + var(--off) * var(--step)); top: 2px; width: var(--hw);
  transform: translate(-50%, var(--lift)) rotate(var(--rot)); transform-origin: 50% 130%;
  transition: transform var(--m-quick, 120ms) ease-out, left 220ms ease-out;
}
.mrails .held .tcard { --tw: var(--hw); filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, .45)); }
.mrails .held.focus, .mrails .held:hover { transform: translate(-50%, calc(var(--lift) - 10px)) rotate(var(--rot)); }
.mrails .held:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.mrails .held[aria-pressed="true"] .tcard { filter: drop-shadow(0 0 0 var(--turn)) drop-shadow(0 0 6px var(--turn)); }
/* the pointer to the map over your hand: these are spent there */
.mrails .handtip {
  position: absolute; z-index: 21; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; width: max-content; max-width: min(100%, 30em); margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; pointer-events: none;
  font-size: 13.5px; line-height: 1.35; background: var(--sheet); color: var(--ink);
  border: 1.5px solid var(--turn); box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.mrails .handtip[hidden] { display: none; }
.mrails .handtip .htarrow { flex: none; font: 800 20px/1 var(--ui-font); color: var(--turn); }
/* (under the map, on a tall screen: the dock's tip line says it instead, so nothing covers the yard) */
@media (max-aspect-ratio: 6/5) { .mrails .handtip { display: none !important; } }
.mrails .heldn {
  position: absolute; left: -5px; top: -7px; z-index: 1; min-width: 24px; padding: 1px 5px; border-radius: 99px; text-align: center;
  font: 800 13px/1.15 var(--display); letter-spacing: .02em; background: var(--sheet); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 50%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.mrails .held.arrive .tcard { animation: mrarrive 380ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mrarrive { from { transform: translateY(-14px) scale(1.12); filter: drop-shadow(0 0 7px var(--turn)); } }
/* the rack's lip, in front of the cards, "Your hand" engraved in it */
.mrails .racklip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: 26px; border-radius: 6px 6px 9px 9px;
  display: flex; align-items: center; justify-content: center; gap: 2px; pointer-events: none;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 11px, rgba(255, 255, 255, .04) 11px 13px, transparent 13px 23px),
    linear-gradient(180deg, var(--rack-hi), var(--rack) 45%, var(--rack-lo));
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 6px rgba(0, 0, 0, .4);
}
.mrails .engrave, .mrails .lipcount {
  font: 800 12.5px/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--rack-engrave);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 -1px 0 rgba(0, 0, 0, .35);
}
.mrails .lipcount { letter-spacing: .12em; }
.mrails .rack.empty .rackback { opacity: .6; }

/* ── your tickets ────────────────────────────────────────────────────── */
.mrails .tickets { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.mrails .tickets[hidden] { display: none; }
.mrails .ticketlist { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 6px; padding: 3px 4px 4px 2px; }
.mrails .ticketlist .ticket { flex: none; }
.mrails .ticket.pinned { outline: 3px solid var(--turn); outline-offset: 2px; }
.mrails .ticketlist .ticket { box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
@media (hover: hover) { .mrails .ticketlist .ticket:hover { outline: 2px solid color-mix(in srgb, var(--turn) 70%, transparent); outline-offset: 2px; } }
.mrails .tnone { margin: 0; font-size: var(--t-note); }
.ticketlist.insheet { display: flex; flex-direction: column; gap: 8px; }

/* ── the dock: what to do, and your moves, always the same size ──────── */
.mrails .dock {
  flex: none; margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; container-type: inline-size;
  border-radius: 14px; background: var(--panel); border: 2px solid transparent; transition: border-color .2s, background-color .2s;
}
.mrails .dock.yours { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 9%, var(--panel)); }
.mrails .status { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrails .sayline { min-height: 2.9em; display: flex; align-items: flex-start; gap: 10px; }
.mrails .say { margin: 0; font-size: var(--t-body); line-height: 1.45; min-width: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mrails .say b { color: var(--turn); }
.mrails .controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mrails .toolrow { display: flex; gap: 14px; align-items: center; min-width: 0; min-height: var(--tool-h); }
.mrails .actions { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; margin-left: auto; justify-content: end; min-height: var(--btn-h); }
.mrails .act { min-width: 0; padding-inline: 12px; }
.mrails .act .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (the tickets button's ticket shows only where its word gives way) */
.mrails .ticketsbtn .iticket { display: none; }
@container (max-width: 420px) {
  .mrails .controls { gap: 6px; }
  .mrails .toolrow { flex: none; }
  .mrails .ticketsbtn { padding-inline: 6px; }
  .mrails .actions { margin-left: auto; display: flex; gap: 6px; }
  .mrails .actions .btn.slot { flex: 0 1 auto; padding-inline: 8px; font-size: 14px; }
  .mrails .actions .btn.slot.hide { display: none; }
}
@container (max-width: 340px) {
  .mrails .ticketsbtn .tbword { display: none; }
  .mrails .ticketsbtn .iticket { display: block; margin-right: 4px; }
}

/* ── banners: the house's, over the map ──────────────────────────────── */
.house-banner .mrbanner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.house-banner .bmark { width: 40px; height: 40px; display: block; }
.house-banner .bmark svg { width: 100%; height: 100%; display: block; }
.house-banner .splashtitle { font: var(--display-weight) 44px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--turn); text-align: center; }
.house-banner .splashsub { font: var(--t-note)/1.35 var(--ui-font); color: var(--ink); white-space: normal; max-width: 24em; text-align: center; }
.house-banner.mr-last, .house-banner.mr-over { border: 3px solid var(--turn); }

/* ── sheets: the claim chooser, a city, tickets on offer, a tunnel ───── */
.mr-claim .claimwhat { margin: 0 0 12px; }
.mr-claim .paylabel { margin: 0 0 6px; font-size: var(--t-note); }
.paychips { display: flex; flex-direction: column; gap: 8px; }
.paychip {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: var(--field-edge); color: var(--ink);
}
.paychip.on { background: var(--pick-tint); box-shadow: var(--pick-ring); font-weight: var(--pick-weight); }
.paychip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.paycards { display: flex; gap: 8px; flex: none; }
.paystack { position: relative; display: block; }
.paystack .tcard { --tw: 34px; }
.paystack b { position: absolute; right: -8px; bottom: -6px; padding: 1px 5px; border-radius: 99px; font: 800 12px/1.1 var(--display); background: var(--sheet); border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.paywords { min-width: 0; }
.paynote { margin: 14px 0 0; font-size: var(--t-note); line-height: 1.45; }
.paynote:empty { display: none; }

.mr-city .citystn { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.mr-city .citybuild { margin: 0 0 16px; }
.mr-city .citybuild > p { margin: 0 0 10px; }
.mr-city .citynote { margin: 0 0 12px; font-size: var(--t-note); }
.mr-city .cityhead { margin: 0 0 6px; }
.croutes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.croute { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 2px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.croute .crcar .swatch { margin: 0; }
.croute .crown { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-note); font-weight: 700; }
.croute .crnone { font-size: var(--t-note); }
.croute .btn.small { min-height: 36px; padding: 4px 12px; font-size: 14px; }

.house-sheet.mr-offer { --house-sheet-width: 820px; }
.offerbody { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
.offermap { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .35); }
.minimap { display: block; width: 100%; height: auto; }
.minimap .oticket .oline { fill: none; stroke: var(--c-red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 13; transition: opacity 150ms; }
.minimap .oticket .oend { fill: color-mix(in srgb, var(--turn) 70%, transparent); stroke: var(--map-ink); stroke-width: 4; }
.minimap .oticket .onum { fill: var(--map-ink); }
.minimap .oticket .onumt { font: 800 28px var(--display); fill: var(--map-paper); }
.minimap .oticket:not(.kept) { opacity: .32; }
.minimap.focusing .oticket:not(.on) { opacity: .18; }
.minimap.focusing .oticket.on { opacity: 1; }
.minimap .oticket.on .oline { stroke-width: 10; }
.offerside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.offerrule { margin: 0; }
.offerlist { display: flex; flex-direction: column; gap: 8px; }
.offerlist .ticket { grid-template-columns: 30px minmax(0, 1fr) auto; padding-left: 14px; }
.offerlist .ticket .tband, .offerlist .ticket .tcities { grid-column: 2; }
.offerlist .ticket .tpts { grid-column: 3; }
.offerlist .ticket .keepbox {
  grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  border: 2px solid var(--ticket-ink); font: 800 16px/1 var(--ui-font); color: var(--ticket);
}
.offerlist .ticket.kept .keepbox { background: var(--ticket-ink); }
.offerlist .ticket:not(.kept) { filter: saturate(.3) brightness(.78); }
.offernote { margin: 0; font-size: var(--t-note); }

.mr-tunnel .flipped { display: flex; justify-content: center; gap: 16px; margin: 14px 0 18px; }
.mr-tunnel .flip { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mr-tunnel .flip .tcard { --tw: 64px; }
.mr-tunnel .flip.hit .tcard { translate: 0 -6px; filter: drop-shadow(0 0 0 var(--turn)) drop-shadow(0 0 5px var(--turn)); }
.mr-tunnel .fliptag { font: 800 15px/1 var(--display); color: var(--soft); }
.mr-tunnel .flip.hit .fliptag { color: var(--turn); }
.mr-tunnel .tunnelsay { margin: 0; }

/* ── the result sheet ────────────────────────────────────────────────── */
.house-scrim-result .house-sheet.mr-result { --house-sheet-width: 620px; }
.house-result .mrresult { align-self: stretch; text-align: left; min-width: 0; }
.house-result .house-post:empty { display: none; }
.mremblem { width: 76px; height: 76px; margin: 0 auto; }
.mremblem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.rtablewrap { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { padding: 6px 6px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); white-space: nowrap; }
.rtable thead th { font: 700 12px/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.rtable .num { text-align: right; }
.rtable .num small { color: var(--soft); font-size: 12px; }
.rtable .rwho { display: flex; align-items: center; gap: 7px; font-weight: 700; min-width: 0; }
.rtable .rwho span { overflow: hidden; text-overflow: ellipsis; }
.rtable .place { color: var(--soft); font-weight: 700; width: 2.2em; }
.rtable .tot b { font: 800 20px/1 var(--display); }
.rtable tr.won .tot b, .rtable tr.won .place { color: var(--turn); }
.rtable .express { color: var(--turn); }
.rtable .short { display: none; }
.rexpress { margin: 12px 0 0; font-size: var(--t-note); }
.rexmark { color: var(--turn); }
.mrresult .legend { margin: 6px 0 0; font-size: var(--t-note); }
.rtickets { margin: 12px 0 10px; }
.rtickets summary { cursor: pointer; font-weight: 700; min-height: 32px; display: list-item; }
.rtixgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 16px; margin-top: 8px; }
.rtix h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font: 700 14px/1.3 var(--ui-font); }
.rtix ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rtix li { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
.rtix li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.rtix li.made .rtmark { color: var(--good); }
.rtix li.missed { color: var(--soft); }
.rtix li.missed .rtmark { color: var(--bad); }

/* ── How to play ─────────────────────────────────────────────────────── */
.mrrules ol { padding-left: 1.2em; }
.mrrules .rlegend { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; }
.mrrules .rlegend li { display: flex; align-items: center; gap: 8px; }
.mrrules .rlegend li > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.mrrules .rlegend small { color: var(--soft); font-size: 13px; }
.mrrules .rlcard .tcard { --tw: 30px; }
.mrrules .rpoints { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.mrrules .rpoints th, .mrrules .rpoints td { padding: 3px 9px; text-align: center; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.mrrules .rpoints th { text-align: left; font-weight: 700; }

/* a computer window under 860px tall: your hand's heading goes (its
   section is still named), so your tickets keep their room */
@media (max-height: 860px) and (min-aspect-ratio: 6/5) {
  .mrails .rack { --hw: min(60px, 16cqi); }
  .mrails .yardrow { --yw: min(58px, calc((100cqi - 6 * 8px - 12px) / 7)); }
}
/* a tall computer window: the cards in the yard and your hand a size up */
@media (min-height: 900px) and (min-aspect-ratio: 6/5) {
  .mrails .yardrow { --yw: min(78px, calc((100cqi - 6 * 8px - 12px) / 7)); }
  .mrails .rack { --hw: min(84px, 18cqi); }
}

/* ── tall windows and phones: everything under the map ───────────────── */
@media (max-aspect-ratio: 6/5) {
  /* (a column: the map takes whatever the rest leaves, however many rows
     come and go above it: the last round's line, a player's details) */
  .mrails .stage { display: flex; flex-direction: column; gap: 8px; }
  .mrails .stage > *, .mrails .stage .lastround, .mrails .stage .players, .mrails .stage .yard, .mrails .stage .hand, .mrails .stage .dock { flex: none; }
  .mrails .stage .mapcol { flex: 1 1 0; }
  .mrails .side, .mrails .sidemain, .mrails .playerswrap { display: contents; }
  .mrails .lastround { order: -2; }
  .mrails .players { order: -1; }
  .mrails .mapcol { order: 0; }
  .mrails .yard { order: 1; }
  .mrails .hand { order: 2; }
  .mrails .dock { order: 3; }
  .mrails .ticketsmain, .mrails .sidex { display: none; }
  .mrails .ticketsbtn:not([hidden]) { display: inline-flex; gap: 4px; }
  .mrails .players { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px; }
  .mrails .prow { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 6px; padding: 3px 6px 3px 4px; min-height: 44px; }
  .mrails .prow .pmark { grid-row: 1 / span 2; width: 22px; height: 22px; }
  .mrails .prow .pmain { display: none; }
  .mrails .prow .ptrains { grid-column: 2; gap: 3px; justify-content: flex-end; }
  .mrails .prow .ptrains b, .mrails .prow .ppts b { font-size: 15px; }
  .mrails .prow .ppts { grid-column: 2; min-width: 0; }
  .mrails .yardnote { display: none; }
}
@media (max-width: 640px) {
  .felt.mrails { height: 100dvh; gap: 0; }
  .mrails .tablemain { gap: 6px; }
  .felt.mrails .bar .tools { display: none; }
  .felt.mrails .bar .more { display: inline-flex; min-width: 44px; min-height: 44px; }
  .mrails .stage { gap: 6px; }
  .mrails .say { font-size: 14px; }
  .mrails .dock { padding: 6px 8px 8px; gap: 4px; }
  .mrails .sayline { min-height: calc(2 * 1.45 * 14px); }
  .mrails .yard { padding: 6px 6px 4px; }
  .mrails .yardrow { --yw: min(46px, calc((100cqi - 6 * 6px) / 7)); gap: 6px; }
  .mrails .faceup { gap: 6px; }
  .mrails .pilename { display: none; }
  .mrails .pilecount { font-size: 14px; }
  .mrails .rack { --hw: min(46px, 15cqi); }
  .mrails .racklip { height: 20px; }
  .mrails .engrave, .mrails .lipcount { font-size: 12px; }
  .mrzoom { right: 6px; top: 6px; }
  .house-banner .splashtitle { font-size: 32px; }
  .offerbody { grid-template-columns: minmax(0, 1fr); }
  .offermap { max-width: 240px; justify-self: center; }
  .rtable { font-size: 13px; }
  .rtable th, .rtable td { padding: 5px 3px; }
  .rtable .long { display: none; }
  .rtable .short { display: inline; }
  .rtable .place { display: none; }
  .rtable .rwho span { max-width: 6.5em; }
  .rtable thead th { letter-spacing: .02em; }
  .rtable .num small { display: none; }
}
/* the narrowest phones: the ticket deck leaves the yard (the dock's Take
   tickets takes them), so the stock and five cards are each a finger wide */
@media (max-width: 360px) {
  .mrails .tixcol { display: none; }
  .mrails .yardrow { --yw: calc((100cqi - 5 * 4px) / 6); gap: 4px; }
  .mrails .faceup { gap: 4px; }
}
/* phones on their side: the map at the left as tall as the screen, and the
   rest beside it */
@media (max-height: 520px) {
  #app { padding: 0; }
  .felt.mrails { height: 100dvh; padding: 4px 8px; border: 0; border-radius: 0; gap: 0; }
  .mrails .tablemain { gap: 3px; }
  .felt.mrails .bar .tools { display: none; }
  .felt.mrails .bar .more { display: inline-flex; min-height: 30px; }
  .mrails .bar .title { font-size: 14px; }
  .mrails .stage { gap: 8px; --mapw: min(calc(100cqh * 1000 / 1028), calc(100cqw - 300px)); }
  .mrails .sidemain { gap: 4px; }
  .mrails .ticketsmain { display: none; }
  .mrails .ticketsbtn:not([hidden]) { display: inline-flex; gap: 4px; }
  .mrails .yardnote, .mrails .pdid { display: none; }
  /* (the players a strip of chips, each a finger's 44px: mark, trains, points) */
  .mrails .players { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px; }
  .mrails .prow { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 6px; min-height: 44px; padding: 2px 6px 2px 4px; border-width: 1px; }
  .mrails .prow .pmark { grid-row: 1 / span 2; width: 22px; height: 22px; }
  .mrails .prow .pmain { display: none; }
  .mrails .prow .ptrains { grid-column: 2; gap: 3px; justify-content: flex-end; }
  .mrails .prow .ppts { grid-column: 2; min-width: 0; }
  .mrails .ptrains b, .mrails .ppts b { font-size: 14px; }
  .mrails .lastround { padding: 2px 8px; font-size: 12.5px; }
  .mrails .yard { padding: 3px 6px; }
  .mrails .yardrow { --yw: min(34px, calc((100cqi - 6 * 10px) / 7)); }
  /* (a finger's reach apart: 44px round each card's middle) */
  .mrails .faceup { gap: 10px; }
  .mrails .pilename { display: none; }
  .mrails .pilecount { font-size: 13px; }
  .mrails .facekey { display: none; }
  .mrails .rack { --hw: min(30px, 12cqi); height: calc(var(--ch) + 14px); }
  .mrails .racklip { height: 20px; }
  .mrails .engrave, .mrails .lipcount { font-size: 12px; letter-spacing: .14em; }
  .mrails .heldn { font-size: 11px; min-width: 18px; padding: 0 3px; }
  .mrails .dock { padding: 3px 8px 4px; gap: 2px; }
  .mrails .sayline { min-height: calc(2 * 1.4 * 13px); }
  .mrails .say { font-size: 13px; line-height: 1.4; }
  .mrails .act { min-height: 34px; font-size: 13px; padding-block: 2px; }
  .mrails .actions { min-height: 34px; }
  .mrails .dock kbd { display: none; }
}
@media (pointer: coarse) {
  .mrails .act, .mrails .toolrow { min-height: 44px; }
  .rtickets summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .rtickets summary::before { content: '▸'; }
  .rtickets[open] summary::before { content: '▾'; }
  .felt.mrails .bar .btn { min-height: 44px; }
  .mrzoom .zoom-btn { min-width: 44px; min-height: 44px; }
  .croute .btn.small { min-height: 44px; }
  .mrails .faceslot, .mrails .pile { position: relative; }
  .mrails :is(.faceslot, .pile)::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .mrails .act, .mrails .toolrow, .mrails .actions { min-height: 36px; }
  .felt.mrails .bar .btn { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapsvg .glow.lit { animation: none; }
  .mapsvg .spot, .mapsvg .spot .spotline, .tunnelshow { animation: none; }
  .mapsvg .spot .spotpulse { display: none; }
  .mapsvg .claim .car.laying, .mapsvg .claim.fresh .bed, .mapsvg .claim.fresh .bedcase, .mapsvg .stninner.dropping, .mapsvg .claim.flash, .mapsvg .stn.flash { animation: none; }
  .mapview.easing { transition: none; }
  .mapsvg .route.picked { transition: none; }
  .mrails .faceslot.flipin .tcard, .mrails .held.arrive .tcard, .mrails .prow.landed, .mrails .prow.handoff { animation: none; }
  .mrails .held { transition: none; }
  .mrails .dock, .mrails .prow, .mrails .faceslot .tcard, .mrails .pilecards, .ticket { transition: none; }
}