/* WoW Circle–inspired polish layer (dark #0e0e0e + warm gold #dec1b0) */

:root {
    --wow-black: #0e0e0e;
    --wow-panel: #121010;
    --wow-panel-deep: #0a0808;
    --wow-gold: #dec1b0;
    --wow-gold-light: #ecd8c4;
    --wow-gold-dark: #8a6848;
    --wow-border: #2a2018;
    --wow-border-light: #4a3830;
}

/* ── Branded page loader (wowcircle .loader pattern) ── */
.site-page-loader.is-visible {
    background: var(--wow-black) !important;
}

.site-page-loader.is-visible .site-page-loader__panel {
    gap: 18px;
}

.site-page-loader.is-visible .site-page-loader__spinner {
    display: none;
}

.site-page-loader.is-visible .site-page-loader__panel::before {
    content: "";
    display: block;
    width: min(462px, 93vw);
    height: 198px;
    background: url("../images/hell-logo.png") center / contain no-repeat;
    filter: drop-shadow(0 0 24px rgba(222, 193, 176, 0.18));
    animation: siteLogoLoaderPulse 2.2s ease-in-out infinite;
}

.site-page-loader.is-visible .site-page-loader__text {
    display: block;
    color: var(--wow-gold-dark);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@keyframes siteLogoLoaderPulse {
    0%, 100% { opacity: 0.82; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

/* ── Hero: logo ── */
.site-hero {
    position: relative;
    padding-bottom: 4px;
}

.site-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(520px, 72vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(222, 193, 176, 0.35), transparent);
    pointer-events: none;
}

.site-logo-link {
    display: block;
    transition: filter 0.35s ease, transform 0.35s ease;
}

.site-logo-link:hover {
    transform: translateY(-2px);
}

.site-logo-link:hover .site-logo {
    filter:
        drop-shadow(0 0 22px rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 14px rgba(222, 193, 176, 0.32))
        drop-shadow(0 14px 28px rgba(0, 0, 0, 0.88)) !important;
}

/* ── Block-title pattern (section headers) ── */
.PageHeader-module__HZea0q__header {
    border-bottom: 1px solid rgba(222, 193, 176, 0.12) !important;
    margin-bottom: 0;
}

.PageHeader-module__HZea0q__header::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(222, 193, 176, 0.28), transparent);
    pointer-events: none;
}

.PageHeader-module__HZea0q__title {
    color: var(--wow-gold) !important;
    letter-spacing: 0.06em !important;
    text-shadow: 0 0 10px rgba(222, 193, 176, 0.2), 1px 2px 3px #000 !important;
    text-transform: uppercase !important;
}

/* ── Panel boxes: dark frame + gold hairline ── */
.LoginBox-module__27JC-W__box,
.MenuBox-module__1GrUIG__box,
.BoostedBox-module__6IRxPW__box,
.DiscordBox-module__Stqp1a__box,
.WikiBox-module__PxAH9a__box,
.webshop-widget {
    position: relative;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}

.LoginBox-module__27JC-W__box::before,
.MenuBox-module__1GrUIG__box::before,
.BoostedBox-module__6IRxPW__box::before,
.DiscordBox-module__Stqp1a__box::before,
.WikiBox-module__PxAH9a__box::before,
.webshop-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(222, 193, 176, 0.09);
    z-index: 2;
}

/* ── Sidebar nav: uppercase links (wowcircle .nav-area.uc) ── */
.MenuBox-module__1GrUIG__menuLink {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-left: 2px solid transparent !important;
    padding-left: 10px !important;
    transition: all 0.18s ease !important;
}

.MenuBox-module__1GrUIG__menuLink:hover,
.MenuBox-module__1GrUIG__menuLinkActive {
    color: var(--wow-gold-light) !important;
    border-left-color: var(--wow-gold-dark) !important;
    background: linear-gradient(90deg, rgba(222, 193, 176, 0.1), transparent) !important;
    text-shadow: 0 0 8px rgba(222, 193, 176, 0.25) !important;
}

