/* Structural styles and legacy component defaults.
   The fantasy tabletop finish and current design tokens live in tabletop.css,
   loaded after this file. See docs/DESIGN_SYSTEM.md. */

/* --- Tokens del sistema -------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Superfícies: paper encolat sobre quitrà. */
  --bg: #0d0b0a;
  --bg-soft: #141110;
  --panel: #1c1817;
  --panel-2: #24201d;
  --raised: #2a2522;
  --glow: #2a0808;

  --text: #c4b998;
  --muted: #9a9078;

  --line: #000000;
  --line-strong: #736657;

  /* La família de la sang, amb noms forenses. */
  --accent: #8a1414;
  --accent-hover: #a81a1a;
  --accent-deep: #5c0f0f;
  --accent-dark: #3a0a0a;
  --accent-2: #c4b998;
  --accent-2-soft: #e8e0c8;
  --on-accent: #e8e0c8;
  --on-accent-2: #14100e;

  --green: #8a9c3a;

  --ok-bg: #232a14;
  --ok-line: #4a5a1e;
  --ok-fg: #b5c47a;
  --warn-bg: #2e2410;
  --warn-line: #6b5514;
  --warn-fg: #d9bd6a;
  --error-bg: #2a0c0c;
  --error-line: #8a1414;
  --error-fg: #e0a09a;
  --info-bg: #161c20;
  --info-line: #3a4a55;
  --info-fg: #a8bcc8;
  --live-bg: #3a0a0a;
  --live-line: #8a1414;
  --live-fg: #e8e0c8;

  --row-hover: rgb(196 185 152 / 5%);
  --row-top: rgb(138 20 20 / 16%);
  --accent-soft: rgb(138 20 20 / 20%);
  --scrim: rgb(6 5 4 / 88%);

  --radius: 0;
  --shadow: 6px 6px 0 var(--line);
  --relief-sm: 4px 4px 0 var(--line);
  --relief-xs: 3px 3px 0 var(--line);
  --sunk: inset 0 4px 0 rgb(0 0 0 / 85%);
  --well: inset 3px 3px 0 rgb(0 0 0 / 45%);
  --bw: 3px;
  --bw-thick: 5px;

  /* Cap webfont: la condensació es fabrica amb geometria, no descarregant-la. */
  --font-display:
    "Haettenschweiler", "Arial Narrow", "Liberation Sans Narrow", "Oswald",
    Impact, "Cinzel", sans-serif;
  --font-body: Inter, "Segoe UI", Roboto, -apple-system, system-ui, sans-serif;
  --font-num:
    ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --stripe: repeating-linear-gradient(
    45deg,
    var(--accent-deep) 0 12px,
    var(--bg) 12px 24px
  );

  /* --- El camp -----------------------------------------------------------
     Un camp de Blood Bowl és terra remoguda, no gespa de jardí. El verd del
     sistema és bilis de Nurgle i va molt contingut: aquí serveix de brutícia
     sobre quitrà, i les marques es pinten amb os. */
  --turf-a: #23241a;
  --turf-b: #1f2016;
  --turf-edge: #14120c;
  --turf-line: #c4b998;
  /* Abasts de passada, amb el degradat del Bloodboard: del blau del passi
     ràpid al morat de la bomba. Informen, no decoren. */
  --range-quick: #4ea3d1;
  --range-short: #3f6fc4;
  --range-long: #6a5fbf;
  --range-bomb: #9d4fa8;
  --turf-line-soft: rgb(196 185 152 / 22%);

  /* --- Els dos bàndols ---------------------------------------------------
     Local i visitant es distingeixen amb la parella freda/càlida del sistema,
     igual que `.log-line.home` i `.away` al gestor. La sang no s'hi gasta:
     està reservada al dany. */
  /* El color de seient no és el de la raça: és «de quin dels dos equips ets».
     Amb l'armadura pintada en metall neutre, l'anella de la peanya és l'únic
     senyal d'equip que queda al camp, i una anella verda sobre gespa verda no
     es veu. Vermell i blau es llegeixen sobre la gespa i entre ells, amb
     qualsevol de les 31 plantilles. */
  --seat-home: #d24a3a;
  --seat-away: #3f8fd4;
  --team-home: #3a4a55;
  --team-home-light: #a8bcc8;
  --team-home-soft: #161c20;
  --team-away: #6b5514;
  --team-away-light: #d9bd6a;
  --team-away-soft: #2e2410;
  --team-ink: #e8e0c8;

  /* --- Noms propis d'aquest joc, damunt dels del sistema ----------------- */
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--bg-soft);
  --surface-3: var(--panel-2);
  --surface-invert: var(--accent-deep);
  --surface-invert-hover: var(--accent);
  --border: var(--line);
  --border-strong: var(--line-strong);

  --ink-0: var(--text);
  --ink-1: var(--muted);
  --ink-2: var(--muted);
  --ink-invert: var(--on-accent);

  --accent-ink: var(--on-accent);
  --danger: var(--accent);
  --positive: var(--green);

  --font-ui: var(--font-body);

  /* Els discs: inicials d'os sobre el color del bàndol. */
  --token-glyph: var(--accent-2-soft);
  --token-ring: var(--line);
  --token-shadow: rgb(0 0 0 / 70%);
  /* Llegibilitat damunt la gespa: l'única ombra de text del full. */
  --turf-ink-shadow: 0 1px 2px rgb(0 0 0 / 60%);
  --turf-vignette: rgb(10 20 8 / 26%);

  /* Codi de vora de peanya NAF. És una convenció externa a aquest sistema —
     la fa servir tothom qui juga— i per això els tons es conserven; el que
     s'hi adapta és el filet, que passa a ser la línia del sistema. */
  /* Els colors que la NAF imprimeix a la peanya: llançadors blanc, receptors
     groc, bloquejadors verd, blitzers vermell, línies gairebé negre. El taronja
     dels especials és convenció de la comunitat, no color oficial. */
  --role-lineman: #474d55;
  --role-blitzer: #c0392b;
  --role-thrower: #f2f2f2;
  --role-catcher: #f0c419;
  --role-blocker: #2e8b3d;
  --role-bigguy: #d9722b;
  --role-ink-dark: #241a08;
  --role-ink-light: #f7eee8;
  --role-fillet: var(--line);
  /* El contorn de les minifigures: el mateix a tots dos temes, perquè és
     el que les separa de la gespa i de qualsevol color d'equip. */
  --fig-line: #14100f;
  /* La vora clara que separa la figura de la gespa, sigui la que sigui. */
  --fig-rim: rgb(246 241 226 / 78%);

  --step--1: 10px;
  --step-0: 12px;
  --step-1: 14px;
  --step-2: 17px;
  --step-3: 22px;
  --step-4: 30px;
  --step-5: clamp(34px, 4vw, 52px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Res no és arrodonit. Els tres noms sobreviuen perquè el full els fa
     servir a cinquanta llocs; tots tres valen zero. */
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;

  /* El relleu, en tres graons sòlids. Si només se’n fan servir dos, el
     sistema perd un nivell de jerarquia. */
  --elev-1: var(--relief-xs);
  --elev-2: var(--relief-sm);
  --elev-3: var(--shadow);

  --cell-size: 32px;
}

