* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #c5a059;
    --primary-rgb: 197, 160, 89;
    --primary-dark: #8e6f2f;
    --primary-light: #e2c28a;
    --primary-glow: rgba(197, 160, 89, 0.4);
    --accent: #8b6b31;
    --bg-modal: rgba(9, 11, 16, 0.96);
    --badge-logue: #2ecc71;
    --badge-rate: #3498db;
    --badge-promo: #f39c12;
    --stat-gold: #f1c40f;
    --stat-light: #ecf0f1;
    --bg-dark: #0f1115;
    --bg-dark-rgb: 15, 17, 21;
    --bg-footer: #090b0f;
    --bg-card: rgba(255, 255, 255, 0.04);
    --border-glass: rgba(255, 255, 255, 0.12);
    --text-main: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.65);
    --nav-height: 80px;
    /* veu aplicado sobre a imagem de fundo nas secoes de conteudo.
       0 = imagem 100% limpa, 1 = fundo escuro solido. */
    --section-scrim: rgba(var(--bg-dark-rgb), 0.35);
    --section-blur: 3px;
    --footer-scrim: rgba(var(--bg-dark-rgb), 0.62);
    /* recorte vertical da imagem de fundo. 0% = mostra o topo da imagem,
       50% = centro, 100% = base. Sobrescrito por dynamic-styles.php. */
    --bg-pos-y: 0%;
}

body,
html {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main, #ffffff);
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-height: 1.6;
    background: var(--bg-dark, #0f1115);
}

body {
    position: relative;
    min-height: 100vh;
}

body.loading {
    overflow: hidden;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(var(--bg-dark-rgb), 0.8) 100%);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
}

.preloader-duel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    perspective: 1000px;
}

.preloader-logo {
    width: 180px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    transition: all 0.5s ease;
}

.preloader-logo.ice {
    animation: fadeInScale 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards, floatingLogo 4s ease-in-out infinite 1.5s;
    filter: drop-shadow(0 0 20px var(--primary-glow));
}

.loader-bar {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 15px;
    border-radius: 10px;
    overflow: hidden;
}

.loader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), #e2c28a);
    animation: fillLoader 2.5s ease-in-out forwards;
}

.preloader-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
}

@keyframes fillLoader {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #1a1a1a;
    border-radius: 5px;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(var(--bg-dark-rgb), 0.85);
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    will-change: padding, background;
}

.nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-logo-img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 0 10px var(--primary-glow));
    transition: all 0.3s ease;
}

.nav-logo:hover .nav-logo-img {
    filter: drop-shadow(0 0 15px var(--primary-glow));
    transform: scale(1.05);
}

.brand-text {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--primary-glow);
    transition: all 0.3s ease;
}

.nav-logo:hover .brand-text {
    color: var(--primary);
    text-shadow: 0 0 15px var(--primary-glow), 0 0 30px rgba(var(--primary-rgb), 0.3);
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: var(--text-dim);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary-glow);
}

.nav-links a i {
    margin-right: 6px;
}

.btn-nav-panel {
    background: var(--primary);
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 4px;
    box-shadow: 0 0 15px var(--primary-glow);
}

.btn-nav-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--primary-glow);
    background: var(--primary-light);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.bg-fixed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-image,
.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-bg-container {
    background: var(--bg-dark, #0f1115);
}

.bg-image {
    background-size: cover;
    background-position: center var(--bg-pos-y, 50%);
    background-repeat: no-repeat;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) grayscale(0.1);
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 0.45s ease;
    background: transparent;
}

.video-bg.is-ready {
    opacity: 1;
}

.video-bg-container.is-youtube {
    overflow: hidden;
}

.youtube-bg-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    filter: brightness(0.5) grayscale(0.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--bg-dark-rgb), 0.12), rgba(var(--bg-dark-rgb), 0.34), rgba(var(--bg-dark-rgb), 0.55));
    z-index: 1;
}

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.full-page,
.page-content,
.main-footer {
    position: relative;
    z-index: 5;
}

section {
    padding: 120px 0;
    position: relative;
    background: var(--section-scrim);
    backdrop-filter: blur(var(--section-blur));
    z-index: 5;
    will-change: transform, opacity;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 15px var(--primary-glow);
}

.section-desc {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
    color: var(--text-dim);
}

.section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.section-head-row .section-title,
.section-head-row .section-desc {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.btn-small-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.42);
    border-radius: 6px;
    color: #fff;
    background: rgba(var(--primary-rgb), 0.12);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.btn-small-link:hover {
    background: rgba(var(--primary-rgb), 0.22);
    border-color: rgba(var(--primary-rgb), 0.82);
}

.section-news,
.section-news-page,
.section-classes-page {
    background: var(--section-scrim);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-grid-page {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.news-card {
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--bg-dark-rgb), 0.88), rgba(var(--bg-dark-rgb), 0.96));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.news-card.featured {
    border-color: rgba(var(--primary-rgb), 0.52);
}

.news-image {
    display: block;
    height: 170px;
    background: rgba(255, 255, 255, 0.04);
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-content {
    padding: 18px;
}

.news-date {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.news-content h3 {
    margin: 0 0 10px;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
}

.news-content h3 a {
    color: #fff;
    text-decoration: none;
}

.news-content h3 a:hover {
    color: var(--primary-light);
}

.news-content p {
    color: var(--text-dim);
    line-height: 1.6;
}

.news-detail-card {
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.24);
    border-radius: 8px;
    background: rgba(var(--bg-dark-rgb), 0.88);
}

.news-detail-card > img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
}

.news-detail-content {
    max-width: 880px;
    padding: 30px;
}

.news-detail-content h2 {
    margin: 6px 0 12px;
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
}

.news-detail-content.is-centered h2,
.news-detail-content.is-centered .news-detail-excerpt,
.news-detail-content.is-centered .news-date,
.news-detail-content.is-centered .news-body {
    text-align: center;
}

.news-detail-content.is-centered .patch-meta-row {
    justify-content: center;
}

.news-detail-excerpt {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 22px;
}

.news-body {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}

.news-body p,
.news-body ul,
.news-body ol,
.news-body blockquote,
.news-body pre {
    margin: 0 0 16px;
}

.news-body h2,
.news-body h3,
.news-body h4 {
    margin: 26px 0 12px;
    color: #fff;
    font-family: 'Cinzel', serif;
    line-height: 1.3;
}

.news-body ul,
.news-body ol {
    padding-left: 24px;
}

.news-body li {
    margin-bottom: 6px;
}

.news-body a {
    color: var(--primary-light);
    text-decoration: underline;
}

.news-body blockquote {
    padding: 12px 16px;
    border-left: 3px solid rgba(var(--primary-rgb), 0.65);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 6px;
}

.news-body code {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .9em;
}

.news-body pre {
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(6, 8, 12, 0.8);
}

.news-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

.news-body .ql-align-center {
    text-align: center;
}

.news-body .ql-align-right {
    text-align: right;
}

.news-body .ql-align-justify {
    text-align: justify;
}

.news-body img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    border-radius: 8px;
}

.news-body img.ql-align-center,
.news-body .ql-align-center img {
    margin-left: auto;
    margin-right: auto;
}

.news-body img.ql-align-right,
.news-body .ql-align-right img {
    margin-left: auto;
    margin-right: 0;
}

.news-body img.ql-align-justify,
.news-body .ql-align-justify img {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 800;
    margin-bottom: 12px;
}

.empty-public-state {
    padding: 28px;
    border: 1px dashed rgba(var(--primary-rgb), 0.28);
    border-radius: 8px;
    color: var(--text-dim);
    text-align: center;
    background: rgba(var(--bg-dark-rgb), 0.6);
}

.section-combined {
    padding: 100px 0;
}

.info-main {
    max-width: 1000px;
    margin: 0 auto;
}

.info-nested-classes {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}

.classes-more-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.subsection-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.9;
}


@media (min-width: 1200px) {
    .info-grid-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 60px;
    }

    .info-main,
    .info-classes {
        width: 100%;
        flex: none;
    }
}

.section-hero {
    min-height: 85vh;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: transparent;
    backdrop-filter: none;
    position: relative;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.1);
    opacity: 0;
    transition: opacity 0.45s ease;
    background: transparent;
}

.hero-video.is-ready {
    opacity: 1;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(15, 17, 21, 0.1) 0%, rgba(15, 17, 21, 0.5) 100%);
    z-index: 2;
}

.hero-content {
    max-width: 900px;
    padding: 0 20px;
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}



.hero-title {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-main-logo {
    max-width: 380px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 30px var(--primary-glow));
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-main-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 50px var(--primary-glow));
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary,
.btn-secondary {
    padding: 18px 45px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: all 0.4s ease;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 20px var(--primary-glow);
}

.btn-secondary {
    background: rgba(var(--primary-rgb), 0.15);
    color: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-discord {
    padding: 18px 45px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: all 0.4s ease;
    background: #5865F2;
    
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-discord i {
    font-size: 1.2rem;
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 40px var(--primary-glow);
    background: var(--primary-light);
    color: #000;
}

.btn-secondary:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-discord:hover {
    background: rgba(88, 101, 242, 0.2);
    border-color: #5865f2;
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(88, 101, 242, 0.4);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(var(--bg-dark-rgb), 0.85);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
    z-index: 11;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
}

.status-badge.online {
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.4);
}

.status-badge.offline {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
}

.status-badge.online .status-dot {
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}

.status-badge.offline .status-dot {
    background: #e74c3c;
    box-shadow: 0 0 10px #e74c3c;
}

.status-badge.online .status-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: statusPulse 2s infinite;
}

.server-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.feature-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.feature-box:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateX(5px);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.1);
}

.feature-icon {
    width: 45px;
    height: 45px;
    background: rgba(var(--primary-rgb), 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
}

.feature-content {
    text-align: left;
}

.feature-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    font-weight: 700;
}

.feature-value {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

.classes-description {
    text-align: center;
    color: rgba(255, 200, 150, 0.75);
    font-size: 13px;
    line-height: 1.7;
    max-width: 700px;
    margin: 10px auto 0;
    padding: 0 10px;
}

.classes-horizontal-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 20px auto 0;
    padding: 24px;
    max-width: 860px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
}

.class-item-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    width: 80px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.class-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.class-item-mini:hover .class-icon-wrapper {
    background: rgba(var(--primary-rgb), 0.25);
    border-color: var(--primary);
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 10px 22px var(--primary-glow);
    z-index: 10;
}

.class-name-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(255, 200, 150, 0.85);
    text-align: center;
    line-height: 1.2;
    max-width: 80px;
    word-break: break-word;
    transition: color 0.3s ease;
}

.class-item-mini:hover .class-name-label {
    color: #fff;
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.9);
}

.class-icon-mini {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
    border-radius: 10px;
}

.class-item-mini:hover .class-icon-mini {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.8));
}

.class-hover-preview {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 220px;
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 106, 0, 0.3);
    border-radius: 15px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--primary-rgb), 0.15);
    overflow: hidden;
    text-align: center;
}

.class-item-mini:hover .class-hover-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.preview-hero-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
    z-index: 1;
}

.preview-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
}

.class-item-mini:hover .preview-img {
    transform: scale(1.1) translateY(-5px);
}

.preview-content {
    position: relative;
    z-index: 5;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-name {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-shadow: 0 0 10px var(--primary-glow);
}

.preview-cta {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.class-hover-preview::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(var(--primary-rgb), 0.3) transparent transparent transparent;
}

.section-downloads {
    padding: 100px 0;
    background:
        radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%),
        var(--section-scrim);
}

.text-center {
    text-align: center;
}

.download-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.download-card {
    display: flex;
    flex-direction: column;
    width: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    text-decoration: none;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
}

.dl-card-content {
    padding: 40px 30px;
    text-align: center;
}

.download-card:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--primary-rgb), 0.1);
}

.dl-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.download-card:hover .dl-icon {
    transform: scale(1.1);
}

.download-card.google {
    --dl-color: #4285F4;
}

.download-card.mega {
    --dl-color: #ff0000;
}

.download-card.mediafire {
    --dl-color: #0070f3;
}

.download-card.torrent {
    --dl-color: #34A853;
}

.download-card .dl-icon i {
    color: var(--dl-color, var(--primary));
    filter: drop-shadow(0 0 15px var(--dl-color, var(--primary)));
}

.dl-icon.has-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-icon-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px var(--dl-color, var(--primary)));
}

.dl-name {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.inline-classes-display {
    background: radial-gradient(circle at 30% 30%, rgba(var(--primary-rgb), 0.05), transparent),
        linear-gradient(135deg, #050505 0%, #0a0a0a 100%);
    margin: 40px auto;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    width: 100%;
    max-width: 1200px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.three-col-layout {
    display: flex;
    flex-direction: row;
    min-height: 520px;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
    gap: 0;
}

.modal-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mod-left,
.mod-right {
    flex: 1;
    max-width: 380px;
    background: linear-gradient(135deg, rgba(25, 20, 15, 0.95) 0%, rgba(5, 5, 5, 0.98) 100%);
    position: relative;
    z-index: 10;
    padding: 30px;
    border-right: 1px solid rgba(var(--primary-rgb), 0.15);
}

.mod-right {
    border-right: none;
    border-left: 1px solid rgba(var(--primary-rgb), 0.15);
}

.mod-center {
    flex: 1.5;
    position: relative;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
    z-index: 5;
}

.mod-center::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(50px);
    opacity: 0.6;
    animation: aura-pulse 4s infinite alternate ease-in-out;
    z-index: -1;
}

.mod-center img {
    width: auto;
    max-width: 120%;
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.8));
    animation: hero-float 6s infinite ease-in-out;
}

.modal-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 6px;
    text-align: center;
    text-shadow: 0 0 10px var(--primary-glow);
}

.modal-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: center;
    max-width: 100%;
    font-family: 'Inter', sans-serif;
}

.modal-info-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.modal-stats {
    width: 100%;
}

.stats-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 8px var(--primary-glow);
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.stat-icon {
    display: none;
}

.stat-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.stat-bar-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    width: 100%;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--primary);
    transition: width 1s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.6);
}

.info-item {
    padding: 0;
    border: none;
    background: transparent;
    transition: none;
    margin-bottom: 5px;
}

.info-item:hover {
    transform: none;
    border-color: transparent;
}

.info-item h4 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    font-weight: 700;
}

.info-item h4 i {
    display: none;
}

.info-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.pros h4 {
    color: #2ecc71;
}

.cons h4 {
    color: #e74c3c;
}

.info-nested-classes {
    margin-bottom: 80px;
    text-align: center;
}

.subsection-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--primary-glow);
}

.classes-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 0 auto 40px;
    font-weight: 300;
}

.race-tabs-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.race-tab {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 25px;
    border-radius: 30px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
}

.race-tab:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: #fff;
    border-color: rgba(var(--primary-rgb), 0.5);
}

.race-tab.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary-glow);
}

.class-sub-tabs-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.class-tab {
    position: relative;
    background-color: rgba(25, 20, 15, 0.8);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 24px;
    border-radius: 15px;
    font-size: 1.1rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.class-tab-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
    transition: all 0.3s ease;
}

