/* Podium (life counter): full-screen table. Values come from docs/podium-handoff/podium-reference.css.
   Uses the site's Nightfall tokens (timewalked.css) plus six seat accents. */

/* ---------- Seat accents: seat identity only (badge ring, 9% tile tint, chart lines). Never mana, never state. ---------- */
:root {                                    /* light */
  --seat-1: #5b44a3; --seat-2: #7a5810; --seat-3: #1c6b68;
  --seat-4: #9c2f62; --seat-5: #6c3b91; --seat-6: #5d5446;
}
:root[data-theme="dark"] {
  --seat-1: #b8a4f0; --seat-2: #d9b058; --seat-3: #73c6c2;
  --seat-4: #eb98b8; --seat-5: #a77ccc; --seat-6: #ddd3c3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seat-1: #b8a4f0; --seat-2: #d9b058; --seat-3: #73c6c2;
    --seat-4: #eb98b8; --seat-5: #a77ccc; --seat-6: #ddd3c3;
  }
}

/* ---------- App shell: no site chrome, no scrolling, no backdrop on the live table ---------- */
html.podium-html { height: 100%; }
html.podium-html::after, body.podium::before, body.podium::after { display: none !important; }
html, body.podium { height: 100%; }
body.podium {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--text);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.podium-noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; }
.podium button { font-family: var(--font-body); }

.podium-table {
  position: fixed; inset: 0; box-sizing: border-box;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid; gap: 8px;
}
/* Pod sizes. Seen from above the seats run clockwise from the bottom left. Portrait is a phone held upright with the
   long sides of the table on the left and right; landscape (and tablet) puts two rows of tiles facing each other.
   Row and column weights come from the design mockups (table-2/3/4/5/6-players, table-phone-landscape, table-tablet-4/6). */
.podium-table[data-orient="portrait"][data-seats="2"] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2" "band" "s1"; }
.podium-table[data-orient="portrait"][data-seats="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 250fr) auto minmax(0, 462fr); grid-template-areas: "s2 s2" "band band" "s1 s3"; }
.podium-table[data-orient="portrait"][data-seats="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2 s3" "band band" "s1 s4"; }
.podium-table[data-orient="portrait"][data-seats="5"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 190fr) minmax(0, 257fr) auto minmax(0, 257fr); grid-template-areas: "s3 s3" "s2 s4" "band band" "s1 s5"; }
/* Six on a phone: three per long side, and the controls become a narrow column down the middle. */
.podium-table[data-orient="portrait"][data-seats="6"] { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-areas: "s3 band s4" "s2 band s5" "s1 band s6"; }

.podium-table[data-orient="landscape"][data-seats="2"] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2" "band" "s1"; }
.podium-table[data-orient="landscape"][data-seats="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2 s2" "band band" "s1 s3"; }
.podium-table[data-orient="landscape"][data-seats="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2 s3" "band band" "s1 s4"; }
.podium-table[data-orient="landscape"][data-seats="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2 s2 s3 s3 s4 s4" "band band band band band band" "s1 s1 s1 s5 s5 s5"; }
.podium-table[data-orient="landscape"][data-seats="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "s2 s3 s4" "band band band" "s1 s6 s5"; }

.seat-cell[data-seat="1"] { grid-area: s1; }
.seat-cell[data-seat="2"] { grid-area: s2; }
.seat-cell[data-seat="3"] { grid-area: s3; }
.seat-cell[data-seat="4"] { grid-area: s4; }
.seat-cell[data-seat="5"] { grid-area: s5; }
.seat-cell[data-seat="6"] { grid-area: s6; }

/* ---------- Life tile ---------- */
.seat-cell { position: relative; overflow: hidden; border-radius: 18px; container-type: size; min-width: 0; min-height: 0; }
.seat-face {
  position: absolute; left: 50%; top: 50%;
  width: var(--face-w, 100%); height: var(--face-h, 100%);
  transform: translate(-50%, -50%) rotate(var(--seat-rot, 0deg));
  box-sizing: border-box; padding: 12px 14px 14px; border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--seat-color) 9%, var(--surface));
  display: flex; flex-direction: column;
}
.seat-cell[data-rot="90"] .seat-face,
.seat-cell[data-rot="-90"] .seat-face { --face-w: 100cqh; --face-h: 100cqw; }

