/* ═══════════════════════════════════════════════════════════════════
   sgc-faction-flashy.css — Thèmes factions v4 "Flashi"
   Ajoute : watermark sigil, bordures animées, hovers distinctifs,
   formes de cartes, spinners, transitions sections.
   Désactivable en retirant le <link> dans index.html.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── 1. WATERMARK SIGIL — DÉSACTIVÉ 09/05 ─────────
   User feedback : "le gros cercle orange/vert/cyan en fond qui apparaît à chaque chargement".
   Sigil 1200x1200 fixed avec drop-shadow accent + rotation = trop visible. */
.app[class*="faction-"]::after { display: none !important; }
@keyframes sigilRotate {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
/* Assure le contenu au-dessus du sigil — préserve le z-index haut du topbar pour tooltips/notifs */
.app[class*="faction-"] > *:not(.game-stars):not(.topbar) { position: relative; z-index: 1; }
.app[class*="faction-"] > .topbar { position: relative; z-index: 200; }

/* SVG data URIs — emblèmes simplifiés (performance) */
.app.faction-tauri {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='80' fill='none' stroke='%2344cc44' stroke-width='3'/><circle cx='100' cy='100' r='60' fill='none' stroke='%2344cc44' stroke-width='2'/><path d='M100 20 L100 180 M20 100 L180 100' stroke='%2344cc44' stroke-width='2'/><text x='100' y='108' text-anchor='middle' font-family='Orbitron' font-size='32' font-weight='900' fill='%2344cc44'>SGC</text></svg>");
}
.app.faction-goauld {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon points='100,10 125,75 190,75 138,115 160,180 100,140 40,180 62,115 10,75 75,75' fill='none' stroke='%23ffbb00' stroke-width='3'/><path d='M100 50 Q115 80 100 110 Q85 80 100 50Z' fill='%23ffbb00' opacity='0.6'/><circle cx='92' cy='80' r='5' fill='%23ffbb00'/><circle cx='108' cy='80' r='5' fill='%23ffbb00'/></svg>");
}
.app.faction-anciens {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='80' fill='none' stroke='%2300e5ff' stroke-width='3'/><polygon points='100,25 115,85 175,90 125,120 145,180 100,145 55,180 75,120 25,90 85,85' fill='none' stroke='%2300e5ff' stroke-width='2'/><circle cx='100' cy='100' r='30' fill='none' stroke='%2300e5ff' stroke-width='2.5'/><circle cx='100' cy='100' r='10' fill='%2300e5ff'/></svg>");
}
.app.faction-wraith {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><ellipse cx='100' cy='85' rx='48' ry='60' fill='none' stroke='%23c266ff' stroke-width='3'/><circle cx='80' cy='75' r='8' fill='%23c266ff'/><circle cx='120' cy='75' r='8' fill='%23c266ff'/><path d='M75 110 Q100 130 125 110' fill='none' stroke='%23c266ff' stroke-width='2.5'/><path d='M80 140 L75 180 M95 145 L92 180 M105 145 L108 180 M120 140 L125 180' stroke='%23c266ff' stroke-width='2.5'/></svg>");
}
.app.faction-tokra {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon points='100,20 160,100 100,180 40,100' fill='none' stroke='%23ff3333' stroke-width='3'/><polygon points='100,50 130,100 100,150 70,100' fill='none' stroke='%23ff3333' stroke-width='2'/><circle cx='100' cy='100' r='15' fill='%23ff3333' opacity='0.6'/><line x1='100' y1='20' x2='100' y2='180' stroke='%23ff3333' stroke-width='2'/></svg>");
}
.app.faction-ori {
  --faction-sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><radialGradient id='oriFlame' cx='50%25' cy='50%25'><stop offset='0%25' stop-color='%23ffd9b8'/><stop offset='40%25' stop-color='%23ff7a00'/><stop offset='80%25' stop-color='%23c93b1e'/><stop offset='100%25' stop-color='%238b1a08'/></radialGradient></defs><circle cx='100' cy='100' r='60' fill='url(%23oriFlame)' opacity='0.55'/><circle cx='100' cy='100' r='40' fill='none' stroke='%23ffd9b8' stroke-width='3'/><g stroke='%23ffd9b8' stroke-width='3'><line x1='100' y1='10' x2='100' y2='35'/><line x1='100' y1='165' x2='100' y2='190'/><line x1='10' y1='100' x2='35' y2='100'/><line x1='165' y1='100' x2='190' y2='100'/><line x1='30' y1='30' x2='50' y2='50'/><line x1='150' y1='150' x2='170' y2='170'/><line x1='170' y1='30' x2='150' y2='50'/><line x1='50' y1='150' x2='30' y2='170'/></g></svg>");
}
.app.faction-ori::after { animation: sigilRotate 240s linear infinite !important; opacity: 0.7; }

/* ───────── 2. DÉCORS DE COINS par faction (::before/::after) ─────────
   Petits ornements dans les coins des cartes importantes, signature visuelle */
.app.faction-tauri    .cmd-card::before, .app.faction-tauri    .mission-card::before,
.app.faction-goauld   .cmd-card::before, .app.faction-goauld   .mission-card::before,
.app.faction-anciens  .cmd-card::before, .app.faction-anciens  .mission-card::before,
.app.faction-wraith   .cmd-card::before, .app.faction-wraith   .mission-card::before,
.app.faction-tokra    .cmd-card::before, .app.faction-tokra    .mission-card::before,
.app.faction-ori      .cmd-card::before, .app.faction-ori      .mission-card::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 14px; height: 14px;
  pointer-events: none;
  opacity: 0.85;
}
.app[class*="faction-"] .cmd-card, .app[class*="faction-"] .mission-card { position: relative; }

