/* Party Mode: scoreboard. Scoped to :root[data-party="on"]; see party-skin.css.

   "61 to govern" (raceTo61 in app.js) as a gameshow scoreboard: each bloc's
   seat total in big italic Archivo, a tug-of-war bar with a bold majority
   line down the middle, and the winning side lit up once it gets there.
   Everything here sits under `main`, so the TV wall (outside main, with its
   own party look) and the takeovers are untouched. The Coalition lab reuses
   the same markup inside main and gets the same board.

   raceTo61 adds a few pieces only this file shows (each carries `hidden`):
   .r61-team (the side's name), .r61-zero (the pre-count 0) and .r61-wait
   (the pre-count slug). State hooks on .r61: .r61-waiting, .r61-won,
   .r61-won-left, .r61-won-right. */

:root[data-party="on"] main .r61 {
  --sb-edge: var(--pm-ink);
  --sb-glow: color-mix(in srgb, var(--pm-yellow) 16%, transparent);
  /* Sized to the board's own width, so the narrower Coalition lab column
     gets a smaller score than the full-width Tonight card. */
  container-type: inline-size;
  --sb-score: clamp(52px, 10cqi, 104px);
  --sb-bar: 48px;
  position: relative;
}
:root[data-party="on"][data-scheme="dark"] main .r61 {
  --sb-edge: #07011a;
  /* Yellow over violet goes muddy; a pink wash reads as lit instead. */
  --sb-glow: color-mix(in srgb, var(--pm-pink) 16%, transparent);
}

/* ---------- The head: score, goal, score ---------- */
:root[data-party="on"] main .r61-head {
  /* Scores line up along the top even when one side's names wrap. */
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}
:root[data-party="on"] main .r61-bloc {
  position: relative;
  gap: 4px;
  min-width: 0;
  /* Hug the content so the lit-up panel fits the score, not the column. */
  justify-self: start;
}
:root[data-party="on"] main .r61-bloc.right {
  justify-self: end;
}

/* Team name: a small skewed ink tab above the score. */
:root[data-party="on"] main .r61-team {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px 2px;
  background: var(--pm-ink);
  color: #fff;
  transform: skew(-10deg);
  font-family: var(--pm-display);
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
:root[data-party="on"][data-scheme="dark"] main .r61-team {
  background: var(--pm-soft);
  color: var(--pm-ink);
}
:root[data-party="on"] main .r61-bloc.right .r61-team {
  align-self: flex-end;
}

/* The score itself. */
:root[data-party="on"] main .r61-bloc :is(b, .r61-zero) {
  display: block;
  font-family: var(--pm-display);
  font-size: var(--sb-score);
  font-weight: 900;
  font-style: italic;
  font-stretch: 72%;
  letter-spacing: -0.02em;
  line-height: 0.86;
  /* Italic overhang: a little room so the last digit is not clipped. */
  padding: 0 0.08em 0 0;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--pm-pink);
  font-variant-numeric: tabular-nums;
}
:root[data-party="on"] main .r61-bloc.right :is(b, .r61-zero) {
  display: block;
  padding: 0 0.04em 0 0.08em;
}
/* Pre-count: a real 0, not a dash, in the muted "not yet" tone. */
:root[data-party="on"] main .r61-waiting .r61-bloc > b,
:root[data-party="on"] main .r61-waiting .r61-bloc.right > b {
  display: none;
}
:root[data-party="on"] main .r61-waiting .r61-zero {
  color: var(--line-strong);
  text-shadow: 4px 4px 0 var(--surface-3);
}

:root[data-party="on"] main .r61-bloc .r61-parties {
  margin-top: 6px;
  font-weight: 650;
}

