/*
 * Forja do Mago — Meus Selos
 * AAA Relic Hall Aesthetic v7.0
 * Vibe: “menu de coleção AAA” + “relicário arcano” + “foil TCG premium”
 *
 * ESCOPO: .fs-page (wrapper injetado pelo PHP)
 * Isolamento total via all:initial.
 */

/* ── FONTES (épica + UI limpa) ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── RESET NUCLEAR + TOKENS ─────────────────────────────────────────────── */
.woocommerce-MyAccount-content .fs-page,
.fs-page{
  all: initial;
  display: block;
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 64px;
  overflow: hidden;
  isolation: isolate;

  /* Paleta base (mais “AAA”, menos “estranho”) */
  --bg0: #05060a;
  --bg1: #070816;
  --bg2: #090a12;
  --ink: #0b0c10;

  --parchment: #efe6cf;
  --parchment-dim: rgba(239,230,207,.58);

  --gold: #c9a44d;
  --gold-bright: #ffd77a;
  --gold-dim: rgba(201,164,77,.30);

  /* “Arcano” (glow roxo/azul, mais premium) */
  --arc: #8b5cf6;
  --arc2:#22d3ee;
  --arc-dim: rgba(139,92,246,.18);
  --aqua-dim: rgba(34,211,238,.14);

  /* UI */
  --font-epic: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius: 14px;
  --radius-card: 16px;
  --ease: cubic-bezier(.22,.85,.22,1);

  /* Tier color (sobrescrito inline pelo PHP) */
  --tc: #8b5cf6;

  /* Universo color (sobrescrito inline pelo PHP) */
  --uc: var(--gold);

  /* Sombras “AAA” */
  --shadow-deep: 0 22px 80px rgba(0,0,0,.65);
  --shadow-card: 0 18px 55px rgba(0,0,0,.55);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -30px 80px rgba(0,0,0,.55);
}

/* Herança universal dentro do wrapper */
.fs-page *,
.fs-page *::before,
.fs-page *::after{ box-sizing: border-box; }

/* ── FUNDO AAA (parallax + vinheta + runas) ──────────────────────────────── */
.fs-page{
  color: var(--parchment);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(139,92,246,.22) 0%, transparent 55%),
    radial-gradient(900px 550px at 90% 5%, rgba(34,211,238,.16) 0%, transparent 50%),
    radial-gradient(900px 650px at 55% 110%, rgba(201,164,77,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  border-radius: 12px;
  box-shadow: var(--shadow-deep);
  border: 1px solid rgba(255,255,255,.06);
}

/* Vinheta + “poeira” */
.fs-page::before{
  content:'';
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 900px at 50% 20%, transparent 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.80) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
  opacity:.85;
}

/* “Névoa” arcana animada (leve e elegante) */
.fs-page::after{
  content:'';
  position:absolute;
  inset:-30% -30%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(closest-side at 70% 55%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(closest-side at 55% 80%, rgba(201,164,77,.08), transparent 62%);
  filter: blur(30px);
  opacity:.55;
  transform: translate3d(0,0,0);
  animation: fs-mist 14s var(--ease) infinite alternate;
}
@keyframes fs-mist{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg); }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.06) rotate(1deg); }
}

/* Canvas de partículas (se existir) */
.fs-particles{
  position:absolute;
  inset:0;
  height:420px;
  pointer-events:none;
  z-index:1;
  opacity:.35;
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — “RELICÁRIO” AAA
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-hero{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding: 46px 48px 42px;
  margin:0;

  background:
    radial-gradient(900px 380px at 18% 0%, rgba(255,215,122,.10) 0%, transparent 65%),
    radial-gradient(900px 420px at 85% 10%, rgba(139,92,246,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-inset);
  overflow:hidden;
}

/* Moldura superior com “filigrana” */
.fs-page .fs-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,215,122,.18), transparent) 0 0/100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(139,92,246,.16), transparent) 0 100%/100% 1px no-repeat,
    radial-gradient(900px 260px at 50% 0%, rgba(0,0,0,.60) 0%, transparent 60%);
  opacity:.95;
}

/* Runas “fantasma” (melhor equilíbrio) */
.fs-page .fs-hero__runes{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  pointer-events:none;
  user-select:none;
  margin:0; padding:0; list-style:none;
  opacity:.6;
}
.fs-page .fs-hero__runes span{
  font-family: var(--font-epic);
  font-size: 84px;
  color: rgba(255,215,122,.06);
  text-shadow: 0 0 30px rgba(139,92,246,.14);
  animation: fs-rune-float 11s ease-in-out infinite;
  will-change: transform;
  filter: blur(.2px);
}
.fs-page .fs-hero__runes span:nth-child(2){ color: rgba(139,92,246,.05); animation-duration:13s; }
.fs-page .fs-hero__runes span:nth-child(3){ color: rgba(34,211,238,.05); animation-duration:12s; }
.fs-page .fs-hero__runes span:nth-child(4){ animation-duration:14s; }
.fs-page .fs-hero__runes span:nth-child(5){ animation-duration:12.5s; }
.fs-page .fs-hero__runes span:nth-child(6){ animation-duration:15s; }
@keyframes fs-rune-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  35%{ transform: translateY(-14px) rotate(4deg); }
  70%{ transform: translateY(8px) rotate(-3deg); }
}

/* Avatar + Anel (mais “relicário”, menos “flat”) */
.fs-page .fs-hero__av-wrap{ position:relative; flex-shrink:0; z-index:2; }
.fs-page .fs-hero__av-ring{
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 10%,
      rgba(255,215,122,.55) 10% 18%,
      rgba(139,92,246,.55) 18% 30%,
      transparent 30% 42%,
      rgba(34,211,238,.45) 42% 55%,
      transparent 55% 72%,
      rgba(255,215,122,.45) 72% 85%,
      transparent 85% 100%);
  filter: drop-shadow(0 0 18px rgba(255,215,122,.25)) drop-shadow(0 0 26px rgba(139,92,246,.18));
  animation: fs-ring-spin 7.5s linear infinite;
  opacity:.95;
}
.fs-page .fs-hero__av-ring::after{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), rgba(0,0,0,.70));
  border: 1px solid rgba(255,255,255,.07);
}
@keyframes fs-ring-spin{ to{ transform: rotate(360deg); } }

.fs-page .fs-hero__av{
  position:relative;
  z-index:1;
  width: 104px;
  height: 104px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 35% 30%, rgba(255,215,122,.18), transparent 52%),
    radial-gradient(circle at 70% 75%, rgba(139,92,246,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.50));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 14px 40px rgba(0,0,0,.70),
    0 0 0 6px rgba(255,215,122,.07);
}
.fs-page .fs-hero__av-emoji{ font-size: 48px; line-height:1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); }

.fs-page .fs-hero__tier-chip{
  position:absolute;
  bottom:-12px;
  left:50%;
  transform:translateX(-50%);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;

  color: rgba(10,10,14,.92);
  background:
    linear-gradient(135deg, rgba(255,215,122,.95), rgba(201,164,77,.85));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px rgba(255,215,122,.20);
}

/* Conteúdo */
.fs-page .fs-hero__content{ flex:1; min-width: 250px; z-index:2; }
.fs-page .fs-hero__greeting{
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--parchment-dim);
  margin: 0 0 12px;
  line-height: 1.55;
}
.fs-page .fs-hero__greeting strong{ color: var(--parchment); font-weight: 600; }

.fs-page .fs-hero__title-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

