/* Heraldis — styles de l'app.
 * La coque commune (tokens, fond etoile, ecrans, bandeau install, effets)
 * vit dans engine/engine.css.
 */
@import "engine/engine.css";

/* Cinzel (capitales romaines gravees, OFL) pour les titres ; le texte courant
   reste en Nunito pour la lisibilite. Auto-hebergee (fonts/) : hors-ligne. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Heraldique : nuit bleue et or. */
  --bg: #121526;
  --bg-deep: #0B0D19;
  --bg-grad-top: #1A1E36;
  --bg-glow: rgba(201, 150, 46, 0.20);
  --card: #1D2240;
  --card-border: #2E3560;
  --panel-border: rgba(232, 184, 74, 0.30);
  --track: #2E3560;
  --ink: #F3EEDF;
  --ink-soft: #D9D0B8;
  --ink-dim: #ABA590;
  --yellow: #E8B84A;
  --blue: #86AEEA;
  --red: #EF6A5E;
  --green: #5FCB85;
  --maxw: 560px;
  --font-title: 'Cinzel', var(--font);

  --gold: #E8B84A;
  --gold-deep: #9C7422;
  --bw: min(calc(100vw - 32px), 470px);        /* largeur du plateau */
}

/* Le moteur deplace le focus sur le titre de chaque ecran (lecteurs d'ecran) :
   pas de contour pour ce focus programmatique. */
[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Tout ce qui est « titre » : en-tete, titres d'ecran, legendes, noms des
   joueurs, boutons principaux, resultat. */
.header h1, h2, .rules h3, .field legend, .player-name, .btn--primary, .btn--resume, .stats-table caption {
  font-family: var(--font-title);
}
.header h1 { letter-spacing: 1.5px; font-weight: 900; }
.header .fleur { font-size: 0.8em; vertical-align: 0.05em; }
/* Pendant la partie, l'entete se fait discrete pour laisser la place au plateau. */
body.play-active .header { padding-top: 0; }
body.play-active .header h1 { font-size: 1.25rem; text-shadow: none; }
body.play-active .header p { display: none; }
body.play-active .container { gap: 12px; }
/* En partie, le plateau cache presque tout le ciel : etoiles figees (chaque
   cycle de scintillement coute un petit recalcul de styles sur telephone). */
body.play-active .star { animation-play-state: paused; opacity: 0.7; }

h2 { font-size: 1.2rem; font-weight: 900; color: var(--gold); }
.h-small { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.settings-sub { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); margin: 10px 0 2px; }

/* Icones des boutons (sprite #i-*) : alignees sur le texte par .btn (inline-flex). */
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
#i-play path { fill: currentColor; }

/* ------------------------------------------------------------- Boutons */
.btn--soft {
  background: var(--card); color: var(--ink); border: 1px solid var(--card-border);
  font-size: 0.92rem;
}
@media (hover: hover) and (pointer: fine) {
  .btn--soft:hover { border-color: var(--gold); }
}
.btn--soft:disabled { opacity: 0.4; cursor: not-allowed; }
a.btn { text-decoration: none; }                  /* lien presente comme un bouton (Regles en PDF) */
.btn--wide { width: 100%; margin-top: 8px; padding: 14px; font-size: 1.08rem; }
.btn--resume {
  width: 100%; background: color-mix(in srgb, var(--green) 18%, var(--card));
  border: 2px solid color-mix(in srgb, var(--green) 60%, transparent); color: var(--ink);
  padding: 14px;
}
.home-links { display: flex; gap: 10px; width: 100%; }
.home-links .btn { flex: 1; }

/* ------------------------------------------------------------ Formulaire */
.panel h2 { margin-bottom: 10px; }
.panel--compact { padding: 14px 18px; }
.field { border: none; margin: 12px 0 0; min-width: 0; }
.field legend {
  font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-dim); margin-bottom: 6px;
}
.field-note { color: var(--ink-soft); font-size: 0.9rem; margin-top: 12px; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
/* Modes de jeu : icone toujours au-dessus du texte (meme rendu pour les trois). */
#mode-seg span { flex-direction: column; gap: 3px; }
#mode-seg .ico { width: 1.35em; height: 1.35em; }
.seg label { flex: 1 1 0; min-width: 0; display: flex; }       /* le bouton remplit toute la hauteur de la rangee */
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 8px; border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--bg); border: 2px solid var(--card-border);
  font-weight: 800; font-size: 0.88rem; line-height: 1.15; min-height: 44px;
}
.seg span small { font-weight: 700; font-size: 0.7rem; color: var(--ink-dim); width: 100%; }
.seg input:checked + span { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg)); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.ai-list { display: flex; flex-direction: column; gap: 6px; }
.ai-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ai-opt > span {
  display: grid; grid-template-columns: 1fr; gap: 2px; align-items: center;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 2px solid var(--card-border);
}
.ai-opt .ai-tech { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--ink-dim); opacity: 0.8; font-style: italic; }
.ai-opt .ai-name { font-weight: 900; }
.ai-opt .ai-name small { font-weight: 700; color: var(--gold); font-size: 0.72rem; margin-left: 6px; letter-spacing: 1px; }
.ai-opt .ai-desc { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.3; }
.ai-opt input:checked + span { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--bg)); }
.ai-opt input:checked + span .ai-desc { color: var(--ink-soft); }
.ai-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.demo-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.select-field { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 0.85rem; }
.select-field span { display: flex; align-items: center; gap: 6px; }
.select-field select {
  padding: 10px; border-radius: 10px; background: var(--bg); color: var(--ink);
  border: 2px solid var(--card-border);
}

.toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.toggle input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }

.dot { display: inline-block; width: 17px; height: 20px; flex: none; vertical-align: -4px; }   /* mini-pion (sprite) */

/* -------------------------------------------------------------- Joueurs */
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.player {
  background: var(--card); border: 2px solid var(--card-border); border-radius: 14px;
  padding: 8px 10px; min-width: 0; transition: border-color .2s ease, box-shadow .2s ease;
}
.player.is-turn { border-color: var(--gold); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 35%, transparent); }
.player.is-winner { border-color: var(--green); box-shadow: 0 0 18px color-mix(in srgb, var(--green) 45%, transparent); }
.player-head { display: flex; align-items: center; gap: 6px; font-weight: 900; }
.player-name {                    /* « Le Grand Maître » : deux lignes plutot que tronque */
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.1; overflow-wrap: anywhere;
}
.player-sub { font-size: 0.7rem; color: var(--ink-dim); font-weight: 700; min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-reserve { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.player-reserve span { font-weight: 900; color: var(--ink); font-size: 1rem; }
.player-reserve.is-empty span { color: var(--red); }
.player-houses { display: flex; gap: 4px; margin-top: 5px; font-size: 1.45rem; }
.player-houses .crest { background: var(--ink-dim); opacity: 0.22; transition: opacity .2s ease, background-color .2s ease; }
.player-houses .crest.on { background: color-mix(in srgb, var(--hc) 55%, #FFF3DC); opacity: 1; }

.status { min-height: 1.4em; font-weight: 800; text-align: center; color: var(--ink); }
.status .thinking::after { content: '…'; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-info { font-size: 0.72rem; color: var(--ink-dim); text-align: center; margin-top: -8px; width: 100%; line-height: 1.35; }
/* deux lignes fixes, jamais de retour a la ligne (place reservee si une IA joue) */
.ai-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-info span:first-child { font-weight: 800; color: var(--ink-soft); }
.ai-info.has-ai span { min-height: 1.35em; }

/* Chances de victoire : deux aplats francs (erable / noyer) separes d'un
   trait net ; la part de Clair s'etire depuis la gauche. */
.odds { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: -4px; }
.odds-t { font-size: 0.78rem; font-weight: 900; min-width: 3.1em; font-variant-numeric: tabular-nums; }
.odds-t:first-child { text-align: right; color: #E6C48E; }
.odds-t:last-child { color: #B98A62; }
.odds-bar {
  position: relative; flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
  background: #4A2B16; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.odds-fill {                     /* glisse (transform, sur le GPU) au lieu de changer de largeur */
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: #E2BF84; border-right: 2px solid #140A03;
  transform: translateX(-50%); transition: transform 0.6s ease;
}
.odds-fill.is-full { border-right: 0; }
.odds.is-computing .odds-bar { opacity: 0.75; }

/* -------------------------------------------------------------- Plateau */
/* Bois : grain procedural (SVG feTurbulence etire -> fibres), sans fichier
   image, donc disponible hors-ligne. --grain-dark : veines sombres (bois
   clair, cases peintes, cadre). Le grain des pions est dans le sprite SVG. */
:root {
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.02 2.4 0 0 0 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.16' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 1.5 0 0 0 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --maple: linear-gradient(135deg, #F4DEB2, #DDB67E 55%, #C29458);
  --walnut: linear-gradient(135deg, #6E4629, #432817 55%, #22140B);
}

.board-wrap { width: var(--bw); }
.board {
  --gap: 6px;
  /* Cases creusees dans le bois : ombre portee par le bord superieur, reflet
     sur le bord inferieur (--recess, dessine sur ::before, sous les pions) et
     arete du plateau autour de la cavite (--lip). */
  --recess: inset 0 5px 8px -1px rgba(0, 0, 0, 0.72), inset 0 -2px 3px rgba(255, 225, 180, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  --lip: 0 1px 1px rgba(255, 225, 170, 0.35), 0 -1px 1px rgba(0, 0, 0, 0.55);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap);
  width: 100%; aspect-ratio: 1; padding: 9px;
  background:
    var(--grain-dark) 0 0 / 280px 280px,
    linear-gradient(160deg, #84532F, #5C361C 55%, #40240F);
  border: 3px solid var(--gold-deep); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 220, 160, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
.cell {
  position: relative; border: none; border-radius: 9px; padding: 0;
  background: var(--c1); overflow: visible; cursor: default; color: inherit;
  box-shadow: var(--lip);
}
.cell--alliance { background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }
.cell--house { box-shadow: inset 0 0 0 3px var(--gold), var(--lip); }
.cell::before {                                   /* bois peint : le grain transparait */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--grain-soft) var(--gx, 0) var(--gy, 0) / 200px 200px,
    rgba(12, 14, 26, 0.14);
  border-radius: inherit;
  box-shadow: var(--recess);
}
/* Emblemes des Maisons (crests/*.png, dessin fourni) : la silhouette sert de
   masque, la couleur vient de `background`. */
.crest {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: var(--crest-ink, #F5EAD2);
  -webkit-mask: var(--crest) center / contain no-repeat;
  mask: var(--crest) center / contain no-repeat;
}
.crest--loup { --crest: url(crests/loup.png); }
.crest--aigle { --crest: url(crests/aigle.png); }
.crest--ours { --crest: url(crests/ours.png); }
.crest--cerf { --crest: url(crests/cerf.png); }
.crest--sanglier { --crest: url(crests/sanglier.png); }
.crest--inline { width: 1.35em; height: 1.35em; vertical-align: -0.35em; background: var(--gold); }

.sym {                                            /* sous les pions, comme sur un vrai plateau */
  position: absolute; z-index: 1; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 0 0.7px rgba(35, 18, 0, 0.95)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}
/* Emblemes du plateau : peinture doree satinee (le liseré sombre du filtre
   ci-dessus garde l'aigle lisible sur ses cases jaunes). */
.sym .crest { display: block; background: linear-gradient(160deg, #EBCB7C 0%, #D6AE56 45%, #BF9440 75%, #CFA650 100%); }
.cell--house .sym { font-size: calc(var(--bw) * 0.125); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cell--alliance .sym { font-size: calc(var(--bw) * 0.074); }
.cell--alliance .sym--1 { top: 5%; left: 5%; }
.cell--alliance .sym--2 { bottom: 5%; right: 5%; }

/* Pion en bois tourne, debout (sprite SVG #pawn-1 / #pawn-2, genere par
   tools/make-pawns.py). Son point de contact au sol (50,90 sur 100x120, soit
   75 % de la hauteur) est au centre de la case ; la tete deborde sur la case
   du dessus, comme sur un vrai plateau vu en perspective. Les cases du bas
   etant plus loin dans le DOM, leurs pions passent devant : bon ordre de
   profondeur. Seules les parties peintes captent le toucher (qui revient donc
   a la case du pion). Le halo (dernier coup, capture) suit la silhouette. */
.piece {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 84%; aspect-ratio: 100 / 120;
  transform: translate(-50%, -75%); pointer-events: none;
  animation: drop 0.25s ease-out;
}
.piece svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.piece .pawn-shadow use { pointer-events: none; }
.piece use { pointer-events: visiblePainted; cursor: inherit; }
@keyframes drop {
  0% { transform: translate(-50%, -110%); opacity: 0; }
  70% { transform: translate(-50%, -72%); opacity: 1; }
  100% { transform: translate(-50%, -75%); opacity: 1; }
}

.cell.is-playable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .cell.is-playable:hover { box-shadow: inset 0 0 0 3px #fff, var(--lip); }
}
/* Aides de jeu (reglages, coupees par defaut) : halos fixes, sans animation en
   boucle (repeindre les pions a chaque image ralentissait l'app). */
/* Contour net et symetrique qui epouse la silhouette : filtre SVG de
   dilatation (#pw-outline-*, dans le sprite des pions). */
.board.show-captures .cell.is-capturable .piece .pawn use { filter: url(#pw-outline-cap); }
.cell.is-locked { cursor: not-allowed; }
.cell.is-locked::before { background: rgba(8, 9, 16, 0.62); }
/* Dernier coup : anneau blanc sur le pion (l'or est reserve aux Maisons). */
.board.show-last .cell.is-last .piece .pawn use { filter: url(#pw-outline-last); }
/* Les deux a la fois (le coup adverse que l'on peut reprendre) : contour parti
   blanc / rouge. Plus specifique que les deux regles ci-dessus. */
.board.show-last.show-captures .cell.is-last.is-capturable .piece .pawn use { filter: url(#pw-outline-both); }
/* Vainqueur / conseil : contour net, sans halo. */
.cell.is-win { outline: 3px solid var(--green); outline-offset: -3px; }
.cell.is-hint { outline: 3px solid var(--blue); outline-offset: -3px; }
.truce {
  position: absolute; z-index: 3; top: 4%; right: 5%; width: calc(var(--bw) * 0.05); height: calc(var(--bw) * 0.05);
  color: #FFF; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.truce svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico--flag { color: #FFF; }
.coord {
  display: none; position: absolute; z-index: 3; bottom: 3%; left: 6%;
  font-size: 0.6rem; font-weight: 900; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px #000;
}
body.show-coords .coord { display: block; }
body.show-coords .cell--alliance .sym--2 { bottom: 8%; }

.board.is-busy .cell { cursor: progress; }

/* Plateau miniature (regles) */
.board--mini { --bw: min(calc(100vw - 80px), 300px); width: var(--bw); margin: 10px auto 4px; --gap: 3px; padding: 5px; }
.board--mini .cell { border-radius: 6px; }

/* ----------------------------------------------------------- Fin / actions */
.result {
  width: 100%; text-align: center; padding: 14px;
  background: var(--card); border: 2px solid var(--gold); border-radius: 16px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 30%, transparent);
}
.result h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.result h2 .ico { width: 1.1em; height: 1.1em; }
.result p { color: var(--ink-soft); margin-top: 4px; font-size: 0.92rem; }
.result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

.actions { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.actions .btn { flex: 1 1 0; padding: 10px 6px; font-size: 0.85rem; min-width: 0; }

.legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  font-size: 0.75rem; color: var(--ink-dim); font-weight: 700;
}
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.lg--house { box-shadow: inset 0 0 0 2px var(--gold); background: var(--card); }
.lg--last { border-radius: 50%; box-shadow: 0 0 0 2px #FFF; background: var(--maple); }
.lg--cap { border-radius: 50%; box-shadow: 0 0 0 2px var(--red); background: var(--walnut); }
.lg--both {                                        /* anneau parti : blanc a gauche, rouge a droite */
  width: 16px; height: 16px; margin: -2px; border-radius: 50%; border: 2px solid transparent;
  background: var(--walnut) padding-box, linear-gradient(90deg, #FFF 50%, var(--red) 50%) border-box;
}

.log { width: 100%; font-size: 0.85rem; color: var(--ink-soft); }
.log summary { cursor: pointer; font-weight: 800; color: var(--ink-dim); text-align: center; padding: 6px; }
.log ol { padding-left: 2.2em; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.log li { padding: 2px 0; }

/* ------------------------------------------------------------- A propos */
.about { text-align: center; }
.about p { color: var(--ink-soft); margin-top: 8px; line-height: 1.5; }
.about a { color: var(--gold); }
.about .about-title { font-family: var(--font-title); font-weight: 900; font-size: 1.7rem; color: var(--gold); margin-top: 4px; }
.about .about-by { font-size: 1.05rem; color: var(--ink); }
.about .about-meta { font-weight: 700; color: var(--ink-dim); font-size: 0.88rem; }
.about .about-rights { font-size: 0.82rem; color: var(--ink-dim); }
.about h3 { font-family: var(--font-title); color: var(--gold); font-size: 1rem; margin: 18px 0 4px; }
.about ul { list-style: none; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; }
.about .about-version { font-size: 0.75rem; color: var(--ink-dim); margin-top: 16px; }

/* --------------------------------------------------------------- Regles */
.rules h3 { color: var(--gold); font-size: 1rem; margin: 16px 0 4px; }
.rules p, .rules li { line-height: 1.5; color: var(--ink-soft); font-size: 0.93rem; }
.rules ul, .rules ol { padding-left: 1.2em; }
.rules-summary li { margin-top: 2px; }
.rules ul ul { margin-top: 4px; }
.rules strong { color: var(--ink); }
.rules-meta { color: var(--ink-dim) !important; font-weight: 700; font-size: 0.85rem !important; }
.example { background: var(--bg); border-left: 3px solid var(--gold); padding: 8px 12px; border-radius: 0 8px 8px 0; margin-top: 8px; }

/* -------------------------------------------------------------- Stats */
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.stats-table th, .stats-table td { padding: 7px 4px; text-align: center; border-bottom: 1px solid var(--card-border); }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-dim); }
.stats-table .w { color: var(--green); font-weight: 900; }
.stats-table .l { color: var(--red); font-weight: 900; }
.stats-empty { color: var(--ink-dim); text-align: center; padding: 14px 0; }

@media (max-width: 380px) {
  .player { padding: 6px 8px; }
  .player-houses { font-size: 1.2rem; gap: 2px; }
  .seg span { font-size: 0.8rem; padding: 8px 4px; }
}
@media (min-width: 520px) {
  .demo-grid { grid-template-columns: 1fr 1fr; }
}