/* ------------------------------------------------------------------
   The game screen.

   Designed for a phone first — 320 to 430px — and allowed to breathe on
   a larger screen rather than rebuilt for one. The rule throughout: one
   card only where a card earns its keep, and never the same figure twice.
   Loaded last, so it wins where it overlaps the older sheets.
   ------------------------------------------------------------------ */

/*
 * The gameplay screen scrolls one way and does not zoom.
 *
 * `pan-y` says the only gesture this screen recognises is a vertical scroll:
 * no pinch, no two-finger pan, no double-tap zoom. `overflow-x: hidden` and
 * `overscroll-behavior-x: none` between them mean nothing on it can push the
 * page sideways — a card a few pixels too wide used to drag the whole board
 * with it, and the rubber-band at the edge of a scroll made the screen feel
 * like a document. The one sideways scroll allowed is inside the player
 * strip, which asks for it by name.
 */
.screen-game {
  padding: 0;
  touch-action: pan-y;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* A page and the block under it, spaced like the rest of the column. */
.g-stack { display: flex; flex-direction: column; gap: 12px; }

.g-inner {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 10px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------- header */

.g-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 0;
}
.g-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.g-subtitle {
  margin: 1px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

.g-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex: none;
}
.g-more:hover { border-color: var(--wheat-deep); color: var(--cream); }
.g-more:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.g-more-bars {
  position: relative;
  width: 13px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.g-more-bars::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: currentColor;
}

/* -------------------------------------------------------- round strip */

.g-round .round-bar {
  position: sticky;
  top: calc(var(--nav-h, 54px) + env(safe-area-inset-top, 0px));
  z-index: 6;
  padding: 8px 12px 9px;
  gap: 6px;
  border-radius: 12px;
}
.g-round .round-label { font-size: 0.66rem; letter-spacing: 0.12em; }
.g-round .round-label strong { font-size: 0.95rem; }
/*
 * The round numeral is deliberately not sized here.
 *
 * It used to be, at 1.35rem — a two-class selector quietly outranking the
 * one-class rule in hud.css that had been set to 0.8rem precisely so "R20"
 * would fit the ring. The careful size lost to the casual one on the only
 * screen where the ring is shown, and the digits spilled out of the circle
 * from round ten on. It is derived from the ring's own size now.
 */
.g-round .round-track { height: 3px; }
.g-round .round-steps { display: none; }
.g-round .round-final { margin-left: 7px; font-size: 0.55rem; }
.g-round .round-moves { margin-left: 10px; }

/* -------------------------------------------------------- player strip */

.g-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--party);
  background: var(--ink-2);
}
.g-player .portrait { flex: none; border: 2px solid var(--party); }
.g-player-flag {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--party);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.g-player-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.g-player-name {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-player-party { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; }

.g-player-figures {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: none;
}
.g-player-cash {
  font-family: var(--font-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--wheat);
}
.g-player-seats { font-size: 0.68rem; color: var(--muted-2); }
.g-player-debt {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--wash-bad);
  color: var(--warm-bad);
  font-size: 0.64rem;
  font-weight: 700;
}

/* ----------------------------------------------------------------- nav */

/*
 * The bar is defined once, in hud.css.
 *
 * What used to be here was the previous design — a scrolling row of pills
 * with a fade at its edge and an .is-active class nothing sets any more. It
 * was inert only because hud.css loads after it, which is not a thing to rely
 * on: the same arrangement across three files is what once hid the party
 * abbreviations behind the portraits on the scoreboard.
 */

.g-notice:empty { display: none; }

/* --------------------------------------------------------------- body */

.g-body { display: flex; flex-direction: column; gap: 14px; }