/* Lvl chip (mais “HUD AAA”) */
.fs-page .fs-hero__lvl-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 12px;
  background:
    radial-gradient(120px 80px at 20% 20%, rgba(255,215,122,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,215,122,.10);
}
.fs-page .fs-hero__lvl-lbl{
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255,215,122,.70);
  text-transform: uppercase;
}
.fs-page .fs-hero__lvl-num{
  font-family: var(--font-epic);
  font-size: 28px;
  font-weight: 900;
  color: var(--gold-bright);
  line-height: 1;
  text-shadow: 0 0 26px rgba(255,215,122,.35), 2px 2px 6px rgba(0,0,0,.75);
}

.fs-page .fs-hero__title{
  font-family: var(--font-epic);
  font-size: clamp(18px, 2.7vw, 30px);
  font-weight: 800;
  margin: 0;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(139,92,246,.14), 2px 2px 10px rgba(0,0,0,.75);
}

/* XP Bar (mais “energia arcana”) */
.fs-page .fs-xp{ display:block; }
.fs-page .fs-xp__bar{
  position:relative;
  height: 14px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.60);
}
.fs-page .fs-xp__fill{
  position:absolute; inset:0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,215,122,.55), rgba(139,92,246,.70), rgba(34,211,238,.55));
  box-shadow: 0 0 26px rgba(139,92,246,.22), 0 0 20px rgba(255,215,122,.18);
}
.fs-page .fs-xp__shimmer{
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.35) 50%, transparent 65% 100%);
  transform: translateX(-120%);
  animation: fs-shimmer 3.8s ease-in-out infinite 1.8s;
  opacity:.35;
  mix-blend-mode: screen;
}
@keyframes fs-shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}
.fs-page .fs-xp__labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--parchment-dim);
}
.fs-page .fs-xp__current{ color: var(--gold-bright); font-weight: 700; }
.fs-page .fs-xp__pct{ font-size: 10px; opacity:.7; }

/* Stats (cartão HUD com glow sutil) */
.fs-page .fs-hero__stats{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
  padding: 18px 22px;
  border-radius: 16px;

  background:
    radial-gradient(220px 120px at 20% 0%, rgba(255,215,122,.12), transparent 55%),
    radial-gradient(220px 120px at 80% 20%, rgba(139,92,246,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,215,122,.08);
}
.fs-page .fs-stat{ text-align:center; display:block; min-width: 88px; }
.fs-page .fs-stat__val{
  display:block;
  font-family: var(--font-epic);
  font-size: 28px;
  font-weight: 800;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(255,215,122,.25), 2px 2px 6px rgba(0,0,0,.75);
  line-height: 1;
}
.fs-page .fs-stat__lbl{
  display:block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,230,207,.55);
}
.fs-page .fs-stat__div{
  width:1px;
  height: 42px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.14), transparent);
  opacity:.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEÇÃO MUNDOS
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-worlds{
  position:relative;
  z-index:2;
  padding: 46px 48px 0;
}
.fs-page .fs-worlds__header{
  text-align:center;
  margin-bottom: 34px;
}
.fs-page .fs-worlds__header::before{
  content: '⟡ ⟡ ⟡';
  display:block;
  font-family: var(--font-epic);
  color: rgba(255,215,122,.35);
  letter-spacing: .6em;
  margin-bottom: 12px;
  text-shadow: 0 0 18px rgba(139,92,246,.16);
}
.fs-page .fs-worlds__title{
  margin:0 0 10px;
  font-family: var(--font-epic);
  font-size: clamp(22px, 3.1vw, 30px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 0 32px rgba(139,92,246,.16), 2px 2px 10px rgba(0,0,0,.75);
}
.fs-page .fs-worlds__sub{
  margin:0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(239,230,207,.62);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID + ENTRADA CINEMATOGRÁFICA
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin:0;
  padding:0;
  list-style:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD — “RELIC CARD” AAA + FOIL
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-card{
  position:relative;
  border-radius: var(--radius-card);
  overflow:hidden;
  cursor: default;
  display:block;

  background:
    radial-gradient(700px 380px at 30% 0%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(620px 360px at 80% 18%, rgba(139,92,246,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.45)),
    linear-gradient(135deg, rgba(10,12,20,.85), rgba(6,7,12,.95));

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-card);
  transform: translateY(26px) scale(.985);
  opacity: 0;

  transition:
    transform .65s var(--ease),
    opacity .65s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease),
    filter .45s var(--ease);
}

/* Entrada (você já injeta a classe --in) */
.fs-page .fs-card.fs-card--in{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Borda interna “vidro” */
.fs-page .fs-card::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-card) - 1px);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:0;
}

/* Faixa universo — agora vira “lâmina de energia” */
.fs-page .fs-card::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width: 6px;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.10),
      var(--uc, var(--gold)) 35%,
      transparent 90%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--uc, var(--gold)) 60%, transparent);
  opacity:.9;
  z-index:1;
}

/* Glow interno */
.fs-page .fs-card__glow{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  opacity: .0;
  transition: opacity .45s var(--ease);
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(255,215,122,.14), transparent 60%),
    radial-gradient(560px 260px at 85% 10%, rgba(139,92,246,.18), transparent 62%),
    radial-gradient(420px 240px at 60% 120%, rgba(34,211,238,.12), transparent 60%);
  mix-blend-mode: screen;
}

/* Foil / Holographic layer (hover premium) */
.fs-page .fs-card .fs-card__foil{
  position:absolute;
  inset:-40%;
  z-index:0;
  pointer-events:none;
  opacity: 0;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,215,122,.22),
      rgba(139,92,246,.18),
      rgba(34,211,238,.16),
      rgba(255,255,255,.10),
      rgba(255,215,122,.22));
  filter: blur(16px);
  transform: translate3d(-8%, -6%, 0) rotate(10deg);
  transition: opacity .45s var(--ease), transform .65s var(--ease);
  mix-blend-mode: screen;
}

/* Fallback: quando o JS marcar que faltam camadas, garantimos visuais */
.fs-page .fs-card.is-no-foil .fs-card__foil { display: none !important; }
.fs-page .fs-card.is-no-foil .fs-card__glow { opacity: .75; }
.fs-page .fs-card::selection{ background: rgba(255,215,122,.18); }

/* Hover “colecionável” */
@media (hover:hover){
  .fs-page .fs-card:hover{
    transform: translateY(-10px) scale(1.018);
    border-color: rgba(255,215,122,.26);
    box-shadow:
      0 28px 80px rgba(0,0,0,.70),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 40px rgba(139,92,246,.16),
      0 0 30px rgba(255,215,122,.12);
    filter: saturate(1.06) contrast(1.02);
  }
  .fs-page .fs-card:hover .fs-card__glow{ opacity: 1; }
  .fs-page .fs-card:hover .fs-card__foil{ opacity: .55; transform: translate3d(6%, 8%, 0) rotate(-6deg); }
  .fs-page .fs-card:hover .fs-card__icon{ transform: translateY(-1px) scale(1.18) rotate(-6deg); }
  .fs-page .fs-card:hover .fs-card__name{ color: var(--gold-bright); }
}
.fs-page .fs-card:active{ transform: translateY(-4px) scale(1.01); }

/* Card Mestre — aura permanente */
.fs-page .fs-card.fs-card--master{
  border-color: rgba(255,215,122,.30);
  box-shadow:
    0 24px 75px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,215,122,.12),
    0 0 55px rgba(255,215,122,.14),
    0 0 55px rgba(139,92,246,.12);
}
.fs-page .fs-card.fs-card--master .fs-card__glow{ opacity:.55; }

