/* =========================================================
   14 — HAUTEUR DES FENÊTRES : plus rien ne finit sous le bord de l'écran
   (2026-08-26, retour Pixel : « sur mobile certaines popups ne permettent pas
   de voir tout leur contenu ou de cliquer sur les boutons du bas hors écran,
   sans possibilité de scroll »).

   Deux causes, invisibles au bureau, où l'écran est toujours plus haut que la
   fenêtre et où rien ne bouge sous les pieds :

   · `position:fixed; inset:0` se cale sur le viewport LAYOUT — celui calculé
     barre d'adresse MASQUÉE — et non sur ce qu'on voit réellement à l'instant.
     Tant que la barre d'adresse (ou la barre de gestes) est affichée, le bas
     de la fenêtre passe dessous. Même piège pour les `max-height:calc(100vh -
     …)` déjà en place un peu partout : la carte se croit à sa taille, ne
     déborde donc « pas », et ne se dote jamais d'un ascenseur — le bouton de
     validation devient simplement inatteignable. C'est le cas le plus vicieux,
     parce que la fenêtre a l'air correcte.
   · quatre fenêtres n'avaient AUCUN garde-fou, ni max-height ni overflow
     (avertissement de score, second souffle, premiers secours, don d'objet) :
     passé un certain contenu, elles débordaient des deux côtés sans le moindre
     moyen de défiler.

   On traite les deux d'un bloc et pour TOUTES les fenêtres à la fois : le
   conteneur suit le viewport réel (100dvh), la carte ne dépasse jamais son
   conteneur (100 %, plus un ascenseur au besoin). La liste des sélecteurs est
   explicite parce que ces conteneurs n'ont aucune classe commune — les énumérer
   ici est le prix à payer pour ne rien changer au reste du CSS, et ce fichier
   est chargé EN DERNIER pour l'emporter à spécificité égale sur les règles
   d'origine (09, 10, 11, 07…).

   ⚠️ En AJOUTANT une fenêtre au jeu, ajoutez-la aux trois listes ci-dessous —
   sans quoi elle retombera exactement dans le même piège.
========================================================= */

/* --- 1. Les fenêtres ANCRÉES AU VIEWPORT (position:fixed) épousent l'écran
   RÉELLEMENT visible. Les autres (position:absolute) sont ancrées à #gameWrap,
   qui est déjà correctement dimensionné en 100dvh par 00-base-layout.css :
   leur imposer 100dvh les ferait au contraire déborder de toute la hauteur du
   HUD, puisqu'elles commencent SOUS lui. */
@supports (height:100dvh){
  /* #metaShop est EXCLU : il n'est plus ancré en haut de l'écran mais sous
     l'en-tête (css/09), donc sa hauteur découle de top+bottom. Lui imposer
     100dvh le ferait déborder par le bas de toute la hauteur de l'en-tête —
     exactement le piège décrit juste au-dessus pour les fenêtres du HUD. */
  /* #metaShop, #book, #cheatPicker, #spellbook et #talentShop sont EXCLUS :
     ils ne partent plus du haut de l'écran mais du bas de l'en-tête (css/09,
     css/10, css/15), donc leur hauteur découle de top+bottom. Leur imposer
     100dvh les ferait déborder par le bas de toute la hauteur de l'en-tête —
     exactement le piège décrit juste au-dessus. */
  #scoreWarn, #mutatorPick, #introLore{
    height:100dvh;
  }
}

/* --- 2. Cartes ORDINAIRES : bornées au conteneur, ascenseur si besoin ---
   `overscroll-behavior:contain` évite qu'un doigt qui arrive en bout de course
   entraîne la page derrière la fenêtre. */
