/* ==========================================================================
   pw144.theclassic.games — tema épico (2026-09-06)
   Mesma linguagem do hub theclassicpw.com (views/home.php de lá): tinta escura com brilhos
   bronze, vinheta e brasas subindo; títulos serifados em degradê dourado com kicker e filete;
   molduras bronze com cantos dourados; botões dourados retos (sem a inclinação do T&L).
   Carregado no base/header.php DEPOIS do tema T&L e do site-extras.css: aqui só há
   sobrescritas. A topbar e o footer globais da rede não são tocados.
   ========================================================================== */

:root {
    --tcg-bronze: #c59768;
    --tcg-bronze-deep: #a66b42;
    --tcg-gold: #f4d2a1;
    --tcg-cream: #fde6ca;
    --tcg-ink: #0d0c10;
    --tcg-serif: Ellipsis, JapanLight, TL, Times, "Times New Roman", serif;
    --tcg-serif-head: Ellipsis, JapanHeavy, TLHeader, Times, "Times New Roman", serif;
    --tcg-sans: "Amazon Ember", "IBM Plex Sans", Arial, sans-serif;
    --tcg-gold-text: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768), #fff;
}

/* ---------- 1) Atmosfera (fixa, atrás de tudo) ----------
   O tema T&L já pinta a fumaça (.ags-Background--center, z-index -1). Aqui entram os brilhos
   bronze do hub e a vinheta (abaixo da fumaça) e as brasas (acima dela).
   Fundo épico PRETO (2026-09-29): as artes dos banners fecham em preto puro e o céu cinza-arroxeado
   + fumaça a .3 deixavam um degrau visível logo abaixo delas (/news, /guides). Base #000, brilhos
   mais contidos e fumaça quase apagada; as brasas continuam. */
.tcg-sky {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(197, 151, 104, .07), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(166, 107, 66, .10), transparent 70%),
        #000;
}

.tcg-sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .75) 100%);
}

.ags-Background--center {
    opacity: .1;
}

/* Banner das páginas internas: a base da arte dissolve no fundo (sem corte reto, qualquer que seja
   a imagem). Fora o FAQ, cuja arte emenda na imagem de fundo das perguntas (faqbg). */
.id_45999cad-0dd2-46ed-9643-ca22ceb9ee64 > .ags-ContentModule-backgroundContainer,
.id_382e4d5d-934d-425e-b0d8-d09eafb0e041 > .ags-ContentModule-backgroundContainer,
.id_search_hero > .ags-ContentModule-backgroundContainer {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.tcg-embers {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.tcg-embers i {
    position: absolute;
    bottom: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 222, 170, .95) 0%, rgba(244, 160, 80, .55) 45%, transparent 70%);
    filter: drop-shadow(0 0 6px rgba(244, 170, 90, .6));
    opacity: 0;
    animation: tcgEmber var(--d, 16s) linear var(--t, 0s) infinite;
    will-change: transform, opacity;
}

.tcg-embers i:nth-child(1)  { left: 6%;  --d: 15s; --t: 0s;   --sx: 18px; }
.tcg-embers i:nth-child(2)  { left: 14%; --d: 19s; --t: -6s;  --sx: -24px; }
.tcg-embers i:nth-child(3)  { left: 22%; --d: 13s; --t: -2s;  --sx: 30px; }
.tcg-embers i:nth-child(4)  { left: 31%; --d: 21s; --t: -11s; --sx: -14px; }
.tcg-embers i:nth-child(5)  { left: 39%; --d: 16s; --t: -4s;  --sx: 22px; }
.tcg-embers i:nth-child(6)  { left: 47%; --d: 18s; --t: -9s;  --sx: -30px; }
.tcg-embers i:nth-child(7)  { left: 55%; --d: 14s; --t: -1s;  --sx: 16px; }
.tcg-embers i:nth-child(8)  { left: 62%; --d: 20s; --t: -13s; --sx: -20px; }
.tcg-embers i:nth-child(9)  { left: 70%; --d: 17s; --t: -7s;  --sx: 26px; }
.tcg-embers i:nth-child(10) { left: 78%; --d: 15s; --t: -3s;  --sx: -18px; }
.tcg-embers i:nth-child(11) { left: 85%; --d: 22s; --t: -15s; --sx: 12px; }
.tcg-embers i:nth-child(12) { left: 92%; --d: 16s; --t: -5s;  --sx: -28px; }
.tcg-embers i:nth-child(13) { left: 27%; --d: 24s; --t: -17s; --sx: 8px; }
.tcg-embers i:nth-child(14) { left: 66%; --d: 23s; --t: -19s; --sx: -10px; }