/* ── BADGE DE MAESTRIA (mais “relic”) ─────────────────────────── */
.fs-page .fs-card__badge{
  position:absolute;
  top: -6px;
  right: 10px;
  z-index: 5;
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,215,122,.30));
  animation: fs-badge-pulse 3.1s ease-in-out infinite;
}
@keyframes fs-badge-pulse{
  0%,100%{ transform: translateY(0) scale(1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,215,122,.25)); }
  50%{ transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 12px 20px rgba(0,0,0,.60)) drop-shadow(0 0 22px rgba(255,215,122,.40)); }
}

/* ── HEAD ───────────────────────────────────────────────────── */
.fs-page .fs-card__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 20px 18px 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fs-page .fs-card.fs-card--master .fs-card__head{ padding-right: 68px; }

.fs-page .fs-card__icon-wrap{
  width: 56px;
  height: 56px;
  border-radius: 14px;

  background:
    radial-gradient(70px 50px at 30% 20%, rgba(255,215,122,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.45));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,215,122,.08);

  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.fs-page .fs-card__icon{
  font-size: 30px;
  line-height:1;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
  transition: transform .45s var(--ease);
}

.fs-page .fs-card__head-info{ flex:1; min-width:0; }
.fs-page .fs-card__name{
  margin:0 0 6px;
  font-family: var(--font-epic);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,215,122,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 18px rgba(139,92,246,.10), 2px 2px 8px rgba(0,0,0,.75);
  transition: color .35s var(--ease);
}
.fs-page .fs-card__count{
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(239,230,207,.62);
}
.fs-page .fs-card__count-num{
  color: var(--gold-bright);
  font-weight: 800;
}

/* ── PROGRESS ───────────────────────────────────────────────── */
.fs-page .fs-card__prog{
  position:relative;
  z-index:2;
  padding: 14px 22px 12px;
}
.fs-page .fs-card__prog-bar{
  height: 7px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 6px 16px rgba(0,0,0,.60);
}
.fs-page .fs-card__prog-fill{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--uc, var(--gold)) 65%, rgba(255,255,255,.18)),
    rgba(139,92,246,.72),
    rgba(34,211,238,.55));
  box-shadow: 0 0 18px rgba(139,92,246,.16), 0 0 18px color-mix(in srgb, var(--uc, var(--gold)) 50%, transparent);
  transition: width 1.25s ease .45s;
}
.fs-page .fs-card__prog-hint{
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(239,230,207,.60);
  font-style: italic;
}
.fs-page .fs-card.fs-card--master .fs-card__prog-hint{
  color: rgba(255,215,122,.92);
  font-weight: 600;
  font-style: normal;
}

/* ── SEPARADOR ──────────────────────────────────────────────── */
.fs-page .fs-card__sep{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 18px;
  margin: 10px 0 12px;
  opacity:.85;
}
.fs-page .fs-card__sep::before,
.fs-page .fs-card__sep::after{
  content:'';
  flex:1;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.16),
    transparent);
}
.fs-page .fs-card__sep span{
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,215,122,.45);
}

/* ── LISTA ─────────────────────────────────────────────────── */
.fs-page .fs-card__chars{
  position:relative;
  z-index:2;
  margin:0;
  padding: 0 18px 16px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 7px;
}
.fs-page .fs-char{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 12px;

  background:
    radial-gradient(220px 80px at 20% 0%, rgba(255,215,122,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
@media (hover:hover){
  .fs-page .fs-char:hover{
    transform: translateY(-2px);
    border-color: rgba(255,215,122,.18);
    background:
      radial-gradient(220px 80px at 20% 0%, rgba(139,92,246,.14), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32));
  }
}
.fs-page .fs-char__name{
  flex:1;
  min-width:0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(239,230,207,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pips viram “gemas” */
.fs-page .fs-char__pips{ display:flex; gap:5px; flex-shrink:0; }
.fs-page .fs-char__pip{
  width: 8px;
  height: 8px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.fs-page .fs-char__pip.fs-char__pip--on{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.50), transparent 48%),
    linear-gradient(135deg, rgba(255,215,122,.95), rgba(139,92,246,.55));
  border-color: rgba(255,215,122,.35);
  box-shadow: 0 0 14px rgba(139,92,246,.18), 0 0 10px rgba(255,215,122,.16);
}
.fs-page .fs-char__n{
  font-family: var(--font-epic);
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-bright);
  min-width: 20px;
  text-align: right;
  text-shadow: 0 0 14px rgba(255,215,122,.18), 2px 2px 6px rgba(0,0,0,.75);
}

/* ── FOOT ──────────────────────────────────────────────────── */
.fs-page .fs-card__foot{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 18px 18px;
  opacity:.9;
}
.fs-page .fs-card__foot-line{
  flex:1;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.fs-page .fs-card__foot-rune{
  font-family: var(--font-epic);
  font-size: 10px;
  letter-spacing: .35em;
  color: rgba(239,230,207,.30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS ELEMENTAIS — Implementação AAA completa
   ═══════════════════════════════════════════════════════════════════════════

   ARQUITETURA:
   ─ Cada tema sobrescreve as Custom Properties do card via escopo.
   ─ Pseudo-elementos ::before e ::after são reutilizados para camadas de efeito.
   ─ Todos os efeitos são CSS puro — zero imagens externas.
   ─ Classes são aplicadas pelo PHP (data-theme) + garantia JS (applyThemeParticleColors).

   HIERARQUIA DE Z-INDEX INTERNA AO CARD:
     ::before  z-0   fundo/textura
     ::after   z-1   camada de efeito animado (neblina, sheen, calor)
     .fs-card__glow  z-3   bloom de borda (posicionado absolutamente)
     conteúdo  z-2+  fica acima dos pseudo-elementos

   IMPORTANTE: .fs-card--theme-default herda TUDO do estilo base — sem regras extras.

   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TEMA DEFAULT (franquias de IP — herda 100% do base) ────────────────── */
.fs-page .fs-card--theme-default{ /* herda tudo do estilo base — intencionalmente vazio */ }

/* ─────────────────────────────────────────────────────────────────────────
 /* ─────────────────────────────────────────────────────────────────────────
   TEMA SILVER — Aço espelhado · Armadura forjada · Arcano · Guilda de Heróis
   Requisitos:
   - Sem :has()
   - Textura (brushed + hammered + engraving)
   - Runas (padrão sutil) + “ritual ring”
   - Blade sweep (lâmina) + glints (estalos)
   ───────────────────────────────────────────────────────────────────────── */

.fs-page .fs-card--theme-silver{
  --uc: #a9c1d8;                 /* cor principal do universo */
  --silver-ice: rgba(210,235,255,.22);
  --silver-steel: rgba(155,190,235,.18);
  --silver-deep: rgba(14,18,30,.96);
  --silver-mid: rgba(28,38,60,.92);

  position: relative;
  overflow: hidden;

  border-color: rgba(190,225,255,.30);
  box-shadow:
    0 18px 60px rgba(0,0,0,.70),
    0 0 0 1px rgba(220,245,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12);

  /* Fundo “armadura”: metal + céu frio + profundidade */
  background:
    radial-gradient(820px 420px at 25% -10%, rgba(240,252,255,.18), transparent 62%),
    radial-gradient(620px 360px at 88% 12%, rgba(160,205,255,.14), transparent 60%),
    radial-gradient(540px 320px at 60% 120%, rgba(120,170,230,.10), transparent 55%),
    linear-gradient(160deg,
      rgba(235,250,255,.06) 0%,
      rgba(180,220,255,.06) 18%,
      rgba(95,135,185,.08) 48%,
      rgba(35,50,80,.10) 78%,
      rgba(15,18,30,.16) 100%),
    linear-gradient(135deg, var(--silver-mid) 0%, var(--silver-deep) 100%);
}

/* ── TEXTURA: brushed + hammered + engraving + micro-noise ────────────── */
.fs-page .fs-card--theme-silver::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events:none;
  z-index:0;

  background:
    /* Brushed lines (aço escovado fininho) */
    repeating-linear-gradient(
      172deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 2px,
      rgba(220,245,255,.050) 2px,
      rgba(220,245,255,.050) 3px
    ),

    /* Hammered dents (martelado sutil) */
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 46% 62%, rgba(0,0,0,.10), transparent 42%),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.10), transparent 46%),

    /* Engraving (gravação ornamental — lembra escudos) */
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.00) 0 18px,
      rgba(255,255,255,.030) 18px 19px,
      rgba(0,0,0,.00) 19px 36px
    ),

    /* Micro-noise fake */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 6px,
      rgba(255,255,255,.012) 6px,
      rgba(255,255,255,.012) 7px
    );

  border: 1px solid rgba(255,255,255,.09);
  mix-blend-mode: overlay;
  opacity: .95;
}

