/*
 * Arcane accent layer
 * A restrained violet counterpoint to OracleRP's gold and midnight palette.
 */

:root {
    --secondary-color: #9273e6;
    --secondary-light: #b49cff;
    --secondary-dark: #6549bd;
    --accent-color: #9273e6;
    --arcane-rgb: 146, 115, 230;
    --arcane-glow: 0 0 24px rgba(var(--arcane-rgb), 0.22);
    --border-radius: 3px;
}

::selection {
    color: #fff;
    background: rgba(var(--arcane-rgb), 0.72);
}

/* A fine screen-blended grain keeps large dark surfaces from feeling synthetic. */
body::before {
    content: '';
    position: fixed;
    z-index: 9997;
    inset: 0;
    pointer-events: none;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.72'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: screen;
}

/* Navigation: the violet appears while moving through the site. */
.navbar.scrolled {
    border-bottom: 1px solid rgba(var(--arcane-rgb), 0.16);
    box-shadow: 0 8px 30px rgba(35, 20, 75, 0.18);
}

.nav-menu a::after {
    background: linear-gradient(90deg, var(--secondary-dark), var(--secondary-light));
    box-shadow: 0 0 10px rgba(var(--arcane-rgb), 0.45);
}

.nav-menu a:hover i,
.nav-menu a.active i,
.social-icons a:hover {
    color: var(--secondary-light);
    filter: drop-shadow(0 0 6px rgba(var(--arcane-rgb), 0.45));
}

/* Titles keep their gold identity, with a faint arcane aura behind them. */
.section-header {
    isolation: isolate;
}

.section-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(520px, 90vw);
    height: 150px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(var(--arcane-rgb), 0.105), transparent 68%);
    transform: translate(-50%, -50%);
}

.section-title,
.page-title,
.streamer-hero h1 {
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.78),
        0 0 28px rgba(239, 203, 62, 0.2),
        0 0 48px rgba(var(--arcane-rgb), 0.16);
}

.separator,
.rules-separator {
    background: linear-gradient(
        90deg,
        transparent,
        var(--secondary-color) 22%,
        var(--primary-color) 50%,
        var(--secondary-color) 78%,
        transparent
    );
    box-shadow:
        0 0 10px rgba(239, 203, 62, 0.28),
        0 0 18px rgba(var(--arcane-rgb), 0.24);
}

/* Secondary actions now carry the secondary colour for a clear hierarchy. */
.cta-button.secondary {
    color: var(--secondary-light);
    border-color: var(--secondary-color);
    background: rgba(var(--arcane-rgb), 0.07);
    box-shadow: inset 0 0 18px rgba(var(--arcane-rgb), 0.04);
}

.cta-button.secondary:hover {
    color: #fff;
    border-color: var(--secondary-light);
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    box-shadow: var(--arcane-glow);
}

/* Straighter controls and labels feel more crafted and less template-like. */
:is(
    .cta-button,
    .small-button,
    .steam-button,
    .steam-profile-button,
    .print-button,
    .category-tab,
    .tab-button,
    .toc-tab,
    .streamer-kicker,
    .section-kicker,
    .community-kicker,
    .new-badge
) {
    border-radius: 2px;
}

:is(
    .search-container,
    .toc-search,
    .faq-search-section,
    .rules-tabs,
    .toc-wrapper,
    .rewards-table-wrapper,
    .discord-widget,
    .content-image,
    .faction-duel,
    .class-group
) {
    border-radius: 3px;
}

/* Soft environmental light on the main and inner-page heroes. */
.hero,
.page-header,
.streamer-hero {
    isolation: isolate;
}

.streamer-hero-content {
    z-index: 2;
}

.hero::after,
.page-header::after,
.streamer-hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 24%, rgba(var(--arcane-rgb), 0.13), transparent 28%),
        radial-gradient(circle at 86% 72%, rgba(101, 73, 189, 0.1), transparent 25%);
    mix-blend-mode: screen;
}

.footer-wordmark img {
    filter:
        drop-shadow(0 0 10px rgba(239, 203, 62, 0.4))
        drop-shadow(0 0 18px rgba(var(--arcane-rgb), 0.16));
}

.scroll-down a,
.back-to-top {
    box-shadow: 0 0 18px rgba(var(--arcane-rgb), 0.16);
}

.scroll-down a:hover,
.back-to-top:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    border-color: var(--secondary-color);
    box-shadow: var(--arcane-glow);
}

/* Repeated surfaces receive a fine violet rim only on interaction. */
:is(
    .server-info-card,
    .home-live-card,
    .class-card,
    .gallery-item,
    .faq-item,
    .rule-card,
    .toc-faction-card,
    .toc-special-card,
    .faction-section,
    .program-card,
    .provider-card,
    .tracking-card,
    .streamer-card
) {
    border-radius: 3px;
    outline: 1px solid rgba(var(--arcane-rgb), 0.07);
    outline-offset: -1px;
}

:is(
    .server-info-card,
    .home-live-card,
    .class-card,
    .gallery-item,
    .faq-item,
    .rule-card,
    .toc-faction-card,
    .toc-special-card,
    .faction-section,
    .provider-card,
    .streamer-card
):hover {
    outline-color: rgba(var(--arcane-rgb), 0.4);
    box-shadow:
        5px 5px 0 rgba(var(--arcane-rgb), 0.09),
        0 12px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(180, 156, 255, 0.1);
}

/* Tabs, filters and small labels are ideal places for the new accent. */
:is(
    .category-tab.active,
    .tab-button.active,
    .toc-tab.active
) {
    border-color: rgba(var(--arcane-rgb), 0.62);
    box-shadow:
        0 0 18px rgba(var(--arcane-rgb), 0.14),
        inset 0 -2px 0 var(--secondary-color);
}

.streamer-kicker,
.section-kicker,
.card-eyebrow,
.rule-label,
.tag,
.home-live-kicker,
.community-kicker {
    border-color: rgba(var(--arcane-rgb), 0.3);
    box-shadow: inset 0 0 14px rgba(var(--arcane-rgb), 0.055);
}

.streamer-kicker i,
.section-kicker i,
.card-eyebrow i,
.tracking-card h3 i {
    color: var(--secondary-light);
}

/* Form focus is both visible and consistent across FAQ/rules/account pages. */
:is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid var(--secondary-light);
    outline-offset: 3px;
}

.search-container:focus-within,
.toc-search:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(var(--arcane-rgb), 0.1), var(--arcane-glow);
}

.footer {
    box-shadow: inset 0 1px 0 rgba(var(--arcane-rgb), 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu a::after,
    .cta-button.secondary {
        transition: none;
    }
}

@media (max-width: 768px) {
    body::before {
        opacity: 0.024;
        background-size: 150px 150px;
    }
}