/* ⬤ 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;
}
.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;
}
.agar-hud {
  position: absolute; top: 10px; left: 12px;
  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;
  /* ⚠️ Le HUD 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. */
  max-width: calc(50% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.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;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  background: rgba(14, 26, 20, 0.78);
  color: #e8f5ea;
}
.agar-mort strong { font-size: 26px; }
.agar-mort p { margin: 0; color: #d9a441; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ 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 {
  position: absolute; top: 46px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
  /* Le fil ne déborde jamais sur le classement (peint à droite du canvas). */
  max-width: calc(50% - 24px);
}
.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 — gros, aux coins bas, loin du pouce de visée. */
.agar-tactile {
  position: absolute; z-index: 3;
  /* ⚠️ safe-area : sur un téléphone à encoche/barre, 14px passeraient SOUS la
     barre système — le bouton serait à moitié inatteignable. */
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  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;
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.agar-tactile:active { background: rgba(122, 199, 79, 0.35); }
/* À DROITE : le pad directionnel vit à gauche, sous l'autre pouce. */
.agar-tactile-split { right: calc(14px + env(safe-area-inset-right, 0px)); }
.agar-tactile-eject { right: calc(92px + env(safe-area-inset-right, 0px)); }

/* 🕹️ 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 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;
}
.agar-tchat-titre { font-size: 13px; opacity: 0.8; }
.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 ═════════════ */
.agar-pref-titre { margin: 10px 0 4px; font-size: 13px; color: var(--heading, #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; }
  .agar-scene:has(.agar-spec-barre) .agar-feed { top: 122px; }
}

/* ══ 👥 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 {
  position: absolute; top: 46px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 148px; max-width: 210px; 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;
}
/* ⚠️ Quand le panneau est là, le fil d'activité descend : sans cela ils se
   recouvrent, et c'est exactement le défaut qu'on vient de corriger ailleurs. */
.agar-scene:has(.agar-partie:not([hidden])) .agar-feed { top: 178px; }
.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;
}
.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; }