/* ── BLADE SWEEP: reflexo de lâmina (automático) ─────────────────────── */
.fs-page .fs-card--theme-silver::after{
  content:'';
  position:absolute;
  inset:-18% -28%;
  pointer-events:none;
  z-index:1;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 34%,
      rgba(255,255,255,.06) 40%,
      rgba(235,250,255,.22) 47%,
      rgba(190,225,255,.18) 54%,
      rgba(255,255,255,.05) 60%,
      transparent 66%,
      transparent 100%
    );

  mix-blend-mode: screen;
  opacity: .80;
  transform: translateX(-82%) rotate(0.001deg);
  animation: fs-silver-blade 5.6s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform, opacity;
}

@keyframes fs-silver-blade{
  0%   { transform: translateX(-92%); opacity:.55; }
  45%  { opacity:1; }
  100% { transform: translateX(92%); opacity:.55; }
}

/* ── Glow do tema (frio/celestial) ───────────────────────────────────── */
.fs-page .fs-card--theme-silver .fs-card__glow{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(ellipse at 30% -10%,
      rgba(210,235,255,.46) 0%,
      rgba(120,170,230,.24) 34%,
      transparent 70%),
    radial-gradient(ellipse at 82% 118%,
      rgba(170,210,255,.28) 0%,
      transparent 58%),
    radial-gradient(closest-side at 55% 55%,
      rgba(255,255,255,.08),
      transparent 66%);

  mix-blend-mode: screen;
  opacity: .55;
  animation: fs-silver-aura 3.2s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes fs-silver-aura{
  0%   { opacity:.45; transform: translate3d(-0.6%,0.3%,0) scale(1.01); }
  100% { opacity:.85; transform: translate3d(0.6%,-0.3%,0) scale(1.03); }
}

/* ── Glints: estalos de brilho metálico ───────────────────────────────── */
.fs-page .fs-card--theme-silver .fs-card__glow::after{
  content:'';
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 18%, rgba(220,245,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 62%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(200,230,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 46%, rgba(255,255,255,.10) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: fs-silver-glints 2.7s ease-in-out infinite;
}

@keyframes fs-silver-glints{
  0%,100% { opacity:0; transform: translate3d(-2%,0,0); }
  45%     { opacity:.65; }
  60%     { opacity:.18; transform: translate3d(2%,0,0); }
}

/* ── RUNAS + “RITUAL RING” (guilda arcana) ───────────────────────────── */
.fs-page .fs-card--theme-silver .fs-card__runes{
  position:absolute;
  inset:-18%;
  pointer-events:none;
  z-index:1;
  opacity: .0;
  transform: translate3d(0,0,0) rotate(0.001deg);
  will-change: transform, opacity;
  mix-blend-mode: screen;

  /* As “runas” são um padrão geométrico (sem imagem externa) */
  background:
    /* anel ritual */
    radial-gradient(circle at 62% 58%,
      rgba(220,245,255,.00) 0 34%,
      rgba(220,245,255,.10) 34% 35%,
      rgba(220,245,255,.00) 35% 43%,
      rgba(180,220,255,.06) 43% 44%,
      rgba(0,0,0,0) 44%),
    /* padrão rúnico (linhas + cruzes) */
    repeating-linear-gradient(0deg,
      rgba(220,245,255,.00) 0 16px,
      rgba(220,245,255,.045) 16px 17px,
      rgba(220,245,255,.00) 17px 32px),
    repeating-linear-gradient(90deg,
      rgba(220,245,255,.00) 0 22px,
      rgba(220,245,255,.040) 22px 23px,
      rgba(220,245,255,.00) 23px 44px);

  filter: blur(.2px);
  transition: opacity .45s cubic-bezier(.22,.85,.22,1);
}

.fs-page .fs-card--theme-silver.is-arcane .fs-card__runes{
  opacity: .55;
  animation: fs-silver-rune-spin 9.5s linear infinite;
}

@keyframes fs-silver-rune-spin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Foil: holografia “cristal de aço” ───────────────────────────────── */
.fs-page .fs-card--theme-silver .fs-card__foil{
  position:absolute;
  inset:-45%;
  pointer-events:none;
  z-index:0;

  opacity: .0;
  background:
    conic-gradient(from 200deg at 50% 50%,
      rgba(255,255,255,.08),
      rgba(200,230,255,.16),
      rgba(160,205,255,.12),
      rgba(255,255,255,.06),
      rgba(200,230,255,.14),
      rgba(255,255,255,.08));
  filter: blur(16px);
  transform: translate3d(var(--fx, -8%), var(--fy, -6%), 0) rotate(var(--fr, 10deg));
  mix-blend-mode: screen;

  transition: opacity .45s cubic-bezier(.22,.85,.22,1);
}

/* Spotlight do mouse (se você usar) */
.fs-page .fs-card--theme-silver .fs-card__spot{
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index:1;
  opacity:0;

  background:
    radial-gradient(260px 260px at var(--mx, 50%) var(--my, 30%),
      rgba(255,255,255,.14),
      rgba(160,205,255,.12) 35%,
      transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .35s cubic-bezier(.22,.85,.22,1);
}

/* Beam controlado via JS (burst épico) */
.fs-page .fs-card--theme-silver .fs-card__beam{
  position:absolute;
  inset:-18% -22%;
  pointer-events:none;
  z-index:3;
  opacity: 0;
  transform: translateX(-55%) rotate(10deg);
  mix-blend-mode: screen;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.00) 38%,
      rgba(255,255,255,0.16) 46%,
      rgba(180,220,255,0.22) 50%,
      rgba(255,255,255,0.12) 54%,
      rgba(255,255,255,0.00) 66%,
      transparent 100%);
}

.fs-page .fs-card--theme-silver.is-beaming .fs-card__beam{
  opacity: 1;
  animation: fs-silver-beam 820ms cubic-bezier(.22,.85,.22,1) both;
}

@keyframes fs-silver-beam{
  0%   { transform: translateX(-65%) rotate(10deg); opacity: 0; }
  12%  { opacity: .95; }
  60%  { opacity: .75; }
  100% { transform: translateX(65%) rotate(10deg); opacity: 0; }
}

/* Hover: vira “relic card” */
@media (hover:hover){
  .fs-page .fs-card--theme-silver:hover{
    border-color: rgba(220,245,255,.55);
    box-shadow:
      0 30px 90px rgba(0,0,0,.75),
      0 0 0 1px rgba(220,245,255,.18),
      0 0 55px rgba(175,220,255,.22),
      0 0 22px rgba(140,190,255,.18);
  }
  .fs-page .fs-card--theme-silver:hover .fs-card__spot{ opacity:1; }
  .fs-page .fs-card--theme-silver:hover .fs-card__foil{ opacity:.58; }
  .fs-page .fs-card--theme-silver:hover .fs-card__glow{ opacity:.90; }
  .fs-page .fs-card--theme-silver:hover .fs-card__runes{ opacity:.62; }
}

/* Master Silver: ainda mais “guilda” */
.fs-page .fs-card--theme-silver.fs-card--master{
  box-shadow:
    0 26px 92px rgba(0,0,0,.72),
    0 0 0 1px rgba(220,245,255,.20),
    0 0 80px rgba(175,220,255,.24),
    0 0 48px rgba(140,190,255,.18);
}

/* Pip gem */
.fs-page .fs-card--theme-silver .fs-char__pip--on{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.70), transparent 50%),
    linear-gradient(135deg, rgba(235,250,255,.95), rgba(145,185,235,.72));
  border-color: rgba(220,245,255,.55);
  box-shadow: 0 0 12px rgba(175,220,255,.34), 0 0 8px rgba(220,245,255,.20);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card--theme-silver::after,
  .fs-page .fs-card--theme-silver .fs-card__glow,
  .fs-page .fs-card--theme-silver .fs-card__glow::after,
  .fs-page .fs-card--theme-silver.is-arcane .fs-card__runes{
    animation: none !important;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   TEMA SHADOW — Obsidiana · Necromancia · Neblina asfixiante
   ───────────────────────────────────────────────────────────────────────── */
.fs-page .fs-card--theme-shadow{
  --uc: #9b59ff;

  background:
    radial-gradient(600px 350px at 25% -5%,  rgba(100,60,180,.22), transparent 55%),
    radial-gradient(500px 300px at 80% 20%,  rgba(60,20,120,.18),  transparent 58%),
    linear-gradient(160deg,
      rgba(80,30,140,.12) 0%,
      rgba(40,10,80,.15)  40%,
      rgba(15,5,30,.18)   80%,
      rgba(5,2,12,.22)    100%),
    linear-gradient(135deg,
      rgba(12,6,22,.94) 0%,
      rgba(6,3,14,.98)  100%);

  border-color: rgba(120,60,200,.28);
  box-shadow:
    0 18px 55px rgba(0,0,0,.80),
    0 0 0 1px rgba(120,60,220,.14),
    inset 0 1px 0 rgba(140,80,255,.08);
}

/* Textura obsidiana — micro-listras verticais très sombres */
.fs-page .fs-card--theme-shadow::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events:none;
  z-index:0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 5px,
      rgba(100,40,180,.025) 5px,
      rgba(100,40,180,.025) 6px
    ),
    linear-gradient(180deg,
      rgba(120,50,200,.10) 0%,
      transparent 35%,
      rgba(60,20,100,.08) 70%,
      transparent 100%);
  border: 1px solid rgba(120,60,200,.10);
}

