/*
 * CosmoBlast — zone de jeu (mission, entraînement, défi du jour).
 * Balisage : includes/jeu-html.php. Toutes les classes sont préfixées cb- pour
 * ne jamais croiser celles du socle partagé (jeu.css, classement-bloc.css).
 */

.cb-jeu {
  width: 100%;
  /* La toile est en 16/9 : sa largeur est bornée par la HAUTEUR disponible,
     sinon un téléphone tenu à l'horizontale voit le bas du jeu passer sous
     l'écran. 64 px = la barre d'état et ses marges. */
  max-width: min(960px, calc((100vh - 64px) * 16 / 9));
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
}
@supports (height: 100dvh) {
  .cb-jeu { max-width: min(960px, calc((100dvh - 64px) * 16 / 9)); }
}

/* --- Barre d'état ------------------------------------------------------- */
.cb-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #cbd5e1;
}
.cb-hud-gauche, .cb-hud-droite { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cb-vies { display: flex; gap: 4px; align-items: center; min-height: 18px; }
.cb-vie {
  width: 22px;
  height: 18px;
  background: url('../images/sprites/playerLife1_blue.png') center / contain no-repeat;
}
.cb-niveau { color: #a78bfa; }
.cb-score { color: #22d3ee; font-variant-numeric: tabular-nums; }
.cb-bonus {
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fde68a;
}
.cb-bonus[data-genre="bouclier"] {
  background: rgba(6, 182, 212, 0.16);
  border-color: rgba(6, 182, 212, 0.4);
  color: #67e8f9;
}
.cb-bonus[hidden] { display: none; }
.cb-outil {
  min-width: 38px;
  min-height: 32px;
  padding: 2px 8px;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.cb-outil:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.cb-outil[hidden] { display: none; }
@media (pointer: coarse) {
  .cb-outil { min-width: 46px; min-height: 42px; font-size: 1.15rem; }
  .cb-hud-droite { gap: 8px; }
}

/* --- Toile -------------------------------------------------------------- */
.cb-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: #06061a;
}
#ecran {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* --- Manche tactile ----------------------------------------------------- */
.cb-manche {
  position: absolute;
  display: none;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(167, 139, 250, 0.45);
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
}
.cb-manche.actif { display: block; }
.cb-manche-bouton {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #c4b5fd;
  transform: translate(-50%, -50%);
}

/* --- Croix directionnelle (téléphone tenu debout) ----------------------- */
.cb-croix {
  display: none;
  margin: 14px auto 0;
  width: 230px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.cb-croix-rang { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.cb-croix-btn {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: #15122e;
  color: #c4b5fd;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cb-croix-btn.actif, .cb-croix-btn:active { background: #5b3fc4; }
.cb-aide-tactile {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 0 8px;
}
@media (pointer: coarse) and (orientation: portrait) {
  .cb-croix, .cb-aide-tactile { display: block; }
}

/* --- Écrans par-dessus la toile ----------------------------------------- */
.cb-voile {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(6, 6, 20, 0.92);
  overflow: auto;
}
.cb-voile[hidden] { display: none; }
.cb-carte {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 26px;
  text-align: center;
  background: #17152f;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 14px;
}
.cb-carte h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #c4b5fd;
}
.cb-carte p { margin: 0 0 6px; color: #cbd5e1; line-height: 1.45; font-size: 0.95rem; }
.cb-carte p.cb-discret { color: #94a3b8; font-size: 0.85rem; }
.cb-carte kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
}
.cb-record strong, .cb-statut strong { color: #fde68a; }
.cb-message { min-height: 1.2em; color: #fcd34d; font-size: 0.85rem; }
.cb-message:empty { display: none; }
.cb-score-final {
  margin: 8px 0 4px !important;
  font-size: 2rem !important;
  font-weight: 900;
  color: #22d3ee !important;
  font-variant-numeric: tabular-nums;
}
.cb-score-final small { font-size: 0.9rem; font-weight: 600; color: #94a3b8; }
.cb-statut { min-height: 1.4em; font-size: 0.92rem !important; }
.cb-statut:empty { display: none; }
.cb-statut.attente { color: #94a3b8; }
.cb-statut.ok { color: #bbf7d0; }
.cb-statut.erreur { color: #fca5a5; }
.cb-statut a, .cb-lien-compte { color: #c4b5fd; font-weight: 700; }

.cb-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #8b5cf6;
  border-radius: 10px;
  background: #7c4ee6;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.cb-btn:hover { background: #8f66f0; }
.cb-btn:disabled { opacity: 0.5; cursor: wait; }
.cb-btn.secondaire { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); color: #e2e8f0; }
.cb-btn.secondaire:hover { background: rgba(255, 255, 255, 0.14); }
.cb-btn[hidden] { display: none; }

.cb-fermer {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.cb-fermer:hover { color: #fff; }
.cb-retour-resultat {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 8;
  transform: translateX(-50%);
}

/* Entraînement, sous le bouton de la mission */
.cb-entrainement {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cb-entrainement-titre { font-size: 0.85rem !important; font-weight: 700; color: #a5b4fc !important; }
.cb-entrainement-choix { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 0.9rem; }
.cb-entrainement-choix select {
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #0f0d24;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.9rem;
}
.cb-case { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.cb-case input { width: 18px; height: 18px; }

/* Choix d'une amélioration entre deux niveaux */
.cb-ameliorations { display: grid; gap: 8px; margin: 10px 0 2px; }
.cb-amelioration {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  text-align: left;
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.14);
  color: #e2e8f0;
  font-family: inherit;
  cursor: pointer;
}
.cb-amelioration:hover, .cb-amelioration:focus-visible { background: rgba(139, 92, 246, 0.3); }
.cb-amelioration-nom { font-weight: 800; font-size: 0.95rem; }
.cb-amelioration-effet { grid-column: 1; font-size: 0.8rem; color: #a5b4cb; }
.cb-amelioration-crans { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 5px; }
.cb-cran { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fde68a; }
.cb-cran.plein { background: #fde68a; }

/* Selon l'appareil : une seule des deux consignes de pilotage */
.cb-tactile-seul, .cb-conseil-portrait { display: none; }
@media (pointer: coarse) {
  .cb-clavier-seul { display: none; }
  .cb-tactile-seul { display: block; }
  .cb-amelioration kbd { display: none; }
}
.cb-jeu.mode-tactile .cb-clavier-seul { display: none; }
.cb-jeu.mode-tactile .cb-tactile-seul { display: block; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  .cb-conseil-portrait { display: block; }
}

/* Encart « défi du jour » du module partagé, à l'intérieur de la carte de fin */
.cb-carte #cta-defi-du-jour { margin: 10px 0; padding: 12px; }
.cb-carte .cta-ddj-btn { border-radius: 8px; font-weight: 700; }
.cb-carte .partage-score { margin-top: 8px; }

/* Écran de fin sur ordinateur : avec le rang, l'encart du défi, le partage et
   quatre boutons, la carte dépassait la toile d'un portable (540 px de haut).
   On resserre ce qu'elle contient plutôt que de la faire défiler. */
#voile-fin .cb-carte { padding-top: 14px; padding-bottom: 14px; }
#voile-fin .cb-carte h2 { margin-bottom: 4px; }
#voile-fin .cb-score-final { margin: 2px 0 2px !important; }
#voile-fin #cta-defi-du-jour { margin: 6px 0; padding: 8px 12px; }
#voile-fin .cta-ddj-titre { margin-bottom: 2px; }
#voile-fin .cta-ddj-msg { margin-bottom: 8px !important; }
#voile-fin .partage-score { margin-top: 6px; }
#voile-fin .cb-actions { margin-top: 10px; gap: 8px; }
@media (pointer: fine) {
  #voile-fin .cb-btn { min-height: 40px; padding: 8px 18px; }
}

/*
 * Petits écrans et écrans tactiles : les écrans sortent du cadre de la toile
 * et couvrent toute la fenêtre. Ce bloc doit rester APRÈS la règle générale
 * .cb-voile ci-dessus : placé avant, il était annulé par elle et l'écran de
 * fin se retrouvait rogné dans une toile de 190 px de haut.
 */
@media (max-width: 720px), (pointer: coarse) {
  .cb-voile {
    position: fixed;
    z-index: 1000;
    padding: 12px;
  }
  .cb-carte {
    max-width: 380px;
    max-height: calc(100vh - 24px);
    padding: 16px 16px;
  }
  .cb-carte h2 { font-size: 1.25rem; margin-bottom: 8px; }
  .cb-carte p { font-size: 0.9rem; }
  .cb-score-final { font-size: 1.6rem !important; }
}
@supports (height: 100dvh) {
  @media (max-width: 720px), (pointer: coarse) {
    .cb-carte { max-height: calc(100dvh - 24px); }
  }
}

/* --- Plein écran -------------------------------------------------------- */
.cb-jeu:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #06061a;
}
.cb-jeu:fullscreen .cb-hud, .cb-jeu:fullscreen .cb-cadre {
  width: 100%;
  max-width: calc((100vh - 60px) * 16 / 9);
  margin-left: auto;
  margin-right: auto;
}
.cb-jeu:fullscreen .cb-croix, .cb-jeu:fullscreen .cb-aide-tactile { display: none; }