/*
 * Bestioles en Cavale — pages de jeu (solo, défi du jour, arène).
 *
 * Perf : pas de backdrop-filter sur un conteneur permanent, pas de box-shadow
 * animé en boucle, pas de position: fixed décoratif (ils écroulent Firefox).
 * Les animations passent par transform, opacity, et par les deux propriétés de
 * position du pion qui glisse.
 */

:root {
  --bec-fond: #0f172a;
  --bec-panel: #1e293b;
  --bec-bordure: #334155;
  --bec-texte: #f1f5f9;
  --bec-doux: #94a3b8;
  --bec-vert: #22c55e;
  --bec-vert-clair: #bbf7d0;
  --bec-vert-fonce: #14532d;
  --bec-ambre: #fbbf24;
  --bec-rouge: #f87171;

  /* Durée d'une case parcourue : doit rester égale à MS_PAR_CASE de
     js/plateau.js, sinon le pion arrive avant ou après son animation. */
  --bec-pas: 48ms;
}

body {
  margin: 0;
  /* Même pile que les CSS partagés (accueil.css, classement.css). head-common
     charge bien Inter mais ne l'applique à rien : sans cette règle, tout ce que
     le CSS du jeu ne cible pas explicitement retombe sur la serif par défaut du
     navigateur. Invisible au lint, évident dès qu'on ouvre la page. */
  font-family: 'Inter', sans-serif;
  color: var(--bec-texte);
}

/*
 * 800 px et pas davantage : au-delà, les deux blocs fixes des gouttières
 * (bandeau Infos à droite, Jeux à la une à gauche) viennent recouvrir le
 * contenu dès 1280 px de large. Le box-sizing compte autant que la largeur.
 */
#app {
  max-width: 800px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 28px 24px;
  color: var(--bec-texte);
}

.cache { display: none !important; }

/* ================= ÉCRAN D'ACCUEIL DU MODE ================= */

#setup h1,
#vue-lobby h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin: 18px 0 6px;
  color: var(--bec-texte);
}

.setup-intro { color: var(--bec-doux); margin: 0 0 26px; line-height: 1.6; }
.setup-bloc { margin-bottom: 26px; }

.setup-bloc h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bec-vert-clair);
  margin: 0 0 12px;
}

.choix-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.choix { display: block; cursor: pointer; position: relative; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }

.choix-corps {
  display: block;
  min-height: 62px;
  padding: 14px 16px;
  border: 2px solid var(--bec-bordure);
  border-radius: 12px;
  background: var(--bec-panel);
  transition: border-color 0.15s, background 0.15s;
}
.choix-corps strong { display: block; color: var(--bec-texte); font-size: 1.05rem; margin-bottom: 3px; }
.choix-corps small { display: block; color: var(--bec-doux); font-size: 0.82rem; line-height: 1.45; }
.choix:hover .choix-corps { border-color: var(--bec-vert); }
.choix input:focus-visible + .choix-corps { outline: 2px solid var(--bec-vert-clair); outline-offset: 2px; }
.choix input:checked + .choix-corps { border-color: var(--bec-vert); background: linear-gradient(160deg, #14532d, #1e293b); }
.choix input:checked + .choix-corps strong { color: var(--bec-vert-clair); }

.setup-aide { border-top: 1px solid var(--bec-bordure); padding-top: 22px; }
.setup-aide h2 { font-size: 1rem; color: var(--bec-vert-clair); margin: 0 0 12px; }
.setup-aide ul { margin: 0; padding-left: 20px; color: var(--bec-doux); line-height: 1.7; }
.setup-aide li { margin-bottom: 8px; }
.setup-aide strong { color: var(--bec-texte); }

.defi-carte {
  background: var(--bec-panel);
  border: 1px solid var(--bec-bordure);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 22px;
}
.defi-carte h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--bec-vert-clair); }
.defi-carte p { margin: 0 0 10px; color: var(--bec-doux); line-height: 1.65; }
.defi-carte p:last-child { margin-bottom: 0; }