/* Pergamí i tinta: el mateix sistema amb els llums encesos, no un full a
   part. Cada token de dalt es torna a escriure aquí. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #cfc5ad;
  --bg-soft: #c5baa1;
  --panel: #ddd4bd;
  --panel-2: #d2c8b0;
  --raised: #c8bda3;
  --glow: #b8a68c;

  --text: #17130f;
  --muted: #524a3e;

  --line: #17130f;
  --line-strong: #6e6252;

  --accent: #7a1010;
  --accent-hover: #941818;
  --accent-2: #4a3f2c;
  --accent-2-soft: #2c2418;
  --on-accent: #e8e0c8;
  --on-accent-2: #ddd4bd;

  --green: #4a5a1e;

  --ok-bg: #ccd4a8;
  --ok-line: #6b7a2a;
  --ok-fg: #2c3410;
  --warn-bg: #e4d3a0;
  --warn-line: #8a6a14;
  --warn-fg: #4a3808;
  --error-bg: #e6c4bc;
  --error-line: #8a1414;
  --error-fg: #5c0f0f;
  --info-bg: #c8d2d6;
  --info-line: #5f7a8a;
  --info-fg: #24343c;
  --live-bg: #e6c4bc;
  --live-line: #8a1414;
  --live-fg: #5c0f0f;

  --row-hover: rgb(23 19 15 / 6%);
  --row-top: rgb(122 16 16 / 16%);
  --accent-soft: rgb(122 16 16 / 18%);
  --scrim: rgb(23 19 15 / 60%);

  --sunk: inset 0 4px 0 rgb(23 19 15 / 45%);
  --well: inset 3px 3px 0 rgb(23 19 15 / 30%);

  /* El camp amb llum: terra seca en comptes de fang negre. */
  --turf-a: #5f5a3c;
  --turf-b: #595437;
  --turf-edge: #45412a;
  --turf-line: #f2ecdc;
  --turf-line-soft: rgb(242 236 220 / 30%);

  --seat-home: #c23b2c;
  --seat-away: #2f7cc0;
  --team-home: #5f7a8a;
  --team-home-light: #24343c;
  --team-home-soft: #c8d2d6;
  --team-away: #8a6a14;
  --team-away-light: #4a3808;
  --team-away-soft: #e4d3a0;
  --team-ink: #17130f;

  --token-glyph: #e8e0c8;
  --token-shadow: rgb(23 19 15 / 45%);
  --turf-ink-shadow: 0 1px 2px rgb(23 19 15 / 45%);
  --turf-vignette: rgb(69 65 42 / 24%);

  --role-lineman: #5a626c;
  --role-blitzer: #a8291d;
  --role-thrower: #f7f3e8;
  --role-catcher: #e0b413;
  --role-blocker: #24702f;
  --role-bigguy: #b85f22;
}

/* --- Base ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
/* El text de rètol: display, majúscules i ombra d'impressió mal registrada
   —una planxa negra i, al doble de distància, una de crosta. Es llegeix com
   una premsa barata de dues tintes on la vermella ha lliscat. */
h1,
h2 {
  font-family: var(--font-display);
  margin: 0;
  text-transform: uppercase;
  color: var(--accent-2-soft);
}
h1 {
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-shadow:
    3px 3px 0 var(--line),
    6px 6px 0 var(--accent-dark);
}
h2 {
  font-size: var(--step-3);
  line-height: 0.92;
  letter-spacing: 0.02em;
  font-weight: 700;
}
/* Com més petit és el text, més ample és l'espaiat: l'espaiat substitueix la
   mida com a senyal de jerarquia. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0;
}
.muted {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--muted);
  max-width: 70ch;
}
.notice {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.6;
}
/* Tota xifra que es compari amb una altra es llegeix en columna. */
.numbers {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* --- Botons -------------------------------------------------------------- */
/* El recorregut de la premuda és exactament el desplaçament de l'ombra: la
   peça cau dins de la seva pròpia ombra i l'ombra desapareix. Si canvia
   --relief-xs, ha de canviar el translate al mateix número. */
button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: var(--bw) solid var(--line);
  border-radius: 0;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.45rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92em;
  font-family: var(--font-display);
  box-shadow: var(--relief-xs);
  transition: none;
}
button:hover:not(:disabled) {
  background: var(--raised);
}
button:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--line);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
/* El primari duu l'ombra doblada: la placa negra i, un pas més enllà, la
   crosta. És l'únic consumidor de --accent-dark, i per això el seu
   recorregut és de 4px i no de 3. */
button.primary,
#actions button:first-of-type {
  background: var(--accent-deep);
  color: var(--on-accent);
  box-shadow:
    4px 4px 0 var(--line),
    4px 4px 0 2px var(--accent-dark);
}
/* El canvi d'estat es narra com a coagulació: de sang seca a sang fresca. */
button.primary:hover:not(:disabled),
#actions button:first-of-type:hover:not(:disabled) {
  background: var(--accent);
}
button.primary:active:not(:disabled),
#actions button:first-of-type:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--line);
}
:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

/* Els camps inverteixen la profunditat: tot component és aixecat i el text
   on pots escriure és un forat retallat al paper. */
input,
select,
textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: var(--bw) solid var(--line);
  border-radius: 0;
  box-shadow: var(--well);
  transition: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    var(--well),
    0 0 0 3px var(--accent-dark);
}

/* --- Capçalera ----------------------------------------------------------- */
header {
  position: relative;
  /* Una sola línia: cada píxel que es guanya aquí se l'emporta el camp. */
  min-height: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-1) clamp(var(--space-3), 3vw, var(--space-6))
    calc(var(--space-1) + 6px);
  /* El rentat de sang darrere la barra, i la cinta de perill de la trinxera
     pintada al fons —mai com a caixa a part. */
  background:
    var(--stripe) bottom / 100% 6px no-repeat,
    linear-gradient(var(--glow), var(--panel) 70%);
  border-bottom: var(--bw-thick) solid var(--line);
}
/* Res de la barra no s'embolica: una peça que parteix el text fa créixer la
   capçalera, que és exactament el que volíem evitar. El nom del joc és el
   primer que cedeix, perquè és l'únic que no diu res de la partida. */
header > * {
  white-space: nowrap;
}
.brand {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-soft);
}
.brand small {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--ink-2);
  letter-spacing: 0.34em;
  margin-top: 3px;
  font-weight: 600;
}
.crest {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--surface-invert);
  color: var(--ink-invert);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  border: 2px solid var(--line);
  border-radius: 0;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
/* El segell: petit, emmarcat i molt espaiat. */
.tag {
  margin-left: auto;
  padding: 0.12rem 0.55rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- Contenidor ---------------------------------------------------------- */
main {
  max-width: 1600px;
  margin: auto;
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-8))
    var(--space-8);
}
.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.intro p:not(.eyebrow) {
  color: var(--ink-1);
  margin: var(--space-2) 0 0;
}
.weather {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--info-fg);
  background: var(--info-bg);
  border: 2px solid var(--info-line);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
}
.weather span {
  font-size: var(--step--1);
  color: var(--info-fg);
  font-weight: 600;
}
.weather small {
  display: block;
  font-size: 10px;
  color: var(--ink-1);
  margin-top: 2px;
  font-weight: 400;
}

/* --- Marcador ------------------------------------------------------------ */
/* El marcador ja no viu a una barra de títol que ocupa tota l'amplada: ara és
   una peça de la franja del camp i es dimensiona com a tal. */
.score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-1);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.score > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.score b {
  font-size: var(--step-3);
  font-weight: 800;
}
.score small {
  font-family: var(--font-ui);
  font-weight: 500;
}
/* Identitat d'equip al marcador: una barra de color i el nom tenyit. */
.score-team {
  font-weight: 700;
}
.score-team::before {
  content: "";
  width: 6px;
  height: 26px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--team-home);
}
.score-team.away {
  flex-direction: row-reverse;
}
.score-team.away::before {
  background: var(--team-away);
}
.score .numbers {
  display: block;
  text-align: center;
  font-family: var(--font-num);
  font-size: var(--step-5);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent-2-soft);
  background: var(--bg);
  border: var(--bw) solid var(--line);
  padding: 0.05em 0.3em;
  box-shadow: var(--sunk);
}
/* El separador és sang: l'única cosa vermella del marcador. */
.numbers span {
  color: var(--accent);
  margin: 0 var(--space-3);
}
.numbers small {
  display: block;
  font-family: var(--font-ui);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-top: var(--space-2);
  font-weight: 700;
}

/* --- Graella principal --------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}
.layout > aside,
.layout > section {
  min-width: 0;
}
.layout > aside {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.player-card,
.action-card,
.control-bar,
.arena {
  min-width: 0;
  /* El registre hi flota a sobre. */
  position: relative;
}
aside {
  background: none;
  border: 0;
  padding: 0;
}

