/**
 * Illusia Patreon — CSS
 *
 * Componentes ATIVOS:
 * - Tier Badges (`.fictioneer-comment__badge.is-{role}`) — usados pelo
 *   shortcode admin `[illusia_badge_preview]` como referência editorial.
 *   NÃO renderizam em comentários desde v1.68.0 (badge chooser removido,
 *   emblema agora vem da cadeia geral em illusia-badges.php prio 30).
 * - Comentários com destaque especial (borda por tier).
 *
 * REMOVIDO em v2.3.0 (S11): o bloco legado TIER MESSAGE + CTA PATREON
 * (`.tier-message-content`, `.tier-badge`, `.tier-title`, `.tier-notice`,
 * `.patreon-button`, `.patreon-icon` + light/responsive). O markup atual
 * (`illusia_get_tier_message()` em illusia-single-chapter.php) usa
 * `.illusia-tier-message__*` + `.button._secondary`, estilizado em
 * `illusia-single-chapter.css` §11c — as classes antigas estavam sem
 * consumer desde a reescrita BEM, e o seletor duplicado
 * `.illusia-tier-message` (design pré-migração) brigava na cascade com o
 * canônico. Vars órfãs não-cromáticas idem (ff-sans, transition,
 * text-stroke, text-shadow, gold-glow, texture-gold).
 *
 * REMOVIDO em v1.79.0: popup de incentivo (modelo Wikipedia/Patreon —
 * página /apoiar + link de menu substituem).
 *
 * REMOVIDO em v1.76.0: o mural medieval ("guild board") foi reformulado na
 * direção Constelação e migrou pra `css/components/illusia-mural.css`.
 *
 * REMOVIDO em v1.68.0: o badge chooser (filtro prio 20) e seu card no perfil.
 *
 * Cores de tier (--illusia-patreon-*) são intencionalmente fixas — metais/
 * gemas que não acompanham o hue-rotate do tema (herança v5.0.0
 * "Ink & Authority"). BRAND-LOCKED (R3 + DESIGN-DIRECTION §3) — não migrar
 * pra tokens. Hoje só vivem no admin preview.
 *
 * `prefers-reduced-transparency`: N/A — zero `backdrop-filter` no
 * componente (justificado em S11 v2.3.0, mesma pattern S9/S13).
 * `prefers-reduced-motion`: guard no fim do arquivo (badges de tier têm
 * animações infinitas decorativas).
 *
 * Naming: illusia-patreon-{component}[-{variant}][-{state}]
 */