/* Neblina animada — aura esfumaçada pulsante */
.fs-page .fs-card--theme-shadow::after{
  content:'';
  position:absolute;
  inset:-20% -20%;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(ellipse 60% 40% at 30% 80%,
      rgba(100,30,180,.38), transparent 65%),
    radial-gradient(ellipse 50% 35% at 70% 20%,
      rgba(80,20,160,.30), transparent 60%);

  filter: blur(18px);
  mix-blend-mode: screen;
  animation: fst-shadow-mist 4.5s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes fst-shadow-mist{
  0%  { opacity:.45; transform: translate3d(-3%, 2%, 0) scale(1.02); }
  100%{ opacity:.75; transform: translate3d(3%, -2%, 0) scale(1.05); }
}

/* Borda roxo pulsante */
.fs-page .fs-card--theme-shadow .fs-card__glow{
  background:
    radial-gradient(ellipse at 40% 0%,
      rgba(140,60,255,.42) 0%,
      rgba(90,30,180,.25)  35%,
      transparent 65%),
    radial-gradient(ellipse at 60% 110%,
      rgba(120,40,220,.30) 0%,
      transparent 55%);
  animation: fst-shadow-glow-pulse 3.2s ease-in-out infinite alternate;
}

@keyframes fst-shadow-glow-pulse{
  0%  { opacity:.55; }
  100%{ opacity: 1;  }
}

@media (hover:hover){
  .fs-page .fs-card--theme-shadow:hover{
    border-color: rgba(140,70,255,.50);
    box-shadow:
      0 28px 80px rgba(0,0,0,.85),
      0 0 0 1px rgba(140,70,255,.20),
      0 0 45px rgba(110,40,220,.30),
      0 0 22px rgba(90,20,180,.22);
  }
}

.fs-page .fs-card--theme-shadow.fs-card--master{
  box-shadow:
    0 24px 75px rgba(0,0,0,.82),
    0 0 0 1px rgba(140,70,255,.22),
    0 0 65px rgba(110,40,220,.28),
    0 0 38px rgba(90,20,180,.20);
}

/* Pip "gem" em ametista escura */
.fs-page .fs-card--theme-shadow .fs-char__pip--on{
  background:
    radial-gradient(circle at 35% 30%, rgba(200,160,255,.60), transparent 48%),
    linear-gradient(135deg, rgba(170,100,255,.95), rgba(90,30,160,.70));
  border-color: rgba(150,80,255,.45);
  box-shadow: 0 0 12px rgba(120,50,240,.35), 0 0 6px rgba(100,30,200,.25);
}

/* ─────────────────────────────────────────────────────────────────────────
   TEMA FIRE — Magma · Lava · Calor extremo
   ───────────────────────────────────────────────────────────────────────── */
.fs-page .fs-card--theme-fire{
  --uc: #ff5b3d;

  background:
    radial-gradient(600px 350px at 20% -5%,  rgba(220,80,20,.20),  transparent 55%),
    radial-gradient(500px 300px at 85% 25%,  rgba(180,60,10,.16),  transparent 58%),
    linear-gradient(160deg,
      rgba(180,60,10,.14) 0%,
      rgba(120,35,8,.18)  40%,
      rgba(60,15,5,.20)   80%,
      rgba(20,6,2,.24)    100%),
    linear-gradient(135deg,
      rgba(22,8,3,.94) 0%,
      rgba(12,4,1,.98) 100%);

  border-color: rgba(220,80,20,.32);
  box-shadow:
    0 18px 55px rgba(0,0,0,.80),
    0 0 0 1px rgba(240,100,30,.16),
    inset 0 1px 0 rgba(255,120,40,.08);
}

/* Textura "carvão" — micro-padrão diagonal */
.fs-page .fs-card--theme-fire::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events:none;
  z-index:0;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 4px,
      rgba(200,70,10,.03) 4px,
      rgba(200,70,10,.03) 5px
    ),
    linear-gradient(180deg,
      rgba(240,100,20,.12) 0%,
      transparent 35%,
      rgba(160,50,10,.08)  70%,
      transparent 100%);
  border: 1px solid rgba(220,80,20,.10);
}

