/* Remplacer l'utilisation de la variable --vh (qui reposait sur 1vh) par
   une hauteur dynamique basée sur 100dvh.  Cela garantit que la page
   occupe toute la hauteur visible, y compris lorsque la barre
   d'adresse mobile disparaît. */
html, body {
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #0b0f14;
  color: #9ec3ff;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
/* Fallback pour les navigateurs ne prenant pas en charge 100dvh */
@supports not (height: 100dvh) {
  html, body {
    min-height: 100vh;
  }
}
#hud{ position:fixed; left:12px; top:12px; display:flex; gap:12px; align-items:center; z-index:10; }
.pill{ padding:8px 12px; border-radius:999px; background:#121a22; border:1px solid #223142; }
#footer{ position:fixed; right:12px; bottom:12px; opacity:.55; font-size:12px; }
#dbg{ position:fixed; left:12px; bottom:12px; background:#121a22; border:1px solid #223142; padding:6px 10px; border-radius:6px; font-size:12px; max-width:60vw; }
#game-root{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

/*
 * Le conteneur du canvas (canvasWrapper) est utilisé pour centrer le
 * canvas et masquer les portions qui dépassent lorsqu'une mise à
 * l'échelle remplissant l'axe dominant est appliquée (voir
 * canvas_scaler.client.js).  En mode portrait, le canvas peut
 * dépasser horizontalement ; overflow:hidden empêche les barres
 * noires latérales et recadre proprement.
 */
#canvasWrapper {
  /* Le conteneur du canvas occupe toute la fenêtre.  On centre
     horizontalement le canvas via justify-content: center, mais on
     aligne verticalement en haut afin que les marges haut/bas
     puissent être calculées en JS.  Le JS se charge ensuite de
     centrer la carte entre le HUD et la barre.  */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #0b0f14;
}

/* Barre de sélection des tours pour le mode solo. Cette barre est
   ajoutée dynamiquement par solo.html et permet au joueur de
   choisir le type de tour à poser. L'opacité des icônes est
   modifiée via le code JS lors de la sélection. */
#tower-selector {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Utiliser des tailles et espacements relatifs pour que la barre de
     sélection s'adapte automatiquement à la largeur de l'écran. La
     fonction clamp définit des bornes minimales et maximales. */
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2vw, 12px);
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid #223142;
  backdrop-filter: blur(4px);
  z-index: 10;
  overflow-x: auto;
}
#tower-selector img {
  /* Adapter la taille des icônes à la largeur de l'écran grâce à clamp. */
  width: clamp(32px, 5.5vw, 48px);
  height: clamp(32px, 5.5vw, 48px);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
#tower-selector img.selected {
  opacity: 1;
  transform: scale(1.1);
  border: 2px solid #9ec3ff;
  border-radius: 6px;
}

/*
 * Barre de sélection actuelle (#selection-bar).  Cette barre est
 * injectée par JS et permet au joueur de choisir une tour ou un
 * bonus.  Les styles ci-dessous définissent une apparence par
 * défaut.  L'initialisation JS applique des styles inline
 * supplémentaires (padding, gap, flou) selon la visualScale.
 */
#selection-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Laisser un espace confortable en bas afin de ne pas empiéter sur la carte
     et respecter les zones sûres.  Fixer à 3 svh comme défini dans le
     plan de mission. */
  bottom: max(env(safe-area-inset-bottom, 0), 3svh);
  z-index: 6000;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

#selection-bar .selection-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
}
#selection-bar .selection-slot.selected {
  outline: 2px solid #9ec3ff;
}
#selection-bar .slot-cost {
  position: absolute;
  bottom: 2px;
  right: 6px;
  color: #9ec3ff;
  font-weight: 600;
}

/*
 * Ajustements responsifs pour les petits écrans (smartphones).  Sur
 * des largeurs inférieures à 600 px, on réduit la taille du HUD et
 * des icônes de sélection des tours, on compense les marges et on
 * autorise un défilement horizontal sur la barre des tours afin
 * d'éviter que les éléments ne débordent hors de l'écran.  Ces
 * règles complètent celles définies dans responsive.css et visent à
 * rendre le mode solo plus lisible en portrait.
 */
@media (max-width: 600px) {
  /* Réduire la taille de police et les espacements du HUD afin de
     limiter la hauteur occupée en haut de l'écran. */
  #hudBar {
    font-size: 12px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    max-width: 95vw;
  }
  #hud-lives {
    margin-left: 4px !important;
  }
  /* Réduire la taille des icônes de tours et ajuster les marges de
     la barre de sélection pour gagner en hauteur. */
  #tower-selector {
    gap: 6px;
    padding: 6px 8px;
    overflow-x: auto;
  }
  #tower-selector img {
    width: 40px;
    height: 40px;
  }
}

/*
 * Ajustements pour le HUD du mode solo.
 * La barre d'information (Âmes, Vague, Ennemis, Vies) est centrée
 * horizontalement et s'adapte à la taille de l'écran. Elle passe
 * automatiquement sur deux lignes lorsque l'espace est insuffisant.
 */
#hudBar {
  left: 50% !important;
  transform: translateX(-50%);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 95vw;
  /* Ajuster dynamiquement la taille de police en fonction de la largeur de l'écran pour
     obtenir un affichage cohérent sur PC, tablette et mobile.  La valeur est bornée
     entre 12 px et 16 px. */
  font-size: clamp(12px, 2vw, 16px);
}

/* --------------------------------------------------------------------------
 * Contrôles Solo (pause/vitesse/abandon)
 * UI légère, non intrusive, le serveur reste maître.
 */
#soloControlButton {
  padding: 8px 12px;
  border-radius: 999px;
  background: #121a22;
  border: 1px solid #223142;
  color: #9ec3ff;
  cursor: pointer;
  font-size: 14px;
}

#soloControlPanel {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(18, 26, 34, 0.92);
  border: 1px solid #223142;
  min-width: 170px;
}

#soloControlPanel button {
  width: 100%;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  background: #121a22;
  border: 1px solid #223142;
  color: #9ec3ff;
  cursor: pointer;
}

#soloSpeedRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
}

#soloSpeedLabel {
  grid-column: 1 / -1;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.soloSpeedBtn {
  width: auto !important;
}

.soloSpeedBtn.active {
  outline: 2px solid #9ec3ff;
}