:root {
    --neon-cyan: #22d3ee;
    --neon-bg: #02060f;
    --neon-panel: #02101d;
}

html { scroll-behavior: smooth; }

body.neon-home {
    background: var(--neon-bg);
    color: #f8fafc;
    font-family: 'Oswald', 'Rajdhani', sans-serif;
    overflow-x: hidden;
}

.neon-home .font-press { font-family: 'Press Start 2P', monospace; }

.neon-loader {
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.neon-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.neon-loader-bar {
    transition: width 0.25s ease;
}

.neon-section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
    background: #020617;
}

.neon-section-fade {
    position: absolute;
    inset: 0;
    z-index: -5;
    background: linear-gradient(to bottom, transparent, #000);
}

.neon-gradient-text {
    background: linear-gradient(90deg, #fcd34d, #fb923c, #ef4444);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.neon-class-panel {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.neon-class-detail-panel.hidden {
    display: none;
}


.neon-class-art {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.neon-class-art.is-switching {
    opacity: 0;
    transform: translateX(-16px);
}

.neon-roster-btn.is-active {
    border-color: rgba(103, 232, 249, 0.35);
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.16);
}

.neon-roster-btn.is-active .neon-roster-accent {
    opacity: 1;
}

.neon-roster-accent {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neon-roster-btn:hover .neon-roster-accent {
    opacity: 0.7;
}

.neon-tab-btn.is-active {
    border-bottom: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
}

#neonClassCanvas {
    pointer-events: none;
}

.neon-modal-overlay {
    background: rgba(2, 6, 15, 0.92);
    backdrop-filter: blur(10px);
}

.neon-modal-card {
    background: linear-gradient(145deg, rgba(5, 10, 24, 0.98), rgba(10, 6, 24, 0.95));
    border: 1px solid rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 60px rgba(34, 211, 238, 0.15);
}

.neon-btn-primary {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(15, 23, 42, 1), rgba(126, 34, 206, 0.15));
    border: 2px solid rgba(34, 211, 238, 0.8);
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.neon-btn-primary:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(165, 243, 252, 1);
}

/* ========== Rankings (neon-cabal) ========== */
.neon-rank-board {
    scrollbar-color: rgba(34, 211, 238, 0.35) rgba(0, 0, 0, 0.35);
}

.neon-nation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.neon-nation-badge--capella {
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.28);
}

.neon-nation-badge--procyon {
    color: #fbcfe8;
    background: rgba(244, 114, 182, 0.12);
    border-color: rgba(244, 114, 182, 0.28);
}

.neon-nation-badge--neutral {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.25);
}

.neon-rank-row:hover {
    background: rgba(34, 211, 238, 0.04);
}

.neon-class-icon {
    display: inline-block;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}

.neon-class-icon--xs {
    width: 1rem;
    height: 1rem;
}

.neon-class-icon--sm {
    width: 1.125rem;
    height: 1.125rem;
}

.neon-class-icon--md {
    width: 1.5rem;
    height: 1.5rem;
}

.neon-class-icon--lg {
    width: 2rem;
    height: 2rem;
}

.neon-class-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.neon-class-cell__name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* ========== NAV (igual neon-cabal) ========== */
.neon-nav {
    background: transparent;
    border: none;
    pointer-events: none;
}

.neon-nav::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 96px;
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.92) 0%,
        rgba(2, 6, 23, 0.62) 55%,
        rgba(2, 6, 23, 0.15) 85%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.neon-nav > div {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.neon-nav-icon {
    display: block;
    height: 52px;
    width: 52px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.35));
}

.neon-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(2, 6, 23, 0.55);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
    backdrop-filter: blur(8px);
}

.neon-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    font-family: 'Rajdhani', 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    color: rgba(226, 232, 240, 0.75);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.neon-lang-btn:hover {
    color: #fff;
    background: rgba(34, 211, 238, 0.12);
}