.seat-face__head { display: flex; align-items: center; gap: 10px; min-height: 44px; position: relative; z-index: 2; pointer-events: none; }
.seat-face__who { min-width: 0; flex: 1; line-height: 1.2; }
.seat-face__name { font: 600 16px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-face__commander { font: 500 12px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-face__commander.is-unknown { font-style: italic; }

.seat-face__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; position: relative; }
.seat-face__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.seat-face__hint { font: 500 30px/1 var(--font-body); color: var(--text-muted); opacity: 0.55; width: 40px; text-align: center; }
.seat-face__lifewrap { position: relative; }
.seat-face__life {
  font-family: var(--font-display); font-weight: 700; line-height: 1; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
  font-size: min(48cqmin, 140px);
}
.seat-face__note { display: flex; align-items: center; gap: 6px; min-height: 16px; font: 600 12px var(--font-body); color: var(--text-muted); text-align: center; }
.seat-face__note:empty { display: none; }

/* The two halves are real buttons, below the header row (44px + padding). Left is minus, right is plus,
   from the point of view of the player the tile is turned toward. */
.seat-face__tap { position: absolute; top: 56px; bottom: 0; width: 50%; border: 0; background: transparent; cursor: pointer; z-index: 1; touch-action: manipulation; }
.seat-face__tap--minus { left: 0; border-radius: 0 0 0 18px; }
.seat-face__tap--plus  { right: 0; border-radius: 0 0 18px 0; }
.seat-face__tap:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
.seat-face__tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Running change, e.g. "-3": fades after 2.4 s without a tap on that seat. */
.seat-face__delta {
  position: absolute; left: 100%; top: 6px; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--line-strong);
  font: 700 17px var(--font-body); white-space: nowrap; color: var(--text);
  animation: podium-delta-in 160ms ease-out;
}
@keyframes podium-delta-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* States */
.seat-face__pill {
  position: absolute; right: 14px; top: 22px; z-index: 3; padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 700 12px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none;
}
.seat-face__pill--out { background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--line-strong); }
.seat-face__pill--winner { background: var(--flag-cool); color: var(--on-seat, var(--bg)); }
.seat-face.is-warn .seat-face__note { color: var(--flag-warm); }
.seat-face.is-lethal .seat-face__life { color: var(--flag-danger); }
.seat-face.is-lethal::before { content: ""; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--flag-danger); pointer-events: none; z-index: 3; }
.seat-face.is-lethal .seat-face__note { color: var(--flag-danger); }
.seat-face.is-out { background: var(--surface-sunk); opacity: 0.78; }
.seat-face.is-out .seat-face__life { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 3px; font-size: min(30cqmin, 87px); }
.seat-face.is-out .seat-face__note { color: var(--flag-danger); font-weight: 600; font-size: 13px; }
.seat-face.is-out .seat-face__tap { display: none; }
.seat-face.is-out .seat-face__hint { visibility: hidden; }

/* Lethal tile: a real button the table presses to confirm. Sits above the tap halves. */
.seat-face__ko {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--flag-danger); background: var(--surface-raised); color: var(--flag-danger);
  font: 700 14px var(--font-body);
}

/* ---------- Seat badge: sundial numerals (Roman I to VI in a double ring). Never smaller than 28px. ---------- */
.seat-badge {
  flex: none; position: relative; width: 32px; height: 32px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--seat-color);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--font-display); letter-spacing: 0.02em; color: var(--text);
}
.seat-badge::before { content: ""; position: absolute; inset: 2.5px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--seat-color) 55%, transparent); }
.seat-badge--long { font-size: 12px; }          /* III, IV, VI and longer */

/* ---------- Controls band and pod bar ---------- */
.table-band { grid-area: band; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 2px 0; min-width: 0; }
.table-band__row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; }
.table-band__group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.table-band__group--right { flex: 1; justify-content: flex-end; }
.table-band__group--right .band-first { flex: 1 1 auto; }
.band-btn {
  min-height: 44px; min-width: 44px; box-sizing: border-box; padding: 0; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 14px var(--font-body); cursor: pointer;
}
.band-btn--wide { padding: 0 12px; }
.band-btn:disabled { opacity: 0.45; cursor: default; }
.band-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.band-first { font: 700 15px/1.15 var(--font-display); color: var(--text); text-align: right; min-width: 0; }
.band-first:empty { display: none; }
.pod-bar { font: 600 12px var(--font-body); color: var(--text-muted); white-space: nowrap; letter-spacing: 0.02em; }
.pod-bar strong { font: 700 14px var(--font-display); color: var(--text); }
.pod-bar.is-syncing::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--flag-warm); }

/* Landscape and tablet: two rows facing each other, controls on a single line between them. */
.podium-table[data-orient="landscape"] .table-band { flex-direction: row; justify-content: space-between; gap: 12px; }
.podium-table[data-orient="landscape"] .table-band__row { width: auto; display: contents; }
.podium-table[data-orient="landscape"] .pod-bar { order: 2; flex: 1; text-align: center; }
.podium-table[data-orient="landscape"] .table-band__group--left { order: 1; }
.podium-table[data-orient="landscape"] .table-band__group--right { order: 3; }