/* Tau'ri → chevrons militaires */
.app.faction-tauri .cmd-card::before, .app.faction-tauri .mission-card::before {
  background: linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  box-shadow: 0 0 6px var(--accent);
}
/* Goa'uld → triangle doré */
.app.faction-goauld .cmd-card::before, .app.faction-goauld .mission-card::before {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: #ffbb00;
  box-shadow: 0 0 8px #ffbb00;
}
/* Anciens → cercle lumineux */
.app.faction-anciens .cmd-card::before, .app.faction-anciens .mission-card::before {
  border-radius: 50%;
  background: radial-gradient(circle, var(--ancient), transparent);
  box-shadow: 0 0 10px var(--ancient);
}
/* Wraith → griffe */
.app.faction-wraith .cmd-card::before, .app.faction-wraith .mission-card::before {
  clip-path: polygon(0 0, 100% 0, 85% 30%, 100% 60%, 70% 100%, 40% 60%, 0 80%);
  background: #c266ff;
  box-shadow: 0 0 8px #c266ff;
}
/* Tok'ra → losange */
.app.faction-tokra .cmd-card::before, .app.faction-tokra .mission-card::before {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #ff3333;
  box-shadow: 0 0 8px #ff3333;
}
/* Ori → étoile 8 branches flamme (refonte 09/05 — abandon prismatique) */
.app.faction-ori .cmd-card::before, .app.faction-ori .mission-card::before {
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: radial-gradient(circle at 50% 30%, #ffd9b8 0%, #ff7a00 45%, #c93b1e 100%);
  box-shadow: 0 0 8px rgba(255,122,0,0.85), 0 0 18px rgba(201,59,30,0.55);
}

/* ───────── 3. BORDURE ANIMÉE conic sur cartes critiques ─────────
   Pour .cmd-card.active, .mission-card.hot, .dist-card.complete etc.
   Bordure gradient qui tourne. */
@property --flashyAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.app[class*="faction-"] .cmd-card.active,
.app[class*="faction-"] .mission-card.ready,
.app[class*="faction-"] .dist-card.complete {
  --flashy-c1: var(--accent);
  --flashy-c2: var(--accent2, #fff);
  position: relative;
  isolation: isolate;
}
.app[class*="faction-"] .cmd-card.active::after,
.app[class*="faction-"] .mission-card.ready::after,
.app[class*="faction-"] .dist-card.complete::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--flashyAngle), var(--flashy-c1), var(--flashy-c2), var(--flashy-c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: flashyRotate 4s linear 1;
  z-index: 2;
}
@keyframes flashyRotate { to { --flashyAngle: 360deg; } }

/* ───────── 4. HOVER distinctif par faction ───────── */
/* Tau'ri → "lock-on" militaire : léger shake + vert intense */
.app.faction-tauri .cmd-card:hover,
.app.faction-tauri .mission-card:hover,
.app.faction-tauri .og-bld-card:hover {
  animation: tauriLockOn 0.4s ease-out;
  box-shadow: 0 0 20px rgba(68,204,68,0.55), inset 0 0 15px rgba(68,204,68,0.25) !important;
}
@keyframes tauriLockOn {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-1px,-2px); }
  75%     { transform: translate(1px,-1px); }
}