/* Calor tremulando — distorção simulada */
.fs-page .fs-card--theme-fire::after{
  content:'';
  position:absolute;
  inset:-15% -25%;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(ellipse 55% 40% at 35% 85%,
      rgba(255,90,10,.40), transparent 65%),
    radial-gradient(ellipse 50% 30% at 65% 10%,
      rgba(255,140,30,.30), transparent 60%);

  filter: blur(14px);
  mix-blend-mode: screen;
  animation: fst-fire-heat 2.8s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes fst-fire-heat{
  0%  { opacity:.50; transform: translate3d(0, 0, 0) scaleY(1.00); }
  33% { opacity:.75; transform: translate3d(1%, -1.5%, 0) scaleY(1.02); }
  66% { opacity:.60; transform: translate3d(-1%, 1%, 0) scaleY(.99); }
  100%{ opacity:.50; transform: translate3d(0, 0, 0) scaleY(1.00); }
}

/* Glow interno quente */
.fs-page .fs-card--theme-fire .fs-card__glow{
  background:
    radial-gradient(ellipse at 35% 0%,
      rgba(255,100,20,.48) 0%,
      rgba(200,60,10,.28)  35%,
      transparent 65%),
    radial-gradient(ellipse at 70% 110%,
      rgba(255,80,10,.32) 0%,
      transparent 55%);
  animation: fst-fire-glow-pulse 2.2s ease-in-out infinite alternate;
}

@keyframes fst-fire-glow-pulse{
  0%  { opacity:.60; }
  100%{ opacity: 1;  }
}

/* Borda pulsando como brasa */
.fs-page .fs-card--theme-fire{
  animation: fst-fire-border-pulse 2.5s ease-in-out infinite;
}

@keyframes fst-fire-border-pulse{
  0%, 100%{
    box-shadow:
      0 18px 55px rgba(0,0,0,.80),
      0 0 0 1px rgba(240,100,30,.16),
      inset 0 1px 0 rgba(255,120,40,.08);
  }
  50%{
    box-shadow:
      0 18px 55px rgba(0,0,0,.80),
      0 0 0 1px rgba(255,130,40,.32),
      0 0 28px rgba(255,90,20,.22),
      inset 0 1px 0 rgba(255,140,50,.14);
  }
}

@media (hover:hover){
  .fs-page .fs-card--theme-fire:hover{
    border-color: rgba(255,110,30,.55);
    box-shadow:
      0 28px 80px rgba(0,0,0,.85),
      0 0 0 1px rgba(255,120,40,.25),
      0 0 50px rgba(255,80,20,.32),
      0 0 25px rgba(200,60,10,.24);
    animation: none; /* suprime pulse no hover para não conflitar */
  }
}

.fs-page .fs-card--theme-fire.fs-card--master{
  box-shadow:
    0 24px 75px rgba(0,0,0,.82),
    0 0 0 1px rgba(255,110,30,.24),
    0 0 65px rgba(255,80,20,.30),
    0 0 35px rgba(200,60,10,.22);
  animation: none;
}

/* Pip "gem" em rubi/magma */
.fs-page .fs-card--theme-fire .fs-char__pip--on{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,200,160,.60), transparent 48%),
    linear-gradient(135deg, rgba(255,100,30,.95), rgba(180,40,5,.70));
  border-color: rgba(255,100,30,.45);
  box-shadow: 0 0 12px rgba(255,80,20,.38), 0 0 6px rgba(220,60,10,.28);
}

/* ─────────────────────────────────────────────────────────────────────────
   TEMA NATURE — Floresta · Pedra · Druidismo · Peso eterno
   ───────────────────────────────────────────────────────────────────────── */
.fs-page .fs-card--theme-nature{
  --uc: #28d17c;

  background:
    radial-gradient(600px 350px at 25% -5%,  rgba(30,130,70,.18),  transparent 55%),
    radial-gradient(500px 300px at 80% 20%,  rgba(20,90,50,.14),   transparent 58%),
    linear-gradient(160deg,
      rgba(20,90,45,.14) 0%,
      rgba(15,60,32,.18) 40%,
      rgba(10,35,20,.20) 80%,
      rgba(5,15,8,.24)   100%),
    linear-gradient(135deg,
      rgba(8,18,12,.94) 0%,
      rgba(4,10,6,.98)  100%);

  border-color: rgba(30,160,80,.28);
  box-shadow:
    0 18px 55px rgba(0,0,0,.80),
    0 0 0 1px rgba(40,180,90,.12),
    inset 0 1px 0 rgba(60,200,100,.06);
}

/* Textura pedra/musgo — linhas horizontais muito sutis */
.fs-page .fs-card--theme-nature::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events:none;
  z-index:0;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 6px,
      rgba(30,120,60,.028) 6px,
      rgba(30,120,60,.028) 7px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      rgba(20,80,40,.020) 8px,
      rgba(20,80,40,.020) 9px
    ),
    linear-gradient(180deg,
      rgba(40,160,80,.10) 0%,
      transparent 35%,
      rgba(20,100,50,.07) 70%,
      transparent 100%);
  border: 1px solid rgba(30,140,70,.10);
}

