/*
 * Pactes & Pylônes — feuille du spectateur (index.html, matches.html).
 * Les polices sont chargées par des <link> dans le HTML : un @import ici
 * bloquait le premier rendu derrière une chaîne de requêtes.
 */
:root {
  --bg: #0f1110;
  --surface: #151816;
  --surface-2: #1a1e1b;
  --sunken: #121512;
  --line: #292e2a;
  --line-soft: #202420;
  --ink: #f1f2ee;
  --muted: #b7bbb4;
  --dim: #8f968f;
  --acid: #ff5a2a;
  --acid-soft: #ff7047;
  --ember: #2a1812;
  --ember-line: #6b2b19;
  --good: #4fc58b;
  --bad: #f06a61;
  --radius: 8px;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* `hidden` doit toujours gagner : des règles `display:flex` le neutralisaient. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  margin: 0;
  background: radial-gradient(circle at 20% -10%, #2a1812 0, transparent 32%), var(--bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(#7fa061 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--acid);
  color: #0a0d09;
  font: 600 12px var(--mono);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.app-shell { position: relative; width: min(1540px, calc(100% - 52px)); margin: auto; }

/* ---------- barre du haut ---------- */
.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.brand i { color: var(--acid); font-style: normal; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--acid);
  color: var(--acid);
  font: 9px var(--mono);
  letter-spacing: -1px;
}
.top-nav { display: flex; gap: 4px; font: 11px var(--mono); letter-spacing: .08em; }
.top-nav a { padding: 10px 8px; color: var(--muted); text-decoration: none; border-radius: 6px; }
.top-nav a:hover { color: var(--acid); }
.top-nav a[aria-current="page"] { color: var(--ink); }

.match-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 11px var(--mono);
  letter-spacing: .07em;
  white-space: nowrap;
}
.match-status strong { color: var(--ink); font-weight: 500; }
.match-status strong:empty { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.match-status[data-state="live"] { border-color: var(--ember-line); color: var(--acid-soft); }
.match-status[data-state="live"] .live-dot { background: var(--acid); box-shadow: 0 0 0 4px #ff5a2a22; animation: pulse 2s infinite; }
.match-status[data-state="demo"] .live-dot { background: var(--acid); }
.match-status[data-state="paused"] .live-dot { background: #e1a347; }
.match-status[data-state="offline"] { border-color: #6b2b2b; color: var(--bad); }
.match-status[data-state="offline"] .live-dot { background: var(--bad); animation: blink 1s steps(2, end) infinite; }

/* ---------- en-tête de partie ---------- */
.match-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0 18px;
}
.eyebrow { margin: 0 0 10px; color: var(--acid); font: 11px var(--mono); letter-spacing: .1em; }
.match-header h1, .league-section h2, .panel h2 { margin: 0; letter-spacing: -.055em; }
.match-header h1 { font-size: clamp(28px, 3.6vw, 48px); line-height: .98; }
.match-header-aside { display: grid; justify-items: end; gap: 10px; text-align: right; }
.subhead { max-width: 46ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.source-note, .connection-note {
  max-width: 50ch;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--ember-line);
  border-left: 3px solid var(--acid);
  background: var(--ember);
  color: #d9ded6;
  font: 11px/1.55 var(--mono);
  letter-spacing: .02em;
  text-align: left;
}
.connection-note { border-color: #6b2b2b; border-left-color: var(--bad); background: #2a1515; }
.switch-match { border-color: var(--acid); color: var(--acid-soft); }

/* ---------- bandeau « qui mène » ---------- */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.scoreboard:empty { display: none; }
.score-card {
  position: relative;
  min-width: 0;
  padding: 11px 13px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.score-card.is-leader { border-color: var(--agent); }
.score-card.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent) 45%, transparent); }
.score-card.is-winner { border-color: var(--agent); background: color-mix(in srgb, var(--agent) 14%, var(--surface)); }
.score-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.score-name {
  min-width: 0;
  overflow: hidden;
  color: var(--agent);
  font: 600 13px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-status { margin-left: auto; color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; white-space: nowrap; }
.score-card.is-winner .score-status { color: var(--agent); }
.score-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.score-value { font: 600 24px var(--mono); line-height: 1; }
.score-target { color: var(--muted); font: 11px var(--mono); }
.score-counts { margin-left: auto; color: var(--dim); font: 10px var(--mono); }
.score-bar { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: #232823; }
.score-bar-fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--agent); transition: width .4s ease; }

/* ---------- grille et panneaux ---------- */
.spectator-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(340px, .78fr); gap: 18px; align-items: start; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 21px 15px;
  border-bottom: 1px solid var(--line);
}
.panel h2 { font-size: 22px; }
.board-legend { display: flex; align-items: center; gap: 4px 11px; flex-wrap: wrap; color: var(--muted); font: 11px var(--mono); }
.legend-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 2px; }
.argile { background: #dc5c3e; }
.bois { background: #4ba167; }
.laine { background: #a6cb59; }
.ble { background: #e8ad3b; }
.minerai { background: #78879b; }

/* ---------- plateau ---------- */
.board-wrap {
  position: relative;
  padding: 14px 15px 0;
  background: var(--sunken);
  background-image: radial-gradient(#232823 1px, transparent 1px);
  background-size: 16px 16px;
}
.board-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 760px);
  margin: 0 auto;
  overflow: visible;
}
.board-panel[aria-busy="true"] svg { min-height: 320px; }
.board-loading {
  position: absolute;
  inset: 40% 0 auto;
  margin: 0;
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: .08em;
  text-align: center;
  animation: blink 1.4s ease-in-out infinite;
}
.hex {
  fill: color-mix(in srgb, var(--tile) 60%, #101410);
  stroke: color-mix(in srgb, var(--tile) 75%, #dce8d7);
  stroke-width: 1.2;
  transition: filter .3s ease;
}
.hex-group.is-rolled .hex { filter: brightness(1.3) drop-shadow(0 0 10px var(--acid)); }
.token-disc { fill: #f3ead6; stroke: #0f1110; stroke-width: 1.5; }
.hex-label { fill: #16130e; font: 700 16px var(--mono); text-anchor: middle; }
.token-pip { fill: #16130e; }
.token.is-hot .hex-label, .token.is-hot .token-pip { fill: #c8261b; }
.token-strike { display: none; stroke: var(--acid); stroke-width: 3; stroke-linecap: round; }
.hex-group.is-blocked .token { opacity: .7; }
.hex-group.is-blocked .token-disc { stroke: var(--acid); stroke-width: 3; }
.hex-group.is-blocked .token-strike { display: block; }
.hex-group.is-rolled .token-disc { stroke: var(--acid); stroke-width: 4; }
.territory-name { fill: #eff6e9; fill-opacity: .82; font: 600 9px var(--mono); letter-spacing: .06em; text-anchor: middle; }
.port-pier { stroke: #8a3b22; stroke-width: 2; stroke-dasharray: 2 3; }
.port rect { fill: var(--surface-2); stroke: #8a3b22; stroke-width: 1; }
.port text { fill: var(--ink); font: 700 10px var(--mono); text-anchor: middle; }
.port:hover rect { stroke: var(--acid); fill: var(--ember); }
.route-casing { fill: none; stroke: #0b0d0b; stroke-width: 11; stroke-linecap: round; }
.route-line { fill: none; stroke: var(--piece); stroke-width: 6.5; stroke-linecap: round; }
.route.is-last .route-casing { stroke: #fff; stroke-width: 12; }
.piece path { fill: var(--piece); stroke: #f5faef; stroke-width: 1.6; filter: drop-shadow(0 1px 3px #000a); }
.piece text { fill: #071007; font: 700 9px var(--mono); text-anchor: middle; }
.piece-ring { display: none; fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; }
.piece.is-last .piece-ring { display: block; animation: ring-spin 6s linear infinite; transform-origin: 0 0; }
.robber circle { fill: var(--surface); stroke: var(--acid); stroke-width: 2.5; filter: drop-shadow(0 0 6px #ff5d36aa); }
.robber path { stroke: #ffded3; stroke-width: 2; stroke-linecap: round; }
.route.is-new .route-line { animation: routeGrow .45s ease-out both; }
.piece.is-new .piece-body { animation: pieceDrop .45s cubic-bezier(.2, 1.4, .4, 1) both; }

.winner-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--agent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--agent) 26%, var(--surface)), var(--surface) 75%);
}
.winner-banner.is-revealed { animation: winner-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.winner-trophy { font-size: 28px; line-height: 1; }
.winner-banner b { display: block; color: var(--agent); font: 11px var(--mono); letter-spacing: .12em; }
.winner-banner strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.winner-banner small { display: block; color: var(--muted); font: 11px var(--mono); }

.board-caption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 7px;
  border-top: 1px solid var(--line-soft);
  color: #a9b7a5;
  font: 11px var(--mono);
  letter-spacing: .04em;
}
#board-event { text-align: right; }
.turn-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font: 11px var(--mono);
  letter-spacing: .06em;
}
.turn-flow i { font-style: normal; color: #5c635c; }
.turn-flow span { padding: 4px 6px; border: 1px solid transparent; }
.turn-flow .is-current { border-color: var(--ember-line); background: var(--ember); color: var(--acid-soft); }

/* ---------- état en direct ---------- */
.live-cue:empty { display: none; }
.live-cue { padding: 2px 8px 0; border-top: 1px solid var(--line-soft); }
.live-decision {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #ff5a2a66;
  background: #ff5a2a0d;
  font: 12px var(--mono);
  letter-spacing: .02em;
}
.live-decision b, .live-decision small { display: block; }
.live-decision small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.live-decision.is-retrying { border-color: #e1a34766; background: #e1a3470f; }
.decision-loader { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; color: var(--acid); }
.decision-loader i { display: block; grid-area: 1 / 1; width: 6px; height: 6px; border: 1px solid currentColor; background: var(--surface); }
.loader-orbit { border: 2px solid #ff5a2a38; border-top-color: var(--acid); border-radius: 50%; animation: decision-orbit .82s linear infinite; }
.loader-orbit i { display: none; }
.loader-wave { align-items: end; grid-auto-flow: column; gap: 3px; }
.loader-wave i { grid-area: auto; height: 5px; animation: loader-wave .72s ease-in-out infinite; }
.loader-wave i:nth-child(2) { animation-delay: .12s; }
.loader-wave i:nth-child(3) { animation-delay: .24s; }
.loader-pulse { border-radius: 50%; border: 1px solid var(--acid); animation: loader-pulse .95s ease-out infinite; }
.loader-pulse i { display: none; }
.loader-flip { animation: loader-flip 1s steps(2, end) infinite; }
.loader-flip i:nth-child(2), .loader-flip i:nth-child(3) { display: none; }
.loader-trace { border: 1px solid #ff5a2a66; }
.loader-trace i { width: 4px; height: 4px; border-radius: 50%; background: var(--acid); animation: loader-trace 1.1s linear infinite; }
.loader-trace i:nth-child(2) { animation-delay: -.36s; }
.loader-trace i:nth-child(3) { animation-delay: -.72s; }
.failure-box {
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid #6b2b2b;
  border-left: 3px solid var(--bad);
  background: #2a1515;
  font: 12px/1.5 var(--mono);
}
.failure-box > b { color: var(--bad); letter-spacing: .08em; }
.failure-box p { margin: 4px 0 0; color: #ecd6d3; }
.cue-system { color: var(--muted); font: 12px/1.5 var(--mono); padding: 8px 0; }
.cue-next { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.trade-beam {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(36px, 86px) minmax(84px, 1fr);
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #ff5a2a4d;
  background: var(--surface);
  font: 11px var(--mono);
}
.trade-agent { display: grid; grid-template-columns: 21px 1fr; column-gap: 6px; align-items: center; min-width: 0; color: var(--ink); }
.trade-agent .agent-icon { grid-row: span 2; width: 21px; height: 21px; }
.trade-agent b { color: var(--agent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-agent small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.trade-agent--target { text-align: right; grid-template-columns: 1fr 21px; }
.trade-agent--target .agent-icon { grid-column: 2; }
.trade-agent--target b, .trade-agent--target small { grid-column: 1; }
.trade-line { position: relative; height: 1px; overflow: hidden; background: linear-gradient(90deg, var(--acid), #e8ad3b, var(--acid)); }
.trade-line::after { content: ""; position: absolute; inset: -3px 0; background: linear-gradient(90deg, transparent 0 35%, #fff 50%, transparent 65%); animation: trade-signal 1.35s linear infinite; }
.trade-line i { display: block; width: 5px; height: 5px; margin: -2px auto; border-radius: 50%; background: var(--acid); }

/* ---------- ce qui vient de se passer ---------- */
.action-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 46px;
  padding: 10px 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font: 12px var(--mono);
}
.action-cue.is-updated { animation: cueIn .3s cubic-bezier(.16, 1, .3, 1); }
.cue-agent { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--ink); }
.cue-agent strong { color: var(--agent); }
.cue-reason { flex-basis: 100%; margin: 0; color: #d4dbd0; font: italic 13px/1.5 Manrope, system-ui, sans-serif; }
.forced-badge, .winner-tag {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: .06em;
}
.cue-deltas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
.resource-delta { padding: 3px 6px; border: 1px solid var(--line); background: var(--sunken); font-size: 11px; }
.resource-delta.is-cost { color: var(--bad); border-color: var(--ember-line); background: var(--ember); }
.resource-delta.is-gain { color: var(--good); border-color: #24543a; background: #10251b; }
.cue-label { color: var(--dim); font-size: 10px; letter-spacing: .06em; }
.dice-cue, .robber-cue { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding: 6px 0 0; font-size: 11px; }
.dice-cue > b, .robber-cue > b { color: var(--acid); }
.robber-cue { color: var(--bad); }
.production-player { display: inline-flex; align-items: center; gap: 4px; }
.seat-tag { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.seat-tag b { color: var(--agent); font-weight: 600; }

/* ---------- frise de lecture ---------- */
.timeline-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); }
.control, .speed-button, .agent-filter {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  padding: 8px 11px;
  font: 11px var(--mono);
  letter-spacing: .06em;
}
.control:not(:disabled):hover, .speed-button:hover, .agent-filter:hover { border-color: var(--acid); color: var(--acid); }
.control { min-width: 40px; }
.primary-control { min-width: 92px; border-color: var(--acid); background: var(--acid); color: #0a0d09; font-weight: 700; }
.primary-control:not(:disabled):hover { background: var(--acid-soft); color: #0a0d09; }
.scrubber { display: flex; flex: 1 1 160px; align-items: center; min-width: 120px; }
.scrubber input { width: 100%; height: 24px; margin: 0; accent-color: var(--acid); background: transparent; cursor: pointer; }
.timeline-position { color: var(--dim); font: 11px var(--mono); min-width: 64px; text-align: right; }
.speed-group { display: flex; gap: 2px; }
.speed-button { border-color: transparent; color: var(--muted); }
.speed-button[aria-pressed="true"] { border-color: var(--ember-line); background: var(--ember); color: var(--acid-soft); }
.live-return { border-color: var(--acid); color: var(--acid-soft); }

/* ---------- colonne de droite ---------- */
.log-counter { color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.log-counter b { color: var(--acid); }
.table-state { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
.table-state > div { min-height: 76px; padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.table-state > div:nth-child(even) { border-right: 0; }
.table-state > div:nth-last-child(-n + 2) { border-bottom: 0; }
.table-state dt { color: var(--muted); font: 10px var(--mono); letter-spacing: .09em; }
.table-state dd { margin: 7px 0 0; color: var(--ink); font: 600 13px var(--mono); line-height: 1.35; overflow-wrap: anywhere; }
.table-state dd em { color: var(--muted); font-style: normal; font-size: 11px; }
.active-agent { display: flex; align-items: center; gap: 7px; color: var(--agent); }
.active-agent b { color: var(--agent); }
.active-agent small { display: block; color: var(--dim); font-size: 10px; font-weight: 400; }
.dice-cell { background: var(--sunken); }
.dice-pair { display: inline-flex; align-items: center; gap: 5px; }
.dice-pair b { margin-left: 3px; color: var(--acid); font-size: 18px; }
.dice-pair.is-seven b { color: var(--bad); }
.die { width: 24px; height: 24px; }
.die rect { fill: #f3ead6; stroke: #0f1110; stroke-width: 1; }
.die circle { fill: #16130e; }
.dice-cell dd.is-landed .dice-pair { animation: diceLand .45s ease-out; }
.hands-panel, .specials-panel { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.hands-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hands-heading .eyebrow { margin: 0; }
.hands-heading h3 { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hand-card { min-height: 66px; padding: 9px; border: 1px solid var(--line); border-left: 2px solid var(--agent); background: var(--sunken); }
.hand-card header { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12px; }
.hand-resource { display: inline-block; margin: 2px 6px 2px 0; color: var(--ink); font: 11px var(--mono); }
.hand-resource b { color: var(--agent); }
.hand-empty { color: var(--dim); font: 11px var(--mono); }
.strategy-note { display: grid; gap: 5px; margin-bottom: 10px; padding: 9px; border: 1px solid var(--ember-line); background: var(--ember); }
.strategy-note b { color: var(--acid-soft); font: 10px var(--mono); letter-spacing: .07em; }
.strategy-note strong { font-size: 13px; }
.strategy-note span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.special-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font: 11px var(--mono); }
.special-holder { display: inline-flex; align-items: center; gap: 6px; }
.special-row em { color: #e1a347; font-style: normal; }
.special-row small, .dev-cards small { color: var(--dim); font-size: 11px; }
.dev-cards { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; }
.dev-card { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-left-color: var(--agent); background: var(--sunken); color: var(--muted); font: 10px var(--mono); }
.journal-heading { padding-block: 14px; }
.journal-heading h2 { font-size: 17px; }
.agent-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.agent-filter { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; padding: 7px 9px; color: var(--muted); }
.agent-filter[aria-pressed="true"] { border-color: var(--ember-line); background: var(--ember); color: var(--acid-soft); }
.filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--agent); }
.thought-log { min-height: 160px; max-height: 420px; margin: 0; padding: 0 17px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.thought-log:empty::before { content: "Aucune décision pour ce filtre."; display: block; padding: 18px 0; color: var(--dim); font: 11px var(--mono); }
.thought { padding: 13px 1px 14px; border-bottom: 1px solid var(--line-soft); }
.thought-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font: 11px var(--mono); letter-spacing: .03em; }
.agent-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.agent-name b { color: var(--agent); font-weight: 500; }
.agent-name small, .thought-time { color: var(--muted); }
.thought-time { white-space: nowrap; }
.thought.is-forced .thought-time { color: var(--dim); }
.thought.is-forced .thought-text { color: var(--muted); }
.thought-text { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; }
/* Changement de joueur : un repère dans le journal, pas un coup. */
.thought.is-substitution { margin: 4px 0; padding: 11px 10px 12px; border: 1px dashed color-mix(in srgb, var(--agent) 60%, transparent); background: color-mix(in srgb, var(--agent) 9%, transparent); }
.thought.is-substitution .thought-time { color: var(--agent); font-weight: 600; }
.thought.is-substitution .thought-text { overflow-wrap: anywhere; }
.cue-substitution { color: var(--ink); border-left: 3px solid var(--agent); padding-left: 10px; overflow-wrap: anywhere; }
.thought-reason { margin: 6px 0 0; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--agent) 55%, transparent); color: #c9d1c5; font-size: 13px; font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
q { quotes: "« " " »"; }
.attempts { margin-top: 8px; font: 11px var(--mono); }
.attempts summary { color: var(--muted); cursor: pointer; padding: 4px 0; }
.attempts ol { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.validation-attempt { display: grid; gap: 3px; padding-left: 9px; border-left: 2px solid var(--line); line-height: 1.45; }
.validation-attempt.is-valid { border-left-color: var(--good); }
.validation-attempt.is-invalid { border-left-color: var(--bad); }
.engine-verdict { color: var(--muted); letter-spacing: .05em; }
.validation-attempt.is-valid .engine-verdict { color: var(--good); }
.validation-attempt.is-invalid .engine-verdict { color: var(--bad); }
.engine-reason { color: #c9d1c5; }
.validation-attempt q { color: var(--muted); font-family: Manrope, system-ui, sans-serif; font-style: italic; overflow-wrap: anywhere; }
.log-note { margin: 0; padding: 14px 18px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.agent-icon { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; background: #f5f5f1; }
.agent-mark { display: inline-grid; place-items: center; background: var(--agent); color: #071007; font: 700 11px var(--mono); }

/* ---------- classement ---------- */
.league-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 72px 0; }
.league-section h2 { max-width: 430px; font-size: clamp(32px, 4vw, 54px); line-height: .95; }
.league-intro > p:not(.eyebrow) { max-width: 390px; color: var(--muted); line-height: 1.55; }
.leaderboard { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.leaderboard > li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rank { color: var(--muted); font: 12px var(--mono); }
.faction { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--agent); }
.faction .agent-icon { width: 30px; height: 30px; }
.faction-name { min-width: 0; }
.faction-name strong { display: block; font-size: 16px; }
.faction-name span { display: block; color: var(--muted); font: 11px var(--mono); overflow-wrap: anywhere; }
.faction-name .faction-detail { color: var(--dim); }
.elo { display: grid; justify-items: end; gap: 3px; font: 600 18px var(--mono); text-align: right; }
.elo span { color: var(--muted); font: 400 10px var(--mono); }
.winner-tag { border-color: var(--agent); color: var(--agent); }

/* ---------- page des parties ---------- */
.matches-section { padding: 40px 0 72px; }
.matches-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.matches-intro h1 { margin: 0; font-size: clamp(30px, 4vw, 52px); letter-spacing: -.055em; line-height: .95; }
.matches-intro p:not(.eyebrow) { max-width: 46ch; margin: 0; color: var(--muted); line-height: 1.5; }
.match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.match-list > .empty, .match-list > .list-error { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font: 12px var(--mono); text-align: center; }
.match-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.match-card:hover, .match-card:focus-within { border-color: var(--acid); }
.match-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 11px var(--mono); color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); letter-spacing: .07em; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.status-pill[data-status="running"] { border-color: var(--ember-line); color: var(--acid-soft); }
.status-pill[data-status="running"]::before { background: var(--acid); animation: pulse 2s infinite; }
.status-pill[data-status="paused"] { border-color: #5a4520; color: #e1a347; }
.status-pill[data-status="paused"]::before { background: #e1a347; }
.status-pill[data-status="complete"]::before { background: var(--good); }
.match-card-title { margin: 0; font-size: 18px; letter-spacing: -.03em; }
.match-card-title a { text-decoration: none; }
/* Toute la carte est cliquable, sans imbriquer de contenu interactif dans le lien. */
.match-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.match-card-meta { margin: 0; color: var(--dim); font: 11px var(--mono); }
.match-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.match-seat { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-soft); border-left: 2px solid var(--agent); border-radius: 5px; background: var(--sunken); font: 12px var(--mono); }
.match-seat b { min-width: 0; overflow: hidden; color: var(--agent); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.match-seat .seat-points { margin-left: auto; color: var(--ink); white-space: nowrap; }
.match-seat.is-winner { border-color: var(--agent); background: color-mix(in srgb, var(--agent) 12%, var(--sunken)); }
.match-seat .winner-mark { color: var(--agent); }
.match-failure { margin: 0; padding: 8px 10px; border-left: 3px solid #e1a347; background: #241c10; color: #ecdcc0; font: 11px/1.5 var(--mono); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: .06em;
}

/* ---------- animations ---------- */
@keyframes pulse { 50% { box-shadow: 0 0 0 8px #ff5a2a00; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes routeGrow { from { stroke-dasharray: 0 120; } to { stroke-dasharray: 120 0; } }
@keyframes pieceDrop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 70% { opacity: 1; transform: translateY(2px) scale(1.08); } 100% { transform: none; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes diceLand { 0% { transform: rotate(-12deg) scale(.7); } 60% { transform: rotate(4deg) scale(1.12); } 100% { transform: none; } }
@keyframes cueIn { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes winner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes trade-signal { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes decision-orbit { to { transform: rotate(360deg); } }
@keyframes loader-wave { 50% { height: 19px; background: var(--acid); } }
@keyframes loader-pulse { to { transform: scale(1.3); opacity: 0; } }
@keyframes loader-flip { to { transform: rotate(180deg); } }
@keyframes loader-trace { to { transform: translate(8px, 8px); opacity: .12; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .live-dot, .decision-loader, .decision-loader i, .trade-line::after, .piece-ring, .board-loading { animation: none !important; }
}

/* ---------- tablettes et téléphones ---------- */
@media (max-width: 1060px) {
  .spectator-grid { grid-template-columns: 1fr; }
  .league-section { gap: 38px; }
  .thought-log { max-height: 60vh; }
}
@media (max-width: 720px) {
  .app-shell { width: min(100% - 32px, 1540px); }
  .topbar { min-height: 60px; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; }
  .brand { font-size: 15px; }
  .top-nav { order: 3; width: 100%; justify-content: flex-start; margin-left: -8px; }
  .top-nav a { padding: 10px 8px; }
  .match-status { padding: 5px 9px; font-size: 10px; }
  .match-status strong { display: none; }
  .match-header { display: block; padding: 18px 0 14px; }
  .match-header-aside { justify-items: start; text-align: left; margin-top: 10px; }
  .source-note, .connection-note { max-width: none; }
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .score-card { padding: 9px 10px 10px; }
  .score-value { font-size: 20px; }
  .score-counts { flex-basis: 100%; margin-left: 0; }
  .board-wrap { padding: 6px 4px 0; }
  .board-caption { flex-direction: column; gap: 4px; font-size: 10px; }
  #board-event { text-align: left; }
  .timeline-controls { padding: 11px; gap: 6px; }
  .timeline-position { display: none; }
  .scrubber { order: 5; flex-basis: 100%; }
  .league-section { grid-template-columns: 1fr; gap: 26px; padding: 52px 0; }
  .panel-heading { padding: 15px 16px; }
  .winner-banner { padding: 10px 14px; gap: 10px; }
  .winner-banner strong { font-size: 17px; }
  .winner-trophy { font-size: 22px; }
  .matches-intro { display: block; }
  .matches-intro p:not(.eyebrow) { margin-top: 12px; }
  footer { display: grid; gap: 8px; line-height: 1.6; }
}
@media (max-width: 600px) {
  /* Le plateau occupe toute la largeur : les noms de tuiles laissent la place aux jetons. */
  .territory-name { display: none; }
  .port rect, .port text { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
  .hex-label { font-size: 18px; }
  .hands { grid-template-columns: 1fr; }
  .action-cue { align-items: flex-start; flex-direction: column; }
  .cue-deltas { justify-content: flex-start; }
  .match-seats { grid-template-columns: 1fr; }
}