/* Responsive overrides for portrait/narrow screens (max-width: 600px).
   This stylesheet turns the selection bar (#selection-bar) into a
   3×3 grid when space is limited, ensuring that all six towers and
   three bonuses remain visible without overflowing. The slot size is
   clamped using viewport height to maintain accessibility. */

@media (max-width: 600px) {
  /* Grid layout for the selection bar.  Use grid with three columns
     and automatic rows.  Gap between items is consistent and
     padding surrounds the entire bar.  The bar spans the full
     available width. */
  #selection-bar {
    /* Layout grille 3×3 pour le portrait.  Garder l'espacement cohérent et
       occuper toute la largeur disponible.  On définit également un
       repositionnement vertical en bas de l'écran via la règle bottom
       héritée de selection.css (3svh) pour éviter de chevaucher la carte. */
    bottom: max(env(safe-area-inset-bottom, 0), 3svh);
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 8px;
    column-gap: 8px;
    padding: 8px;
    max-width: 100%;
    overflow-x: hidden;
    justify-items: center;
    align-items: center;
    /* Limiter la hauteur de la barre pour que trois rangées soient visibles
       sans rogner la carte.  La borne intermédiaire 28 svh garantit
       l'apparition d'un scroll doux sur les écrans très courts. */
    max-height: clamp(132px, 28svh, 252px);
  }
  /* Slot sizing in portrait mode.  Utilise clamp pour garantir une
     aire cliquable minimale (44 px) tout en limitant la taille
     maximale à 56 px afin de laisser apparaître trois rangées.
     L’unité svh tient compte de la barre dynamique iOS/Android. */
  #selection-bar .selection-slot {
    width: clamp(44px, 6.5svh, 56px) !important;
    height: clamp(44px, 6.5svh, 56px) !important;
  }
  #selection-bar .selection-slot img {
    width: 100%;
    height: 100%;
  }
  #selection-bar .slot-cost {
    font-size: clamp(10px, 1.6vh, 14px) !important;
  }
}

/* Overrides améliorés pour les écrans étroits.  Ce bloc borne la
   hauteur et la largeur de la barre de sélection en portrait pour
   éviter qu'elle n'envahisse toute la fenêtre.  Les tailles sont
   exprimées en svh (viewport height avec barres dynamiques), ce qui
   garantit une adaptation précise sur mobile. */
@media (max-width: 768px) {
  :root { --slot-size: clamp(44px, 6.5svh, 56px); }

  #selection-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--slot-size), 1fr));
    grid-auto-rows: var(--slot-size);
    gap: 8px;
    padding: 8px 10px;
    max-width: 96vw;
    /* Ajuster la hauteur maximale pour permettre trois rangées complètes.
       Utilise 28 svh comme borne intermédiaire et 132/252 px comme bornes
       stricte pour les écrans très courts ou très longs. */
    max-height: clamp(132px, 28svh, 252px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #selection-bar .selection-slot {
    width: var(--slot-size) !important;
    height: var(--slot-size) !important;
    flex: 0 0 auto;
  }

  #selection-bar .slot-cost {
    font-size: clamp(10px, 1.6svh, 14px) !important;
  }
}

/*
  Portrait : grille 3×3 scrollable et hauteur bornée.  Ce bloc combine une
  condition sur la largeur d'écran et l'orientation pour s'assurer que
  la barre adopte toujours un layout grille en portrait, avec trois
  rangées visibles.  On force overflow-y:auto et fixe une hauteur
  explicite des rangées via clamp, afin d'éviter que la troisième
  rangée soit masquée.  La marge en bas est conservée pour les
  safe-areas.
*/
@media (max-width: 768px) and (orientation: portrait) {
  #selection-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    /* Hauteur de rangée explicite pour éviter le 1fr qui tronque la 3ᵉ rangée */
    grid-auto-rows: clamp(44px, 7svh, 60px);
    gap: 8px;
    padding: 8px;
    max-width: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    bottom: max(env(safe-area-inset-bottom, 0), 3svh) !important;
    justify-items: center;
    align-items: center;
  }
}