/* ==========================================================================
   Téléphone et tablette — tout « Jeux » jouable sans zoomer
   --------------------------------------------------------------------------
   Cette feuille ne fait qu'AJOUTER : elle ne remplace aucune règle du site.
   partials/head_css.php fait 290 Ko et vit chez toi ; y toucher pour des
   ajustements d'écran serait une mauvaise idée. Elle est chargée après lui, donc
   à spécificité égale c'est elle qui gagne.

   Trois principes, et rien d'autre :

     1. RIEN NE DÉBORDE. Un écran de téléphone ne se scrolle pas de côté. Ce qui
        ne rentre pas doit se replier, se réduire ou passer à la ligne.

     2. TOUT SE TOUCHE. Une cible de moins de 40 px de haut se rate au doigt.
        Apple recommande 44, Google 48 ; on vise 44 partout où c'est possible,
        sans casser les mises en page qui, elles, tiennent déjà.

     3. TOUT SE LIT. En dessous de 11,5 px on plisse les yeux. Le plancher est
        posé à 12 px pour le texte courant, 11,5 px pour les étiquettes.

   Les tailles de coupure : 820 px pour la tablette en portrait, 620 px pour le
   téléphone, 400 px pour les petits (iPhone SE et compagnie).
   ========================================================================== */

/* ==========================================================================
   1. L'EN-TÊTE — le portefeuille était coupé sur TOUTES les pages
   --------------------------------------------------------------------------
   Mesuré sur un iPhone 14 (390 px) : la barre de droite réclamait 567 px. Les
   gemmes et les clés tombaient donc hors écran, et comme la page ne scrolle pas
   de côté, elles étaient tout bonnement invisibles — sur les dix-huit vues.
   ========================================================================== */
@media (max-width: 720px) {
  /* La barre de droite a le droit de se serrer, et le portefeuille de rétrécir. */
  .top-nav-right { gap: 6px; min-width: 0; }
  .top-nav-inner { gap: 8px; padding: 0 10px; }

  .jetons-wallet-wrap { min-width: 0; }
  .jetons-wallet-trigger {
    gap: 5px; padding: 4px 8px;
    max-width: 100%; min-width: 0;
    font-size: 11.5px;
  }
  /* Chaque monnaie garde son icône ET son nombre : c'est l'information, on ne
     la sacrifie pas. On récupère la place sur les écarts, pas sur le contenu. */
  .nav-wallet-slot { gap: 3px; min-width: 0; }
  .nav-wallet-slot .currency-icon,
  .nav-wallet-slot .jeton-icon { width: 15px; height: 15px; flex: 0 0 15px; }

  /* Le logo prend beaucoup de largeur pour ce qu'il apporte ici. */
  .brand img, .brand svg { max-height: 26px; }
}

@media (max-width: 430px) {
  .top-nav-inner { gap: 6px; padding: 0 8px; }
  .top-nav-right { gap: 4px; }
  .jetons-wallet-trigger { gap: 4px; padding: 3px 6px; font-size: 11px; }
  .nav-wallet-slot .currency-icon,
  .nav-wallet-slot .jeton-icon { width: 14px; height: 14px; flex: 0 0 14px; }
  .brand img, .brand svg { max-height: 24px; }
  /* Le bouton du son est le moins utile des trois : c'est lui qui part en
     premier quand il n'y a plus de place, pas le portefeuille. */
  .sfx-toggle { display: none; }
}

/* --- L'en-tête passe sur deux lignes -----------------------------------------
   Mesuré au pixel sur un iPhone 14 : la barre de droite (cloche, portefeuille,
   niveau, profil) réclame 288 px, le logo 75, le burger 40. Avec les écarts et
   les marges, une seule ligne demande 431 px minimum — et ce minimum GRANDIT :
   « 2 571 127 » jetons prendront un chiffre de plus un jour.

   Serrer davantage ne ferait que repousser le problème d'un chiffre. On donne
   donc une deuxième ligne à la barre : rien n'est masqué, rien n'est rogné,
   rien ne dépasse, et ça tient encore à 320 px avec des nombres à dix chiffres.

     ligne 1 : le logo à gauche, le burger à droite
     ligne 2 : cloche · portefeuille · niveau · profil, répartis sur la largeur

   La hauteur est FIXÉE à 80 px parce que le panneau latéral se positionne en
   `top:` absolu : les deux valeurs doivent rester d'accord. */
