/* ════════════════════════════════════════════════════════════════════
   mobile.css — Overrides responsive globaux (v688)
   Chargé en DERNIER pour avoir la priorité sur les autres feuilles.

   Stratégie : ne PAS dupliquer la logique, juste forcer des fallbacks
   à 480px et 768px pour les panels qui n'ont aucun media query dédié.

   Breakpoints standardisés :
     - 768px : tablette portrait / téléphone paysage
     - 480px : téléphone portrait standard
     - 380px : iPhone SE / petits Android
   ════════════════════════════════════════════════════════════════════ */

/* ── Anti-zoom iOS (input < 16px = zoom auto bloquant) ─────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Inputs compact dans modales peuvent overrider via classe spécifique */
  .op-input, .op-select,
  .stv2-footer-range,
  .npc-search-input {
    font-size: 14px !important;
  }
}

/* ── Tap targets : minimum 44×44 pour boutons fréquents ─────────────── */
@media (max-width: 768px) {
  button:not(.no-min-tap),
  .btn, .mg-btn, .cf-btn, .pn-tab, .pn-action {
    min-height: 40px;
  }
  /* Boutons inline (toolbars) restent compacts */
  .toolbar-btn, .filter-chip, .hsm-lot, .hsm-qty-btn,
  .rk-tab-btn, .pn-tab-mini {
    min-height: 32px;
  }
}

/* ── Account / Mon Compte : grilles fixes → flex ────────────────────── */
@media (max-width: 768px) {
  .accv2-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .accv2-quick { grid-template-columns: 1fr !important; }
  .accv2-row { flex-direction: column !important; gap: 8px !important; }
  .accv2-stat-bar { width: 100% !important; }
}
@media (max-width: 480px) {
  .accv2-kpis { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
}

/* ── Ranking : table large → simplification colonnes secondaires ────── */
.rk-table, .ranking-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .rk-row {
    grid-template-columns: 30px 1fr 60px 60px !important;
    font-size: 11.5px !important;
    padding: 6px 4px !important;
  }
  .rk-col-server, .rk-col-account, .rk-col-pseudo {
    /* Cache les colonnes secondaires sur mobile */
    display: none !important;
  }
}
@media (max-width: 480px) {
  .rk-row {
    grid-template-columns: 26px 1fr 50px !important;
  }
}

/* ── Combat dashboard : moins envahissant ──────────────────────────── */
@media (max-width: 900px) {
  .fdb-v2-grid {
    grid-template-columns: 1fr !important;
  }
  /* Quand combat actif, dashboard se contracte */
  #combat-dashboard.collapsed,
  #combat-dashboard {
    max-height: 52vh !important; /* v854 — était 38vh : « petite boîte » trop tassée sur mobile → plus de hauteur visible */
    overflow-y: auto !important;
  }
}

/* ── HDV : tables responsives ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hdv-listings-grid, .hdvm-grid, .hdvr-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .hdv-row, .hdvr-row {
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
  }
  .hdv-filter-bar, .hdvm-filters {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .hdv-filter-bar > * { font-size: 12px !important; }
  /* Modale vente : fit screen */
  .hsm-modal {
    width: 95vw !important;
    max-width: 95vw !important;
  }
  .hsm-lots {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Modales : largeur fluide ──────────────────────────────────────── */
@media (max-width: 768px) {
  .rename-modal, .modal-content, .shop-grid-modal, .grim-modal,
  .auth-features-grid, .cc-body, .forge-modal, .recipe-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
  }
  /* Modales très hautes */
  .offline-summary, .ol-summary {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  /* Modale offline : grid 4 col → 2 col */
  .ot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* offline-chars cards compactes */
  .offline-chars {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
}

/* ── v1026 — Modale CLIC SUR OBJET : FEUILLE BASSE (bottom-sheet) mobile ─────────────
   Avant (v854) : popup centré 95vw, boutons en 1 colonne (≈10 actions = très haut, scroll pénible)
   + overlay en backdrop-filter PLEIN ÉCRAN (gèle le compositor WebView → impression « pas adapté »).
   Maintenant : feuille ancrée EN BAS (pouce-friendly), pas de blur, actions en GRILLE 2 colonnes
   (primaires/danger en pleine largeur), grosses cibles tactiles. Scopé via #item-action-modal (l'OVERLAY,
   par id) pour ne pas toucher les autres .rename-modal-overlay. */
@media (max-width: 768px) {
  #item-action-modal {
    align-items: flex-end !important;        /* ancre la feuille en bas de l'écran */
    justify-content: center !important;
    padding: 0 !important;
    backdrop-filter: none !important;        /* anti-freeze WebView (cf. mémoire) */
    -webkit-backdrop-filter: none !important;
    background: rgba(8,4,2,0.88) !important;  /* compense le blur retiré */
  }
  #item-action-modal .item-action-modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 90vh !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0 !important;  /* coins hauts arrondis = feuille */
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    animation: none !important;               /* pas de slide+scale (clignote sur WebView) */
    display: flex !important; flex-direction: column !important;
  }
  #item-action-modal .iam-effs { max-height: 32vh !important; overflow-y: auto !important; }
  #item-action-modal .iam-actions {
    grid-template-columns: 1fr 1fr !important; /* 2 colonnes = 2× moins de scroll */
    gap: 8px !important;
  }
  /* actions importantes (équiper, activer, jeter…) en PLEINE largeur, bien visibles */
  #item-action-modal .iam-actions .btn-primary,
  #item-action-modal .iam-actions .btn-danger { grid-column: 1 / -1 !important; }
  #item-action-modal .iam-actions button { min-height: 48px !important; font-size: 13px !important; }
}

/* ── v1026 — Concasseur : multi-sélection plus rapide au doigt ───────────────────────
   Cartes = plus grandes cibles tactiles ; barre d'action (count + Concasser) collante
   ET dupliquée en bas pour rester sous le pouce sans remonter en haut de la liste. */
@media (max-width: 768px) {
  .concass-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  .concass-card { min-height: 56px !important; padding: 10px 12px !important; }
  .concass-card > div:first-child { width: 24px !important; height: 24px !important; } /* case à cocher + grande */
  #concass-action-top { top: 0 !important; }
}

