/* ------------------------------------------------------------------
   The active election screen.

   A heads-up display rather than a page: a ring that drains, a money strip,
   a menu, a scoreboard, and the button that ends the round. No title, no
   portrait card, no numerals counting down.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------- the top bar */

.g-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.g-who {
  display: flex;
  align-items: center;
  gap: 7px;
}
.g-who-party {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--party, var(--line));
  color: var(--party, var(--cream));
}
.g-who-you {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.g-more {
  min-height: 36px;
  padding: 6px 11px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------- the ring */

.round-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
}

.round-bar-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

/*
 * The ring, and the only place its size is written down.
 *
 * The numeral inside is derived from it below rather than set to a literal,
 * because the two had drifted apart: the ring was sized here, the numeral was
 * sized in three other stylesheets, and the one that actually won on the game
 * screen was large enough that "R12" broke out through the arc. Every round
 * from ten onward — half the game — was rendered with the round number
 * spilling past its own medallion.
 *
 * Change --ring and the numeral follows. Nothing else has to be kept in step.
 */
.round-timer {
  position: relative;
  --ring: 52px;
  width: var(--ring);
  height: var(--ring);
}
.rt-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-track { stroke: var(--line-soft); }
.rt-arc {
  stroke: var(--wheat);
  /* Long enough to read as movement, short enough not to lag the clock. */
  transition: stroke-dasharray 0.45s linear;
}
.round-timer.is-low .rt-arc { stroke: var(--danger); }
.round-timer.is-counting .rt-arc { stroke: var(--river); }

.rt-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The round number, not a countdown. */
/*
 * The round, inside the ring that drains around it.
 *
 * Slightly smaller than it was, because it is now the only place the round
 * number appears and it has to hold "R20" inside a 52px circle without
 * touching the arc.
 */
.round-clock {
  /*
   * A fifth of the ring. "R20" is the widest it ever has to hold, and at this
   * size it clears the arc at every width the ring is used at.
   */
  font-size: calc(var(--ring, 52px) * 0.2);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.round-clock.is-low { color: var(--danger); }
.round-clock.is-counting { color: var(--river); }

.round-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.round-of {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.round-final {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wheat);
}
.round-final.is-quiet { color: var(--river); }

.round-steps { display: none; }

/* ------------------------------------------------------ the money strip */

.g-player {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-left: 0;
  background: none;
  border-radius: 0;
}

.g-fig {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  min-height: 0;
  font-family: var(--font);
  color: var(--cream);
}
.g-fig-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.g-fig-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.g-fig.is-lead .g-fig-value {
  font-size: 1.25rem;
  color: var(--wheat);
}
.g-fig.is-grant {
  cursor: pointer;
  min-height: 36px;
  justify-content: center;
}
.g-fig.is-grant .g-fig-value { color: var(--river); }
.g-fig.is-debt .g-fig-value { color: var(--danger); }

/* ------------------------------------------------------------ the menu */

.g-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.g-menu-item {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  padding: 8px 10px;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 8px;
  box-shadow: none;
}
.g-menu-icon {
  font-size: 0.82rem;
  color: var(--muted);
}
.g-menu-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.g-menu-hint {
  font-size: 0.6rem;
  color: var(--muted-2);
}
.g-menu-item:hover {
  border-color: var(--wheat-deep);
  background: var(--ink-3);
}
.g-menu-item:hover .g-menu-icon { color: var(--wheat); }
.g-menu-item.is-risky .g-menu-icon { color: var(--danger); }

/* -------------------------------------------------------- the majority */

.g-majority {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.g-majority-text {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ------------------------------------------------------- blocks, quiet */

.g-block {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.g-block-title {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.g-block-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted-2);
  margin: 0;
}

/* ---------------------------------------------------------- end round */

.btn-end {
  border-color: var(--line);
  background: var(--ink-2);
  padding: 12px 16px;
  box-shadow: none;
}
.btn-end-title {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}
.btn-end-note { font-size: 0.62rem; }

/* ------------------------------------------ the four, always in reach */

/*
 * Home, Grant, Alliances and Loan.
 *
 * They were three buttons above the board that scrolled away with it, and
 * everything else lived behind More. A campaign is run from these four, so
 * they sit under the title on every screen and the one you are on says so.
 *
 * A row of tabs rather than four cards: cards would cost forty pixels of a
 * phone screen to say what a rule and a label say.
 */
/*
 * Navy, so the navigation is not the game.
 *
 * It sat on the same charcoal as everything under it, which made a bar of
 * four tabs read as another card in the stack. Its own colour separates the
 * chrome from the board without a rule or a shadow doing the work — and navy
 * rather than more gold, because gold is the game's accent and a bar of it
 * would compete with every selected thing on screen.
 */
/*
 * It stays on screen.
 *
 * Four tabs that scroll away are four tabs you have to scroll back up to
 * reach, which on the map — a screen taller than any phone — means the way
 * out of where you are is off screen most of the time. Sticky at the top, and
 * above the round strip in the stack so the two never overlap: the strip is
 * told where the bar ends through --nav-h, which the shell measures.
 */
.g-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 8;

  --nav-ground: #131a2b;
  --nav-raised: #1b2540;
  --nav-ink: #eceaf2;
  --nav-quiet: #7f8aa6;
  --nav-edge: #232f4d;

  /*
   * As many equal columns as there are tabs, counted by the browser.
   *
   * This said repeat(4, ...) from when there were four. Borrowing came off
   * the bar and left three, so the tabs sat in the first three columns of
   * four and the whole bar hung to the left of its own box with a tab's worth
   * of empty navy on the right. Nothing was misaligned — the bar was simply
   * still laid out for a tab that no longer exists.
   *
   * Letting the columns be generated means the next tab added or removed is
   * laid out correctly without anybody remembering to come here.
   */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--nav-edge);
  border-radius: 8px;
  background: var(--nav-ground);
}

.g-nav-item {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 7px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--font);
  color: var(--nav-quiet);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.g-nav-item:hover { color: var(--nav-ink); }
.g-nav-item:focus-visible { outline: 2px solid var(--river); outline-offset: -2px; }

/*
 * The one you are on: a lighter navy, ivory text, and a thin gold line under
 * it. The gold is two pixels of accent rather than a gold tab — enough to
 * find at a glance, not enough to argue with the board.
 */
.g-nav-item.is-on {
  background: var(--nav-raised);
  color: var(--nav-ink);
  box-shadow: inset 0 -2px 0 #b98f3d;
}
.g-nav-item.is-on .g-nav-glyph { color: #d8b979; }

.g-nav-glyph {
  font-size: 0.95rem;
  line-height: 1;
  color: inherit;
  transition: color 0.14s ease;
}
.g-nav-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 359px) {
  .g-nav-label { letter-spacing: 0.06em; }
}

/* --------------------------------------------- ending the round, in place */

/*
 * Opposite the ring, on the same line.
 *
 * It was a full-width two-line button at the foot of the page, reached by
 * scrolling past the whole board; then it was a full-width button under the
 * header. The space beside the ring has been empty since the round number
 * stopped being written out twice, and this is what it is for.
 */
.round-action { display: flex; justify-content: flex-end; }

.round-action .btn-end {
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Being ready is a state, not a button: it says so and takes less room. */
.round-action .g-ready {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--good);
  border-radius: 999px;
}
.round-action .g-ready-tick { color: var(--good); font-weight: 700; }
.round-action .g-ready-title { font-size: 0.68rem; font-weight: 700; }
.round-action .g-ready-note { display: none; }

@media (max-width: 379px) {
  .round-action .btn-end { padding: 8px 13px; letter-spacing: 0.08em; }
}

/* ---------------------------------------------------- the three levels */

/*
 * Which zone, or which district — the row under the levels.
 *
 * A scrolling row rather than a wrapped grid: twenty-three districts wrapped
 * to four lines is most of a phone screen given over to a control.
 */
.map-scope {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.map-scope::-webkit-scrollbar { display: none; }
.map-scope[hidden] { display: none; }

.map-scope-chip {
  appearance: none;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.map-scope-chip:hover { border-color: var(--gold); color: var(--navy); }
.map-scope-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.map-scope-chip.is-on {
  border-color: var(--gold);
  background: var(--wash-gold);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ==========================================================================
   The campaigns, under the map
   --------------------------------------------------------------------------
   A strip of cards, one per campaign, and each of them a face over three
   numbers: what that campaign can spend, what its grants have won it, and its
   seats.

   This was a table with a heading over it and CAMPAIGN / MONEY / SEATS across
   the top. The headings are gone because the figures do not need them — the
   rupee sign says money and the last number is always seats — and the
   heading is gone because a row of faces under a map does not need to be told
   it is the players.

   Party colour is one hairline down the left edge. Six cards each filled with
   somebody’s colour, under a map already coloured by party, is two maps
   arguing. Gold is reserved for one thing: who is leading.
   ========================================================================== */

.ps-strip {
  display: flex;
  gap: 7px;
  align-items: stretch;
}

/*
 * Every campaign fits, whatever the field.
 *
 * Two cards or six, they share the width and shrink together rather than
 * running off the edge — so the strip never scrolls at four, which is the
 * size most games are. It only becomes scrollable when a card would be too
 * narrow to read, which is the rule below.
 */
.ps-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 9px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--party);
  border-radius: 12px;
  background: var(--paper-2);
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ps-card:hover { border-color: var(--navy-3); }
.ps-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

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

/*
 * The figures, stacked and centred under the face.
 *
 * Tabular figures so the digits sit in the same places from card to card:
 * three campaigns' balances read as a column even though each is in its own
 * box. The seat count is the display face and much the largest thing on the
 * card, because it is the number the game is actually about.
 */
.ps-figs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.ps-cash {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--navy-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ps-cash.is-hidden { color: var(--navy-3); opacity: 0.6; }

/* What the grants have paid, quieter: it is part of the figure above it. */
.ps-grant {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--gold-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ps-grant.is-nil { color: var(--navy-3); opacity: 0.55; }

.ps-seats {
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.05;
  font-weight: 700;
  color: var(--navy);
}

/*
 * Leading, shown rather than written.
 *
 * A gold ring round the whole card and the seat figure in gold with it. On
 * every campaign that is level at the top, because they all hold the most —
 * naming one of them would be sort order pretending to be a standing.
 */
.ps-card.is-lead {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
  background: var(--wash-gold);
}
.ps-card.is-lead .ps-seats { color: var(--gold-deep); }

/* Yours: a shade more paper and a heavier face, and no gold unless you lead. */
.ps-card.is-you { background: var(--paper); }
.ps-card.is-you .ps-face .portrait { border-width: 3px; }
.ps-card.is-you.is-lead { background: var(--wash-gold); }

/* Out of the election: still there, still counted, visibly finished. */
.ps-card.is-out { opacity: 0.5; }
.ps-card.is-out .ps-seats { color: var(--navy-3); }

/*
 * The campaign the board is currently filtered to.
 *
 * Marked on the card as well as on the map, because the map is above it and a
 * filter you cannot see the switch for is a map that has gone wrong.
 */
.ps-card.is-showing {
  border-color: var(--party);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--party);
}

/* Only there while the board is filtered, and it says what it will do. */
.ps-clear {
  appearance: none;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--navy-2);
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}
.ps-clear:hover { border-color: var(--navy-3); color: var(--navy); }
.ps-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.ps-note { margin: 8px 0 0; font-size: 0.68rem; color: var(--navy-3); }

/*
 * Six campaigns on a narrow phone.
 *
 * Sharing the width stops working somewhere around a fifty-pixel card, so
 * past that the strip scrolls sideways instead — inside itself, never the
 * page. A fixed card width is what makes it scroll: with `1 1 0` they would
 * go on shrinking to nothing rather than overflowing.
 */
@media (max-width: 430px) {
  .ps-strip { gap: 6px; }
  .ps-card { padding: 7px 3px 8px; }
  .ps-cash { font-size: 0.64rem; }
  .ps-grant { font-size: 0.57rem; }
  .ps-seats { font-size: 1.16rem; }
}

.ps-strip.is-crowded {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ps-strip.is-crowded::-webkit-scrollbar { display: none; }
.ps-strip.is-crowded .ps-card {
  flex: 0 0 auto;
  width: 78px;
  scroll-snap-align: start;
}