/* "7 short", in the house's slanted caps. */
:root[data-party="on"] main .r61-status:not(.wins),
:root[data-party="on"] main .r61-with {
  font-family: var(--pm-display);
  font-size: 13px;
  font-weight: 800;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* MAJORITY: the yellow slug. */
:root[data-party="on"] main .r61-status.wins {
  margin-top: 8px;
  padding: 5px 12px 4px;
  border: var(--pm-line) solid var(--sb-edge);
  border-radius: 0;
  background: var(--pm-yellow);
  color: var(--pm-ink);
  box-shadow: 3px 3px 0 var(--pm-pink);
  transform: skew(-10deg) rotate(-2deg);
  font-family: var(--pm-display);
  font-size: 15px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
:root[data-party="on"] main .r61-bloc.right .r61-status.wins {
  transform: skew(-10deg) rotate(2deg);
}

/* ---------- The goal: a yellow 61 plate ---------- */
:root[data-party="on"] main .r61-goal {
  align-self: center;
  gap: 6px;
  padding: 0;
}
:root[data-party="on"] main .r61-goal > b {
  display: block;
  min-width: 1.6em;
  padding: 6px 14px 4px 10px;
  border: var(--pm-line) solid var(--sb-edge);
  background: var(--pm-yellow);
  color: var(--pm-ink);
  box-shadow: 4px 4px 0 var(--sb-edge);
  transform: skew(-10deg);
  font-family: var(--pm-display);
  font-size: 38px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 74%;
  line-height: 0.9;
  text-align: center;
}
:root[data-party="on"] main .r61-goal > span {
  font-family: var(--pm-display);
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* Pre-count slug: the board is set and waiting, not broken. */
:root[data-party="on"] main .r61-wait {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px 3px;
  border: 2px dashed var(--line-strong);
  color: var(--muted);
  transform: skew(-10deg);
  font-family: var(--pm-display);
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: sb-wait 1.6s ease-in-out infinite;
}
@keyframes sb-wait {
  50% {
    opacity: 0.45;
  }
}

/* ---------- The tug-of-war bar ---------- */
:root[data-party="on"] main .r61-bar {
  height: var(--sb-bar);
  border: var(--pm-line) solid var(--sb-edge);
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0 10px,
      color-mix(in srgb, var(--line-strong) 45%, transparent) 10px 12px
    ),
    var(--surface-3);
  box-shadow: 4px 4px 0 var(--sb-edge);
}
:root[data-party="on"] main .r61-bar > span:first-child {
  border-radius: 7px 0 0 7px;
}
:root[data-party="on"] main .r61-bar > span:last-of-type {
  border-radius: 0 7px 7px 0;
}
:root[data-party="on"] main .r61-bar > span:not(.r61-gap) {
  font-family: var(--pm-display);
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 76%;
  /* Ink seams between parties, like a scoreboard's panel joins. */
  box-shadow: inset -2px 0 0 var(--sb-edge);
}
:root[data-party="on"] main .r61-bar > .r61-topseg {
  box-shadow:
    inset 2px 0 0 var(--sb-edge),
    inset -2px 0 0 var(--sb-edge);
}

/* The majority line: a bold ink-and-yellow post through the bar. */
:root[data-party="on"] main .r61-mark {
  top: -12px;
  bottom: -12px;
  width: 8px;
  margin-left: -4px;
  border: 2px solid var(--sb-edge);
  border-radius: 3px;
  background: var(--pm-yellow);
  box-shadow: none;
  z-index: 2;
}
:root[data-party="on"] main .r61-mark + .r61-mark {
  opacity: 0.5;
}

/* ---------- Lit up: a side reaches the line ---------- */
:root[data-party="on"] main .r61-won .r61-bar {
  box-shadow:
    0 0 0 3px var(--pm-yellow),
    6px 6px 0 3px var(--pm-pink);
}
/* The winning score glows yellow on pink. */
:root[data-party="on"] main .r61-bloc.wins b {
  color: var(--ink);
  text-shadow:
    3px 3px 0 var(--pm-yellow),
    6px 6px 0 var(--pm-pink);
}
/* Chasing bulbs round the winning side's head. */
:root[data-party="on"] main .r61-bloc.wins::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px -12px -8px;
  border-radius: 10px;
  background:
    radial-gradient(
        circle,
        var(--pm-yellow) 0 2.5px,
        #ffd23f66 3px 4px,
        transparent 4.5px
      )
      0 0 / 18px 10px repeat-x,
    radial-gradient(
        circle,
        var(--pm-yellow) 0 2.5px,
        #ffd23f66 3px 4px,
        transparent 4.5px
      )
      0 100% / 18px 10px repeat-x,
    var(--sb-glow);
  animation: sb-chase 1.2s steps(2) infinite;
  pointer-events: none;
}
:root[data-party="on"] main .r61-bloc.wins {
  isolation: isolate;
}
@keyframes sb-chase {
  to {
    background-position:
      9px 0,
      -9px 100%,
      0 0;
  }
}
/* The goal plate turns pink once it is won. */
:root[data-party="on"] main .r61-won .r61-goal > b {
  background: var(--pm-pink);
  color: #fff;
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root[data-party="on"] main .r61 {
    --sb-bar: 38px;
  }
  :root[data-party="on"] main .r61-head {
    gap: 8px;
  }
  :root[data-party="on"] main .r61-goal > b {
    font-size: 28px;
    padding: 5px 10px 3px 7px;
  }
  :root[data-party="on"] main .r61-goal > span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  :root[data-party="on"] main .r61-bar > span:not(.r61-gap) {
    font-size: 14px;
  }
  :root[data-party="on"] main .r61-status.wins {
    font-size: 12px;
    padding: 4px 8px 3px;
  }
  :root[data-party="on"] main .r61-status:not(.wins),
  :root[data-party="on"] main .r61-with {
    font-size: 11px;
  }
  :root[data-party="on"] main .r61-wait {
    white-space: normal;
    max-width: 104px;
    padding: 3px 6px 2px;
    font-size: 9.5px;
    letter-spacing: 0.03em;
    text-align: center;
  }
  :root[data-party="on"] main .r61-bloc.wins::before {
    inset: -8px -6px -6px;
  }
}

/* ---------- Reduced motion: lit, but still ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-party="on"] main .r61-wait,
  :root[data-party="on"] main .r61-bloc.wins::before {
    animation: none;
  }
}

/* ===========================================================================
   The TV wall's national scene: the same scoreboard, sized in --u (about
   1vw at 1920x1080) so it scales with the screen. The wall sits outside
   main and its root carries .pm-on when Party Mode is on; without .pm-on
   nothing below applies. Colours come from the monitor's own tokens, so a
   retuned monitor palette carries through. Kept to the height of the plain
   board, so the headline and the Parliament wheel still fit beside it.
   =========================================================================== */
.wall.pm-on .r61 {
  --sb-edge: var(--pm-ink);
  --sb-glow: color-mix(in srgb, var(--pm-pink) 16%, transparent);
  --sb-display: var(--pm-display, "Archivo", sans-serif);
  --sb-line: calc(var(--u) * 0.18);
  margin-top: calc(var(--u) * 1);
}
.wall.pm-on .r61-head {
  align-items: start;
  gap: calc(var(--u) * 1);
  margin-bottom: calc(var(--u) * 1);
}
.wall.pm-on .r61-bloc {
  position: relative;
  isolation: isolate;
  gap: calc(var(--u) * 0.2);
  min-width: 0;
  justify-self: start;
}
.wall.pm-on .r61-bloc.right {
  justify-self: end;
}

.wall.pm-on .r61-team {
  display: inline-block;
  align-self: flex-start;
  padding: calc(var(--u) * 0.12) calc(var(--u) * 0.55) calc(var(--u) * 0.08);
  background: var(--muted);
  color: var(--pm-ink);
  transform: skew(-10deg);
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 0.75);
  font-weight: 900;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.wall.pm-on .r61-bloc.right .r61-team {
  align-self: flex-end;
}

.wall.pm-on .r61-bloc :is(b, .r61-zero),
.wall.pm-on .r61-bloc.right :is(b, .r61-zero) {
  display: block;
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 4.5);
  font-weight: 900;
  font-style: italic;
  font-stretch: 72%;
  letter-spacing: -0.02em;
  line-height: 0.86;
  padding: 0 0.08em 0 0.02em;
  color: var(--ink);
  text-shadow: calc(var(--u) * 0.22) calc(var(--u) * 0.22) 0 var(--pm-pink);
  font-variant-numeric: tabular-nums;
}
.wall.pm-on .r61-waiting .r61-bloc > b,
.wall.pm-on .r61-waiting .r61-bloc.right > b {
  display: none;
}
.wall.pm-on .r61-waiting .r61-bloc .r61-zero {
  color: var(--line-strong, var(--line));
  text-shadow: calc(var(--u) * 0.22) calc(var(--u) * 0.22) 0 var(--surface-3);
}
.wall.pm-on .r61-bloc .r61-parties {
  margin-top: calc(var(--u) * 0.2);
  font-weight: 650;
}