.g-block { display: flex; flex-direction: column; gap: 9px; }
.g-block-flush { gap: 0; }
.g-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.g-block-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.g-block-title.is-risky { color: var(--warm-bad); }
.g-sub-title {
  margin: 6px 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.g-block-note { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   One board, not a stack of cards
   --------------------------------------------------------------------------
   HOME and GRANT are the tabs. Everything under them — the round, END ROUND,
   the map and the campaigns — is one thing, and it is drawn as one thing.

   It used to be a bordered box around the map and another set of bordered
   boxes under it, which read as a dashboard: three panels that happen to be
   about the same game rather than one game board. What separates the parts
   now is a hairline and some air, and the outer edge is drawn once.
   ========================================================================== */

.g-board.is-board {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper-2);
  overflow: hidden;
}

/*
 * The round bar sits inside the board rather than above it.
 *
 * Its own border and its own rounded corners come off: it is the top of the
 * board now, and the rule under it is what divides it from the map.
 */
.g-board.is-board .round-bar {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

/*
 * The map fills the middle of the board and keeps no edge of its own.
 *
 * The frame is still what sizes it and still what clips it — what goes is
 * the border and the radius, which were drawing a second box inside the one
 * around all of this.
 */
.g-board.is-board .map-frame {
  border: 0;
  border-radius: 0;
}
.g-board.is-board .map-block { gap: 0; }

/* The campaigns, divided from the map by a rule and nothing heavier. */
.g-board.is-board .g-block-status {
  padding: 9px 9px 10px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

/*
 * And inside it the cards lose their own boxes.
 *
 * Six bordered cards inside a bordered board is the stack of boxes this is
 * meant to be the end of. What is left marking a campaign is its colour on
 * one edge and, for whoever is leading, the gold — which is the only thing
 * on the strip that has to be seen from across a room.
 */
.g-board.is-board .ps-card {
  border: 0;
  border-left: 3px solid var(--party);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.g-board.is-board .ps-card.is-lead {
  background: var(--wash-gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.g-board.is-board .ps-card.is-showing {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--party);
}
.g-board.is-board .ps-card.is-you { background: var(--paper-2); }
.g-board.is-board .ps-card.is-you.is-lead { background: var(--wash-gold); }

/* ------------------------------------------------- the campaigns strip */

/*
 * There is no leaderboard any more.
 *
 * Two stylesheets described one here over the years — a six-column grid with
 * a rank and a bar, then a name over a party with a status on the right — and
 * for a while both were live and the one that won was whichever sat further
 * down the file. What is under the map now is a strip of cards, and all of
 * its layout is in one place: `.ps-*`, at the foot of hud.css.
 */

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

.g-majority { display: flex; flex-direction: column; gap: 5px; }
.g-majority-track {
  height: 4px;
  border-radius: 999px;
  background: var(--wash-ink);
  overflow: hidden;
}
.g-majority-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--party);
  transition: width 0.4s ease;
}
.g-majority-text { margin: 0; font-size: 0.76rem; color: var(--muted); }
.g-majority-text strong { color: var(--cream); }
.g-majority-text .is-clear { color: var(--warm-good); font-weight: 700; }

/* --------------------------------------------------------- leading from */

.leading-from { display: flex; flex-direction: column; gap: 12px; }
.lf-group { display: flex; flex-direction: column; gap: 5px; }
.lf-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.lf-party {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--party);
}
.lf-candidate { font-size: 0.72rem; color: var(--cream); }
.lf-count { font-size: 0.7rem; color: var(--muted-2); margin-left: auto; }
.lf-more { margin: 1px 0 0 2px; font-size: 0.7rem; color: var(--muted-2); }

/* ------------------------------------------------------------ seat rows */

.seat-list { display: flex; flex-direction: column; gap: 3px; }

.seat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--party);
  background: var(--ink-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 40px;
}
.seat-row:hover { border-color: var(--line); background: var(--ink-3); }
.seat-row:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.seat-row-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.seat-row-name {
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-row-sub {
  font-size: 0.68rem;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-row-party {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--party);
  color: var(--party-ink, #fff);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.seat-row-chev { color: var(--muted-2); font-size: 1rem; line-height: 1; }

/* -------------------------------------------------------- seat browser */

.seat-browser { display: flex; flex-direction: column; gap: 9px; }
.seat-search { width: 100%; }
.seat-filters { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.seat-filters::-webkit-scrollbar { display: none; }
.seat-filter {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
}
.seat-filter.is-active {
  border-color: var(--party, var(--wheat));
  color: var(--cream);
  background: var(--ink-3);
}
.seat-filter:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.seat-count { margin: 0; font-size: 0.7rem; color: var(--muted-2); }

/* -------------------------------------------------------------- actions */

.act-list { display: flex; flex-direction: column; gap: 5px; }

.act {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
}
.act.is-risky { border-left: 3px solid var(--warm-bad); }
.act.is-blocked { opacity: 0.55; }
.act-icon { font-size: 1.1rem; line-height: 1; text-align: center; }
.act-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.act-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-meta { display: flex; align-items: baseline; gap: 8px; font-size: 0.7rem; }
.act-cost { color: var(--wheat); font-variant-numeric: tabular-nums; font-weight: 700; }
.act-risk { color: var(--muted-2); }
.act-risk.is-high { color: var(--warm-bad); }

.act-use {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--wheat-deep);
  background: var(--wheat);
  color: #1a1305;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 36px;
}
.act-use.is-risky { background: var(--danger); border-color: var(--danger); color: #2b0d07; }
.act-use[disabled] {
  background: none;
  border-color: var(--line);
  color: var(--muted-2);
  cursor: not-allowed;
}
.act-use:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.act-why {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: var(--muted-2);
  padding-left: 36px;
}

/* --------------------------------------------------------------- target */

.g-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--cream);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  max-width: 60%;
  min-height: 32px;
}
.g-target:hover { border-color: var(--wheat-deep); }
.g-target:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.g-target-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.g-target-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-target-chev { color: var(--muted-2); }

/* ------------------------------------------------------- summary lines */

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

.g-heat-track {
  height: 4px;
  border-radius: 999px;
  background: var(--wash-ink);
  overflow: hidden;
}
.g-heat-fill { display: block; height: 100%; border-radius: 999px; }

.g-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-wide { width: 100%; }

.g-blocked {
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--warn-bad);
  background: var(--wash-bad);
  color: var(--warm-bad);
  font-size: 0.82rem;
}

/* ----------------------------------------------------------------- loan */

.loan-offers { display: flex; flex-direction: column; gap: 5px; }
.loan-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
}
.loan-offer:hover { border-color: var(--gold); }
.loan-offer:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.loan-offer.is-blocked { opacity: 0.5; cursor: not-allowed; }
.loan-amount {
  font-family: var(--font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}

/*
 * What the loan actually costs, on three lines.
 *
 * The three spans had no rule of their own, so they ran together as one
 * string - "Receive ₹52 lakhRepay ₹78 lakhDue round 5" - and the amount
 * beside them wrapped to make room for it. They are what the player is
 * deciding on, so each gets its own line and the amount is never broken.
 */
.loan-terms {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--navy-2);
  text-align: right;
}
.loan-line { display: block; font-variant-numeric: tabular-nums; }
.loan-line.is-quiet { color: var(--navy-3); }
.loan-terms.is-blocked { color: var(--warn-bad); max-width: 22em; }
.loan-open { display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------- the log */

.g-body .log { gap: 3px; }
.g-body .log-row { padding: 7px 11px; font-size: 0.78rem; background: var(--ink-2); }

/* -------------------------------------------------------------- sheets */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(18, 32, 54, 0.42);
  backdrop-filter: blur(2px);
}
.sheet-panel {
  width: min(520px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--ink-2);
  box-shadow: 0 -18px 50px rgba(18, 32, 54, 0.1);
  animation: sheet-up 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sheet-up {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.sheet-item {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  min-height: 46px;
}
.sheet-item:hover { border-color: var(--gold); }
.sheet-item:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.sheet-item.is-danger { color: var(--warn-bad); border-color: var(--wash-bad); }

/*
 * A row in the menu that goes somewhere.
 *
 * Glyph, name, note, chevron — the same shape as the cards on the opening
 * screen, so a list of choices looks like a list of choices wherever it is.
 * The chevron is the whole distinction between this and a switch.
 */
.sheet-item.is-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.sheet-item.is-row .sheet-item-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--blue);
  font-size: 0.86rem;
  line-height: 1;
}
.sheet-item.is-row.is-danger .sheet-item-glyph,
.sheet-item.is-row.is-exit .sheet-item-glyph {
  color: var(--warn-bad);
}
.sheet-item-chev { font-size: 1.2rem; line-height: 1; color: var(--navy-3); }

/* Leaving is set apart from the four, with a rule above it. */
.sheet-item.is-exit {
  margin-top: 2px;
  border-color: var(--wash-bad);
}

.report-sheet { border-top: 3px solid var(--line); }
.report-sheet.is-good { border-top-color: var(--warm-good); }
.report-sheet.is-bad { border-top-color: var(--warm-bad); }
.report-sheet .report-where {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.report-sheet .report-text { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.9rem; }
.report-sheet .report-deltas { display: flex; gap: 8px; flex-wrap: wrap; }
.report-sheet .report-consequence {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ink-3);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ------------------------------------------------------ seat detail */

.seat-detail { display: flex; flex-direction: column; gap: 11px; }

.sd-head { display: flex; align-items: flex-start; gap: 8px; }
.sd-back {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--cream);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.sd-back:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.sd-title { min-width: 0; }
.sd-name { margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.sd-where {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 7px;
}

.sd-leader {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--party);
  background: var(--ink-2);
}
.sd-leader .portrait { flex: none; border: 2px solid var(--party); }
.sd-leader-flag {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--party);
  color: var(--party-ink, #fff);
  font-size: 0.7rem;
  font-weight: 700;
}
.sd-leader-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sd-leader-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--party);
  font-weight: 700;
}
.sd-leader-name {
  font-family: var(--font-display);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-leader-party { font-size: 0.68rem; font-weight: 700; color: var(--muted-2); }
.sd-leader-figures {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}
.sd-leader-share {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.sd-rating { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; }

.sd-bars { display: flex; flex-direction: column; gap: 5px; }
.sd-bar {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
}
.sd-bar-party { font-weight: 700; color: var(--party); font-size: 0.7rem; }
.sd-bar-track {
  height: 10px;
  border-radius: 3px;
  background: var(--wash-ink);
  overflow: hidden;
}
.sd-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--party); }
.sd-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.sd-bar.is-leading .sd-bar-value { color: var(--cream); }
.sd-bar-who {
  grid-column: 2 / -1;
  font-size: 0.66rem;
  color: var(--muted-2);
  margin-top: -3px;
}

