/* The schedule and vote rail (public/rail.js). Loaded after viewer.css and scoped to the rail, so the
   host panel's buttons and notes keep their own look. Whatever moves here moves by transform or
   opacity, so the video underneath keeps its frames; prefers-reduced-motion keeps the same information
   and drops the motion. */

.rail {
  --gold: #ffd166;
  --silver: #c9d3e6;
  --bronze: #e8a87c;
  --ink-on-gold: #1c1400;
  --sheet: rgba(12, 10, 22, 0.96);
  --panel: #161228;
  /* A phone's sheet stops short of the top bar, whatever the notch. */
  max-height: calc(100% - var(--above-bar) - var(--safe-top) - 52px);
  contain: layout style;
}

.rail .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---------- The one-line header ---------- */

.rail-toggle {
  position: relative;
  gap: 8px;
  min-height: 52px;
  padding: 11px 12px 11px 14px;
  color: var(--ink);
  text-align: left;
  touch-action: manipulation;
}

.rail-toggle:focus-visible {
  border-radius: 20px;
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* A handle says "this pulls up". */
.rail-grip {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 34px;
  height: 4px;
  margin-left: -17px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.rail-title {
  flex: 1 1 auto;
  gap: 8px;
}

.rail-title strong {
  min-width: 0;
  font-size: 14.5px;
}

.rail-clock {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rail-clock:empty {
  display: none;
}

.rail .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rail .chip.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Mint belongs to "your pick" alone; an open stage is violet. */
.rail .chip.open {
  color: #fff;
  background: linear-gradient(120deg, #7b4dff, var(--violet));
}

.rail .chip.soon {
  color: #2a1a00;
  background: var(--next);
}

/* Collapsed sheet: the caret points up, the way it opens. */
.rail .caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 5px 3px 0 1px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(-135deg);
  transition: transform 0.25s ease;
}

.player[data-rail="open"] .rail .caret {
  margin-top: -4px;
  transform: rotate(45deg);
}

/* ---------- Your stake ---------- */

/* It doesn't shrink: the name beside it gives way first, and the cap keeps that name in view. */
.stake {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 58%;
  height: 30px;
  padding: 0 11px 0 3px;
  border: 1px solid rgba(162, 89, 255, 0.6);
  border-radius: 999px;
  background: rgba(162, 89, 255, 0.18);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

.stake .ring {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.stake-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stake-rank {
  color: var(--pick);
  font-variant-numeric: tabular-nums;
}

.stake[data-state="pick"] {
  border-color: rgba(62, 230, 168, 0.65);
  background: rgba(62, 230, 168, 0.12);
}

.stake[data-state="pick"] .stake-label {
  color: var(--dim);
  font-weight: 650;
}

.stake[data-state="won"] {
  border-color: rgba(255, 209, 102, 0.85);
  background: rgba(255, 209, 102, 0.16);
}

.stake[data-state="won"] .stake-rank {
  color: var(--gold);
}

/* No pick yet: a nudge in the brand gradient, louder in a round's last seconds. */
.stake[data-state="none"],
.stake[data-state="again"],
.stake[data-state="gone"] {
  border-color: transparent;
  background:
    linear-gradient(rgba(30, 20, 52, 0.94), rgba(30, 20, 52, 0.94)) padding-box,
    var(--grad) border-box;
}

.stake.is-urgent {
  border-color: var(--live);
  background: rgba(255, 45, 85, 0.24);
  animation: rail-throb 1s ease-in-out infinite;
}

@keyframes rail-throb {
  50% {
    transform: scale(1.05);
  }
}

/* The side panel and a phone's sheet are both too narrow for "Your pick:"; the colour and the ring
   already say it, and screen readers still hear it. */
@media (max-width: 483px), (min-width: 900px) and (min-height: 540px) {
  .stake[data-state="pick"] .stake-label,
  .stake[data-state="won"] .stake-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 399px) {
  .rail-toggle {
    gap: 6px;
    padding-right: 10px;
    padding-left: 12px;
  }

  .stake {
    padding-right: 9px;
  }
}

@media (max-width: 339px) {
  .rail-clock {
    display: none;
  }
}

/* ---------- The countdown ring ---------- */

.rail .ring {
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
}

.rail .ring circle {
  fill: none;
  stroke-width: 3.4;
}

.rail .ring-track {
  stroke: rgba(255, 255, 255, 0.14);
}

/* The circumference is 100 user units, so the offset reads as "percent gone". */
.rail .ring-fill {
  stroke: var(--violet);
  stroke-linecap: round;
  stroke-dasharray: 100px 100px;
  stroke-dashoffset: 100px;
  transition: stroke-dashoffset 0.55s linear, stroke 0.3s ease, opacity 0.3s ease;
}

.rail[data-ring="idle"] .ring-fill,
.rail[data-ring="empty"] .ring-fill {
  opacity: 0;
}

.rail[data-ring="won"] .ring-fill {
  stroke: var(--gold);
}

.stake[data-state="pick"] .ring-fill {
  stroke: var(--pick);
}

.rail.is-closing .ring-fill {
  stroke: var(--live);
}

.rail.is-closing .ring {
  animation: rail-tick 1s ease-in-out infinite;
}

@keyframes rail-tick {
  50% {
    transform: rotate(-90deg) scale(1.14);
  }
}

/* ---------- Celebration ---------- */

.burst {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.burst i {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--c, var(--gold));
  opacity: 0;
  animation: rail-confetti 1.25s cubic-bezier(0.1, 0.75, 0.3, 1) forwards;
}

.burst i:nth-child(3n) {
  border-radius: 50%;
}

.burst i:nth-child(even) {
  animation-delay: 70ms;
}

.burst i:nth-child(1) { --x: -46px; --y: -14px; --r: -160deg; --c: var(--gold); }
.burst i:nth-child(2) { --x: -30px; --y: -22px; --r: 120deg; --c: var(--pick); }
.burst i:nth-child(3) { --x: -12px; --y: -24px; --r: -90deg; --c: #ff4d8d; }
.burst i:nth-child(4) { --x: 8px; --y: -23px; --r: 200deg; --c: var(--violet); }
.burst i:nth-child(5) { --x: 28px; --y: -20px; --r: -140deg; --c: #4dd6ff; }
.burst i:nth-child(6) { --x: 48px; --y: -12px; --r: 150deg; --c: var(--gold); }
.burst i:nth-child(7) { --x: 60px; --y: 4px; --r: -110deg; --c: var(--pick); }
.burst i:nth-child(8) { --x: 40px; --y: 17px; --r: 90deg; --c: #ff4d8d; }
.burst i:nth-child(9) { --x: 16px; --y: 21px; --r: -200deg; --c: var(--violet); }
.burst i:nth-child(10) { --x: -8px; --y: 20px; --r: 130deg; --c: #4dd6ff; }
.burst i:nth-child(11) { --x: -30px; --y: 16px; --r: -120deg; --c: var(--gold); }
.burst i:nth-child(12) { --x: -52px; --y: 6px; --r: 170deg; --c: var(--pick); }

.burst[data-tone="violet"] i:nth-child(odd) {
  --c: var(--violet);
}

@keyframes rail-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.5);
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}

.rail.is-cheering .stake {
  animation: rail-cheer 0.9s ease-out;
}

@keyframes rail-cheer {
  30% {
    transform: scale(1.1);
  }
}

/* ---------- The schedule ---------- */

.player[data-rail="open"] .rail-body {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.rail-body > * {
  flex-shrink: 0;
}

.sched {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  list-style: none;
}

.sched-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 36px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  min-height: 46px;
  padding: 4px 8px 4px 5px;
  overflow: hidden;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.sched-tag {
  width: 44px;
  padding: 3px 0;
  border-radius: 6px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.sched-row.now[data-state="live"] .sched-tag {
  color: #fff;
  background: var(--grad-warm);
}

.sched-row.now[data-state="race"] .sched-tag {
  color: #fff;
  background: linear-gradient(120deg, #7b4dff, var(--violet));
}

.sched-row.next .sched-tag {
  color: #2a1a00;
  background: var(--next);
}

.sched-row.after .sched-tag {
  color: #fff;
  background: linear-gradient(120deg, #7b4dff, var(--violet));
}

.faces {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
}

.rail .face {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--hue, 265) 88% 62%), hsl(calc(var(--hue, 265) + 50) 88% 55%));
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Nobody there yet: an empty seat. */
.rail .face:empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.sched-row.next[data-state="open"] .face:empty::before {
  content: "+";
  color: var(--next);
  font-size: 17px;
  font-weight: 700;
}

.rail .face.mini {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--panel);
  font-size: 9.5px;
}

.sched-row.now[data-state="live"] .faces > .face:first-child {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--live);
}

/* On air: a slow ping around the host. */
.sched-row.now[data-state="live"] .faces::after,
.sched-row.now[data-state="race"] .faces::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--live);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: rail-ping 2.2s ease-out infinite;
}

.sched-row.now[data-state="race"] .faces::after {
  border-color: var(--violet);
}

@keyframes rail-ping {
  0% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.face-ring .face {
  width: 26px;
  height: 26px;
  font-size: 11.5px;
}

.face-ring .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
}

.sched-text {
  display: grid;
  min-width: 0;
  line-height: 1.22;
}

.sched-text strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-text small {
  overflow: hidden;
  color: var(--dim);
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-text small:empty,
.sched-aside b:empty,
.sched-aside small:empty {
  display: none;
}

.sched-aside {
  display: grid;
  justify-items: end;
  min-width: 40px;
  line-height: 1.15;
  text-align: right;
}

.sched-aside b {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sched-aside small {
  color: var(--dim);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sched-row.next[data-state="ready"] .sched-aside b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pick);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sched-row.next[data-state="ready"] .sched-aside b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pick);
  box-shadow: 0 0 8px var(--pick);
}

.sched-row.next[data-state="staying"] .sched-aside b,
.sched-row.next[data-state="offered"] .sched-aside b,
.sched-row.next[data-state="open"] .sched-aside b {
  color: var(--dim);
  font-size: 12px;
}

/* A turn of your own. */
.sched-row.is-me {
  background: linear-gradient(90deg, rgba(255, 181, 71, 0.2), transparent 80%);
}

.sched-row.after[data-state="closing"] .sched-aside b,
.sched-row.after[data-state="closing"] .sched-aside small {
  color: var(--live);
}

.sched-row.after[data-state="won"],
.sched-row.after[data-state="confirming"] {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.2), rgba(255, 209, 102, 0.02) 85%);
}

.sched-row.after[data-state="won"] strong,
.sched-row.after[data-state="confirming"] strong,
.sched-row.after[data-state="won"] .sched-aside b,
.sched-row.after[data-state="confirming"] .sched-aside b {
  color: var(--gold);
}

.sched-row.after.is-mine {
  box-shadow: inset 0 0 0 1px rgba(62, 230, 168, 0.55);
}

.sched-row.after.is-mine .sched-text small {
  color: var(--pick);
}

/* The winner's row catches the light once. */
.sched-row.after::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

.rail.is-cheering .sched-row.after::after {
  animation: rail-shine 1.3s ease-out;
}

@keyframes rail-shine {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(100%);
  }
}

.rail .take {
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  color: #2a1a00;
  background: var(--next);
  box-shadow: 0 4px 14px rgba(255, 181, 71, 0.35);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  white-space: nowrap;
  touch-action: manipulation;
}

.rail .take:disabled {
  opacity: 0.6;
}

.rail .take:focus-visible,
.rail .leave:focus-visible {
  border-radius: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- The boards ---------- */

.rail .board {
  flex: 1 0 auto;
}

.rail .tab {
  min-height: 36px;
  touch-action: manipulation;
}

.rail .search {
  display: block;
}

.rail .search input {
  margin-top: 10px;
}

/* The sheet scrolls as one; a second scroller inside it fights the finger on a phone. */
.rail .list {
  max-height: none;
  margin: 10px 0 0;
  overflow: visible;
}

.rail .row {
  position: relative;
}

.rail .row + .row {
  margin-top: 6px;
}

.rail .vote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 9px;
  min-height: 52px;
  padding: 7px 8px 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.045);
  touch-action: manipulation;
}

.rail .vote:focus-visible {
  outline-offset: -2px;
}

/* The race: each bar is that contender's share of the leader's votes. */
.rail .vote .bar {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(162, 89, 255, 0.32), rgba(77, 214, 255, 0.14));
  transform: scaleX(var(--share, 0));
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rail .vote::before,
.rail .vote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* Climbed a place: a brief glow. */
.rail .vote::before {
  background: linear-gradient(90deg, rgba(62, 230, 168, 0.4), transparent 75%);
}

.rail .row.is-rising .vote::before {
  animation: rail-flash 1.4s ease-out;
}

@keyframes rail-flash {
  0%,
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.rail .rank {
  display: grid;
  flex: 0 0 24px;
  align-content: center;
  justify-items: center;
  gap: 1px;
  width: 24px;
  line-height: 1;
  text-align: center;
}

.rail .rank-n {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rail .trend {
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rail .trend:empty {
  display: none;
}

.rail .trend[data-dir="up"] {
  color: var(--pick);
}

.rail .trend[data-dir="down"] {
  color: #ff8aa3;
}

.rail .trend[data-dir="new"] {
  color: var(--next);
}

.rail .list:not(.ranked) .rank {
  display: none;
}

/* The podium. */
.rail .podium-1 .rank-n,
.rail .podium-2 .rank-n,
.rail .podium-3 .rank-n {
  border-radius: 50%;
  color: var(--ink-on-gold);
  font-size: 11.5px;
}

.rail .podium-1 .rank-n {
  background: linear-gradient(135deg, #ffe7a8, var(--gold) 55%, #e0a93a);
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.55);
}

.rail .podium-2 .rank-n {
  background: linear-gradient(135deg, #f3f6fc, var(--silver) 60%, #98a4bb);
}

.rail .podium-3 .rank-n {
  background: linear-gradient(135deg, #f8d0b2, var(--bronze) 60%, #b87450);
}

/* The leader wears the crown. */
.rail .podium-1 .rank::before {
  content: "";
  width: 16px;
  height: 9px;
  margin-bottom: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath fill='%23ffd166' d='M0 1.5l4 3.5L8 0l4 5 4-3.5L14.6 9H1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rail .podium-1 .vote {
  border-color: rgba(255, 209, 102, 0.42);
  background: rgba(255, 209, 102, 0.06);
}

.rail .podium-1 .bar {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.36), rgba(255, 77, 141, 0.16));
}

.rail .podium-1 .name {
  font-weight: 800;
}

.rail .avatar {
  width: 32px;
  height: 32px;
  font-size: 13.5px;
  line-height: 1;
}

.rail .row .who {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rail .row .name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail .tag {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 5px;
  color: #fff;
  background: var(--grad);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.rail .score {
  position: relative;
  flex: 0 0 auto;
  min-width: 28px;
  text-align: right;
}

.rail .row .count {
  min-width: 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 850;
}

.rail .row.is-mine .count {
  color: var(--pick);
}

/* Momentum: votes gained in the last minute. */
.rail .gain {
  position: absolute;
  right: -3px;
  bottom: 100%;
  margin-bottom: 1px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--pick);
  background: rgba(62, 230, 168, 0.16);
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.3;
  white-space: nowrap;
}

.rail .is-hot .gain {
  color: #fff;
  background: linear-gradient(120deg, #ff4d8d, var(--next));
  box-shadow: 0 0 10px rgba(255, 77, 141, 0.45);
}

.rail .vote .pick {
  min-width: 58px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-align: center;
  white-space: nowrap;
}

@media (hover: hover) {
  .rail .vote:hover .pick {
    border-color: transparent;
    background: var(--grad);
  }
}

.rail .vote:focus-visible .pick {
  border-color: transparent;
  background: var(--grad);
}

/* Your pick glows, and keeps breathing while it stands. */
.rail .row.is-mine .vote {
  border-color: rgba(62, 230, 168, 0.75);
  box-shadow: 0 0 0 1px rgba(62, 230, 168, 0.2), 0 6px 20px rgba(62, 230, 168, 0.16);
}

.rail .row.is-mine .bar {
  background: linear-gradient(90deg, rgba(62, 230, 168, 0.36), rgba(62, 230, 168, 0.1));
}

.rail .row.is-mine .vote::after {
  background: radial-gradient(120% 160% at 0% 50%, rgba(62, 230, 168, 0.28), transparent 65%);
  opacity: 1;
  animation: rail-breathe 3s ease-in-out infinite;
}

@keyframes rail-breathe {
  50% {
    opacity: 0.35;
  }
}

.rail .row.is-mine .pick {
  border-color: transparent;
  color: #062319;
  background: var(--pick);
  box-shadow: 0 0 14px rgba(62, 230, 168, 0.5);
}

/* Already has a turn: a vote for them would be used up at once. */
.rail .row.has-turn .vote {
  cursor: default;
}

.rail .row.has-turn .pick {
  border-color: transparent;
  color: var(--next);
  background: rgba(255, 181, 71, 0.12);
  box-shadow: none;
}

@media (max-width: 399px) {
  .rail .vote {
    gap: 7px;
  }

  .rail .vote .pick {
    padding: 6px 7px;
    letter-spacing: 0.04em;
  }
}

.rail .note {
  margin: 10px 2px 2px;
}

.rail .note:empty {
  display: none;
}

.rail .shuffle {
  display: block;
  margin: 10px auto 0;
}

/* ---------- Joining ---------- */

/* Stays in reach at the foot of the sheet while the board scrolls under it. */
.rail .cta {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  margin: 12px -14px 0;
  padding: 14px;
  background: linear-gradient(to bottom, rgba(12, 10, 22, 0), var(--sheet) 16px);
}

.rail .pitch,
.rail .standing {
  display: grid;
  gap: 1px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
}

.rail .pitch {
  color: var(--dim);
}

.rail .pitch strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.rail .standing {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--grad) border-box;
}

.rail .standing strong {
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.rail .standing span {
  color: var(--dim);
}

.rail .cta-row {
  display: flex;
  gap: 8px;
}

.rail .cta-row .primary {
  position: relative;
  min-height: 46px;
  overflow: hidden;
  touch-action: manipulation;
}

/* An open invitation: a sheen passes over the button now and then. */
.rail #contend::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  pointer-events: none;
  transform: translateX(-120%);
  animation: rail-sheen 5s ease-in-out 1.5s infinite;
}

@keyframes rail-sheen {
  0%,
  70% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.rail .join {
  flex-wrap: wrap;
  margin-top: 0;
}

.rail .join .primary {
  flex: 0 0 auto;
  min-width: 76px;
}

.rail .join-note {
  flex-basis: 100%;
  color: var(--dim);
  font-size: 11.5px;
}

.rail .leave {
  justify-self: center;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}

.rail .leave:hover,
.rail .leave:focus-visible {
  color: var(--ink);
}

.rail .leave.is-armed {
  color: #ff9fb3;
  font-weight: 750;
  text-decoration: none;
}

/* A short sheet keeps the board, not the pitch; a phone on its side (or behind a keyboard) lets the
   footer scroll away too. */
@media (max-height: 600px) {
  .rail .pitch {
    display: none;
  }

  .rail .cta {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-height: 440px) {
  .rail .cta {
    position: static;
  }
}

/* ---------- Wide screens: the side panel ---------- */

@media (min-width: 900px) and (min-height: 540px) {
  .rail {
    max-height: none;
  }

  .rail-grip {
    display: none;
  }

  .rail-toggle {
    min-height: 54px;
  }

  /* The panel opens downwards. */
  .rail .caret {
    margin-top: -4px;
    transform: rotate(45deg);
  }

  .player[data-rail="open"] .rail .caret {
    margin-top: 5px;
    transform: rotate(-135deg);
  }

  .sched-row {
    min-height: 50px;
  }

  .rail .cta {
    background: linear-gradient(to bottom, rgba(22, 18, 40, 0), rgba(22, 18, 40, 0.98) 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail .burst,
  .rail #contend::after,
  .sched-row.now .faces::after,
  .sched-row.after::after {
    display: none;
  }

  .rail.is-cheering .stake {
    box-shadow: 0 0 0 2px var(--gold);
  }

  .rail .ring-fill,
  .rail .vote .bar {
    transition: none;
  }
}