/* ══════════════════════════════════════════════════════════════════
   SGC — Sprint 16 v2 : Refonte responsive tablette touch-first
   Détection primaire via (pointer:coarse) — fire sur TOUTES tablettes
   quel que soit leur viewport (y compris Xiaomi 1880px paysage).
   Fallback width pour desktops à fenêtre réduite.
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. DÉTECTION TACTILE (tablette uniquement, pas mobile) ══ */
@media (pointer:coarse) and (min-width: 1024px) {

  /* Topbar : logo masqué, resources compactes */
  .logo-wrap { display:none !important; }
  .topbar { padding:0 8px; gap:4px; }
  .tb-resources { font-size:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rb-item { padding:3px 8px; gap:3px; }
  .rb-val { font-size:14px; }
  .rb-rate { font-size:11px; }
  .rb-sep { display:none; }

  /* Left nav : compacte mais lisible */
  .left-nav { width:200px !important; max-width:200px !important; }
  .lnav-lbl { font-size:12px; letter-spacing:1px; }
  .lnav-ico { width:28px; height:28px; font-size:14px; }
  .lnav-item { padding:8px 10px; min-height:40px; }
  .lnav-header { padding:10px; font-size:12px; }
  .lnav-sep { padding:8px 10px 4px; font-size:11px; }

  /* Liste des colonies dépliée par défaut dans le drawer tablette
     (sinon impossible de tap sur une colonie pour switcher : la liste a
     max-height:0 + overflow:hidden qui clip les hit-tests). */
  .rp-colony-list { max-height:400px !important; }
  .rp-colony-chevron { transform:rotate(180deg) !important; }

  /* Right panel → DRAWER */
  .right-panel {
    display:flex !important;
    position:fixed !important;
    top:56px !important; right:0 !important; bottom:0 !important;
    width:280px !important; max-width:280px !important;
    z-index:948 !important;
    transform:translateX(100%) !important;
    transition:transform 0.25s ease !important;
    border-left:2px solid rgba(var(--accent-rgb),0.4);
    box-shadow:-4px 0 24px var(--shade-5);
  }
  .right-panel.drawer-open { transform:translateX(0) !important; }

  /* Bouton toggle drawer */
  .tablet-drawer-toggle {
    display:flex !important;
    position:fixed; top:50%; right:0;
    transform:translateY(-50%);
    width:40px; height:80px;
    align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),0.18);
    border:1px solid rgba(var(--accent-rgb),0.5);
    border-right:none;
    border-radius:10px 0 0 10px;
    color:var(--accent); font-size:20px;
    cursor:pointer; z-index:947;
    transition:right 0.25s ease, background 0.15s;
  }
  .tablet-drawer-toggle.drawer-open { right:280px; }
  .tablet-drawer-toggle:active { background:rgba(var(--accent-rgb),0.35); }

  /* Backdrop léger — ne couvre QUE la zone hors drawer (right:280px) sinon le
     backdrop intercepte les taps sur le drawer à cause du stacking context
     créé par transform (chrome bug : transform fait que rp z-index 940 perd
     contre backdrop 938 dans elementsFromPoint). */
  .tablet-drawer-backdrop {
    display:none; position:fixed; top:56px; bottom:0; left:0; right:0;
    background:rgba(0,0,0,0.25); z-index:947;
  }
  .tablet-drawer-backdrop.drawer-open {
    display:block;
    right:280px; /* laisse le drawer accessible aux taps */
  }

  /* Grids : 6→4, 4→3, auto-fit */
  .og-grid, .tc-grid {
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
  }
  .cmd-grid { grid-template-columns:repeat(3,1fr) !important; }
  /* 6 KPIs → 3 cols × 2 rows pour un layout symétrique sans orphelins */
  .ov-empire-card { grid-template-columns:repeat(3,1fr) !important; }
  .al-kpi-grid { grid-template-columns:repeat(4,1fr) !important; }
  .fst-body { grid-template-columns:repeat(3,1fr) !important; }

  /* Overview banners : 1 colonne sur tablette */
  .ov-banner-wrap {
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
  }

  /* Event Galactique : fix débordement (CRITIQUE) */
  .ev-gbl-header, .ev-gbl-stats {
    flex-wrap:wrap !important; min-width:0 !important;
  }
  .ev-gbl-header > *, .ev-gbl-stats > * { min-width:0 !important; }

  /* Gate : grid 3 colonnes avec panneau droit utilisable sur tablette
     (pas dans le drawer — la gate est centrale, panneau infos toujours visible) */
  #sf_gate.active { grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(260px,280px) !important; }
  .gate-mode-bar { flex-wrap:wrap !important; min-height:56px !important; height:auto !important; }
  /* Destinations sidebar : boutons mode et chips compactés pour tenir dans 300px */
  #sf_gate .gmf { font-size:11px !important; padding:7px 2px !important; letter-spacing:0 !important; overflow:hidden; text-overflow:ellipsis; }
  #sf_gate .gf-chip { font-size:11px !important; padding:5px 9px !important; }
  #sf_gate .gf-search { font-size:12px !important; padding:6px 10px !important; }
  #sf_gate .gf-sort { font-size:11px !important; padding:6px 8px !important; }

  /* Galaxy : table scrollable, pas de side-panel */
  .gal-body { grid-template-columns:1fr !important; }

  /* Rankings : profile en bas */
  .rnk-layout { flex-direction:column !important; }
  .rnk-profile {
    width:100% !important; max-width:100% !important;
    border-left:none !important;
    border-top:1px solid rgba(var(--accent-rgb),0.18);
    max-height:300px;
  }
  .rnk-table-wrap { overflow-x:auto !important; }
  .rnk-podium { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important; }

  /* Reports : auto-fit */
  .ir-res-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important; }

  /* Troupes : stack */
  .troupes-layout { grid-template-columns:1fr !important; }

  /* Alliance / Market compactés */
  .al-create-form, .al-list-panel { min-width:0 !important; flex:1 1 100% !important; }
  .alhq-res-block { min-width:100px !important; }
  .mkt-form-col { min-width:120px !important; }

  /* Messages : conv-card responsive */
  .conv-card { min-width:0 !important; max-width:92vw !important; }

  /* Centre : autorise scroll horizontal pour contenu non-responsive */
  .planet-section, .sec-full { overflow-x:auto; }
}