.wall.pm-on .r61-status:not(.wins),
.wall.pm-on .r61-with {
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 0.85);
  font-weight: 800;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wall.pm-on .r61-status.wins {
  margin-top: calc(var(--u) * 0.15);
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.55) calc(var(--u) * 0.14);
  border: var(--sb-line) solid var(--sb-edge);
  border-radius: 0;
  background: var(--pm-yellow);
  color: var(--pm-ink);
  box-shadow: calc(var(--u) * 0.18) calc(var(--u) * 0.18) 0 var(--pm-pink);
  transform: skew(-10deg) rotate(-2deg);
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 0.9);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.wall.pm-on .r61-bloc.right .r61-status.wins {
  transform: skew(-10deg) rotate(2deg);
}

/* The goal: a yellow plate, pink once it is won. */
.wall.pm-on .r61-goal {
  align-self: center;
  gap: calc(var(--u) * 0.3);
  padding: 0;
}
.wall.pm-on .r61-goal > b {
  display: block;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.75) calc(var(--u) * 0.2)
    calc(var(--u) * 0.55);
  border: var(--sb-line) solid var(--sb-edge);
  background: var(--pm-yellow);
  color: var(--pm-ink);
  box-shadow: calc(var(--u) * 0.22) calc(var(--u) * 0.22) 0 var(--sb-edge);
  transform: skew(-10deg);
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 2.3);
  font-weight: 900;
  font-style: italic;
  font-stretch: 74%;
  line-height: 0.9;
  text-align: center;
}
.wall.pm-on .r61-won .r61-goal > b {
  background: var(--pm-pink);
  color: #fff;
}
.wall.pm-on .r61-goal > span {
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 0.8);
  font-weight: 900;
  font-style: italic;
  font-stretch: 80%;
  letter-spacing: 0.12em;
  color: var(--ink);
}
/* No "waiting" slug on the wall: the scene's headline already says it,
   and the column needs the room. .r61-wait keeps its `hidden`. */

