/* ⬤ AGARIO — ses règles à lui.
   ⚠️ `style.css` fait 200 Ko et il est partagé par tout le site : un jeu qui
   arrive n'a pas à s'y installer. Un fichier séparé se retire aussi vite. */
.agar-scene {
  position: relative;
  user-select: none; -webkit-user-select: none;
  width: 100%;
  height: min(72vh, 760px);
  border-radius: 16px;
  overflow: hidden;
  background: #0e1a14;
}
/* ⚠️ PAS DE CONTOUR DE FOCUS SUR LE CANVAS. Signalé, capture à l'appui : « une
   bordure blanche s'installe en contour de ma page quand j'appuie sur n'importe
   quel contrôle, F, W, espace ». Le canvas porte `tabIndex = 0` (le clavier
   exige un focus) ; dès qu'on tape une touche, Chrome le considère
   `:focus-visible` et dessine son anneau de 3 px — qui fait le tour de la
   scène, donc de la page.
   ⚠️ On ne SUPPRIME pas l'information pour autant : elle passe sur la SCÈNE,
   en vert discret et vers l'intérieur. Un joueur au clavier sait toujours que
   le jeu a le focus ; il ne voit plus un cadre blanc autour de son écran. */
.agar-canvas:focus, .agar-canvas:focus-visible { outline: none; }
.agar-scene:has(.agar-canvas:focus-visible) {
  box-shadow: inset 0 0 0 2px rgba(122, 199, 79, .22);
}
.agar-canvas {
  display: block;
  /* ⚠️ Le « carré blanc » : le glissé sélectionnait. On coupe la sélection. */
  user-select: none; -webkit-user-select: none;
  width: 100%;
  height: 100%;
  /* ⚠️ Sans ceci, un glissement du doigt fait défiler la page au lieu de
     déplacer le blob — et sur mobile le jeu devient injouable. */
  touch-action: none;
  cursor: crosshair;
}
/* ══ 📐 LE COIN HAUT-GAUCHE — UNE COLONNE, plus quatre ancrages absolus ═════
 *
 * ⚠️ Signalé : « les kills et infos de la game apparaissent derrière la
 * progression du niveau ». Mesuré : 7 px de recouvrement. Et c'est MA faute
 * deux fois — j'avais posé le fil à `top: 76px`, un nombre relevé sur une
 * bourse d'UNE ligne, puis j'ai donné trois lignes à la bourse (solde, niveau,
 * jauge) sans jamais remesurer. Un décalage codé en dur contre un élément de
 * hauteur variable est un recouvrement qui attend son heure.
 *
 * Les quatre pièces vivent donc dans une COLONNE : elles s'empilent, et se
 * recouvrir leur devient impossible par construction. Plus aucun `top` magique,
 * plus aucune règle `:has()` pour les décaler l'une de l'autre.
 * ⚠️ La colonne ne prend pas les clics — mais le panneau de partie, si : il
 * porte des boutons. Il le redemande pour lui seul.
 */