/* ── Boutique jetons : grille responsive ───────────────────────────── */
@media (max-width: 768px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .shop-offer { padding: 8px !important; }
  .shop-offer-name { font-size: 12px !important; }
  .shop-offer-desc { font-size: 11px !important; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* ── Compendium : grilles 4 → 2 → 1 colonnes ───────────────────────── */
@media (max-width: 768px) {
  .cmpd-grid, .cmpd-list, .compendium-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cmpd-row { font-size: 12px !important; padding: 6px !important; }
}
@media (max-width: 480px) {
  .cmpd-grid, .cmpd-list, .compendium-grid { grid-template-columns: 1fr !important; }
}

/* ── Bureau / Missions : cards 2 → 1 ───────────────────────────────── */
@media (max-width: 768px) {
  .mission-cards, .bureau-grid, .br-grid { grid-template-columns: 1fr !important; }
  .mission-card { padding: 10px !important; }
}

/* ── Quests : liste 2 col → 1 ──────────────────────────────────────── */
@media (max-width: 768px) {
  .quests-list, .qst-grid { grid-template-columns: 1fr !important; }
  .qst-card { padding: 10px !important; }
}

/* ── Fresque : grille 5/6 → 2 sur mobile ───────────────────────────── */
@media (max-width: 768px) {
  .frq-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .frq-grid { grid-template-columns: 1fr !important; }
}

/* ── Runes catalog : grille responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .runes-grid, .rune-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .rune-tile { font-size: 11px !important; }
}

/* ── Inventaire : slots 6 → 5 → 4 col ──────────────────────────────── */
@media (max-width: 480px) {
  .inventory-grid, .inv-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
}
@media (max-width: 380px) {
  .inventory-grid, .inv-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── Banque : pagination + items resp ──────────────────────────────── */
@media (max-width: 768px) {
  .bank-grid, .bank-items {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
  .bank-filters, .bank-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}
@media (max-width: 380px) {
  .bank-grid, .bank-items { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Arène (combat) : sidebar collapse ─────────────────────────────── */
@media (max-width: 900px) {
  .arena-sidebar, .arena-side-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  .arena-main { padding: 6px !important; }
}

/* ── Notifications dropdown : largeur fluide ───────────────────────── */
@media (max-width: 480px) {
  #notif-dropdown {
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* ── Sidebar persos : compacte sur mobile portrait ─────────────────── */
@media (max-width: 480px) {
  .sidebar, #sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  .char-card { padding: 6px 8px !important; font-size: 12px !important; }
  .char-portrait { width: 32px !important; height: 32px !important; }
}

/* ── Header dashboard : pills resp ─────────────────────────────────── */
@media (max-width: 480px) {
  .dash-resources, .dash-res-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .dash-res-pill { padding: 3px 6px !important; }
}

/* ── Stats fiche perso : tooltip lisible ───────────────────────────── */
@media (max-width: 768px) {
  .stv2-grid { grid-template-columns: 1fr !important; }
  .stv2-stat-eq { font-size: 10px !important; }
  .stv2-card { padding: 10px !important; }
}

/* ── Forge / Concasseur : modales tighter ──────────────────────────── */
@media (max-width: 768px) {
  .forge-grid, .conc-grid, .concass-modal {
    grid-template-columns: 1fr !important;
  }
  .forge-aura-chip { font-size: 11px !important; padding: 3px 6px !important; }
}

/* ── Battle Pass : tier track scrollable ───────────────────────────── */
@media (max-width: 768px) {
  .bp-tiers-track, .bp-tier-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .bp-tier {
    min-width: 80px !important;
    font-size: 11px !important;
  }
}

/* ── Patchnotes : tabs scrollables ─────────────────────────────────── */
@media (max-width: 768px) {
  .pn-tabs, .pn-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .pn-tab { font-size: 11px !important; padding: 4px 8px !important; }
}

/* ── Toasts : pile en bas sur mobile, pas en top-right ─────────────── */
@media (max-width: 480px) {
  #toast-stack {
    left: 4px !important;
    right: 4px !important;
    bottom: 60px !important;
    top: auto !important;
    align-items: stretch !important;
  }
  .toast { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── Online-play overlay : layout mobile propre (v730) ──────────────────
   1 seule colonne, défilement unique (pas de scrolls imbriqués), grosses
   cibles tactiles. C'est l'interface de jeu 100% en ligne sur mobile. */
@media (max-width: 768px) {
  #op-overlay #op-grid {
    display: block !important;            /* colonnes empilées en flux vertical */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    gap: 0 !important;
  }
  #op-overlay .op-panel {
    overflow: visible !important;         /* tue les scrolls imbriqués */
    max-height: none !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    animation: none !important;
  }
  #op-overlay #op-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  #op-overlay #op-header > div:last-child { flex-wrap: wrap !important; gap: 6px !important; }
  #op-overlay #op-header h2 { font-size: 15px !important; }
  #op-overlay .op-resource { font-size: 11px !important; padding: 3px 8px !important; }
  /* Cibles tactiles plus grandes */
  #op-overlay .op-char { padding: 12px !important; margin-bottom: 8px !important; }
  #op-overlay .op-zone { padding: 12px !important; margin-bottom: 7px !important; font-size: 13px !important; }
  #op-overlay .op-btn,
  #op-overlay #op-create-char { padding: 10px 14px !important; font-size: 13px !important; min-height: 42px !important; }
  #op-overlay .op-log { max-height: 240px !important; overflow-y: auto !important; }
  /* Chat compact en bas */
  #op-overlay #op-chat { height: 130px !important; }
}

/* ── Mode "Online active" dot : pas en sticky top-right ────────────── */
@media (max-width: 480px) {
  #online-mode-dot {
    bottom: 8px !important;
    left: 8px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  #op-launch-btn {
    bottom: 8px !important;
    left: auto !important;
    right: 8px !important;
    font-size: 10px !important;
  }
}

/* ── Safe area iOS notch ───────────────────────────────────────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── FARM mobile : bandeau donjon + plan compacts (v726) ─────────────
   Dragon Cochon : le bandeau (clé/infos/boss) + le « plan du donjon »
   prenaient une hauteur démesurée (« immense ») et repoussaient monstres
   et drops tout en bas. On compacte fortement sur téléphone, sans toucher
   la structure desktop. mobile.css est chargé en dernier → ces règles
   gagnent sur les overrides #panel-farm de style.css à largeur égale. */
@media (max-width: 640px) {
  /* Récupère la marge latérale (24px de chaque côté) gaspillée sur mobile */
  #panel-farm .farm-dungeon-banner.fdb-v2 { margin: 0 0 8px !important; padding: 8px 10px !important; }
  /* v744 — Le bandeau (Dragon Cochon) restait TROP HAUT : 3 blocs (clé/infos/boss) empilés.
     → Clé + Boss côte à côte sur la rangée 1, Infos en pleine largeur sur la rangée 2.
     Hauteur réduite d'environ un tiers, sans rien retirer. */
  #panel-farm .fdb-v2-grid {
    display: flex !important; flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 6px 8px !important; align-items: stretch !important;
  }
  #panel-farm .fdb-v2-key  { order: 1 !important; flex: 1 1 40% !important; min-width: 0 !important; }
  #panel-farm .fdb-v2-boss { order: 2 !important; flex: 1 1 40% !important; min-width: 0 !important; }
  #panel-farm .fdb-v2-info { order: 3 !important; flex: 1 1 100% !important; }
  #panel-farm .fdb-v2-key,
  #panel-farm .fdb-v2-boss { padding: 4px 0 !important; gap: 7px !important; align-items: center !important; }
  #panel-farm .fdb-v2-info { gap: 3px !important; padding: 4px 0 0 !important; }
  #panel-farm .fdb-v2-key-img,
  #panel-farm .fdb-v2-boss-img,
  #panel-farm .fdb-v2-key-emoji,
  #panel-farm .fdb-v2-boss-emoji { width: 28px !important; height: 28px !important; font-size: 20px !important; }
  #panel-farm .fdb-v2-key-name,
  #panel-farm .fdb-v2-boss-name { font-size: 12px !important; line-height: 1.15 !important; }
  #panel-farm .fdb-v2-key-label,
  #panel-farm .fdb-v2-boss-label { font-size: 8.5px !important; }
  #panel-farm .fdb-v2-key-stock,
  #panel-farm .fdb-v2-boss-lvl { font-size: 9.5px !important; margin-top: 0 !important; }
  #panel-farm .fdb-v2-title { font-size: 12px !important; }
  #panel-farm .fdb-v2-stats { font-size: 10px !important; gap: 3px 8px !important; }
  #panel-farm .fdb-v2-tip { display: none !important; }
  /* Ligne « Stratégie pour ce donjon » : compacte (gardée accessible) */
  #panel-farm .farm-dungeon-strat-row { flex-wrap: wrap !important; gap: 5px !important; padding: 6px 8px !important; font-size: 11px !important; }
  #panel-farm .farm-dungeon-strat-row .fds-select { max-width: 100% !important; }
  /* Plan du donjon : hauteur bornée + scroll au lieu d'une longue liste empilée */
  #panel-farm .fzd-rooms-list {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    max-height: 124px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #panel-farm .fzd-room { font-size: 11px !important; padding: 4px 8px !important; margin: 2px 3px 2px 0 !important; }
  /* En-tête de zone : titre mesuré, perceptor passe à la ligne */
  #panel-farm .fzd-header { flex-wrap: wrap !important; gap: 6px !important; padding: 12px 12px 10px !important; }
  #panel-farm .fzd-title { font-size: 15px !important; }
  /* Monstres + drops : grilles plus denses pour limiter le scroll */
  #panel-farm .fmd-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 5px !important; }
  #panel-farm .farm-drops-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important; }
  /* Sous-zones : 2 colonnes au lieu d'1 sur les téléphones standards */
  #panel-farm .fzcv2-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important; }
}
@media (max-width: 380px) {
  #panel-farm .fmd-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #panel-farm .fzcv2-grid { grid-template-columns: 1fr !important; }
}

/* ── Arène de combat : refonte mobile LISIBLE (v1683) ────────────────────
   SOURCE DE VÉRITÉ unique ≤640 (remplace v738/v743 + neutralise le v1681 @768
   qui ciblait des classes INEXISTANTES .arena-mob/.arena-monster/.arena-fighter-name
   et faisait des cartes 66px illisibles).
   Échecs précédents : cartes 46–66px = illisibles ; wrap + hauteur figée 260px
   (style.css:429) → monstres COUPÉS ; mauvaises classes → règles mortes.
   Stratégie : EMPILER (joueurs au-dessus, monstres en dessous) ; CHAQUE rangée en
   nowrap + overflow-x:auto (scroll horizontal, jamais de coupe) ; cartes ~88px
   (perso = monstre, MÊME règle car les 2 camps réutilisent .arena-fighter,
   cf ui.js:25253/25315) ; sprite ~58px LISIBLE ; LEVER tous les clips verticaux
   (height/max-height/overflow:hidden) qui rognaient les 2 rangées.
   Préfixes #combat-dashboard / body → battent les bases hors-média
   (style.css:15737 global, 6038, 2830) et les @media 720/980/768. */
@media (max-width: 640px) {
  /* 1. LIBÉRER LA HAUTEUR (anti-coupe verticale) — bat 225/429/2830/14501/26279 */
  #combat-dashboard .dash-combat-row {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow-x: visible !important; overflow-y: visible !important;
  }
  body .dash-combat-arena {
    overflow: visible !important; height: auto !important;
    min-height: 0 !important; max-height: none !important;
  }
  /* 2. STAGE EN COLONNE : joueurs / VS / monstres empilés — bat 15737/14504/26279 */
  body .arena-stage,
  body .arena-stage.no-fight {
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
    padding: 8px 6px !important; gap: 8px !important;
  }
  /* 3. CHAQUE RANGÉE : nowrap + scroll horizontal (anti-coupe horizontale) —
        lève le overflow:hidden de base (style.css:6038) + wrap (15743/v738). */
  body .arena-side,
  body .arena-side-players,
  body .arena-side-monsters {
    flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important; min-width: 0 !important;
    justify-content: flex-start !important;
  }
  body .arena-side::-webkit-scrollbar,
  body .arena-side-players::-webkit-scrollbar,
  body .arena-side-monsters::-webkit-scrollbar { display: none; }
  /* VS vertical inutile en colonne → masqué (plus net) */
  body .arena-divider { display: none !important; }
  /* 4. CARTES LISIBLES ~88px (perso = monstre, MÊME taille) */
  body .arena-fighter {
    flex: 0 0 88px !important;
    width: 88px !important; min-width: 88px !important; max-width: 88px !important;
    min-height: 0 !important; padding: 4px !important; box-sizing: border-box !important;
  }
  body .arena-sprite-wrap { height: 60px !important; width: 100% !important; }
  body .arena-sprite { height: 58px !important; max-width: 64px !important; width: auto !important; }
  /* Carte sous le sprite — VRAIES classes (corrige le bug du v1681) */
  body .arena-card { padding: 3px 5px !important; width: 100% !important; border-radius: 6px !important; }
  body .arena-card-name {
    font-size: 9.5px !important; letter-spacing: 0 !important; line-height: 1.1 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  body .arena-card-badges { gap: 3px !important; margin: 2px 0 !important; }
  body .arena-pill { font-size: 8px !important; padding: 0 4px !important; border-radius: 6px !important; }
  body .arena-card-hp { height: 10px !important; }
  body .arena-card-hp-txt { font-size: 8px !important; letter-spacing: 0 !important; }
  /* En-tête combat (DONJON … · TOUR) : compact, ne déborde pas */
  .dash-combat-arena .arena-room-badge { font-size: 11px !important; }
}

/* ── v1683 — OVERRIDE AUTORITAIRE arène mobile (anti-pile-up legacy) ────
   PROBLÈME RACINE de « cartes minuscules » : des blocs @768 ANCIENS dans
   style.css (v468 ~42852, ~43106, ~43198) imposent `max-height:40–50px` +
   `width/height:40–44px` sur `.arena-sprite` via `body .arena-fighter .arena-sprite`
   (spécificité 0,0,2,2) → ils CAPENT mes sprites 58–76px (mes règles n'avaient pas
   de max-height → le max-height legacy gagnait → 40px illisible).
   FIX : sélecteurs à #id (#combat-dashboard → 0,1,x,x) qui battent TOUT le legacy,
   et on pose height ET max-height ENSEMBLE pour qu'aucun cap ne survive.
   Cartes/sprites perso = monstre (les 2 réutilisent .arena-fighter). */
@media (max-width: 640px) {
  #combat-dashboard .arena-fighter {
    flex: 0 0 88px !important;
    width: 88px !important; min-width: 88px !important; max-width: 88px !important;
    min-height: 0 !important; padding: 4px !important; box-sizing: border-box !important;
  }
  #combat-dashboard .arena-sprite-wrap,
  #combat-dashboard .arena-fighter .arena-sprite-wrap {
    height: 62px !important; min-height: 62px !important; max-height: 62px !important;
    width: 100% !important; line-height: 0 !important;
  }
  #combat-dashboard .arena-sprite,
  #combat-dashboard .arena-fighter .arena-sprite {
    height: 58px !important; min-height: 0 !important; max-height: 58px !important;
    width: auto !important; max-width: 64px !important; object-fit: contain !important;
  }
  /* Onglet Combats plein écran : on garde le MÊME gabarit lisible (pas de 76/108
     hérité qui, capé par le legacy max-height, donnait 40px). */
  body.panel-farm.mtab-combat .arena-fighter {
    min-width: 88px !important; max-width: 88px !important; width: 88px !important;
  }
  body.panel-farm.mtab-combat .arena-sprite-wrap {
    height: 62px !important; min-height: 62px !important; max-height: 62px !important;
  }
  body.panel-farm.mtab-combat .arena-sprite {
    height: 58px !important; max-height: 58px !important; max-width: 64px !important;
  }
}

/* ── Farm mobile (v739) : onglets de zones + table de drops ──────────
   Avant : les ~15 onglets de zones s'empilaient en un gros pavé, et les 50
   drops poussaient tout le reste hors écran. On met les onglets en 1 rangée
   scrollable horizontalement, et on borne la table de drops (scroll interne). */
@media (max-width: 640px) {
  #panel-farm .farm-area-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 5px !important;
    padding: 0 0 5px 0 !important;
  }
  #panel-farm .farm-area-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 11px !important;
  }
  /* v743 — Plus de scroll interne dans les drops (« très chiant dans un scroll »).
     On laisse la grille couler dans le scroll NORMAL de la page, mais on la rend
     dense (petites pastilles) pour qu'elle ne pousse pas tout le reste hors écran. */
  #panel-farm .farm-drops-grid {
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
    gap: 4px !important;
  }
  #panel-farm .farm-drops-header { font-size: 12px !important; }
}

