/* The map's turn order. Keep styles scoped to this strip. Sizes are map units (the strip is drawn at the fitted
   map's scale, about half size): the numbers under the portraits are large so they read at that scale. */
.turn-strip {
  --turn-row: color-mix(in srgb,var(--panel) 90%,var(--map));
  --turn-meter: color-mix(in srgb,var(--panel2) 76%,var(--panel));
  --turn-line: color-mix(in srgb,var(--line) 80%,var(--muted));
  --turn-active: var(--accent-text);
}
.turn-strip .stripbg {
  fill: color-mix(in srgb,var(--map) 51%,var(--panel2));
  stroke: var(--turn-line);
  stroke-width: 1;
  filter: none;
}
.turn-strip .strip-kicker { font-size: 12px; font-weight: 750; letter-spacing: .13em; fill: var(--ink); }
.turn-strip .strip-register { fill: none; stroke: var(--turn-line); stroke-width: .75; }
.turn-strip .b-pl .plbox { fill: var(--turn-row); stroke: var(--turn-line); stroke-width: 1; }
.turn-strip .b-pl:hover .plbox { fill: color-mix(in srgb,var(--turn-row) 92%,var(--pc)); }
.turn-strip .b-pl.now .plbox {
  fill: color-mix(in srgb,var(--turn-row) 88%,var(--accent));
  stroke: var(--turn-active);
  stroke-width: 2.1;
}
.turn-strip .plseat-mark { fill: var(--pc); }
.turn-strip .b-pl .plrim { stroke-width: 1.7; }
.turn-strip .plrank { fill: var(--ink); stroke: var(--turn-row); stroke-width: 1.2; }
.turn-strip .b-pl .plnum-t { fill: var(--panel); font-weight: 850; }
.turn-strip .b-pl.now .plrank { fill: var(--turn-active); }
.turn-strip .b-pl.now .plnum-t { fill: var(--panel); }
.turn-strip .b-pl .plname { font-weight: 800; font-size: 17px; }
.turn-strip .plturn-bed { fill: color-mix(in srgb,var(--accent) 19%,var(--turn-meter)); }
.turn-strip .plturn-dot { fill: var(--turn-active); }
.turn-strip .b-pl .plturn { fill: var(--turn-active); font-size: 12px; }
.turn-strip .plcap-bed, .turn-strip .plstats-bed { fill: var(--turn-meter); }
.turn-strip .plstat-rule { fill: none; stroke: var(--turn-line); stroke-width: .65; }
.turn-strip .b-pl .plcap { font-size: 10.5px; letter-spacing: .08em; font-weight: 800; }
/* the tray of numbers under the portrait: each icon over its number, centred in its quarter */
.turn-strip .b-pl .pstat text { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.turn-strip .b-pl .pspent text { font-weight: 600; fill: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.turn-strip .b-pl .pstat .bi { opacity: .9; }
.turn-strip .b-pl .pvp .bi { opacity: 1; }
.turn-strip .b-pl .plnum-t { font-size: 15.5px; }
.turn-strip .pl-rail-rivets { display: none; }
.turn-strip :is(.plseat-mark,.plstats-bed,.plstat-rule,.plcap-bed,.plturn-bed,.plturn-dot,.pl-rail-rivets) { pointer-events: none; }

:root[data-ui-era="cart"] .turn-strip .b-pl .plname { font-family: var(--f-title,Georgia,serif); }
:root[data-ui-era="cart"] .turn-strip .b-pl .plrank { rx: 11px; }
:root[data-ui-era="rail"] .turn-strip .pl-rail-rivets {
  display: inline;
  stroke: var(--turn-line);
  stroke-width: 2.4;
  stroke-linecap: round;
}
:root[data-ui-era="rail"] .turn-strip .strip-register { stroke-width: 1.25; }
:root[data-ui-era="rail"] .turn-strip .b-pl .plname { letter-spacing: .02em; }
:root[data-ui-era="rail"] .turn-strip .b-pl .plrank { rx: 2px; }

/* the turn timer (turn-order-panel.js clockPill): a pill under each portrait — the player to move: the time left for
   the turn, then the reserve in red; everyone else: their reserve, small; a soft tick in the last ten seconds */
.turn-strip .pclk-bed { fill: var(--turn-meter); stroke: var(--turn-line); stroke-width: .8; }
.turn-strip .pclk-t { font-family: var(--f-sign); font-size: 11px; font-weight: 600; letter-spacing: .04em; fill: var(--muted); font-variant-numeric: tabular-nums; }
.turn-strip .pclk .ck-x { font-size: 9.6px; font-weight: 600; fill: var(--muted); }
.turn-strip .pclk.run .pclk-bed { fill: var(--panel); stroke: var(--turn-active); stroke-width: 1.5; }
.turn-strip .pclk.run .pclk-t { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.turn-strip .pclk.low .pclk-t, .turn-strip .pclk.empty .pclk-t { fill: var(--bad); }
.turn-strip .pclk.reserve .pclk-bed { fill: var(--bad); stroke: var(--bad); }
.turn-strip .pclk.reserve .pclk-t, .turn-strip .pclk.reserve .ck-x { fill: #fff; }
:root[data-theme="dark"] .turn-strip .pclk.reserve .pclk-bed { fill: #b03a2e; stroke: #b03a2e; }
.turn-strip .pclk.paused { opacity: .65; }
.turn-strip .pclk.tock { animation: pclkTock .7s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes pclkTock { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .turn-strip .pclk.tock { animation: none; } }