/* Turn ladder: one slab layout; the skin is picked by [data-theme] on .ladder (only "st" now -
   three rounds of other skins were rejected). Layout vars (--gl glyph size, --hd headline,
   --et eta) are set per level; the skin only touches colour, type and surface. */

.ladder { display: flex; flex-direction: column; gap: 10px; }
.ladder .card {
  --gl: 60px; --hd: 22px; --et: 30px; --sb: 15px;
  position: relative; display: grid; grid-template-columns: var(--gl) minmax(0, 1fr) auto;
  align-items: center; column-gap: 14px; padding: 14px 16px; border-radius: 18px; overflow: visible;
}
/* Current turn: arrow and countdown side by side on top, the words get the full width
   underneath - squeezed into a middle column they wrapped to three lines. */
.ladder .card.cur { --gl: 96px; --hd: 34px; --et: 64px; --sb: 18px; padding: 18px 20px 30px;
  grid-template-columns: var(--gl) 1fr; grid-template-areas: "glyph when" "words words"; row-gap: 12px; }
.ladder .card.cur .glyph { grid-area: glyph; }
.ladder .card.cur .when { grid-area: when; text-align: left; padding-left: 6px; }
.ladder .card.cur .words { grid-area: words; }
.ladder .card.cur .dist { font-size: 18px; }
.ladder .card.later { --gl: 42px; --hd: 18px; --et: 22px; --sb: 14px; padding: 10px 16px; }
.ladder .glyph { width: var(--gl); height: var(--gl); }
.ladder .arrow { width: 100%; height: 100%; display: block; overflow: visible; }
.ladder .shaft { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.ladder .ghost { fill: none; stroke: var(--ghost); stroke-width: 9; stroke-linecap: round; }
.ladder .fill { fill: currentColor; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.ladder .hole { fill: var(--hole, #000); }
.ladder .words { min-width: 0; }
.ladder .head { font-size: var(--hd); font-weight: 800; line-height: 1.05; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ladder .exitno { font-size: .5em; font-weight: 900; padding: .28em .55em; border-radius: .4em; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ladder .sub { font-size: var(--sb); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder .when { text-align: right; }
.ladder .eta { font-size: var(--et); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ladder .eta small { font-size: .5em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.ladder .dist { font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ladder .bar { position: absolute; left: 18px; right: 18px; bottom: 10px; height: 5px; border-radius: 3px; overflow: hidden; background: var(--track); }
.ladder .bar i { display: block; height: 100%; transform-origin: left; background: var(--barc); transition: transform .9s linear; }
.ladder .tag { position: absolute; top: -10px; left: 16px; font-size: 11px; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 6px; z-index: 1; }
.ladder .card.combo { margin-top: 6px; }
.ladder .card.now { animation: nowpulse 1s ease-in-out infinite; }
@keyframes nowpulse { 50% { filter: brightness(1.25); } }
.ladder .empty { padding: 24px; text-align: center; opacity: .6; }

/* ---------- ST: sproultech.com - black, JetBrains Mono, square corners, 1px rules, white is the only
   accent. Emphasis = inversion (the site's hover), so NOW flips the current card to solid white. ---------- */
[data-theme="st"] { --ghost: #2b2b2b; font-family: "JetBrains Mono", ui-monospace, monospace; gap: 0; }
[data-theme="st"] .card { background: #000; color: #fff; border-radius: 0; border: 1px solid #2b2b2b; --hole: #000; }
[data-theme="st"] .card + .card { margin-top: -1px; }
[data-theme="st"] .shaft { stroke-linecap: square; stroke-linejoin: miter; }
[data-theme="st"] .fill { stroke-linejoin: miter; }
[data-theme="st"] .head { font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
[data-theme="st"] .sub { color: #bdbdbd; letter-spacing: .02em; }
[data-theme="st"] .dist, [data-theme="st"] .eta small { color: #8a8a8a; }
[data-theme="st"] .eta { font-weight: 500; letter-spacing: -.06em; }
[data-theme="st"] .card.cur { border-color: #fff; z-index: 1; --track: #161616; --barc: #fff; }
[data-theme="st"] .card:not(.cur) .arrow { color: #d6d6d6; }
[data-theme="st"] .bar { border-radius: 0; height: 3px; }
[data-theme="st"] .bar i { transition: none; }
[data-theme="st"] .exitno { background: #fff; color: #000; border-radius: 0; letter-spacing: .12em; }
[data-theme="st"] .card.combo { margin-top: -1px; border: 1px dashed #fff; z-index: 1; }
[data-theme="st"] .tag { position: static; grid-column: 1 / -1; justify-self: start; background: #fff; color: #000;
  border-radius: 0; padding: 2px 7px; font-size: 10px; letter-spacing: .2em; margin-bottom: 4px; }
[data-theme="st"] .card.cur.now { animation: none; background: #fff; color: #000; --hole: #fff; --ghost: #d6d6d6;
  --track: #d6d6d6; --barc: #000; }
[data-theme="st"] .card.cur.now :is(.sub, .dist, .eta small) { color: #444; }
[data-theme="st"] .card.cur.now .exitno { background: #000; color: #fff; }