/* === Snake Arena : page d'arène (plein écran) ===
   Commune à l'arène publique, aux salons, à l'entraînement et au défi du jour.
   Pas de backdrop-filter : il coûte une passe de flou par image au-dessus d'une
   toile qui se redessine en continu. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a1410;
  font-family: 'Inter', sans-serif;
  color: #e6f2ec;
}

.hidden { display: none !important; }

/* === Barre de compte du réseau : repliée pendant la partie ===
   Tant que l'arène est à l'écran (aucun écran de connexion, de fin de vie ni de
   fin de manche, pas de limite du jour), la barre partagée « Autres jeux /
   Connexion » est masquée : en connecté elle fait plus de 500 px de large et
   recouvrait les boutons Accueil, son et apparence sur téléphone. Elle revient
   dès qu'un de ces écrans s'affiche (l'entraînement et le défi n'ont pas d'écran
   de fin de manche : d'où le test « aucun écran visible »). */
body:not(:has(> #ecran-connexion:not(.hidden), > #overlay-mort:not(.hidden), > #overlay-fin:not(.hidden))):not(.limite-atteinte) .auth-nav {
  display: none;
}

#canvas-arene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
  z-index: 1;
}

/* === Barre haute : accueil, boutons, titre ===
   La barre laisse passer les clics vers la toile ; ses liens ET ses boutons les
   reprennent (les boutons étaient oubliés : le plein écran ne répondait pas). */
.barre-haut {
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  pointer-events: none;
}
.barre-haut a, .barre-haut button, .barre-haut .titre { pointer-events: auto; }
.barre-haut .retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(10, 25, 18, 0.82);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #86efac;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.barre-haut .retour:hover { background: rgba(22, 163, 74, 0.35); }
.barre-haut .btn-icone { padding: 7px 10px; font-size: 0.95rem; line-height: 1; }
/* Plein écran : seulement sur écran tactile. Le sélecteur doit peser plus lourd
   que `.barre-haut .retour`, sinon le bouton s'affichait aussi sur ordinateur. */