@media (max-width: 500px) {
  .top-nav-inner {
    flex-wrap: wrap;
    align-content: center;
    height: 80px;
    padding: 0 8px;
    row-gap: 4px;
    column-gap: 6px;
  }
  .brand { order: 1; }
  .brand img, .brand svg { max-height: 22px; }
  .nav-burger { order: 2; margin-left: auto; }
  .top-nav-right {
    order: 3;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 4px;
  }
  /* Le panneau latéral démarre sous la barre, pas sous ses 60 px d'origine. */
  .top-nav-links { top: 80px; }
  /* Le portefeuille reprend sa taille de lecture : la place ne manque plus. */
  .jetons-wallet-trigger { font-size: 11.5px; padding: 4px 8px; }
  .nav-wallet-slot .currency-icon,
  .nav-wallet-slot .jeton-icon { width: 15px; height: 15px; flex: 0 0 15px; }
  /* Et le bouton du son revient : on ne le sacrifiait que faute de place. */
  .sfx-toggle { display: flex; }
}

/* ==========================================================================
   2. LES DEUX VRAIS DÉBORDEMENTS
   ========================================================================== */

/* --- Skinparty Arena : la liste des caisses ---------------------------------
   Un <select> se dimensionne sur son option la plus longue, sans se soucier de
   son parent : « The Collector Eagles Premium — 16 500 jetons » lui donnait
   480 px de large dans un écran de 390. */
