/* === Hexa Conquête — page d'arène (plein écran) ===
   Pas de backdrop-filter ni de box-shadow animé : ces deux-là écroulent le
   framerate sur Firefox quand ils cohabitent avec un canvas plein écran. */

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

html, body {
  height: 100%;
  overflow: hidden;
  background: #12101f;
  font-family: 'Inter', sans-serif;
  color: #ece9f7;
}

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

/* === Barre haute === */
.barre-haut {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  pointer-events: none;
}
/* Les boutons aussi : sans eux, le bouton plein écran (mobile) héritait du
   pointer-events: none de la barre et ne réagissait pas au doigt. */
.barre-haut a, .barre-haut button, .barre-haut .titre { pointer-events: auto; }
.barre-haut .btn-icone {
  font-size: 0.95rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
}
.barre-haut .btn-icone.hidden { display: none; }
.barre-haut .retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.28);
  color: #c4b5fd;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.barre-haut .retour:hover { background: rgba(109, 40, 217, 0.42); }

/* 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 et
   allongeait la barre haute. */
.barre-haut .btn-pleinecran {
  display: none;
  cursor: pointer;
  font-family: inherit;
}
@media (pointer: coarse) {
  .barre-haut .btn-pleinecran { display: inline-flex; }
}
.barre-haut .titre {
  font-size: 1.05rem;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: 0.02em;
}

/* === HUD ===
   Aligné à gauche, à la suite du titre : le coin haut droit est occupé par la
   barre d'authentification partagée, qui passerait par-dessus. */
