/* Interface de PARTIE du mode Salon (3 à 5 joueurs) — ui/PartyHud.js. Posée par `.hud.party` (main.js) :
 *  - plus de cadre-chrono ni de panneau adverse : le HUD = MON panneau à gauche + le TABLEAU des joueurs à droite (`#board`) ;
 *  - le tableau = une CARTE par joueur (avatar, nom, niveau de Citadelle, PV, revenu) puis, incrusté en pied, le BANDEAU temps écoulé + phase (la section `.clock`, déplacée ici
 *    par main.js ; simple affichage : pas de pause en salon) ;
 *  - les deux vignettes des bords (raccourcis d'îles) prennent la couleur de l'île visée.
 * Unité `--gu` : cf. hud.css. */
.board { display: none; }
.hud.party { grid-template-columns: minmax(0, calc(var(--gu) * 152)) minmax(0, 1fr); column-gap: calc(var(--gu) * 4); }
.hud.party .pl-right { display: none; }
.hud.party .board {
  display: grid; align-content: start; gap: calc(var(--gu) * 2); justify-self: end; align-self: start; width: 100%; max-width: calc(var(--gu) * 172); margin-top: calc(var(--gu) * 1.5); pointer-events: auto;
  padding: calc(var(--gu) * 2.5); border: calc(var(--gu) * 1.3) solid rgba(154, 122, 69, 0.85); border-radius: calc(var(--gu) * 8);
  background: linear-gradient(rgba(14, 26, 54, 0.9), rgba(6, 12, 28, 0.92)); box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.1), 0 calc(var(--gu) * 2) calc(var(--gu) * 6) rgba(0, 0, 0, 0.5);
}
.bd-list { display: grid; gap: calc(var(--gu) * 2); }

