/* === Blobs en Chaîne — page de jeu ===
   Le socle (conteneur, boutons, overlay, barre du haut, classes utilitaires)
   vient de fichiers-partages-des-jeux/css/jeu.css, chargé juste avant par le
   proxy. On ne décrit ici que ce qui est propre au jeu. */

.cache {
  display: none !important;
}

/* ---------- Écran de préparation ---------- */

#setup h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.setup-intro {
  color: var(--texte-doux);
  line-height: 1.6;
  margin-bottom: 22px;
  text-align: left;
}

.setup-bloc {
  margin-bottom: 20px;
  text-align: left;
}

.setup-bloc h2 {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texte-faible);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.choix-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.choix-niveau {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.carte-mode, .carte-niveau {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.carte-mode:hover, .carte-niveau:hover {
  border-color: var(--color-mid);
}

.carte-mode.actif, .carte-niveau.actif {
  border-color: var(--color-light);
  background: color-mix(in srgb, var(--color-dark) 22%, var(--surface-2));
}

.mode-glyphe {
  font-size: 1.6rem;
  line-height: 1;
}

.mode-nom, .niveau-nom {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.mode-resume, .niveau-resume {
  font-size: 0.82rem;
  color: var(--texte-doux);
  line-height: 1.4;
}

.btn-lancer {
  margin: 18px 0 6px;
  min-width: 240px;
}

.message-partie {
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.message-partie.erreur {
  color: #fca5a5;
}

/* Liste d'arguments de la page du duel : même trame que l'aide, mais dans un
   bloc de préparation. */
.liste-points {
  list-style: none;
  padding: 0;
}

.liste-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

.liste-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-mid);
}

.liste-points strong {
  color: var(--texte);
}

.note-compte {
  font-size: 0.85rem;
  color: var(--texte-faible);
  margin-top: 8px;
}

/* ---------- Salons du duel en ligne ---------- */

/* Publique ou privée : deux façons d'ouvrir une partie, présentées comme les
   autres choix du jeu (mêmes cartes que le mode et le niveau en solo). */
.visibilite-choix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.visibilite-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.visibilite-btn:hover {
  border-color: var(--color-mid);
}

.visibilite-btn.actif {
  border-color: var(--color-light);
  background: color-mix(in srgb, var(--color-dark) 22%, var(--surface-2));
}

.visibilite-nom {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.visibilite-resume {
  font-size: 0.8rem;
  color: var(--texte-doux);
  line-height: 1.4;
}

.rejoindre-code {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* Un code se lit lettre par lettre : chasse fixe, bien espacé, en capitales.
   Largeur calée sur ses quatre caractères — un champ pleine largeur pour quatre
   lettres donne l'impression qu'on en attend beaucoup plus. */
.champ-code {
  flex: 0 0 180px;
  min-width: 0;
  padding: 12px 14px;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  background: var(--surface-0);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  color: var(--texte);
}

.champ-code:focus {
  outline: none;
  border-color: var(--color-light);
}

.champ-code::placeholder {
  color: var(--texte-faible);
  letter-spacing: 0.2em;
}

.liste-titre {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texte-faible);
  margin-bottom: 8px;
}

.liste-salons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.salon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.salon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.salon-pseudo {
  font-weight: 700;
  color: var(--texte);
}

.salon-detail {
  font-size: 0.78rem;
  color: var(--texte-faible);
}

.aucune-partie {
  padding: 14px 12px;
  font-size: 0.88rem;
  color: var(--texte-doux);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}

/* Le code de sa propre partie, à dicter : c'est l'information la plus lue de
   l'écran d'attente, elle est traitée en conséquence. */
.bloc-code {
  margin: 18px auto;
  max-width: 380px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
}

.bloc-code-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texte-faible);
  margin-bottom: 6px;
}

.bloc-code-valeur {
  font-family: 'Courier New', monospace;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-light);
  margin: 0 0 8px;
}

.bloc-code-aide {
  font-size: 0.84rem;
  color: var(--texte-doux);
  line-height: 1.45;
  margin: 0;
}

/* Écran d'attente : les trois blobs reprennent ceux du bandeau, immobiles. */
.attente-blobs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.setup-aide {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.setup-aide h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 16px 0 8px;
}

