/* ==========================================================================
   8SVUI — AURORA DESIGN SYSTEM
   Modern luxury gaming UI · light hero / dark game zones · glassmorphism
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============ DESIGN TOKENS ============ */
:root{
    /* Light surfaces */
    --l-bg: #f7f8fc;
    --l-bg-2: #eef0f9;
    --l-surface: #ffffff;
    --l-surface-2: #fbfbfe;
    --l-text: #0d1023;
    --l-text-soft: #4a4f6a;
    --l-text-muted: #8a90a8;
    --l-border: rgba(13,16,35,0.08);
    --l-border-strong: rgba(13,16,35,0.14);

    /* Dark surfaces */
    --d-bg: #0a0b16;
    --d-bg-2: #11132a;
    --d-surface: #161938;
    --d-surface-2: #1c2046;
    --d-text: #e8eaff;
    --d-text-soft: #a9adcc;
    --d-text-muted: #6e7398;
    --d-border: rgba(255,255,255,0.08);
    --d-border-strong: rgba(255,255,255,0.18);

    /* Brand accents */
    --c-purple: #7c3aed;
    --c-purple-2: #a855f7;
    --c-blue: #3b82f6;
    --c-cyan: #06d6f7;
    --c-pink: #ec4899;
    --c-magenta: #d946ef;
    --c-gold: #f6c648;
    --c-green: #22c55e;
    --c-red: #ef4444;

    /* Gradients */
    --g-aurora: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #06d6f7 100%);
    --g-aurora-2: linear-gradient(135deg, #a855f7 0%, #3b82f6 50%, #06d6f7 100%);
    --g-sunset: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
    --g-mint: linear-gradient(135deg, #06d6f7 0%, #22c55e 100%);
    --g-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --g-purple: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
    --g-glass-light: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
    --g-glass-dark: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

    /* Shadows */
    --sh-sm: 0 1px 2px rgba(13,16,35,0.06), 0 1px 3px rgba(13,16,35,0.04);
    --sh-md: 0 4px 12px rgba(13,16,35,0.08), 0 2px 6px rgba(13,16,35,0.04);
    --sh-lg: 0 20px 40px -12px rgba(13,16,35,0.18), 0 8px 16px -8px rgba(13,16,35,0.10);
    --sh-xl: 0 32px 64px -16px rgba(13,16,35,0.25), 0 16px 32px -16px rgba(13,16,35,0.15);
    --sh-glow-purple: 0 10px 40px -10px rgba(124,58,237,0.55), 0 0 0 1px rgba(124,58,237,0.15);
    --sh-glow-pink: 0 10px 40px -10px rgba(236,72,153,0.55), 0 0 0 1px rgba(236,72,153,0.15);
    --sh-glow-cyan: 0 10px 40px -10px rgba(6,214,247,0.55), 0 0 0 1px rgba(6,214,247,0.15);

    /* Geometry */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 999px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ GLOBAL RESET ============ */
*, *::before, *::after { box-sizing: border-box; }

html{
    background: var(--l-bg) !important;
    background-image: none !important;
    scroll-behavior: smooth;
}

body{
    background: var(--l-bg) !important;
    background-image:
        radial-gradient(60% 50% at 0% 0%, rgba(124,58,237,0.08) 0%, transparent 60%),
        radial-gradient(50% 40% at 100% 0%, rgba(6,214,247,0.08) 0%, transparent 60%),
        radial-gradient(70% 50% at 50% 100%, rgba(236,72,153,0.06) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--l-text) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.boxed{
    background-color: transparent !important;
    box-shadow: none !important;
    max-width: none !important;
}

#wrapper, .absolute-footer{ background-color: transparent !important; }

::selection{ background: var(--c-purple); color: #fff; }

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4,h5,h6,
.heading-font, .page-title, .entry-title, .shop-page-title, .category-title, .widget-title{
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--l-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    filter: none !important;
    text-transform: none !important;
    line-height: 1.15 !important;
    margin: 0 0 0.5em;
}

h1, .page-title{ font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
h2{ font-size: clamp(1.65rem, 3.4vw, 2.5rem) !important; }
h3{ font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important; }
h4{ font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important; }
h5{ font-size: 1rem !important; }

p, li, td, span:not([class*="icon"]), div{ color: inherit; }
p{ color: var(--l-text-soft); margin: 0 0 1em; }

a{
    color: var(--c-purple) !important;
    text-decoration: none !important;
    transition: color .25s var(--ease);
}
a:hover{ color: var(--c-pink) !important; text-shadow: none; }

strong, b{ color: var(--l-text) !important; font-weight: 700; }

/* Container width */
.container, .row{ max-width: 1280px !important; }
.row-large{ max-width: 1340px !important; }

/* ============ HEADER (sticky glass white) ============ */
#masthead, #header .header-main{
    background: rgba(255,255,255,0.75) !important;
    background-color: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1px solid var(--l-border) !important;
    box-shadow: 0 4px 20px rgba(13,16,35,0.04) !important;
    transition: background 0.3s var(--ease);
}

/* ── HEADER LAYOUT FIX (3-column balanced) ── */
#header .header-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 0 24px !important;
}
#header .header-inner > .flex-col{
    display: flex !important;
    align-items: center !important;
}
#header .header-inner > #logo{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 8px;
}
#header #logo img{
    max-height: 56px !important;
    width: auto !important;
    object-fit: contain;
}
.stuck #header #logo img{ max-height: 44px !important; }

/* The empty left nav column → don't let it grow */
#header .header-inner > .flex-col.flex-left.flex-grow,
#header .header-inner > .flex-col.flex-left{
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    justify-content: flex-start;
    min-width: 0 !important;
}
/* Right column with login/register/telegram */
#header .header-inner > .flex-col.flex-right{
    flex: 0 0 auto !important;
    justify-content: flex-end;
    gap: 8px;
}
#header .header-inner > .flex-col.flex-right .header-nav{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
#header .header-inner > .flex-col.flex-right .header-nav > li{
    display: flex !important;
    align-items: center !important;
}

/* Mobile menu icon column on small screens */
#header .header-inner > .flex-col.show-for-medium{
    flex: 0 0 auto !important;
}

/* Bottom nav row (categories) — clean center */
#wide-nav .flex-row{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
}
#wide-nav .flex-row > .flex-col.flex-center{
    flex: 1 1 auto !important;
    justify-content: center !important;
}
#wide-nav .header-bottom-nav{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
/* Hide duplicated mobile-only buttons in #wide-nav on desktop */
#wide-nav .flex-col.show-for-medium{ display: none !important; }
@media (max-width: 849px){
    #wide-nav .flex-col.show-for-medium{ display: flex !important; }
    #wide-nav .flex-col.hide-for-medium{ display: none !important; }
}

/* Boxed body should not crop the header */
body.boxed #header,
body.boxed .header-wrapper,
body.boxed #masthead,
body.boxed #wide-nav{ max-width: none !important; }

.stuck #masthead{
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 6px 24px rgba(13,16,35,0.08) !important;
}

.header-bottom, #wide-nav{
    background: rgba(255,255,255,0.9) !important;
    background-color: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-top: 1px solid var(--l-border) !important;
    border-bottom: 1px solid var(--l-border) !important;
    box-shadow: none !important;
    min-height: 50px !important;
}
/* Override Flatsome inline custom-css forcibly */
.header-main{ height: auto !important; min-height: 70px !important; }
.stuck .header-main{ height: auto !important; min-height: 60px !important; }
.header.show-on-scroll{ height: auto !important; }

