/* =====================================================================
   Boxing Club Energie — habillage du ring virtuel
   ---------------------------------------------------------------------
   POURQUOI UNE FEUILLE A PART, ET PAS DANS style-UbZ9rsb7.css
   -----------------------------------------------------------
   Le style principal porte une empreinte calculee par Vite. Or ce depot
   ne peut plus etre reconstruit : dist\ a diverge des sources, et une
   reconstruction ecraserait des pages en production. Toute regle ajoutee
   la-bas doit donc etre recopiee a la main dans deux fichiers, avec le
   risque de n'en corriger qu'un.

   Le dossier css\ existe deja pour ce cas (documents.css, planning.css) :
   une page, une feuille, chargee par un simple <link>. C'est le meme
   choix que pour les scripts /js/*.js.

   Les couleurs ne sont pas reinventees : elles reprennent les variables
   du site (--accent-red, --bg-dark, --font-heading). Le jeu doit avoir
   l'air d'appartenir au club, pas d'un module colle par-dessus.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. Ossature de la page                                             */
/* ------------------------------------------------------------------ */

.jeu-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.jeu-entete {
  text-align: center;
  margin-bottom: 28px;
}

.jeu-entete h1 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.jeu-entete h1 span {
  color: var(--accent-red, #ff3333);
}

.jeu-entete p {
  color: var(--text-muted, #b0b0b0);
  margin: 10px auto 0;
  max-width: 620px;
  font-size: 0.98rem;
  line-height: 1.6;
}

/*  Deux colonnes : le ring et la colonne d'options demandee par le club.
    minmax(0, ...) et non 1fr seul : sans le minimum a zero, une grille
    CSS refuse de descendre sous la largeur naturelle de son contenu, et
    le canevas deborderait de l'ecran sur les petites tablettes. */
.jeu-grille {
  display: grid;
/*  384 et non 320 : sous 320 px la carte du vestiaire n'offrait que 286 px
    utiles, soit une seule colonne d'articles au lieu de deux, et la liste
    tombait a plus de 2000 px de haut a cote d'un ring de 500 px. */
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 22px;
  align-items: start;
}

/* ------------------------------------------------------------------ */
/*  2. Le ring                                                         */
/* ------------------------------------------------------------------ */

.jeu-scene {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/*  Le rapport 900x520 du moteur est fige dans le decor : le tapis, les
    cordes et les bords du ring sont dessines a ces coordonnees. On
    reserve donc la place AVANT que le canevas ne soit dimensionne,
    sinon la page sursaute au chargement. */
.jeu-scene::before {
  content: '';
  display: block;
  padding-top: 57.78%;
}

.jeu-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /*  Empeche le navigateur mobile de prendre un appui sur le ring pour
      un debut de defilement ou un double-appui de zoom : sans cela, un
      enchainement rapide de coups fait sauter la page. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------------ */
/*  3. Bandeau de combat (HUD)                                         */
/* ------------------------------------------------------------------ */

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  pointer-events: none;
  z-index: 3;
}

.hud-camp {
  min-width: 0;
}

.hud-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: clamp(0.7rem, 1.7vw, 0.92rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.hud-camp.droite .hud-nom {
  justify-content: flex-end;
}

.hud-rang {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/*  Trois jauges empilees. La hauteur decroit du haut vers le bas parce
    que l'oeil doit trouver les points de vie en premier : c'est la seule
    barre qui decide de l'issue du combat. */
.jauge {
  height: 13px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  margin-bottom: 4px;
}

.jauge.mince {
  height: 7px;
}

.jauge > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  transform-origin: left center;
  transition: transform 0.18s ease-out, background-color 0.3s ease;
}

.hud-camp.droite .jauge > i {
  transform-origin: right center;
}

.jauge.pv > i { background: linear-gradient(90deg, #16a34a, #4ade80); }
.jauge.pv.bas > i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.jauge.energie > i { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.jauge.endurance > i { background: linear-gradient(90deg, #a16207, #facc15); }

/*  Jauge de coup special : elle clignote une fois pleine, sinon les
    joueurs ne remarquent pas qu'ils ont une arme disponible. */
.jauge.special > i { background: linear-gradient(90deg, #7c3aed, #c084fc); }
.jauge.special.prete {
  border-color: #c084fc;
  animation: jeu-pulse 1.1s ease-in-out infinite;
}

@keyframes jeu-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 132, 252, 0); }
}

.hud-centre {
  text-align: center;
  padding: 0 6px;
}

.hud-chrono {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.hud-chrono.urgence {
  color: #ff5555;
  animation: jeu-battement 0.85s ease-in-out infinite;
}

@keyframes jeu-battement {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.hud-round {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: #cbd5e1;
  text-transform: uppercase;
  margin-top: 2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------------------ */
/*  4. Ecrans superposes (menu, fin de combat, recherche)              */
/* ------------------------------------------------------------------ */

.jeu-voile {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  /*  « safe » et non un simple center : quand le contenu depasse malgre tout,
      un centrage classique le fait deborder des DEUX cotes, et la partie
      sortie par le haut devient inatteignable meme en faisant defiler. Le
      titre serait alors perdu pour de bon. */
  align-items: safe center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: rgba(6, 9, 15, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: jeu-apparition 0.32s ease both;
  overflow-y: auto;
}

.jeu-voile[hidden] {
  display: none;
}

@keyframes jeu-apparition {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.jeu-voile h2 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  margin: 0 0 8px;
  line-height: 1.1;
}

.jeu-voile h2.victoire { color: #4ade80; }
.jeu-voile h2.defaite  { color: #ff5555; }

.jeu-voile p {
  color: #cbd5e1;
  margin: 0 auto 16px;
  max-width: 440px;
  font-size: 0.94rem;
  line-height: 1.6;
}

/*  Le bilan de fin de combat : ce que le joueur a gagne. Les chiffres
    sont gros parce que c'est la recompense, c'est ce qu'on vient voir. */
.jeu-bilan {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.jeu-bilan div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 86px;
}

.jeu-bilan strong {
  display: block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
}

.jeu-bilan span {
  font-size: 0.66rem;
  color: var(--text-muted, #b0b0b0);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jeu-bilan .gain-xp strong     { color: #38bdf8; }
.jeu-bilan .gain-pieces strong { color: #facc15; }

/*  Message de plafond. Il doit etre lisible sans etre alarmant : le
    joueur n'a rien fait de mal, il a simplement beaucoup joue. */
.jeu-note {
  font-size: 0.8rem;
  color: #ffd479;
  background: rgba(255, 180, 0, 0.09);
  border: 1px solid rgba(224, 168, 0, 0.34);
  border-radius: 8px;
  padding: 9px 13px;
  margin: 0 auto 16px;
  max-width: 430px;
  line-height: 1.5;
}

.jeu-note.info {
  color: #9fd6ff;
  background: rgba(0, 102, 238, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
}

/*  Cercle d'attente de la recherche d'adversaire. */
.jeu-sablier {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent-red, #ff3333);
  border-radius: 50%;
  animation: jeu-tourne 0.9s linear infinite;
}

@keyframes jeu-tourne {
  to { transform: rotate(360deg); }
}

.jeu-monte-niveau {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  color: #facc15;
  font-size: 1.05rem;
  margin-bottom: 12px;
  animation: jeu-battement 1.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/*  4 bis. Parcours Solo                                               */
/* ------------------------------------------------------------------ */

/*  L'ecran de depart ne propose plus une grille d'adversaires mais un
    seul boxeur, celui dont c'est le tour. Ces regles doivent donc tenir
    dans la meme boite que l'ancienne grille, sur un telephone comme sur
    un ecran large : tout est en largeur relative, rien n'est fixe. */
.jeu-parcours-position {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 10px;
}

.jeu-parcours-position strong { color: #facc15; }

/*  Jauge de progression. Elle porte le meme role qu'un « 7 / 20 » ecrit
    en toutes lettres, mais se lit d'un coup d'oeil. Le texte reste
    present dans l'attribut aria-label : la barre seule ne dit rien a un
    lecteur d'ecran. */
.jeu-parcours-jauge {
  height: 8px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto 16px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  overflow: hidden;
}

.jeu-parcours-jauge span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-red, #ff3333), #facc15);
  border-radius: 999px;
  transition: width 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .jeu-parcours-jauge span { transition: none; }
}

.jeu-parcours-fiche {
  max-width: 430px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.jeu-parcours-nom {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
  /*  Un nom long ne doit pas elargir la boite ni deborder du cadre sur un
      petit ecran : il se coupe proprement. */
  overflow-wrap: anywhere;
}

.jeu-parcours-surnom {
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: italic;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.jeu-parcours-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
}

.jeu-parcours-stats span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
  white-space: nowrap;
}

/*  Quatre paliers de difficulte, quatre couleurs. Le mot reste ecrit :
    la couleur seule exclurait les joueurs daltoniens. */
.jeu-parcours-stats .jeu-parcours-facile {
  background: rgba(34, 197, 94, 0.16); color: #86efac;
}
.jeu-parcours-stats .jeu-parcours-moyen {
  background: rgba(250, 204, 21, 0.16); color: #fde047;
}
.jeu-parcours-stats .jeu-parcours-difficile {
  background: rgba(249, 115, 22, 0.18); color: #fdba74;
}
.jeu-parcours-stats .jeu-parcours-champion {
  background: rgba(239, 68, 68, 0.2); color: #fca5a5;
}

.jeu-parcours-note {
  font-size: 0.8rem;
  color: #94a3b8;
  max-width: 430px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

/*  Rappel du mode en cours, juste sous le titre du vestiaire. Il tient en
    une ligne parce qu'il ne doit pas voler la vedette au prochain
    adversaire : c'est un reperage, pas une annonce. */
.jeu-parcours-mode {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 4px;
}

.jeu-parcours-mode strong { color: #facc15; }

/* ------------------------------------------------------------------ */
/*  4 bis. Choix de la difficulte                                      */
/* ------------------------------------------------------------------ */

/*  Trois cartes, une par mode. Elles sont empilees par defaut et
    passent en ligne des qu'il y a la place : sur un telephone, trois
    colonnes rendraient le texte de chaque mode illisible, et c'est
    precisement ce texte qui previent qu'un mode est trop dur.

    Ce sont de VRAIS <button> et pas des <div> cliquables : au clavier
    comme au lecteur d'ecran, choisir sa difficulte doit se faire sans
    souris. */
.jeu-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 430px;
  margin: 0 auto 16px;
  text-align: left;
}

@media (min-width: 760px) {
  .jeu-modes {
    flex-direction: row;
    align-items: stretch;
    max-width: 760px;
  }
  .jeu-mode { flex: 1 1 0; }
}

.jeu-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.jeu-mode:hover,
.jeu-mode:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(250, 204, 21, 0.5);
}

/*  Le mode retenu se distingue par la bordure ET par la mention ecrite
    plus bas : la couleur seule ne dirait rien a un joueur daltonien. */
.jeu-mode.choisi {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .jeu-mode { transition: none; }
}

.jeu-mode-nom {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
}

.jeu-mode-niveaux {
  font-size: 0.78rem;
  color: #facc15;
  font-weight: 700;
}

.jeu-mode-texte {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.jeu-mode-avancee {
  font-size: 0.76rem;
  color: #94a3b8;
}

.jeu-mode-actuel {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.18);
  color: #fde047;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/*  4 ter. Personnalisation du boxeur                                  */
/* ------------------------------------------------------------------ */

/*  Cet ecran ne contient QUE des couleurs : aucun prix, aucun bonus,
    aucun niveau requis. Le style suit la meme regle — rien ici ne doit
    ressembler a un objet a acheter ou a debloquer, sans quoi un joueur
    y chercherait un avantage qui n'existe pas. */
.jeu-apparence-apercu {
  display: flex;
  justify-content: center;
  margin: 4px 0 18px;
}

/*  Silhouette dessinee en HTML. Sa taille est fixe et volontairement
    modeste : elle doit tenir au-dessus des quatre rangees de pastilles
    sur un telephone sans obliger a faire defiler pour voir ses choix. */
.jeu-mini-boxeur {
  position: relative;
  width: 116px;
  height: 152px;
  flex: 0 0 auto;
}

.jeu-mini-boxeur span {
  position: absolute;
  display: block;
}

/*  Les cheveux sont poses par-dessus le haut du crane, d'ou le z-index :
    sans lui, l'ordre du HTML les ferait disparaitre derriere la tete sur
    les moteurs qui empilent differemment. */
.jeu-mini-boxeur .mb-tete {
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  width: 44px;
  height: 46px;
  border-radius: 46% 46% 42% 42%;
}

.jeu-mini-boxeur .mb-cheveux {
  left: 50%;
  transform: translateX(-50%);
  top: 2px;
  width: 46px;
  height: 20px;
  border-radius: 44% 44% 12% 12%;
  z-index: 2;
}

.jeu-mini-boxeur .mb-torse {
  left: 50%;
  transform: translateX(-50%);
  top: 48px;
  width: 62px;
  height: 58px;
  border-radius: 22px 22px 10px 10px;
}

.jeu-mini-boxeur .mb-short {
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  width: 66px;
  height: 44px;
  border-radius: 8px 8px 14px 14px;
  z-index: 2;
}

.jeu-mini-boxeur .mb-gant {
  top: 62px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.jeu-mini-boxeur .mb-gant-g { left: 2px; }
.jeu-mini-boxeur .mb-gant-d { right: 2px; }

.jeu-apparence-rangee {
  max-width: 430px;
  margin: 0 auto 12px;
  text-align: left;
}

.jeu-apparence-titre {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted, #b0b0b0);
  margin-bottom: 7px;
}

/*  Les pastilles passent a la ligne d'elles-memes : dix couleurs tiennent
    sur une ligne en large et sur deux sur un telephone, sans media query
    et sans jamais deborder du cadre. */
.jeu-apparence-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/*  36 px de cote : c'est la plus petite cible qu'un pouce atteint sans
    rater. En descendre rendrait l'ecran inutilisable sur mobile, ou il
    sera pourtant le plus utilise. */
.jeu-pastille {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.jeu-pastille:hover { transform: scale(1.1); }

/*  Le contour clair ne suffit pas : sur une pastille blanche il devient
    invisible. La coche ajoute un repere qui ne depend pas de la couleur
    du fond, et le contour sombre lui garantit un contraste des deux
    cotes. */
.jeu-pastille.choisie {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.28);
  transform: scale(1.08);
}

.jeu-pastille.choisie::after {
  content: '';
  display: block;
  width: 9px;
  height: 15px;
  margin: 2px auto 0;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.jeu-pastille:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .jeu-pastille,
  .jeu-pastille:hover,
  .jeu-pastille.choisie { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ */
/*  5. Colonne d'options                                               */
/* ------------------------------------------------------------------ */

.jeu-colonne {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jeu-carte {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 16px;
}

.jeu-carte h3 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted, #b0b0b0);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.jeu-carte h3 i {
  color: var(--accent-red, #ff3333);
}

/*  Le pecule s'affiche a droite du titre du vestiaire. Il faut le sortir des
    regles du titre : sinon la piece vire au rouge comme les autres icones, et
    l'interlettrage du titre en majuscules ecarte les chiffres du montant. */
.jeu-carte h3 .jeu-pieces {
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}

.jeu-carte h3 .jeu-pieces i {
  color: #facc15;
}

/*  Fiche du boxeur : avatar, pseudo, rang, barre de progression. */
.jeu-fiche {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.jeu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-red, #ff3333);
  background: #1a1a1a;
  flex-shrink: 0;
}

.jeu-fiche-nom {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jeu-fiche-rang {
  font-size: 0.76rem;
  color: var(--accent-red, #ff3333);
  font-weight: 700;
}

.jeu-xp {
  height: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  margin-bottom: 5px;
}

.jeu-xp > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0369a1, #38bdf8);
  border-radius: 20px;
  transition: width 0.5s ease;
}

.jeu-compteurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  text-align: center;
  margin-top: 12px;
}

.jeu-compteurs div {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 9px;
  padding: 7px 3px;
}

.jeu-compteurs strong {
  display: block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.15;
}

.jeu-compteurs span {
  font-size: 0.58rem;
  color: var(--text-muted, #b0b0b0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------------ */
/*  6. Boutons                                                         */
/* ------------------------------------------------------------------ */

.jeu-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 11px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.14s ease, background-color 0.2s ease,
              box-shadow 0.2s ease, border-color 0.2s ease;
  /*  Sur telephone, une pression un peu longue selectionne le libelle et
      fait surgir la loupe : ce n'est pas ce qu'on attend d'un bouton de
      combat. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jeu-bouton:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jeu-bouton:active:not(:disabled) {
  transform: translateY(1px);
}

.jeu-bouton:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.jeu-bouton.principal {
  background: linear-gradient(135deg, var(--accent-red, #ff3333), #c81e1e);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 51, 51, 0.28);
}

.jeu-bouton.principal:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5555, #e02424);
  box-shadow: 0 9px 26px rgba(255, 51, 51, 0.4);
}

.jeu-bouton.versus {
  background: linear-gradient(135deg, #0066ee, #0044aa);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 102, 238, 0.28);
}

.jeu-bouton.versus:hover:not(:disabled) {
  background: linear-gradient(135deg, #2288ff, #0055cc);
  box-shadow: 0 9px 26px rgba(0, 102, 238, 0.4);
}

/*  Bouton discret, pour « Retour » ou « Annuler » : il ne doit jamais
    attirer l'oeil plus que l'action principale. */
.jeu-bouton.discret {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  font-size: 0.84rem;
  padding: 10px 14px;
}

.jeu-boutons-ligne {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
}

.jeu-boutons-ligne .jeu-bouton {
  width: auto;
  min-width: 148px;
}

/* ------------------------------------------------------------------ */
/*  7. Onglets et classements                                          */
/* ------------------------------------------------------------------ */

.jeu-onglets {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 13px;
}

.jeu-onglets button {
  flex: 1;
  /*  Ces trois onglets sont la principale chose qu'on touche du doigt dans la
      colonne. Avec le seul remplissage ils tombaient a 31 px de haut : lisible,
      mais on vise a cote une fois sur trois sur un telephone. La hauteur
      minimale les amene a une cible confortable sans changer leur allure. */
  min-height: 42px;
  padding: 8px 5px;
  border: none;
  background: transparent;
  color: var(--text-muted, #b0b0b0);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 0.74rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jeu-onglets button.actif {
  background: var(--accent-red, #ff3333);
  color: #fff;
}

.jeu-classement {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 290px;
  overflow-y: auto;
}

.jeu-rang-ligne {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.82rem;
}

/*  Le joueur se retrouve dans une liste de vingt noms : on le souligne,
    sinon il doit lire toute la colonne pour se chercher. */
.jeu-rang-ligne.moi {
  background: rgba(255, 51, 51, 0.14);
  border: 1px solid rgba(255, 51, 51, 0.42);
}

.jeu-rang-place {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: 0.92rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted, #b0b0b0);
}

.jeu-rang-ligne:nth-child(1) .jeu-rang-place { color: #ffd700; }
.jeu-rang-ligne:nth-child(2) .jeu-rang-place { color: #c0c0c0; }
.jeu-rang-ligne:nth-child(3) .jeu-rang-place { color: #cd7f32; }

.jeu-rang-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a1a;
  flex-shrink: 0;
}

.jeu-rang-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.jeu-rang-nom small {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted, #b0b0b0);
  font-weight: 400;
}

.jeu-rang-valeur {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--accent-red, #ff3333);
  flex-shrink: 0;
}

.jeu-vide {
  color: #666;
  font-size: 0.84rem;
  text-align: center;
  padding: 18px 8px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/*  8. Vestiaire (boutique)                                            */
/* ------------------------------------------------------------------ */

/*  Le vestiaire compte une vingtaine d'articles : deroule en entier il faisait
    a lui seul plus de 2000 px, la colonne devenait six fois plus haute que le
    ring et le combat disparaissait vers le haut de la page. On le plafonne
    avec son propre defilement, comme le classement juste en dessous — c'est
    aussi ce qu'on attend d'une boutique. */
.jeu-objets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 10px;
  max-height: 424px;
  overflow-y: auto;
}

.jeu-objet {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  padding: 11px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: border-color 0.2s ease, transform 0.14s ease,
              background-color 0.2s ease;
}

.jeu-objet:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.jeu-objet.equipe {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.09);
}

/*  Verrouille : on le montre quand meme, grise. Cacher les objets prive
    le joueur de la raison de continuer a jouer. */
.jeu-objet.verrouille {
  opacity: 0.5;
  cursor: not-allowed;
}

.jeu-objet-nom {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.84rem;
  line-height: 1.25;
  margin-bottom: 4px;
}

.jeu-objet-texte {
  font-size: 0.68rem;
  color: var(--text-muted, #b0b0b0);
  line-height: 1.45;
  margin-bottom: 8px;
  min-height: 30px;
}

.jeu-objet-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
}

.jeu-objet-prix { color: #facc15; }
.jeu-objet-etat { color: #4ade80; }
.jeu-objet-niveau { color: #94a3b8; font-weight: 500; }

.jeu-pieces {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 900;
  font-size: 1.05rem;
  color: #facc15;
}

/* ------------------------------------------------------------------ */
/*  9. Commandes tactiles                                              */
/* ------------------------------------------------------------------ */

/*  Masquees par defaut : le script les revele quand il detecte un ecran
    tactile. Les afficher en se fiant a la largeur de la fenetre ferait
    apparaitre des boutons de pouce sur un portable a petite fenetre, et
    les ferait disparaitre sur une tablette tenue a l'horizontale. */
.jeu-tactile {
  display: none;
  margin-top: 12px;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-end;
}

body.jeu-tactile-actif .jeu-tactile {
  display: flex;
}

.jeu-tactile-bloc {
  display: grid;
  gap: 8px;
}

.jeu-tactile-bloc.gauche {
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 auto;
}

.jeu-tactile-bloc.droite {
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
  max-width: 330px;
}

/*  La garde tient toute la largeur de son bloc : c'est la commande la plus
    sollicitee du jeu et celle qu'on cherche dans l'urgence, elle merite la
    plus grosse cible du pouce gauche. */
.jeu-tactile-bloc .large {
  grid-column: 1 / -1;
}

/*  56 px de cote au minimum : c'est la taille sous laquelle un pouce
    manque sa cible plus d'une fois sur dix. Un coup rate par la faute
    d'un bouton trop petit passe pour un defaut du jeu. */
.jeu-touche {
  min-width: 56px;
  min-height: 56px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease, transform 0.1s ease;
}

.jeu-touche i {
  font-size: 1rem;
  opacity: 0.85;
}

.jeu-touche.enfonce {
  background: var(--accent-red, #ff3333);
  transform: scale(0.94);
}

.jeu-touche.lourd {
  background: rgba(255, 51, 51, 0.16);
  border-color: rgba(255, 51, 51, 0.4);
}

.jeu-touche.special {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(192, 132, 252, 0.5);
}

.jeu-touche.special:disabled {
  opacity: 0.4;
}

.jeu-touche.garde {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.42);
}

/* ------------------------------------------------------------------ */
/*  10. Aide aux commandes (clavier)                                   */
/* ------------------------------------------------------------------ */

.jeu-astuce {
  font-size: 0.76rem;
  color: var(--text-muted, #b0b0b0);
  line-height: 1.55;
  margin: 11px 0 0;
}

.jeu-tactile-seul {
  display: none;
}

.jeu-touches-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  font-size: 0.76rem;
}

.jeu-touches-liste div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.26);
  border-radius: 7px;
}

.jeu-touches-liste kbd {
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

/*  Ce que l'appareil sait faire, pas ce qu'il mesure : une tablette de 820 px
    peut avoir un clavier, un portable a ecran tactile peut avoir une souris.
    « hover: none » et « pointer: coarse » ensemble ne decrivent qu'une chose :
    un appareil ou l'on joue au doigt, sans clavier.

    Ce bloc doit rester APRES .jeu-touches-liste. Les deux selecteurs pesent le
    meme poids — une seule classe — donc c'est l'ordre du fichier qui tranche,
    et place plus haut son « display: grid » l'emportait : la legende des
    touches restait affichee sur telephone. */
@media (hover: none) and (pointer: coarse) {
  .jeu-clavier-seul {
    display: none;
  }

  .jeu-tactile-seul {
    display: block;
  }
}

/* ------------------------------------------------------------------ */
/*  11. Reglages                                                       */
/* ------------------------------------------------------------------ */

.jeu-reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /*  Ligne assez haute pour contenir la zone tactile de 44 px de l'interrupteur
      (voir .jeu-bascule::before) : sans cela cette zone deborderait sur la
      ligne voisine et on couperait la musique en voulant couper le son. */
  padding: 11px 0;
  font-size: 0.86rem;
}

.jeu-reglage + .jeu-reglage {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.jeu-bascule {
  position: relative;
  width: 44px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background-color 0.22s ease;
}

/*  L'interrupteur mesure 44x25 : c'est la bonne taille A L OEIL, mais pas au
    doigt. Le grossir en ferait un gros bouton disgracieux au milieu d'une liste
    de reglages ; on etend donc seulement la surface qui recoit le doigt, sans
    rien changer a ce qui se voit. ::after est deja pris par le rond mobile. */
.jeu-bascule::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}

.jeu-bascule::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s ease;
}

.jeu-bascule[aria-pressed="true"] {
  background: var(--accent-red, #ff3333);
}

.jeu-bascule[aria-pressed="true"]::after {
  transform: translateX(19px);
}

/*  Un curseur de volume ne fait que 16 px de haut par defaut : on l'attrape au
    doigt une fois sur deux. La hauteur declaree elargit la bande sensible sans
    epaissir le trait, que le navigateur garde centre. */
.jeu-volume {
  width: 108px;
  height: 40px;
  accent-color: var(--accent-red, #ff3333);
}

/*  Cette bande de 40 px rendrait la ligne du volume plus haute que les autres.
    On lui reprend donc son remplissage vertical. Sur un navigateur trop ancien
    pour :has(), la regle est simplement ignoree et la ligne reste un peu plus
    haute — genant a l'oeil, jamais bloquant a l'usage. */
.jeu-reglage:has(.jeu-volume) {
  padding: 3px 0;
}

/* ------------------------------------------------------------------ */
/*  12. Adaptation aux ecrans                                          */
/* ------------------------------------------------------------------ */

/*  Tablette : la colonne d'options passe SOUS le ring, en deux colonnes
    pour ne pas etirer une bande unique sur toute la largeur. */
@media (max-width: 1000px) {
  .jeu-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .jeu-colonne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .jeu-colonne .pleine-largeur {
    grid-column: 1 / -1;
  }
}

/*  Telephone : une seule colonne, et les commandes tactiles prennent la
    place. Les cartes se resserrent : sur un ecran de 6 pouces, chaque
    pixel vertical compte pour garder le ring visible. */
@media (max-width: 660px) {
  .jeu-page {
    padding: 0 10px 40px;
  }

  .jeu-colonne {
    grid-template-columns: minmax(0, 1fr);
  }

  .jeu-carte {
    padding: 13px;
  }

  .jeu-scene {
    border-radius: 12px;
  }

  /*  Le voile est pose PAR-DESSUS le ring : il ne peut pas pousser la page
      pour se faire de la place. Sur un telephone le ring ne faisait que
      215 px de haut, et le message d'accueil y perdait ses 40 derniers
      pixels — c'est-a-dire le bouton « Rejoindre le club ». Les ecrans de
      fin de combat, plus charges encore, s'y coupaient de la meme facon.

      On reserve donc au ring une hauteur fixe, suffisante pour ces ecrans.
      Une hauteur FIXE et non conditionnee a l'affichage du voile : le
      canevas n'est remesure qu'au chargement et au redimensionnement de la
      fenetre, si bien qu'un ring qui change de taille en cours de partie
      garderait une image calculee pour l'ancienne et combattrait ecrase
      jusqu'a la fin du round. */
  .jeu-scene {
    min-height: 340px;
  }

  /*  Le decor du moteur est dessine en 900x520 : etire sur un ring devenu
      presque carre, les boxeurs deviendraient longs et maigres. Le canevas
      garde donc ses proportions et se centre, les bords restant dans le noir
      du ring — c'est le cadrage habituel d'un jeu, pas un defaut. */
  .jeu-scene canvas {
    top: 50%;
    bottom: auto;
    height: auto;
    aspect-ratio: 900 / 520;
    transform: translateY(-50%);
  }

  .hud {
    padding: 8px 9px 0;
  }

  .jauge {
    height: 10px;
  }

  .jauge.mince {
    height: 5px;
  }

  .jeu-tactile-bloc.droite {
    max-width: none;
  }

  .jeu-touche {
    min-width: 48px;
    min-height: 50px;
    font-size: 0.6rem;
    border-radius: 11px;
  }

  .jeu-boutons-ligne .jeu-bouton {
    width: 100%;
  }
}

/*  Telephone couche : la barre d'adresse mange deja la moitie de la
    hauteur. On retire l'entete et les marges pour que le ring tienne. */
@media (max-height: 480px) and (orientation: landscape) {
  .jeu-entete,
  .jeu-masquer-en-paysage {
    display: none;
  }

  .jeu-page {
    padding: 0 8px 16px;
  }
}

/*  Respect du reglage systeme « reduire les animations ». Les personnes
    sujettes au mal des transports desactivent cette option ; un jeu qui
    l'ignore leur devient penible. Le combat lui-meme reste anime, mais
    plus rien ne clignote ni ne pulse en dehors du ring. */
@media (prefers-reduced-motion: reduce) {
  .jeu-voile,
  .jeu-sablier,
  .jauge.special.prete,
  .hud-chrono.urgence,
  .jeu-monte-niveau {
    animation: none;
  }

  .jeu-bouton,
  .jeu-objet,
  .jauge > i,
  .jeu-xp > i {
    transition: none;
  }
}