/* Tokens */
:root {
  color-scheme: light;
  font-family: 'Noto Sans', 'DejaVu Sans', sans-serif;
  color: #271713;
  background: #130d0c;
  --ink: #271713;
  --ink-soft: #684f42;
  --paper: #ead9b7;
  --paper-high: #fff5da;
  --paper-low: #d8c39d;
  --oxblood: #6b1118;
  --oxblood-dark: #3b0b0f;
  --brass: #b17e26;
  --brass-light: #edca73;
  --night: #130d0c;
  --night-soft: #241614;
  --danger: #8a1b20;
  --focus: #f5cb5b;
  --line: rgba(69, 40, 27, .26);
  --shadow: 0 18px 48px rgba(0, 0, 0, .34), 0 3px 10px rgba(0, 0, 0, .2);
  --radius: 14px;
  --body: 'Noto Sans', 'DejaVu Sans', sans-serif;
  --utility: 'Nimbus Sans Narrow', 'Liberation Sans Narrow', 'Noto Sans', sans-serif;
  --display: Georgia, 'Bitstream Charter', 'Liberation Serif', serif;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: clip; background: var(--night); }
body { font-family: var(--body); }
button, input, select { font: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; }
a { color: var(--oxblood); text-decoration-thickness: .09em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
h1, h2, h3, p, dl, dd { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
h1 { margin-bottom: .65rem; font-size: clamp(2.15rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.035em; }
h2 { margin-bottom: .55rem; font-size: 1.55rem; line-height: 1.08; letter-spacing: -.02em; }
h3 { margin-bottom: .35rem; font-size: 1.1rem; }
p { max-width: 70ch; line-height: 1.6; }
::selection { color: var(--paper-high); background: var(--oxblood); }
* { scrollbar-color: var(--brass) var(--night-soft); scrollbar-width: thin; }
input { caret-color: var(--oxblood); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Layout */
.app-shell {
  min-height: 100vh;
  padding: 0 1.25rem 2.5rem;
  background:
    radial-gradient(ellipse 52rem 30rem at 50% -12rem, rgba(237, 202, 115, .2), transparent 72%),
    linear-gradient(135deg, var(--night-soft), var(--night) 58%);
}
.masthead {
  min-height: 4.75rem;
  max-width: 74rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--paper-high);
}
.brand {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--paper-high);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}
.desk-nav { display: flex; align-items: center; gap: 1.25rem; font-family: var(--utility); letter-spacing: .025em; }
.desk-nav a { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--brass-light); font-weight: 700; }
.screen {
  width: min(100%, 74rem);
  min-height: calc(100vh - 7.25rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.screen-heading { margin-bottom: 2rem; }
.screen-heading > p { margin-bottom: 0; color: var(--ink-soft); font-size: 1.05rem; }
.back-link { min-height: 2.75rem; display: inline-flex; align-items: center; margin-bottom: .65rem; font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.section-heading, .rail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-heading p { color: var(--ink-soft); font-weight: 700; }
.desk-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(16rem, .85fr); gap: 2rem; align-items: start; }

/* Components */
.button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.15rem;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--utility);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}
.button--primary { color: #fff9e8; background: var(--oxblood); box-shadow: 0 7px 18px rgba(58, 4, 9, .24); }
.button--primary:hover { color: #fff9e8; background: var(--oxblood-dark); box-shadow: 0 9px 18px rgba(58, 4, 9, .3); }
.button--secondary { color: var(--paper-high); background: var(--ink); }
.button--secondary:hover { background: #42251f; box-shadow: 0 5px 12px rgba(0, 0, 0, .28); }
.button--text { margin: -.5rem 0 .75rem -.75rem; color: var(--oxblood); background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: .2em; }
.button--text:hover { color: var(--oxblood-dark); background: rgba(107, 17, 24, .06); }
.button:active { transform: translateY(1px); box-shadow: none; }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.text-link { font-weight: 700; }
.paper-card { padding: 1.35rem; background: var(--paper-high); border: 1px solid var(--line); border-radius: var(--radius); }
.stat { min-width: 0; }
.stat__label { display: block; margin-bottom: .2rem; color: var(--ink-soft); font-family: var(--utility); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stat__value { display: block; overflow-wrap: anywhere; font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.portrait {
  width: 5.25rem;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--paper-high);
  background: linear-gradient(155deg, var(--oxblood), var(--oxblood-dark));
  border-radius: 12px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 8px 24px rgba(49, 8, 10, .22);
}
.progress { display: grid; grid-template-columns: auto minmax(8rem, 1fr); align-items: center; gap: 1rem; margin-bottom: 2rem; color: var(--ink-soft); font-size: .82rem; font-weight: 800; }
.progress progress { width: 100%; height: .55rem; accent-color: var(--oxblood); }
.live-notice {
  width: min(100%, 46rem);
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  color: var(--paper-high);
  background: var(--oxblood-dark);
  border-radius: 10px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}
.live-notice:empty { display: none; }
.dialog { max-width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem; color: var(--ink); background: var(--paper-high); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(19, 13, 12, .72); }
.destructive-dialog { border-top: 6px solid var(--oxblood); }
.destructive-dialog h2 { margin-bottom: .45rem; }
.destructive-dialog .consequence-list { grid-template-columns: 1fr; }
/* These lines are sentences about what a filing changes, not stat labels, so they keep their own
   capitalisation, wrap inside the dialog, and scroll rather than push the confirm button off a
   390px screen. */
.destructive-dialog .consequence-list li { overflow-wrap: anywhere; font-weight: 700; line-height: 1.45; text-transform: none; }
.action-reason { margin: .45rem 0 .8rem; color: var(--ink-soft); font-size: .875rem; font-weight: 700; line-height: 1.45; }
/* The release dialog's reason picker. Each row carries its own price, so the rows are sentences that wrap
   rather than labels, and the whole set scrolls with the dialog on a 390px screen. */
.release-reasons { margin: 1rem 0 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; }
.release-reasons legend { padding: 0 .35rem; color: var(--ink-soft); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.release-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .55rem; padding: .5rem 0; cursor: pointer; }
.release-reason + .release-reason { border-top: 1px solid var(--line); }
.release-reason input { grid-row: 1 / span 2; align-self: start; margin-top: .25rem; }
.release-reason__cost { font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.release-reason__note { color: var(--ink-soft); font-size: .84rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.report-row { display: grid; grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.25fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.report-row dt { color: var(--ink-soft); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.report-row dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; font-variant-numeric: tabular-nums; }
.lesson-note { margin-bottom: 1.5rem; padding: 1rem 1.15rem; color: var(--paper-high); background: var(--oxblood-dark); border-radius: 12px; }
.lesson-note h2 { margin-bottom: .3rem; font-size: 1.12rem; }
.lesson-note p { margin: 0; color: #f2ddbc; }
.empty-state { padding: 1.25rem; color: var(--ink-soft); background: rgba(255, 245, 218, .55); border-radius: 12px; }
.session-guidance {
  min-width: 0;
  max-width: 48rem;
  margin: -1rem 0 1.5rem;
  padding: 1rem 1.15rem;
  overflow-wrap: anywhere;
  background: rgba(255, 245, 218, .58);
  border-left: 4px solid var(--brass);
}
.session-guidance__heading { margin-bottom: .35rem; font-size: 1.2rem; }
.session-guidance__reason { margin-bottom: .65rem; color: var(--ink-soft); }
.session-guidance__next { min-width: 44px; min-height: 44px; }
.session-guidance__blocked { margin: .65rem 0 0; color: var(--danger); font-weight: 800; }
.session-guidance__recap-list { padding-left: 1.25rem; }
.session-guidance__goal-text { overflow-wrap: anywhere; }
.session-guidance__lesson { margin-top: 1rem; }
.session-guidance__lesson-label { display: block; margin-bottom: .35rem; color: var(--brass-light); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.session-guidance--compact { max-width: none; display: flex; align-items: center; gap: .65rem; margin: -.25rem 0 .4rem; padding: 0 .65rem; }
.session-guidance--compact .session-guidance__heading,
.session-guidance--compact .session-guidance__reason,
.session-guidance--compact .session-guidance__blocked { margin: 0; }
.session-guidance--compact .session-guidance__reason { min-width: 0; flex: 1 1 auto; }
.session-guidance--compact .session-guidance__next { flex: 0 0 auto; }

/* Screens */
.screen--onboarding { width: min(100%, 62rem); }
.screen--onboarding .screen-heading { max-width: 47rem; }
.field-label, .choice-fieldset legend { display: block; margin-bottom: .55rem; font-weight: 800; }
.text-input {
  width: min(100%, 34rem);
  min-height: 3rem;
  margin-bottom: 2rem;
  padding: .75rem .9rem;
  color: var(--ink);
  background: var(--paper-high);
  border: 1px solid #725746;
  border-radius: 10px;
}
.text-input:hover { border-color: var(--oxblood); }
.choice-fieldset { min-width: 0; margin: 0 0 2rem; padding: 0; border: 0; }
.choice-list, .prospect-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.choice-card, .prospect-card {
  min-height: 4.25rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem;
  cursor: pointer;
  background: rgba(255, 245, 218, .66);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.choice-card:hover, .prospect-card:hover { background: var(--paper-high); border-color: var(--brass); transform: translateY(-1px); }
.choice-card:has(input:checked), .prospect-card:has(input:checked) { background: var(--paper-high); border-color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); }
.choice-card input, .prospect-card input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; accent-color: var(--oxblood); }
.choice-card__body, .prospect-card__body { min-width: 0; display: grid; gap: .3rem; }
.choice-card__body span, .prospect-card__body > span { color: var(--ink-soft); line-height: 1.35; }
.choice-card__body small { color: var(--ink-soft); line-height: 1.4; }
.prospect-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prospect-card { flex-direction: column; }
.prospect-card .portrait { width: 100%; max-height: 8rem; aspect-ratio: 16 / 7; }
.prospect-stats { display: flex; flex-wrap: wrap; gap: .35rem .75rem; font-variant-numeric: tabular-nums; }
.lesson-card { max-width: 42rem; }
.lesson-card .button { margin-top: .4rem; }
.import-card { max-width: 42rem; margin-top: 2rem; border-left: 4px solid var(--brass); }
.import-card .text-input { margin-bottom: .75rem; }
.ledger-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; padding: 1rem 1.15rem; background: rgba(255, 245, 218, .58); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.decision-docket { min-height: 21rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper-high); box-shadow: 0 16px 36px rgba(68, 35, 20, .16); border: 0; }
.decision-docket::before { content: ''; width: 4.5rem; height: .3rem; margin-bottom: auto; background: var(--brass); border-radius: 999px; }
.decision-docket h2 { max-width: 18ch; font-size: clamp(2rem, 4vw, 3.4rem); }
.decision-docket p { color: var(--ink-soft); font-size: 1.08rem; }
.decision-docket .button { align-self: flex-start; }
.decision-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.expansion-card { max-width: 38rem; margin-bottom: 1rem; border-left: 5px solid var(--brass); }
.docket-stamp { width: fit-content; margin-bottom: .9rem; padding: .35rem .55rem; color: var(--paper-high); background: var(--oxblood); border-radius: 4px; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.roster-rail { min-width: 0; padding-top: .35rem; }
.roster-rail h2 { font-size: 1.25rem; }
.rail-heading { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.rail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem .8rem; font-size: .86rem; }
.roster-list { margin: 0; padding: 0; list-style: none; }
.roster-list li { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.roster-link { width: fit-content; font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.roster-list span { color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.desk-brief { margin: 1rem 0; }
.desk-brief .report-row { grid-template-columns: 6.5rem minmax(0, 1fr); }
.office-links { display: flex; flex-wrap: wrap; gap: .65rem 1rem; }
.dossier-sheet { margin-bottom: 2rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper-high); box-shadow: 0 12px 30px rgba(68, 35, 20, .14); }
.dossier-profile { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.dossier-profile p { margin-bottom: .25rem; color: var(--ink-soft); }
/* Header actions wrap instead of stretching the sheet: on a 390px screen "Release <long name>" gets
   its own row rather than pushing the portrait off the side. */
.dossier-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.dossier-quick-actions .button--text { margin: 0; padding: .55rem 0; }
.dossier-profile .action-reason { margin: .35rem 0 0; }
.attribute-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
/* A declined attribute reads in oxblood with the trained number under it, so the sheet says what the
   wrestler can do now without hiding what they were trained to. */
.stat--declined .stat__value { color: var(--oxblood); }
.stat__decline { display: block; margin-top: .1rem; color: var(--ink-soft); font-family: var(--utility); font-size: .7rem; font-weight: 700; line-height: 1.3; }
.attribute-note { max-width: none; margin: .9rem 0 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.45; }
.safety-note { max-width: none; margin: .9rem 0 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.45; }
.planning-board { padding-top: .5rem; }
.planning-board > summary { min-height: 2.75rem; cursor: pointer; }
.planning-board > summary h2, .planning-board > summary p { margin-bottom: 0; }
.planning-board[open] > summary { margin-bottom: 1rem; }
.plan-list { display: grid; gap: .7rem; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.15rem; }
.plan-row p { margin-bottom: 0; color: var(--ink-soft); font-size: .88rem; }
.plan-row .button { flex: 0 0 auto; }
.dossier-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: 2rem; }
.dossier-fact { min-width: 0; padding: 1rem; border-top: 4px solid var(--brass); }
.dossier-fact p { margin-bottom: .45rem; color: var(--ink-soft); }
.career-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-tab { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .6rem .8rem; color: var(--oxblood); background: rgba(255, 245, 218, .55); border: 1px solid var(--line); border-radius: 8px; font-weight: 800; }
.filter-tab--active { color: var(--paper-high); background: var(--oxblood); }
.career-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.career-card { min-width: 0; display: flex; gap: 1rem; padding: 1rem; }
.career-card--attention { border-color: var(--danger); box-shadow: inset 5px 0 var(--danger); }
.career-card .portrait { width: 4rem; }
.career-card__body { min-width: 0; }
.career-card h2 { margin: .25rem 0; font-size: 1.25rem; }
.career-card h2 a, .office-links a, .dossier-fact a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.career-card p { margin-bottom: .4rem; color: var(--ink-soft); }
/* The cut control sits under the card's facts and pulls no width of its own, so a three-column grid
   still fits twelve names at 1024px and a single column still fits at 390px. */
.career-card .card-actions { margin-top: .45rem; }
.career-card .card-actions .button--text { margin: 0 0 0 -.75rem; }
.career-card .action-reason { margin: .2rem 0 0; font-size: .82rem; }
.status-stamp { display: block; color: var(--oxblood); font-family: var(--utility); font-size: .875rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.past-teams-grid { margin-top: 1rem; }
.group-card--ended { opacity: .75; }
.scouting-grid { margin-top: 1rem; }
.scout-report .button, .title-card .button { width: 100%; margin-top: .65rem; }
.scout-facts { margin-bottom: 1rem; }
.deck-workbench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.deck-rules { max-width: none; margin-bottom: 1.25rem; padding: .8rem 1rem; background: rgba(255, 245, 218, .58); border-left: 4px solid var(--brass); }
.deck-slot { min-width: 0; display: grid; gap: .35rem; font-weight: 800; }
.deck-select { width: 100%; min-height: 2.75rem; padding: .55rem; color: var(--ink); background: var(--paper-high); border: 1px solid #725746; border-radius: 8px; }
.formation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.formation-sheet { min-width: 0; padding: 1.25rem; background: rgba(255, 245, 218, .62); border: 1px solid var(--line); border-radius: var(--radius); }
.formation-sheet legend { padding: 0 .35rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.formation-sheet .text-input { width: 100%; margin-bottom: .75rem; }
.check-line { min-height: 2.75rem; display: flex; align-items: center; gap: .65rem; padding: .35rem 0; }
.check-line input { width: 1.25rem; height: 1.25rem; accent-color: var(--oxblood); }
.formation-sheet .button { width: 100%; margin-top: .75rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.title-card { display: flex; flex-direction: column; }
.title-held { margin-bottom: .45rem; color: #295c32; }
.title-card small, .history-card small { display: block; margin-top: .5rem; color: var(--ink-soft); }
.title-succession { margin-top: 2rem; }
.title-blockers { margin-top: .8rem; color: var(--ink-soft); font-size: .875rem; }
.title-blockers summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-weight: 800; }
.title-blockers ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.title-blockers li { margin-top: .45rem; line-height: 1.4; }
.history-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.chronicle-details > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font: 700 1.5rem/1.2 var(--display); }
.chronicle-list { margin: 0; padding-left: 1.4rem; }
.chronicle-list li { padding: .45rem 0; line-height: 1.45; }
.contract-stack { display: grid; gap: 1rem; max-width: 52rem; }
.contract { position: relative; padding: clamp(1.25rem, 3vw, 2rem); }
.contract--accepted { color: var(--paper-high); background: var(--oxblood-dark); border-color: transparent; }
.contract--accepted .contract-status, .contract--accepted .report-row dt { color: var(--brass-light); }
.contract--accepted .report-row { border-color: rgba(255, 245, 218, .2); }
.contract-status { display: block; margin-bottom: .55rem; color: var(--oxblood); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contract-facts { margin-bottom: 1.25rem; }
.finish-clause { padding: .8rem 1rem; color: var(--oxblood-dark); background: #f1dfba; border-radius: 8px; font-family: var(--display); font-weight: 700; }
.screen--match-arena { width: min(100%, 90rem); padding: clamp(1rem, 2vw, 1.6rem); }
.match-title { margin: 0 0 .45rem; color: var(--oxblood-dark); font-family: var(--utility); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 900; letter-spacing: .055em; line-height: 1.15; text-transform: uppercase; }
.match-briefing, .match-intent, .match-turn { min-width: 0; padding: .75rem .9rem; border-radius: 9px; }
.match-briefing { display: grid; gap: .16rem; color: var(--paper-high); background: var(--oxblood-dark); }
.match-briefing strong { font-family: var(--display); font-size: 1.05rem; }
.match-stakes { overflow: hidden; color: #e5cfa7; font-size: .875rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.title-stake { color: var(--brass-light); font-size: .875rem; font-weight: 900; }
.match-intent { display: grid; align-content: center; gap: .2rem; color: var(--paper-high); background: var(--ink); border-left: 4px solid var(--brass); }
.match-intent strong { overflow-wrap: anywhere; }
.match-turn { display: grid; place-items: center; color: var(--oxblood-dark); background: rgba(255, 245, 218, .68); border: 1px solid var(--line); font-family: var(--utility); font-size: .875rem; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.match-kicker { display: block; color: var(--brass-light); font-family: var(--utility); font-size: .875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.screen--match-arena > .lesson-note { margin-bottom: .75rem; padding: .65rem .8rem; }
.screen--match-arena > .lesson-note h2 { display: inline; margin-right: .5rem; }
.screen--match-arena > .lesson-note p { display: inline; font-size: .86rem; }
.match-broadcast { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: .75rem; }
.match-ring { position: relative; min-width: 0; min-height: 19rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .65rem; padding: 1.25rem; overflow: hidden; color: var(--paper-high); background: radial-gradient(circle at 50% 42%, #4e2320, var(--night) 68%); border: 7px double var(--brass); box-shadow: inset 0 0 0 2px var(--oxblood), 0 12px 28px rgba(31, 9, 7, .28); }
.match-ring::before, .match-ring::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; height: 2px; background: rgba(237, 202, 115, .5); box-shadow: 0 5px 0 rgba(237, 202, 115, .24); pointer-events: none; }
.match-ring::before { top: .7rem; }
.match-ring::after { bottom: .95rem; }
.match-ring__center { position: relative; z-index: 1; min-width: 0; }
.match-vital { min-width: 0; display: grid; grid-template-columns: auto minmax(2.8rem, 1fr) 1.7rem; align-items: center; gap: .35rem; margin-top: .35rem; font-family: var(--utility); font-size: .875rem; font-variant-numeric: tabular-nums; }
.match-vital meter { width: 100%; height: .6rem; accent-color: var(--brass-light); }
.match-vital strong { text-align: right; }
.match-ring__center { display: grid; align-content: center; justify-items: center; gap: .45rem; padding: .75rem .5rem; text-align: center; }
.match-last-card { color: var(--paper-high); font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.4rem); }
.ring-position { color: #e5cfa7; font-size: .875rem; line-height: 1.35; text-transform: capitalize; }
.match-ring__center .match-vital { width: min(100%, 10rem); grid-template-columns: auto minmax(2.5rem, 1fr) 1.5rem; }
.match-transcript { min-width: 0; max-height: 19rem; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: .85rem; color: var(--paper-high); background: var(--ink); border-top: 4px solid var(--brass); }
.match-transcript__heading { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(237, 202, 115, .25); }
.match-transcript ol { min-height: 0; margin: 0; padding: .25rem 0 0; overflow-y: auto; list-style: none; }
.match-transcript li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .45rem; padding: .38rem 0; border-bottom: 1px solid rgba(237, 202, 115, .12); }
.match-transcript li > span { color: var(--brass-light); font-size: .875rem; font-weight: 900; }
.match-transcript p { margin: 0; color: #f2ddbc; font-size: .875rem; line-height: 1.35; }
.match-command-zone { min-width: 0; margin-top: .8rem; }
.match-command-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.match-command-heading .match-kicker { color: var(--oxblood); }
.match-hand { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.match-card { position: relative; min-width: 0; min-height: 11.5rem; display: flex; flex-direction: column; align-items: stretch; padding: .8rem; color: var(--ink); background: var(--paper-high); border: 2px solid var(--ink); border-top: 7px solid var(--oxblood); border-radius: 8px; cursor: pointer; text-align: left; box-shadow: 0 7px 15px rgba(58, 30, 20, .14); scroll-snap-align: start; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.match-card:hover:not(:disabled) { transform: translateY(-.3rem); box-shadow: 0 12px 22px rgba(58, 30, 20, .22); }
.match-card:active:not(:disabled) { transform: translateY(-.05rem); }
.match-card:disabled { cursor: not-allowed; background: repeating-linear-gradient(-45deg, #decca9, #decca9 8px, #ead9b7 8px, #ead9b7 16px); border-style: dashed; box-shadow: none; }
.match-card__family { color: var(--oxblood); font-size: .875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.match-card__name { min-height: 2.35em; margin: .3rem 0 .55rem; font-family: var(--display); font-size: 1.02rem; line-height: 1.12; }
.match-card__numbers { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; font-family: var(--utility); font-size: .875rem; font-weight: 900; }
.match-card__tokens, .match-card__cooldown { color: var(--ink-soft); font-size: .875rem; line-height: 1.35; }
.match-card__reason { margin-top: auto; padding-top: .55rem; color: #39542d; font-size: .875rem; font-weight: 900; line-height: 1.3; }
.match-card__reason--blocked { color: var(--danger); }
.special-call { min-width: 0; display: flex; align-items: center; gap: .75rem; margin-top: .65rem; padding: .6rem .8rem; color: var(--paper-high); background: var(--oxblood-dark); border-left: 4px solid var(--brass); }
.special-call .match-kicker { margin-right: auto; }
.special-call > span:not(.match-kicker) { color: #f2ddbc; font-size: .875rem; }
.special-call .button { min-height: 2.25rem; padding: .55rem .8rem; }
.team-corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.team-corner { min-width: 0; display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; color: var(--paper-high); background: var(--ink); border-top: 3px solid var(--brass); }
.team-corner > strong { margin-right: auto; font-size: .875rem; }
.team-corner .button { min-height: 2.75rem; padding: .5rem .7rem; }
.bench-member { padding: .45rem; font-size: .875rem; }
.match-terminal { position: absolute; z-index: 3; inset: auto .8rem .8rem; display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; color: var(--paper-high); background: rgba(59, 11, 15, .96); border: 1px solid var(--brass); box-shadow: var(--shadow); }
.match-terminal h2, .match-terminal p { margin: 0; }
.match-terminal h2 { font-size: 1.1rem; }
.match-terminal p { color: #f2ddbc; font-size: .875rem; }
.match-terminal .button { margin-left: auto; }

/* The Arena (Phase 2 slice 2.1, design/mockups/match/mockup-1.png): a compact top bar, two big
   corner cards either side of the last move, the hand, then a secondary panel (CRT + log) that
   scrolls internally so the page itself never does (DECISIONS.md 2026-09-22 D2b). `.match-arena--live`
   is scoped to the active/terminal phase only -- the pre-bell tale-of-the-tape screen below
   (`.screen--tale-of-the-tape`, phase 2 slice 5, design/mockups/match/mockup-2.png) gets the same
   single-column treatment for the same reason: release.css's unconditional two-column
   `.screen--match-arena` grid is still wrong for it. */
/* The base `.screen` rule floors every screen at `calc(100vh - 7.25rem)` so thin screens don't look
   empty -- exactly the floor D2b's no-scroll rule doesn't want here once the Arena's own content is
   already shorter than that. Zero it out for the live/terminal phase specifically. */
.match-arena--live { display: block; min-height: 0; }
/* release.css re-declares `.screen--match-arena { display: grid; ... }` inside its own narrower
   breakpoints (53rem, 40rem) -- same specificity as the rule above, loaded after it, so at phone
   widths it was silently winning back a grid context, and the session guide (a direct sibling of
   `.arena` under `<main>`, not a descendant of it) was landing on ringside.css's `grid-row: 8` again
   instead of its normal place in the flow. The compound selector here out-specifies a bare
   `.screen--match-arena` regardless of which stylesheet or media query it's declared in. */
.match-arena--live.screen--match-arena { display: block; }
/* ringside.css's `.screen { padding: clamp(1.25rem, 3.5vw, 3rem) }` is the same specificity as
   `.screen--match-arena` and loads after it, so it wins the padding on every match phase including
   this one. The compound selector here (two classes on one element) out-specifies a bare `.screen`
   regardless of load order. */
.match-arena--live.screen--match-arena { padding: clamp(.3rem, .6vw, .5rem); }
/* Same out-specifying trick as `.match-arena--live.screen--match-arena` above, for the pre-bell
   tale-of-the-tape screen. */
.screen--tale-of-the-tape.screen--match-arena { display: block; }
/* D2b's no-scroll fit is promised at >=1280x800 (DECISIONS.md 2026-09-22) -- below that height (a
   real laptop window can run ~650px tall) the fitted single-column layout must fall back to normal
   document flow rather than ever clip a control out of reach. The base `.screen` rule's
   `overflow: hidden` (styles.css, the "Layout" section above) is reset to visible here, for exactly
   these two states, at exactly this breakpoint -- same two-class specificity trick as above. */
@media (max-height: 799px) {
  .match-arena--live.screen--match-arena, .screen--tale-of-the-tape.screen--match-arena {
    overflow: visible;
  }
}
.arena { display: flex; flex-direction: column; gap: .1rem; min-width: 0; min-height: 0; }
/* One row: heat, turn, objective and intent folded in and each clamped to a single ellipsised line
   (src/ui/render.js's arenaTopBar) -- this replaced a stacked topbar+briefing pair that alone cost
   more height than the whole row budget below has for it. */
.arena-topbar { display: flex; align-items: center; gap: .7rem; padding: .06rem .6rem; border-radius: 6px; }
.arena-topbar__heat { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.arena-heat { display: flex; gap: .28rem; }
.arena-heat__pip { display: block; width: .8rem; height: .8rem; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: currentColor; opacity: .25; }
.arena-heat__pip--lit { opacity: 1; }
.arena-topbar__turn { flex: 0 0 auto; padding: .3rem .7rem; font-family: var(--utility); font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; white-space: nowrap; }
.arena-topbar__brief { min-width: 0; flex: 1 1 auto; position: relative; }
/* min-height: 32px -- test/browser/helpers.js's expectUsable requires a real (>= 32x32) box for
   [data-testid="match-objective"], which the journeys capture directly. */
.arena-brief > summary { min-height: 32px; display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.arena-brief > summary .match-kicker { white-space: nowrap; }
.arena-brief > summary .match-kicker { font-size: .68rem; opacity: .75; }
.arena-brief > summary strong { font-size: .82rem; line-height: 1.2; } /* wraps to a second line at ~1024px rather than running under Special call */
.arena-brief__panel {
  position: absolute; z-index: 5; top: calc(100% + .25rem); left: 0; min-width: min(28rem, 90vw);
  display: grid; gap: .35rem; padding: .6rem .75rem; font-size: .8rem; border-radius: 6px;
  background: #0f1213; color: #eff0e7; border: 1px solid rgba(237, 202, 115, .35); box-shadow: 0 8px 20px #0008;
}
.arena-brief__panel p { margin: 0; }
.arena-brief__panel .match-intent { display: grid; gap: .15rem; padding: 0; background: none; border: 0; }
/* Special call, folded into the topbar row (phase 2 slice 4, D2c amended): the same `.special-call`
   the match-command zone used to host, but compacted to a single line here -- the explanatory
   sentence a full-width block could afford is dropped (the kicker plus the button it triggers say
   enough), which is what keeps this row from wrapping to a second line and burying the hand, the
   same failure mode `.arena-topbar__brief` above was already written to avoid. */
.arena-topbar__special { flex: 0 0 auto; min-width: 0; }
.arena-topbar__special:empty { display: none; }
.arena-topbar__special .special-call {
  margin: 0; padding: .2rem .55rem; gap: .35rem; border-left-width: 3px; white-space: nowrap;
}
.arena-topbar__special .special-call > span:not(.match-kicker),
.arena-topbar__special .special-call > strong { display: none; }
.arena-topbar__special .special-call .match-kicker { margin-right: 0; font-size: .68rem; }
.arena-topbar__special .special-call .button {
  min-height: 0; padding: .3rem .55rem; font-size: .72rem; white-space: nowrap;
}

/* The main row: five columns, stats outermost, portrait next, the last move centred -- matching
   design/mockups/match/mockup-1.png. Portrait width is viewport-relative (clamp with a vw term) so
   it scales between the two D2b breakpoints instead of needing separate fixed numbers for each. */
/* Three grid items, not five: each corner is one wrapper (`data-match-side`, see arenaCorner) whose
   own internal flex row splits it into the stats column and the portrait card -- the grid only ever
   places the two corners and the last-move card. */
/* The centre column is the live 3D stage's real estate (phase 2 slice 4, D2c amended): `3fr` against
   the corners' `2fr` each puts it around ~560px of a ~1312px ring at 1440x900 -- the hero size the
   ship decision asked for -- and it scales with the corners proportionally at every width in between,
   rather than a fixed px or vw number that would either starve it on a laptop or overrun a phone
   (phones get their own grid entirely, below). `minmax(220px, 3fr)` keeps it from collapsing at the
   narrow end of the desktop range (1280px, D2h's other primary breakpoint) before the mobile
   breakpoint takes over. */
.arena-ring {
  display: grid;
  grid-template-columns: minmax(min(380px, 33vw), 1fr) minmax(220px, 3fr) minmax(min(380px, 33vw), 1fr);
  align-items: start; justify-content: center; gap: .4rem; padding: .08rem; border-radius: 8px;
}
.arena-corner { min-width: 0; display: flex; justify-content: flex-end; gap: .6rem; }
.arena-corner--opponent { justify-content: flex-start; }
.arena-corner--opponent { flex-direction: row-reverse; }
/* min-width, not 0: at in-between widths (768px is the pre-existing "active arena has no page
   overflow" contract's own laptop-ish check, test/ui/app-controller.test.js) the portrait must give
   ground before the stats column does -- opponent sheet width >= 96px is that same contract.
   `.arena-stats.match-tape__sheet` (both classes on the one element, see render.js) is needed because
   release.css's older `.match-tape__sheet { min-width: 0 }` is the same specificity as a bare
   `.arena-stats` and loads after it, so it would otherwise win the cascade tie and undo this. */
.arena-stats.match-tape__sheet { min-width: 6.5rem; flex: 1 1 auto; max-width: 17rem; }
.arena-corner--opponent .arena-stats { text-align: right; }
.arena-corner .match-kicker { font-size: .68rem; letter-spacing: .06em; }
/* The portrait itself: full-bleed, cropped to the top (a pulp/comic portrait's face and torso, not
   its feet) via `portrait()`'s own default `background-position: center top` -- nothing to override
   here except size. A pool opponent with no pulp art falls back to their existing comic card art at
   the same size (components.js), never a broken image. */
/* A fixed width per breakpoint, not a continuous vw clamp: the test/browser/arena.spec.js floor
   (portrait card height >= 380px) only has to hold at 1440x900 -- 1280x800 has 100px less budget to
   spend on the same 3:4.3 card, so it gets a deliberately smaller one rather than a proportional
   (and too-tall) share of it. */
/* min-width, not 0 (phase 2 slice 4): once the centre column grows to hero size for the live 3D
   stage, the corner has less room and the portrait has to give some of it up -- but a portrait that
   shrinks in step with the stats column collapses toward a thumbnail, not "big but allowed to shrink
   to fit". Holding a floor here means the stats column (min-width 6.5rem above) absorbs the squeeze
   first, the way its own comment already says it should at the in-between widths. */
.arena-portrait-card { min-width: 210px; flex: 0 1 272px; width: 272px; padding: .3rem; border-radius: 10px; }
@media (max-width: 1350px) {
  .arena-portrait-card { flex-basis: 184px; width: 184px; }
}
.arena-portrait-card .portrait { width: 100%; height: 100%; aspect-ratio: 3 / 4.3; border-radius: 6px; box-shadow: none; }
/* `.arena-card__name` is the h2 itself (see render.js) -- reset the global `h2 { font-size: 1.55rem;
   margin-bottom: .55rem }` rather than inherit it; the given/surname spans inside carry their own
   sizes regardless, but an unreset parent font-size still bloats the line box. */
.arena-card__name { display: block; margin: 0; font-size: 1em; line-height: .85; }
.arena-card__given { display: block; font-family: var(--utility); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.arena-card__surname { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.arena-card__surname--long { font-size: clamp(1.1rem, 1.7vw, 1.6rem); overflow-wrap: break-word; }
.arena-card__nickname { display: block; margin-top: .15rem; font-style: italic; font-size: .82rem; }
.arena-card__type { display: block; margin: .15rem 0 .5rem; font-family: var(--utility); font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.arena-vital { margin-top: .55rem; }
.arena-vital__label { display: block; font-family: var(--utility); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.arena-vital__row { display: flex; align-items: baseline; gap: .22rem; }
.arena-corner--opponent .arena-vital__row { justify-content: flex-end; }
.arena-vital__value { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.arena-vital__max { font-size: .78rem; opacity: .75; }
.arena-vital meter { display: block; width: 100%; height: .4rem; margin-top: .2rem; }
.arena-status { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.arena-corner--opponent .arena-status { justify-content: flex-end; }
.arena-status__item { padding: .15rem .45rem; font-family: var(--utility); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border-radius: 3px; }

/* `.arena-centerstage` (phase 2 slice 4) is now the actual `.arena-ring` grid item -- it wraps both
   this card and the live 3D stage (src/ui/render.js:matchTape) -- so it, not `.arena-last-move`
   itself, carries the grid-sizing rule a grid child needs. `.arena-last-move` keeps every rule about
   its own look, which is unaffected by sitting one level deeper than it used to. */
.arena-centerstage { min-width: 0; }
.arena-last-move { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem; text-align: center; border-radius: 8px; }
.arena-last-move .match-kicker { font-size: .68rem; }
.arena-last-move__name { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; }
.arena-last-move .move-art { width: 100%; height: clamp(5rem, 12vh, 7.5rem); margin: 0; flex: 0 1 auto; }
.arena-last-move__facts { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; }
.arena-last-move__damage { font-weight: 900; font-size: .95rem; }
.arena-last-move .ring-position { margin-top: auto; padding-top: .3rem; font-size: .72rem; line-height: 1.25; }
.arena-last-move__empty, .arena-last-move__botch { font-size: .85rem; }
.arena-last-move__botch { font-weight: 800; }

/* The live 3D stage (phase 2 slice 4). `.arena-ring`'s own `align-items: start` sizes every grid
   item to its own content height, which is right for the corners and for the last-move fallback card
   but wrong for the stage: an iframe has no intrinsic content height of its own to size against, so
   when it is the one showing, the centre column stretches to match the corners' height (driven by
   their stats column) instead of collapsing to nothing. `:has()` scopes that stretch to exactly when
   the stage is un-hidden, so the fallback card's own sizing is untouched the rest of the time. */
.arena-centerstage:has(.arena-stage:not([hidden])) { align-self: stretch; }
/* While the 3D ring plays, the last-move card shrinks to a one-line caption under it rather than
   vanishing, so the mockup's "14 DAMAGE · APPLY OFF BALANCE" readout stays on screen. */
.arena-centerstage:has(.arena-stage:not([hidden])) { display: flex; flex-direction: column; gap: .3rem; }
.arena-centerstage:has(.arena-stage:not([hidden])) .arena-stage { flex: 1 1 auto; height: auto; }
.arena-centerstage:has(.arena-stage:not([hidden])) .arena-last-move { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15rem .6rem; padding: .2rem .5rem; }
.arena-centerstage:has(.arena-stage:not([hidden])) .arena-last-move .move-art,
.arena-centerstage:has(.arena-stage:not([hidden])) .arena-last-move .ring-position { display: none; }
.arena-centerstage:has(.arena-stage:not([hidden])) .arena-last-move__facts { flex-direction: row; gap: .6rem; }
/* `z-index: 1` (phase 2 slice 4) is not decoration: the real <iframe> is a portal appended straight
   to <body> and positioned with `position: fixed` over this box's own screen coordinates (moving an
   already-loaded iframe to a new DOM parent on every render made every browser reload it -- see
   src/ui/live-arena.js's header comment). A `position: fixed` element with no z-index of its own
   still paints above ordinary in-flow content, so without this, the portal iframe would sit on top
   of the Skip button below rather than under it. Giving `.arena-stage` an explicit stacking context
   here lifts the whole box -- Skip included -- back above it. */
.arena-stage { position: relative; z-index: 1; height: 100%; min-height: 15rem; border-radius: 8px; overflow: hidden; background: transparent; } /* transparent: the ring is painted underneath, in the portal iframe */
/* Empty now (the iframe lives in the portal, positioned to match this box's rect) -- kept as the
   position/size reference src/ui/live-arena.js reads via `getBoundingClientRect()`. */
.arena-stage__mount { position: absolute; inset: 0; }
.arena-stage__skip {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  min-height: 2.25rem; padding: .4rem .8rem; opacity: .92;
}
.arena-stage__skip:hover, .arena-stage__skip:focus-visible { opacity: 1; }

.match-arena--live .match-terminal { position: static; margin: .3rem 0; flex-wrap: wrap; }
.match-arena--live .special-call { margin-top: 0; padding: .3rem .7rem; }
/* Capped and internally scrollable, so the CRT, log and card-lesson guidance never grow the page
   (D2b) -- but the canvas itself stays >= 140px tall (test/ui/app-controller.test.js's pre-existing
   "active arena has no page overflow" contract reads that back directly); overflow:auto on the
   parent clips the rest without shrinking the canvas's own box. */
/* >= 44px so the card-lesson guide's own `<summary>` -- itself a real 44px tap target -- is never
   partly scrolled out of view by default; the CRT and log sit below it, reachable by scrolling this
   panel, same as before. */
.arena-secondary { min-width: 0; max-height: 2.9rem; overflow-y: auto; padding-right: .3rem; }
/* `.app-shell`'s own `padding-bottom: 2.5rem` (40px, styles.css:54) is a site-wide bottom margin
   meant for scrolling screens -- exactly what D2b's "nothing scrolls" rule says the match screen
   is not. It is not part of any single section's budget above, so no amount of trimming the Arena's
   own rows recovers it. A real championship fixture (longer names/stats than the synthetic ones
   the budget above was tuned against) came in 4px over at 1440x900 with the full 40px still applied. */
.app-shell--match { padding-bottom: 0; }
.app-shell--match .live-notice { margin: .1rem auto 0; padding: .25rem .7rem; font-size: .82rem; line-height: 1.25; }
.app-shell--match .session-guidance--compact { margin: 0 0 .18rem; padding: .12rem .6rem; font-size: .8rem; }
.app-shell--match .session-guidance--compact .session-guidance__heading { font-size: .95rem; }
.app-shell--match .session-guidance--compact .session-guidance__next { min-width: 0; min-height: 0; padding: .3rem .6rem; font-size: .8rem; }
.arena-secondary .crt-television { margin-bottom: .5rem; }
.arena-secondary .crt-canvas { height: clamp(9rem, 15vh, 11rem); }
.arena-secondary .crt-caption { min-height: 0; padding: .4rem .5rem; }
.arena-secondary .match-transcript { max-height: none; }
@media (min-width: 761px) {
  /* .match-arena--live.screen--match-arena (two classes on the same element, still one compound
     selector) out-specifies ringside.css's unconditional `.screen--match-arena .match-card`
     (min-height: 18rem) regardless of stylesheet load order -- an equal-specificity, later-loaded
     rule would otherwise win the cascade tie and undo this.
     Sized so nothing clips: family label, art, name and the requirement line ("Legal call" / "Needs
     X positioning" / the crowd-not-ready line) are all visible, per the coordinator's rework brief --
     only the token/cooldown/tactical-hint/damage-range detail lines are hidden (still in the DOM;
     aria-label already states them in full, so a screen reader loses nothing). */
  /* Raised from clamp(4rem,5vh,5rem) (phase 2 slice 4): that budget left `.move-art` clamped to its
     own 1.5rem (24px) floor at 900px-tall viewports -- a sliver, not the "real illustration" the ship
     decision calls for. The extra room comes from what the topbar/heading rework above freed up
     (the folded-in "Call the next exchange" heading, Special call moving out of its own row); verified
     against test/ui/app-controller.test.js's "active arena has no page overflow" contract, which still
     passes at both 1440x900 and 1280x800. */
  .match-arena--live.screen--match-arena .match-card { min-height: clamp(6.5rem, 9vh, 8rem); padding: .18rem; }
  /* The art takes whatever height the card has left, so the illustration is seen, not a sliver. */
  .match-arena--live.screen--match-arena .match-card .move-art { height: auto; flex: 1 1 0; min-height: clamp(4.4rem, 5.5vh, 5rem); margin-block: .1rem; }
  /* .875rem (14px) is a floor enforced elsewhere (.screen--match-arena .match-card :is(span, strong)
     { font-size: max(14px, .875rem) }) that test/ui/app-controller.test.js's pre-existing "active
     arena has no page overflow" reads back directly -- every span/strong here stays at or above it,
     even though these rules' extra specificity would otherwise let them win smaller. */
  .match-arena--live.screen--match-arena .match-card__family { font-size: .875rem; }
  .match-arena--live.screen--match-arena .match-card__name { min-height: 0; margin: .15rem 0 .25rem; font-size: 1rem; line-height: 1.3; }
  .match-arena--live.screen--match-arena .match-card__numbers { font-size: .875rem; }
  .match-arena--live.screen--match-arena .match-card__tokens,
  .match-arena--live.screen--match-arena .match-card__cooldown,
  .match-arena--live.screen--match-arena .match-card__tactics,
  .match-arena--live.screen--match-arena .match-card__range { display: none; }
  .match-arena--live.screen--match-arena .match-card__reason { padding-top: .2rem; font-size: .875rem; }
  .match-arena--live .match-command-heading { margin-bottom: 0; }
  .match-arena--live .match-command-heading > div > .match-kicker { display: none; }
  .match-arena--live .hand-options { margin: .05rem 0 .1rem; }
}
/* Tale of the tape (phase 2 slice 5, design/mockups/match/mockup-2.png): the pre-bell screen. Every
   piece is sized off `vh` so the whole thing fits at 1440x900 and 1280x800 without the page
   scrolling (DECISIONS.md 2026-09-22 D2b) -- the portrait cards are the one element tall enough to
   matter, so they alone carry a `vh` clamp; everything else is `rem`-sized and short. */
/* The match title and the two shared banners above it (session-guide, lesson-note) are the same
   elements every match phase renders, kept for the contracts already listed above -- shrunk here,
   for this phase only, via a higher-specificity compound selector, the same out-specifying trick
   `.screen--tale-of-the-tape.screen--match-arena` uses above. They read fine small: the corner
   cards below repeat both names and the objective's own text at full size. */
.screen--tale-of-the-tape.screen--match-arena .match-title { margin: 0 0 .15rem; font-size: clamp(.8rem, 1.3vw, 1rem); }
/* One slim row, not two stacked lines: the reload-lesson text (`.lesson-note h2`) and the
   session-guide banner right above it are both hard contracts other tests hold (see the note
   above `renderReadyMatch`) -- compacted here rather than removed. */
.screen--tale-of-the-tape > .lesson-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .2rem .6rem; }
.screen--tale-of-the-tape > .lesson-note h2 { font-size: .85rem; }
.screen--tale-of-the-tape > .lesson-note p { margin: 0; font-size: .74rem; }
/* Same one-slim-row collapse as tale-of-the-tape's, above -- a descendant selector (not `>`) because
   compactScreen (screen-layout.js) moves the report's lesson-note into a tab panel, so it is no
   longer a direct child of `.screen--report` by the time this paints. */
.screen--report .lesson-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 .5rem; padding: .3rem .7rem; }
.screen--report .lesson-note h2 { margin: 0; font-size: .85rem; }
.screen--report .lesson-note p { margin: 0; font-size: .74rem; }
.tale-tape { display: flex; flex-direction: column; gap: clamp(.2rem, .55vh, .35rem); min-height: 0; }
.tale-tape__masthead { display: grid; justify-items: center; gap: .1rem; text-align: center; }
.tale-tape__promotion { margin: 0; font-family: var(--display); font-size: clamp(.85rem, 1.5vw, 1.05rem); letter-spacing: .06em; }
/* The kicker and the heading share one line, not two -- "Pre-Match" reads as a small tag right
   before "Tale of the Tape" rather than its own stacked row. */
.tale-tape__headline { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
.tale-tape__heading { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
/* The corner cards are the screen (design/mockups/match/mockup-2.png): at 1440px wide that is
   ~300-330px per corner, `vh`-clamped so the whole thing still fits at 1280x800 without the page
   scrolling. The centre track is one flexible panel (`.tale-panel`), not a fixed width, so it
   never gets more attention than the portraits. */
.tale-tape__grid { display: grid; grid-template-columns: minmax(13rem, 21rem) minmax(17rem, 1fr) minmax(13rem, 21rem); align-items: center; gap: clamp(.6rem, 1.6vw, 1.25rem); }
.tale-corner { display: grid; grid-template-rows: min-content auto; gap: .4rem; min-width: 0; align-self: start; }
/* `.arena-portrait-card`'s base rule (above) fixes it at 210-272px wide for the live Arena's own
   flex corners -- reset width/min-width to fill this grid's much wider track instead. Height is
   the `vh` clamp that makes the portrait "nearly full height" (the mockup's own proportion)
   while still keeping the whole screen under the no-scroll budget at 1280x800. */
.tale-corner .arena-portrait-card { width: 100%; min-width: 0; flex-basis: auto; height: clamp(14rem, 36vh, 22rem); }
.tale-corner .arena-portrait-card .portrait { width: 100%; height: 100%; }
.tale-corner__stats { text-align: center; }
.tale-corner .arena-card__type { margin-bottom: .15rem; }
/* The centre panel: a bordered card (design/mockups/match/mockup-2.png) holding the four
   attribute rows and, folded into its own bottom section, match type/event/purse -- not a second
   box spanning the full width below the corners. Shorter than the portraits by design; centred in
   the row by the grid's own `align-items: center` above. */
.tale-panel { min-width: 0; padding: clamp(.4rem, 1vh, .7rem) clamp(.7rem, 1.8vw, 1.2rem); border: 1px solid rgba(237, 202, 115, .4); border-radius: 10px; background: rgba(0, 0, 0, .2); }
.tale-compare { display: grid; }
.tale-compare__row { display: grid; grid-template-columns: minmax(3rem, auto) 1fr minmax(3rem, auto); align-items: center; gap: clamp(.4rem, 1.2vw, .9rem); padding-block: clamp(.15rem, .9vh, .4rem); }
.tale-compare__row + .tale-compare__row { border-top: 1px solid rgba(237, 202, 115, .16); }
.tale-compare__value { font-family: var(--display); font-size: clamp(1.7rem, 4.4vh, 2.7rem); line-height: 1; text-align: center; }
.tale-compare__label { display: grid; justify-items: center; gap: .15rem; text-align: center; font-size: clamp(.58rem, .85vh, .68rem); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tale-compare__icon { width: clamp(1.4rem, 3.2vh, 2rem); height: clamp(1.4rem, 3.2vh, 2rem); object-fit: contain; }
.tale-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: clamp(.25rem, .8vh, .45rem); padding-top: clamp(.25rem, .8vh, .45rem); border-top: 1px solid rgba(237, 202, 115, .4); text-align: center; }
.tale-facts__item { display: grid; gap: .05rem; }
.tale-facts strong { font-family: var(--display); font-size: clamp(.78rem, 1.3vw, .95rem); }
.tale-facts__sub { font-size: .62rem; }
/* One line, not three: the kicker, the agreed-finish text and the stakes all read fine run
   together at this size -- the corner cards and the facts row above already carry the weight of
   this screen, this is a footnote by comparison. */
.screen--tale-of-the-tape .match-briefing { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4rem; margin-inline: auto; max-width: 46rem; padding: .2rem .7rem; text-align: center; }
.screen--tale-of-the-tape .match-briefing strong { font-size: .8rem; }
.screen--tale-of-the-tape .match-briefing .match-stakes { font-size: .68rem; }
.tale-tape__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.tale-tape__actions .button { min-width: 13rem; }
.tale-tape__note { margin: 0; text-align: center; font-size: .74rem; }
@media (max-width: 760px) {
  .tale-tape__grid { grid-template-columns: 1fr; }
  .tale-corner { grid-template-columns: 6rem 1fr; grid-template-rows: none; align-items: center; text-align: left; }
  .tale-corner .arena-portrait-card { height: 6rem; }
  .tale-corner__stats { text-align: left; }
  .tale-facts { grid-template-columns: 1fr; text-align: left; }
}
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.25rem; }
/* Pin attempt (phase 2 slice 6, design/mockups/match/mockup-4.png): the kickout dialog restyled as
   a dramatic full moment. No countdown timer -- the engine has none to report for this decision. */
.kickout-dialog { display: grid; gap: .65rem; max-width: 30rem; text-align: center; }
.kickout-dialog__title { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.kickout-dialog__art { margin-inline: auto; width: 100%; max-width: 22rem; }
.kickout-dialog__art .move-art { height: 8rem; border-radius: 6px; }
.kickout-dialog__vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.kickout-vital__name { display: block; margin-bottom: .3rem; font-family: var(--display); font-size: 1.05rem; }
.kickout-dialog__choices.dialog-actions { justify-content: stretch; margin-top: .4rem; }
.kickout-dialog__choices { display: grid; grid-template-columns: 1fr 1fr; }
.pin-choice { flex-direction: column; gap: .2rem; min-height: 4.25rem; white-space: normal; }
.pin-choice__title { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; }
.pin-choice__detail { font-size: .74rem; font-weight: 700; }
@media (max-width: 640px) {
  .kickout-dialog__vitals, .kickout-dialog__choices { grid-template-columns: 1fr; }
}
.consequence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.consequence-list li { padding: .55rem .7rem; background: var(--paper); border-left: 3px solid var(--oxblood); font-weight: 800; text-transform: capitalize; }
.report-sheet { position: relative; max-width: 48rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
/* Results-screen hero (design/mockups/match/mockup-5.png, coordinator follow-up): the hero IS the
   top of the screen -- a big tale-of-the-tape-sized portrait on the left (~300x400 at 1440x900, the
   same `arena-portrait-card` component) and the outcome/finish/rewards/stats column beside it, huge
   gold display type for VICTORY!/DEFEAT/DRAW. The screen's own tab panel (.section-panel,
   workspace.css) already scrolls internally, so the hero is sized for the mockup, not shrunk to
   force the ledger below it into the same fold. */
.report-hero { display: flex; align-items: center; gap: clamp(1.25rem, 3.5vw, 2.5rem); margin: 0 0 1.5rem; padding: clamp(.5rem, 1.5vw, 1rem) 0; }
.report-hero__portrait { flex: 0 0 auto; width: clamp(15rem, 20vw, 19rem); text-align: center; }
.report-hero__portrait .arena-portrait-card { width: 100%; aspect-ratio: 3 / 4.3; padding: .3rem; border-radius: 10px; }
.report-hero__wrestler-name { display: block; margin-top: .55rem; font-family: var(--display); font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
.report-hero__nickname { display: block; margin-top: .15rem; font-size: .95rem; font-style: italic; }
.report-hero__result { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; gap: .6rem; text-align: center; }
.report-hero__outcome-icon { width: 3rem; height: 3rem; object-fit: contain; }
.report-hero__outcome { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1; font-size: clamp(2.75rem, 6.5vw, 6rem); }
/* The compact layout's `html[data-skin] .screen--compact h2 { font-size: 1.35rem }` out-specifies the rule above; the
   result is the screen's headline, so it gets the same weight back. */
html[data-skin] .screen--compact h2.report-hero__outcome { font-size: clamp(2.75rem, 6.5vw, 6rem); margin: 0; }
.report-hero__finish { margin: 0; padding: .3rem 1rem; border-radius: 3px; font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.report-hero__rewards, .report-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.75rem; width: 100%; padding-top: .5rem; }
.report-hero__stats { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.report-hero__figure { display: grid; justify-items: center; gap: .2rem; min-width: 5.5rem; padding-right: 1.75rem; }
.report-hero__rewards .report-hero__figure:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .16); }
.report-hero__icon { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.report-hero__rewards .report-hero__figure-value { font-size: 2.5rem; }
.report-hero__figure-value { font-family: var(--display); font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.report-hero__figure-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.report-hero .button { margin-top: .5rem; }
@media (max-width: 640px) {
  .report-hero { flex-direction: column; align-items: center; gap: 1rem; padding: .5rem 0; }
  .report-hero__portrait { width: 11rem; }
  .report-hero__result { justify-items: center; text-align: center; }
  .report-hero__rewards, .report-hero__stats { justify-content: center; gap: .9rem 1.1rem; }
  .report-hero__figure { min-width: 4.5rem; padding-right: 0; border-right: 0 !important; }
  .report-hero__rewards .report-hero__figure-value { font-size: 2rem; }
}
/* `.report-body` (not `.report-sheet`) is now the grade badge's positioning context -- the hero
   above it owns the card's top-right corner instead. */
.report-body { position: relative; }
.report-grade { position: absolute; top: 1rem; right: 1.25rem; display: grid; width: 3.4rem; aspect-ratio: 1; place-items: center; color: var(--paper-high); background: var(--oxblood); border-radius: 50%; font-family: var(--display); font-size: 1.8rem; font-weight: 700; }
.report-ledger { margin: 0 0 1.5rem; padding-right: 4.5rem; }
.report-changes-title { margin-bottom: .75rem; font-size: 1.15rem; }
.report-deltas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1.5rem; }
.report-change { min-width: 0; padding: .7rem .8rem; background: var(--paper); border-left: 3px solid var(--brass); }
.report-change dt { color: var(--ink-soft); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.report-change dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 800; font-variant-numeric: tabular-nums; }
.history-strip { max-width: 48rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.history-strip h2 { font-size: 1.15rem; }
.history-strip ol { margin: 0; padding-left: 1.25rem; color: var(--ink-soft); }
.history-strip li { padding: .25rem 0; text-transform: capitalize; }

/* Inbox */
.screen--inbox { width: min(100%, 60rem); }
.inbox-list { display: grid; gap: 1rem; }
.inbox-row { display: grid; gap: .65rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-top: 6px solid var(--oxblood); }
.inbox-row--addiction { border-top-color: var(--brass); }
.inbox-row--legal { border-top-color: var(--danger); }
.inbox-row--loyalty { border-top-color: var(--ink); }
.inbox-row--family { border-top-color: #4f3176; }
.inbox-stamp { display: block; width: fit-content; padding: .25rem .55rem; color: var(--paper-high); background: var(--oxblood-dark); border-radius: 4px; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.inbox-row h2 { margin: 0; font-size: 1.4rem; }
.inbox-row p { margin: 0; color: var(--ink-soft); }
.inbox-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding-top: .65rem; border-top: 1px solid var(--line); }
.inbox-meta dt { color: var(--ink-soft); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.inbox-meta dd { margin: 0; overflow-wrap: anywhere; font-weight: 800; font-variant-numeric: tabular-nums; }
.inbox-row .button { align-self: start; }
.inbox-empty { display: grid; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(255, 245, 218, .55); border-radius: var(--radius); }
.inbox-empty h2 { margin: 0; }
.inbox-empty .button { justify-self: start; }

/* Event decision */
.screen--event-decision { width: min(100%, 62rem); }
.event-subject { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; padding: 1rem 1.15rem; background: rgba(255, 245, 218, .62); border: 1px solid var(--line); border-radius: var(--radius); }
.event-subject .portrait { width: 4rem; }
.event-subject h2 { margin: 0; font-size: 1.4rem; }
.event-stamp { display: block; width: fit-content; margin-bottom: .35rem; padding: .25rem .55rem; color: var(--paper-high); background: var(--oxblood-dark); border-radius: 4px; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.event-kicker { display: block; margin-bottom: .55rem; color: var(--oxblood); font-family: var(--utility); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.event-context { padding: 1.25rem; border-left: 5px solid var(--brass); }
.event-context h3 { margin: 0 0 .45rem; font-size: 1.2rem; }
.event-context p { margin: 0; }
.event-bindings { margin-top: .65rem; color: var(--ink-soft); font-size: .875rem; font-weight: 700; }
.event-locked-summary { margin-bottom: 1rem; padding: 1rem 1.15rem; border-left: 5px solid var(--danger); }
.event-locked-list { margin: .35rem 0 0; padding-left: 1.2rem; color: var(--ink); }
.event-locked-list li { padding: .25rem 0; font-weight: 800; }
.event-choices { display: grid; gap: 1rem; margin-top: 1.5rem; }
.event-choice { display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.5rem); }
.event-choice--high-impact { border-left: 5px solid var(--oxblood); }
.event-choice--locked { opacity: .65; border-left: 5px solid var(--ink-soft); }
.event-choice__body { display: grid; gap: .55rem; }
.event-choice__label { font-family: var(--display); font-size: 1.18rem; font-weight: 700; }
.event-choice__preview { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.event-choice__preview li { padding: .2rem 0; line-height: 1.45; }
.event-choice__locked { margin: .35rem 0 0; padding: .55rem .65rem; color: var(--oxblood-dark); background: #f1dfba; border-radius: 8px; font-weight: 800; }
.event-choice__stamp { display: inline-block; width: fit-content; padding: .2rem .5rem; color: var(--paper-high); background: var(--oxblood-dark); border-radius: 4px; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.event-choice .button { justify-self: start; min-width: 12rem; }
.event-missing { padding: 1.25rem; border-left: 5px solid var(--danger); }

/* Event consequence */
.screen--event-consequence { width: min(100%, 60rem); }
.consequence-card { padding: clamp(1.5rem, 4vw, 2.5rem); border-top: 6px solid var(--brass); }
.event-future-stakes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.event-future-stakes ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.event-future-stakes li { padding: .3rem 0; line-height: 1.45; }
.consequence-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.consequence-actions .button { flex: 0 0 auto; }

/* Relationships dossier */
.screen--relationships { width: min(100%, 62rem); }
.relationship-conditions { margin-bottom: 1.5rem; }
.relationship-conditions h2 { margin-bottom: .8rem; font-size: 1.25rem; }
.relationship-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.relationship-condition { padding: 1rem; border-left: 5px solid var(--oxblood); }
.relationship-condition h3 { margin: 0 0 .35rem; font-size: 1.1rem; text-transform: capitalize; }
.condition-stage { display: inline-block; margin-bottom: .35rem; padding: .2rem .5rem; color: var(--paper-high); background: var(--oxblood); border-radius: 4px; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.condition-meta { margin: 0; }
.relationship-list { margin-bottom: 1.5rem; }
.relationship-list h2 { margin-bottom: .8rem; font-size: 1.25rem; }
.relationship-list ul { display: grid; gap: .8rem; padding: 0; list-style: none; }
.relationship-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; background: rgba(255, 245, 218, .55); border: 1px solid var(--line); border-radius: 12px; }
.relationship-row .portrait { width: 3.5rem; }
.relationship-row__body { min-width: 0; flex: 1 1 auto; }
.relationship-kind { display: inline-block; margin-bottom: .25rem; padding: .15rem .45rem; color: var(--oxblood); background: rgba(107, 17, 24, .08); border-radius: 4px; font-family: var(--utility); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.relationship-row h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.relationship-meta { margin: 0; }
.relationship-history { padding: 1rem 1.15rem; border-left: 5px solid var(--brass); }

/* Motion */
@keyframes docket-settle {
  from { opacity: .55; transform: translateY(.75rem); clip-path: inset(0 0 10% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}
.decision-docket { animation: docket-settle 320ms cubic-bezier(.16, 1, .3, 1) both; }

/* Responsive */
@media (max-width: 68rem) {
  .deck-workbench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-broadcast { grid-template-columns: 1fr; }
  .match-transcript { max-height: 9rem; }
}

@media (max-width: 53rem) {
  .desk-layout { grid-template-columns: 1fr; }
  .decision-docket { min-height: 17rem; }
  .roster-rail { padding-top: 0; }
  .prospect-list { grid-template-columns: 1fr; }
  .prospect-card { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); }
  .prospect-card > input { grid-column: 1 / -1; }
  .prospect-card .portrait { width: 5.25rem; max-height: none; aspect-ratio: 4 / 5; }
  .match-turn { grid-column: 1 / -1; display: block; padding: .35rem .6rem; text-align: right; }
  .match-hand { grid-auto-columns: minmax(12rem, 34%); grid-template-columns: none; grid-auto-flow: column; padding: .25rem 0 .65rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; }
  .career-grid, .dossier-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .app-shell { padding: 0; }
  .masthead { min-height: 4rem; padding: 0 1rem; }
  .desk-nav { gap: .8rem; font-size: .9rem; }
  .screen { min-height: calc(100vh - 4rem); padding: 1.35rem 1rem 2rem; border-radius: 0; }
  .screen-heading { margin-bottom: 1.5rem; }
  .screen-heading > p { font-size: .98rem; }
  .choice-list { grid-template-columns: 1fr; }
  .ledger-strip, .attribute-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-card { padding: .85rem; }
  .prospect-card { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .prospect-card .portrait { width: 4.5rem; }
  .plan-row { align-items: stretch; flex-direction: column; }
  .plan-row .button { width: 100%; }
  .section-heading, .rail-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .dossier-profile { align-items: flex-start; }
  .dossier-sections, .career-grid, .deck-workbench, .formation-grid, .history-columns { grid-template-columns: 1fr; }
  .career-toolbar { align-items: stretch; flex-direction: column; }
  /* Compact chips that wrap inside the screen. A one-line scroller kept the first wrestler high but read as
     content cut off ("In a te..."), and full-size tabs wrapped into five rows (first wrestler at 79%). */
  .career-toolbar { gap: .5rem; margin-bottom: .6rem; }
  .career-toolbar .button { min-height: 2.5rem; padding-block: .4rem; }
  .filter-tabs { gap: .3rem; }
  .filter-tab { min-height: 2.25rem; padding: .25rem .5rem; font-size: .8125rem; white-space: nowrap; }
  .career-card .portrait { width: 3.5rem; }
  .report-row { grid-template-columns: 1fr; gap: .2rem; }
  .report-ledger { padding-right: 0; padding-top: 4rem; }
  .report-deltas { grid-template-columns: 1fr; }
  .live-notice { width: calc(100% - 2rem); margin-bottom: 1rem; }
  .screen--match-arena { padding: .75rem; }
  .session-guidance--compact { align-items: stretch; flex-direction: column; gap: .35rem; padding: .45rem .65rem; }
  .session-guidance--compact .session-guidance__next { align-self: flex-start; }
  .match-briefing { grid-column: 1 / -1; }
  .match-briefing, .match-intent { padding: .55rem .65rem; }
  .match-turn { grid-column: auto; display: grid; padding: .35rem; text-align: center; }
  .screen--match-arena > .lesson-note { padding: .5rem .65rem; }
  .screen--match-arena > .lesson-note h2, .screen--match-arena > .lesson-note p { display: block; }
  .screen--match-arena > .lesson-note h2 { margin: 0 0 .2rem; }
  .match-ring { min-height: 15.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem .55rem; border-width: 5px; }
  .match-vital { grid-template-columns: 3.8rem minmax(1.7rem, 1fr) 1.5rem; gap: .18rem; font-size: .875rem; }
  .match-ring__center { grid-column: 1 / -1; padding: .35rem; }
  .match-ring__center .match-vital { width: min(100%, 12rem); }
  .match-transcript { max-height: 7.5rem; }
  .match-command-heading { align-items: stretch; }
  .match-command-heading .button { min-height: 2.25rem; padding: .5rem .65rem; }
  .match-hand { width: 100%; grid-auto-columns: minmax(10.5rem, calc(100% - 1.5rem)); padding: .25rem 1.25rem .65rem .25rem; scroll-padding-inline: .25rem 1.25rem; }
  .match-card { min-height: 10.6rem; }
  .team-corners { grid-template-columns: 1fr; }
  .team-corner { overflow-x: auto; }
  .special-call { align-items: stretch; flex-wrap: wrap; }
  .special-call .match-kicker { width: 100%; }
  .special-call .button { width: 100%; }
  /* Overrides the three rules above specifically inside the topbar: full-width stacking is right for
     the old match-command-zone placement, but wrapping to its own row in the topbar is exactly the
     "hand buried below the fold" failure mode this breakpoint exists to prevent. */
  .arena-topbar__special .special-call { align-items: center; flex-wrap: nowrap; }
  .arena-topbar__special .special-call .match-kicker,
  .arena-topbar__special .special-call .button { width: auto; }
  .match-terminal { position: relative; inset: auto; grid-column: 1 / -1; flex-wrap: wrap; margin-top: .25rem; }
  .match-terminal .button { width: 100%; margin-left: 0; }
  /* Arena, phone width: portraits side by side (~45% each), stats stacked underneath each one, then
     the last move, then the hand as today's horizontal scroller (D2h -- phones get a working
     reflow, not the mockup). Each corner is DOM-order [stats, portrait]; `column-reverse` puts the
     portrait visually on top without touching the h2-textContent contract that order relies on. */
  .arena-topbar { flex-wrap: wrap; row-gap: .15rem; padding: .1rem .5rem; }
  .arena-topbar__brief { flex-basis: 100%; }
  .arena-ring { grid-template-columns: 1fr 1fr; padding: .3rem; gap: .3rem; }
  .arena-corner { flex-direction: column-reverse; align-items: center; text-align: center; order: 1; gap: .2rem; }
  .arena-corner .match-kicker { display: none; }
  .arena-corner--opponent { order: 2; }
  .arena-stats { width: 100%; }
  .arena-corner--opponent .arena-stats { text-align: center; }
  .arena-corner--opponent .arena-vital__row, .arena-corner--opponent .arena-status { justify-content: center; }
  /* min-width: 0 resets the desktop hero-stage floor (phase 2 slice 4) -- side-by-side stacked
     corners at phone width need the portrait to actually shrink to 100%, not hold a 210px floor
     meant for a much wider column. */
  .arena-portrait-card { min-width: 0; width: 100%; padding: .2rem; }
  .arena-portrait-card .portrait { aspect-ratio: 3 / 3; }
  .arena-card__surname { font-size: 1.15rem; }
  .arena-card__given { font-size: .68rem; }
  /* Desktop's generous stat sizing (built for a 260px-wide column) buries the hand below the fold at
     phone width if left alone -- test/ui/app-controller.test.js's pre-existing "hand is buried"
     check is exactly this. Nickname/type drop (still in the DOM), HP/Composure/status shrink. */
  .arena-card__nickname, .arena-card__type { display: none; }
  .arena-vital { margin-top: .2rem; }
  .arena-vital__label { font-size: .58rem; }
  .arena-vital__value { font-size: 1.25rem; }
  .arena-vital meter { height: .25rem; margin-top: .1rem; }
  .arena-status { margin-top: .2rem; }
  .arena-status__item { padding: .08rem .3rem; font-size: .56rem; }
  .arena-centerstage { grid-column: 1 / -1; order: 3; }
  .arena-last-move { padding: .25rem; gap: .15rem; }
  .arena-last-move .move-art { height: 3rem; }
  .arena-secondary { max-height: 9rem; }
  .match-arena--live .match-command-heading { margin-bottom: .15rem; }
  .match-arena--live .hand-options { margin: 0 0 .15rem; font-size: .78rem; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
  /* Event screens — mobile geometry */
  .event-subject { align-items: flex-start; flex-direction: column; gap: .85rem; }
  .event-subject .portrait { width: 3.5rem; }
  .inbox-meta { grid-template-columns: 1fr; gap: .35rem; }
  .inbox-row .button { width: 100%; }
  .event-choice .button { width: 100%; }
  .relationship-grid { grid-template-columns: 1fr; }
  .relationship-row { flex-direction: row; align-items: flex-start; gap: .75rem; }
  .relationship-row .portrait { width: 3rem; }
  .consequence-actions { flex-direction: column; align-items: stretch; }
  .consequence-actions .button { width: 100%; }
}

@media (forced-colors: active) {
  .choice-card:has(input:checked), .prospect-card:has(input:checked) { outline: 3px solid SelectedItem; }
  .portrait, .docket-stamp, .report-grade, .match-card, .match-ring { border: 1px solid CanvasText; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Long receipt identifiers remain readable without widening a mobile dossier. */
.legacy-evidence__source { overflow-wrap: anywhere; }
.legacy-evidence { margin-block: 1rem; }
.legacy-evidence details { margin-block: .5rem; }

/* Tactical match workspace: facts and native controls remain visible at every size. */
html[data-skin] .app-shell--match { height: auto; min-height: 100dvh; overflow: visible; padding-bottom: 1rem; }
html[data-skin] .match-arena--live .arena { height: auto; max-height: none; overflow: visible; gap: .6rem; }
.match-arena--live.screen--match-arena .arena-ring { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.match-arena--live .arena-portrait-card { width: 4.5rem; height: 6rem; min-height: 0; flex: 0 0 4.5rem; }
.match-arena--live .arena-portrait-card .portrait { height: 100%; min-height: 0; }
.match-arena--live .arena-card__surname { font-size: 1.5rem; }
.match-arena--live .arena-card__given { font-size: 1rem; }
.match-arena--live .arena-last-move .move-art { height: 3rem; }
.match-arena--live .arena-stage { min-height: 8rem; max-height: 12rem; }
.match-arena--live.screen--match-arena .match-card { min-height: 0; padding: .6rem; cursor: default; gap: .25rem; }
.match-arena--live.screen--match-arena .match-card .move-art { height: 3rem; min-height: 0; flex: none; margin: 0; }
.match-arena--live.screen--match-arena .match-card__tactics,
.match-arena--live.screen--match-arena .match-card__range { display: block; margin: 0; line-height: 1.35; }
.match-arena--live.screen--match-arena .match-card__name { min-height: 0; margin: .15rem 0; }
.match-card__artwork { cursor: pointer; }
.match-card--blocked { border-style: dashed; }
.match-card__controls { display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }
.match-card__controls .button { min-height: 44px; width: 100%; white-space: normal; overflow-wrap: anywhere; padding: .45rem; }
.match-card__risk { line-height: 1.35; font-weight: 600; }
.finish-window, .match-arena--live .match-intent { padding: .45rem .6rem; background: var(--paper-high); color: var(--ink); margin: 0 0 .4rem; }
.finish-window strong { display: block; line-height: 1.35; }
.finish-window summary { cursor: pointer; min-height: 44px; align-content: center; }
.match-arena--live .match-intent { display: flex; flex-wrap: wrap; gap: .3rem; }
.match-arena--live .match-intent .match-kicker { color: var(--ink); }
.match-arena--live .opponent-read { flex-basis: 100%; }
.match-playback-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0; }
.presentation-mode select { min-height: 44px; max-width: 100%; }
.combat-lesson { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; padding: .3rem; background: var(--paper-high); }
.combat-lesson[hidden] { display: none; }
.combat-lesson .button { min-height: 44px; padding: .3rem; flex: 0 0 auto; }
.match-arena--live .arena-secondary { max-height: none; overflow: visible; }
.match-broadcast > summary { cursor: pointer; min-height: 44px; align-content: center; color: #fff; }
.hand-navigation { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.hand-navigation .button { min-height: 44px; }
.exchange-receipt { color: var(--ink); padding: .5rem; background: var(--paper-high); line-height: 1.4; }
.match-transcript details > summary { cursor: pointer; line-height: 1.4; padding: .4rem; }
.match-transcript li { display: block; }
.card-inspector { max-width: min(36rem, calc(100vw - 1rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1rem; color: var(--ink); background: var(--paper-high); border: 2px solid var(--ink); }
.card-inspector::backdrop { background: #0008; }
.card-inspector p { line-height: 1.45; }
.card-inspector .dialog-actions { display: flex; gap: .5rem; }
@media (min-width: 1024px) {
  .card-inspector[open] { position: fixed; margin: 0; inset: 1rem 1rem auto auto; z-index: 100; width: 30rem; box-shadow: 0 8px 35px #0008; }
}
@media (max-width: 1023px) {
  .match-arena--live.screen--match-arena .match-hand { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - .55rem) / 2); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 0; scroll-padding-inline: 0; }
  .match-arena--live.screen--match-arena .match-card { scroll-snap-align: start; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .match-arena--live.screen--match-arena .arena-ring { display: flex; flex-direction: column; padding: .35rem; gap: .35rem; }
  .match-arena--live .arena-centerstage { display: none; }
  .match-arena--live .arena-corner,
  .match-arena--live .arena-corner--opponent { display: flex; flex-direction: row-reverse; width: 100%; align-items: center; text-align: left; justify-content: flex-end; gap: .5rem; }
  .match-arena--live .arena-stats.match-tape__sheet { display: grid; grid-template-columns: 1fr 1fr; max-width: none; min-width: 0; gap: .15rem .5rem; text-align: left; padding: .25rem; }
  .match-arena--live .arena-card__name { grid-column: 1 / -1; margin: 0; display: flex; align-items: baseline; gap: .3rem; }
  .match-arena--live .arena-card__given, .match-arena--live .arena-card__surname { font-size: 1rem; display: inline; }
  .match-arena--live .arena-card__type { display: none; }
  .match-arena--live .arena-portrait-card { width: 2.75rem; height: 3.5rem; flex-basis: 2.75rem; }
  .match-arena--live .arena-vital { margin: 0; }
  .match-arena--live .arena-vital__row { justify-content: flex-start; }
  .match-arena--live .arena-vital__label { font-size: .75rem; }
  .match-arena--live .arena-vital__value { font-size: 1rem; }
  .match-arena--live .arena-status { grid-column: 1 / -1; margin: 0; justify-content: flex-start; }
  .match-arena--live .arena-status__item { font-size: .75rem; }
  .match-arena--live .arena-topbar { order: 1; }
  .match-arena--live .arena-ring { order: 0; }
  .match-arena--live .arena { display: flex; flex-direction: column; }
  .match-arena--live .match-command-zone { order: 2; }
  .match-arena--live .arena-secondary { order: 3; }
  .match-arena--live .finish-window { padding: .2rem .4rem; }
  .match-arena--live .finish-window summary { min-height: 32px; }
  .match-arena--live .combat-lesson { font-size: .8rem; }
  .match-arena--live .match-intent { font-size: .8rem; padding: .2rem .4rem; }
  .match-arena--live .match-card__artwork { display: none; }
  .match-arena--live.screen--match-arena .match-card { padding: .45rem; }
  .match-arena--live .match-playback-controls { margin: .15rem 0; }
  .match-arena--live .mobile-ring-summary { display: none; }
  .match-arena--live .match-title { font-size: 1rem; }
  .match-arena--live .match-command-heading { margin: .15rem 0; }
}
.combat-lesson { color: var(--ink); }
.match-arena--live .opponent-read { color: var(--ink); }
.match-arena--live .arena-portrait-card { min-width: 0; }
.arena-position-empty { font-size: .75rem; }
@media (max-width: 760px) {
  .match-arena--live.screen--match-arena .match-hand { grid-auto-columns: calc(100% - .75rem); }
  .match-arena--live .arena-position-empty { grid-column: 1 / -1; }
  .match-arena--live .arena-topbar { padding: .2rem .4rem; }
  .match-arena--live .match-card__controls { flex-direction: row; }
  .match-arena--live .match-card__controls .button { min-width: 0; width: 50%; }
}
/* Play itself communicates availability; reserve the extra line for blockers. */
.match-arena--live .match-card:not(.match-card--blocked) .match-card__reason { display: none; }