/* style.css – Corrigé explicitement par CoreDevPro™ */

html, body {
  overflow-x: hidden;   /* bloque uniquement débordement horizontal */
  overflow-y: auto;     /* autorise explicitement le scroll vertical */
  margin: 0;
  padding: 0;
  max-width: 100vw;
  width: 100%;
  height: auto;         /* correction explicite et critique */
  /* Utiliser 100dvh plutôt que 100vh pour prendre en compte la barre
     d'adresse dynamique sur mobile.  Cela évite l'apparition de bandes
     noires et garantit que la page occupe toute la hauteur visible. */
  min-height: 100dvh;
  position: relative;
  color: #fff;
  font-family: Arial, sans-serif;
}

canvas {
  display: block; /* supprime tout espace parasite */
  max-width: 100%; /* jamais plus large que l'écran */
  max-height: 100%; /* jamais plus haut que l'écran */
  margin: 0;
  padding: 0;
}

/* Classe explicite uniquement pour index.html */
/* The menu background should reference the shared assets folder. Adjust
   the relative path because this CSS file lives in the styles/ folder. */
/* Fond du menu principal.
   Nous utilisons désormais un fichier simple `menu_background.png`
   pour éviter les erreurs de chargement dues aux caractères spéciaux
   dans le nom original (accent et #). */
.menu-background {
  background: url("../assets/fond_menu/menu_background.png") no-repeat center center;
  background-size: cover;
}

#canvasWrapper {
  /* Le conteneur du canvas occupe toute la fenêtre et capture les
     événements de pointe pour permettre les interactions.  Utiliser
     position:fixed le place au même niveau que l'élément inline dans
     solo.html (qui positionne le canvas).  La hauteur est exprimée
     en 100dvh pour s'adapter à la disparition de la barre d'adresse
     sur mobile. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 0;           /* au-dessus du fond, sous le HUD */
  pointer-events: auto; /* le canvas capte bien les inputs */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Couleur de fond pour remplir les bandes latérales/verticales lorsque
     la carte ne remplit pas tout l'écran. Utilisez un violet foncé ou
     noir doux selon vos préférences. */
  background: #0b0f14;
}

#backgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#pageWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
}

#mainMenu, #leftPanel, #chatContainer, #rightPanel {
  box-sizing: border-box;
  margin: 10px auto;
}

#mainMenu {
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  border-radius: 12px;
  z-index: 1000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  border: 2px solid #0a0f1c;
  /* Use the same background image as the overall menu. The previous reference
     to brume_texture.png pointed to a nonexistent file and caused 404s. */
  background-image: url('../assets/fond_menu/menu_background.png');
  background-size: cover;
  background-position: center;
  width: 95%;
  max-width: 600px;
}

#mainMenu button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #5a189a;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background 0.3s;
}

#mainMenu button:hover {
  background: #7b2cbf;
}

#leftPanel, #rightPanel, #chatContainer {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  padding: 16px;
  color: white;
  font-size: 14px;
  box-shadow: 0 0 16px rgba(0,0,0,0.6);
  width: 95%;
  max-width: 600px;
}

#leftPanel {
  border: 2px solid #888;
  overflow: auto;
}

#rightPanel {
  border: 2px solid #1a5cff;
  overflow: auto;
}

#chatContainer {
  border: 2px solid #00bfff;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 50vh; /* Explicitement 50% de la hauteur écran */
  max-height: 60vh; /* Hauteur maximale explicite adaptative */
  overflow: hidden;
}

/* Scrollbar explicite bleu électrique ultra fine pour le chatMessages */
#chatMessages::-webkit-scrollbar {
  width: 6px; /* ultra-fine */
}

#chatMessages::-webkit-scrollbar-track {
  background: transparent; /* fond transparent */
}

#chatMessages::-webkit-scrollbar-thumb {
  background-color: #00bfff; /* bleu électrique */
  border-radius: 8px;
  border: 1px solid transparent;
}

#chatMessages {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #00bfff transparent; /* Firefox */
}

/* Harmonisation avec main.css: ne pas forcer d'espace sous la liste des
   messages. La gestion de l'espace en bas (pour éviter le chevauchement
   avec la barre d'input) est désormais assurée par main.css via la
   variable CSS --chat-input-h. */
#chatMessages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 0; /* laisse main.css gérer le padding-bottom dynamique */
  padding-right: 4px;
}