/* Goa'uld → shine doré qui traverse */
.app.faction-goauld .cmd-card,
.app.faction-goauld .mission-card,
.app.faction-goauld .og-bld-card { overflow: hidden; position: relative; }
.app.faction-goauld .cmd-card::after,
.app.faction-goauld .mission-card::after,
.app.faction-goauld .og-bld-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,224,64,0.35) 50%, transparent 80%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 3;
}
.app.faction-goauld .cmd-card:hover::after,
.app.faction-goauld .mission-card:hover::after,
.app.faction-goauld .og-bld-card:hover::after { left: 150%; }

/* Anciens → halo cyan qui s'étend */
.app.faction-anciens .cmd-card:hover,
.app.faction-anciens .mission-card:hover,
.app.faction-anciens .og-bld-card:hover {
  box-shadow: 0 0 30px rgba(0,229,255,0.7), 0 0 60px rgba(0,229,255,0.3), inset 0 0 20px rgba(0,229,255,0.2) !important;
  transform: translateY(-3px) scale(1.01);
}

/* Wraith → distorsion + ombre violette */
.app.faction-wraith .cmd-card:hover,
.app.faction-wraith .mission-card:hover,
.app.faction-wraith .og-bld-card:hover {
  animation: wraithDistort 0.5s ease-out;
  box-shadow: 0 0 25px rgba(194,102,255,0.65), inset 0 0 20px rgba(194,102,255,0.15) !important;
  filter: hue-rotate(-5deg);
}
@keyframes wraithDistort {
  0%   { transform: skewX(0) translateY(0); }
  40%  { transform: skewX(-1.5deg) translateY(-3px); }
  100% { transform: skewX(0) translateY(-2px); }
}

/* Tok'ra → pulse rouge cristal */
.app.faction-tokra .cmd-card:hover,
.app.faction-tokra .mission-card:hover,
.app.faction-tokra .og-bld-card:hover {
  animation: tokraCrystalPulse 0.8s ease-out;
  box-shadow: 0 0 22px rgba(255,51,51,0.7), inset 0 0 15px rgba(255,51,51,0.2) !important;
}
@keyframes tokraCrystalPulse {
  0%   { box-shadow: 0 0 0 rgba(255,51,51,0); }
  50%  { box-shadow: 0 0 35px rgba(255,51,51,0.9); }
  100% { box-shadow: 0 0 22px rgba(255,51,51,0.7); }
}

/* Ori → flash prismatique divin */
.app.faction-ori .cmd-card:hover,
.app.faction-ori .mission-card:hover,
.app.faction-ori .og-bld-card:hover {
  animation: oriDivineFlash 0.5s ease-out;
  box-shadow: 0 0 25px rgba(255,255,255,0.85), 0 0 50px rgba(170,0,255,0.55), 0 0 80px rgba(0,204,255,0.4), 0 0 120px rgba(255,45,149,0.25), inset 0 0 20px var(--tint-9) !important;
}
@keyframes oriDivineFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.5) saturate(0.8); }
  100% { filter: brightness(1.1); }
}

/* ───────── 5. BOUTONS thémés ─────────
   Bouton principal avec clip-path faction */
.app.faction-tauri .btn-primary,
.app.faction-tauri .auth-btn:not(.lore-skip) {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.app.faction-goauld .btn-primary,
.app.faction-goauld .auth-btn:not(.lore-skip) {
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);
}
.app.faction-anciens .btn-primary,
.app.faction-anciens .auth-btn:not(.lore-skip) {
  border-radius: 20px;
}
.app.faction-wraith .btn-primary,
.app.faction-wraith .auth-btn:not(.lore-skip) {
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 6px));
}
.app.faction-tokra .btn-primary,
.app.faction-tokra .auth-btn:not(.lore-skip) {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.app.faction-ori .btn-primary,
.app.faction-ori .auth-btn:not(.lore-skip) {
  clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
}

/* ───────── 6. SPINNER custom par faction ─────────
   Remplace le .skeleton-loader générique */
.app[class*="faction-"] .loading-spinner,
.app[class*="faction-"] .sgc-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  position: relative;
}
.app.faction-tauri .loading-spinner, .app.faction-tauri .sgc-spinner {
  border: 3px solid rgba(68,204,68,0.15);
  border-top-color: var(--accent);
  animation: spinFaction 0.8s linear infinite;
  box-shadow: 0 0 15px rgba(68,204,68,0.5);
}
.app.faction-goauld .loading-spinner, .app.faction-goauld .sgc-spinner {
  border: 3px solid rgba(255,187,0,0.15);
  border-top-color: #ffbb00;
  border-right-color: #ffe040;
  animation: spinFaction 1.2s linear infinite;
  box-shadow: 0 0 15px rgba(255,187,0,0.5);
}
.app.faction-anciens .loading-spinner, .app.faction-anciens .sgc-spinner {
  border: 3px solid rgba(0,229,255,0.15);
  border-top-color: var(--ancient);
  animation: spinFaction 1s linear infinite, ancBreathe 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(0,229,255,0.6);
}
.app.faction-wraith .loading-spinner, .app.faction-wraith .sgc-spinner {
  border: 3px dashed #c266ff;
  animation: spinFaction 1.5s linear infinite;
  box-shadow: 0 0 18px rgba(194,102,255,0.6);
}
.app.faction-tokra .loading-spinner, .app.faction-tokra .sgc-spinner {
  border: 3px solid rgba(255,51,51,0.15);
  border-top-color: #ff3333;
  border-bottom-color: #ff6655;
  animation: spinFaction 0.9s linear infinite;
  box-shadow: 0 0 16px rgba(255,51,51,0.55);
}
.app.faction-ori .loading-spinner, .app.faction-ori .sgc-spinner {
  border: 3px solid transparent;
  border-top-color: #ffd9b8;
  border-right-color: #ff7a00;
  border-bottom-color: #c93b1e;
  border-left-color: #ff7a00;
  animation: spinFaction 1s linear infinite;
  box-shadow: 0 0 14px rgba(255,122,0,0.6), 0 0 28px rgba(201,59,30,0.4);
}
@keyframes spinFaction { to { transform: rotate(360deg); } }
@keyframes ancBreathe {
  0%,100% { box-shadow: 0 0 20px rgba(0,229,255,0.6); }
  50%     { box-shadow: 0 0 35px rgba(0,229,255,0.9); }
}

/* ───────── 7. EN-TÊTE SECTION décoré ─────────
   Ornements flottants dans la barre de titre */
