/* sgc-faction-themes.css — Visual identity per faction
   v3 — Much more visible markers. Three pillars:
   (a) Topbar background pattern (subtle but visible)
   (b) Topbar TOP bar — 3px colored strip per faction (always-on anchor)
   (c) Sidebar left edge + logo dot + card radius signature */

/* ───────── (b) TOP STRIP — always-visible faction anchor ───────── */
.app[class*="faction-"] .topbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--faction-strip, var(--accent));
  box-shadow: 0 0 10px var(--accentglow), 0 0 20px rgba(var(--accent-rgb),0.4);
  pointer-events: none;
  z-index: 5;
}
.app.faction-tauri   { --faction-strip: linear-gradient(90deg, transparent, var(--accent) 30%, #66ee66 50%, var(--accent) 70%, transparent); }
.app.faction-goauld  { --faction-strip: linear-gradient(90deg, transparent, #ffbb00 30%, #ffe040 50%, #ffbb00 70%, transparent); }
.app.faction-anciens { --faction-strip: linear-gradient(90deg, transparent, var(--ancient) 30%, #66f5ff 50%, var(--ancient) 70%, transparent); }
.app.faction-wraith  { --faction-strip: linear-gradient(90deg, transparent, #c266ff 30%, #dd99ff 50%, #c266ff 70%, transparent); }
.app.faction-tokra   { --faction-strip: linear-gradient(90deg, transparent, #ff3333 30%, #ff6655 50%, #ff3333 70%, transparent); }
.app.faction-ori     { --faction-strip: linear-gradient(90deg, transparent 0%, #ff2d95 10%, #ff7a00 25%, #ffee00 40%, #00ff95 50%, #00ccff 60%, #aa00ff 75%, #ff2d95 90%, transparent 100%); background-size: 200% 100%; }
.app.faction-ori .topbar::before { background-size: 200% 100% !important; animation: oriStripShift 6s linear infinite; }
@keyframes oriStripShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ───────── (a) Topbar background pattern — RETIRÉ
   Le pattern (traits/rayons/cristaux) n'apportait pas assez et gênait la lisibilité
   des ressources. Conserve uniquement la strip colorée en haut (::before) et
   l'ambient glow global. ───────── */

/* Tau'ri — BIG military grid (visible on dark) */
.app.faction-tauri {
  --faction-topbar-pattern:
    repeating-linear-gradient(0deg,  rgba(100,240,100,0.22) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(100,240,100,0.22) 0 1px, transparent 1px 18px);
}

/* Goa'uld — gold stripes */
.app.faction-goauld {
  --faction-topbar-pattern:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,192,64,0.22) 12px 14px);
}

/* Anciens — visible concentric waves */
.app.faction-anciens {
  --faction-topbar-pattern:
    radial-gradient(circle at 50% 100%,
      transparent 0 18px,
      rgba(0,229,255,0.30) 18px 20px,
      transparent 20px 40px,
      rgba(0,229,255,0.22) 40px 42px,
      transparent 42px 65px,
      rgba(0,229,255,0.16) 65px 67px,
      transparent 67px 90px,
      rgba(0,229,255,0.12) 90px 92px,
      transparent 92px);
}

/* Wraith — bigger organic blobs (alien biomass) */
.app.faction-wraith {
  --faction-topbar-pattern:
    radial-gradient(ellipse 90px 16px at 10% 50%, rgba(194,102,255,0.32), transparent 75%),
    radial-gradient(ellipse 120px 20px at 40% 60%, rgba(194,102,255,0.28), transparent 75%),
    radial-gradient(ellipse 80px 14px at 70% 40%, rgba(194,102,255,0.30), transparent 75%),
    radial-gradient(ellipse 110px 18px at 95% 55%, rgba(194,102,255,0.26), transparent 75%);
}

/* Tok'ra — crystal lattice (diamonds) */
.app.faction-tokra {
  --faction-topbar-pattern:
    linear-gradient(45deg,  rgba(255,51,51,0.22) 25%, transparent 25%, transparent 75%, rgba(255,51,51,0.22) 75%),
    linear-gradient(-45deg, rgba(255,51,51,0.14) 25%, transparent 25%, transparent 75%, rgba(255,51,51,0.14) 75%);
  --faction-topbar-bgsize: 14px 14px, 14px 14px;
}

/* Ori — divine light rays radiating from below (subtle) */
.app.faction-ori {
  --faction-topbar-pattern:
    repeating-linear-gradient(90deg,
      transparent 0 40px,
      rgba(255,238,0,0.14) 40px 42px,
      transparent 42px 90px,
      rgba(255,255,255,0.10) 90px 91px);
}

/* ───────── (c) Left sidebar faction stripe ───────── */
/* Posé sur .main-layout (non-scrollable, deja position:relative) au lieu de
   .left-nav (overflow-y:auto → un ::before absolute y est dimensionne sur le
   viewport visible ET scrolle avec le contenu, donnant un liseret partiel).
   Limité au desktop : ≤1023px, .main-layout passe en column et .left-nav
   devient une barre horizontale en haut, un stripe vertical n'a plus de sens. */
@media (min-width:1024px) {
  .app[class*="faction-"] .main-layout::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent3) 50%, var(--accent) 100%);
    box-shadow: 0 0 10px var(--accentglow);
    pointer-events: none;
    z-index: 10;
  }
}

/* ───────── Section header accent — variations per faction ───────── */
/* Anciens : dotted accent */
.app.faction-anciens .sec-hdr::after {
  background: radial-gradient(circle, var(--accent) 2px, transparent 2.5px);
  background-size: 14px 100%;
  background-repeat: repeat-x;
  background-position: center;
  height: 6px;
  box-shadow: 0 0 14px rgba(var(--accent-rgb),0.7);
}
/* Wraith : jagged sawtooth */
.app.faction-wraith .sec-hdr::after {
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent2) 50%, var(--accent) 75%, transparent);
  clip-path: polygon(
    0 100%, 0 50%, 4% 100%, 8% 20%, 12% 100%, 16% 30%, 20% 100%, 24% 20%, 28% 100%,
    32% 30%, 36% 100%, 40% 20%, 44% 100%, 48% 30%, 52% 100%, 56% 20%, 60% 100%,
    64% 30%, 68% 100%, 72% 20%, 76% 100%, 80% 30%, 84% 100%, 88% 20%, 92% 100%, 96% 30%, 100% 100%
  );
}
/* Tok'ra : double thin lines */
.app.faction-tokra .sec-hdr::after {
  height: 6px;
  background:
    linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent) top / 100% 1.5px no-repeat,
    linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent) bottom / 100% 1.5px no-repeat;
}
/* Ori : flame-triangle gradient accent */
.app.faction-ori .sec-hdr::after {
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--accent3) 20%, var(--accent) 50%, var(--accent2) 80%, transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.7);
}

/* ───────── Card border-radius signature ───────── */
.app.faction-tauri .cmd-card,
.app.faction-tauri .dist-card,
.app.faction-tauri .mission-card,
.app.faction-tauri .uc-card,
.app.faction-tauri .sc-card,
.app.faction-tauri .tc-card { border-radius: 2px !important; }

.app.faction-goauld .cmd-card,
.app.faction-goauld .dist-card,
.app.faction-goauld .mission-card,
.app.faction-goauld .uc-card,
.app.faction-goauld .sc-card,
.app.faction-goauld .tc-card { border-radius: 16px !important; }

.app.faction-anciens .cmd-card,
.app.faction-anciens .dist-card,
.app.faction-anciens .mission-card,
.app.faction-anciens .uc-card,
.app.faction-anciens .sc-card {
  border-radius: 10px !important;
  box-shadow: inset 0 0 24px rgba(0,229,255,0.10), 0 2px 12px var(--shade-1);
}

.app.faction-wraith .cmd-card,
.app.faction-wraith .dist-card,
.app.faction-wraith .mission-card,
.app.faction-wraith .uc-card,
.app.faction-wraith .sc-card { border-radius: 16px 2px 16px 2px !important; }

.app.faction-tokra .cmd-card,
.app.faction-tokra .dist-card,
.app.faction-tokra .mission-card,
.app.faction-tokra .uc-card,
.app.faction-tokra .sc-card {
  border-radius: 0 !important;
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px
  );
}

