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

   The Parliament wheel from hemicycle() in app.js, as a gameshow set piece:
   chunky outlined seats, a yellow majority line with a "61 TO WIN" tag, a
   display-type readout in the middle, and newly projected seats popping in.
   Inside main, and on the TV wall's national scene (.wall.pm-on), which
   always takes the dark-card treatment. Takeovers are untouched. The extras
   (.hemi-pm) carry display="none" and are switched on here. */

:is(:root[data-party="on"] main, .wall.pm-on) .hemicycle {
  overflow: visible;
  /* Room for the "61 TO WIN" tag, which sits above the outer row. */
  margin-top: clamp(20px, 6.5%, 32px);
  --seat-line: var(--pm-ink);
  --seat-stroke: 1.1px;
}
:is(:root[data-party="on"][data-scheme="dark"] main, .wall.pm-on) .hemicycle {
  --seat-line: #07011a;
}

/* ---------- Seats ---------- */
:is(:root[data-party="on"] main, .wall.pm-on) .hemicycle circle {
  r: calc(var(--seat-fit, 5) * 1px - 0.7px);
  stroke: var(--seat-line);
  stroke-width: var(--seat-stroke);
  transform-box: fill-box;
  transform-origin: center;
}
/* Before the count: outlined, empty seats rather than faint blobs. */
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-waiting {
  --empty: var(--surface);
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-waiting circle {
  stroke: var(--line-strong);
  stroke-width: 1px;
}
:is(:root[data-party="on"][data-scheme="dark"] main, .wall.pm-on) .hemi-waiting circle {
  stroke: var(--muted);
  opacity: 0.7;
}

/* Newly projected seats pop in, staggered by the delay app.js hands each one. */
:is(:root[data-party="on"] main, .wall.pm-on) .hemicycle .hemi-pop {
  animation: hemi-pop 460ms cubic-bezier(0.3, 1.6, 0.5, 1) var(--pd, 0ms) both;
}
@keyframes hemi-pop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Majority line, tag and readout ---------- */
:is(:root[data-party="on"] main, .wall.pm-on) .hemicycle :is(.hemi-mid, .hemi-num, .hemi-cap) {
  display: none;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-pm {
  display: inline;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-maj {
  stroke: var(--pm-yellow);
  stroke-width: 1.4px;
  stroke-linecap: round;
}
/* An ink edge under the yellow, so the line reads on white and on violet. */
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-maj-edge {
  stroke: var(--pm-ink);
  stroke-width: 3.2px;
  stroke-linecap: round;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-pm text {
  font-family: var(--pm-display);
  font-weight: 900;
  font-style: italic;
  font-stretch: 75%;
  text-anchor: middle;
  text-transform: uppercase;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-tag rect {
  fill: var(--pm-ink);
  stroke: var(--pm-ink);
  stroke-width: 1px;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-tag text {
  fill: var(--pm-yellow);
  font-size: 6px;
}
:is(:root[data-party="on"][data-scheme="dark"] main, .wall.pm-on) .hemi-tag rect {
  fill: var(--pm-yellow);
  stroke: #07011a;
}
:is(:root[data-party="on"][data-scheme="dark"] main, .wall.pm-on) .hemi-tag text {
  fill: var(--pm-ink);
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-big {
  font-size: 25px;
  letter-spacing: -0.02em;
  fill: var(--ink);
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-big-drop {
  fill: var(--pm-pink);
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-slug rect {
  fill: var(--pm-yellow);
  stroke: var(--pm-ink);
  stroke-width: 1px;
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-slug text {
  fill: var(--pm-ink);
  font-size: 6.2px;
}
/* Waiting: the tally is dimmed, the slug is the headline. */
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-waiting .hemi-big {
  fill: var(--muted);
}
:is(:root[data-party="on"] main, .wall.pm-on) .hemi-waiting .hemi-big-drop {
  fill: var(--line);
}

/* ---------- TV wall ----------
   The wheel fills .w-chamber by height; the tag above the outer row needs its
   own headroom, so it comes out of the chamber's padding rather than a margin. */
.wall.pm-on .w-chamber {
  padding-top: calc(var(--u) * 2.6);
}
.wall.pm-on .w-chamber .hemicycle {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(:root[data-party="on"] main, .wall.pm-on) .hemicycle .hemi-pop {
    animation: none;
  }
}