/* ---------- Sheets (table-wide ones rise upright from the bottom) ---------- */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); z-index: 20; }
.sheet {
  box-sizing: border-box; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--surface-raised);
  border: 1px solid var(--line-strong); border-radius: 22px 22px 0 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 10px;
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 480px); z-index: 21;
  color: var(--text);
}
.sheet__grip { align-self: center; width: 44px; height: 5px; border-radius: 999px; background: var(--line-strong); }
.sheet__title { margin: 4px 0 0; font: 600 20px var(--font-display); }
.sheet__hint { margin: 0; font: 400 14px/1.4 var(--font-body); color: var(--text-muted); }
.sheet__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; box-sizing: border-box;
  padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 600 16px var(--font-body); text-align: left; cursor: pointer;
}
.sheet__item--danger { border-color: var(--flag-danger); color: var(--flag-danger); }
.sheet__item:focus-visible, .sheet__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet__done {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 700 16px var(--font-body); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .seat-face__delta { animation: none; }
}

.band-btn svg { flex: none; }

/* Six seats on a phone held upright: the controls are a 56px column of icon buttons between the two sides of the table. */
.podium-table[data-orient="portrait"][data-seats="6"] .table-band { flex-direction: column; justify-content: space-between; gap: 6px; padding: 0; }
.podium-table[data-orient="portrait"][data-seats="6"] .table-band__row { display: contents; }
.podium-table[data-orient="portrait"][data-seats="6"] .table-band__group { flex-direction: column; gap: 6px; }
.podium-table[data-orient="portrait"][data-seats="6"] .table-band__group--right { flex: 1; justify-content: space-between; }
.podium-table[data-orient="portrait"][data-seats="6"] .band-btn { width: 44px; padding: 0; }
.podium-table[data-orient="portrait"][data-seats="6"] .band-btn span { display: none; }
.podium-table[data-orient="portrait"][data-seats="6"] .band-first { order: -1; flex: 0 0 auto; text-align: center; font-size: 12px; }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar { order: -2; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 40%; overflow: hidden; text-overflow: ellipsis; }

/* Segmented choices in a sheet (pod size, starting life) */
.sheet__group { display: flex; flex-direction: column; gap: 6px; }
.sheet__grouplabel { font: 600 13px var(--font-body); color: var(--text-muted); letter-spacing: 0.02em; }
.sheet__choices { display: flex; gap: 8px; }
.sheet__choice {
  flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 700 16px var(--font-display); cursor: pointer;
}
.sheet__choice[aria-checked="true"] { border: 2px solid var(--accent); background: var(--surface-sunk); }
.sheet__choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Details button on a tile ---------- */
.seat-face__details {
  flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
}
.seat-face__details:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seat-badge--sm { width: 28px; height: 28px; font-size: 13px; }
.seat-badge--sm.seat-badge--long { font-size: 11px; }