/* une carte par joueur : UNE ligne (avatar, nom, niveau de Citadelle, PV, revenu) */
.bd-row {
  display: grid; grid-template-columns: calc(var(--gu) * 13) minmax(0, 1fr) auto auto auto; align-items: center; gap: calc(var(--gu) * 3);
  height: calc(var(--gu) * 17); min-width: 0; padding: 0 calc(var(--gu) * 4) 0 calc(var(--gu) * 2); cursor: pointer; touch-action: manipulation; text-align: left;
  border: calc(var(--gu) * 0.8) solid rgba(255, 224, 160, 0.16); border-left: calc(var(--gu) * 2.5) solid var(--lane, #c9a45a); border-radius: calc(var(--gu) * 5);
  background: linear-gradient(rgba(34, 50, 90, 0.55), rgba(10, 18, 40, 0.7)); color: #e8f0ff; font: 700 calc(var(--gu) * 10.5) / 1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bd-row.me { border-color: rgba(255, 210, 94, 0.55); border-left-color: var(--lane); background: linear-gradient(90deg, rgba(255, 210, 94, 0.2), rgba(10, 18, 40, 0.7) 75%); }
.bd-row.out { opacity: 0.5; filter: grayscale(0.8); }
.bd-row:active { transform: scale(0.98); }
@media (hover: hover) { .bd-row:hover { border-color: rgba(120, 170, 255, 0.55); } }
.bd-row:focus-visible { outline: 2px solid #ffd25e; outline-offset: 1px; }
.bd-av { width: calc(var(--gu) * 13); height: calc(var(--gu) * 13); border-radius: 50%; background-color: #162033; box-shadow: 0 0 0 calc(var(--gu) * 1.2) var(--lane, #c9a45a), 0 1px 3px rgba(0, 0, 0, 0.6); }
.bd-top { display: flex; align-items: center; gap: calc(var(--gu) * 2.5); min-width: 0; }
.bd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.bd-row.me .bd-name { color: #ffe9b0; }
.bd-link { flex: none; font-style: normal; font-size: calc(var(--gu) * 7.5); line-height: 1; }
.bd-row.target .bd-link { color: #ffd25e; }
.bd-row.source .bd-link { color: #ff7b72; }
.bd-cit { display: inline-flex; align-items: center; gap: calc(var(--gu) * 1.5); font: 800 calc(var(--gu) * 9) / 1 var(--pn-serif, Georgia, serif); color: #ffe9b0; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.bd-cit svg { width: calc(var(--gu) * 9.5); height: calc(var(--gu) * 9.5); color: #ffc93d; flex: none; }
.bd-cit b { font-weight: 800; }
.bd-lives, .bd-inc { display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(var(--gu) * 2); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.bd-lives { min-width: calc(var(--gu) * 24); color: #fff; font-weight: 800; font-size: calc(var(--gu) * 11.5); }
.bd-lives svg { width: calc(var(--gu) * 10.5); height: calc(var(--gu) * 10.5); color: #ff6b6b; flex: none; filter: drop-shadow(0 1px 1px #000); }
.bd-lives.hurt b { animation: bd-hurt 0.5s ease-out; }
.bd-lives.heal b { animation: bd-heal 0.6s ease-out; }
.bd-row.out .bd-lives svg { display: none; }
.bd-inc { min-width: calc(var(--gu) * 26); color: #7fe39a; font-weight: 800; font-size: calc(var(--gu) * 9.5); }
.bd-inc svg { width: calc(var(--gu) * 8.5); height: calc(var(--gu) * 8.5); flex: none; }
.bd-inc b { font-weight: 800; }
@keyframes bd-hurt { 0% { color: #ff5a4d; transform: scale(1.35); } 100% { color: #fff; transform: none; } }
@keyframes bd-heal { 0% { color: #6df08f; transform: scale(1.35); } 100% { color: #fff; transform: none; } }

/* bandeau temps écoulé + phase, incrusté en pied du tableau (la section `.clock` de hud.css, sans son cadre-image) ; simple affichage : pas de pause en salon */
.hud.party .board .clock {
  position: static; z-index: auto; display: flex; align-items: center; width: auto; aspect-ratio: auto; margin: 0; padding: calc(var(--gu) * 2.5) calc(var(--gu) * 6); pointer-events: none;
  border: calc(var(--gu) * 0.8) solid rgba(154, 122, 69, 0.5); border-radius: calc(var(--gu) * 5); background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hud.party .board .clock-in { position: static; flex: 1; min-width: 0; height: auto; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: calc(var(--gu) * 6); }
.hud.party .board .match-time { font-size: calc(var(--gu) * 12.5); }
.hud.party .board .phase-tag { font-size: calc(var(--gu) * 7.5); letter-spacing: 0.1em; }

/* vignettes d'île voisine : bordure à la couleur de l'île ; grisée si son joueur est éliminé ; dorée pour MA île */
.stage .vignette[data-lane] { border-color: var(--lane, #9a7a45); }
.stage .vignette.mine { border-color: #ffd25e; }
.stage .vignette.out { opacity: 0.6; filter: grayscale(0.7); }
.stage .vignette.threat { border-color: #ff5a4d; }

@media (prefers-reduced-motion: reduce) { .bd-lives.hurt b, .bd-lives.heal b { animation: none; } }

/* écran de fin : classement du mode Salon (GameOverScreen.showParty) */
.result-stats.party { font-size: 12px; }
.result-stats.party th { padding: 4px 3px; color: var(--pn-tan); font-size: 10.5px; letter-spacing: 0.03em; }
.result-stats.party th.l, .result-stats.party td.l { text-align: left; }
.result-stats.party td { padding: 5px 3px; text-align: center; font-weight: 700; }
.result-stats.party td:first-child { color: var(--pn-gold); font-weight: 800; white-space: nowrap; }
.result-stats.party td.l { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--lane, #c9a45a); padding-left: 7px; color: var(--pn-cream); }
.result-stats.party tr.me-row td { background: rgba(255, 210, 94, 0.12); }
.result-stats.party tr.top-row td:first-child::after { content: " 👑"; }

/* ---- SPECTATEUR d'un salon en ligne : pas d'île, donc pas de panneau de joueur ni de commandes ; une barre « Spectateur · Quitter » */
.hud.party.spectating { grid-template-columns: minmax(0, 1fr); }
.hud.spectating .pl-left { display: none; }
#app.spectating #bottomBar { visibility: hidden; pointer-events: none; } /* masqué mais PAS retiré : le zoom du terrain mesure sa place */
.spec-bar {
  position: absolute; z-index: 7; top: calc(var(--safe-top) + calc(var(--gu) * 8)); left: calc(var(--gu) * 8); display: flex; align-items: center; gap: calc(var(--gu) * 8);
  padding: calc(var(--gu) * 4) calc(var(--gu) * 5) calc(var(--gu) * 4) calc(var(--gu) * 10); border: calc(var(--gu) * 1.5) solid rgba(154, 122, 69, 0.85); border-radius: 99px;
  background: linear-gradient(rgba(14, 26, 54, 0.92), rgba(6, 12, 28, 0.94)); box-shadow: 0 calc(var(--gu) * 2) calc(var(--gu) * 6) rgba(0, 0, 0, 0.5);
  font: 800 calc(var(--gu) * 11) / 1 var(--pn-serif, Georgia, serif); color: #ffe9b0; text-shadow: 0 1px 2px #000;
}
.spec-bar[hidden] { display: none; }
.spec-bar button {
  height: calc(var(--gu) * 24); padding: 0 calc(var(--gu) * 10); cursor: pointer; touch-action: manipulation; font: 800 calc(var(--gu) * 10.5) / 1 var(--pn-serif, Georgia, serif); color: #ffb8b0;
  border: 1px solid rgba(255, 138, 128, 0.6); border-radius: 99px; background: rgba(255, 90, 80, 0.12);
}
.spec-bar button:active { transform: scale(0.95); }