/**
 * theme-crazygames.css (High-Pro Version)
 * A Premium Cyberpunk & Dark Gaming portal design system.
 * Features organic glowing transitions, micro-interactive scale shifts, and high-fidelity cyber graphics.
 */

:root {
    /* --- Theme Meta --- */
    --ta-name: "CrazyGames Pro Dark";

    /* --- Core Palette & Sleek Dark Bases --- */
    --bg-primary: #0a0b12;              /* Ultra-deep obsidian blue-black */
    --bg-secondary: #12131e;            /* Slate dark navy for structural panels */
    --bg-card: #191b2a;                 /* Card base backdrop */
    --bg-card-hover: #1f2236;           /* Lifted hover state card backdrop */
    
    /* Sleek translucent borders with subtle glow potential */
    --border-color: rgba(104, 66, 255, 0.25);
    --border-neon: rgba(104, 66, 255, 0.4);
    --border-neon-pink: rgba(244, 63, 94, 0.3);
    --border-glass: rgba(255, 255, 255, 0.05);

    /* Electric Neon Accent Set */
    --neon-cyan: #6c47ff;               /* Radiant Electric Indigo */
    --neon-pink: #ff3860;               /* Plasma Crimson */
    --neon-purple: #9d4edd;             /* Radiant Amethyst */
    --neon-green: #00f5a0;              /* Cyber Acid Green */
    --neon-orange: #ff9e00;             /* Fusion Amber */

    /* Premium Typography Mapping */
    --text-primary: #f1f3f9;            /* Crisp off-white */
    --text-secondary: #8e92af;          /* Cyber slate grey */
    --text-accent: #6c47ff;             /* Brand key color */

    /* Cybernetic Glow Calculations (Optimized for performance) */
    --glow-cyan: 0 0 12px rgba(108, 71, 255, 0.4), 0 0 24px rgba(108, 71, 255, 0.15);
    --glow-pink: 0 0 12px rgba(255, 56, 96, 0.4), 0 0 24px rgba(255, 56, 96, 0.15);
    --glow-purple: 0 0 12px rgba(157, 78, 221, 0.4), 0 0 24px rgba(157, 78, 221, 0.15);

    /* Core Theme Configurations */
    --theme-primary: #6c47ff;
    --theme-primary-rgb: 108, 71, 255;
    --theme-secondary: #8b5cf6;
    --theme-secondary-rgb: 139, 92, 246;
    --theme-primary-hover: #5931e6;
    --theme-glow: rgba(108, 71, 255, 0.25);
    --theme-gradient: linear-gradient(135deg, #6c47ff 0%, #9d4edd 100%);
    --theme-card-hover-border: rgba(108, 71, 255, 0.6);
    --theme-glass-blur: 12px;           /* Modern hardware-accelerated frost */
    --theme-sidebar-bg: #12131e;
    --theme-input-bg: #0d0e17;
    --theme-glow-intensity: 0 0 20px rgba(108, 71, 255, 0.35);
    
    /* --- Realistic Cyber Dropshadows --- */
    --theme-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
    --theme-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.6);
    --theme-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 30px rgba(108, 71, 255, 0.1);

    /* --- Border Curves & Physics Transitions --- */
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --transition-cyber: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   GLOBAL SCROLLBAR & SELECTION SYSTEMS
   ========================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-left: 1px solid var(--border-glass);
}
::-webkit-scrollbar-thumb {
    background-color: var(--bg-card);
    border: 2px solid var(--bg-primary);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-primary);
    box-shadow: var(--glow-cyan);
}

/* High Visibility Laser Focus */
*:focus-visible {
    outline: 2px solid var(--theme-primary) !important;
    outline-offset: 3px !important;
    box-shadow: var(--glow-cyan) !important;
}

::selection {
    background-color: var(--theme-primary);
    color: #ffffff;
}

/* ==========================================
   CORE GLASSMORPHIC WEB COMPONENT MODULES
   ========================================== */

.glass-card, 
.game-card, 
.btn, 
.form-control, 
.admin-sidebar, 
.admin-topbar, 
.admin-content-box, 
header, 
footer {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--theme-shadow-md) !important;
    text-shadow: none !important;
    transition: var(--transition-cyber);
    background: var(--bg-card);
}

/* ==========================================
   INTERACTION ENGINE: TACTILE CYBER BUTTONS
   ========================================== */

.btn {
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.75rem !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1;
}

/* Subtle laser sweep on button hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-25deg);
    transition: none;
    z-index: -1;
}
.btn:hover::before {
    left: 150%;
    transition: all 0.6s ease;
}

/* High Pro Hover Lift & Glowing States */
.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(108, 71, 255, 0.3) !important;
    border-color: var(--theme-primary) !important;
}