/* ==================================================
   VARIAVEIS GLOBAIS DO MODULO PATREON
   Cores de tier sao intencionalmente fixas —
   representam metais/gemas que nao mudam com o tema.
   Mural, popup e tier-message usam --bg-*, --fg-*, --primary-*
================================================== */
:root {
    /* ------- Tipografia ------- */
    --illusia-patreon-ff-medieval: 'MedievalSharp', cursive;
    --illusia-patreon-badge-size: 0.8em;

    /* ------- Cores Base / Badges ------- */
    --illusia-patreon-badge-light: #fff;
    --illusia-patreon-badge-dark: #2f2f2f;
    --illusia-patreon-badge-parchment: #2a2015;
    --illusia-patreon-badge-emerald-text: #e0f0e5;
    --illusia-patreon-badge-warm: #e8d9c5;

    /* ------- Metais e Gemas (tier-specific, theme-independent) ------- */
    --illusia-patreon-gold: hsl(51, 100%, 50%);
    --illusia-patreon-gold-dark: hsl(45, 100%, 35%);
    --illusia-patreon-silver: hsl(220, 15%, 90%);
    --illusia-patreon-silver-dark: hsl(221, 33%, 54%);
    --illusia-patreon-bronze: hsl(30, 60%, 50%);
    --illusia-patreon-bronze-dark: hsl(25, 50%, 35%);
    --illusia-patreon-emerald: hsl(164, 70%, 40%);
    --illusia-patreon-emerald-dark: hsl(152, 50%, 25%);
    --illusia-patreon-amethyst: hsl(270, 50%, 60%);
    --illusia-patreon-amethyst-dark: hsl(255, 45%, 35%);

    /* ==================================================
       TIER 5 — Ouro Celestial
       Fundo com textura de diamantes dourados,
       icone de coroa flutuante, brilho pulsante
    ================================================== */
    --illusia-patreon-tier5-bg: linear-gradient(135deg, hsl(51, 100%, 60%) 0%, hsl(45, 100%, 45%) 30%, hsl(40, 100%, 35%) 100%);
    --illusia-patreon-tier5-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="rgba(255,215,0,0.2)" d="M8 0L4 4 0 0h8zM16 0l-4 4 4 4V0zM0 16l4-4-4-4v8zM16 16l-4-4 4-4v8z"/><path fill="rgba(255,255,255,0.1)" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>');
    --illusia-patreon-tier5-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gold"><path d="M5 16L3 5l5 5L12 2l4 8 5-5-2 11H5zm14 3H5v2h14v-2z"/></svg>');
    --illusia-patreon-tier5-border: 2px inset var(--illusia-patreon-gold);
    --illusia-patreon-tier5-shadow: 0 0 12px hsl(45, 100%, 50%), 0 2px 8px rgba(0, 0, 0, 0.4);


    /* ==================================================
       TIER 4 — Prata Lunar
       Fundo com blend multiplicativo de crateras,
       icone de moeda lunar, aura radial pulsante
    ================================================== */
    --illusia-patreon-tier4-bg: linear-gradient(135deg, hsl(220, 15%, 90%), hsl(220, 25%, 85%), hsl(220, 35%, 80%));
    --illusia-patreon-tier4-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" opacity="0.3"><circle cx="15" cy="20" r="5" fill="%23777"/><circle cx="45" cy="30" r="4" fill="%23777"/><circle cx="50" cy="55" r="5" fill="%23777"/><circle cx="10" cy="35" r="4.5" fill="%23777"/></svg>');
    --illusia-patreon-tier4-icon: url('data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%207.5%207.5%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%3E%3Cpath%20fill%3D%22%23e4e2dc%22%20d%3D%22M7.281%203.75A3.53%203.53%200%200%201%203.75%207.281%203.53%203.53%200%200%201%20.219%203.75a3.531%203.531%200%200%201%207.062%200%22%2F%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M7.281%203.75A3.53%203.53%200%200%201%203.75%207.281%203.53%203.53%200%200%201%20.219%203.75a3.531%203.531%200%200%201%207.062%200%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22m6.492-1.736%202.24%201.487.938%202.52-.722%202.59-2.107%201.67-2.686.113-2.24-1.487-.938-2.52.722-2.589%202.107-1.67z%22%20fill%3D%22%23f6f4ef%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22m5.946%205.063-.153.094.256.219.068-.165zM4.384%202.589l-.249.153.418.357.11-.27zM2.518%204.482l-.17.105.285.244.075-.184zm.493-3.092.181-.114-.307-.258-.079.198zM5.38%205.56l.195-.122-.331-.278-.085.213z%22%20fill%3D%22%23e4e2dc%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22m6.117%202.743.099.507-.452.25-.378-.352.218-.468zm-2.979-.73-.27.765-.8-.034-.225-.787.661-.452zm.288%202.696-.211-.973.86-.501.742.663-.401.911zm-2.113-.474-.148-.558.484-.3.447.372-.207.53zm2.609%202.548-.563-.496.306-.674.752.079.159.723z%22%20fill%3D%22%23e4e2dc%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
    --illusia-patreon-tier4-border: 2px inset var(--illusia-patreon-silver-dark);
    --illusia-patreon-tier4-shadow: 0 0 10px var(--illusia-patreon-silver-dark), 0 2px 6px rgba(0, 0, 0, 0.3);
    --illusia-patreon-tier4-text: hsl(220, 40%, 30%);


    /* ==================================================
       TIER 3 — Bronze Ancestral
       Fundo com runas cubicas, icone de escudo
       com gradiente bronze, brilho metalico overlay
    ================================================== */
    --illusia-patreon-tier3-bg: linear-gradient(135deg, hsl(30, 60%, 50%), hsl(25, 60%, 40%));
    --illusia-patreon-tier3-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" opacity="0.1"><path d="M3 3h2v2H3zM8 8h2v2H8zM13 13h2v2h-2z" fill="%235a3e2e"/></svg>');
    --illusia-patreon-tier3-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a" x1="50%25" y1="0%25" x2="50%25" y2="100%25"><stop offset="0%25" stop-color="%23cd7f32"/><stop offset="100%25" stop-color="%238b5d2e"/></linearGradient></defs><path fill="url(%23a)" d="M153.568 20.424L109.13 70.79l63.696 291.11-18.746 1.758L92.266 81.143 36.588 137.73 110.28 427.7l41.2-47.26 13.286 13.2-43.715 50.147L322.1 491.56l53.714-49.52-192.472-50.067 5.084-17.99 199.982 52.023 103.87-195.3-68.82-127.98-269.888-82.302zm81.912 51.892c80.62.774 168.87 79.368 155.422 164.98-28.148-67.998-92.725-132.962-165.6-115.685-63.013 14.94-5.186 80.4 65.82 97.693C369.54 238.4 459.874 302.575 400.1 365.79c-55.167 58.34-159.148 2.03-150.717-67.73 17.855 32.638 81.77 85.592 120.695 43.436 54.56-59.084-77.733-93.542-122.27-112.883-45.846-19.903-138.904-86.006-81.083-133.1 20.11-16.38 44.074-23.433 68.753-23.197z"/></svg>') center/contain no-repeat;
    --illusia-patreon-tier3-border: 2px inset var(--illusia-patreon-bronze-dark);
    --illusia-patreon-tier3-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.2);
    --illusia-patreon-tier3-text: var(--illusia-patreon-badge-parchment);


    /* ==================================================
       TIER 2 — Esmeralda Elfica
       Fundo com barras horizontais elficas,
       icone de gema em camadas, overlay com textura
    ================================================== */
    --illusia-patreon-tier2-bg: linear-gradient(135deg, hsl(164, 70%, 40%), hsl(158, 70%, 30%));
    --illusia-patreon-tier2-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" opacity="0.15"><path d="M3 7h14v3H3zM5 11h10v2H5z" fill="%23244d42"/></svg>');
    --illusia-patreon-tier2-texture-after: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" opacity="0.1"><path d="M1 1h1v1H1zM4 4h1v1H4zM7 7h1v1H7z"/></svg>');
    --illusia-patreon-tier2-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2328a745" opacity="0.3"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
    --illusia-patreon-tier2-border: 2px solid var(--illusia-patreon-emerald-dark);
    --illusia-patreon-tier2-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.2);
    --illusia-patreon-tier2-text: var(--illusia-patreon-badge-emerald-text);


    /* ==================================================
       TIER 1 — Ametista Mistica
       Fundo com particulas cristalinas,
       icone de orbe com diamante, aura mistica
    ================================================== */
    --illusia-patreon-tier1-bg: linear-gradient(360deg, hsl(270, 50%, 60%), hsl(260, 50%, 45%));
    --illusia-patreon-tier1-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" opacity="0.15"><circle cx="5" cy="5" r="1" fill="%237d5ba3"/><circle cx="15" cy="12" r="1.2" fill="%237d5ba3"/><circle cx="8" cy="15" r="0.8" fill="%237d5ba3"/></svg>');
    --illusia-patreon-tier1-texture-after: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" opacity="0.1"><circle cx="3" cy="7" r="0.5" fill="%23fff"/><circle cx="8" cy="2" r="0.3" fill="%23fff"/></svg>');
    --illusia-patreon-tier1-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.15 54.15"><defs><linearGradient id="a" x1="50%25" y1="0%25" x2="50%25" y2="100%25"><stop offset="0%25" stop-color="%239f7aea"/><stop offset="100%25" stop-color="%23805ad5"/></linearGradient></defs><g stroke="%23805ad5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><circle cx="25.075" cy="25.075" r="25.075" transform="translate(2 2)" fill="url(%23a)"/><path d="m6.675 47.476 13.914-26.885 26.884-13.917-13.914 26.885Z" fill="%23e6d7ff"/><path d="M30.443 27.075a3.368 3.368 0 1 1-3.368-3.367 3.37 3.37 0 0 1 3.368 3.367" fill="%23e6d7ff"/></g></svg>') center/contain no-repeat;
    --illusia-patreon-tier1-border: 2px solid var(--illusia-patreon-amethyst-dark);
    --illusia-patreon-tier1-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.2);
    --illusia-patreon-tier1-text: var(--illusia-patreon-badge-warm);


    /* ------- Cargos de Conteudo -------
       Paleta "Ink & Authority" — tons de tinta, papel e
       oficio editorial. Autoridade em tons profundos,
       criativos em tons ricos, base em tons suaves.
       Evita conflito com os metais/gemas dos tiers. ------- */
    --illusia-patreon-admin-bg: linear-gradient(160deg, hsl(0, 65%, 42%), hsl(350, 70%, 30%));
    /* Autoridade */
    --illusia-patreon-editor-bg: linear-gradient(150deg, hsl(210, 18%, 32%), hsl(210, 22%, 22%));
    --illusia-patreon-moderator-bg: linear-gradient(140deg, hsl(200, 45%, 34%), hsl(205, 50%, 24%));
    /* Criativos */
    --illusia-patreon-revisor-bg: linear-gradient(135deg, hsl(340, 35%, 42%), hsl(345, 40%, 32%));
    --illusia-patreon-autor-bg: linear-gradient(130deg, hsl(15, 45%, 44%), hsl(12, 50%, 34%));
    --illusia-patreon-tradutor-bg: linear-gradient(145deg, hsl(185, 40%, 36%), hsl(190, 45%, 26%));
    --illusia-patreon-designer-bg: linear-gradient(140deg, hsl(330, 32%, 46%), hsl(325, 36%, 36%));
    /* Base */
    --illusia-patreon-novato-bg: hsl(145, 20%, 46%);
    --illusia-patreon-author-bg: linear-gradient(135deg, hsl(20, 32%, 40%), hsl(18, 36%, 30%));
    --illusia-patreon-contributor-bg: hsl(220, 14%, 42%);
    --illusia-patreon-leitor-bg: hsl(35, 22%, 82%);
    --illusia-patreon-subscriber-bg: hsl(210, 12%, 88%);
    --illusia-patreon-translator-bg: hsl(40, 16%, 84%);
}

/* ==================================================
   1) ESTILO BASE DE BADGE
   Todos os badges de comentario herdam estas props
================================================== */
.fictioneer-comment__badge {
    display: inline-flex;
    font-family: var(--illusia-patreon-ff-medieval);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--illusia-patreon-badge-size);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 0 6px;
    margin-left: 4px;
    position: relative;
    transition: transform 0.2s ease;
}

.fictioneer-comment__badge:hover {
    transform: translateY(-1px);
}

/* ==================================================
   2) ADMINISTRADOR
================================================== */
.fictioneer-comment__badge.is-admin {
    background: var(--illusia-patreon-admin-bg);
    color: var(--illusia-patreon-badge-light);
}

/* ==================================================
   3) TIERS DO PATREON
   Propriedades comuns: layout, espacamento e
   alinhamento para todos os badges de tier
================================================== */
.fictioneer-comment__badge.is-fcn_ilustre_patrono_de_illusia,
.fictioneer-comment__badge.is-fcn_mestre_dos_contos,
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas,
.fictioneer-comment__badge.is-fcn_cronista_illusrio,
.fictioneer-comment__badge.is-fcn_explorador_de_illusia {
    display: inline-flex;
    align-items: center;
    min-width: 110px;
    padding-left: 15px;
    margin-left: 10px;
    position: relative;
    letter-spacing: 1px;
}