/* --- Panells ------------------------------------------------------------- */
/* La superfície canònica del sistema: cartell enganxat, vora que talla,
   relleu sòlid i el nervi de sang clavat per dalt. Qualsevol superfície nova
   que faci de targeta l'ha de dur. */
.player-card,
.action-card,
.control-bar,
.arena,
.manager-panel,
.hotseat-card,
.bottom > div,
.roster {
  position: relative;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: 0;
  box-shadow: var(--relief-sm);
  color: var(--text);
}
.player-card::before,
.action-card::before,
.manager-panel::before,
.hotseat-card::before,
.bottom > div::before,
.roster::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--accent-deep);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
/* El nervi ocupa els sis primers píxels: el contingut comença per sota. */
.player-card,
.action-card,
.manager-panel,
.hotseat-card,
.bottom > div,
.roster {
  padding-top: max(var(--space-3), 10px);
}
.player-card,
.action-card,
.control-bar {
  padding: var(--space-4);
}
/* El bàndol tenyeix el nervi: és l'únic lloc on el color d'equip mana sobre
   la franja seca, perquè la fitxa diu de qui és el jugador actiu. */
.player-card.home::before {
  background: var(--team-home);
}
.player-card.away::before {
  background: var(--team-away);
}
.player-card h2 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--step-3);
}
.player-card .eyebrow {
  color: var(--muted);
}
.control-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.6;
}
.control-bar button,
.undo {
  width: 100%;
}
.undo {
  margin-bottom: var(--space-3);
}

/* --- Arena i camp -------------------------------------------------------- */
.arena {
  background: var(--surface-1);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  box-shadow: var(--elev-2);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pitchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-bottom: var(--space-3);
  font-weight: 500;
  /* El registre flota sobre la banda esquerra del camp i comença just aquí:
     sense aquest marge, el marcador li queda a sota i no es llegeix cap dels
     dos. */
  padding-left: min(296px, 44%);
}
.pitchbar .score {
  margin-left: auto;
}
.pitchbar span:first-child {
  color: var(--ink-0);
  font-weight: 600;
}
/* Cap desplaçament: el camp es redimensiona fins a cabre-hi sencer.
   Les pistes han de ser definides perquè el 100% del camp hi resolgui. */
.scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-m);
  /* Contenidor de consulta: el camp s'hi ajusta amb cqw/cqh. */
  container-type: size;
}
/* Camp i banquetes comparteixen la mida de casella: trenta columnes en total,
   dues per banqueta i vint-i-sis de camp, dins de l'espai que hi hagi. */
.field {
  --cell: min(calc(100cqw / 30), calc(100cqh / 15));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.bench {
  width: calc(var(--cell) * 2);
  height: calc(var(--cell) * 15);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 0 2px;
}
.bench-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.bench-title {
  font-size: max(7px, calc(var(--cell) * 0.28));
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-1);
  border-bottom: 1px solid var(--line);
}
.bench-slots {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  overflow: hidden;
}
.bench-seat {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: grid;
  place-items: center;
  container-type: size;
}
.bench-seat .token {
  position: relative;
  width: 84%;
  height: 84%;
}
.pitch {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  grid-template-rows: repeat(15, 1fr);
  /* «Contain» exacte: la menor entre l'amplada disponible i la que implica
     l'alçada disponible. Files i columnes venen del tauler real. */
  --cols: 26;
  --rows: 15;
  aspect-ratio: var(--cols) / var(--rows);
  width: calc(var(--cell) * var(--cols));
  height: auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-s);
  /* Ratlles de tallagespa i vinyeta: la gespa com a superfície, no com a graella. */
  background-color: var(--turf-a);
  background-image:
    radial-gradient(
      ellipse at 50% 45%,
      transparent 40%,
      var(--turf-vignette) 100%
    ),
    repeating-linear-gradient(
      90deg,
      var(--turf-a) 0 calc(200% / var(--cols, 26)),
      var(--turf-b) calc(200% / var(--cols, 26)) calc(400% / var(--cols, 26))
    );
  box-shadow:
    inset 0 0 0 2px var(--turf-line-soft),
    inset 0 0 0 6px var(--turf-edge),
    var(--elev-3);
}
.cell {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  container-type: size;
  border: 0;
  border-right: 1px solid var(--turf-line-soft);
  border-bottom: 1px solid var(--turf-line-soft);
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: none;
}
.cell:hover {
  background: var(--row-hover);
}
/* Marques oficials, amb el codi del Bloodboard: daurat per a les línies que
   divideixen el camp, vermell per a les dues zones que decideixen el partit
   —les de marca i la línia de scrimmage—, i res més. */
.cell.halfway {
  border-right: 2px solid var(--turf-line);
}
.cell.wide {
  border-bottom: 2px dashed
    color-mix(in srgb, var(--turf-line) 70%, transparent);
}
/* L'abast de cada casella quan es declara una passada. */
.cell[data-range] {
  /* Prou densitat perquè el to es distingeixi sobre la gespa: el Bloodboard
     en gasta menys perquè el seu camp és gairebé negre. */
  background-color: color-mix(in srgb, var(--range) 38%, transparent);
}
.cell[data-range="QUICK"] {
  --range: var(--range-quick);
}
.cell[data-range="SHORT"] {
  --range: var(--range-short);
}
.cell[data-range="LONG"] {
  --range: var(--range-long);
}
.cell[data-range="BOMB"] {
  --range: var(--range-bomb);
}
/* La línia on es planten els tres de davant. */
.cell.scrimmage {
  background-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.cell.endzone {
  background-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--turf-line-soft) 0 2px,
    transparent 2px 7px
  );
}
.endzone:last-child {
  background-image: repeating-linear-gradient(
    45deg,
    var(--turf-line-soft) 0 2px,
    transparent 2px 7px
  );
}

/* --- Estats de destí i recorregut ---------------------------------------- */
.reachable:after {
  content: "";
  width: 26%;
  aspect-ratio: 1;
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--line);
}
.cell.reachable-far {
  background: var(--turf-line-soft);
}
.cell.planned {
  background: color-mix(in srgb, var(--accent-2) 30%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent-2);
}
.cell.reachable[data-step]:not([data-step=""]):after {
  content: attr(data-step);
  width: auto;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--turf-line);
  font-family: var(--font-display);
  font-size: max(13px, 40cqmin);
  font-weight: 800;
  text-shadow: var(--turf-ink-shadow);
}
.cell.reachable:has(.token:not([hidden])) {
  box-shadow: inset 0 0 0 3px var(--accent-2);
  background-color: color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.step-marker {
  position: absolute;
  right: 1px;
  bottom: 0;
  z-index: 3;
  min-width: max(14px, 34cqmin);
  background: var(--accent-2);
  color: var(--on-accent-2);
  border-radius: 0;
  border: 1px solid var(--line);
  padding: 1px 3px;
  font-family: var(--font-display);
  font-size: max(10px, 28cqmin);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}

/* El registre, flotant sobre la banda esquerra del camp. Plegat és una sola
   barra; desplegat, una llista amb el seu propi desplaçament. */
.log-panel {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 7;
  width: min(280px, 42%);
  background: var(--surface-1);
  border: var(--bw) solid var(--line);
  box-shadow: var(--elev-2);
}
.log-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  padding: var(--space-2);
}
.log-panel[data-open="false"] #log {
  display: none;
}
.log-panel[data-open="true"] #log {
  max-height: min(46vh, 380px);
  overflow: auto;
  padding: var(--space-2);
}

/* --- Fitxes de jugador ---------------------------------------------------
   Dos senyals: el disc diu quin posicional és, amb el color que la NAF
   imprimeix a la peanya, i l'anella diu de quin equip és. El dorsal no hi és:
   al camp no serveix de res i la fitxa lateral ja el diu.                    */