.setup-aide ul {
  list-style: none;
  padding: 0;
}

.setup-aide li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

.setup-aide li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-mid);
}

.setup-aide strong {
  color: var(--texte);
}

/* ---------- Tableau de bord ---------- */

.hud {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hud-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 88px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.hud-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texte-faible);
}

.hud-valeur {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--texte);
}

/* Barre d'outils de la page : au-dessus de tout le reste et visible sur chaque
   écran, pour que le réglage du son soit atteignable avant d'entrer en partie. */
.barre-outils {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.btn-son {
  min-width: 44px;
  padding: 7px 12px;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
}

.btn-son:hover {
  border-color: var(--color-mid);
}

.btn-son[aria-pressed="false"] {
  opacity: 0.55;
}

/* La jauge de gris est la seule information qui change de couleur : quand elle
   s'allume, il reste un tour pour riposter. */
.hud-gris {
  letter-spacing: 2px;
  color: var(--texte-doux);
}

.hud-gris.menace {
  color: var(--color-accent);
}

/* ---------- Plateaux ---------- */

.plateaux {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

.plateau-colonne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.plateau-cadre {
  position: relative;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  line-height: 0;
  touch-action: none;
}

.plateau-cadre canvas {
  display: block;
  border-radius: 4px;
}

/* La colonne centrale ne porte que l'aperçu : elle sépare les deux plateaux,
   qui restent alignés sur la même ligne de fond. */
.plateau-cote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}

.apercu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.apercu-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texte-faible);
}

#apercu-suivant {
  display: block;
}

.plateau-nom {
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin: 0;
}

.plateau-info {
  font-size: 0.78rem;
  color: var(--texte-faible);
  margin: 0;
}

.voile-pause {
  position: absolute;
  inset: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 6, 24, 0.86);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--texte);
  line-height: 1;
}

.voile-pause.visible {
  display: flex;
}

/* ---------- Commandes tactiles ---------- */

/* Affichées seulement là où elles servent : au clavier, elles n'apporteraient
   qu'une rangée de boutons à ne jamais utiliser. */
.commandes-tactiles {
  display: none;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.btn-commande {
  flex: 1;
  max-width: 76px;
  padding: 14px 0;
  font-size: 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  color: var(--texte);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.btn-commande.actif {
  background: color-mix(in srgb, var(--color-dark) 40%, var(--surface-2));
  border-color: var(--color-light);
}

@media (hover: none) and (pointer: coarse) {

  .commandes-tactiles {
    display: flex;
  }
}

.btn-abandon {
  margin-top: 16px;
}

/* ---------- Fin de partie ---------- */

.fin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 16px 0;
  text-align: left;
}

.stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.86rem;
}

.stat-nom {
  color: var(--texte-doux);
}

.stat-valeur {
  font-weight: 700;
  color: var(--texte);
}

/* L'état de la vérification a sa propre place dans la carte de fin : le
   message de l'écran de préparation est recouvert par l'overlay et ne serait
   jamais lu. */
.fin-validation {
  font-size: 0.86rem;
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: 5px;
  border-left: 3px solid var(--line-forte);
  background: var(--surface-2);
  text-align: left;
}

.fin-validation.attente {
  color: var(--texte-doux);
}

.fin-validation.ok {
  color: #86efac;
  border-left-color: #22c55e;
}

.fin-validation.neutre {
  color: var(--texte-doux);
  border-left-color: var(--color-mid);
}

.fin-validation.alerte {
  color: #fcd34d;
  border-left-color: #b45309;
}

.cta-inscription {
  margin: 12px 0;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cta-inscription p {
  font-size: 0.88rem;
  color: var(--texte-doux);
  margin-bottom: 10px;
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {

  .choix-niveau {
    grid-template-columns: repeat(2, 1fr);
  }

  .plateaux {
    gap: 10px;
  }

  .plateau-cote {
    gap: 10px;
  }

  .hud-bloc {
    min-width: 72px;
    padding: 6px 8px;
  }

  .hud-valeur {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {

  .choix-mode {
    grid-template-columns: 1fr;
  }

  .fin-stats {
    grid-template-columns: 1fr;
  }

  #setup h1 {
    font-size: 1.35rem;
  }
}