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

/* ── 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 {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ══════════════════════════════════
   LARGE TABLET ≤1400px
   Juste cacher le panneau droit, garder le layout desktop
   ══════════════════════════════════ */
@media (max-width:1400px) {
  /* Topbar — resources scrollables, DECO toujours visible */
  .topbar { padding:0 10px; gap:6px; }
  .tb-resources {
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    flex-shrink:1; min-width:0;
    gap:6px; padding:0 6px;
    scrollbar-width:none;
  }
  .tb-resources::-webkit-scrollbar { display:none; }
  .rb-item { padding:4px 10px; gap:4px; flex-shrink:0; }
  .rb-val { font-size:15px; min-width:44px; }
  .rb-rate { display:none; }
  .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:8px; }

  /* Attack panel dans Galaxy */
  .atk-unit-row { gap:6px; }
  .atk-unit-name { font-size:12px; }
  .atk-unit-avail { font-size:11px; }

  /* 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) {
  /* 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:12px; 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; }
  .ovw-bld-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }

  /* Rankings */
  .rnk-table-wrap { font-size:11px; }
  .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:11px; }

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

  /* Tech header */
  .th-name { font-size:14px; 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:11px; }
  .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:14px; }
  .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); }
}

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

  /* Bottom nav — enhanced */
  .left-nav {
    order:1; padding-bottom:env(safe-area-inset-bottom, 0px);
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .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.7; text-align:center; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Topbar */
  .topbar { gap:6px; padding:0 8px; }
  .tb-resources { gap:4px; padding:0 4px; }
  .rb-item { padding:3px 5px; gap:2px; border-radius:6px; }
  .rb-val { font-size:11px; min-width:32px; }
  .tb-resources .rb-lbl { font-size:14px; }
  .user-chip { padding:3px 8px; font-size:11px; }
  .notif-bell { width:30px; height:30px; font-size:12px; }
  .logout-btn { padding:4px 8px; font-size:10px; }

  /* 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:9px; }

  /* Tech cards */
  .tc-grid { grid-template-columns:1fr 1fr !important; gap:6px !important; }
  .tc-card { padding:8px; }

  /* Rankings */
  .rnk-header { flex-direction:column; gap:4px; padding:8px 10px; }
  .rnk-tab-bar { flex-wrap:wrap; gap:4px; padding:4px 6px; }
  .rnk-tab-btn { font-size:9px; padding:6px 8px; min-height:36px; }
  .rnk-table { font-size:10px; }
  .rnk-td, .rnk-th { padding:4px 6px; }

  /* Alliance */
  .al-create-form { padding:12px; min-width:auto; }
  .al-list-panel { padding:8px; }
  .al-chat-box { max-height:40vh; }
  .al-no-alliance { flex-direction:column; }

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

  /* Gate screen */
  .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; }

  /* 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:14px; 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; }

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

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

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

  /* Galaxy */
  .gal-body { grid-template-columns:1fr !important; }
  .gal-detail-panel { border-left:none; border-top:1px solid var(--border); max-height:50vh; }
  .gal-sys-grid { grid-template-columns:repeat(3,1fr) !important; gap:3px; }
  .pvp-target-btn { padding:8px 10px; min-height:44px; }

  /* 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; }
  .ovw-slots-row { flex-direction:column; gap:6px; padding:6px 8px; }
  .ovw-slot { min-width:100%; }

  /* Overlays */
  .race-popup { width:92vw; max-width:none; }
  .event-popup { width:90vw; max-width:none; }
  .login-bonus-box { max-width:90vw; padding:20px 24px; }
  .asc-perk-cards { grid-template-columns:1fr; }
  .asc-perk-modal { padding:14px; width:94vw; }
  .auth-box { width:92vw; padding:20px 16px; }

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

  /* Notification dropdown */
  .notif-dropdown { width:min(320px, calc(100vw - 20px)); right:-10px; }

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

  /* Ascension */
  .asc-title { font-size:16px; letter-spacing:2px; }
  .asc-level-num { font-size:28px; }
  .asc-tabs { flex-wrap:wrap; }
  .asc-tab { font-size:9px; padding:8px 6px; }
  .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:15px; padding:8px 14px; }
  .rp-cost-row { font-size:16px; padding:6px 0; }

  /* Mission tracker */
  .mission-tracker { padding:8px; gap:8px; }
  .mt-target { font-size:14px; }

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

  /* Performance */
  .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 rgba(0,0,0,0.5); }
  .global-event-card { padding:10px; }
}

/* ══════════════════════════════════
   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:8px; padding:4px 6px; }
  .al-tabs { flex-wrap:wrap; }
  .al-tab { font-size:9px; padding:5px 8px; }

  .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:95vw !important; max-width:none; padding:10px; }
  .spy-panel { width:95vw !important; max-width:none; }

  .rb-item { padding:2px 4px; }
  .rb-val { font-size:10px; min-width:28px; }
  .tb-resources .rb-lbl { font-size:12px; }
  .tb-resources .rb-lbl img { width:14px !important; height:14px !important; }

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

  .auth-box { width:100vw; max-width:100%; border-radius:0; padding:16px 12px; }
  .cfm-modal { max-width:96vw; }
  .cfm-actions { flex-direction:column; gap:6px; }

  .asc-hero { padding:14px 12px; }
  .asc-title { font-size:14px; }
  .asc-level-num { font-size:24px; }
  .asc-tab { font-size:8px; padding:6px 4px; letter-spacing:1px; }
}

/* ══════════════════════════════════
   LANDSCAPE PHONE
   ══════════════════════════════════ */
@media (orientation:landscape) and (max-height:500px) {
  .topbar { height:44px; }
  .app { grid-template-rows:44px 1fr; }
  .sec-hdr { height:80px; }
  .left-nav { height:40px; }
  .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:36px; display:flex; align-items:center; }
  .rnk-tab-btn { min-height:40px; padding:8px 10px; }
  .al-tab { min-height:40px; 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:36px; height:36px; font-size:16px; }
  .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:40px; }
  .tut-btn { padding:10px 12px; min-height:40px; }
  .login-bonus-btn { padding:12px 28px; min-height:44px; }

  /* 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; }
  .lnav-item:active { background:rgba(var(--accent-rgb),0.2); }
  .og-card:active { background:rgba(var(--accent-rgb),0.12); }
  .rb-item:active { background:rgba(255,255,255,0.12); }
}

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