.app[class*="faction-"] .sec-hdr {
  overflow: hidden;
  position: relative;
}
.app[class*="faction-"] .sec-hdr::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 10%; width: 40px;
  background-image: var(--faction-hdr-deco, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
  animation: hdrDecoFloat 6s ease-in-out 1;
}
@keyframes hdrDecoFloat {
  0%,100% { transform: translateY(0) rotate(0); opacity: 0.25; }
  50%     { transform: translateY(-4px) rotate(5deg); opacity: 0.45; }
}
.app.faction-tauri    { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='20,5 25,20 20,15 15,20' fill='%2344cc44'/><polygon points='20,35 25,20 20,25 15,20' fill='%2344cc44'/></svg>"); }
.app.faction-goauld   { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 5 Q25 15 20 25 Q15 15 20 5Z' fill='%23ffbb00'/><circle cx='17' cy='15' r='2' fill='%23ffbb00'/><circle cx='23' cy='15' r='2' fill='%23ffbb00'/></svg>"); }
.app.faction-anciens  { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='12' fill='none' stroke='%2300e5ff' stroke-width='2'/><circle cx='20' cy='20' r='4' fill='%2300e5ff'/></svg>"); }
.app.faction-wraith   { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M10 10 Q20 5 30 10 L28 30 Q20 35 12 30Z' fill='none' stroke='%23c266ff' stroke-width='2'/></svg>"); }
.app.faction-tokra    { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='20,5 30,20 20,35 10,20' fill='none' stroke='%23ff3333' stroke-width='2'/><line x1='20' y1='5' x2='20' y2='35' stroke='%23ff3333' stroke-width='1.5'/></svg>"); }
.app.faction-ori      { --faction-hdr-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='hdg' cx='50%25' cy='50%25'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='50%25' stop-color='%2300ccff'/><stop offset='100%25' stop-color='%23aa00ff'/></radialGradient></defs><g stroke='%23ffffff' stroke-width='2'><line x1='20' y1='5' x2='20' y2='35'/><line x1='5' y1='20' x2='35' y2='20'/><line x1='9' y1='9' x2='31' y2='31'/><line x1='31' y1='9' x2='9' y2='31'/></g><circle cx='20' cy='20' r='6' fill='url(%23hdg)'/></svg>"); }

/* ───────── 8. TRANSITIONS entre sections — wipe faction ───────── */
.app[class*="faction-"] .sec-full.sec-entering {
  animation: sectionEnterFlashy 0.5s ease-out;
}
@keyframes sectionEnterFlashy {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(4px) brightness(1.3); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0) brightness(1); }
}

/* ───────── 9. CONFETTI burst — utility .flashy-burst ─────────
   Appelable depuis JS : element.classList.add('flashy-burst') */
.flashy-burst {
  position: relative;
}
.flashy-burst::before,
.flashy-burst::after {
  content: '';
  position: absolute;
  inset: -10px;
  background-image: radial-gradient(circle, var(--accent, #fff) 2px, transparent 3px);
  background-size: 20px 20px;
  pointer-events: none;
  animation: flashyBurst 0.8s ease-out forwards;
  z-index: 10;
}
.flashy-burst::after { animation-delay: 0.1s; background-size: 28px 28px; }
@keyframes flashyBurst {
  0%   { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}

/* ───────── 10. PARTICLES CANVAS — réservé par JS ─────────
   mix-blend-mode:screen est très cher pour le compositeur (force un repaint
   de tout le contenu sous le canvas plein-écran à chaque frame). Audit perf
   01/05/2026 : retiré pour passer en simple opacity (économie ~15% CPU sur PC). */
#factionParticles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  /* mix-blend-mode: screen retiré — était responsable d'un repaint full screen/frame */
}

/* ───────── A11y : respecte prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .app[class*="faction-"]::after,
  .app.faction-ori .cmd-card::before,
  .app[class*="faction-"] .cmd-card.active::after,
  .app[class*="faction-"] .mission-card.ready::after,
  .app[class*="faction-"] .dist-card.complete::after,
  .app[class*="faction-"] .loading-spinner,
  .app[class*="faction-"] .sec-hdr::before,
  .app[class*="faction-"] .sec-full.sec-entering,
  .flashy-burst::before, .flashy-burst::after {
    animation: none !important;
  }
  #factionParticles { display: none; }
}