.message-partie {
  display: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fecaca;
  font-size: 0.92rem;
}
.message-partie.visible { display: block; }

/* ================= BOUTONS ================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bec-vert);
  color: #052e16;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
a.btn, a.btn:visited { color: #052e16; }
.btn:hover { background: #16a34a; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-outline { background: transparent; border-color: var(--bec-bordure); color: var(--bec-texte); }
a.btn-outline, a.btn-outline:visited { color: var(--bec-texte); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--bec-vert); }

.btn-lancer {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 8px auto 30px;
  font-size: 1.1rem;
  padding: 15px 24px;
  background: linear-gradient(135deg, var(--bec-vert), var(--bec-vert-fonce));
  color: #f0fdf4;
}
.btn-lancer:hover { background: linear-gradient(135deg, #4ade80, var(--bec-vert-fonce)); }

.btn-abandon { display: block; margin: 22px auto 0; }

/* ================= CARTE DES NIVEAUX ================= */

.carte-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.carte-entete h2 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bec-vert-clair);
}
.carte-total { color: var(--bec-ambre); font-weight: 800; font-variant-numeric: tabular-nums; }

.carte-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 8px;
  /* Cent tuiles d'un coup noieraient la page : la carte défile toute seule et
     le niveau en cours est amené sous les yeux au chargement. */
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 24px;
}

.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px 7px;
  border-radius: 10px;
  border: 1px solid var(--bec-bordure);
  background: var(--bec-panel);
  color: var(--bec-texte);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.tuile:hover { border-color: var(--bec-vert); transform: translateY(-1px); }
.tuile:focus-visible { outline: 2px solid var(--bec-vert-clair); outline-offset: 2px; }
.tuile.faite { background: linear-gradient(160deg, #14532d, #1e293b); border-color: rgba(34, 197, 94, 0.5); }
.tuile.courante { border-color: var(--bec-ambre); }
.tuile.verrouillee { opacity: 0.4; cursor: not-allowed; }
.tuile.verrouillee:hover { transform: none; border-color: var(--bec-bordure); }

.tuile-num { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tuile-etoiles { display: flex; gap: 2px; }

/* Étoile en clip-path : cinq branches sans une seule image à télécharger. */
.et {
  display: block;
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.et.pleine { background: var(--bec-ambre); }

/* ================= ZONE DE JEU ================= */

#jeu {
  position: relative;
  border-radius: 20px;
  padding: 18px 16px 22px;
  background: radial-gradient(120% 90% at 50% 0%, #14532d 0%, #12331f 55%, #0e1730 100%);
  border: 1px solid #2f6b46;
}

.jeu-hud {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.hud-bloc {
  flex: 1 1 0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
}
.hud-valeur {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--bec-texte);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hud-label {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bec-doux);
  margin-top: 3px;
}
.hud-principal .hud-valeur { color: var(--bec-ambre); font-size: 1.7rem; }
.hud-titre {
  text-align: center;
  font-weight: 800;
  color: var(--bec-vert-clair);
  margin: 0 0 10px;
  font-size: 1.05rem;
}

/* ================= LE PLATEAU ================= */

/*
 * Le plateau est un carré fluide : la grille occupe toute la largeur
 * disponible, chaque case garde son ratio, et le calque des bestioles se
 * superpose en position absolue. Les positions y sont exprimées en pourcentage
 * du plateau, jamais en pixels : rien à recalculer au redimensionnement, et
 * surtout rien à mesurer — un plateau caché mesurerait zéro.
 */
.plateau {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  touch-action: none;
}

/* Les grands plateaux gagnent un peu de largeur : à 11 colonnes dans 520 px,
   les cases tombent sous 45 px et les bestioles deviennent des pastilles. */
.plateau.plateau-large { max-width: 580px; }

/*
 * Le cadre est un box-shadow, pas une bordure : une bordure occuperait de la
 * place dans la grille, alors que le calque des bestioles se cale sur les
 * dimensions du conteneur. Les pions se retrouvaient décalés de 2 px sur
 * chaque case — invisible à l'oeil nu, mesurable au test.
 */
.grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 8), 1fr);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.7);
}

