/**
 * PROJECT: Professional PHP Gaming Platform
 * FILE: assets/css/main.css
 * DESCRIPTION: Premium Obsidian-Glass Theme (Enterprise iGaming Aesthetic).
 * UI STYLE: 3D Tactile, High-Contrast, No Stock Grays.
 */

/* 1. ROOT SYSTEM (Dynamic variables are partially overridden by header.php) */
:root {
    --primary-bg: #05070a;      /* Deep Obsidian */
    --secondary-bg: #0f172a;    /* Slate Dark */
    --card-bg: #111827;         /* High-Contrast Card */
    --accent-color: #3b82f6;    /* Industry Blue */
    --accent-glow: rgba(59, 130, 246, 0.4);
    --win-green: #10b981;       /* Emerald Win */
    --loss-red: #ef4444;        /* Error/Red */
    --text-main: #f8fafc;       /* Crisp White */
    --text-dim: #94a3b8;        /* Professional Muted (Slate-400) */
    --border-color: rgba(255, 255, 255, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.02);
    --nav-height-mob: 75px;
}

/* 2. CRITICAL MOBILE RESET (Prevents Site Becoming Large) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    /* Use dvh for mobile address bar fixes */
    min-height: 100dvh; 
    perspective: 1200px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* 3. PROFESSIONAL TYPOGRAPHY (Overrides Bootstrap Grays) */
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -0.5px; color: #fff; }

.text-muted, .text-secondary-custom {
    color: var(--text-dim) !important;
    opacity: 1 !important;
}

.text-gradient {
    color: var(--accent-color);
    background-image: linear-gradient(to right, #60a5fa, #3b82f6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 4. PREMIUM 3D GAME CARDS */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.card-3d {
    background: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    transform-style: preserve-3d;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
}

.card-3d:hover {
    transform: translateY(-12px) rotateX(4deg);
    border-color: var(--accent-color);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 20px var(--accent-glow);
}

.thumb-container {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s transform;
}

.card-3d:hover .thumb-container img {
    transform: scale(1.15);
}

.card-overlay-info {
    padding: 20px;
    background: linear-gradient(180deg, transparent 0%, var(--card-bg) 35%);
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

/* 5. MOBILE OPTIMIZATION (2 COLUMNS FORCE) */
@media (max-width: 576px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 LINES ON MOBILE */
        gap: 12px !important;
        padding: 20px 10px;
    }
    
    .card-3d { border-radius: 16px !important; }
    .thumb-container { height: 140px !important; }
    .card-overlay-info { padding: 12px !important; margin-top: -40px !important; }
    
    .card-overlay-info h6 { 
        font-size: 0.85rem !important; 
        margin-bottom: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-play-mini {
        background: var(--accent-color);
        color: #fff;
        text-align: center;
        padding: 8px 0;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: bold;
    }
}

/* 6. CINEMATIC FULL-WIDTH SLIDER */
.slider-full {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    background: #000;
}

.carousel-item img {
    width: 100%;
    height: 520px; /* PC */
    object-fit: cover;
}

@media (max-width: 768px) {
    .carousel-item img { height: 220px !important; } /* Mobile */
}

/* 7. PREMIUM BUTTONS & FORMS */
.btn-main {
    background: linear-gradient(180deg, var(--accent-color) 0%, #1d4ed8 100%);
    color: #fff; border: none; padding: 14px 28px; border-radius: 14px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    transition: 0.3s; box-shadow: 0 10px 20px -5px var(--accent-glow);
    text-decoration: none; display: inline-block; text-align: center;
}

.btn-main:hover { transform: translateY(-3px); box-shadow: 0 15px 30px -5px var(--accent-glow); color: #fff; }
.btn-main:active { transform: scale(0.96); }

.form-control-3d {
    background: #0b1120; border: 1px solid var(--border-color); color: #fff;
    padding: 14px; border-radius: 12px; transition: 0.3s ease;
}

.form-control-3d:focus {
    border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none; background: #0b1120; color: #fff;
}

/* 8. LAYOUT UTILITIES */
.section-label {
    text-transform: uppercase; font-size: 0.7rem; font-weight: 800;
    color: var(--accent-color); letter-spacing: 2px; margin-bottom: 10px; display: block;
}

.glass-panel {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
}

/* 9. MOBILE FOOTER SPACING FIX */
@media (max-width: 991px) {
    body { padding-bottom: calc(var(--nav-height-mob) + 15px) !important; }
}

/* Custom Scrollbar for Obsidian Theme */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--primary-bg); }
::-webkit-scrollbar-thumb { background: var(--secondary-bg); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }