/* ==========================================
   Premium "High-Stakes Noir" Global Stylesheet
   Project: 13L.GAME Unified UI Redesign Overrides
   ========================================== */

/* Key Animations */
@keyframes shiftGlow {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(5%, -5%) scale(1.05); }
    66% { transform: translate(-5%, 5%) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

@keyframes pulseShimmer {
    0% { box-shadow: 0 0 0 0 rgba(227, 27, 35, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(227, 27, 35, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 27, 35, 0); }
}

/* Ambient Background Glows & Particles */
.bg-glow-gold {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(175, 141, 17, 0.07) 0%, rgba(0,0,0,0) 70%);
    z-index: -10;
    pointer-events: none;
    animation: shiftGlow 20s ease-in-out infinite alternate;
}

.bg-glow-red {
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(227, 27, 35, 0.08) 0%, rgba(0,0,0,0) 70%);
    z-index: -10;
    pointer-events: none;
    animation: shiftGlow 25s ease-in-out infinite alternate-reverse;
}

.ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    background: #E31B23;
    border-radius: 50%;
    box-shadow: 0 0 5px #E31B23, 0 0 10px #D4AF37;
    opacity: 0;
    pointer-events: none;
    z-index: -5;
    animation: floatUp linear infinite;
}

/* Base Body Styles */
body {
    background-color: #0A0A0A !important;
    background-image: radial-gradient(circle at 20% 30%, rgba(18, 18, 18, 0.8) 0%, #0A0A0A 100%) !important;
    color: #E5E2E1 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    overflow-x: hidden;
}

/* Core Design Variable Overrides (Overwriting all theme bundles) */
:root, [data-theme] {
    /* Main Accents */
    --main_color: #E31B23 !important;
    --main-color: #E31B23 !important;
    --main_gradient_1: #E31B23 !important;
    --main_gradient_2: #8A000A !important;
    --main_gradient_color: linear-gradient(180deg, #E31B23 0%, #8A000A 100%) !important;
    --main_gradient-color: linear-gradient(90deg, #E31B23 0%, #FF5A5F 100%) !important;
    --main_gradient-color2: linear-gradient(180deg, #E31B23 0%, #8A000A 100%) !important;
    --light-main_gradient-color: linear-gradient(90deg, #E31B23 0%, #FF5A5F 100%) !important;
    
    /* Background Hierarchy (Obsidian Glass) */
    --bg_color_L1: #0A0A0A !important; /* Screen body background */
    --bg_color_L2: #121212 !important; /* Cards / Modules */
    --bg_color_L3: #181818 !important; /* Dialog / Overlay / List items */
    --bg_color_L4: #222222 !important; /* Selected states / Input backgrounds */
    --bg_color_login_register: #0A0A0A !important;

    /* Typographic Hierarchy (Silver & Gold) */
    --text_primary: #E5E2E1 !important;
    --text_secondary: #AE8883 !important;
    --text_tertiary: #6C5452 !important;
    --text_inverse: #FFFFFF !important;
    --text_btn_main: #FFFFFF !important;
    --text_disabled: #4A3A39 !important;
    --text_placeholder: #4A3A39 !important;

    --text_color_L1: #E5E2E1 !important;
    --text_color_L2: #AE8883 !important;
    --text_color_L3: #6C5452 !important;
    --text_color_L4: #FFFFFF !important;

    /* Borders and Dividers */
    --Dividing_line_color: rgba(255, 255, 255, 0.08) !important;
    --Dividing-line_color: rgba(255, 255, 255, 0.08) !important;
    --Stroke_color: rgba(255, 255, 255, 0.08) !important;

    /* Component Speeds */
    --button_dis: #301A1B !important;
    --button_dis_color: #301A1B !important;
    
    /* Vant UI Library Theme Bindings */
    --van-primary-color: #E31B23 !important;
    --van-tabbar-item-active-color: #E31B23 !important;
    --van-tabbar-item-text-color: #AE8883 !important;
    --van-tabbar-background: rgba(10, 10, 10, 0.90) !important;
    --van-sidebar-text-color: #E31B23 !important;
    --van-sidebar-active-color: #E31B23 !important;
    --van-picker-background: #121212 !important;
    --van-picker-option-text-color: #E5E2E1 !important;
    --van-picker-confirm-action-color: #E31B23 !important;
    --van-checkbox-checked-icon-color: #E31B23 !important;
    --van-checkbox-label-color: #AE8883 !important;
    --van-field-input-text-color: #E5E2E1 !important;
    --van-radio-checked-icon-color: #E31B23 !important;
    --van-grid-item-content-background: #121212 !important;
    --van-text-color: #E5E2E1 !important;
    --van-dialog-background: #121212 !important;
    --van-circle-color: #E31B23 !important;
    --van-circle-layer-color: #181818 !important;
    --van-calendar-range-edge-background: #E31B23 !important;
    --van-button-primary-background: #E31B23 !important;
    --van-button-primary-border-color: #E31B23 !important;
    --van-toast-text-color: #E5E2E1 !important;
    --van-toast-background: rgba(18, 18, 18, 0.95) !important;
    --van-border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Glassmorphism Overrides for Panels and Dialogs */
.van-popup, 
.van-dialog, 
.dialog, 
.popup, 
.modal-content, 
.van-toast, 
.dialog-content {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(10, 10, 10, 0.96) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* Unified Navigation Bars (Top & Bottom) */
.van-nav-bar, 
header, 
.nav-header, 
.header_style {
    background: rgba(10, 10, 10, 0.80) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.van-tabbar, 
.bottom_nav_style, 
.bottom_mix_style, 
footer, 
.footer_style {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Buttons Styling */
.van-button--primary, 
.btn_main_style, 
.btn-primary, 
.submit-btn, 
.primary-button {
    background: linear-gradient(180deg, #E31B23 0%, #8A000A 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(227, 27, 35, 0.3) !important;
    transition: all 0.25s ease !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.van-button--primary:active, 
.btn_main_style:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(227, 27, 35, 0.5) !important;
}

.van-button--default, 
.btn_Secondary_style, 
.btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #E5E2E1 !important;
    transition: all 0.25s ease !important;
}

/* Inputs & Form Fields */
.van-field, 
.van-cell, 
input, 
textarea {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    color: #E5E2E1 !important;
    transition: all 0.25s ease !important;
}

.van-field:focus-within, 
input:focus {
    border-color: #E31B23 !important;
    box-shadow: 0 0 8px rgba(227, 27, 35, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Cards / Game Grid Modules */
.game-card, 
.van-grid-item__content, 
.record-card, 
.item-card,
.recharge-type__item {
    background: rgba(18, 18, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s ease !important;
}

.game-card:hover, 
.van-grid-item__content:active {
    border-color: rgba(227, 27, 35, 0.3) !important;
    box-shadow: 0 4px 20px rgba(227, 27, 35, 0.15) !important;
}

/* Lottery specific fixes (e.g. Wingo, K3 round displays) */
.ball, .number-ball, .bet-ball {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    font-weight: 700 !important;
}

/* Tabs & Labels overrides */
.van-tab--active {
    color: #E5E2E1 !important;
    font-weight: 600 !important;
}

.van-tabs__nav {
    background-color: transparent !important;
}

.van-tabs__line {
    background-color: #E31B23 !important;
    box-shadow: 0 0 8px #E31B23 !important;
}

#particles-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -5 !important;
}