/* ------------------------------------------------------------------
   Rounds, the projection, the bank and the dialogs.
   Loaded after systems.css, before map.css.
   ------------------------------------------------------------------ */

/* The good/bad pair the campaign log and rating chips already use, named
   here so the round screens do not each pick their own green and red. */
:root {
  --warm-good: var(--warn-good);
  --warm-bad: var(--warn-bad);
}

/* ------------------------------------------------------------- the clock */

.round-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--wash-gold), transparent 60%),
    var(--ink-2);
}

.round-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.round-label {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.round-label strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--cream);
}
.round-final {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wash-bad);
  color: var(--warm-bad);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.round-clock {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  line-height: 1;
}
/* The last ten seconds are worth noticing without being shouted at. */
.round-clock.is-low { color: var(--wheat); }
.round-clock.is-out { color: var(--muted-2); }

.round-track {
  height: 5px;
  border-radius: 999px;
  background: var(--wash-ink-2);
  overflow: hidden;
}
.round-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wheat);
  transition: width 0.25s linear;
}
.round-clock.is-low + .round-track .round-fill { background: var(--wheat-deep); }

.round-steps {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.round-pip {
  flex: 1 1 0;
  min-width: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--wash-ink-2);
}
.round-pip.is-done { background: var(--gold); }
.round-pip.is-now { background: var(--cream); }

/* -------------------------------------------------------- the projection */

.projection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.projection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.projection-need {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wheat);
}
.projection-need.is-clear { color: var(--warm-good); }

.projection-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.projection-row {
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  align-items: center;
  gap: 10px;
}
.projection-party {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.projection-row.is-you .projection-party { color: var(--cream); }
.projection-track {
  height: 12px;
  border-radius: 4px;
  background: var(--wash-ink);
  overflow: hidden;
}
.projection-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--party);
  transition: width 0.4s ease;
}
.projection-seats {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  color: var(--muted);
}
.projection-row.is-you .projection-seats { color: var(--cream); }

.projection-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted-2);
  line-height: 1.5;
}

/* --------------------------------------------------------------- money */

.stat-debt .stat-value { color: var(--warm-bad); }

.breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.breakdown-rows { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}
.breakdown-row dt { color: var(--muted); }
.breakdown-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.breakdown-row dd.is-in { color: var(--warm-good); }
.breakdown-row dd.is-out { color: var(--muted-2); }

.breakdown-totals {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.breakdown-total { display: flex; flex-direction: column; gap: 3px; }
.breakdown-total strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.breakdown-total.is-debt strong { color: var(--warm-bad); }

/* ---------------------------------------------------------------- bank */

.bank {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.bank-figures { display: flex; gap: 22px; flex-wrap: wrap; }
.bank-figure { display: flex; flex-direction: column; gap: 3px; }
.bank-figure-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.bank-figure.is-debt .bank-figure-value { color: var(--warm-bad); }

.loan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.loan-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
  font-size: 0.84rem;
}
.loan-item.is-due { border-color: var(--warn-bad); }
.loan-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.loan-due { color: var(--muted-2); }
.loan-item.is-due .loan-due { color: var(--warm-bad); }

.bank-borrow { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.bank-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.bank-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.bank-chip:hover { border-color: var(--wheat-deep); color: var(--cream); }
.bank-chip.is-active {
  border-color: var(--wheat);
  background: var(--wash-gold-2);
  color: var(--cream);
}
.bank-chip:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.bank-terms { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
.bank-terms.is-refused { color: var(--warm-bad); }
.bank-blocked {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warn-bad);
  background: var(--wash-bad);
  color: var(--warm-bad);
  font-size: 0.86rem;
}

/* ------------------------------------------------------------- dialogs */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 32, 54, 0.42);
  backdrop-filter: blur(2px);
}

.dialog {
  width: min(460px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: 0 24px 60px rgba(18, 32, 54, 0.14);
}
.dialog-danger { border-color: var(--warn-bad); }

.dialog-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-wrap: balance;
}
.dialog-body { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.92rem; }
.dialog-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.dialog-danger .dialog-note { color: var(--wheat); }

.dialog-lines { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dialog-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.9rem;
}
.dialog-line dt { color: var(--muted); }
.dialog-line dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.dialog-line.is-strong {
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
}
.dialog-line.is-strong dd { font-size: 1.05rem; color: var(--wheat); }

.dialog-buttons {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ------------------------------------------------------ round summary */

/* In the page, not over it: the next round is already running by the time
   this appears, and a modal would spend a player's seconds for them. */
.summary-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 18px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--wheat-deep);
  background:
    linear-gradient(180deg, var(--wash-gold), transparent 55%),
    var(--ink-2);
}
.summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.summary-title {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.summary-close {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.summary-close:hover { color: var(--cream); border-color: var(--wheat-deep); }
.summary-close:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.sum-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line-soft);
}
.sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  background: var(--ink-3);
  font-size: 0.9rem;
}
.sum-label { color: var(--muted); }
.sum-value { display: inline-flex; align-items: baseline; gap: 9px; }
.sum-value strong { font-variant-numeric: tabular-nums; }
.sum-value strong.is-debt { color: var(--warm-bad); }

.sum-delta {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.sum-delta.is-good { color: var(--warm-good); }
.sum-delta.is-bad { color: var(--warm-bad); }

.sum-block { display: flex; flex-direction: column; gap: 7px; }
.sum-block-title {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sum-list li {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--line);
  background: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.sum-list li.is-good { border-left-color: var(--warm-good); }
.sum-list li.is-bad { border-left-color: var(--warm-bad); }
.sum-list li strong { color: var(--cream); }
.sum-seats { color: var(--muted-2); font-style: italic; }

@media (max-width: 720px) {
  .round-clock { font-size: 1.4rem; }
  .projection-row { grid-template-columns: 38px 1fr 30px; }
  .bank-figures { gap: 16px; }
  .dialog { padding: 18px; }
}

/* ------------------------------------------- candidates and seat history */

.candidates {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.candidates th {
  padding: 0 0 7px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line-soft);
}
.candidates td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  vertical-align: baseline;
}
.candidates tr:last-child td { border-bottom: 0; }
.candidates .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.candidates tr.is-leading td { color: var(--cream); }
.candidates tr.is-you .candidate-name { color: var(--cream); font-weight: 600; }
.candidate-name { display: flex; align-items: baseline; gap: 7px; }
.candidates .race-dot { margin-right: 6px; }

.history-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.history-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.history-axis { stroke: var(--line); stroke-width: 1; }
.history-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.72;
}
.history-line.is-you { stroke-width: 2.6; opacity: 1; }
.history-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.7rem;
  color: var(--muted-2);
}
.history-empty { margin: 0; font-size: 0.82rem; color: var(--muted-2); }

/* --------------------------------------------------------- the count */

.count-live {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(600px 300px at 50% 0%, var(--wash-gold), transparent 70%),
    var(--ink-2);
}

