/* ══════════════════════════════════
   RESPONSIVE — Tablet, Mobile & Touch UX
   ══════════════════════════════════ */

/* ── Right Panel Backdrop (mobile overlay) ── */
.rp-backdrop {
  display:none; position:fixed; inset:0;
  background:var(--shade-5); z-index:949;
  backdrop-filter:blur(2px);
  transition:opacity 0.2s;
}
.rp-backdrop.active { display:block; }

/* ── Galaxy Quick Nav (mobile only) ── */
.gal-quick-nav { display:none; }

/* ── Mobile Planet Selector Bar ── */
.mob-planet-bar {
  display:none !important;  /* shown via media query */
  align-items:center; justify-content:center; gap:10px;
  padding:6px 12px;
  background:rgba(8,14,28,0.95);
  border-bottom:1px solid rgba(var(--accent-rgb),0.3);
  font-family:var(--font-mono);
  z-index:100; position:relative;
}
.mob-planet-arrow {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.08);
  color:var(--accent); font-size:var(--fs-md);
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mob-planet-arrow:active { background:rgba(var(--accent-rgb),0.25); }
.mob-planet-edit {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.08);
  color:var(--accent); font-size:18px;
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mob-planet-edit:active { background:rgba(var(--accent-rgb),0.25); }
.mob-planet-center {
  display:flex; align-items:center; gap:8px;
  cursor:pointer; padding:6px 14px;
  border-radius:var(--radius); background:rgba(var(--accent-rgb),0.06);
  border:1px solid rgba(var(--accent-rgb),0.2);
  min-width:0; flex:1; justify-content:center;
}
.mob-planet-name {
  font-size:var(--fs-md); font-weight:700; color:var(--textbright);
  letter-spacing:1px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:55vw;
}
.mob-planet-count {
  font-size:var(--fs-md); color:var(--textsoft); letter-spacing:1px;
}
.mob-planet-chevron {
  font-size:var(--fs-md); color:var(--textsoft);
  transition:transform 0.3s ease; display:inline-block;
}
.mob-planet-chevron.open { transform:rotate(180deg); }
.mob-colony-dropdown {
  display:none;
  z-index:99; background:rgba(8,14,28,0.97);
  border-bottom:1px solid rgba(var(--accent-rgb),0.3);
  padding:0; max-height:0; overflow:hidden;
  transition:max-height 0.3s ease, padding 0.3s ease;
}
.mob-colony-dropdown.open {
  max-height:60vh; overflow-y:auto;
  padding:6px 10px;
}
@media (max-width:1023px) {
  .mob-colony-dropdown { display:block; }
}
.mob-colony-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent;
  font-family:var(--font-mono); font-size:var(--fs-md);
  color:var(--textmid);
}
.mob-colony-item:active { background:rgba(var(--accent-rgb),0.15); }
.mob-colony-item.active {
  background:rgba(var(--accent-rgb),0.12);
  border-color:rgba(var(--accent-rgb),0.35);
  color:var(--textbright);
}
.mob-colony-thumb {
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  flex-shrink:0; border:1px solid rgba(var(--accent-rgb),0.3);
}
.mob-colony-thumb svg { width:100%; height:100%; }
.mob-colony-info { flex:1; min-width:0; }
.mob-colony-nm { font-size:var(--fs-md); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mob-colony-co { font-size:var(--fs-md); color:var(--textsoft); }

@media (max-width:1023px) {
  .mob-planet-bar { display:flex !important; }
}

/* ── Safe areas (notched phones) ── */
.topbar {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

/* ── Smooth scroll on all scrollable containers ── */
.left-nav, .planet-section, .right-panel, .notif-list,
.cdx-detail, .cfm-modal, .auth-box, .race-popup,
.al-chat-box, .rnk-table-wrap, .mt-hist-list,
.stg-body, .fi-popup, .cmd-detail-box, .spy-detail,
.bld-tabs-main, .bld-tabs, .rnk-tab-bar, .asc-tabs, .al-tabs {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Anti double-tap zoom (all screens) ── */
html { touch-action:manipulation; -webkit-text-size-adjust:100%; }
body { overscroll-behavior-y:contain; }

/* ── Désactivation globale canvas #factionParticles (audit créatif 09/05, élargi user feedback)
   Ce canvas (50px+ particles pulsantes par faction) :
   - Sur mobile : masquait le contenu Galaxy/Infra
   - Sur desktop : "gros truc orange/vert/cyan qui apparaît à chaque chargement"
   Désactivé sur toutes factions et tous viewports. Gain perf batterie en bonus. ── */
#factionParticles { display: none !important; }

/* ══════════════════════════════════
   LARGE TABLET ≤1400px
   Juste cacher le panneau droit, garder le layout desktop
   ══════════════════════════════════ */
@media (max-width:1800px) {
  /* Topbar — resources compactes, DECO toujours visible */
  .topbar { padding:0 10px; gap:6px; }
  .tb-resources {
    flex-shrink:1; min-width:0;
    gap:6px; padding:0 6px;
  }
  .rb-item { padding:4px 10px; gap:4px; flex-shrink:0; }
  .rb-val { font-size:var(--fs-lg); }
  .rb-rate { font-size:var(--fs-sm); }
  .rb-sep { display:none; }
  .res-strip { flex-shrink:0 !important; }
  .logo-sub { display:none; }

  /* Contenu scrollable horizontalement au tactile */
  .planet-section { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .center-content { overflow-x:auto; }

  /* Galaxy — topbar scrollable, table scrollable */
  .gal-topbar { flex-wrap:wrap; gap:6px; padding:6px 10px; }
  .gal-map-panel { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .gal-table { min-width:600px; }
  .gal-coord-display { font-size:var(--fs-md); }

  /* Attack panel dans Galaxy */
  .atk-unit-row { gap:6px; flex-wrap:wrap; }
  .atk-unit-left { flex:1 1 100%; min-width:0; }
  .atk-unit-controls { flex:0 0 auto; margin-left:auto; }
  .atk-unit-name { font-size:var(--fs-base); }
  .atk-unit-avail { font-size:var(--fs-xs); }

  /* Grids — un peu plus compacts */
  .og-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important; }
  .tc-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important; }
  .ov-grid { grid-template-columns:1fr 1fr; }

  /* Profile */
  .prof-grid4 { grid-template-columns:repeat(2,1fr); }
  .prof-banner { grid-template-columns:1fr 1fr !important; }

  /* Commanders — 5→4 colonnes */
  .cmd-grid { grid-template-columns:repeat(4,1fr) !important; }

  /* Ascension — perk cards 3→2 */
  .asc-perk-cards { grid-template-columns:repeat(2,1fr) !important; }

  /* Overlays — fit écran */
  .notif-dropdown { width:min(320px, 90vw); }
  .notif-toast { max-width:min(420px, 85vw); }
  .race-popup { width:min(560px, 92vw); }
  .asc-perk-modal { width:min(700px, 92vw); }
  .auth-box { width:min(400px, 90vw); }

  /* Rankings — profile panel réduit */
  .rnk-profile { width:200px; }
}

/* ══════════════════════════════════
   TABLET ≤1024px
   Nav icônes, topbar compressé, grilles réduites
   ══════════════════════════════════ */
@media (max-width:1024px), (pointer:coarse) {
  /* Right panel — modal overlay when detail is open
     Also applies to touch devices wider than 1024px (iPad Pro paysage) so
     the building/research/unit detail panel covers the screen instead of
     squeezing into the 280px tablet drawer. */
  .right-panel.rp-mobile-open {
    display:flex !important; position:fixed;
    top:calc(56px + env(safe-area-inset-top, 0px)); left:0; right:0; bottom:0;
    width:100% !important; max-width:100% !important;
    z-index:950 !important; border-left:none;
    transform:none !important;
  }
  .right-panel.rp-mobile-open .rp-back-btn {
    display:flex !important; align-items:center; gap:8px;
    font-size:var(--fs-lg); font-weight:700; padding:10px 16px;
    min-height:48px;
    background:rgba(var(--accent-rgb),0.15);
    border-bottom:2px solid rgba(var(--accent-rgb),0.4);
  }
  /* Fix iOS PWA: flex:1 + overflow:auto needs min-height:0 to actually scroll */
  .right-panel.rp-mobile-open #rpBldDetail {
    min-height:0;
    flex:1 1 0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* Pin upgrade button with position:fixed so it's always visible above the home indicator.
     z-index must be > 950 (mobile panel z-index) to overlay above it. */
  .right-panel.rp-mobile-open #rpBldDetailContent {
    padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  }
  .right-panel.rp-mobile-open .rp-upgrade-btn {
    position:fixed !important;
    left:14px; right:14px; width:auto !important; margin:0 !important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    z-index:960;
    box-shadow:0 -8px 24px var(--shade-3);
    backdrop-filter:blur(8px);
    background:rgba(var(--accent-rgb),0.35) !important;
    min-height:52px;
  }

  /* Topbar — compact */
  .topbar { padding:0 8px; gap:6px; }
  .logo-wrap { display:none; }
  .tb-resources { gap:4px; padding:0 4px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; flex-shrink:1; min-width:0; }
  .rb-item { padding:3px 6px; gap:2px; flex-shrink:0; }
  .rb-val { font-size:var(--fs-md); min-width:36px; }
  .tb-resources .rb-lbl { font-size:16px; }
  .tb-resources .rb-lbl img { width:18px !important; height:18px !important; }
  .rb-rate { display:none; }
  .rb-sep { display:none; }
  .res-strip { flex-shrink:0; }

  /* Grids */
  .og-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; }
  .tc-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; }
  .ov-events { grid-template-columns:1fr; }
  .ov-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .ovw-bld-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }

  /* Rankings */
  .rnk-table-wrap { font-size:var(--fs-md); }
  .rnk-layout { flex-direction:column; }
  .rnk-profile { width:100%; max-width:100%; border-left:none; border-top:1px solid rgba(var(--accent-rgb),0.18); max-height:200px; }

  /* Alliance */
  .al-layout { padding:8px; }
  .al-member-row { font-size:var(--fs-md); }
  .al-header-card { flex-wrap:wrap; padding:12px; gap:10px; }
  .al-hc-tag { font-size:var(--fs-md); padding:6px 10px; }
  .al-leave-btn { font-size:var(--fs-sm); padding:6px 12px; flex-shrink:0; }
  .al-member-card { flex-wrap:wrap; gap:6px; padding:8px 10px; }
  .al-mc-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .al-mc-pts { font-size:var(--fs-sm); }
  .al-mc-role { font-size:var(--fs-xs); }
  .al-mc-act { padding:3px 8px; font-size:var(--fs-sm); flex-shrink:0; }
  .alhq-tax-row { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .alhq-tax-btn { padding:6px 14px; font-size:var(--fs-xs); }

  /* Section header */
  .sec-hdr { height:200px; }
  .sec-hdr-title { font-size:16px; }

  /* Tech header */
  .th-name { font-size:var(--fs-md); letter-spacing:2px; }
  .th-lore { display:none; }
  .th-pbar { width:120px; }

  /* Tutorial coach */
  .tut-coach { width:min(300px, 85vw); right:10px; bottom:10px; }

  /* Overlays */
  .event-popup { width:min(340px, 90vw); }
  .cdx-detail { width:min(480px, 92vw); }
  .auth-box { padding:24px; }

  /* Attack / spy panels */
  .atk-panel { max-width:92vw; }
  .spy-panel { max-width:92vw; }

  /* Overview slots row */
  .ovw-slots-row { flex-wrap:wrap; gap:6px; padding:8px 10px; }
  .ovw-slot { min-width:calc(50% - 6px); }

  /* Simulator inputs */
  .sim-input { width:64px; padding:4px 6px; font-size:var(--fs-md); }
  .gap-unit-inp { width:50px; padding:4px 5px; }

  /* Mission tracker */
  .mission-tracker { padding:10px; }

  /* Touch targets */
  .ut-qty-btn { width:40px; height:40px; }
  .og-cancel-btn { padding:8px 16px; font-size:var(--fs-md); }
  .pvp-spy-btn { padding:4px 10px; min-height:36px; }

  /* Galaxy — sidebar réduite */
  .gal-body { grid-template-columns:1fr 220px; }
  .gal-sys-grid { grid-template-columns:repeat(4,1fr) !important; gap:4px; }

  /* Troupes — stack */
  .troupes-layout { grid-template-columns:1fr !important; }
  .tr-panel.left { border-right:none; border-bottom:1px solid var(--border); }
  .troop-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important; }

  /* Commanders — 3 colonnes */
  .cmd-grid { grid-template-columns:repeat(3,1fr) !important; }

  /* Marché — 2 colonnes */
  .market-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* Performance — reduce blur */
  .tc-card, .unit-card, .ship-card, .ovw-bld-card { backdrop-filter:blur(4px); }
}