#victory .card, #scoreWarn .card, #levelup .card, #shop .card,
#inventory .card, #bagFullModal .card, #equipCompareModal .card,
#confirmModal .card, #secondWindModal .card, #firstAidModal .card,
#giveItemModal .card, #metaShop .card, #mutatorPick .card, #adminPanel .card,
#talentShop .tal-card,
#loginPick .cp-card, #charPick .cp-card, #modePick .cp-card,
#classPick .cp-card, #customPick .cp-card, #homeMenu .cp-card,
#introLore .il-card{
  max-height:calc(100% - 12px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* --- 2b. LISTE LONGUE, ACTIONS TOUJOURS VISIBLES (2026-09-03, retour Pixel :
   « même pour sélectionner un personnage, s'il y en a plusieurs, ça devient peu
   lisible »). Quand c'est la CARTE ENTIÈRE qui défile, les commandes du bas —
   créer un personnage, changer de compte — disparaissent sous la liste dès le
   sixième héros. On fait donc défiler la LISTE seule : l'en-tête et les actions
   restent en place, et il n'y a toujours qu'un seul ascenseur. */
#charPick .cp-card{ display:flex; flex-direction:column; overflow:hidden }
#charPick #charList{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Ascenseurs de ces zones internes : visibles (on doit deviner qu'il y a une
   suite) mais discrets, aux couleurs du panneau. */
#charPick #charList::-webkit-scrollbar,
#titleScreen .ts-auth-list::-webkit-scrollbar{ width:8px }
#charPick #charList::-webkit-scrollbar-thumb,
#titleScreen .ts-auth-list::-webkit-scrollbar-thumb{
  background:#4a3f66; border-radius:4px;
}
#charPick #charList::-webkit-scrollbar-thumb:hover,
#titleScreen .ts-auth-list::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim,#8a6c2c) }
#charPick #charList, #titleScreen .ts-auth-list{ scrollbar-width:thin; scrollbar-color:#4a3f66 transparent }
/* AFFORDANCE : sous macOS l'ascenseur est un calque qui disparaît au repos —
   rien ne dit alors qu'il reste des lignes en dessous. Ces deux ombres portées
   n'apparaissent QUE lorsqu'il y a quelque chose de caché de ce côté-là :
   les deux dégradés `local` défilent avec le contenu et masquent l'ombre en
   fin de course, les deux `scroll` restent fixés au cadre. */
#charPick #charList, #titleScreen .ts-auth-list{
  background:
    linear-gradient(var(--panel, #1a1620) 30%, rgba(26,22,32,0)) top    / 100% 16px no-repeat local,
    linear-gradient(rgba(26,22,32,0), var(--panel, #1a1620) 70%)  bottom / 100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(0,0,0,.5), rgba(0,0,0,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.5), rgba(0,0,0,0)) bottom / 100% 9px no-repeat scroll;
}

/* --- 3. Cartes à défilement INTERNE : on borne la hauteur, sans ajouter
   d'ascenseur — le livre, le sélecteur de triche et le grimoire font déjà
   défiler leur grille à l'intérieur, un second ascenseur les emboîterait. */
#book .book-card, #cheatPicker .book-card, #spellbook .book-card{
  max-height:calc(100% - 12px);
}

/* --- 4. Encoches et barre de gestes : la marge de sécurité du téléphone
   appartient au CONTENEUR, pour que la carte s'arrête avant elle. */
@supports (padding:max(0px)){
  #victory, #scoreWarn, #levelup, #shop, #inventory, #bagFullModal,
  #equipCompareModal, #confirmModal, #secondWindModal, #firstAidModal,
  #giveItemModal, #book, #cheatPicker, #spellbook, #metaShop, #mutatorPick,
  #loginPick, #charPick, #modePick, #classPick, #customPick, #homeMenu,
  #adminPanel, #introLore{
    padding-top:max(6px, env(safe-area-inset-top));
    padding-bottom:max(6px, env(safe-area-inset-bottom));
    padding-left:max(6px, env(safe-area-inset-left));
    padding-right:max(6px, env(safe-area-inset-right));
  }
}

/* --- 5. Le menu ≡, ancré au bord et non centré, a sa propre hauteur : même
   conversion vh → dvh, en respectant ses deux tailles (bureau / téléphone,
   voir 01-hud-haut.css et 13-mobile.css). */
@supports (height:100dvh){
  #menuPanel{ max-height:min(70dvh, calc(100dvh - 120px)) }
  @media (max-width:600px), (max-height:480px){
    #menuPanel{ max-height:min(70dvh, calc(100dvh - 80px)) }
  }
}