/* Respiração druídica — micro scale pulsante */
.fs-page .fs-card--theme-nature::after{
  content:'';
  position:absolute;
  inset:-10% -15%;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(ellipse 50% 40% at 30% 70%,
      rgba(30,180,80,.30), transparent 65%),
    radial-gradient(ellipse 45% 35% at 70% 20%,
      rgba(20,140,60,.22), transparent 60%);

  filter: blur(16px);
  mix-blend-mode: screen;
  animation: fst-nature-breath 6.0s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes fst-nature-breath{
  0%  { opacity:.35; transform: scale(1.00); }
  100%{ opacity:.60; transform: scale(1.04); }
}

/* Card respira suavemente (scale 1.01 muito sutil, como pedido) */
.fs-page .fs-card--theme-nature.fs-card--in{
  animation: fst-nature-card-breathe 7.0s ease-in-out infinite alternate;
}

@keyframes fst-nature-card-breathe{
  0%  { transform: translateY(0) scale(1.000); }
  100%{ transform: translateY(-1px) scale(1.006); }
}
/* Anula a respiração quando em hover (tilt do JS toma controle) */
@media (hover:hover){
  .fs-page .fs-card--theme-nature:hover{
    animation: none;
  }
}

/* Glow verde/esmeralda nas bordas */
.fs-page .fs-card--theme-nature .fs-card__glow{
  background:
    radial-gradient(ellipse at 30% 0%,
      rgba(40,200,90,.40) 0%,
      rgba(20,140,60,.22) 35%,
      transparent 65%),
    radial-gradient(ellipse at 70% 110%,
      rgba(30,170,70,.28) 0%,
      transparent 55%);
}

@media (hover:hover){
  .fs-page .fs-card--theme-nature:hover{
    border-color: rgba(40,200,90,.45);
    box-shadow:
      0 28px 80px rgba(0,0,0,.82),
      0 0 0 1px rgba(40,200,90,.18),
      0 0 42px rgba(30,180,80,.25),
      0 0 20px rgba(20,140,60,.18);
  }
}

.fs-page .fs-card--theme-nature.fs-card--master{
  box-shadow:
    0 24px 75px rgba(0,0,0,.80),
    0 0 0 1px rgba(40,200,90,.20),
    0 0 60px rgba(30,180,80,.24),
    0 0 34px rgba(20,140,60,.18);
  animation: none;
}

/* Pip "gem" em esmeralda */
.fs-page .fs-card--theme-nature .fs-char__pip--on{
  background:
    radial-gradient(circle at 35% 30%, rgba(160,255,200,.60), transparent 48%),
    linear-gradient(135deg, rgba(40,210,100,.95), rgba(15,100,45,.70));
  border-color: rgba(40,200,90,.45);
  box-shadow: 0 0 12px rgba(30,200,80,.32), 0 0 6px rgba(20,160,60,.22);
}

/* ─────────────────────────────────────────────────────────────────────────
   ACESSIBILIDADE — desativa animações dos temas elementais
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card--theme-silver::after,
  .fs-page .fs-card--theme-shadow::after,
  .fs-page .fs-card--theme-shadow .fs-card__glow,
  .fs-page .fs-card--theme-fire::after,
  .fs-page .fs-card--theme-fire .fs-card__glow,
  .fs-page .fs-card--theme-fire,
  .fs-page .fs-card--theme-nature::after,
  .fs-page .fs-card--theme-nature.fs-card--in{
    animation: none !important;
  }
}

/* ── FAIXA LATERAL — cor adapta ao tema ─────────────────────────────────── */
/* A faixa usa ::after com var(--uc) que já é sobrescrita por cada tema acima */

/* ── BARRA DE PROGRESSO — adapta ao tema ────────────────────────────────── */
/* Já usa color-mix(var(--uc)) — funciona automaticamente com a var do tema */



/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO VAZIO
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-empty{
  position:relative;
  z-index:2;
  text-align:center;
  padding: 86px 24px 68px;
}
.fs-page .fs-empty__orb{
  font-size: 70px;
  display:block;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 35px rgba(139,92,246,.18)) drop-shadow(0 0 26px rgba(255,215,122,.16));
  animation: fs-orb-float 4.6s ease-in-out infinite;
}
@keyframes fs-orb-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.fs-page .fs-empty__title{
  font-family: var(--font-epic);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 12px;
  text-shadow: 0 0 28px rgba(139,92,246,.14), 2px 2px 10px rgba(0,0,0,.75);
}
.fs-page .fs-empty__text{
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(239,230,207,.62);
  line-height: 1.8;
  max-width: 460px;
  margin: 0 auto;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RODAPÉ
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-page .fs-footer{ position:relative; z-index:2; padding: 38px 48px 0; }
.fs-page .fs-footer__inner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding: 18px 22px;
  border-radius: 16px;

  background:
    radial-gradient(320px 120px at 15% 0%, rgba(255,215,122,.10), transparent 60%),
    radial-gradient(320px 120px at 85% 10%, rgba(139,92,246,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,215,122,.08);

  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(239,230,207,.62);
}
.fs-page .fs-footer__icon{ font-size: 20px; flex-shrink:0; margin-top: 2px; }
.fs-page .fs-footer__inner strong{ color: var(--gold-bright); font-weight: 700; }
.fs-page .fs-footer p{ margin:0; padding:0; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){
  .fs-page{ max-width: 980px; }
  .fs-page .fs-hero{ padding: 34px 22px 30px; }
  .fs-page .fs-hero__stats{ width:100%; justify-content:center; }
  .fs-page .fs-worlds{ padding: 34px 22px 0; }
  .fs-page .fs-footer{ padding: 26px 22px 0; }
  .fs-page .fs-grid{ gap: 16px; }
}
@media (max-width: 560px){
  .fs-page .fs-hero{ flex-direction:column; text-align:center; }
  .fs-page .fs-hero__av-wrap{ margin: 0 auto; }
  .fs-page .fs-hero__title-row{ justify-content:center; }
  .fs-page .fs-xp__labels{ flex-wrap:wrap; gap:6px; justify-content:center; }
  .fs-page .fs-grid{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .fs-page::after,
  .fs-page .fs-hero__av-ring,
  .fs-page .fs-hero__runes span,
  .fs-page .fs-xp__shimmer,
  .fs-page .fs-card__badge,
  .fs-page .fs-empty__orb{ animation:none !important; }
  .fs-page .fs-card,
  .fs-page .fs-card__icon,
  .fs-page .fs-xp__fill,
  .fs-page .fs-card__prog-fill{ transition:none !important; }
}

/* ── JS EPIC LAYERS (add-on) ───────────────────────────────────────────── */
.fs-page .fs-card{
  transform-style: preserve-3d;
  will-change: transform, filter;
}

/* camada injetada pelo JS: spotlight */
.fs-page .fs-card .fs-card__spot{
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition: opacity .35s var(--ease);
  background:
    radial-gradient(220px 220px at var(--mx, 50%) var(--my, 30%),
      rgba(255,255,255,.14),
      rgba(139,92,246,.12) 35%,
      transparent 65%);
  mix-blend-mode: screen;
}

/* camada injetada pelo JS: foil (caso não exista no HTML) */
.fs-page .fs-card .fs-card__foil{
  will-change: transform, opacity;
  transform: translate3d(var(--fx, -8%), var(--fy, -6%), 0) rotate(var(--fr, 10deg));
}

/* “faíscas” canvas injetado */
.fs-page .fs-card .fs-sparks{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:2;
  opacity:.95;
}
@media (hover:hover){
  .fs-page .fs-card:hover .fs-card__spot{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card{ transform: none !important; }
  .fs-page .fs-card .fs-card__spot{ display:none !important; }
  .fs-page .fs-card .fs-sparks{ display:none !important; }
}

/* ─────────────────────────────────────────────────────────────
   EPIC ADD-ON: Crown Beam + Tap pulse (mobile)
   ───────────────────────────────────────────────────────────── */

.fs-page .fs-card{
  position: relative;
  overflow: hidden;
}

/* Beam layer (injetado pelo JS ou pode existir no HTML) */
.fs-page .fs-card .fs-card__beam{
  position: absolute;
  inset: -18% -20%;
  pointer-events: none;
  z-index: 3;

  opacity: 0;
  transform: translateX(-45%) rotate(10deg);
  mix-blend-mode: screen;

  /* O feixe em si: núcleo + bordas + brilho */
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.00) 38%,
      rgba(255,255,255,0.18) 46%,
      rgba(139,92,246,0.22) 50%,
      rgba(255,215,122,0.20) 54%,
      rgba(255,255,255,0.10) 58%,
      rgba(255,255,255,0.00) 66%,
      transparent 100%);

  filter: blur(0.2px);
}

/* “coroa” no topo (um bloom sutil) */
.fs-page .fs-card .fs-card__beam::before{
  content:'';
  position:absolute;
  top: 6%;
  left: 40%;
  width: 28%;
  height: 22%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,215,122,0.25),
    rgba(139,92,246,0.18) 45%,
    transparent 70%);
  filter: blur(8px);
  opacity: .9;
}

/* Ativa o beam */
.fs-page .fs-card.is-beaming .fs-card__beam{
  opacity: 1;
  animation: fs-beam-sweep 800ms cubic-bezier(.22,.85,.22,1) both;
}

@keyframes fs-beam-sweep{
  0%   { transform: translateX(-55%) rotate(10deg); opacity: 0; }
  12%  { opacity: .85; }
  55%  { opacity: .75; }
  100% { transform: translateX(55%) rotate(10deg); opacity: 0; }
}

/* Pulse (para mobile / tap) */
.fs-page .fs-card.is-tapfx{
  animation: fs-tap-pulse 650ms cubic-bezier(.22,.85,.22,1) both;
}
@keyframes fs-tap-pulse{
  0%   { filter: saturate(1.00) contrast(1.00); }
  25%  { filter: saturate(1.10) contrast(1.03); }
  100% { filter: saturate(1.00) contrast(1.00); }
}