.neon-lang-btn.is-active {
    color: #020617;
    background: linear-gradient(135deg, #22d3ee, #67e8f9);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.45);
}

@media (max-width: 639px) {
    .neon-lang-switch {
        margin-left: -4px;
    }
    .neon-lang-btn {
        min-width: 2rem;
        padding: 0.3rem 0.45rem;
        font-size: 0.65rem;
    }
}

.neon-nav-links {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(2, 8, 20, 0.82);
    border: 1px solid rgba(34, 211, 238, 0.42);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(34, 211, 238, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.neon-nav-link {
    font-family: 'Oswald', 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fde68a;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 2px 8px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(251, 191, 36, 0.65);
    transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    padding: 0.2rem 0.05rem;
}

.neon-nav-link:hover {
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 22px rgba(34, 211, 238, 0.95),
        0 0 36px rgba(251, 191, 36, 0.45);
    transform: translateY(-1px);
}

@media (min-width: 1280px) {
    .neon-nav-links {
        padding: 0.55rem 1.35rem;
        gap: 1.85rem !important;
    }

    .neon-nav-link {
        font-size: 0.84rem;
        letter-spacing: 0.18em;
    }
}

.neon-btn-register,
.neon-btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 9999px;
    padding: 0.55rem 1.15rem;
    min-width: 9.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.neon-btn-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.neon-btn-lines {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}

.neon-btn-lines span:last-child {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.neon-btn-register {
    border: 1px solid rgba(180, 83, 9, 0.55);
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.95), rgba(120, 53, 15, 0.95));
    color: #fff7ed;
    box-shadow: 0 0 20px rgba(180, 83, 9, 0.25);
}

.neon-btn-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.35);
}

.neon-btn-login {
    border: 1px solid rgba(34, 211, 238, 0.45);
    background: linear-gradient(180deg, rgba(2, 16, 29, 0.95), rgba(2, 8, 18, 0.98));
    color: #e0f2fe;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
}

.neon-btn-login:hover {
    transform: translateY(-1px);
    border-color: rgba(103, 232, 249, 0.75);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

.neon-hero-logo-wrap {
    width: min(25rem, 90vw);
    height: min(25rem, 90vw);
}

.neon-hero-title {
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.35);
}

.cabal-logo--nav {
    max-height: 52px;
    max-width: 140px;
}

.cabal-logo--hero-center {
    filter: drop-shadow(0 0 25px rgba(34, 211, 238, 0.45));
    background: transparent !important;
}

.cabal-logo--loader-round {
    max-height: 100%;
    max-width: 100%;
}

.neon-stat-row {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.neon-stat-grid {
    width: 100%;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.neon-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 118px;
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(34, 211, 238, 0.38);
    background: linear-gradient(180deg, rgba(2, 8, 18, 0.92), rgba(1, 4, 10, 0.88));
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(34, 211, 238, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
}

.neon-stat-icon {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
    margin-bottom: 0.15rem;
}

.neon-stat-icon--fuchsia {
    border-color: rgba(217, 70, 239, 0.35);
    background: rgba(217, 70, 239, 0.12);
    color: #f0abfc;
}

.neon-stat-icon--sky {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.neon-stat-icon--online {
    position: relative;
}

.neon-online-dot {
    display: block;
    height: 0.85rem;
    width: 0.85rem;
    border-radius: 9999px;
    background: #4ade80;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.95);
}

.neon-stat-value {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1;
    color: #22d3ee;
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}

.neon-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

@media (min-width: 768px) {
    .neon-stat-card {
        min-width: 170px;
        flex: 1 1 170px;
        max-width: 210px;
    }
}

@media (max-width: 767px) {
    .neon-hero-logo-wrap { width: 16rem; height: 16rem; }
}

.cabal-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.22));
}

.cabal-logo--hero {
    max-height: clamp(140px, 22vw, 220px);
    margin-left: auto;
    margin-right: auto;
}

.cabal-logo--loader {
    max-height: clamp(120px, 18vw, 200px);
    margin-bottom: 0;
}

.cabal-logo--panel {
    max-width: 210px;
    max-height: 72px;
}

.cabal-logo--footer {
    max-height: clamp(120px, 16vw, 180px);
}

.cabal-logo--sm {
    max-height: 64px;
}

/* ========== NEWS CAROUSEL VIDEO ========== */
#neonNewsCarousel [data-media-type="video"] {
    background: #020617;
}

.neon-news-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #020617;
}

.neon-news-video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(2, 6, 23, 0.92));
}

.neon-news-video::-webkit-media-controls-enclosure {
    border-radius: 0 0 1rem 1rem;
}