/* ============================================================
   CASINO SECTION - GREEN ACCENT + COMING SOON
   Scoped to body.casino-page so it never leaks into
   CS2 (blue), Rust (red) or IRL (purple) pages.
   ============================================================ */

body.casino-page {
    --cas-green: #22c55e;
    --cas-green-bright: #4ade80;
    --cas-green-dim: #16a34a;
    --cas-green-deep: #15803d;
    --cas-green-glow: rgba(34, 197, 94, 0.35);
    --cas-green-soft: rgba(34, 197, 94, 0.10);
    --cas-green-faint: rgba(34, 197, 94, 0.04);
}

/* Active nav link - green (overrides default blue pill) */
body.casino-page .main-nav .nav-link.active,
body.casino-page .premium-header .main-nav .nav-link.active,
body.casino-page .main-nav .nav-link.active:visited {
    background: var(--cas-green-dim) !important;
    border-color: var(--cas-green-dim) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--cas-green-glow) !important;
}
body.casino-page .main-nav .nav-link:hover { color: var(--cas-green-bright); }

/* SVG icon sizing (matches CS2 site) */
body.casino-page .nav-link .ico {
    width: 18px; height: 18px; vertical-align: -3px;
    fill: none; stroke: currentColor; stroke-width: 2;
}
body.casino-page .nav-toggle .ico {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 2;
}

/* ---------- Coming soon hero ---------- */
body.casino-page .cs-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px 100px;
}

body.casino-page .cs-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    max-width: 130vw;
    background: radial-gradient(circle,
        var(--cas-green-glow) 0%,
        rgba(34, 197, 94, 0.08) 35%,
        transparent 70%);
    filter: blur(20px);
    z-index: 0;
    animation: cs-pulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cs-pulse {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

body.casino-page .cs-hero .cs-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

body.casino-page .cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cas-green-bright);
    background: var(--cas-green-soft);
    border: 1px solid rgba(34, 197, 94, 0.4);
    margin-bottom: 28px;
}

body.casino-page .cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cas-green-bright);
    box-shadow: 0 0 0 0 var(--cas-green-glow);
    animation: cs-dot 1.8s ease-out infinite;
}
@keyframes cs-dot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

body.casino-page .cs-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.05;
    margin: 0 0 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.casino-page .cs-hero h1 .hl {
    color: var(--cas-green-bright);
    text-shadow: 0 0 34px var(--cas-green-glow);
}

body.casino-page .cs-hero p.cs-sub {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: #aeb6c2;
    max-width: 600px;
    margin: 0 auto 36px;
}

body.casino-page .cs-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
body.casino-page .cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.casino-page .cs-btn-discord {
    color: #fff;
    background: linear-gradient(135deg, var(--cas-green-deep), var(--cas-green));
    box-shadow: 0 6px 24px var(--cas-green-glow);
}
body.casino-page .cs-btn-discord:hover {
    background: linear-gradient(135deg, var(--cas-green), var(--cas-green-bright));
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}
body.casino-page .cs-btn-ghost {
    color: var(--cas-green-bright);
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: var(--cas-green-faint);
}
body.casino-page .cs-btn-ghost:hover {
    background: var(--cas-green-soft);
    border-color: var(--cas-green);
}
body.casino-page .cs-btn svg { width: 20px; height: 20px; }

body.casino-page .cs-feature-note {
    margin-top: 40px;
    font-size: 0.92rem;
    color: #8a93a0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
body.casino-page .cs-feature-note strong { color: var(--cas-green-bright); }

/* Casino dot in the section-switcher dropdown (also in section-switcher.css;
   duplicated here so it stays green even if that shared file is cached). */
body.casino-page .section-dot.casino,
.section-dot.casino {
    background: #22c55e !important;
    color: #22c55e !important;
}