* { box-sizing: border-box; }

/* Palette calquée sur l'UI de campagne de Dark Crusade (cf. ref/UI Campagne) :
   panneaux pierre/métal gris, encarts rouge sang, chiffres de réquisition
   cyan, libellés or, cadres lumineux vert (fin de tour) / orange (attaque). */
:root {
  --gold: #c9a227;
  --gold-bright: #f0d060;
  --blood: #5a0d0d;
  --blood-dark: #3d0808;
  --blood-bright: #8c1a12;
  --bone: #d8cba8;
  --steel-hi: #8a8a90;
  --steel: #5c5c62;
  --steel-dark: #3a3a3e;
  --steel-darker: #26262a;
  --cyan: #3fd6e8;
  --green-glow: #57c84a;
  --orange-glow: #e8722a;

  --stone-panel:
    repeating-linear-gradient(93deg, #00000000 0 7px, #00000014 7px 9px),
    repeating-linear-gradient(4deg, #ffffff00 0 11px, #ffffff08 11px 13px),
    linear-gradient(180deg, #6b6b70 0%, #55555a 25%, #47474c 60%, #3a3a3f 100%);
  --red-inset:
    radial-gradient(ellipse at 30% 20%, #7a151280 0%, #00000000 60%),
    radial-gradient(ellipse at 75% 80%, #200404c0 0%, #00000000 55%),
    linear-gradient(180deg, #64100e 0%, #4a0b0a 50%, #380807 100%);
}

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: #050403;
  color: var(--bone);
}
.hidden { display: none !important; }

h1, h2, h3 {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  text-shadow: 0 0 6px #00000080;
}

/* ---------- Écrans login / lobby (inchangés dans l'esprit) ---------- */

.centered-panel {
  max-width: 440px;
  margin: 8vh auto;
  padding: 2rem;
  background: linear-gradient(180deg, #1a1410 0%, #100c09 100%);
  border: 1px solid var(--gold);
  outline: 1px solid #000;
  outline-offset: -5px;
  box-shadow: 0 0 30px #00000090, inset 0 0 40px #00000060;
  border-radius: 2px;
}
.centered-panel h1 { font-size: 1.4rem; margin-top: 0; text-align: center; }
.centered-panel label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--gold); font-variant: small-caps; }
.centered-panel input {
  width: 100%;
  padding: 0.5rem;
  background: #0b0806;
  border: 1px solid #4a3a20;
  border-radius: 2px;
  color: var(--bone);
  font-family: inherit;
}

/* `.btn` reprend le style de `button` mais s'applique aussi aux <a> (liens de
   navigation entre pages stylises comme des boutons - cf. menu/games/new-game
   .html, qui sont desormais de vraies pages separees plutot que des blocs
   affiches/masques dans une seule page). */
button, .btn {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  border: 1px solid #000;
  outline: 1px solid #5a5a5a80;
  border-radius: 2px;
  color: var(--bone);
  font-family: inherit;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.2); }
button.secondary, .btn.secondary { background: linear-gradient(180deg, #2a2420, #171310); }
button.secondary:hover, .btn.secondary:hover { filter: brightness(1.3); }
button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.error { color: #ff6b5e; font-size: 0.85rem; margin-top: 0.5rem; }
.row { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.muted { color: #a8977a; font-size: 0.85rem; }

/* Selecteur de race (lobby) : grille d'emblemes du jeu, choix dore. */
#race-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 0.4rem;
}
.race-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 3px 5px;
  cursor: pointer;
  border: 1px solid #000;
  outline: 1px solid #5a5a5a60;
  background: linear-gradient(180deg, #24201a, #14110d);
  transition: filter 0.12s, outline-color 0.12s;
}
.race-choice:hover { filter: brightness(1.25); }
.race-choice.selected {
  outline: 2px solid var(--gold-bright);
  box-shadow: 0 0 10px #f0d06070, inset 0 0 12px #00000080;
  filter: brightness(1.15);
}
.race-choice img { width: 44px; height: 44px; display: block; border: 1px solid #000; }
.race-choice span {
  font-size: 0.62rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-align: center;
  white-space: nowrap;
}

/* "Nouvelle partie" (new-game.html) : la page cumulait initialement tous les
   blocs a plat (liste des parties, creation, rejoindre) dans un seul lobby,
   separes par de simples <hr>, peu lisible - cf. ref/Ui Menu/Ui_menu1.png pour
   l'etat d'origine. Regroupes d'abord en cartes distinctes, puis Mes parties/
   Nouvelle partie/Campagne sorties en pages separees (menu.html, games.html,
   new-game.html, campaign.html - cf. shared.js), .lobby-card/.lobby-cta restant
   utilises pour la creation/le "rejoindre avec un code" ici. */
.lobby-panel { max-width: 480px; }
.lobby-card {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem 1.1rem;
  background: #0d0a08;
  border: 1px solid #3a2f1e;
  border-radius: 2px;
}
.lobby-card-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  border-bottom: 1px solid #3a2f1e;
  padding-bottom: 0.4rem;
}
.lobby-cta { width: 100%; margin-top: 1rem; }
.lobby-logout { width: 100%; margin-top: 1.2rem; }

/* Retour vers le menu principal (games.html, new-game.html) - lien discret en
   haut de page plutot qu'un bouton, pour ne pas concurrencer les actions
   principales de l'ecran. */
.back-link {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: var(--gold);
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.back-link:hover { color: var(--gold-bright); }

/* Menu principal (menu.html) : point d'entree apres connexion, deux grandes
   cartes de navigation vers Mes parties / Nouvelle partie - desormais de
   vraies pages separees plutot que des blocs empiles dans un seul lobby. */
.menu-panel { max-width: 460px; text-align: center; }
.menu-panel h1 { font-size: 1.7rem; }
.menu-nav { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.6rem; }
.menu-nav-btn {
  position: relative;
  display: block;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, #24201a, #14110d);
  border: 1px solid var(--gold);
  outline: 1px solid #000;
  outline-offset: -4px;
  border-radius: 2px;
  text-align: left;
  text-decoration: none;
  transition: filter 0.12s;
}
.menu-nav-btn:hover { filter: brightness(1.2); }
.menu-nav-title {
  display: block;
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.menu-nav-desc { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: #a8977a; line-height: 1.35; }
.menu-nav-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  padding: 2px 8px;
  background: var(--blood-bright);
  border: 1px solid #000;
  border-radius: 10px;
  color: var(--bone);
  font-size: 0.68rem;
  font-variant: small-caps;
}

/* Page "Mes parties" (games.html) : stats agregees + filtre par statut,
   au-dessus de la liste (#my-games-list, deja stylee plus bas). */
.games-panel { max-width: 560px; }
.games-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 1rem 0; }
.stat-tile {
  padding: 0.5rem 0.3rem;
  background: #0d0a08;
  border: 1px solid #3a2f1e;
  border-radius: 2px;
  text-align: center;
}
.stat-tile-value { display: block; font-size: 1.3rem; color: var(--cyan); text-shadow: 0 0 8px #3fd6e860; }
.stat-tile-label { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--gold); font-variant: small-caps; letter-spacing: 0.03em; }
.games-filter { margin-bottom: 1rem; }
.games-cta-new { margin-top: 1.2rem; }

/* Options de creation de partie : chaque reglage a son propre bloc + une
   phrase d'aide, plutot que d'etre devine depuis le seul libelle de la case. */
.option-row { margin-top: 1rem; }
.option-group { margin-top: 1.1rem; }
.option-group-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--gold);
  font-variant: small-caps;
}
.option-hint { margin: 0.35rem 0 0; font-size: 0.78rem; color: #a8977a; line-height: 1.35; }

/* Reservee aux admins Directus (cf. app.js applyAdminVisibility) - masquee par
   defaut tant que le statut n'a pas ete confirme par le serveur. */
#debug-mode-row .switch-track::after { background: var(--orange-glow); }

/* Interrupteur (checkbox habillee) : plus lisible qu'une case nue pour un
   reglage on/off, et l'etat "actif" saute davantage aux yeux. */
/* label.switch-label (et non .switch-label seul) : le vrai bug du rond gris
   qui mangeait le debut du texte - `.centered-panel label { display: block }`
   (regle des formulaires de connexion, specificite classe+element) gagnait sur
   `.switch-label { display: flex }` (specificite classe seule) et annulait le
   flex, donc `.switch-track` (un <span>) redevenait display:inline et ignorait
   sa largeur/hauteur - seul son ::after (le rond) restait visible, colle au
   texte. Verifie en relisant la cascade, pas seulement en testant a l'oeil. */
label.switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--bone);
}
/* Le selecteur element+classe (plutot que la seule classe) est necessaire pour
   battre `.centered-panel input` (regle des champs de connexion, plus specifique
   qu'une simple classe) qui sinon repasse cette case a width:100%/padding visible. */
input.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 21px;
  background: #1a1512;
  border: 1px solid #4a3a20;
  border-radius: 11px;
  transition: background 0.15s, border-color 0.15s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--steel-hi);
  transition: transform 0.15s, background 0.15s;
}
.switch-input:checked + .switch-track {
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  border-color: var(--gold);
}
.switch-input:checked + .switch-track::after {
  transform: translateX(17px);
  background: var(--gold-bright);
}
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Controle segmente (mode de territoires) : deux choix mutuellement exclusifs
   affiches comme des onglets, plus lisible qu'une paire de radios en ligne. */
.segmented { display: flex; border: 1px solid #4a3a20; border-radius: 2px; overflow: hidden; }
.segmented-option { flex: 1; position: relative; }
/* `.segmented .segmented-option input` (et non `.segmented-option input` seul) :
   il faut battre `.centered-panel input` en specificite, pas seulement a
   l'ordre des regles - cf. input.switch-input ci-dessus pour le meme piege. */
.segmented .segmented-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented-option span {
  display: block;
  text-align: center;
  padding: 0.45rem 0.4rem;
  font-size: 0.78rem;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  background: #0b0806;
  color: var(--bone);
  cursor: pointer;
  border-right: 1px solid #4a3a20;
  transition: background 0.15s, color 0.15s;
}
.segmented-option:last-child span { border-right: none; }
.segmented-option span:hover { filter: brightness(1.3); }
.segmented-option input:checked + span {
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  color: var(--gold-bright);
}
.segmented-option input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: -2px; }

/* Menu "Mes parties" (lobby) : parties en attente/en cours/terminees,
   permet de jouer plusieurs campagnes en parallele et de retrouver son
   historique. */
#my-games-list {
  max-height: 40vh;
  overflow-y: auto;
  margin-top: 0.5rem;
}
.games-group h3 {
  font-size: 0.8rem;
  margin: 0.9rem 0 0.35rem;
  color: var(--gold);
}
.games-group:first-child h3 { margin-top: 0; }
.game-row {
  cursor: pointer;
  padding: 6px 8px;
  margin-bottom: 5px;
  border: 1px solid #000;
  outline: 1px solid #5a5a5a60;
  background: linear-gradient(180deg, #24201a, #14110d);
  transition: filter 0.12s, outline-color 0.12s;
}
.game-row:hover {
  filter: brightness(1.2);
  outline-color: var(--gold-bright);
}
.game-row-main { font-size: 0.88rem; color: var(--bone); }
.game-row-status { margin-top: 2px; }
.game-row-status b { color: var(--gold-bright); }
.game-row-status code { color: #e8e0c8; background: #00000060; padding: 1px 5px; border-radius: 3px; }
.game-row .btn-copy-code { margin-left: 4px; }

/* ---------- Écran de campagne ---------- */

#game-section { display: flex; height: 100vh; }

#map-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #000;
}
#map-svg { width: 100%; height: 100%; display: block; }

/* Compteur de réquisition (haut gauche) */
#requisition-box {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-90%);
  min-width: 190px;
  border: 2px solid #191919;
  outline: 2px solid #77777c;
  outline-offset: 0;
  box-shadow: 0 3px 14px #000000c0, inset 0 0 0 1px #00000080;
}
#requisition-box .req-label {
  background: linear-gradient(180deg, #7a7a80, #55555a);
  color: #f0f0e8;
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  padding: 2px 10px;
  text-shadow: 0 1px 2px #000;
  border-bottom: 1px solid #191919;
}
#requisition-box .req-value {
  background: var(--red-inset);
  color: var(--cyan);
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  padding: 2px 10px 4px;
  text-shadow: 0 0 10px #3fd6e880, 0 1px 2px #000;
}

#turn-indicator {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 14px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  border: 1px solid #191919;
  outline: 1px solid #77777c66;
  background: linear-gradient(180deg, #3a3a3ecc, #26262acc);
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 10px #00000090;
}
#turn-indicator.mine { color: #b8f0a8; border-color: #2a5a1a; }
#turn-indicator.theirs { color: #a8977a; }

/* Légende des races (bandeau bas) */
#race-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 3px 6px;
  background: linear-gradient(180deg, #2e2e32e8, #1b1b1fe8);
  border-top: 2px solid #55555a;
  box-shadow: 0 -3px 12px #000000a0;
}
.race-entry {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px;
  border: 1px solid #000;
  outline: 1px solid #55555a66;
  background: linear-gradient(180deg, #33333780, #202024a0);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #d8d8d0;
  white-space: nowrap;
}
.race-entry img { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 1px #000); }

/* Carte : zones cliquables invisibles + sprites de bordures du jeu */
.territory-shape {
  fill: #ffffff;
  fill-opacity: 0;
  stroke: none;
  cursor: pointer;
}
.border-sprite { pointer-events: none; transition: filter 0.12s, opacity 0.12s; }
/* Les frontières neutres sont un ruban gris foncé qui masquait les murailles et
   le spatioport du décor : on les atténue tant que le territoire n'appartient à
   personne. Les bordures de possession, elles, restent bien lisibles. */
.border-sprite.neutral { opacity: 0.45; }
.border-sprite.neutral.hovered { opacity: 0.9; }
.border-sprite.hovered {
  filter: brightness(1.8) drop-shadow(0 0 4px rgba(255, 220, 130, 0.9));
}
.border-sprite.selected {
  filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 235, 170, 0.95));
}

/* Flèches de déplacement (courbes, comme celles du jeu) : rouge = attaque,
   vert = repositionnement sur un territoire déjà tenu. */
.move-arrow {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  cursor: pointer;
  transition: stroke-width 0.12s, opacity 0.12s;
}
.move-arrow.attack {
  stroke: #d92b1c;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px #00000090);
}
.move-arrow.friendly {
  stroke: #4fbf46;
  opacity: 0.75;
  stroke-dasharray: 7 5;
  filter: drop-shadow(0 0 3px #00000090);
}
/* Déploiement par le spatioport (Pavonis) : un saut, pas une marche. */
.move-arrow.teleport {
  stroke: #6fd0e8;
  stroke-dasharray: 2 8;
  opacity: 0.7;
}
.move-arrow:hover { stroke-width: 5.5; opacity: 1; }

.commander-marker { pointer-events: none; filter: drop-shadow(0 2px 4px #000000c0); }

/* Badges de puissance (écussons gris, comme les plaques du jeu) */
.power-badge { pointer-events: none; }
.power-badge polygon {
  fill: url(#badge-grad);
  stroke: #101010;
  stroke-width: 1.2;
}
.power-badge text {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  fill: #1c1c1c;
  text-anchor: middle;
}

/* ---------- Panneau latéral pierre/métal ---------- */

#side-panel {
  width: 340px;
  display: flex;
  flex-direction: column;
  background: var(--stone-panel);
  border-left: 3px solid #191919;
  box-shadow: inset 3px 0 0 #77777c, inset 0 0 60px #00000050, -6px 0 22px #000000b0;
  padding: 12px 14px 10px;
  overflow-y: auto;
  gap: 10px;
}

/* Carte contextuelle (joueur / territoire) */
.context-card {
  background: var(--red-inset);
  border: 2px solid #191919;
  outline: 1px solid #8a8a90;
  box-shadow: inset 0 0 24px #00000090;
  padding: 10px;
}
.context-name {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.02rem;
  color: #f0e8d0;
  text-shadow: 0 1px 3px #000;
  margin-top: 8px;
}
.portrait-frame {
  width: 128px;
  margin: 0 auto;
  border: 2px solid #191919;
  outline: 1px solid #8a8a9080;
  background: #111;
  box-shadow: 0 2px 10px #00000090;
}
.portrait-frame img { width: 100%; display: block; }
#players-info { margin-top: 10px; font-size: 0.85rem; }
#players-info div {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
  border: 1px solid #00000060;
  background: #00000030;
  margin-bottom: 3px;
}
#players-info .p-res { color: var(--cyan); font-weight: bold; }

.tc-image-frame {
  position: relative;
  border: 2px solid #191919;
  outline: 1px solid #8a8a9080;
  background: #111;
  box-shadow: 0 2px 10px #00000090;
}
.tc-image-frame img#tc-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.tc-image-frame img#tc-owner-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  box-shadow: 0 1px 6px #000;
}
.tc-stats { display: flex; gap: 8px; margin-top: 10px; }
.stat-box {
  flex: 1;
  border: 2px solid #191919;
  outline: 1px solid #8a8a9066;
}
.stat-label {
  background: linear-gradient(180deg, #6a6a70, #4a4a50);
  color: #eee;
  text-align: center;
  font-variant: small-caps;
  font-size: 0.8rem;
  padding: 1px 4px;
  text-shadow: 0 1px 2px #000;
  border-bottom: 1px solid #191919;
}
.stat-label.power { color: #f0d060; }
.stat-value {
  background: linear-gradient(180deg, #4a0b0a, #300706);
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 3px 4px;
}
.stat-value.power { color: #f0d060; text-shadow: 0 0 8px #f0d06060; }
.stat-value.req { color: var(--cyan); text-shadow: 0 0 8px #3fd6e860; }

/* Boutons "barre métallique" du jeu */
.game-btn {
  display: block;
  width: 100%;
  padding: 9px 10px;
  font-family: Georgia, serif;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  color: #1e1e1e;
  text-shadow: 0 1px 0 #ffffff50;
  background:
    repeating-linear-gradient(92deg, #00000000 0 9px, #00000010 9px 11px),
    linear-gradient(180deg, #b9b9bd 0%, #94949a 45%, #7c7c82 55%, #66666c 100%);
  border: 2px solid #141414;
  outline: 1px solid #8a8a90;
  border-radius: 2px;
  box-shadow: 0 2px 8px #00000090, inset 0 1px 0 #ffffff60;
}
.game-btn:hover { filter: brightness(1.12); }
.game-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }

/* Fin de tour : cadre lumineux vert (comme le jeu) */
.game-btn.end-turn {
  outline: 2px solid var(--green-glow);
  box-shadow: 0 0 12px #57c84a90, 0 2px 8px #00000090, inset 0 1px 0 #ffffff60;
}
.game-btn.end-turn:disabled { outline-color: #57c84a40; box-shadow: 0 2px 8px #00000090; }

/* Attaque : cadre lumineux orange */
.game-btn.attack {
  outline: 2px solid var(--orange-glow);
  box-shadow: 0 0 12px #e8722a90, 0 2px 8px #00000090, inset 0 1px 0 #ffffff60;
}

#panel-actions { display: flex; flex-direction: column; gap: 8px; }
.action-block {
  border: 1px solid #00000080;
  outline: 1px solid #8a8a9040;
  background: #00000028;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cost-hint { font-size: 0.75rem; color: #cfc4a8; text-align: center; text-shadow: 0 1px 2px #000; }
.cost-hint.too-expensive { color: #ff8a7e; }
.commander-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-variant: small-caps;
  font-size: 0.85rem;
  color: #e8e0c8;
  text-shadow: 0 1px 2px #000;
}
.commander-line span:last-child { color: var(--gold-bright); font-weight: bold; }
.row-tight { display: flex; gap: 6px; }
.row-tight input { width: 64px; }
.row-tight .game-btn { flex: 1; }

select, input[type=number] {
  width: 100%;
  padding: 5px 6px;
  background: linear-gradient(180deg, #1c1c20, #101014);
  border: 1px solid #000;
  outline: 1px solid #8a8a9040;
  border-radius: 2px;
  color: var(--bone);
  font-family: inherit;
  font-size: 0.85rem;
  /* La liste deroulante native suit le theme du systeme : sans ceci, elle
     s'ouvre sur fond blanc avec notre texte clair (illisible). */
  color-scheme: dark;
}
select option {
  background: #16161a;
  color: var(--bone);
}
select option:disabled { color: #6a6156; }

/* Garde d'honneur : liste d'escouades façon panneau du jeu — vignette,
   coût en cyan, quantité, boutons + / RAPPELER. */
#panel-honour-guard {
  border: 2px solid #191919;
  outline: 1px solid #8a8a90;
  background: var(--red-inset);
  box-shadow: inset 0 0 24px #00000090;
}
.hg-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 8px;
  background: linear-gradient(180deg, #7a7a80, #55555a);
  border-bottom: 1px solid #191919;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: #f0f0e8;
  text-shadow: 0 1px 2px #000;
  font-size: 0.9rem;
}
.hg-count em { font-style: normal; font-size: 0.72rem; opacity: 0.85; }
.hg-count b { color: var(--cyan); }
#hg-list { max-height: 300px; overflow-y: auto; padding: 5px; }
.hg-squad {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 4px;
  margin-bottom: 4px;
  background: #00000038;
  border: 1px solid #00000070;
  outline: 1px solid #8a8a9030;
}
.hg-squad.owned { outline-color: var(--gold-bright); background: #00000060; }
.hg-kind { font-size: 0.62rem; color: #9a9083; font-variant: small-caps; margin-left: 4px; }
.hg-squad.locked img { filter: grayscale(1) brightness(0.5); }
.hg-squad.locked .hg-name { color: #9a9083; }
.hg-locked { font-size: 0.7rem; color: #b09a6a; font-style: italic; }
.hg-squad img { width: 38px; height: 38px; display: block; border: 1px solid #000; }
.hg-squad .hg-name { font-size: 0.78rem; color: #f0e8d0; text-shadow: 0 1px 2px #000; }
.hg-squad .hg-cost { font-size: 0.8rem; color: var(--cyan); font-weight: bold; }
.hg-squad .hg-qty { font-size: 0.72rem; color: #cfc4a8; }
.hg-actions { display: flex; flex-direction: column; gap: 3px; }
.hg-btn {
  min-width: 30px;
  padding: 1px 7px;
  font-size: 0.85rem;
  font-family: Georgia, serif;
  color: #1e1e1e;
  background: linear-gradient(180deg, #b9b9bd, #7c7c82);
  border: 1px solid #141414;
  border-radius: 2px;
  cursor: pointer;
}
.hg-btn:hover { filter: brightness(1.15); }
.hg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hg-btn.recall { font-size: 0.62rem; font-variant: small-caps; letter-spacing: 0.05em; }

#panel-archive {
  border: 1px solid #00000080;
  outline: 1px solid #8a8a9040;
  background: #00000028;
  padding: 8px;
}
.archive-section h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: #e8e0c8;
  border-bottom: 1px solid #00000060;
  padding-bottom: 2px;
}
.archive-section { margin-bottom: 10px; }
.archive-section:last-child { margin-bottom: 0; }
#combat-log div { font-size: 0.78rem; margin-bottom: 0.35rem; color: #cfc4a8; text-shadow: 0 1px 2px #000; }
#next-battles div { font-size: 0.82rem; margin-bottom: 0.3rem; text-shadow: 0 1px 2px #000; }
#next-battles b { color: var(--gold-bright); }
#next-battles code { color: #e8e0c8; background: #00000060; padding: 1px 5px; border-radius: 3px; }
#pairing-code-display { margin-top: 0.4rem; font-size: 0.82rem; text-shadow: 0 1px 2px #000; }
#pairing-code-display code { color: #e8e0c8; background: #00000060; padding: 1px 5px; border-radius: 3px; }
.btn-copy-code {
  min-width: 30px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-family: Georgia, serif;
  margin-left: 6px;
}
.btn-copy-code:hover { filter: brightness(1.15); }
/* .btn-deeplink est un <a>, pas un <button> : il ne recoit pas les regles du
   selecteur d'element "button" ci-dessus (fond, bordure...), donc on les
   reprend explicitement pour le meme rendu que le bouton "Copier le code". */
.btn-deeplink {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  border: 1px solid #000;
  outline: 1px solid #5a5a5a80;
  border-radius: 2px;
  color: var(--bone);
  font-family: inherit;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.btn-deeplink:hover { filter: brightness(1.2); }

/* ---------- Écrans plein écran (Chef, Archive) ---------- */

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(ellipse at 30% 40%, #2a1a12 0%, #0a0705 70%),
    #060403;
  overflow-y: auto;
}

/* --- Chef --- */
.cs-left { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-width: 0; }
#cs-portrait {
  max-height: 62vh;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 8px 26px #000000d0);
}
.cs-stats {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--red-inset);
  border: 2px solid #191919;
  outline: 1px solid #8a8a90;
  padding: 10px;
  box-shadow: inset 0 0 24px #00000090;
}
.cs-emblem img { width: 96px; border: 1px solid #000; display: block; }
.cs-stat-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  align-content: center;
}
.cs-stat-grid div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 9px;
  background: #00000045;
  border: 1px solid #00000070;
  font-size: 0.85rem;
  color: #e8ddc0;
  text-shadow: 0 1px 2px #000;
}
.cs-stat-grid b { color: var(--gold-bright); }

.cs-right {
  width: 430px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-block {
  background: var(--red-inset);
  border: 2px solid #191919;
  outline: 1px solid #8a8a90;
  box-shadow: inset 0 0 24px #00000090;
}
.cs-block-title {
  background: linear-gradient(180deg, #7a7a80, #55555a);
  border-bottom: 1px solid #191919;
  padding: 3px 10px;
  font-variant: small-caps;
  letter-spacing: 0.09em;
  color: #f0f0e8;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  font-size: 0.92rem;
}
.cs-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 8px;
}
.cs-slot {
  aspect-ratio: 1;
  background: #00000055;
  border: 1px solid #00000080;
  outline: 1px solid #8a8a9028;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cs-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-slot.filled { outline-color: var(--gold-bright); cursor: pointer; }
.cs-slot.filled:hover { filter: brightness(1.25); }
/* Capacité stratégique non détenue : l'icône « éteinte » du jeu, cliquable pour
   savoir quel territoire la donne. */
.cs-slot.dim { cursor: pointer; }
.cs-slot.dim img { opacity: 0.7; }
.cs-slot.dim:hover { filter: brightness(1.2); }
.cs-desc {
  padding: 8px 10px;
  border-top: 1px solid #00000070;
  font-size: 0.82rem;
  color: #e0b878;
  text-align: center;
  min-height: 42px;
  text-shadow: 0 1px 2px #000;
}

/* --- Matériel (ouvert depuis l'écran Chef) --- */
.wg-list-block { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#wg-list { overflow-y: auto; padding: 6px; }
.wg-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  margin-bottom: 3px;
  background: #00000038;
  border: 1px solid #00000070;
  outline: 1px solid #8a8a9028;
  cursor: pointer;
  transition: filter 0.12s;
}
.wg-item:hover { filter: brightness(1.25); }
.wg-item.owned { outline-color: var(--gold-bright); background: #00000060; }
.wg-item.selected { outline: 2px solid var(--gold-bright); }
.wg-item img { width: 34px; height: 34px; display: block; border: 1px solid #000; }
.wg-item.locked img { filter: grayscale(1) brightness(0.45); }
.wg-item .wg-name { font-size: 0.84rem; color: #f0e8d0; text-shadow: 0 1px 2px #000; }
.wg-item.locked .wg-name { color: #9a9083; }
.wg-item .wg-slot { font-size: 0.72rem; color: #b09a6a; }
.wg-detail { display: flex; gap: 10px; padding: 10px; align-items: flex-start; }
.wg-detail img {
  width: 96px;
  border: 2px solid #191919;
  outline: 1px solid #8a8a9080;
  background: #111;
  display: block;
}
#wg-detail-text {
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #e8ddc0;
  text-shadow: 0 1px 2px #000;
}
#wg-detail-text b { color: var(--gold-bright); }

/* --- Archive --- */
#archive-screen { justify-content: center; align-items: flex-start; }
.ar-panel {
  width: min(980px, 100%);
  background: var(--stone-panel);
  border: 3px solid #191919;
  outline: 1px solid #8a8a90;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 40px #000000c0;
}
.ar-head { display: flex; gap: 12px; }
.ar-thumb { width: 240px; flex-shrink: 0; border: 2px solid #191919; outline: 1px solid #8a8a9080; background: #111; }
.ar-thumb img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.ar-thumb div {
  text-align: center;
  padding: 3px;
  font-variant: small-caps;
  color: #f0e8d0;
  background: #00000090;
  font-size: 0.9rem;
}
.ar-text {
  flex: 1;
  background: var(--red-inset);
  border: 2px solid #191919;
  outline: 1px solid #8a8a9060;
  padding: 12px 14px;
  color: #f0e8d8;
  font-size: 0.9rem;
  line-height: 1.55;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 24px #00000090;
}
.ar-body { min-height: 220px; max-height: 46vh; overflow-y: auto; }
.ar-body .ar-entry { margin-bottom: 0.5rem; }
.ar-body .ar-key { color: var(--gold-bright); font-variant: small-caps; }

#victory-overlay {
  position: fixed; inset: 0; background: #000000dd;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; z-index: 10;
  font-variant: small-caps;
  color: var(--gold-bright);
  text-shadow: 0 0 20px #000;
}

#victory-overlay-text {
  font-size: 2.5rem;
}