.token {
  --team-base: var(--team-home);
  --seat: var(--seat-home);
  --role: var(--role-lineman);
  --role-ink: var(--role-ink-light);
  --ring: max(3px, 9cqmin);
  position: relative;
  width: 84%;
  height: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--ring) solid var(--seat);
  overflow: visible;
  line-height: 1;
  background: radial-gradient(
    circle at 34% 28%,
    color-mix(in srgb, #ffffff 16%, var(--role)),
    var(--role) 62%
  );
  /* Filet fosc als dos costats de l'anella: la fa visible sobre gespa i sobre
     qualsevol color, i separa el color d'equip del del posicional. */
  box-shadow:
    inset 0 0 0 1.5px var(--role-fillet),
    0 0 0 1.5px var(--role-fillet);
  z-index: 1;
}
.token.orc {
  --team-base: var(--team-away);
  --seat: var(--seat-away);
}
.token[data-role="blitzer"] {
  --role: var(--role-blitzer);
}
.token[data-role="thrower"] {
  --role: var(--role-thrower);
  --role-ink: var(--role-ink-dark);
}
.token[data-role="catcher"] {
  --role: var(--role-catcher);
  --role-ink: var(--role-ink-dark);
}
.token[data-role="blocker"] {
  --role: var(--role-blocker);
}
.token[data-role="bigguy"] {
  --role: var(--role-bigguy);
}
/* La mida distingeix stunty i Big Guy sense gastar cap color. */
.token[data-size="small"] {
  width: 62%;
  height: 62%;
}
.token[data-size="large"] {
  width: 100%;
  height: 100%;
}
/* Inicials del posicional, centrades dins el disc. */
.player-token {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(9px, 31cqmin);
  letter-spacing: 0.01em;
  color: var(--role-ink);
  text-shadow: none;
  pointer-events: none;
}
/* La insígnia penja fora del disc: mai ha de tapar les inicials. */
.token-number {
  position: absolute;
  /* Ancorada a la casella, no al disc: així tampoc tapa les inicials quan el
     disc és petit (stunty) i es manté fora en tots els casos. */
  right: calc(-1 * max(4px, 11cqmin));
  bottom: calc(-1 * max(3px, 9cqmin));
  z-index: 3;
  min-width: max(11px, 26cqmin);
  padding: 0 2px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--accent-deep);
  color: var(--on-accent);
  border: 1px solid var(--token-ring);
  font-family: var(--font-display);
  font-size: max(9px, 22cqmin);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* El nom complet del posicional queda per a tecnologies assistives. */
.token-role {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Els daus de la darrera tirada, clavats a la cantonada de la fitxa. No els
   llegeix cap tecnologia assistiva: el registre ja ho explica amb paraules. */
.cell-dice {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1px;
  z-index: 3;
  pointer-events: none;
}
.cell-dice .dice-group {
  display: flex;
  gap: 1px;
}
.cell-dice svg,
.cell-dice .die {
  width: max(10px, 34cqmin);
  height: max(10px, 34cqmin);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 60%));
}
.token-posture {
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 3;
  min-width: max(13px, 38cqmin);
  height: max(13px, 38cqmin);
  display: grid;
  place-items: center;
  background: var(--surface-invert);
  color: var(--ink-invert);
  border: 1px solid var(--token-ring);
  border-radius: 50%;
  font-size: max(10px, 28cqmin);
  line-height: 1;
}
.ball-marker {
  position: absolute;
  right: -4px;
  bottom: -5px;
  font-size: max(13px, 36cqmin);
  z-index: 4;
}
.token.selected {
  box-shadow:
    inset 0 0 0 1.5px var(--role-fillet),
    0 0 0 1.5px var(--role-fillet),
    0 0 0 4px var(--accent-2);
}
.token.target {
  box-shadow:
    inset 0 0 0 1.5px var(--role-fillet),
    0 0 0 1.5px var(--role-fillet),
    0 0 0 3px var(--accent-2);
}
.token.used {
  filter: saturate(0.35) brightness(0.82);
}
.token:has(.token-posture) {
  transform: rotate(-16deg);
}
.token:has(.token-posture) .player-token {
  opacity: 0.75;
}
/* --- Minifigures ---------------------------------------------------------
   Quan el jugador té figura dibuixada, el disc deixa de ser el jugador i passa
   a ser la seva peanya: una el·lipse a terra que segueix portant el color NAF
   del rol i l'anella del seu equip. La figura s'hi dreça a sobre i pot sortir
   de la casella cap amunt.

   Els dos canals queden separats, que és el que la maqueta va ensenyar que
   calia: el rol viu a la peanya i l'equip a la figura. Si el rol també pintés
   les espatlleres, a mida de casella s'empassava el color de l'equip. */
.token[data-figure] {
  width: 66%;
  height: 25%;
  aspect-ratio: auto;
  align-self: end;
  margin-bottom: 5%;
  --ring: max(2px, 6cqmin);
  --fig-kit: color-mix(in srgb, var(--team-base) 55%, var(--fig-line));
}
.token[data-figure][data-size="small"] {
  width: 44%;
  height: 18%;
}
.token[data-figure][data-size="large"] {
  width: 74%;
  height: 26%;
}
/* La figura es penja de la peanya pels peus. Dins del viewBox els peus són a
   58 de 64, o sigui al 90,6% de l'alçada: amb `bottom: 50%` la vora inferior
   queda al centre de la peanya i el 9,4% que sobra la torna a baixar just el
   que cal perquè hi trepitgi. */
.token-figure {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 140%;
  height: auto;
  transform: translate(-50%, 9.4%);
  transform-origin: 50% 90.6%;
  overflow: visible;
  pointer-events: none;
  /* Dues ombres de radi zero fan una vora clara al voltant de la silueta
     sencera, i la tercera és l'ombra de contacte que la posa a terra. Amb
     això la figura se separa de qualsevol gespa i de qualsevol color d'equip. */
  filter: drop-shadow(0 0 0.8px var(--fig-rim))
    drop-shadow(0 0 0.8px var(--fig-rim))
    drop-shadow(0 1.5px 1.5px rgb(0 0 0 / 60%));
  z-index: 2;
}
/* L'amplada va en unitats de contenidor, no en percentatge.
   Un percentatge en un element absolut es resol contra la caixa de farciment
   del disc —o sigui descomptant-ne l'anella—, que és molt més petita que la
   casella i feia sortir les figures a mig tamany. Amb `cqmin` la mida és una
   fracció neta de la casella, que és el que es vol dir.

   El viewBox fa 44×64: l'alçada surt sola i val width × 64/44. La normal hi
   cap justa (94%), la stunty queda per sota i el Big Guy en sobresurt un pèl,
   que és precisament el seu paper. */
.token[data-figure][data-size="normal"] .token-figure {
  width: 64.6cqmin;
}
.token[data-figure][data-size="small"] .token-figure {
  width: 51cqmin;
}
.token[data-figure][data-size="large"] .token-figure {
  width: 73cqmin;
}
/* Les lletres tornen, però penjades de la peanya i no a sobre: el codi NAF
   diu el rol, i dos posicionals del mateix rol dins d'un equip —una Bruja Elfa
   i un Blitzer elf fosc— comparteixen color per força. Les inicials són el que
   els separa sense inventar-se cap codi nou. */
.token[data-figure] .player-token {
  inset: auto auto -12% -2%;
  width: max(12px, 29cqmin);
  height: max(8px, 20cqmin);
  border-radius: 2px;
  background: var(--surface-invert);
  color: var(--ink-invert);
  border: 1px solid var(--role-fillet);
  font-size: max(6px, 14cqmin);
  font-weight: 800;
  letter-spacing: 0;
  z-index: 3;
  pointer-events: none;
}
/* La pilota anava clavada a la cantonada del disc, i el disc ara és una peanya
   a terra: quedava als peus i gairebé no es veia. Puja a alçada de tors, que
   és on es llegeix que el jugador la porta. */
.token[data-figure] .ball-marker {
  right: -26%;
  bottom: 150%;
  font-size: max(13px, 40cqmin);
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 70%));
}

/* A terra: la peanya es queda plana i qui cau és la figura, girant sobre els
   peus. Girar el conjunt inclinava també la peanya, que és el terra. I la xapa
   es fa petita i se'n va a la cantonada: amb la mida de dret tapava el jugador
   estirat, que és justament el que s'ha de veure. */
