/* PLOUF ! Interface DOM par-dessus le canvas 3D.
   Unité : 1rem = 1 % de la largeur d'un écran 16:9 (12,8 px en 1280x720, 19,2 px en 1920x1080, 25,6 px en
   2560x1440). Toutes les tailles sont en rem ou en em, donc l'interface entière suit la fenêtre.
   Animations : transform et opacity uniquement. */

:root {
  --ink: #26115a;        /* contour des lettrages et des panneaux */
  --ink-deep: #170a3a;
  --pink: #ff5fa8;
  --pink-deep: #d92f86;
  --yellow: #ffd23e;
  --yellow-deep: #f29d0c;
  --turq: #25d8c8;
  --turq-deep: #0e9f96;
  --violet: #8d5bff;
  --violet-deep: #5a2fd0;
  --cream: #fff8ea;
  --j1: #2f9bff;         /* remplacées au lancement par CONFIG.players[i].css */
  --j2: #ff4d5e;
  --j3: #35e07a;
  --boing: cubic-bezier(.22, 1.55, .42, 1);
}

/* --tilt ne s'hérite pas : un enfant animé par popIn ne reprend pas l'inclinaison de son panneau. */
@property --tilt { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

html { font-size: clamp(8px, min(1vw, 1.7778vh), 40px); }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #7fd0ff; }
body { user-select: none; -webkit-user-select: none; cursor: default; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

#ui {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  font-family: 'Fredoka', 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.15;
  color: #fff;
}
#ui *, #ui *::before, #ui *::after { box-sizing: border-box; }
#ui button, #ui .btn { pointer-events: auto; }

.p0 { --pc: var(--j1); }
.p1 { --pc: var(--j2); }
.p2 { --pc: var(--j3); }

/* Lettrage de titre : Titan One blanc, contour épais, ombre portée dure. */
.tt {
  font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; line-height: 1.05;
  letter-spacing: .03em; white-space: nowrap; color: #fff;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .1em 0 var(--ink);
}

.ico { display: inline-flex; }
.ico svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Touches de clavier ---------- */
.kc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 2.7rem; height: 2.7rem; padding: 0 .65rem .1rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.6rem; line-height: 1;
  color: var(--ink); background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e6defa 100%);
  border: .22rem solid var(--ink); border-radius: .75rem;
  box-shadow: 0 .34rem 0 var(--kc-edge, #b9a8ea), 0 .34rem 0 .22rem var(--ink);
  margin-bottom: .45rem;
}
.kc.p0, .kc.p1, .kc.p2 { --kc-edge: var(--pc); }
/* Bouton de manette : pastille arrondie à la couleur du bouton (sur une Xbox, A est vert, B rouge, Y jaune).
   Le nom est en blanc cerné d'encre, pour rester lisible sur le jaune comme sur le vert. Les marques dont les
   boutons n'ont pas de couleur tombent sur l'ardoise de --kc-face. */
.kc.pad {
  color: #fff; border-radius: 1.35rem; -webkit-text-stroke: .13em var(--ink); paint-order: stroke fill;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc-face, #4a5068) 62%, #fff) 0%,
    var(--kc-face, #4a5068) 52%, color-mix(in srgb, var(--kc-face, #4a5068) 76%, var(--ink)) 100%);
}
.kc-sm.pad { border-radius: 1.05rem; }
/* Emplacement d'une pastille que l'interface redessine quand le joueur change de manette : il disparaît de la
   mise en page, son contenu prend sa place. */
.kc-box { display: contents; }
.kc .ico { width: 1.35rem; height: 1.35rem; }
.kc .ico.left { transform: rotate(-90deg); }
.kc .ico.right { transform: rotate(90deg); }
.kc .ico.down { transform: rotate(180deg); }
.kc-sm { min-width: 2.1rem; height: 2.1rem; font-size: 1.25rem; border-radius: .6rem; padding: 0 .5rem .05rem; margin-bottom: .35rem;
  box-shadow: 0 .26rem 0 var(--kc-edge, #b9a8ea), 0 .26rem 0 .2rem var(--ink); border-width: .2rem; }
.kc-sm .ico { width: 1.05rem; height: 1.05rem; }

.kc-cluster { display: grid; grid-template-columns: repeat(3, auto); gap: .25rem .3rem; justify-items: center; }
.kc-cluster.mini { gap: .1rem .15rem; }
/* À la manette, le déplacement tient en une seule pastille (« Stick ») au lieu des quatre touches en croix. */
.kc-cluster.solo { grid-template-columns: auto; }
.kc-cluster .kc-up { grid-column: 2; }
.kc-cluster .kc-left { grid-column: 1; grid-row: 2; }
.kc-cluster .kc-down { grid-column: 2; grid-row: 2; }
.kc-cluster .kc-right { grid-column: 3; grid-row: 2; }

/* ---------- Voile et écrans ---------- */
.veil {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(38, 17, 90, .5) 0%, rgba(38, 17, 90, .1) 36%, rgba(38, 17, 90, .1) 60%, rgba(38, 17, 90, .55) 100%);
}
/* L'écran de fin a son propre voile (.s-end), plus sombre : celui-ci n'a rien à faire par-dessus. */
#ui[data-screen="title"] .veil,
#ui[data-screen="mode"] .veil,
#ui[data-screen="select"] .veil { opacity: 1; }
#ui[data-screen="online"] .veil { opacity: 1; }

.screen { position: absolute; inset: 0; display: none; }
.screen.is-on { display: block; }

@keyframes popIn {
  0% { transform: rotate(var(--tilt, 0deg)) scale(0); opacity: 0; }
  50% { transform: rotate(var(--tilt, 0deg)) scale(1.14); opacity: 1; }
  68% { transform: rotate(var(--tilt, 0deg)) scale(.93); }
  84% { transform: rotate(var(--tilt, 0deg)) scale(1.04); }
  100% { transform: rotate(var(--tilt, 0deg)) scale(1); opacity: 1; }
}
@keyframes slideIn {
  0% { transform: translateX(var(--from, -120%)) rotate(calc(var(--tilt, 0deg) * 4)); opacity: 0; }
  55% { transform: translateX(calc(var(--from, -120%) * -.04)) rotate(calc(var(--tilt, 0deg) * -.6)); opacity: 1; }
  75% { transform: translateX(calc(var(--from, -120%) * .015)) rotate(calc(var(--tilt, 0deg) * 1.3)); }
  100% { transform: translateX(0) rotate(var(--tilt, 0deg)); opacity: 1; }
}
@keyframes dropIn {
  0% { transform: translateY(-160%) rotate(var(--tilt, 0deg)); opacity: 0; }
  55% { transform: translateY(8%) rotate(var(--tilt, 0deg)); opacity: 1; }
  75% { transform: translateY(-4%) rotate(var(--tilt, 0deg)); }
  100% { transform: translateY(0) rotate(var(--tilt, 0deg)); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.45rem); }
}
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: .75; }
}

/* ---------- Écran titre ---------- */
/* 2,6 rem, et pas 2,5 : incliné, le cadre du logo monte d'un demi-pixel de plus que ses lettres, et il sortait
   de la fenêtre par le haut, ce que le contrôle de débordement de dev/test-ui.html signale. */
.logo-wrap { position: absolute; left: 0; right: 0; top: 2.6rem; display: flex; flex-direction: column; align-items: center; }
/* La marque tient sur une ligne : la taille est calée pour que « Dojo Party » et son inclinaison rentrent dans
   la largeur d'une fenêtre 640x360, la plus petite où 1rem cesse de suivre la fenêtre (plancher de 8 px). */