/* ==== TIER 5 — ILUSTRE PATRONO — OURO BRILHANTE ====
   Badge com textura de diamantes dourados e gradiente,
   borda inset e sombra animadas para efeito de brilho */
.fictioneer-comment__badge.is-fcn_ilustre_patrono_de_illusia {
    background: var(--illusia-patreon-tier5-texture), var(--illusia-patreon-tier5-bg);
    border: var(--illusia-patreon-tier5-border);
    box-shadow: var(--illusia-patreon-tier5-shadow);
    color: var(--illusia-patreon-badge-dark);
    overflow: visible;
    animation: illusia-tier5-glow 4s infinite;
}

/* ::before — Icone de coroa flutuante a esquerda do badge */
.fictioneer-comment__badge.is-fcn_ilustre_patrono_de_illusia::before {
    content: var(--illusia-patreon-tier5-icon);
    position: absolute;
    left: -12px;
    top: -8px;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: illusia-crown-float 3s ease-in-out infinite;
}

/* ::after — Aura de brilho dourado radial que pulsa */
.fictioneer-comment__badge.is-fcn_ilustre_patrono_de_illusia::after {
    content: "";
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.4) 0%, transparent 60%);
    animation: illusia-golden-sparkle 2s infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes illusia-tier5-glow {
    0%, 100% { box-shadow: var(--illusia-patreon-tier5-shadow); }
    50% { box-shadow: 0 0 20px hsl(45, 100%, 60%), 0 4px 12px rgba(0, 0, 0, 0.6); }
}