@media (max-width: 820px) {
  .jeux-page select,
  .jeux-page input[type="text"],
  .jeux-page input[type="number"],
  .jeux-page input[type="search"] {
    max-width: 100%;
    min-width: 0;
  }
  /* Contraindre le <select> ne suffit pas : `max-width:100%` se mesure sur le
     <label> qui l'enveloppe, et ce <label> avait DÉJÀ débordé. On reprend donc
     la largeur au parent, et on impose au <select> une largeur définie — dès
     lors, la longueur de ses options ne pèse plus rien. */
  .jeux-page .arena-create-form,
  .jeux-page .arena-form-row,
  .jeux-page .arena-create-row { flex-wrap: wrap; }

  .jeux-page .arena-create-form > label,
  .jeux-page .arena-form-row > label,
  .jeux-page .arena-create-row > label {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 8px;
  }
  .jeux-page .arena-create-form select,
  .jeux-page .arena-form-row select,
  .jeux-page .arena-create-row select { display: block; width: 100%; }

  /* --- Inventaire : la barre d'outils --------------------------------------
     Même mécanique, même remède. « Trier par » et « Tout vendre · +2 571 127
     jetons » tenaient sur une ligne de 390 px tant que le nombre restait court.
     Les trois éléments passent à la ligne au lieu de pousser la page. */
  .jeux-page .inventory-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .jeux-page .inventory-sort {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .jeux-page .inventory-sort select { display: block; width: 100%; }
  .jeux-page .inventory-sell-all-btn { max-width: 100%; white-space: normal; }
}

/* --- Les petits écrans : 320 à 380 px ----------------------------------------
   L'iPhone SE, le Galaxy A et tout ce qui vit encore sous 380 px. Trois largeurs
   étaient écrites en dur dans la feuille du site, calculées pour un écran
   confortable ; en dessous, elles poussaient la page.

   Une largeur minimale fixe (`minmax(330px, 1fr)`, `max-width:250px`) est un
   pari sur la taille de l'écran. On la rend relative, et le pari disparaît. */
@media (max-width: 620px) {
  /* Améliorations : la grille réclamait 330 px de colonne dans 294 px utiles.
     `min()` fait tomber ce plancher à la largeur réelle dès qu'elle est plus
     étroite — au-dessus, rien ne change. */
  .jeux-page .upg-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
  .jeux-page .upg-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jeux-page .upg-side { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

  /* Classement : le sous-titre du joueur avait 250 px de large, écrits en dur.
     Le conteneur intermédiaire n'a pas de classe : on le vise par sa position. */
  .jeux-page .loadout-board-user { min-width: 0; }
  .jeux-page .loadout-board-user > * { min-width: 0; }
  .jeux-page .loadout-board-sub { max-width: 100%; }
  .jeux-page .loadout-board-name { overflow-wrap: anywhere; }

  /* Caisses : le bandeau du joueur. Un pseudo long tenait le bloc ouvert. */
  .jeux-page .player-bar-rank { min-width: 0; }
  .jeux-page .player-bar-rank-text { min-width: 0; }
  .jeux-page .player-bar-rank-name { overflow-wrap: anywhere; }
  .jeux-page .player-bar-level { flex-wrap: wrap; min-width: 0; }
}

/* --- Cadeaux du jour : la roue ----------------------------------------------
   La roue est un CERCLE, mais elle tourne : la boîte englobante d'un carré de
   300 px pivoté fait 424 px. Rien n'est peint dans ces coins-là — c'est un
   débordement fantôme, qui suffisait pourtant à faire croire à la page qu'elle
   était trop large. On coupe la peinture au niveau de la boîte : le cercle et
   son repère sont intacts, le fantôme disparaît. */
.cad-roue-box { overflow: clip; }
@supports not (overflow: clip) { .cad-roue-box { overflow: hidden; } }

/* ==========================================================================
   3. LES CIBLES TACTILES
   --------------------------------------------------------------------------
   On monte à 44 px de haut les boutons, champs et onglets. On garde la taille
   de police telle quelle : c'est la hauteur qui manque, pas la lisibilité.
   ========================================================================== */
@media (max-width: 820px) {
  .jeux-page .case-open-btn,
  .jeux-page .auth-btn,
  .jeux-page .trade-decline-btn,
  .jeux-page .upg-buy,
  .jeux-page .pick-auto-btn,
  .jeux-page .pick-clear-btn,
  .jeux-page .tradeup-rarity-tab,
  .jeux-page .rotation-toggle,
  .jeux-page .case-batch,
  .jeux-page .heist-preset,
  .jeux-page .jp-option,
  .jeux-page .jp-order-reset,
  .jeux-page .cad-preset {
    min-height: 44px;
    padding-top: 10px; padding-bottom: 10px;
  }

  /* Les champs de formulaire : même hauteur, et 16 px de police — en dessous,
     Safari zoome automatiquement à la mise au point, ce qui décale toute la
     page et donne exactement l'effet « il faut dézoomer » qu'on veut éviter. */
  .jeux-page input[type="text"],
  .jeux-page input[type="number"],
  .jeux-page input[type="search"],
  .jeux-page input[type="email"],
  .jeux-page select,
  .jeux-page textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Les petites étoiles et bascules gagnent une zone de touche sans bouger
     d'un pixel à l'écran : le pseudo-élément déborde, pas la mise en page. */
  .jeux-page .fav-star,
  .jeux-page .case-odds-toggle,
  .jeux-page .loadout-board-name-btn,
  .jeux-page .cad-caisse-link,
  .jeux-page .inspect-btn {
    position: relative;
  }
  .jeux-page .fav-star::after,
  .jeux-page .case-odds-toggle::after,
  .jeux-page .loadout-board-name-btn::after,
  .jeux-page .cad-caisse-link::after,
  .jeux-page .inspect-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Les cartes d'objets sont elles-mêmes des cibles : on leur laisse de l'air. */
  .jeux-page .upgrade-pick { min-height: 44px; }
}

/* ==========================================================================
   4. LA LISIBILITÉ
   --------------------------------------------------------------------------
   Plancher à 11,5 px pour les étiquettes secondaires, 12 px pour tout le reste.
   ========================================================================== */
@media (max-width: 820px) {
  .jeux-page .loadout-score-sub,
  .jeux-page .jeux-hero-balance-label,
  .jeux-page .heist-figure-label,
  .jeux-page .heist-member-share,
  .jeux-page .jp-board-sub,
  .jeux-page .jp-week-tag,
  .jeux-page .cad-palier-lvl,
  .jeux-page .cad-palier-prix,
  .jeux-page .collection-card-count,
  .jeux-page .collection-card-done,
  .jeux-page .tradeup-rarity-count,
  .jeux-page .upgrade-hint,
  .jeux-page .upgrade-pick-sub,
  .jeux-page .loadout-board-sub,
  .jeux-page .odds-row-label,
  .jeux-page .odds-row-value,
  .jeux-page .achievement-desc,
  .jeux-page .arena-cost-note,
  .jeux-page .arena-fighter-vendor,
  .jeux-page .arena-fighter-stats,
  .jeux-page .inventory-item-exterior,
  .jeux-page .prop-hint,
  .jeux-page .cad-loot-meta,
  .jeux-page .heist-loot-meta,
  .jeux-page .jp-estimate-note {
    font-size: 11.5px;
  }
  .jeux-page .beta-badge-lg { font-size: 11.5px; }
  /* Le corps de texte des règles et des explications : c'est ce qu'on LIT. */
  .jeux-page .heist-rules-list,
  .jeux-page .jp-rules-list,
  .jeux-page .cad-rules-list,
  .jeux-page .jp-intro-card > p,
  .jeux-page .heist-hero-note,
  .jeux-page .jp-hero-note { font-size: 13px; line-height: 1.65; }
}

/* ==========================================================================
   5. LE CLASSEMENT — une fonction du PC qui manquait sur téléphone
   --------------------------------------------------------------------------
   .loadout-board-items était masqué en dessous de 900 px. Or c'est la bande
   d'armes de chaque joueur, et c'est elle qu'on touche pour ouvrir sa panoplie
   complète : sur téléphone, la fonction n'existait tout simplement pas.
   On la remet, en plus compact.
   ========================================================================== */
@media (max-width: 900px) {
  .loadout-board-items {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .loadout-board-items::-webkit-scrollbar { display: none; }
  .loadout-board-items .item-thumb,
  .loadout-board-items img { width: 34px; height: 26px; flex: 0 0 auto; }
}

/* ==========================================================================
   5 bis. LES CIBLES QUI RESTAIENT TROP PETITES
   --------------------------------------------------------------------------
   Relevé au pixel sur les dix-huit vues : voici tout ce qui, une fois retirés
   les faux positifs (une icône DANS un bouton n'est pas une cible ; un lien au
   milieu d'une phrase doit rester à la taille de la phrase), mesurait encore
   moins de 40 px de haut.

   Deux traitements, selon le cas :
     — un bouton ou un onglet qui a de la place grandit vraiment (min-height) ;
     — une petite icône (cadenas, étoile, loupe) garde sa taille à l'écran et
       reçoit une zone de touche invisible de 44 px par ::after. La mise en page
       ne bouge pas d'un pixel, le doigt ne rate plus.
   ========================================================================== */
@media (max-width: 820px) {
  .jeux-page .case-family-tab,
  .jeux-page .case-currency-tab,
  .jeux-page .achievements-filter,
  .jeux-page .achievements-pager a,
  .jeux-page .achievements-search button,
  .jeux-page .tradeup-pool-empty a,
  .jeux-page .player-bar-pill,
  .jeux-page .xp-info-trigger,
  .jeux-page .inventory-sell-all-btn,
  .jeux-page .inventory-item-sell-btn,
  .jeux-page .sticker-apply-btn,
  .jeux-page .arena-bot-btn,
  .jeux-page .loadout-board-items,
  .jeux-page .case-card-name,
  .jeux-page .btn-primary,
  .jeux-page .btn-secondary,
  .jeux-page .jeux-empty-state a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Ces deux-là défilent : le centrage horizontal les décalerait. */
  .jeux-page .loadout-board-items { justify-content: flex-start; }
  .jeux-page .case-card-name { justify-content: flex-start; text-align: left; }

  /* Les petites icônes : zone de touche invisible, taille à l'écran inchangée. */
  .jeux-page .inventory-lock-btn,
  .jeux-page .casepage-back,
  .jeux-page .sticker-remove-btn { position: relative; }
  .jeux-page .inventory-lock-btn::after,
  .jeux-page .casepage-back::after,
  .jeux-page .sticker-remove-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   5 ter. LE PLANCHER DE LISIBILITÉ
   --------------------------------------------------------------------------
   Le site descend jusqu'à 9,5 px sur ses étiquettes. Sur un écran de bureau à
   50 cm des yeux ça passe ; à bout de bras sur un téléphone, non — et c'est
   exactement ce qui pousse à écarter les doigts pour zoomer.

   Deux planchers : 12 px pour ce qui se LIT (un nom d'arme, une chance, une
   valeur, un état de partie), 11 px pour ce qui s'IDENTIFIE d'un coup d'œil
   (une pastille de niveau, un compteur, une date). En dessous de 11, rien.
   ========================================================================== */
@media (max-width: 820px) {
  /* Ce qui se lit. */
  .jeux-page .casepage-item-weapon,
  .jeux-page .casepage-item-chance,
  .jeux-page .casepage-item-rarity,
  .jeux-page .inventory-item-case,
  .jeux-page .achievement-progress,
  .jeux-page .upgrade-gauge-label,
  .jeux-page .upgrade-pick-value,
  .jeux-page .cad-roue-state-label,
  .jeux-page .cad-caisse-tier,
  .jeux-page .arena-create-note,
  .jeux-page .arena-board-stat,
  .jeux-page .upg-level,
  .jeux-page .case-batch,
  .jeux-page .pick-auto-btn,
  .jeux-page .pick-clear-btn { font-size: 12px; }

  /* Ce qui s'identifie. */
  .jeux-page .player-bar-level-chip,
  .jeux-page .player-bar-xp-text,
  .jeux-page .legend-track-label,
  .jeux-page .pity-track-label,
  .jeux-page .case-card-count,
  .jeux-page .case-card-house,
  .jeux-page .case-card-currency,
  .jeux-page .case-card-opens,
  .jeux-page .wear-mult,
  .jeux-page .inventory-item-stattrak,
  .jeux-page .achievement-done,
  .jeux-page .achievement-reward-xp,
  .jeux-page .achievement-reward-gemmes,
  .jeux-page .achievement-reward-cles,
  .jeux-page .level-badge,
  .jeux-page .loadout-board-more,
  .jeux-page .loadout-board-level,
  .jeux-page .loadout-board-sub,
  .jeux-page .trade-section-count,
  .jeux-page .arena-history-date,
  .jeux-page .arena-board-tag,
  .jeux-page .arena-fighter-vendor,
  .jeux-page .arena-fighter-tag,
  .jeux-page .arena-fighter-stats,
  .jeux-page .tradeup-rarity-count,
  .jeux-page .upgrade-pick-sub,
  .jeux-page .tradeup-pick-sub,
  /* Le coût en énergie d'un coup d'arène : il ne s'affiche qu'EN COMBAT, ce qui lui
     avait permis de passer sous le radar du premier relevé — une page au repos ne
     montre aucune carte de coup. C'est pourtant ce qu'on lit avant chaque décision. */
  .jeux-page .arena-move-cost,
  /* Le palier d'évolution suivant : il n'apparaît qu'une fois qu'on a des victoires
     avec un fighter, ce qui l'avait tenu hors des premiers relevés. */
  .jeux-page .arena-evo-next,
  .jeux-page .inspect-btn { font-size: 11px; }

  /* Le panneau des chances : c'est le tableau que les joueurs lisent le plus
     attentivement de tout le site. Il descendait à 9,5 px. On ne touche QUE les
     lignes trop petites — un `*` ramènerait aussi les titres vers le bas. */
  .jeux-page .case-odds-panel .odds-row-each,
  .jeux-page .case-odds-panel .odds-row-each b,
  .jeux-page .case-odds-panel .odds-one-in,
  .jeux-page .case-odds-panel .odds-ev,
  .jeux-page .case-odds-panel .odds-ev b,
  .jeux-page .case-odds-panel .odds-ev-note,
  .jeux-page .case-odds-panel .odds-ev-note b { font-size: 11px; }

  /* Les compteurs collés aux onglets, et les libellés de résumé. */
  .jeux-page .case-family-tab span,
  .jeux-page .case-currency-tab span,
  .jeux-page .achievements-filter span,
  .jeux-page .exchange-open-text small,
  .jeux-page .jp-board-points span,
  .jeux-page .upg-summary-main span,
  .jeux-page .upg-summary-facts span,
  .jeux-page .arena-tag { font-size: 11px; }

  /* Le passif d'un combattant est une phrase : elle se lit vraiment. */
  .jeux-page .arena-fighter-passive em { font-size: 12px; }

  /* Les étiquettes de la roue ne sont PAS concernées : elles sont peintes en
     SVG dans un viewBox de 200 unités affiché sur ~330 px. Leur « 10 px »
     déclaré arrive à l'écran à seize pixels et des poussières. */
}

/* ==========================================================================
   6. LES GRILLES ET LES TABLEAUX
   --------------------------------------------------------------------------
   Ce qui est large par nature (tableaux, longues rangées) défile dans SA propre
   boîte, jamais en emportant la page entière.
   ========================================================================== */
@media (max-width: 820px) {
  .jeux-page table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jeux-page pre, .jeux-page code { max-width: 100%; overflow-x: auto; }
  /* Les longues chaînes (noms de skins, pseudos) coupent au lieu de pousser. */
  .jeux-page .inventory-item-name,
  .jeux-page .upgrade-pick-name,
  .jeux-page .loadout-board-name,
  .jeux-page .market-item-name { overflow-wrap: anywhere; }
}

/* ==========================================================================
   6 bis. LES FENÊTRES QUI VIVENT HORS DE « .jeux-page »
   --------------------------------------------------------------------------
   Quinze superpositions (ouverture de caisse, inspection, échange, duel,
   braquage, cadeaux…) sont rendues APRÈS la div .jeux-page, en frères, pour
   pouvoir se poser par-dessus toute la page. Conséquence : aucune des règles
   écrites plus haut en « .jeux-page … » ne les atteignait.

   Or c'est exactement là que le joueur clique le plus : « Vendre », « Garder »,
   « Relancer », la croix de fermeture. On les reprend ici, sans préfixe.
   ========================================================================== */
@media (max-width: 820px) {
  .case-open-modal-overlay button,
  .duel-overlay button,
  .inspect-overlay button,
  .exchange-overlay button,
  .heist-crack-overlay button,
  .cad-prize-overlay button,
  .lightbox-overlay button,
  .modal-overlay button {
    min-height: 44px;
  }
  /* La croix de fermeture est carrée : 44 dans les deux sens. */
  .case-open-modal-close,
  .duel-close,
  .inspect-close,
  .lightbox-close,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  /* Les curseurs (zoom de l'inspection) : une piste fine se rate au doigt. */
  .inspect-overlay input[type="range"],
  .exchange-overlay input { min-height: 44px; }
  .exchange-overlay input[type="number"],
  .exchange-overlay input[type="text"] { font-size: 16px; }

  /* --- Le duel SkinParty : les bandes défilantes ------------------------
     Mesuré sur la fenêtre de résultat : `.duel-side` faisait 4 432 px de large
     dans une carte de 354. La bande d'armes qui défile mesure 4 400 px de
     contenu ; elle est bien découpée par son `overflow:hidden`, mais sa
     largeur MINIMALE reste 4 400 px, et une colonne de grille en `1fr` prend
     pour minimum le min-content de ce qu'elle contient.

     `minmax(0, 1fr)` autorise la colonne à descendre sous ce minimum : la
     bande retrouve la largeur de la carte, et son découpage fait le reste. */
  .duel-sides { grid-template-columns: minmax(0, 1fr) !important; }
  .duel-side,
  .duel-player,
  .duel-loot { min-width: 0; }
  .case-reel-viewport { max-width: 100%; }

  /* Aucune de ces fenêtres ne doit déborder de l'écran. */
  .case-open-modal,
  .duel-card,
  .inspect-panel,
  .exchange-box,
  .heist-crack-box,
  .cad-prize-box,
  .lightbox-content,
  .modal-content { max-width: calc(100vw - 24px); }
}

/* ==========================================================================
   7. LES FENÊTRES MODALES
   --------------------------------------------------------------------------
   Une modale qui dépasse la hauteur de l'écran doit défiler à l'intérieur,
   sinon ses boutons deviennent inatteignables.
   ========================================================================== */
@media (max-width: 820px) {
  /* Les trois boutons du résultat (Inspecter · Vendre · Garder) tenaient sur une
     ligne de 361 px dans un panneau de 296 : le troisième était coupé net. Ils
     passent à la ligne, et se partagent la largeur. */
  .case-reveal-actions {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  .case-reveal-actions > * { flex: 1 1 auto; min-width: 0; }

  .case-reveal-panel,
  .cad-prize-box,
  .heist-crack-box,
  .inspect-panel,
  .loadout-modal-card {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}