.token[data-figure] .token-posture {
  min-width: max(10px, 26cqmin);
  height: max(10px, 26cqmin);
  font-size: max(8px, 19cqmin);
  right: -12%;
  top: 4%;
}
.token[data-figure]:has(.token-posture) {
  transform: none;
}
.token[data-figure]:has(.token-posture) .token-figure {
  transform: translate(-50%, 9.4%) rotate(72deg) scale(0.86);
}
.portrait-frame {
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-m);
  border: var(--bw) solid var(--line);
  background: radial-gradient(
    ellipse at 50% 120%,
    var(--turf-a),
    var(--turf-edge)
  );
}
/* Al retrat el mateix disc creix i llegeix com un escut d'equip. */
.portrait-frame .player-portrait {
  --team-base: var(--team-home);
  --team-edge: var(--team-home-light);
  --role: var(--role-lineman);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 5px solid var(--role);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--token-glyph);
  text-shadow: var(--turf-ink-shadow);
  background: radial-gradient(
    circle at 34% 28%,
    color-mix(in srgb, var(--team-edge) 55%, var(--team-base)),
    var(--team-base) 62%
  );
  box-shadow:
    inset 0 0 0 1.5px var(--role-fillet),
    0 0 0 1.5px var(--role-fillet);
}
.player-card.away .portrait-frame .player-portrait {
  --team-base: var(--team-away);
  --team-edge: var(--team-away-light);
}
.player-card[data-role="blitzer"] .player-portrait {
  --role: var(--role-blitzer);
}
.player-card[data-role="thrower"] .player-portrait {
  --role: var(--role-thrower);
}
.player-card[data-role="catcher"] .player-portrait {
  --role: var(--role-catcher);
}
.player-card[data-role="blocker"] .player-portrait {
  --role: var(--role-blocker);
}
.player-card[data-role="bigguy"] .player-portrait {
  --role: var(--role-bigguy);
}

/* Al retrat la figura substitueix el disc, i la peanya passa a ser una
   el·lipse a terra: el color del rol a dins i l'anella de l'equip a fora,
   igual que al camp, de manera que el jugador es llegeix igual als dos llocs. */
/* El retrat és l'únic lloc on la figura es veu a mida de debò: a 78px el detall
   que es dibuixa —cascs, tuscs, embenats, costures— no arribava a llegir-se, i
   és justament el que distingeix un posicional d'un altre. El marc creix només
   quan hi ha figura, i amb prou pes per guanyar el disseny compacte. */
.portrait-frame:has(.player-portrait[data-figure]) {
  height: 128px;
}
.portrait-frame .player-portrait[data-figure] {
  position: relative;
  padding: 0;
  width: 104px;
  height: 116px;
  place-items: end center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  --fig-kit: color-mix(in srgb, var(--team-base) 55%, var(--fig-line));
}
.portrait-frame .player-portrait[data-figure]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 54px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--role);
  border: 2.5px solid var(--team-base);
  box-shadow: 0 0 0 1.5px var(--role-fillet);
}
.portrait-frame .player-portrait[data-figure] .token-figure {
  position: relative;
  bottom: auto;
  left: auto;
  width: 79px;
  height: 115px;
  transform: none;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 50%));
}

/* --- Estadístiques i habilitats ------------------------------------------ */
.stats {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-4) 0;
}
.stats > div,
.stats div {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: var(--space-2) var(--space-1);
  background: var(--surface-3);
  border-radius: var(--radius-s);
}
.stats b,
.player-card .stats b {
  font-family: var(--font-num);
  font-size: var(--step-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stats small,
.player-card .stats small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-top: 2px;
  font-weight: 600;
}
.player-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}
.skill-icon {
  --skill-size: 34px;
  display: inline-block;
  flex-shrink: 0;
  width: var(--skill-size);
  height: var(--skill-size);
  background-image: url("/assets/reference/skills.jpg");
  background-size: 480px 360px;
  background-repeat: no-repeat;
  border-radius: var(--radius-s);
  border: var(--bw) solid var(--line);
}
.skill-icon:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}
.skill-label {
  font-size: var(--step--1);
  padding: 0.12rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel-2);
}

/* --- Accions ------------------------------------------------------------- */
#actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
#actions > * {
  flex-basis: 100%;
}
#actions .action-icon,
#actions .die-choice {
  flex: 0 0 auto;
}
#actions .action-icon,
#actions button.action-icon {
  /* Amplada segons el contingut: hi caben la icona i el nom de l'acció. */
  width: auto;
  min-width: 50px;
  height: 50px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  color: var(--ink-0);
  border-radius: var(--radius-m);
}
/* Icona i nom, en fila. */
.action-icon svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.action-icon span {
  white-space: nowrap;
}
/* En pantalles estretes la barra d'accions ja va justa: hi mana la icona. */
@media (max-width: 720px) {
  .action-icon span {
    display: none;
  }
}
#actions .action-icon[aria-pressed="true"],
#actions button.action-icon[aria-pressed="true"] {
  background: var(--surface-invert);
  color: var(--ink-invert);
  border-color: var(--surface-invert);
}
#actions .die-choice {
  background: var(--surface-2);
  padding: var(--space-1);
}
.route-summary {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-1);
}
.foul-assists {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: var(--step--1);
}
.foul-assists select,
.form-field select {
  color: var(--ink-0);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 6px var(--space-2);
  font: inherit;
}

/* La fitxa comparteix columna amb els daus: tot el que hi ha a dins va més
   arrambat, perquè hi càpiga sense desplaçar-se. */
.dice-rail > .player-card .stats {
  margin: 6px 0;
}
.dice-rail > .player-card .player-skills {
  gap: 3px;
  margin: 4px 0;
}
.dice-rail > .player-card > p.muted {
  margin: 3px 0;
  font-size: var(--step--2);
}

/* --- Columna dreta: mitja per als daus, mitja per a la fitxa -------------- */
/* Les dues meitats es desplacen per dins. Sense això, una tongada llarga de
   tirades empenyia la fitxa fora de la pantalla, i una fitxa amb moltes
   habilitats feia el mateix amb els daus. */
.layout > .dice-rail {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
  min-height: 0;
}
.rail-dice,
.dice-rail > .player-card {
  min-height: 0;
  overflow-y: auto;
}
.rail-dice {
  display: flex;
  flex-direction: column;
}
.rail-dice .dice-tray {
  flex: 1 1 auto;
}

/* --- Columnes d'entrenador ----------------------------------------------- */
/* Cada columna lateral és el racó d'un entrenador i es llegeix sencera: tres
   files de capçalera, els seus daus al mig, i la seva fitxa al peu. Abans el
   nom, el torn i les repeticions vivien a la barra de títol, lluny dels daus
   i de la fitxa del mateix equip. */