@keyframes tcgEmber {
    0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    8%   { opacity: .9; }
    50%  { transform: translate3d(var(--sx, 20px), -45vh, 0) scale(1); }
    100% { transform: translate3d(calc(var(--sx, 20px) * -1), -105vh, 0) scale(.4); opacity: 0; }
}

/* Páginas que pintavam um fundo preto opaco por cima da atmosfera */
.ags-l-site-main,
.ags-NewsArticlePage,
.tcg-about {
    background-color: transparent !important;
}

/* ---------- 2) Títulos ---------- */
/* Cabeçalho das páginas internas (Notícias, Guias, FAQ, Busca): kicker acima, filete abaixo */
.ags-ContentModule--center .ags-ContentModule-text-heading {
    letter-spacing: .06em;
}

.ags-ContentModule--center .ags-ContentModule-text-heading::before {
    content: "Perfect World \00b7 The Classic PW 1.4.4";
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 12px;
    font-family: var(--tcg-serif);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    background: none;
    color: var(--tcg-bronze);
    -webkit-text-fill-color: var(--tcg-bronze);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7);
    filter: none;
}

.ags-ContentModule--center .ags-ContentModule-text-heading::after {
    content: "";
    display: block;
    width: min(360px, 60%);
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, var(--tcg-bronze) 30%, var(--tcg-gold) 50%, var(--tcg-bronze) 70%, transparent);
}

/* Títulos de seção da home (Notícias recentes / Guias recentes): filete dourado embaixo */
.ags-ContainerModule-container-heading {
    letter-spacing: .06em;
}

.ags-ContainerModule-container-heading::after {
    content: "";
    display: block;
    width: 220px;
    max-width: 60%;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--tcg-gold), var(--tcg-bronze) 55%, transparent);
}

/* Rótulo "Notícias e informações" / "Guias de conteúdos" (setas do tema) em bronze */
.ags-HeroModule-storeIcons-carouselSlideName {
    color: var(--tcg-gold);
    letter-spacing: .14em;
}

/* ---------- 3) Botões (T&L inclinado -> CTA reto do hub) ----------
   Ficam de fora os controles do popup de mídia e as variantes de navegação do tema. */
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto !important;
    min-height: 46px;
    padding: 0 28px !important;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--tcg-serif);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    transform: none !important;
    transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

/* secundário: contorno dourado sobre vidro escuro */
.ags-ButtonV2--secondary.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) {
    color: var(--tcg-gold);
    border: 1px solid rgba(244, 210, 161, .55);
    background: linear-gradient(180deg, rgba(20, 16, 22, .75), rgba(20, 16, 22, .55));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

/* primário: dourado preenchido, texto escuro */
.ags-ButtonV2--primary.ags-ButtonV2:not(.ags-MediaPopup-controls) {
    color: #1a1510;
    border: 1px solid rgba(255, 236, 205, .7);
    background: linear-gradient(180deg, #fde6ca 0%, #e5b556 45%, #c59768 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 18px rgba(229, 181, 86, .25);
}

/* as camadas decorativas do T&L (metal riscado, moldura tracejada) saem de cena */
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-gradient,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-dashedBackground,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-previous,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-next,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-exit,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-inner-icon {
    display: none !important;
}

.ags-ButtonV2--primary.ags-ButtonV2 .ags-ButtonV2-inner,
.ags-ButtonV2--secondary.ags-ButtonV2:not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) .ags-ButtonV2-inner {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: auto;
    transform: none !important;
    pointer-events: none;
}

/* brilho que varre o botão */
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
    pointer-events: none;
}