/* The tug-of-war bar. */
.wall.pm-on .r61-bar {
  height: calc(var(--u) * 3);
  border: var(--sb-line) solid var(--sb-edge);
  border-radius: calc(var(--u) * 0.6);
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0 calc(var(--u) * 0.55),
      color-mix(in srgb, var(--muted) 22%, transparent) calc(var(--u) * 0.55)
        calc(var(--u) * 0.65)
    ),
    var(--surface-3, var(--surface-2));
  box-shadow: calc(var(--u) * 0.22) calc(var(--u) * 0.22) 0 var(--sb-edge);
}
.wall.pm-on .r61-bar > span:first-child {
  border-radius: calc(var(--u) * 0.42) 0 0 calc(var(--u) * 0.42);
}
.wall.pm-on .r61-bar > span:last-of-type {
  border-radius: 0 calc(var(--u) * 0.42) calc(var(--u) * 0.42) 0;
}
.wall.pm-on .r61-bar > span:not(.r61-gap) {
  font-family: var(--sb-display);
  font-size: calc(var(--u) * 1.45);
  font-weight: 900;
  font-style: italic;
  font-stretch: 76%;
  box-shadow: inset calc(var(--u) * -0.12) 0 0 var(--sb-edge);
}
.wall.pm-on .r61-bar > .r61-topseg {
  box-shadow:
    inset calc(var(--u) * 0.12) 0 0 var(--sb-edge),
    inset calc(var(--u) * -0.12) 0 0 var(--sb-edge);
}
.wall.pm-on .r61-mark {
  top: calc(var(--u) * -0.7);
  bottom: calc(var(--u) * -0.7);
  width: calc(var(--u) * 0.45);
  margin-left: calc(var(--u) * -0.225);
  border: calc(var(--u) * 0.12) solid var(--sb-edge);
  border-radius: calc(var(--u) * 0.15);
  background: var(--pm-yellow);
  box-shadow: none;
  opacity: 1;
  z-index: 2;
}
.wall.pm-on .r61-mark + .r61-mark {
  opacity: 0.5;
}

/* Lit up: a side reaches the line. */
.wall.pm-on .r61-won .r61-bar {
  box-shadow:
    0 0 0 calc(var(--u) * 0.18) var(--pm-yellow),
    calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 calc(var(--u) * 0.18)
      var(--pm-pink);
}
.wall.pm-on .r61-bloc.wins b {
  text-shadow:
    calc(var(--u) * 0.16) calc(var(--u) * 0.16) 0 var(--pm-yellow),
    calc(var(--u) * 0.32) calc(var(--u) * 0.32) 0 var(--pm-pink);
}
.wall.pm-on .r61-bloc.wins::before {
  --sb-bulb: radial-gradient(
    circle,
    var(--pm-yellow) 0 calc(var(--u) * 0.16),
    #ffd23f66 calc(var(--u) * 0.19) calc(var(--u) * 0.25),
    transparent calc(var(--u) * 0.28)
  );
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--u) * -0.6) calc(var(--u) * -0.7) calc(var(--u) * -0.5);
  border-radius: calc(var(--u) * 0.6);
  background:
    var(--sb-bulb) 0 0 / calc(var(--u) * 1.1) calc(var(--u) * 0.6) repeat-x,
    var(--sb-bulb) 0 100% / calc(var(--u) * 1.1) calc(var(--u) * 0.6) repeat-x,
    var(--sb-glow);
  animation: sb-chase-wall 1.2s steps(2) infinite;
  pointer-events: none;
}
@keyframes sb-chase-wall {
  to {
    background-position:
      calc(var(--u) * 0.55) 0,
      calc(var(--u) * -0.55) 100%,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall.pm-on .r61-bloc.wins::before {
    animation: none;
  }
}