.header-nav > li > a,
.header-bottom-nav > li > a,
.nav-top-link{
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--l-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--r-pill) !important;
    transition: all .3s var(--ease);
    position: relative;
}
.header-bottom-nav > li > a{ color: var(--l-text) !important; font-size: 14px !important; }

.header-nav > li > a:hover,
.header-bottom-nav > li > a:hover,
.header-nav > li.active > a,
.header-bottom-nav > li.active > a{
    background: rgba(124,58,237,0.08) !important;
    color: var(--c-purple) !important;
}
.header-nav > li > a::after, .header-bottom-nav > li > a::after{ display: none !important; }

/* Dropdown */
.nav-dropdown, .sub-menu.nav-dropdown{
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-xl) !important;
    padding: 8px !important;
}
.nav-dropdown li a{
    color: var(--l-text-soft) !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    transition: all .25s var(--ease);
}
.nav-dropdown li a:hover{
    background: rgba(124,58,237,0.08) !important;
    color: var(--c-purple) !important;
    transform: translateX(2px);
}

i.icon-menu, .icon-menu{ color: var(--l-text) !important; }

/* Logo crisp */
#logo a, #logo img{ filter: none !important; }

/* ============ BUTTONS ============ */
.button, button.button, a.button, input.button{
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
    padding: 10px 22px !important;
    position: relative;
    overflow: hidden;
    transition: all .35s var(--ease) !important;
    color: #fff !important;
    box-shadow: var(--sh-md);
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
}

.button::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
    pointer-events: none;
}
.button:hover::after{ transform: translateX(120%); }

/* Login (alert) — gradient purple/pink */
.button.alert, a.button.alert,
li.html.header-button-1 a{
    background: var(--g-aurora) !important;
    background-size: 200% 200% !important;
    background-image: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #06d6f7 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--sh-glow-purple) !important;
    animation: auroraShift 6s ease infinite;
}
.button.alert:hover, a.button.alert:hover,
li.html.header-button-1 a:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -8px rgba(124,58,237,0.55), 0 0 0 1px rgba(124,58,237,0.25) !important;
}

/* Register (success) — solid dark + neon ring */
.button.success, a.button.success,
.button.is-gloss, a.button.is-gloss,
li.html.header-button-2 a{
    background: var(--d-bg) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--c-cyan) !important;
    box-shadow: 0 8px 24px -8px rgba(6,214,247,0.55), 0 0 0 1px rgba(6,214,247,0.3), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    animation: none !important;
}
.button.success:hover, a.button.success:hover,
li.html.header-button-2 a:hover{
    transform: translateY(-2px);
    background: var(--g-mint) !important;
    border-color: transparent !important;
    color: var(--d-bg) !important;
    box-shadow: 0 12px 32px -8px rgba(6,214,247,0.6) !important;
}

/* Telegram */
li.html.header-button-3 a{
    background: linear-gradient(135deg, #0088cc, #00aced) !important;
    color: #fff !important;
    box-shadow: var(--sh-glow-cyan) !important;
    animation: none !important;
}
li.html.header-button-3 a:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -8px rgba(0,172,237,0.6) !important;
}

/* Header buttons sizing reset */
li.html.header-button-1 a,
li.html.header-button-2 a,
li.html.header-button-3 a{
    background-image: var(--g-aurora);
    animation: auroraShift 6s ease infinite;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
}
li.html.header-button-2 a{
    background-image: none !important;
    background: var(--d-bg) !important;
    border: 1px solid var(--c-cyan) !important;
    animation: none !important;
}
li.html.header-button-3 a{
    background-image: linear-gradient(135deg, #0088cc, #00aced) !important;
    animation: none !important;
}

.button.primary, .btn-primary, a.button.primary{
    background: var(--g-aurora) !important;
    background-size: 200% 200% !important;
    color: #fff !important;
    box-shadow: var(--sh-glow-purple) !important;
}

.header-button{ margin: 0 4px; }

/* ============ HERO BANNER ============ */
#image_390656735{ position: relative; overflow: hidden; border-radius: 0 0 var(--r-2xl) var(--r-2xl); }
#image_390656735 .img-inner{ background: var(--l-bg-2) !important; position: relative; }
#image_390656735 .img-inner::before{
    content:'';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(124,58,237,0.25) 0%, transparent 60%),
        radial-gradient(40% 50% at 80% 70%, rgba(6,214,247,0.22) 0%, transparent 60%),
        radial-gradient(35% 40% at 50% 100%, rgba(236,72,153,0.20) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}
#image_390656735 img{
    transition: transform 1.2s var(--ease);
    filter: contrast(1.04) saturate(1.1);
}
#image_390656735:hover img{ transform: scale(1.02); }

/* ============ CARDS / BOXES ============ */
.box, .box-text{ transition: all .35s var(--ease); }

.box-text, .box-text.text-left{
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    border-radius: var(--r-md) !important;
    padding: 18px !important;
    box-shadow: var(--sh-sm) !important;
}
.box-text:hover, .box-text.text-left:hover{
    border-color: var(--l-border-strong) !important;
    box-shadow: var(--sh-lg) !important;
    transform: translateY(-3px);
}

.box-image{ border-radius: var(--r-md); overflow: hidden; }
.box-image img{ transition: transform .7s var(--ease), filter .5s; }
.post-item:hover .box-image img,
.box:hover .box-image img{ transform: scale(1.06); filter: saturate(1.1); }

/* ============ GAME ICON GRID (section_2046780356) ============ */
#section_2046780356{ padding: 40px 0 50px !important; }

#row-1196900388{ gap: 16px; }

#section_2046780356 .col,
#row-1196900388 .col{ perspective: 1000px; }

#section_2046780356 .img-inner,
#row-1196900388 .img-inner{
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    box-shadow: var(--sh-md);
    padding: 18px;
    transition: all .45s var(--ease);
    position: relative;
}
#section_2046780356 .img-inner::before{
    content:'';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(6,214,247,0.08));
    opacity: 0;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}
#section_2046780356 .img-inner:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-lg), 0 0 0 1px rgba(124,58,237,0.25);
    border-color: rgba(124,58,237,0.25);
}
#section_2046780356 .img-inner:hover::before{ opacity: 1; }
#section_2046780356 img{
    transition: transform .6s var(--ease), filter .6s var(--ease);
    filter: drop-shadow(0 6px 16px rgba(13,16,35,0.12));
}
#section_2046780356 .img-inner:hover img{
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 12px 28px rgba(124,58,237,0.35));
}

/* ============ CONTENT BLOCKS ============ */
section.section, .section{ background: transparent !important; }
.section-bg, .bg.section-bg{ background: transparent !important; background-image: none !important; }

