/* style.css - Консолидированный CSS файл для Upeachy Gaming */
/* Consolidated CSS file for Upeachy Gaming */

/* 1. Upeachy Gaming Variables - Based on Vegas Gold Palette */
/* 1. Переменные Upeachy Gaming - Основаны на палитре Vegas Gold */
:root {
    /* Primary Colors for Vegas Gold Theme */
    /* Основные цвета для темы Vegas Gold */
    --color-primary-gold: #FFD700; /* Golden yellow - Золотисто-желтый */
    --color-secondary-red: #DC143C; /* Casino red - Казино-красный */
    --color-dark-black: #1A1A1A;    /* Poker black - Покерный черный */
    --color-light-ivory: #F5F5DC;   /* Ivory white - Цвет слоновой кости */

    /* Dark Mode Variables (adjusted for better contrast in dark mode) */
    /* Переменные для темного режима (скорректированы для лучшего контраста) */
    --dark-color-primary-gold: #FFC107; /* Slightly darker gold for dark mode - Немного более темное золото для темного режима */
    --dark-color-secondary-red: #B00020; /* Darker red for dark mode - Более темный красный для темного режима */
    --dark-color-dark-black: #000000;    /* Pure black for dark mode background - Чистый черный для фона темного режима */
    --dark-color-light-ivory: #CCCCCC;   /* Lighter grey for text in темном режиме - Более светлый серый для текста в темном режиме */

    /* WCAG AA Contrast Ratios (ensure these combinations meet 4.5:1 for text) */
    /* Коэффициенты контрастности WCAG AA (убедитесь, что эти комбинации соответствуют 4.5:1 для текста) */
    /* Example: text-light-ivory on bg-dark-black should have good contrast */
    /* Пример: текст цвета слоновой кости на черном фоне должен иметь хороший контраст */
    /* text-primary-gold on bg-dark-black should also have good contrast */
    /* Золотистый текст на черном фоне также должен иметь хороший контраст */

    /* Typography Variables */
    /* Переменные типографики */
    --font-heading: 'Outfit', sans-serif;    /* For H1, H2, etc. - Для заголовков H1, H2 и т.д. */
    --font-body: 'Manrope', sans-serif;      /* For general paragraph text - Для обычного текста абзацев */
    --font-accent: 'Electrolize', sans-serif; /* For buttons, logos, special elements - Для кнопок, логотипов, специальных элементов */

    /* Shadow Variables for Casino Floor feel */
    /* Переменные теней для ощущения "Казино-пола" */
    --shadow-premium: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.3); /* Deep, luxurious shadow - Глубокая, роскошная тень */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle inner shadow for depth - Тонкая внутренняя тень для глубины */

    /* Animation Timing Variables */
    /* Переменные времени анимации */
    --animation-speed-fast: 0.3s;   /* For quick transitions like hover effects - Для быстрых переходов, таких как эффекты наведения */
    --animation-speed-medium: 0.5s; /* For general element transitions - Для общих переходов элементов */
    --animation-speed-slow: 0.8s;   /* For slower, more deliberate animations - Для более медленных, более продуманных анимаций */
    --animation-easing-bounce: cubic-bezier(0.25, 0.1, 0.25, 1); /* Specific easing for Slot Reel Spin - Специфическое сглаживание для вращения барабанов слота */
    --animation-easing-smooth: ease-in-out; /* General smooth easing - Общее плавное сглаживание */
}

/* Dark mode styles - Стили для темного режима */
body.dark-mode {
    background-color: var(--dark-color-dark-black);
    color: var(--dark-color-light-ivory);
}
body.dark-mode .bg-dark-black { background-color: var(--dark-color-dark-black); }
body.dark-mode .text-light-ivory { color: var(--dark-color-light-ivory); }
body.dark-mode .bg-primary-gold { background-color: var(--dark-color-primary-gold); }
body.dark-mode .text-primary-gold { color: var(--dark-color-primary-gold); }
body.dark-mode .bg-secondary-red { background-color: var(--dark-color-secondary-red); }
body.dark-mode .text-secondary-red { color: var(--dark-color-secondary-red); }