.sd-change {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--ink-3);
  font-size: 0.8rem;
  color: var(--muted);
}
.sd-change-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.sd-mla {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: transparent;
  font-size: 0.78rem;
}
.sd-mla-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sd-mla-name { font-weight: 600; }
.sd-mla-party { font-weight: 700; font-size: 0.72rem; }
.sd-mla-note { width: 100%; font-size: 0.66rem; color: var(--muted-2); }

.seat-history { display: flex; flex-direction: column; gap: 8px; }
.seat-history-toggle {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  min-height: 32px;
}
.seat-history-toggle:hover { color: var(--cream); border-color: var(--wheat-deep); }
.seat-history-toggle:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

/* --------------------------------------------------- the map, in a tab */

/*
 * The board is the screen, so it gets the room.
 *
 * It was 56vh under a strip of three money figures and above a table with
 * column headings. Both have gone, and the height they were using goes to
 * the map rather than to white space: 64vh leaves the round bar above and a
 * row of player cards below on a phone without either being scrolled to.
 *
 * Capped in pixels as well, because on a tall desktop window a proportional
 * height becomes a wall — Punjab is a fixed shape and past a point a larger
 * frame is only a larger margin around it.
 */
.screen-game .map-frame { height: min(64vh, 520px); border-radius: 12px; }
.screen-game .map-block { gap: 9px; }