/* ══════════════════════════════════
   TABLET PORTRAIT ≤900px
   Intermediate layout for iPads between 1024 and 768
   ══════════════════════════════════ */
@media (max-width:900px) {
  .og-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
  .tc-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
  .cmd-grid { grid-template-columns:repeat(2,1fr) !important; }
  .asc-perk-cards { grid-template-columns:1fr 1fr !important; }
  .prof-grid4 { grid-template-columns:repeat(2,1fr); }
  .ov-grid { grid-template-columns:1fr; }
  .gal-body { grid-template-columns:1fr 200px; }
  .troupes-layout { grid-template-columns:1fr !important; }
  .market-grid { grid-template-columns:1fr 1fr !important; }
  .rnk-layout { flex-direction:column; }
  .rnk-profile { width:100%; max-width:100%; border-left:none; border-top:1px solid var(--border); }
}

/* ══════════════════════════════════
   MOBILE ≤768px
   ══════════════════════════════════ */
@media (max-width:768px) {
  /* iOS auto-zoom prevention */
  input, textarea, select { font-size:16px !important; }

  /* Phase 0 F0.3 — Right panel mobile : top doit compenser la topbar mobile.
     La hauteur réelle de la topbar varie : ~86px à 500px, ~120-150px à 402px
     iPhone 16 Pro (ressources empilées + Dynamic Island safe-area).
     Solution : utiliser --topbar-h mesurée dynamiquement par sgc-bootstrap.js
     (ResizeObserver sur la topbar). Fallback 130px pour pre-DCL et navigateurs
     sans ResizeObserver. */
  .right-panel.rp-mobile-open {
    top: calc(var(--topbar-h, 130px) + 4px) !important;
  }
  .right-panel.rp-mobile-open .rp-back-btn {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface1, #0a0a14);
  }

  /* Mobile scroll fix — pattern le plus simple/portable : ni body ni html ne sont
     conteneurs de scroll, le navigateur scroll le document via la propagation de
     viewport (comportement natif).
     Audit 01/05/2026 : body en display:flex desktop CASSAIT le scroll touch.
     Audit 01/05/2026 v2 : body en overflow-y:auto + height:auto + overscroll-contain
     créait un conteneur fantôme qui piégeait les touch events sur Chrome Android (OnePlus 15).
     Audit 01/05/2026 v3 : html ET body en overflow visible, plus de scroll-container,
     le viewport scroll nativement → touch fluide partout. */
  body {
    display:block !important;
    height:auto !important; min-height:100dvh;
    overflow-x:hidden; overflow-y:visible !important;
    overscroll-behavior:auto !important;
    touch-action:pan-y !important;
  }
  html {
    height:auto !important;
    overflow-x:hidden; overflow-y:visible !important;
    touch-action:pan-y !important;
  }
  .app {
    display:flex; flex-direction:column;
    height:auto; min-height:100vh; min-height:100dvh;
    overflow:visible;
  }
  .main-layout {
    overflow:visible; height:auto;
    padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .center-content {
    overflow:visible; height:auto;
  }
  .planet-frame {
    height:auto; overflow:visible;
  }
  .planet-section {
    overflow-y:visible; min-height:50vh;
  }
  .sec-full {
    overflow-y:visible; height:auto;
  }

  /* Bottom nav — fixed at bottom */
  .left-nav {
    order:1; padding-bottom:env(safe-area-inset-bottom, 0px);
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    position:fixed; bottom:0; left:0; right:0;
    z-index:900;
    background:rgba(8,12,20,0.97);
    border-top:1px solid rgba(var(--accent-rgb),0.3);
  }
  .left-nav::-webkit-scrollbar { display:none; }
  .lnav-item {
    scroll-snap-align:center; flex-direction:column; gap:2px; padding:6px 10px !important;
    border-left:none !important; min-width:52px;
  }
  .lnav-item.active {
    border-top:3px solid var(--accent); padding-left:10px !important;
    background:rgba(var(--accent-rgb),0.2); border-left:none !important;
  }
  .lnav-item:hover { border-left:none; padding-left:10px; }
  .lnav-ico { width:28px; height:28px; font-size:18px; }
  .lnav-lbl { font-size:9px !important; letter-spacing:0.5px; opacity:0.8; text-align:center; max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Topbar — 2 rows: controls top, resources bottom (sticky bands) */
  .topbar {
    height:auto; flex-wrap:wrap; gap:4px; padding:4px 8px;
    padding-top:calc(4px + env(safe-area-inset-top, 0px));
    position:sticky; top:0; z-index:200;
    background:linear-gradient(180deg, rgba(4,8,18,0.96), rgba(4,8,18,0.88));
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(var(--accent-rgb),0.18), 0 4px 12px rgba(0,0,0,0.35);
  }
  .tb-resources {
    order:99; flex:0 0 100%;
    justify-content:space-evenly;
    padding:5px 4px 4px; gap:2px;
    border-top:1px solid rgba(var(--accent-rgb),0.22);
    background:linear-gradient(180deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
    box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),0.12);
    overflow:visible;
  }
  .rb-item { padding:3px 6px; gap:3px; border-radius:6px; flex:1; min-width:0; flex-shrink:1; justify-content:center; }
  .rb-val { font-size:var(--fs-sm); min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .tb-resources .rb-lbl { font-size:var(--fs-md); flex-shrink:0; }
  .tb-resources .rb-lbl img { width:14px !important; height:14px !important; }
  .user-chip { padding:3px 8px; font-size:var(--fs-sm); }
  .notif-bell { width:40px; height:40px; font-size:var(--fs-md); }
  .logout-btn { padding:6px 10px; font-size:var(--fs-sm); min-height:40px; }
  /* Sprint 2 — search btn + faction badge mobile */
  #topbarSearchBtn { padding:3px 6px !important; font-size:12px !important; }
  #topbarSearchBtn span { display:none !important; }
  #topbarFactionBadge { display:none !important; } /* faction visible via theme + sidebar */
  /* iPhone fix — .res-strip dépasse sur mobile (634px > 390 vw)
     → on garde 1 ligne (pas de wrap = pas de bande noire) en cachant les éléments
     redondants : Ori widget (existe en Overview), faction-badge (theme partout) */
  .res-strip {
    flex-wrap:nowrap !important;
    justify-content:flex-end;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
  }
  #oriCrusadeWidget { display:none !important; }
  #userChip { font-size:var(--fs-xs); padding:3px 6px; flex-shrink:1; min-width:0; }
  #userChip .uc-name { max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Construction slots — stack vertically on mobile */
  .og-constr-slots {
    flex-direction:column; gap:8px; padding:10px 12px;
  }
  .og-slot { min-width:0; }
  .og-slot-hdr { font-size:var(--fs-md); letter-spacing:2px; }

  /* Building cards */
  .og-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important; gap:6px !important; }
  .og-card { padding:8px; }
  .og-bld-ico { font-size:20px; }
  .og-bld-name { font-size:var(--fs-md); }

  /* Tech cards — aligned heights */
  .tc-grid { grid-template-columns:1fr 1fr !important; gap:6px !important; align-items:stretch; }
  .tc-card { padding:8px; display:flex; flex-direction:column; }

  /* Tabs — horizontal scroll instead of wrapping */
  /* AL1+M3 audit UI/UX 27/05 — fade-edge right pour signaler que les tabs scrollent */
  .bld-tabs-main, .bld-tabs, .rnk-tab-bar, .al-tab-bar, .al-tabs,
  .quest-tabs, .asc-tabs, .mkt-tabs, .cmd-tab-bar {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .bld-tabs-main { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 10px 6px; gap:3px; }
  .bld-tabs-main::-webkit-scrollbar { display:none; }
  .bld-tab-main { flex-shrink:0; padding:9px 12px; font-size:var(--fs-md); white-space:nowrap; }
  .bld-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 10px 10px; gap:3px; }
  .bld-tabs::-webkit-scrollbar { display:none; }
  .bld-tab { flex-shrink:0; padding:7px 12px; font-size:var(--fs-md); white-space:nowrap; }
  /* cmd-tab-bar (Commandants/Boutique/Specialistes) — meme pattern : sans
     overflow-x:auto, flex:1 sur 3 onglets debordait avec SPECIALISTES PORTE
     coupe a droite. */
  .cmd-tab-bar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 10px 6px; gap:4px; }
  .cmd-tab-bar::-webkit-scrollbar { display:none; }
  .cmd-tab { flex:0 0 auto; padding:9px 14px; font-size:var(--fs-base); white-space:nowrap; letter-spacing:1.5px; }

  /* Fleet grid — bigger touch targets */
  .fleet-ship-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) !important; }

  /* Rankings — card layout mobile */
  .rnk-header { flex-direction:column; gap:4px; padding:8px 10px; }
  .rnk-tab-bar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:4px; padding:4px 6px; }
  .rnk-tab-bar::-webkit-scrollbar { display:none; }
  .rnk-tab-btn { font-size:var(--fs-md); padding:8px 10px; min-height:44px; flex-shrink:0; white-space:nowrap; }
  .rnk-table { font-size:var(--fs-md); }
  .rnk-td, .rnk-th { padding:4px 6px; }
  .rnk-medal { width:auto !important; font-size:14px !important; }
  .rnk-faction { font-size:14px !important; }
  .rnk-td { white-space:normal !important; }

  /* Alliance — horizontal scroll tabs */
  .al-tab-bar { flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 10px; gap:4px; }
  .al-tab-bar::-webkit-scrollbar { display:none; }
  .al-tab-pill { font-size:var(--fs-md); padding:6px 10px; flex-shrink:0; white-space:nowrap; letter-spacing:0.5px; }
  .al-create-form { padding:12px; min-width:auto; }
  .al-list-panel { padding:8px; width:100%; min-width:0; box-sizing:border-box; }
  .al-chat-box { max-height:40vh; }
  .al-no-alliance { flex-direction:column; }
  .al-no-alliance > * { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
  .al-nt-bar { flex-wrap:wrap; }

  /* Touch targets — audit 11/05 P1 mobile (Rankings dense + Galaxy nav) */
  .gal-nav-btn { min-height:44px; min-width:44px; }
  .gal-topbar .gal-nav-btn { min-height:44px; }
  /* Rankings: enlarge tap area without breaking density (rows stay compact) */
  .fac-clickable { min-width:36px; min-height:36px; justify-content:center; }
  .player-link, .rnk-tag { padding:6px 4px; display:inline-block; }
  .rnk-tag.player-link { padding:6px 4px; }

  .al-nt-pill { font-size:var(--fs-base); padding:8px 12px; }
  .al-list-item { flex-wrap:wrap; min-width:0; }
  .al-list-info { min-width:0; flex:1 1 100%; }
  .al-join-btn { flex-shrink:0; }

  /* Fleet header — stack buttons on mobile */
  .fleet-header { flex-direction:column !important; gap:10px !important; align-items:stretch !important; }
  .fleet-header > div:last-child { flex-direction:column !important; gap:6px !important; }
  .fleet-header button { width:100%; font-size:14px !important; padding:10px 14px !important; letter-spacing:1px !important; }

  /* Fleet transport panel — stack grids on mobile */
  #fleetTransportZone > div > div:first-child { grid-template-columns:1fr !important; }
  #fleetTransportZone [style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
  #fleetTransportZone [style*="grid-template-columns:1fr 32px 1fr"] { grid-template-columns:1fr !important; }

  /* Messages */
  .msg-bar { flex-wrap:wrap; gap:4px; }
  .msg-compose-panel { padding:8px; }

  /* Gate screen — mobile: single column, stacked */
  .gate-layout { flex-direction:column !important; }
  .gate-left, .gate-right { width:100% !important; }
  .gate-planet-grid { grid-template-columns:1fr !important; }
  #sf_gate.active { grid-template-columns:1fr !important; grid-template-rows:auto auto auto auto; }

  /* Mode bar responsive */
  .gate-mode-bar { flex-wrap:wrap; height:auto; padding:6px 10px; border-radius:12px 12px 0 0; }
  .gmt { font-size:10px; letter-spacing:1px; padding:7px 8px; }

  /* Panels stack vertically */
  .gpanel { grid-row:auto; grid-column:1; border-radius:0; }
  .gpanel.gpanel-r { grid-row:auto; grid-column:1; border-radius:0 0 12px 12px; }
  .gate-center { grid-row:auto; grid-column:1; }

  /* Panneau droit unifié (Sprint 7) */
  .gpr-stack { gap:10px; }

  /* Troop card grid — single column */
  .gts-grid { grid-template-columns:1fr; }
  .gts-card { padding:8px; }
  .gts-card-name { font-size:10px; }
  .gts-card-icon { font-size:20px; width:28px; min-width:28px; }
  .gts-card-icon img { width:28px; height:28px; }
  .gts-card-badge-atk, .gts-card-badge-def { font-size:9px; padding:1px 4px; }
  .gts-slider::-webkit-slider-thumb { width:20px; height:20px; }
  .gts-slider::-moz-range-thumb { width:20px; height:20px; }

  /* Legacy accordion compact */
  .gts-title { font-size:var(--fs-xs); letter-spacing:1.5px; margin-bottom:10px; padding-bottom:8px; }
  .gts-acc-hdr { font-size:var(--fs-xs); letter-spacing:1.5px; padding:9px 10px; }
  .gts-acc-badge { font-size:var(--fs-xs); padding:2px 8px; }
  .gts-acc-chev { font-size:var(--fs-sm); }
  .gts-icon { font-size:20px; width:34px; min-width:34px; }
  .gts-name { font-size:var(--fs-sm); letter-spacing:0.3px; }
  .gts-badge-atk, .gts-badge-def { font-size:var(--fs-xs); padding:1px 6px; }
  .gts-avail-label { font-size:var(--fs-xs); }
  .gts-avail { font-size:var(--fs-sm); }
  .gts-input { width:40px; font-size:var(--fs-base); padding:5px 3px; }
  .gts-pm { width:34px; height:34px; font-size:var(--fs-md); }
  .gts-controls { gap:4px; }
  .gts-row { padding:8px 10px; gap:5px; }
  .gts-row-bot { padding-left:38px; }
  .gts-power-val { font-size:20px; }
  .gts-power-lbl { font-size:var(--fs-xs); }
  .gts-power-bonus { font-size:var(--fs-sm); }
  .gts-power-bar-label { font-size:var(--fs-sm); }
  .gts-power-status { font-size:var(--fs-sm); }

  /* Gate center — compact */
  #destName { font-size:18px !important; letter-spacing:1.5px !important; }
  #destCoords { font-size:var(--fs-sm); }
  .mc-lbl { font-size:var(--fs-xs); }
  .mc-text { font-size:var(--fs-sm); }
  .gbtn { font-size:var(--fs-sm); padding:12px 8px; letter-spacing:1px; border-radius:var(--radius-md); min-height:44px; }
  .seq-bar { padding:10px 12px; gap:8px; border-radius:var(--radius-md); }
  .sq-lbl { font-size:10px; letter-spacing:1px; }
  .sq-sym { width:28px; height:28px; font-size:var(--fs-sm); }
  .chev-card { padding:12px; border-radius:var(--radius-md); }
  .cc-lbl { font-size:10px; letter-spacing:1px; }
  .chev { width:34px; height:34px; font-size:var(--fs-base); }
  .chevs { gap:5px; }
  .gate-rewards { padding:10px 12px; border-radius:var(--radius-md); }
  .grw-title { font-size:var(--fs-xs); letter-spacing:1.5px; }
  .grw-row { font-size:var(--fs-sm); padding:4px 6px; }
  .pr-name { font-size:var(--fs-sm); }
  .pr-sub { font-size:var(--fs-xs); }
  .pr-threat { font-size:var(--fs-xs); padding:3px 8px; }
  .planet-row { padding:8px 10px; gap:7px; min-height:40px; border-radius:var(--radius); }

  /* Commander in gate panel */
  .gcmd-nm { font-size:var(--fs-sm); }
  .gcmd-bns { font-size:var(--fs-sm); }
  .gcmd-lv { font-size:var(--fs-xs); }
  .gcmd-tokens { font-size:var(--fs-sm); }
  .gcmd-empty { font-size:var(--fs-sm); }

  /* Profile overlay */
  #profileCard { width:95vw !important; max-width:none; }
  .prof-header { flex-direction:column; text-align:center; gap:8px; }
  .prof-actions { flex-direction:column; gap:6px; }
  .pe-bld-grid { grid-template-columns:repeat(2,1fr); }

  /* Section header */
  .sec-hdr { height:120px; }
  .sec-hdr-title { font-size:var(--fs-sm); padding:8px; }

  /* Tech tree */
  .tech-hdr { flex-direction:column; gap:6px; padding:8px 12px; }
  .th-r { align-items:center; }
  .th-pbar { width:100%; max-width:200px; }

  /* Troops / Fleet */
  .troop-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) !important; }
  .fleet-ship-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important; }
  .fleet-empty-state { padding:16px; flex:none; }

  /* Market */
  .market-grid { grid-template-columns:1fr !important; }

  /* Quests */
  .quest-list { gap:6px; }

  /* Commanders */
  .cmd-grid { grid-template-columns:1fr 1fr !important; }

  /* Event banner compact on mobile */
  .gal-evt-banner {
    flex-wrap:wrap; gap:8px; margin:6px 8px;
    padding:10px 12px; border-radius:var(--radius-md);
  }
  .gal-evt-icon { font-size:24px; }
  .gal-evt-name { font-size:var(--fs-md); letter-spacing:2px; margin-bottom:6px; }
  .gal-evt-stats { font-size:var(--fs-md); margin-top:4px; }
  .gal-evt-hp-wrap { height:10px; }
  .gal-evt-atk-btn {
    font-size:var(--fs-md); padding:8px 14px; letter-spacing:1px;
    width:100%; text-align:center;
  }

  /* Galaxy quick-nav bar — sticky bottom */
  .gal-quick-nav {
    display:flex; gap:6px; padding:8px 10px;
    position:sticky; bottom:0; z-index:2;
    justify-content:center;
    background:rgba(8,14,28,0.95);
    border-top:1px solid rgba(var(--accent-rgb),0.25);
    margin-top:auto;
  }
  .gal-qn-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:8px 14px; min-height:44px;
    font-family:var(--font-mono); font-size:var(--fs-md);
    font-weight:700; letter-spacing:1px;
    color:var(--accent); background:rgba(var(--accent-rgb),0.08);
    border:1px solid rgba(var(--accent-rgb),0.25);
    border-radius:var(--radius); cursor:pointer;
    transition:background 0.15s;
  }
  .gal-qn-btn:active { background:rgba(var(--accent-rgb),0.25); }

  /* Galaxy — show all 15 rows (gal-layout overflow:hidden clips the table) */
  .gal-layout { overflow:visible; height:auto; }
  .gal-body { grid-template-columns:1fr !important; overflow:visible; height:auto; }
  .gal-detail-panel {
    display:none; /* hidden by default on mobile — activated via .active */
    border-left:none; border-top:none; max-height:none;
  }
  /* Sprint G2 (13/05/2026) — Bottom sheet 3-anchors Apple Maps style.
     Variable --gal-sheet-h pilotée par sgc-galaxy-sheet.js (peek/mid/full). */
  .gal-detail-panel.active {
    display:flex; flex-direction:column;
    position:fixed;
    left:0; right:0;
    bottom:calc(56px + env(safe-area-inset-bottom, 0px));
    height:var(--gal-sheet-h, 55vh);
    max-height:96dvh;
    z-index:950;
    background:rgba(4,8,18,0.98);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border-top:2px solid rgba(var(--accent-rgb),0.3);
    border-radius:18px 18px 0 0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:14px;
    padding-top:22px; /* room pour handle visuel */
    box-shadow:0 -8px 32px rgba(0,0,0,0.55), 0 -2px 12px rgba(var(--accent-rgb),0.18);
    touch-action:none; /* drag manuel — laisse scroll natif sur content via overflow-y */
    animation:galSheetSpring 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change:height, transform;
  }
  @keyframes galSheetSpring {
    from { transform:translateY(100%); }
    to   { transform:translateY(0); }
  }
  /* Handle bar visuel — tap zone élargie via padding-top du panel */
  .gal-detail-panel.active::before {
    content:''; display:block; position:absolute;
    top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:5px;
    background:linear-gradient(90deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0.7), rgba(var(--accent-rgb),0.35));
    border-radius:3px;
    pointer-events:none;
    box-shadow:0 0 8px rgba(var(--accent-rgb),0.35);
  }
  /* Peek mode : densité minimale, glow accent intensifié */
  .gal-detail-panel.active.peek {
    border-top-color:rgba(var(--accent-rgb),0.55);
    box-shadow:0 -8px 24px rgba(0,0,0,0.55), 0 -3px 16px rgba(var(--accent-rgb),0.35);
  }
  /* Mid mode : standard */
  .gal-detail-panel.active.mid {}
  /* Full mode : prend (presque) tout l'écran, scroll natif content, plus de border-radius haut */
  .gal-detail-panel.active.full {
    border-radius:0;
    border-top:1px solid rgba(var(--accent-rgb),0.4);
    touch-action:auto; /* en full on laisse le scroll interne respirer */
  }
  /* Backdrop scrim — seulement en full (Apple Maps style) */
  .gal-detail-backdrop {
    position:fixed; inset:0;
    bottom:calc(56px + env(safe-area-inset-bottom, 0px));
    z-index:949;
    background:rgba(0,0,0,0); /* transparent par défaut, opacifié en .scrim */
    transition:background 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events:auto;
  }
  .gal-detail-backdrop.scrim {
    background:rgba(2,4,10,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  @keyframes galBackdropIn { from{opacity:0} to{opacity:1} }
  .gal-detail-panel.active .gal-detail-close { display:block; }
  .gal-sys-grid { grid-template-columns:repeat(3,1fr) !important; gap:3px; }
  .pvp-target-btn { padding:8px 10px; min-height:44px; }

  /* Galaxy table — flex layout for mobile rows */
  .gal-table { display:block; }
  .gal-table thead { display:none; }  /* headers useless in flex card layout */
  #galTbody { display:block; }
  .gal-tr {
    display:flex; flex-wrap:wrap; align-items:center;
    overflow:visible; /* reset desktop overflow:hidden (sweep effect) */
  }
  .gal-tr:active:not(.empty) {
    background:rgba(var(--accent-rgb),0.12) !important;
  }
  .gal-td { flex-shrink:0; padding:6px 8px; }
  .gal-td:nth-child(1) { width:auto; }          /* coords */
  .gal-td:nth-child(2) { width:32px; }           /* planet icon */
  .gal-td:nth-child(3) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* name */
  .gal-td:nth-child(4) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* player */
  .gal-td:nth-child(5) { display:none; }         /* alliance — hide on mobile */
  .gal-td:last-child {
    width:100%; flex-basis:100%; padding:4px 8px;
  }
  .gal-td .gal-actions {
    width:100%; gap:6px;
  }
  .gal-act-btn {
    padding:8px 14px !important; font-size:14px !important;
    flex:1; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* Galaxy topbar — compact buttons */
  .gal-topbar { flex-wrap:wrap; gap:6px; padding:8px 10px; }
  .gal-topbar .gal-nav-btn {
    padding:8px 10px; font-size:var(--fs-md); letter-spacing:0.5px;
    min-height:44px;
  }
  .gal-coord-label { font-size:var(--fs-md); letter-spacing:1.5px; }
  .gal-coord-input { width:40px !important; padding:5px 6px; font-size:var(--fs-md); }

  /* Resource tooltips — hide in-place tooltip on mobile (portalled via JS) */
  .rb-item { -webkit-user-select:none; user-select:none; }
  .rb-item .rb-tooltip { display:none !important; }
  .rb-item.rb-tip-open .rb-tooltip { display:none !important; }

  /* Troupes */
  .troupes-layout { grid-template-columns:1fr !important; }
  .tr-panel { padding:10px; }

  /* Profile */
  .prof-banner { grid-template-columns:1fr 1fr !important; }
  .prof-grid4 { grid-template-columns:1fr 1fr !important; }

  /* Overview */
  .ov-grid { grid-template-columns:1fr; }
  .ov-grid-2 { grid-template-columns:1fr; }
  .ov-events { grid-template-columns:1fr; }
  .ov-card { padding:10px 12px; }
  .ov-stat-row { flex-wrap:wrap; gap:4px 12px; padding:4px 0; }
  .ov-stat-lbl { font-size:var(--fs-base); min-width:0; flex:1 1 50%; }
  .ov-stat-val { font-size:var(--fs-base); }
  .fac-bonus-row { padding:6px 8px; gap:8px; }
  .fac-bonus-lbl { font-size:var(--fs-base); min-width:0; }
  .fac-bonus-val { font-size:var(--fs-sm); }
  .ovw-slots-row { flex-direction:column; gap:6px; padding:6px 8px; }
  .ovw-slot { min-width:100%; }
  .ov-event-card { min-height:72px; padding:12px 14px; }
  .ov-event-card:active { transform:scale(0.98); border-color:rgba(var(--accent-rgb),0.55); }

  /* Overlays — constrained height + overscroll */
  .race-popup { width:92vw; max-width:none; max-height:min(85vh, calc(100dvh - 80px)); overflow-y:auto; }
  .event-popup { width:90vw; max-width:none; max-height:min(85vh, calc(100dvh - 80px)); overflow-y:auto; }
  .login-bonus-box { max-width:90vw; padding:20px 24px; }
  .asc-perk-cards { grid-template-columns:1fr; }
  .asc-perk-modal { padding:14px; width:94vw; max-height:min(85vh, calc(100dvh - 80px)); overflow-y:auto; }
  .auth-box { width:92vw; padding:20px 16px; }
  .fi-popup { max-height:min(80vh, calc(100dvh - 80px)); }
  .cdx-detail { max-height:min(85vh, calc(100dvh - 80px)); }
  .cmd-detail-box { max-height:min(85vh, calc(100dvh - 80px)); overflow-y:auto; }
  .stg-body { max-height:min(60vh, calc(100dvh - 160px)); }
  .spy-detail { max-height:min(85vh, calc(100dvh - 80px)); overflow-y:auto; }

  /* Tutorial coach */
  .tut-coach { width:calc(100vw - 20px); right:10px; bottom:calc(58px + env(safe-area-inset-bottom, 0px)); left:10px; }

  /* Notification dropdown — full-width overlay on mobile */
  .notif-dropdown {
    position:fixed !important; top:calc(88px + env(safe-area-inset-top, 0px)); left:10px; right:10px;
    width:auto !important; max-height:60vh;
    border-radius:var(--radius-md);
  }

  /* Simulator */
  .sim-input { width:56px; }

  /* Ascension */
  .asc-title { font-size:16px; letter-spacing:2px; }
  .asc-level-num { font-size:28px; }
  .asc-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .asc-tabs::-webkit-scrollbar { display:none; }
  .asc-tab { font-size:var(--fs-md); padding:8px 10px; flex-shrink:0; white-space:nowrap; }
  .asc-next-grid { grid-template-columns:1fr; }
  .asc-reset-cols { grid-template-columns:1fr; }

  /* Right panel detail */
  .rp-bld-det-name { font-size:16px; }
  .rp-bld-det-icon { font-size:48px; }
  .rp-bld-det-desc { font-size:var(--fs-lg); padding:8px 14px; }
  .rp-cost-row { font-size:16px; padding:6px 0; }

  /* Mission tracker */
  .mission-tracker { padding:8px; gap:8px; }
  .mt-target { font-size:var(--fs-md); }

  /* Commander detail */
  .cmd-detail-box { max-width:92vw; width:92vw; }

  /* Performance — reduce GPU load on mobile */
  .topbar { backdrop-filter:blur(4px); }
  .left-nav { backdrop-filter:blur(4px); }
  .planet-section { backdrop-filter:none; }
  .tc-card, .unit-card, .ship-card, .ovw-bld-card { backdrop-filter:none; background:rgba(10,18,32,0.92); }
  .app { box-shadow:none; }
  .topbar { box-shadow:0 2px 8px var(--shade-2); }
  .global-event-card { padding:10px; }
  /* GPU-accelerated animations only — avoid box-shadow animations */
  .og-card, .tc-card, .unit-card { will-change:transform,opacity; }
  .cfm-overlay, .cfm-modal { will-change:opacity; }
  .gal-tr { will-change:transform,opacity; }
  /* Reduce heavy box-shadows on cards */
  .og-card, .tc-card, .asc-perk-card, .ov-card { box-shadow:none; }
  .cfm-modal { box-shadow:0 0 40px var(--shade-2); }
  .notif-toast { box-shadow:0 2px 12px var(--shade-3); }

  /* ── Auth vortex responsive (1E) ── */
  .auth-vortex { width:280px; height:280px; }
  .auth-chevrons { width:320px; height:320px; }
  .auth-box-border { max-width:92vw; }
  .auth-logo { font-size:16px; letter-spacing:2px; }
  .auth-sub { font-size:var(--fs-md); letter-spacing:2px; margin-bottom:18px; }

  /* ── Tables → Cards on mobile (1B/1C/1D) ── */

  /* Market table cards */
  .mkt-table thead { display:none; }
  .mkt-table, .mkt-table tbody { display:block; width:100%; }
  .mkt-tr {
    display:flex; flex-wrap:wrap; gap:4px 8px;
    padding:10px 12px; margin-bottom:8px;
    background:var(--tint-2); border:1px solid var(--tint-4);
    border-radius:var(--radius); position:relative;
  }
  .mkt-tr.mine { border-color:rgba(var(--accent-rgb),0.2); }
  .mkt-td {
    display:flex; align-items:center; gap:6px;
    padding:2px 0 !important; border:none !important;
  }
  .mkt-td::before {
    content:attr(data-label);
    font-family:var(--font-display); font-size:10px; font-weight:700;
    letter-spacing:0.5px; color:var(--textsoft); min-width:60px;
    text-transform:uppercase;
  }
  .mkt-td:empty::before { display:none; }
  .mkt-td[data-label=""]::before { display:none; }
  .mkt-td-action { flex:1 0 100%; margin-top:6px; }
  .mkt-td-action .mkt-accept-btn,
  .mkt-td-action .mkt-cancel-btn { width:100%; }

  /* Rankings table cards */
  .rnk-table thead { display:none; }
  .rnk-table, .rnk-table tbody { display:block; width:100%; }
  .rnk-tr {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
    padding:8px 12px; margin-bottom:6px;
    background:var(--tint-2); border:1px solid var(--tint-4);
    border-radius:var(--radius);
  }
  .rnk-tr.is-me { border-color:rgba(212,146,10,0.3); background:rgba(212,146,10,0.04); }
  .rnk-td {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 0 !important; border:none !important;
  }
  .rnk-td[data-label]::before {
    content:attr(data-label);
    font-family:var(--font-display); font-size:10px; font-weight:700;
    letter-spacing:0.5px; color:var(--textsoft); text-transform:uppercase;
  }
  .rnk-td.num { margin-left:auto; }

  /* Galaxy table cards — flex-wrap avec ordre contrôlé par tdindex */
  .gal-table thead { display:none; }
  .gal-table, .gal-table tbody { display:block; width:100%; min-width:0 !important; }
  .gal-table colgroup { display:none; }
  .gal-map-panel { overflow-x:hidden; min-width:0; }
  .gal-tr {
    display:flex; flex-wrap:wrap; align-items:center;
    gap:4px 10px;
    padding:8px 10px; margin-bottom:6px;
    background:var(--tint-2); border:1px solid var(--tint-4);
    border-radius:var(--radius);
  }
  .gal-td {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 0 !important; border:none !important;
    min-width:0;
  }
  /* TD1 = POS coords */
  .gal-td.gal-pos { order:1; flex:0 0 auto; padding-left:6px !important; font-size:var(--fs-base); }
  /* TD2 = icône planète (data-label="") */
  .gal-tr > .gal-td:nth-child(2) { order:2; flex:0 0 auto; padding:0 !important; }
  /* TD3 = Nom — prend toute la largeur restante, force le wrap des suivants */
  .gal-tr > .gal-td:nth-child(3) { order:3; flex:1 1 100%; min-width:0; overflow:hidden; }
  .gal-td .gal-planet-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; font-size:var(--fs-md); font-weight:700; }
  /* TD4 = Joueur (left) — 2ème ligne, fill */
  .gal-tr > .gal-td:nth-child(4) { order:4; flex:1 1 auto; font-size:var(--fs-sm); min-width:0; overflow:hidden; }
  .gal-tr > .gal-td:nth-child(4) .gal-player { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  /* TD5 = Distance (right) — auto */
  .gal-tr > .gal-td:nth-child(5) { order:5; flex:0 0 auto; font-size:var(--fs-xs); }
  /* TD6 = Menace — 3ème ligne (left) */
  .gal-tr > .gal-td:nth-child(6) { order:6; flex:0 0 auto; font-size:var(--fs-xs); }
  /* TD7 = Actions — alignées à droite, à la suite de menace */
  .gal-tr > .gal-td:last-child { order:99; flex:1 1 auto; justify-content:flex-end; }
  .gal-td .gal-actions { flex-wrap:wrap; gap:4px; justify-content:flex-end; }
  .gal-td[data-label]::before {
    content:attr(data-label);
    font-family:var(--font-display); font-size:9px; font-weight:700;
    letter-spacing:1px; color:var(--textsoft); text-transform:uppercase;
    margin-right:4px; flex-shrink:0;
  }
  .gal-td[data-label=""]::before { display:none; }
  /* M5 audit UI/UX 27/05 — chevron tap-to-expand sur rows mobiles non-vides
     pour signaler que la row ouvre le bottom-sheet détail au tap. */
  .gal-tr:not(.empty)::after {
    content:"›";
    position:absolute;
    top:50%; right:8px;
    transform:translateY(-50%);
    font-family:var(--font-mono);
    font-size:var(--fs-2xl); font-weight:300; line-height:1;
    color:rgba(var(--accent-rgb),0.55);
    pointer-events:none;
    transition:transform 0.15s ease, color 0.15s ease;
  }
  .gal-tr:not(.empty):active::after { transform:translate(2px, -50%); color:var(--accent); }
  /* Lignes vides : compactées sur 1 ligne (POS + icône à gauche, actions à droite).
     Les "—" sur Nom/Joueur/Menace/Distance n'ont aucune valeur informative ici. */
  .gal-tr.empty .gal-td[data-label]::before { display:none; }
  .gal-tr.empty { opacity:0.65; padding:6px 10px; }
  .gal-tr.empty > .gal-td:nth-child(3),
  .gal-tr.empty > .gal-td:nth-child(4),
  .gal-tr.empty > .gal-td:nth-child(5),
  .gal-tr.empty > .gal-td:nth-child(6) { display:none; }

  /* ── Modals max-width (2A) ── */
  #simModal > div { max-width:95vw !important; width:95vw !important; }
  .cfm-modal { max-width:95vw; }
  .spy-detail { max-width:95vw; }
  .settings-modal { max-width:95vw; }

  /* ── Combat sim responsive (2B) ── */
  .sim-force-row { flex-direction:column; gap:6px; }
  .sim-npc-grid { grid-template-columns:repeat(2,1fr); }

  /* ── Galaxy canvas height (3C) ── */
  .gal-map-panel { max-height:50vh; }
  #galMapCanvas { max-height:50vh; }
}

/* ══════════════════════════════════
   SMALL MOBILE ≤480px
   ══════════════════════════════════ */
@media (max-width:480px) {
  .og-grid { grid-template-columns:1fr 1fr !important; }
  .tc-grid { grid-template-columns:1fr !important; }
  .cmd-grid { grid-template-columns:1fr !important; }
  .troop-grid { grid-template-columns:1fr 1fr !important; }
  .fleet-ship-grid { grid-template-columns:1fr 1fr !important; }

  .rnk-tab-btn { font-size:var(--fs-xs); padding:6px 8px; }
  .al-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .al-tabs::-webkit-scrollbar { display:none; }
  .al-tab { font-size:var(--fs-xs); padding:6px 10px; flex-shrink:0; white-space:nowrap; }

  .prof-grid4 { grid-template-columns:1fr 1fr; gap:4px; }
  .prof-grid2 { grid-template-columns:1fr; }
  .pe-bld-grid { grid-template-columns:1fr 1fr; }

  .atk-panel { width:100% !important; max-width:100vw !important; padding:10px; box-sizing:border-box; }
  .spy-panel { width:100% !important; max-width:100vw !important; box-sizing:border-box; }
  /* Composer drawer plein écran (M1) — ATK input rows compactes pour mobile */
  .atk-panel .atk-unit-row { flex-wrap:wrap; gap:6px; }
  .atk-panel .atk-unit-controls { gap:4px; }
  .atk-panel .atk-unit-input { width:60px !important; min-width:0 !important; }
  .atk-panel .atk-actions-sticky { position:sticky; bottom:0; background:rgba(6,12,28,0.96); padding-top:8px; margin-top:8px; border-top:1px solid rgba(var(--accent-rgb),0.2); }

  .rb-item { padding:2px 4px; gap:2px; }
  .rb-val { font-size:var(--fs-xs); min-width:0; }
  .tb-resources .rb-lbl { font-size:var(--fs-base); }
  .tb-resources .rb-lbl img { width:13px !important; height:13px !important; }

  .sec-hdr { height:80px; }
  .sec-hdr-title { font-size:var(--fs-sm); }
  .gal-sys-grid { grid-template-columns:repeat(2,1fr) !important; }

  .auth-box { width:100vw; max-width:100%; border-radius:0; padding:16px 12px; }
  .auth-vortex { width:220px; height:220px; }
  .auth-chevrons { width:260px; height:260px; }
  .auth-logo { font-size:var(--fs-md); letter-spacing:1.5px; }
  .auth-sub { font-size:var(--fs-md); letter-spacing:1.5px; margin-bottom:14px; }
  .cfm-modal { max-width:96vw; }
  .cfm-actions { flex-direction:column; gap:6px; }

  .asc-hero { padding:14px 12px; }
  .asc-title { font-size:var(--fs-sm); }
  .asc-level-num { font-size:24px; }
  .asc-tab { font-size:var(--fs-xs); padding:6px 8px; letter-spacing:1px; }
}

/* ══════════════════════════════════
   PHONE LARGE (iPhone Pro Max 430px, Galaxy S Ultra)
   ══════════════════════════════════ */
@media (max-width:430px) {
  /* Default touch targets enforced for all interactive elements */
  button, [role="button"], a.lp-btn, .lp-fac-chip, .lp-nav-burger,
  .fr-btn, .tal-add, .pass-plan-cta, .pass-daily-btn,
  .cfm-btn, .auth-btn, .adm-btn {
    min-height: var(--touch-min);
  }
  /* Native form controls anti-zoom + comfortable */
  input, select, textarea {
    font-size: var(--touch-input-fs) !important;
    min-height: var(--touch-min);
  }
  /* Common grids fall to single column */
  .ov-grid-2, .pass-benefits, .lp-proto-grid {
    grid-template-columns: 1fr !important;
  }
  /* Force flex-wrap on rows that may overflow */
  .ov-stat-row, .fac-bonus-row, .fr-row, .asc-milestones-row,
  .dist-pills, .cmd-actions {
    flex-wrap: wrap !important;
  }
  /* Modal sizing — prevent edge collisions */
  .cfm-modal { max-width: 96vw; padding: 14px 12px; }
}

/* ══════════════════════════════════
   VERY SMALL PHONES (iPhone SE, small Android)
   ══════════════════════════════════ */
@media (max-width:360px) {
  .og-grid { grid-template-columns:1fr 1fr !important; gap:4px !important; }
  .og-card { padding:6px; }
  .og-bld-ico { font-size:18px; }
  .og-bld-name { font-size:10px; }
  .troop-grid { grid-template-columns:1fr !important; }
  .tc-grid { grid-template-columns:1fr !important; }
  .cmd-grid { grid-template-columns:1fr !important; }

  .lnav-lbl { font-size:8px !important; max-width:48px; }
  .lnav-ico { width:24px; height:24px; font-size:16px; }

  .rb-val { font-size:10px; min-width:0; }
  .tb-resources .rb-lbl { font-size:var(--fs-sm); }
  .tb-resources .rb-lbl img { width:12px !important; height:12px !important; }
  .user-chip { font-size:var(--fs-xs); padding:2px 5px; }

  .sec-hdr-title { font-size:var(--fs-xs); letter-spacing:1px; }
  .auth-sub { font-size:var(--fs-sm); }
  .auth-logo { font-size:var(--fs-sm); }

  .cfm-modal { max-width:98vw; padding:16px 12px; }
  .atk-panel { padding:8px !important; }
}

/* ══════════════════════════════════
   LANDSCAPE PHONE
   ══════════════════════════════════ */
@media (orientation:landscape) and (max-height:500px) {
  .topbar { height:calc(44px + env(safe-area-inset-top, 0px)); }
  .app { grid-template-rows:calc(44px + env(safe-area-inset-top, 0px)) 1fr; }
  .sec-hdr { height:80px; }
  .left-nav { height:calc(40px + env(safe-area-inset-bottom, 0px)); min-height:auto; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .lnav-item { padding:6px 10px; min-height:40px; }
  .lnav-ico { width:28px; height:28px; font-size:16px; }
  .cfm-modal, .auth-box, .race-popup, .event-popup { max-height:90vh; max-width:80vw; }
  .tut-coach { width:260px; }
}

/* ══════════════════════════════════
   TOUCH DEVICES
   ══════════════════════════════════ */
@media (pointer:coarse) {
  .lnav-item { min-height:50px; }
  .og-card { min-height:80px; }
  .tc-card { min-height:60px; }
  .rb-item { min-height:var(--touch-min); display:flex; align-items:center; padding:0 6px; }
  .rnk-tab-btn { min-height:var(--touch-min); padding:8px 10px; }
  .al-tab { min-height:44px; padding:8px 10px; }
  .pvp-target-btn { min-height:48px; padding:8px 12px; }
  .ut-qty-btn { width:44px; height:44px; }
  .bdd-btn { padding:12px; min-height:44px; }
  .rp-upgrade-btn { padding:16px 10px; min-height:48px; }
  .rp-nav-arrow { width:44px; height:44px; font-size:16px; }
  /* Topbar tactile : tous les boutons à ≥44×44 (M2) */
  .notif-bell, .res-strip .notif-bell { width:44px; height:44px; min-width:44px; min-height:44px; }
  #langToggleBtn, .res-strip #langToggleBtn { min-width:44px; min-height:44px; padding:6px 12px; }
  .logout-btn, .res-strip .logout-btn { min-width:44px; min-height:44px; padding:8px 12px; }
  .res-strip button, .res-strip .user-chip { min-height:44px; }
  .user-chip { height:auto; min-height:44px; padding:4px 12px; }
  /* Faction switcher (right panel) : 44×44 sur tactile */
  #factionSwitcher button, .rp-fac-btn { width:44px !important; height:44px !important; min-width:44px; min-height:44px; }
  .og-cancel-btn { padding:10px 16px; min-height:44px; }
  .notif-item { min-height:48px; padding:10px 14px; }
  .auth-tab { padding:12px 8px; min-height:44px; }
  .auth-btn { padding:14px; min-height:48px; }
  .auth-input { padding:12px 14px; }
  .event-popup-btn { padding:12px 32px; min-height:48px; }
  .race-popup-close { padding:16px 48px; min-height:48px; }
  .asc-btn { padding:14px 32px; min-height:48px; }
  .asc-tab { padding:12px 8px; min-height:44px; }
  .tut-btn { padding:10px 12px; min-height:44px; }
  .login-bonus-btn { padding:12px 28px; min-height:44px; }
  /* Gate +/- buttons, input, MAX btn — touch-friendly sizes */
  .gts-pm { width:var(--touch-min); height:var(--touch-min); font-size:18px; border-radius:6px; }
  .gts-pm:active { background:rgba(var(--accent-rgb),0.3); transform:scale(0.92); }
  .gts-input { width:56px; padding:5px 4px; text-align:center; min-height:var(--touch-min); }
  .qty-max-btn { padding:8px 14px; font-size:var(--fs-base); min-height:var(--touch-min); border-radius:6px; }
  .qty-max-btn:active { background:rgba(var(--accent-rgb),0.3); transform:scale(0.95); }
  .atk-unit-controls { gap:6px; }
  /* Hide browser number spinners on mobile */
  .atk-unit-input::-webkit-inner-spin-button,
  .atk-unit-input::-webkit-outer-spin-button,
  .gts-input::-webkit-inner-spin-button,
  .gts-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .atk-unit-input, .gts-input { -moz-appearance:textfield; }
  /* Building card upgrade button */
  .bld-upgrade-btn { padding:12px 20px; min-height:44px; }
  .bld-upgrade-btn:disabled { opacity:0.55; }
  /* Section accordion — min touch target */
  .section-accordion { min-height:44px; font-size:var(--fs-md); }
  /* Alliance diplo/invite buttons */
  .al-diplo-btn { min-height:44px; padding:8px 14px; }
  /* Market input */
  .mkt-inp { font-size:14px !important; padding:8px 10px; }
  /* Unit card train button */
  .uc-train { min-height:44px; padding:8px 14px; }
  /* Topbar right strip buttons — 44×44 minimum (Apple/Google touch reco) */
  .res-strip button, .res-strip .logout-btn, .res-strip a { min-height:44px; min-width:44px; padding:8px 10px !important; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }
  /* Colony banner back button */
  .rp-colony-banner-btn { min-height:44px; padding:10px 14px; }

  /* Remove sticky hover on touch */
  .rb-item:hover { transform:none; box-shadow:none; }
  .lnav-item:hover { border-left-color:transparent; }
  .ovw-bld-card:hover, .og-card:hover, .tc-card:hover, .asc-perk-card:hover { transform:none; }
  .gal-tr:hover::after { left:-100%; } /* disable shine sweep on touch */
  .gal-tr:hover { box-shadow:none !important; } /* remove glow, keep background intact */
  .lnav-item:active { background:rgba(var(--accent-rgb),0.2); }
  .og-card:active { background:rgba(var(--accent-rgb),0.12); }
  .rb-item:active { background:var(--tint-5); }

  /* Touch targets ≥44px Play Store (Apple HIG / Material) — Phase 1A */
  .gal-arrow-btn,
  .galcb-arrow,
  .galcb-fav-btn,
  .galcb-action,
  .gal-sys-slot,
  .gex-exp-info,
  .cdx-detail-x,
  .exp-close,
  .tut2-tip-close,
  .fr-search-clear,
  .auth-lang-opt,
  .auth-pw-toggle,
  .faction-info-btn,
  .lp-lang-opt {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .al-mc-act {
    min-height: 36px !important;
    padding: 8px 12px !important;
  }
  .adm-btn-sm {
    min-height: 36px !important;
  }
  .tut2-tip-close {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ══════════════════════════════════
   LANDSCAPE MOBILE — galaxy layout fix
   ══════════════════════════════════ */
@media (max-width:768px) and (orientation:landscape) {
  .gal-detail-panel.active { max-height:55vh; }
  .gal-topbar { flex-wrap:nowrap; padding:6px 10px; }
  .gal-topbar .gal-nav-btn { padding:4px 6px; font-size:var(--fs-md); min-height:32px; }
  .gal-coord-input { width:36px !important; padding:4px 5px; font-size:var(--fs-md); }
}

/* ══════════════════════════════════
   RESOURCE TOOLTIPS — tap to show (mobile)
   ══════════════════════════════════ */
.rb-item.rb-tip-open .rb-tooltip {
  display:block !important; pointer-events:auto;
}

/* Portalled rb-tooltip is fixed on body — clamp width to viewport so long
   breakdown lines don't overflow off-screen on narrow phones. */
body > .rb-tooltip {
  max-width:calc(100vw - 16px);
  box-sizing:border-box;
}

/* ══════════════════════════════════
   MOBILE MORE NAV MENU
   ══════════════════════════════════ */
.lnav-more-btn { display:none !important; }

.mnav-overlay {
  display:none; position:fixed; inset:0;
  bottom:calc(56px + env(safe-area-inset-bottom, 0px));
  z-index:901; background:rgba(4,8,18,0.55);
  backdrop-filter:blur(6px);
}
.mnav-overlay.open {
  display:flex; align-items:flex-end; justify-content:center;
  animation:mnavFadeIn 0.18s ease;
}
@keyframes mnavFadeIn { from{opacity:0} to{opacity:1} }
@keyframes mnavSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.mnav-sheet {
  width:100%; max-width:520px;
  max-height:70vh; min-height:45vh;
  background:linear-gradient(180deg, rgba(10,16,28,0.98), rgba(4,8,18,0.98));
  border-top-left-radius:18px; border-top-right-radius:18px;
  border-top:1px solid rgba(var(--accent-rgb),0.35);
  box-shadow:0 -8px 28px rgba(0,0,0,0.55), 0 -1px 0 rgba(var(--accent-rgb),0.25);
  display:flex; flex-direction:column;
  animation:mnavSlideUp 0.22s cubic-bezier(.22,.9,.33,1);
}
.mnav-handle {
  flex:0 0 auto; width:42px; height:4px; border-radius:3px;
  background:rgba(var(--accent-rgb),0.45);
  margin:8px auto 2px;
}
.mnav-sheet-title {
  flex:0 0 auto; font-family:var(--font-display); letter-spacing:2px;
  font-size:var(--fs-xs); color:var(--accent); opacity:0.75;
  text-align:center; padding:4px 12px 2px;
}
.mnav-scroll {
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  width:100%;
}
.mnav-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  width:100%;
}
.mnav-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border-radius:var(--radius-md);
  background:rgba(var(--accent-rgb),0.06);
  border:1px solid rgba(var(--accent-rgb),0.15);
  cursor:pointer; font-family:var(--font-mono);
  color:var(--textmid); transition:background 0.15s;
}
.mnav-item:active { background:rgba(var(--accent-rgb),0.2); }
.mnav-item.active {
  border-color:rgba(var(--accent-rgb),0.5);
  color:var(--accent); background:rgba(var(--accent-rgb),0.1);
}
.mnav-ico svg {
  width:28px; height:28px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.mnav-lbl { font-size:var(--fs-md); text-align:center; letter-spacing:0.5px; }
.mnav-badge {
  display:inline-block; background:var(--danger); color:var(--textbright); border-radius:50%;
  font-size:var(--fs-md); font-weight:700; padding:1px 5px; margin-left:4px;
  min-width:14px; text-align:center; line-height:14px;
}

@media (max-width:768px) {
  /* Mobile bottom nav refonte 28/04 — 1 SEULE LIGNE de 6 essentiels + ...
     Reste accessible via le drawer "Plus" (toggleMoreNav) */
  #lnav_pass, #lnav_survival, #lnav_campaign, #lnav_battlepass,
  #lnav_reports, #lnav_commanders, #lnav_market,
  #lnav_quests, #lnav_alliance, #lnav_chat, #lnav_friends,
  #lnav_ascension, #lnav_rankings, #lnav_codex,
  #lnav_donate { display:none !important; }
  .lnav-more-btn { display:flex !important; }
  /* Force 1 row only — no wrap */
  .left-nav {
    justify-content:space-around !important;
    flex-wrap:nowrap !important;
    height:60px !important; min-height:60px !important;
  }
  .lnav-item { min-width:0 !important; flex:1 1 auto !important; max-width:80px !important; justify-content:center !important; }
  .lnav-ico { width:32px !important; height:32px !important; font-size:20px !important; }
  .lnav-lbl { font-size:9px !important; max-width:60px !important; line-height:1.1 !important; }
  /* Bug button — push above bottom nav */
  #betaBugBtn { bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Très petit : ≤375 (iPhone SE / Z Fold front) — items un poil plus serrés */
@media (max-width:375px) {
  .lnav-item { min-width:50px !important; padding:5px 6px !important; }
  .lnav-ico { width:26px !important; height:26px !important; font-size:18px !important; }
  .lnav-lbl { font-size:8px !important; max-width:48px !important; }
}

/* ══════════════════════════════════
   FLOATING PLANET PANEL BUTTON (mobile)
   ══════════════════════════════════ */
#rpFloatingBtn {
  display:none;
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom, 0px));
  right:16px;
  z-index:899;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.15);
  color:var(--accent);
  font-size:24px;
  cursor:pointer;
  box-shadow:0 2px 16px rgba(var(--accent-rgb),0.3);
  backdrop-filter:blur(8px);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  align-items:center; justify-content:center;
}
#rpFloatingBtn:active {
  transform:scale(0.92);
  box-shadow:0 1px 8px rgba(var(--accent-rgb),0.4);
}
#rpFloatingBtn.rp-fab-hidden { display:none !important; }

@media (max-width:1024px) {
  #rpFloatingBtn { display:flex; }
}

/* ── Chat section mobile ── */
@media (max-width:768px) {
  .chat-tab-bar { padding:8px 10px 0;gap:4px; }
  .chat-tab-pill { font-size:var(--fs-md);padding:6px 10px;letter-spacing:1px; }
  .chat-body { padding:8px 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE CRITICAL FIXES (audit iPhone 22/04/2026)
   Corrige 12 bugs de layout <768px : topbar, galaxy, rankings, gate,
   event banner, modals, z-index, fleet grid, tab snap, ascension.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── FIX #1 : Topbar resources wrap (débordement iPhone) ── */
  .tb-resources {
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 3px 4px !important;
    overflow-x: visible !important;
  }
  .rb-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 2px 6px !important;
    gap: 3px !important;
  }
  .rb-val { font-size: 12px !important; min-width: 0 !important; }
  .rb-rate { font-size: 9px !important; }
  .rb-sep { display: none !important; }

  /* ── FIX #2 : Galaxy table min-width 600px qui force scroll ── */
  .gal-table { min-width: 0 !important; }

  /* ── FIX #3 : Galaxy grid 2 colonnes fixes (380px panneau droit) ── */
  .gal-body {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .gal-detail-panel,
  .gal-right,
  .gal-side-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(var(--accent-rgb),0.18) !important;
  }
  /* Rangées planètes : enfants shrinkable */
  .gal-tr, .gal-row { min-width: 0 !important; }
  .gal-td { min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; }

  /* ── FIX #4 : Rankings header + podium squeeze ── */
  .rnk-header {
    padding: 12px 10px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .rnk-title { font-size: 16px !important; letter-spacing: 2px !important; }
  .rnk-subtitle { font-size: 12px !important; margin-top: 2px !important; }
  .rnk-my-rank { align-self: flex-start !important; font-size: 11px !important; padding: 6px 10px !important; }
  .rnk-podium {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
  .rnk-podium-card { padding: 10px 6px !important; }

  /* ── FIX #5 : Event Galactique bannière (flex-wrap manquant <1024) ── */
  .ev-gbl-header,
  .ev-gbl-stats {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  .ev-gbl-header > *,
  .ev-gbl-stats > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* ── FIX #6 : Gate grid 3 colonnes fixes → stack vertical ── */
  #sf_gate.active {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .gate-left, .gate-center, .gate-right { width: 100% !important; min-width: 0 !important; }
  .gate-mode-bar {
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .gmt { font-size: 10px !important; padding: 6px 8px !important; }
  #sf_gate .gpr-stack { max-width: 100% !important; }

  /* ── FIX #7 : Modals max-width uniforme ── */
  #profileCard,
  .profile-modal-border,
  .cfm-modal,
  .spy-detail,
  .settings-modal,
  .stg-modal,
  #simModal > div,
  .atk-panel,
  .cmd-detail-box {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ── FIX #8 : Z-index bottom-nav vs modals ── */
  .left-nav { z-index: 900 !important; }
  .profile-modal-border,
  .cfm-modal,
  .cfm-overlay,
  .settings-modal,
  .stg-modal,
  #simModal,
  .cmd-detail-overlay,
  .asc-perk-overlay,
  #eventOverlay,
  #profileOverlay,
  #offlineReportOverlay,
  #raidIncomingOverlay {
    z-index:var(--z-overlay-fullscreen) !important;
  }

  /* ── FIX #9 : Fleet cards grid adaptatif <480 ── */
  .fleet-ship-grid,
  .flt-ships-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }

  /* ── FIX #10 : Tab bars scroll-snap ── */
  .bld-tabs-main, .bld-tabs,
  .al-tab-bar, .rnk-tab-bar, .chat-tab-bar,
  .gate-mode-bar, .mkt-tab-bar, .cdx-tab-bar {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .bld-tab, .al-tab, .rnk-tab-btn,
  .chat-tab-pill, .gmt, .mkt-tab, .cdx-tab {
    scroll-snap-align: center;
  }

  /* ── FIX #11 : Ascension campaign cards débordent ── */
  .camp-card, .asc-camp-card, .camp-panel { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .asc-panel, .asc-content { overflow-x: hidden !important; }

  /* ── FIX #12 : Rankings profile max-height trop petit ── */
  .rnk-profile {
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* ── Safety net : empêche débordement horizontal global ── */
  html, body { overflow-x: hidden !important; }
  /* clip (pas hidden) sur les conteneurs-coquille : `overflow-x:hidden` +
     `overflow-y:visible` (audit scroll mobile v3) force le navigateur à
     recalculer overflow-y en `auto` (normalisation CSS) → conteneur de scroll
     fantôme non clampé (scrollH==clientH) qui AVALE le drag tactile sur
     Bâtiments/Troupes (= bug survey B2). `clip` clippe le débordement X sans
     établir de conteneur de scroll → overflow-y reste réellement `visible`,
     le body scrolle nativement. Le scroll horizontal global reste bloqué par
     html/body ci-dessus. Safari <16 ignore clip → visible (scroll OK aussi). */
  .app, .main-layout, .center-content, .planet-section, .sec-full {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE DEEP FIXES V2 — GALAXY / GATE / PASS / ASCENSION
   Audit approfondi 22/04/2026 : grid forcés, canvas overflow, modals.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ═══════ GALAXY ═══════ */
  /* Grid body : retire panneau droit 380px (cause #1 page inutilisable) */
  .gal-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 0 !important;
  }
  .gal-map-panel { order: 1; min-height: 40vh; }
  .gal-detail-panel,
  .gal-right-panel,
  .gal-side-panel {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 50vh !important;
    border-left: none !important;
    border-top: 2px solid rgba(var(--accent-rgb),0.2) !important;
    overflow-y: auto !important;
  }

  /* Search + dropdowns modérés */
  .gal-search-input { width: 110px !important; font-size: 13px !important; }
  .gal-search-input:focus { width: 140px !important; }
  .gal-search-results,
  .gal-fav-results {
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    right: 0 !important; left: auto !important;
  }
  .gal-coord-input { width: 48px !important; padding: 6px 5px !important; font-size: 16px !important; }
  .gal-planet-select { min-width: 90px !important; max-width: 140px !important; font-size: 12px !important; }

  /* Grid sys 5 cols → 3 cols */
  .gal-sys-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }

  /* Expeditions */
  .gex-expeditions { grid-template-columns: 1fr !important; gap: 10px !important; }
  .gex-exp-name, .gex-exp-desc { font-size: 13px !important; }
  .exp-panel {
    min-width: 0 !important;
    max-width: 95vw !important;
    width: 95vw !important;
  }

  /* Event banner stack */
  .gal-evt-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 8px !important;
  }
  .gal-evt-atk-btn { width: 100% !important; padding: 10px 16px !important; font-size: 13px !important; }

  /* Event troop rows */
  .ev-troop-row { flex-wrap: wrap !important; }
  .ev-troop-name { width: 100% !important; margin-bottom: 4px !important; }
  .ev-troop-have, .ev-troop-atk { width: auto !important; min-width: 50px !important; }
  .ev-troop-input { width: 60px !important; }

  /* Gal-actions */
  .gal-actions { justify-content: flex-start !important; gap: 6px !important; }
  .gal-act-btn { padding: 4px 8px !important; font-size: 13px !important; }

  /* ═══════ GATE / PORTE DES ÉTOILES ═══════ */
  #sf_gate.active {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0 !important;
  }
  #sf_gate .gate-mode-bar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  #sf_gate .gmt {
    font-size: 10px !important;
    padding: 6px 10px !important;
    flex: 1 1 auto !important;
    min-width: 60px !important;
  }
  #sf_gate .gpanel,
  #sf_gate .gpanel-l {
    grid-column: 1 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
  }
  #sf_gate .gate-center,
  #sf_gate .gate-middle {
    grid-column: 1 !important;
    min-height: 0 !important;
  }
  #sf_gate .gpanel-r,
  #sf_gate .gpr-stack {
    grid-column: 1 !important;
    max-height: 35vh !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    border-left: none !important;
    border-top: 1px solid rgba(var(--accent-rgb),0.18) !important;
  }

  /* Gate canvas : forcer 100% container (vs 300/380px max) */
  .gate-wrap,
  .gate-wrap.expanded,
  body.gate-large-default .gate-wrap {
    max-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
  }

  /* Typo gate plus petite */
  #sf_gate .dest-name { font-size: 16px !important; letter-spacing: 2px !important; }
  #sf_gate .dest-coords { font-size: 11px !important; }
  #sf_gate .pr-name { font-size: 13px !important; }

  /* ═══════ PASS COMMANDANT ═══════ */
  .pass-card {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .pass-overlay {
    padding: max(8px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)) !important;
  }
  .pass-plans { flex-direction: column !important; gap: 10px !important; }
  .pass-plan { width: 100% !important; }
  .pass-plan-price { font-size: 22px !important; }

  /* Battle Pass tracks */
  .bp-tracks-head,
  .bp-row {
    grid-template-columns: 34px 1fr 1fr !important;
    gap: 6px !important;
  }
  .bp-tracks-head { padding: 8px 10px 6px !important; font-size: 10px !important; }
  .bp-row-num { font-size: 15px !important; min-height: 44px !important; }
  .bp-cell { min-height: 44px !important; padding: 6px 8px !important; font-size: 11px !important; }
  .bp-promo-banner { grid-template-columns: 1fr !important; }
  .bp-promo-ctas { flex-direction: column !important; gap: 8px !important; }
  .bp-promo-cta-btn { width: 100% !important; font-size: 12px !important; padding: 10px 12px !important; }
  .bp-promo-cta-hint { display: none !important; }

  /* ═══════ ASCENSION : bg image mobile app ═══════ */
  #ascensionContainer {
    background-attachment: scroll !important;
    background-size: cover !important;
    padding: 12px 10px !important;
    min-height: 100dvh !important;
  }
  .asc-hero {
    background: rgba(8,14,28,0.92) !important;
    padding: 20px 14px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE AUDIT V3 FIXES — 22/04/2026 (pre-release 26/04)
   14 bugs identifiés par audit exhaustif (5 critiques + 5 majeurs + 4 mineurs)
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BUG#1 — Card tooltip déborde iPhone 375px ═══ */
@media (max-width:500px) {
  /* M2 audit UI/UX 27/05 — compactage topbar ressources sur petits écrans */
  .tb-resources { gap:1px !important; padding:4px 2px 3px !important; }
  .rb-item { padding:2px 5px !important; gap:2px !important; min-width:0; }
  .rb-val { font-size:11px !important; }
  .tb-resources .rb-lbl { font-size:13px !important; }
  .tb-resources .rb-lbl img { width:13px !important; height:13px !important; }

  .card-tip {
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    left: 10px !important;
    right: 10px !important;
  }
  .ct-title { font-size: 14px !important; }
  .ct-desc, .ct-stats, .ct-sub { font-size: 13px !important; }
}

/* ═══ BUG#2 — Fleet loadouts dropdown déborde hors écran ═══ */
@media (max-width:768px) {
  .flo-menu-wrap {
    position: fixed !important;
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 951 !important;
  }
  .flo-dropdown { max-height: 50vh !important; }
}

/* ═══ BUG#4 — Right panel drawer z-index < modals ═══ */
/* Drawer doit rester SOUS les modals (ascension perks, profile, cmd detail) */
/* MAIS quand le panel est en mode détail overlay (rp-mobile-open), il doit passer DEVANT le contenu infra */
@media (pointer:coarse) {
  .right-panel:not(.rp-mobile-open) { z-index: 940 !important; }
  .tablet-drawer-toggle { z-index: 939 !important; }
  .tablet-drawer-backdrop { z-index: 938 !important; }
}

/* ═══ BUG#5 — Pass card overflow tablette portrait ═══ */
@media (max-width:900px) {
  .pass-card {
    max-width: min(460px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
  }
}

/* ═══ BUG#6 — Alliance msg textarea min-height excessive ═══ */
@media (max-width:480px) {
  .msg-compose-panel textarea { min-height: 70px !important; }
  .msg-compose-panel { padding: 12px !important; }
}

/* ═══ BUG#7 — Rankings search clear < 44px touch target ═══ */
@media (pointer:coarse) {
  .rnk-search-clear {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    right: 8px !important;
  }
  .rnk-search-wrap .rnk-search { padding-right: 46px !important; }
}

/* ═══ BUG#8 — Battle Pass title trop petit <480px ═══ */
@media (max-width:480px) {
  .bp-header-title { font-size: 13px !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; }
  .bp-header-sub { font-size: 11px !important; gap: 8px !important; }
}

/* ═══ BUG#9 — Admin inputs non override mobile ═══ */
@media (max-width:768px) {
  .adm-input, .adm-textarea, .adm-select {
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .adm-panel, .adm-section, .adm-card { max-width: 100% !important; overflow-x: auto !important; }
  .adm-table { font-size: 12px !important; min-width: 0 !important; }
}

/* ═══ BUG#10 — Event Global card flex-wrap mobile ═══ */
@media (max-width:768px) {
  .ev-gbl-header, .ev-gbl-stats {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .ev-gbl-header > *, .ev-gbl-stats > * { min-width: 0 !important; flex-shrink: 1 !important; }
  .ev-gbl-title { font-size: 14px !important; }
}

/* ═══ BUG#12 — Galaxy detail panel max-height landscape ultra-small ═══ */
@media (max-width:768px) and (max-height:500px) {
  .gal-detail-panel.active { max-height: 60vh !important; }
  .gal-detail-panel { max-height: 50vh !important; }
}

/* ═══ BUG#13 — Notif dropdown top calc précis ═══ */
@media (max-width:768px) {
  .notif-dropdown {
    top: calc(56px + env(safe-area-inset-top, 0px) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
  }
}

/* ═══ BONUS — Inputs 14px → 16px mobile (évite zoom iOS) ═══ */
@media (max-width:768px) {
  .mkt-search-inline,
  .rnk-search,
  .al-field input,
  .al-field textarea,
  .al-field select,
  .chat-input,
  .msg-compose-panel input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ═══ BONUS — Small buttons touch target (pointer:coarse) ═══ */
@media (pointer:coarse) {
  .cdx-detail-x, .pass-close, .stg-close-btn,
  .alhq-role-ico-btn, .ach-close, .mkt-close {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* ══════════════════════════════════
   M4 PAGES P2 — Polish + lazy loading
   ══════════════════════════════════ */

/* ── Codex (tabs fade indicator + title scaling) ── */
@media (max-width:768px) {
  .cdx-tabs { position:relative; }
  .cdx-tabs::after {
    content:''; position:sticky; right:0; width:24px; height:100%;
    background:linear-gradient(90deg, transparent, var(--bg-deep) 70%);
    pointer-events:none; flex-shrink:0;
  }
  .cdx-title { font-size:20px; }
  .cdx-search { min-height:var(--touch-min); padding:10px 12px; font-size:16px; }
  .cdx-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
  .cdx-card { padding:8px; }
}
@media (max-width:430px) {
  .cdx-title { font-size:18px; letter-spacing:1.5px; }
  .cdx-tabs { gap:4px; }
  .cdx-tab { font-size:var(--fs-xs); padding:8px 10px; }
}

/* ── Distinctions (filter pills overflow) ── */
@media (max-width:768px) {
  .dist-pills { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:6px; gap:6px; }
  .dist-pill { white-space:nowrap; flex-shrink:0; padding:8px 12px; min-height:var(--touch-min); }
  .dist-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
  .dist-card { padding:10px; }
  .dist-unlock-date { font-size:var(--fs-xs); }
}
@media (max-width:430px) {
  .dist-grid { grid-template-columns:1fr 1fr; }
  .dist-pill { font-size:var(--fs-xs); padding:6px 10px; }
}

/* ── Commanders (detail modal hero image) ── */
@media (max-width:768px) {
  .cmd-detail-hero { height:340px !important; }
  .cmd-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .cmd-card { padding:8px; }
}
@media (max-width:430px) {
  .cmd-detail-hero { height:280px !important; }
  .cmd-grid { grid-template-columns:1fr; }
}

/* ── Quests (touch targets) ── */
@media (max-width:768px) {
  .quest-card { padding:10px; }
  .quest-claim-btn, .quest-action-btn { min-height:var(--touch-min); padding:10px 14px; }
  .quest-progress { font-size:var(--fs-sm); }
}

/* ── Reports (table scroll, mobile compact) ── */
@media (max-width:768px) {
  .reports-table-wrap, .rep-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rep-row { padding:10px 8px; flex-wrap:wrap; gap:6px; }
  .rep-row-time { font-size:10px; }
  .rep-row-title { font-size:var(--fs-base); }
  .rep-row-actions { flex-shrink:0; }
  .rep-row-actions button { min-height:var(--touch-min); }
}

/* ── Market (list mobile, ratio badge wrap) ── */
@media (max-width:768px) {
  .mkt-list-row { flex-wrap:wrap; gap:6px; padding:10px 8px; }
  .mkt-ratio-badge { white-space:nowrap; flex-shrink:0; }
  .mkt-amount { font-size:var(--fs-base); }
  .mkt-tab { padding:8px 12px; min-height:var(--touch-min); }
  .mkt-action-btn { min-height:var(--touch-min); padding:10px 14px; }
}

/* ── Layout transverse (modals 360, toasts safe) ── */
@media (max-width:430px) {
  .cfm-modal { width:96vw !important; padding:14px 12px; }
  .cfm-actions { flex-direction:column; gap:8px; }
  .cfm-actions .cfm-btn { width:100%; min-height:var(--touch-min); }
  .notif-toast { font-size:var(--fs-base); padding:10px 14px; }
  .stg-modal { width:96vw !important; max-width:96vw; }
}
@media (max-width:360px) {
  .cfm-modal { width:98vw !important; padding:12px 10px; }
  .cfm-title { font-size:var(--fs-md); }
  .cfm-msg { font-size:var(--fs-base); }
}

/* Toast stack — safe-area aware, mobile-friendly */
/* M7-C — override top:64px de sgc-layout.css pour ancrer les toasts en bas en mobile */
#notifStack {
  top:auto !important;
  bottom:calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width:769px) {
  #notifStack { top:calc(64px + env(safe-area-inset-top, 0px)) !important; bottom:auto; }
}

/* ══════════════════════════════════
   M3 PAGES P1 — Mobile-first responsive fixes
   (Sprint mobile-refonte v4.0 — 26/04/2026)
   ══════════════════════════════════ */

/* ── Rankings (podium, filters, table) ── */
@media (max-width:768px) {
  .rnk-podium { flex-direction:column; gap:8px; }
  .rnk-podium > * { width:100% !important; max-width:100% !important; }
  .rnk-filters { flex-direction:column; gap:6px; }
  .rnk-filters select, .rnk-filters input { width:100%; max-width:100%; }
  .rnk-search { min-height:var(--touch-min); padding:10px 12px; }
}
@media (max-width:430px) {
  .rnk-tab-btn { padding:8px 6px; font-size:var(--fs-xs); }
  .rnk-table th, .rnk-table td { padding:6px 4px; font-size:var(--fs-xs); }
  .rnk-medal { font-size:var(--fs-md); }
}

/* ── Chat (alliance/global) — input row, bubbles, emote picker ── */
@media (max-width:768px) {
  /* Input row sticky bottom : décale au-dessus du bottom-nav fixe (~60px) + safe-area
     pour que le bouton ▶ Envoyer ne soit pas masqué */
  .al-chat-input-row {
    flex-wrap:nowrap; align-items:center; gap:6px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 4px !important;
  }
  /* Tout sur UNE ligne (emote + input + envoyer) — évite le bandeau 3 lignes
     qui masquait les derniers messages */
  .al-chat-input-row .al-chat-inp { flex:1 1 auto; min-width:0; min-height:var(--touch-min); padding:10px 12px; }
  .al-chat-input-row .al-chat-send, .al-chat-input-row .chat-emote-btn { flex:none; }
  /* Bouton Envoyer compact (padding/letter-spacing réduits) pour laisser
     une largeur de saisie utilisable — sinon « ▶ ENVOYER » mange le champ */
  .al-chat-input-row .al-chat-send { padding:0 14px; letter-spacing:1px; font-size:var(--fs-xs); min-height:var(--touch-min); }
  .al-chat-input-row .chat-emote-btn { padding:0 8px; min-height:var(--touch-min); }
  .al-chat-body, .gc-msg-body { word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; }
  .gc-msg { padding:8px 10px; }
  .cos-frame { width:32px; height:32px; }
}
@media (max-width:430px) {
  .al-chat-input-row { padding:6px 8px; }
  .al-chat-name { font-size:var(--fs-sm); }
  .al-chat-ts { font-size:10px; }
}

/* ── Messages — thread, compose, timestamps ── */
@media (max-width:768px) {
  .msg-thread { scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
  .msg-conv-list { max-height:40vh; }
  .msg-compose-panel { padding:8px; gap:6px; }
  .msg-compose-panel textarea { min-height:80px; font-size:16px; }
  .msg-bubble { padding:8px 10px; word-wrap:break-word; }
  .msg-conv-snippet { flex-wrap:wrap; }
  .msg-draft-tag { font-size:10px; padding:2px 6px; }
  .msg-bubble-time { font-size:10px; }
}

/* ── Friends — search, rows, actions ── */
@media (max-width:768px) {
  .fr-search-wrap { flex-direction:column; gap:6px; }
  .fr-search-wrap input { width:100%; min-height:var(--touch-min); }
  .fr-row { flex-wrap:wrap; gap:6px 10px; padding:10px 8px; }
  .fr-actions { flex-direction:row; flex-wrap:wrap; gap:6px; width:100%; }
  .fr-actions .fr-btn { flex:1 1 calc(50% - 4px); min-height:var(--touch-min); }
  .fr-lastseen { font-size:var(--fs-xs); }
}
@media (max-width:430px) {
  .fr-actions .fr-btn { font-size:var(--fs-sm); padding:8px 10px; }
}

/* ── Ascension — talents, milestones ── */
@media (max-width:768px) {
  .tal-add-row { flex-wrap:wrap; gap:4px; }
  .tal-add { flex:1 1 calc(33% - 4px); min-height:var(--touch-min); padding:10px 6px; }
  .tal-ms-desc { word-wrap:break-word; overflow-wrap:break-word; font-size:var(--fs-base); }
  .asc-milestones-row { flex-wrap:wrap; gap:6px; }
  .asc-milestone-chip { font-size:var(--fs-xs); padding:4px 8px; }
}
@media (max-width:430px) {
  .tal-add { flex:1 1 100%; }
  .asc-title { font-size:var(--fs-md); }
}

/* ── Fleet — pass card, plan CTA, daily btn ── */
@media (max-width:768px) {
  .pass-benefits { grid-template-columns:1fr 1fr; gap:8px; }
  .pass-plan-cta { padding:10px 14px; min-height:var(--touch-min); font-size:var(--fs-base); }
  .pass-daily-btn { width:100% !important; min-height:var(--touch-min); padding:12px 16px; }
  .pass-plan { padding:14px 12px; }
  .pass-benefit { padding:8px 10px; }
}
@media (max-width:430px) {
  .pass-benefits { grid-template-columns:1fr; }
}

/* ── Alliance — layout, members, chat ── */
@media (max-width:768px) {
  .al-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:6px; }
  .al-tab { white-space:nowrap; }
  .al-member-row { flex-wrap:wrap; gap:6px; padding:8px; }
  .al-member-row > * { min-width:0; }
  .al-diplo-actions { flex-wrap:wrap; gap:6px; }
}

/* ── Infra (buildings + research) — prereqs, cards, accordions ── */
@media (max-width:768px) {
  .prereq-link { padding:8px 10px; min-height:var(--touch-min); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .bld-prereqs { gap:4px; }
  .rp-div { padding:8px 10px; }
  .bld-detail-content, .rp-bld-detail { padding:10px; font-size:var(--fs-base); }
}

/* ── Gate — type breakdown, inputs, filters ── */
@media (max-width:768px) {
  .gate-filters { flex-wrap:wrap; gap:6px; }
  .gate-filter { font-size:var(--fs-sm); padding:6px 10px; }
  .gate-search { width:100%; min-height:var(--touch-min); }
  .gate-type-bar { font-size:var(--fs-xs); }
  .sim-input { width:64px !important; min-height:var(--touch-min); font-size:var(--fs-md); }
}

/* ── Galaxy — planet hit-box, coord input ── */
@media (max-width:768px) {
  .gal-coord-input { font-size:16px !important; min-height:var(--touch-min); padding:8px 10px; }
  .gal-planet-svg-hit { padding:6px; }
  .gal-row { padding:6px 4px; }
}

/* ── Touch feedback for all P1 cards/buttons ── */
@media (hover:none), (pointer:coarse) {
  .rnk-tab-btn:active, .al-tab:active, .gate-filter:active,
  .pass-plan-cta:active, .pass-daily-btn:active,
  .fr-btn:active, .tal-add:active, .prereq-link:active {
    transform:scale(0.97);
    opacity:0.85;
  }
  .ov-event-card:active, .pass-plan:active, .lp-proto:active,
  .al-member-row:active, .fr-row:active {
    background:rgba(var(--accent-rgb),0.06);
  }
}

/* ══════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AUDIT MOBILE COMPLET (29/04/2026) — fixes overflow par section
   Pages auditées : Infra, Gate, Fleet, Alliance, Rankings, Market, Quests, Battlepass
   Pattern commun : tabs/pills/cards trop larges sans scroll containers, KPI tiles
   à largeur fixe, KPI value avec letter-spacing trop grand, canvas fixed width.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  /* ── INFRA : tabs principaux + sub-tabs débordent ── */
  .bld-tabs, .bld-tab-row, .bld-subtabs, .inf-tabs, .infra-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap !important;
    scroll-snap-type:x proximity;
  }
  .bld-tabs::-webkit-scrollbar, .bld-tab-row::-webkit-scrollbar,
  .bld-subtabs::-webkit-scrollbar, .inf-tabs::-webkit-scrollbar { display:none; }
  .bld-tab, .bld-tab-main, .bld-subtab {
    flex-shrink:0; scroll-snap-align:start; white-space:nowrap;
  }
  .bld-tab, .bld-tab-main { padding:6px 12px !important; font-size:12px !important; }
  .inf-st-val { max-width:100%; overflow:hidden; text-overflow:ellipsis; }

  /* ── GATE : canvas particles + ring + sélecteurs débordent ── */
  .part-cvs, #partCvs, .g-ring, #gRing {
    max-width:100% !important; width:100% !important; height:auto;
  }
  .sq-syms, #sqSyms { flex-wrap:wrap; max-width:100%; gap:4px !important; }
  .gf-sort, #gfSort { max-width:100% !important; min-width:0 !important; width:100%; }

  /* ── FLEET : tabs + bouton "Nouvelle mission" wide ── */
  .fleet-tabs-bar, .fleet-tabs, .fms-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap !important;
  }
  .fleet-tabs-bar::-webkit-scrollbar, .fleet-tabs::-webkit-scrollbar, .fms-tabs::-webkit-scrollbar { display:none; }
  .fleet-tab, .fleet-tab.empty { flex-shrink:0; white-space:nowrap; padding:6px 10px; }
  .fleet-tab-lbl { font-size:var(--fs-xs); }
  .fms-new-btn { max-width:100%; box-sizing:border-box; white-space:normal; padding:8px 12px; }

  /* ── ALLIANCE : KPI tiles + tabs pills trop larges ── */
  .al-kpi-grid { grid-template-columns:repeat(2,1fr) !important; gap:6px; }
  .al-kpi-tile { min-width:0 !important; max-width:100%; padding:8px; }
  .al-kpi-val { font-size:18px !important; letter-spacing:0 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .al-kpi-lbl { font-size:10px !important; letter-spacing:0.5px !important; max-width:100%; overflow:hidden; }
  .al-tab-bar, .al-tabs-pills, .al-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap !important;
  }
  .al-tab-bar::-webkit-scrollbar, .al-tabs-pills::-webkit-scrollbar, .al-tabs::-webkit-scrollbar { display:none; }
  .al-tab-pill { flex-shrink:0; white-space:nowrap; padding:6px 12px; font-size:var(--fs-sm); }

  /* ── RANKINGS : tabs btns débordent ── */
  .rnk-tab-bar, .rnk-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap !important;
  }
  .rnk-tab-bar::-webkit-scrollbar, .rnk-tabs::-webkit-scrollbar { display:none; }
  .rnk-tab-btn { flex-shrink:0; white-space:nowrap; }

  /* ── REPORTS : select de tri trop large ── */
  .rep-toolbar, .rep-toolbar-row {
    flex-wrap:wrap; gap:6px; min-width:0;
  }
  .rep-sort { max-width:100% !important; min-width:0 !important; flex:1 1 100%; }

  /* ── MARKET : tabs en flex-wrap trop large ── */
  .mkt-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap !important; max-width:100%;
  }
  .mkt-tabs::-webkit-scrollbar { display:none; }
  .mkt-tab { flex-shrink:0; white-space:nowrap; padding:6px 12px; font-size:var(--fs-sm); }

  /* ── QUESTS : tab-buttons larges ── */
  .quest-tabs, .quests-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap !important;
  }
  .quest-tabs::-webkit-scrollbar, .quests-tabs::-webkit-scrollbar { display:none; }
  .quest-tab { flex-shrink:0; white-space:nowrap; padding:8px 12px; font-size:var(--fs-sm); }

  /* ── BATTLEPASS : cells rewards 304px de large ── */
  .bp-cell-rewards, .bp-rw, .cos-wrap {
    max-width:100%; min-width:0; box-sizing:border-box;
  }
  .cos-title { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cos-wrap-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; }

  /* ── DISTINCTIONS : pills débordent à 440 ── */
  .dist-pills, .dist-tabs {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap !important;
  }
  .dist-pills::-webkit-scrollbar, .dist-tabs::-webkit-scrollbar { display:none; }
  .dist-pill { flex-shrink:0; white-space:nowrap; }

  /* ── Sprint 5.3 : Touch targets ≥44×44 dans la topbar (audit P7) ── */
  .topbar #notifBell,
  .topbar .user-chip,
  .topbar .logout-btn,
  .topbar #topbarSettingsBtn,
  .topbar #topbarSearchBtn,
  .topbar .topbar-discord-link,
  .breadcrumb .bc-item.bc-root {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Sprint M7-A — Tablette portrait additions (769-1023)
   Override mobile-first defaults (max-width:768) qui clampent en 1 col
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
  /* Messages : la zone de lecture occupe toute la largeur tablette portrait,
     mais on garde max sur landscape (cf. sgc-sections.css) */
  .msg-conv-list { max-height:none; }
}