/* 2. Upeachy Gaming Base Styles */
/* 2. Базовые стили Upeachy Gaming */
body {
    font-family: var(--font-body); /* Sets the default font for the body from variables */
    background-color: var(--color-dark-black); /* Sets the background color from variables */
    color: var(--color-light-ivory); /* Sets the default text color from variables */
    line-height: 1.6; /* Standard line height for readability */
    margin: 0; /* Resets default body margin */
    padding: 0; /* Resets default body padding */
    overflow-x: hidden; /* Prevents horizontal scrolling, ensuring responsive layout */
}

/* Headings (H1-H6) styling */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading); /* Sets the heading font from variables */
    color: var(--color-primary-gold); /* Sets the heading color from variables */
    margin-bottom: 1rem; /* Adds space below headings */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds a subtle shadow for depth, fitting Casino Floor theme */
}

/* Specific font sizes for headings */
h1 { font-size: 3rem; } /* Large size for main titles */
h2 { font-size: 2.5rem; } /* Second level heading size */
h3 { font-size: 2rem; }  /* Third level heading size */

/* Paragraph styling */
p {
    margin-bottom: 1rem; /* Adds space below paragraphs */
}

/* Anchor (link) styling */
a {
    color: var(--color-primary-gold); /* Sets link color from variables */
    text-decoration: none; /* Removes underline from links */
    transition: color var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth color transition on hover */
}
a:hover {
    color: var(--color-secondary-red); /* Changes link color on hover */
}

/* Section styling - common properties for content blocks */
section {
    padding: 4rem 1rem; /* Padding inside sections */
    max-width: 1200px; /* Maximum width for content within sections */
    margin: 0 auto; /* Centers the section on the page */
    opacity: 1; /* Changed from 0 to 1 to make sections visible by default */
    transform: translateY(0); /* Changed from 20px to 0 to remove initial offset */
    transition: opacity var(--animation-speed-medium) var(--animation-easing-smooth), transform var(--animation-speed-medium) var(--animation-easing-smooth); /* Smooth transition for appearance */
}
section.active {
    opacity: 1; /* Makes the section visible */
    transform: translateY(0); /* Moves the section to its final position */
}

/* Класс контейнера для согласованной ширины контента */
.container {
    max-width: 1200px; /* Максимальная ширина контента */
    margin: 0 auto; /* Центрирует контейнер */
    padding: 0 1rem; /* Горизонтальный внутренний отступ */
}

/* 3. Upeachy Gaming Components */
/* 3. Компоненты Upeachy Gaming */

/* Button Styling */
.btn {
    display: inline-block; /* Allows setting width/height and vertical alignment */
    padding: 0.8rem 2rem; /* Padding inside the button */
    border-radius: 9999px; /* Fully rounded corners for a sleek look */
    font-family: var(--font-accent); /* Uses the accent font for strong visual impact */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text for emphasis */
    transition: all var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth transitions for all properties on hover/active */
    box-shadow: var(--shadow-premium); /* Applies the premium shadow for a luxurious feel */
    border: 2px solid var(--color-primary-gold); /* Gold border for elegance */
    background: linear-gradient(145deg, var(--color-primary-gold), #DAA520); /* Golden gradient background */
    color: var(--color-dark-black); /* Dark text on gold background for contrast */
    cursor: pointer; /* Indicates interactivity */
    position: relative; /* Needed for the ::before pseudo-element animation */
    overflow: hidden; /* Hides the ::before element until hovered */
    z-index: 1; /* Ensures button is above other elements if needed */
}

.btn:hover {
    transform: translateY(-3px); /* Lifts the button slightly on hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Enhanced shadow on hover */
    border-color: var(--color-secondary-red); /* Changes border color to red on hover */
    background: linear-gradient(145deg, #DAA520, var(--color-primary-gold)); /* Reverses gradient direction on hover */
}

.btn:active {
    transform: translateY(0); /* Pushes the button back down on click */
    box-shadow: var(--shadow-inset); /* Applies an inset shadow to simulate press */
}

/* Pseudo-element for a subtle shine effect on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white overlay */
    transform: translateX(-100%); /* Starts off-screen to the left */
    transition: transform var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth slide-in transition */
    z-index: -1; /* Positions behind the button text */
}

.btn:hover::before {
    transform: translateX(0); /* Slides the shine effect across the button */
}

/* Navigation Bar Styling */
.navbar {
    background-color: var(--color-dark-black); /* Dark background for the navbar */
    padding: 1rem 0; /* Vertical padding */
    box-shadow: var(--shadow-premium); /* Premium shadow for depth */
    position: sticky; /* Makes the navbar stick to the top on scroll */
    top: 0; /* Sticks to the top */
    z-index: 1000; /* Ensures navbar is above most other content */
}

.navbar-logo {
    font-family: var(--font-accent); /* Accent font for the logo */
    font-size: 2rem; /* Large font size for the logo */
    font-weight: bold; /* Bold logo text */
    color: var(--color-primary-gold); /* Gold color for the logo */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); /* Stronger text shadow for prominence */
    transition: transform var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth transform transition */
}