@keyframes illusia-crown-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}

@keyframes illusia-golden-sparkle {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* ==== TIER 4 — MESTRE DOS CONTOS — PRATA LUNAR ====
   Badge com blend multiplicativo de crateras lunares,
   icone de moeda com flutuacao e brilho alternado */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos {
    background: var(--illusia-patreon-tier4-texture), var(--illusia-patreon-tier4-bg);
    background-size: 20px 10px, auto;
    background-blend-mode: multiply;
    color: var(--illusia-patreon-silver-dark);
    border: var(--illusia-patreon-tier4-border);
    border-radius: 10px;
}

/* ::before — Moeda lunar com animacoes de flutuacao e brilho */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 20%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--illusia-patreon-tier4-icon);
    animation: illusia-lunar-float 6s ease-in-out infinite, illusia-lunar-glow 4s alternate infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)) contrast(1.1);
}

/* ::after — Aura radial atras do badge que pulsa suavemente */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    transform: translateY(-50%);
    opacity: 0.3;
    z-index: -1;
    animation: illusia-lunar-aura 5s infinite;
}

/* Texto interno do badge — ajuste fino de posicao e sombra */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos > span {
    display: inline-block;
    transform: translateY(1px);
    padding-left: 6px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(255, 255, 255, 0.4);
    color: var(--illusia-patreon-tier4-text);
    font-weight: 700;
}

/* Hover: eleva e aplica sombra interna luminosa */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), inset 0 -3px 6px rgba(255, 255, 255, 0.6);
}

/* Hover: acelera animacoes do icone */
.fictioneer-comment__badge.is-fcn_mestre_dos_contos:hover::before {
    animation-duration: 4s, 4s;
}

@keyframes illusia-lunar-float {
    0%, 100% { transform: translateY(-50%) rotate(-8deg) scale(0.97); }
    33% { transform: translateY(-51%) rotate(0deg) scale(1.02); }
    66% { transform: translateY(-49%) rotate(8deg) scale(0.99); }
}

@keyframes illusia-lunar-glow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1) drop-shadow(2px 2px 3px gray); }
}

@keyframes illusia-lunar-aura {
    0%, 100% { transform: translateY(-50%) scale(0.95); }
    50% { transform: translateY(-50%) scale(1.1); }
}

/* ==== TIER 3 — GUARDIAO DAS CRONICAS — BRONZE RUNICO ====
   Badge com textura de runas, icone de escudo com
   gradiente bronze, overlay metalico diagonal */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas {
    background: var(--illusia-patreon-tier3-texture), var(--illusia-patreon-tier3-bg);
    background-size: 30px 30px;
    border: var(--illusia-patreon-tier3-border);
    border-radius: 6px;
    box-shadow: var(--illusia-patreon-tier3-shadow);
    color: var(--illusia-patreon-tier3-text);
    transition: all 0.3s ease;
}

/* ::before — Escudo com gradiente bronze, sombra forte */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 30%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--illusia-patreon-tier3-icon);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.9)) brightness(1.05);
    transition: transform 0.3s ease;
}

/* Texto com sombra clara/escura para efeito de relevo */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas > span {
    padding-left: 8px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3), 0 -1px 1px rgba(0, 0, 0, 0.2);
}

/* ::after — Overlay com gradiente diagonal para brilho metalico */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Hover: leve elevacao e sombra interna */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2), inset 0 -3px 6px rgba(255, 255, 255, 0.3);
}

/* Hover: escudo roda e escala */
.fictioneer-comment__badge.is-fcn_guardio_das_crnicas:hover::before {
    transform: translateY(-50%) rotate(15deg) scale(1.1);
}

