/* 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 ───────── */
/* Desktop only — mobile ≤768px conserve position:fixed pour la bottom nav */
@media (min-width:769px) {
  .app[class*="faction-"] .left-nav { position: relative; }
}
.app[class*="faction-"] .left-nav::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; }
}