.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit)::after {
    content: none !important;
    animation: none !important;
}

.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit):hover::before,
.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit):focus-visible::before {
    left: 120%;
}

.ags-ButtonV2--secondary.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit):hover,
.ags-ButtonV2--secondary.ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit):focus-visible {
    color: #1a1510;
    border-color: var(--tcg-gold);
    background: linear-gradient(180deg, #fde6ca, #e5b556 55%, #c59768);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 24px rgba(229, 181, 86, .35);
}

.ags-ButtonV2--primary.ags-ButtonV2:not(.ags-MediaPopup-controls):hover,
.ags-ButtonV2--primary.ags-ButtonV2:not(.ags-MediaPopup-controls):focus-visible {
    color: #1a1510;
    border-color: #fff3df;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 28px rgba(229, 181, 86, .5);
}

/* Fileira de botões-filtro das listagens (Notícias/Guias) respira melhor sem os 80px fixos */
.ags-ContainerModule-container-actions {
    gap: 10px;
}

/* ---------- 4) Cards (listas de notícias/guias, slots da home, busca) ---------- */
.ags-SlotModule-slotLink {
    position: relative;
    border: 1px solid rgba(197, 151, 104, .32);
    background: linear-gradient(160deg, rgba(22, 17, 26, .88), rgba(10, 9, 12, .94));
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
    transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}

.ags-SlotModule-slotLink::before,
.ags-SlotModule-slotLink::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border: 0 solid var(--tcg-gold);
    opacity: .75;
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}

.ags-SlotModule-slotLink::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
    transform-origin: top left;
}

.ags-SlotModule-slotLink::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
    transform-origin: bottom right;
}

.ags-SlotModule-slotLink:hover,
.ags-SlotModule-slotLink:focus-visible {
    border-color: rgba(229, 181, 86, .7);
    box-shadow: 0 0 0 1px rgba(229, 181, 86, .35), 0 30px 70px -20px rgba(229, 181, 86, .25), 0 24px 60px -24px rgba(0, 0, 0, .9);
    transform: translateY(-3px);
}

.ags-SlotModule-slotLink:hover::before,
.ags-SlotModule-slotLink:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.ags-SlotModule-slotLink-imageContainer-image {
    filter: saturate(.9) brightness(.92);
    transition: filter .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.ags-SlotModule-slotLink:hover .ags-SlotModule-slotLink-imageContainer-image {
    filter: saturate(1.05) brightness(1);
}

/* categoria: etiqueta bronze em vez da moldura tracejada do tema */
.ags-SlotModule-slotLink-info-subheading {
    padding: 2px 10px;
    background: rgba(13, 12, 16, .55);
    border: 1px solid rgba(197, 151, 104, .45);
    color: var(--tcg-bronze);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .68rem;
}

.ags-SlotModule-slotLink-info-heading {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.ags-SlotModule-slotLink-info-text {
    color: rgba(251, 249, 247, .74);
}

/* ---------- 5) Página de notícia / guia ---------- */
.ags-NewsArticlePage-contentWrapper-articlePane {
    position: relative;
    padding: clamp(22px, 4vw, 44px) clamp(18px, 4vw, 48px);
    border: 1px solid rgba(197, 151, 104, .32);
    background: linear-gradient(180deg, rgba(20, 16, 22, .82), rgba(10, 9, 12, .9));
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
    box-sizing: border-box;
}

.ags-NewsArticlePage-contentWrapper-articlePane::before,
.ags-NewsArticlePage-contentWrapper-articlePane::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 0 solid var(--tcg-gold);
    opacity: .8;
    pointer-events: none;
}

.ags-NewsArticlePage-contentWrapper-articlePane::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.ags-NewsArticlePage-contentWrapper-articlePane::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

.ags-NewsArticlePage-contentWrapper-articlePane-tag {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid rgba(197, 151, 104, .45);
    background: rgba(13, 12, 16, .55);
    /* texto branco (o T&L pinta a tag com gradiente bronze via background-clip: text) */
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .7rem;
}

/* ---------- 6) FAQ ---------- */
.ags-FaqModule-container-entry {
    border: 1px solid rgba(197, 151, 104, .28);
    border-left: 3px solid var(--tcg-bronze);
    background: linear-gradient(90deg, rgba(30, 22, 36, .88), rgba(14, 11, 18, .92));
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
}

.ags-FaqModule-container-entry:hover,
.ags-FaqModule-container-entry.is-open {
    border-color: rgba(229, 181, 86, .55);
    border-left-color: var(--tcg-cream);
    background: linear-gradient(90deg, rgba(44, 32, 50, .9), rgba(20, 15, 26, .94));
}

/* ---------- 7) Caixas próprias do site (Rumo ao lançamento, estado vazio) ----------
   Trocam o octógono recortado pela moldura do hub: borda bronze + cantos dourados. */
.tcg-launch,
.tcg-empty {
    clip-path: none;
    border: 1px solid rgba(197, 151, 104, .42);
    background:
        linear-gradient(90deg, rgba(244, 210, 161, .06), transparent 18%, transparent 82%, rgba(244, 210, 161, .06)),
        linear-gradient(180deg, rgba(22, 17, 26, .92), rgba(10, 9, 12, .96));
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9), inset 0 0 40px -20px rgba(197, 151, 104, .25);
}