.case {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  position: relative;
  background: #3f6212;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.22);
}

/* Damier discret : sans lui, on perd le compte des cases sur une glissade. */
.grille .case:nth-child(odd) { background: #4d7c0f; }

.c-mur {
  background: #1c1917 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.c-herbe {
  background: repeating-linear-gradient(135deg, #166534 0 5px, #15803d 5px 10px) !important;
}

.c-trou, .c-effondree {
  background: radial-gradient(circle at 50% 45%, #020617 0 58%, #1e293b 74%) !important;
}

.c-fragile {
  background: #57534e !important;
  background-image:
    linear-gradient(115deg, transparent 46%, rgba(15, 23, 42, 0.85) 46% 52%, transparent 52%),
    linear-gradient(58deg, transparent 47%, rgba(15, 23, 42, 0.85) 47% 53%, transparent 53%) !important;
}

.c-sortie {
  box-shadow: inset 0 0 0 3px rgba(15, 23, 42, 0.5);
}
.c-sortie::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 6px 6px 2px 2px;
  background: currentColor;
  opacity: 0.9;
}
.s-0 { color: #ef4444; background: #7f1d1d !important; }
.s-1 { color: #3b82f6; background: #1e3a8a !important; }
.s-2 { color: #22c55e; background: #14532d !important; }
.s-3 { color: #eab308; background: #713f12 !important; }

.c-fleche::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 22% solid transparent;
  border-right: 22% solid transparent;
  border-bottom: 34% solid rgba(251, 191, 36, 0.92);
}
.f-droite::after { transform: rotate(90deg); }
.f-bas::after { transform: rotate(180deg); }
.f-gauche::after { transform: rotate(270deg); }

.c-tp {
  background: radial-gradient(circle at 50% 50%, #ede9fe 0 16%, #7c3aed 20% 42%, #2e1065 46% 62%, #1e293b 66%) !important;
}
.tp-1 { background: radial-gradient(circle at 50% 50%, #cffafe 0 16%, #06b6d4 20% 42%, #083344 46% 62%, #1e293b 66%) !important; }
.tp-2 { background: radial-gradient(circle at 50% 50%, #fce7f3 0 16%, #db2777 20% 42%, #500724 46% 62%, #1e293b 66%) !important; }

.c-inter {
  background: #78350f !important;
}
.c-inter::after {
  content: '';
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--bec-ambre);
  box-shadow: inset 0 -2px 0 rgba(120, 53, 15, 0.6);
}

/* Un pont ouvert se traverse, un pont fermé est un vide. L'état bascule d'un
   coup sur tout le plateau : c'est la classe du conteneur qui commande. */
.c-pont { background: repeating-linear-gradient(90deg, #92400e 0 6px, #b45309 6px 12px) !important; }
.c-pont-b { background: radial-gradient(circle at 50% 45%, #020617 0 58%, #1e293b 74%) !important; }
.ponts-bascules .c-pont-a { background: radial-gradient(circle at 50% 45%, #020617 0 58%, #1e293b 74%) !important; }
.ponts-bascules .c-pont-b { background: repeating-linear-gradient(90deg, #92400e 0 6px, #b45309 6px 12px) !important; }

/* ================= LES BESTIOLES ================= */

.couche-bestioles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bestiole {
  position: absolute;
  box-sizing: border-box;
  width: calc(100% / var(--colonnes, 8));
  height: calc(100% / var(--lignes, 8));
  left: calc(var(--cx, 0) * 100% / var(--colonnes, 8));
  top: calc(var(--cy, 0) * 100% / var(--lignes, 8));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transition: left var(--bec-pas) linear, top var(--bec-pas) linear;
  -webkit-tap-highlight-color: transparent;
}

/* Le corps est un pseudo-élément : le bouton lui-même porte la position, ce
   qui laisse le corps libre de tourner et de rebondir sans casser la case. */
.bestiole::before {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50% 50% 42% 42%;
  background: var(--corps, #ef4444);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}

.b-0 { --corps: #ef4444; }
.b-1 { --corps: #3b82f6; }
.b-2 { --corps: #22c55e; }
.b-3 { --corps: #eab308; }

.oeil {
  position: absolute;
  top: 34%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  z-index: 1;
}
.oeil-g { left: 32%; }
.oeil-d { right: 32%; }

.bestiole.selection::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 12px;
  border: 2px solid var(--bec-ambre);
}

.bestiole.en-mouvement { z-index: 3; }

/* Le saut d'un téléporteur est instantané : glisser d'un bout à l'autre du
   plateau laisserait croire que la bestiole y va vraiment. */
.bestiole.saut-tp { transition: none; opacity: 0.35; }

.bestiole.tombe { animation: bec-chute 0.32s ease-in forwards; }
@keyframes bec-chute {
  to { transform: scale(0.15) rotate(140deg); opacity: 0; }
}

.bestiole.sauvee { animation: bec-sortie 0.3s ease-out forwards; }
@keyframes bec-sortie {
  40% { transform: scale(1.18); }
  to { transform: scale(0.2); opacity: 0; }
}

.bestiole.refus { animation: bec-refus 0.3s ease-in-out; }
@keyframes bec-refus {
  25% { transform: translateX(-9%); }
  75% { transform: translateX(9%); }
}

@media (prefers-reduced-motion: reduce) {
  .bestiole { transition: none; }
  .bestiole.tombe, .bestiole.sauvee, .bestiole.refus { animation-duration: 0.01s; }
}

/* ================= COMMANDES ================= */

.commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.croix {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 5px;
}
.croix button {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--bec-texte);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.croix button:hover { background: rgba(34, 197, 94, 0.3); }
.croix button:active { transform: scale(0.93); }
.croix .haut   { grid-area: 1 / 2; }
.croix .gauche { grid-area: 2 / 1; }
.croix .droite { grid-area: 2 / 3; }
.croix .bas    { grid-area: 3 / 2; }

.commandes-actions { display: flex; flex-direction: column; gap: 8px; }

.aide-commandes {
  text-align: center;
  color: var(--bec-doux);
  font-size: 0.8rem;
  margin: 16px 0 0;
  line-height: 1.6;
}

/* Bandeau d'échec : il ne coupe pas la partie, il rappelle que l'annulation
   existe. Une bestiole tombée n'est jamais une fin de partie forcée. */
.bandeau-echec {
  display: none;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
  font-size: 0.9rem;
  text-align: center;
}
.bandeau-echec.visible { display: block; }

/* ================= FIL DU DÉFI ================= */

.defi-fil {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  justify-content: center;
}
.defi-fil li {
  flex: 0 1 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bec-bordure);
  font-size: 0.78rem;
  color: var(--bec-doux);
}
.defi-fil li.fait { border-color: rgba(34, 197, 94, 0.55); color: var(--bec-vert-clair); }
.defi-fil li.encours { border-color: var(--bec-ambre); color: var(--bec-ambre); font-weight: 700; }

/* ================= OVERLAY DE FIN ================= */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 12, 26, 0.86);
  padding: 20px;
  overflow-y: auto;
}
.overlay.visible { display: flex; align-items: center; justify-content: center; }

.overlay-carte {
  width: 100%;
  max-width: 460px;
  background: var(--bec-panel);
  border: 1px solid var(--bec-bordure);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
}
.overlay-carte h2 { margin: 0 0 8px; font-size: 1.5rem; color: var(--bec-vert-clair); }
.overlay-carte > p { color: var(--bec-doux); margin: 0 0 18px; line-height: 1.6; }

.fin-etoiles {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 16px;
}
.fin-etoiles .et { width: 38px; height: 38px; }
.fin-etoiles .et.pleine { animation: bec-etoile 0.4s ease-out backwards; }
.fin-etoiles .et.pleine:nth-child(2) { animation-delay: 0.12s; }
.fin-etoiles .et.pleine:nth-child(3) { animation-delay: 0.24s; }
@keyframes bec-etoile {
  from { transform: scale(0.2) rotate(-45deg); opacity: 0; }
}

.fin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.stat-bloc {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 4px;
}
.stat-valeur {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bec-texte);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bec-doux);
  margin-top: 2px;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

/* ================= ARÈNE ================= */

.lobby-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 22px; }
.note-invite { color: var(--bec-doux); font-size: 0.85rem; text-align: center; margin-top: 18px; }

.setup-amis {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--bec-bordure);
}
.setup-note { color: var(--bec-doux); font-size: 0.88rem; line-height: 1.6; margin: 0 0 16px; }

.lobby-rejoindre { max-width: 340px; margin: 0 auto; }
.lobby-rejoindre label {
  display: block;
  font-size: 0.85rem;
  color: var(--bec-doux);
  margin-bottom: 8px;
  text-align: center;
}
.controle-ligne { display: flex; gap: 10px; }

#input-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 2px solid var(--bec-bordure);
  border-radius: 10px;
  background: var(--bec-panel);
  color: var(--bec-texte);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
}
#input-code:focus { outline: none; border-color: var(--bec-vert); }
#input-code::placeholder { color: var(--bec-doux); opacity: 0.5; letter-spacing: 5px; }

.salon-code-bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
#salon-code {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--bec-ambre);
}

.salon-joueurs { list-style: none; padding: 0; margin: 0 0 16px; }
.salon-joueurs li {
  padding: 9px 13px;
  border: 1px solid var(--bec-bordure);
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(15, 23, 42, 0.6);
  font-size: 0.9rem;
}
.salon-hote {
  color: var(--bec-vert-clair);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#btn-lancer-manche { display: block; width: 100%; }

.arene-etat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--bec-vert-clair);
  font-weight: 700;
}
.arene-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
}

.arene-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) {
  .arene-grille { grid-template-columns: 1fr; }
}

.classement-live {
  background: var(--bec-panel);
  border: 1px solid var(--bec-bordure);
  border-radius: 14px;
  padding: 14px;
}
.classement-live h2 {
  margin: 0 0 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bec-vert-clair);
}
.classement-live ol { list-style: none; margin: 0; padding: 0; }
.classement-live li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--bec-texte);
}
.classement-live li + li { margin-top: 2px; }
.classement-live li.moi { background: rgba(34, 197, 94, 0.22); }
.classement-live li.fini .live-score { color: var(--bec-ambre); }
.live-rang { color: var(--bec-doux); font-size: 0.78rem; min-width: 1.6em; }
.live-nom { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-score { font-weight: 800; color: var(--bec-vert-clair); font-variant-numeric: tabular-nums; }

.compte-a-rebours {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  color: var(--bec-ambre);
  margin: 28px 0;
  font-variant-numeric: tabular-nums;
}

/* Blocs latéraux fixes : visibles sur l'écran de choix, masqués pendant la
   partie (ils tirent l'oeil hors du plateau), de retour à la fin. */
body.bestioles-en-jeu .bandeau-infos-wrap,
body.bestioles-en-jeu .bloc-jeux-une-wrap { display: none !important; }

/* ================= FOOTER ================= */

footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--bec-bordure);
  text-align: center;
  color: var(--bec-doux);
  font-size: 0.85rem;
  line-height: 1.9;
}
footer a { color: var(--bec-vert-clair); text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  #app { padding: 18px 14px; }
  .hud-valeur { font-size: 1.15rem; }
  .hud-principal .hud-valeur { font-size: 1.45rem; }
  .carte-niveaux { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); max-height: 340px; }
  .croix { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); }
}