/* Harmonisation avec main.css: l'input n'est plus positionné en absolu
   (ce qui recouvrait le bouton d'envoi). On laisse main.css définir
   layout, tailles et états dans #chatInputBar. */
#chatInput {
  width: auto;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  background: rgba(30, 30, 30, 0.9);
  color: white;
  border: 1px solid #00bfff;
  position: static;   /* plus de position: absolute */
  bottom: auto;
  left: auto;
  transform: none;
}

@media (min-width: 700px) {
  /* Les dispositions de grille de l'ancienne version ont été
     supprimées.  La grille principale (#mainGrid) définie dans
     main.css gère désormais la répartition des colonnes et
     l'alignement des panneaux.  Conserver ces règles provoquait
     un décalage vertical du panneau de droite et des largeurs
     incohérentes. */
}
/* Scrollbar bleu électrique explicite */
#selectionScreen::-webkit-scrollbar,
#roleSelectionScreen::-webkit-scrollbar {
  width: 8px;
}

#selectionScreen::-webkit-scrollbar-track,
#roleSelectionScreen::-webkit-scrollbar-track {
  background: #000;
  border-radius: 8px;
}

#selectionScreen::-webkit-scrollbar-thumb,
#roleSelectionScreen::-webkit-scrollbar-thumb {
  background-color: #1f65ff;
  border-radius: 8px;
  border: 2px solid #000;
}

#selectionScreen, #roleSelectionScreen {
  scrollbar-width: thin;
  scrollbar-color: #1f65ff transparent;
}
#gameHUD {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7); /* fond noir semi-transparent explicite */
}

#gameHUD .tower-container,
#gameHUD .bonus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border: 2px solid #1f65ff; /* contour bleu électrique explicite */
  border-radius: 8px; /* coins arrondis explicites */
  background: rgba(0, 0, 0, 0.8); /* fond légèrement plus opaque explicite */
}

#gameHUD .tower-btn,
#gameHUD .bonus-btn {
  max-width: 50px;
  max-height: 50px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
#gameHUD .bonus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border: 2px solid #a020f0; /* contour violet électrique explicite */
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.8);
}


#gameHUD .cost-label {
  color: #E0D4FF; /* texte des coûts explicite */
  font-size: 12px;
  margin-top: 2px;
}
/* Style explicite des onglets du chat selon ta demande */
#chatTabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #00bfff;
  margin-bottom: 8px;
}

.chat-tab {
  flex: 1;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  background: transparent;
  color: #00bfff;
  border: 2px solid transparent;
  transition: border 0.3s, color 0.3s;
  font-size: 14px;
}

.chat-tab:hover {
  color: #00ffaa; /* Vert électrique au survol */
}

.chat-tab.active {
  border: 2px solid #00ffaa; /* Vert électrique explicite */
  color: #00ffaa; /* Vert électrique explicite */
  background: transparent;
}

.notif {
  pointer-events: none; /* n'interfère pas avec les clics du bouton */
}

/*
 * Ajustements pour l'affichage plein écran sur mobile.
 *
 * Sur certains appareils mobiles, le canvas était entouré de bandes
 * noires en haut et en bas.  Celles-ci provenaient de la hauteur
 * implicite "auto" de html/body et du positionnement absolu du
 * canvasWrapper.  En forçant la hauteur des éléments racines à
 * 100 %, et en tenant compte des zones sûres (safe area) des
 * écrans à encoche, on supprime ces bandes et on utilise toute la
 * surface disponible.  Ces règles n'ont aucun effet sur desktop.
 */
html, body {
  height: 100%;
  /* Utiliser 100dvh pour que le contenu occupe toute la hauteur visible sur mobile
     en tenant compte de la barre d'adresse. */
  min-height: 100dvh;
}
@supports (padding: env(safe-area-inset-bottom)) {
  html, body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Ajuster la position et la taille du canvas pour qu'il occupe
     l'espace restant entre les zones sûres supérieures et
     inférieures.  Le top est déplacé de la safe area supérieure et
     la hauteur est recalculée en conséquence. */
  #canvasWrapper {
    top: env(safe-area-inset-top);
    /* Utiliser 100dvh ici pour s'adapter aux navigateurs mobiles qui
       rapportent 100vh sans tenir compte des barres d'outils. */
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}