.navbar-logo:hover {
    transform: scale(1.05); /* Slightly scales up the logo on hover */
}

.nav-link {
    padding: 0.5rem 1rem; /* Padding for navigation links */
    border-radius: 0.5rem; /* Slightly rounded corners for links */
    transition: background-color var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth background transition on hover */
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background change on hover */
}

/* Hamburger Menu for Mobile */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    background: none; /* No background */
    border: none; /* No border */
    color: var(--color-primary-gold); /* Gold color for the icon */
    font-size: 2rem; /* Large icon size */
    cursor: pointer; /* Indicates interactivity */
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent dark background */
    z-index: 1001; /* Above the main navbar */
    display: flex; /* Flexbox for centering content */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    transform: translateX(100%); /* Starts off-screen to the right */
    transition: transform var(--animation-speed-medium) var(--animation-easing-smooth); /* Smooth slide-in/out transition */
}

.mobile-nav-overlay.open {
    transform: translateX(0); /* Slides the overlay into view */
}

.mobile-nav-overlay .close-btn {
    position: absolute; /* Absolute positioning relative to the overlay */
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--color-primary-gold); /* Gold color for the close button */
    font-size: 2.5rem; /* Large size for easy tapping */
    cursor: pointer;
}

.mobile-nav-overlay a {
    font-size: 2rem; /* Large font size for mobile links */
    margin: 1rem 0; /* Vertical spacing between links */
    color: var(--color-light-ivory); /* Light text color for contrast */
}

/* Disclaimer Banner (Fixed Top-Center) */
.disclaimer-banner {
    position: fixed; /* Fixed position relative to the viewport */
    top: 0;
    left: 50%; /* Centers horizontally */
    transform: translateX(-50%); /* Adjusts for exact centering */
    width: 100%;
    max-width: 800px; /* Max width for readability */
    background-color: var(--color-secondary-red); /* Red background for high visibility */
    color: var(--color-light-ivory); /* Light text for contrast */
    padding: 0.75rem 1.5rem; /* Padding inside the banner */
    text-align: center; /* Centers text */
    font-size: 0.9rem; /* Slightly smaller font size */
    border-bottom-left-radius: 1rem; /* Rounded bottom corners */
    border-bottom-right-radius: 1rem;
    box-shadow: var(--shadow-premium); /* Premium shadow */
    z-index: 1002; /* Ensures it's above navbar and other content */
    animation: fadeInDown var(--animation-speed-medium) var(--animation-easing-smooth) forwards; /* Initial animation */
}