.app.faction-ori .cmd-card,
.app.faction-ori .dist-card,
.app.faction-ori .mission-card,
.app.faction-ori .uc-card,
.app.faction-ori .sc-card {
  border-radius: 14px 2px 14px 2px !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,0.10), 0 2px 14px var(--shade-3) !important;
}

/* ───────── Ori — Cadres ressources topbar (prismatique) ───────── */
.app.faction-ori .rb-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(10,14,32,0.55) 100%) !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 6px 2px 6px 2px !important;
  position: relative;
}
.app.faction-ori .rb-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ff2d95 20%, #ffee00 40%, #00ccff 60%, #aa00ff 80%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0.95;
  pointer-events: none;
  animation: oriRbStripShift 6s linear infinite;
}
@keyframes oriRbStripShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.app.faction-ori .rb-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(10,14,32,0.5) 100%) !important;
  transform: translateY(-1px);
}
.app.faction-ori .tb-resources .rb-lbl {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.85)) !important;
}
.app.faction-ori .rb-sep {
  background: linear-gradient(180deg, transparent 0%, #ffffff 50%, transparent 100%) !important;
  width: 1px !important;
}

/* ───────── Logo faction accent dot ───────── */
.app[class*="faction-"] .logo::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 10px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accentglow), 0 0 24px rgba(var(--accent-rgb),0.5);
  vertical-align: middle;
}
.app.faction-tauri    .logo::after { border-radius: 0; }
.app.faction-goauld   .logo::after { border-radius: 50%; }
.app.faction-anciens  .logo::after { border-radius: 50%; box-shadow: 0 0 16px var(--accentglow), 0 0 32px rgba(var(--accent-rgb),0.45); }
.app.faction-wraith   .logo::after { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.app.faction-tokra    .logo::after { clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); }
.app.faction-ori      .logo::after {
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  width: 14px; height: 14px;
  background: conic-gradient(from 0deg, #ff2d95, #ff7a00, #ffee00, #00ff95, #00ccff, #aa00ff, #ff2d95);
  box-shadow: 0 0 14px #ffffff, 0 0 26px rgba(170,0,255,0.85), 0 0 48px rgba(255,45,149,0.6);
  animation: oriLogoSpin 4s linear infinite;
}
@keyframes oriLogoSpin {
  to { transform: rotate(360deg); }
}

/* ───────── Global ambient glow — subtle faction tint on page ───────── */
body:has(.app.faction-tauri),
body:has(.app.faction-goauld),
body:has(.app.faction-anciens),
body:has(.app.faction-wraith),
body:has(.app.faction-tokra),
body:has(.app.faction-ori) {
  background-image: radial-gradient(ellipse at 50% 50%, rgba(15,30,80,0.25) 0%, transparent 70%), var(--faction-ambient, none);
}
body:has(.app.faction-tauri)   { --faction-ambient: radial-gradient(ellipse at 100% 100%, rgba(68,204,68,0.05) 0%, transparent 50%); }
body:has(.app.faction-goauld)  { --faction-ambient: radial-gradient(ellipse at 100% 100%, rgba(255,192,64,0.06) 0%, transparent 50%); }
body:has(.app.faction-anciens) { --faction-ambient: radial-gradient(ellipse at 100% 100%, rgba(0,229,255,0.06) 0%, transparent 50%); }
body:has(.app.faction-wraith)  { --faction-ambient: radial-gradient(ellipse at 100% 100%, rgba(194,102,255,0.06) 0%, transparent 50%); }
body:has(.app.faction-tokra)   { --faction-ambient: radial-gradient(ellipse at 100% 100%, rgba(255,51,51,0.05) 0%, transparent 50%); }
body:has(.app.faction-ori)     { --faction-ambient: radial-gradient(ellipse at 30% 0%, rgba(255,45,149,0.18) 0%, transparent 50%), radial-gradient(ellipse at 100% 50%, rgba(0,204,255,0.14) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(170,0,255,0.16) 0%, transparent 55%), radial-gradient(ellipse at 70% 100%, rgba(255,238,0,0.10) 0%, transparent 50%); }

/* Scrollbar tinted per faction */
.app.faction-tauri ::-webkit-scrollbar-thumb   { background:linear-gradient(180deg, #2a8a2a, var(--accent)); }
.app.faction-goauld ::-webkit-scrollbar-thumb  { background:linear-gradient(180deg, #b07000, #ffbb00); }
.app.faction-anciens ::-webkit-scrollbar-thumb { background:linear-gradient(180deg, #0088aa, var(--ancient)); }
.app.faction-wraith ::-webkit-scrollbar-thumb  { background:linear-gradient(180deg, #7733aa, #c266ff); }
.app.faction-tokra ::-webkit-scrollbar-thumb   { background:linear-gradient(180deg, #aa1a1a, #ff3333); }
.app.faction-ori ::-webkit-scrollbar-thumb     { background:linear-gradient(180deg, #ff2d95, #ff7a00 20%, #ffee00 35%, #00ff95 50%, #00ccff 65%, #aa00ff 80%, #ff2d95); box-shadow: 0 0 8px rgba(255,255,255,0.6) inset, 0 0 14px rgba(170,0,255,0.7); }

/* Reduced motion: strip decorative patterns */
@media (prefers-reduced-motion: reduce) {
  .app[class*="faction-"] { --faction-topbar-pattern: none !important; }
}

/* ───────── ASGARD — bleu plasma électrique INTENSITÉ MAX (02/06/2026) ───────── */
/* Bande topbar : dégradé plasma + shimmer animé + halo MAX, plus épaisse */
.app.faction-asgard { --faction-strip: linear-gradient(90deg, transparent 0%, #1d6fd6 12%, #3fa9ff 32%, #bfe6ff 50%, #3fa9ff 68%, #1d6fd6 88%, transparent 100%); }
.app.faction-asgard .topbar::before {
  height: 5px;
  background-size: 200% 100% !important;
  box-shadow: 0 0 20px rgba(63,169,255,1), 0 0 46px rgba(63,169,255,0.75) !important;
  animation: asgardStripShift 4.5s linear infinite;
}
@keyframes asgardStripShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Topbar pattern — lignes hologramme plasma marquées */
.app.faction-asgard {
  --faction-topbar-pattern:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(63,169,255,0.40) 18px 20px, transparent 20px 40px);
}

/* Cartes — bordure plasma + GLOW PULSANT */
.app.faction-asgard .cmd-card,
.app.faction-asgard .dist-card,
.app.faction-asgard .mission-card,
.app.faction-asgard .uc-card,
.app.faction-asgard .sc-card {
  border-radius: 8px !important;
  border: 1px solid rgba(63,169,255,0.8) !important;
  animation: asgardPulse 3s ease-in-out infinite;
}
@keyframes asgardPulse {
  0%,100% { box-shadow: inset 0 0 26px rgba(63,169,255,0.16), 0 0 14px rgba(63,169,255,0.45), 0 2px 12px var(--shade-1); }
  50%     { box-shadow: inset 0 0 44px rgba(63,169,255,0.34), 0 0 38px rgba(63,169,255,0.92), 0 2px 12px var(--shade-1); }
}

/* Cadres ressources topbar — plasma + glow (console Asgard) */
.app.faction-asgard .rb-item {
  border: 1.5px solid rgba(63,169,255,0.9) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(63,169,255,0.16) 0%, rgba(10,14,32,0.55) 100%) !important;
  box-shadow: 0 0 13px rgba(63,169,255,0.6), inset 0 0 14px rgba(63,169,255,0.16) !important;
}
.app.faction-asgard .tb-resources .rb-lbl { filter: drop-shadow(0 0 5px rgba(63,169,255,0.95)) !important; }
.app.faction-asgard .rb-sep { background: linear-gradient(180deg, transparent, #3fa9ff, transparent) !important; width: 1px !important; }

/* Section header — ligne plasma + TITRE lumineux */
.app.faction-asgard .sec-hdr::after {
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--accent) 18%, #bfe6ff 50%, var(--accent) 82%, transparent);
  box-shadow: 0 0 22px rgba(var(--accent-rgb),1), 0 0 6px rgba(var(--accent-rgb),1);
}
.app.faction-asgard .sec-hdr,
.app.faction-asgard .infra-header-title,
.app.faction-asgard .sec-title {
  text-shadow: 0 0 14px rgba(63,169,255,0.9), 0 0 4px rgba(63,169,255,0.7);
}

/* Logo + onglets/nav actifs — halo plasma */
.app.faction-asgard .logo { text-shadow: 0 0 16px rgba(63,169,255,0.95); }
.app.faction-asgard .logo::after {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 0 18px var(--accentglow), 0 0 38px rgba(var(--accent-rgb),0.85);
}
.app.faction-asgard .left-nav a.active,
.app.faction-asgard .bld-tab.active,
.app.faction-asgard .nav-tab.active {
  box-shadow: 0 0 16px rgba(63,169,255,0.6) !important;
  text-shadow: 0 0 10px rgba(63,169,255,0.95);
}

/* Ambient plasma TRÈS marqué (4 directions) */
body:has(.app.faction-asgard) {
  background-image: radial-gradient(ellipse at 50% 50%, rgba(15,30,80,0.25) 0%, transparent 70%), var(--faction-ambient, none);
}
body:has(.app.faction-asgard) {
  --faction-ambient:
    radial-gradient(ellipse at 50% 0%,   rgba(63,169,255,0.34) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 100%, rgba(63,169,255,0.26) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 45%,   rgba(29,111,214,0.20) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 45%, rgba(29,111,214,0.20) 0%, transparent 45%);
}

/* Scrollbar plasma + glow */
.app.faction-asgard ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1d6fd6, #3fa9ff 55%, #bfe6ff);
  box-shadow: 0 0 8px rgba(63,169,255,0.7) inset, 0 0 12px rgba(63,169,255,0.5);
}

/* Reduced motion : coupe les animations (shimmer + pulse) */
@media (prefers-reduced-motion: reduce) {
  .app.faction-asgard .topbar::before,
  .app.faction-asgard .cmd-card,
  .app.faction-asgard .dist-card,
  .app.faction-asgard .mission-card,
  .app.faction-asgard .uc-card,
  .app.faction-asgard .sc-card { animation: none !important; }
}