/* ── v742 — Badge "EN LIGNE" (cloud) dans l'en-tête de jeu : pastille verte claire ── */
.dash-cloud-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(106,212,138,0.15); color: #6ad48a;
  border: 1px solid rgba(106,212,138,0.45); border-radius: 999px;
  padding: 3px 10px; font: 800 10.5px/1 -apple-system, Inter, sans-serif;
  letter-spacing: 0.4px; white-space: nowrap; flex-shrink: 0; align-self: center;
}

/* ── v746 — En-tête de JEU mobile : barre TRÈS fine, minimaliste (refonte demandée).
   GAUCHE : Kamas total UNIQUEMENT. DROITE : YouTube, Boutique, n° version, Mon compte.
   Tout le reste masqué (logo, badge ☁, autres ressources, Almanax, cloche, autosave).
   Almanax + Runes restent accessibles via le menu latéral (.nav-mobile-only).
   Sélecteurs en #id (1,0,0) pour battre les ~15 règles .dash-* éparpillées dans style.css. */
@media (max-width: 640px) {
  #combat-dashboard .dash-activity-feed,
  .dash-activity-feed { display: none !important; }

  #combat-dashboard .dash-titlebar {
    flex-wrap: nowrap !important; align-items: center !important;
    padding: 3px 8px !important; gap: 6px !important; min-height: 0 !important;
  }
  /* Masqués : logo + badge online → barre minimaliste */
  #combat-dashboard .dash-logo, .dash-cloud-badge { display: none !important; }

  /* GAUCHE : Kamas UNIQUEMENT. On masque TOUTES les autres ressources (Persos, PP groupe, perks,
     En farm, Tués, Banque, compteur serveur…) quelle que soit leur classe → barre vraiment minimale. */
  #dash-resources {
    display: flex !important; flex-wrap: nowrap !important;
    flex: 0 0 auto !important; min-width: 0 !important; width: auto !important;
    overflow: visible !important; gap: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  #dash-resources .dash-res { display: none !important; }
  #dash-resources .dash-res.dash-res-kamas {
    display: flex !important; flex: 0 0 auto !important;
    padding: 2px 4px !important; gap: 4px !important; align-items: center !important;
    background: transparent !important; border: none !important;
  }
  #dash-resources .dash-res-shared, #dash-resources .dash-res-lbl { display: none !important; }
  #dash-resources .dash-res-val { font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; }
  #dash-resources .dash-res-icon { font-size: 13px !important; }
  #dash-resources .dash-res-icon img.ic-kama-lg { width: 16px !important; height: 16px !important; }

  /* DROITE : YouTube + Boutique (icône seule) + version + compte. Almanax/cloche/autosave masqués. */
  #btn-almanax, #btn-notif, .dash-save-cluster { display: none !important; }
  /* v1683 — Header mobile : TIENT sur 390 sans déborder + ÉQUILIBRE.
     Échecs précédents : v1681 (space-between SANS neutraliser margin-left:auto →
     trou) ; v1682 (flex-start → tout collé gauche, vide à droite). ROOT CAUSE du
     débordement : #dash-team-icons (équipe) n'était PAS borné → 4 avatars 32px+gaps
     poussaient kamas + actions hors écran.
     Stratégie ÉQUILIBRE : 2 paquets — GAUCHE = équipe + kamas regroupés (order 0/1) ;
     DROITE = actions poussées au bord par `margin-left:auto` (order 2). Pas de
     space-between (qui créerait un vide ENTRE équipe et kamas) : un seul `auto`
     entre le groupe gauche et les actions → gauche compacte, actions à droite.
     padding-left:52px réserve la place du hamburger ☰ (position:fixed, hors flux). */
  #combat-dashboard .dash-titlebar.thx { justify-content: flex-start !important; gap: 6px !important; padding-left: 52px !important; }
  /* ÉQUIPE — borne ANTI-DÉBORDEMENT : max-width + scroll horizontal (jamais ne
     pousse kamas/actions). flex:0 1 auto = peut rétrécir, ne grandit pas. Avatars
     réduits à 28px (!important bat le width inline de renderHeaderTeam ui.js:27976
     qui n'a PAS d'!important ; le max-width inline n>9 ui.js:27966 est battu par
     notre !important). 4 avatars 28px ≈ 130px max, au-delà ça SCROLLE. */
  #combat-dashboard .dash-titlebar.thx #dash-team-icons {
    order: 0 !important; margin: 0 !important;
    flex: 0 1 auto !important; max-width: 34vw !important;
    overflow-x: auto !important; overflow-y: visible !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #combat-dashboard .dash-titlebar.thx #dash-team-icons::-webkit-scrollbar { display: none; }
  #combat-dashboard .dash-titlebar.thx #dash-team-icons .dash-team-ic {
    width: 28px !important; height: 28px !important; flex: 0 0 auto !important;
  }
  /* KAMAS — flex:0 0 auto = ne se comprime JAMAIS → « 1 234 567 » non tronqué.
     min-width:max-content garantit la largeur du nombre complet. */
  #combat-dashboard .dash-titlebar.thx .dash-resources { margin: 0 !important; order: 1 !important; flex: 0 0 auto !important; }
  #combat-dashboard .dash-titlebar.thx .dash-resources .dash-res.dash-res-kamas { flex: 0 0 auto !important; min-width: max-content !important; }
  /* ACTIONS — poussées à DROITE par le seul `auto` de la barre (équilibre). */
  #combat-dashboard .dash-titlebar.thx .dash-actions { margin-left: auto !important; order: 2 !important; }
  /* Séparateur dégradé doré à gauche des actions : masqué mobile (groupage compact) */
  #combat-dashboard .dash-actions::before { display: none !important; }
  #combat-dashboard .dash-actions {
    margin-left: 0 !important; flex: 0 0 auto !important;
    display: flex !important; align-items: center !important;
    gap: 6px !important; padding-left: 0 !important; border-left: none !important;
  }
  /* v1685 — Header mobile en ICÔNES (anti-chevauchement sur écran ÉTROIT ; échecs précédents : texte « TURQUOISE »
     qui débordait + tout testé à 390 alors que les téléphones font ~360 → ça se chevauchait). Kamas = coin +
     MONTANT (seul texte gardé, 1er besoin owner) ; PALIER / BOUTIQUE / COMPTE = ICÔNES rondes seules. Le palier
     affiche l'EMOJI du tier coloré (💎/👑/… posé par updateYTHeader ui.js) — plus aucun texte qui déborde.
     ⚠️ HAMBURGER : #sidebar-toggle faisait 44px (y14→58) mais le header 36px → dépassait 22px SOUS le header et
     chevauchait l'onglet « Zones ». Fix : header min-height 52px + hamburger réduit à 36px → il tient dedans.
     Vérifié au preview 360px. */
  #combat-dashboard .dash-titlebar.thx { gap: 8px !important; padding-left: 50px !important; padding-right: 8px !important; min-height: 52px !important; }
  /* ⚠️ `.dash-actions` a `overflow-x:auto` en base → une BARRE DE SCROLL apparaissait DANS le header sur WebView
     (cf. owner « je vois toujours un scroll dans le header » + memo « éviter overflow-x »). Le contenu tient
     (mesuré over:0) → on force overflow:visible pour supprimer la barre. */
  #combat-dashboard .dash-actions { gap: 8px !important; overflow-x: hidden !important; overflow-y: visible !important; }
  /* v1685 — ANTI-SCROLL DÉFENSIF (demande owner) : le preview est mesuré 100% sans scroll (rien ne scrolle,
     contenu = largeur écran pile), mais l'app WebView montre un léger scroll horizontal résiduel non reproductible
     ici. On CLIPPE donc tout débordement horizontal du header (barre titre + ressources) → aucune barre ne peut
     apparaître, quitte à rogner 1-2px invisibles. Ciblé HEADER (pas l'arène/combat-row). (La barre titre utilise
     déjà overflow-x:hidden sans souci ; cf. memo « éviter overflow-x » → on reste minimal + ciblé.) */
  #combat-dashboard .dash-titlebar.thx { overflow-x: hidden !important; max-width: 100% !important; }
  #combat-dashboard .dash-titlebar.thx .dash-resources { overflow-x: hidden !important; }
  #combat-dashboard .dash-actions #dash-toggle,
  #combat-dashboard .dash-actions #dash-version { display: none !important; }
  /* HAMBURGER : faisait 44px (y14→58) → dépassait 22px sous le header et chevauchait l'onglet « Zones ».
     ⚠️ une règle de base le tient à 44px → il faut `html body` (spécificité supérieure) pour le réduire.
     36px + top 10 → y10→46, tient dans le header 52px. */
  /* ⚠️ top DOIT inclure la safe-area : sinon le ☰ se place DANS la barre de statut (sur l'horloge) sur l'app.
     calc(8px + safe-area) → sous l'horloge sur l'app, 8px dans un navigateur (safe-area=0). */
  html body #sidebar-toggle { top: calc(8px + env(safe-area-inset-top, 0px)) !important; width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; }
  /* Anti-scroll horizontal de PAGE (défensif, app WebView) — la page ne doit jamais scroller horizontalement. */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  /* v1685 — #amf-version : badge FIXE « v1685 » (z-index 999) qui se posait PAR-DESSUS les boutons du header
     (palier/boutique). C'est lui le « v1685 » vu sur les captures (≠ #dash-version déjà masqué). Demande owner :
     le RETIRER totalement sur mobile. */
  #amf-version { display: none !important; }
  /* v1685 — ÉQUIPE masquée sur mobile (demande owner) : avec 8 persos, le strip #dash-team-icons (overflow-x:auto)
     SCROLLAIT dans le header (266px de contenu dans 69px) = LE « scroll dans le header » que voyait l'owner.
     Masqué → header aéré (kamas + palier + boutique + compte), 0 scroll. L'équipe reste visible ailleurs. */
  #combat-dashboard .dash-titlebar.thx #dash-team-icons { display: none !important; }
  /* v1687 — Header (barre titre) AFFICHÉ sur la page « Mon Compte » (demande owner) : il y était MASQUÉ par
     `body.panel-account #combat-dashboard{display:none}` (style.css:28066). On le réaffiche + on masque la ROW
     combat (pas de combat sur cette page) → juste la barre titre (kamas/palier/boutique/compte) en haut du compte. */
  html body.panel-account #combat-dashboard { display: block !important; }
  html body.panel-account #combat-dashboard .dash-titlebar { display: flex !important; }
  html body.panel-account #combat-dashboard .dash-combat-row,
  html body.panel-account #combat-dashboard #dash-combat-row,
  html body.panel-account #combat-dashboard .dash-history-strip { display: none !important; }
  /* Base ICÔNE uniforme (palier + boutique + compte) — rond 34px */
  #combat-dashboard .dash-actions > #btn-youtube,
  #combat-dashboard .dash-actions > #btn-shop,
  #combat-dashboard .dash-actions > #dash-user {
    width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important;
    box-sizing: border-box !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important; overflow: hidden !important; flex: 0 0 auto !important;
    background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important;
  }
  /* PALIER — emoji du tier seul (texte masqué) */
  #combat-dashboard .dash-actions > #btn-youtube .dash-yt-text { display: none !important; }
  #combat-dashboard .dash-actions > #btn-youtube .dash-yt-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; margin: 0 !important; line-height: 1 !important; }
  /* BOUTIQUE — jeton seul */
  .dash-shop-text { display: none !important; }
  #combat-dashboard .dash-actions > #btn-shop .dash-shop-icon { width: 20px !important; height: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  /* COMPTE — avatar seul */
  #combat-dashboard .dash-actions > #dash-user .du-arrow,
  #combat-dashboard .dash-actions > #dash-user .du-info { display: none !important; }
  #combat-dashboard .dash-actions > #dash-user .du-avatar { width: 22px !important; height: 22px !important; font-size: 13px !important; margin: 0 !important; }
  /* KAMAS — coin + montant (seul texte conservé) */
  #combat-dashboard .dash-titlebar.thx .dash-resources .dash-res.dash-res-kamas {
    height: 34px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important;
    gap: 4px !important; padding: 0 10px !important; margin: 0 !important; border-radius: 999px !important; flex: 0 0 auto !important;
    background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important;
  }
  #combat-dashboard .dash-titlebar.thx .dash-res-kamas .dash-res-icon { width: 18px !important; height: 18px !important; margin: 0 !important; background: none !important; border-radius: 0 !important; }
  #combat-dashboard .dash-titlebar.thx .dash-res-kamas .dash-res-val { font-size: 12.5px !important; font-weight: 800 !important; }
  /* v849b — Numéro de version MASQUÉ sur mobile : depuis l'ajout du chip serveur (v848) dans la pastille
     compte, le numéro de version se collait au nom du serveur (« v849 » sur « Hyrkul »). Le serveur est
     l'info importante ; la version reste accessible via le bouton Debug et le panneau Compte. */
  /* v1681 — Badge version : masqué sur mobile (déjà le cas). S'il réapparaît dans
     une barre legacy, le garder DISCRET (petit + muted). On ÉVITE :has() (crash
     WebView, cf. feedback_xixou_app_webview) → on retire seulement la proéminence,
     sans le réafficher : le display:none ci-dessus reste prioritaire. */
  .dash-version { display: none !important; font-size: 9px !important; opacity: .5 !important; color: var(--muted, #9a8f78) !important; font-weight: 600 !important; padding: 0 4px !important; }
  /* v848 — Compte : avatar + CHIP SERVEUR (tap = changer de serveur). AVANT : du-info entièrement masqué
     → le chip serveur (seul point d'entrée du sélecteur) était invisible sur mobile → « pas simple de
     changer de serveur ». On garde le pseudo masqué (place) mais on AFFICHE le chip serveur, coloré
     (Amayiro doré / Hyrkul vert) et bien tappable (44px de haut). */
  .dash-user { padding: 3px 6px !important; }
  .dash-user .du-arrow { display: none !important; }
  .dash-user .du-info { display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; }
  .dash-user .du-info .du-pseudo { display: none !important; }
  .dash-user .du-info .du-server {
    display: inline-flex !important; align-items: center !important;
    font-size: 10px !important; font-weight: 800 !important;
    max-width: 62px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    text-decoration: none !important; padding: 6px 2px !important; min-height: 32px !important;
  }

  /* Raccourcis du menu (Almanax / Runes) : visibles SEULEMENT sur mobile */
  .nav-mobile-only { display: flex !important; }
}
/* Desktop : version cachée + raccourcis menu cachés (les boutons d'en-tête existent déjà) */
.dash-version { display: none; }
.nav-mobile-only { display: none; }

/* ── v758 — Onglets MOBILE (Zones ↔ Combats) RESTAURÉS (demandé). Sur le panneau Farm :
   onglet « Zones & groupes » (défaut) = liste des zones ; onglet « Combats » = arène plein écran.
   Cachés sur desktop (l'arène y est déjà toujours visible). */
.mtabs { display: none; }
@media (max-width: 640px) {
  body.panel-farm #mtabs {
    display: flex !important; gap: 6px; padding: 5px 8px; margin: 0;
    background: rgba(14,10,4,0.92); border-bottom: 1px solid rgba(200,144,48,0.25);
  }
  body.panel-farm .mtab {
    flex: 1 1 0; padding: 9px 6px; border-radius: 8px;
    font-size: 13px; font-weight: 800; letter-spacing: 0.2px;
    background: rgba(60,40,20,0.45); color: #c8b890;
    border: 1px solid rgba(200,144,48,0.22); cursor: pointer; white-space: nowrap;
  }
  body.panel-farm .mtab.active {
    background: linear-gradient(180deg,#b87808,#8a5a08); color: #fff8e0; border-color: #ffd060;
  }
  /* Onglet Zones (défaut) : masque l'arène + l'historique. Onglet Combats : masque les zones. */
  body.panel-farm:not(.mtab-combat) #dash-combat-row,
  body.panel-farm:not(.mtab-combat) #dash-history-strip { display: none !important; }
  body.panel-farm.mtab-combat #panel-farm { display: none !important; }
  body.panel-farm.mtab-combat #combat-dashboard { max-height: none !important; overflow: visible !important; }
  body.panel-farm.mtab-combat #dash-combat-row { max-height: none !important; overflow: visible !important; }
  body.panel-farm.mtab-combat #combat-dashboard .dash-activity-feed { display: block !important; }
  /* Arène en grand dans l'onglet Combats */
  body.panel-farm.mtab-combat .arena-fighter { min-width: 76px !important; max-width: 108px !important; }
  body.panel-farm.mtab-combat .arena-sprite-wrap { height: 80px !important; }
  body.panel-farm.mtab-combat .arena-sprite { height: 76px !important; max-width: 96px !important; }
}

/* ── v989 — Modale groupe MOBILE : refonte complète.
   Problèmes précédents : zone/HP% cachés (impossible de changer), footer hors écran avec 8 persos,
   cibles tactiles trop petites, "Annuler" inutile en footer (✕ header suffit).
   Nouveau : zone + HP% visibles et compacts, liste membres avec scroll fixe,
   footer épinglé avec boutons pleine largeur empilés, cibles 48 px min. */
@media (max-width: 640px) {
  /* ── Boîte conteneur : toujours dans l'écran, flex colonne ── */
  .group-create-modal { padding: 8px !important; align-items: flex-end !important; }
  .group-create-modal .gcmv2-box, .group-create-modal .gcm-box {
    max-width: 100% !important; width: 100% !important;
    max-height: 94vh !important; height: 94vh !important;
    overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    border-radius: 18px 18px 14px 14px !important;
  }

  /* ── Header compact ── */
  .group-create-modal .gcmv2-head {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .group-create-modal .gcmv2-head .gcm-title { font-size: 13px !important; }

  /* ── Corps : défile, prend tout l'espace dispo ── */
  .group-create-modal .gcmv2-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Grille : 1 seule colonne ── */
  .group-create-modal .gcmv2-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  /* ── Zone banner : compact ── */
  .group-create-modal .gcm-zone-banner { padding: 8px 10px !important; }
  .group-create-modal .gcm-zone-banner-name { font-size: 14px !important; }
  .group-create-modal .gcm-zone-banner-meta { font-size: 10px !important; gap: 5px 8px !important; }

  /* ── Zone select + HP% : AFFICHÉS (avant cachés) mais compacts ── */
  .group-create-modal .gcm-invite-section { display: none !important; }
  .group-create-modal .gcm-m-adv {
    display: block !important;
    padding: 8px 10px !important;
  }
  /* Nom du groupe : caché sur mobile (auto-généré, modifiable en éditant depuis la liste des groupes) */
  .group-create-modal .gcm-m-name { display: none !important; }

  /* Zone select full-width, ergonomique */
  .group-create-modal .gcm-zone-select {
    width: 100% !important; font-size: 14px !important;
    padding: 9px 8px !important; border-radius: 8px !important;
    -webkit-appearance: auto;
  }

  /* Slider HP% : plus grand, label à droite */
  .group-create-modal .grp-thresh-row {
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  .group-create-modal .grp-thresh-row input[type=range] {
    flex: 1 !important; height: 28px !important;
  }
  .group-create-modal .grp-thresh-val { font-size: 15px !important; min-width: 38px !important; text-align: right !important; }
  .group-create-modal .gcm-label { font-size: 11px !important; margin-bottom: 6px !important; }

  /* ── Stats (2-col au lieu de 4-col) ── */
  .group-create-modal .gcmv2-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .group-create-modal .gcmv2-stat-val { font-size: 15px !important; }
  .group-create-modal .gcmv2-stat-lbl { font-size: 9px !important; }

  /* ── Boutons quick-select : cibles 36 px ── */
  .group-create-modal .gcm-quick-btn {
    padding: 7px 12px !important; font-size: 12px !important; min-height: 34px !important;
  }

  /* ── Liste des membres : scroll interne + cibles 48 px ── */
  .group-create-modal .gcmv2-members,
  .group-create-modal .gcm-members-list {
    max-height: 42vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px !important;
  }
  .group-create-modal .gcm-member,
  .group-create-modal .gcmv2-member {
    padding: 10px 10px !important;
    min-height: 52px !important;
  }
  .group-create-modal .gcm-member-name { font-size: 13px !important; }
  .group-create-modal .gcm-member-meta { font-size: 11px !important; }
  .group-create-modal .gcm-checkbox {
    width: 24px !important; height: 24px !important; font-size: 14px !important;
    min-width: 24px !important;
  }
  .group-create-modal .gcm-member-avatar { width: 34px !important; height: 34px !important; }

  /* ── Footer : boutons empilés pleine largeur, Annuler caché ── */
  .group-create-modal .gcmv2-footer {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px 14px !important;
  }
  .group-create-modal .gcm-btn-cancel { display: none !important; }  /* ✕ dans le header suffit */
  .group-create-modal .gcm-actions-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .group-create-modal .gcm-btn {
    width: 100% !important;
    padding: 14px 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    min-height: 50px !important;
    text-align: center !important;
  }
  /* « Créer » = secondaire, discret; « Lancer le farm » = primaire, proéminent */
  .group-create-modal .gcm-btn-create { order: 2; opacity: 0.82; }
  .group-create-modal .gcm-btn-create-launch { order: 1; }
}

/* ── Fix scroll horizontal global (sécurité) ───────────────────────── */
html, body {
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   v1393 — SAFE-AREAS app Android (edge-to-edge / viewport-fit=cover).
   Dans l'app Xixou, la WebView dessine SOUS la barre de statut (header
   « trop haut », collé à la caméra) et SOUS la barre de gestes (bas du
   jeu masqué par les boutons d'accueil). env(safe-area-inset-*) vaut 0
   dans un navigateur normal → ces règles sont inoffensives hors app.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Header du jeu : descend sous la barre de statut */
  #combat-dashboard .dash-titlebar {
    padding-top: calc(3px + env(safe-area-inset-top, 0px)) !important;
  }
  /* Écran d'auth : topbar sous la barre de statut, CTA au-dessus des gestes */
  .av2-topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }
  .av2-bottombar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Contenu des panneaux : ne finit plus sous la barre de gestes */
  .panel.active {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Menu latéral mobile : dernier item TOUJOURS au-dessus des boutons du téléphone.
     env(safe-area-inset-bottom) = barre de gestes/boutons (Android/iOS). Certaines
     WebView Android sous-rapportent l'inset → plancher max(28px, …) pour garantir la marge. */
  .left-nav {
    padding-bottom: max(28px, calc(14px + env(safe-area-inset-bottom, 0px))) !important;
    box-sizing: border-box !important;
  }
}

/* v1539 — Classement des guildes : la grille de chaque ligne a des colonnes FIXES en INLINE
   (54px 1fr 80px 110px 90px 90px = ~474px) → débordait/tronquait sur téléphone (inannulable par @media
   sans classe, d'où la classe .mg-rank-grid ajoutée en JS). On replie en flex-wrap : rang + nom sur la
   1re rangée, les 4 stats (niveau/kamas/membres/percepteurs) passent à la ligne en chips lisibles. */
@media (max-width: 560px) {
  #panel-guilde .mg-rank-head { display: none !important; }
  #panel-guilde .mg-rank-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
  }
  #panel-guilde .mg-rank-grid > * { min-width: 0 !important; text-align: left !important; }
  #panel-guilde .mg-rank-grid > :nth-child(2) { flex: 1 1 60% !important; }
}

/* ════════════════════════════════════════════════════════════════════
   AUDIT MOBILE (batch 2) — paysage + cibles tactiles
   ════════════════════════════════════════════════════════════════════ */

/* ── gap3-2 / gap3-3 — PAYSAGE (écran COURT, largeur indifférente : un téléphone en paysage fait
   ~800×390). Les règles mtab (≤640px de large) ne s'y appliquent pas → l'arène FIXE 288px + body
   overflow:hidden coupaient le hub de farm sans aucun scroll. Ici on rétrécit l'arène et on
   réautorise le scroll vertical du panneau farm (normalement overflow:hidden, scroll géré par ses
   enfants qui supposent un écran HAUT). Seuil 540px = paysage téléphone / fenêtre courte. ─────────── */
@media (max-height: 540px) {
  .dash-combat-row {
    height: auto !important;
    min-height: 120px !important;
    max-height: 42vh !important;
  }
  #panel-farm.active { overflow-y: auto !important; }
  /* Chat flottant : corps 300px trop haut sur un écran de ~390px → borné. */
  .live-chat-body { height: 30vh !important; min-height: 90px !important; }
}

/* ── touch-2 — MODALES HAUTES : sur petit écran les boîtes de dialogue dépassaient la hauteur du
   viewport (boutons Confirmer/Valider hors écran) sans scroll interne — la règle mobile existante ne
   posait QUE la largeur (95vw). On rend la boîte scrollable. (body est déjà overflow:hidden → pas de
   scroll-fantôme du fond.) ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rename-modal, .modal-content, .shop-grid-modal, .grim-modal,
  .forge-modal, .recipe-modal-content, .group-create-modal, .dunged-box {
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── touch-3 — APPAREILS TACTILES (pas de hover) : les pastilles ✕ (déséquiper) et 🔒 (verrouiller)
   de l'équipement étaient opacity:0 révélées au SURVOL → invisibles et injouables au doigt. On les
   rend toujours visibles + cibles agrandies. Ciblage du vrai tactile via (hover:none)+(pointer:coarse)
   plutôt que la classe .is-mobile (morte). ──────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .pd-unequip, .pd-lock { opacity: 1 !important; }
  .pd-unequip { width: 22px !important; height: 22px !important; font-size: 13px !important; }
  .pd-lock    { width: 22px !important; height: 22px !important; font-size: 12px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   touch-4 — RESPONSIVE BANQUE + STRATÉGIE (CSS pur, zéro JS).
   App Android = WebView ~380px. Ces panneaux n'étaient jamais adaptés → débordements / labels écrasés.
   mobile.css est chargé APRÈS style.css : à spécificité égale (sélecteurs de classe simples) ces règles
   l'emportent sur les rares règles équivalentes de style.css. Aucune des feuilles chargées APRÈS
   mobile.css (premium-skin, ui-premium, guild-premium, arene-live, admin-premium) ne cible ces classes.
   Tout est sous @media max-width → desktop (>768px) strictement intact.
   NB : les blocs strat en styles INLINE (.strat-routes / .strat-refchar / boucle, aiguillage) ne sont
   PAS ciblables en CSS et sont laissés tels quels (leur flex-wrap inline évite le pire).
   ──────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── BANQUE ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Barre de slots (jauge + actions) : empilée verticalement, pleine largeur. */
  .bank-slots-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .bsb-actions    { flex-direction: column; gap: 6px; }
  /* Le bouton long « 🎒 Équipements de tous les persos →🏦 » a white-space:nowrap INLINE (ui.js) :
     on force le retour à la ligne + pleine largeur, sinon il déborde / est coupé à 380px. */
  .bsb-sweep-btn  { white-space: normal !important; width: 100%; text-align: center; font-size: 11px; }

  /* Barre multi-sélection (6 boutons) : 2 par ligne, le libellé d'info passe sur sa propre ligne. */
  .bank-multi-bar        { flex-wrap: wrap; gap: 6px; }
  .bank-multi-bar button { flex: 1 1 calc(50% - 6px); min-height: 40px; }
  .bank-multi-bar small  { flex: 1 1 100%; margin-left: 0; }
}

/* ── STRATÉGIE ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Ligne d'action de combat : au lieu d'un nowrap qui écrase le label à 2-3 caractères, on autorise
     le wrap et on met le label sur sa propre ligne pleine largeur (fin de l'ellipsis brutale).
     step + icône restent en tête ; badges PA / compteur / ↑ / ✕ tombent sur la 2e ligne. */
  .strat-act     { flex-wrap: wrap; row-gap: 4px; }
  .strat-act-lbl { flex: 1 1 100%; white-space: normal; }

  /* Boutons « ajouter une action » : libellés longs lisibles (wrap + taille fixe). */
  .strat-phase-add .strat-add-btn { font-size: 12px; white-space: normal; }
}