.hud {
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.hud .bloc {
  min-width: 62px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.22);
}
.hud .bloc .val { font-size: 1.1rem; font-weight: 800; color: #f5f3ff; line-height: 1.1; }
.hud .bloc .lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #a78bfa; }

/* === Jauge de progression vers le règne === */
/* Fond opaque obligatoire : la jauge flotte au-dessus du terrain, et son label
   devient illisible dès qu'un territoire clair passe dessous. */
.jauge-wrap {
  position: fixed;
  top: 64px; left: 16px;
  z-index: 10;
  width: 190px;
  max-width: 42vw;
  padding: 7px 10px 5px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.22);
  pointer-events: none;
}
.jauge-fond {
  height: 8px;
  border-radius: 6px;
  background: rgba(8, 6, 18, 0.9);
  border: 1px solid rgba(167, 139, 250, 0.22);
  overflow: hidden;
}
.jauge-part {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.25s linear;
}
.jauge-part.pleine { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.jauge-lbl {
  display: block;
  margin-top: 4px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(196, 181, 253, 0.75);
}

/* === 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 motif, le HUD et le bandeau du règne.
   Elle revient dès qu'un de ces écrans s'affiche. */
body:not(:has(> #ecran-connexion:not(.hidden), > #overlay-mort:not(.hidden), > #overlay-fin:not(.hidden), > #cta-limite-jour)) .auth-nav {
  display: none;
}

/* === Bandeau du règne en cours ===
   En haut à droite, à la place de la barre de compte repliée : au centre, il
   passait sur le HUD (ordinateur) ou sur les boutons (téléphone). La largeur
   laissée libre à gauche suit celle de la barre haute (media queries en bas). */
.bandeau-roi {
  position: fixed;
  top: 10px; right: 12px;
  max-width: calc(100% - 820px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px;
  border-radius: 20px;
  background: rgba(20, 16, 40, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.5);
  pointer-events: none;
  white-space: nowrap;
}
.bandeau-roi.hidden { display: none; }
.bandeau-roi .roi-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; font-weight: 700; color: #fbbf24; }
.bandeau-roi .roi-temps { flex: 0 0 auto; font-size: 0.95rem; font-weight: 800; color: #fef3c7; font-variant-numeric: tabular-nums; }
.bandeau-roi.moi { border-color: rgba(251, 191, 36, 0.9); background: rgba(69, 26, 3, 0.9); }

/* === Classement latéral === */
.panneau-classement {
  position: fixed;
  top: 62px; right: 12px;
  z-index: 10;
  width: 208px;
  max-width: 44vw;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20, 16, 40, 0.8);
  border: 1px solid rgba(167, 139, 250, 0.2);
  pointer-events: none;
}
.panneau-classement h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a78bfa;
  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: #ddd6fe;
}
.panneau-classement li.moi { color: #fbbf24; font-weight: 700; }
.panneau-classement .rang { width: 18px; color: #a78bfa; 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: #c4b5fd; font-variant-numeric: tabular-nums; }

/* === Aide en bas === */
.aide-controles {
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 0.78rem;
  color: rgba(236, 233, 247, 0.55);
  background: rgba(20, 16, 40, 0.5);
  padding: 5px 14px;
  border-radius: 20px;
  pointer-events: none;
  text-align: center;
}

/* === Overlays === */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 18, 0.88);
  padding: 20px;
}
.overlay.hidden { display: none; }

.carte-overlay {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background: rgba(24, 19, 46, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 20px;
  padding: 32px 26px;
}
.carte-overlay h1 {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #a78bfa, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.carte-overlay .score-final {
  font-size: 3rem;
  font-weight: 800;
  color: #f5f3ff;
  line-height: 1;
  margin: 8px 0 4px;
}
.carte-overlay .score-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a78bfa;
  margin-bottom: 14px;
}
.carte-overlay .msg { color: #ddd6fe; font-size: 0.92rem; margin-bottom: 20px; min-height: 1.2em; }
.carte-overlay .msg-secondaire { color: rgba(196, 181, 253, 0.7); font-size: 0.82rem; }

.btn {
  display: inline-block;
  padding: 11px 24px;
  border: none;
  border-radius: 11px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  color: #1a0b3d;
  transition: filter 0.15s, transform 0.15s;
}
.btn-primary { background: #a78bfa; color: #14082e; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ddd6fe;
  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; }

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

.carte-overlay footer {
  margin-top: 20px;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.7;
}
.carte-overlay footer a { color: #c4b5fd; text-decoration: none; }
.carte-overlay footer a:hover { color: #a78bfa; }

/* === Aide et consignes adaptées au pointeur === */
.texte-tactile { display: none; }
@media (pointer: coarse) {
  .texte-souris { display: none; }
  .texte-tactile { display: inline; }
}

/* === Attente du départ : le pion ne part qu'à la première commande === */
.attente-depart {
  position: fixed;
  left: 50%; top: 62%;
  transform: translateX(-50%);
  z-index: 12;
  padding: 9px 18px;
  border-radius: 20px;
  background: rgba(20, 16, 40, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fef3c7;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  max-width: 90vw;
}
.attente-depart.hidden { display: none; }

/* === Totems possédés, sous la jauge ===
   La jauge prend deux lignes avec le temps de manche (64 → 120 px). */
.mes-totems {
  position: fixed;
  top: 128px; left: 16px;
  z-index: 10;
  width: 230px;
  max-width: 42vw;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.35);
  pointer-events: none;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #ddd6fe;
}
.mes-totems.hidden { display: none; }
.mes-totems-titre {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fbbf24;
  margin-bottom: 2px;
}
.mes-totems-ligne { display: block; }
.mes-totems-ligne strong { color: #fef3c7; }

/* === Fil des éliminations (bas gauche) === */
.fil-evenements {
  position: fixed;
  /* Au-dessus de l'aide du bas, qui occupe la ligne du dessous au début. */
  left: 16px; bottom: 52px;
  z-index: 10;
  width: 280px;
  max-width: 44vw;
  list-style: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fil-evenements li {
  font-size: 0.78rem;
  color: #ddd6fe;
  background: rgba(20, 16, 40, 0.82);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  padding: 4px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: fil-entree 0.25s ease-out;
}
.fil-evenements li.moi { color: #fef3c7; border-color: rgba(251, 191, 36, 0.6); }
@keyframes fil-entree {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* === Salon privé : code et partage, en haut au centre === */
.bandeau-salon {
  position: fixed;
  top: 58px; left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  max-width: min(560px, 60vw);
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(20, 16, 40, 0.9);
  border: 1px solid rgba(34, 211, 238, 0.45);
  font-size: 0.8rem;
  color: #ddd6fe;
}
.bandeau-salon.hidden { display: none; }
.bandeau-salon .salon-titre strong { color: #67e8f9; letter-spacing: 0.12em; font-size: 0.95rem; }
.bandeau-salon .salon-infos { color: #a78bfa; font-size: 0.72rem; }
.bandeau-salon .salon-btn {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.12);
  color: #cffafe;
  cursor: pointer;
}
.bandeau-salon .salon-btn:hover { background: rgba(34, 211, 238, 0.24); }
.bandeau-salon .salon-btn.hidden { display: none; }

/* === Tutoriel de la première partie === */
.tuto-bulle {
  position: fixed;
  left: 50%; top: 24%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, 90vw);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(24, 19, 46, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.6);
  color: #f5f3ff;
  font-size: 0.9rem;
  line-height: 1.45;
}
.tuto-bulle.hidden { display: none; }
.tuto-bulle.bravo { border-color: rgba(251, 191, 36, 0.8); }
.tuto-bulle .tuto-passer {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #c4b5fd;
  cursor: pointer;
}
.tuto-bulle.bravo .tuto-passer { display: none; }

/* Records sur l'écran de fin */
.carte-overlay .ligne-record { font-size: 0.82rem; color: #ddd6fe; margin: -8px 0 12px; }
.carte-overlay .ligne-record.battu { color: #fbbf24; font-weight: 700; }
.carte-overlay .ligne-record.hidden { display: none; }

/* === Choix du motif de territoire === */
.liste-skins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}
.choix-skin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: #ddd6fe;
  font-family: inherit;
  cursor: pointer;
}
.choix-skin strong { font-size: 0.85rem; color: #f5f3ff; }
.choix-skin span { font-size: 0.68rem; line-height: 1.3; color: #a78bfa; }
.choix-skin.actif { border-color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.choix-skin.actif span { color: #fbbf24; }
.choix-skin.verrouille { cursor: default; opacity: 0.55; }
.choix-skin:not(.verrouille):hover { background: rgba(124, 58, 237, 0.18); }

/* Lien vers le défi du jour sous l'écran de mort de l'arène */
.carte-overlay .lien-defi { margin-top: 12px; font-size: 0.8rem; color: #fcd9a0; }
.carte-overlay .lien-defi a { color: #fbbf24; font-weight: 700; }
.carte-overlay .lien-defi.hidden,
.carte-overlay .msg-secondaire.hidden,
.carte-overlay .spinner.hidden { display: none; }
.carte-overlay .msg-secondaire a { color: #fbbf24; font-weight: 700; }
.attente-defi { display: block; color: #fbbf24; font-size: 0.82rem; margin-bottom: 3px; }

/* === Bilan de la vie et état de la sauvegarde (écrans de fin) === */
.carte-overlay .bilan-vie { color: #c4b5fd; font-size: 0.82rem; margin: -10px 0 14px; }
.carte-overlay .bilan-vie:empty,
.carte-overlay .etat-sauvegarde:empty { display: none; }
.carte-overlay .etat-sauvegarde { color: #86efac; font-size: 0.8rem; margin: -6px 0 14px; }
.carte-overlay .etat-sauvegarde.erreur { color: #fca5a5; }
.carte-overlay .invitation-compte {
  font-size: 0.84rem;
  color: #fef3c7;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  margin: -4px 0 16px;
}
.carte-overlay .invitation-compte.hidden { display: none; }
.carte-overlay .invitation-compte a { color: #fbbf24; font-weight: 700; }

/* === HUD sous la barre haute ===
   Sous 1200 px, le HUD ne tient plus sur la ligne des boutons à côté du bandeau
   du règne (en haut à droite) : il passe sur une deuxième ligne, à gauche, puis
   la jauge et les totems possédés en dessous, sans se chevaucher. */
@media (max-width: 1199px) {
  .barre-haut .titre { display: none; }
  .hud {
    position: fixed;
    top: 54px; left: 16px;
    gap: 6px;
  }
  .hud .bloc { min-width: 50px; padding: 4px 7px; }
  .hud .bloc .val { font-size: 0.95rem; }
  .hud .bloc .lbl { font-size: 0.56rem; }
  .jauge-wrap { top: 98px; }
  .mes-totems { top: 172px; }
  .bandeau-roi { max-width: calc(100% - 350px); }
}

@media (max-width: 700px) {
  .barre-haut { padding: 8px 10px; gap: 6px; }
  .panneau-classement { width: 148px; top: 58px; }
  .jauge-wrap { width: 130px; }
  .aide-controles { font-size: 0.68rem; max-width: 90vw; }
  .bandeau-roi { max-width: calc(100% - 280px); padding: 6px 12px; gap: 8px; }
  .bandeau-roi .roi-nom { font-size: 0.78rem; }
  .bandeau-roi .roi-temps { font-size: 0.86rem; }
}

/* Fenêtre très étroite : le HUD occupe toute la deuxième ligne, le classement
   descend d'un cran pour ne pas passer dessus. */
@media (max-width: 600px) {
  .panneau-classement { top: 98px; }
  .bandeau-roi { max-width: calc(100% - 260px); }
}

/* === Petites hauteurs (téléphone en paysage) ===
   Classement réduit au top 5 (plus sa propre ligne), écrans de fin compacts et
   poussés sous la barre d'authentification, sans le pied de page, qui les
   rendait plus hauts que l'écran. */
@media (max-height: 520px) {
  .panneau-classement li:nth-child(n+6):not(.moi) { display: none; }
  .overlay { align-items: flex-start; padding-top: 58px; overflow-y: auto; }
  .carte-overlay { padding: 14px 18px; }
  .carte-overlay h1 { font-size: 1.25rem; margin-bottom: 4px; }
  .carte-overlay .score-final { font-size: 2rem; margin: 2px 0; }
  .carte-overlay .score-lbl { margin-bottom: 8px; }
  .carte-overlay .msg { margin-bottom: 10px; }
  .carte-overlay footer { display: none; }
  .attente-depart { top: 70%; }
  /* Le fil remonte au-dessus de l'aide, et se réduit aux deux dernières lignes. */
  .fil-evenements { width: 220px; }
  .fil-evenements li:nth-last-child(n+3) { display: none; }
  .liste-skins { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); margin: 8px 0 10px; }
  .bandeau-salon .salon-infos { display: none; }
  .tuto-bulle { top: 30%; font-size: 0.82rem; }
}

/* Sous 1200 px, le HUD occupe la deuxième ligne à gauche : le bandeau du salon
   descend d'une ligne, au centre, entre la jauge et le classement, en plus
   compact. Sous 600 px il n'y a plus la place : il passe en bas, et le fil des
   éliminations remonte au-dessus. */
@media (max-width: 1199px) {
  .bandeau-salon { top: 100px; max-width: 46vw; font-size: 0.74rem; padding: 4px 8px; }
}
@media (max-width: 600px) {
  .bandeau-salon { top: auto; bottom: 44px; max-width: 94vw; }
  body:has(> #bandeau-salon:not(.hidden)) .fil-evenements { bottom: 124px; }
}

/* === 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: #12101f;
  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 du motif s'ouvrirait dessous : il est masqué, comme le HUD. */
  .barre-haut { z-index: 201; top: 58px; }
  .barre-haut .hud, .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: #ddd6fe;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}