/*
 * Socle de l'interface : mise en page et structure seulement (grilles, tailles, espacements, positions,
 * adaptation aux petits écrans). Aucune couleur, police, bordure décorative ni ombre ici : c'est le rôle
 * des thèmes (public/themes/*.css), chacun rangé sous :root[data-ui="<thème>"] et choisi par theme.js.
 *
 * Contrat des thèmes : chaque thème définit les variables ci-dessous (valeurs neutres par défaut, pour
 * qu'un thème incomplet reste lisible). Le plateau de l'arène (canvas) en lit une partie : --accent,
 * --title, --muted, --tile, --grid, --blocked, --rough, --front, --back, --player, --hp, --ap, --ep.
 * Voir docs/THEMES.md.
 */
:root {
  --paper: #f1efe9; --paper-2: #faf9f6; --paper-3: #e6e3dc;
  --ink: #222; --ink-soft: #5c5c5c; --line: #c9c5bc; --line-strong: #8d887e;
  --btn-top: #fff; --btn-bot: #eee; --icon: #333;
  --text: var(--ink); --muted: var(--ink-soft); --border: var(--line); --surface: var(--paper-2); --bg: var(--paper-3);
  --grid: #dedad2; --tile: #e9e6df; --blocked: #66615a; --rough: #d6d1c6;
  --player: #2f6fb3; --bot: #b03a26; --front: rgba(47, 160, 90, .18); --back: rgba(184, 64, 47, .12);
  --hp: #3e8a3f; --ap: #c88a1e; --ep: #4f73b8; --accent: #7a5a2b;
  --title: Georgia, serif; --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/*
 * Couleurs au choix du joueur (réglage du compte) : <html data-accent="…" data-accent2="…">.
 * --choix / --sur-choix : couleur principale des actions et de la sélection, et son texte ;
 * --choix2 / --sur-choix2 : second émail (thème Couleurs de compagnie). Sans choix, chaque thème garde
 * ses couleurs : il écrit var(--choix, <sa couleur>). Liste fermée : chaque couleur a son texte lisible.
 */
:root[data-accent="gueules"] { --choix: #a3231a; --sur-choix: #fbf6ee; }
:root[data-accent="azur"] { --choix: #24479a; --sur-choix: #f4f3ef; }
:root[data-accent="sinople"] { --choix: #2d7339; --sur-choix: #f4f3ef; }
:root[data-accent="or"] { --choix: #c08d22; --sur-choix: #1b1712; }
:root[data-accent="pourpre"] { --choix: #6b3b74; --sur-choix: #f4f3ef; }
:root[data-accent="sable"] { --choix: #1f1c18; --sur-choix: #f4f3ef; }
:root[data-accent2="gueules"] { --choix2: #b1282e; --sur-choix2: #fbf6ee; }
:root[data-accent2="azur"] { --choix2: #24479a; --sur-choix2: #f4f3ef; }
:root[data-accent2="sinople"] { --choix2: #2d7339; --sur-choix2: #f4f3ef; }
:root[data-accent2="or"] { --choix2: #d6a326; --sur-choix2: #18171b; }
:root[data-accent2="pourpre"] { --choix2: #6b3b74; --sur-choix2: #f4f3ef; }
:root[data-accent2="argent"] { --choix2: #eeeae0; --sur-choix2: #18171b; }
:root[data-accent="gueules"][data-theme="dark"] { --choix: #e46d5f; --sur-choix: #191b1e; }
:root[data-accent="azur"][data-theme="dark"] { --choix: #8fb0ec; --sur-choix: #141316; }
:root[data-accent="sinople"][data-theme="dark"] { --choix: #73b86e; --sur-choix: #111a12; }
:root[data-accent="or"][data-theme="dark"] { --choix: #deae48; --sur-choix: #1b1712; }
:root[data-accent="pourpre"][data-theme="dark"] { --choix: #bb8dc3; --sur-choix: #161218; }
:root[data-accent="sable"][data-theme="dark"] { --choix: #e7e1d3; --sur-choix: #191b1e; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 14px/1.45 var(--body); }
h1 { margin: 0; }
h2 { margin: 0 0 8px; }
h3 { margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
h3::after { content: ""; flex: 1; }
button, select, input { font: inherit; color: inherit; padding: 4px 10px; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input[type="number"] { width: 64px; }

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.check { display: inline-flex; gap: 4px; align-items: center; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.row label { display: inline-flex; gap: 4px; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ibtn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; text-decoration: none; }
.ibtn svg { width: 22px; height: 22px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; gap: 4px; align-items: baseline; padding: 3px 11px; white-space: nowrap; }
.paper, .panel, .log, .card-pane { padding: 12px 14px; }

/* ---------- Coquille : barre du haut + rail ---------- */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 8px 16px; }
.hero { display: flex; gap: 10px; align-items: center; min-width: 0; }
.avatar { width: 48px; height: 48px; flex: none; image-rendering: pixelated; display: grid; place-items: center; }
.hero-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.where { text-align: right; line-height: 1.25; }
.where .small { display: block; }
.tools { display: flex; gap: 6px; align-items: center; }

.settings { position: relative; }
.settings > summary { list-style: none; cursor: pointer; }
.settings > summary::-webkit-details-marker { display: none; }
.settings-body { position: absolute; right: 0; top: 46px; z-index: 10; width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; }
.settings-body label { display: flex; flex-direction: column; gap: 2px; }
.settings-body .controls { gap: 6px; }

.shell { display: flex; gap: 0; align-items: stretch; }
.rail { position: sticky; top: 66px; align-self: flex-start; display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; margin: 12px 0 12px 12px; }
.rail hr { width: 100%; margin: 2px 0; }
.rail-version { color: var(--muted); font-size: 10px; text-align: center; overflow-wrap: anywhere; max-width: 40px; }
.shell > :not(.rail) { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 10px 16px 0; padding: 8px; }
  .rail hr { display: none; }
  .where { text-align: left; }
}

/* ---------- Arène ---------- */
.game {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: "stage side" "dock side";
  gap: 14px; padding: 12px 16px 16px 14px; align-items: start;
}
.dock[hidden] { display: none; }
.stage { grid-area: stage; }
.side { grid-area: side; }
.dock { grid-area: dock; }
@media (max-width: 1000px) { .game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side" "dock"; } }

.board { position: relative; padding: 34px; }
.board canvas {
  position: relative; z-index: 1; display: block;
  /* La vue (13 × 13 cases au plus) tient dans l'écran : largeur et hauteur bornées, proportions gardées. */
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); margin: 0 auto;
  cursor: pointer; touch-action: manipulation;
}
.board canvas.pixel { image-rendering: pixelated; }
.board .flash { position: relative; z-index: 1; text-align: center; }
@media (max-width: 760px) { .board { padding: 14px; } }

.hint { margin: 8px 0 0; }
.hint summary { cursor: pointer; }
.flash { min-height: 1.4em; margin: 6px 0 0; }

.dock { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
@media (max-width: 1280px) { .dock { grid-template-columns: auto minmax(0, 1fr); } .dock .portrait { grid-column: 1 / -1; } }
@media (max-width: 560px) { .dock { grid-template-columns: minmax(0, 1fr); } }

.minimap-card { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 10px; }
.mm-head { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mm-head h2 { margin: 0; }
button.mini { padding: 1px 8px; }
/* Le cadre est sur l'enveloppe : les % de l'anneau tombent juste sur le canvas. */
.minimap { position: relative; line-height: 0; max-width: 100%; }
.minimap canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; cursor: crosshair; }
.mm-pulse { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; animation: mm-pulse 1.2s ease-out infinite; }
@keyframes mm-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .mm-pulse { animation: none; } }
.minimap-card #mmInfo { align-self: stretch; text-align: center; }
.side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 76px; max-height: calc(100vh - 110px); }
.side .minimap-card { margin-bottom: 0; }
/* Bloc combat : toujours visible, sans défilement (jauges, déplacements, attaque, actions). */
.combat { display: flex; flex-direction: column; gap: 8px; }
.bars3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bars3 .bar { margin: 0; }
.bars3 .bar .label { flex-wrap: wrap; font-size: 12px; }
.combat-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.combat .pad { grid-template-columns: repeat(3, 40px); }
.combat .pad button { padding: 7px 0; font-size: 16px; }
.combat .pad [data-act="ahead"] { font-size: 15px; }
/* R5 : appui long sur une flèche = se tourner ; pas de menu ni de sélection du texte, un bref rappel visuel. */
.combat .pad button { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.combat .pad button.turned { animation: turned .45s ease-out; }
@keyframes turned { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
.attack { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.attack select { width: 100%; min-width: 0; }
.combat-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.combat-actions button { padding-left: 2px; padding-right: 2px; }
.combat button.refill { width: 100%; }
.message-line { display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.message-line[hidden] { display: none; }
.message-line .msg-text { flex: 1; min-width: 0; max-height: 9em; overflow: auto; }
.message-line p { margin: 0; }
.message-line p + p { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.message-line span { display: block; }
.message-line .kill { font-weight: 700; margin-top: 4px; }
.stage .message-line { margin-top: 8px; font-size: 14px; }
@media (min-width: 1001px) {
  /* Écran d'ordinateur : le message sous le plateau reste collé au bas de l'écran (lisible sans défiler), et la
     carte de la colonne de droite rétrécit sur les écrans bas pour que combat, message et boutons y tiennent. */
  .stage .message-line { position: sticky; bottom: 8px; z-index: 6; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
  /* La carte prend la hauteur que le bloc combat laisse (il grandit avec l'encart Cible ou le message) : plafond
     posé par minimap-view.js (fitMinimap). minimap.js pose une largeur en pixels et le rapport de la carte
     (aspect-ratio) : la largeur se libère pour garder ses proportions (carrée pour une carte carrée). */
  .side .minimap canvas { width: auto !important; }
}
.combat-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
/* Cinq boutons sur une ligne étroite : texte un peu plus petit, jamais plus large que le bouton. */
:root:root .combat-tools button { min-width: 0; padding-left: 2px; padding-right: 2px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-load { margin: 0 0 8px; }
.loot-load .bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; margin-top: 3px; }
.loot-load .bar > span { display: block; height: 100%; background: var(--accent); }
.loot-load .bar > span.full { background: var(--danger, #c0392b); }
.loot-lot { display: inline-flex; align-items: center; gap: 6px; }
.loot-lot img { image-rendering: pixelated; width: 24px; height: 24px; flex: none; }
/* Fenêtres du mercenaire (popins). */
dialog.popin { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; padding: 14px 16px; }
/* Fond opaque au-dessus des thèmes (:root:root), qui rendent parfois .paper transparent. */
:root:root dialog.popin { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong); }
dialog.popin::backdrop { background: rgba(20, 16, 10, .45); }
.popin-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.popin-head h2 { margin: 0; flex: 1; }
.popin .log { padding: 0; }
.inv-list { margin: 0 0 8px; padding-left: 18px; }
.inv-worn { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; }
.inv-worn dt { color: var(--muted); }
.inv-worn dd { margin: 0; }
.bag-list { list-style: none; margin: 0 0 8px; padding: 0; }
.bag-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.bag-list .row { margin: 0; }
.combat-dock { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1000px) {
  .side { position: static; max-height: none; }
  /* Mobile : le bloc combat est fixé en bas de l'écran, toujours à portée du pouce ; la page garde de la place
     en dessous pour ne rien cacher. La barre du haut ne colle plus, pour laisser la place au plateau. */
  .combat-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 60vh; overflow: auto;
    padding: 8px 10px; background: var(--bg); border-top: 2px solid var(--line-strong); }
  .game { padding-bottom: 330px; }
  .topbar { position: static; }
}

.who { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tag { padding: 1px 7px; }
.bar { margin: 5px 0; }
.bar .label { display: flex; justify-content: space-between; }
.bar .track { height: 9px; overflow: hidden; }
.bar .fill { height: 100%; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.stats div, .derived div { padding: 4px 0; }
.stats b { display: block; }
.pad { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.pad button { padding: 5px 0; }

.log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { padding: 4px 8px; margin-bottom: 6px; }
.log li .line { display: block; }
/* Ligne du jour dans les rapports et le journal : au-dessus des thèmes (:root:root), sans bordure ni fond. */
:root:root .log li.day, :root:root .reports li.day {
  border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: 8px 0 2px; margin: 0; }
.log summary { cursor: pointer; }

.roster { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.target { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 8px;
  padding: 4px 8px; border-left: 3px solid var(--danger, #c0392b); }
.target .ibtn { padding: 0 6px; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 4px 9px; }
table.train { width: 100%; border-collapse: collapse; }
table.train td { padding: 3px 4px; }
table.train td:last-child { text-align: right; }
table.train td.actions { white-space: normal; }
table.train td.actions button { margin: 1px 0; }
table.equip td:nth-child(2) .small { display: block; }

.arena-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.companies { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.companies li { padding: 2px 10px; display: inline-flex; gap: 6px; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 2px; vertical-align: middle; }
.chip .dot { margin-bottom: 2px; }
.arenas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arenas li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notice.quiet { padding: 0; }

/* ---------- Pages de la compagnie (salle de garde, inventaire) ---------- */
.content { padding: 12px 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.garde-flash { margin: 0; }
.notice { padding: 10px 14px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { padding: 6px 16px; }

.banner { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.banner p { margin: 0; }
.banner-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner-side { display: flex; gap: 8px; align-items: center; }
.gold-pill { padding: 4px 12px; white-space: nowrap; }
a.btn { display: inline-block; padding: 5px 12px; text-decoration: none; }
button.link { padding: 0 2px; }
.small-btn { padding: 2px 8px; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.tile { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; padding: 8px 10px 10px; }
.tile-portrait { position: relative; display: grid; place-items: center; height: 104px; margin-bottom: 4px; }
.tile canvas.skin { width: 96px; height: 96px; }
/* R15 : chaque mercenaire de la salle de garde sur un carré d'herbe (sol de la Forêt du château, 48 px ×2).
   :root:root passe devant les thèmes, qui ôtent le fond des pions des tuiles. */
:root:root .tiles .tile canvas.skin {
  background: url(skins/base/tile/herbe-garde.png) center / 96px 96px; image-rendering: pixelated; border-radius: 6px;
}
.xp-badge { position: absolute; top: 5px; right: 5px; padding: 1px 7px; cursor: pointer; }
.tile-row { display: flex; justify-content: space-between; margin-top: 3px; }
.gauge { display: block; height: 6px; overflow: hidden; }
.gauge i { display: block; height: 100%; }
#live { display: inline; }
.tile-empty { align-items: center; justify-content: center; text-align: center; min-height: 200px; }
.tile-plus { line-height: 1; }
.groups .group-title { margin: 14px 0 6px; }
.groups .group-title:first-child { margin-top: 0; }
.tiles > li { display: flex; flex-direction: column; gap: 4px; }
.tiles > li > .tile { flex: 1; height: auto; }
.tile-link { text-align: center; }
/* L'Invocateur (le héros) : même tuile, filet de la couleur d'accent du thème pour le distinguer. */
.tile.tile-hero { box-shadow: inset 0 0 0 2px var(--accent); }
.tile-role { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.garde-sheet { display: flex; flex-direction: column; gap: 10px; }
.sheet-head { display: flex; gap: 14px; align-items: flex-start; }
.sheet-head > div { min-width: 0; flex: 1; }
.sheet-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sheet-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sheet-head input[type="text"] { flex: 1; min-width: 0; width: 10em; }
.sheet-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .sheet-bars { grid-template-columns: minmax(0, 1fr); } .sheet-head canvas.skin.big { width: 80px; height: 80px; } }
.sheet-tabs { padding-bottom: 8px; }
.sheet-tabs button { padding: 4px 12px; }
.sheet-pane h3:first-child { margin-top: 0; }
.train-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; padding: 4px 0; }
.train-line button { white-space: nowrap; }
.train-btns { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.train-level { display: grid; grid-template-columns: minmax(40px, 1fr) auto; gap: 8px; align-items: center; }
.stat-line { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 48px 44px; gap: 10px; align-items: center; padding: 3px 0; }
.stat-line > span:nth-child(3) { text-align: right; }

.traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .traits { grid-template-columns: minmax(0, 1fr); } }
.trait-group { display: flex; flex-direction: column; gap: 2px; }
.trait { display: flex; justify-content: space-between; padding: 2px 6px; cursor: help; }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
@media (max-width: 760px) { .slots { grid-template-columns: minmax(0, 1fr); } }
.slot { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.wear { display: block; height: 5px; overflow: hidden; margin-top: 3px; }
.wear i { display: block; height: 100%; }

canvas.skin { width: 72px; height: 72px; flex: none; image-rendering: pixelated; }
canvas.skin.big { width: 128px; height: 128px; }
.derived { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.derived div { padding: 4px 2px; }
.derived b { display: block; }
.reports { list-style: none; margin: 0; padding: 0; }
.reports li { padding: 4px 8px; margin-bottom: 6px; }
.reports .line { display: block; }
.worn-wrap { overflow-x: auto; }
.worn { width: 100%; border-collapse: collapse; }
.worn th, .worn td { text-align: left; vertical-align: top; padding: 6px 8px; }
.worn td { min-width: 140px; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; overflow-wrap: anywhere; }
.item .row { margin: 2px 0 0; }
.item select { max-width: 100%; }
.equip-line { display: flex; flex-direction: column; gap: 1px; margin-left: 10px; }
.recruit .previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* R11 : pions de l'aperçu recadrés, à la taille de l'arène ×2 (le plus grand permis dans l'interface). */
.recruit .previews { align-items: flex-end; min-height: 110px; }
.recruit .previews canvas.pion { image-rendering: pixelated; }
/* R12 : page Entraînement, choix du mercenaire. */
.train-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.train-pick .train-chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; }
.train-pick .train-chip canvas.pion { image-rendering: pixelated; }
.train-pick .train-chip[aria-pressed="true"] { outline: 2px solid var(--accent); }
.recruit input[type="text"] { min-width: 0; width: 12em; }
.look { min-width: 32px; }

/* ---------- Pages du compte (connexion, lien, mon compte, données) ---------- */
.page { max-width: 480px; margin: 48px auto; padding: 0 16px; }
.brand { text-align: center; margin-bottom: 18px; }
.page .card { position: relative; padding: 22px 24px; margin-bottom: 16px; }
.page h1 { margin-bottom: 12px; }
.page form { display: flex; flex-direction: column; gap: 8px; }
.page input[type="email"], .page input[type="text"] { width: 100%; padding: 8px; }
.page button { padding: 8px 12px; }
.page .error, .page .ok { min-height: 1.4em; margin: 6px 0 0; }
.page dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.page dd { margin: 0; overflow-wrap: anywhere; }
.page footer { text-align: center; }
.themes-choice { border: 0; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.themes-choice legend { padding: 0; margin-bottom: 6px; }
.theme-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.theme-choice input { margin-top: 4px; }
.theme-choice > span { display: grid; gap: 1px; }
.skip { margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.page .nav { margin-bottom: 16px; justify-content: center; }

/* ---------- Réglages du jeu (admin, /reglages) ---------- */
.page.wide { max-width: 760px; }
/* Menu latéral par familles (Monde, Mercenaires, Surveillance, Modération), la recherche en tête ; le contenu à droite. */
.page.wide.reglages { max-width: 1020px; }
.admin-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-content { min-width: 0; }
.admin-menu { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.admin-menu > summary { display: none; }
#sections { display: flex; flex-direction: column; gap: 2px; }
#sections a { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; }
#sections a:hover { background: var(--paper-3, rgba(127, 127, 127, .12)); }
#sections a[aria-current="page"] { font-weight: 700; background: var(--paper-3, rgba(127, 127, 127, .18)); box-shadow: inset 3px 0 0 var(--lap, currentColor); }
.menu-group { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.menu-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; padding: 0 8px 2px; }
.admin-search { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.admin-search input { width: 100%; box-sizing: border-box; min-width: 0; }
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.search-results li.small { padding: 4px 6px; }
.search-results button { width: 100%; text-align: left; padding: 4px 6px; min-height: 0; font-weight: normal; }
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-menu { position: static; max-height: none; }
  .admin-menu > summary { display: list-item; cursor: pointer; font-weight: 700; }
  .admin-menu[open] > summary { margin-bottom: 8px; }
}
/* Accueil : quatre fiches, sur deux colonnes quand la place le permet. */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.home-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.home-card h3 { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.home-card.warn { border-color: var(--danger, #b3261e); box-shadow: inset 4px 0 0 var(--danger, #b3261e); }
.home-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.home-list.changes { padding-left: 0; list-style: none; }
.home-list.changes code { overflow-wrap: anywhere; }
.home-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.home-figures div { display: flex; flex-direction: column; }
.home-figures b { font-size: 20px; }
.reglages .tabs { margin-bottom: 12px; }
#armsBody .tabs button { padding: 4px 10px; }
#armsBody .tabs + .tabs { padding-left: 16px; }
.reglages table { width: 100%; border-collapse: collapse; }
.reglages th { text-align: left; padding: 10px 4px 4px; }
.reglages td { padding: 3px 4px; vertical-align: middle; }
.reglages td.num { white-space: nowrap; }
/* R8 : de quoi lire les grands nombres (10 000 000) en entier, flèches comprises. */
.reglages input[type="number"] { width: calc(10ch + 34px); min-width: 0; }
.word-result { margin: 6px 0 14px; }
/* Onglet Connexions : chiffres du moment, tableau large défilant, petite barre des IP. */
.traffic-now { margin-bottom: 12px; }
.traffic-now span { display: block; }
.table-scroll { overflow-x: auto; }
/* Réglages, onglet Comptes : rôles en étiquettes lisibles dans tous les thèmes. */
:root:root table.accounts .tag { color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 3px; font-size: 13px; }
:root:root table.accounts .tag.role-banni { border-color: currentColor; font-weight: 700; }
table.accounts td { vertical-align: middle; }
.reglages table.traffic th { text-align: right; font-size: 12px; white-space: nowrap; }
.reglages table.traffic th:first-child { text-align: left; }
.traffic td:first-child { white-space: nowrap; }
.traffic-bar { display: inline-block; width: 48px; margin: 0 6px 0 0; vertical-align: middle; }
.traffic-bar .track, .traffic-bar .fill { display: block; }
.traffic-bar .fill { background: var(--ep); }
.word-result:empty { display: none; }
.word-result .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banned summary { cursor: pointer; }
/* Onglet Fronts : une fiche par front, la vitesse du temps en tête. */
.front-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.front-card h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.front-card form.row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
.front-card form.row label { display: inline-flex; flex-direction: row; gap: 4px; align-items: center; }
.front-card #timeScale { width: 8ch; }
.front-bots { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.front-bots h4 { margin: 0; }
.front-bots .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
.front-bots label { display: inline-flex; flex-direction: row; gap: 4px; align-items: center; }
/* Onglet Bots (modèles) */
#botsBody { display: flex; flex-direction: column; gap: 10px; }
#botsBody .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
#botsBody label { display: inline-flex; flex-direction: row; gap: 4px; align-items: center; }
.bot-models { width: 100%; }
.bot-models td { vertical-align: middle; }
.bot-editor { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bot-editor h3 { margin: 0; }
.bot-editor fieldset { border: 1px dashed var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.bot-editor fieldset.bot-manual { flex-direction: column; flex-wrap: nowrap; }
.bot-editor input[type="number"] { width: 10ch; }
.bot-manual input[type="number"] { width: 5ch; }
/* Onglet Butin : icônes du catalogue (pixel art, sans lissage) et leur sélecteur. */
#lootBody .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
.loot-icon { image-rendering: pixelated; display: inline-block; vertical-align: middle; flex: none; }
.loot-icon.none { border: 1px dashed var(--line); border-radius: 4px; box-sizing: border-box; }
.loot-icon.none.z1 { width: 32px; height: 32px; }
.loot-icon.none.z2 { width: 64px; height: 64px; }
.loot-name { display: flex; gap: 8px; align-items: center; }
/* Sur téléphone, les tableaux de l'onglet défilent seuls, pas la page. */
.loot-scroll { overflow-x: auto; max-width: 100%; }
.loot-name { min-width: 12ch; }
.icon-picker { flex-direction: column; flex-wrap: nowrap !important; }
.icon-grid { display: flex; flex-wrap: wrap; gap: 2px; max-height: 260px; overflow-y: auto; }
.icon-grid button { padding: 2px; line-height: 0; background: transparent; border: 1px solid transparent; border-radius: 4px; min-height: 0; }
.icon-grid button[aria-pressed="true"] { border-color: var(--lap, currentColor); background: var(--paper-3, transparent); }
.bot-plan { margin: 0; padding-left: 2.5em; display: flex; flex-direction: column; gap: 3px; }
.bot-plan li { display: flex; gap: 4px; align-items: center; }
@media (max-width: 640px) { .bot-models th:nth-child(3), .bot-models td:nth-child(3) { display: none; } }
.reglages .front-bots input[type="number"] { width: calc(8ch + 30px); }
.front-bots h5 { margin: 4px 0 0; }
.front-bots ul.waves { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.front-bots .auto-waves summary { cursor: pointer; font-weight: 600; }
.reglages tr.changed td:first-child { font-weight: bold; }
/* Fiche visée par un lien `#onglet/fiche` ; liens d'une fiche vers les réglages qui la touchent. */
.reglages .cible { outline: 2px solid var(--lap, currentColor); outline-offset: 2px; }
.reglages .front-card { scroll-margin-top: 8px; }
.reglages .liens { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* Onglet Stats des bots : tableau large qui défile seul (table-scroll), filtres en ligne. */
#botStatsBody .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
#botStatsBody label { display: inline-flex; flex-direction: row; gap: 4px; align-items: center; }
/* Titres sur deux lignes au besoin (le tableau tient dans la fiche), chiffres alignés à droite sous leur titre. */
.reglages table.bot-stats th { white-space: normal; vertical-align: bottom; }
.reglages table.bot-stats th:nth-child(2), .bot-stats td:first-child, .bot-stats td:nth-child(2) { text-align: left; }
.bot-stats td { text-align: right; padding-left: 6px; font-size: 13px; }
.reglages .def { opacity: .7; }
.banned + .banned { margin-top: 18px; }
#noms form.row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
#noms form.row input[type="text"] { width: 14em; min-width: 0; }
#noms form.row label { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; }
.banned-words { display: flex; flex-wrap: wrap; gap: 6px; }
.banned-words .chip { flex-direction: row; align-items: center; gap: 4px; }
.banned-words .chip.changed { font-weight: bold; }
.banned-words .mini { padding: 0 5px; }

/* États de santé (engine HEALTH_STATES, par id) : du vert foncé, intact, au rouge foncé, presque mort ; texte blanc. */
.hp-state { display: inline-block; padding: 0 .4em; border-radius: 3px; color: #fff; white-space: nowrap; line-height: 1.5; }
.hp-8 { background: #1d5e2a; }
.hp-7 { background: #2f7d34; }
.hp-6 { background: #5d8a22; }
.hp-5 { background: #8c8418; }
.hp-4 { background: #b06a14; }
.hp-3 { background: #b4471b; }
.hp-2 { background: #9a1f1a; }
.hp-1 { background: #6e0f0f; }
.hp-0 { background: #4a4a4a; }

/* XP réglée à la main (fiche du mercenaire, testeurs et admins) : place pour 10 000 000 et les flèches. */
#xpForm input.xp-input, #goldForm input.xp-input { width: calc(11ch + 34px); min-width: 0; }
/* Bandeau de compagnie : fond foncé dans certains thèmes, mais champ et bouton restent clairs → encre du thème. */
#goldForm input, #goldForm button { color: var(--ink); }
#goldForm input { background: var(--paper); }