/* Active downpress mechanical release */
.btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(108, 71, 255, 0.2) !important;
}

/* Cyber Purple Primary Action */
.btn-primary {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #7c58ff 0%, #a85ff5 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Dark Slate Secondary Action */
.btn-secondary {
    background: rgba(25, 27, 42, 0.8) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.btn-secondary:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--theme-primary) !important;
}

/* ==========================================
   DYNAMIC TILES & SHIMMERING CARDS
   ========================================== */

.game-card {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: var(--bg-card);
}

/* Organic 3D Lift & Shadow Shifting */
.game-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: var(--theme-shadow-lg) !important;
    background: var(--bg-card-hover) !important;
    border-color: var(--theme-card-hover-border) !important;
}

/* Interactive Card Downpress click indicator */
.game-card:active {
    transform: translateY(-1px) scale(0.99) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

/* Glowing Accent Border Strip */
.game-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--theme-gradient);
    opacity: 0;
    transition: var(--transition-cyber);
}
.game-card:hover::after {
    opacity: 1;
}

/* ==========================================
   NAVIGATION HEADER MODULES (GLASS SYSTEM)
   ========================================== */

header {
    background: rgba(18, 19, 30, 0.85) !important;
    backdrop-filter: blur(var(--theme-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--theme-glass-blur)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0px 0px var(--radius-lg) var(--radius-lg) !important;
    padding: 1.15rem 1.75rem !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem;
    padding: 0.5rem 1.15rem !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition-cyber);
}
.nav-link:hover, 
.nav-link.active {
    color: var(--text-primary) !important;
    background: rgba(108, 71, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(108, 71, 255, 0.3);
}

/* Sleek Cyber Logo Header Design */
.logo-text {
    font-weight: 900 !important;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--text-primary) !important;
}
.logo-text span {
    color: var(--theme-primary) !important;
    text-shadow: var(--glow-cyan) !important;
    position: relative;
    display: inline-block;
}

/* ==========================================
   CYBER-GRID TEXT INPUTS & UTILITIES
   ========================================== */

.header-search-form .search-input {
    border: 1px solid var(--border-color) !important;
    background: var(--theme-input-bg) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.75rem 1.25rem 0.75rem 2.75rem !important;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-cyber);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.header-search-form .search-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: var(--glow-cyan), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    background: #141525 !important;
    transform: translateY(-1px);
}

.header-search-form .search-icon {
    color: var(--text-secondary) !important;
    transform: translateY(-50%);
    left: 14px !important;
    transition: var(--transition-cyber);
}
.header-search-form .search-input:focus + .search-icon {
    color: var(--theme-primary) !important;
}

/* ==========================================
   NEON TAB STRIPS
   ========================================== */

.tab-btn {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    background: var(--bg-secondary) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    font-size: 0.85rem;
    padding: 0.55rem 1.35rem !important;
    transition: var(--transition-cyber);
}

.tab-btn:hover {
    color: var(--text-primary) !important;
    border-color: var(--theme-primary) !important;
    transform: translateY(-1px) !important;
}

.tab-btn.active {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: var(--glow-cyan) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================
   SIDEBAR NAVS & CONSOLES
   ========================================== */

.sidebar-title {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    position: relative;
}
/* Cyberpunk corner indicator accent on title block */
.sidebar-title::after {
    content: '';
    display: block !important;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--theme-gradient);
    box-shadow: var(--glow-cyan);
}

.sidebar-item {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-secondary) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.75rem !important;
    transition: var(--transition-cyber);
}

.sidebar-item:hover {
    color: var(--text-primary) !important;
    background: var(--bg-card-hover) !important;
    border-color: var(--theme-primary) !important;
    transform: translateX(4px) !important;
}

.sidebar-item:active {
    transform: translateX(1px) !important;
}

/* ==========================================
   ARCADE GAME VIEWPORT COMPONENT
   ========================================== */

.game-viewport-container {
    border: 1px solid var(--border-neon) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--theme-shadow-lg) !important;
    overflow: hidden;
    position: relative;
    background: #000000;
}

/* ==========================================
   CYBER DECORATIVE SECTION INDICATORS
   ========================================== */

.section-title {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Modern pulsing neon bar indicator */
.section-title::before {
    content: '';
    background: var(--theme-gradient) !important;
    box-shadow: var(--glow-cyan) !important;
    width: 6px !important;
    height: 22px !important;
    border-radius: 3px !important;
    display: inline-block;
}