/*
 * On a phone the board gives back what the cards need.
 *
 * The round, the board and the campaigns should be one screen: a strip you
 * have to scroll down to is a strip nobody reads while deciding. 56vh leaves
 * room for it on a 700px screen, which is the shortest phone this is drawn
 * for, and the map is still three quarters of what is on it.
 */
@media (max-width: 430px) {
  .screen-game .map-frame { height: min(56vh, 460px); }
}

/* ------------------------------------------------- results, compacted */

.g-results .round-results {
  padding: 15px 15px 17px;
  gap: 13px;
  border-radius: 14px;
}
.g-results .results-heading { font-size: 1.25rem; }

@media (min-width: 620px) {
  .g-inner { padding-top: 16px; gap: 14px; }
  .g-title { font-size: 1.2rem; }
  .g-round .round-steps { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-panel { animation: none; }
  .g-majority-fill,
  .sd-bar-fill { transition: none; }
}

/* ------------------------------------------------------------------
   The drill-down: candidate → constituency → campaign.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------- a candidate */

.areas { display: flex; flex-direction: column; gap: 11px; }

.ar-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.ar-title { display: flex; align-items: center; gap: 10px; }
.ar-title .portrait { flex: none; }
.ar-flag {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 700;
}
.ar-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ar-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-party { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; }

.ar-figures {
  display: flex;
  gap: 20px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.ar-figure { display: flex; flex-direction: column; gap: 1px; }
.ar-figure strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.ar-figure.is-private strong { color: var(--muted-2); }
.ar-figure-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ar-controls { display: flex; flex-direction: column; gap: 8px; }
.ar-sort { display: flex; align-items: center; gap: 8px; }
.ar-sort-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ar-sort-select {
  flex: 1;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--cream);
  font: inherit;
  font-size: 0.78rem;
  min-height: 34px;
}
.ar-sort-select:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.ar-count { margin: 0; font-size: 0.7rem; color: var(--muted-2); }

/* ---------------------------------------------------------- area rows */

.area-list { display: flex; flex-direction: column; gap: 3px; }

.area-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--party);
  background: var(--ink-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.area-row.is-close { border-left-color: var(--wheat); }
.area-row.is-losing { border-left-color: var(--rival); }
.area-row:hover { background: var(--ink-3); }
.area-row:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.area-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.area-name {
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.area-sub { display: flex; gap: 9px; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.area-mine { color: var(--party); font-weight: 700; }
.area-rival { color: var(--muted-2); }

.area-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--wash-ink);
  color: var(--muted-2);
}
.area-status.is-safe,
.area-status.is-leading { background: rgba(143, 220, 174, 0.16); color: var(--warm-good); }
.area-status.is-close { background: var(--wash-gold-2); color: var(--wheat); }
.area-status.is-losing { background: rgba(241, 146, 129, 0.16); color: var(--warm-bad); }
.area-chev { color: var(--muted-2); font-size: 0.95rem; line-height: 1; }

/* ------------------------------------------------------ campaign sheet */

.campaign-sheet { gap: 12px; }
.cs-body { display: flex; flex-direction: column; gap: 12px; }

.cs-head { display: flex; flex-direction: column; gap: 8px; }
.cs-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cs-figures {
  display: flex;
  gap: 18px;
  padding: 9px 0 0;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.cs-figure { display: flex; flex-direction: column; gap: 1px; }
.cs-figure-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cs-figure-value { font-variant-numeric: tabular-nums; font-size: 0.95rem; }

.cs-risky-toggle {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed var(--warn-bad);
  background: transparent;
  color: var(--warm-bad);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
}
.cs-risky-toggle:hover { border-style: solid; }
.cs-risky-toggle:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.cs-chosen > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-chosen {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid var(--wheat-deep);
  background: var(--ink-3);
}
.cs-change {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  min-height: 32px;
}
.cs-change:hover { color: var(--cream); border-color: var(--wheat-deep); }
.cs-change:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

.cs-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
}

.cs-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-amount {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}
.cs-amount:hover { color: var(--cream); border-color: var(--wheat-deep); }
.cs-amount:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }
.cs-amount.is-active {
  border-color: var(--wheat);
  background: var(--wash-gold-2);
  color: var(--cream);
}

.cs-slider { display: flex; align-items: center; gap: 12px; }
.cs-range { flex: 1; accent-color: var(--wheat); min-height: 30px; }
.cs-range:focus-visible { outline: 3px solid var(--river); outline-offset: 3px; }
.cs-range-value {
  min-width: 92px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--wheat);
}

/* ------------------------------------------------------ the result */

.result-sheet { border-top: 3px solid var(--line); }
.result-sheet.is-good { border-top-color: var(--warm-good); }
.result-sheet.is-bad { border-top-color: var(--warm-bad); }
.rs-headline { margin: 0; font-size: 0.95rem; color: var(--cream); }
.rs-moves { display: flex; flex-direction: column; gap: 4px; }
.rs-move {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--ink-3);
  border-left: 3px solid var(--party);
  font-size: 0.86rem;
}
.rs-move-party { font-weight: 700; color: var(--party); font-size: 0.72rem; }
.rs-move-value { font-variant-numeric: tabular-nums; }
.rs-was { color: var(--muted-2); }
.rs-text { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.rs-spent {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  color: var(--muted);
}
.rs-spent strong { color: var(--cream); font-variant-numeric: tabular-nums; }
.rs-next { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-next .btn { flex: 1; min-width: 140px; }

.btn-campaign { min-height: 50px; font-size: 0.95rem; }

@media (max-width: 400px) {
  .ar-figures { gap: 14px; }
  .cs-figures { gap: 12px; }
  .cs-range-value { min-width: 78px; font-size: 0.95rem; }
}


/* ==========================================================================
   The round that thins the field
   --------------------------------------------------------------------------
   A five-second card over the board at the end of the results break, saying
   what the round about to open is. It goes at the end of the break rather
   than at the start of the round, so it costs nobody a second of the round it
   is warning about.

   Shaped like a title card and not like a warning: this is a moment in a
   game, and a red banner would read as something having gone wrong.
   ========================================================================== */

.elim-note-layer:empty { display: none; }
.elim-note-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 22, 38, 0.72);
  backdrop-filter: blur(2px);
  animation: elim-in 0.28s ease both;
}