/* Respeita acessibilidade */
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card.is-beaming .fs-card__beam{ animation: none !important; opacity: 0 !important; }
  .fs-page .fs-card.is-tapfx{ animation: none !important; }
}

/* ============================================================
   EPIC THEME UPGRADE (PATCH) — v7.x
   Cole no FINAL do my-seals.css
   ============================================================ */

/* Estado “reveal” (usado pelo JS no mobile e opcional no hover) */
.fs-page .fs-card.fs-reveal{
  filter: saturate(1.14) contrast(1.06);
}
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card.fs-reveal{ filter: none !important; }
}

/* Beam/FX cores por tema (reusa seu .fs-card__beam) */
.fs-page .fs-card{ --beamA: rgba(255,215,122,.22); --beamB: rgba(139,92,246,.22); --beamC: rgba(255,255,255,.14); }
.fs-page .fs-card--theme-silver{ --beamA: rgba(210,235,255,.26); --beamB: rgba(140,190,255,.20); --beamC: rgba(255,255,255,.16); }
.fs-page .fs-card--theme-shadow{ --beamA: rgba(180,120,255,.26); --beamB: rgba(90,30,200,.24);  --beamC: rgba(255,255,255,.12); }
.fs-page .fs-card--theme-fire{   --beamA: rgba(255,160,60,.26);  --beamB: rgba(255,80,20,.24);   --beamC: rgba(255,255,255,.12); }
.fs-page .fs-card--theme-nature{ --beamA: rgba(120,255,180,.22); --beamB: rgba(40,210,120,.20);  --beamC: rgba(255,255,255,.12); }

.fs-page .fs-card .fs-card__beam{
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 36%,
    var(--beamC) 45%,
    var(--beamB) 50%,
    var(--beamA) 55%,
    transparent 64%,
    transparent 100%);
}

/* Reforça o “reveal” no beam */
.fs-page .fs-card.fs-reveal.is-beaming .fs-card__beam{
  animation-duration: 720ms;
  filter: blur(.15px) saturate(1.15);
}

/* ============================================================
   SILVER — “armor sheen” + glints (mais chamativo)
   ============================================================ */
.fs-page .fs-card--theme-silver::after{
  /* deixa o sheen mais “lâmina” e mais perceptível */
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 34%,
    rgba(240,250,255,.08) 40%,
    rgba(230,245,255,.32) 48%,
    rgba(180,215,255,.22) 54%,
    transparent 62%,
    transparent 100%);
  opacity: .9;
  animation-duration: 4.6s;
}

/* Sparkles discretos (glints) — camada extra */
.fs-page .fs-card--theme-silver .fs-card__glow{
  position: absolute;
}
.fs-page .fs-card--theme-silver .fs-card__glow::after{
  content:'';
  position:absolute;
  inset:-30% -30%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 28%, rgba(220,245,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 62%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(200,230,255,.14) 0 2px, transparent 3px);
  opacity:.0;
  transform: translate3d(-2%,0,0);
  mix-blend-mode: screen;
  animation: fst-silver-glints 2.8s ease-in-out infinite;
}
@keyframes fst-silver-glints{
  0%,100%{ opacity:0; transform: translate3d(-3%,0,0); }
  45%{ opacity:.55; }
  60%{ opacity:.20; transform: translate3d(3%,0,0); }
}
@media (hover:hover){
  .fs-page .fs-card--theme-silver:hover .fs-card__glow::after{ opacity:.65; }
}
.fs-page .fs-card--theme-silver.fs-reveal .fs-card__glow::after{ opacity:.75; }

/* ============================================================
   SHADOW — mist volumétrica + vórtice arcano
   ============================================================ */
.fs-page .fs-card--theme-shadow::after{
  filter: blur(22px);
  opacity: .9;
  animation-duration: 3.8s;
}

/* Vórtice (camada extra) */
.fs-page .fs-card--theme-shadow::before{
  /* mantém sua textura, mas adiciona “swirl” por cima */
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(100,40,180,.025) 5px 6px),
    conic-gradient(from 180deg at 50% 55%,
      rgba(155,89,255,.00),
      rgba(155,89,255,.10),
      rgba(90,30,200,.00),
      rgba(155,89,255,.12),
      rgba(0,0,0,0));
  animation: fst-shadow-vortex 6.5s linear infinite;
}
@keyframes fst-shadow-vortex{
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-card--theme-shadow::before{ animation:none !important; }
}
.fs-page .fs-card--theme-shadow.fs-reveal .fs-card__glow{
  animation-duration: 2.4s;
  filter: saturate(1.1);
}

/* ============================================================
   FIRE — lava flow + embers + heat shimmer mais “AAA”
   ============================================================ */
.fs-page .fs-card--theme-fire::after{
  /* heat mais vivo */
  filter: blur(12px);
  opacity: .95;
  animation-duration: 2.2s;
}

/* Lava flow (camada por cima do fundo, abaixo do conteúdo) */
.fs-page .fs-card--theme-fire .fs-card__glow::before{
  content:'';
  position:absolute;
  inset:-40% -40%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(closest-side at 30% 70%, rgba(255,120,40,.18), transparent 62%),
    radial-gradient(closest-side at 70% 30%, rgba(255,70,20,.14), transparent 62%),
    repeating-linear-gradient(120deg,
      rgba(255,140,60,.00) 0 18px,
      rgba(255,140,60,.08) 18px 20px);
  mix-blend-mode: screen;
  opacity:.0;
  transform: translate3d(-4%,0,0);
  animation: fst-fire-lava 3.2s ease-in-out infinite;
}
@keyframes fst-fire-lava{
  0%{ opacity:.15; transform: translate3d(-6%,2%,0) scale(1.02); }
  50%{ opacity:.45; }
  100%{ opacity:.15; transform: translate3d(6%,-2%,0) scale(1.06); }
}
@media (hover:hover){
  .fs-page .fs-card--theme-fire:hover .fs-card__glow::before{ opacity:.55; }
}
.fs-page .fs-card--theme-fire.fs-reveal .fs-card__glow::before{ opacity:.65; }

/* ============================================================
   NATURE — esporos + veios/vinhas + respiração mais rica
   ============================================================ */
.fs-page .fs-card--theme-nature::after{
  filter: blur(18px);
  opacity: .85;
  animation-duration: 5.2s;
}

/* Esporos (pontinhos verdes flutuando) */
.fs-page .fs-card--theme-nature .fs-card__glow::after{
  content:'';
  position:absolute;
  inset:-30% -30%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(160,255,200,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(120,255,180,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 35%, rgba(120,255,180,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 75%, rgba(160,255,200,.10) 0 1px, transparent 2px);
  opacity:.0;
  transform: translate3d(0,3%,0);
  mix-blend-mode: screen;
  animation: fst-nature-spores 4.6s ease-in-out infinite;
}
@keyframes fst-nature-spores{
  0%{ opacity:.0; transform: translate3d(0,4%,0); }
  45%{ opacity:.55; }
  100%{ opacity:.0; transform: translate3d(0,-4%,0); }
}
@media (hover:hover){
  .fs-page .fs-card--theme-nature:hover .fs-card__glow::after{ opacity:.6; }
}
.fs-page .fs-card--theme-nature.fs-reveal .fs-card__glow::after{ opacity:.75; }