/*!
 * 9wickets Pro — Brand Layer ("Stadium Night")
 * Loaded after velki-home.css. Redefines design tokens so the existing
 * components inherit the new palette without touching their CSS.
 *
 * Palette:
 *   bg              #0A0B10  near-black
 *   surface         #14161F  charcoal
 *   gold (logo)     #F5B100
 *   gold high       #FFD66B
 *   ball red        #D32030
 *   ivory           #F2F0EA
 *   graphite        #8E8E96
 */

/* ============================================================
   1. TOKEN OVERRIDES
   ============================================================ */
body.vk {
    /* Surfaces */
    --vk-bg:        #0A0B10;
    --vk-bg-1:      #0E1018;
    --vk-bg-2:      #14161F;
    --vk-bg-card:   rgba(255, 255, 255, 0.030);
    --vk-bg-card-2: rgba(255, 255, 255, 0.055);
    --vk-line:      rgba(245, 177, 0, 0.12);
    --vk-line-2:    rgba(245, 177, 0, 0.32);
    --vk-line-cool: rgba(211, 32, 48, 0.22);

    /* Footer surface — pure stadium void */
    --vk-bg-dark:   #06070C;
    --vk-bg-dark-2: #030407;

    /* Brand — gold + cricket-ball red, no violet/cyan */
    --vk-gold:       #F5B100;
    --vk-gold-2:     #FFD66B;
    --vk-gold-3:     #E29F00;
    --vk-amber:      #C98800;
    --vk-violet:     #D32030;   /* mapped: violet -> ball red */
    --vk-violet-2:   #B11A29;
    --vk-magenta:    #E63A48;   /* mapped: magenta -> warm red */
    --vk-cyan:       #E0C78A;   /* mapped: cyan -> champagne */
    --vk-emerald:    #7FB069;
    --vk-red:        #D32030;
    --vk-ivory:      #F2F0EA;
    --vk-graphite:   #8E8E96;

    /* Premium gradients — gold owns the spotlight, red highlights, no purple */
    --vk-grad-gold:    linear-gradient(135deg, #FFD66B 0%, #F5B100 50%, #C98800 100%);
    --vk-grad-gold-2:  linear-gradient(95deg,  #FFE6A3 0%, #F5B100 50%, #B07700 100%);
    --vk-grad-royal:   linear-gradient(135deg, #D32030 0%, #B11A29 60%, #6E0F1A 100%);
    --vk-grad-aurora:  linear-gradient(135deg, #F5B100 0%, #E63A48 55%, #B11A29 100%);
    --vk-grad-cyan:    linear-gradient(135deg, #FFE6A3 0%, #E0C78A 50%, #B7964F 100%);
    --vk-grad-magenta: linear-gradient(135deg, #F5B100 0%, #E63A48 100%);
    --vk-grad-text:    linear-gradient(95deg,  #FFE6A3 0%, #F5B100 35%, #FFD66B 65%, #E29F00 100%);
    --vk-grad-em:      linear-gradient(95deg,  #F5B100 0%, #E63A48 50%, #B11A29 100%);

    /* Text */
    --vk-text:       #F2F0EA;
    --vk-text-mid:   #B6B0A2;
    --vk-text-dim:   #6E6857;
    --vk-text-muted: #45413A;

    /* Glow + shadow — gold first, red as accent */
    --vk-glow-gold:    0 12px 40px rgba(245, 177, 0, 0.32), 0 0 0 1px rgba(245, 177, 0, 0.32) inset;
    --vk-glow-gold-hi: 0 18px 56px rgba(245, 177, 0, 0.46), 0 0 0 1px rgba(245, 177, 0, 0.58) inset;
    --vk-glow-violet:  0 12px 40px rgba(211, 32, 48, 0.30);
    --vk-glow-cyan:    0 12px 40px rgba(245, 177, 0, 0.18);
    --vk-shadow-card:    0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.045) inset;
    --vk-shadow-card-hi: 0 24px 60px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.07) inset;

    /* Tabular numerals for stats — premium feel */
    font-feature-settings: "ss01", "cv11", "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   2. AMBIENT BACKDROP — drop the violet/cyan glows, keep warm gold
   ============================================================ */
body.vk-home {
    background-image:
        radial-gradient(60% 50% at 12% 0%,  rgba(245, 177, 0, 0.10), transparent 62%),
        radial-gradient(55% 45% at 88% 8%,  rgba(211, 32, 48, 0.08), transparent 62%),
        radial-gradient(40% 35% at 50% 100%, rgba(245, 177, 0, 0.05), transparent 65%);
}

::selection { background: var(--vk-gold); color: #0A0500; }

/* ============================================================
   3. HEADER REFINEMENT — premium glass, gold rule, tighter rhythm
   ============================================================ */
body.vk .vk-header {
    background: linear-gradient(180deg,
        rgba(10, 11, 16, 0.96) 0%,
        rgba(10, 11, 16, 0.78) 100%);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter:         saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(245, 177, 0, 0.10);
}

body.vk .vk-header__bar {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245, 177, 0, 0.55) 22%,
        rgba(245, 177, 0, 0.95) 50%,
        rgba(245, 177, 0, 0.55) 78%,
        transparent 100%);
    height: 1px;
    opacity: 0.9;
}

body.vk .vk-brand img {
    filter:
        drop-shadow(0 0 12px rgba(245, 177, 0, 0.18))
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
    transition: filter .35s ease, transform .35s ease;
}
body.vk .vk-brand:hover img {
    filter:
        drop-shadow(0 0 22px rgba(245, 177, 0, 0.42))
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
    transform: translateY(-1px);
}

/* Nav links: ivory base, gold underline ink on hover */
body.vk .vk-nav__list a {
    color: var(--vk-text);
    font-weight: 500;
    letter-spacing: 0.005em;
    transition: color .25s ease;
}
body.vk .vk-nav__list a:hover,
body.vk .vk-nav__list a:focus-visible { color: var(--vk-gold-2); }

/* Primary CTA: hot gold pill */
body.vk .vk-btn--primary {
    background: var(--vk-grad-gold);
    color: #0A0500;
    border: 0;
    box-shadow:
        0 10px 30px rgba(245, 177, 0, 0.28),
        0 0 0 1px rgba(245, 177, 0, 0.48) inset;
    font-weight: 700;
}
body.vk .vk-btn--primary:hover {
    box-shadow:
        0 16px 44px rgba(245, 177, 0, 0.42),
        0 0 0 1px rgba(245, 177, 0, 0.72) inset;
    transform: translateY(-1px);
}

/* Search & burger icon buttons */
body.vk .vk-icon-btn,
body.vk .vk-burger {
    color: var(--vk-text);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(245, 177, 0, 0.18);
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
body.vk .vk-icon-btn:hover,
body.vk .vk-burger:hover {
    color: var(--vk-gold-2);
    border-color: rgba(245, 177, 0, 0.55);
    background: rgba(245, 177, 0, 0.06);
}

/* ============================================================
   4. FOOTER REFINEMENT
   ============================================================ */
body.vk .vk-footer {
    background: linear-gradient(180deg,
        var(--vk-bg) 0%,
        var(--vk-bg-dark) 60%,
        var(--vk-bg-dark-2) 100%);
    border-top: 1px solid rgba(245, 177, 0, 0.10);
    position: relative;
}
body.vk .vk-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245, 177, 0, 0.55) 30%,
        rgba(245, 177, 0, 0.95) 50%,
        rgba(245, 177, 0, 0.55) 70%,
        transparent 100%);
    opacity: 0.85;
}
body.vk .vk-footer__glow {
    background: radial-gradient(60% 60% at 50% 0%,
        rgba(245, 177, 0, 0.10) 0%,
        transparent 70%);
}

body.vk .vk-footer__col h4 {
    color: var(--vk-gold);
    font-family: var(--vk-font-en);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    margin-bottom: 14px;
    position: relative;
    padding-left: 14px;
}
body.vk .vk-footer__col h4::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 8px; height: 1px;
    background: var(--vk-gold);
    transform: translateY(-50%);
}
body.vk .vk-footer__col ul a {
    color: var(--vk-text-mid);
    transition: color .25s ease, padding-left .25s ease;
}
body.vk .vk-footer__col ul a:hover {
    color: var(--vk-gold-2);
    padding-left: 4px;
}

body.vk .vk-footer__social a {
    color: var(--vk-text-mid);
    border: 1px solid rgba(245, 177, 0, 0.18);
    background: rgba(255, 255, 255, 0.02);
    transition: color .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
body.vk .vk-footer__social a:hover {
    color: var(--vk-gold-2);
    border-color: rgba(245, 177, 0, 0.55);
    background: rgba(245, 177, 0, 0.06);
    transform: translateY(-2px);
}

body.vk .vk-footer__bot {
    border-top: 1px dashed rgba(245, 177, 0, 0.14);
    color: var(--vk-text-dim);
}
body.vk .vk-footer__bot p { color: inherit; }
body.vk .vk-footer__age {
    color: var(--vk-gold-2);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================
   5. SCROLL-TO-TOP — gold disc
   ============================================================ */
body.vk .vk-totop {
    background: var(--vk-grad-gold);
    color: #0A0500;
    border: 0;
    box-shadow:
        0 10px 30px rgba(245, 177, 0, 0.32),
        0 0 0 1px rgba(245, 177, 0, 0.48) inset;
}
body.vk .vk-totop:hover {
    box-shadow:
        0 16px 44px rgba(245, 177, 0, 0.50),
        0 0 0 1px rgba(245, 177, 0, 0.72) inset;
    transform: translateY(-3px);
}

/* ============================================================
   6. NUMERALS — tabular Sora for stats
   ============================================================ */
body.vk .vk-stat__num,
body.vk .vk-card__kicker,
body.vk .vk-step__num {
    font-family: var(--vk-font-en);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
}