/* ---------- Seat sheets: turned toward their seat, bottom edge on that player's side ---------- */
.sheet--seat {
  bottom: auto; border-radius: 22px 22px 18px 18px; overflow-y: auto; max-width: none; padding-bottom: 18px;
  transform-origin: center center;
}
.sheet--tall { max-height: 92vh; overflow-y: auto; }
.sheet__head { display: flex; align-items: center; gap: 10px; }
.sheet__who { min-width: 0; flex: 1; line-height: 1.2; }
.sheet__name { font: 600 16px var(--font-body); color: var(--text); }
.sheet__sub { font: 500 13px var(--font-body); color: var(--text-muted); }
.sheet__donebtn {
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 700 15px var(--font-body); cursor: pointer;
}
.sheet__label { font: 600 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 6px; }
.sheet__eyebrow { font: 600 12px var(--font-body); letter-spacing: 0.06em; color: var(--text-muted); }
.sheet__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px 22px; align-items: start; }
.sheet__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sheet__concede { min-height: 48px; margin-top: 4px; justify-content: center; }
.sheet__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet__title2 { font: 700 22px var(--font-display); color: var(--text); }
.sheet__actions { display: flex; gap: 10px; margin-top: auto; }
.sheet__actions .sheet__done, .sheet__actions .sheet__confirm { flex: 1; }
.sheet__confirm {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--flag-danger); background: var(--flag-danger); color: var(--bg);
  font: 700 16px var(--font-body); cursor: pointer;
}
.sheet__confirm:focus-visible, .sheet__donebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A row in the details sheet: who it is about, and a stepper */
.dmg-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.dmg-row.is-out { opacity: 0.5; }
.dmg-row__who { min-width: 0; flex: 1; line-height: 1.2; }
.dmg-row__name { font: 600 15px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmg-row__sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.dmg-row__sub.is-warn { color: var(--flag-warm); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper__btn {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 600 22px var(--font-body); cursor: pointer; line-height: 1;
}
.stepper__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stepper__value { min-width: 56px; text-align: center; font: 700 22px var(--font-display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.stepper__of { font: 500 12px var(--font-body); color: var(--text-muted); margin-left: 2px; }

/* Knockout chips */
.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-row__label { font: 600 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.chip-row__hint { font: 500 12px var(--font-body); color: var(--text-muted); }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--text); font: 600 14px var(--font-body); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.chip--seat { padding: 0 12px 0 6px; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-row { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.note-row__input {
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-sunk); color: var(--text); font: 500 14px var(--font-body); -webkit-user-select: text; user-select: text;
}

/* Game over */
.result-list { display: flex; flex-direction: column; gap: 8px; }
.result-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.result-row__tag { flex: none; width: 64px; font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.result-row__who { min-width: 0; flex: 1; line-height: 1.25; }
.result-row__name { font: 600 14px var(--font-body); color: var(--text); }
.result-row__detail { font: 500 12px var(--font-body); color: var(--text-muted); }

/* Poison is a drop icon, not a word (tile note and the details sheet) */
.seat-face__note svg { flex: none; }
.poison-icon {
  flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--flag-cool); background: var(--surface);
}
.poison-icon svg { width: 22px; height: 22px; }

/* ---------- Screens around the table: start, invite, join, waiting ---------- */
.pd-screen { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); -webkit-user-select: text; user-select: text; }
.pd-screen__inner {
  box-sizing: border-box; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.pd-eyebrow { margin: 0; font: 700 12px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pd-title { margin: 0; font: 500 32px/1.1 var(--font-display); color: var(--text); }
.pd-hint { margin: 0; font: 400 15px/1.45 var(--font-body); color: var(--text-muted); }
.pd-hint--small { font-size: 13px; }
.pd-error { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--flag-danger); color: var(--flag-danger); font: 600 14px/1.4 var(--font-body); }
.pd-field, .pd-group { display: flex; flex-direction: column; gap: 6px; }
.pd-group__label { font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pd-input {
  box-sizing: border-box; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface-sunk); color: var(--text); font: 500 17px var(--font-body);
}
.pd-input:focus-visible, .code-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-choice {
  flex: 1 1 auto; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: 600 16px var(--font-body); cursor: pointer;
}
.pd-choice[aria-checked="true"], .pd-seat[aria-checked="true"] { border: 2px solid var(--accent); background: var(--surface-sunk); }
.pd-choice:focus-visible, .pd-seat:focus-visible, .pd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-btn {
  min-height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 700 17px var(--font-body); cursor: pointer;
}
.pd-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pd-btn--quiet { background: transparent; border-color: transparent; color: var(--text-muted); font-weight: 600; }
.pd-btn:disabled { opacity: 0.5; cursor: default; }

.pd-qr { align-self: center; padding: 10px; border-radius: 16px; background: #ffffff; line-height: 0; }
.pd-qr__img { display: block; width: min(220px, 60vw); height: auto; }
.code-boxes { display: flex; justify-content: center; gap: 10px; }
.code-box {
  width: 56px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--surface); font: 700 40px var(--font-display); color: var(--text);
}
.code-input {
  width: 56px; height: 68px; box-sizing: border-box; text-align: center; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 700 36px var(--font-display); text-transform: uppercase;
}
.pd-seatpick { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-seat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px 0 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 15px var(--font-body); cursor: pointer;
}
.pd-seat:disabled { opacity: 0.45; cursor: default; }
.pd-seatlist { display: flex; flex-direction: column; gap: 8px; }
.pd-seatrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pd-seatrow.is-open { border-style: dashed; background: transparent; opacity: 0.8; }
.pd-seatrow__name { font: 600 16px var(--font-body); color: var(--text); }
.pd-seatrow__sub { font: 500 13px var(--font-body); color: var(--text-muted); }
.pd-you { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.pd-you__name { font: 600 18px var(--font-body); color: var(--text); }

/* ---------- Player view: one's own phone in a session ---------- */
.podium-table[data-mode="player"] { display: flex; flex-direction: column; gap: 8px; }
.player-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.player-head__who { min-width: 0; flex: 1; line-height: 1.2; }
.player-head__name { font: 600 16px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-head__sub { font: 500 12px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-head__status { font: 600 12px var(--font-body); color: var(--flag-cool); display: inline-flex; align-items: center; gap: 6px; }
.player-head__status::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.player-head__status.is-syncing { color: var(--flag-warm); }
.podium-table[data-mode="player"] .seat-cell { flex: 1 1 0; min-height: 190px; }
.pod-bar--player { text-align: center; }
.player-others { display: flex; flex-direction: column; gap: 6px; max-height: 38%; overflow-y: auto; }
.other-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.other-row.is-out { opacity: 0.55; }
.other-row.is-lethal { border-color: var(--flag-danger); }
.other-row__who { min-width: 0; flex: 1; line-height: 1.2; }
.other-row__name { font: 600 14px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.other-row__sub { font: 500 12px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.other-row__life { min-width: 44px; text-align: center; font: 700 24px var(--font-display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.other-row__btn, .other-row__more {
  flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-raised);
  color: var(--text); font: 600 22px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.other-row__ko { flex: none; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--flag-danger); background: var(--surface-raised); color: var(--flag-danger); font: 700 12px var(--font-body); cursor: pointer; }
.player-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.player-actions .band-first { flex: 1 1 auto; }

/* A details sheet narrower than two columns need: one column, tighter steppers */
.sheet--narrow .sheet__cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sheet--narrow .sheet__donebtn { padding: 0 14px; }
.sheet--narrow .stepper__btn { width: 40px; height: 44px; }
.sheet--narrow .stepper__value { min-width: 50px; font-size: 20px; }
.sheet--narrow .dmg-row { gap: 8px; }
.sheet--narrow .dmg-row__name { white-space: normal; }

/* ---------- Decks: the picker, the "your deck" block, scores on a player's own phone ---------- */
.pd-deck { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pd-deck__line { font: 600 17px var(--font-body); color: var(--text); }
.pd-deck__sub { font: 500 13px/1.4 var(--font-body); color: var(--text-muted); }
.pd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; min-height: 64px;
  padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
}
.pd-option:disabled { opacity: 0.6; cursor: default; }
.pd-option:focus-visible, .pd-deckrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-option__text { display: flex; flex-direction: column; gap: 2px; }
.pd-option__title { font: 700 16px var(--font-body); }
.pd-option__sub { font: 500 13px var(--font-body); color: var(--text-muted); }
.pd-soon { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); font: 700 11px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pd-panel { display: flex; flex-direction: column; gap: 10px; }
.pd-decklist { display: flex; flex-direction: column; gap: 8px; }
.pd-deckrow {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; box-sizing: border-box; min-height: 56px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
}
.pd-deckrow__title { font: 600 15px var(--font-body); }
.pd-deckrow__sub { font: 500 13px var(--font-body); color: var(--text-muted); }

.player-score { font: 600 13px/1.4 var(--font-body); color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.player-score:empty { display: none; }
.player-score__only { font: 500 12px var(--font-body); color: var(--text-muted); }
.pod-note { font: 500 12px/1.4 var(--font-body); color: var(--flag-warm); text-align: center; }
.pod-note:empty { display: none; }

/* Partner commander damage: an indented row under its player */
.dmg-row--partner { margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--line-strong); }
.sheet__sub--hint { margin: -4px 0 4px; }

/* ---------- Tips and the short message that goes away by itself ---------- */
.pd-tip { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface-raised); }
.pd-tip__title { font: 700 15px var(--font-body); color: var(--text); }
.pd-tip__text { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--text-muted); }
.pd-tip__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pd-tip__btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 14px var(--font-body); cursor: pointer; }
.pd-tip__btn:focus-visible, .pd-toast__ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pd-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  width: min(92vw, 420px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); color: var(--text);
}
.pd-toast__body { flex: 1; min-width: 0; }
.pd-toast__title { font: 700 15px var(--font-body); }
.pd-toast__text { font: 400 13px/1.4 var(--font-body); color: var(--text-muted); }
.pd-toast__ok { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 700 14px var(--font-body); cursor: pointer; }

/* ---------- Step 7: the pod, the host switch, adding a commander ---------- */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; box-sizing: border-box; min-height: 64px;
  padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
}
.switch-row:disabled { opacity: 0.6; }
.switch-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-row__title { font: 700 15px var(--font-body); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.switch-row__sub { font: 400 13px/1.4 var(--font-body); color: var(--text-muted); }
.switch { flex: none; position: relative; width: 52px; height: 32px; border-radius: 999px; box-sizing: border-box; background: var(--surface-sunk); border: 1px solid var(--line-strong); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--text-muted); transition: left 150ms ease; }
[aria-checked="true"] > .switch { background: var(--accent); border-color: var(--accent); }
[aria-checked="true"] > .switch::after { left: 23px; background: var(--on-accent); }

.pod-avg { display: flex; align-items: baseline; gap: 12px; }
.pod-avg__label { font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pod-avg__value { font: 700 44px/1 var(--font-display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.pod-range { position: relative; height: 56px; margin: 4px 10px 6px; border-bottom: 2px solid var(--line-strong); }
.pod-range__tick { position: absolute; bottom: -22px; transform: translateX(-50%); font: 600 12px var(--font-body); color: var(--text-muted); }
.pod-range__dot { position: absolute; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 999px; background: var(--accent); border: 2px solid var(--surface-raised); }
.pod-note--sheet { text-align: left; font-size: 13px; }

.seat-face__add {
  pointer-events: auto; min-height: 44px; padding: 0 14px; margin-top: 4px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); background: transparent; color: var(--text-muted); font: 600 13px var(--font-body); z-index: 4; position: relative;
}
.seat-face__add:focus-visible, .other-row__add:focus-visible, .result-row__add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.other-row__add, .result-row__add {
  flex: none; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1.5px dashed var(--line-strong); background: transparent;
  color: var(--text-muted); font: 600 12px var(--font-body); cursor: pointer;
}
.result-row__add { margin-top: 6px; align-self: flex-start; }
.sheet__confirm--accent { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sheet__confirm:disabled { opacity: 0.5; }
.other-row__who .other-row__add { display: block; margin-top: 4px; min-height: 32px; }
.other-row__who .other-row__add[hidden] { display: none; }

/* ---------- Commander art behind the life total ----------
   Faint, and washed with the tile's own color: strongest over the name at the top and the notes at the bottom, so the
   text stays easy to read, and lightest behind the big number in the middle where it can be seen. */
.seat-face__art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; display: flex; }
.seat-face__art[hidden] { display: none; }
.seat-face__art > span { flex: 1 1 0; min-width: 0; background-size: cover; background-position: center 22%; opacity: 0.55; }
.seat-face__art > span[hidden] { display: none; }
.seat-face__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 90%, transparent) 0%,
    color-mix(in srgb, var(--surface) 60%, transparent) 26%,
    color-mix(in srgb, var(--surface) 38%, transparent) 52%,
    color-mix(in srgb, var(--surface) 70%, transparent) 80%,
    color-mix(in srgb, var(--surface) 88%, transparent) 100%);
}
.seat-face.is-out .seat-face__art { opacity: 0.4; }
.seat-face__life { text-shadow: 0 1px 14px color-mix(in srgb, var(--bg) 70%, transparent); }

/* ---------- Saving a finished game ---------- */
.save-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.save-box__title { font: 700 15px var(--font-body); color: var(--flag-cool); }
.save-box__text { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--text); }
.save-box__hint { margin: 0; font: 400 13px/1.4 var(--font-body); color: var(--text-muted); }
.save-box__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--text); font: 700 15px var(--font-body); text-decoration: none; background: var(--surface-raised); }
.save-box .sheet__confirm { width: 100%; }

/* ---------- Your games ---------- */
.pd-hub { display: flex; flex-direction: column; gap: 10px; }
.pd-hub:empty { display: none; }
.pd-hub__links { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-live { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--accent); background: var(--surface); }
.pd-live__line { font: 600 15px var(--font-body); color: var(--text); }
.pd-backlink { align-self: flex-start; padding: 10px 0; color: var(--text-muted); font: 600 14px var(--font-body); }
.pd-linkbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 700 14px var(--font-body); text-decoration: none;
}
.pd-gamelist { display: flex; flex-direction: column; gap: 8px; }
.pd-game {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; min-height: 56px;
}
.pd-game:focus-visible, .pd-linkbtn:focus-visible, .pd-backlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-game__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-game__title { font: 700 16px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-game__sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.pd-game__result { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font: 700 12px var(--font-body); }
.pd-game__result.is-win { border-color: var(--flag-cool); color: var(--flag-cool); }

.pd-gamepage { display: flex; flex-direction: column; gap: 12px; }
.pd-chartbox { padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pd-chart { display: block; max-width: 100%; height: auto; }
.pd-chart__guide { stroke: var(--line-strong); stroke-dasharray: 4 4; stroke-width: 1; }
.pd-chart__zero { stroke: var(--flag-danger); stroke-width: 1; opacity: 0.6; }
.pd-chart__axis { fill: var(--text-muted); font: 500 10px var(--font-body); }
.pd-chart__num { font: 600 12px var(--font-display); }
.pd-results { display: flex; flex-direction: column; gap: 8px; }
.pd-result { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pd-result.is-mine { border-color: var(--accent); }
.pd-result__top { display: flex; align-items: flex-start; gap: 10px; }
.pd-result__tag { flex: none; width: 58px; padding-top: 6px; font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pd-result__who { min-width: 0; flex: 1; line-height: 1.3; }
.pd-result__name { font: 600 14px var(--font-body); color: var(--text); }
.pd-result__sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.pd-result__note { font: italic 500 12px var(--font-body); color: var(--text-muted); }
.pd-fix { align-self: flex-start; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--text-muted); font: 600 12px var(--font-body); cursor: pointer; }
.pd-editor { display: flex; flex-direction: column; gap: 8px; }
.pd-editor__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-editor__actions .pd-btn { min-height: 44px; font-size: 14px; }

/* ---------- Your numbers ---------- */
.pd-stat-line { font: 700 18px var(--font-display); color: var(--text); }
.pd-stats { display: flex; flex-direction: column; gap: 10px; }
.pd-stats:empty { display: none; }
.pd-bigstat { font: 700 34px/1.1 var(--font-display); color: var(--text); }
.pd-statlist { display: flex; flex-direction: column; gap: 6px; }
.pd-statrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.pd-statrow__text { min-width: 0; }
.pd-statrow__title { font: 600 14px var(--font-body); color: var(--text); }
.pd-statrow__sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.pd-statrow__count { flex: none; font: 700 13px var(--font-body); color: var(--text); }
.pd-confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--flag-danger); background: var(--surface); }

.pd-status { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--flag-danger); color: var(--flag-danger); font: 700 14px/1.35 var(--font-body); }
.pd-status[hidden] { display: none; }
.pd-status::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: pd-spin 0.8s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-status::before { animation: none; } }
.is-busy .pd-option, .is-busy .pd-deckrow, .is-busy .pd-btn { opacity: 0.5; pointer-events: none; }
.pd-textarea { width: 100%; min-height: 110px; resize: vertical; font: 500 14px/1.4 var(--font-body); }

/* The pod's bracket in the middle of the table, large enough to read from across it. */
.pod-bar--center { display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: normal; text-align: center; line-height: 1.15; }
.pod-bar--center .pod-bar__label { font: 600 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.pod-bar--center .pod-bar__avg { font: 700 32px/1 var(--font-display); color: var(--text); }
.pod-bar--center .pod-bar__range { font: 600 12px var(--font-body); color: var(--text-muted); }
.podium-table[data-orient="landscape"] .pod-bar--center .pod-bar__avg { font-size: 36px; }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar--center { flex-direction: row; gap: 6px; align-items: baseline; white-space: nowrap; }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar--center .pod-bar__avg { font-size: 18px; }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar--center .pod-bar__label { display: none; }

/* ---------- Pod bracket in the middle, tighter: the label and the number on one line, the range under it ---------- */
.table-band { gap: 3px; padding: 0; }
.pod-bar--center { gap: 0; line-height: 1.1; }
.pod-bar--center .pod-bar__top { display: inline-flex; align-items: baseline; gap: 8px; }
.pod-bar--center .pod-bar__label { font: 600 10px var(--font-body); letter-spacing: 0.1em; }
.pod-bar--center .pod-bar__avg { font: 700 24px/1 var(--font-display); }
.podium-table[data-orient="landscape"] .pod-bar--center .pod-bar__avg { font-size: 26px; }
.pod-bar--center .pod-bar__range { font: 600 11px var(--font-body); }
.pod-range-text.is-wide { color: var(--flag-danger); font-weight: 800; }
.pod-bar--player .pod-range-text.is-wide { color: var(--flag-danger); }
.pod-avg__range { text-align: center; font: 700 15px var(--font-body); margin: -2px 0 6px; color: var(--text-muted); }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar--center .pod-bar__top { gap: 5px; }
.podium-table[data-orient="portrait"][data-seats="6"] .pod-bar--center .pod-bar__avg { font-size: 18px; }

/* ---------- Poison and commander damage, small, under the life total ---------- */
.seat-face__counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 0; }
.seat-face__counts:empty { display: none; }
.count-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px;
  border: 1px solid var(--chip-color, var(--line-strong)); background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
  font: 700 12px/1.3 var(--font-body); color: var(--text);
}
.count-chip svg { width: 12px; height: 12px; }
.count-chip--poison { --chip-color: var(--flag-warm); }
.count-chip--cmd::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--chip-color); }