/* ── Gold CTA buttons (wowcircle .yellow-button) ── */
.LoginBox-module__27JC-W__btnPrimary,
.webshop-btn,
.WikiBox-module__PxAH9a__button,
.DiscordBox-module__Stqp1a__button,
a[href="downloads.php"].flex,
a[href="/download"].flex {
    background: linear-gradient(180deg, #a86830 0%, #7a4018 42%, #3a1808 100%) !important;
    border-color: #c89858 !important;
    color: #fff8ee !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    box-shadow:
        0 0 16px rgba(200, 152, 88, 0.22),
        inset 0 1px 0 rgba(255, 240, 220, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
}

.LoginBox-module__27JC-W__btnPrimary:hover,
.webshop-btn:hover,
.WikiBox-module__PxAH9a__button:hover,
.DiscordBox-module__Stqp1a__button:hover,
a[href="downloads.php"].flex:hover,
a[href="/download"].flex:hover {
    background: linear-gradient(180deg, #c88848 0%, #985028 42%, #4a2010 100%) !important;
    border-color: var(--wow-gold) !important;
    box-shadow:
        0 0 22px rgba(222, 193, 176, 0.28),
        inset 0 1px 0 rgba(255, 248, 238, 0.35) !important;
}

/* ── Topbar ── */
.TopBar-module__LYwH0W__topbar {
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(222, 193, 176, 0.06) !important;
}

.TopBar-module__LYwH0W__topbarLink,
.TopBar-module__LYwH0W__onlineLabel {
    letter-spacing: 0.04em;
}

.TopBar-module__LYwH0W__onlineNumber.online {
    color: #7dd87a !important;
    text-shadow: 0 0 8px rgba(125, 216, 122, 0.35);
}

/* ── Main content panel ── */
.PageBody-module__OAJIWq__body {
    border-top: 1px solid rgba(222, 193, 176, 0.06) !important;
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.65),
        0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

.PageBody-module__OAJIWq__content {
    padding-top: 20px !important;
}

/* ── News cards (wowcircle .news-item) ── */
.news-item {
    border: 1px solid var(--wow-border) !important;
    border-radius: 4px;
    background: linear-gradient(180deg, #161210, #0e0c0c) !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.news-item:hover {
    border-color: var(--wow-border-light) !important;
    box-shadow: 0 0 18px rgba(222, 193, 176, 0.08);
    transform: translateY(-1px);
}

.news-item.open {
    border-color: rgba(200, 152, 88, 0.45) !important;
    box-shadow: 0 0 22px rgba(222, 193, 176, 0.12);
}

/* ── Table row hover: warm gold wash ── */
table tr.cursor-pointer:hover,
tr:hover {
    background: linear-gradient(90deg, rgba(18, 14, 12, 0.5) 0%, rgba(222, 193, 176, 0.12) 50%, rgba(18, 14, 12, 0.5) 100%) !important;
}

/* ── Footer gold rule ── */
footer {
    position: relative;
    box-shadow: inset 0 1px 0 rgba(222, 193, 176, 0.08) !important;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(680px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(222, 193, 176, 0.22), transparent);
    pointer-events: none;
}

/* ── Boosted / widget headers gold accent ── */
.BoostedBox-module__6IRxPW__headerTitle,
.DiscordBox-module__Stqp1a__headerTitle,
.WikiBox-module__PxAH9a__headerTitle,
.webshop-header h3 {
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ── Horror game atmosphere ── */
body {
    background-color: #020101;
}

.site-horror-bg {
    background-color: #030202;
    background-image:
        linear-gradient(180deg, rgba(2, 0, 0, 0.72) 0%, rgba(6, 2, 2, 0.58) 42%, rgba(1, 0, 0, 0.88) 100%),
        radial-gradient(circle at 50% 0%, rgba(180, 36, 20, 0.18) 0, transparent 32rem),
        radial-gradient(circle at 14% 80%, rgba(48, 6, 28, 0.24) 0, transparent 24rem),
        url("../images/background-horror.png");
    background-size: cover, cover, cover, cover;
    background-position: center top, center top, center top, center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.site-horror-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.site-horror-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 72%, rgba(0, 0, 0, 0.65) 100%);
}

@keyframes siteHorrorFogDrift {
    0%, 100% { opacity: 0.42; transform: translateX(0); }
    50% { opacity: 0.58; transform: translateX(-1.5%); }
}

.dark-overlay {
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.78) 72%, rgba(0, 0, 0, 0.96) 100%),
        radial-gradient(circle at 50% 10%, rgba(200, 48, 24, 0.12) 0, transparent 24rem),
        linear-gradient(180deg, rgba(4, 0, 0, 0.62) 0%, rgba(10, 4, 4, 0.84) 55%, rgba(2, 0, 0, 0.96) 100%) !important;
    animation: siteHorrorFogDrift 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .dark-overlay {
        animation: none;
    }
}

.min-h-screen.relative[style*="background-image"] {
    background-image:
        linear-gradient(180deg, #030202ee 0%, #0a0404dd 50%, #020101f5 100%),
        radial-gradient(circle at 50% 0%, rgba(140, 24, 16, 0.22) 0, transparent 28rem),
        url("../images/background-horror.png") !important;
}