@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Cinzel:wght@400;500;600;700;800&family=Cinzel+Decorative:wght@400;700;900&display=swap');

/* ══════════════════════════════════
   THEME: DEEP SPACE COMMAND
   Stargate 4X — Espace profond + ambre
   ══════════════════════════════════ */
:root {
  color-scheme: dark;
  --bg:        #080c14;
  --bg-deep:   #000810;
  --bg2:       #14141c;
  --surface:   #1c1c26;
  --surface2:  #262634;
  --surface3:  #323242;
  --surface-card: #081026; /* navy des cartes (bld/res-tech) — base de .sgc-card */
  /* --glass / --glassl removed (unused) */

  --border:    rgba(var(--accent-rgb),0.20);
  --border2:   rgba(var(--accent-rgb),0.35);
  --border3:   rgba(var(--accent-rgb),0.55);

  --accent:    #44cc44;
  --accent2:   #77ee77;
  --accent3:   #2a8a2a;
  --accentglow:rgba(68,204,68,0.55);
  --accent-rgb: 68,204,68;
  --accent2-rgb: 119,238,119;

  --gold:      #ffc040;
  --gold2:     #ffe890;
  --goldglow:  rgba(255,192,64,0.6);

  --success:   #44ffaa;
  --warn:      #ffcc55;
  --danger:    #ff7777;
  --purple:    #cc88ff;

  --text:      #e8eaf0;
  --textmid:   #bcc0cc;
  --textsoft:  #a0a5b4;
  --textbright:#ffffff;

  --ancient:   #00e5ff;
  --asgard:    #55d8ff;
  --goauld:    #ffd000;
  --replic:    #ff6666;
  --event-orange: #ffaa44;

  /* --glass-bg/border/inset removed (unused, use --overlay-bg instead) */

  --sh: 0 4px 24px rgba(0,0,0,0.6);
  --sh2: 0 8px 40px rgba(0,0,0,0.7);
  --inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* Font families (single source of truth — audit 09/05/2026) */
  --font-display:     'Orbitron', sans-serif;        /* Titles, headers, uppercase */
  --font-body:        'Rajdhani', sans-serif;        /* Body, paragraphs, UI text */
  --font-mono:        'Share Tech Mono', monospace;  /* HUD, data, code, ressources */
  --font-mono-data:   'JetBrains Mono', monospace;   /* Landing — chiffres tabulaires AAA */
  --font-mystic:      'Cinzel', serif;               /* Cité d'Ascension only */
  --font-mystic-deco: 'Cinzel Decorative', 'Cinzel', serif; /* Cité titres ornés */
  --font-system:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Color overlay tokens (audit 09/05) — light tints over dark surfaces */
  --tint-1:  rgba(255,255,255,0.02);
  --tint-2:  rgba(255,255,255,0.03);
  --tint-3:  rgba(255,255,255,0.04);
  --tint-4:  rgba(255,255,255,0.05);
  --tint-5:  rgba(255,255,255,0.06);
  --tint-6:  rgba(255,255,255,0.08);
  --tint-7:  rgba(255,255,255,0.1);
  --tint-8:  rgba(255,255,255,0.12);
  --tint-9:  rgba(255,255,255,0.15);
  --tint-10: rgba(255,255,255,0.25);
  /* Dark shades for overlays/scrims */
  --shade-1: rgba(0,0,0,0.2);
  --shade-2: rgba(0,0,0,0.3);
  --shade-3: rgba(0,0,0,0.4);
  --shade-4: rgba(0,0,0,0.5);
  --shade-5: rgba(0,0,0,0.6);
  --shade-6: rgba(0,0,0,0.7);
  --shade-7: rgba(0,0,0,0.85);
  --shade-8: rgba(0,0,0,0.95);

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-4xl: 32px;
  --fs-display-1: 48px;  /* moments forts (level-up, victoire) */
  --fs-display-2: 72px;  /* hero banner (Ascension X, Croisade) */
  --fs-display-3: 96px;  /* full-screen takeover (Victoire/Défaite combat) */

  /* Quick-win (b) audit UI/UX — Tokens hover unifies pour les cards.
  /* Audit UI/UX #3 — Empty state utility (a reutiliser partout : Reports filter
     vide, Alliance no-members, Quests no-progress, etc.) */
     A utiliser via :
       .ma-card:hover { border-color: var(--sgc-hover-border); box-shadow: var(--sgc-hover-shadow); }
     Pattern Marché : border-color cyan + box-shadow inset cyan subtle */
  --sgc-hover-border: rgba(var(--accent-rgb), 0.55);
  --sgc-hover-shadow: 0 4px 18px var(--shade-3), 0 0 16px rgba(var(--accent-rgb), 0.15), inset 0 0 12px rgba(var(--accent-rgb), 0.06);
  --sgc-hover-lift:   translateY(-2px);
  --sgc-hover-dur:    0.18s;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 28px;
  --sp-3xl: 36px;
  --gutter: 16px;

  /* Radius scale */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Rarity colors */
  --rarity-common:    #7cc97c;
  --rarity-rare:      #6eaaff;
  --rarity-epic:      #cc88ff;
  --rarity-legendary: #ffbb33;
  --rarity-ancient:   #00e5ff;

  /* Stat colors */
  --color-atk:   #ff6b6b;
  --color-def:   #44dd99;
  --color-cargo: #f0c040;

  /* Notification type colors */
  --notif-war:     #ff4444;
  --notif-spy:     #f0a030;
  --notif-trade:   #44cc44;
  --notif-diplo:   #44aaff;

  /* Overlay system */
  --overlay-bg:    rgba(2,4,12,0.85);
  --overlay-blur:  blur(12px);
  --modal-radius:  16px;
  --modal-shadow:  0 0 60px rgba(0,0,0,0.7);

  /* Timing */
  --dur-fast:   0.15s;
  --dur-normal: 0.3s;
  --dur-slow:   0.5s;

  /* ── Motion / interaction (AAA polish 02/06/2026) ──
     Courbes d'easing unifiées + feedback de pression. Source unique pour
     que tout le site partage le MEME ressenti d'interaction (cf. sgc-ui-polish.css). */
  --ease-out-premium: cubic-bezier(0.22, 0.68, 0.32, 1);  /* décélération douce, snappy */
  --ease-spring:      cubic-bezier(0.34, 1.4, 0.64, 1);   /* léger overshoot — « pop » */
  --press-dur:        0.07s;   /* enfoncement quasi instantané */
  --press-scale:      0.97;    /* échelle au clic (boutons) */
  --press-scale-tab:  0.965;   /* échelle au clic (onglets) */

  /* ── Système de boutons réutilisable (.btn) ── */
  --btn-radius:       8px;
  --btn-radius-sm:    6px;
  --btn-radius-lg:    10px;
  --btn-pad-y:        10px;
  --btn-pad-x:        18px;
  --btn-shadow-hover: 0 6px 22px var(--shade-4), 0 0 18px rgba(var(--accent-rgb),0.22);
  --btn-press-shadow: inset 0 2px 7px rgba(0,0,0,0.32);

  /* Touch targets (WCAG 2.5.5 / Apple HIG / Material) */
  --touch-min: 44px;          /* iOS minimum */
  --touch-comfortable: 48px;  /* Android Material */
  --touch-input-fs: 16px;     /* anti-zoom iOS */

  /*
   * Z-index stack — utilise ces tokens dans le futur via var(--z-NAME).
   * Hiérarchie : base/content (0-10) < sticky/nav (5-200) < overlay/modal (500-10000) < alerts/error (10050+).
   * Les valeurs numériques codées en dur dans le projet seront migrées graduellement (Sprint M9 — consolidation).
   */
  /* ── Ground level ── */
  --z-base: 0;
  --z-content: 1;
  --z-sticky: 5;
  --z-sticky-strong: 10;
  --z-sidebar: 50;
  --z-breadcrumb: 90;
  --z-drawer: 200;
  /* ── Mid overlays (toasts, FAB, emote-picker) ── */
  --z-toast: 1050;
  --z-emote-picker: 1050;
  --z-overlay: 2000;
  --z-modal-bg: 4000;
  --z-tutorial: 4500;
  --z-modal: 5000;
  --z-modal-content: 5100;
  /* ── Topbar / nav (existing — preserved) ── */
  --z-topbar: 800;
  --z-bottom-nav: 900;
  --z-right-panel: 950;
  --z-fab: 899;
  --z-more-nav: 901;
  /* ── Full-screen overlays (existing — preserved) ── */
  --z-card-tip: 9000;             /* tooltips card-style (sous overlays) */
  --z-overlay-attack: 9100;
  --z-overlay-race: 9150;
  --z-overlay-event: 9200;
  --z-overlay-offline: 9250;
  --z-overlay-profile: 9280;
  --z-overlay-sim: 9300;
  --z-overlay-tutorial: 9350;
  --z-overlay-beta: 9400;
  --z-overlay-faction: 9500;
  --z-overlay-login-bonus: 9500;
  --z-overlay-shop: 9600;         /* shop & action overlays */
  --z-overlay-survival: 9800;     /* survival countdown */
  --z-overlay-artifact: 9900;
  --z-overlay-fullscreen: 9999;   /* full-page takeover (fleet-battle, gate-vfx, pass) */
  /* ── Top alerts (must beat modals) ── */
  --z-confirm-modal: 10000;
  --z-ack-modal: 10050;
  --z-notif-stack: 10050;
  --z-tooltip: 10100;
  --z-reconnect: 10200;
  --z-update-toast: 10300;
  --z-spotlight: 10300;
  --z-error-overlay: 99999;

  /* Visual viewport height (mobile keyboard fix) — set by sgc-bootstrap.js */
  --vvh: 100dvh;
}

html, body {
  -webkit-tap-highlight-color: transparent;
}

* { margin:0; padding:0; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--accent3) rgba(0,0,0,0.2); }

/* ── Global focus ring (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Dark theme for all native selects & options */
select { background:rgba(8,14,28,0.95); color:var(--textbright); }
select option { background:#0c1220; color:var(--textbright); }
select option:checked { background:rgba(var(--accent-rgb),0.3); }

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25);
}

/* ── Unified disabled state ── */
button:disabled, .btn:disabled, [disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Force font-family inheritance (fix Arial/Times fallback bug 09/05) ──
   button/input/select/textarea ne héritent pas par défaut de la font-family du parent
   → ils tombent sur Arial sur Windows. Idem pour SVG text. */
button, input, select, textarea {
  font-family: inherit;
}
svg text { font-family: var(--font-body); }

/* ── Display tier — moments forts (audit créatif 09/05) ── */
.sgc-banner-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--textbright);
  text-shadow: 0 0 24px var(--accentglow), 0 0 48px rgba(var(--accent-rgb),0.45);
  text-align: center;
  line-height: 1.05;
  margin: 0;
}
.sgc-banner-hero.lg { font-size: var(--fs-display-3); letter-spacing: 12px; }
.sgc-banner-hero.sm { font-size: var(--fs-display-1); letter-spacing: 5px; }
.sgc-banner-hero.gradient {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(var(--accent-rgb),0.5);
}
@media (max-width: 768px) {
  .sgc-banner-hero    { font-size: 44px; letter-spacing: 4px; }
  .sgc-banner-hero.lg { font-size: 56px; letter-spacing: 6px; }
  .sgc-banner-hero.sm { font-size: 32px; letter-spacing: 3px; }
}
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); border-radius:3px; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg, var(--accent3), var(--surface3)); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent3); }
body {
  background-color: #000810;
  background-image: radial-gradient(ellipse at 50% 50%, rgba(15,30,80,0.25) 0%, transparent 70%);
  position: relative;
  font-family: var(--font-body);
  color: var(--text);
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; justify-content: center; align-items: stretch;
}

/* ============ Skeleton loaders (Sprint M9) ============ */
@keyframes sgcSkeletonShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.sgc-skel {
  background: linear-gradient(
    90deg,
    rgba(120, 140, 180, 0.06) 25%,
    rgba(120, 140, 180, 0.18) 50%,
    rgba(120, 140, 180, 0.06) 75%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  animation: sgcSkeletonShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sgc-skel { animation: none; }
}
body.lowfx .sgc-skel { animation: none; }
.sgc-skel-line { height: 14px; width: 100%; margin: 6px 0; }
.sgc-skel-line.short { width: 40%; }
.sgc-skel-line.medium { width: 70%; }
.sgc-skel-block { height: 80px; width: 100%; margin: 8px 0; }
.sgc-skel-card { height: 160px; width: 100%; margin: 10px 0; }
.sgc-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
}