/* ==== TIER 2 — CRONISTA ILLUSORIO — ESMERALDA ESCOLASTICA ====
   Badge com barras elficas horizontais, icone de gema,
   overlay com textura adicional */
.fictioneer-comment__badge.is-fcn_cronista_illusrio {
    background: var(--illusia-patreon-tier2-texture), var(--illusia-patreon-tier2-bg);
    background-size: 40px 40px;
    border: var(--illusia-patreon-tier2-border);
    border-radius: 5px;
    box-shadow: var(--illusia-patreon-tier2-shadow);
    color: var(--illusia-patreon-tier2-text);
    transition: all 0.3s ease;
}

/* ::before — Gema em camadas com sombra esverdeada */
.fictioneer-comment__badge.is-fcn_cronista_illusrio::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 40%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--illusia-patreon-tier2-icon) center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 40, 20, 0.4)) brightness(1.05);
    transition: transform 0.3s ease;
}

/* Texto com sombra esverdeada para contraste */
.fictioneer-comment__badge.is-fcn_cronista_illusrio > span {
    padding-left: 8px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-shadow: 0 2px 3px rgba(0, 40, 20, 0.5), 0 -1px 1px rgba(255, 255, 255, 0.2);
}

/* ::after — Overlay com gradiente e textura adicional para realce */
.fictioneer-comment__badge.is-fcn_cronista_illusrio::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%),
                var(--illusia-patreon-tier2-texture-after);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Hover: elevacao e sombra esverdeada */
.fictioneer-comment__badge.is-fcn_cronista_illusrio:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 40, 20, 0.3), inset 0 -3px 6px rgba(255, 255, 255, 0.4);
}

/* Hover: anima o icone com efeito de abertura de pergaminho */
.fictioneer-comment__badge.is-fcn_cronista_illusrio:hover::before {
    animation: illusia-scroll-open 0.8s ease;
}

@keyframes illusia-scroll-open {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.1) rotate(-5deg); }
}

/* ==== TIER 1 — EXPLORADOR DE ILLUSIA — AMETISTA ESTELAR ====
   Badge com particulas cristalinas, icone de orbe
   com diamante, aura mistica radial */
.fictioneer-comment__badge.is-fcn_explorador_de_illusia {
    background: var(--illusia-patreon-tier1-texture), var(--illusia-patreon-tier1-bg);
    background-size: 40px 40px;
    border: var(--illusia-patreon-tier1-border);
    border-radius: 5px;
    box-shadow: var(--illusia-patreon-tier1-shadow);
    color: var(--illusia-patreon-tier1-text);
    transition: all 0.3s ease;
}

/* ::before — Orbe ametista com diamante interno */
.fictioneer-comment__badge.is-fcn_explorador_de_illusia::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 30%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--illusia-patreon-tier1-icon);
    filter: drop-shadow(0 1px 3px rgba(128, 90, 213, 0.4)) brightness(1.05);
}

/* Texto com brilho ametista e sombra profunda */
.fictioneer-comment__badge.is-fcn_explorador_de_illusia > span {
    padding-left: 8px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(159, 122, 234, 0.4), 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* ::after — Aura mistica com particulas estelares */
.fictioneer-comment__badge.is-fcn_explorador_de_illusia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
                var(--illusia-patreon-tier1-texture-after);
    mix-blend-mode: screen;
    pointer-events: none;
}

.fictioneer-comment__badge.is-fcn_explorador_de_illusia:hover {
    transform: translateY(-2px);
}

.fictioneer-comment__badge.is-fcn_explorador_de_illusia:hover::before {
    animation-duration: 4s;
    filter: brightness(1.2);
}

/* ==== TIER 0 — ILLUSIANO — Gratuito ==== */
.fictioneer-comment__badge.is-fcn_illusiano {
    background: var(--illusia-patreon-leitor-bg);
    color: var(--illusia-patreon-badge-dark);
}