.elim-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: min(360px, 100%);
  padding: 26px 22px 24px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  background: var(--paper);
  text-align: center;
  box-shadow: 0 18px 50px rgba(12, 22, 38, 0.4);
  animation: elim-rise 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.elim-note-kicker {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.elim-note-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--gold-deep);
  text-wrap: balance;
}
.elim-note-round {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}
.elim-note-line {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--navy-2);
  max-width: 26ch;
}

@keyframes elim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes elim-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .elim-note-layer, .elim-note { animation: none; }
}

/* ==========================================================================
   Watching the rest of it
   --------------------------------------------------------------------------
   A campaign that has been put out keeps its connection, its board and its
   result. What it does not keep is any way to change them, so the screen says
   what it is rather than looking exactly as it did an hour ago.
   ========================================================================== */

.spectating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy-3);
  border-radius: 11px;
  background: var(--paper-2);
}
.spectating-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.spectating-line {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--navy-2);
  min-width: 0;
}

/* ==========================================================================
   Your own three figures
   --------------------------------------------------------------------------
   What a tap on your own card opens. Small on purpose: it is the number that
   was tapped, at a size worth reading, and the way to the ledger under it.
   ========================================================================== */

.own-panel { gap: 14px; }

.own-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.own-face { flex: none; }
.own-face .portrait {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--party, var(--gold));
}
.own-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.own-party {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.own-name {
  font-size: 0.74rem;
  color: var(--navy-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.own-lines { display: flex; flex-direction: column; gap: 1px; }
.own-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.own-line:last-child { border-bottom: 0; }
.own-line-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy-3);
}
.own-line-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}