/*
  Styles for the tower/bonus selection bar used in the solo mode.
  The bar sits at the bottom of the window and displays a row of
  selectable slots. The selected slot is highlighted with a glow.
*/

/*
 * The selection bar sits near the bottom of the viewport so that players
 * on mobile devices don't accidentally trigger OS gestures when they tap
 * the icons.  The previous implementation positioned the bar roughly
 * 5vh from the bottom which placed it extremely close to the system
 * gesture area on many phones.  This caused inadvertent page exits when
 * attempting to drag and drop towers.  Increase the default offset
 * (bottom) so the bar floats higher above the device's home indicator.
 */
#selection-bar {
  /* Empêcher toute sélection de texte dans la barre et ses enfants. */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  /* Position the selection bar above the game HUD so it remains clickable
     even when the HUD has a very high z-index. Use a large z-index and
     position it a bit higher than the HUD (approximately 8vh) to avoid
     overlap. */
  position: fixed;
  /* Positionner la barre au dessus du bord inférieur avec une marge fixe.
     Pour éviter de grignoter la carte et laisser de la place aux
     gestes système, on utilise toujours 3 svh en complément de la
     safe‑area. */
  bottom: max(env(safe-area-inset-bottom, 0), 3svh);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  z-index: 10000;
  max-width: 90vw;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;

  /* Scroll fluide et comportement maîtrisé sur mobile.  Ces
     propriétés assurent un défilement horizontal agréable sur iOS et
     empêchent que les scrolls horizontaux n'entraînent un retour
     arrière (overscroll behavior) */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Cacher la barre de défilement horizontale pour un aspect plus propre.
     Le contenu reste défilable au doigt ou à la molette, mais la
     barre blanche ne s'affichera pas.  Cette règle couvre les
     navigateurs WebKit (Chrome, Edge) et Firefox. */
  scrollbar-width: none; /* Firefox */
}

/* WebKit/Chromium: masquer la barre de défilement horizontale */
#selection-bar::-webkit-scrollbar {
  display: none;
}

.selection-slot {
  width: 50px;
  height: 50px;
  border: 2px solid #555;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  /* Désactive le glisser-déposer natif des icônes pour éviter le ghost image */
  -webkit-user-drag: none;
  user-select: none;
}

.selection-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Affichage du coût en bas de chaque slot. Le label est centré et
   utilise une petite taille de police pour ne pas masquer l’icône. */
.selection-slot .slot-cost {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  padding: 0 2px;
  color: #ffcc33;
  background: rgba(0, 0, 0, 0.6);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  pointer-events: none;
}

/* Style pour les slots désactivés lorsque le joueur n’a pas assez
   d’âmes. Le filtre gris et la faible luminosité indiquent
   clairement que l’icône est inutilisable. */
.selection-slot.disabled {
  filter: grayscale(100%) brightness(0.5);
  cursor: not-allowed;
}

.selection-slot.selected {
  /* Mise en valeur marquée de l’élément sélectionné */
  border-color: #ffcc33;
  box-shadow: 0 0 8px 2px rgba(255, 204, 51, 0.9);
  transform: scale(1.1);
}

/* Surlignage spécifique pour un bonus sélectionné (violet) */
.selection-slot.bonus-slot.selected {
  border-color: #aa66ff;
  box-shadow: 0 0 8px 2px rgba(170, 102, 255, 0.9);
  transform: scale(1.1);
}

/* Differentiate bonus slots by a slight tint */
.selection-slot.bonus-slot {
  filter: hue-rotate(120deg);
}

/* Slots désactivés par manque d’âmes : grisés et non cliquables */
.selection-slot.disabled {
  opacity: 0.3;
  filter: grayscale(0.8);
  pointer-events: none;
}

/* Responsive adjustments for very small screens */
@media (max-width: 600px) {
  #selection-bar {
    gap: 6px;
    padding: 3px;
    /* Éviter que la barre soit accolée au bord inférieur sur les très
       petits écrans.  On ajoute 8 vh par défaut afin de laisser une
       zone de confort pour le geste de retour/accueil. */
    bottom: max(env(safe-area-inset-bottom, 0), 3svh);
  }
  .selection-slot {
    width: 36px;
    height: 36px;
    border-width: 1px;
  }
}

/* Ajustements pour le mode portrait : la barre occupe toute la largeur et
   reste scrollable si nécessaire. Les slots sont suffisamment grands
   pour les doigts. */
@media (max-width: 768px) and (orientation: portrait) {
  #selection-bar {
    /* En portrait, relever davantage la barre pour laisser un espace
       confortable pour les gestes système.  8 vh offre un bon
       compromis sur la plupart des téléphones. */
    bottom: max(env(safe-area-inset-bottom, 0), 3svh);
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 5px;
  }
  .selection-slot {
    width: 44px;
    height: 44px;
  }
}

/*
  En portrait, la barre doit pouvoir défiler verticalement pour révéler la
  troisième rangée de bonus.  La règle ci-dessus fixe overflow-y: hidden,
  ce qui empêche le scroll.  Nous surchargeons ici cette valeur afin
  d'autoriser le scroll interne.
*/
@media (max-width: 768px) and (orientation: portrait) {
  #selection-bar {
    overflow-y: auto !important;
  }
}

/*
  Afin d’éviter que les règles de layout conflictuelles ne rétablissent
  une barre horizontale en portrait, nous forçons l’utilisation d’une
  grille pour #selection-bar dans cette media query.  Cette règle
  l’emporte sur les précédentes et laisse au JavaScript le soin de
  définir la grille complète (3×3) et les autres propriétés.
*/
@media (max-width: 768px) and (orientation: portrait) {
  #selection-bar {
    display: grid !important;
  }
}

/*
  Dans la version précédente, la barre de sélection était masquée sur les
  écrans larges en mode paysage (>= 900 px). Or, en mode solo, cette barre
  reste indispensable même sur desktop pour choisir rapidement ses tours
  et bonus. Nous supprimons donc cette règle afin que la barre reste
  visible quel que soit le format d’écran. Si vous souhaitez à nouveau
  réduire ou cacher la barre dans certains cas, vous pouvez ajuster
  l’affichage via d’autres media queries.
*/