.coach-head {
  display: grid;
  gap: 1px;
  padding: var(--space-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--seat-home);
}
.coach-head.coach-away {
  border-left: 0;
  border-right: 3px solid var(--seat-away);
  text-align: right;
}
/* A qui li toca jugar se li nota sense haver de llegir res. */
.coach-head[data-active="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
}
.coach-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}
.coach-row {
  margin: 0;
  font-size: var(--step--2);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* El buc de la fitxa: el 40% de baix de la columna, buit mentre el jugador
   seleccionat sigui de l'altra banda. */
.card-slot {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card-slot > .player-card {
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
/* La llegenda flota a baix a la dreta: és consulta, no una acció del torn. */
.legend-toggle {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 40;
}

/* El marcador i l'estat de connexió baixen a la franja del camp: la barra de
   títol ja no hi és i aquesta informació no havia de desaparèixer amb ella. */
.pitchbar .score {
  flex: 0 0 auto;
}
.pitchbar .numbers {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}
.pitchbar .numbers small {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--muted);
}
/* La caixa de daus s'ajusta al que hi ha: estirada fins al buc de la fitxa
   deixava un requadre buit de mig pam. */
.layout > aside > .rail-dice {
  align-self: start;
  max-height: 100%;
}
/* Les etiquetes de tirada no s'han de tallar per la meitat d'una paraula. */
.dice-roll > span:first-child {
  overflow-wrap: anywhere;
}

/* --- Safata de daus ------------------------------------------------------ */
/* La safata viu al rail dret: petita, estable i sense tapar el camp. */
.dice-tray {
  /* Ocupa el que li calgui, no tot el que hi ha: a la columna esquerra té la
     fitxa del jugador a sota i no l'ha d'empènyer al peu. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: none;
  border: 0;
}
.dice-close {
  color: var(--ink-invert);
  margin: -2px -4px 0 0;
}
.dice-tray .die {
  width: 25px;
  height: 25px;
  border-radius: var(--radius-s);
}
/* El JS calcula el desplaçament del sprite per a 28px: escalem la caixa
   sencera en lloc de la mida de fons, que el desalinearia. */
.dice-tray .block-face {
  transform: scale(0.88);
  transform-origin: center;
}

.dice-close {
  float: right;
  padding: 0 var(--space-2);
  font-size: var(--step-1);
  box-shadow: none;
  border-color: transparent;
  background: none;
}
/* L'acció al costat i els daus a la dreta: cada tirada ocupa una línia, i
   així en caben tres o quatre a la vista en lloc d'una. Apilades en vertical,
   una sola tirada es menjava tota la safata. */
.dice-roll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--space-1);
  padding: 3px 0;
  margin-top: 0;
  border-top: var(--bw) solid var(--line);
}
.dice-roll:first-of-type {
  border-top: 0;
}
.dice-roll > span:first-child {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--ink-1);
  text-align: left;
  line-height: 1.25;
  /* Els noms llargs no han de fer créixer la fila fins a tapar-ne d'altres. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dice-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
}
.dice-total {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-0);
}
.die {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--accent-2-soft);
  border: 1px solid var(--border-strong);
  box-shadow: var(--elev-1);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
}
.die img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pip-die {
  grid-template-columns: repeat(var(--pip-columns, 3), 1fr);
  grid-auto-rows: 1fr;
  padding: 3px;
  gap: 1px;
  place-items: center;
}
.pip {
  width: 100%;
  aspect-ratio: 1;
  max-width: 5px;
  border-radius: 50%;
  background: var(--ink-0);
}
.block-face {
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("/assets/reference/block-dice.png");
  background-size: 203.1273px 67.2px;
  background-repeat: no-repeat;
}
/* --- Registre i peu ------------------------------------------------------ */
.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.bottom > div {
  background: var(--surface-1);
  color: var(--ink-0);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}
.bottom .eyebrow {
  margin: 0 0 var(--space-2);
}
#log {
  max-height: 130px;
  overflow: auto;
  color: var(--ink-1);
  font-size: var(--step--1);
}
/* La línia que explica dany sagna: espinada de sang i tinta ferida. És la
   tesi del sistema, no un estil de severitat genèric. */
#log p.harm {
  border-left: 8px solid var(--accent);
  padding-left: var(--space-2);
  color: var(--error-fg);
  background: var(--error-bg);
}
#log p {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.help {
  border-left: 8px solid var(--info-line);
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-1);
  line-height: 1.7;
  background: none;
  border-radius: 0;
}
.help b {
  color: var(--ink-0);
}

/* --- Dugouts ------------------------------------------------------------- */
.dugouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.dugout {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  font-size: var(--step--1);
}
.dugout button,
.dugouts button {
  text-align: left;
  padding: 6px var(--space-2);
  font-size: var(--step--1);
}

/* --- Portada i formularis ------------------------------------------------ */
.hotseat-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--scrim);
  overflow-y: auto;
}
.hotseat-card {
  width: min(100%, 560px);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border: var(--bw) solid var(--line);
  border-radius: 0;
  background: var(--surface-1);
  box-shadow: var(--elev-3);
}
.hotseat-card h2 {
  font-size: clamp(var(--step-3), 5vw, var(--step-4));
}
.hotseat-description {
  line-height: 1.7;
  color: var(--ink-1);
}
.hotseat-card form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-3);
}
.hotseat-card form > input {
  width: 100%;
  font: inherit;
  color: var(--ink-0);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  padding: 11px var(--space-3);
}
.hotseat-card form > button,
.hotseat-card > button {
  width: 100%;
  margin-top: var(--space-2);
}
.form-field {
  display: grid;
  gap: var(--space-2);
  color: var(--ink-1);
  font-size: var(--step--1);
  font-weight: 600;
}
/* Una opció: el botó i la línia que diu què implica. Van junts, o sigui que
   el buit de la graella no els ha de separar. */
.choice {
  display: grid;
  gap: var(--space-1);
}
.hotseat-card .choice button {
  width: 100%;
  margin: 0;
}
.choice .hint {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}
.hotseat-limits {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-2);
}
.extra-time-option {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--step--1);
  margin: var(--space-3) 0;
  color: var(--ink-1);
}
/* --- Sala d'espera --------------------------------------------------------
   El mateix bloc que el plafó de plantilles: dins del diàleg d'entrada, i amb
   la llista de gent com a cos. Cada fila és un nom i una decisió. */
