/* defi-du-jour.php — règles propres à cette page.
   L'habillage commun vient de fichiers-partages-des-jeux/css/jeu.css. */

/* Habillage commun (body, #app, top-bar, boutons, info-bar, overlay,
   classement) : fichiers-partages-des-jeux/css/jeu.css.
   Ici, uniquement ce qui est propre a ce jeu. */
#app {
  position: relative;
  z-index: 1;
  padding: 32px 28px 28px;
  max-width: 800px;
}

/* Expert (30 colonnes) : la zone s'élargit, les blocs latéraux étant masqués
   pendant la partie. Pas de transition sur max-width : la grille est mesurée
   juste après l'ajout de la classe, et pendant l'animation elle se calait sur
   l'ancienne largeur (cases de 23 px sur tous les écrans, 727 px de grille dans
   une zone de 960). */
#app.expert-actif {
  max-width: min(1240px, calc(100vw - 32px));
}

/* La zone Expert élargie passerait sous les blocs latéraux fixes, qui
   reviennent en fin de partie : ils restent masqués tant que l'Expert est
   affiché. */
body.defi-expert .bandeau-infos-wrap,
body.defi-expert .bloc-jeux-une-wrap {
  display: none !important;
}

.header {
  text-align: center;
  margin-bottom: 32px;
}

.header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-display);
  color: #f0f3f6;
}

.header .date-jour {
  font-size: 1rem;
  color: var(--texte-doux);
}

/* Intro du mode défi */
.intro-defi {
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  text-align: left;
}

.intro-defi-titre {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte);
  margin-bottom: 6px;
}

.intro-defi-text {
  font-size: 0.85rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

/* Mode jeu actif : masquer intro, cartes, classement, blocs latéraux */
body.mode-jeu-actif .intro-defi, body.mode-jeu-actif .defi-intro, body.mode-jeu-actif #defis-grille, body.mode-jeu-actif #date-jour, body.mode-jeu-actif .classement-section, body.mode-jeu-actif .bandeau-infos-wrap, body.mode-jeu-actif .bloc-jeux-une-wrap {
  display: none !important;
}

/* Partie terminée : laisser réapparaître classement + blocs latéraux, masquer juste intro + cartes */
body.partie-terminee .intro-defi, body.partie-terminee .defi-intro, body.partie-terminee #defis-grille, body.partie-terminee #date-jour {
  display: none !important;
}

.retry-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.btn-voir-defis {
  display: inline-block;
}

@media (min-width: 1280px) {

  .btn-voir-defis {
    display: none;
  }
}

.back-link {
  margin-bottom: 20px;
  text-align: left;
  align-self: flex-start;
}

/* Cartes difficulté */
.defis-grille {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.defi-carte {
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  width: 180px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}

.defi-carte:hover {
  background: color-mix(in srgb, var(--color-light) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--color-light) 45%, var(--line-forte));
}

/* Difficulte choisie : sans cet ecart, la carte selectionnee est identique aux
   autres et on ne sait plus sur quoi on a cliqué. */
.defi-carte.active {
  background: color-mix(in srgb, var(--color-light) 14%, var(--surface-2));
  border-color: var(--color-light);
}

.defi-carte.gagne {
  border-color: rgba(16, 185, 129, 0.5);
  cursor: default;
}

.defi-carte.gagne:hover {
  transform: none;
  background: var(--surface-2);
  border-color: rgba(16, 185, 129, 0.5);
}

.defi-carte.perdu {
  border-color: rgba(248, 113, 113, 0.5);
  cursor: default;
}

.defi-carte.perdu:hover {
  transform: none;
  background: var(--surface-2);
  border-color: rgba(248, 113, 113, 0.5);
}

.defi-carte.verrouille {
  opacity: 0.5;
  cursor: not-allowed;
}

.defi-carte-icone {
  font-size: 2rem;
  margin-bottom: 8px;
}

.defi-carte h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--texte);
  margin-bottom: 4px;
}

.defi-carte .dims {
  font-size: 0.78rem;
  color: var(--texte-faible);
  margin-bottom: 8px;
}

.defi-carte .defi-statut {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
}

.defi-statut.non-tente {
  background: var(--surface-2);
  color: var(--texte);
}

.defi-statut.en-cours {
  background: rgba(234, 179, 8, 0.2);
  color: #d2973a;
}

.defi-statut.gagne {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.defi-statut.perdu {
  background: rgba(248, 113, 113, 0.2);
  color: #d07070;
}

/* Non connecté */
.non-connecte {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface-2);
  border-radius: 8px;
  margin-bottom: 32px;
}

.non-connecte p {
  color: var(--texte-doux);
  margin-bottom: 16px;
  font-size: 0.95rem;
}

/* Zone de jeu */
#zone-jeu {
  display: none;
  margin-bottom: 32px;
  /* Le défilement automatique au lancement laisse la place de la barre de
     compte fixe : sans ça, elle recouvrait le compteur de mines et le chrono. */
  scroll-margin-top: 72px;
}

.jeu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.jeu-info {
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.jeu-timer {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-light);
  font-variant-numeric: tabular-nums;
}

.mines-restantes {
  font-size: 0.9rem;
  font-weight: 700;
  color: #d07070;
}

/* Grille démineur */
/* Sur mobile, la grille va d'un bord de l'écran à l'autre (elle perdait 32 px
   de chaque côté en marges) ; en-tête et textes gardent les leurs. */