.barre-haut .btn-pleinecran { display: none; }
@media (pointer: coarse) {
  .barre-haut .btn-pleinecran { display: inline-flex; }
}
.barre-haut .titre {
  font-size: 1.05rem;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* === Longueur, rang, joueurs, temps ===
   Sous la barre, à gauche : en haut à droite, le bloc passait sous la barre de
   compte du réseau et le joueur ne voyait jamais sa longueur. */
.hud {
  position: fixed;
  top: 58px; left: 16px;
  z-index: 10;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.hud .bloc {
  min-width: 58px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(10, 25, 18, 0.82);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.hud .bloc .val { font-size: 1.05rem; font-weight: 800; color: #f0fdf4; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hud .bloc .lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6ee7b7; }
.hud .bloc-temps { border-color: rgba(250, 204, 21, 0.4); }
.hud .bloc-temps .val { color: #fde68a; }
.hud .bloc-temps.urgent { border-color: rgba(248, 113, 113, 0.8); }
.hud .bloc-temps.urgent .val { color: #fca5a5; }

/* === Bonus actifs (sous le bloc de longueur) === */
.bonus-actifs {
  position: fixed;
  top: 112px; left: 16px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 46vw;
  pointer-events: none;
}
.bonus-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(10, 25, 18, 0.82);
}
.bonus-chip-vitesse   { color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.45); }
.bonus-chip-vision    { color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.45); }
.bonus-chip-aimant    { color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.45); }
.bonus-chip-festin    { color: #f9a8d4; border: 1px solid rgba(244, 114, 182, 0.45); }
.bonus-chip-endurance { color: #5eead4; border: 1px solid rgba(45, 212, 191, 0.45); }

/* === Classement de l'arène (sous la barre de compte, à droite) === */
.panneau-classement {
  position: fixed;
  top: 62px; right: 12px;
  z-index: 10;
  width: 208px;
  max-width: 40vw;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10, 25, 18, 0.78);
  border: 1px solid rgba(74, 222, 128, 0.18);
  pointer-events: none;
}
.panneau-classement h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6ee7b7;
  margin-bottom: 6px;
}
.panneau-classement ul { list-style: none; }
.panneau-classement li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 2px 0;
  color: #d1fae5;
}
.panneau-classement li.moi { color: #4ade80; font-weight: 700; }
.panneau-classement .rang { width: 18px; color: #6ee7b7; font-weight: 700; text-align: right; }
.panneau-classement .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panneau-classement .pts { font-weight: 700; color: #a7f3d0; font-variant-numeric: tabular-nums; }

/* === Annonce passagère (élimination, bonus, première place) === */
.annonce {
  position: fixed;
  top: 22%; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  max-width: 86vw;
  padding: 9px 20px;
  border-radius: 24px;
  background: rgba(10, 25, 18, 0.88);
  border: 1px solid rgba(74, 222, 128, 0.5);
  color: #f0fdf4;
  font-size: 1.02rem;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}
.annonce-elim { border-color: rgba(250, 204, 21, 0.8); color: #fde68a; }
.annonce-bonus { border-color: rgba(56, 189, 248, 0.7); color: #bae6fd; font-size: 0.92rem; }
.annonce-tete { border-color: rgba(250, 204, 21, 0.8); color: #fef08a; }

/* === Fil des éliminations (à gauche, sous les bonus) === */
.fil-evenements {
  position: fixed;
  top: 150px; left: 16px;
  z-index: 9;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 44vw;
  pointer-events: none;
}
.fil-evenements li {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(10, 25, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(230, 242, 236, 0.75);
}
.fil-evenements li.moi { color: #fef3c7; border-color: rgba(251, 191, 36, 0.6); }

/* === Salon privé === */
.bandeau-salon {
  position: fixed;
  bottom: 44px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 94vw;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(10, 25, 18, 0.88);
  border: 1px solid rgba(34, 211, 238, 0.4);
  font-size: 0.8rem;
  color: #cffafe;
}
.bandeau-salon .salon-titre strong { color: #67e8f9; letter-spacing: 0.12em; font-size: 0.95rem; }
.bandeau-salon .salon-infos { color: #a7f3d0; font-size: 0.72rem; }
.bandeau-salon .salon-btn {
  font: inherit;
  font-weight: 700;
  padding: 6px 11px;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.12);
  color: #cffafe;
  cursor: pointer;
}
.bandeau-salon .salon-btn:hover { background: rgba(34, 211, 238, 0.24); }

/* === Consignes : selon le pointeur === */
.texte-tactile { display: none; }
@media (pointer: coarse) {
  .texte-souris { display: none; }
  .texte-tactile { display: inline; }
}
.aide-controles {
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 70vw;
  font-size: 0.78rem;
  text-align: center;
  color: rgba(230, 242, 236, 0.6);
  background: rgba(10, 25, 18, 0.5);
  padding: 5px 14px;
  border-radius: 20px;
  pointer-events: none;
}
.attente-depart {
  position: fixed;
  top: 34%; left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 88vw;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(10, 25, 18, 0.9);
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: #fef9c3;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

/* === Bouton d'accélération (écrans tactiles, pouce gauche) === */
.btn-boost {
  display: none;
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 11;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 2px solid rgba(250, 204, 21, 0.7);
  background: rgba(10, 25, 18, 0.72);
  color: #fde047;
  font-size: 2rem;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-boost:active { background: rgba(250, 204, 21, 0.28); }
@media (pointer: coarse) {
  .btn-boost { display: block; }
}

/* === Overlays === */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe` : sur un écran bas (téléphone couché), la carte part du haut et défile
     au lieu d'être rognée des deux côtés. */
  justify-content: safe center;
  gap: 12px;
  overflow-y: auto;
  /* Assez clair pour laisser voir l'arène qui continue derrière. */
  background: rgba(5, 12, 9, 0.6);
  padding: 20px;
}
#ecran-connexion { background: rgba(5, 12, 9, 0.86); }
#overlay-fin { z-index: 55; }
#panneau-skins { z-index: 60; }

.carte-overlay {
  position: relative;
  width: 100%;
  max-width: 400px;
  flex: 0 0 auto;
  text-align: center;
  background: rgba(12, 28, 20, 0.96);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 20px;
  padding: 26px 24px;
}
.carte-overlay h1 {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.carte-overlay .score-final {
  font-size: 2.8rem;
  font-weight: 800;
  color: #f0fdf4;
  line-height: 1;
  margin: 6px 0 4px;
}
.carte-overlay .score-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6ee7b7;
  margin-bottom: 12px;
}
.carte-overlay .msg { color: #a7f3d0; font-size: 0.92rem; margin-bottom: 8px; min-height: 1.2em; }
.carte-overlay .msg-secondaire { color: #86a89a; font-size: 0.82rem; margin: 8px 0 0; }
.carte-overlay .msg-secondaire a, .liens-fin a, .ligne-rang a, .invitation-compte a { color: #86efac; }
.bilan-vie { color: #86a89a; font-size: 0.82rem; margin-bottom: 10px; min-height: 1em; }
.ligne-record { color: #fde68a; font-size: 0.88rem; font-weight: 700; margin-bottom: 8px; }
.ligne-rang { color: #d1fae5; font-size: 0.88rem; margin-bottom: 10px; line-height: 1.5; }
.ligne-rang strong { color: #fde68a; }
.invitation-compte {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #d1fae5;
  padding: 9px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.3);
}
.liens-fin { margin-top: 14px; font-size: 0.84rem; color: #86a89a; }
.liens-fin a { font-weight: 700; text-decoration: none; }
.liens-fin a:hover { text-decoration: underline; }

.btn {
  display: inline-block;
  padding: 11px 24px;
  min-height: 44px;
  border: none;
  border-radius: 11px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  color: #06210f;
  transition: filter 0.15s, transform 0.15s;
}
.btn-primary { background: #22c55e; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #d1fae5;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }
.actions-overlay { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

.spinner {
  width: 34px; height: 34px;
  margin: 0 auto 14px;
  border: 3px solid rgba(74, 222, 128, 0.2);
  border-top-color: #4ade80;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pied de page de l'écran de fin : sous la carte, discret */
.overlay > footer {
  flex: 0 0 auto;
  max-width: 400px;
  text-align: center;
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.7;
}
.overlay > footer a { color: #6ee7b7; text-decoration: none; }
.overlay > footer a:hover { color: #4ade80; }

/* Podium de fin de manche */
.podium-manche { list-style: none; margin: 6px 0 12px; }
.podium-manche li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
  color: #d1fae5;
}
.podium-manche li.moi { background: rgba(74, 222, 128, 0.16); color: #bbf7d0; font-weight: 700; }
.podium-manche .nom { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-manche .pts { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Apparence du serpent */
.fermer-croix {
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a7f3d0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.fermer-croix:hover { background: rgba(255, 255, 255, 0.1); }
.titre-section {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6ee7b7;
  margin: 14px 0 8px;
  text-align: left;
}
.liste-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-couleur {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  color: #d1fae5;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
}
.pastille-couleur.choisi { border-color: #fff; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.8); }
.pastille-couleur:disabled { opacity: 0.4; cursor: not-allowed; }
.liste-skins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.carte-skin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #d1fae5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.carte-skin strong { font-size: 0.88rem; }
.carte-skin span { font-size: 0.72rem; color: #86a89a; line-height: 1.35; }
.carte-skin.choisi { border-color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.carte-skin.verrouille { opacity: 0.6; cursor: not-allowed; }

/* === Limite quotidienne des visiteurs ===
   Le bloc du module partagé est inséré dans le flux de la page : sous la toile
   plein écran il était invisible. On le place au centre, au-dessus de tout. */
body.limite-atteinte #cta-limite-jour {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  width: min(92vw, 440px);
  max-height: 92vh;
  overflow-y: auto;
  margin: 0 !important;
  background: #0c1c14 !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 100vmax rgba(5, 12, 9, 0.8);
}
.limite-retour { margin: 14px 0 0; font-size: 0.84rem; }
.limite-retour a { color: #86efac; }

/* === Écrans étroits et téléphones couchés === */
@media (max-width: 700px), (max-height: 480px) {
  .barre-haut { padding: 8px 10px; gap: 6px; }
  .barre-haut .titre { display: none; }
  .hud { top: 52px; left: 10px; gap: 5px; }
  .hud .bloc { min-width: 46px; padding: 3px 7px; }
  .hud .bloc .val { font-size: 0.92rem; }
  .hud .bloc .lbl { font-size: 0.52rem; }
  .bonus-actifs { top: 96px; left: 10px; }
  .fil-evenements { top: 128px; left: 10px; }
  .panneau-classement { width: 150px; top: 58px; padding: 7px 9px; }
  .panneau-classement li { font-size: 0.72rem; padding: 1px 0; }
  /* Le classement ne garde que les cinq premiers : dix lignes mangeaient l'écran. */
  .panneau-classement li:nth-child(n+6) { display: none; }
  .aide-controles { font-size: 0.68rem; }
  .carte-overlay { padding: 16px 16px; }
  .carte-overlay h1 { font-size: 1.2rem; margin-bottom: 4px; }
  .carte-overlay .score-final { font-size: 2rem; }
  .carte-overlay .score-lbl { margin-bottom: 6px; }
}
/* Fenêtre très étroite : la ligne Longueur / Rang / Éliminés / En jeu / Temps
   occupe toute la largeur, le classement descend d'un cran pour ne pas passer
   dessus (les bonus et le fil restent à gauche, plus étroits que 46 %). */
@media (max-width: 600px) {
  .panneau-classement { top: 94px; }
}
@media (max-height: 480px) {
  .fil-evenements { display: none; }
  /* La carte commence sous la barre de compte, qui reste au-dessus de tout. */
  .overlay { padding: 56px 10px 10px; gap: 6px; }
}

/* === Blocage portrait (téléphones uniquement) ===
   Garder la media query synchronisée avec MQ_BLOCAGE_PORTRAIT dans js/main.js.
   max-width 600px : exclut les tablettes, jouables en portrait. */
.overlay-rotation {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0a1410;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  .overlay-rotation { display: flex; }
  /* Le retour à l'accueil, le son et le plein écran restent accessibles par-dessus
     cet écran, sous la barre de compte (deux lignes en connecté sur 360 px). Le
     choix de l'apparence s'ouvrirait dessous : il est masqué. */
  .barre-haut { z-index: 201; top: 58px; }
  .barre-haut #btn-skins { display: none; }
}
.rotation-icone {
  display: inline-block;
  font-size: 3.2rem;
  margin-bottom: 14px;
  animation: rotation-tourne 1.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes rotation-tourne {
  0%, 20% { transform: rotate(0); }
  60%, 100% { transform: rotate(90deg); }
}
.overlay-rotation p {
  color: #a7f3d0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}