.class-tab span {
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.class-tab:hover {
    color: #fff;
    border-color: rgba(var(--primary-rgb), 0.5);
    background-color: rgba(var(--primary-rgb), 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.class-tab:hover .class-tab-icon {
    filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.6));
}

.class-tab.active {
    background-color: rgba(var(--primary-rgb), 0.25);
    color: #fff;
    border: 1px solid var(--primary);
    box-shadow: 0 0 15px var(--primary-glow), inset 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.class-tab.active .class-tab-icon {
    filter: drop-shadow(0 0 12px var(--primary-glow));
}

.class-tab.active span {
    text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.class-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--bg-dark-rgb), 0.7);
    border: 1px solid rgba(255, 106, 0, 0.3);
    border-radius: 40px;
    padding: 5px;
    margin-top: -20px;
    width: 260px;
    position: relative;
    z-index: 10;
    backdrop-filter: blur(8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.class-nav-controls .nav-arrow {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.class-nav-controls .nav-arrow:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 10px var(--primary-glow);
}

.class-nav-controls .nav-label {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

@media (max-width: 992px) {
    .three-col-layout {
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        max-height: 80vh;
    }

    .mod-left,
    .mod-center,
    .mod-right {
        max-width: 100%;
        width: 100%;
        border: none;
        border-bottom: 1px solid rgba(255, 106, 0, 0.15);
        padding: 30px 20px;
    }

    .mod-right {
        border-bottom: none;
    }

    .mod-center img {
        max-height: 400px;
    }

    .modal-title {
        font-size: 2.2rem;
    }
}

.dl-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dl-action {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    border-top: 1px solid var(--border-glass);
    transition: background 0.3s ease;
}

.download-card:hover .dl-action {
    background: var(--dl-color, var(--primary));
    color: #fff;
}

.main-footer {
    background: var(--footer-scrim);
    backdrop-filter: blur(var(--section-blur));
    padding: 80px 0;
    border-top: 1px solid rgba(var(--primary-rgb), 0.1);
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info h3 {
    font-family: 'Cinzel', serif;
    margin-bottom: 10px;
    letter-spacing: 2px;
    color: var(--primary);
}

.footer-info p {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.footer-social {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--primary-glow);
}

@keyframes floatingLogo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-10px) translateX(-50%);
    }

    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

@keyframes statusPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes aura-pulse {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes hero-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


.section-eventos {
    padding: 80px 0;
    position: relative;
    background: var(--section-scrim);
    backdrop-filter: blur(var(--section-blur));
    z-index: 5;
}

.next-event-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 auto 30px;
    max-width: 980px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 8px;
    background: rgba(var(--bg-dark-rgb), 0.82);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.next-event-card.is-live {
    border-color: rgba(46, 204, 113, 0.55);
}

.next-event-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    color: var(--primary-light);
    background: rgba(var(--primary-rgb), 0.14);
    border: 1px solid rgba(var(--primary-rgb), 0.24);
    font-size: 28px;
}

.next-event-copy span {
    display: block;
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.next-event-copy h3 {
    margin: 4px 0;
    font-family: 'Cinzel', serif;
    font-size: 1.55rem;
    color: #fff;
}

.next-event-copy p {
    margin: 0;
    color: var(--text-dim);
}

.next-event-timer {
    display: grid;
    grid-template-columns: repeat(4, 72px);
    gap: 8px;
}

.next-event-timer div {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.next-event-timer strong {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
}

.next-event-timer small {
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.calendar-wrapper {
    width: 100%;
    margin: 30px auto 0;
    background: transparent;
    border-radius: 8px;
    padding: 15px 0;
}

.calendar-title-container {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 12px;
    padding-bottom: 8px;
    text-align: center;
}

.calendar-month-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day-header {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 4px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calendar-day {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    aspect-ratio: 1 / 1;
    position: relative;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease;
}

.calendar-day.empty {
    background: transparent;
    border-color: transparent;
}

.calendar-day:not(.empty):hover {
    background: rgba(255, 255, 255, 0.15);
}

.day-number {
    position: absolute;
    top: 3px;
    right: 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.calendar-day:hover .day-number {
    color: rgba(255, 255, 255, 0.9);
}

.day-name {
    position: absolute;
    bottom: 4px;
    left: 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
}

.calendar-day:hover .day-name {
    color: rgba(255, 255, 255, 0.6);
}

.day-events {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.event-icon-container {
    position: relative;
    font-size: 1.6rem;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease, color 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-icon-container:hover {
    transform: scale(1.2) translateY(-2px);
    color: var(--primary-light, #ccc);
}


.ev-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10, 12, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 0.75rem;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    line-height: 1.4;
    text-align: center;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.event-icon-container:hover .ev-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ev-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 12, 20, 0.95);
}

.ev-tooltip-tipo {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-light, #aaa);
    margin-bottom: 3px;
}


.event-modal-overlay {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 17, 21, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.event-modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

.event-modal-content {
    background: var(--bg-modal);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(var(--primary-rgb), 0.1);
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.event-modal-overlay.active .event-modal-content {
    transform: translateY(0);
}

.event-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.2s;
}

.event-modal-close:hover {
    color: var(--primary-light);
}

.event-modal-header {
    margin-bottom: 20px;
    padding-right: 20px;
    
}

.evento-badge {
    
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    margin-bottom: 15px;
}

.evento-badge.logue-e-ganhe {
    background: var(--badge-logue);
    color: var(--stat-light);
    border-color: rgba(var(--primary-rgb), 0.4);
}

.evento-badge.rate-up {
    background: var(--badge-rate);
    color: var(--stat-gold);
    border-color: rgba(var(--primary-rgb), 0.5);
}

.evento-badge.promoca {
    background: var(--badge-promo);
    color: var(--primary);
    border-color: var(--primary);
}

.event-modal-content .evento-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.event-modal-content .evento-dates {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--text-dim);
    background: rgba(var(--bg-dark-rgb), 0.6);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.evento-dates span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.evento-dates i {
    color: var(--primary-light);
}

.event-modal-content .evento-desc {
    font-size: 1rem;
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 25px;
}

.event-modal-content .evento-rewards {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.evento-rewards h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.evento-rewards ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.evento-rewards li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.evento-rewards .rec-name {
    color: #ddd;
    font-weight: 500;
}

.evento-rewards .rec-qtd {
    color: var(--primary-light);
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .hero-main-logo {
        max-width: 280px;
        filter: drop-shadow(0 0 20px var(--primary-glow));
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-logo {
        max-height: 120px;
    }

    .hero-content {
        padding: 0 15px;
    }

    .section-combined {
        padding: 60px 0;
    }

    .container {
        padding: 0 15px;
    }

    .hero-actions {
        flex-direction: column;
        padding: 0 20px;
        gap: 12px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero-actions a {
        width: 100%;
        text-align: center;
        padding: 15px 20px;
        font-size: 0.85rem;
    }

    .btn-discord {
        background: #5865F2 !important;
        opacity: 1 !important;
        box-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
    }
}


.countdown-container {
    background: rgba(var(--bg-dark-rgb), 0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin: 15px auto 25px;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.countdown-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.launch-info {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.countdown-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.uptime-label {
    font-size: 0.9rem;
    color: var(--primary-light);
    margin-top: 5px;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.time-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    min-width: 90px;
    padding: 18px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.time-block:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.05);
}

.time-block span {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(180deg, #FFFFFF 30%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.time-block small {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-top: 8px;
    display: block;
    font-weight: 700;
}


.launch-complete {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: rgba(var(--bg-dark-rgb), 0.95) !important;
}

.launch-complete .countdown-label {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: 800;
}



.server-available {
    width: 100%;
    background: rgba(var(--primary-rgb), 0.1);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    margin-top: 10px;
}

.server-available span {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    display: block;
    text-shadow: 0 0 10px var(--primary-glow);
}




@keyframes containerPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px var(--primary-glow);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 50px var(--primary-glow);
    }
}

@keyframes textGlow {
    from {
        text-shadow: 0 0 10px var(--primary-glow), 0 0 20px var(--primary-glow);
    }

    to {
        text-shadow: 0 0 20px var(--primary-glow), 0 0 40px var(--primary-glow), 0 0 60px var(--primary-glow);
    }
}

@media (max-width: 768px) {
    .timer {
        gap: 12px;
        flex-wrap: wrap;
    }

    .time-block {
        min-width: 75px;
        padding: 12px;
    }

    .time-block span {
        font-size: 1.8rem;
    }

    .countdown-container {
        padding: 20px;
        margin: 20px 15px;
    }

    .server-features {
        grid-template-columns: 1fr;
    }

    .race-tab {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .class-tab {
        padding: 8px 16px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    .class-nav-controls {
        width: 100%;
        max-width: 300px;
    }

    .mod-center img {
        max-height: 400px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(var(--bg-dark-rgb), 0.98);
        padding: 40px 20px;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        animation: slideDown 0.3s ease-out;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .subsection-title {
        font-size: 1.8rem;
    }

    .mod-left,
    .mod-right,
    .mod-center {
        padding: 15px;
    }

    .mod-center img {
        max-height: 300px;
    }
}

.footer-credits {
    text-align: center;
    padding: 5px 15px;
    margin: 20px auto 0;
    display: table;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.footer-credits:hover {
    color: var(--primary-light);
}

.footer-credits i.fa-heart {
    color: #ff4d4d;
    margin: 0 3px;
    font-size: 0.65rem;
}

.footer-credits i.fa-discord {
    margin-left: 5px;
}

.footer-credits i.fa-discord {
    margin: 0 5px;
    color: #5865F2;
    filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.4));
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}



.page-download .section-page-header {
    padding: 150px 0 60px;
    background: transparent;
    position: relative;
    z-index: 10;
}

.page-download-logo {
    max-width: 350px;
    margin: 0 auto 30px;
    display: block;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
    animation: floating 4s ease-in-out infinite;
}

.page-download .page-title {
    font-size: 3.5rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-download .page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

.section-download-content {
    padding: 30px 0 60px;
    position: relative;
    z-index: 10;
}

.download-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.download-card.flex-dl {
    background: linear-gradient(145deg, rgba(var(--bg-dark-rgb), 0.9), rgba(var(--bg-dark-rgb), 0.95));
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(var(--primary-rgb), 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}

.download-card.flex-dl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.1), transparent 70%);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.download-card.flex-dl:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(var(--primary-rgb), 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(var(--primary-rgb), 0.2);
    background: linear-gradient(145deg, rgba(var(--bg-dark-rgb), 0.95), rgba(var(--bg-dark-rgb), 0.98));
}

.download-card.flex-dl:hover::before {
    opacity: 1;
}

.download-card.flex-dl .dl-icon {
    font-size: 1.5rem;
    color: var(--primary);
    text-align: center;
    padding: 15px 0 5px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), 0.3));
    z-index: 2;
}

.download-card.flex-dl .dl-icon.has-image {
    min-height: 72px;
    padding: 12px 0 5px;
}

.download-card.flex-dl .dl-icon-img {
    width: 54px;
    height: 54px;
}

.download-card.flex-dl:hover .dl-icon {
    transform: scale(1.2) translateY(-5px);
    filter: drop-shadow(0 0 15px rgba(var(--primary-rgb), 0.6));
}

.download-card.flex-dl .dl-info {
    text-align: center;
    padding: 0 20px 25px;
    flex: 1;
    z-index: 2;
}

.download-card.flex-dl .dl-name {
    display: block;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    margin-bottom: 2px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.download-card.flex-dl .dl-desc {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

.download-card.flex-dl .dl-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
    border-top: 1px solid rgba(var(--primary-rgb), 0.2);
    z-index: 2;
    color: var(--primary-light);
}

.download-card.flex-dl:hover .dl-action {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 -5px 20px rgba(var(--primary-rgb), 0.4);
}

.req-label .req-icon-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-50 {
    margin-bottom: 50px;
}


.dl-discord-cta {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.discord-card {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.3);
}

.discord-card>i {
    font-size: 3.5rem;
    color: #fff;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.discord-text {
    flex: 1;
}

.discord-text h3 {
    font-family: 'Cinzel', serif;
    color: #fff;
    margin: 0 0 5px 0;
    font-size: 1.5rem;
}

.discord-text p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.btn-discord-large {
    background: #fff;
    color: #5865F2;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-discord-large:hover {
    background: #f6f6f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.discord-nav {
    margin-left: 10px;
}


.req-table-container {
    background: rgba(var(--bg-dark-rgb), 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin: 30px auto;
    max-width: 1000px;
}

.req-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.req-table th {
    background: rgba(var(--primary-rgb), 0.2);
    padding: 15px;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 2px solid var(--primary);
}

.req-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.req-table tr:last-child td {
    border-bottom: none;
}

.req-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.req-label {
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.req-label i {
    width: 20px;
    text-align: center;
}

.req-alerts {
    max-width: 1000px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.req-alert {
    background: rgba(var(--primary-rgb), 0.1);
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    border-radius: 4px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.req-alert i {
    font-size: 1.5rem;
    margin-top: 2px;
}

.req-alert p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

.text-warning {
    color: var(--primary);
}


.drivers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 30px auto 0;
}

.driver-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.driver-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.driver-card img {
    height: 40px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.driver-card:hover img {
    opacity: 1;
}

.driver-card span {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {

    .req-table,
    .req-table tbody,
    .req-table tr,
    .req-table th,
    .req-table td {
        display: block;
    }

    .req-table thead {
        display: none;
    }

    .req-table td {
        padding: 10px 15px;
        position: relative;
    }

    .req-label {
        font-size: 1.1rem;
        margin-bottom: 5px;
        border-top: 2px solid rgba(255, 255, 255, 0.1);
        padding-top: 15px;
    }

    .req-table tr td:first-child {
        border-top: none;
        padding-top: 10px;
    }

    .discord-card {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
}



.page-info .section-page-header {
    padding: 150px 0 60px;
    background: transparent;
    position: relative;
    z-index: 10;
}

.page-info .page-title {
    font-size: 3.5rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-info .page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

.section-server-info-page {
    padding: 20px 0 100px;
    position: relative;
    z-index: 10;
}

.page-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}


.page-features-grid .feature-box {
    background: linear-gradient(145deg, rgba(var(--bg-dark-rgb), 0.9), rgba(var(--bg-dark-rgb), 0.95));
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 12px;
    padding: 25px 20px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 20px rgba(197, 160, 89, 0.02), 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-features-grid .feature-box:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: inset 0 0 30px rgba(var(--primary-rgb), 0.05), 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(var(--primary-rgb), 0.2);
}

.page-features-grid .feature-icon {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.2), rgba(var(--bg-dark-rgb), 0.8));
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.8), 0 0 20px rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(var(--primary-rgb), 0.2);
    transition: all 0.4s ease;
}

.page-features-grid .feature-box:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.4), rgba(var(--bg-dark-rgb), 0.9));
    border-color: rgba(var(--primary-rgb), 0.8);
    color: #fff;
    text-shadow: 0 0 15px rgba(var(--primary-rgb), 1), 0 0 30px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4), inset 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.page-features-grid .feature-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.page-features-grid .feature-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.page-features-grid .feature-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Cinzel', serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
 
 .highlight {
     color: var(--primary);
 }



.page-patch-notes .section-page-header {
    padding: 150px 0 60px;
    background: transparent;
    position: relative;
    z-index: 10;
}

.page-patch-notes .page-title {
    font-size: 3.2rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-patch-notes .page-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 720px;
    margin: 0 auto;
}

.section-patch-notes-page {
    padding: 20px 0 100px;
    position: relative;
    z-index: 10;
}

.patch-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.patch-version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.42);
    background: rgba(var(--primary-rgb), 0.16);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.patch-version-badge-lg {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 0.76rem;
}

.patch-note-card .patch-meta-row {
    margin-bottom: 8px;
}

.patch-note-detail-card .patch-meta-row {
    margin: 0 0 8px;
}



.page-events .section-page-header {
    padding: 150px 0 60px;
    background: transparent;
    position: relative;
    z-index: 10;
}

.page-events .page-title {
    font-size: 3.2rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-events .page-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 720px;
    margin: 0 auto;
}

.page-events .section-eventos {
    padding: 20px 0 100px;
    position: relative;
    z-index: 10;
    background: transparent;
}

.page-classes .section-page-header {
    padding: 150px 0 60px;
    background: transparent;
    position: relative;
    z-index: 10;
}

.page-classes .page-title {
    font-size: 3.2rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-classes .page-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 720px;
    margin: 0 auto;
}

.page-classes .section-classes-page {
    padding: 20px 0 100px;
    position: relative;
    z-index: 10;
}

.race-detail-block {
    margin-bottom: 42px;
}

.race-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.18);
}

.race-detail-head span {
    color: var(--primary-light);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.race-detail-head h2 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    line-height: 1.1;
}

.class-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.class-detail-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--bg-dark-rgb), 0.86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.class-detail-media {
    height: 270px;
    display: grid;
    padding: 12px 10px 0;
    place-items: end center;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.14), rgba(var(--bg-dark-rgb), 0.76));
}

.class-detail-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.class-detail-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.class-detail-title {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.class-detail-title img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.class-detail-title span {
    color: var(--primary-light);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.class-detail-title h3 {
    margin: 2px 0 0;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
}

.class-detail-body > p,
.class-pros-cons p {
    color: var(--text-dim);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.class-pros-cons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.class-pros-cons div {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.class-pros-cons strong {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    color: #fff;
}

.class-pros-cons p {
    margin: 0;
}

.class-attribute-list {
    display: grid;
    gap: 9px;
}

.class-attribute-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 0.86rem;
}

.class-attribute-row div {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
}

.class-attribute-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.class-attribute-row strong {
    color: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .news-grid,
    .class-detail-grid {
        grid-template-columns: 1fr;
    }

    .section-head-row,
    .next-event-card {
        grid-template-columns: 1fr;
    }

    .section-head-row {
        align-items: flex-start;
    }

    .next-event-timer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .race-detail-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .page-classes .page-title {
        font-size: 2.6rem;
    }

    .page-patch-notes .page-title {
        font-size: 2.6rem;
    }

    .page-events .page-title {
        font-size: 2.6rem;
    }
}

@media (max-width: 620px) {
    .class-pros-cons {
        grid-template-columns: 1fr;
    }

    .class-attribute-row {
        grid-template-columns: 82px minmax(0, 1fr) 36px;
    }

    .news-detail-content {
        padding: 22px;
    }

    .page-classes .section-page-header {
        padding-top: 130px;
    }

    .page-classes .page-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .page-classes .page-subtitle {
        font-size: 1rem;
    }

    .page-patch-notes .section-page-header {
        padding-top: 130px;
    }

    .page-patch-notes .page-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .page-patch-notes .page-subtitle {
        font-size: 1rem;
    }

    .page-events .section-page-header {
        padding-top: 130px;
    }

    .page-events .page-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .page-events .page-subtitle {
        font-size: 1rem;
    }
}
/* SAGA refresh: dark graphite with the turquoise/cyan palette from the reference. */
:root {
    --primary: #00e6c3 !important;
    --primary-rgb: 0, 230, 195 !important;
    --primary-dark: #009b87 !important;
    --primary-light: #75ffdc !important;
    --primary-glow: rgba(0, 230, 195, .38) !important;
    --accent: #10d8cb !important;
    --bg-dark: #071211 !important;
    --bg-dark-rgb: 7, 18, 17 !important;
    --bg-footer: #040b0a !important;
    --bg-card: rgba(7, 25, 23, .78) !important;
    --border-glass: rgba(64, 255, 224, .20) !important;
    --text-main: #f1fffc !important;
    --text-dim: rgba(220, 247, 242, .72) !important;
    --section-scrim: rgba(4, 13, 12, .52) !important;
    --footer-scrim: rgba(4, 13, 12, .82) !important;
}

html, body { background-color: #071211; }

.navbar {
    height: 76px;
    background: rgba(4, 13, 12, .88);
    border-bottom: 1px solid rgba(0, 230, 195, .24);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .26);
    backdrop-filter: blur(18px);
}

.nav-container { max-width: 1360px; }
.nav-logo-img { filter: drop-shadow(0 0 12px rgba(0, 230, 195, .28)); }
.nav-links { gap: clamp(14px, 2vw, 30px); }
.nav-links a {
    letter-spacing: 1px;
    transition: color .2s ease, transform .2s ease;
}
.nav-links a:hover, .nav-links a.active {
    color: #35f5d2;
    text-shadow: 0 0 18px rgba(0, 230, 195, .5);
}

.btn-nav-panel,
.btn-primary,
.btn-secondary,
.btn-discord,
.btn-small-link,
.btn-discord-large {
    min-height: 52px;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.btn-nav-panel,
.btn-primary {
    color: #03201c !important;
    background: linear-gradient(135deg, #38f4d0, #00cbb3);
    border: 1px solid rgba(145, 255, 232, .68);
    box-shadow: 0 8px 28px rgba(0, 230, 195, .25);
}

.btn-secondary {
    color: #e9fffa;
    background: rgba(5, 24, 22, .56);
    border: 1px solid rgba(64, 255, 224, .58);
    box-shadow: inset 0 0 20px rgba(0, 230, 195, .05);
}

.btn-discord {
    color: #03201c;
    background: linear-gradient(135deg, #38f4d0, #00cbb3);
    border: 1px solid rgba(145, 255, 232, .68);
    box-shadow: 0 8px 28px rgba(0, 230, 195, .25);
}
.btn-primary:hover, .btn-nav-panel:hover,
.btn-secondary:hover, .btn-discord:hover,
.btn-small-link:hover, .btn-discord-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(0, 230, 195, .30);
}
.btn-primary:hover, .btn-nav-panel:hover {
    background: linear-gradient(135deg, #7bffe1, #21e3c3);
    color: #03201c !important;
}
.btn-secondary:hover { background: rgba(0, 230, 195, .13); border-color: #48ffda; color: #72ffe5; }
.btn-discord:hover { color: #03201c; background: linear-gradient(135deg, #7bffe1, #21e3c3); }

.section-hero { min-height: min(88vh, 900px); padding-top: 100px; }
.hero-content { max-width: 1050px; }
.hero-main-logo { filter: drop-shadow(0 0 32px rgba(0, 230, 195, .28)); }
.hero-actions {
    width: min(100%, 760px);
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.hero-actions > a {
    min-width: 0;
    min-height: 58px;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    font-size: .96rem;
}

.status-badge.online {
    color: #42f4bd;
    border-color: rgba(66, 244, 189, .52);
    background: rgba(4, 25, 20, .84);
}
.status-badge.online .status-dot { background: #42f4bd; box-shadow: 0 0 12px rgba(66, 244, 189, .8); }

.section-title { text-shadow: 0 0 26px rgba(0, 230, 195, .14); }
.section-news, .section-news-page, .section-eventos {
    background-color: rgba(4, 13, 12, .38);
}
.news-card, .event-card, .feature-box, .calendar-container,
.news-item, .info-card, .class-card {
    border-color: rgba(64, 255, 224, .18);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
}
.news-card:hover, .event-card:hover, .feature-box:hover,
.info-card:hover, .class-card:hover {
    border-color: rgba(64, 255, 224, .48);
    box-shadow: 0 16px 42px rgba(0, 230, 195, .10);
}

::-webkit-scrollbar-thumb { background: #087f73; }
::-webkit-scrollbar-thumb:hover { background: #00d8bc; }

@media (max-width: 760px) {
    :root { --nav-height: 68px; }
    .navbar { height: 68px; }
    .nav-links { background: rgba(4, 13, 12, .97); border-top: 1px solid rgba(0, 230, 195, .24); }
    .hero-actions { width: min(100%, 420px); flex-direction: column; gap: 11px; }
    .hero-actions > a { width: 100%; flex: auto; min-height: 54px; }
    .section-hero { min-height: 82vh; padding: 100px 18px 72px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* MMORPG navigation and button frame treatment */
@media (min-width: 901px) {
    body { padding-left: 248px; }
    .navbar {
        inset: 0 auto 0 0;
        width: 248px;
        height: 100vh;
        min-height: 100vh;
        padding: 22px 16px;
        background: linear-gradient(180deg, rgba(4, 13, 12, .97), rgba(5, 19, 17, .94));
        border-right: 1px solid rgba(0, 230, 195, .34);
        border-bottom: 0;
        box-shadow: 12px 0 40px rgba(0, 0, 0, .38);
        align-items: flex-start;
    }
    .nav-container {
        height: 100%;
        max-width: none;
        padding: 10px 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
    }
    .nav-logo { min-height: 64px; justify-content: center; width: 100%; }
    .nav-logo-img { max-width: 170px; height: auto; max-height: 58px; }
    .nav-links {
        width: 100%;
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        overflow-y: auto;
        padding: 0 1px 16px;
    }
    .nav-links a {
        width: 100%;
        min-height: 58px;
        padding: 13px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
        font-size: .76rem;
        letter-spacing: 1.1px;
        color: rgba(225, 249, 245, .86);
        background: url('assets/images/ui/hud-teal-frame.png') center / 100% 100% no-repeat;
        border: 0;
        border-radius: 0;
        text-shadow: 0 1px 7px #00110f;
        filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .35));
    }
    .nav-links a:hover, .nav-links a.active {
        color: #74ffe6;
        text-shadow: 0 0 14px rgba(0, 230, 195, .78);
        transform: translateX(3px);
        background-color: rgba(0, 230, 195, .06);
    }
    .nav-links a.btn-nav-panel {
        color: #dffff9 !important;
        background: url('assets/images/ui/hud-teal-frame.png') center / 100% 100% no-repeat;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .nav-links a.btn-nav-panel:hover { background-color: rgba(0, 230, 195, .12); }
    .mobile-menu-btn { display: none; }
}

.hero-actions > a,
.btn-small-link,
.btn-discord-large {
    border: 0;
    border-radius: 0;
    background-image: url('assets/images/ui/hud-teal-frame.png'), linear-gradient(135deg, rgba(5, 31, 29, .96), rgba(3, 15, 15, .96));
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .28), 0 0 16px rgba(0, 230, 195, .12);
}
.hero-actions > .btn-primary,
.hero-actions > .btn-secondary,
.hero-actions > .btn-discord {
    color: #e8fffb;
    background-image: url('assets/images/ui/hud-teal-frame.png'), linear-gradient(135deg, rgba(5, 31, 29, .97), rgba(3, 15, 15, .97));
}
.hero-actions > a:hover,
.btn-small-link:hover,
.btn-discord-large:hover {
    background-image: url('assets/images/ui/hud-teal-frame.png'), linear-gradient(135deg, rgba(0, 96, 84, .94), rgba(3, 25, 23, .97));
}

@media (max-width: 900px) {
    body { padding: 68px 0 0; }
    .navbar {
        inset: 0 0 auto;
        width: 100%;
        height: 68px;
        min-height: 68px;
        padding: 0;
        background: rgba(4, 13, 12, .97);
        border-right: 0;
        border-bottom: 1px solid rgba(0, 230, 195, .30);
    }
    .nav-container {
        height: 68px;
        max-width: none;
        padding: 0 18px;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
    .nav-logo-img { height: 42px; width: auto; }
    .mobile-menu-btn {
        display: block;
        width: 48px;
        height: 46px;
        color: #63f9df;
        background: url('assets/images/ui/hud-teal-frame.png') center / 100% 100% no-repeat;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 14px 18px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        background: rgba(4, 13, 12, .98);
        border-top: 1px solid rgba(0, 230, 195, .22);
        border-bottom: 1px solid rgba(0, 230, 195, .3);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
        backdrop-filter: blur(16px);
    }
    .nav-links.active { display: flex; }
    .nav-links a {
        width: 100%;
        min-height: 48px;
        padding: 11px 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('assets/images/ui/hud-teal-frame.png') center / 100% 100% no-repeat;
        border: 0;
        border-radius: 0;
        text-align: center;
    }
    .nav-links a.btn-nav-panel {
        background: url('assets/images/ui/hud-teal-frame.png') center / 100% 100% no-repeat;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}


/* Clean MMORPG refresh inspired by the supplied reference; no HUD artwork. */
:root {
    --primary: #d8b66f !important;
    --primary-rgb: 216, 182, 111 !important;
    --primary-dark: #9a7435 !important;
    --primary-light: #f0d89b !important;
    --primary-glow: rgba(216, 182, 111, .24) !important;
    --accent: #c59b52 !important;
    --bg-dark: #090909 !important;
    --bg-dark-rgb: 9, 9, 9 !important;
    --bg-footer: #060606 !important;
    --bg-card: rgba(18, 17, 15, .88) !important;
    --border-glass: rgba(216, 182, 111, .16) !important;
    --text-main: #f5f1e8 !important;
    --text-dim: rgba(229, 224, 213, .72) !important;
    --section-scrim: rgba(7, 7, 7, .46) !important;
    --footer-scrim: rgba(6, 6, 6, .88) !important;
}

body { padding: 0 !important; background: #090909; }
.navbar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding: 0 20px;
    background: rgba(7, 7, 7, .94);
    border: 0;
    border-bottom: 1px solid rgba(216, 182, 111, .20);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
}
.nav-container {
    height: 100%;
    max-width: 1500px;
    padding: 0 26px;
    flex-direction: row;
    justify-content: space-between;
    gap: 28px;
}
.nav-logo-img { height: 44px; width: auto; max-height: 54px; filter: none; }
.nav-links {
    width: auto;
    flex: initial;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2vw, 32px);
    overflow: visible;
    padding: 0;
}
.nav-links a {
    width: auto;
    min-height: 0;
    padding: 10px 2px;
    display: inline-flex;
    color: rgba(235, 231, 222, .78);
    font-size: .76rem;
    letter-spacing: 1.1px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none;
    transform: none;
}
.nav-links a:hover, .nav-links a.active {
    color: #e2c17c;
    text-shadow: 0 0 16px rgba(216, 182, 111, .28);
    transform: none;
}
.nav-links a.btn-nav-panel {
    min-height: 42px;
    padding: 0 24px;
    color: #17130b !important;
    background: linear-gradient(135deg, #e4c782, #b18b48) !important;
    border: 1px solid rgba(246, 222, 166, .7) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.nav-links a.btn-nav-panel:hover { color: #080706 !important; background: #f0d89b !important; }

.hero-actions > a,
.btn-small-link,
.btn-discord-large,
.mobile-menu-btn {
    background-image: none !important;
    filter: none !important;
}
.btn-nav-panel, .btn-primary, .btn-secondary, .btn-discord,
.btn-small-link, .btn-discord-large {
    min-height: 48px;
    border-radius: 2px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 1.1px;
    box-shadow: none;
}
.btn-primary, .btn-nav-panel {
    color: #151109 !important;
    background: linear-gradient(135deg, #e4c782, #b18b48);
    border: 1px solid rgba(246, 222, 166, .64);
}
.btn-secondary {
    color: #f2e5c4;
    background: rgba(8, 8, 8, .42);
    border: 1px solid rgba(216, 182, 111, .62);
}
.btn-discord {
    color: #fff;
    background: #5865f2;
    border: 1px solid rgba(255, 255, 255, .12);
}
.btn-primary:hover, .btn-nav-panel:hover, .btn-secondary:hover,
.btn-discord:hover, .btn-small-link:hover, .btn-discord-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.btn-primary:hover, .btn-nav-panel:hover { color: #100d07 !important; background: #f0d89b; }
.btn-secondary:hover { color: #f0d89b; background: rgba(216, 182, 111, .10); border-color: #e2c17c; }

.section-hero { min-height: min(100vh, 980px); padding-top: 110px; }
.hero-content { max-width: 920px; }
.hero-main-logo { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); }
.hero-actions { gap: 14px; }
.hero-actions > a { min-height: 54px; padding: 13px 24px; }
.status-badge.online {
    color: #d8c28e;
    border-color: rgba(216, 182, 111, .40);
    background: rgba(10, 10, 10, .76);
}
.status-badge.online .status-dot { background: #83c99e; box-shadow: 0 0 10px rgba(131, 201, 158, .48); }
.section-title { color: #f2ead7; text-shadow: 0 4px 22px rgba(0, 0, 0, .52); }
.section-news, .section-news-page { background-color: rgba(9, 9, 9, .48); }
.news-card, .feature-box, .news-item, .info-card, .class-card {
    border-color: rgba(216, 182, 111, .17);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
}
.news-card:hover, .feature-box:hover, .info-card:hover, .class-card:hover {
    border-color: rgba(216, 182, 111, .40);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
}
::-webkit-scrollbar-thumb { background: #66502c; }
::-webkit-scrollbar-thumb:hover { background: #b18b48; }

@media (min-width: 901px) {
    body { padding: 0 !important; }
    .nav-container { flex-direction: row; }
    .nav-links { flex-direction: row; }
}
@media (max-width: 900px) {
    body { padding: 68px 0 0 !important; }
    .navbar { height: 68px; min-height: 68px; padding: 0; }
    .nav-container { height: 68px; padding: 0 18px; flex-direction: row; }
    .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 18px 20px;
        background: rgba(7, 7, 7, .98);
        border-top: 1px solid rgba(216, 182, 111, .18);
        border-bottom: 1px solid rgba(216, 182, 111, .22);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
    }
    .nav-links a { width: 100%; min-height: 44px; justify-content: center; }
    .nav-links a.btn-nav-panel { margin-top: 4px; }
    .mobile-menu-btn { display: block; color: #e2c17c; background: transparent !important; }
    .section-hero { min-height: calc(100vh - 68px); padding: 46px 18px 72px; }
    .hero-actions { width: min(100%, 460px); flex-direction: column; gap: 10px; }
    .hero-actions > a { width: 100%; flex: auto; }
}

/* Current direction: graphite/cyan with a clean left-side navigation. */
:root {
    --primary: #13dfc4 !important;
    --primary-rgb: 19, 223, 196 !important;
    --primary-dark: #078c80 !important;
    --primary-light: #72f5df !important;
    --primary-glow: rgba(19, 223, 196, .25) !important;
    --accent: #12cbb7 !important;
    --bg-dark: #101515 !important;
    --bg-dark-rgb: 16, 21, 21 !important;
    --bg-footer: #090e0e !important;
    --bg-card: rgba(19, 29, 29, .88) !important;
    --border-glass: rgba(93, 231, 211, .16) !important;
    --text-main: #f1f7f6 !important;
    --text-dim: rgba(213, 228, 225, .72) !important;
    --section-scrim: rgba(8, 14, 14, .46) !important;
    --footer-scrim: rgba(7, 12, 12, .88) !important;
}

@media (min-width: 901px) {
    body { padding: 0 0 0 244px !important; background: #101515; }
    .navbar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 244px;
        height: 100vh;
        min-height: 100vh;
        padding: 24px 16px;
        background: linear-gradient(180deg, rgba(12, 19, 19, .99), rgba(9, 15, 15, .98));
        border: 0;
        border-right: 1px solid rgba(19, 223, 196, .25);
        box-shadow: 12px 0 36px rgba(0, 0, 0, .32);
        align-items: flex-start;
    }
    .nav-container {
        height: 100%;
        max-width: none;
        padding: 8px 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 28px;
    }
    .nav-logo { width: 100%; min-height: 58px; justify-content: center; }
    .nav-logo-img { height: auto; max-height: 46px; width: auto; filter: none; }
    .nav-links {
        width: 100%;
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 7px;
        overflow-y: auto;
        padding: 0 0 18px;
    }
    .nav-links a,
    .nav-links a.btn-nav-panel {
        display: flex;
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        align-items: center;
        gap: 11px;
        padding: 0 15px;
        color: rgba(230, 241, 239, .78) !important;
        font-size: .78rem;
        letter-spacing: .9px;
        text-align: left;
        text-shadow: none;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none;
    }
    .nav-links a i { width: 18px; margin: 0; color: rgba(19, 223, 196, .72); text-align: center; }
    .nav-links a:hover,
    .nav-links a.active {
        color: #52f0d9 !important;
        background: rgba(19, 223, 196, .09) !important;
        border-color: rgba(19, 223, 196, .18) !important;
        box-shadow: inset 3px 0 0 #13dfc4 !important;
        text-shadow: none;
        transform: none;
    }
    .nav-links a.btn-nav-panel {
        justify-content: center;
        margin-top: 8px;
        color: #071311 !important;
        background: linear-gradient(135deg, #31e7cf, #0dbca8) !important;
        border-color: rgba(120, 255, 230, .45) !important;
        font-weight: 800;
    }
    .nav-links a.btn-nav-panel:hover {
        color: #04100e !important;
        background: #72f5df !important;
        box-shadow: 0 8px 24px rgba(19, 223, 196, .18) !important;
    }
    .mobile-menu-btn { display: none; }
}

.navbar { border-bottom-color: rgba(19, 223, 196, .24); }
.nav-links a, .nav-links a.btn-nav-panel { background-image: none !important; }
.hero-actions > a, .btn-small-link, .btn-discord-large, .mobile-menu-btn { background-image: none !important; }
.btn-primary, .btn-nav-panel {
    color: #061714 !important;
    background: linear-gradient(135deg, #31e7cf, #0dbca8);
    border: 1px solid rgba(120, 255, 230, .45);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(19, 223, 196, .15);
}
.btn-secondary {
    color: #e9f8f5;
    background: rgba(12, 22, 22, .66);
    border: 1px solid rgba(19, 223, 196, .40);
    border-radius: 5px;
}
.btn-discord { border-radius: 5px; }
.btn-primary:hover, .btn-nav-panel:hover {
    color: #04100e !important;
    background: #72f5df;
    box-shadow: 0 10px 28px rgba(19, 223, 196, .22);
}
.btn-secondary:hover { color: #72f5df; background: rgba(19, 223, 196, .10); border-color: #31e7cf; }
.section-title { text-shadow: 0 4px 22px rgba(0, 0, 0, .5); }
.news-card, .feature-box, .news-item, .info-card, .class-card { border-color: rgba(93, 231, 211, .16); }
.news-card:hover, .feature-box:hover, .info-card:hover, .class-card:hover { border-color: rgba(93, 231, 211, .40); }
::-webkit-scrollbar-thumb { background: #176b65; }
::-webkit-scrollbar-thumb:hover { background: #13bba8; }

@media (max-width: 900px) {
    body { padding: 68px 0 0 !important; }
    .navbar {
        position: fixed;
        inset: 0 0 auto;
        width: 100%;
        height: 68px;
        min-height: 68px;
        padding: 0;
        background: rgba(10, 16, 16, .98);
        border: 0;
        border-bottom: 1px solid rgba(19, 223, 196, .24);
    }
    .nav-container { height: 68px; padding: 0 18px; flex-direction: row; justify-content: space-between; }
    .nav-logo-img { height: 40px; width: auto; }
    .mobile-menu-btn {
        display: block;
        width: 44px;
        height: 44px;
        color: #52f0d9;
        background: rgba(19, 223, 196, .08) !important;
        border: 1px solid rgba(19, 223, 196, .22);
        border-radius: 5px;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 12px 16px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        background: rgba(10, 16, 16, .99);
        border: 0;
        border-bottom: 1px solid rgba(19, 223, 196, .24);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .42);
    }
    .nav-links.active { display: flex; }
    .nav-links a, .nav-links a.btn-nav-panel {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 0 14px;
        color: rgba(230, 241, 239, .82) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }
    .nav-links a.btn-nav-panel { justify-content: center; margin-top: 5px; color: #061714 !important; background: linear-gradient(135deg, #31e7cf, #0dbca8) !important; }
    .section-hero { padding: 42px 18px 68px; min-height: calc(100vh - 68px); }
    .hero-actions { width: min(100%, 460px); flex-direction: column; gap: 10px; }
    .hero-actions > a { width: 100%; flex: auto; }
}


/* Top navigation aligned to the left; mobile keeps the compact dropdown. */
@media (min-width: 901px) {
    body { padding: 0 !important; }
    .navbar {
        position: fixed;
        inset: 0 0 auto;
        width: 100%;
        height: 76px;
        min-height: 76px;
        padding: 0 20px;
        background: rgba(10, 16, 16, .97);
        border: 0;
        border-bottom: 1px solid rgba(19, 223, 196, .22);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .30);
    }
    .nav-container {
        width: 100%;
        max-width: 1600px;
        height: 100%;
        padding: 0 24px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
    }
    .nav-logo { width: auto; min-height: 0; flex: 0 0 auto; justify-content: flex-start; }
    .nav-logo-img { height: 42px; max-height: 48px; width: auto; }
    .nav-links {
        width: auto;
        flex: 0 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(16px, 2vw, 32px);
        overflow: visible;
        padding: 0;
    }
    nav.navbar .nav-links a.btn-nav-panel {
        min-width: 104px;
        min-height: 42px;
        padding: 0 20px;
        color: #061714 !important;
        -webkit-text-fill-color: #061714 !important;
        background: linear-gradient(135deg, #42f2d6, #13cbb5) !important;
        background-color: #13cbb5 !important;
        border: 1px solid rgba(141, 255, 236, .7) !important;
        border-radius: 5px !important;
        box-shadow: 0 0 20px rgba(19, 223, 196, .22) !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }
    nav.navbar .nav-links a.btn-nav-panel:hover {
        color: #04110e !important;
        -webkit-text-fill-color: #04110e !important;
        background: #78f8e1 !important;
        background-color: #78f8e1 !important;
        box-shadow: 0 0 26px rgba(19, 223, 196, .34) !important;
    }
}

/* Launch roadmap panel in the home hero */
.launch-roadmap {
    width: min(100%, 820px);
    margin: 28px 0 0;
    padding: 21px 26px 20px;
    text-align: left;
    color: #eff8f6;
    background: linear-gradient(145deg, rgba(12, 23, 23, .90), rgba(7, 14, 14, .84));
    border: 1px solid rgba(19, 223, 196, .25);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(12px);
}
.roadmap-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.roadmap-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #47e7d0;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 2px;
}
.roadmap-heading h2 {
    margin: 0;
    color: #f2f7f6;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: .2px;
}
.roadmap-date {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    color: #71f3df;
    background: rgba(19, 223, 196, .08);
    border: 1px solid rgba(19, 223, 196, .22);
    border-radius: 5px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.roadmap-track {
    position: relative;
    height: 2px;
    margin: 26px 7% 0;
    background: rgba(199, 223, 218, .19);
}
.roadmap-track span {
    position: absolute;
    top: -1px;
    left: 0;
    width: 22%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, #19d8c0, #9affed, transparent);
    filter: drop-shadow(0 0 6px rgba(19, 223, 196, .7));
    animation: roadmap-scan 3.2s ease-in-out infinite alternate;
}
.roadmap-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: -10px 0 0;
    padding: 0;
    list-style: none;
}
.roadmap-steps li {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.roadmap-node {
    display: grid;
    width: 21px;
    height: 21px;
    margin-bottom: 4px;
    place-items: center;
    color: #7ff5e3;
    background: #0c1a19;
    border: 2px solid #18cdb7;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(19, 223, 196, .22);
    font-size: .52rem;
    font-weight: 800;
}
.roadmap-steps strong { color: #eaf6f3; font-size: .82rem; font-weight: 700; }
.roadmap-steps small { color: rgba(213, 228, 225, .65); font-size: .7rem; }
@keyframes roadmap-scan { from { left: 0; } to { left: 78%; } }

@media (max-width: 900px) {
    .launch-roadmap { margin-top: 22px; padding: 18px 17px; }
    .roadmap-track { display: none; }
    .roadmap-steps { grid-template-columns: 1fr; gap: 12px; margin: 18px 0 0; }
    .roadmap-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; align-items: center; text-align: left; }
    .roadmap-node { grid-row: span 2; width: 24px; height: 24px; margin: 0; }
    .roadmap-steps strong, .roadmap-steps small { grid-column: 2; }
    .roadmap-steps strong { align-self: end; }
    .roadmap-steps small { align-self: start; }
}
@media (max-width: 480px) {
    .roadmap-heading { align-items: flex-start; }
    .roadmap-date { padding: 8px 10px; font-size: .64rem; }
    .roadmap-eyebrow { font-size: .58rem; }
}
/* Class row, oversized centered Saga mark, and wide compact launch roadmap */
.hero-content { width: min(100%, 1180px); max-width: 1180px; }
.hero-main-logo.hero-logo-large {
    width: min(720px, 88vw) !important;
    max-width: 720px !important;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 10px 32px rgba(0, 0, 0, .62));
}
.hero-brand-stack { gap: 10px; margin-bottom: 12px; }
.class-icons-strip {
    width: min(100%, 820px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 0;
}
.class-icons-strip img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .42));
    transition: transform .2s ease, filter .2s ease;
}
.class-icons-strip img:hover {
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 0 10px rgba(19, 223, 196, .55));
}
.launch-roadmap {
    width: min(100%, 1100px);
    margin-top: 16px;
    padding: 15px 25px 16px;
    border-radius: 7px;
}
.roadmap-heading h2 { font-size: clamp(1rem, 1.8vw, 1.24rem); }
.roadmap-date { padding: 7px 11px; font-size: .68rem; }
.roadmap-track { margin-top: 19px; }
.roadmap-steps { gap: 24px; }
.roadmap-steps li { gap: 3px; }
.roadmap-node { width: 19px; height: 19px; margin-bottom: 3px; }
.roadmap-steps strong { font-size: .8rem; }
.roadmap-steps small { font-size: .7rem; }

@media (max-width: 900px) {
    .hero-content { max-width: 720px; }
    .hero-main-logo.hero-logo-large { width: min(620px, 92vw) !important; max-width: 620px !important; }
    .class-icons-strip { gap: clamp(4px, 1.1vw, 9px); margin-top: 8px; }
    .class-icons-strip img { width: clamp(28px, 6vw, 42px); height: clamp(28px, 6vw, 42px); }
    .launch-roadmap { width: min(100%, 700px); margin-top: 12px; padding: 15px 17px; }
    .roadmap-track { display: block; }
    .roadmap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -10px 0 0; }
    .roadmap-steps li { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
    .roadmap-node { width: 18px; height: 18px; margin: 0 0 3px; }
}
@media (max-width: 560px) {
    .hero-main-logo.hero-logo-large { width: min(520px, 94vw) !important; }
    .class-icons-strip { width: 100%; gap: 3px; }
    .class-icons-strip img { width: 29px; height: 29px; }
    .launch-roadmap { padding: 13px 12px 14px; }
    .roadmap-heading { align-items: center; gap: 8px; }
    .roadmap-heading h2 { font-size: .94rem; }
    .roadmap-eyebrow { font-size: .53rem; letter-spacing: 1.4px; }
    .roadmap-date { gap: 5px; padding: 6px 8px; font-size: .57rem; }
    .roadmap-steps { gap: 4px; }
    .roadmap-steps strong { font-size: .68rem; }
    .roadmap-steps small { font-size: .62rem; }
    .roadmap-node { width: 17px; height: 17px; font-size: .46rem; }
}

/* Saga logo reduced by roughly 40% from the previous hero scale. */
.hero-main-logo.hero-logo-large {
    width: min(432px, 52.8vw) !important;
    max-width: 432px !important;
}
@media (max-width: 900px) {
    .hero-main-logo.hero-logo-large {
        width: min(372px, 55.2vw) !important;
        max-width: 372px !important;
    }
}
@media (max-width: 560px) {
    .hero-main-logo.hero-logo-large {
        width: min(312px, 56.4vw) !important;
        max-width: 312px !important;
    }
}

/* Compact footer: server identity, quick navigation, and configured networks */
.main-footer {
    padding: 28px 0 22px;
    background: rgba(7, 13, 13, .94);
    border-top: 1px solid rgba(19, 223, 196, .2);
    backdrop-filter: blur(12px);
}
.main-footer::before { background: radial-gradient(ellipse at 50% 0%, rgba(19, 223, 196, .055), transparent 65%); }
.footer-container {
    width: min(100% - 48px, 1240px);
    display: grid;
    grid-template-columns: minmax(220px, 1.05fr) minmax(310px, 1.35fr) minmax(170px, .75fr);
    align-items: center;
    gap: 28px;
    padding: 0;
}
.footer-info h3 {
    margin: 5px 0 4px;
    color: #35e5ce;
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    letter-spacing: 1.2px;
}
.footer-info p { color: rgba(214, 228, 225, .62); font-size: .72rem; }
.footer-eyebrow {
    color: rgba(85, 226, 209, .78);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: 1.6px;
}
.footer-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
}
.footer-quick-links a {
    color: rgba(224, 237, 234, .72);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease;
}
.footer-quick-links a:hover { color: #58ecd7; }
.footer-community { justify-self: end; }
.footer-community > .footer-eyebrow { display: block; margin-bottom: 8px; text-align: right; }
.footer-social { display: flex; justify-content: flex-end; gap: 8px; }
.social-link {
    width: 36px;
    height: 36px;
    color: #dff8f3;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(19, 223, 196, .22);
    border-radius: 7px;
    font-size: .92rem;
}
.social-link:hover {
    color: #071311;
    background: #20d9c0;
    border-color: #20d9c0;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(19, 223, 196, .18);
}
.footer-launch-note {
    margin: 8px 0 0;
    color: rgba(213, 228, 225, .62);
    font-size: .67rem;
    text-align: right;
}
.footer-launch-note i { margin-right: 5px; color: #45dfca; }
.footer-credits { display: none !important; }

@media (max-width: 900px) {
    .main-footer { padding: 25px 0 20px; }
    .footer-container { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .footer-community { justify-self: center; }
    .footer-community > .footer-eyebrow, .footer-launch-note { text-align: center; }
    .footer-social { justify-content: center; }
}
@media (max-width: 480px) {
    .footer-container { width: min(100% - 32px, 420px); }
    .footer-quick-links { gap: 10px 16px; }
}
/* Social icons: enlarged cyan marks in square frames. */
.footer-social { display: flex; justify-content: flex-end; gap: 10px; }
.footer-social .social-link {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #13dfc4;
    background: rgba(7, 21, 20, .74);
    border: 1px dashed rgba(19, 223, 196, .72);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(19, 223, 196, .08);
    font-size: 1.15rem;
    text-decoration: none;
}
.footer-social .social-link i { color: inherit; line-height: 1; }
.footer-social .social-link svg { display: block; width: 21px; height: 21px; fill: currentColor; }
.footer-social .social-link:hover {
    color: #061714;
    background: #13dfc4;
    border-color: #13dfc4;
    box-shadow: 0 0 16px rgba(19, 223, 196, .32);
    transform: translateY(-3px);
}

/* Static server feature chips below the homepage roadmap. */
.server-feature-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 1100px);
    margin: 12px auto 0;
}
.server-feature-chip {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    color: #dcebe8;
    background: linear-gradient(135deg, rgba(7, 20, 19, .88), rgba(14, 31, 29, .76));
    border: 1px solid rgba(19, 223, 196, .42);
    border-radius: 4px;
    box-shadow: inset 0 0 18px rgba(19, 223, 196, .035), 0 5px 16px rgba(0, 0, 0, .16);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-align: center;
}
.server-feature-chip i { color: #13dfc4; font-size: .9rem; }
@media (max-width: 700px) {
    .server-feature-specs { grid-template-columns: 1fr; gap: 8px; width: min(100%, 460px); }
    .server-feature-chip { min-height: 42px; font-size: .68rem; }
}

/* Second part of the home page: detailed server proposal and content. */
.server-details-section {
    position: relative;
    padding: clamp(54px, 7vw, 88px) 24px;
    scroll-margin-top: 78px;
    background: linear-gradient(180deg, rgba(5, 13, 13, .94), rgba(7, 17, 17, .97));
    border-top: 1px solid rgba(19, 223, 196, .28);
    border-bottom: 1px solid rgba(19, 223, 196, .15);
}
.server-details-container { width: min(100%, 1100px); margin: 0 auto; }
.server-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 38px; }
.server-cta-button {
    display: inline-flex;
    min-width: 156px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    color: #18dfc4;
    background: rgba(8, 22, 21, .9);
    border: 1px solid rgba(19, 223, 196, .62);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.server-cta-button i { font-size: .95rem; }
.server-cta-button.is-primary { color: #071815; background: linear-gradient(135deg, #31e7cf, #0dbca8); border-color: #59f4df; }
.server-cta-button:hover, .server-cta-button:focus-visible { color: #061714; background: #13dfc4; border-color: #13dfc4; box-shadow: 0 0 20px rgba(19, 223, 196, .24); transform: translateY(-2px); outline: none; }
.server-cta-button.is-primary:hover, .server-cta-button.is-primary:focus-visible { background: #63f3df; }
.server-details-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.server-details-heading h2 { margin: 9px 0; color: #f1f8f6; font-size: clamp(1.6rem, 3.5vw, 2.65rem); }
.server-details-heading p { margin: 0; color: rgba(213, 228, 225, .72); font-size: .98rem; }
.server-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.server-topic-embed {
    position: relative;
    padding: clamp(22px, 3vw, 32px);
    background: linear-gradient(145deg, rgba(12, 27, 26, .91), rgba(8, 17, 18, .86));
    border: 1px solid rgba(19, 223, 196, .28);
    border-radius: 7px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2), inset 0 0 28px rgba(19, 223, 196, .025);
}
.server-topic-kicker { display: flex; align-items: center; gap: 9px; color: #13dfc4; font-size: .7rem; font-weight: 900; letter-spacing: .15em; }
.server-topic-kicker i { width: 25px; height: 1px; background: rgba(19, 223, 196, .65); }
.server-topic-embed h3 { position: relative; width: fit-content; margin: 12px 0 20px; padding-bottom: 12px; color: #f1f8f6; font-family: 'Cinzel', serif; font-size: clamp(1.08rem, 2vw, 1.45rem); line-height: 1.35; }
.server-topic-embed h3::after { position: absolute; bottom: 0; left: 0; width: 52px; height: 2px; background: linear-gradient(90deg, #13dfc4, rgba(19, 223, 196, .12)); content: ''; }
.server-topic-embed > p { margin: 0 0 13px; color: rgba(221, 235, 232, .82); font-size: .88rem; line-height: 1.75; }
.server-equipment-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0; }
.server-equipment-tags span { padding: 7px 12px; color: #13dfc4; background: rgba(19, 223, 196, .07); border: 1px solid rgba(19, 223, 196, .44); border-radius: 3px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.server-topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.server-topic-list li { display: flex; align-items: flex-start; gap: 9px; color: #dcebe8; font-size: .82rem; line-height: 1.5; }
.server-topic-list li i { flex: 0 0 auto; margin-top: 4px; color: #13dfc4; font-size: .7rem; }
.server-topic-subline { display: table; margin: 22px 0 12px; padding-bottom: 7px; color: #13dfc4; border-bottom: 1px solid rgba(19, 223, 196, .52); font-size: .74rem; font-weight: 900; letter-spacing: .12em; }
.server-topic-note { margin-top: 16px !important; padding-top: 13px; color: rgba(213, 228, 225, .65) !important; border-top: 1px solid rgba(213, 228, 225, .12); font-size: .8rem !important; }
.server-topic-market { background: linear-gradient(145deg, rgba(9, 28, 27, .95), rgba(8, 17, 18, .88)); border-color: rgba(19, 223, 196, .44); }
.server-topic-market h3 { color: #13dfc4; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .08em; }
.server-market-signoff { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 15px; color: #13dfc4; border-top: 1px solid rgba(19, 223, 196, .22); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.server-market-signoff i { font-size: 1rem; }
@media (max-width: 760px) {
    .server-cta-row { gap: 9px; margin-bottom: 29px; }
    .server-cta-button { min-width: min(31%, 156px); padding: 11px 12px; font-size: .69rem; }
    .server-details-heading { margin-bottom: 30px; }
    .server-topic-grid { grid-template-columns: 1fr; gap: 13px; }
}
@media (max-width: 500px) {
    .server-cta-row { display: grid; grid-template-columns: 1fr; width: min(100%, 360px); }
    .server-cta-button { width: 100%; min-width: 0; }
    .server-topic-list { grid-template-columns: 1fr; gap: 10px; }
    .server-topic-embed { padding: 21px 18px; }
}
@media (max-width: 900px) {
    .footer-social { justify-content: center; }
}

/* Larger brand mark in the desktop navigation. */
@media (min-width: 901px) {
    .navbar { height: 90px; min-height: 90px; }
    .nav-logo-img { height: 76px; max-height: 80px; width: auto; }
    .nav-container { gap: 34px; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .nav-logo-img { height: 54px; max-height: 58px; width: auto; }
}

/* Ten class cards: row-major order, five cards per row on desktop. */
.page-classes .section-classes-page { padding: 28px 0 90px; }
.class-deck-intro { margin: 0 0 24px; color: rgba(221, 235, 232, .75); font-size: .92rem; text-align: center; }
.class-playing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.class-playing-card {
    position: relative;
    min-width: 0;
    min-height: 316px;
    aspect-ratio: .72;
    overflow: hidden;
    isolation: isolate;
    background: #0b1717;
    border: 1px solid rgba(19, 223, 196, .38);
    border-radius: 9px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .36), inset 0 0 0 3px rgba(4, 13, 13, .55);
    transform-origin: center;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .24s ease, box-shadow .24s ease;
}
.class-playing-card::before { position: absolute; z-index: 2; inset: 7px; border: 1px solid rgba(164, 255, 242, .14); border-radius: 5px; pointer-events: none; content: ''; }
.class-playing-card:focus { outline: none; }
.class-playing-card:focus-visible { outline: 2px solid #72f5df; outline-offset: 4px; }
.class-playing-card:hover, .class-playing-card:focus-visible { z-index: 10; border-color: rgba(19, 223, 196, .92); box-shadow: 0 24px 48px rgba(0, 0, 0, .58), 0 0 24px rgba(19, 223, 196, .22); }
@keyframes class-playing-card-spin {
    from { transform: perspective(1200px) rotateY(0deg) scale(1); }
    38% { transform: perspective(1200px) rotateY(145deg) scale(1.24); }
    72% { transform: perspective(1200px) rotateY(285deg) scale(1.48); }
    to { transform: perspective(1200px) rotateY(360deg) scale(1.55) translateY(24px); }
}
@media (hover: hover) and (pointer: fine) {
    .class-playing-card:hover { animation: class-playing-card-spin 1.65s cubic-bezier(.22, .72, .22, 1) both; }
}
.class-playing-art { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, rgba(19, 223, 196, .15), transparent 52%), linear-gradient(180deg, #122322 0%, #101817 60%, #080e0e 100%); }
.class-playing-art::after { position: absolute; inset: 25% 0 0; background: linear-gradient(180deg, transparent 35%, rgba(5, 10, 10, .35) 58%, rgba(5, 10, 10, .96) 100%); content: ''; }
.class-playing-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center 28%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); transition: transform .35s ease; }
.class-playing-card:hover .class-playing-art img { transform: scale(1.045); }
.class-playing-topline { position: absolute; z-index: 3; top: 15px; right: 15px; left: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.class-playing-topline > span { padding: 5px 8px; color: #9ff8e9; background: rgba(5, 15, 14, .74); border: 1px solid rgba(19, 223, 196, .34); border-radius: 3px; font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.class-playing-topline img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .7)); }
.class-playing-caption { position: absolute; z-index: 3; right: 16px; bottom: 18px; left: 16px; }
.class-playing-number { display: inline-block; margin-bottom: 6px; color: #13dfc4; font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.class-playing-caption h2 { margin: 0 0 8px; color: #f3f4ec; font-family: 'Cinzel', serif; font-size: clamp(.95rem, 1.25vw, 1.2rem); line-height: 1.15; text-shadow: 0 2px 8px #000; }
.class-playing-caption p { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(230, 239, 235, .78); font-size: .69rem; line-height: 1.48; text-align: left; text-overflow: ellipsis; text-shadow: 0 1px 5px #000; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.class-playing-card:hover .class-playing-caption p,
.class-playing-card:focus-visible .class-playing-caption p { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; }
.page-classes .bg-image { transition: filter .55s ease, transform .55s ease; }
.page-classes:has(.class-playing-card:hover) .bg-image,
.page-classes:has(.class-playing-card:focus-visible) .bg-image { filter: brightness(.42) blur(6px); transform: scale(1.035); }
.class-playing-card:focus-visible { animation: class-playing-card-spin 1.65s cubic-bezier(.22, .72, .22, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .class-playing-card:hover, .class-playing-card:focus-visible { animation: none; transform: scale(1.18); }
    .page-classes .bg-image { transition: none; }
}
@media (max-width: 1120px) { .class-playing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .class-playing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 620px) {
    .class-playing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .class-playing-card { min-height: 285px; }
    .class-playing-topline { top: 12px; right: 12px; left: 12px; }
    .class-playing-topline img { width: 32px; height: 32px; }
    .class-playing-caption { right: 13px; bottom: 15px; left: 13px; }
}
@media (max-width: 380px) {
    .class-playing-grid { grid-template-columns: 1fr; width: min(100%, 300px); margin: 0 auto; }
    .class-playing-card { min-height: 395px; }
}

/* Server information page layout */
.page-info .section-server-info-page { position: relative; padding: 60px 0 92px; background: linear-gradient(180deg, rgba(7, 14, 14, .76), rgba(7, 15, 15, .97)); }
.server-info-container { max-width: 1120px; }
.server-info-intro { max-width: 780px; margin: 0 auto 34px; text-align: center; }
.server-info-eyebrow { color: #13dfc4; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.server-info-intro h2 { margin: 10px 0 12px; color: #f0f7f5; font-family: 'Cinzel', serif; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.server-info-intro p { margin: 0; color: rgba(221, 235, 232, .75); font-size: .96rem; line-height: 1.8; }
.server-info-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 36px; }
.server-info-stat { display: flex; min-height: 92px; align-items: center; gap: 16px; padding: 17px 20px; background: linear-gradient(135deg, rgba(13, 24, 24, .95), rgba(8, 16, 17, .9)); border: 1px solid rgba(19, 223, 196, .28); border-radius: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .19); }
.server-info-stat-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; color: #8df8e8; background: radial-gradient(circle, rgba(19, 223, 196, .2), rgba(19, 223, 196, .04)); border: 1px solid rgba(19, 223, 196, .4); border-radius: 50%; font-size: 1.15rem; }
.server-info-stat-copy { display: grid; gap: 4px; }
.server-info-stat-copy > span { color: rgba(221, 235, 232, .63); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.server-info-stat-copy strong { color: #fff; font-family: 'Cinzel', serif; font-size: 1.2rem; }
.server-info-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.server-info-topic { padding: clamp(22px, 3vw, 31px); background: linear-gradient(145deg, rgba(13, 27, 26, .9), rgba(8, 16, 17, .9)); border: 1px solid rgba(19, 223, 196, .25); border-radius: 8px; box-shadow: 0 15px 34px rgba(0, 0, 0, .19), inset 0 0 28px rgba(19, 223, 196, .025); }
.server-info-topic-label { display: flex; align-items: center; gap: 9px; color: #13dfc4; font-size: .67rem; font-weight: 900; letter-spacing: .16em; }
.server-info-topic-label i { width: 25px; height: 1px; background: rgba(19, 223, 196, .6); }
.server-info-topic h3 { position: relative; width: fit-content; margin: 13px 0 19px; padding-bottom: 12px; color: #f2f7f5; font-family: 'Cinzel', serif; font-size: clamp(1.03rem, 1.6vw, 1.3rem); line-height: 1.4; }
.server-info-topic h3::after { position: absolute; bottom: 0; left: 0; width: 48px; height: 2px; background: linear-gradient(90deg, #13dfc4, rgba(19, 223, 196, .1)); content: ''; }
.server-info-topic > p { margin: 0 0 13px; color: rgba(221, 235, 232, .79); font-size: .86rem; line-height: 1.75; }
.server-info-dungeon-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.server-info-dungeon-tags span { padding: 7px 12px; color: #5ff0dc; background: rgba(19, 223, 196, .07); border: 1px solid rgba(19, 223, 196, .35); border-radius: 3px; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.server-info-topic ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.server-info-topic li { display: flex; gap: 9px; color: rgba(230, 239, 235, .83); font-size: .79rem; line-height: 1.5; }
.server-info-topic li i { flex: 0 0 auto; margin-top: 3px; color: #13dfc4; font-size: .68rem; }
.server-info-callout { display: grid; gap: 7px; margin: 20px 0 15px; padding: 14px 16px; background: rgba(19, 223, 196, .055); border-left: 2px solid #13dfc4; }
.server-info-callout strong { color: #13dfc4; font-size: .7rem; letter-spacing: .14em; }
.server-info-callout span { color: rgba(230, 239, 235, .82); font-size: .82rem; line-height: 1.65; }
.server-info-topic > p.server-info-muted { margin-top: 16px; padding-top: 13px; color: rgba(213, 228, 225, .62); border-top: 1px solid rgba(213, 228, 225, .12); font-size: .79rem; }
.server-info-topic.info-market { background: linear-gradient(145deg, rgba(10, 36, 33, .94), rgba(8, 17, 18, .92)); border-color: rgba(19, 223, 196, .42); }
.server-info-market-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 15px; color: #55e9d4; border-top: 1px solid rgba(19, 223, 196, .2); font-size: .75rem; font-weight: 800; }
.server-info-market-note i { font-size: 1rem; }
@media (max-width: 760px) {
    .page-info .section-server-info-page { padding: 42px 0 64px; }
    .server-info-topics { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .server-info-stats { grid-template-columns: 1fr; }
    .server-info-topic ul { grid-template-columns: 1fr; }
    .server-info-topic { padding: 21px 18px; }
}

/* Informações em texto corrido, sem cards ou embeds */
.page-info .section-server-info-page { padding: 58px 0 88px; }
.server-info-container { max-width: 940px; }
.server-info-intro { margin-bottom: 38px; }
.server-info-config { margin: 0 0 30px; padding: 0 0 24px; border-bottom: 1px solid rgba(19, 223, 196, .24); }
.server-info-config h2 { margin: 0 0 16px; color: #13dfc4; font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.server-info-config-list { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.server-info-config-list > div { display: flex; flex-wrap: wrap; gap: 7px; }
.server-info-config-list dt { color: rgba(221, 235, 232, .62); font-size: .83rem; }
.server-info-config-list dd { margin: 0; color: #f0f7f5; font-size: .88rem; font-weight: 700; }
.server-info-topics { display: block; }
.server-info-text-block { padding: 23px 0 25px; border-bottom: 1px solid rgba(213, 228, 225, .14); }
.server-info-text-block:last-child { border-bottom: 0; }
.server-info-text-block .server-info-topic-label { display: block; color: #13dfc4; font-size: .68rem; font-weight: 900; letter-spacing: .18em; }
.server-info-text-block h3 { width: fit-content; margin: 8px 0 13px; padding-bottom: 8px; color: #f2f7f5; font-family: 'Cinzel', serif; font-size: clamp(1.15rem, 2vw, 1.48rem); line-height: 1.35; border-bottom: 1px solid rgba(19, 223, 196, .55); }
.server-info-text-block h4 { margin: 20px 0 7px; color: #61edda; font-size: .91rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.server-info-text-block p { max-width: 850px; margin: 0 0 11px; color: rgba(221, 235, 232, .8); font-size: .91rem; line-height: 1.8; }
.server-info-text-block p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
    .page-info .section-server-info-page { padding: 40px 0 62px; }
    .server-info-config-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
    .server-info-config-list > div { display: grid; gap: 3px; }
}
@media (max-width: 430px) { .server-info-config-list { grid-template-columns: 1fr; } }

/* Newspaper-style news front page */
.page-news .section-page-header { padding-bottom: 34px; }
.page-news .section-news-page { padding: 20px 0 82px; }
.news-grid-page { display: block; max-width: 1120px; margin: 0 auto; }
.news-card.newspaper-headline {
    overflow: hidden;
    color: #edf5f2;
    background: linear-gradient(135deg, rgba(7, 15, 15, .93), rgba(12, 22, 22, .88));
    border: 0;
    border-top: 2px solid rgba(19, 223, 196, .78);
    border-bottom: 1px solid rgba(213, 228, 225, .24);
    border-radius: 0;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .3);
}
.newspaper-rule { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 12px clamp(20px, 4vw, 46px); color: rgba(218, 233, 229, .66); border-bottom: 1px solid rgba(213, 228, 225, .16); font-size: .66rem; font-weight: 800; letter-spacing: .15em; }
.newspaper-rule span:first-child { color: #55e9d4; font-family: 'Cinzel', serif; font-size: .84rem; }
.newspaper-headline-main { max-width: 1000px; margin: 0 auto; padding: clamp(28px, 5vw, 54px) clamp(20px, 5vw, 58px) 38px; }
.newspaper-kicker { color: #55e9d4; font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
.newspaper-headline-main h2 { max-width: 930px; margin: 12px 0 15px; color: #f7f4ec; font-family: 'Cinzel', Georgia, serif; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.newspaper-headline-main h2 a { color: inherit; text-decoration: none; }
.newspaper-headline-main h2 a:hover { color: #72f5df; }
.newspaper-deck { max-width: 800px; margin: 0; color: rgba(222, 234, 231, .78); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; }
.newspaper-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 27px; border-top: 1px solid rgba(19, 223, 196, .38); border-bottom: 1px solid rgba(19, 223, 196, .24); }
.newspaper-dates > div { display: grid; align-content: start; gap: 9px; min-height: 91px; padding: 18px 20px; }
.newspaper-dates > div + div { border-left: 1px solid rgba(213, 228, 225, .16); }
.newspaper-dates span { color: #5cebd7; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.newspaper-dates strong { color: #f1f6f4; font-family: 'Cinzel', Georgia, serif; font-size: clamp(.92rem, 1.3vw, 1.08rem); }
.newspaper-read-link { display: inline-flex; align-items: center; gap: 12px; color: #5cebd7; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-decoration: none; }
.newspaper-read-link:hover { color: #fff; }
.news-card.newspaper-listing { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; margin-top: 22px; border: 0; border-top: 1px solid rgba(213, 228, 225, .2); border-bottom: 1px solid rgba(213, 228, 225, .2); border-radius: 0; background: rgba(7, 15, 15, .72); box-shadow: none; }
.newspaper-listing .news-content h3 { font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.newspaper-listing .news-image { height: 100%; min-height: 190px; }
.newspaper-listing .news-content { padding: 25px 30px; }
.page-news .news-detail-card { max-width: 1020px; margin: 0 auto; border: 0; border-top: 2px solid rgba(19, 223, 196, .72); border-bottom: 1px solid rgba(213, 228, 225, .22); border-radius: 0; background: rgba(7, 15, 15, .90); }
.page-news .news-detail-content { max-width: 900px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); }
.page-news .news-detail-content h2 { font-family: 'Cinzel', Georgia, serif; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.1; }
.page-news .news-detail-excerpt { color: rgba(225, 237, 233, .8); line-height: 1.7; }
.page-news .news-body h3 { margin: 26px 0 9px; padding-top: 14px; color: #61edda; border-top: 1px solid rgba(19, 223, 196, .24); font-family: 'Cinzel', Georgia, serif; font-size: 1.22rem; }
@media (max-width: 640px) {
    .newspaper-rule { justify-content: flex-start; }
    .newspaper-dates { grid-template-columns: 1fr; }
    .newspaper-dates > div { min-height: 0; padding: 14px 4px; }
    .newspaper-dates > div + div { border-top: 1px solid rgba(213, 228, 225, .16); border-left: 0; }
    .news-card.newspaper-listing { display: block; }
    .newspaper-listing .news-image { height: 180px; min-height: 0; }
    .newspaper-listing .news-content { padding: 20px; }
}

/* One unified, responsive server-details embed */
.server-info-config-featured {
    width: 100%;
    margin: 0 auto 42px;
    padding: clamp(23px, 4vw, 38px);
    overflow: hidden;
    background: radial-gradient(ellipse at 12% 0%, rgba(19, 223, 196, .11), transparent 54%), linear-gradient(135deg, rgba(11, 25, 25, .97), rgba(7, 14, 15, .96));
    border: 1px solid rgba(19, 223, 196, .42);
    border-radius: 12px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .05);
}
.server-config-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 23px; padding-bottom: 16px; border-bottom: 1px solid rgba(19, 223, 196, .24); }
.server-config-heading .server-info-eyebrow { display: block; margin-bottom: 5px; }
.server-config-heading h2 { margin: 0; color: #f1f8f6; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: .02em; text-transform: none; }
.server-config-highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.server-config-highlight { display: flex; min-width: 0; min-height: 104px; align-items: center; justify-content: center; gap: 15px; padding: 12px clamp(12px, 2vw, 24px); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.server-config-highlight + .server-config-highlight { border-left: 1px solid rgba(213, 228, 225, .16); }
.server-config-highlight:first-child { background: transparent; }
.server-config-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; color: #66f3de; background: rgba(19, 223, 196, .09); border: 1px solid rgba(19, 223, 196, .34); border-radius: 50%; font-size: 1rem; }
.server-config-highlight > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; }
.server-config-label { color: rgba(220, 238, 234, .62); font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
.server-config-highlight strong { color: #f5fbf8; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.1; }
.server-config-highlight em { color: #52ebd5; font-size: .64rem; font-style: normal; font-weight: 900; letter-spacing: .17em; }
.server-config-highlight:last-child strong { font-size: clamp(.95rem, 1.35vw, 1.18rem); }
@media (max-width: 700px) {
    .server-config-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
    .server-config-highlight-grid { grid-template-columns: 1fr; }
    .server-config-highlight { min-height: 83px; justify-content: flex-start; padding: 14px 2px; }
    .server-config-highlight + .server-config-highlight { border-top: 1px solid rgba(213, 228, 225, .14); border-left: 0; }
}

/* Arcane light rays behind the home logo */
.hero-brand-stack { position: relative; isolation: isolate; }
.hero-brand-stack::before {
    position: absolute;
    z-index: -1;
    inset: -44% -42%;
    pointer-events: none;
    background: conic-gradient(from 8deg at 50% 47%, transparent 0deg 24deg, rgba(19, 223, 196, .16) 27deg, transparent 34deg 74deg, rgba(255, 208, 132, .10) 78deg, transparent 85deg 136deg, rgba(19, 223, 196, .12) 140deg, transparent 148deg 215deg, rgba(255, 208, 132, .09) 220deg, transparent 229deg 300deg, rgba(19, 223, 196, .13) 306deg, transparent 314deg 360deg);
    filter: blur(13px);
    opacity: .78;
    -webkit-mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
    mask-image: radial-gradient(ellipse, #000 8%, transparent 72%);
    animation: saga-arcane-rays 44s linear infinite;
    content: '';
}
@keyframes saga-arcane-rays { to { transform: rotate(360deg); } }

/* A quick cyan flare sweeps across a class card on hover */
.class-playing-card::after {
    position: absolute;
    z-index: 4;
    top: -45%;
    bottom: -45%;
    left: -48%;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 8%, rgba(114, 245, 223, .04) 28%, rgba(114, 245, 223, .30) 50%, rgba(255, 225, 163, .12) 58%, transparent 82%);
    opacity: 0;
    transform: translateX(-30%) rotate(12deg);
    content: '';
}
.class-playing-card:hover::after,
.class-playing-card:focus-visible::after { animation: class-card-light-sweep 1.25s ease-out .25s both; }
@keyframes class-card-light-sweep {
    0% { opacity: 0; transform: translateX(-30%) rotate(12deg); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translateX(430%) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-brand-stack::before { animation: none; }
    .class-playing-card:hover::after, .class-playing-card:focus-visible::after { animation: none; }
}

/* Saga official shop */
.page-store .store-page-header {
    padding: 150px 0 54px;
    background: rgba(4, 10, 10, .55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.store-overline { color: #5cebd7; font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.page-store .page-title { margin: 12px 0; font-family: 'Cinzel', Georgia, serif; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.05; text-shadow: 0 5px 22px rgba(0, 0, 0, .7); }
.page-store .page-subtitle { max-width: 740px; margin: 0 auto; color: rgba(239, 247, 244, .83); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.7; }
.page-store .store-catalog-section { padding: 36px 0 62px; background: rgba(5, 11, 11, .66); -webkit-backdrop-filter: none; backdrop-filter: none; }
.store-container { max-width: 1200px; }
.store-section-heading { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.store-section-heading > span { color: #5cebd7; font-size: .67rem; font-weight: 900; letter-spacing: .2em; }
.store-section-heading h2, .store-order-intro h2 { margin: 9px 0 10px; color: #f4f8f5; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.store-section-heading p, .store-order-intro > p { color: rgba(221, 235, 232, .73); font-size: .91rem; line-height: 1.7; }
.store-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.store-product-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, rgba(13, 26, 26, .96), rgba(6, 13, 14, .95)); border: 1px solid rgba(19, 223, 196, .23); border-radius: 9px; box-shadow: 0 14px 35px rgba(0, 0, 0, .27); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.store-product-card:hover { transform: translateY(-5px); border-color: rgba(19, 223, 196, .62); box-shadow: 0 22px 42px rgba(0, 0, 0, .38), 0 0 22px rgba(19, 223, 196, .09); }
.store-product-art { position: relative; display: grid; min-height: 152px; overflow: hidden; place-items: center; color: rgba(90, 237, 216, .88); background: radial-gradient(ellipse at center, rgba(19, 223, 196, .16), transparent 57%), linear-gradient(135deg, rgba(17, 40, 38, .92), rgba(6, 17, 17, .98)); }
.store-product-art > i { position: relative; z-index: 1; font-size: 3rem; filter: drop-shadow(0 5px 15px rgba(19, 223, 196, .25)); }
.store-product-orbit { position: absolute; width: 112px; height: 112px; border: 1px solid rgba(83, 237, 215, .24); border-radius: 50%; box-shadow: 0 0 35px rgba(19, 223, 196, .10), inset 0 0 24px rgba(19, 223, 196, .07); }
.store-product-art-mark { position: absolute; right: 13px; bottom: 11px; color: rgba(224, 242, 237, .36); font-family: 'Cinzel', Georgia, serif; font-size: .55rem; font-weight: 700; letter-spacing: .22em; }
.store-product-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 19px 20px 20px; }
.store-product-tag { display: inline-block; margin-bottom: 12px; padding: 5px 8px; color: #6bf0dc; background: rgba(19, 223, 196, .07); border: 1px solid rgba(19, 223, 196, .23); border-radius: 3px; font-size: .57rem; font-weight: 900; letter-spacing: .12em; }
.store-product-category { color: rgba(220, 235, 231, .55); font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.store-product-copy h3 { margin: 5px 0 8px; color: #f1f7f4; font-family: 'Cinzel', Georgia, serif; font-size: 1.12rem; line-height: 1.3; }
.store-product-copy p { flex: 1; margin: 0 0 18px; color: rgba(220, 233, 230, .72); font-size: .82rem; line-height: 1.65; }
.store-product-cta { display: inline-flex; align-items: center; gap: 10px; color: #5cebd7; font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-decoration: none; }
.store-product-cta i { transition: transform .2s ease; }
.store-product-cta:hover { color: #fff; }
.store-product-cta:hover i { transform: translateX(4px); }
.store-custom-note { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 24px auto 0; color: rgba(221, 235, 232, .67); font-size: .8rem; line-height: 1.6; text-align: center; }
.store-custom-note i { flex: 0 0 auto; margin-top: 3px; color: #5cebd7; }
.page-store .store-order-section { padding: 60px 0 86px; background: linear-gradient(180deg, rgba(5, 11, 11, .83), rgba(6, 13, 14, .95)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.store-order-panel { display: grid; grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr); overflow: hidden; background: rgba(9, 20, 20, .96); border: 1px solid rgba(19, 223, 196, .32); border-radius: 11px; box-shadow: 0 24px 58px rgba(0, 0, 0, .38); }
.store-order-intro { padding: clamp(25px, 4vw, 42px); background: radial-gradient(ellipse at 10% 12%, rgba(19, 223, 196, .12), transparent 60%), rgba(10, 25, 24, .7); border-right: 1px solid rgba(19, 223, 196, .17); }
.store-order-intro h2 { line-height: 1.2; }
.store-order-intro > p { margin: 0; }
.store-order-steps { display: grid; gap: 12px; margin-top: 27px; color: rgba(226, 239, 235, .74); font-size: .76rem; }
.store-order-steps span { display: flex; align-items: center; gap: 10px; }
.store-order-steps b { display: grid; width: 27px; height: 27px; place-items: center; color: #64efd9; border: 1px solid rgba(19, 223, 196, .36); border-radius: 50%; font-size: .62rem; }
.store-order-form { padding: clamp(24px, 4vw, 40px); }
.store-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.store-form-grid label { display: grid; align-content: start; gap: 7px; color: rgba(231, 243, 239, .88); font-size: .76rem; font-weight: 700; }
.store-form-grid label > span { display: inline; color: rgba(221, 235, 232, .5); font-size: .68rem; font-weight: 400; }
.store-form-grid input, .store-form-grid select, .store-form-grid textarea { width: 100%; min-width: 0; padding: 11px 12px; color: #eef8f5; background: rgba(4, 12, 12, .85); border: 1px solid rgba(153, 187, 180, .21); border-radius: 5px; outline: none; font: inherit; font-size: .82rem; }
.store-form-grid input:focus, .store-form-grid select:focus, .store-form-grid textarea:focus { border-color: rgba(19, 223, 196, .7); box-shadow: 0 0 0 3px rgba(19, 223, 196, .09); }
.store-form-grid select option { color: #f0f7f5; background: #0b1717; }
.store-form-grid textarea { min-height: 100px; resize: vertical; }
.store-field-wide { grid-column: 1 / -1; }
.store-consent { display: flex; align-items: flex-start; gap: 9px; margin: 17px 0; color: rgba(221, 235, 232, .67); font-size: .72rem; line-height: 1.5; }
.store-consent input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #13dfc4; }
.store-submit-button { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; color: #041513; background: linear-gradient(135deg, #59efd9, #11c8b3); border: 1px solid rgba(146, 255, 237, .52); border-radius: 5px; cursor: pointer; font: inherit; font-size: .71rem; font-weight: 900; letter-spacing: .12em; transition: transform .2s ease, box-shadow .2s ease; }
.store-submit-button:hover { transform: translateY(-2px); box-shadow: 0 9px 25px rgba(19, 223, 196, .18); }
.store-submit-button:disabled { cursor: not-allowed; color: rgba(240, 255, 245, .86); background: linear-gradient(135deg, #398b58, #247342); border-color: rgba(135, 226, 164, .5); opacity: .88; transform: none; box-shadow: none; }
.store-whatsapp-button { margin: 18px 0 18px; color: #062219; background: linear-gradient(135deg, #73f0a0, #27c96f); border-color: rgba(178, 255, 205, .55); text-decoration: none; }
.store-whatsapp-button:hover { box-shadow: 0 9px 25px rgba(39, 201, 111, .24); }
.store-form-privacy { margin: 12px 0 0; color: rgba(221, 235, 232, .45); font-size: .65rem; line-height: 1.55; }
.store-form-feedback { display: grid; gap: 4px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid; border-radius: 5px; font-size: .8rem; }
.store-form-feedback.is-success { color: #bff8ec; background: rgba(19, 223, 196, .08); border-color: rgba(19, 223, 196, .36); }
.store-form-feedback.is-error { color: #ffd1ce; background: rgba(211, 59, 57, .08); border-color: rgba(211, 91, 87, .35); }
.store-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.page-store .main-footer { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 880px) {
    .store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .store-order-panel { grid-template-columns: 1fr; }
    .store-order-intro { border-right: 0; border-bottom: 1px solid rgba(19, 223, 196, .17); }
    .store-order-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .page-store .store-page-header { padding: 125px 0 40px; }
    .page-store .store-catalog-section { padding: 28px 0 45px; }
    .store-product-grid { grid-template-columns: 1fr; gap: 13px; }
    .store-product-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
    .store-product-art { min-height: 100%; }
    .store-product-art > i { font-size: 2rem; }
    .store-product-orbit { width: 76px; height: 76px; }
    .store-product-art-mark { right: 4px; bottom: 6px; font-size: .4rem; }
    .store-product-copy { padding: 14px; }
    .store-product-tag { margin-bottom: 8px; font-size: .5rem; }
    .store-product-copy h3 { font-size: .97rem; }
    .store-product-copy p { font-size: .75rem; }
    .store-order-steps { grid-template-columns: 1fr; }
    .store-form-grid { grid-template-columns: 1fr; }
    .store-field-wide { grid-column: auto; }
    .store-submit-button { width: 100%; }
}

/* Founder packages */
.page-founders .founder-hero { position: relative; padding: clamp(145px, 18vh, 205px) 0 76px; overflow: hidden; text-align: center; background: linear-gradient(180deg, rgba(3, 9, 10, .45), rgba(3, 10, 11, .91)); }
.founder-container { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.founder-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #57ecd6; font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.founder-eyebrow i { font-size: .9rem; }
.founder-hero h1 { max-width: 900px; margin: 17px auto 12px; color: #f4f8f5; font-family: 'Cinzel', Georgia, serif; font-size: clamp(2.55rem, 6.5vw, 5.1rem); font-weight: 900; line-height: 1.05; text-shadow: 0 6px 30px rgba(0, 0, 0, .58); }
.founder-hero > .founder-container > p { max-width: 760px; margin: 0 auto; color: rgba(236, 246, 242, .83); font-size: clamp(.96rem, 1.6vw, 1.13rem); line-height: 1.75; }
.founder-scroll-link { display: inline-flex; align-items: center; gap: 11px; margin-top: 29px; padding: 12px 17px; color: #65efda; border: 1px solid rgba(19, 223, 196, .38); border-radius: 4px; background: rgba(9, 25, 24, .76); font-size: .67rem; font-weight: 900; letter-spacing: .14em; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.founder-scroll-link:hover { transform: translateY(-2px); background: rgba(19, 223, 196, .12); }
.founder-packages-section { padding: 58px 0 88px; background: linear-gradient(180deg, rgba(5, 12, 13, .93), rgba(4, 10, 11, .96)); }
.founder-section-heading { max-width: 750px; margin: 0 auto 34px; text-align: center; }
.founder-section-heading > span { color: #5cebd7; font-size: .66rem; font-weight: 900; letter-spacing: .2em; }
.founder-section-heading h2 { margin: 9px 0 8px; color: #f1f7f4; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.founder-section-heading p { margin: 0; color: rgba(218, 232, 228, .7); font-size: .92rem; line-height: 1.65; }
.founder-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.founder-package-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: linear-gradient(150deg, rgba(10, 26, 25, .98), rgba(5, 12, 13, .98)); border: 1px solid rgba(46, 200, 178, .3); border-radius: 10px; box-shadow: 0 20px 55px rgba(0, 0, 0, .38); }
.founder-package-card.is-featured { border-color: rgba(83, 237, 215, .68); box-shadow: 0 22px 58px rgba(0, 0, 0, .42), 0 0 32px rgba(19, 223, 196, .1); }
.founder-media { position: relative; display: grid; min-height: 300px; overflow: hidden; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(25, 204, 176, .2), transparent 58%), linear-gradient(135deg, #152c29, #071010 72%); }
.founder-media img, .founder-media video { display: block; width: 100%; height: 100%; min-height: 300px; max-height: 420px; object-fit: cover; }
.founder-media-placeholder { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(97, 235, 215, .78); }
.founder-media-placeholder > i { font-size: 3.2rem; filter: drop-shadow(0 6px 22px rgba(19, 223, 196, .3)); }
.founder-media-placeholder > span:last-child { font-size: .59rem; font-weight: 900; letter-spacing: .19em; }
.founder-media-rune { position: absolute; color: rgba(81, 227, 205, .11); font-size: 14rem; line-height: 1; }
.founder-tier-label { position: absolute; top: 16px; left: 16px; padding: 7px 10px; color: #70f1de; background: rgba(3, 12, 12, .82); border: 1px solid rgba(19, 223, 196, .35); border-radius: 3px; font-size: .57rem; font-weight: 900; letter-spacing: .13em; }
.founder-package-copy { display: flex; flex: 1; flex-direction: column; padding: clamp(22px, 3vw, 34px); }
.founder-package-kicker { color: #59e9d3; font-size: .63rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.founder-package-copy h3 { margin: 8px 0 10px; color: #f4f7f4; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1.2; }
.founder-package-description { min-height: 52px; margin: 0; color: rgba(220, 234, 230, .75); font-size: .88rem; line-height: 1.7; }
.founder-price { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 22px 0 19px; padding: 15px 0; border-top: 1px solid rgba(19, 223, 196, .15); border-bottom: 1px solid rgba(19, 223, 196, .15); }
.founder-price small { color: rgba(220, 234, 230, .55); font-size: .59rem; font-weight: 900; letter-spacing: .16em; }
.founder-price strong { color: #7bf0dc; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.45rem); text-align: right; }
.founder-benefits h4 { margin: 0 0 12px; color: #f1f6f3; font-family: 'Cinzel', Georgia, serif; font-size: 1rem; }
.founder-benefits ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.founder-benefits li { display: flex; align-items: flex-start; gap: 10px; color: rgba(223, 237, 233, .79); font-size: .81rem; line-height: 1.5; }
.founder-benefits li i { margin-top: 4px; color: #52e8d2; font-size: .72rem; }
.founder-benefits-empty { margin: 0; color: rgba(220, 234, 230, .57); font-size: .8rem; line-height: 1.6; }
.founder-bottom-note { display: flex; max-width: 800px; align-items: flex-start; gap: 12px; margin: 28px auto 0; padding: 15px 18px; color: rgba(222, 236, 231, .65); background: rgba(8, 20, 20, .74); border: 1px solid rgba(19, 223, 196, .15); border-radius: 5px; }
.founder-bottom-note i { margin-top: 3px; color: #5cebd7; }
.founder-bottom-note p { margin: 0; font-size: .76rem; line-height: 1.6; }
.founder-package-grid { grid-template-columns: repeat(2, minmax(0, 350px)); justify-content: center; gap: clamp(18px, 4vw, 38px); }
.founder-card-trigger { position: relative; display: flex; min-height: 435px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 35px; color: #f4f8f5; background: radial-gradient(ellipse at 50% 42%, rgba(29, 182, 158, .22), transparent 47%), linear-gradient(145deg, rgba(13, 37, 34, .98), rgba(4, 12, 13, .99) 72%); border: 1px solid rgba(73, 223, 201, .48); border-radius: 8px; box-shadow: 0 22px 52px rgba(0, 0, 0, .42), inset 0 0 45px rgba(19, 223, 196, .045); cursor: pointer; font: inherit; isolation: isolate; transition: transform .42s cubic-bezier(.2, .75, .25, 1), border-color .3s ease, box-shadow .3s ease; }
.founder-card-trigger::before, .founder-card-trigger::after { position: absolute; z-index: -1; content: ''; pointer-events: none; }
.founder-card-trigger::before { inset: 11px; border: 1px solid rgba(92, 235, 215, .17); border-radius: 4px; }
.founder-card-trigger::after { top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(117, 255, 233, .12), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.founder-card-trigger:hover { transform: translateY(-8px) rotateX(2deg); border-color: rgba(113, 255, 232, .8); box-shadow: 0 30px 64px rgba(0, 0, 0, .5), 0 0 32px rgba(19, 223, 196, .16); }
.founder-card-trigger:hover::after { left: 130%; }
.founder-card-trigger:focus-visible { outline: 2px solid #74f2df; outline-offset: 5px; }
.founder-card-trigger.is-featured { border-color: rgba(194, 163, 91, .72); background: radial-gradient(ellipse at 50% 42%, rgba(176, 136, 58, .2), transparent 48%), linear-gradient(145deg, rgba(35, 30, 21, .98), rgba(12, 13, 13, .99) 72%); }
.founder-card-trigger.is-featured::before { border-color: rgba(201, 173, 111, .25); }
.founder-card-ornament { margin-bottom: 29px; color: #63ebd5; font-family: 'Cinzel', Georgia, serif; font-size: 4.3rem; line-height: 1; text-shadow: 0 0 26px rgba(19, 223, 196, .5); transition: transform .65s cubic-bezier(.2, .75, .25, 1); }
.founder-card-trigger:hover .founder-card-ornament { transform: rotate(45deg) scale(1.1); }
.founder-card-trigger.is-featured .founder-card-ornament { color: #d2b269; text-shadow: 0 0 26px rgba(190, 148, 61, .4); }
.founder-card-title { max-width: 100%; color: #f3f7f4; font-family: 'Cinzel', Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 900; line-height: 1.25; text-align: center; text-shadow: 0 5px 22px rgba(0, 0, 0, .62); }
.founder-dialog { width: min(1000px, calc(100vw - 34px)); max-width: none; max-height: min(88vh, 850px); padding: 0; overflow: visible; color: #eef7f3; background: transparent; border: 0; }
.founder-dialog[open] { animation: founder-dialog-reveal .72s cubic-bezier(.18, .8, .22, 1) both; }
.founder-dialog::backdrop { background: rgba(1, 6, 7, .79); -webkit-backdrop-filter: blur(11px) brightness(.42); backdrop-filter: blur(11px) brightness(.42); animation: founder-backdrop-in .35s ease both; }
.founder-dialog-shell { position: relative; max-height: min(88vh, 850px); overflow: auto; background: linear-gradient(145deg, rgba(12, 27, 26, .99), rgba(4, 10, 11, .99)); border: 1px solid rgba(75, 226, 205, .65); border-radius: 10px; box-shadow: 0 32px 100px rgba(0, 0, 0, .78), 0 0 45px rgba(19, 223, 196, .12); scrollbar-color: rgba(69, 195, 175, .5) rgba(0, 0, 0, .2); }
.founder-dialog-close { position: absolute; z-index: 5; top: 14px; right: 14px; display: grid; width: 40px; height: 40px; margin: 0; place-items: center; color: #d8f8ef; background: rgba(3, 12, 12, .84); border: 1px solid rgba(99, 234, 214, .34); border-radius: 50%; cursor: pointer; font-size: 1rem; transition: color .2s ease, background .2s ease, transform .2s ease; }
.founder-dialog-close:hover { color: #051311; background: #62ecd7; transform: rotate(90deg); }
.founder-dialog-content { min-height: 390px; }
.founder-detail-layout { display: grid; min-height: 540px; grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr); }
.founder-detail-layout .founder-media { position: sticky; top: 0; align-self: stretch; min-height: 540px; height: 100%; }
.founder-detail-layout .founder-media img, .founder-detail-layout .founder-media video { min-height: 540px; max-height: 760px; height: 100%; object-fit: cover; }
.founder-detail-layout .founder-media-placeholder { min-height: 540px; }
.founder-package-copy { padding: clamp(28px, 4vw, 54px); }
.founder-package-copy h3 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.founder-package-description { min-height: 0; }
.founder-price { margin: 17px 0 20px; }
.founder-benefits ul { gap: 12px; }
.founder-benefits li { font-size: .88rem; }
.founder-bottom-note { max-width: 740px; }
@keyframes founder-dialog-reveal { 0% { opacity: 0; transform: perspective(1400px) rotateY(-25deg) scale(.82) translateY(35px); } 55% { opacity: 1; transform: perspective(1400px) rotateY(4deg) scale(1.015) translateY(0); } 100% { opacity: 1; transform: perspective(1400px) rotateY(0) scale(1) translateY(0); } }
@keyframes founder-backdrop-in { from { background-color: rgba(1, 6, 7, 0); backdrop-filter: blur(0) brightness(1); } to { background-color: rgba(1, 6, 7, .79); backdrop-filter: blur(11px) brightness(.42); } }
@media (max-width: 780px) { .founder-card-trigger { min-height: 350px; padding: 24px; } .founder-detail-layout { grid-template-columns: 1fr; } .founder-detail-layout .founder-media, .founder-detail-layout .founder-media img, .founder-detail-layout .founder-media video, .founder-detail-layout .founder-media-placeholder { position: relative; min-height: 270px; height: 270px; max-height: 270px; } }
@media (max-width: 560px) { .founder-package-grid { grid-template-columns: 1fr; max-width: 380px; } .founder-card-trigger { min-height: 250px; } .founder-card-ornament { margin-bottom: 17px; font-size: 3.2rem; } .founder-dialog { width: calc(100vw - 18px); max-height: 92vh; } .founder-dialog-shell { max-height: 92vh; border-radius: 7px; } .founder-detail-layout .founder-media, .founder-detail-layout .founder-media img, .founder-detail-layout .founder-media video, .founder-detail-layout .founder-media-placeholder { min-height: 210px; height: 210px; max-height: 210px; } .founder-package-copy { padding: 25px 20px 24px; } .founder-dialog-close { top: 8px; right: 8px; width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .founder-card-trigger, .founder-card-ornament { transition: none; } .founder-dialog[open], .founder-dialog::backdrop { animation: none; } }
@media (max-width: 560px) { .page-founders .founder-hero { padding: 125px 0 54px; } .founder-packages-section { padding: 42px 0 62px; } .founder-container { width: min(100% - 26px, 600px); } .founder-bottom-note { padding: 13px; } }

/* Centered, high-focus founder card reveal */
.page-founders .founder-dialog { position: fixed; inset: 0; width: min(1120px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: min(90vh, 860px); margin: auto; padding: 0; overflow: visible; }
.page-founders .founder-dialog-shell { position: relative; width: 100%; max-height: min(90vh, 860px); overflow: auto; background: radial-gradient(ellipse at 3% 0%, rgba(23, 184, 159, .21), transparent 35%), linear-gradient(135deg, rgba(11, 29, 27, .99), rgba(3, 9, 10, .99) 72%); border: 1px solid rgba(99, 244, 222, .78); border-radius: 13px; box-shadow: 0 0 0 1px rgba(19, 223, 196, .1), 0 35px 110px rgba(0, 0, 0, .86), 0 0 70px rgba(19, 223, 196, .2); }
.page-founders .founder-dialog::backdrop { background: rgba(0, 4, 5, .84); -webkit-backdrop-filter: blur(13px) brightness(.28) saturate(.72); backdrop-filter: blur(13px) brightness(.28) saturate(.72); }
.page-founders .founder-detail-layout { min-height: 620px; grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr); }
.page-founders .founder-detail-layout .founder-media { min-height: 620px; border-right: 1px solid rgba(91, 231, 210, .21); }
.page-founders .founder-detail-layout .founder-media img, .page-founders .founder-detail-layout .founder-media video { min-height: 620px; max-height: 780px; }
.page-founders .founder-detail-layout .founder-media-placeholder { min-height: 620px; background: radial-gradient(circle, rgba(53, 223, 194, .14), transparent 54%); }
.page-founders .founder-tier-label { top: 25px; left: 25px; padding: 9px 13px; color: #8ff7e6; background: rgba(3, 15, 15, .91); border-color: rgba(101, 244, 220, .55); font-size: .63rem; }
.page-founders .founder-package-copy { position: relative; z-index: 1; padding: clamp(34px, 4vw, 58px); }
.page-founders .founder-package-kicker { font-size: .68rem; letter-spacing: .2em; }
.page-founders .founder-package-copy h3 { margin: 12px 0 15px; font-size: clamp(2.15rem, 4vw, 3.2rem); line-height: 1.12; text-shadow: 0 5px 24px rgba(0, 0, 0, .55); }
.page-founders .founder-package-description { font-size: .94rem; }
.page-founders .founder-price { margin: 20px 0 25px; padding: 17px 0; border-color: rgba(95, 232, 211, .24); }
.page-founders .founder-price small { font-size: .65rem; }
.page-founders .founder-price strong { color: #ffe0a0; font-size: 1.55rem; text-shadow: 0 0 22px rgba(255, 206, 113, .18); }
.page-founders .founder-benefits h4 { margin-bottom: 15px; color: #eaf9f4; font-size: 1.15rem; }
.page-founders .founder-benefits ul { gap: 8px; }
.page-founders .founder-benefits li { align-items: center; gap: 13px; padding: 9px 11px; color: rgba(237, 248, 244, .88); background: linear-gradient(90deg, rgba(34, 160, 140, .12), rgba(10, 26, 25, .16)); border: 1px solid rgba(70, 192, 173, .12); border-radius: 4px; font-size: .86rem; line-height: 1.45; }
.founder-reward-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: #91ffeb; background: radial-gradient(circle, rgba(39, 207, 180, .22), rgba(8, 36, 33, .72)); border: 1px solid rgba(85, 233, 210, .48); border-radius: 50%; box-shadow: 0 0 15px rgba(19, 223, 196, .13), inset 0 0 10px rgba(19, 223, 196, .08); font-size: .91rem; }
.page-founders .founder-card-trigger { min-height: 460px; border-width: 2px; }
.page-founders .founder-card-trigger.is-featured { border-color: rgba(242, 199, 109, .82); box-shadow: 0 22px 58px rgba(0, 0, 0, .45), 0 0 38px rgba(207, 164, 75, .14), inset 0 0 46px rgba(192, 151, 67, .08); }
.page-founders .founder-card-trigger.is-featured .founder-card-title { color: #ffedc5; }
.founder-card-trigger.has-artwork { padding: 0; background: #050a0b; }
.founder-card-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s cubic-bezier(.2, .75, .25, 1), filter .35s ease; }
.founder-card-trigger.has-artwork::before { z-index: 1; inset: 7px; border-color: rgba(112, 244, 224, .48); pointer-events: none; }
.founder-card-trigger.has-artwork:hover .founder-card-cover { transform: scale(1.045); filter: brightness(1.08) saturate(1.08); }
.founder-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 780px) { .page-founders .founder-dialog { width: calc(100vw - 32px); max-height: 92vh; } .page-founders .founder-dialog-shell { max-height: 92vh; } .page-founders .founder-detail-layout { min-height: 0; grid-template-columns: 1fr; } .page-founders .founder-detail-layout .founder-media, .page-founders .founder-detail-layout .founder-media img, .page-founders .founder-detail-layout .founder-media video, .page-founders .founder-detail-layout .founder-media-placeholder { min-height: 300px; height: 300px; max-height: 300px; border-right: 0; border-bottom: 1px solid rgba(91, 231, 210, .21); } }
@media (max-width: 560px) { .page-founders .founder-dialog { width: calc(100vw - 16px); max-height: 94vh; } .page-founders .founder-dialog-shell { max-height: 94vh; border-radius: 9px; } .page-founders .founder-detail-layout .founder-media, .page-founders .founder-detail-layout .founder-media img, .page-founders .founder-detail-layout .founder-media video, .page-founders .founder-detail-layout .founder-media-placeholder { min-height: 210px; height: 210px; max-height: 210px; } .page-founders .founder-package-copy { padding: 30px 22px; } .page-founders .founder-package-copy h3 { font-size: 2rem; } .page-founders .founder-card-trigger { min-height: 270px; } }

/* Keep the info-page artwork clear while darkening it for text contrast */
.page-info .section-page-header,
.page-info .section-server-info-page {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Founder package art: framed by a clear title band and package tier. */
.page-founders .founder-detail-layout .founder-media {
    display: grid;
    grid-template-rows: 100px minmax(0, 1fr) 100px;
    align-items: stretch;
    justify-items: stretch;
    overflow: hidden;
    background: #071211;
}
.page-founders .founder-cover-word {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 8px 14px;
    color: #27e2c2;
    background: radial-gradient(ellipse at 50% 100%, rgba(24, 198, 171, .2), transparent 70%), linear-gradient(180deg, rgba(10, 32, 29, .98), rgba(5, 17, 17, .94));
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 22px rgba(35, 231, 198, .28);
}
.page-founders .founder-cover-word-top { border-bottom: 1px solid rgba(76, 226, 204, .25); }
.page-founders .founder-cover-word-bottom { border-top: 1px solid rgba(76, 226, 204, .25); }
.page-founders .founder-cover-word > span {
    display: inline-block;
    animation: founder-title-pulse 3.4s ease-in-out infinite;
    transform-origin: center;
}
.page-founders .founder-cover-word-bottom > span { animation-delay: 1.15s; }
@keyframes founder-title-pulse {
    0%, 100% { transform: scale(1); color: #27e2c2; text-shadow: 0 0 12px rgba(35, 231, 198, .18); }
    50% { transform: scale(1.045); color: #8affeb; text-shadow: 0 0 15px rgba(35, 231, 198, .75), 0 0 34px rgba(35, 231, 198, .36); }
}
.page-founders .founder-detail-layout .founder-media img,
.page-founders .founder-detail-layout .founder-media video,
.page-founders .founder-detail-layout .founder-media-placeholder {
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: 100%;
    align-self: stretch;
    object-fit: cover;
    object-position: center top;
}
.page-founders .founder-detail-layout .founder-media-placeholder { grid-column: 1; background: radial-gradient(circle, rgba(53, 223, 194, .14), transparent 54%); }
@media (max-width: 780px) {
    .page-founders .founder-detail-layout .founder-media {
        min-height: 440px;
        height: 440px;
        max-height: none;
        grid-template-rows: 72px minmax(0, 1fr) 72px;
        border-bottom: 1px solid rgba(91, 231, 210, .21);
    }
    .page-founders .founder-detail-layout .founder-media img,
    .page-founders .founder-detail-layout .founder-media video,
    .page-founders .founder-detail-layout .founder-media-placeholder { min-height: 0; height: 100%; max-height: none; }
    .page-founders .founder-cover-word { font-size: clamp(1.65rem, 6vw, 2.4rem); }
}
@media (max-width: 560px) {
    .page-founders .founder-detail-layout .founder-media { min-height: 390px; height: 390px; grid-template-rows: 64px minmax(0, 1fr) 64px; }
    .page-founders .founder-cover-word { font-size: clamp(1.45rem, 7vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
    .page-founders .founder-cover-word > span { animation: none; }
}

/* Celestial edition: gold frames and dividers, with emerald accents retained. */
.page-founders .founder-card-trigger.is-featured.has-artwork {
    border-color: rgba(238, 195, 100, .94);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .48), 0 0 30px rgba(225, 174, 66, .2);
}
.page-founders .founder-card-trigger.is-featured.has-artwork::before {
    border-color: rgba(255, 220, 139, .72);
}
.page-founders .founder-card-trigger.is-featured.has-artwork:hover {
    border-color: #ffe3a0;
    box-shadow: 0 26px 62px rgba(0, 0, 0, .55), 0 0 42px rgba(232, 186, 85, .3);
}
.page-founders .founder-dialog-shell.is-celestial {
    background: radial-gradient(ellipse at 4% 0%, rgba(230, 174, 42, .2), transparent 42%), linear-gradient(135deg, rgba(30, 26, 15, .99), rgba(5, 10, 10, .99) 72%);
    border-color: rgba(238, 195, 100, .9);
    box-shadow: 0 0 0 1px rgba(255, 220, 139, .12), 0 35px 110px rgba(0, 0, 0, .88), 0 0 58px rgba(225, 174, 66, .2);
    scrollbar-color: rgba(214, 169, 77, .72) rgba(0, 0, 0, .24);
}
.page-founders .founder-detail-celestial .founder-media {
    border-right-color: rgba(238, 195, 100, .54);
    background: radial-gradient(ellipse at 50% 50%, rgba(220, 164, 35, .13), transparent 68%), #100f09;
}
.page-founders .founder-detail-celestial .founder-cover-word-top,
.page-founders .founder-detail-celestial .founder-cover-word-bottom {
    border-color: rgba(238, 195, 100, .48);
    background: radial-gradient(ellipse at 50% 100%, rgba(232, 177, 48, .24), transparent 72%), linear-gradient(180deg, rgba(36, 30, 15, .98), rgba(17, 15, 9, .96));
}
.page-founders .founder-detail-celestial .founder-price {
    border-color: rgba(238, 195, 100, .32);
}
.page-founders .founder-detail-celestial .founder-benefits li {
    border-color: rgba(238, 195, 100, .24);
    background: linear-gradient(90deg, rgba(148, 106, 31, .12), rgba(10, 23, 22, .18));
}
.page-founders .founder-detail-celestial .founder-reward-icon,
.page-founders .founder-dialog-shell.is-celestial .founder-dialog-close {
    border-color: rgba(238, 195, 100, .58);
}
.page-founders .founder-detail-celestial .founder-cover-word {
    color: #ffd447;
    text-shadow: 0 0 20px rgba(255, 203, 50, .56);
}
.page-founders .founder-detail-celestial .founder-cover-word > span {
    animation-name: founder-title-pulse-gold;
}
.page-founders .founder-detail-celestial .founder-package-kicker,
.page-founders .founder-detail-celestial .founder-package-copy h3,
.page-founders .founder-detail-celestial .founder-benefits h4 {
    color: #ffd447;
}
.page-founders .founder-detail-celestial .founder-reward-icon {
    color: #ffd447;
    background: radial-gradient(circle, rgba(255, 202, 47, .28), rgba(49, 37, 12, .84));
    box-shadow: 0 0 18px rgba(255, 196, 32, .26), inset 0 0 10px rgba(255, 209, 62, .15);
}
.page-founders .founder-detail-celestial .founder-reward-icon i {
    color: #ffd447;
}
.page-founders .founder-dialog-shell.is-celestial .founder-dialog-close { color: #edc56d; }
.page-founders .founder-dialog-shell.is-celestial .founder-dialog-close:hover {
    color: #171208;
    background: #edc56d;
}
@keyframes founder-title-pulse-gold {
    0%, 100% { transform: scale(1); color: #edb91f; text-shadow: 0 0 12px rgba(255, 194, 28, .34); }
    50% { transform: scale(1.045); color: #fff0a3; text-shadow: 0 0 18px rgba(255, 218, 76, .92), 0 0 36px rgba(255, 183, 0, .56); }
}

/* High impact hover for the founder cover cards. */
.page-founders .founder-card-trigger.has-artwork {
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .45s ease, filter .4s ease;
}
.page-founders .founder-card-trigger.has-artwork .founder-card-cover {
    z-index: 0;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
}
.page-founders .founder-card-trigger.has-artwork::after {
    z-index: 2;
    top: -15%;
    left: -115%;
    width: 58%;
    height: 130%;
    background: linear-gradient(105deg, transparent 12%, rgba(210, 255, 245, .06) 35%, rgba(255, 255, 255, .48) 50%, rgba(255, 255, 255, .08) 64%, transparent 88%);
    filter: blur(2px);
    transition: left .95s cubic-bezier(.2, .65, .25, 1);
}
.page-founders .founder-card-trigger.has-artwork::before {
    z-index: 3;
    transition: inset .45s ease, border-color .35s ease, box-shadow .4s ease;
}
.page-founders .founder-card-trigger.has-artwork:hover,
.page-founders .founder-card-trigger.has-artwork:focus-visible {
    z-index: 5;
    transform: translateY(-12px) scale(1.035) rotateX(1.5deg);
}
.page-founders .founder-card-trigger.has-artwork:hover::after,
.page-founders .founder-card-trigger.has-artwork:focus-visible::after { left: 155%; }
.page-founders .founder-card-trigger.has-artwork:hover::before,
.page-founders .founder-card-trigger.has-artwork:focus-visible::before {
    inset: 5px;
    border-color: rgba(141, 255, 237, .9);
    box-shadow: inset 0 0 28px rgba(72, 255, 225, .18), 0 0 22px rgba(72, 255, 225, .22);
}
.page-founders .founder-card-trigger.has-artwork:hover .founder-card-cover,
.page-founders .founder-card-trigger.has-artwork:focus-visible .founder-card-cover {
    transform: scale(1.075);
    filter: brightness(1.12) saturate(1.14) contrast(1.035);
}
.page-founders .founder-card-trigger.is-featured.has-artwork:hover::before,
.page-founders .founder-card-trigger.is-featured.has-artwork:focus-visible::before {
    border-color: rgba(255, 225, 151, .98);
    box-shadow: inset 0 0 30px rgba(255, 199, 68, .2), 0 0 24px rgba(255, 190, 50, .32);
}
.page-founders .founder-card-trigger.is-featured.has-artwork:hover,
.page-founders .founder-card-trigger.is-featured.has-artwork:focus-visible {
    box-shadow: 0 34px 74px rgba(0, 0, 0, .62), 0 0 48px rgba(245, 189, 69, .4);
}
@media (prefers-reduced-motion: reduce) {
    .page-founders .founder-card-trigger.has-artwork,
    .page-founders .founder-card-trigger.has-artwork::before,
    .page-founders .founder-card-trigger.has-artwork::after,
    .page-founders .founder-card-trigger.has-artwork .founder-card-cover {
        transition: none;
    }
    .page-founders .founder-card-trigger.has-artwork:hover,
    .page-founders .founder-card-trigger.has-artwork:focus-visible { transform: none; }
}

/* MMORPG reward chamber: filigree frame, rune glow, and item-like reward plaques. */
.page-founders .founder-dialog-shell {
    --founder-metal: 71, 225, 184;
    --founder-metal-solid: #59e2b8;
    position: relative;
    isolation: isolate;
    background-image:
        radial-gradient(ellipse at 8% 12%, rgba(var(--founder-metal), .16), transparent 34%),
        radial-gradient(ellipse at 92% 88%, rgba(var(--founder-metal), .07), transparent 36%),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(var(--founder-metal), .012) 8px 9px),
        linear-gradient(135deg, rgba(9, 23, 21, .99), rgba(3, 8, 9, .99) 72%);
    border-radius: 4px;
}
.page-founders .founder-dialog-shell::before {
    position: absolute;
    z-index: 3;
    inset: 8px;
    border: 1px solid rgba(var(--founder-metal), .2);
    outline: 1px solid rgba(var(--founder-metal), .1);
    outline-offset: -5px;
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(var(--founder-metal), .88), transparent) left top / 58px 2px no-repeat,
        linear-gradient(180deg, rgba(var(--founder-metal), .88), transparent) left top / 2px 58px no-repeat,
        linear-gradient(270deg, rgba(var(--founder-metal), .88), transparent) right top / 58px 2px no-repeat,
        linear-gradient(180deg, rgba(var(--founder-metal), .88), transparent) right top / 2px 58px no-repeat,
        linear-gradient(90deg, rgba(var(--founder-metal), .55), transparent) left bottom / 42px 2px no-repeat,
        linear-gradient(0deg, rgba(var(--founder-metal), .55), transparent) left bottom / 2px 42px no-repeat,
        linear-gradient(270deg, rgba(var(--founder-metal), .55), transparent) right bottom / 42px 2px no-repeat,
        linear-gradient(0deg, rgba(var(--founder-metal), .55), transparent) right bottom / 2px 42px no-repeat;
    content: '';
    pointer-events: none;
}
.page-founders .founder-dialog-content { position: relative; z-index: 1; }
.page-founders .founder-dialog-close { z-index: 5; }
.page-founders .founder-dialog-shell::before { display: none; }
.page-founders .founder-dialog-shell {
    box-shadow: 0 0 0 1px rgba(var(--founder-metal), .16), inset 0 0 0 3px rgba(var(--founder-metal), .055), 0 35px 110px rgba(0, 0, 0, .86), 0 0 54px rgba(var(--founder-metal), .14);
}
.page-founders .founder-dialog-shell.is-celestial {
    --founder-metal: 255, 202, 69;
    --founder-metal-solid: #ffd447;
    background-image:
        radial-gradient(ellipse at 8% 12%, rgba(var(--founder-metal), .18), transparent 36%),
        radial-gradient(ellipse at 92% 88%, rgba(var(--founder-metal), .09), transparent 38%),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(var(--founder-metal), .014) 8px 9px),
        linear-gradient(135deg, rgba(27, 23, 13, .99), rgba(4, 8, 9, .99) 72%);
    box-shadow: 0 0 0 1px rgba(var(--founder-metal), .2), inset 0 0 0 3px rgba(var(--founder-metal), .075), 0 35px 110px rgba(0, 0, 0, .88), 0 0 58px rgba(var(--founder-metal), .16);
}
.page-founders .founder-detail-layout {
    position: relative;
    isolation: isolate;
}
.page-founders .founder-detail-ancestral { --founder-metal: 71, 225, 184; --founder-metal-solid: #59e2b8; }
.page-founders .founder-detail-celestial { --founder-metal: 255, 202, 69; --founder-metal-solid: #ffd447; }
.page-founders .founder-detail-layout::before {
    display: none;
    content: none;
}
.page-founders .founder-benefits {
    position: relative;
    margin-top: 22px;
    padding: 18px 16px 16px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--founder-metal), .1), transparent 46%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .008) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, rgba(29, 28, 20, .78), rgba(5, 10, 10, .94));
    border: 1px solid rgba(var(--founder-metal), .46);
    border-radius: 3px;
    box-shadow: inset 0 1px rgba(255, 238, 184, .08), inset 0 0 0 3px rgba(var(--founder-metal), .045), inset 0 0 28px rgba(var(--founder-metal), .055), 0 12px 28px rgba(0, 0, 0, .34);
}
.page-founders .founder-benefits::before {
    position: absolute;
    top: 2px;
    right: 12px;
    color: rgba(var(--founder-metal), .065);
    content: '✥';
    font-family: 'Cinzel', Georgia, serif;
    font-size: 6.5rem;
    line-height: 1;
    pointer-events: none;
}
.page-founders .founder-benefits h4 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--founder-metal-solid);
    font-size: 1.03rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.page-founders .founder-benefits h4::before {
    color: var(--founder-metal-solid);
    content: '✦';
    font-size: .8em;
    text-shadow: 0 0 12px rgba(var(--founder-metal), .65);
}
.page-founders .founder-benefits h4::after {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(var(--founder-metal), .42), transparent);
    content: '';
}
.page-founders .founder-benefits ul {
    position: relative;
    z-index: 1;
    gap: 9px;
}
.page-founders .founder-benefits li {
    position: relative;
    min-height: 54px;
    padding: 9px 12px 9px 10px;
    background:
        linear-gradient(105deg, rgba(var(--founder-metal), .11), transparent 44%),
        linear-gradient(145deg, rgba(15, 28, 26, .92), rgba(5, 11, 12, .96));
    border: 1px solid rgba(var(--founder-metal), .22);
    border-radius: 2px;
    box-shadow: inset 0 1px rgba(255, 237, 178, .1), inset 0 0 0 2px rgba(var(--founder-metal), .04), inset 0 0 18px rgba(var(--founder-metal), .035), 0 4px 10px rgba(0, 0, 0, .24);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}
.page-founders .founder-benefits li::after {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-top: 1px solid rgba(var(--founder-metal), .78);
    border-right: 1px solid rgba(var(--founder-metal), .78);
    content: '';
    opacity: .72;
}
.page-founders .founder-benefits li:hover {
    transform: translateX(4px);
    border-color: rgba(var(--founder-metal), .58);
    box-shadow: inset 0 0 20px rgba(var(--founder-metal), .08), 0 8px 20px rgba(0, 0, 0, .3);
}
.page-founders .founder-benefits .founder-reward-icon {
    position: relative;
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    outline: 1px solid rgba(var(--founder-metal), .2);
    outline-offset: 3px;
    border-color: rgba(var(--founder-metal), .72);
    color: var(--founder-metal-solid);
    background: radial-gradient(circle at 35% 28%, rgba(var(--founder-metal), .3), rgba(5, 14, 13, .96) 72%);
    box-shadow: 0 0 18px rgba(var(--founder-metal), .17), inset 0 0 12px rgba(var(--founder-metal), .12);
}
.page-founders .founder-benefits .founder-reward-icon i { color: var(--founder-metal-solid); }
.page-founders .founder-price {
    position: relative;
    padding: 16px 14px;
    background: linear-gradient(90deg, rgba(var(--founder-metal), .09), transparent 72%);
    border: 1px solid rgba(var(--founder-metal), .27);
    border-radius: 2px;
    box-shadow: inset 0 1px rgba(255, 237, 178, .09), inset 0 0 18px rgba(var(--founder-metal), .035);
}
.page-founders .founder-price strong {
    color: var(--founder-metal-solid);
    text-shadow: 0 0 18px rgba(var(--founder-metal), .32);
}
.page-founders .founder-package-copy h3 {
    text-shadow: 0 0 26px rgba(var(--founder-metal), .16), 0 5px 24px rgba(0, 0, 0, .55);
}
.page-founders .founder-package-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: var(--founder-metal-solid);
    background: linear-gradient(100deg, rgba(var(--founder-metal), .13), rgba(var(--founder-metal), .025));
    border: 1px solid rgba(var(--founder-metal), .3);
    border-left: 2px solid rgba(var(--founder-metal), .82);
    box-shadow: 0 0 18px rgba(var(--founder-metal), .06);
}
.page-founders .founder-package-kicker::before {
    color: var(--founder-metal-solid);
    content: '✧';
    font-size: .9rem;
    text-shadow: 0 0 12px rgba(var(--founder-metal), .55);
}
.page-founders .founder-package-copy h3::after {
    display: block;
    width: min(180px, 70%);
    height: 2px;
    margin-top: 13px;
    background: linear-gradient(90deg, rgba(var(--founder-metal), .85), rgba(var(--founder-metal), .14), transparent);
    content: '';
}
.page-founders .founder-detail-layout .founder-media.has-full-artwork {
    align-self: start;
    height: auto;
    min-height: 0;
    grid-template-rows: 86px auto;
    background: radial-gradient(ellipse at 50% 42%, rgba(var(--founder-metal), .11), transparent 62%), #050707;
}
.page-founders .founder-detail-layout .founder-media.has-full-artwork .founder-full-artwork {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    align-self: start;
    background: #050707;
}
@media (max-width: 780px) {
    .page-founders .founder-detail-layout .founder-media.has-full-artwork {
        min-height: 0;
        height: auto;
        grid-template-rows: 64px auto;
    }
}
@media (max-width: 560px) {
    .page-founders .founder-detail-layout .founder-media.has-full-artwork {
        min-height: 0;
        height: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-founders .founder-benefits li { transition: none; }
    .page-founders .founder-benefits li:hover { transform: none; }
}

/* Put the founder offers in the first screenful. */
.page-founders .founder-hero { padding: 108px 0 14px; }
.page-founders .founder-hero h1 { margin: 8px auto 6px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.08; }
.page-founders .founder-hero > .founder-container > p { max-width: 1080px; font-size: clamp(.8rem, 1.15vw, .92rem); line-height: 1.45; }
.page-founders .founder-scroll-link { display: none; }
.page-founders .founder-packages-section { padding: 18px 0 54px; }
.page-founders .founder-section-heading { margin-bottom: 16px; }
.page-founders .founder-section-heading h2 { margin: 5px 0 6px; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.page-founders .founder-section-heading p { font-size: .82rem; line-height: 1.45; }
@media (max-width: 780px) {
    .page-founders .founder-hero { padding: 94px 0 13px; }
    .page-founders .founder-hero h1 { font-size: clamp(1.8rem, 6.5vw, 2.7rem); }
    .page-founders .founder-hero > .founder-container > p { max-width: 620px; }
    .page-founders .founder-packages-section { padding: 18px 0 46px; }
}
@media (max-width: 560px) {
    .page-founders .founder-hero { padding: 88px 0 12px; }
    .page-founders .founder-hero h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
    .page-founders .founder-hero > .founder-container > p { display: none; }
    .page-founders .founder-packages-section { padding-top: 14px; }
    .page-founders .founder-section-heading { margin-bottom: 14px; }
    .page-founders .founder-section-heading > span { font-size: .58rem; }
    .page-founders .founder-section-heading p { max-width: 330px; margin: 0 auto; font-size: .76rem; }
}

/* Restore readable scale while keeping the packages near the top. */
.page-founders .founder-eyebrow { font-size: .82rem; letter-spacing: .14em; }
.page-founders .founder-hero h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); }
.page-founders .founder-hero > .founder-container > p { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; }
.page-founders .founder-section-heading > span { font-size: .78rem; }
.page-founders .founder-section-heading { max-width: 1080px; }
.page-founders .founder-section-heading h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.page-founders .founder-section-heading p { font-size: 1rem; }
.page-founders .founder-package-grid { grid-template-columns: repeat(2, minmax(0, 410px)); gap: 32px; }
.page-founders .founder-card-trigger { min-height: 540px; }
.page-founders .founder-bottom-note { max-width: 852px; padding: 17px 20px; }
.page-founders .founder-bottom-note p { font-size: .94rem; }
@media (max-width: 780px) {
    .page-founders .founder-package-grid { grid-template-columns: minmax(0, 520px); gap: 22px; }
    .page-founders .founder-card-trigger { min-height: 500px; }
    .page-founders .founder-section-heading h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
}
@media (max-width: 560px) {
    .page-founders .founder-eyebrow { font-size: .68rem; letter-spacing: .09em; }
    .page-founders .founder-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .page-founders .founder-section-heading > span { font-size: .65rem; }
    .page-founders .founder-section-heading h2 { font-size: 1.8rem; }
    .page-founders .founder-section-heading p { font-size: .9rem; }
    .page-founders .founder-card-trigger { min-height: 440px; }
    .page-founders .founder-bottom-note p { font-size: .87rem; }
}
.page-info .section-page-header { background: rgba(4, 10, 10, .43); }
.page-classes .section-page-header,
.page-classes .section-classes-page,
.page-download .section-page-header,
.page-download .section-download-content,
.page-patch-notes .section-page-header,
.page-patch-notes .section-patch-notes-page {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.page-classes .section-page-header,
.page-download .section-page-header,
.page-patch-notes .section-page-header { background: rgba(4, 10, 10, .43); }

/* Discord campaign landing page */
.page-discord { --discord-line: rgba(var(--primary-rgb), .25); }
.page-discord .discord-page-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 74% 28%, rgba(var(--primary-rgb), .12), transparent 36%),
        linear-gradient(90deg, rgba(5, 9, 12, .87), rgba(5, 9, 12, .73) 52%, rgba(5, 9, 12, .88)),
        linear-gradient(180deg, rgba(5, 9, 12, .25), #06090b 94%);
}
.page-discord .discord-landing-hero,
.page-discord .discord-community-section {
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.page-discord .discord-landing-hero { min-height: min(870px, calc(100svh - var(--nav-height))); display: grid; align-items: center; padding: 72px 28px 90px; }
.discord-hero-inner { width: min(1220px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .78fr); align-items: center; gap: clamp(42px, 7vw, 100px); }
.discord-hero-copy { max-width: 670px; }
.discord-eyebrow, .discord-section-heading > span, .discord-final-cta > div > span {
    display: inline-flex; align-items: center; gap: 10px; color: var(--primary-light); font-size: .76rem; font-weight: 900; letter-spacing: .19em; text-transform: uppercase;
}
.discord-eyebrow { margin-bottom: 24px; padding: 10px 14px; border: 1px solid var(--discord-line); background: rgba(var(--primary-rgb), .08); box-shadow: inset 0 0 20px rgba(var(--primary-rgb), .07); }
.discord-eyebrow i { font-size: 1rem; }
.discord-hero-copy h1 { max-width: 700px; margin: 0 0 22px; font-family: 'Cinzel', serif; font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: 1.05; font-weight: 700; text-wrap: balance; text-shadow: 0 5px 35px rgba(0,0,0,.55); }
.discord-hero-copy h1 span { display: block; color: var(--primary-light); text-shadow: 0 0 34px var(--primary-glow); }
.discord-hero-copy > p { max-width: 610px; color: rgba(239, 244, 242, .78); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.8; }
.discord-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 34px; }
.discord-join-button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border: 1px solid var(--primary-light); border-radius: 4px; color: #10120f; background: linear-gradient(135deg, var(--primary-light), var(--primary)); box-shadow: 0 10px 34px var(--primary-glow), inset 0 1px rgba(255,255,255,.42); font-size: .84rem; font-weight: 900; letter-spacing: .1em; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.discord-join-button:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 16px 42px var(--primary-glow), inset 0 1px rgba(255,255,255,.42); }
.discord-join-button > i:first-child { font-size: 1.25rem; }
.discord-join-arrow { margin-left: 4px; font-size: .74rem; opacity: .72; }
.discord-preview-link { color: rgba(245, 245, 238, .78); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; }
.discord-preview-link i { margin-left: 6px; color: var(--primary-light); }
.discord-preview-link:hover { color: var(--primary-light); }
.discord-hero-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: rgba(235, 238, 234, .58); font-size: .8rem; }
.discord-hero-note i { color: var(--primary-light); }
.discord-widget-card { position: relative; justify-self: center; width: min(100%, 420px); padding: 17px; border: 1px solid rgba(var(--primary-rgb), .56); border-radius: 8px; background: linear-gradient(145deg, rgba(10, 19, 19, .96), rgba(5, 9, 11, .97)); box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .035), 0 24px 80px rgba(0,0,0,.58), 0 0 48px rgba(var(--primary-rgb), .1); }
.discord-widget-card::before, .discord-widget-card::after { content: ''; position: absolute; width: 28px; height: 28px; border-color: var(--primary-light); opacity: .8; pointer-events: none; }
.discord-widget-card::before { left: 5px; top: 5px; border-top: 1px solid; border-left: 1px solid; }
.discord-widget-card::after { right: 5px; bottom: 5px; border-right: 1px solid; border-bottom: 1px solid; }
.discord-widget-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 2px 15px; }
.discord-widget-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.discord-widget-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--discord-line); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb), .1); font-size: 1.15rem; }
.discord-widget-brand > div > span { color: var(--primary-light); font-size: .59rem; font-weight: 900; letter-spacing: .16em; }
.discord-widget-brand h2 { margin: 1px 0 0; color: #f4f2e9; font: 700 1rem 'Cinzel', serif; }
.discord-live-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(79, 202, 145, .24); border-radius: 3px; color: #9ce5b8; font-size: .57rem; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.discord-live-indicator[hidden] { display: none; }
.discord-live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #64df9a; box-shadow: 0 0 10px rgba(100,223,154,.85); animation: discord-live-pulse 2s ease-in-out infinite; }
.discord-live-indicator b { font-size: .7rem; letter-spacing: 0; }
.discord-widget-summary { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-bottom: 9px; padding: 7px 10px; border: 1px solid rgba(var(--primary-rgb), .13); border-radius: 3px; color: rgba(235,238,234,.66); background: rgba(var(--primary-rgb), .045); font-size: .68rem; }
.discord-widget-summary i { color: var(--primary-light); }
@keyframes discord-live-pulse { 50% { opacity: .45; box-shadow: 0 0 3px rgba(100,223,154,.45); } }
.discord-widget-frame { width: 100%; min-height: 500px; display: grid; place-items: start center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; background: #2b2d31; }
.discord-widget-frame iframe { display: block; width: min(100%, 350px); height: 500px; border: 0; color-scheme: dark; }
.discord-widget-caption { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: rgba(235,238,234,.53); font-size: .68rem; text-align: center; }
.discord-widget-caption i { color: var(--primary-light); }
.discord-scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 36px; height: 36px; display: grid; place-items: center; transform: translateX(-50%); border: 1px solid var(--discord-line); border-radius: 50%; color: var(--primary-light); text-decoration: none; animation: discord-cue-float 2s ease-in-out infinite; }
@keyframes discord-cue-float { 50% { transform: translate(-50%, 5px); } }
.page-discord .discord-community-section { padding: 86px 28px 100px; border-top: 1px solid rgba(var(--primary-rgb), .13); background: linear-gradient(180deg, rgba(5,9,11,.78), rgba(5,9,11,.94)); }
.discord-community-wrap { width: min(1120px, 100%); margin: 0 auto; }
.discord-section-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.discord-section-heading h2 { margin: 11px 0 10px; font: 700 clamp(1.8rem, 4vw, 2.8rem)/1.2 'Cinzel', serif; }
.discord-section-heading h2 em { color: var(--primary-light); font-style: normal; }
.discord-section-heading p { color: rgba(235,238,234,.66); }
.discord-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.discord-feature-card { position: relative; display: flex; align-items: flex-start; gap: 15px; min-height: 150px; overflow: hidden; padding: 22px 20px; border: 1px solid rgba(var(--primary-rgb), .17); border-radius: 5px; background: linear-gradient(145deg, rgba(17,25,24,.88), rgba(7,12,13,.95)); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.discord-feature-card:hover { transform: translateY(-4px); border-color: rgba(var(--primary-rgb), .47); box-shadow: 0 15px 38px rgba(0,0,0,.25), 0 0 22px rgba(var(--primary-rgb), .07); }
.discord-feature-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--discord-line); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb), .08); }
.discord-feature-card h3 { margin: 1px 0 6px; font: 700 1rem 'Cinzel', serif; }
.discord-feature-card p { max-width: 240px; margin: 0; color: rgba(235,238,234,.64); font-size: .86rem; line-height: 1.6; }
.discord-card-rune { position: absolute; right: 13px; top: 2px; color: rgba(var(--primary-rgb), .1); font-size: 3rem; }
.discord-final-cta { display: flex; align-items: center; gap: 20px; margin-top: 42px; padding: 25px 28px; border: 1px solid rgba(var(--primary-rgb), .32); border-radius: 5px; background: radial-gradient(ellipse at 10% 50%, rgba(var(--primary-rgb), .1), transparent 52%), rgba(8,13,14,.86); }
.discord-final-rune { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--discord-line); border-radius: 50%; color: var(--primary-light); font-size: 1.5rem; }
.discord-final-cta > div { flex: 1; }
.discord-final-cta > div > span { font-size: .62rem; }
.discord-final-cta h2 { margin: 3px 0 2px; font: 700 1.35rem 'Cinzel', serif; }
.discord-final-cta p { margin: 0; color: rgba(235,238,234,.62); font-size: .86rem; }
.discord-join-button-compact { min-height: 48px; padding: 0 17px; font-size: .72rem; }
.discord-join-button-compact > i:last-child { margin-left: 4px; }
.page-discord .main-footer { z-index: 5; }
@media (max-width: 960px) {
    .discord-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr); gap: 28px; }
    .discord-hero-copy h1 { font-size: clamp(2.7rem, 6vw, 4.2rem); }
    .discord-widget-card { padding: 13px; }
}
@media (max-width: 760px) {
    .page-discord .discord-landing-hero { min-height: 0; padding: 54px 20px 66px; }
    .discord-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .discord-hero-copy { margin: 0 auto; text-align: center; }
    .discord-eyebrow { margin-bottom: 17px; font-size: .67rem; letter-spacing: .13em; }
    .discord-hero-copy h1 { margin-inline: auto; font-size: clamp(2.5rem, 10vw, 4rem); }
    .discord-hero-copy > p { margin-inline: auto; font-size: 1rem; }
    .discord-hero-actions { justify-content: center; margin-top: 26px; }
    .discord-hero-note { justify-content: center; font-size: .73rem; }
    .discord-widget-card { width: min(100%, 400px); }
    .discord-scroll-cue { display: none; }
    .page-discord .discord-community-section { padding: 64px 20px 82px; }
    .discord-community-grid { grid-template-columns: minmax(0, 1fr); }
    .discord-feature-card { min-height: 0; }
    .discord-final-cta { flex-wrap: wrap; gap: 15px; padding: 21px; }
    .discord-final-cta > div { flex-basis: calc(100% - 72px); }
    .discord-join-button-compact { width: 100%; }
}
@media (max-width: 420px) {
    .page-discord .discord-landing-hero { padding-inline: 14px; }
    .discord-widget-card { padding: 10px; }
    .discord-widget-heading { align-items: flex-start; }
    .discord-live-indicator { margin-top: 8px; }
    .discord-widget-brand h2 { font-size: .9rem; }
    .discord-widget-frame iframe { width: 100%; }
    .discord-widget-caption { font-size: .62rem; }
    .discord-hero-actions { gap: 17px; }
    .discord-join-button:not(.discord-join-button-compact) { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .page-discord *, .page-discord *::before, .page-discord *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Saga-styled Discord preview replaces the stock member-list iframe. */
.discord-hero-inner { grid-template-columns: minmax(0, .94fr) minmax(420px, 1fr); gap: clamp(28px, 4vw, 60px); }
.discord-community-preview { position: relative; justify-self: center; width: min(100%, 540px); overflow: hidden; border: 1px solid rgba(var(--primary-rgb), .56); border-radius: 8px; background: linear-gradient(145deg, rgba(10,19,19,.97), rgba(5,9,11,.98)); box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .035), 0 24px 80px rgba(0,0,0,.58), 0 0 48px rgba(var(--primary-rgb), .1); }
.discord-community-preview::before { content: ''; position: absolute; z-index: 3; inset: 5px; border: 1px solid rgba(var(--primary-rgb), .13); border-radius: 4px; pointer-events: none; }
.discord-preview-topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid rgba(var(--primary-rgb), .2); background: linear-gradient(105deg, rgba(var(--primary-rgb), .11), rgba(8,14,15,.7)); }
.discord-preview-server-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.discord-preview-server-icon { width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb), .5); border-radius: 13px; background: #111a19; box-shadow: 0 0 18px rgba(var(--primary-rgb), .12); }
.discord-preview-server-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.discord-preview-server-identity > span:last-child { min-width: 0; display: grid; }
.discord-preview-server-identity small { color: var(--primary-light); font-size: .57rem; font-weight: 900; letter-spacing: .15em; }
.discord-preview-server-identity strong { overflow: hidden; color: #f5f3ea; font: 700 .97rem 'Cinzel',serif; text-overflow: ellipsis; white-space: nowrap; }
.discord-live-indicator { color: #a1e7b7; border-color: rgba(86,208,142,.26); letter-spacing: .03em; }
.discord-live-indicator i { background: #6ce39f; }
.discord-preview-cover { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 24px; background-image: linear-gradient(90deg,rgba(5,9,11,.88),rgba(5,9,11,.4)),linear-gradient(0deg,rgba(5,9,11,.9),transparent 90%),var(--discord-preview-image); background-size: cover; background-position: center 44%; border-bottom: 1px solid rgba(var(--primary-rgb), .19); }
.discord-preview-cover > span { color: var(--primary-light); font-size: .59rem; font-weight: 900; letter-spacing: .16em; }
.discord-preview-cover h2 { margin: 7px 0 0; color: #fff; font: 700 clamp(1.25rem,2vw,1.75rem)/1.18 'Cinzel',serif; text-shadow: 0 3px 16px #000; }
.discord-preview-cover h2 em { color: var(--primary-light); font-style: normal; }
.discord-preview-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,.78fr); gap: 17px; padding: 20px 19px 17px; }
.discord-preview-kicker { color: var(--primary-light); font-size: .55rem; font-weight: 900; letter-spacing: .15em; }
.discord-preview-welcome h3 { margin: 6px 0 7px; color: #f2efe6; font: 700 1.03rem/1.28 'Cinzel',serif; }
.discord-preview-welcome > p { margin: 0; color: rgba(235,238,234,.64); font-size: .76rem; line-height: 1.55; }
.discord-preview-highlights { display: grid; gap: 8px; margin-top: 15px; }
.discord-preview-highlights > div { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(var(--primary-rgb),.13); border-radius: 4px; background: rgba(var(--primary-rgb),.045); }
.discord-preview-highlights > div > i { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.25); border-radius: 50%; color: var(--primary-light); font-size: .67rem; }
.discord-preview-highlights > div > span { min-width: 0; display: grid; }
.discord-preview-highlights strong { color: rgba(249,247,237,.92); font-size: .68rem; }
.discord-preview-highlights small { overflow: hidden; color: rgba(235,238,234,.51); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.discord-preview-voice { min-width: 0; padding: 12px 11px; border: 1px solid rgba(var(--primary-rgb),.16); border-radius: 4px; background: rgba(4,9,10,.53); }
.discord-preview-section-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid rgba(var(--primary-rgb),.13); }
.discord-preview-section-title > span { color: rgba(245,243,235,.86); font-size: .58rem; font-weight: 900; letter-spacing: .07em; }
.discord-preview-section-title > span i { margin-right: 4px; color: var(--primary-light); }
.discord-preview-section-title > small { color: var(--primary-light); font-size: .49rem; font-weight: 800; letter-spacing: .08em; }
.discord-preview-voice-list { display: grid; gap: 5px; max-height: 126px; overflow: auto; padding: 8px 1px 1px; scrollbar-color: rgba(var(--primary-rgb),.55) transparent; scrollbar-width: thin; }
.discord-preview-voice-channel { min-width: 0; display: grid; grid-template-columns: 15px minmax(0,1fr); align-items: center; column-gap: 6px; padding: 6px 5px; border-radius: 3px; background: rgba(255,255,255,.025); }
.discord-preview-voice-channel > i { grid-row: span 2; color: var(--primary-light); font-size: .63rem; }
.discord-preview-voice-channel > span { overflow: hidden; color: rgba(245,243,235,.85); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.discord-preview-voice-channel > small { color: rgba(235,238,234,.43); font-size: .55rem; }
.discord-preview-empty { margin: 0; padding: 8px 4px; color: rgba(235,238,234,.51); font-size: .65rem; line-height: 1.45; }
.discord-preview-empty i { margin-right: 5px; color: var(--primary-light); }
.discord-preview-data-note { margin: 9px 0 0; color: rgba(235,238,234,.39); font-size: .54rem; line-height: 1.4; }
.discord-preview-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 19px; border-top: 1px solid rgba(var(--primary-rgb),.16); background: rgba(0,0,0,.22); }
.discord-preview-footer > span { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: rgba(235,238,234,.58); font-size: .61rem; }
.discord-preview-footer > span i { color: #6ce39f; font-size: .45rem; }
.discord-preview-footer > span b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.discord-preview-footer > a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(var(--primary-rgb),.45); border-radius: 3px; color: var(--primary-light); background: rgba(var(--primary-rgb),.08); font-size: .57rem; font-weight: 900; letter-spacing: .07em; text-decoration: none; white-space: nowrap; transition: background .2s ease,color .2s ease; }
.discord-preview-footer > a:hover { color: #10120f; background: var(--primary-light); }
.discord-community-preview .discord-widget-caption { margin: 9px 3px 0; font-size: .61rem; }
@media (max-width: 960px) {
    .discord-hero-inner { grid-template-columns: minmax(0,1fr) minmax(320px,.86fr); gap: 28px; }
    .discord-community-preview { padding: 0; }
    .discord-preview-body { grid-template-columns: minmax(0,1fr); }
    .discord-preview-voice { display: none; }
}
@media (max-width: 760px) {
    .discord-hero-inner { grid-template-columns: minmax(0,1fr); }
    .discord-community-preview { width: min(100%,520px); }
    .discord-preview-body { grid-template-columns: minmax(0,1fr) minmax(140px,.78fr); }
    .discord-preview-voice { display: block; }
}
@media (max-width: 460px) {
    .discord-preview-topbar { padding: 12px; }
    .discord-preview-server-icon { width: 38px; height: 38px; }
    .discord-preview-server-identity strong { max-width: 155px; font-size: .82rem; }
    .discord-preview-cover { min-height: 128px; padding: 16px; }
    .discord-preview-body { grid-template-columns: minmax(0,1fr); gap: 13px; padding: 15px 13px; }
    .discord-preview-voice { display: block; }
    .discord-preview-voice-list { max-height: 110px; }
    .discord-preview-footer { padding: 11px 12px; }
    .discord-preview-footer > a { font-size: .52rem; }
}

/* Compact official Discord widget presentation. */
.discord-hero-inner { grid-template-columns: minmax(0,1fr) minmax(350px,382px); gap: clamp(28px,5vw,72px); }
.discord-mini-card { width: min(100%,382px); justify-self: center; overflow: hidden; border: 1px solid rgba(var(--primary-rgb),.48); border-radius: 7px; background: linear-gradient(145deg,rgba(8,18,18,.96),rgba(5,9,11,.98)); box-shadow: 0 18px 55px rgba(0,0,0,.5),0 0 35px rgba(var(--primary-rgb),.08); }
.discord-mini-card-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-bottom: 1px solid rgba(var(--primary-rgb),.18); background: radial-gradient(ellipse at 18% 50%,rgba(var(--primary-rgb),.12),transparent 65%); }
.discord-mini-brand { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.45); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb),.08); font-size: 1.18rem; }
.discord-mini-title { min-width: 0; flex: 1; display: grid; }
.discord-mini-title small { color: var(--primary-light); font-size: .56rem; font-weight: 900; letter-spacing: .15em; }
.discord-mini-title strong { overflow: hidden; color: #f5f3ea; font: 700 .95rem 'Cinzel',serif; text-overflow: ellipsis; white-space: nowrap; }
.discord-mini-live { display: inline-flex; align-items: center; gap: 6px; color: #a5dfb8; font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
.discord-mini-live i { width: 6px; height: 6px; border-radius: 50%; background: #67dc96; box-shadow: 0 0 9px rgba(103,220,150,.75); }
.discord-mini-card-intro { padding: 13px 16px 12px; }
.discord-mini-card-intro > span { color: var(--primary-light); font-size: .56rem; font-weight: 900; letter-spacing: .17em; }
.discord-mini-card-intro p { margin: 3px 0 0; color: rgba(241,241,234,.76); font: 600 .87rem 'Cinzel',serif; }
.discord-mini-embed { width: min(100%,350px); height: 500px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 5px; background: #2b2d31; }
.discord-mini-embed iframe { display: block; width: 350px; max-width: 100%; height: 500px; border: 0; color-scheme: dark; }
.discord-mini-caption { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 12px 13px; color: rgba(235,238,234,.52); font-size: .61rem; text-align: center; }
.discord-mini-caption i { color: var(--primary-light); }
@media (max-width: 960px) {
    .discord-hero-inner { grid-template-columns: minmax(0,1fr) minmax(330px,360px); gap: 25px; }
}
@media (max-width: 760px) {
    .discord-hero-inner { grid-template-columns: minmax(0,1fr); }
    .discord-mini-card { width: min(100%,382px); }
}
@media (max-width: 420px) {
    .discord-mini-card { width: min(100%,370px); }
    .discord-mini-embed { width: min(100%,350px); height: 500px; }
    .discord-mini-embed iframe { width: 350px; }
    .discord-mini-live { font-size: .5rem; }
}

/* Discord landing: giveaway first, compact server preview and join action below. */
.page-discord .saga-giveaway-section,
.page-discord .saga-discord-entry-section { padding: 64px 24px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.saga-giveaway-wrap,
.saga-discord-entry-wrap { width: min(1180px,100%); margin: 0 auto; }
.saga-giveaway-card { display: grid; grid-template-columns: minmax(300px,.88fr) minmax(0,1.12fr); overflow: hidden; border: 1px solid rgba(var(--primary-rgb),.45); border-radius: 9px; background: linear-gradient(135deg,rgba(10,21,21,.97),rgba(5,9,11,.97)); box-shadow: 0 28px 90px rgba(0,0,0,.5),0 0 42px rgba(var(--primary-rgb),.08); }
.saga-giveaway-art { position: relative; min-height: 550px; overflow: hidden; display: grid; place-items: center; border-right: 1px solid rgba(var(--primary-rgb),.22); background: radial-gradient(ellipse at 55% 40%,rgba(var(--primary-rgb),.26),transparent 46%),linear-gradient(145deg,#142c2a,#080d10 72%); }
.saga-giveaway-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(4,8,9,.04) 48%,rgba(4,8,9,.76)); }
.saga-giveaway-art.has-giveaway-image { align-self: center; width: 100%; height: auto; min-height: 0; aspect-ratio: .72; background: #05090b; }
.saga-giveaway-art.has-giveaway-image .saga-giveaway-image-main { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.saga-giveaway-art.has-giveaway-image::after { z-index: 2; background: linear-gradient(112deg,transparent 34%,rgba(255,255,255,.04) 44%,rgba(77,255,220,.18) 50%,rgba(255,255,255,.07) 54%,transparent 64%); background-size: 230% 100%; mix-blend-mode: screen; opacity: .65; animation: giveaway-image-sheen 8s ease-in-out infinite; }
.saga-giveaway-art.has-giveaway-image .saga-giveaway-art-label { display: none; }
@keyframes giveaway-image-sheen { 0%,18% { background-position: 130% 0; } 62%,100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .saga-giveaway-art.has-giveaway-image::after { animation: none; background-position: center; } }
.saga-giveaway-art-label { position: absolute; z-index: 1; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(var(--primary-rgb),.48); border-radius: 3px; color: var(--primary-light); background: rgba(5,10,11,.78); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.giveaway-art-placeholder-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 13px; padding: 32px; text-align: center; }
.giveaway-art-rune { width: 104px; height: 104px; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.52); border-radius: 50%; color: var(--primary-light); background: radial-gradient(circle,rgba(var(--primary-rgb),.19),rgba(5,10,11,.16)); box-shadow: 0 0 45px rgba(var(--primary-rgb),.18),inset 0 0 24px rgba(var(--primary-rgb),.12); font-size: 2.4rem; }
.giveaway-art-placeholder-content > small { color: var(--primary-light); font-size: .65rem; font-weight: 900; letter-spacing: .17em; }
.giveaway-art-placeholder-content > strong { color: #f4f1e7; font: 900 clamp(2.5rem,5vw,4.6rem)/1 'Cinzel',serif; letter-spacing: .06em; text-shadow: 0 6px 35px rgba(var(--primary-rgb),.28); }
.giveaway-art-placeholder-content > span:last-child { color: rgba(239,239,230,.62); font-size: .78rem; line-height: 1.7; }
.giveaway-art-placeholder-content code { color: var(--primary-light); font-size: .69rem; }
.saga-giveaway-copy { align-self: center; padding: clamp(28px,4vw,54px); }
.saga-giveaway-eyebrow,
.saga-discord-entry-heading > span,
.saga-discord-entry-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--primary-light); font-size: .67rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.saga-giveaway-eyebrow i { filter: drop-shadow(0 0 8px var(--primary-glow)); }
.saga-giveaway-copy h1 { margin: 17px 0 14px; color: #f6f3e9; font: 700 clamp(2.1rem,4.1vw,3.65rem)/1.12 'Cinzel',serif; text-wrap: balance; }
.saga-giveaway-copy h1 em { color: var(--primary-light); font-style: normal; text-shadow: 0 0 27px var(--primary-glow); }
.saga-giveaway-lead { max-width: 570px; margin: 0; color: rgba(237,240,234,.7); font-size: 1rem; line-height: 1.75; }
.saga-giveaway-lead strong { color: #f4f1e7; font-weight: 800; }
.saga-giveaway-event { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 10px 13px; border: 1px solid rgba(var(--primary-rgb),.3); border-radius: 5px; background: linear-gradient(100deg,rgba(var(--primary-rgb),.1),rgba(7,13,14,.72)); }
.saga-giveaway-event > i { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.38); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb),.1); }
.saga-giveaway-event > span { min-width: 0; display: grid; gap: 2px; }
.saga-giveaway-event small { color: var(--primary-light); font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.saga-giveaway-event strong { color: rgba(247,245,236,.94); font-size: .78rem; line-height: 1.35; }
.saga-giveaway-prizes { display: grid; gap: 10px; margin: 25px 0 23px; }
.saga-giveaway-prize { display: grid; grid-template-columns: 43px minmax(0,1fr) 18px; align-items: center; gap: 12px; min-height: 70px; padding: 10px 13px; border: 1px solid rgba(var(--primary-rgb),.21); border-radius: 5px; background: linear-gradient(100deg,rgba(var(--primary-rgb),.09),rgba(7,13,14,.7)); }
.saga-giveaway-prize > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.38); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb),.09); font-size: 1rem; }
.saga-giveaway-prize > div { min-width: 0; display: grid; gap: 3px; }
.saga-giveaway-prize small { color: var(--primary-light); font-size: .54rem; font-weight: 900; letter-spacing: .13em; }
.saga-giveaway-prize strong { color: rgba(247,245,236,.92); font-size: .88rem; line-height: 1.35; }
.saga-giveaway-prize > i { color: var(--primary-light); font-size: .7rem; }
.saga-giveaway-scroll { min-height: 48px; display: inline-flex; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid rgba(var(--primary-rgb),.65); border-radius: 4px; color: #10120f; background: linear-gradient(130deg,var(--primary-light),var(--primary)); box-shadow: 0 8px 24px var(--primary-glow); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-decoration: none; transition: transform .2s ease,filter .2s ease; }
.saga-giveaway-scroll:hover { transform: translateY(-2px); filter: brightness(1.08); }
.saga-giveaway-scroll i { font-size: .7rem; }
.saga-giveaway-rules-note { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0 0; color: rgba(237,240,234,.5); font-size: .74rem; line-height: 1.5; }
.saga-giveaway-rules-note i { flex: 0 0 auto; margin-top: 3px; color: var(--primary-light); }
.page-discord .saga-discord-entry-section { padding-top: 66px; padding-bottom: 84px; border-top: 1px solid rgba(var(--primary-rgb),.16); background: linear-gradient(180deg,rgba(5,9,11,.65),rgba(5,9,11,.92)); }
.saga-discord-entry-heading { max-width: 700px; margin: 0 auto 30px; text-align: center; }
.saga-discord-entry-heading h2 { margin: 10px 0 8px; color: #f4f2e9; font: 700 clamp(1.8rem,3.5vw,2.6rem)/1.2 'Cinzel',serif; }
.saga-discord-entry-heading h2 em { color: var(--primary-light); font-style: normal; }
.saga-discord-entry-heading p { margin: 0; color: rgba(237,240,234,.65); }
.saga-discord-entry-card { width: min(900px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(300px,370px) minmax(0,1fr); align-items: center; justify-content: center; gap: clamp(26px,5vw,62px); padding: clamp(18px,3vw,30px); border: 1px solid rgba(var(--primary-rgb),.35); border-radius: 8px; background: linear-gradient(140deg,rgba(13,25,24,.94),rgba(5,9,11,.96)); box-shadow: 0 22px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.03); }
.saga-discord-widget-column { width: min(100%,370px); justify-self: center; padding: 12px; border: 1px solid rgba(var(--primary-rgb),.23); border-radius: 6px; background: rgba(3,7,9,.48); }
.saga-discord-widget-title { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; }
.saga-discord-widget-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),.4); border-radius: 50%; color: var(--primary-light); background: rgba(var(--primary-rgb),.09); font-size: 1rem; }
.saga-discord-widget-title > span:last-child { display: grid; }
.saga-discord-widget-title small { color: var(--primary-light); font-size: .53rem; font-weight: 900; letter-spacing: .14em; }
.saga-discord-widget-title strong { color: #f1efe6; font: 700 .85rem 'Cinzel',serif; }
.saga-discord-compact-embed { width: min(100%,350px); height: 500px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 4px; background: #2b2d31; }
.saga-discord-compact-embed iframe { display: block; width: 350px; max-width: 100%; height: 500px; border: 0; color-scheme: dark; }
.saga-discord-entry-copy { padding: 22px 10px; }
.saga-discord-entry-rune { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid rgba(var(--primary-rgb),.45); border-radius: 50%; color: var(--primary-light); background: radial-gradient(circle,rgba(var(--primary-rgb),.17),rgba(var(--primary-rgb),.04)); box-shadow: 0 0 28px rgba(var(--primary-rgb),.11); font-size: 1.4rem; }
.saga-discord-entry-kicker { font-size: .59rem; }
.saga-discord-entry-copy h3 { margin: 8px 0 10px; color: #f6f3e9; font: 700 clamp(1.6rem,3vw,2.35rem)/1.17 'Cinzel',serif; }
.saga-discord-entry-copy > p { max-width: 420px; margin: 0; color: rgba(237,240,234,.66); line-height: 1.7; }
.saga-discord-join-cta { width: min(100%,390px); min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 27px; padding: 12px 20px; border: 1px solid var(--primary-light); border-radius: 5px; color: #10120f; background: linear-gradient(130deg,var(--primary-light),var(--primary)); box-shadow: 0 12px 36px var(--primary-glow); font-size: .84rem; font-weight: 900; letter-spacing: .1em; text-decoration: none; transition: transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.saga-discord-join-cta:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 17px 42px var(--primary-glow); }
.saga-discord-join-cta > i:first-child { font-size: 1.35rem; }
.saga-discord-join-cta > i:last-child { font-size: .75rem; }
.saga-discord-entry-footnote { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: rgba(237,240,234,.49); font-size: .69rem; }
.saga-discord-entry-footnote i { color: var(--primary-light); }
@media (max-width: 820px) {
    .page-discord .saga-giveaway-section { padding: 42px 18px; }
    .saga-giveaway-card { grid-template-columns: minmax(0,1fr); }
    .saga-giveaway-art { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(var(--primary-rgb),.22); }
    .saga-giveaway-art.has-giveaway-image img { position: absolute; }
    .saga-giveaway-copy { padding: 30px clamp(22px,6vw,42px) 35px; }
    .page-discord .saga-discord-entry-section { padding: 48px 18px 64px; }
    .saga-discord-entry-card { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .saga-discord-entry-copy { order: -1; padding: 5px 8px 0; text-align: center; }
    .saga-discord-entry-rune { margin: 0 auto 13px; }
    .saga-discord-entry-copy > p { margin-inline: auto; }
    .saga-discord-join-cta { margin-inline: auto; }
    .saga-discord-entry-footnote { justify-content: center; }
}
@media (max-width: 480px) {
    .page-discord .saga-giveaway-section { padding: 25px 12px 35px; }
    .saga-giveaway-art { min-height: 300px; }
    .saga-giveaway-art-label { top: 12px; left: 12px; font-size: .55rem; }
    .saga-giveaway-copy { padding: 25px 17px 28px; }
    .saga-giveaway-eyebrow { font-size: .56rem; letter-spacing: .12em; }
    .saga-giveaway-copy h1 { font-size: clamp(1.9rem,9vw,2.6rem); }
    .saga-giveaway-lead { font-size: .9rem; }
    .saga-giveaway-prize { grid-template-columns: 38px minmax(0,1fr) 15px; gap: 9px; padding: 9px; }
    .saga-giveaway-prize > span { width: 36px; height: 36px; }
    .saga-giveaway-prize strong { font-size: .8rem; }
    .saga-giveaway-scroll { width: 100%; justify-content: center; font-size: .62rem; }
    .page-discord .saga-discord-entry-section { padding: 42px 12px 54px; }
    .saga-discord-entry-card { padding: 13px; }
    .saga-discord-widget-column { padding: 9px; }
    .saga-discord-compact-embed { width: min(100%,350px); height: 500px; }
    .saga-discord-compact-embed iframe { width: 350px; }
    .saga-discord-join-cta { min-height: 60px; font-size: .73rem; }
}

/* One-screen desktop composition: giveaway and Discord preview side by side. */
@media (min-width: 901px) {
    html:has(body.page-discord),
    body.page-discord { height: 100%; overflow: hidden; }
    body.page-discord .discord-page-content { width: 100%; height: 100svh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--nav-height); }
    body.page-discord .saga-onepage-campaign { width: 100%; flex: 1; min-height: 0; display: grid; align-items: center; padding: 15px clamp(18px,3vw,48px) 21px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.page-discord .saga-onepage-wrap { width: min(1390px,100%); height: min(720px,calc(100svh - var(--nav-height) - 38px)); min-height: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,350px); align-items: stretch; gap: clamp(14px,1.7vw,24px); }
    body.page-discord .saga-giveaway-card { height: auto; min-height: 0; align-self: center; grid-template-columns: minmax(250px,.78fr) minmax(0,1.22fr); }
    body.page-discord .saga-giveaway-art { min-height: 0; height: auto; }
    body.page-discord .saga-giveaway-copy { min-width: 0; padding: clamp(18px,1.8vw,29px); }
    body.page-discord .saga-giveaway-copy h1 { margin: 10px 0 10px; font-size: clamp(1.9rem,3vw,3.05rem); }
    body.page-discord .saga-giveaway-lead { font-size: .9rem; line-height: 1.55; }
    body.page-discord .saga-giveaway-event { margin-top: 9px; padding: 7px 10px; }
    body.page-discord .saga-giveaway-event > i { width: 30px; height: 30px; }
    body.page-discord .saga-giveaway-event strong { font-size: .73rem; }
    body.page-discord .saga-giveaway-prizes { gap: 7px; margin: 11px 0 9px; }
    body.page-discord .saga-giveaway-prize { min-height: 54px; padding: 6px 9px; }
    body.page-discord .saga-giveaway-prize > span { width: 36px; height: 36px; }
    body.page-discord .saga-giveaway-prize strong { font-size: .78rem; }
    body.page-discord .saga-giveaway-rules-note { margin-top: 10px; font-size: .68rem; }
    body.page-discord .saga-discord-onepage-card { min-width: 0; height: auto; align-self: center; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 13px; border: 1px solid rgba(var(--primary-rgb),.38); border-radius: 8px; background: linear-gradient(145deg,rgba(10,20,20,.96),rgba(5,9,11,.98)); box-shadow: 0 22px 65px rgba(0,0,0,.43),0 0 32px rgba(var(--primary-rgb),.06); }
    body.page-discord .saga-discord-widget-title { margin: 0 0 8px; }
    body.page-discord .saga-discord-onepage-intro { margin: 0 0 9px; color: rgba(237,240,234,.62); font-size: .72rem; line-height: 1.4; }
    body.page-discord .saga-discord-compact-embed { width: 259px; height: 370px; flex: 0 0 370px; }
    body.page-discord .saga-discord-compact-embed iframe { width: 350px; max-width: none; height: 500px; transform: scale(.74); transform-origin: top left; }
    body.page-discord .saga-discord-join-cta { width: 100%; min-height: 52px; gap: 10px; margin: 10px 0 0; padding: 9px 12px; font-size: .7rem; }
    body.page-discord .saga-discord-entry-footnote { margin-top: 8px; font-size: .62rem; }
    body.page-discord .main-footer { display: none; }
}
@media (max-width: 1200px) and (min-width: 901px) {
    body.page-discord .saga-onepage-wrap { grid-template-columns: minmax(0,1fr) minmax(300px,330px); gap: 13px; }
    body.page-discord .saga-giveaway-card { grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); }
    body.page-discord .saga-giveaway-copy { padding: 18px; }
    body.page-discord .saga-giveaway-copy h1 { font-size: clamp(1.75rem,2.6vw,2.5rem); }
}
@media (max-height: 760px) and (min-width: 901px) {
    body.page-discord .saga-onepage-wrap { height: calc(100svh - var(--nav-height) - 24px); }
    body.page-discord .saga-giveaway-copy { padding-block: 14px; }
    body.page-discord .saga-giveaway-eyebrow { font-size: .58rem; }
    body.page-discord .saga-giveaway-copy h1 { margin-block: 7px; font-size: clamp(1.6rem,2.5vw,2.35rem); }
    body.page-discord .saga-giveaway-lead { font-size: .8rem; }
    body.page-discord .saga-giveaway-event { margin-top: 7px; padding-block: 6px; }
    body.page-discord .saga-giveaway-prizes { margin: 8px 0 7px; }
    body.page-discord .saga-giveaway-prize { min-height: 48px; }
    body.page-discord .saga-giveaway-prize > span { width: 32px; height: 32px; }
    body.page-discord .saga-discord-compact-embed { width: 259px; height: 370px; flex-basis: 370px; }
    body.page-discord .saga-discord-compact-embed iframe { transform: scale(.74); }
    body.page-discord .saga-discord-join-cta { min-height: 46px; margin-top: 7px; }
}
@media (max-width: 900px) {
    body.page-discord .discord-page-content { padding-top: var(--nav-height); }
    body.page-discord .saga-onepage-campaign { padding: 24px 16px 42px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.page-discord .saga-onepage-wrap { width: min(700px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
    body.page-discord .saga-giveaway-card { grid-template-columns: minmax(0,1fr); }
    body.page-discord .saga-giveaway-art { min-height: 0; height: auto; aspect-ratio: .72; border-right: 0; border-bottom: 1px solid rgba(var(--primary-rgb),.22); }
    body.page-discord .saga-discord-onepage-card { display: flex; flex-direction: column; align-items: center; padding: 16px; border: 1px solid rgba(var(--primary-rgb),.38); border-radius: 8px; background: rgba(5,10,11,.92); }
    body.page-discord .saga-discord-widget-title,
    body.page-discord .saga-discord-onepage-intro,
    body.page-discord .saga-discord-join-cta,
    body.page-discord .saga-discord-entry-footnote { width: min(100%,350px); }
    body.page-discord .saga-discord-compact-embed { width: min(100%,350px); height: 500px; flex: none; }
    body.page-discord .saga-discord-compact-embed iframe { width: 350px; max-width: 100%; height: 500px; transform: none; }
    body.page-discord .main-footer { display: block; }
}

/* RMT marketplace preview and featured navigation entry. */
.navbar .nav-links a.nav-link-rmt { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; color: #071613 !important; background: linear-gradient(120deg,#88ffea,#2ddbc7) !important; border: 1px solid rgba(166,255,238,.78) !important; border-radius: 4px !important; box-shadow: 0 0 22px rgba(45,219,199,.22), inset 0 1px rgba(255,255,255,.45) !important; font-weight: 900; text-shadow: none !important; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.navbar .nav-links a.nav-link-rmt:hover,
.navbar .nav-links a.nav-link-rmt.active { color: #03110e !important; background: linear-gradient(120deg,#b5fff2,#48efdc) !important; border-color: #cafff5 !important; box-shadow: 0 0 30px rgba(45,219,199,.38), inset 0 1px rgba(255,255,255,.55) !important; transform: translateY(-1px); }
.navbar .nav-links a.nav-link-rmt i { color: #087e72 !important; }
.page-rmt { --rmt-cyan: #54f0da; --rmt-green: #75e0a0; color: #f0f4f2; }
.page-rmt .bg-image { filter: brightness(.58) saturate(.78); }
.page-rmt .rmt-page-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 15% 22%,rgba(4,25,26,.58),transparent 43%),linear-gradient(90deg,rgba(2,6,9,.68),rgba(2,6,9,.9) 52%,rgba(2,6,9,.82)); pointer-events: none; }
.page-rmt .particle-canvas { z-index: 2; }
.page-rmt .rmt-page-content { position: relative; z-index: 3; min-height: 100svh; padding-top: var(--nav-height); }
.page-rmt .rmt-market-landing { min-height: 0; display: block; padding: clamp(14px,2.2vh,26px) clamp(18px,4vw,64px); background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.rmt-market-layout { width: min(1500px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(285px,.7fr) minmax(620px,1.3fr); align-items: center; gap: clamp(32px,4vw,68px); }
.rmt-intro-column { max-width: 540px; }
.rmt-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(84,240,218,.33); border-radius: 3px; color: var(--rmt-cyan); background: rgba(4,21,21,.63); font-size: .63rem; font-weight: 900; letter-spacing: .15em; }
.rmt-eyebrow i { filter: drop-shadow(0 0 8px rgba(84,240,218,.65)); }
.rmt-intro-column h1 { margin: 22px 0 16px; color: #f4f1e7; font: 700 clamp(2.3rem,4.2vw,4.15rem)/1.05 'Cinzel',serif; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 8px 30px rgba(0,0,0,.36); }
.rmt-intro-column h1 em { color: var(--rmt-cyan); font-style: normal; text-shadow: 0 0 28px rgba(84,240,218,.25); }
.rmt-intro-copy { max-width: 530px; color: rgba(230,238,235,.72); font-size: .98rem; line-height: 1.75; }
.rmt-intro-copy strong { color: #f3eee0; font-weight: 800; }
.rmt-flow-list { display: grid; gap: 9px; margin-top: 24px; }
.rmt-flow-step { min-height: 62px; display: grid; grid-template-columns: 39px minmax(0,1fr) 30px; align-items: center; gap: 11px; padding: 9px 13px; border: 1px solid rgba(84,240,218,.17); border-radius: 4px; background: linear-gradient(105deg,rgba(7,29,29,.88),rgba(5,12,15,.72)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.rmt-flow-step > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(84,240,218,.42); border-radius: 50%; color: var(--rmt-cyan); font: 700 .72rem 'Cinzel',serif; background: rgba(29,183,164,.1); }
.rmt-flow-step > div { display: grid; gap: 3px; }
.rmt-flow-step strong { color: #edf5f1; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.rmt-flow-step small { color: rgba(228,237,233,.56); font-size: .73rem; }
.rmt-flow-step > i { color: var(--rmt-cyan); justify-self: center; font-size: .95rem; }
.rmt-flow-step > i.fa-pix { font: 900 .59rem 'Outfit',sans-serif; letter-spacing: -.04em; }
.rmt-concept-note { display: flex; gap: 8px; margin-top: 16px; color: rgba(220,230,226,.46); font-size: .68rem; line-height: 1.5; }
.rmt-concept-note i { flex: 0 0 auto; margin-top: 2px; color: var(--rmt-cyan); }
.rmt-simulator { min-width: 0; }
.page-rmt section.rmt-simulator { position: relative; z-index: 1; min-width: 0; padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; will-change: auto; }
.page-rmt .rmt-listing-art [hidden],.page-rmt .rmt-item-source[hidden],.page-rmt .rmt-item-facts[hidden] { display: none !important; }
.rmt-simulator-frame { position: relative; overflow: hidden; border: 1px solid rgba(84,240,218,.42); border-radius: 9px; background: radial-gradient(ellipse at 8% 0%,rgba(18,112,100,.17),transparent 38%),linear-gradient(145deg,rgba(8,21,23,.98),rgba(3,8,11,.98)); box-shadow: 0 24px 65px rgba(0,0,0,.42),0 0 32px rgba(39,218,195,.08),inset 0 1px rgba(255,255,255,.045); }
.rmt-simulator-frame::before { content: ''; position: absolute; z-index: 3; top: 0; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg,transparent,#54f0da,#d9bc78,#54f0da,transparent); opacity: .8; }
.rmt-simulator-topbar { position: relative; z-index: 1; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px clamp(16px,2.2vw,28px); border: 0; border-bottom: 1px solid rgba(84,240,218,.23); border-radius: 0; background: linear-gradient(100deg,rgba(12,43,40,.94),rgba(6,17,18,.95)); }
.rmt-panel-logo { position: absolute; top: 50%; left: 50%; width: clamp(112px,15vw,176px); height: 44px; object-fit: contain; object-position: center; transform: translate(-50%,-50%); filter: drop-shadow(0 0 12px rgba(84,240,218,.2)); }
.rmt-simulator-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.rmt-brand-mark { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(84,240,218,.39); border-radius: 50%; color: var(--rmt-cyan); background: rgba(28,183,164,.11); box-shadow: 0 0 19px rgba(84,240,218,.1); }
.rmt-simulator-brand > span:last-child { min-width: 0; display: grid; gap: 2px; }
.rmt-simulator-brand small { color: var(--rmt-cyan); font-size: .55rem; font-weight: 900; letter-spacing: .17em; }
.rmt-simulator-brand strong { overflow: hidden; color: #f0eee6; font: 700 .96rem 'Cinzel',serif; text-overflow: ellipsis; white-space: nowrap; }
.rmt-demo-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(226,194,138,.25); border-radius: 3px; color: #e7c783; background: rgba(117,78,28,.11); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.rmt-simulator-body { position: relative; z-index: 1; padding: clamp(18px,2.3vw,28px) clamp(16px,2.2vw,28px) 18px; border: 0; background: transparent; }
.rmt-simulator-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rmt-simulator-heading > div > small { color: rgba(84,240,218,.77); font-size: .55rem; font-weight: 900; letter-spacing: .15em; }
.rmt-simulator-heading h2 { margin: 4px 0 0; color: #f4f1e8; font: 700 clamp(1.2rem,2vw,1.65rem)/1.2 'Cinzel',serif; }
.rmt-online-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(117,224,160,.19); border-radius: 3px; color: #9ce2b0; font-size: .51rem; font-weight: 900; letter-spacing: .09em; }
.rmt-online-chip i,.rmt-listing-state i { width: 6px; height: 6px; border-radius: 50%; background: #75e0a0; box-shadow: 0 0 8px rgba(117,224,160,.68); }
.rmt-category-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.rmt-category-tabs button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(84,240,218,.2); border-radius: 4px; color: rgba(229,240,236,.62); background: linear-gradient(180deg,rgba(11,25,27,.9),rgba(5,12,15,.86)); font: 800 .62rem 'Outfit',sans-serif; letter-spacing: .08em; cursor: pointer; transition: color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.rmt-category-tabs button:hover,.rmt-category-tabs button.active { color: var(--rmt-cyan); border-color: rgba(84,240,218,.53); background: rgba(21,126,114,.13); box-shadow: inset 0 -2px var(--rmt-cyan); }
.rmt-category-tabs button i { font-size: .75rem; }
.rmt-listing-card { display: grid; grid-template-columns: minmax(190px,.34fr) minmax(0,1fr); overflow: hidden; border: 1px solid rgba(84,240,218,.3); border-radius: 7px; background: linear-gradient(110deg,rgba(11,31,30,.96),rgba(6,13,15,.98)); box-shadow: 0 12px 32px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
.rmt-listing-art { position: relative; min-height: 258px; display: grid; place-items: center; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(84,240,218,.24); color: rgba(84,240,218,.86); background: radial-gradient(ellipse at 50% 48%,rgba(34,186,166,.3),transparent 51%),linear-gradient(145deg,#153633,#091517 72%); }
.rmt-listing-art::before,.rmt-listing-art::after { content: ''; position: absolute; z-index: 0; width: 166px; height: 166px; border: 1px solid rgba(226,194,138,.26); transform: rotate(45deg); pointer-events: none; }
.rmt-listing-art::after { width: 140px; height: 140px; border-color: rgba(84,240,218,.23); }
.rmt-character-art { position: absolute; z-index: 1; inset: 28px 0 0; width: 100%; height: calc(100% - 28px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 17px rgba(0,0,0,.55)); pointer-events: none; }
.rmt-listing-art:not(.is-item):not(.is-currency) .rmt-class-crest { position: absolute; z-index: 2; right: 12px; bottom: 37px; width: 54px; height: 54px; border-width: 1px; background: radial-gradient(circle,rgba(5,15,16,.96),rgba(4,10,12,.94)); box-shadow: 0 0 0 3px rgba(5,12,13,.74),0 0 0 4px rgba(84,240,218,.35),0 0 19px rgba(84,240,218,.26); }
.rmt-listing-art:not(.is-item):not(.is-currency) .rmt-class-crest::before { inset: 4px; }
.rmt-listing-art:not(.is-item):not(.is-currency) .rmt-class-crest img:not(.rmt-item-image) { width: 36px; height: 36px; }
.rmt-card-ribbon,.rmt-card-level { position: absolute; z-index: 2; top: 11px; display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid rgba(226,194,138,.38); border-radius: 3px; color: #f1d18d; background: linear-gradient(120deg,rgba(92,44,20,.94),rgba(49,24,20,.93)); box-shadow: 0 4px 12px rgba(0,0,0,.24); font-size: .48rem; font-weight: 900; letter-spacing: .1em; }
.rmt-card-ribbon { left: 10px; }
.rmt-card-ribbon::before { content: '✦'; margin-right: 5px; color: #ffe1a2; }
.rmt-card-level { right: 10px; gap: 4px; color: rgba(241,244,235,.7); border-color: rgba(84,240,218,.22); background: rgba(3,12,14,.76); }
.rmt-card-level b { color: #fff4d2; font: 700 .75rem 'Cinzel',serif; }
.rmt-class-crest { position: relative; z-index: 1; width: 116px; height: 116px; display: grid; place-items: center; border: 2px solid rgba(226,194,138,.8); border-radius: 50%; background: radial-gradient(circle,rgba(36,25,14,.5),rgba(4,12,13,.96) 69%); box-shadow: 0 0 0 5px rgba(7,16,16,.75),0 0 0 6px rgba(84,240,218,.33),0 0 32px rgba(84,240,218,.23); }
.rmt-class-crest::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(226,194,138,.4); border-radius: 50%; }
.rmt-class-crest img { width: 82px; height: 82px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 10px rgba(84,240,218,.24)); image-rendering: auto; }
.rmt-class-crest img.rmt-item-image { width: 102px; height: 102px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 0 13px rgba(230,180,72,.55)); }
.rmt-listing-art.is-currency { background: radial-gradient(ellipse at 50% 46%,rgba(188,137,45,.3),transparent 52%),linear-gradient(145deg,#382b17,#111411 72%); }
.rmt-listing-art.is-currency::before { border-color: rgba(238,196,104,.4); }
.rmt-listing-art.is-currency::after { border-color: rgba(238,196,104,.31); }
.rmt-listing-art.is-currency .rmt-class-crest { border-color: rgba(244,202,111,.94); background: radial-gradient(circle,rgba(97,66,20,.48),rgba(12,12,10,.97) 70%); box-shadow: 0 0 0 5px rgba(14,13,10,.78),0 0 0 6px rgba(230,180,72,.42),0 0 36px rgba(230,180,72,.33); }
.rmt-listing-art.is-currency .rmt-class-crest::before { border-color: rgba(244,202,111,.57); }
.rmt-listing-art.is-currency .rmt-class-crest img.rmt-item-image { filter: drop-shadow(0 0 13px rgba(246,194,83,.64)); }
.rmt-listing-art.is-currency .rmt-card-ribbon { border-color: rgba(255,219,132,.54); color: #ffe5a4; background: linear-gradient(120deg,rgba(120,73,18,.96),rgba(66,38,13,.95)); }
.rmt-class-crest > i { color: #e8c87e; font-size: 2.45rem; filter: drop-shadow(0 0 12px rgba(226,194,138,.45)); }
.rmt-art-caption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 10px 8px 9px; color: rgba(230,241,236,.84); background: linear-gradient(180deg,transparent,rgba(2,8,10,.88) 45%); font-size: .5rem; font-weight: 900; letter-spacing: .12em; text-align: center; }
.rmt-listing-content { min-width: 0; padding: 16px 19px; }
.rmt-listing-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: var(--rmt-cyan); font-size: .52rem; font-weight: 900; letter-spacing: .09em; }
.rmt-listing-state { display: inline-flex; align-items: center; gap: 5px; color: #9ce2b0; }
.rmt-listing-state i { width: 5px; height: 5px; }
.rmt-listing-content h3 { margin: 10px 0 5px; color: #f2efe6; font: 700 1.12rem 'Cinzel',serif; }
.rmt-listing-content > p { min-height: 1.35em; color: rgba(226,236,232,.68); font-size: .74rem; line-height: 1.5; }
.rmt-item-source { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #e7c783; font-size: .61rem; font-weight: 800; text-decoration: none; }
.rmt-item-source:hover { color: #ffe4a6; text-decoration: underline; }
.rmt-item-facts:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rmt-item-facts span { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid rgba(226,194,138,.2); border-radius: 3px; color: rgba(231,199,131,.63); background: rgba(117,78,28,.08); font-size: .43rem; font-weight: 900; letter-spacing: .06em; }
.rmt-item-facts b { color: rgba(238,242,234,.82); font-size: .56rem; letter-spacing: 0; }
.rmt-listing-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 9px; border-top: 1px solid rgba(84,240,218,.12); }
.rmt-listing-bottom > span { color: rgba(220,232,228,.42); font-size: .48rem; font-weight: 800; letter-spacing: .06em; }
.rmt-listing-bottom > span strong { display: block; margin-top: 3px; color: rgba(237,245,241,.84); font-size: .58rem; }
.rmt-demo-price { flex: 0 0 auto; color: #f1d18d; font: 700 1.02rem 'Cinzel',serif; text-align: right; }
.rmt-demo-price small { display: block; margin-top: 3px; color: rgba(241,209,141,.55); font: 800 .44rem 'Outfit',sans-serif; letter-spacing: .1em; }
.rmt-transaction-panel { margin-top: 14px; padding: clamp(13px,1.6vw,18px); border: 1px solid rgba(84,240,218,.24); border-radius: 6px; background: linear-gradient(135deg,rgba(8,18,20,.9),rgba(5,10,13,.86)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.rmt-transaction-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 11px; border-bottom: 1px solid rgba(84,240,218,.12); }
.rmt-transaction-title > span { color: #e5eee9; font-size: .64rem; font-weight: 900; letter-spacing: .09em; }
.rmt-transaction-title > span small { margin-left: 7px; color: var(--rmt-cyan); font-size: .52rem; letter-spacing: .1em; }
.rmt-transaction-title > span i { margin-right: 6px; color: var(--rmt-cyan); }
.rmt-transaction-title > small { color: rgba(226,194,138,.76); font-size: .46rem; font-weight: 900; letter-spacing: .08em; text-align: right; }
.rmt-transaction-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.rmt-transaction-steps li { min-width: 0; min-height: 83px; display: grid; grid-template-columns: 25px minmax(0,1fr); align-content: start; gap: 8px; padding: 10px 9px; border: 1px solid rgba(225,236,231,.1); border-radius: 3px; background: rgba(255,255,255,.022); transition: border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.rmt-transaction-steps li > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(225,236,231,.15); border-radius: 50%; color: rgba(230,239,235,.43); font: 700 .55rem 'Cinzel',serif; }
.rmt-transaction-steps li > div { min-width: 0; display: grid; gap: 4px; }
.rmt-transaction-steps li strong { color: rgba(230,239,235,.55); font-size: .54rem; font-weight: 900; line-height: 1.3; letter-spacing: .045em; }
.rmt-transaction-steps li small { color: rgba(220,231,227,.48); font-size: .54rem; line-height: 1.35; }
.rmt-transaction-steps li > i { display: none; grid-column: 2; color: var(--rmt-green); font-size: .58rem; }
.rmt-transaction-steps li.is-current { border-color: rgba(84,240,218,.44); background: rgba(24,137,124,.1); box-shadow: 0 0 16px rgba(84,240,218,.055); animation: rmt-step-pulse 1.8s ease-in-out infinite; }
.rmt-transaction-steps li.is-current > span { color: #071613; border-color: var(--rmt-cyan); background: var(--rmt-cyan); }
.rmt-transaction-steps li.is-current strong { color: var(--rmt-cyan); }
.rmt-transaction-steps li.is-complete { border-color: rgba(117,224,160,.29); background: rgba(50,121,79,.07); }
.rmt-transaction-steps li.is-complete > span { color: #071610; border-color: var(--rmt-green); background: var(--rmt-green); }
.rmt-transaction-steps li.is-complete strong { color: #a1e6b5; }
.rmt-transaction-steps li.is-complete > i { display: block; }
.rmt-simulation-feedback { min-height: 1.4em; margin: 11px 2px 0; color: rgba(225,235,231,.53); font-size: .64rem; line-height: 1.5; }
.rmt-simulator-caption { position: relative; z-index: 1; display: flex; justify-content: center; gap: 7px; margin: 0; padding: 12px 16px 14px; border-top: 1px solid rgba(84,240,218,.13); color: rgba(225,235,231,.48); background: rgba(2,8,10,.35); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-align: center; }
.rmt-simulator-caption i { color: var(--rmt-cyan); }
@keyframes rmt-step-pulse { 0%,100% { box-shadow: 0 0 8px rgba(84,240,218,.035); } 50% { box-shadow: 0 0 18px rgba(84,240,218,.13); } }
@keyframes rmt-listing-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .rmt-transaction-steps li.is-current { animation: none; } }
@media (max-width: 1180px) {
    .rmt-market-layout { grid-template-columns: minmax(280px,.7fr) minmax(500px,1.3fr); gap: 28px; }
    .rmt-intro-column h1 { font-size: clamp(2rem,4vw,3.25rem); }
    .rmt-transaction-steps li { grid-template-columns: 21px minmax(0,1fr); gap: 5px; padding: 7px 5px; }
    .rmt-transaction-steps li strong,.rmt-transaction-steps li small { font-size: .44rem; }
}
@media (max-width: 900px) {
    .navbar .nav-links a.nav-link-rmt { justify-content: flex-start; color: #54f0da !important; background: rgba(19,223,196,.1) !important; border: 1px solid rgba(84,240,218,.35) !important; box-shadow: inset 3px 0 0 #54f0da !important; }
    .navbar .nav-links a.nav-link-rmt.active { color: #061714 !important; background: linear-gradient(120deg,#88ffea,#2ddbc7) !important; }
    .rmt-market-landing { padding: 36px 20px 50px; }
    .rmt-market-layout { width: min(760px,100%); grid-template-columns: minmax(0,1fr); gap: 28px; }
    .rmt-intro-column { max-width: 700px; }
    .rmt-intro-column h1 { max-width: 700px; font-size: clamp(2.3rem,7vw,3.8rem); }
    .rmt-simulator { width: 100%; }
}
@media (max-width: 560px) {
    .rmt-market-landing { padding: 24px 12px 38px; }
    .rmt-market-layout { gap: 22px; }
    .rmt-eyebrow { font-size: .53rem; letter-spacing: .11em; }
    .rmt-intro-column h1 { margin: 17px 0 12px; font-size: clamp(2rem,9.3vw,2.85rem); }
    .rmt-intro-copy { font-size: .89rem; }
    .rmt-flow-step { grid-template-columns: 35px minmax(0,1fr) 25px; gap: 8px; padding-inline: 9px; }
    .rmt-simulator-topbar { min-height: 60px; padding: 10px 12px; }
    .rmt-simulator-topbar { min-height: 88px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "brand demo" "logo logo"; row-gap: 5px; }
    .rmt-simulator-brand { grid-area: brand; }
    .rmt-panel-logo { position: static; grid-area: logo; justify-self: center; width: 112px; height: 30px; transform: none; }
    .rmt-demo-chip { grid-area: demo; justify-self: end; }
    .rmt-brand-mark { width: 34px; height: 34px; }
    .rmt-simulator-brand strong { font-size: .78rem; }
    .rmt-demo-chip { padding: 6px; font-size: .46rem; }
    .rmt-simulator-body { padding: 15px 12px 12px; }
    .rmt-simulator-heading h2 { font-size: 1.14rem; }
    .rmt-category-tabs { gap: 4px; }
    .rmt-category-tabs button { gap: 5px; font-size: .49rem; letter-spacing: .04em; }
    .rmt-listing-card { grid-template-columns: 112px minmax(0,1fr); }
    .rmt-listing-art { min-height: 156px; }
    .rmt-character-art { inset: 23px 0 0; width: 100%; height: calc(100% - 23px); }
    .rmt-listing-art::before { width: 88px; height: 88px; }
    .rmt-listing-art::after { width: 72px; height: 72px; }
    .rmt-class-crest { width: 72px; height: 72px; }
    .rmt-class-crest img { width: 52px; height: 52px; }
    .rmt-class-crest img.rmt-item-image { width: 58px; height: 58px; }
    .rmt-listing-art:not(.is-item):not(.is-currency) .rmt-class-crest { right: 5px; bottom: 28px; width: 36px; height: 36px; }
    .rmt-listing-art:not(.is-item):not(.is-currency) .rmt-class-crest img:not(.rmt-item-image) { width: 25px; height: 25px; }
    .rmt-card-ribbon,.rmt-card-level { top: 7px; min-height: 18px; padding-inline: 5px; font-size: .35rem; }
    .rmt-card-ribbon { left: 5px; }
    .rmt-card-level { right: 5px; }
    .rmt-card-level b { font-size: .56rem; }
    .rmt-art-caption { bottom: 7px; font-size: .34rem; }
    .rmt-listing-content { padding: 10px; }
    .rmt-listing-content h3 { font-size: .82rem; }
    .rmt-listing-content > p { font-size: .6rem; }
    .rmt-listing-bottom { gap: 5px; }
    .rmt-listing-bottom > span { font-size: .4rem; }
    .rmt-listing-bottom > span strong { font-size: .48rem; }
    .rmt-demo-price { font-size: .8rem; }
    .rmt-demo-price small { font-size: .38rem; }
    .rmt-transaction-panel { padding: 9px; }
    .rmt-transaction-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rmt-transaction-steps li { min-height: 58px; grid-template-columns: 22px minmax(0,1fr); padding: 6px; }
    .rmt-transaction-steps li strong { font-size: .49rem; }
    .rmt-transaction-steps li small { font-size: .48rem; }
}



/* Live roadmap countdown and milestone progress */
.roadmap-live-panel {
    display: grid;
    gap: 8px;
    margin-top: 13px;
    padding: 11px 13px 10px;
    border: 1px solid rgba(32, 222, 198, .2);
    border-radius: 5px;
    background: linear-gradient(110deg, rgba(7, 22, 20, .8), rgba(9, 27, 25, .55));
}
.roadmap-live-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
}
.roadmap-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9feadd;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.roadmap-live-indicator i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #62e8b0;
    box-shadow: 0 0 10px rgba(98, 232, 176, .75);
    animation: roadmap-pulse 1.5s ease-in-out infinite;
}
.roadmap-next-label {
    grid-column: 1;
    color: #6fe8d4;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.roadmap-countdown {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #f1d995;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(.85rem, 1.6vw, 1.15rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .045em;
    white-space: nowrap;
}
.roadmap-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: rgba(213, 228, 225, .65);
    font-size: .59rem;
}
.roadmap-progress-copy strong { color: #91f2df; font-variant-numeric: tabular-nums; }
.roadmap-progress-bar {
    position: relative;
    height: 5px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(199, 223, 218, .14);
}
.roadmap-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #13baa9, #62ffe3);
    box-shadow: 0 0 12px rgba(19, 216, 192, .62);
    transition: width .8s ease;
}
.roadmap-steps li .roadmap-step-countdown {
    min-height: 13px;
    color: rgba(119, 231, 211, .77);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.roadmap-steps li.is-active .roadmap-node {
    color: #06211e;
    background: #5bffe5;
    box-shadow: 0 0 0 4px rgba(25, 216, 192, .15), 0 0 18px rgba(25, 216, 192, .65);
    animation: roadmap-pulse 1.5s ease-in-out infinite;
}
.roadmap-steps li.is-complete .roadmap-node {
    color: #06211e;
    background: #72e9b0;
    border-color: #72e9b0;
}
.roadmap-steps li.is-complete .roadmap-step-countdown { color: #72e9b0; }
.roadmap-steps li.is-active .roadmap-step-countdown { color: #f1d995; }
@keyframes roadmap-pulse { 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(25, 216, 192, .08), 0 0 22px rgba(25, 216, 192, .4); } }
@media (max-width: 560px) {
    .roadmap-live-panel { margin-top: 10px; padding: 9px 10px; gap: 7px; }
    .roadmap-live-heading { gap: 3px 7px; }
    .roadmap-countdown { font-size: .81rem; }
    .roadmap-next-label { font-size: .53rem; }
    .roadmap-progress-copy { font-size: .53rem; }
    .roadmap-steps li .roadmap-step-countdown { grid-column: 2; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .roadmap-live-indicator i, .roadmap-steps li.is-active .roadmap-node { animation: none; }
    .roadmap-progress-bar span { transition: none; }
}

/* Shared navigation includes Arena de Clãs. */
@media(min-width:769px){.navbar .nav-container{max-width:1440px;gap:20px}.navbar .nav-logo{flex-shrink:0}.navbar .nav-links{gap:clamp(9px,1.2vw,20px);min-width:0}.navbar .nav-links a{white-space:nowrap;font-size:11px;letter-spacing:.5px}.navbar .nav-links .btn-nav-panel{padding:10px 14px}}
@media(min-width:769px) and (max-width:1050px){.navbar .nav-container{gap:12px;padding:0 12px}.navbar .nav-links{overflow-x:auto;padding:10px 0;scrollbar-width:thin}.navbar .nav-links a{flex-shrink:0}}
@media(min-width:769px) and (max-width:1400px){.navbar .nav-links{gap:7px}.navbar .nav-links a{font-size:10px;letter-spacing:.3px;padding:10px 9px!important}}