/* ---------------------------------- */
/* --- THEME & COLOR VARIABLES --- */
/* ---------------------------------- */

/* --- DARK MODE (Default) --- */
:root {
    --color-bg-primary: #0f172a;       /* Dark Navy Background */
    --color-bg-secondary: #1e1b4b;     /* Deep Indigo (Cards & Header) */
    --color-bg-input: #0f172a;         /* Input darker than header */
    
    --color-text-primary: #ffffff;     /* White Text */
    --color-text-secondary: #94a3b8;   /* Light Slate */
    
    --color-border: #8b5cf6;           /* Purple Borders */
    --color-accent: #a5b4fc;           /* Light Indigo Accent (Text Fill) */
    
    --color-mod-bg-start: #f59e0b;
    --color-mod-bg-end: #b45309;
    --color-success: #4ade80;
    --color-success-dark: #22c55e;
    
    --border-width: 3px;
    --shadow-distance: 4px;
    --dot-color: rgba(139, 92, 246, 0.2);
}

/* --- LIGHT MODE --- */
html.light-mode {
    --color-bg-primary: #eff6ff;       /* Light Blue Background */
    --color-bg-secondary: #ffffff;     /* White (Cards & Header) */
    --color-bg-input: #ffffff;
    
    --color-text-primary: #1e1b4b;     /* Dark Blue Text */
    --color-text-secondary: #475569;   /* Slate */
    
    --color-border: #1e1b4b;           /* Dark Blue Borders */
    --color-accent: #8b5cf6;           /* Purple Accent (Text Fill) */
    
    --color-mod-bg-start: #facc15;
    --color-mod-bg-end: #ca8a04;
    --color-success: #22c55e;
    --color-success-dark: #15803D;
    
    --dot-color: #a5b4fc;
}

/* ---------------------------------- */
/* --- FONTS & BASE --- */
/* ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;900&family=Titan+One&display=swap');

html {
    scroll-behavior: smooth;
    transition: background-color 0.3s ease;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: 'Nunito', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-image: radial-gradient(var(--dot-color) 2px, transparent 2px);
    background-size: 24px 24px;
}

/* --- GAME UI UTILITIES --- */
/* UPDATED: Uses accent color for fill so it shows up on white headers */
.text-outline {
    -webkit-text-stroke: 1px var(--color-border);
    color: var(--color-accent); 
    text-shadow: 2px 2px 0px var(--color-border);
    font-family: 'Titan One', cursive;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.hard-shadow {
    box-shadow: var(--shadow-distance) var(--shadow-distance) 0px 0px var(--color-border);
}

/* ---------------------------------- */
/* --- COMPONENT OVERRIDES --- */
/* ---------------------------------- */

/* 1. Header - UPDATED: Now uses bg-secondary (White/DarkBlue) instead of Accent */
header {
    background-color: var(--color-bg-secondary) !important;
    border-bottom: var(--border-width) solid var(--color-border);
    transition: all 0.3s ease;
}

/* 2. Inputs */
#search-input {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    box-shadow: 4px 4px 0px 0px var(--color-border);
    font-weight: 700;
    transition: all 0.3s ease;
}
#search-input::placeholder {
    color: var(--color-text-secondary);
}
#search-input:focus {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px var(--color-border);
}

/* 3. APP CARDS */
.app-card-trigger {
    border: var(--border-width) solid var(--color-border) !important;
    border-radius: 1rem !important;
    background-color: var(--color-bg-secondary) !important;
    box-shadow: 6px 6px 0px 0px var(--color-border) !important;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s forwards;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

.app-card-trigger.card-loaded {
    opacity: 1;
    transform: translateY(0);
}

.app-card-trigger:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 8px 8px 0px 0px var(--color-border) !important;
    filter: brightness(1.05); /* Subtle brightness boost on hover */
}

/* 4. KPI Badges */
.kpi-badge {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    box-shadow: 3px 3px 0px 0px var(--color-border);
    border-radius: 8px;
    padding: 4px 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

/* 5. Buttons */
#theme-toggle {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    box-shadow: 3px 3px 0px 0px var(--color-border);
    transition: all 0.15s ease;
}
#theme-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px 0px var(--color-border);
}

#start-download-btn {
    background-color: var(--color-accent);
    color: white; 
    text-shadow: 1px 1px 0px var(--color-border);
    border: 2px solid var(--color-border);
    box-shadow: 0px 4px 0px 0px var(--color-border);
    text-transform: uppercase;
    
    /* --- CHANGED HERE --- */
    font-family: inherit; /* Falls back to Nunito defined in body */
    font-weight: 800;     /* Extra bold to maintain the "Game UI" feel */
    font-size: 1rem;      /* Ensures text isn't massive on mobile */
    /* -------------------- */
    
    letter-spacing: 0.05em;
    transition: all 0.1s ease;
}
#start-download-btn:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px var(--color-border);
}

/* ---------------------------------- */
/* --- MODAL & UTILS --- */
/* ---------------------------------- */
.mfp-bg {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(5px);
}

#loader-modal-container {
    background: var(--color-bg-secondary);
    border: 4px solid var(--color-border);
    box-shadow: 10px 10px 0px 0px var(--color-border);
    border-radius: 24px;
    padding: 2rem !important;
    max-width: 480px;
    transition: all 0.3s ease;
}

.skeleton {
    background-color: var(--color-text-secondary);
    opacity: 0.2;
}
.skeleton::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.modal-open { overflow: hidden; }