.logo {
  position: relative; --tilt: -4deg; transform: rotate(var(--tilt));
  font-family: 'Titan One', sans-serif; font-size: 10.5rem; line-height: 1.12; white-space: nowrap;
  padding: 0 .3em; animation: popIn .9s both;
}
.logo-layer { display: block; }
.logo-layer + .logo-layer { position: absolute; left: 0; right: 0; top: 0; padding: 0 .3em; }
.logo-l { display: inline-block; margin: 0 .025em; transform-origin: 50% 88%; animation: logoHop 3s calc(.9s + var(--i) * .11s) infinite; }
/* L'espace du logo sépare deux mots (« Dojo Party ») : sans cette largeur, les deux se lisent collés. */
.logo-sp { display: inline-block; width: .32em; }
.logo-base .logo-l { color: var(--ink-deep); -webkit-text-stroke: .44em var(--ink-deep); }
.logo-base { transform: translateY(.085em); }
.logo-white .logo-l { color: #fff; -webkit-text-stroke: .31em #fff; }
.logo-ink .logo-l { color: var(--ink); -webkit-text-stroke: .13em var(--ink); }
.logo-fill .logo-l {
  color: transparent; background: linear-gradient(180deg, #fff9b0 12%, #ffdb3d 46%, #ff9a1c 86%);
  -webkit-background-clip: text; background-clip: text;
}
.logo-fill .logo-l.bang { background: linear-gradient(180deg, #ffc0de 12%, #ff5fa8 48%, #e0257f 86%); -webkit-background-clip: text; background-clip: text; }
@keyframes logoHop {
  0% { transform: translateY(0) scale(1, 1); }
  5% { transform: translateY(.03em) scale(1.13, .85); }
  13% { transform: translateY(-.19em) scale(.93, 1.1); }
  21% { transform: translateY(.02em) scale(1.1, .9); }
  27% { transform: translateY(-.04em) scale(.98, 1.03); }
  33%, 100% { transform: translateY(0) scale(1, 1); }
}

/* Nom du mini-jeu, entre la marque et le ruban : nettement plus petit que le logo, nettement plus gros que le
   sous-titre, pour que la hiérarchie des trois se lise d'un coup d'œil. */
.minijeu {
  --tilt: -2.5deg; transform: rotate(var(--tilt)); position: relative;
  margin-top: -1.1rem; font-size: 6.2rem; color: var(--cream);
  -webkit-text-stroke-width: .15em; text-shadow: 0 .09em 0 var(--ink), 0 .5rem 1.2rem rgba(23, 10, 58, .28);
  animation: popIn .8s .2s both;
}

.ribbon {
  --tilt: -2deg; transform: rotate(var(--tilt)); margin-top: -1.9rem; position: relative;
  padding: .45rem 2.4rem .65rem; border: .34rem solid var(--ink); border-radius: 1.5rem;
  background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 50%, var(--pink-deep) 100%);
  box-shadow: 0 .5rem 0 var(--ink), 0 1.2rem 1.8rem rgba(23, 10, 58, .3);
  font-size: 2.5rem; -webkit-text-stroke-width: .17em;
  animation: popIn .7s .35s both;
}
/* Le ruban remonte sous le logo quand il le suit directement ; sous le nom du mini-jeu, il se pose en dessous. */
.minijeu + .ribbon { margin-top: .5rem; }

.keys-panel {
  position: absolute; bottom: 3.6rem; width: 26rem; padding: 2.3rem 1.3rem 1.1rem;
  border: .36rem solid var(--ink); border-radius: 2.3rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 78%, #fff) 0%, var(--pc) 42%, color-mix(in srgb, var(--pc) 78%, #1b0a4a) 100%);
  box-shadow: 0 .65rem 0 var(--ink), 0 1.5rem 2.2rem rgba(23, 10, 58, .35);
  transform: rotate(var(--tilt)); animation: slideIn .8s .25s both;
}
.keys-panel.p0 { left: 2.8rem; --tilt: -2deg; --from: -130%; }
.keys-panel.p1 { right: 2.8rem; --tilt: 2deg; --from: 130%; }
/* Le titre du panneau s'allonge quand le joueur branche une manette (« Joueur 1 · manette ») : il déborde
   plutôt que de passer à la ligne, sinon il recouvre la première rangée de touches. */
.kp-head {
  position: absolute; top: -1.9rem; left: 1.5rem; display: flex; align-items: center; gap: .7rem; white-space: nowrap;
  padding: .3rem 1.3rem .45rem; background: #fff; border: .32rem solid var(--ink); border-radius: 1.3rem;
  box-shadow: 0 .4rem 0 var(--ink); transform: rotate(-3deg);
  font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 2rem; color: var(--pc); letter-spacing: .03em;
}
.keys-panel.p1 .kp-head { left: auto; right: 1.5rem; transform: rotate(3deg); }
.kp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem .9rem .1rem 1.1rem; margin-top: .5rem; border-radius: 1.2rem; background: rgba(23, 10, 58, .22);
  font-size: 1.7rem; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .55);
}
.kp-row.move { padding-top: .6rem; }
.kp-row .kc { min-width: 3rem; height: 3rem; font-size: 1.8rem; border-radius: .85rem; }
.kp-row .kc .ico { width: 1.5rem; height: 1.5rem; }
.kp-alt { margin-top: .75rem; text-align: center; font-size: 1.15rem; font-weight: 600; color: rgba(255, 255, 255, .92); text-shadow: 0 .1rem 0 rgba(23, 10, 58, .5); }

.press { position: absolute; left: 0; right: 0; bottom: 8.4rem; text-align: center; }
.press-in { display: inline-block; font-size: 2.55rem; color: #ffe666; animation: pulse 1.1s ease-in-out infinite; }
.hint-esc {
  position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem;
  padding: .5rem 1.4rem .5rem 1rem; border-radius: 1.5rem; background: rgba(23, 10, 58, .72); font-size: 1.35rem; white-space: nowrap;
}
.hint-esc .kc { margin-bottom: .28rem; }

/* ---------- On joue comment ? ---------- */
/* Trois cartes au milieu de l'écran (Duel, Mêlée, En ligne), un seul curseur : c'est un choix de table, pas
   de joueur. 3 × 23 rem + 2 × 2,4 rem = 73,8 rem : elles tiennent aussi quand la fenêtre est si petite que le
   rem plafonne à 8 px (80 rem de large en 640 × 360). */
.mode-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem; }
.mode-title { font-size: 4.2rem; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both; }
.modes { display: flex; gap: 2.4rem; }
.mode-card {
  position: relative; width: 23rem; padding: 2.2rem 1.3rem 1.9rem; text-align: center;
  border: .4rem solid var(--ink); border-radius: 2.6rem; background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
  color: var(--ink); box-shadow: 0 .7rem 0 var(--ink), 0 1.8rem 2.6rem rgba(23, 10, 58, .38);
  transform: rotate(var(--tilt)); transition: transform .3s var(--boing); animation: popIn .65s .12s both;
}
.mode-card.cur { transform: translateY(-1.1rem) scale(1.05) rotate(var(--tilt)); }
.mode-ring {
  position: absolute; inset: -1rem; border: .6rem solid var(--yellow); border-radius: 3.4rem; opacity: 0; transform: scale(.92);
  transition: opacity .12s linear, transform .3s var(--boing);
}
.mode-card.cur .mode-ring { opacity: 1; transform: scale(1); }
.mode-dots { display: flex; justify-content: center; gap: .6rem; }
.mode-dot {
  display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; padding-bottom: .1rem;
  background: var(--pc); border: .3rem solid var(--ink); box-shadow: 0 .32rem 0 var(--ink);
  font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 1.5rem; color: #fff; -webkit-text-stroke: .06em var(--ink);
}
.mode-name { margin-top: 1.3rem; font-size: 3.4rem; }
/* Carte « En ligne » : l'icône de réseau prend la place des pastilles de joueurs. */
.mode-net { width: 3.9rem; height: 3.9rem; filter: drop-shadow(0 .32rem 0 var(--ink)); }
.mode-count { margin-top: .1rem; font-size: 1.7rem; color: var(--violet); -webkit-text-stroke-width: .13em; }
.mode-tag { margin-top: .8rem; font-size: 1.45rem; line-height: 1.2; text-wrap: balance; }
.mode-help {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .9rem 2.4rem .7rem; border-radius: 1.8rem;
  background: rgba(23, 10, 58, .8); border: .28rem solid var(--ink); animation: popIn .6s .4s both;
}
.mode-help-text { font-size: 1.5rem; white-space: nowrap; }
/* Les touches du troisième joueur : estompées tant que la mêlée n'est pas visée. */
.mode-third { display: flex; align-items: center; gap: .4rem; font-size: 1.2rem; opacity: .32; transition: opacity .2s linear; }
.mode-third.on { opacity: 1; }
.mode-third .who { margin-right: .35rem; padding: 0 .65rem .18rem; border-radius: .7rem; background: var(--pc); border: .2rem solid #fff;
  font-size: 1.3rem; -webkit-text-stroke-width: .18em; text-shadow: none; }
.mode-third .sep { opacity: .5; margin: 0 .2rem; }
.mode-third-lbl { opacity: .88; }
.mode-alt { font-size: 1.1rem; opacity: .68; }

/* ---------- Choix du personnage ---------- */
.s-select.is-on { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.3rem 0 1.5rem; }
.sel-title { font-size: 3.4rem; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .7s both; }
/* Les cartes se partagent 94 rem sur les 100 rem de l'écran, en gardant de quoi loger les anneaux des curseurs sur
   les bords ; ui.js pose --n, le nombre de personnages. Jusqu'à quatre, chaque carte fait 21,4 rem ; à cinq, elles
   descendent à 17,6 rem et leurs textes rapetissent (.is-crowded) ; à six, 14,75 rem et un cran de plus
   (.is-packed). La carte porte le portrait : il n'y a pas de place pour des personnages 3D à côté. */
.cards { --gap: 2rem; display: flex; gap: var(--gap); align-items: stretch; margin-top: 4.6rem; }
.cards.is-crowded { --gap: 1.5rem; }
.card-slot { position: relative; width: min(21.4rem, calc((94rem - (var(--n, 4) - 1) * var(--gap)) / var(--n, 4))); display: flex;
  animation: popIn .7s calc(.12s + var(--i) * .1s) both; }
.is-crowded .card-portrait { height: 11.6rem; --ps: 11.6rem; }
.is-crowded .card-name { font-size: 2.4rem; padding: .1rem 1.2rem .35rem; }
.is-crowded .card-tagline { font-size: 1.26rem; margin: .85rem .3rem .75rem; }
.is-crowded .card-special { padding: 1.2rem .9rem .9rem; }
.is-crowded .card-sp-name { font-size: 1.5rem; }
.is-crowded .card-sp-desc { font-size: 1.1rem; }
.is-crowded .stamp { font-size: 2.7rem; }
.cards.is-packed { --gap: 1.1rem; }
.is-packed .card { padding: .7rem .7rem .85rem; }
.is-packed .card-portrait { height: 10.2rem; --ps: 10.2rem; }
.is-packed .card-name { font-size: 2.05rem; padding: .1rem 1rem .3rem; }
.is-packed .card-tagline { font-size: 1.12rem; margin: .8rem .15rem .7rem; min-height: 3.8rem; }
.is-packed .card-special { padding: 1.15rem .7rem .8rem; }
.is-packed .card-sp-name { font-size: 1.34rem; }
.is-packed .card-sp-desc { font-size: 1rem; }
.is-packed .stamp { font-size: 2.3rem; }
.card {
  position: relative; flex: 1; display: flex; flex-direction: column; padding: .85rem .85rem 1rem;
  border: .36rem solid var(--ink); border-radius: 2.4rem; background: var(--cream);
  box-shadow: 0 .65rem 0 var(--ink), 0 1.6rem 2.4rem rgba(23, 10, 58, .35);
  transform: rotate(var(--tilt)); transition: transform .3s var(--boing);
}
.card.cur-0, .card.cur-1, .card.cur-2 { transform: translateY(-1rem) scale(1.035) rotate(var(--tilt)); }
.card-portrait { position: relative; height: 13rem; border-radius: 1.7rem; overflow: hidden; border: .3rem solid var(--ink); --ps: 13rem; }
.card-portrait .portrait { position: absolute; inset: 0; border-radius: 0; }
/* Le portrait est un gros plan carré sur fond transparent : il s'affiche entier, posé sur le bas du cadre. */
.card-portrait .portrait-img { object-fit: contain; object-position: 50% 100%; }
.card-name { align-self: center; position: relative; margin-top: -1.8rem; padding: .1rem 1.6rem .4rem; font-size: 2.8rem;
  background: var(--cc); border: .3rem solid var(--ink); border-radius: 1.3rem; box-shadow: 0 .35rem 0 var(--ink); transform: rotate(-2deg);
  -webkit-text-stroke-width: .17em; }
.card-tagline { margin: .95rem .6rem .85rem; min-height: 3.2rem; text-align: center; text-wrap: balance; font-size: 1.4rem; line-height: 1.15; color: var(--ink); }
.card-special { flex: 1; position: relative; padding: 1.3rem 1.1rem 1rem; border-radius: 1.5rem; background: linear-gradient(180deg, #4a2aa8, #2f1777); border: .28rem solid var(--ink); }
.card-chip { position: absolute; top: -1rem; left: .9rem; padding: .12rem .85rem .2rem; border-radius: .8rem; background: var(--yellow); border: .24rem solid var(--ink);
  color: var(--ink); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); }
.card-sp-name { font-size: 1.65rem; color: #ffe666; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .7); }
.card-sp-desc { margin-top: .3rem; font-size: 1.22rem; font-weight: 400; line-height: 1.22; color: #f3ecff; }

.card-ring {
  position: absolute; inset: -1rem; border: .6rem solid var(--pc); border-radius: 3.2rem; opacity: 0; transform: scale(.9);
  transition: opacity .12s linear, transform .3s var(--boing);
}
.card.cur-0 .card-ring.p0, .card.cur-1 .card-ring.p1, .card.cur-2 .card-ring.p2 { opacity: 1; transform: scale(1); }
/* Plusieurs joueurs sur la même carte : chaque anneau supplémentaire s'écarte d'un cran. */
.card.cur-0.cur-1 .card-ring.p1,
.card.cur-0.cur-2 .card-ring.p2,
.card.cur-1.cur-2 .card-ring.p2 { inset: -1.85rem; border-radius: 4rem; }
.card.cur-0.cur-1.cur-2 .card-ring.p2 { inset: -2.7rem; border-radius: 4.8rem; }

/* Les étiquettes sont dans une rangée centrée : à une, deux ou trois, elles se placent toutes seules. */
.card-tags { position: absolute; left: 50%; bottom: 100%; margin-bottom: 1.9rem; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: .5rem; }
.card-tag { display: none; }
.card.cur-0 .card-tag.p0, .card.cur-1 .card-tag.p1, .card.cur-2 .card-tag.p2 { display: block; animation: popIn .4s both; }

.ptag { position: relative; display: block; animation: bob 1s ease-in-out infinite; }
.ptag.p1 { animation-delay: -.5s; }
.ptag.p2 { animation-delay: -.25s; }
.ptag-pill {
  position: relative; z-index: 1; display: block; padding: .05rem 1rem .3rem; border-radius: 1.1rem; background: var(--pc); border: .3rem solid var(--ink);
  box-shadow: 0 .3rem 0 var(--ink); font-size: 2rem; -webkit-text-stroke-width: .17em;
}
.ptag::after {
  content: ''; position: absolute; left: 50%; bottom: -.95rem; width: 1.3rem; height: 1.3rem; margin-left: -.65rem;
  background: var(--pc); border-right: .3rem solid var(--ink); border-bottom: .3rem solid var(--ink);
  box-shadow: .22rem .22rem 0 var(--ink); transform: rotate(45deg); border-radius: 0 0 .3rem 0; z-index: 2;
}

.stamp {
  position: absolute; z-index: 3; padding: .1rem 1.3rem .4rem; border-radius: 1.1rem; background: var(--pc);
  border: .38rem solid #fff; box-shadow: 0 0 0 .3rem var(--ink), 0 .7rem 0 .3rem rgba(23, 10, 58, .35);
  font-size: 3.1rem; opacity: 0; transform: rotate(var(--tilt)) scale(0);
}
.stamp.p0 { top: 2.6rem; left: -1.6rem; --tilt: -13deg; }
.stamp.p1 { top: 8.3rem; right: -1.6rem; --tilt: 11deg; }
.stamp.p2 { top: 14rem; left: -1.2rem; --tilt: -8deg; }
.card.lock-0 .stamp.p0, .card.lock-1 .stamp.p1, .card.lock-2 .stamp.p2 { animation: stampIn .5s both; }
@keyframes stampIn {
  0% { transform: rotate(var(--tilt)) scale(3); opacity: 0; }
  35% { transform: rotate(var(--tilt)) scale(.82); opacity: 1; }
  58% { transform: rotate(var(--tilt)) scale(1.12); }
  78% { transform: rotate(var(--tilt)) scale(.96); }
  100% { transform: rotate(var(--tilt)) scale(1); opacity: 1; }
}

.sel-help {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem 2rem .55rem; border-radius: 1.8rem;
  background: rgba(23, 10, 58, .8); border: .28rem solid var(--ink); animation: popIn .6s .45s both;
}
.sel-help-text { font-size: 1.55rem; white-space: nowrap; }
.sel-help-keys { display: flex; align-items: center; gap: 2.4rem; }
.sel-legend { display: flex; align-items: center; gap: .45rem; font-size: 1.25rem; }
.sel-legend.off, .sel-legend.remote { display: none; }
.sel-legend .who { margin-right: .4rem; padding: 0 .65rem .18rem; border-radius: .7rem; background: var(--pc); border: .2rem solid #fff; font-size: 1.3rem; -webkit-text-stroke-width: .18em; text-shadow: none; }
.sel-legend .sep { opacity: .55; margin: 0 .15rem; }

/* ---------- Portraits ---------- */
.portrait { position: relative; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--cc, #ff5fa8) 55%, #fff) 0%, var(--cc, #ff5fa8) 62%, color-mix(in srgb, var(--cc, #ff5fa8) 75%, #26115a) 100%); }
.portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.portrait-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--ps, 6rem) * .58); padding-bottom: .06em; }
.portrait.has-img .portrait-img { display: block; }
.portrait.has-img .portrait-fb { display: none; }

/* ---------- HUD de combat ---------- */
.hud-p {
  position: absolute; top: 1.5rem; display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem .8rem .8rem;
  border: .34rem solid var(--ink); border-radius: 2.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 76%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 76%, #1b0a4a) 100%);
  box-shadow: 0 .55rem 0 var(--ink), 0 1.2rem 1.8rem rgba(23, 10, 58, .3);
  transform: rotate(var(--tilt)); animation: slideIn .7s both;
}
.hud-p.p0 { left: 1.6rem; --tilt: -1.2deg; --from: -120%; }
.hud-p.p1 { right: 1.6rem; --tilt: 1.2deg; --from: 120%; flex-direction: row-reverse; padding: .7rem .8rem .8rem 1rem; }
.hud-p.p1 .hud-top, .hud-p.p1 .hud-mid, .hud-p.p1 .g-row { flex-direction: row-reverse; }
/* Le troisième joueur : en bas au centre, la seule place libre pendant le combat. */
.hud-p.p2 { left: 50%; top: auto; bottom: 1.4rem; --tilt: 0deg; transform: translateX(-50%); animation: hudRise .7s both; }
.hud-p.p2 .item-slot { top: auto; bottom: calc(100% + .95rem); }
@keyframes hudRise {
  0% { transform: translate(-50%, 190%); opacity: 0; }
  58% { transform: translate(-50%, -9%); opacity: 1; }
  80% { transform: translate(-50%, 4%); }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
.hud-p.off { display: none; }
/* À l'eau : le panneau reste lisible (le score compte encore) mais sort visiblement de la manche. */
.hud-p.out { filter: grayscale(.8) brightness(.82); opacity: .6; }

.hud-portrait { position: relative; flex: none; width: 7.3rem; height: 7.3rem; --ps: 7.3rem; }
.hud-portrait .portrait { width: 100%; height: 100%; border: .36rem solid #fff; box-shadow: 0 0 0 .3rem var(--ink), 0 .45rem 0 .3rem var(--ink); }
.hud-badge {
  position: absolute; left: 50%; bottom: -.75rem; transform: translateX(-50%); padding: 0 .7rem .2rem; border-radius: .8rem;
  background: #fff; border: .26rem solid var(--ink); font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 1.3rem; color: var(--pc);
}
.hud-main { display: flex; flex-direction: column; gap: .4rem; }
.hud-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .2rem; }
.hud-name { font-size: 2.1rem; text-transform: uppercase; -webkit-text-stroke-width: .19em; }
.pips { display: flex; gap: .4rem; }
.pip { position: relative; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: .26rem solid var(--ink); background: rgba(23, 10, 58, .5); }
.pip::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(0);
  background: radial-gradient(circle at 36% 30%, #fffbd0 0%, #ffe14d 38%, #ffb21e 78%, #f29d0c 100%); }
.pip.on::after { opacity: 1; transform: scale(1); }
.pip.pop::after { animation: pipPop .7s both; }
@keyframes pipPop {
  0% { transform: scale(0); opacity: 1; }
  40% { transform: scale(2.1); }
  62% { transform: scale(.8); }
  82% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.hud-mid { display: flex; align-items: center; gap: .7rem; }
.dmg {
  flex: none; display: flex; align-items: center; justify-content: center; width: 9.6rem; height: 4.7rem; padding-bottom: .15rem;
  border-radius: 1.5rem; background: linear-gradient(180deg, #120730, var(--ink-deep)); border: .28rem solid var(--ink);
  font-family: 'Titan One', sans-serif; font-weight: 400; color: #fff; line-height: 1;
}
.dmg-num { font-size: 3.7rem; letter-spacing: .01em; }
.dmg-pct { font-size: 1.9rem; margin-left: .15rem; }
.dmg-in { display: flex; align-items: baseline; }
.dmg-in.bump { animation: dmgBump .42s both; }
@keyframes dmgBump {
  0% { transform: scale(1) rotate(0); }
  14% { transform: scale(1.42) rotate(-7deg); }
  30% { transform: scale(.92) translateX(.3rem) rotate(6deg); }
  46% { transform: scale(1.14) translateX(-.25rem) rotate(-4deg); }
  64% { transform: scale(.98) translateX(.15rem) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

.gauges { display: flex; flex-direction: column; gap: .45rem; }
.g-row { position: relative; display: flex; align-items: center; gap: .4rem; }
.g-row > .ico { width: 1.45rem; height: 1.45rem; flex: none; }
.g-track { position: relative; flex: none; width: 9.6rem; overflow: hidden; border: .26rem solid var(--ink); border-radius: 1.1rem; background: var(--ink-deep); }
.g-fill { position: absolute; inset: 0; border-radius: .8rem; transform: translateX(-100%); }
.hud-p.p1 .g-fill { transform: translateX(100%); }
.g-special .g-track { height: 2.3rem; }
.g-special .g-fill { background: linear-gradient(180deg, #fff3a0 0%, #ffd23e 42%, #ff9a1c 100%); }
.g-special .g-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.g-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: .1rem;
  font-size: 1.05rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: .24em var(--ink); paint-order: stroke fill; }
.g-special.ready .g-fill { background: linear-gradient(180deg, #ffd0ea 0%, #ff5fa8 45%, #e0257f 100%); }
.g-special.ready .g-flash { animation: blink .5s linear infinite; }
.g-special.ready .g-label { color: #fff6a8; }
/* La touche du coup spécial reste visible (on apprend où elle est), estompée tant que la jauge n'est pas pleine. */
.g-key { flex: none; opacity: .5; transform: scale(.86); transition: transform .35s var(--boing), opacity .15s linear; }
.g-special.ready .g-key { opacity: 1; transform: scale(1.12) rotate(7deg); }
.hud-p.p1 .g-special.ready .g-key { transform: scale(1.12) rotate(-7deg); }
.g-special.ready .g-key .kc { animation: pulse .5s ease-in-out infinite; }
.g-key .kc { margin-bottom: .26rem; }
/* La barre d'énergie porte son nom : elle sert à la garde et aux coups de sabre. */
.g-guard .g-track { height: 1.45rem; border-width: .22rem; }
.g-guard .g-fill { background: linear-gradient(180deg, #b6fff5, var(--turq) 55%, var(--turq-deep)); }
.g-guard .g-label { font-size: .88rem; -webkit-text-stroke-width: .2em; }
.g-guard.low .g-fill { background: linear-gradient(180deg, #ffc0c6, #ff4d5e 55%, #c81e34); }

/* Objet actif : pastille accrochée sous le panneau, côté centre de l'écran. */
.item-slot { position: absolute; top: calc(100% + .95rem); right: 1.6rem; }
.hud-p.p1 .item-slot { right: auto; left: 1.6rem; }
.item-in {
  display: flex; align-items: center; gap: .6rem; padding: .3rem 1.2rem .3rem .35rem; border-radius: 2.4rem; white-space: nowrap;
  background: var(--cream); color: var(--ink); border: .28rem solid var(--ink); box-shadow: 0 .38rem 0 var(--ink);
  opacity: 0; transform: scale(0); transform-origin: 80% 0;
}
.hud-p.p1 .item-in { flex-direction: row-reverse; padding: .3rem .35rem .3rem 1.2rem; transform-origin: 20% 0; }
.item-slot.has-item .item-in { opacity: 1; transform: scale(1); animation: popIn .5s both; }
.item-disc { position: relative; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #e6dcff); }
.item-icon { position: absolute; inset: .62rem; }
.item-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.item-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.item-ring circle { fill: none; stroke-width: 5.5; }
.item-ring .ring-bg { stroke: rgba(38, 17, 90, .22); }
.item-ring .ring-fg { stroke: #ff5fa8; stroke-linecap: round; }
.item-label { font-size: 1.4rem; padding-bottom: .12rem; }

.hud-center { position: absolute; top: 1.3rem; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.round-pill {
  --tilt: -1.5deg; transform: rotate(var(--tilt)); padding: .15rem 1.7rem .45rem; border-radius: 1.4rem; font-size: 2.05rem;
  background: linear-gradient(180deg, #a880ff, var(--violet) 50%, var(--violet-deep)); border: .32rem solid var(--ink); box-shadow: 0 .45rem 0 var(--ink);
  -webkit-text-stroke-width: .18em; animation: dropIn .7s .1s both;
}
.shrink { opacity: 0; transform: translateY(-.8rem) scale(.6); transition: opacity .15s linear, transform .3s var(--boing); }
.shrink.on { opacity: 1; transform: none; }
.shrink-in {
  display: flex; align-items: center; gap: .55rem; padding: .3rem 1.2rem .35rem .9rem; border-radius: 1.2rem; white-space: nowrap;
  background: var(--cream); color: var(--ink); border: .28rem solid var(--ink); box-shadow: 0 .35rem 0 var(--ink); font-size: 1.5rem;
}
.shrink-in .ico { width: 1.7rem; height: 1.7rem; flex: none; }
.shrink.urgent .shrink-in { background: linear-gradient(180deg, #ff7c88, #ff3047); color: #fff; animation: pulse .5s ease-in-out infinite; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); }

/* ---------- Étiquettes et bulles au-dessus des têtes ---------- */
.anchors { position: absolute; inset: 0; display: none; }
#ui[data-screen="fight"] .anchors, #ui[data-screen="none"] .anchors { display: block; }
.anchor { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.anchor.on { opacity: 1; }
.anchor-in { position: absolute; left: 0; bottom: 1.35rem; transform: translateX(-50%); }
.anchor .ptag-pill { font-size: 1.55rem; padding: 0 .75rem .22rem; border-radius: .9rem; border-width: .26rem; box-shadow: 0 .25rem 0 var(--ink); }
.anchor .ptag::after { width: 1.05rem; height: 1.05rem; margin-left: -.52rem; bottom: -.72rem; border-width: .26rem; box-shadow: .18rem .18rem 0 var(--ink); }

.bubble-pos { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; }
.bubble-pos.on { visibility: visible; }
.bubble {
  position: relative; max-width: 30rem; min-width: 8rem; padding: .8rem 1.5rem 1rem; border-radius: 1.9rem; text-align: center;
  background: #fff; color: var(--ink); border: .34rem solid var(--ink); box-shadow: .35rem .5rem 0 var(--pc);
  font-size: 2.05rem; line-height: 1.16; transform-origin: 50% 100%;
}
.bubble.pop { animation: bubbleIn .5s both; }
@keyframes bubbleIn {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  75% { transform: scale(.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bubble-tail { position: absolute; left: 0; bottom: -.95rem; width: 0; height: 0; }
.bubble-tail::after {
  content: ''; position: absolute; left: -.85rem; top: -1.35rem; width: 1.7rem; height: 1.7rem; background: #fff;
  border-right: .32rem solid var(--ink); border-bottom: .32rem solid var(--ink); border-radius: 0 0 .4rem 0;
  transform: rotate(45deg) skew(12deg, 12deg);
}

/* ---------- Bannière centrale ---------- */
.banner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.banner.show { display: flex; }
.banner-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.banner.out .banner-inner { animation: bannerOut .22s ease-in both; }
@keyframes bannerOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.banner-text { position: relative; z-index: 2; font-size: 8rem; -webkit-text-stroke-width: .17em; }
.banner-sub { position: relative; z-index: 2; margin-top: .4rem; font-size: 2.4rem; color: #ffe666; display: none; }
.banner.has-sub .banner-sub { display: block; animation: popIn .5s .2s both; }
.banner-band, .banner-splash, .banner-drops { display: none; }

.b-count .banner-text { font-size: 22rem; color: #ffe14d; -webkit-text-stroke-width: .13em; animation: countSlam .5s both; }
/* Décompte de reprise du mode en ligne (« Reprise dans 3 », plus de 3 signes) : même lettrage, assez petit pour
   tenir dans 80 rem (fenêtre de 640 × 360) ; « 2 » et « 1 » qui suivent reprennent la taille du décompte. */
.b-count.long .banner-text { max-width: 74rem; font-size: 8rem; line-height: 1.05; white-space: normal; text-align: center; text-wrap: balance; }
@keyframes countSlam {
  0% { transform: scale(3.2) rotate(-14deg); opacity: 0; }
  32% { transform: scale(.8) rotate(4deg); opacity: 1; }
  55% { transform: scale(1.14) rotate(-3deg); }
  76% { transform: scale(.96) rotate(1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.b-go .banner-text { font-size: 18rem; color: #5dffb4; -webkit-text-stroke-width: .13em; --tilt: -6deg; animation: goSlam .55s both; }
@keyframes goSlam {
  0% { transform: rotate(var(--tilt)) scale(0); opacity: 0; }
  40% { transform: rotate(var(--tilt)) scale(1.35); opacity: 1; }
  62% { transform: rotate(var(--tilt)) scale(.9); }
  82% { transform: rotate(var(--tilt)) scale(1.07); }
  100% { transform: rotate(var(--tilt)) scale(1); opacity: 1; }
}

.b-ko .banner-text { font-size: 17rem; -webkit-text-stroke-width: .13em; animation: koSlam .6s both, koWobble 1.2s .6s ease-in-out infinite; }
@keyframes koSlam {
  0% { transform: scale(3.2) rotate(-16deg); opacity: 0; }
  32% { transform: scale(.8) rotate(-2deg); opacity: 1; }
  55% { transform: scale(1.14) rotate(-7deg); }
  76% { transform: scale(.96) rotate(-4deg); }
  100% { transform: scale(1) rotate(-5deg); opacity: 1; }
}
@keyframes koWobble {
  0%, 100% { transform: rotate(-5deg) scale(1, 1); }
  25% { transform: rotate(-3.5deg) scale(1.04, .95); }
  60% { transform: rotate(-6deg) scale(.97, 1.04); }
}
.b-ko .banner-splash { display: block; position: absolute; z-index: 0; left: 50%; top: 50%; width: 100rem; height: 36rem; margin: -18rem 0 0 -50rem; animation: popIn .6s both; }
.b-ko .banner-splash svg { display: block; width: 100%; height: 100%; overflow: visible; }
.b-ko .banner-drops { display: block; position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; }
.drop { position: absolute; left: -1.1rem; top: -1.1rem; width: 2.2rem; height: 2.2rem; opacity: 0; animation: dropFly 1s var(--dl) cubic-bezier(.15, .7, .3, 1) both; }
.drop::after { content: ''; position: absolute; inset: 0; border-radius: 0 50% 50% 50%; transform: rotate(var(--rot)); background: linear-gradient(135deg, #e9fdff, #5fe3ff 60%, #1fb5ea); border: .3rem solid var(--ink); }
@keyframes dropFly {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--ds)); opacity: 1; }
}

.b-round .banner-band {
  display: block; position: absolute; z-index: 0; left: 50%; top: 50%; width: 130vw; height: 18rem; margin: -9rem 0 0 -65vw;
  background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 45%, #c93aa5 100%); border-top: .45rem solid var(--ink); border-bottom: .45rem solid var(--ink);
  box-shadow: 0 .8rem 0 rgba(23, 10, 58, .45); --tilt: -3deg; animation: bandIn .45s both;
}
@keyframes bandIn { 0% { transform: rotate(var(--tilt)) scaleY(0); opacity: 0; } 60% { transform: rotate(var(--tilt)) scaleY(1.15); opacity: 1; } 100% { transform: rotate(var(--tilt)) scaleY(1); opacity: 1; } }
.b-round .banner-text { font-size: 9.5rem; --tilt: -3deg; animation: roundIn .6s .08s both; }
@keyframes roundIn {
  0% { transform: translateX(-60vw) rotate(var(--tilt)) skewX(-20deg); opacity: 0; }
  55% { transform: translateX(3vw) rotate(var(--tilt)) skewX(6deg); opacity: 1; }
  78% { transform: translateX(-1vw) rotate(var(--tilt)) skewX(-2deg); }
  100% { transform: translateX(0) rotate(var(--tilt)) skewX(0); opacity: 1; }
}
.b-round .banner-sub { margin-top: 1.6rem; font-size: 2.6rem; }

.b-info .banner-inner { padding: 1.1rem 3.2rem 1.5rem; border-radius: 2.2rem; border: .36rem solid var(--ink); box-shadow: 0 .6rem 0 var(--ink), 0 1.4rem 2rem rgba(23, 10, 58, .35);
  background: linear-gradient(180deg, #a880ff, var(--violet) 50%, var(--violet-deep)); --tilt: -1.5deg; animation: popIn .55s both; }
.b-info.out .banner-inner { animation: bannerOut .22s ease-in both; }
.b-info .banner-text { font-size: 4.2rem; }
/* Phrase du mode en ligne (plus de 18 signes) : plus petite, sur deux lignes au besoin, jamais hors de l'écran. */
.b-info.long .banner-text { max-width: 62rem; font-size: 2.7rem; line-height: 1.2; white-space: normal; text-align: center; text-wrap: balance; }
.b-info .banner-sub { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.9rem; -webkit-text-stroke-width: 0; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); letter-spacing: 0; color: #fff; }

/* ---------- Touche du troisième joueur ---------- */
/* Cachée en duel, montrée sur les panneaux de la mêlée. */
.kc-extra { display: none; align-items: center; gap: .55rem; }
.st-panel.trio .kc-extra { display: inline-flex; gap: .45rem; }

/* ---------- Pause ---------- */
.pause { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(23, 10, 58, .5); }
.pause.show { display: flex; }
.pause-panel {
  position: relative; width: 34rem; padding: 3.6rem 2rem 1.5rem; border: .4rem solid var(--ink); border-radius: 2.8rem;
  background: linear-gradient(180deg, #4dded2, var(--turq) 45%, var(--turq-deep));
  box-shadow: 0 .75rem 0 var(--ink), 0 2rem 3rem rgba(23, 10, 58, .45); --tilt: -1.2deg; transform: rotate(var(--tilt)); animation: popIn .55s both;
}
.pause-title { position: absolute; left: 50%; top: -3rem; transform: translateX(-50%) rotate(-3deg); padding: .1rem 2.4rem .6rem; border-radius: 1.8rem; font-size: 4.4rem;
  background: linear-gradient(180deg, #ff86bf, var(--pink) 50%, var(--pink-deep)); border: .4rem solid var(--ink); box-shadow: 0 .55rem 0 var(--ink); -webkit-text-stroke-width: .16em; }
.pause-list { display: flex; flex-direction: column; gap: .8rem; }
.pause-item {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.4rem .85rem 1.6rem; border-radius: 1.5rem;
  background: rgba(23, 10, 58, .3); border: .3rem solid transparent; font-size: 2.1rem; text-shadow: 0 .13rem 0 rgba(23, 10, 58, .55);
  transition: transform .25s var(--boing);
}
.pause-item.sel { background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); border-color: var(--ink); color: var(--ink); text-shadow: none;
  box-shadow: 0 .45rem 0 var(--ink); transform: scale(1.06) translateX(.5rem); }
.pause-arrow { position: absolute; left: -2.3rem; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; opacity: 0; }
.pause-item.sel .pause-arrow { opacity: 1; animation: nudge .6s ease-in-out infinite; }
.pause-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.5rem); } }
.pause-val { min-width: 5.2rem; text-align: center; padding: .05rem .9rem .2rem; border-radius: 1rem; border: .26rem solid var(--ink); font-size: 1.6rem; letter-spacing: .05em;
  color: #fff; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); background: linear-gradient(180deg, #7dffb8, #1fcf78); }
.pause-val.off { background: linear-gradient(180deg, #b9b2cf, #7f7799); }
.pause-val:empty { display: none; }
.pause-help { margin-top: 1.3rem; text-align: center; text-wrap: balance; font-size: 1.25rem; line-height: 1.3; color: #fff; text-shadow: 0 .1rem 0 rgba(23, 10, 58, .55); }
/* Variantes du mode en ligne (dev/RESEAU.md §6.3). Sans options, rien de ceci ne s'affiche. */
.pause-help.off, .pause-help-text:empty { display: none; }
.pause-title.mid { font-size: 3.3rem; top: -2.5rem; }
.pause-title.long { font-size: 2.5rem; top: -2.1rem; padding: .2rem 1.8rem .55rem; transform: translateX(-50%) rotate(-1.5deg); }
/* Le bandeau du titre mord sur le haut du panneau : le sous-titre commence sous lui (plus haut quand le titre,
   long, a été rapetissé). */
.pause-title.mid ~ .pause-sub, .pause-title.long ~ .pause-sub { margin-top: -.8rem; }
.pause-sub { margin: .3rem 0 1.1rem; text-align: center; text-wrap: balance; font-size: 1.55rem; line-height: 1.25; color: #fff;
  text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); }
.pause-sub:empty, .pause-resume:empty { display: none; }
.pause-resume { width: max-content; margin: -.4rem auto 1.1rem; padding: .1rem 1.4rem .4rem; border-radius: 1.2rem; font-size: 2.2rem;
  background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); border: .3rem solid var(--ink); box-shadow: 0 .38rem 0 var(--ink);
  -webkit-text-stroke-width: .16em; animation: pulse .9s ease-in-out infinite; }
/* « Reprendre » grisée : une pause qui n'est pas une pause de joueur ne se lève pas depuis ce menu. */
.pause-item.dis { opacity: .45; }
.pause-item.dis.sel { opacity: .7; }
/* Menu qui ne gèle rien : la partie continue derrière, le voile se fait discret, et « Reprendre » n'y figure pas
   (Musique, Sons, Quitter la salle : dev/RESEAU.md §3.9). */
.pause.live { background: rgba(23, 10, 58, .12); }
.pause-item.hid { display: none; }

/* ---------- Écran de fin de partie ---------- */
/* Le gagnant, le tableau de la partie et le menu sur le même écran. Le voile laisse deviner la danse du
   gagnant en 3D derrière le panneau, sans jamais gêner la lecture des chiffres. */
.s-end { background: rgba(23, 10, 58, .6); backdrop-filter: blur(.2rem); overflow: hidden; }
.st-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.2rem 0; }
/* Le titre prend la couleur du gagnant : elle vient de la classe p0 / p1 / p2 posée sur l'écran. */
.st-title { padding: .1rem 2.2rem .55rem; border-radius: 1.8rem; font-size: 4.4rem; --tilt: -1.6deg; transform: rotate(var(--tilt));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 72%, #fff), var(--pc) 50%, color-mix(in srgb, var(--pc) 78%, #1b0a4a));
  border: .38rem solid var(--ink); box-shadow: 0 .6rem 0 var(--ink), 0 1.4rem 2.2rem rgba(23, 10, 58, .4);
  -webkit-text-stroke-width: .15em; animation: popIn .7s both; }
.st-panel {
  width: min(88rem, 96vw); max-height: 90vh; display: flex; flex-direction: column; gap: .8rem;
  padding: 1.2rem 1.8rem 1.4rem; border: .4rem solid var(--ink); border-radius: 2.4rem;
  background: linear-gradient(180deg, #fffdf6, var(--cream) 60%, #ffeccd);
  box-shadow: 0 .8rem 0 var(--ink), 0 2rem 3rem rgba(23, 10, 58, .45); animation: popIn .55s .1s both;
}
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.st-panel.trio .st-top { justify-content: space-around; }
.st-head { display: flex; align-items: center; gap: .8rem; --ps: 4.6rem; }
.st-head.off { display: none; }
.st-head.p0 { --pc: var(--j1); }
.st-head.p1 { --pc: var(--j2); flex-direction: row-reverse; }
.st-head.p2 { --pc: var(--j3); }
/* À deux, le score trône au milieu ; à trois, chaque tête porte le sien. */
.st-hscore { display: none; font-size: 2.3rem; color: var(--pc); -webkit-text-stroke: .09em var(--ink); text-shadow: 0 .06em 0 var(--ink); }
.st-panel.trio .st-hscore { display: block; }
.st-panel.trio .st-score { display: none; }
.st-panel.trio .st-head.p1 { flex-direction: row; }
.st-head .portrait { width: 4.6rem; height: 4.6rem; border: .3rem solid #fff; box-shadow: 0 0 0 .26rem var(--ink); }
.st-name { font-size: 2rem; color: var(--pc); -webkit-text-stroke: .09em var(--ink); text-shadow: 0 .06em 0 var(--ink); }
.st-score { display: flex; align-items: center; gap: .7rem; }
.st-score .num { font-size: 3.4rem; -webkit-text-stroke: .09em var(--ink); text-shadow: 0 .06em 0 var(--ink); }
.st-score .num.p0 { color: var(--j1); }
.st-score .num.p1 { color: var(--j2); }
.st-score .dash { font-size: 2.4rem; color: var(--ink); -webkit-text-stroke-width: 0; text-shadow: none; }

/* Deux colonnes : seize lignes tiennent alors sans ascenseur, même sur un écran 720p. */
.st-table { display: grid; grid-template-columns: 1fr 1fr; gap: .18rem .9rem; align-content: start; }
.st-row { display: grid; grid-template-columns: 4.6rem 1fr 4.6rem; align-items: center; gap: .4rem;
  padding: .18rem .6rem .26rem; border-radius: .8rem; background: rgba(38, 17, 90, .05); }
.st-row:nth-child(4n+3), .st-row:nth-child(4n+4) { background: rgba(38, 17, 90, .11); }
.st-lbl { text-align: center; font-size: 1.16rem; color: var(--ink); opacity: .85; line-height: 1.12; text-wrap: balance; }
.st-val { font-family: 'Titan One', system-ui, sans-serif; font-size: 1.3rem; color: var(--ink);
  -webkit-text-stroke-width: 0; text-shadow: none; opacity: .6; white-space: nowrap; }
.st-val.v0 { text-align: left; }
.st-val.v1 { text-align: right; }
/* Le meilleur des deux est en couleur et plus gros : la ligne se lit d'un coup d'œil. */
.st-row.w0 .st-val.v0, .st-row.w1 .st-val.v1 { opacity: 1; font-size: 1.46rem; }
.st-row.w0 .st-val.v0 { color: var(--j1); }
.st-row.w1 .st-val.v1 { color: var(--j2); }

/* À trois joueurs : le libellé ouvre la ligne, puis une colonne par joueur, chacune à sa couleur.
   Les couleurs pures seraient trop claires sur le fond crème : les valeurs ordinaires sont foncées
   vers l'encre, et seule la meilleure garde la couleur franche du joueur. */
.st-table.n3 .st-row { grid-template-columns: 1fr 4.4rem 4.4rem 4.4rem; gap: .3rem; }
.st-table.n3 .st-lbl { text-align: left; }
.st-table.n3 .st-val { text-align: right; opacity: .78; font-size: 1.22rem; }
.st-table.n3 .st-val.v0 { color: color-mix(in srgb, var(--j1) 62%, var(--ink)); }
.st-table.n3 .st-val.v1 { color: color-mix(in srgb, var(--j2) 62%, var(--ink)); }
.st-table.n3 .st-val.v2 { color: color-mix(in srgb, var(--j3) 55%, var(--ink)); }
.st-table.n3 .st-row.w0 .st-val.v0 { color: var(--j1); }
.st-table.n3 .st-row.w1 .st-val.v1 { color: var(--j2); }
.st-table.n3 .st-row.w2 .st-val.v2 { color: color-mix(in srgb, var(--j3) 80%, var(--ink)); }
.st-table.n3 .st-row.w0 .st-val.v0,
.st-table.n3 .st-row.w1 .st-val.v1,
.st-table.n3 .st-row.w2 .st-val.v2 { opacity: 1; font-size: 1.38rem; }

.st-titles { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.st-titles-lbl { font-size: 1.5rem; color: var(--ink); -webkit-text-stroke-width: 0; text-shadow: none; opacity: .7; letter-spacing: .06em; }
.st-titles-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; }
.st-badge { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .3rem .9rem .4rem;
  border-radius: 1.1rem; border: .26rem solid var(--ink); box-shadow: 0 .3rem 0 var(--ink); background: var(--pc); }
.st-badge.p0 { --pc: var(--j1); }
.st-badge.p1 { --pc: var(--j2); }
.st-badge.p2 { --pc: var(--j3); }
.st-badge-name { font-size: 1.3rem; color: #fff; -webkit-text-stroke: .07em var(--ink); text-shadow: 0 .06em 0 var(--ink); }
.st-badge-detail { font-size: 1.05rem; color: #fff; text-shadow: 0 .1rem 0 rgba(23, 10, 58, .6); }

.st-footer { text-align: center; font-size: 1.25rem; color: var(--ink); opacity: .75; }
.st-footer:empty { display: none; }
/* Couronne au-dessus de la tête du gagnant. */
.st-head-pic { position: relative; display: flex; }
.st-crown { position: absolute; top: -2.1rem; left: 50%; width: 3.4rem; height: 2.5rem; margin-left: -1.7rem; opacity: 0; }
.st-head.win .st-crown { opacity: 1; animation: bob 1.4s ease-in-out infinite; }
.st-head.win .portrait { border-color: #ffe14d; }

/* Réplique du gagnant, juste sous le tableau. */
.st-quote { text-align: center; text-wrap: balance; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.st-quote:empty { display: none; }

/* Menu : trois entrées côte à côte, une seule choisie. On y défile au stick, à la croix ou aux flèches. */
.end-menu { display: flex; justify-content: center; align-items: stretch; gap: .9rem; }
.end-mi { position: relative; display: flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem .35rem .8rem; border-radius: 1.4rem;
  border: .28rem solid transparent; background: rgba(38, 17, 90, .1); color: var(--ink); font-size: 1.5rem;
  transition: transform .25s var(--boing); animation: popIn .6s both; }
.end-mi.a0 { animation-delay: .35s; }
.end-mi.a1 { animation-delay: .45s; }
.end-mi.a2 { animation-delay: .55s; }
.end-mi.sel { border-color: var(--ink); box-shadow: 0 .4rem 0 var(--ink); transform: scale(1.06) translateY(-.2rem); }
.end-mi.a0.sel { background: linear-gradient(180deg, #ffe877, var(--yellow) 55%, var(--yellow-deep)); }
.end-mi.a1.sel { background: linear-gradient(180deg, #a880ff, var(--violet) 55%, var(--violet-deep)); color: #fff; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); }
.end-mi.a2.sel { background: linear-gradient(180deg, #4dded2, var(--turq) 55%, var(--turq-deep)); color: #fff; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); }
.end-mi-arrow { width: 1.5rem; height: 1.5rem; opacity: 0; flex: none; }
.end-mi.sel .end-mi-arrow { opacity: 1; animation: nudge .6s ease-in-out infinite; }
.end-mi-lbl { font-family: 'Titan One', system-ui, sans-serif; white-space: nowrap; }
.end-mi-keys { display: flex; align-items: center; gap: .35rem; margin-left: .3rem; }
.end-mi-keys .or { font-size: 1rem; opacity: .7; margin: 0 .05rem .2rem; }
.end-help { text-align: center; font-size: 1.2rem; color: var(--ink); opacity: .7; }
/* Ligne facultative du mode en ligne, sous le menu. */
.end-votes { text-align: center; font-size: 1.3rem; color: var(--violet-deep); }
.end-votes:empty { display: none; }

/* ---------- En ligne ---------- */
/* Écran `online` (dev/RESEAU.md §6.2) : six vues, une seule visible (.on). Tout doit tenir dans 80 × 45 rem,
   la taille de l'écran quand la fenêtre est si petite que le rem plafonne à 8 px (640 × 360). */
.s-online.is-on { display: flex; align-items: center; justify-content: center; }
.online-wrap { display: none; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 78rem; }
.online-wrap.on { display: flex; }
.online-title { font-size: 4.2rem; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both; }
.online-big { font-size: 4rem; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both; }
.online-sub { padding: .25rem 1.2rem .35rem; border-radius: 1.1rem; background: rgba(23, 10, 58, .72); font-size: 1.5rem;
  text-align: center; text-wrap: balance; }
.online-sub:empty { display: none; }
.online-panel {
  position: relative; padding: 1.4rem 1.8rem; border: .4rem solid var(--ink); border-radius: 2.4rem; color: var(--ink);
  background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
  box-shadow: 0 .7rem 0 var(--ink), 0 1.8rem 2.6rem rgba(23, 10, 58, .38); animation: popIn .55s .1s both;
}
.online-help {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; max-width: 74rem; padding: .8rem 2.2rem .75rem;
  border-radius: 1.8rem; background: rgba(23, 10, 58, .8); border: .28rem solid var(--ink);
  font-size: 1.45rem; line-height: 1.25; text-align: center; text-wrap: balance; animation: popIn .6s .3s both;
}
.online-help.off, .online-help-line.off { display: none; }
.online-error {
  max-width: 66rem; padding: .35rem 1.3rem .45rem; border-radius: 1.1rem; border: .26rem solid var(--ink); box-shadow: 0 .3rem 0 var(--ink);
  background: linear-gradient(180deg, #ff7c88, #ff3047); color: #fff; font-size: 1.45rem; line-height: 1.25; text-align: center;
  text-wrap: balance; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .55);
}
.online-error:empty { display: none; }

/* Menu : deux entrées, sur le modèle du menu de pause. */
.online-menu { width: 38rem; display: flex; flex-direction: column; gap: .9rem; padding: 1.7rem 1.8rem 1.7rem 2.8rem; }
.online-item {
  position: relative; display: flex; align-items: center; padding: .75rem 1.4rem .85rem 1.6rem; border-radius: 1.5rem;
  background: rgba(38, 17, 90, .08); border: .3rem solid transparent; font-size: 2.2rem; transition: transform .25s var(--boing);
}
.online-item.sel { background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e); border-color: var(--ink);
  box-shadow: 0 .45rem 0 var(--ink); transform: scale(1.04) translateX(.4rem); }
.online-arrow { position: absolute; left: -2.4rem; top: 50%; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; opacity: 0; }
.online-item.sel .online-arrow { opacity: 1; animation: nudge .6s ease-in-out infinite; }

/* Saisie du code : quatre cases, la case courante en surbrillance. */
.code-box { display: flex; gap: 1.3rem; animation: popIn .55s .1s both; }
.code-cell {
  position: relative; width: 7.6rem; height: 9.2rem; display: flex; align-items: center; justify-content: center; padding-bottom: .5rem;
  border: .4rem solid var(--ink); border-radius: 1.8rem; background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
  box-shadow: 0 .6rem 0 var(--ink); font-size: 6rem; transition: transform .25s var(--boing);
}
.code-cell.cur { transform: translateY(-.7rem) scale(1.06); box-shadow: 0 .6rem 0 var(--ink), 0 0 0 .55rem var(--yellow), 0 1.2rem 1.6rem rgba(23, 10, 58, .35); }
.code-cell.cur:empty::after { content: ''; width: .55rem; height: 5.2rem; margin-top: .5rem; border-radius: .3rem; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.code-box.complete .code-cell { box-shadow: 0 .6rem 0 var(--ink), 0 0 0 .45rem #35e07a; }

/* Connexion et démarrage : trois gouttes qui sautent. */
.online-dots { display: flex; gap: 1rem; padding-top: .6rem; }
.online-dots span { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: .3rem solid var(--ink); background: radial-gradient(circle at 36% 30%, #fff, #7fe3ff 60%, #39c8ff);
  animation: dotHop .9s ease-in-out infinite; }
.online-dots span:nth-child(2) { animation-delay: .15s; }
.online-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-1.2rem); } }

/* Erreur : le texte de dev/RESEAU.md §7, sur un panneau crème lisible. */
.online-error-text { max-width: 62rem; padding: 1.6rem 2.6rem 1.8rem; font-size: 1.85rem; line-height: 1.3; text-align: center; text-wrap: balance; }

/* Salle d'attente. */
/* Pire cas en hauteur (test-ui.html &pire=1 : conseil, trois avertissements et l'aide longue « Un autre joueur
   sur ce PC ? ... » sur deux lignes) : il doit tenir dans les 45 rem d'une fenêtre de 640 × 360, titre incliné
   compris. Tout espacement ajouté ici se revérifie avec test-ui.html (&pire=1&debord=1). */
.v-salle { gap: .5rem; }
.salle-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.salle-title { font-size: 3.4rem; --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both; }
.salle-code { color: var(--yellow); letter-spacing: .08em; }
.salle-linkrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .8rem; }
.online-link { padding: .25rem 1.2rem .4rem; border-radius: 1rem; border: .26rem solid var(--ink); background: rgba(23, 10, 58, .8);
  font-size: 1.45rem; white-space: nowrap; }
.online-copy { padding: .2rem .9rem .3rem; border-radius: .9rem; border: .24rem solid var(--ink); box-shadow: 0 .25rem 0 var(--ink);
  color: var(--ink); font-size: 1.25rem; white-space: nowrap; }
.online-copy:empty { display: none; }
.online-copy.ok { background: #7dffb8; }
.online-copy.impossible { background: var(--yellow); }

.salle-seats { display: flex; gap: 1.6rem; padding-top: .9rem; }
.seat {
  position: relative; width: 24rem; min-height: 9.8rem; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.7rem .9rem .8rem; border: .34rem solid var(--ink); border-radius: 2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 76%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 76%, #1b0a4a) 100%);
  box-shadow: 0 .55rem 0 var(--ink), 0 1.2rem 1.8rem rgba(23, 10, 58, .3); animation: popIn .55s both;
}
.seat.p1 { animation-delay: .08s; }
.seat.p2 { animation-delay: .16s; }
/* Place libre : pointillés, sans couleur de joueur, pour qu'on voie tout de suite qu'elle attend quelqu'un. */
.seat.libre { background: rgba(23, 10, 58, .42); border-style: dashed; border-color: rgba(255, 255, 255, .75); box-shadow: none; }
.seat.toi { box-shadow: 0 .55rem 0 var(--ink), 0 0 0 .45rem var(--yellow), 0 1.2rem 1.8rem rgba(23, 10, 58, .3); }
.seat-tag { position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%); }
.seat-tag .ptag-pill { font-size: 1.7rem; padding: 0 .9rem .25rem; }
.seat-who { font-size: 2.3rem; }
.seat.toi .seat-who { color: #ffe666; }
.seat.libre .seat-who { opacity: .75; }
.seat-body { display: flex; align-items: center; justify-content: center; gap: .9rem; min-height: 4.8rem; }
.seat-keys { display: flex; align-items: center; gap: .9rem; }
.seat-acts { display: flex; align-items: flex-start; gap: .45rem; }
.seat-act { display: flex; flex-direction: column; align-items: center; }
.seat-act .kc { margin-bottom: .3rem; }
.seat-act-lbl { font-size: .95rem; line-height: 1; text-shadow: 0 .1rem 0 rgba(23, 10, 58, .6); }
.seat-ping { font-size: 2rem; }

/* Barres de réseau : 4 niveaux, vert en haut de l'échelle, rouge en bas. */
.net-bars { display: flex; align-items: flex-end; gap: .28rem; height: 2.7rem; }
.net-bars .bar { width: .85rem; border-radius: .25rem; border: .2rem solid var(--ink); background: rgba(23, 10, 58, .45); }
.net-bars .bar:nth-child(1) { height: 32%; }
.net-bars .bar:nth-child(2) { height: 55%; }
.net-bars .bar:nth-child(3) { height: 78%; }
.net-bars .bar:nth-child(4) { height: 100%; }
/* Les barres allumées sont blanches (lisibles sur les trois couleurs de joueur), jaunes à 2, rouges en dessous. */
.net-bars .bar.on { background: #fff; }
.net-bars.n2 .bar.on { background: var(--yellow); }
.net-bars.n1 .bar.on, .net-bars.n0 .bar.on { background: #ff3047; }

.salle-info { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.salle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.salle-formule { padding: .1rem 1.4rem .4rem; border-radius: 1.2rem; font-size: 2rem; border: .3rem solid var(--ink); box-shadow: 0 .38rem 0 var(--ink);
  background: linear-gradient(180deg, #a880ff, var(--violet) 50%, var(--violet-deep)); -webkit-text-stroke-width: .17em; }
.salle-formule.wait { background: rgba(23, 10, 58, .72); font-size: 1.6rem; }
.salle-extra { padding: .2rem 1rem .3rem; border-radius: 1rem; background: rgba(23, 10, 58, .72); font-size: 1.3rem; }
.salle-extra:empty { display: none; }
.salle-handicap { display: flex; align-items: center; gap: .35rem; padding: .25rem 1.1rem .3rem; border-radius: 1.1rem;
  background: rgba(23, 10, 58, .72); font-size: 1.45rem; }
.salle-handicap.off { display: none; }
.hc-arrow { display: none; }
.salle-handicap.reglable .hc-arrow { display: inline-flex; }
.hc-arrow .kc { margin-bottom: .2rem; }
.hc-value { color: #ffe666; }
.salle-conseil { padding: .15rem 1rem .25rem; border-radius: 1rem; background: rgba(23, 10, 58, .6); font-size: 1.25rem; color: #ffe666; }
.salle-conseil:empty { display: none; }
.salle-alerts { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.salle-alerts:empty { display: none; }
.online-warn {
  display: flex; align-items: center; gap: .55rem; max-width: 72rem; padding: .2rem 1.2rem .28rem .9rem; border-radius: 1.2rem;
  background: var(--cream); color: var(--ink); border: .28rem solid var(--ink); box-shadow: 0 .32rem 0 var(--ink); font-size: 1.35rem;
}
.online-warn .ico { width: 1.6rem; height: 1.6rem; flex: none; }
.online-confirm { font-size: 1.8rem; color: #ffe666; animation: pulse .7s ease-in-out infinite; }
.online-confirm:empty { display: none; }
.salle-aide { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 2rem; }
.salle-aide.off { display: none; }
.salle-help { padding: .5rem 2rem; line-height: 1.2; }
/* Une aide courte reste sur sa ligne (la rangée passe à la ligne entre deux aides, pas au milieu d'une) ; une
   aide plus large que le cadre (« Un autre joueur sur ce PC ? ... ») passe à la ligne au lieu d'en sortir. */
.aide-item { max-width: 100%; text-wrap: balance; }
.aide-key { color: #ffe666; }

/* ---------- Pastille réseau (en bas à gauche du HUD) ---------- */
/* Largeur bornée à 19 rem : en mêlée, elle ne touche pas le panneau de J3, centré en bas, même quand l'écran
   ne fait que 80 rem de large (640 × 360). */
.net {
  position: absolute; left: 1.6rem; bottom: 1.4rem; display: none; align-items: center; gap: .55rem; max-width: 19rem;
  padding: .3rem 1.1rem .38rem .75rem; border-radius: 1.2rem; background: var(--cream); color: var(--ink);
  border: .28rem solid var(--ink); box-shadow: 0 .35rem 0 var(--ink); font-size: 1.3rem; line-height: 1.15;
}
#ui[data-screen="fight"] .net.on, #ui[data-screen="none"] .net.on { display: flex; }
.net-dot { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: .22rem solid var(--ink); background: var(--dot, #35e07a); }
.net[data-level="ok"] { --dot: #35e07a; }
.net[data-level="moyen"] { --dot: #ffd23e; }
.net[data-level="lent"] { --dot: #ff4d5e; }
.net[data-level="coupe"] { --dot: #fff; background: linear-gradient(180deg, #ff7c88, #ff3047); color: #fff; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); }
/* Clignotement sur le modèle de .shrink.urgent. */
.net.blink { animation: pulse .5s ease-in-out infinite; }
.net.blink .net-dot { animation: caret .5s steps(1) infinite; }

/* Surimpression ?net=stats : en haut à gauche, sous le panneau de J1 et sous la pastille de son objet, en
   chasse fixe. */
.net-debug {
  position: absolute; left: 1.2rem; top: 18rem; display: none; max-width: 34rem; margin: 0; padding: .55rem .8rem;
  border-radius: .6rem; background: rgba(10, 5, 30, .8); color: #d9fbe8;
  font: 400 1.05rem/1.3 Consolas, 'Courier New', monospace; white-space: pre-wrap;
}
.net-debug.on { display: block; }

/* Étiquette brève au-dessus du perso (« Trop tard (décalage) »), accrochée à l'ancre de son étiquette J1. */
.flash-note {
  position: absolute; left: 0; bottom: 4.9rem; padding: .12rem .8rem .25rem; border-radius: .8rem; white-space: nowrap;
  background: linear-gradient(180deg, #ff7c88, #ff3047); border: .24rem solid var(--ink); box-shadow: 0 .25rem 0 var(--ink);
  font-size: 1.3rem; color: #fff; text-shadow: 0 .1rem 0 rgba(23, 10, 58, .6); opacity: 0; transform: translateX(-50%);
}
.flash-note.on { opacity: 1; animation: noteIn .35s both; }
@keyframes noteIn {
  0% { transform: translateX(-50%) translateY(.8rem) scale(.4); opacity: 0; }
  60% { transform: translateX(-50%) translateY(-.2rem) scale(1.12); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}