.content{
    padding: 28px !important;
    margin: 24px 0 !important;
    border-radius: var(--r-lg) !important;
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    box-shadow: var(--sh-md) !important;
    color: var(--l-text-soft) !important;
}
.content p, .content li, .content span, .content td{ color: var(--l-text-soft) !important; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{ color: var(--l-text) !important; }
.content::before{ display: none !important; }

.taxonomy-description{
    border-radius: var(--r-lg) !important;
    background: var(--l-surface) !important;
    color: var(--l-text-soft) !important;
    border: 1px solid var(--l-border) !important;
    box-shadow: var(--sh-md) !important;
    padding: 24px !important;
}

/* ============ TABLES ============ */
table{
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 24px 0 !important;
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
    box-shadow: var(--sh-sm) !important;
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
}
table tr, table tr td, table tr th{ color: var(--l-text-soft) !important; border: none !important; background: none !important; }
table tbody tr:first-child td{
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(6,214,247,0.06)) !important;
    color: var(--l-text) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--l-border) !important;
    text-shadow: none !important;
}
table tbody tr:first-child td b, table tbody tr:first-child td strong{
    color: var(--l-text) !important; -webkit-text-fill-color: var(--l-text) !important; background: none !important;
}
table tbody tr:not(:first-child) td{
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--l-border) !important;
    background: transparent !important;
    color: var(--l-text-soft) !important;
    transition: background .3s var(--ease);
    font-size: 14px;
}
table tbody tr:not(:first-child):nth-child(even) td{ background: rgba(13,16,35,0.015) !important; }
table tbody tr:not(:first-child):hover td{ background: rgba(124,58,237,0.05) !important; color: var(--l-text) !important; }
table tbody tr:last-child td{ border-bottom: none !important; }
table td a{ color: var(--c-purple) !important; font-weight: 600; }
table td a:hover{ color: var(--c-pink) !important; }
table td strong, table td b{ color: var(--l-text) !important; -webkit-text-fill-color: var(--l-text) !important; background: none !important; }

/* ============ LISTS ============ */
.entry-content ul, .page-content ul, .post-content ul, .row ul{
    list-style: none !important;
    padding-left: 0 !important;
    margin: 18px 0 !important;
}
.entry-content ul li, .page-content ul li, .post-content ul li, .row ul li{
    position: relative;
    padding: 10px 14px 10px 38px !important;
    margin-bottom: 6px !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: var(--r-sm) !important;
    color: var(--l-text-soft) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    transition: all .3s var(--ease);
    box-shadow: none !important;
}
.entry-content ul li:hover, .page-content ul li:hover, .row ul li:hover{
    background: rgba(124,58,237,0.05) !important;
    transform: translateX(3px);
    border-left: none !important;
}
.entry-content ul li::before, .page-content ul li::before, .post-content ul li::before, .row ul li::before{
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--g-aurora);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
    filter: none;
    color: transparent;
}
.entry-content ul li:nth-child(odd)::before, .row ul li:nth-child(odd)::before{ background: var(--g-mint); box-shadow: 0 0 0 4px rgba(6,214,247,0.12); }
.entry-content ul li:nth-child(3n)::before, .row ul li:nth-child(3n)::before{ background: var(--g-sunset); box-shadow: 0 0 0 4px rgba(236,72,153,0.12); }
.entry-content ul li:nth-child(4n)::before, .row ul li:nth-child(4n)::before{ background: var(--g-purple); box-shadow: 0 0 0 4px rgba(168,85,247,0.12); }

.entry-content ul li b, .entry-content ul li strong,
.page-content ul li b, .page-content ul li strong,
.row ul li strong, .row ul li b{
    color: var(--l-text) !important;
    -webkit-text-fill-color: var(--l-text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    filter: none !important;
}

.entry-content ol, .page-content ol, .post-content ol, .row ol{
    counter-reset: ng-counter;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 18px 0 !important;
}
.entry-content ol li, .page-content ol li, .row ol li{
    counter-increment: ng-counter;
    position: relative;
    padding: 12px 16px 12px 56px !important;
    margin-bottom: 8px !important;
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    border-left: none !important;
    border-radius: var(--r-sm) !important;
    color: var(--l-text-soft) !important;
    box-shadow: var(--sh-sm);
    transition: all .3s var(--ease);
}
.entry-content ol li:hover, .row ol li:hover{
    border-color: var(--l-border-strong) !important;
    box-shadow: var(--sh-md);
    transform: translateX(3px);
}
.entry-content ol li::before, .page-content ol li::before, .row ol li::before{
    content: counter(ng-counter, decimal-leading-zero);
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    background: var(--g-aurora);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px -4px rgba(124,58,237,0.4);
}

/* Reset nav lists */
.nav ul, .header-nav ul, .sub-menu, .nav-dropdown, .menu ul{
    list-style: none !important; padding-left: 0 !important; margin: 0 !important;
}
.nav ul li, .header-nav ul li, .sub-menu li, .nav-dropdown li, .menu li, .menu-item{
    background: none !important; border: none !important; border-left: none !important;
    border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important;
}
.nav ul li::before, .header-nav ul li::before, .sub-menu li::before, .nav-dropdown li::before, .menu li::before, .menu-item::before{
    content: none !important;
}

/* ============ BLOCKQUOTES ============ */
blockquote{
    border-left: 4px solid var(--c-purple) !important;
    background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(6,214,247,0.05)) !important;
    border-radius: var(--r-md);
    padding: 18px 24px !important;
    color: var(--l-text-soft) !important;
    box-shadow: none;
    position: relative;
    font-style: italic;
}

/* ============ FOOTER ============ */
.footer-1, .footer-2, .footer-wrapper, footer#footer{
    background: linear-gradient(180deg, #0a0b16 0%, #050610 100%) !important;
    color: var(--d-text-soft) !important;
    border-top: none !important;
    position: relative;
    overflow: hidden;
}
footer#footer::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 50% at 10% 0%, rgba(124,58,237,0.18) 0%, transparent 60%),
        radial-gradient(40% 50% at 90% 100%, rgba(6,214,247,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.footer-1{ padding: 60px 0 40px !important; position: relative; z-index: 1; }
.footer-2, .absolute-footer{
    background: #050610 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--d-text-muted) !important;
    padding: 18px 0 !important;
    font-size: 13px;
    position: relative; z-index: 1;
}
.absolute-footer a{ color: var(--c-cyan) !important; }
.footer-1 .widget-title, .footer-1 h3, .footer-1 h4, .footer-1 .ft-title{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
.footer-1 a{ color: var(--d-text-soft) !important; transition: color .25s var(--ease); }
.footer-1 a:hover{ color: var(--c-cyan) !important; }
.footer-1 ul li{
    background: none !important; border: none !important;
    padding: 5px 0 !important; box-shadow: none !important;
    color: var(--d-text-soft) !important;
}
.footer-1 ul li::before{
    content: '' !important;
    width: 4px !important; height: 4px !important;
    border-radius: 50% !important;
    background: var(--c-purple) !important;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.18) !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.footer-1 ul li{ padding-left: 16px !important; }
.footer-1 p, .footer-1 span, .footer-1 div{ color: var(--d-text-soft) !important; }
p.ft-title{ color: #fff !important; font-size: 15px; }

/* ============ SIDEBAR / WIDGETS ============ */
.is-divider, hr{ border-color: var(--l-border) !important; background: var(--l-border) !important; }
ul.nav.nav-sidebar.nav-vertical.nav-uppercase li a{
    color: var(--l-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all .3s var(--ease);
    padding: 8px 12px !important;
    border-radius: var(--r-sm);
}
ul.nav.nav-sidebar.nav-vertical.nav-uppercase li a:hover{
    color: var(--c-purple) !important;
    background: rgba(124,58,237,0.06) !important;
}

/* ============ MOBILE NAV / OFF-CANVAS ============ */
.mfp-content{
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
}
#main-menu, .mobile-sidebar, .sidebar-menu{
    background: var(--l-surface) !important;
    color: var(--l-text) !important;
}
#main-menu a, .mobile-sidebar a{ color: var(--l-text) !important; }
#main-menu .nav-vertical-fly-out > li + li{ border-top-color: var(--l-border) !important; }

/* ============ FORMS ============ */
input, textarea, select{
    background: var(--l-surface) !important;
    border: 1px solid var(--l-border) !important;
    color: var(--l-text) !important;
    border-radius: var(--r-md) !important;
    padding: 12px 16px !important;
    transition: all .25s var(--ease);
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
}
input:focus, textarea:focus, select:focus{
    border-color: var(--c-purple) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12) !important;
    outline: none !important;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--l-bg); }
::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, var(--c-purple), var(--c-pink));
    border-radius: 6px;
    border: 2px solid var(--l-bg);
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, var(--c-purple-2), var(--c-magenta));
}