/* ---------- The roll for who goes first ---------- */
.seat-face, .other-row { transition: box-shadow 90ms ease-out, scale 90ms ease-out; }
.seat-face.is-rolling, .other-row.is-rolling { scale: 1.02; z-index: 2; }
.seat-face.is-first, .other-row.is-first { z-index: 2; animation: podium-first 0.8s ease-in-out infinite alternate; }
/* The glow is drawn on top of the card art, inside the edge of the tile. */
.seat-face.is-rolling::after, .seat-face.is-first::after, .other-row.is-rolling::after, .other-row.is-first::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 5px var(--seat-color, var(--accent)), inset 0 0 60px color-mix(in srgb, var(--seat-color, var(--accent)) 80%, transparent);
}
.seat-face.is-first::after, .other-row.is-first::after {
  box-shadow: inset 0 0 0 8px var(--seat-color, var(--accent)), inset 0 0 100px var(--seat-color, var(--accent));
}
.seat-face.is-first, .other-row.is-first { box-shadow: 0 0 40px var(--seat-color, var(--accent)); }
.other-row { position: relative; }
.other-row[data-seat="1"] { --seat-color: var(--seat-1); } .other-row[data-seat="2"] { --seat-color: var(--seat-2); }
.other-row[data-seat="3"] { --seat-color: var(--seat-3); } .other-row[data-seat="4"] { --seat-color: var(--seat-4); }
.other-row[data-seat="5"] { --seat-color: var(--seat-5); } .other-row[data-seat="6"] { --seat-color: var(--seat-6); }
@keyframes podium-first { from { scale: 1; } to { scale: 1.045; } }
.dice-banner {
  position: fixed; left: 50%; top: 50%; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 16px 26px;
  transform: translate(-50%, -50%); border-radius: 22px; background: var(--surface-raised); color: var(--text);
  border: 3px solid var(--seat-color); box-shadow: 0 0 60px var(--seat-color), 0 20px 50px rgba(0, 0, 0, 0.5);
  pointer-events: none; animation: podium-banner 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.dice-banner .seat-badge { width: 44px; height: 44px; font-size: 20px; }
.dice-banner__name { font: 700 26px/1.1 var(--font-display); white-space: nowrap; }
.dice-banner__sub { font: 700 13px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
@keyframes podium-banner { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .seat-face.is-first, .other-row.is-first, .dice-banner { animation: none; }
  .seat-face, .other-row { transition: none; }
}

.other-row__score { font: 700 12px var(--font-body); color: var(--accent); margin-top: 1px; }
.other-row__score[hidden] { display: none; }

.pd-account { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-body); color: var(--text-muted); }
.pd-account__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--flag-cool, #7bd3a0); }

/* ---------- Life by colour: amber under three quarters of the starting life, red under half ---------- */
.seat-face.life-mid .seat-face__life, .other-row.life-mid .other-row__life { color: var(--flag-warm); }
.seat-face.life-low .seat-face__life, .other-row.life-low .other-row__life { color: var(--flag-danger); }

/* ---------- Poison in the details sheet: a title, then the stepper on its own line ---------- */
.poison-block { display: flex; flex-direction: column; gap: 8px; }
.poison-block__head { display: flex; align-items: center; gap: 10px; }
.poison-block .stepper { align-self: flex-start; }

/* ---------- The new game button in the middle of the table ---------- */
.table-band__group--mid { flex: none; justify-content: center; }
.band-btn--again { border-radius: 999px; }
.podium-table[data-orient="portrait"][data-seats="6"] .table-band__group--mid { order: 0; }

/* Press and hold a commander row (for the partner) without the phone offering to select text or copy */
.dmg-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; }