.lobby-panel {
  background: var(--surface-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--step--1);
}
.lobby-me {
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: var(--space-3);
}
.lobby-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.lobby-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--ink-0);
}
.hotseat-card .lobby-list button {
  width: auto;
  margin: 0;
  padding: 4px var(--space-3);
  font-size: var(--step--1);
}
/* Un repte enviat és una espera: es veu, però no crida com una pregunta. */
.lobby-waiting {
  border: 1px dashed var(--line);
  background: var(--surface-1);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.lobby-waiting p:first-child {
  color: var(--ink-0);
  font-weight: 700;
}
/* I el que s'ha acabat sense partit, amb el motiu. */
.lobby-notice {
  border-left: var(--bw) solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
/* Un repte rebut és una pregunta, i ha de destacar sobre la llista. */
.lobby-challenge {
  /* Destaca sense cridar: el vermell d'aquest projecte és per al mal, i un
     repte no ho és. */
  border: var(--bw) solid var(--info-line);
  background: var(--info-bg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.lobby-challenge p {
  color: var(--ink-0);
  margin-bottom: var(--space-2);
}
.hotseat-card .lobby-challenge button {
  width: auto;
  margin: 0 var(--space-2) 0 0;
  padding: 5px var(--space-3);
}

/* --- Plantilles del gestor ----------------------------------------------- */
/* Un bloc apart dins del diàleg d'entrada: és opcional, i s'ha de veure que
   ho és. Quan el servidor no té gestor configurat, no arriba a existir. */
.manager-panel {
  background: var(--surface-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--step--1);
}
.manager-panel > .muted {
  line-height: 1.6;
  margin: var(--space-2) 0 var(--space-3);
}
.manager-login {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.hotseat-card .manager-login {
  margin: 0;
}
.manager-login input {
  width: 100%;
  font: inherit;
  color: var(--ink-0);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: var(--space-2);
}
.hotseat-card .manager-login > button {
  width: auto;
  margin: 0;
}
.manager-who {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  color: var(--ink-1);
}
.hotseat-card .manager-who > button {
  width: auto;
  margin: 0;
}
.manager-rosters {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.manager-rosters li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-1);
}
.manager-roster-name {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--ink-0);
}
/* El botó de triar és petit: la decisió important és quina plantilla, i el
   nom de l'equip ha de manar per damunt del botó. */
.hotseat-card .manager-rosters button {
  width: auto;
  margin: 0;
  padding: 4px var(--space-3);
  font-size: var(--step--1);
}
@media (max-width: 560px) {
  .manager-login {
    grid-template-columns: 1fr;
  }
}

/* --- Adaptació ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .layout {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }
  .layout .control-bar {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  header .score {
    order: 3;
    flex: 1 0 100%;
    padding: var(--space-2) 0 var(--space-3);
  }
  /* Sense xassís de finestra, .scroll no té alçada definida i 100cqh valdria
     zero. Aquí el camp torna a mida mínima llegible amb desplaçament: en un
     telèfon un camp de 26×15 sencer donaria caselles de 15px, inservibles. */
  .scroll {
    container-type: normal;
    overflow: auto;
    place-items: start;
  }
  .pitch {
    width: max(100%, calc(var(--cols) * 26px));
  }
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .intro .weather,
  .tag {
    display: none;
  }
}
@media (max-width: 600px) {
  header {
    min-height: 52px;
  }
  main {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
  .score {
    padding: var(--space-3);
    font-size: var(--step-0);
  }
  .score b {
    font-size: var(--step-2);
  }
  .numbers small {
    font-size: 8px;
    line-height: 1.5;
  }
  .stats b {
    font-size: var(--step-1);
  }
  .dugouts {
    grid-template-columns: minmax(0, 1fr);
  }
  .pitchbar span:last-child {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Xassís de joc -------------------------------------------------------
   HUD de consola: el camp ocupa gairebé tota la finestra, una columna prima a
   l'esquerra amb la fitxa i el registre, i tots els controls en una barra
   inferior en línia. Ha d'anar al final del full: sobreescriu les regles base. */
@media (min-width: 901px) {
  html,
  body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* El contenidor real de l'aplicació és #app; body només l'allotja. */
  #app {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  header {
    flex: 0 0 auto;
    min-height: 44px;
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
  main {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin-block: 0;
    margin-inline: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: var(--space-2);
  }
  /* Fora de la pantalla de joc: reclam, ajuda i llegendes de referència. */
  main > .intro,
  .player-panel .bottom > .help {
    display: none;
  }

  /* --- Graella: fitxa a l'esquerra, camp al centre, controls a sota ------ */
  .layout {
    min-height: 0;
    margin-top: 0;
    /* Les bandes, el mínim que cal per llegir daus i fitxa: la resta és camp. */
    grid-template-columns: 168px minmax(0, 1fr) 172px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-1);
    align-items: stretch;
  }
  /* La fitxa no es mou; el registre és l'únic que es desplaça. */
  .layout > .player-panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
    gap: var(--space-2);
  }
  .player-panel .player-card {
    flex: 0 0 auto;
  }
  /* El registre ja no hi viu: l'ajuda no ha d'empènyer daus ni fitxa. */
  .player-panel .bottom {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
  }
  .player-panel .bottom > div {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Rail dret: daus a la meitat de dalt, fitxa del jugador a la de baix. Abans
     només hi anaven els daus i la resta de la columna quedava buida. */
  /* Les dues columnes laterals comparteixen graella: capçalera de l'entrenador
     a dalt, els seus daus al mig, i el 40% de baix per a la fitxa del jugador
     quan el seleccionat és del seu equip. */
  .layout > .player-panel,
  .layout > .dice-rail {
    position: relative;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 40%;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    overflow: hidden;
  }
  .layout > .player-panel {
    grid-column: 1;
  }
  .layout > .dice-rail {
    grid-column: 3;
  }
  .layout > aside > .rail-dice {
    padding: var(--space-2);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
  }
  .arena {
    grid-column: 2;
    grid-row: 1;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: var(--space-1);
  }
  /* La barra inferior travessa tota l'amplada. */
  /* Una sola línia: controls, accions i avís conviuen a la mateixa barra. */
  .layout > .action-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    /* Una línia i prou: cap contingut futur pot tornar a robar-li alçada
       al camp. El que no hi càpiga es desplaça horitzontalment. */
    height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .layout > .action-panel > * {
    max-height: 40px;
  }
  .action-panel > * {
    margin: 0;
  }
  .action-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
  }
  .control-bar {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
  }
  .control-status {
    max-width: 22ch;
  }
  .control-bar button,
  .undo {
    width: auto;
    margin: 0;
  }
  /* Accions en línia, no apilades. */
  #actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0;
  }
  #actions > * {
    flex: 0 0 auto;
  }
  #actions {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #actions .route-summary,
  .action-card .notice {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Marcador integrat a la barra superior ---------------------------- */
  header .score {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 var(--space-5);
    border-radius: 0;
  }
  .score .numbers {
    font-size: var(--step-2);
  }
  .score i {
    height: 16px;
  }
  .numbers small {
    margin-top: 0;
  }

  /* --- Panells discrets: acompanyen, no competeixen --------------------- */
  .player-card,
  .action-card,
  .control-bar,
  .player-panel .bottom > div {
    padding: var(--space-2);
    box-shadow: none;
  }
  .player-card h2 {
    font-size: var(--step-1);
    margin: 2px 0;
  }
  .portrait-frame {
    height: 78px;
  }
  .portrait-frame .player-portrait {
    width: 60px;
    height: 60px;
    padding: 10px;
    box-shadow: inset 0 0 0 2px var(--token-ring);
  }
  .stats {
    margin: var(--space-2) 0;
    gap: 2px;
  }
  .stats > div,
  .stats div {
    padding: 3px 1px;
  }
  .stats b {
    font-size: var(--step-0);
  }
  .stats small {
    font-size: 8px;
  }
  .skill-icon {
    --skill-size: 26px;
  }
  .player-panel .bottom {
    display: block;
    max-height: none;
    margin-top: 0;
  }
  .player-panel .bottom > div {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
  }
  #log {
    max-height: none;
  }
  #actions .action-icon,
  #actions button.action-icon {
    /* El nom de l'acció mana sobre l'amplada: retallat no serveix de res. */
    width: auto;
    min-width: 38px;
    height: 38px;
  }
  .action-icon svg {
    width: 20px;
    height: 20px;
  }
  button {
    padding: 6px var(--space-3);
  }
}
/* A partir d'aquí no hi ha límit d'amplada: tot l'excedent és per al camp. */
@media (min-width: 1500px) {
  main {
    padding-inline: var(--space-3);
  }
}

/* --- Plantilla i banqueta, sota demanda ---------------------------------- */
.roster {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 8;
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
  background: var(--surface-1);
  border-top: var(--bw) solid var(--line);
  box-shadow: var(--elev-3);
}
.roster .dugouts {
  margin-top: var(--space-2);
}
.roster-close {
  margin-top: var(--space-3);
}
.roster-toggle {
  padding: 5px var(--space-3);
  font-size: var(--step--1);
}

/* --- Identitat d'equip a daus i barra ------------------------------------
   El color diu qui tira i qui juga sense haver de llegir cap nom.          */
.dice-section {
  border-radius: var(--radius-s);
  padding: var(--space-2);
  margin-top: var(--space-2);
  border-left: 4px solid var(--border-strong);
  background: var(--surface-2);
}
.dice-section:first-of-type {
  margin-top: 0;
}
.dice-section.home {
  border-left-color: var(--team-home);
  background: var(--team-home-soft);
}
.dice-section.away {
  border-left-color: var(--team-away);
  background: var(--team-away-soft);
}
.dice-owner {
  margin: 0 0 var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  background: var(--border-strong);
  color: var(--ink-invert);
}
.dice-section.home .dice-owner {
  background: var(--team-home);
}
.dice-section.away .dice-owner {
  background: var(--team-away);
}
/* Els daus també porten el color de qui els tira. */
.dice-section.home .die {
  border-color: var(--team-home);
}
.dice-section.away .die {
  border-color: var(--team-away);
}
.dice-section.home .dice-total {
  color: var(--team-home);
}
.dice-section.away .dice-total {
  color: var(--team-away);
}
/* Quan hi ha dues seccions la columna queda partida en dos blocs clars. */
.dice-section .dice-roll:first-of-type {
  border-top: 0;
}
.layout > .action-panel.home {
  background: var(--team-home-soft);
  border-color: color-mix(in srgb, var(--team-home) 35%, transparent);
}
.layout > .action-panel.away {
  background: var(--team-away-soft);
  border-color: color-mix(in srgb, var(--team-away) 35%, transparent);
}

/* Two permanent coach panels; each keeps its latest roll. */
.dice-empty {
  color: var(--ink-1);
  font-size: 12px;
  margin: 12px 0;
}
.dice-section {
  min-height: 100px;
}