/* ============ ANIMATIONS ============ */
@keyframes auroraShift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes pulseRing{
    0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70%{ box-shadow: 0 0 0 14px rgba(239,68,68,0); }
    100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@keyframes blink{ 0%,100%{ opacity: 1; } 50%{ opacity: .6; } }
@keyframes shimmer{
    0%{ background-position: -1000px 0; }
    100%{ background-position: 1000px 0; }
}

/* ============ HIDE / TWEAKS ============ */
.page-title.is-large.uppercase{ display: none !important; }

/* ============ CASINO COMPONENT LIBRARY (NG = Next-Gen) ============ */

/* Section utility */
.ng-section{ padding: 80px 0; position: relative; }
.ng-section.dark{
    background: linear-gradient(180deg, #0a0b16 0%, #11132a 100%);
    color: var(--d-text);
    overflow: hidden;
}
.ng-section.dark::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 60% at 20% 0%, rgba(124,58,237,0.18) 0%, transparent 60%),
        radial-gradient(50% 60% at 80% 100%, rgba(6,214,247,0.15) 0%, transparent 60%),
        radial-gradient(40% 50% at 50% 50%, rgba(236,72,153,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.ng-section.dark > *{ position: relative; z-index: 1; }
.ng-section.light{ background: transparent; }
.ng-section.light-2{ background: linear-gradient(180deg, #ffffff 0%, var(--l-bg) 100%); }

.ng-container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Section eyebrow + heading */
.ng-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(124,58,237,0.08);
    color: var(--c-purple);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(124,58,237,0.15);
    margin-bottom: 20px;
}
.ng-section.dark .ng-eyebrow{
    background: rgba(255,255,255,0.05);
    border-color: rgba(124,58,237,0.4);
    color: #c4a8ff;
}
.ng-eyebrow .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.ng-h1{
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0 0 20px;
    color: var(--l-text);
}
.ng-section.dark .ng-h1{ color: #fff; }
.ng-h1 .grad{
    background: var(--g-aurora);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: auroraShift 6s ease infinite;
}
.ng-h2{
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
    color: var(--l-text);
}
.ng-section.dark .ng-h2{ color: #fff; }
.ng-sub{
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--l-text-soft);
    max-width: 640px;
    line-height: 1.7;
}
.ng-section.dark .ng-sub{ color: var(--d-text-soft); }
.ng-section-head{ text-align: center; margin-bottom: 48px; }
.ng-section-head .ng-sub{ margin: 0 auto; }

/* Buttons (next-gen) */
.ng-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 14px 26px;
    border-radius: var(--r-pill);
    border: 0;
    cursor: pointer;
    text-decoration: none !important;
    transition: all .35s var(--ease);
    position: relative;
    overflow: hidden;
}
.ng-btn-primary{
    background: var(--g-aurora);
    background-size: 200% 200%;
    color: #fff !important;
    box-shadow: var(--sh-glow-purple);
    animation: auroraShift 6s ease infinite;
}
.ng-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(124,58,237,0.6); color: #fff !important; }
.ng-btn-ghost{
    background: rgba(255,255,255,0.06);
    color: var(--l-text) !important;
    border: 1px solid var(--l-border-strong);
    backdrop-filter: blur(12px);
}
.ng-section.dark .ng-btn-ghost{
    background: rgba(255,255,255,0.05);
    color: #fff !important;
    border-color: rgba(255,255,255,0.18);
}
.ng-btn-ghost:hover{ background: rgba(124,58,237,0.10); border-color: var(--c-purple); color: var(--c-purple) !important; }
.ng-section.dark .ng-btn-ghost:hover{ color: #c4a8ff !important; }
.ng-btn-light{
    background: #fff;
    color: var(--d-bg) !important;
    box-shadow: var(--sh-md);
}
.ng-btn-light:hover{ transform: translateY(-2px); box-shadow: var(--sh-lg); }

/* HERO */
.ng-hero{
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}
.ng-hero::before, .ng-hero::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.ng-hero::before{
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(124,58,237,0.45) 0%, transparent 70%);
    top: -120px; left: -120px;
    animation: float 12s ease-in-out infinite;
}
.ng-hero::after{
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(6,214,247,0.35) 0%, transparent 70%);
    bottom: -180px; right: -150px;
    animation: float 14s ease-in-out infinite reverse;
}
.ng-hero-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    position: relative; z-index: 1;
}
.ng-hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ng-hero-trust{
    display: flex; flex-wrap: wrap; gap: 22px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--l-border);
}
.ng-trust-item{
    display: flex; flex-direction: column; gap: 2px;
}
.ng-trust-num{ font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: var(--l-text); letter-spacing: -0.02em; }
.ng-trust-lbl{ font-size: 12px; color: var(--l-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.ng-hero-visual{
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
.ng-hero-card{
    position: absolute;
    background: var(--g-glass-light);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    padding: 18px 22px;
    display: flex; align-items: center; gap: 14px;
    min-width: 220px;
}
.ng-hero-card .icn{
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
}
.ng-hero-card .ttl{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--l-text); margin: 0; }
.ng-hero-card .val{ font-size: 20px; font-weight: 800; color: var(--l-text); font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.ng-hero-card .delta{ font-size: 12px; color: var(--c-green); font-weight: 600; }
.ng-hero-card.c1{ top: 8%; left: 0; animation: float 8s ease-in-out infinite; }
.ng-hero-card.c2{ top: 38%; right: 0; animation: float 10s ease-in-out infinite reverse; }
.ng-hero-card.c3{ bottom: 8%; left: 14%; animation: float 9s ease-in-out infinite; }

.ng-hero-orb{
    position: absolute;
    width: 60%; aspect-ratio: 1;
    border-radius: 50%;
    background:
        conic-gradient(from 180deg at 50% 50%, #7c3aed 0deg, #ec4899 90deg, #06d6f7 180deg, #22c55e 270deg, #7c3aed 360deg);
    filter: blur(40px);
    opacity: 0.4;
    animation: float 15s ease-in-out infinite;
    z-index: -1;
}

/* BENTO GAME GRID (dark zone) */
.ng-bento{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
}
.ng-bento .b-card{
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--d-surface) 0%, var(--d-surface-2) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all .4s var(--ease);
    isolation: isolate;
}
.ng-bento .b-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g-aurora);
    opacity: 0;
    transition: opacity .5s var(--ease);
    z-index: 0;
    mix-blend-mode: overlay;
}
.ng-bento .b-card:hover{
    transform: translateY(-6px);
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 24px 60px -16px rgba(124,58,237,0.45);
}
.ng-bento .b-card:hover::before{ opacity: 0.45; }

.ng-bento .b-card.span-2{ grid-column: span 2; grid-row: span 2; }
.ng-bento .b-card.span-h{ grid-row: span 2; }
.ng-bento .b-card.span-w{ grid-column: span 2; }

.ng-bento .b-inner{
    position: relative; z-index: 2;
    height: 100%;
    padding: 22px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.ng-bento .b-tag{
    align-self: flex-start;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.08);
    color: #fff;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
}
.ng-bento .b-tag.hot{ background: linear-gradient(135deg, #ef4444, #f59e0b); border-color: transparent; }
.ng-bento .b-tag.new{ background: linear-gradient(135deg, #22c55e, #06d6f7); border-color: transparent; }
.ng-bento .b-tag.live{ background: linear-gradient(135deg, #ec4899, #d946ef); border-color: transparent; }
.ng-bento .b-tag.live::before{
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; margin-right: 6px; vertical-align: middle;
    animation: blink 1.5s infinite;
}
.ng-bento .b-title{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.ng-bento .b-card.span-2 .b-title{ font-size: 32px; }
.ng-bento .b-desc{
    font-size: 13px;
    color: var(--d-text-soft);
    margin: 0 0 14px;
    line-height: 1.5;
}
.ng-bento .b-cta{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 13px;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    transition: all .3s var(--ease);
    width: fit-content;
}
.ng-bento .b-cta:hover{ background: #fff; color: var(--d-bg) !important; border-color: #fff; }

.ng-bento .b-art{
    position: absolute;
    right: -20px; bottom: -20px;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--g-aurora);
    filter: blur(30px);
    opacity: 0.55;
    transition: all .5s var(--ease);
    z-index: 0;
}
.ng-bento .b-card:hover .b-art{ opacity: 0.85; transform: scale(1.15); }
.ng-bento .b-card.acc-pink .b-art{ background: var(--g-sunset); }
.ng-bento .b-card.acc-cyan .b-art{ background: var(--g-mint); }
.ng-bento .b-card.acc-gold .b-art{ background: var(--g-gold); }
.ng-bento .b-card.acc-purple .b-art{ background: var(--g-purple); }

/* STATS DASHBOARD */
.ng-stats{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.ng-stat-card{
    position: relative;
    padding: 24px;
    border-radius: var(--r-lg);
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: all .35s var(--ease);
}
.ng-stat-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--l-border-strong); }
.ng-stat-card .s-icn{
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: rgba(124,58,237,0.08);
    color: var(--c-purple);
    font-size: 20px;
    margin-bottom: 14px;
}
.ng-stat-card.acc-pink .s-icn{ background: rgba(236,72,153,0.08); color: var(--c-pink); }
.ng-stat-card.acc-cyan .s-icn{ background: rgba(6,214,247,0.08); color: var(--c-cyan); }
.ng-stat-card.acc-gold .s-icn{ background: rgba(246,198,72,0.12); color: #d97706; }
.ng-stat-num{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px; font-weight: 800;
    color: var(--l-text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}
.ng-stat-lbl{ font-size: 13px; color: var(--l-text-muted); font-weight: 500; }
.ng-stat-card .s-trend{
    position: absolute; top: 24px; right: 24px;
    font-size: 12px; font-weight: 600; color: var(--c-green);
    background: rgba(34,197,94,0.1);
    padding: 3px 8px; border-radius: var(--r-pill);
}

/* FEATURES GRID (Why us) */
.ng-feats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.ng-feat{
    padding: 28px;
    border-radius: var(--r-lg);
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    box-shadow: var(--sh-sm);
    transition: all .4s var(--ease);
    position: relative;
    overflow: hidden;
}
.ng-feat::after{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--g-aurora);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}
.ng-feat:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--l-border-strong);
}
.ng-feat:hover::after{ transform: scaleX(1); }
.ng-feat .f-icn{
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--g-aurora);
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
    box-shadow: var(--sh-glow-purple);
}
.ng-feat.acc-cyan .f-icn{ background: var(--g-mint); box-shadow: var(--sh-glow-cyan); }
.ng-feat.acc-pink .f-icn{ background: var(--g-sunset); box-shadow: var(--sh-glow-pink); }
.ng-feat.acc-gold .f-icn{ background: var(--g-gold); box-shadow: 0 10px 40px -10px rgba(245,158,11,.55); }
.ng-feat .f-ttl{ font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--l-text); }
.ng-feat .f-txt{ font-size: 14px; color: var(--l-text-soft); line-height: 1.6; margin: 0; }

/* JACKPOT TICKER (dark) */
.ng-jackpot{
    background: linear-gradient(180deg, #11132a 0%, #0a0b16 100%);
    color: #fff;
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}
.ng-jackpot::before{
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 50% 50%, rgba(246,198,72,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.ng-jackpot-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
    position: relative; z-index: 1;
}
.ng-jackpot-num{
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: none;
    filter: drop-shadow(0 8px 24px rgba(246,198,72,0.3));
}
.ng-jackpot-tick{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px; color: var(--c-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.ng-jackpot-tick .dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-red);
    animation: pulseRing 1.6s infinite;
}
.ng-jackpot-prev{ display: flex; flex-direction: column; gap: 12px; }
.ng-prev-row{
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: 14px 18px;
    backdrop-filter: blur(10px);
}
.ng-prev-row .l{ display: flex; align-items: center; gap: 12px; }
.ng-prev-row .av{
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--g-aurora);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px;
    font-family: 'Space Grotesk', sans-serif;
}
.ng-prev-row .nm{ font-weight: 600; font-size: 14px; color: #fff; }
.ng-prev-row .gm{ font-size: 12px; color: var(--d-text-muted); }
.ng-prev-row .amt{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800; font-size: 18px;
    background: var(--g-mint);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PROMO STRIP */
.ng-promo{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ng-promo-card{
    position: relative;
    padding: 28px;
    border-radius: var(--r-lg);
    overflow: hidden;
    color: #fff;
    min-height: 200px;
    display: flex; flex-direction: column; justify-content: space-between;
    isolation: isolate;
    transition: transform .4s var(--ease);
}
.ng-promo-card::before{
    content: '';
    position: absolute; inset: 0;
    background: var(--g-aurora);
    z-index: -1;
}
.ng-promo-card.acc-pink::before{ background: var(--g-sunset); }
.ng-promo-card.acc-cyan::before{ background: var(--g-mint); }
.ng-promo-card.acc-gold::before{ background: var(--g-gold); }
.ng-promo-card::after{
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    top: -60px; right: -60px;
    z-index: -1;
}
.ng-promo-card:hover{ transform: translateY(-4px); }
.ng-promo-card .p-tag{
    display: inline-block;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.18);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    align-self: flex-start;
}
.ng-promo-card .p-ttl{ font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 8px; line-height: 1.15; color: #fff !important; }
.ng-promo-card .p-txt{ font-size: 13px; opacity: .9; margin: 0 0 14px; color: #fff; }
.ng-promo-card .p-cta{
    align-self: flex-start;
    background: #fff;
    color: var(--l-text) !important;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: 13px;
    transition: transform .3s var(--ease);
}
.ng-promo-card .p-cta:hover{ transform: scale(1.05); }

/* FAQ */
.ng-faq{ display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.ng-faq-item{
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--r-md);
    padding: 18px 22px;
    cursor: pointer;
    transition: all .3s var(--ease);
}
.ng-faq-item:hover{ border-color: var(--l-border-strong); box-shadow: var(--sh-md); }
.ng-faq-item.open{ border-color: var(--c-purple); box-shadow: var(--sh-glow-purple); }
.ng-faq-q{
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; font-size: 16px;
    color: var(--l-text);
    margin: 0;
}
.ng-faq-q::after{
    content: '+';
    font-size: 24px; font-weight: 300;
    transition: transform .3s var(--ease);
    color: var(--c-purple);
}
.ng-faq-item.open .ng-faq-q::after{ content: '−'; transform: rotate(180deg); }
.ng-faq-a{
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease), padding .3s var(--ease);
    color: var(--l-text-soft); font-size: 14px; line-height: 1.7;
}
.ng-faq-item.open .ng-faq-a{ max-height: 400px; padding-top: 12px; }

/* CTA BANNER */
.ng-cta{
    position: relative;
    padding: 64px 48px;
    border-radius: var(--r-2xl);
    background: linear-gradient(135deg, #0a0b16 0%, #11132a 100%);
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.ng-cta::before, .ng-cta::after{
    content: '';
    position: absolute;
    border-radius: 50%; filter: blur(80px);
}
.ng-cta::before{ width: 360px; height: 360px; background: rgba(124,58,237,0.5); top: -120px; left: -100px; }
.ng-cta::after{ width: 360px; height: 360px; background: rgba(6,214,247,0.4); bottom: -120px; right: -100px; }
.ng-cta > *{ position: relative; z-index: 1; }
.ng-cta h2{ color: #fff !important; margin-bottom: 12px; }
.ng-cta p{ color: var(--d-text-soft); max-width: 560px; margin: 0 auto 28px; }

/* MARQUEE TICKER */
.ng-marquee{
    overflow: hidden;
    background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(6,214,247,0.08));
    border-top: 1px solid var(--l-border);
    border-bottom: 1px solid var(--l-border);
    padding: 14px 0;
}
.ng-marquee-track{
    display: flex; gap: 48px;
    animation: marqueeScroll 35s linear infinite;
    white-space: nowrap;
}
.ng-marquee-item{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; font-size: 14px;
    color: var(--l-text-soft);
}
.ng-marquee-item .nm{ color: var(--l-text); font-weight: 700; }
.ng-marquee-item .amt{
    background: var(--g-mint);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.ng-marquee-item .gm{ color: var(--l-text-muted); font-size: 12px; }
@keyframes marqueeScroll{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
    .header-nav > li > a, .header-bottom-nav > li > a{ font-size: 13px !important; padding: 6px 10px !important; }
    .ng-hero-grid{ grid-template-columns: 1fr; gap: 40px; }
    .ng-hero-visual{ aspect-ratio: 16/10; max-width: 560px; margin: 0 auto; width: 100%; }
    .ng-bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .ng-bento .b-card.span-2{ grid-column: span 2; grid-row: span 2; }
    .ng-bento .b-card.span-w{ grid-column: span 2; grid-row: span 1; }
    .ng-bento .b-card.span-h{ grid-column: span 1; grid-row: span 2; }
    .ng-stats{ grid-template-columns: repeat(2, 1fr); }
    .ng-feats, .ng-promo{ grid-template-columns: repeat(2, 1fr); }
    .ng-jackpot-grid{ grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px){
    .ng-section{ padding: 56px 0; }
    .ng-hero{ padding: 56px 0 70px; }
    .ng-hero-actions{ flex-direction: column; align-items: stretch; }
    .ng-btn{ justify-content: center; }
    .ng-bento{ grid-template-columns: 1fr; grid-auto-rows: 160px; }
    .ng-bento .b-card.span-2, .ng-bento .b-card.span-w, .ng-bento .b-card.span-h{ grid-column: span 1; grid-row: span 1; }
    .ng-bento .b-card.span-2 .b-title{ font-size: 24px; }
    .ng-stats{ grid-template-columns: 1fr 1fr; gap: 12px; }
    .ng-stat-card{ padding: 16px; }
    .ng-stat-num{ font-size: 24px; }
    .ng-feats, .ng-promo{ grid-template-columns: 1fr; }
    .ng-cta{ padding: 40px 24px; border-radius: var(--r-lg); }
    .ng-h1{ font-size: 2.2rem; }
    .ng-section-head{ margin-bottom: 32px; }
    li.html.header-button-1 a, li.html.header-button-2 a, li.html.header-button-3 a{
        padding: 8px 14px !important; font-size: 12px !important;
    }
    table{ font-size: 13px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table td{ min-width: 100px; padding: 10px 12px !important; }
}

/* ============ FIREWORKS BACKGROUND ============ */
/* Canvas sits OVER everything visually but is non-interactive (pointer-events:none).
   Mix-blend-mode: screen makes it pop on dark zones and stay subtle on light zones. */
#ng-fireworks{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    mix-blend-mode: screen;
}
#wrapper{ position: relative; z-index: 2; }
#header{ z-index: 100 !important; }
/* Header & footer sit behind fireworks visually but interactions still work because canvas is pointer-events:none */

/* Floating winner toast (cluster of bursts uses) */
.ng-win-toast{
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 50;
    background: linear-gradient(135deg, rgba(20,22,50,0.92), rgba(10,11,22,0.95));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 12px 16px;
    color: #fff;
    box-shadow: 0 16px 40px -12px rgba(124,58,237,0.5), 0 0 0 1px rgba(124,58,237,0.18);
    display: flex; align-items: center; gap: 12px;
    min-width: 280px; max-width: 360px;
    transform: translateY(120%) scale(.96);
    opacity: 0;
    transition: transform .5s var(--ease-spring), opacity .35s var(--ease);
    font-family: 'Inter', sans-serif;
}
.ng-win-toast.show{ transform: translateY(0) scale(1); opacity: 1; }
.ng-win-toast .av{
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--g-aurora);
    display: grid; place-items: center;
    font-weight: 800; color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    flex-shrink: 0;
}
.ng-win-toast .tx{ flex: 1; min-width: 0; }
.ng-win-toast .tx .nm{ font-size: 13px; color: var(--d-text-soft); margin-bottom: 2px; }
.ng-win-toast .tx .nm b{ color: #fff; font-weight: 700; }
.ng-win-toast .tx .am{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800; font-size: 18px;
    background: var(--g-mint);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
@media (max-width: 640px){
    .ng-win-toast{ left: 12px; right: 12px; min-width: 0; max-width: none; bottom: 12px; }
}

/* ============ GOLD ANIMATIONS (chest, coins, money) ============ */

/* Hero chest stage — replaces the 3 floating glass cards */
.ng-chest-stage{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.95;
    display: grid;
    place-items: center;
    perspective: 1200px;
}
.ng-chest-stage .stage-glow{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 50% 60%, rgba(251,191,36,0.55) 0%, transparent 60%),
        radial-gradient(40% 40% at 50% 60%, rgba(245,158,11,0.4) 0%, transparent 70%);
    filter: blur(20px);
    animation: stageGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes stageGlowPulse{
    0%,100%{ opacity: 0.7; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.08); }
}
.ng-chest-stage .chest{
    position: relative;
    width: 78%;
    max-width: 420px;
    z-index: 2;
    filter: drop-shadow(0 24px 40px rgba(245,158,11,0.45)) drop-shadow(0 8px 16px rgba(0,0,0,0.4));
    animation: chestFloat 4s ease-in-out infinite;
}
@keyframes chestFloat{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    50%{ transform: translateY(-12px) rotate(-1deg); }
}

/* Floating coins around chest */
.ng-chest-stage .fc{
    position: absolute;
    width: 50px; height: 50px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(245,158,11,0.5));
}
.ng-chest-stage .fc.fc1{ top: 8%; left: 8%; animation: floatCoin 3.2s ease-in-out infinite; }
.ng-chest-stage .fc.fc2{ top: 18%; right: 10%; animation: floatCoin 3.6s ease-in-out infinite reverse; }
.ng-chest-stage .fc.fc3{ top: 50%; left: 0%; animation: floatCoin 4s ease-in-out infinite; animation-delay: 0.3s; }
.ng-chest-stage .fc.fc4{ top: 55%; right: 4%; animation: floatCoin 3.4s ease-in-out infinite reverse; animation-delay: 0.6s; }
.ng-chest-stage .fc.fc5{ top: 30%; right: 22%; animation: floatCoin 3.8s ease-in-out infinite; animation-delay: 0.9s; width: 38px; height: 38px; }
.ng-chest-stage .fc.fc6{ top: 38%; left: 18%; animation: floatCoin 4.2s ease-in-out infinite reverse; animation-delay: 0.4s; width: 42px; height: 42px; }
.ng-chest-stage .fc.bill{ width: 70px; height: auto; }
.ng-chest-stage .fc.bill.b1{ top: 12%; right: 30%; animation: floatBill 5s ease-in-out infinite; }
.ng-chest-stage .fc.bill.b2{ top: 60%; left: 28%; animation: floatBill 5.5s ease-in-out infinite reverse; animation-delay: 0.5s; }
@keyframes floatCoin{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    50%{ transform: translateY(-18px) rotate(8deg); }
}
@keyframes floatBill{
    0%,100%{ transform: translate(0,0) rotate(-8deg); }
    50%{ transform: translate(-10px,-22px) rotate(8deg); }
}

/* JACKPOT section: BIG chest centerpiece + coin pile */
.ng-jackpot-stage{
    position: relative;
    width: 100%;
    aspect-ratio: 1.2 / 1;
    display: grid;
    place-items: center;
}
.ng-jackpot-stage .big-chest{
    position: relative;
    width: 90%;
    max-width: 480px;
    filter: drop-shadow(0 30px 50px rgba(245,158,11,0.55)) drop-shadow(0 0 40px rgba(251,191,36,0.4));
    animation: chestFloat 5s ease-in-out infinite;
    z-index: 2;
}
.ng-jackpot-stage .ray{
    position: absolute;
    width: 110%;
    height: 110%;
    background:
        conic-gradient(from 0deg, transparent 0deg, rgba(251,191,36,0.25) 4deg, transparent 8deg,
                       transparent 30deg, rgba(251,191,36,0.18) 34deg, transparent 38deg,
                       transparent 60deg, rgba(245,158,11,0.22) 64deg, transparent 68deg,
                       transparent 90deg, rgba(251,191,36,0.18) 94deg, transparent 98deg,
                       transparent 120deg, rgba(245,158,11,0.22) 124deg, transparent 128deg,
                       transparent 150deg, rgba(251,191,36,0.18) 154deg, transparent 158deg,
                       transparent 180deg, rgba(245,158,11,0.22) 184deg, transparent 188deg,
                       transparent 210deg, rgba(251,191,36,0.18) 214deg, transparent 218deg,
                       transparent 240deg, rgba(245,158,11,0.22) 244deg, transparent 248deg,
                       transparent 270deg, rgba(251,191,36,0.18) 274deg, transparent 278deg,
                       transparent 300deg, rgba(245,158,11,0.22) 304deg, transparent 308deg,
                       transparent 330deg, rgba(251,191,36,0.18) 334deg, transparent 338deg);
    animation: rayRotate 25s linear infinite;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
}
@keyframes rayRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* Coin rain inside jackpot stage */
.ng-coin-rain{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}
.ng-coin-rain .rc{
    position: absolute;
    top: -10%;
    width: 36px; height: 36px;
    animation: rainFall linear infinite;
    filter: drop-shadow(0 6px 10px rgba(245,158,11,0.5));
    will-change: transform;
}
@keyframes rainFall{
    0%{ transform: translateY(-30px) rotate(0deg); opacity: 0; }
    10%{ opacity: 1; }
    90%{ opacity: 1; }
    100%{ transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* Bento card mini animations */
.b-card .b-anim{
    position: absolute;
    right: 12px; bottom: 12px;
    width: 80px; height: 80px;
    z-index: 1;
    pointer-events: none;
    transition: transform .5s var(--ease);
}
.b-card.span-2 .b-anim{
    right: 24px; bottom: 24px;
    width: 140px; height: 140px;
}
.b-card:hover .b-anim{
    transform: scale(1.15) rotate(8deg);
}

/* Page-wide ambient coin rain (very subtle, fixed bg) */
.ng-ambient-rain{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    opacity: 0.45;
}
.ng-ambient-rain .ac{
    position: absolute;
    top: -40px;
    width: 28px; height: 28px;
    animation: rainFall linear infinite;
    filter: drop-shadow(0 4px 8px rgba(245,158,11,0.35));
    will-change: transform;
}

/* Sparkle burst utility */
@keyframes sparkleBurst{
    0%{ transform: scale(0) rotate(0deg); opacity: 1; }
    100%{ transform: scale(1.8) rotate(180deg); opacity: 0; }
}
.ng-sparkle{
    position: absolute;
    width: 18px; height: 18px;
    background: radial-gradient(circle, #fde047 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleBurst 1.2s ease-out forwards;
}

/* Optional: video slot fallback styling */
.ng-video-slot{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #0a0b16);
}
.ng-video-slot video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============ LUCKY88-STYLE LAYOUT (lk-*) ============ */

.lk-shell{
    background: linear-gradient(180deg, #050610 0%, #0a0b16 50%, #050610 100%);
    color: #e8eaff;
    padding: 0;
}
.lk-container{ max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* === HERO: 3 LIVE GAME BOXES === */
.lk-hero{ padding: 24px 0 0; position: relative; z-index: 5; }
.lk-hero-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.lk-live-card{
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #11132a;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lk-live-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(239,68,68,0.5);
}
.lk-live-card img.cover{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.lk-live-card::after{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%),
                linear-gradient(135deg, rgba(239,68,68,0.18) 0%, transparent 60%);
    z-index: 2;
}
.lk-live-card .live-badge{
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 4px 14px rgba(239,68,68,0.45);
}
.lk-live-card .live-badge::before{
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; animation: blink 1.2s infinite;
}
.lk-live-card .game-title{
    position: absolute;
    top: 10px; right: 12px;
    z-index: 3;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 14px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.lk-live-card .jp-num{
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    z-index: 3;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    letter-spacing: -0.01em;
    color: #fde047;
    text-shadow: 0 0 14px rgba(253,224,71,0.6), 0 2px 6px rgba(0,0,0,0.7);
    line-height: 1;
}
.lk-live-card .jp-suffix{
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fbbf24;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* === SUPER JACKPOT BIG === */
.lk-super-jp{
    margin: 30px 0;
    padding: 44px 24px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 50% 50%, rgba(239,68,68,0.4) 0%, transparent 60%),
        linear-gradient(135deg, #2a0610 0%, #5b0a16 50%, #2a0610 100%);
    border: 2px solid rgba(253,224,71,0.4);
    box-shadow: 0 20px 60px -20px rgba(239,68,68,0.5),
                0 0 0 1px rgba(253,224,71,0.18) inset,
                0 0 60px rgba(253,224,71,0.18) inset;
    text-align: center;
}
.lk-super-jp::before{
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(253,224,71,0.15) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(253,224,71,0.15) 0%, transparent 30%);
    pointer-events: none;
}
.lk-super-jp::after{
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background:
        conic-gradient(from 0deg, transparent 0deg, rgba(253,224,71,0.18) 8deg, transparent 16deg,
                       transparent 60deg, rgba(253,224,71,0.18) 68deg, transparent 76deg,
                       transparent 120deg, rgba(253,224,71,0.18) 128deg, transparent 136deg,
                       transparent 180deg, rgba(253,224,71,0.18) 188deg, transparent 196deg,
                       transparent 240deg, rgba(253,224,71,0.18) 248deg, transparent 256deg,
                       transparent 300deg, rgba(253,224,71,0.18) 308deg, transparent 316deg);
    animation: rayRotate 30s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}
.lk-super-jp .inner{ position: relative; z-index: 2; }
.lk-super-jp .label{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #fde047;
    text-shadow: 0 0 16px rgba(253,224,71,0.7);
    margin-bottom: 14px;
}
.lk-super-jp .num{
    font-family: 'Space Grotesk', 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 7vw, 5.2rem);
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(180deg, #fff8c2 0%, #fde047 35%, #f59e0b 70%, #b45309 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(253,224,71,0.4));
    animation: lkJpPulse 1.5s ease-in-out infinite;
}
.lk-super-jp .currency{
    font-size: 0.5em;
    font-weight: 700;
    margin-left: 8px;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes lkJpPulse{
    0%,100%{ transform: scale(1); filter: drop-shadow(0 4px 12px rgba(253,224,71,0.4)); }
    50%{ transform: scale(1.015); filter: drop-shadow(0 6px 20px rgba(253,224,71,0.7)); }
}

/* Mini jackpot trio (gold/silver/minor) */
.lk-jp-trio{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px;
    position: relative; z-index: 2;
}
.lk-jp-trio .item{
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(253,224,71,0.25);
    border-radius: 12px;
    padding: 14px 12px;
    backdrop-filter: blur(6px);
    text-align: center;
}
.lk-jp-trio .item .ic{
    width: 38px; height: 38px;
    object-fit: contain;
    margin: 0 auto 6px;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.lk-jp-trio .item .nm{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fbbf24;
    margin-bottom: 4px;
}
.lk-jp-trio .item .vl{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #fff;
    letter-spacing: -0.01em;
}

/* === GAME CATEGORY GRID (8 boxes) === */
.lk-section-title{
    display: flex; align-items: center;
    margin: 36px 0 16px;
    gap: 12px;
}
.lk-section-title h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    color: #fff !important;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #fff, #fde047);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lk-section-title .bar{
    width: 4px; height: 22px;
    background: linear-gradient(180deg, #fde047, #ef4444);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(253,224,71,0.5);
}
.lk-section-title .more{
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #fbbf24 !important;
    text-decoration: none !important;
}
.lk-section-title .more:hover{ color: #fde047 !important; }

.lk-cat-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.lk-cat-grid.cols-8{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.lk-cat-card{
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1c3a, #0a0b16);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    box-shadow: 0 8px 22px -10px rgba(0,0,0,0.6);
}
.lk-cat-card:hover{
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 32px -12px rgba(239,68,68,0.45),
                0 0 0 1px rgba(253,224,71,0.35);
    z-index: 2;
}
.lk-cat-card img{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ease), filter .35s var(--ease);
}
.lk-cat-card:hover img{ transform: scale(1.06); filter: brightness(1.1) saturate(1.15); }
.lk-cat-card .name{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px 12px;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.lk-cat-card .hot-tag{
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 4px 10px rgba(239,68,68,0.45);
}

/* === STACKED PROMO BANNERS === */
.lk-banners{
    display: flex; flex-direction: column; gap: 12px;
    margin: 30px 0;
}
.lk-banner{
    display: block;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
    position: relative;
    aspect-ratio: 8 / 1;
    background: #11132a;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lk-banner:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -12px rgba(239,68,68,0.4);
}
.lk-banner img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Sport jackpot featured banner */
.lk-sport-banner{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 30px 0;
    box-shadow: 0 16px 40px -16px rgba(0,0,0,0.6);
}
.lk-sport-banner img{
    width: 100%;
    display: block;
}
.lk-sport-banner .overlay-cta{
    position: absolute;
    bottom: 16px; right: 16px;
    z-index: 2;
}

/* === FEATURED GAMES LIST (10 cards) === */
.lk-games-list{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.lk-game-card{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1c3a, #0a0b16);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    aspect-ratio: 1 / 1.15;
}
.lk-game-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -12px rgba(239,68,68,0.4),
                0 0 0 1px rgba(253,224,71,0.3);
}
.lk-game-card img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}
.lk-game-card:hover img{ transform: scale(1.05); }
.lk-game-card .pz{
    padding: 8px 10px;
    background: linear-gradient(180deg, #2a0610 0%, #1a0610 100%);
    border-top: 1px solid rgba(253,224,71,0.2);
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #fde047;
    text-shadow: 0 0 8px rgba(253,224,71,0.4);
    letter-spacing: -0.01em;
}

/* === CERT FOOTER (DMCA/18+/eGaming/MGA) === */
.lk-cert-bar{
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
}
.lk-cert-bar img{
    height: 28px; opacity: 0.8;
    transition: opacity .25s var(--ease);
}
.lk-cert-bar img:hover{ opacity: 1; }

/* === RESPONSIVE === */
@media (max-width: 900px){
    .lk-cat-grid, .lk-cat-grid.cols-8{ grid-template-columns: repeat(2, 1fr); }
    .lk-games-list{ grid-template-columns: repeat(3, 1fr); }
    .lk-jp-trio{ grid-template-columns: 1fr; }
    .lk-banner{ aspect-ratio: 4 / 1; }
}
@media (max-width: 640px){
    .lk-hero-grid{ grid-template-columns: 1fr; }
    .lk-games-list{ grid-template-columns: repeat(2, 1fr); }
    .lk-super-jp{ padding: 28px 16px; }
    .lk-banner{ aspect-ratio: 3 / 1; }
}

/* ============ AOS overrides (subtle) ============ */
[data-aos]{ pointer-events: auto; }
[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos]{ transition-duration: 800ms; }