/* ==================================================
   4) CARGOS DE CONTEUDO
================================================== */
/* Agrupando apenas a propriedade "color" em comum */
.fictioneer-comment__badge.is-editor,
.fictioneer-comment__badge.is-fcn_moderator,
.fictioneer-comment__badge.is-fcn_revisor,
.fictioneer-comment__badge.is-fcn_autor,
.fictioneer-comment__badge.is-fcn_tradutor,
.fictioneer-comment__badge.is-fcn_novato,
.fictioneer-comment__badge.is-fcn_designer,
.fictioneer-comment__badge.is-author,
.fictioneer-comment__badge.is-contributor {
    color: var(--illusia-patreon-badge-light);
}

.fictioneer-comment__badge.is-fcn_leitor,
.fictioneer-comment__badge.is-subscriber,
.fictioneer-comment__badge.is-translator {
    color: var(--illusia-patreon-badge-dark);
}

/* Backgrounds individuais */
.fictioneer-comment__badge.is-editor { background: var(--illusia-patreon-editor-bg); }
.fictioneer-comment__badge.is-fcn_moderator { background: var(--illusia-patreon-moderator-bg); }
.fictioneer-comment__badge.is-fcn_revisor { background: var(--illusia-patreon-revisor-bg); }
.fictioneer-comment__badge.is-fcn_autor { background: var(--illusia-patreon-autor-bg); }
.fictioneer-comment__badge.is-fcn_tradutor { background: var(--illusia-patreon-tradutor-bg); }
.fictioneer-comment__badge.is-fcn_novato { background: var(--illusia-patreon-novato-bg); }
.fictioneer-comment__badge.is-fcn_designer { background: var(--illusia-patreon-designer-bg); }
.fictioneer-comment__badge.is-author { background: var(--illusia-patreon-author-bg); }
.fictioneer-comment__badge.is-contributor { background: var(--illusia-patreon-contributor-bg); }
.fictioneer-comment__badge.is-fcn_leitor { background: var(--illusia-patreon-leitor-bg); }
.fictioneer-comment__badge.is-subscriber { background: var(--illusia-patreon-subscriber-bg); }
.fictioneer-comment__badge.is-translator { background: var(--illusia-patreon-translator-bg); }

/* ==================================================
   COMENTARIOS COM DESTAQUE ESPECIAL
   Borda colorida por tier no container do comentario
================================================== */
.fictioneer-comment__container {
    background: var(--comment-background);
    line-height: 1.6;
    border: 1px solid var(--comment-border, rgba(0, 0, 0, 0));
    border-radius: var(--layout-border-radius-small, var(--r-sm));
    background-origin: border-box;
    padding: 0.75rem;
}

.fictioneer-comment__container.is-fcn_ilustre_patrono_de_illusia {
    --comment-border: 2px solid var(--illusia-patreon-gold);
}

.fictioneer-comment__container.is-fcn_mestre_dos_contos {
    --comment-border: 2px solid var(--illusia-patreon-silver-dark);
}

.fictioneer-comment__container.is-fcn_guardio_das_crnicas {
    --comment-border: 2px solid var(--illusia-patreon-bronze-dark);
}

.fictioneer-comment__container.is-fcn_cronista_illusrio {
    --comment-border: 2px solid var(--illusia-patreon-emerald-dark);
}

/* Tier message (content lock premium): markup `.illusia-tier-message__*` +
   `.button._secondary` renderizado por `illusia_get_tier_message()` em
   illusia-single-chapter.php, estilizado em illusia-single-chapter.css §11c.
   Bloco legado pré-BEM (.tier-badge/.tier-title/.patreon-button) removido
   em v2.3.0 (S11) — sem consumer + duplicava `.illusia-tier-message`. */

/* Badge chooser do Patreon REMOVIDO em v1.68.0 — emblema do comentário agora
   vem da cadeia geral em illusia-badges.php (prio 30), que cobre identidade
   Patreon + conquistas das outras trilhas sob um único chooser unificado. */

/* ==================================================
   REDUCED MOTION
   Badges de tier têm animações infinitas decorativas
   (glow/float/sparkle). `[class]` empata a especificidade
   com `.fictioneer-comment__badge.is-*` — este bloco no
   fim do arquivo vence por ordem.
================================================== */
@media (prefers-reduced-motion: reduce) {
    .fictioneer-comment__badge[class],
    .fictioneer-comment__badge[class]::before,
    .fictioneer-comment__badge[class]::after {
        animation: none;
        transition: none;
    }
}