/* --- Llegenda del codi de vora NAF --------------------------------------- */
.role-legend {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--bw) solid var(--line);
}
.role-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}
.role-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* La mostra és el mateix anell que porten les fitxes al camp. */
.role-swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 4px solid var(--role-lineman);
  background: var(--surface-3);
  box-shadow:
    inset 0 0 0 1px var(--role-fillet),
    0 0 0 1px var(--role-fillet);
}
.role-swatch[data-role="blitzer"] {
  border-color: var(--role-blitzer);
}
.role-swatch[data-role="thrower"] {
  border-color: var(--role-thrower);
}
.role-swatch[data-role="catcher"] {
  border-color: var(--role-catcher);
}
.role-swatch[data-role="blocker"] {
  border-color: var(--role-blocker);
}
.role-swatch[data-role="bigguy"] {
  border-color: var(--role-bigguy);
}
/* Xip de rol a la fitxa: lliga el color de l'anell amb el nom del posicional
   sense haver d'obrir la plantilla. */
.role-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-1);
}
.role-chip .role-swatch {
  width: 14px;
  height: 14px;
  border-width: 3px;
}

/* Cares tirades a la barra inferior: icones, mai text. */
.rolled-faces {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Ironwood arena — original engraved metal, worn turf and painted miniatures. */
.pitch {
  background-color: #263d30;
  background-image:
    radial-gradient(ellipse at 50% 42%, transparent 35%, #06151099 100%),
    url("/assets/art/ironwood-pitch.svg");
  background-size: 100% 100%;
  border: 1px solid #a4936b;
  border-radius: 3px;
  box-shadow:
    0 0 0 3px #222925,
    0 0 0 4px #6a6551,
    0 9px 26px #0007,
    inset 0 0 24px #030a08aa;
  /* La graella no és decoració: d'ella depèn saber a quina casella és cadascú,
     i per tant l'adjacència i les zones de placatge. A l'11% d'opacitat les
     línies horitzontals no es veien i el camp era una taca verda. */
  --turf-line-soft: #e0dfbb4d;
  --turf-line: #d7ceb0;
}
.pitch .cell.endzone {
  /* La zona de marca només enfosquia, i amb la trama al 5% no es distingia del
     camp: no es veia on es puntua. */
  background-color: #0d1c26cc;
  background-image: repeating-linear-gradient(
    135deg,
    #d8c39a33 0 1.5px,
    transparent 1.5px 9px
  );
  border-right-color: #d1b681a6;
  box-shadow: inset 0 0 0 1px #d8c39a1f;
}
.pitch .cell.scrimmage {
  /* Al 4,7% la línia de scrimmage era invisible, i cal veure-la per desplegar-hi
     els tres jugadors que demana el reglament. */
  background-color: #cdb17a2e;
  box-shadow: inset 0 0 0 1px #cdb17a1a;
}
.pitch .cell.halfway {
  border-right: 2px solid #e4d9b6a8;
}
.arena {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--panel) 85%, #82765b),
    var(--panel) 35%,
    color-mix(in srgb, var(--panel) 92%, #a99778)
  );
  border-color: color-mix(in srgb, var(--line) 55%, #b09a70);
  box-shadow:
    0 12px 35px #0003,
    inset 0 0 0 2px #b29e7020;
}
.token-figure {
  filter: drop-shadow(-0.3px -0.4px 0.3px #ead5a66b)
    drop-shadow(1px 2px 1px #000b);
}
.token[data-figure] {
  --fig-kit: color-mix(in srgb, var(--team-base) 48%, #313c42);
  --fig-line: #161b1c;
  --ring: max(1px, 3cqmin);
  box-shadow:
    inset 0 1px 1px #f1dbab8c,
    0 2px 1px #000b;
}
.player-card {
  --card-metal: #aa9061;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--panel) 88%, #a18c65),
    var(--panel) 40%
  );
  border: 1px solid var(--card-metal);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 3px var(--panel),
    inset 0 0 0 4px #a88f6338,
    0 8px 22px #0003;
  overflow: hidden;
}
.player-card::before {
  height: 2px;
  border: 0;
}
.player-card .eyebrow {
  letter-spacing: 0.17em;
  font-size: 9px;
  color: var(--muted);
}
.player-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 2px 0 4px;
}
.player-card .portrait-frame {
  position: relative;
  isolation: isolate;
  border: 1px solid #b8a27466;
  border-radius: 3px;
  margin-top: 5px;
  background:
    radial-gradient(ellipse at 50% 36%, #b5ab786b, transparent 62%),
    linear-gradient(145deg, #293638, #0c181e 70%);
  box-shadow: inset 0 0 28px #0008;
}
.player-card .portrait-frame::before {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  top: 12px;
  border: 1px solid #c9b78255;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px #b9ac7f0c,
    0 0 0 6px #b9ac7f30;
  z-index: -1;
}
.player-card .portrait-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(transparent, #091419aa);
  pointer-events: none;
}
.player-card .portrait-frame:has([data-figure]) {
  height: 132px;
}
.player-card .portrait-frame .player-portrait[data-figure] {
  width: 94px;
  height: 126px;
  --fig-kit: color-mix(in srgb, var(--team-base) 48%, #313c42);
}
.player-card .portrait-frame .player-portrait[data-figure] .token-figure {
  width: 86px;
  height: 124px;
  filter: drop-shadow(-1px 0 1px #e3cc8966) drop-shadow(3px 6px 3px #0009);
}
.player-card .stats {
  gap: 0;
  border-top: 1px solid #a88f6366;
  border-bottom: 1px solid #a88f6366;
}
.player-card .stats > div {
  background: transparent;
  border-radius: 0;
  border-right: 1px solid #a88f6333;
  padding: 3px 1px;
}
.player-card .stats > div:last-child {
  border-right: 0;
}
.player-card .stats b {
  font-weight: 600;
}
@media (min-width: 1000px) and (max-height: 780px) {
  .player-card .portrait-frame:has([data-figure]) {
    height: 128px;
  }
  .player-card .portrait-frame .player-portrait[data-figure] {
    height: 120px;
  }
  .player-card .portrait-frame .player-portrait[data-figure] .token-figure {
    width: 80px;
    height: 116px;
  }
}
.figure-painting {
  visibility: hidden;
}
.art-ready > .figure-facing > .figure-sculpt {
  visibility: hidden;
}
.art-ready > .figure-facing > .figure-painting {
  visibility: visible;
}
/* L'anella de seient és el que diu de qui és la miniatura: l'armadura pintada
   és metall neutre i no porta cap color d'equip. */
.token[data-figure]:has(.art-ready) {
  border-color: var(--seat);
  box-shadow:
    inset 0 0 0 1px var(--role),
    0 0 0 1.5px var(--seat),
    0 2px 2px #000b;
}
.token .art-ready {
  filter: drop-shadow(0 0 0.6px var(--seat)) drop-shadow(1px 2px 1px #000b);
}
.player-card .role-chip {
  color: var(--text);
}
@media (max-width: 900px) {
  header {
    flex-wrap: wrap;
  }
  header .score {
    width: 100%;
    gap: 8px;
    letter-spacing: 0.03em;
  }
  .score-team {
    flex: 1;
    white-space: normal;
    font-size: 11px;
  }
  .score .numbers {
    flex-shrink: 0;
  }
  .arena .scroll {
    min-height: 496px;
    max-width: 100%;
  }
  .arena .field {
    --cell: 32px;
    width: 960px;
    padding: 5px 0;
  }
  .arena .pitch {
    flex: 0 0 832px;
    width: 832px;
  }
  .arena .bench {
    flex: 0 0 64px;
  }
}
/* Tactical feedback always sits above the decorative material treatment. */
.token[data-figure].selected,
.token[data-figure].target {
  box-shadow:
    inset 0 0 0 1px var(--role-fillet),
    0 0 0 1.5px var(--team-base),
    0 0 0 4px var(--accent-2);
}
.pitch .cell[data-range] {
  background-color: color-mix(in srgb, var(--range) 38%, transparent);
}
.pitch .cell.planned {
  background: color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.pitch .cell.reachable-far:not(.planned) {
  background: var(--turf-line-soft);
}

/* Bench miniatures share orientation and positional art with the playing field. */
.bench-seat .token[data-figure] {
  height: 25%;
  width: 66%;
}
.bench-seat .token[data-figure] .token-number {
  z-index: 3;
}