/* ══ 2. FALLBACK DESKTOP ÉTROIT ══ */
@media (max-width:1400px) and (pointer:fine) {
  /* subset : juste topbar compacte, pas de drawer */
  .logo-wrap { display:none; }
  .tb-resources { font-size:13px; }
}

/* ══════════════════════════════════════════════════════════════════
   3. PERF KILL — tablette (pointer:coarse)
   backdrop-filter est le tueur #1 de FPS sur Chromium Android/iOS.
   ══════════════════════════════════════════════════════════════════ */
@media (pointer:coarse) {
  /* Ciblé : on retire backdrop-filter uniquement sur les overlays courants
     pour ne pas casser les modals critiques qui dépendent du blur pour
     séparer visuellement le contenu */
  .right-panel, .topbar, .left-nav,
  .ov-empire-card, .ov-banner-wrap,
  .bld-card, .troupe-card, .ship-card, .research-card, .cmd-card,
  .ir-card, .rnk-card, .alh-card, .mkt-card, .qst-card,
  /* Audit 27/04 — étendu : event/empty cards + tooltips + chip filters + planet rows */
  .ov-event-card, .ov-empty, .planet-row, .gp-row,
  .gate-mode-bar, .gate-filters-bar, .gpanel,
  .gf-chip, .gf-search, .gf-sort,
  [class*="-chip"], [class*="-tip"], .sgc-tip-rich {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   4. LOW-FX MODE — classe body.lowfx (auto sur tablette via perf-mode.js)
   Désactive UNIQUEMENT les animations infinies identifiables (pulse/glow/
   shimmer) et les canvas décoratifs. Ne touche pas au layout.
   ══════════════════════════════════════════════════════════════════ */

/* Kill pulse/glow/shimmer sur badges et CTA — animations infinies coûteuses */
body.lowfx .nav-badge-ready,
body.lowfx .lnav-badge,
body.lowfx .topbar-pulse,
body.lowfx .pulse,
body.lowfx [class*="-pulse"],
body.lowfx [class*="-glow"],
body.lowfx [class*="-shimmer"],
/* Kill prismatic + drift anims + decorative spinners (audit 27/04) */
body.lowfx .game-stars,
body.lowfx .stars-layer,
body.lowfx [class*="prism"],
body.lowfx [class*="-drift"],
body.lowfx [class*="-spin"],
body.lowfx [class*="-rotate"],
body.lowfx [class*="-sweep"],
body.lowfx [class*="-flicker"],
body.lowfx [class*="-flash"],
body.lowfx [class*="-twinkle"],
body.lowfx .rb-item,
body.lowfx .rb-val,
/* Landing page anims (lp*) — coûteuses sur mobile */
body.lowfx .lp-bg,
body.lowfx .lp-blink,
body.lowfx [class*="lp-chv"],
body.lowfx [class*="lp-sym"],
body.lowfx [class*="lp-eh"],
body.lowfx [class*="lp-gate"],
body.lowfx .fac-png,
body.lowfx [class*="oriPng"],
/* Phase 1A — extension lowfx kill : auth/profile/war/quest/galaxy hero */
body.lowfx .auth-vortex,
body.lowfx .auth-chevrons,
body.lowfx .auth-vortex::before,
body.lowfx .auth-vortex::after,
body.lowfx .profile-modal-inner::before,
body.lowfx .war-card,
body.lowfx .quest-streak-fire,
body.lowfx .galaxy-hero-3d::before {
  animation: none !important;
}

/* Cache les canvas décoratifs (particles, starfield idle) */
body.lowfx #sgcFactionParticlesCanvas,
body.lowfx .game-stars,
body.lowfx .stars-layer,
body.lowfx canvas.decorative {
  display: none !important;
}

/* En mode lowfx, on perd les .game-stars animés → on remet un starfield STATIQUE
   sur body (peinture unique, aucun coût d'animation) pour garder le thème spatial.
   !important nécessaire car body:has(.app.faction-*) en faction-themes.css a une
   spécificité (0,2,1) supérieure à body.lowfx (0,1,1). */
body.lowfx {
  background-color: #000810 !important;
  background-image:
    radial-gradient(1.2px 1.2px at 23px 45px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 89px 12px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.8px 1.8px at 156px 133px, rgba(200,220,255,0.95), transparent),
    radial-gradient(1px 1px at 34px 98px, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 178px 167px, rgba(180,220,255,0.85), transparent),
    radial-gradient(1px 1px at 112px 72px, rgba(255,255,255,0.70), transparent),
    radial-gradient(1.3px 1.3px at 67px 181px, rgba(255,255,255,0.90), transparent),
    radial-gradient(2.2px 2.2px at 145px 23px, rgba(150,200,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 5px 145px, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 192px 88px, rgba(200,220,255,0.65), transparent),
    radial-gradient(2.5px 2.5px at 250px 220px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 320px 60px, rgba(180,200,255,0.75), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(15,30,80,0.30) 0%, transparent 70%),
    var(--faction-ambient, none) !important;
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 400px 400px, 400px 400px, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
}

/* ============ Sprint Batterie Phase B — body.lowfx couverture totale ============ */

/* B2 — Kill anim/transition global en lowfx (couvre les ~250 anims non listées) */
body.lowfx *,
body.lowfx *::before,
body.lowfx *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.05s !important;
}
/* Whitelist UX critique (drawer, modals) — garde 250ms pour ouverture fluide */
body.lowfx .right-panel,
body.lowfx .tablet-drawer-toggle,
body.lowfx [class*="-modal"],
body.lowfx [class*="-overlay"],
body.lowfx .cfm-modal,
body.lowfx .mnav-sheet {
  transition-duration: 0.25s !important;
}

/* B3 — Kill backdrop-filter en lowfx (très coûteux GPU mobile) */
body.lowfx,
body.lowfx *,
body.lowfx *::before,
body.lowfx *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Kill filter:blur sur backgrounds large surface (mais garder drop-shadow pour icônes) */
body.lowfx .lp-bg,
body.lowfx .lp-halo,
body.lowfx [class*="-glow-bg"],
body.lowfx [class*="-blur"] {
  filter: none !important;
}

/* B4 — Background-attachment scroll en lowfx (anti-jank iOS Safari + perf GPU) */
body.lowfx * { background-attachment: scroll !important; }

/* ══════════════════════════════════════════════════════════════════
   5. NO-HOVER on touch devices — hover sticks after tap on iPad/Android
   and re-triggers translate/scale/glow at every render → "flash" effect.
   We scope this to (hover:none) so mouse users keep their feedback.
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Disable hover-triggered movement and shadow-flash on cards/buttons */
  .bld-card:hover, .og-bld-card:hover, .res-tech-card:hover,
  .ut-card:hover, .troupe-card:hover, .ship-card:hover,
  .cmd-card:hover, .ir-card:hover, .rnk-card:hover,
  .alh-card:hover, .mkt-card:hover, .qst-card:hover,
  .nav-item:hover, .lnav-item:hover, .auth-btn:hover,
  .stg-btn:hover, .pk-item:hover {
    transform: none !important;
    box-shadow: inherit !important;
    text-shadow: inherit !important;
  }
  /* Larger touch targets for the "upgrade" / "research" buttons that the user
     reported being un-tappable. 44×44 is Apple/Google recommended minimum. */
  .bld-upgrade-btn, .res-upgrade-btn, .res-tech-card,
  .ut-rec-btn-main, .qty-max-btn, .ut-qty-btn,
  .ov-empire-card .ov-emp-stat[onclick] {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Decorative overlays must never block touches */
  .stars-layer, .game-stars, .lp-halo,
  .auth-vortex, .auth-chevrons, .auth-kawoosh,
  [class*="-particle"], [class*="-glow-bg"] {
    pointer-events: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Sprint M7-A — Tablette portrait optimizations (768-1023)
   Sub-tabs scroll-fade indicators + multi-col bld/research
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tabs sub-row : indicateur visuel de scroll horiz par mask-fade */
  .rnk-subtab-bar, .alhq-subtab-bar, .gal-detail-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  }
  /* Bld grid mid-tablet : 2 cols larges */
  .bld-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Research tier groups : 3 cols sur 800+ */
  .tt-group-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}