@media (max-width: 600px) {

  .grille-container {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.grille-container {
  overflow-x: auto;
  padding-bottom: 8px;
  text-align: center;
}

/* Fond du quadrillage : c'est lui qu'on voit dans le gap de 1 px. Le laisser a
   --surface-2 le rendrait invisible entre deux cases fermees. */
.grille-demineur {
  display: inline-grid;
  gap: 1px;
  background: var(--line);
  border: 2px solid var(--line-forte);
  border-radius: 8px;
  padding: 2px;
  user-select: none;
}

.cellule {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Memes conventions que la grille solo (demineur-jeu.css) : la case fermee a du
   relief, la case ouverte est a plat et plus sombre. C'est la difference de FOND
   qui porte l'information, jamais l'ombre seule - une ombre interne ne se voit
   pas a 28 px. */
.cellule.cachee {
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08), inset -1px -1px 0 rgba(0, 0, 0, 0.25);
}

.cellule.cachee:hover {
  background: color-mix(in srgb, var(--color-light) 14%, var(--surface-2));
  border-color: var(--color-light);
}

.cellule.cachee:active {
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.06), inset 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.cellule.revelee {
  background: #000;
  border: 1px solid var(--line);
  cursor: default;
  box-shadow: none;
}

/* Une grille avancee compte des dizaines de drapeaux : le marqueur, c'est
   l'emoji, pas la couleur de la case. */
.cellule.drapeau {
  background: color-mix(in srgb, var(--color-light) 6%, var(--surface-2));
}

.cellule.mine {
  background: color-mix(in srgb, #d07070 20%, var(--surface-0));
  border: 1px solid #6b3238;
  box-shadow: none;
  animation: mine-pop 0.3s ease-out;
}

.cellule.mine-explosee {
  background: #7a2732;
  border-color: #a33a48;
}

@keyframes mine-pop {

  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Memes chiffres qu'en solo : le code couleur historique du demineur est une
   information de jeu, il doit etre identique d'un mode a l'autre. */
.cellule.v1 {
  color: #6f9fd8;
}

.cellule.v2 {
  color: #64ab7c;
}

.cellule.v3 {
  color: #d07070;
}

.cellule.v4 {
  color: #9b8ac9;
}

.cellule.v5 {
  color: #b08641;
}

.cellule.v6 {
  color: #59a8b5;
}

.cellule.v7 {
  color: var(--texte);
}

.cellule.v8 {
  color: var(--texte-doux);
}

/* Case de départ sûre : clignote au lancement tant qu'aucune case n'est ouverte */
.cellule.case-depart {
  animation: case-depart-blink 1s ease-in-out infinite;
  z-index: 2;
}

@keyframes case-depart-blink {

  0%, 100% {
    background: #1d4030;
    border-color: #2f7f52;
  }

  50% {
    background: #2a6244;
    border-color: #57b483;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cellule.case-depart {
    animation: none;
    background: #26583d;
    border-color: #57b483;
  }
}

/* Message fin */
.msg-fin {
  text-align: center;
  padding: 20px;
  margin-top: 16px;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  display: none;
}

/* Clics non pris en compte (serveur injoignable) : avant, ils disparaissaient sans un mot. */
.msg-reseau {
  text-align: center;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.msg-reseau[hidden] {
  display: none;
}

.msg-fin.victoire {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.msg-fin.defaite {
  background: rgba(248, 113, 113, 0.15);
  color: #d07070;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Classement du jour : plus rien ici. Le cadre vient de `.classement-section` et les
   onglets de `.onglet-diff` (jeu.css), tout l'intérieur - podium, lignes, avatars - de
   classement-bloc.css, partagé avec la page de classement.
   Ce qui vivait ici donnait à ce jeu un classement du jour différent des autres : des
   onglets en pastilles au lieu des onglets soulignés du réseau, et surtout un
   `.podium { display: flex }` qui annulait la grille plaçant le vainqueur au centre.
   Ne rien remettre ici qui décrive un onglet, une ligne, un podium ou un avatar. */

.settings-toggle {
  background: var(--surface-2);
  border: 2px solid var(--line-forte);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}

.settings-toggle:hover {
  background: var(--surface-2);
}

/* Mode drapeau et loupe : mêmes commandes qu'en solo (js/demineur-plateau.js). */
.flag-toggle,
.loupe-toggle {
  background: var(--surface-2);
  border: 2px solid var(--line-forte);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 1.05rem;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s, border-color 0.15s;
}

.flag-toggle.active,
.loupe-toggle.active {
  background: color-mix(in srgb, var(--color-light) 18%, var(--surface-2));
  border-color: var(--color-light);
}

.loupe-toggle[hidden] {
  display: none;
}

/* Au doigt, 44 px minimum. */
@media (pointer: coarse) {

  .flag-toggle,
  .loupe-toggle,
  .settings-toggle {
    min-width: 48px;
    min-height: 44px;
  }
}

.settings-panel {
  display: none;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: left;
}

.settings-panel.visible {
  display: block;
}

.settings-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--texte-doux);
  cursor: pointer;
  padding: 4px 0;
}

.settings-panel input[type="checkbox"] {
  accent-color: var(--color-mid);
  width: 16px;
  height: 16px;
}

.settings-info {
  font-size: 0.75rem;
  color: var(--texte-faible);
  margin-top: 6px;
  line-height: 1.4;
}

.settings-info a {
  color: var(--texte-doux);
  text-decoration: none;
}

.settings-info a:hover {
  color: var(--color-light);
}

@media (max-width: 480px) {

  #app {
    padding: 24px 14px 20px;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .cellule {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }

  .defi-carte {
    width: 100%;
  }
}