/* The site was updated while the page was open */
.pd-update { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--accent); color: var(--text); font: 600 14px var(--font-body); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.pd-update__btn { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent, #fff); font: 700 14px var(--font-body); cursor: pointer; }

/* The new game button: exactly in the middle of the strip between the two halves of the table, whatever is either side of it */
.table-band { position: relative; }
.table-band__row { position: relative; }
.table-band__group--mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; }
.table-band__group--right .band-first { max-width: 7.5em; }
.podium-table[data-orient="landscape"] .table-band__group--mid { position: static; transform: none; order: 3; }
.podium-table[data-orient="landscape"] .table-band__group--right { order: 4; }
.podium-table[data-orient="portrait"][data-seats="6"] .table-band__group--mid { position: static; transform: none; order: 0; }

/* Picking the winner */
.winner-list { display: flex; flex-direction: column; gap: 8px; }
.winner-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 16px var(--font-body);
}
.winner-row[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.winner-row__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.winner-row__name { font: 700 16px var(--font-body); }
.winner-row__sub { font: 500 12px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner-row__tag { font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.winner-row--none { color: var(--text-muted); }
.sheet__confirm:disabled { opacity: 0.45; cursor: default; }


/* Wide layout (a computer, an iPad on its side): the button is exactly in the middle, the pod text sits to its left,
   the dice and undo at the far left and the menu at the far right. */
.podium-table[data-orient="landscape"] .table-band { position: relative; justify-content: space-between; }
.podium-table[data-orient="landscape"] .table-band__group--mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); order: 0; }
.podium-table[data-orient="landscape"] .pod-bar { position: absolute; right: calc(50% + 36px); top: 50%; transform: translateY(-50%); flex: none; order: 0; text-align: right; max-width: calc(50% - 36px - 200px); }
.podium-table[data-orient="landscape"] .pod-bar--center { align-items: flex-end; }
.podium-table[data-orient="landscape"] .table-band__group--left { order: 1; }
.podium-table[data-orient="landscape"] .table-band__group--right { order: 3; margin-left: auto; }