/* Interface de partie : HUD (haut) et dock (bas) SUPERPOSÉS au terrain plein écran.
   Les cadres viennent de la planche d'interface (assets/ui/*.webp, tools/slice-ui.mjs) ; tout le texte est vivant.
   Unité `--gu` : 1 gu = 1 px sur un écran de 390×760. Elle suit la largeur de l'appli (600 px max) ET la hauteur de l'écran
   (un écran court rétrécit toute l'interface d'un coup) — plus de media queries pour les petits écrans.
   Hauteurs : le HUD et le dock se mesurent eux-mêmes ; render/Viewport.js en déduit l'espace libre où tient toute l'île. */

#app { --gu: min(calc(min(100vw, 600px, 62dvh) / 390), calc(100dvh / 760)); }

/* ---------------------------------------------------------------- HUD */
.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--gu) * 86) minmax(0, 1fr); align-items: start;
  padding: var(--safe-top) calc(var(--gu) * 2) 0;
  pointer-events: none; /* le glissement de caméra passe entre les panneaux */
  font-family: var(--pn-serif, Georgia, serif);
}
.player { position: relative; pointer-events: auto; aspect-ratio: 384 / 189; width: 100%; max-width: calc(var(--gu) * 152); min-width: 0; --pc: var(--p0); justify-self: start; }
.player-right { --pc: var(--p1); aspect-ratio: 378 / 192; justify-self: end; }
.pl-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); transition: filter 0.2s; }
.player.me .pl-frame { filter: drop-shadow(0 0 5px rgba(255, 210, 94, 0.95)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }

/* avatar : le disque du cadre reçoit l'initiale du joueur (pas de portrait fourni) */
.pl-avatar { position: absolute; left: 4.2%; top: 6%; width: 32.5%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.player-right .pl-avatar { left: auto; right: 4.2%; }
.pl-info { position: absolute; left: 38.5%; right: 6%; top: 9%; height: 55%; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.player-right .pl-info { left: 6%; right: 38.5%; align-items: flex-end; text-align: right; }
.player-right .player-name { text-align: right; }
.player-right .pl-row { justify-content: space-between; }
.player-name { min-width: 0; flex: 1 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(var(--gu) * 12) / 1.05 var(--pn-serif, Georgia, serif); color: #fff4d6; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gu) * 4); width: 100%; min-width: 0; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gu) * 3); width: 100%; min-width: 0; white-space: nowrap; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.stat { display: inline-flex; align-items: center; gap: calc(var(--gu) * 2.5); font-size: calc(var(--gu) * 12); font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; }
.stat svg { width: calc(var(--gu) * 12); height: calc(var(--gu) * 12); flex: none; filter: drop-shadow(0 1px 1px #000); }
.stat-lives svg { color: #ff5d5d; }
.stat-gold svg { color: #ffc93d; }
.stat b { color: #fff; text-shadow: 0 1px 2px #000; }

.p-income { display: inline-flex; align-items: baseline; gap: calc(var(--gu) * 1.5); font-size: calc(var(--gu) * 10); font-weight: 800; color: #7fe39a; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px #000; line-height: 1; }
.p-income svg { align-self: center; width: calc(var(--gu) * 10); height: calc(var(--gu) * 10); }
.inc-val { display: inline-flex; align-items: baseline; }
.p-income small { color: #b9c6bd; font-weight: 700; font-size: calc(var(--gu) * 8); }

/* niveau de Citadelle : petite pastille */
.cit-badge {
  display: inline-flex; align-items: center; gap: calc(var(--gu) * 2); padding: calc(var(--gu) * 2) calc(var(--gu) * 5) calc(var(--gu) * 2) calc(var(--gu) * 4); flex: none;
  border: calc(var(--gu) * 1.5) solid #9a7a45; border-radius: 99px; background: rgba(8, 12, 22, 0.75);
  color: #ffe9b0; font: 800 calc(var(--gu) * 9) / 1 var(--pn-serif, Georgia, serif); white-space: nowrap; text-shadow: 0 1px 1px #000;
}
.cit-badge svg { width: calc(var(--gu) * 10); height: calc(var(--gu) * 10); color: #ffc93d; }
.cit-badge b { font-variant-numeric: tabular-nums; color: #fff; }

/* valeurs qui "sautent" quand elles montent / chutent */
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes hurt { 0% { transform: scale(1); color: #fff; } 30% { transform: scale(1.3); color: var(--life); } 100% { transform: scale(1); } }
.bump { animation: bump 0.4s ease-out; }
.hurt { animation: hurt 0.5s ease-out; }
b[data-bind] { display: inline-block; }

/* chrono de match */
.clock { position: relative; z-index: 2; width: calc(var(--gu) * 86); aspect-ratio: 193 / 192; margin-top: calc(var(--gu) * -1); pointer-events: auto; line-height: 1; }
.clock-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); pointer-events: none; }
.clock-in { position: absolute; left: 14%; right: 14%; top: 13%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gu) * 1.5); }
.match-time { font: 900 calc(var(--gu) * 17) / 1 var(--pn-serif, Georgia, serif); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 2px #000, 0 0 8px rgba(120, 180, 255, 0.4); }
.phase-tag { font: 900 calc(var(--gu) * 6.5) / 1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: transparent; }
.phase-tag.warn { color: #cfd8e6; animation: blink 0.9s steps(2) infinite; }
.phase-tag.setup { color: #9ad7ff; }
.phase-tag.skirmish { color: #cfe9b0; }
.phase-tag.assault { color: #ffb347; }
.phase-tag.finale { color: #ff5a5a; animation: blink 0.7s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.clock[data-phase="assault"] .match-time { color: #ffb347; }
.clock[data-phase="finale"] .match-time { color: #ff5a5a; animation: blink 0.7s steps(2) infinite; }
/* ---------------------------------------------------------------- dock */

/* cadres en 9 tranches (planche d'interface) : un pseudo-élément porte le cadre, le contenu reste dans la boîte */

/* panneaux : MÊME hauteur pour les trois (le zoom du terrain ne bouge pas quand on change d'onglet) */

 /* mur + 5 tours constructibles (Lave et Poison sont des évolutions) */

/* ---- carte (bâtiment / unité) : cadre 9 tranches + art + plaque (nom, coût, revenu) + badge de rôle ---- */

/* voile d'ouverture : « envoi possible dans N s » par-dessus le lot */

/* ---- onglet Citadelle : panneau encadré, infos à gauche, gros bouton vert à droite ---- */

.cit-info { display: grid; gap: calc(var(--gu) * 4); min-width: 0; align-content: start; }
.cit-head { display: flex; align-items: baseline; gap: calc(var(--gu) * 8); flex-wrap: wrap; }
.cit-title { font: 900 calc(var(--gu) * 15) / 1 var(--pn-serif, Georgia, serif); color: #ffd25e; text-shadow: 0 2px 0 #4a3000; }
.cit-level { color: #ffe9b0; font-size: calc(var(--gu) * 10); font-weight: 800; }
.cit-note { margin: 0; color: #b9c3d8; font-size: calc(var(--gu) * 10.5); line-height: 1.3; }
.cit-row { display: flex; flex-wrap: wrap; gap: calc(var(--gu) * 3) calc(var(--gu) * 5); align-items: center; }
.cit-label { flex: 0 0 100%; font-size: calc(var(--gu) * 8); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #aab6c8; }
.cit-chip { position: relative; display: inline-grid; place-items: center; width: calc(var(--gu) * 32); height: calc(var(--gu) * 32); border-radius: calc(var(--gu) * 8); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(154, 122, 69, 0.7); }
.cit-chip img { width: calc(var(--gu) * 26); height: calc(var(--gu) * 26); object-fit: contain; }
.cit-chip i { position: absolute; right: -3px; bottom: -3px; padding: 0 4px; border-radius: 6px; background: #1f6b3a; color: #dff8e6; font-size: calc(var(--gu) * 8.5); font-style: normal; font-weight: 800; line-height: 1.4; }
.cit-up {
  position: relative; isolation: isolate; align-self: center; height: calc(var(--gu) * 56); padding: 0 calc(var(--gu) * 10); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--gu) * 2);
  border: 0; background: url("../assets/ui/panel-green.webp") center / 100% 100% no-repeat; color: #fff; font: 800 calc(var(--gu) * 12) / 1.15 var(--pn-serif, Georgia, serif); text-shadow: 0 1px 0 #0d3a14, 0 0 3px #0d3a14;
  cursor: pointer; touch-action: manipulation; transition: transform 0.08s, filter 0.15s; min-height: 0;
}
.cit-up:active { transform: scale(0.96); }
.cit-up .l1, .cit-up .l2 { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--gu) * 4); }
.cit-up .l1 svg { width: calc(var(--gu) * 13); height: calc(var(--gu) * 13); }
.cit-up .l2 { font-size: calc(var(--gu) * 13); color: #ffe08a; }
.cit-up .l2 svg { width: calc(var(--gu) * 12); height: calc(var(--gu) * 12); }
.cit-up.poor { filter: grayscale(0.55) brightness(0.8); }
.cit-up:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; }

/* ---------------------------------------------------------------- superpositions de jeu, dans le même esprit (pierre sombre + or)
   Le terrain est plein écran : tout se place par rapport à l'ESPACE LIBRE (variables --inset-top / --inset-bottom posées par Viewport). */
.toast {
  top: calc(var(--inset-top, 80px) + calc(var(--gu) * 6)); z-index: 12; padding: calc(var(--gu) * 8) calc(var(--gu) * 16);
  border: calc(var(--gu) * 2) solid #9a7a45; background: rgba(8, 12, 22, 0.92); color: #fff4d6; font: 700 calc(var(--gu) * 13) / 1.2 system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.toast.bad { border-color: #ff6b6b; }
.banner { z-index: 7; top: calc(var(--inset-top, 80px) + 10%); background: rgba(8, 12, 22, 0.9); border-width: 3px; font-family: var(--pn-serif, Georgia, serif); }
.net-veil { z-index: 9; }
.overlay { z-index: 10; }

/* popover d'une tour : panneau encadré comme le reste */
.popover {
  z-index: 5; width: calc(var(--gu) * 232); gap: calc(var(--gu) * 6); padding: calc(var(--gu) * 11) calc(var(--gu) * 13) calc(var(--gu) * 12);
  border: 3px solid #9a7a45; border-radius: calc(var(--gu) * 14);
  background: linear-gradient(rgba(10, 16, 30, 0.35), rgba(10, 16, 30, 0.55)), url("../assets/menu/stone.webp") center / 200px;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 10px 30px rgba(0, 0, 0, 0.65); color: #fff4d6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pop-name { font: 800 calc(var(--gu) * 15) / 1 var(--pn-serif, Georgia, serif); color: #ffd25e; text-shadow: 0 2px 0 #4a3000; }
.pop-stats { font-size: calc(var(--gu) * 12); }
.pop-stats dt { color: #c9bd9c; }
.pop-actions .btn { min-height: calc(var(--gu) * 50); border: 3px solid #9a7a45; border-radius: calc(var(--gu) * 10); font-family: var(--pn-serif, Georgia, serif); font-size: calc(var(--gu) * 12.5); color: #fff4d6; text-shadow: 0 1px 0 #2b1707, 0 0 3px #000; }
.pop-up { background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(#3fb43c, #17751f); border-color: #d9b25a; }
.pop-up.maxed, .pop-up.locked { background: rgba(0, 0, 0, 0.4); color: #c9bd9c; border-color: #6b5a3a; }
.pop-sell { background: linear-gradient(rgba(255, 220, 150, 0.1), rgba(0, 0, 0, 0.3)), url("../assets/menu/wood.webp") center / 160px; }
.pop-evolve .evo { border: 2px solid #9a7a45; background: rgba(0, 0, 0, 0.35); }
.pop-x { color: #c9bd9c; }

/* cartes d'envoi : le badge de rôle déborde sur le bas du cadre, il ne doit pas masquer la ligne de revenu */

/* écran de fin : avec le bouton de difficulté (contre l'IA), « Rejouer » prend toute la largeur, les deux autres se partagent la ligne du dessous */
.result-actions:has(#btnDifficulty:not([hidden])) { grid-template-columns: 1fr 1fr; }
.result-actions:has(#btnDifficulty:not([hidden])) #btnReplay { grid-column: 1 / -1; }

/* ================================================================ révision du 2026-10-13 (2) : avatars, HUD, dock compact repliable */

/* ---- avatars : l'atlas est le fond, `--ax / --ay` choisissent la case (data/avatars.js > applyAvatar) ---- */
.avatar-img { background: url("../assets/ui/avatars.webp") var(--ax, 0%) var(--ay, 0%) / 700% 700% no-repeat; }
.pl-avatar { position: absolute; left: 3.2%; top: 3.6%; width: 34.5%; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); pointer-events: none; }
.player-right .pl-avatar { left: auto; right: 3.2%; }

/* ---- panneaux de joueur : trois lignes bien centrées dans la barre sombre du cadre ---- */
.pl-info { left: 39%; right: 6.5%; top: 11%; height: 50%; justify-content: space-between; }
.player-right .pl-info { left: 6.5%; right: 39%; align-items: stretch; text-align: left; }
.player-right .pl-top, .player-right .pl-row { flex-direction: row-reverse; }
.player-right .player-name { text-align: right; }
.pl-top { height: calc(var(--gu) * 14); }
.player-name { font-size: calc(var(--gu) * 12.5); line-height: 1; }
.cit-badge { padding: calc(var(--gu) * 1.5) calc(var(--gu) * 5) calc(var(--gu) * 1.5) calc(var(--gu) * 3.5); font-size: calc(var(--gu) * 9); }
.pl-row { height: calc(var(--gu) * 13); }
.stat { font-size: calc(var(--gu) * 12.5); }
.stat svg { width: calc(var(--gu) * 12); height: calc(var(--gu) * 12); }
/* l'adversaire n'affiche JAMAIS son or : son revenu prend la place (le panneau du joueur local garde l'or) */
.player.foe .stat-gold, .player:not(.foe) .p-income-foe, .player.foe .pl-sub { display: none; }
.player.foe .pl-info { justify-content: space-evenly; }
.p-income-foe { font-size: calc(var(--gu) * 11.5); }
.p-income-foe svg { width: calc(var(--gu) * 11); height: calc(var(--gu) * 11); }
.p-income-foe small { font-size: calc(var(--gu) * 8.5); }
/* paie : compte à rebours discret à côté du revenu (la paie verse CE revenu) */
.payout-mini { display: inline-flex; align-items: center; gap: calc(var(--gu) * 3); flex: none; font-family: system-ui, sans-serif; font-size: calc(var(--gu) * 9.5); font-weight: 800; color: #ffe9b0; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; line-height: 1; }
.payout-mini b { color: #fff; }
.payout-mini small { font-size: calc(var(--gu) * 8); color: #b9c6bd; font-weight: 700; margin-left: calc(var(--gu) * -2); }
.pm-track { width: calc(var(--gu) * 24); height: calc(var(--gu) * 5); border-radius: 4px; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1px rgba(154, 122, 69, 0.7); overflow: hidden; }
.pm-track i { display: block; height: 100%; background: linear-gradient(90deg, #ffd25e, #ffb02e); transform-origin: left; transform: scaleX(0); }

/* ---- chrono : heure + phase, centrées dans l'ovale du cadre (la paie est dans le panneau du joueur) ---- */
.clock-in { left: 15%; right: 15%; top: 14%; height: 45%; justify-content: center; gap: calc(var(--gu) * 3); text-align: center; }
.match-time { font-size: calc(var(--gu) * 19); }
.phase-tag { font-size: calc(var(--gu) * 7.5); letter-spacing: 0.12em; }

/* ---- dock compact : plus de ligne d'information, cartes plus basses, panneau repliable ---- */

/* ---- réglage fin du texte des panneaux (la barre sombre du cadre fait ~46 % de sa hauteur : trois lignes de 10-11 gu) ---- */
.pl-info { top: 19%; height: 45%; justify-content: space-between; left: 39.5%; right: 7%; }
.player-right .pl-info { left: 7%; right: 39.5%; }
.player.foe .pl-info { justify-content: space-evenly; }
.pl-top { height: calc(var(--gu) * 11); }
.pl-row { height: calc(var(--gu) * 11); }
.player-name { font-size: calc(var(--gu) * 11.5); }
.cit-badge { font-size: calc(var(--gu) * 8); padding: calc(var(--gu) * 1) calc(var(--gu) * 4.5) calc(var(--gu) * 1) calc(var(--gu) * 3); border-width: 1px; gap: calc(var(--gu) * 1.5); }
.cit-badge svg { width: calc(var(--gu) * 8.5); height: calc(var(--gu) * 8.5); }
.stat { font-size: calc(var(--gu) * 11); gap: calc(var(--gu) * 2.5); }
.stat svg { width: calc(var(--gu) * 11); height: calc(var(--gu) * 11); }
.p-income { font-size: calc(var(--gu) * 9.5); }
.p-income svg { width: calc(var(--gu) * 9); height: calc(var(--gu) * 9); }
.p-income small { font-size: calc(var(--gu) * 7.5); }
.p-income-foe { font-size: calc(var(--gu) * 10.5); }
.p-income-foe small { font-size: calc(var(--gu) * 8); }
.payout-mini { font-size: calc(var(--gu) * 8.5); gap: calc(var(--gu) * 2.5); }
.payout-mini small { font-size: calc(var(--gu) * 7); }
.pm-track { width: calc(var(--gu) * 20); height: calc(var(--gu) * 4); }
.clock-in { top: 15%; height: 43%; gap: calc(var(--gu) * 2); }
.match-time { font-size: calc(var(--gu) * 18); }
.phase-tag { font-size: calc(var(--gu) * 6.5); letter-spacing: 0.06em; }
.pl-info { right: 8.5%; }
.player-right .pl-info { left: 8.5%; right: 39.5%; }
.pm-track { width: calc(var(--gu) * 16); }

/* ================================================================ révision (3) : cadrage exact des avatars, chrono, paie en barre séparatrice */

/* avatars : centre et diamètre MESURÉS sur les sprites (tools/_fit.mjs : ajustement d'un cercle sur la silhouette). Le médaillon de l'atlas a son
   anneau à 96,9 % de sa case : on le cale pour que cet anneau recouvre exactement celui du cadre. */
.pl-avatar { left: 0%; top: -0.3%; width: 36.5%; }
.player-right .pl-avatar { left: 63%; right: auto; top: 1.3%; }

/* chrono : bloc heure + phase centré dans l'ovale sombre (au-dessus de l'emblème des épées), plus bas qu'avant */
.clock-in { top: 31%; height: 31%; gap: calc(var(--gu) * 3); }
.phase-tag { font-size: calc(var(--gu) * 6); letter-spacing: 0.04em; }

.pl-sub { justify-content: flex-start; }

/* ================================================================ révision (4) : paie = rail fin en haut du dock, poignée en languette */

/* le rail EST le bord supérieur du dock : liseré d'or, puis une rainure où se remplit la paie */

/* poignée de repli : petite languette posée sur le bord du dock (le rail passe dessous, rien ne le masque) */

/* ================================================================ révision (5) : portrait SEUL derrière le cadre (anneau d'or uniforme)
   Le cadre (hud-blue / hud-red / profile-bar-hole) est percé d'un trou ; le portrait (atlas sans anneau) passe derrière, 8 % plus large que le trou :
   l'anneau d'or du cadre le borde, quelle que soit la couleur de l'anneau d'origine du médaillon. Centre et rayon du trou : tools/measure-sprites.mjs. */
.avatar-face { background: url("../assets/ui/avatars-face.webp") var(--ax, 0%) var(--ay, 0%) / 700% 700% no-repeat; }
.pl-avatar { z-index: 0; filter: none; border-radius: 0; left: 1.6%; top: 2.9%; width: 33.3%; }
.player-right .pl-avatar { left: 64.35%; right: auto; top: 3.9%; width: 33.8%; }
.pl-frame { z-index: 1; }
.pl-info { z-index: 2; }

/* ================================================================ révision (6) : bourse en haut à gauche du rail, rail fin, panneaux à 2 lignes calés sur la barre du cadre */

/* rail de paie : filet — liseré d'or de 1,5 gu + rainure de 4 gu */

/* panneaux joueur : DEUX lignes centrées dans la barre sombre du cadre (mesurée : bleu x 33,6-95,3 % / y 13,8-64,6 % ; rouge x 5-65,3 % / y 15,6-64,1 %) */
.pl-info { top: 14.5%; height: 49.5%; justify-content: space-evenly; left: 36.8%; right: 7%; }
.player-right .pl-info { left: 7.5%; right: 37.3%; }
.player.foe .pl-info { justify-content: space-evenly; }
.pl-top { height: calc(var(--gu) * 14); }
.pl-row { height: calc(var(--gu) * 16); }
.player-name { font-size: calc(var(--gu) * 12.5); }
.cit-badge { font-size: calc(var(--gu) * 8.5); }
/* PV : plus gros */
.stat-lives { font-size: calc(var(--gu) * 16); gap: calc(var(--gu) * 4); }
.stat-lives svg { width: calc(var(--gu) * 15); height: calc(var(--gu) * 15); }
/* adversaire : ses PV à GAUCHE de son revenu, des deux côtés (pas de miroir sur cette ligne) */
.player.foe .pl-main { flex-direction: row; justify-content: space-between; }
.p-income-foe { font-size: calc(var(--gu) * 11.5); }
.p-income-foe svg { width: calc(var(--gu) * 11); height: calc(var(--gu) * 11); }
.p-income-foe small { font-size: calc(var(--gu) * 8.5); }
/* ligne de l'adversaire (PV + revenu) : un cran plus petite pour tenir dans la barre sans toucher l'anneau de l'avatar */
.player.foe .stat-lives { font-size: calc(var(--gu) * 14); gap: calc(var(--gu) * 3); }
.player.foe .stat-lives svg { width: calc(var(--gu) * 13); height: calc(var(--gu) * 13); }
.player.foe .p-income-foe { font-size: calc(var(--gu) * 10); gap: calc(var(--gu) * 1); }
.player.foe .p-income-foe svg { width: calc(var(--gu) * 9); height: calc(var(--gu) * 9); }
.player.foe .p-income-foe small { font-size: calc(var(--gu) * 7.5); }
.player.foe .stat-lives { font-size: calc(var(--gu) * 13.5); }
.player.foe .p-income-foe { font-size: calc(var(--gu) * 9.5); }
.player.foe .p-income-foe small { font-size: calc(var(--gu) * 6.5); margin-left: 0; }
.player-right .pl-info { left: 6.5%; right: 38.5%; }

/* ================================================================ révision (7) : la bourse est COLLÉE sous le panneau du joueur (même pastille, dans la hauteur du cadre : le HUD ne grandit pas) */
.pl-purse {
  position: absolute; z-index: 3; left: 37%; top: 57%; height: calc(var(--gu) * 16); pointer-events: none;
  display: inline-flex; align-items: center; gap: calc(var(--gu) * 7); padding: 0 calc(var(--gu) * 9) 0 calc(var(--gu) * 7);
  border: calc(var(--gu) * 1.5) solid #9a7a45; border-radius: 0 0 calc(var(--gu) * 9) calc(var(--gu) * 9); border-top-color: rgba(154, 122, 69, 0.35);
  background: linear-gradient(rgba(8, 12, 22, 0.78), rgba(8, 12, 22, 0.92)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap;
}
.player-right .pl-purse { left: auto; right: 37%; }
.player.foe .pl-purse { display: none; }
.pl-purse .stat { font-size: calc(var(--gu) * 12); }
.pl-purse .stat svg { width: calc(var(--gu) * 11.5); height: calc(var(--gu) * 11.5); }
.pl-purse .p-income { font-size: calc(var(--gu) * 10); }
.pl-purse .p-income svg { width: calc(var(--gu) * 9.5); height: calc(var(--gu) * 9.5); }
.pl-purse .p-income small { font-size: calc(var(--gu) * 7.5); }
/* bourse : plus compacte, accrochée au bord bas de la barre (sans mordre sur la ligne des PV ni sur le cadre du chrono) */
.pl-purse { left: 37.5%; top: 63%; height: calc(var(--gu) * 14); gap: calc(var(--gu) * 5); padding: 0 calc(var(--gu) * 7) 0 calc(var(--gu) * 5); }
.player-right .pl-purse { left: auto; right: 37.5%; }
.pl-purse .stat { font-size: calc(var(--gu) * 11); gap: calc(var(--gu) * 2); }
.pl-purse .stat svg { width: calc(var(--gu) * 10.5); height: calc(var(--gu) * 10.5); }
.pl-purse .p-income { font-size: calc(var(--gu) * 9.5); }
.pl-purse .p-income small { font-size: calc(var(--gu) * 7); }
/* bourse : franchement SOUS le cadre (plus de chevauchement avec la barre), un peu plus à gauche */
.pl-purse { left: 30.5%; top: 71%; border-radius: calc(var(--gu) * 9); border-top-color: #9a7a45; }
.player-right .pl-purse { left: auto; right: 30.5%; }
/* PV du joueur (panneau de gauche) : un peu plus à droite, à l'aplomb du nom */
.player.me:not(.player-right) .pl-main { padding-left: calc(var(--gu) * 15); }

/* décompte de départ (3-2-1) : voile léger, la scène reste lisible derrière (en ligne comme en solo) */
.net-veil.count { background: rgba(6, 10, 22, 0.3); backdrop-filter: none; }
.net-veil.count b { font: 900 calc(var(--gu) * 96) / 1 var(--pn-serif, Georgia, serif); color: #ffd25e; text-shadow: 0 4px 0 #4a3000, 0 0 30px rgba(255, 190, 60, 0.6); animation: count-pop 1s ease-out; }
.net-veil.count span { color: #fff4d6; font-weight: 700; text-shadow: 0 1px 3px #000; }
@keyframes count-pop { from { transform: scale(1.6); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); } }

/* ---- vignettes de navigation entre les îles : sur les bords, au MILIEU de l'écran (entre le HUD et les boutons) : à droite (aller chez l'ennemi) / à gauche (revenir) ----
   REPLIÉES au calme (portrait + flèche), DÉROULÉES avec des compteurs quand des unités circulent (cf. ui/Vignettes.js). */
.vignette {
  position: absolute; top: calc(var(--inset-top, 88px) + (100% - var(--inset-top, 88px) - var(--inset-bottom, 0px)) / 2 - var(--gu) * 16); z-index: 7; display: inline-flex; align-items: center; gap: calc(var(--gu) * 3);
  height: calc(var(--gu) * 32); padding: calc(var(--gu) * 2) calc(var(--gu) * 7) calc(var(--gu) * 2) calc(var(--gu) * 3); cursor: pointer; touch-action: manipulation;
  border: calc(var(--gu) * 2) solid #9a7a45; border-radius: 99px; color: #fff4d6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(rgba(10, 16, 30, 0.45), rgba(10, 16, 30, 0.72)), url("../assets/menu/stone.webp") center / 200px;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 3px 9px rgba(0, 0, 0, 0.5); transition: transform 0.1s, filter 0.15s, border-color 0.2s;
}
.vignette[hidden] { display: none; }
.vig-enemy { right: calc(var(--gu) * 4); border-color: #b8504a; animation: vg-in 0.25s ease-out; }
.vig-home { left: calc(var(--gu) * 4); padding: calc(var(--gu) * 2) calc(var(--gu) * 3) calc(var(--gu) * 2) calc(var(--gu) * 6); border-color: #4f8dff; animation: vg-in 0.25s ease-out; }
@keyframes vg-in { from { opacity: 0; transform: translateY(-6px); } }
.vignette:active { transform: scale(0.95); }
@media (hover: hover) { .vignette:hover { filter: brightness(1.15); } }
.vignette:focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; }
.vg-face { flex: none; width: calc(var(--gu) * 24); height: calc(var(--gu) * 24); border-radius: 50%; box-shadow: 0 0 0 calc(var(--gu) * 1.5) #d9b25a, 0 2px 4px rgba(0, 0, 0, 0.6); }
.vg-arrow { flex: none; width: calc(var(--gu) * 11); height: calc(var(--gu) * 11); color: #ffd25e; filter: drop-shadow(0 1px 1px #000); }

/* partie déroulante : largeur 0 -> contenu (grid 0fr -> 1fr) */
.vg-more { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 0.28s cubic-bezier(0.3, 1.2, 0.5, 1); }
.vignette.open .vg-more { grid-template-columns: 1fr; }
.vg-inner { display: flex; align-items: center; gap: calc(var(--gu) * 6); min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: opacity 0.2s 0.08s; }
.vignette.open .vg-inner { opacity: 1; padding-left: calc(var(--gu) * 3); }
.vg-out, .vg-in { display: inline-flex; align-items: center; gap: calc(var(--gu) * 3); font: 800 calc(var(--gu) * 12) / 1 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.vg-out[hidden], .vg-in[hidden] { display: none; }
.vg-out { color: #7fe39a; }
.vg-in { color: #ff7b72; animation: vg-pulse 1s ease-in-out infinite; }
.vg-out svg, .vg-in svg { width: calc(var(--gu) * 12); height: calc(var(--gu) * 12); filter: drop-shadow(0 1px 1px #000); }
.vg-out b, .vg-in b { color: #fff; }
.vignette.threat { border-color: #ff5a4d; box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 0 12px rgba(255, 70, 60, 0.55), 0 3px 9px rgba(0, 0, 0, 0.5); }
@keyframes vg-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .vig-enemy, .vig-home, .vg-in { animation: none; } .vg-more, .vg-inner { transition: none; } }

/* PV de l'adversaire : un peu plus gros, un peu plus à droite */
.player.foe .stat-lives { font-size: calc(var(--gu) * 15.5); gap: calc(var(--gu) * 3.5); }
.player.foe .stat-lives svg { width: calc(var(--gu) * 14.5); height: calc(var(--gu) * 14.5); }
.player.foe .pl-main { padding-left: calc(var(--gu) * 7); }
.player.foe .pl-main { padding-left: calc(var(--gu) * 4); }
.player.foe .p-income-foe small { display: none; } /* « /10 s » masqué chez l'adversaire : la flèche verte suffit et la place est comptée */
.player.foe .p-income-foe { font-size: calc(var(--gu) * 9); }
.player.foe .pl-main { gap: calc(var(--gu) * 6); }
.player.foe .pl-main { padding-left: calc(var(--gu) * 11); gap: calc(var(--gu) * 4); }
.player.foe .p-income-foe { margin-right: calc(var(--gu) * 8); }

/* bourse du joueur (or + revenu) : un peu plus GRANDE pour que le revenu se lise d'un coup d'œil (révision du 2026-10-14) */
.pl-purse { left: 28%; height: calc(var(--gu) * 18); gap: calc(var(--gu) * 6); padding: 0 calc(var(--gu) * 9) 0 calc(var(--gu) * 6); }
.player-right .pl-purse { left: auto; right: 28%; }
.pl-purse .stat { font-size: calc(var(--gu) * 14); gap: calc(var(--gu) * 3); }
.pl-purse .stat svg { width: calc(var(--gu) * 13.5); height: calc(var(--gu) * 13.5); }
.pl-purse .p-income { font-size: calc(var(--gu) * 12); }
.pl-purse .p-income svg { width: calc(var(--gu) * 11.5); height: calc(var(--gu) * 11.5); }
.pl-purse .p-income small { font-size: calc(var(--gu) * 8.5); }