.count-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.count-progress {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

.count-track {
  height: 4px;
  border-radius: 999px;
  background: var(--wash-ink-2);
  overflow: hidden;
}
.count-fill {
  display: block;
  height: 100%;
  background: var(--wheat);
  transition: width 0.1s linear;
}

.count-bars { display: flex; flex-direction: column; gap: 6px; }
.count-row {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.count-party { font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.count-bar {
  height: 14px;
  border-radius: 4px;
  background: var(--wash-ink);
  overflow: hidden;
}
.count-bar-fill {
  display: block;
  height: 100%;
  background: var(--party);
  transition: width 0.12s linear;
}
.count-seats {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.count-row.is-past .count-party,
.count-row.is-past .count-seats { color: var(--cream); }

.count-majority { margin: 0; font-size: 0.76rem; color: var(--muted-2); }

.count-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.count-seat {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  font-size: 0.84rem;
}
.count-ac { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.count-name { color: var(--cream); }
.count-winner {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--party);
  color: var(--party-ink, #fff);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.count-margin { color: var(--muted-2); font-size: 0.74rem; }

@media (max-width: 720px) {
  .count-seat { grid-template-columns: 36px 1fr auto; }
  .count-margin { display: none; }
}

/* --------------------------------------------------- layout adjustments */

/* The clock is the one thing a player needs at every moment of a
   sixty-second round, so it stays put while the rest of the screen scrolls. */
.round-bar {
  position: sticky;
  top: 0;
  z-index: 6;
}

/* A fifth tab arrived with the money screen and the row stopped fitting on a
   phone. Wrapping keeps every tab reachable; a scrolling row would hide the
   last one behind an edge with nothing to say it was there. */
.panel-tabs { flex-wrap: wrap; row-gap: 2px; }

@media (max-width: 480px) {
  .panel-tab { font-size: 0.8rem; padding-left: 9px; padding-right: 9px; }
}

/* ------------------------------------------------- a compact campaign head */

/* Once a campaign is running, the masthead is the least useful thing on
   screen and the actions are the most. At full size the title, the party card
   and the figures filled the first viewport on their own, leaving a player
   scrolling for the buttons with the clock running. Everything above the
   tabs is tightened so the campaign itself starts on the first screen. */

.screen-election .election-head { gap: 12px; margin-bottom: 18px; }
.screen-election .election-head .title-sm { font-size: 1.5rem; }
.screen-election .election-head .subtitle { margin-top: 2px; font-size: 0.8rem; }

.screen-election .campaign-card {
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-left-width: 4px;
}
.screen-election .campaign-flag {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 0.8rem;
}
.screen-election .campaign-body {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.screen-election .campaign-party { font-size: 0.66rem; }
.screen-election .campaign-name { font-size: 1.05rem; }
.screen-election .campaign-slogan { font-size: 0.84rem; }

.screen-election .election-inner { gap: 14px; }
.screen-election .stat { padding: 11px 14px; }
.screen-election .stat-value { font-size: 1.25rem; }

@media (max-width: 720px) {
  .screen-election .election-head .title-sm { font-size: 1.25rem; }
  .screen-election .campaign-slogan { display: none; }
}

/* Moves left in the round: the real budget of a sixty-second turn. */
.round-moves {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  margin-left: 16px;
}
.round-pips { display: inline-flex; gap: 3px; }
.move-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--wheat-deep);
  background: var(--wheat);
}
.move-pip.is-used { background: none; border-color: var(--line); }
.round-moves-label { font-size: 0.72rem; color: var(--muted-2); }

@media (max-width: 560px) {
  .round-moves { margin-left: 10px; }
  .round-moves-label { display: none; }
}

.report-reach {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted-2);
  line-height: 1.5;
}

.declare-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.declare-note { margin: 0; font-size: 0.84rem; color: var(--muted-2); text-align: center; }

/* The campaign log gained a round column. */
.log-row { grid-template-columns: 30px 1.3fr 1fr auto 62px; }
.log-round {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .log-row {
    grid-template-columns: 30px 1fr auto;
    grid-template-areas: "round action result" "round where cost";
  }
  .log-round { grid-area: round; align-self: center; }
}

/* ==========================================================================
   The end of a round
   --------------------------------------------------------------------------
   One screen: who is leading, and by how many seats.

   What this replaced was a programme — an overview of four large cards, every
   region read out district by district, an overall-leader page with seats
   decided, popular vote, total spend and total grants, and two buttons to get
   out of it. Twenty rounds a game.

   It shows itself, stays long enough to read, and goes.
   ========================================================================== */

.rr {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  transition: opacity 0.5s ease;
}
/* The last half-second, so the return reads as finishing rather than vanishing. */
.rr.is-leaving { opacity: 0; }

/*
 * The same heading, with the clock beside it.
 *
 * The text block keeps the shape it always had — the row above the title, the
 * title under it, two pixels apart. It is wrapped so the countdown can sit in
 * the corner opposite without moving any of it.
 */
.rr-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rr-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/*
 * How long is left, and nothing else.
 *
 * Small, quiet and out of the way of the result: it exists so that sitting
 * through the ten seconds is a choice rather than a wait for something that
 * has not been announced.
 */
.rr-countdown {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy-3);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rr-round {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.rr-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}

.rr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rr-rows li { list-style: none; }

/*
 * One campaign per row, and the same three tracks on every one of them.
 *
 * The face, then who they are and how they are doing, then the seat count.
 * The seat column is fixed so the numbers stack down the list — that is the
 * figure the screen exists to deliver, and a column of digits that do not
 * line up is a column you have to read twice.
 */
.rr-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 46px;
  align-items: center;
  row-gap: 6px;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 11px;
  background: var(--paper);

  /*
   * Arriving, once.
   *
   * A beat apart and then still. What was here before faded each photograph
   * in and out as the districts were read, which on a results screen reads as
   * something failing rather than as something arriving.
   */
  animation: rr-arrive 0.34s ease-out both;
  animation-delay: var(--in, 0ms);
}
.rr-row.is-leading { border-left-color: var(--party); }
.rr-row.is-tied { border-left-color: var(--navy-3); }
.rr-row.is-you { border-color: var(--gold); border-left-color: var(--gold); }

@keyframes rr-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.rr-face { display: block; }
.rr-face .portrait {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--party);
}

.rr-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rr-party {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-state {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.rr-state.is-leading { color: var(--warn-good); }
.rr-state.is-tied { color: var(--navy-2); }

/*
 * Where they stand against the leader, as one bar.
 *
 * Not a chart. The width is the party's seats over the leader's, so the top
 * row is always full and the rest are read against it at a glance — which is
 * the only comparison this screen is making.
 */
.rr-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
/*
 * The fill travels; it does not appear.
 *
 * Width is the one property being animated, and the duration and delay are
 * written on by the screen so each place starts after the one in front of it.
 * The curve leaves quickly and settles slowly, which is what makes a bar
 * arriving read as a result landing rather than as a box being drawn.
 */
.rr-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--party);
  opacity: 0.85;
  transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rr-row.is-you .rr-bar-fill { background: var(--gold); opacity: 1; }

.rr-spent {
  font-size: 0.62rem;
  color: var(--navy-3);
  font-variant-numeric: tabular-nums;
}

.rr-seats { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.rr-seats-n {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.rr-row.is-you .rr-seats-n { color: var(--gold-deep); }
.rr-seats-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-3);
}

/*
 * What the round cost and paid, under the row it belongs to.
 *
 * Three small figures across the full width, below the face and the seats, so
 * the row above keeps the shape it has always had. Quiet on purpose: the seat
 * count is what the screen is for and these are the footnote to it.
 */
.rr-money {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-soft);
}
.rr-fig { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rr-fig-label {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-fig-value {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--navy-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-fig.is-lost .rr-fig-value { color: var(--warn-bad); }
.rr-fig.is-earned .rr-fig-value { color: var(--gold-deep); }
.rr-fig.is-balance .rr-fig-value { color: var(--navy); }

/* A rule changing, said once and quietly. */
.rr-milestone {
  margin: 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--wash-gold);
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Only when one actually happened, and never invented to fill the line. */
/*
 * The exchanges nobody won, one line each.
 *
 * It was a count and a total; it names them now, because a campaign that put
 * four positions into Ludhiana and came out of the round with none is owed
 * the sentence rather than a rupee figure in a column.
 */
.rr-conflicts { display: flex; flex-direction: column; gap: 6px; }
.rr-conflicts-title {
  margin: 0;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.rr-conflict {
  margin: 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--warn-bad) 9%, transparent);
  color: var(--warn-bad);
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rr-conflict-where { font-weight: 700; }
.rr-conflict-who { color: var(--navy-2); font-weight: 500; }
.rr-conflict-lost { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 379px) {
  .rr { padding: 13px; gap: 12px; }
  .rr-row { grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 9px; padding: 8px 9px; }
  .rr-title { font-size: 1.24rem; }
  .rr-head { gap: 9px; }
  .rr-countdown { min-width: 23px; height: 23px; font-size: 0.74rem; }
  .rr-seats-n { font-size: 1.16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-row { animation: none; }
  .rr { transition: none; }
  /* The screen still shows the result; it just stops performing it. */
  .rr-bar-fill { transition: none; }
}


/*
 * What the alliances hold between them, under the individual rows.
 *
 * Never instead of them: every campaign keeps its own seats, its own party
 * and its own colour above, and this is the same figures added up for the
 * people fighting together.
 */
.rr-alliances {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
}
.rr-alliance-title {
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.rr-alliance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}
.rr-alliance-members { display: flex; flex-wrap: wrap; gap: 10px; }
.rr-alliance-member {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-left: 6px;
  border-left: 3px solid var(--party);
}
.rr-alliance-short {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
}
.rr-alliance-seat {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-3);
  font-variant-numeric: tabular-nums;
}
.rr-alliance-sum { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.rr-alliance-label {
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.rr-alliance-seats {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}