/* === Bloks Mania — pages de jeu (solo, défi du jour, duel) ===
   Le socle (#app, boutons, overlay, 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. La taille des cases du puits
   est calculée par js/main.js selon la place disponible à l'écran. */

.cache {
  display: none !important;
}

/* ---------- Barre d'outils : son et plein écran ----------
   Hors du tableau de bord, pour être atteignable avant d'entrer en partie. */

.barre-outils {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

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

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

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

/* ---------- É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(3, 1fr);
  gap: 12px;
}

.carte-mode {
  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 {
  border-color: var(--color-mid);
}

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

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

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

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

.mode-record {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
}

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

.btn-niveau {
  min-height: 42px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
}

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

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

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

.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;
}

.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;
  background: var(--color-mid);
}

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

.setup-aide kbd {
  display: inline-block;
  padding: 0 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  background: var(--surface-0);
  border: 1px solid var(--line-forte);
  border-radius: 4px;
  color: var(--color-light);
}

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

.hud {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

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

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

.hud-valeur {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn-hud {
  min-width: 44px;
  font-size: 1.05rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
}

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

/* ---------- Aire de jeu : réserve, puits, suivants ---------- */

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

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

.cote canvas {
  display: block;
  border-radius: 3px;
}

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

.puits-cadre {
  position: relative;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--color-mid) 45%, var(--line-forte));
  border-radius: 6px;
  line-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.puits-cadre canvas {
  display: block;
  border-radius: 3px;
}

.voile-pause {
  position: absolute;
  inset: 3px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(5, 2, 20, 0.86);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--texte);
  line-height: 1.2;
  cursor: pointer;
}

.voile-pause small {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--texte-doux);
}

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

.aide-clavier {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--texte-faible);
  line-height: 1.6;
}

.aide-clavier kbd {
  display: inline-block;
  padding: 0 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  background: var(--surface-0);
  border: 1px solid var(--line-forte);
  border-radius: 4px;
  color: var(--color-light);
}

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

/* ---------- Commandes tactiles ----------
   Affichées seulement sur écran tactile. Deux groupes, un par pouce : les
   déplacements à gauche, les rotations et la chute à droite. Sous le puits en
   portrait, de part et d'autre en paysage. */

.commandes-tactiles {
  display: none;
  justify-content: space-between;
  gap: 14px;
  margin: 10px auto 0;
  max-width: 460px;
}

.groupe-commandes {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-self: flex-start;
  align-content: start;
}

.btn-commande {
  min-height: 52px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  color: var(--texte);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: inherit;
}

.btn-commande small {
  display: block;
  margin-top: 3px;
  font-size: 0.58rem;
  color: var(--texte-faible);
  letter-spacing: 0.04em;
}

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

.btn-commande.large {
  grid-column: span 3;
  min-height: 40px;
  font-size: 0.9rem;
}

@media (hover: none) and (pointer: coarse) {
  .commandes-tactiles {
    display: flex;
  }

  .aide-clavier {
    display: none;
  }
}

/* Téléphone en paysage : la hauteur manque, les commandes passent sur les côtés. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #jeu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "hud aire droite"
      "gauche aire droite"
      "bas bas bas";
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }

  /* Le tableau de bord passe dans la colonne de gauche : le haut de l'écran
     est occupé par la barre du réseau, fixée en haut à droite. */
  #hud {
    grid-area: hud;
    flex-wrap: wrap;
    align-self: end;
    justify-self: center;
    max-width: 210px;
    margin-bottom: 0;
  }

  #hud .hud-bloc {
    flex: 1 1 40%;
    padding: 3px 4px;
  }

  .groupe-gauche { align-self: start; }
  #aire { grid-area: aire; }
  .btn-abandon { grid-area: bas; justify-self: center; }

  .commandes-tactiles {
    display: contents;
  }

  .groupe-gauche { grid-area: gauche; }
  .groupe-droite { grid-area: droite; }

  .groupe-commandes {
    width: 100%;
    max-width: 210px;
    justify-self: center;
  }

  .btn-commande {
    min-height: 56px;
  }
}

/* ---------- Pendant la partie ----------
   Tout ce qui n'est pas le jeu disparaît, pour que le puits entier et les
   commandes tiennent dans la fenêtre sans défiler. */

body.bloks-en-jeu .jeu-banner,
body.bloks-en-jeu #app > footer,
body.bloks-en-jeu .bandeau-infos-wrap,
body.bloks-en-jeu .bloc-jeux-une-wrap {
  display: none !important;
}

body.bloks-en-jeu #app {
  padding-top: 12px;
  padding-bottom: 12px;
}

body.bloks-en-jeu .barre-outils {
  margin-bottom: 6px;
}

@media (max-width: 900px), (max-height: 520px) {
  /* Sur petit écran, la barre du réseau (fixée en haut) recouvrirait le haut du
     puits : elle s'efface le temps de la partie et revient à l'écran de fin. */
  body.bloks-en-jeu .auth-nav {
    display: none !important;
  }
}

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

.titre-reussi {
  color: #86efac !important;
}

.titre-perdu {
  color: #fca5a5 !important;
}

.fin-detail {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin-bottom: 8px;
}

.fin-chiffre {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}

.fin-chiffre.provisoire {
  opacity: 0.6;
}

.fin-record {
  min-height: 1.2em;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-light);
}

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

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

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

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

.fin-validation {
  font-size: 0.86rem;
  margin: 8px 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: 10px 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;
}

#overlay-fin .overlay-box {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ---------- Duel en ligne ---------- */

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

.rejoindre-code {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

/* Un code se lit lettre par lettre : chasse fixe, bien espacé, en capitales. */
.champ-code {
  flex: 0 0 170px;
  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-lien {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  background: var(--surface-0);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  color: var(--texte-doux);
}

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

.bloc-code {
  margin: 18px auto;
  max-width: 420px;
  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 10px;
}

#statut-duel.alerte {
  border-left-color: #f87171;
  color: #fca5a5;
}

.cote-duel .adv-nom {
  margin-top: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--texte-doux);
}

.adv-info {
  font-size: 0.66rem;
  color: var(--texte-faible);
  white-space: nowrap;
}

.adv-info strong {
  color: var(--texte);
}

.hud-menace {
  color: #f87171;
}

/* ---------- Défi du jour ---------- */

.etat-defi {
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--texte-doux);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  text-align: left;
}

.date-defi {
  font-size: 0.85rem;
  color: var(--texte-faible);
  margin-bottom: 14px;
}

.lien-classement-complet {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--color-light);
}

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

@media (max-width: 720px) {
  .choix-mode {
    grid-template-columns: 1fr;
  }

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

  .hud {
    gap: 5px;
  }

  .hud-bloc {
    min-width: 0;
    flex: 1 1 0;
    padding: 5px 4px;
  }

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

  .aire {
    gap: 5px;
  }

  .cote {
    padding: 4px;
  }
}

@media (max-width: 480px) {
  body.bloks-en-jeu #app {
    padding-left: 6px;
    padding-right: 6px;
  }

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

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

  .fin-chiffre {
    font-size: 1.7rem;
  }
}