/* Hero Section Styling */
.hero-section {
    min-height: 600px; /* Minimum height for the hero section */
    display: flex; /* Flexbox for content alignment */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    text-align: center; /* Centers text within the hero content */
    position: relative; /* Needed for absolute positioning of background image */
    overflow: hidden; /* Hides overflowing content */
    background: linear-gradient(to bottom right, var(--color-dark-black), #333); /* Dark gradient background for Casino Floor feel */
}

.hero-content {
    z-index: 10; /* Ensures content is above the background image */
    position: relative; /* Allows z-index to work */
    padding: 2rem; /* Padding around the content */
    border-radius: 1rem; /* Rounded corners */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark overlay for readability */
    box-shadow: var(--shadow-premium); /* Premium shadow for depth */
}

.hero-bg-image {
    position: absolute; /* Positions the image relative to the hero section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the entire area */
    z-index: 1; /* Positions behind the hero content */
}

/* Individual hero element animation (for Slot Reel Spin effect) */
.hero-element {
    opacity: 0; /* Starts invisible */
    transform: translateY(20px); /* Starts slightly offset */
    animation: slotReelSpinIn 2.5s var(--animation-easing-bounce) forwards; /* Applies the Slot Reel Spin animation */
}

/* Staggered animation delays for hero elements */
.hero-element:nth-child(1) { animation-delay: 0.1s; }
.hero-element:nth-child(2) { animation-delay: 0.3s; }
.hero-element:nth-child(3) { animation-delay: 0.5s; }
.hero-element:nth-child(4) { animation-delay: 0.7s; }


/* Game Card Styling (for Game Showcase and Games page) */
.game-card {
    background-color: var(--color-dark-black); /* Dark background */
    border: 2px solid var(--color-primary-gold); /* Gold border */
    border-radius: 1rem; /* Rounded corners */
    overflow: hidden; /* Ensures content stays within bounds */
    box-shadow: var(--shadow-premium); /* Premium shadow */
    transition: transform var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth transform on hover */
    cursor: pointer; /* Indicates interactivity */
    position: relative; /* For z-index if needed */
    z-index: 1;
}

.game-card:hover {
    transform: translateY(-5px); /* Lifts the card slightly on hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7); /* Enhanced shadow on hover */
}

.game-card-image {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers the area */
    border-bottom: 2px solid var(--color-primary-gold); /* Gold border at the bottom */
    transition: transform 2.5s var(--animation-easing-bounce); /* Transition for Slot Reel Spin effect */
}

/* Slot Reel Spin Hover Animation for Game Cards */
.game-card:hover .game-card-image {
    animation: slotReelSpinHover 2.5s var(--animation-easing-bounce) forwards; /* Applies hover animation */
}

.game-card-content {
    padding: 1.5rem; /* Padding inside the card content */
    text-align: center; /* Centers text */
}

.game-card-title {
    font-family: var(--font-accent); /* Accent font for game titles */
    color: var(--color-primary-gold); /* Gold color for titles */
    font-size: 1.5rem; /* Font size for game titles */
    margin-bottom: 0.5rem; /* Space below title */
}

.game-card-description {
    font-size: 0.9rem; /* Smaller font size for description */
    color: var(--color-light-ivory); /* Light text color */
    margin-bottom: 1rem; /* Space below description */
}

/* Full Screen Game Overlay */
.game-overlay {
    position: fixed; /* Fixed to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent dark background */
    z-index: 2000; /* High z-index to be on top */
    display: flex; /* Flexbox for centering content */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    opacity: 0; /* Starts invisible */
    visibility: hidden; /* Hides from screen readers when not active */
    transition: opacity var(--animation-speed-medium) var(--animation-easing-smooth), visibility var(--animation-speed-medium) var(--animation-easing-smooth); /* Smooth fade in/out */
}

.game-overlay.active {
    opacity: 1; /* Makes overlay visible */
    visibility: visible; /* Makes overlay visible to screen readers */
}

.game-overlay iframe {
    width: 90%; /* Width of the game iframe */
    height: 90%; /* Height of the game iframe */
    border: none; /* No border */
    border-radius: 1rem; /* Rounded corners */
    box-shadow: var(--shadow-premium); /* Premium shadow */
}

.game-overlay .close-btn {
    position: absolute; /* Absolute positioning relative to the overlay */
    top: 1rem;
    right: 1rem;
    background: var(--color-secondary-red); /* Red background */
    color: var(--color-light-ivory); /* Light text */
    border: none;
    border-radius: 9999px; /* Fully rounded */
    width: 40px;
    height: 40px;
    font-size: 1.5rem; /* Large font size for 'X' */
    display: flex; /* Flexbox for centering 'X' */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-premium); /* Premium shadow */
    transition: transform var(--animation-speed-fast) var(--animation-easing-smooth); /* Smooth transform on hover */
}

.game-overlay .close-btn:hover {
    transform: scale(1.1); /* Slightly scales up on hover */
}

.loading-spinner {
    border: 8px solid rgba(255, 255, 255, 0.3); /* Light grey border */
    border-top: 8px solid var(--color-primary-gold); /* Gold top border for spinning effect */
    border-radius: 50%; /* Makes it a circle */
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* Spinning animation */
    margin-bottom: 20px; /* Space below spinner */
}