.agar-hg {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  /* ⚠️ Le coin ne mange jamais la moitié droite : le classement y est PEINT
     sur le canvas, et une ligne longue courait dessous sans que rien ne
     l'arrête. La borne était sur le HUD ; elle appartient à la colonne. */
  max-width: calc(50% - 16px);
  pointer-events: none;
}
.agar-hud {
  padding: 5px 10px; border-radius: 10px;
  background: rgba(14, 26, 20, 0.72);
  color: #e8f5ea; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 📱 ⚠️ AU DOIGT, LE HUD S'ENROULE. Il tient jusqu'à neuf champs joints par
   « · » dans UNE ligne coupée aux ~151 px utiles de la colonne (mesuré à
   375 px : ~21 caractères). Tout ce qui vient après « ⬤ masse · ⏱ temps » est
   perdu — et ce sont justement les champs d'ÉTAT qui ferment la liste :
   l'immunité 🛡️, le gel ❄️, et l'avertissement « une autre page occupe la
   connexion ». Sur téléphone, ils n'existaient tout simplement pas.
   La colonne empile déjà : la laisser enrouler ne coûte que de la hauteur. */
@media (pointer: coarse) {
  .agar-hud { white-space: normal; overflow: visible; text-overflow: clip; }
}
.agar-message { padding: 34px 16px; text-align: center; }
.agar-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

@media (max-width: 640px) {
  .agar-scene { height: min(62vh, 520px); border-radius: 12px; }
}
/* 📱 Au TACTILE : la scène s'étire — un jeu se joue plein cadre, pas dans un
   timbre-poste. dvh (la hauteur RÉELLE, barre d'adresse déduite) avec repli vh. */
@media (pointer: coarse) {
  .agar-scene { height: min(74vh, 820px); height: min(74dvh, 820px); }
}
/* …et en PAYSAGE téléphone, presque tout l'écran : c'est la vraie posture de jeu. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .agar-scene { height: 88vh; height: 88dvh; border-radius: 8px; }
}

/* 💀 Le panneau de mort — un calque, pas un remplacement : le monde continue
   de tourner derrière pendant qu'on décide. */
.agar-mort {
  position: absolute; inset: 0;
  /* ⚠️ AU-DESSUS des contrôles tactiles (z 3) et du feed (z 2) : sans z-index,
     ✂️💧 et le pad flottaient sur l'écran de mort — des commandes mortes qui
     avaient l'air vivantes. (5 > pause 4 : la mort ferme la pause de droit.) */
  z-index: 5;
  /* ⚠️ LE MÊME PIÈGE QUE `.agar-menu` ET `.agar-pause`, et il fallait le
     reporter ICI AVANT d'ajouter une image : `justify-content: center` pousse
     un contenu qui déborde AU-DELÀ du bord haut, là où le défilement ne va
     jamais. Une carte mortelle avec un GIF fait facilement déborder l'écran
     d'un téléphone — et c'est « Rejouer » qui serait sorti par le haut,
     inatteignable. `flex-start` + marges auto : centré tant que ça tient, et le
     débordement part vers le BAS, où le défilement fonctionne. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; text-align: center; padding: 16px; overflow-y: auto;
  background: rgba(14, 26, 20, 0.78);
  color: #e8f5ea;
}
#agario-body .agar-mort > *:first-child { margin-top: auto; }
#agario-body .agar-mort > *:last-child { margin-bottom: auto; }
.agar-mort strong { font-size: 26px; }
.agar-mort p { margin: 0; color: #d9a441; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 💀 « Mangé par X » — écrit, et pas seulement montré pendant le fondu : le
   fondu est sauté en « mouvement réduit », l'information ne l'est jamais. */
.agar-mort-tueur { font-size: 14px; color: #ff9d93; font-weight: 700; }
/* ⭐ LE RÉCAP DE FIN DE MANCHE — le seul moment où le niveau bouge. */
.agar-mort-niveau {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: min(260px, 70%);
}
.agar-mort-xp { font-size: 14px; color: #9fd4a3; font-weight: 700; }
.agar-mort-niveau .agar-niveau-jauge { width: 100%; height: 6px; }
/* 🎬 ⚠️ Une TRANSITION, jamais une animation à images-clés. Le garde global
   « mouvement réduit » impose `animation-duration: 0.01ms` à tout le site : une
   `animation … forwards` sauterait à sa dernière image sans rien montrer. Une
   transition, elle, devient simplement instantanée — et l'état FINAL, qui porte
   l'information, reste juste dans les deux cas. */
.agar-mort-niveau .agar-niveau-plein { transition: width 1.1s cubic-bezier(.22,.68,.35,1); }
/* ⬆️ Un niveau FRANCHI se voit : c'est l'évènement de la manche. */
.agar-mort-rang.monte { color: #7ac74f; }
/* 💀 LA CARTE MORTELLE du tueur — au-dessus des boutons, dans leur zone.
   ⚠️ BORNÉE en hauteur ET en largeur : c'est un fichier fourni par un joueur,
   et un GIF de 3 000 px de haut chasserait « Rejouer » de l'écran. 34 % de la
   scène laisse la place aux statistiques et aux deux boutons. */
.agar-mort-carte {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: min(420px, 86%);
}
.agar-mort-carte img {
  max-width: 100%; max-height: 34vh; width: auto; height: auto;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16);
  /* Un fond : un PNG transparent ne doit pas se fondre dans le voile. */
  background: rgba(0, 0, 0, .35);
}
.agar-mort-mot {
  font-size: 14px; font-style: italic; color: #cfe6d3;
  /* ⚠️ Un message de 120 caractères sans espace tiendrait sur une ligne de
     1 400 px et ferait défiler la page en travers. */
  overflow-wrap: anywhere;
}

/* ══ LE MENU PRINCIPAL — du DOM, pas du canvas : il se navigue au clavier
   et se lit au lecteur d'écran. ══ */
.agar-menu {
  position: absolute; inset: 0;
  /* ⚠️ `justify-content: center` + `overflow-y: auto` = le piège classique du
     flexbox : quand le contenu DÉBORDE, le centrage le pousse au-delà du bord
     HAUT, et cette partie-là n'est PAS atteignable au défilement (le
     navigateur ne défile jamais avant le début du conteneur). Signalé : sur
     téléphone, le bouton « Jouer » était injoignable — sept modes de jeu plus
     le titre dépassaient l'écran.
     Le remède portable : `flex-start` + des marges AUTO sur le premier et le
     dernier enfant. Elles absorbent l'espace libre (donc ça reste centré tant
     que ça tient) et retombent à zéro dès qu'il y a débordement — qui part
     alors vers le BAS, là où le défilement fonctionne. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 14px; padding: 18px; overflow-y: auto;
  /* Le défilement au DOIGT : la scène capte les gestes pour le pad, et sans
     cette ligne le menu héritait d'un conteneur qui ne défile pas. */
  touch-action: pan-y; overscroll-behavior: contain;
  color: #e8f5ea; text-align: center;
}
.agar-menu > *:first-child { margin-top: auto; }
.agar-menu > *:last-child { margin-bottom: auto; }
.agar-menu-titre { display: flex; flex-direction: column; gap: 2px; }
.agar-menu-titre strong { font-size: 30px; letter-spacing: 0.5px; }
.agar-menu-titre small { color: #9fbfae; }
.agar-menu-nom input { max-width: 240px; text-align: center; }
.agar-menu-membre { color: #d9a441; font-weight: 700; }
.agar-modes {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 640px;
}
.agar-mode {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 172px; padding: 12px 10px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05); color: inherit;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.agar-mode:hover { background: rgba(255, 255, 255, 0.1); }
/* ⚠️ Le choix se dit par la BORDURE, jamais par l'opacité (règle du dépôt :
   l'opacité sur un élément actionnable ment sur son état). */
.agar-mode.choisi { border-color: #7ac74f; background: rgba(122, 199, 79, 0.14); }
.agar-mode small { color: #9fbfae; font-size: 11.5px; line-height: 1.35; }
.agar-mode-emoji { font-size: 24px; }
.agar-mode-pop { font-size: 11px; color: #d9a441; font-variant-numeric: tabular-nums; }
.agar-jouer { min-width: 180px; font-size: 16px; }
.agar-menu-volets { display: flex; gap: 8px; }
.agar-menu-volet {
  width: min(92%, 460px); padding: 12px 14px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.agar-menu-aide { margin: 0; font-size: 12px; color: #9fbfae; }
.agar-pref { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }

/* 📊 Les statistiques — mêmes pastilles au menu et au panneau de mort. */
.agar-stats-moi, .agar-mort-stats {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.agar-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}
.agar-stat strong { font-size: 17px; color: #d9a441; font-variant-numeric: tabular-nums; }
.agar-stat small { font-size: 10.5px; color: #9fbfae; }
.agar-pantheon-titre { color: #d9a441; }
.agar-pantheon { display: flex; flex-direction: column; gap: 4px; }
.agar-pantheon-ligne {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.agar-mort-boutons { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .agar-mode { width: 138px; }
  .agar-menu-titre strong { font-size: 24px; }
}

/* ⛶ Le bouton plein écran — coin haut-droit, discret mais atteignable. */
.agar-plein {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 26, 20, 0.72); color: #e8f5ea;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.agar-plein:hover { background: rgba(14, 26, 20, 0.9); }
/* ⚠️ En plein écran, la scène EST l'écran : le canvas doit le remplir. */
.agar-scene:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.agar-scene:fullscreen .agar-canvas { width: 100vw; height: 100vh; }

/* ⏸ La pause (Échap) et le bouton quitter du spectateur. */
.agar-pause {
  position: absolute; inset: 0; z-index: 4;
  /* ⚠️ LE MÊME PIÈGE QUE `.agar-menu`, et le remède n'y avait jamais été
     reporté : `justify-content: center` pousse un contenu qui déborde AU-DELÀ
     du bord haut, là où le défilement ne va jamais. Mesuré à 375×812 : 16 px
     rognés, et 93 px de débordement avec la liste de signalement ouverte — le
     bouton « Reprendre » sortait par le HAUT, inatteignable. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 12px; padding: 18px; text-align: center; overflow-y: auto;
  touch-action: pan-y; overscroll-behavior: contain;
  background: rgba(14, 26, 20, 0.82); color: #e8f5ea;
}
/* ⚠️ Préfixées par l'id : `#agario-body > * + * { margin-top: 0 }` écraserait
   ces marges auto — le même contournement que pour le pad. */
#agario-body .agar-pause > *:first-child { margin-top: auto; }
#agario-body .agar-pause > *:last-child { margin-bottom: auto; }
.agar-pause strong { font-size: 24px; }
.agar-quitter { font-size: 18px; }
.agar-regarder { align-self: center; }

/* 🍴 Le fil des mises à mort — sous le HUD, s'efface tout seul. */
.agar-feed {
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
  max-width: 100%;
}
.agar-feed-ligne {
  padding: 3px 9px; border-radius: 8px;
  background: rgba(14, 26, 20, 0.66); color: #e8f5ea;
  font-size: 12px; font-weight: 700;
  /* ⚠️ PAS d'`animation … forwards` ICI. Le garde global « mouvement réduit »
     de style.css impose `animation-duration: 0.01ms !important` à `*` : avec
     `forwards`, la DERNIÈRE image-clé (opacity 0) s'appliquait aussitôt, et le
     fil des mises à mort disparaissait en une demi-seconde — illisible, et
     seulement pour les machines réglées sur « mouvement réduit ». Une
     transition, elle, n'a pas d'état final imposé : réduite, l'effacement
     devient instantané EN FIN DE VIE, ce qui est exactement ce qu'on veut.
     Ce garde couvre les animations de tout le site : c'est au fil de ne pas
     confier une INFORMATION à une animation. */
  opacity: 1; transition: opacity .8s linear;
  /* Une ligne trop longue ne doit pas manger la moitié de l'écran. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agar-feed-ligne.part { opacity: 0; }
/* ⏸ Le bouton pause, sous le plein écran. */
.agar-bouton-pause { top: 50px; }
/* 📱 LES GESTES AU TACTILE — quatre, en bloc, sous le pouce.
 *
 * ⚠️ CHAQUE BOUTON PORTAIT SON PROPRE `right:`. Passer de deux à quatre gestes
 * (demandé : le maintien du W, le full split, le gel) aurait demandé deux
 * nombres de plus, et le mode gaucher quatre autres — huit valeurs à tenir
 * d'accord entre elles. Une GRILLE se retourne d'une seule règle.
 * ⚠️ safe-area : sur un téléphone à encoche/barre, 14px passeraient SOUS la
 * barre système — le bouton serait à moitié inatteignable. */
.agar-tactile-bloc {
  position: absolute; z-index: 3;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: repeat(2, 64px);
  gap: 10px;
  /* ⚠️ Le BLOC ne prend pas les clics — seuls ses boutons. Sans cela, la
     gouttière de 10 px entre eux avalerait un doigt destiné au pilotage. */
  pointer-events: none;
}
/* 🫲 LE MIROIR — demandé : « j'aimerais un paramètre pour qu'ils soient aussi
   à gauche ». Une classe sur la scène, deux propriétés, rien d'autre. Le pad
   directionnel, lui, est déjà ambidextre : il naît sous le pouce. */
.agar-scene.agar-gaucher .agar-tactile-bloc {
  right: auto; left: calc(14px + env(safe-area-inset-left, 0px));
}
.agar-tactile {
  width: 64px; height: 64px; padding: 0;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(14, 26, 20, 0.75); font-size: 28px; line-height: 1;
  color: #e8f5ea;
  cursor: pointer; touch-action: manipulation; pointer-events: auto;
  -webkit-user-select: none; user-select: none;
}
.agar-tactile:active { background: rgba(122, 199, 79, 0.35); }
/* ❄️ UNE BASCULE DIT DANS QUEL SENS ELLE BASCULE. Un bouton de gel muet
   laisserait deviner s'il est pris — et le gel s'annule au doigt suivant. */
.agar-tactile.actif {
  background: rgba(122, 199, 79, 0.55);
  border-color: rgba(232, 245, 234, 0.75);
}
/* ⚡ FERMÉ, PAS CACHÉ. Le full split n'existe pas dans tous les modes : le
   bouton reste, éteint, et le toast dit pourquoi. Un bouton qui disparaît d'un
   mode à l'autre se cherche au lieu de s'apprendre.
   ⚠️ Il garde ses `pointer-events` : c'est en le touchant qu'on obtient
   l'explication. */
.agar-tactile.ferme { opacity: 0.4; border-style: dashed; }
/* 📐 L'ORDRE dans la grille, écrit plutôt que subi. La grille place par ordre
   du DOM ; l'écrire ici rend le placement lisible sans ouvrir le JS, et permet
   de le changer sans toucher au code.
   Rangée basse (sous le pouce, les deux gestes de chaque seconde) : ✂️ 💧
   Rangée haute (les deux gestes de circonstance) : ⚡ ❄️ */
.agar-tactile-full { order: 1; }
.agar-tactile-freeze { order: 2; }
.agar-tactile-split { order: 3; }
.agar-tactile-eject { order: 4; }
/* 🎯 Le fantôme d'une fourniture qu'on fait glisser au doigt : sans lui, on ne
   sait pas qu'on porte quelque chose — et le doigt cache justement la case. */
.agar-sac-fantome {
  position: absolute; z-index: 6; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 24px;
  background: rgba(14, 26, 20, 0.85);
  border: 2px solid rgba(122, 199, 79, 0.8);
}

/* 🕹️ Le pad directionnel flottant — il naît là où le pouce se pose. */
.agar-pad {
  position: absolute; z-index: 3; pointer-events: none;
  width: 116px; height: 116px; margin: -58px 0 0 -58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(14, 26, 20, 0.35);
}
.agar-pad-tige {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(122, 199, 79, 0.55);
  border: 2px solid rgba(232, 245, 234, 0.5);
  transform: translate(-50%, -50%);
}

/* 🫧 Le fond vivant du menu — huit blobs en dérive, CSS pur. */
.agar-menu-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.agar-menu-blob {
  position: absolute; border-radius: 50%;
  opacity: 0.16; filter: blur(1px);
  animation: agar-derive 16s ease-in-out infinite alternate;
}
.agar-menu-blob:nth-child(1) { width: 90px; height: 90px; background: #7ac74f; top: 12%; left: 8%; animation-duration: 14s; }
.agar-menu-blob:nth-child(2) { width: 46px; height: 46px; background: #6ec6d9; top: 68%; left: 15%; animation-duration: 19s; }
.agar-menu-blob:nth-child(3) { width: 130px; height: 130px; background: #d9a441; top: 55%; left: 78%; animation-duration: 23s; }
.agar-menu-blob:nth-child(4) { width: 30px; height: 30px; background: #c77ac7; top: 25%; left: 70%; animation-duration: 11s; }
.agar-menu-blob:nth-child(5) { width: 64px; height: 64px; background: #e07a5f; top: 80%; left: 55%; animation-duration: 17s; }
.agar-menu-blob:nth-child(6) { width: 24px; height: 24px; background: #f2cc8f; top: 8%; left: 45%; animation-duration: 13s; }
.agar-menu-blob:nth-child(7) { width: 78px; height: 78px; background: #94e2d5; top: 40%; left: 3%; animation-duration: 21s; }
.agar-menu-blob:nth-child(8) { width: 40px; height: 40px; background: #f38ba8; top: 15%; left: 88%; animation-duration: 15s; }
@keyframes agar-derive {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(34px, -26px) scale(1.12); }
  to   { transform: translate(-22px, 20px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) { .agar-menu-blob { animation: none; } }
/* Le menu passe DEVANT son fond.
   ⚠️ CETTE règle gagne sur le `position: absolute; inset: 0` du bloc du haut
   (même spécificité, écrite plus bas) : le menu est donc dans le FLUX, sa
   hauteur est celle de son contenu, et son `overflow-y: auto` ne servait à
   RIEN — c'est `.agar-scene { overflow: hidden }` qui rognait le débordement.
   Sur téléphone, les sept modes poussaient « Jouer » hors de l'écran, sans
   aucun moyen d'y accéder (signalé). On borne donc sa hauteur sur la scène :
   son propre défilement redevient effectif. */
.agar-menu { position: relative; z-index: 1; height: 100%; max-height: 100%; }

/* 🏅 Le rang au panneau de mort. */
.agar-mort-rang { color: #ffd76a; font-weight: 800; font-size: 15px; }

/* 🚩 Le volet de signalement dans la pause. */
.agar-signaler {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 440px;
}
.agar-signaler-nom { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* Le retour au menu depuis un refus — jamais de cul-de-sac. */
.agar-message-retour { display: block; margin: 6px auto 0; }

/* ══ 🖥️ LA PLEINE PAGE — « toute sa verticalité et horizontalité, sans
   copyright ni navbar ». La classe vit sur <body>, posée par demarrerAgario
   et retirée par arreterAgario : les autres pages gardent leur habillage.
   Vaut pour les DEUX hôtes (vitrine /agario et espace membres). */
body.agario-plein .topbar,
body.agario-plein .footer,
body.agario-plein .ck-header,
body.agario-plein .section-title,
body.agario-plein .guide-intro,
body.agario-plein .agar-note { display: none; }
body.agario-plein .agar-scene {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  border-radius: 0; z-index: 30;
}
body.agario-plein { overflow: hidden; }

/* ⚠️ LE PAD DÉCALÉ DE +78 px (signalé : « le pad se positionne un peu plus
   bas que là où on touche ») : style.css pose `.page [id$="-body"] > * + *
   { margin-top: 20px }` (spécificité 0,3,0) — dans l'espace membres, elle
   ÉCRASAIT le `margin: -58px` du pad et décalait HUD, boutons et calques de
   20 px. La scène positionne tout en absolu : aucun enfant n'a besoin de ce
   rythme vertical. L'id (1,0,0) gagne sans !important. */
#agario-body > * + * { margin-top: 0; }
.agar-scene > * + * { margin-top: 0; }
/* ⚠️ …et la neutralisation ci-dessus écrase AUSSI le -58px du pad (mesuré :
   l'écart passait de +78 à +58 px). L'id re-déclare son centrage, plus fort
   que tout ce que style.css peut poser. */
#agario-body > .agar-pad, .agar-scene > .agar-pad { margin: -58px 0 0 -58px; }

/* ── 👁 La barre du spectateur ── */
.agar-spec-barre {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 3;
  background: rgba(10, 22, 16, 0.72); border-radius: 999px; padding: 6px 10px;
}
.agar-spec-nom { color: #eaf6ee; font-weight: 700; min-width: 90px; text-align: center; }

/* ── 🛠️ La console admin — cachée, rétractable ── */
.agar-admin-bouton {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(10, 22, 16, 0.55); color: #eaf6ee; font-size: 17px;
  opacity: 0.35; transition: opacity 0.15s;
}
.agar-admin-bouton:hover { opacity: 1; }
.agar-admin {
  position: absolute; left: 10px; bottom: 56px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(10, 22, 16, 0.92); color: #eaf6ee;
  border-radius: 12px; padding: 12px; min-width: 220px; max-height: 60%;
  overflow-y: auto;
}
.agar-admin-liste { display: flex; flex-direction: column; gap: 4px; }
.agar-admin-ligne { display: flex; align-items: center; gap: 6px; }
.agar-admin-nom { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🔎 Le filtre de la console : recherche + interrupteur à bots. */
.agar-admin-filtre { display: flex; align-items: center; gap: 6px; }
/* ⚠️ La classe sert AUSSI de repère au repeint (`querySelector`) pour rendre
   le curseur au champ : sans elle, on ne pourrait taper qu'une lettre. */
.agar-admin-q { flex: 1; min-width: 0; font-size: 12px; padding: 3px 8px; }
.agar-admin-bots {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 13px; user-select: none;
}
.agar-admin-pages {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: #9fbfae;
}
/* ⚠️ Chiffres à CHASSE FIXE : « 9/12 » est plus large que « 1/3 », et les deux
   flèches sautaient d'un cran à chaque changement de page. */
.agar-admin-pageN { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.agar-admin-total { opacity: 0.7; }

/* ── 🖱️ Le menu contextuel (clic droit admin) ── */
.agar-ctx {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 22, 16, 0.95); color: #eaf6ee;
  border-radius: 10px; padding: 10px; min-width: 170px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* ── 🚪 Les retours du menu principal ── */
.agar-menu-retours { display: flex; gap: 10px; margin-top: 6px; }
.agar-menu-retours a { text-decoration: none; }

/* ── 💧 La préférence de vitesse du W ── */
.agar-pref-vitesse input[type="range"] { flex: 1; min-width: 110px; }
.agar-pref-valeur { min-width: 42px; text-align: right; color: var(--text-muted, #9fb4a6); font-size: 13px; }

/* ══ 💬 LE TCHAT EN PARTIE ══════════════════════════════════════════════════
   Rétractable : un bouton en bas à droite, un panneau au-dessus. Il occupe un
   coin, jamais le centre — on joue d'abord. */
/* ⚠️ Le coin bas-droit appartient aux GESTES TACTILES (✂️ et 💧, 64×64 à
   right:14px/92px, bottom:14px). Le bouton 💬 y était posé par-dessus et
   mangeait 27 % du split — mesuré au toucher. Il monte au-dessus d'eux ; sur
   pointeur fin (souris), il reprend sa place basse, le coin étant libre. */
.agar-tchat-bouton {
  /* z-index 5 : à z-index égal, le panneau écrit APRÈS passait par-dessus son
     propre bouton — on cliquait sur le panneau en croyant fermer le tchat. */
  position: absolute; right: 14px; bottom: 88px; z-index: 5;
  width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(10, 22, 16, 0.55); color: #eaf6ee; font-size: 17px;
  opacity: 0.45; transition: opacity 0.15s;
}
.agar-tchat-bouton:hover { opacity: 1; }
.agar-tchat {
  position: absolute; right: 10px; bottom: 134px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  width: min(320px, 42vw); max-height: 46%;
  background: rgba(10, 22, 16, 0.90); color: #eaf6ee;
  border-radius: 12px; padding: 10px;
}
/* 📱 ⚠️ LE TCHAT QUITTE LE COIN DES COMMANDES. Le pavé tactile est passé de
   DEUX boutons (146 px de large, une rangée) à QUATRE en deux rangées : il
   occupe désormais le carré [14, 152] × [14, 152] du coin d'action. Le bouton
   💬, à `right: 14; bottom: 88`, tombait EN PLEIN DEDANS — et son panneau
   (`bottom: 134`) mordait la rangée du haut. On l'envoie dans le coin OPPOSÉ,
   au-dessus de la minicarte (62 px + 10 de marge, donc dégagé à partir de 86),
   et il suit le réglage gaucher comme tout le reste.
   ⚠️ Le bouton de console admin partage ce coin : il se décale de 48 px. */
@media (pointer: coarse) {
  /* ⚠️ Le MÊME `env()` que le pavé : `viewport-fit=cover` est désormais
     déclaré, la garde d'encoche mord pour de bon, et un voisin sans elle
     remonterait tout seul dans le vide laissé. */
  .agar-tchat-bouton {
    right: auto; left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
  /* ⚠️ 158, pas 138 : sous 620 px le panneau prend TOUTE la largeur (règle plus
     bas) et croiserait alors la rangée haute du pavé, qui monte à 152. */
  .agar-tchat {
    right: auto; left: calc(10px + env(safe-area-inset-left, 0px));
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
  .agar-admin-bouton { left: 62px; }
  .agar-admin { left: 62px; }
  .agar-scene.agar-gaucher .agar-tchat-bouton { left: auto; right: 14px; }
  .agar-scene.agar-gaucher .agar-tchat { left: auto; right: 10px; }
}
.agar-tchat-titre { font-size: 13px; opacity: 0.8; }
/* 🖱️ Un pseudo sur lequel le clic droit fait quelque chose le DIT : un menu
   caché derrière un geste qu'aucun indice n'annonce n'existe pas. Le pointillé
   ne coûte rien à la lisibilité et se voit sur toutes les teintes de rôle. */
.agar-tchat-visable {
  cursor: context-menu;
  text-decoration: underline dotted rgba(255, 255, 255, .45);
  text-underline-offset: 2px;
}
.agar-tchat-liste {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; line-height: 1.35; overscroll-behavior: contain;
}
.agar-tchat-ligne { word-break: break-word; }
.agar-tchat-qui { font-weight: 700; margin-right: 6px; color: #9fe0b0; }
/* Le texte d'un joueur : il peut être long, il ne doit jamais déborder. */
.agar-tchat-texte { word-break: break-word; }
/* Une ligne SYSTÈME se lit comme un repère, pas comme une parole. */
.agar-tchat-systeme { color: #9fb4a6; font-style: italic; font-size: 12px; }
.agar-tchat-pied { display: flex; gap: 6px; align-items: center; }
.agar-tchat-champ {
  flex: 1; min-width: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: #eaf6ee; padding: 6px 8px; font-size: 13px;
}
.agar-tchat-note { flex: 1; font-size: 12px; color: #9fb4a6; }
@media (max-width: 620px) {
  /* Sur téléphone le panneau prend toute la largeur utile : un tchat de 42 vw
     ne tiendrait pas trois mots par ligne. */
  .agar-tchat { width: calc(100% - 20px); left: 10px; right: 10px; max-height: 40%; }
}

@media (pointer: fine) {
  /* Souris : pas de boutons tactiles, le coin est libre. */
  .agar-tchat-bouton { bottom: 10px; right: 10px; }
  .agar-tchat { bottom: 56px; }
}

/* ══ 🎗️ LES BANDEAUX D'INFORMATION — manche, réinit, redémarrage ═══════════
   DANS le jeu (demandé), jamais la bande du haut du site : elle est d'ailleurs
   masquée en pleine page, et sans ce relais un joueur n'apprendrait rien. */
.agar-bandeaux {
  /* ⚠️ 52px, pas 10 : la barre du spectateur (.agar-spec-barre) occupe la
     même ancre au pixel près (top:10, left:50%, translateX) et le bandeau la
     recouvrait entièrement — mesuré en mode spectateur sur Battle Royale, où
     les deux s'affichent ensemble. Le bandeau passe DESSOUS. */
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: center;
  pointer-events: none; max-width: 90%;
}
/* Sans barre de spectateur (en partie), le bandeau remonte au ras du HUD. */
.agar-scene:not(:has(.agar-spec-barre)) .agar-bandeaux { top: 40px; }
.agar-bandeau {
  background: rgba(10, 22, 16, 0.78); color: #eaf6ee;
  border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600;
  text-align: center;
}
/* ⚠️ La bande GLOBALE du site n'a rien à faire par-dessus le jeu (demandé) :
   son information est relayée par le bandeau ci-dessus, avec la raison. */
body.agario-plein .restart-bar { display: none !important; }

/* ══ 💀 LA CONFIRMATION DE REDDITION ═══════════════════════════════════════ */
.agar-confirm {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: rgba(6, 14, 10, 0.78); text-align: center; padding: 20px;
}
.agar-confirm strong { color: #eaf6ee; font-size: 20px; }
.agar-confirm-boutons { display: flex; gap: 10px; }

/* ══ 🏆 L'AVIS de bascule en spectateur ════════════════════════════════════ */
.agar-avis {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(10, 22, 16, 0.88); color: #eaf6ee;
  border-radius: 10px; padding: 8px 14px; font-size: 13px; max-width: 90%;
  text-align: center;
}

/* ══ ⌨️ Le remappage des touches, dans le volet des paramètres ═════════════ */
/* ⚠️ PAS `var(--heading)` : cette variable vient de la feuille du SITE, qui la
   pose sombre en thème clair — et les panneaux du jeu sont toujours sombres.
   Le titre se lisait donc gris foncé sur fond noir. La palette du jeu est la
   seule autorité ici (vu à l'écran, capture à l'appui). */
.agar-pref-titre { margin: 10px 0 4px; font-size: 13px; color: #eaf6ee; }
.agar-pref-touche { justify-content: space-between; }
.agar-pref-touche .btn-small { min-width: 68px; font-variant-numeric: tabular-nums; }

/* 👁 LE SPECTATEUR SUR TÉLÉPHONE. Mesuré à 375 px : la barre du spectateur
   recouvrait le HUD à 78 %. On descend ce qui vit en haut à gauche tant
   qu'elle est là — `:has()` est déjà employé plus haut dans ce fichier. */
@media (max-width: 640px) {
  .agar-scene:has(.agar-spec-barre) .agar-bandeaux { top: 86px; }
  /* La barre du spectateur est CENTRÉE : sur un écran étroit elle croise la
     colonne de gauche. On pousse la colonne, pas le fil — c'est elle qui porte
     désormais la position de tout le coin. */
  .agar-scene:has(.agar-spec-barre) .agar-hg { margin-top: 76px; }
}

/* ══ 👥 LES PARTIES ═══════════════════════════════════════════════════════
   En haut-GAUCHE, SOUS le fil d'activité : les autres coins sont pris (console
   admin en bas-gauche, minicarte en bas-centre, tchat et gestes tactiles en
   bas-droite, classement et ⛶/⏸ en haut-droite). z-index 3 : au-dessus du fil,
   SOUS le calque de pause (4) et sous le menu contextuel (5). */
.agar-partie {
  /* ⚠️ Il REDEMANDE les clics : la colonne les laisse passer, et lui porte des
     boutons (accepter, refuser, expulser). */
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 4px;
  /* ⚠️ 210 px déborde la colonne (bornée à 50 % de la scène = 171 px à
     375 px d'écran) : le panneau de groupe passait par-dessus le canvas. */
  min-width: 148px; max-width: min(210px, 100%); padding: 8px 10px;
  border-radius: 10px; background: rgba(14, 26, 20, 0.82);
  border: 1px solid rgba(122, 199, 79, 0.28);
  color: #e8f5ea; font-size: 12px;
}
/* (Le fil descendait ici de 178 px quand le panneau s'affichait : la colonne
   s'en charge maintenant, et sans nombre à tenir à jour.) */
.agar-partie strong { font-size: 12px; }
.agar-partie-nom { font-weight: 700; color: #9fd4a3; }
.agar-partie-actions { display: flex; gap: 6px; margin-top: 2px; }
.agar-partie-ligne { display: flex; align-items: center; gap: 6px; }
.agar-partie-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #5aa9e6; color: #06210f; font-size: 10px; font-weight: 800;
}
/* 💀 Un membre sans vie en cours — il est là, il attend de rejouer. */
.agar-partie-mort { opacity: 0.65; }
.agar-partie-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: #e0554f; font-size: 12px; padding: 0 2px;
}
.agar-partie-jauge {
  height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.agar-partie-barre { height: 100%; width: 100%; background: #7ac74f; }

/* 👥 Les onglets du tchat — « Partie » n'apparaît qu'en partie. */
.agar-tchat-onglets { display: flex; gap: 4px; margin: 2px 0 4px; }
.agar-tchat-onglet {
  border: 0; cursor: pointer; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: #9fbfae;
  font-size: 11px; font-weight: 700;
}
.agar-tchat-onglet.actif { background: rgba(122, 199, 79, 0.22); color: #d9f2df; }

/* 🚪 Un mode qu'on ne peut plus rejoindre : la carte le DIT, sans se cacher —
   le refus vit au serveur, l'écran ne fait que prévenir. */
.agar-mode-ferme { opacity: 0.72; }
.agar-mode-etat {
  display: block; margin-top: 3px; font-size: 10px; font-weight: 700;
  color: #f0b232; letter-spacing: .01em;
}

/* ══ 💰 L'ÉCONOMIE — boutique, quêtes, amis, et la barre de fournitures ══════ */
/* ⚠️ Le volet de menu est déjà défilable et borné : on n'y ajoute aucune
   hauteur fixe, sinon la boutique déborderait sur téléphone. */
.agar-eco-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; padding: .5rem .7rem; margin-bottom: .5rem;
  background: rgba(243, 195, 58, .1);
  border: 1px solid rgba(243, 195, 58, .35); border-radius: 10px;
}
.agar-eco-solde { font-size: 1.15rem; color: #f3c33a; }
.agar-eco-onglets { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.agar-eco-onglet {
  flex: 1 1 auto; padding: .35rem .5rem; font-size: .8rem; cursor: pointer;
  color: #cfe3d6; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
}
.agar-eco-onglet.actif { color: #0e1a14; background: #7ac74f; border-color: #7ac74f; }
.agar-eco-corps { display: flex; flex-direction: column; gap: .35rem; }
.agar-eco-carte, .agar-eco-quete, .agar-eco-ami {
  display: grid; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
}
.agar-eco-carte { grid-template-columns: 1.8rem 1fr auto auto; }
.agar-eco-carte .agar-eco-info { grid-column: 2 / 4; font-size: .72rem; opacity: .7; }
.agar-eco-quete { grid-template-columns: 1fr auto; }
.agar-eco-ami { grid-template-columns: 1fr auto; }
/* ⚠️ Un article FERMÉ est montré FERMÉ, pas caché — mais il ne doit pas se
   lire comme un article ordinaire : on le grise, sans jamais le faire
   disparaître. « Montrer et ouvrir doivent s'accorder » vaut dans les deux sens. */
.agar-eco-carte.ferme { opacity: .55; border-style: dashed; }
.agar-eco-emoji { font-size: 1.3rem; text-align: center; }
.agar-eco-nom { font-size: .85rem; }
.agar-eco-prix { font-size: .8rem; color: #f3c33a; white-space: nowrap; }
.agar-eco-quete.soldee { opacity: .6; }
.agar-eco-jauge {
  grid-column: 1 / -1; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
/* ⚠️ Une LARGEUR, pas une animation : une information confiée à une animation
   disparaît chez qui a coupé les animations (`prefers-reduced-motion` applique
   la dernière image-clé aussitôt). */
.agar-eco-jauge-plein { height: 100%; background: #7ac74f; }
.agar-pref-raz { display: block; width: 100%; margin: .6rem 0 .2rem; }

/* 🧪 LA BARRE DE FOURNITURES — bord GAUCHE, à mi-hauteur : tous les autres
   coins sont pris (fil et partie en haut-gauche, classement et ⛶/⏸ en
   haut-droite, console admin en bas-gauche, minicarte en bas-centre, tchat et
   pad tactile en bas-droite). */
/* ⚠️ AU BORD DROIT, plus à gauche. Signalé, capture à l'appui : « la monnaie
   s'affiche au-dessus de la console admin ». La console vit en bas-gauche et
   monte haut quand elle liste les joueurs ; le sac, ancré à mi-hauteur à
   gauche, tombait dedans. Le bord DROIT à mi-hauteur est le seul ancrage que
   rien n'occupe — entre le bas du classement (~190 px) et le haut du panneau
   de tchat (bottom 134). */
/* ⚠️ z-index 3, PLUS 6. À 6 la barre flottait AU-DESSUS de l'écran de mort
   (z 5) et de la pause (z 4) : trois cases visibles et cliquables par-dessus le
   voile, à côté de « Rejouer » — et `agUtiliserFourniture` sort aussitôt sur
   `!ag.vivant`. Des commandes vivantes qui ne font rien, exactement le défaut
   que le commentaire de `.agar-mort` dit avoir corrigé pour le pad tactile.
   z 3 est le niveau des autres commandes de jeu : la mort et la pause la
   couvrent de droit. */
.agar-sac {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: .3rem;
  padding: .35rem; border-radius: 12px;
  background: rgba(14, 26, 20, .72); border: 1px solid rgba(255, 255, 255, .12);
  pointer-events: auto;
}
/* ⚠️ Sac vide, barre ABSENTE. Elle restait montée parce qu'elle portait le
   solde ; le solde est parti en haut à gauche, et un cadre vide au bord de
   l'arène est du décor qui ment. */
.agar-sac.vide { display: none; }
.agar-sac-item {
  position: relative; width: 38px; height: 38px; font-size: 1.2rem; cursor: pointer;
  color: inherit; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
}
.agar-sac-item:hover { background: rgba(255, 255, 255, .14); }
/* 🎯 Une case DÉPOSABLE le dit : un geste caché derrière rien n'existe pas.
   Le curseur de saisie suffit — un liseré de plus sur une case de 38 px la
   rendrait illisible. */
.agar-sac-item.posable { cursor: grab; }
.agar-sac-item.posable:active { cursor: grabbing; }
.agar-sac-n {
  position: absolute; right: 1px; bottom: 0; font-size: .62rem;
  padding: 0 3px; border-radius: 6px;
  color: #0e1a14; background: #7ac74f;
}
/* 🫲 …et la barre de fournitures suit les commandes : c'est une barre de
   GESTES (une case s'utilise d'un doigt), donc elle appartient au côté qui
   agit. Le reste de l'écran — classement, tchat, amis — est de l'INFORMATION
   et ne bouge pas : retourner tout l'écran demanderait de retourner aussi le
   classement, qui est peint sur le canvas et qu'aucun sélecteur ne voit. */
.agar-scene.agar-gaucher .agar-sac { right: auto; left: 8px; }
.agar-scene.agar-gaucher .agar-sac-n { right: auto; left: 1px; }
@media (max-width: 560px) {
  /* Sur téléphone la barre se serre : le pouce gauche n'a pas 38 px à perdre. */
  .agar-sac-item { width: 32px; height: 32px; font-size: 1rem; }
}
/* ⚠️ …MAIS PAS AU DOIGT. 32 px est la plus petite cible du jeu, sous les 44 px
   recommandés au toucher — et c'est une case qui CONSOMME une fourniture
   payée. On rend la taille et on reprend la place sur l'écart. */
@media (pointer: coarse) {
  .agar-sac { gap: .15rem; padding: .25rem; }
  .agar-sac-item { width: 44px; height: 44px; font-size: 1.25rem; }
  /* ⚠️ ELLE QUITTE LE MILIEU DU BORD. La barre suit désormais le côté des
     commandes — donc elle vit sur LE MÊME BORD que le pavé, qui est passé de
     deux boutons (~92 px) à quatre (152 px du bas, 173 avec l'encoche).
     Centrée verticalement, elle descendait dans cette bande : mesuré sur un
     téléphone en PAYSAGE (scène ~390 px), trois cases centrées descendent à
     145 px du bas — 28 px sous le pavé, sur toute sa largeur.
     On l'ancre donc JUSTE AU-DESSUS du pavé, et on la borne : au-delà, elle
     défile plutôt que de recouvrir le HUD. */
  .agar-sac {
    top: auto; transform: none;
    bottom: calc(170px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100% - 240px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
/* 🧪💬 LE TCHAT PLEINE LARGEUR CACHE LA BARRE. Sous 620 px le panneau prend
   toute la largeur et monte à 40 % de hauteur : il passe DEVANT la barre
   centrée verticalement (z 4 contre z 3), et ses cases redeviennent
   inatteignables. Le remède existait déjà — pour le panneau d'AMIS (voir
   `.agar-scene:has(.agar-amis…)`) — et n'avait jamais été étendu au tchat,
   qui est pourtant bien plus large sur téléphone. */
@media (max-width: 620px) {
  .agar-scene:has(.agar-tchat:not([hidden])) .agar-sac { display: none; }
}

/* ══ 🪙 LA BOURSE — en haut à GAUCHE, sous le HUD ═════════════════════════════
   Demandé : « affiche juste les bonus et pas les pépites, tu les mettras en
   haut à gauche ». Elle ne vit PAS dans le HUD : `agHud()` réécrit son
   `textContent` à chaque image et effacerait tout ce qu'on y glisserait. */
.agar-bourse {
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px 9px; border-radius: 8px;
  background: rgba(14, 26, 20, .72);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
  /* ⚠️ `nowrap` SANS coupure débordait la colonne (bornée à 50 % de la scène) :
     « ⭐ Niveau 27 · 128 400 / 150 000 » sortait par la droite, par-dessus le
     canvas. Le HUD voisin porte la même paire depuis toujours. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.agar-bourse-sou { color: #f3c33a; }
/* ⭐ LE NIVEAU — demandé au HUD. Le chiffre ET la jauge : un niveau sans
   progression ne dit pas où l'on en est, et c'est ce qu'un niveau doit montrer. */
.agar-niveau { color: #9fd4a3; font-size: 11px; }
.agar-niveau-jauge {
  width: 132px; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
/* ⚠️ Une LARGEUR, jamais une animation : le garde global « mouvement réduit »
   impose `animation-duration: 0.01ms` à tout le site, et la jauge sauterait à
   plein — une information confiée à une animation est une information perdue. */
.agar-niveau-plein { height: 100%; background: #7ac74f; }
/* (Trois règles de décalage vivaient ici. Elles compensaient à la main une
   hauteur variable — et se trompaient de 7 px dès que la bourse a gagné sa
   ligne de niveau. La colonne les remplace toutes.) */

/* ══ 👥 LES AMIS EN JEU — bouton en haut à droite, À GAUCHE du classement ═════
   ⚠️ Le classement est PEINT SUR LE CANVAS : aucun `:has` ne le voit, il faut
   reproduire sa géométrie. En régime LARGE son bord gauche tombe à 208 px du
   bord droit (large 150 + marge 10 + gouttière 48) — le bouton se pose à 216.
   En régime COMPACT il descend à `top: 92px` et libère tout le haut : le bouton
   remonte se ranger à côté de ⛶.
   ⚠️ LE SEUIL EST CHOISI POUR NE JAMAIS SE TROMPER DU BON CÔTÉ. Le canvas
   bascule en compact sous 560 px de scène ; à 560 px de FENÊTRE la scène est
   forcément plus étroite, donc le canvas est certainement compact. Entre les
   deux, la règle large s'applique à un classement compact : le bouton est à
   216, le classement à 118 — ils ne se touchent pas. L'inverse aurait recouvert. */
.agar-amis-bouton {
  position: absolute; top: 10px; right: 216px; z-index: 5;
  width: 34px; height: 34px; padding: 0;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 26, 20, 0.72); color: #e8f5ea;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.agar-amis-bouton:hover { background: rgba(14, 26, 20, 0.92); }
.agar-amis {
  position: absolute; top: 52px; right: 12px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  width: min(280px, 62vw); max-height: 56%; overflow-y: auto;
  /* ⚠️ OPAQUE. Vu à l'écran : à 92 %, le classement — peint sur le CANVAS, donc
     forcément dessous — se lisait à travers le panneau, et les deux textes se
     superposaient. « Deux calques du même niveau se liraient l'un à travers
     l'autre » : la règle vaut aussi quand l'un des deux est peint. */
  background: #0a1610; color: #eaf6ee;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 10px;
}
/* ⚠️ LES DEUX SONT EXCLUSIFS, pas superposés. Mesuré : sur une scène de 760 px,
   avec deux fournitures et trois amis, la barre (bord droit, mi-hauteur) et le
   panneau (bord droit, 56 % de haut) se croisent sur ~77 px de hauteur — et
   c'est la colonne de BOUTONS du panneau qui passe dessous. On clique « Retirer »
   et c'est une fourniture qui part. Le `:has` est déjà employé six fois ici. */
.agar-scene:has(.agar-amis:not([hidden])) .agar-sac { display: none; }
.agar-amis-corps { display: flex; flex-direction: column; gap: 4px; }

/* ══ 💀 L'ÉDITEUR DE CARTE MORTELLE ══════════════════════════════════════════ */
.agar-mortel { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.agar-mortel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.agar-mortel-fichier { font-size: 12px; color: #cfe6d3; }
/* ⚠️ L'aperçu est BORNÉ : c'est un fichier fourni par un membre, et un GIF de
   3 000 px de haut ferait sortir les boutons de l'écran des réglages. */
/* ⚠️ RENOMMÉE. Elle s'appelait `.agar-mortel-apercu`, comme l'aperçu de la file
   de MODÉRATION défini dans style.css — même nom, même spécificité, et
   dashboard.html charge agario.css APRÈS style.css : celle-ci gagnait, et la
   borne de 240 px que le commentaire de style.css annonce fièrement ne
   s'appliquait JAMAIS sur la seule page où elle devait servir. L'aperçu y
   prenait toute la largeur, sur une plaque sombre au bord blanc invisible en
   thème clair.
   Un nom partagé entre deux écrans est un nom qui ment à l'un des deux. */
.agar-mortel-apercu-jeu {
  max-width: 100%; max-height: 140px; width: auto; height: auto;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .35); align-self: flex-start;
}
/* L'état, avec sa couleur — et le mot à côté : la couleur seule ne dit rien à
   qui ne la distingue pas, c'est la règle qu'on vient d'appliquer à Corolle. */
.agar-mortel-etat { margin: 0; font-size: 12px; font-weight: 700; }
.agar-mortel-etat.attente { color: #f3c33a; }
.agar-mortel-etat.valide { color: #7ac74f; }
.agar-mortel-etat.refuse { color: #ff7b6e; }
@media (max-width: 560px) {
  .agar-amis-bouton { right: 54px; }
  .agar-amis { width: min(260px, 76vw); }
}

/* ══ 🧭 LE MENU EN SECTIONS — au démarrage ET en partie ══════════════════════ */
.agar-menu-onglets {
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  width: 100%; max-width: 560px;
}
.agar-menu-onglet {
  flex: 1 1 auto; padding: .4rem .5rem; font-size: .82rem; cursor: pointer;
  color: #cfe3d6; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px;
}
/* ⚠️ La section active se dit par la COULEUR et la BORDURE, jamais par une
   opacité : l'opacité ne dit « indisponible », pas « choisi ». */
.agar-menu-onglet.actif { color: #0e1a14; background: #7ac74f; border-color: #7ac74f; }
.agar-menu-corps {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 100%; max-width: 560px;
}
.agar-menu-corps > .agar-eco-carte,
.agar-menu-corps > .agar-eco-quete,
.agar-menu-corps > .agar-eco-ami,
.agar-menu-corps > .agar-eco-tete,
.agar-menu-corps > .agar-pantheon { width: 100%; }

/* ☰ Le bouton du menu en partie — haut-droite, sous ⛶ et ⏸. */
.agar-bouton-menu { top: 90px; }

/* 🧭 LE MENU EN PARTIE. ⚠️ z-index 4, le niveau de la PAUSE — jamais au-dessus
   de l'écran de mort (5) : mourir doit fermer ce qui traîne, pas se cacher
   derrière. Et défilable par le HAUT comme la pause : avec `center`, un
   contenu qui déborde part au-delà du bord haut, là où le défilement ne va
   jamais (mesuré : « Reprendre » injoignable à 375×812). */
/* 💬👥 ⚠️ DEUX BOUTONS FLOTTAIENT AU-DESSUS DU MENU EN PARTIE. Ils sont à z 5,
   le calque du menu à z 4 : ils restaient visibles et cliquables par-dessus un
   écran quasi opaque — et le panneau qu'ils ouvrent, lui, est à z 4 comme le
   calque, donc il se peignait DESSOUS, invisible. Sur téléphone c'est le pire
   cas : ces deux boutons sont pile où le pouce se pose, et le menu en partie
   s'ouvre en permanence. Le z-index dit qui passe devant, jamais qui doit se
   fermer : on le dit ici. */
.agar-scene:has(.agar-jeumenu) .agar-tchat-bouton,
.agar-scene:has(.agar-jeumenu) .agar-amis-bouton,
.agar-scene:has(.agar-jeumenu) .agar-tactile-bloc,
.agar-scene:has(.agar-pause) .agar-tactile-bloc { display: none; }
.agar-jeumenu {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: .5rem;
  padding: 12px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  text-align: center; color: #e8f5ea; background: rgba(14, 26, 20, .92);
}
#agario-body .agar-jeumenu > *:first-child { margin-top: auto; }
#agario-body .agar-jeumenu > *:last-child { margin-bottom: auto; }
.agar-jeumenu-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; width: 100%; max-width: 560px;
}

/* 📊 Le panneau d'un joueur dans l'administration. */
.agar-adm-panneau {
  display: flex; flex-direction: column; gap: .4rem;
  margin: .2rem 0 .6rem; padding: .6rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
}

/* ══ ⚙️ LES RÉGLAGES — en CARTES, jamais une liste qui prend la page ═════════ */
/* ⚠️ Signalé : vingt cases à la suite forment un mur — on ne trouve pas, et on
   ne voit pas qu'il y en a d'autres plus bas. Une grille qui se replie sur une
   colonne en dessous de 480 px : sur téléphone, deux colonnes seraient pires
   que la liste. */
.agar-prefs-grille {
  display: grid; gap: .5rem; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.agar-prefs-carte {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .55rem .7rem; text-align: left;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
}
.agar-prefs-carte .agar-pref-titre { margin: 0 0 .2rem; }
/* Une case désactivée (l'Astre sans passe) se dit par l'opacité — ici c'est
   légitime : elle dit « fermé », pas « non choisi ». */
.agar-prefs-carte input:disabled + span { opacity: .55; }

/* ══ 💰 LA BOUTIQUE — une grille de cartes ══════════════════════════════════ */
.agar-boutique-grille {
  display: grid; gap: .5rem; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.agar-boutique-carte {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .7rem .5rem; text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
}
/* ⚠️ L'article PORTÉ se dit par la BORDURE, comme le mode choisi — jamais par
   une opacité : l'opacité dit « indisponible », pas « choisi ». */
.agar-boutique-carte.porte { border-color: #7ac74f; background: rgba(122, 199, 79, .1); }
/* …et l'article FERMÉ, lui, a bien le droit à l'opacité : il DIT fermé. */
.agar-boutique-carte.ferme { opacity: .55; border-style: dashed; }
.agar-boutique-emoji { font-size: 2rem; line-height: 1.1; }
.agar-boutique-nom { font-size: .82rem; }
.agar-boutique-etat { font-size: .7rem; opacity: .72; min-height: 1.6em; }
.agar-boutique-b { width: 100%; margin-top: .1rem; }
@media (max-width: 480px) {
  .agar-prefs-grille { grid-template-columns: 1fr; }
  .agar-boutique-grille { grid-template-columns: repeat(2, 1fr); }
  .agar-boutique-emoji { font-size: 1.6rem; }
}

/* 📍 Un bouton de console ARMÉ (le prochain clic pose l'objet). ⚠️ La bordure
   et le fond, jamais l'opacité : « armé » est un ÉTAT CHOISI, pas une
   indisponibilité — et c'est la règle du dossier depuis le choix d'un mode. */
.agar-admin .arme {
  border-color: #f3c33a; background: rgba(243, 195, 58, .22); color: #f3c33a;
}


/* ══ 📱 LES SURCHARGES DU DOIGT — À LA FIN, ET C'EST VOULU ═══════════════════
 *
 * ⚠️ Une surcharge écrite AVANT sa règle de base ne gagne que par sa
 * spécificité — et elle déplace surtout la PREMIÈRE occurrence du sélecteur
 * dans le fichier. Deux essais du banc lisent la géométrie en découpant le
 * texte autour du premier `.agar-amis-bouton {` / `.agar-admin {` (le
 * classement et la minicarte sont peints sur le canvas : aucun sélecteur ne
 * les voit, il faut reproduire leurs nombres). Placées plus haut, ces règles
 * leur faisaient lire la surcharge à la place de la base. La cascade et la
 * lisibilité veulent la même chose : les surcharges à la fin.
 */

/* 📱 ⚠️ `viewport-fit=cover` S'APPLIQUE AU DOCUMENT, PAS À LA SCÈNE. En le
   déclarant, la PAGE entière s'étend sous l'encoche et sous les barres
   système : le contenu hors-jeu (barre du site, menu d'avant-partie) pouvait
   passer dessous en paysage. La scène, elle, porte ses propres gardes.
   ⚠️ Rien ne se produit ailleurs : sans `viewport-fit=cover`, `env()` vaut zéro
   — et cette feuille est aussi chargée par le tableau de bord, qui ne le
   déclare pas.
   ⚠️ …et en PLEIN JEU, aucune marge : la scène EST l'écran, et ses commandes
   tiennent déjà compte de l'encoche une par une. */
@media (pointer: coarse) {
  body:not(.agario-plein) {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ⚠️ 34 px, C'EST SOUS LA CIBLE TACTILE MINIMALE (44 px), et ces boutons sont
   la porte du plein écran, de la pause et du menu. Ils sont empilés avec 6 px
   d'écart : la place existe. On monte à 40 px de côté — 10→50, 52→92, 94→134 —
   et `AG_PILE_HD_BAS` (142) tient ce compte côté canvas pour que le classement
   ne passe pas dessous. Les deux nombres doivent bouger ENSEMBLE. */
@media (pointer: coarse) {
  .agar-plein { width: 40px; height: 40px; font-size: 19px; }
  .agar-bouton-pause { top: 52px; }
  .agar-bouton-menu { top: 94px; }
  .agar-amis-bouton { width: 40px; height: 40px; font-size: 19px; }
  .agar-tchat-bouton { width: 44px; height: 44px; font-size: 20px; }
  /* 🗺️ La minicarte descend dans le coin opposé aux commandes (le seul que le
     pouce ne visite pas). Elle fait 62 px + 10 de marge : la console remonte
     au-dessus, sinon elle se pose dessus — et elle est à z 4, donc elle
     gagnerait. */
  .agar-admin-bouton { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .agar-admin { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  /* 🫲 Commandes à gauche ⇒ console à droite : deux surfaces d'ACTION ne se
     superposent pas.
     ⚠️ 62, PAS 10 : c'est le MIROIR EXACT du `left: 62px` non-gaucher, qui
     décale la console de 48 px pour dégager le bouton de tchat. Cette règle
     était écrite DEUX fois, à 62 puis à 10 ; à spécificité égale la dernière
     gagnait, et les deux boutons se recouvraient sur 34 de leurs 38 px. */
  .agar-scene.agar-gaucher .agar-admin-bouton { left: auto; right: 62px; }
  .agar-scene.agar-gaucher .agar-admin { left: auto; right: 62px; }
}