.tcg-launch::before,
.tcg-empty::before,
.tcg-launch::after,
.tcg-empty::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 22px;
    height: 22px;
    border: 0 solid var(--tcg-gold);
    clip-path: none;
    opacity: .85;
    pointer-events: none;
}

.tcg-launch::before,
.tcg-empty::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.tcg-launch::after,
.tcg-empty::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* ---------- 8) Busca ---------- */
/* estado vazio: os links viram o CTA do hub (o view traz um <style> inline com pílulas arredondadas,
   por isso a especificidade maior) */
.ags-SiteSearch-empty p {
    font-family: var(--tcg-serif);
    font-size: 1.15rem;
    color: rgba(251, 249, 247, .82);
}

.ags-SiteSearch-empty .ags-SiteSearch-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 28px;
    border: 1px solid rgba(244, 210, 161, .55);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(20, 16, 22, .75), rgba(20, 16, 22, .55));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    color: var(--tcg-gold);
    font-family: var(--tcg-serif);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
}

.ags-SiteSearch-empty .ags-SiteSearch-actions a:hover,
.ags-SiteSearch-empty .ags-SiteSearch-actions a:focus-visible {
    color: #1a1510;
    border-color: var(--tcg-gold);
    background: linear-gradient(180deg, #fde6ca, #e5b556 55%, #c59768);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 24px rgba(229, 181, 86, .35);
}

.ags-SiteSearch-highlight {
    color: var(--tcg-cream);
    background: rgba(197, 151, 104, .22);
    padding: 0 2px;
}

.ags-SiteSearch-count {
    color: var(--tcg-bronze);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .74rem;
}

/* subtítulo "Resultados para ..." centralizado como o título */
.id_search_hero .ags-ContentModule-text-subheading,
.id_search_hero .ags-SiteSearch-count {
    text-align: center;
}

/* ---------- 9) Responsivo / movimento ---------- */
@media (max-width: 900px) {
    .tcg-embers i:nth-child(n+7) {
        display: none;
    }

    .ags-ContentModule--center .ags-ContentModule-text-heading::before {
        font-size: .6rem;
        letter-spacing: .26em;
    }

    .ags-ButtonV2:not(.ags-MediaPopup-controls):not(.ags-ButtonV2--secondary--nav):not(.ags-ButtonV2--secondary--exit) {
        min-height: 44px;
        padding: 0 20px !important;
        font-size: .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tcg-embers i {
        animation: none;
        display: none;
    }

    .ags-ButtonV2::before,
    .ags-SlotModule-slotLink,
    .ags-SlotModule-slotLink-imageContainer-image {
        transition-duration: .01s;
    }
}