/* Age Verification Overlay */
.age-verification-overlay {
    position: fixed; /* Fixed to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.98); /* Very dark, almost opaque background */
    z-index: 3000; /* Highest z-index to ensure it's on top */
    display: flex; /* Flexbox for centering content */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    text-align: center; /* Centers text */
    padding: 2rem; /* Padding inside the overlay */
    box-sizing: border-box; /* Includes padding in width/height */
}

.age-verification-content {
    background-color: var(--color-dark-black); /* Dark background */
    border: 2px solid var(--color-primary-gold); /* Gold border */
    border-radius: 1rem; /* Rounded corners */
    padding: 3rem; /* Generous padding */
    box-shadow: var(--shadow-premium); /* Premium shadow */
    max-width: 500px; /* Max width for readability */
    width: 100%; /* Full width up to max-width */
}

.age-verification-content h2 {
    font-size: 2.2rem; /* Large heading for prominence */
    margin-bottom: 1.5rem; /* Space below heading */
}

.age-verification-content p {
    font-size: 1.1rem; /* Readable font size */
    margin-bottom: 2rem; /* Space below paragraph */
    color: var(--color-light-ivory); /* Light text color */
}

.age-verification-content .btn {
    margin: 0 0.5rem; /* Spacing between buttons */
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed; /* Fixed to the bottom of the viewport */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-dark-black); /* Dark background */
    color: var(--color-light-ivory); /* Light text */
    padding: 1rem 2rem; /* Padding inside the banner */
    text-align: center; /* Centers text */
    box-shadow: var(--shadow-premium); /* Premium shadow */
    z-index: 2500; /* Above game overlay but below age verification */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    gap: 1rem; /* Space between text and button */
    transform: translateY(100%); /* Starts off-screen at the bottom */
    transition: transform var(--animation-speed-medium) var(--animation-easing-smooth); /* Smooth slide-in transition */
}

.cookie-consent-banner.show {
    transform: translateY(0); /* Slides the banner into view */
}

.cookie-consent-banner p {
    margin: 0; /* Resets default paragraph margin */
    font-size: 0.9rem; /* Smaller font size */
}

.cookie-consent-banner .btn {
    padding: 0.5rem 1.5rem; /* Smaller padding for the button */
    font-size: 0.8rem; /* Smaller font size for the button text */
}

/* 4. Upeachy Gaming Animations */
/* 4. Анимации Upeachy Gaming */

/* Keyframes for the disclaimer banner's entrance animation (fadeInDown) */
/* (Defined above in components, but included here for animation clarity) */

/* Keyframes for the Slot Reel Spin entrance animation for Hero elements */
/* (Defined above in components, but included here for animation clarity) */

/* Keyframes for the Slot Reel Spin Hover Animation for Game Cards */
/* (Defined above in components, but included here for animation clarity) */

/* Keyframes for the loading spinner animation */
/* (Defined above in components, but included here for animation clarity) */

/* prefers-reduced-motion fallback for various animations */
@media (prefers-reduced-motion: reduce) {
    .disclaimer-banner { animation: fadeIn 0.3s ease-in-out forwards; } /* Simple fade for disclaimer */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Basic fade-in keyframes */
    .hero-element { animation: simpleFadeIn 0.3s ease-in-out forwards; } /* Simple fade for hero elements */
    @keyframes simpleFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .game-card:hover .game-card-image { animation: none !important; } /* Disables hover animation for game cards */
    .game-card-image { animation: none !important; } /* Disables initial animation for game cards */
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    .navbar-links {
        display: none; /* Hides desktop navigation links on mobile */
    }
    .hamburger-menu {
        display: block; /* Shows hamburger menu on mobile */
    }
    .hero-section {
        min-height: 400px; /* Reduced height for hero on mobile */
    }
    h1 { font-size: 2.2rem; } /* Smaller H1 on mobile */
    h2 { font-size: 1.8rem; } /* Smaller H2 on mobile */
    h3 { font-size: 1.5rem; } /* Smaller H3 on mobile */
    .disclaimer-banner {
        font-size: 0.8rem; /* Smaller font for disclaimer on mobile */
        padding: 0.5rem 1rem; /* Reduced padding */
    }
    .game-grid {
        grid-template-columns: 1fr; /* Single column for game cards on mobile */
    }
    .age-verification-content {
        padding: 2rem; /* Reduced padding for age verification on mobile */
    }
    .age-verification-content h2 {
        font-size: 1.8rem; /* Smaller heading for age verification on mobile */
    }
}