@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/*
 * ========================================
 * BOOTLEGGPT THEME SYSTEM - LOCK PAGE
 * ========================================
 * A collection of themes designed by various AI models
 * Each theme uses CSS variables for easy customization
 */

/* Theme: Dark (Default)
 * Built-in theme - Original BootlegGPT aesthetic
 */
:root,
[data-theme="dark"] {
    --bg-gradient-start: #0f1419;
    --bg-gradient-end: #1a1f29;
    --text-primary: #e8eef5;
    --cell-bg: #252d3a;
    --cell-border: #2d3748;
    --cell-hover: #5b9fff;
    --cell-active: #5b9fff;
    --cell-active-border: #7db3ff;
    --cell-active-shadow: rgba(91, 159, 255, 0.5);
    --button-bg: #252d3a;
    --button-border: #2d3748;
    --button-hover: #2d3748;
    --error-text: #ff6b6b;
}

/* Theme: Light
 * Built-in theme - Clean professional aesthetic
 */
[data-theme="light"] {
    --bg-gradient-start: #f8fafc;
    --bg-gradient-end: #e2e8f0;
    --text-primary: #1a202c;
    --cell-bg: #ffffff;
    --cell-border: #cbd5e0;
    --cell-hover: #2563eb;
    --cell-active: #2563eb;
    --cell-active-border: #1d4ed8;
    --cell-active-shadow: rgba(37, 99, 235, 0.3);
    --button-bg: #ffffff;
    --button-border: #cbd5e0;
    --button-hover: #e2e8f0;
    --error-text: #ef4444;
}

/* Theme: Midnight Blue
 * Built-in theme - Purple elegance
 */
[data-theme="midnight"] {
    --bg-gradient-start: #0a0e27;
    --bg-gradient-end: #151b3d;
    --text-primary: #e8eef9;
    --cell-bg: #1e2749;
    --cell-border: #2d3659;
    --cell-hover: #7c3aed;
    --cell-active: #7c3aed;
    --cell-active-border: #9d66f7;
    --cell-active-shadow: rgba(124, 58, 237, 0.5);
    --button-bg: #1e2749;
    --button-border: #2d3659;
    --button-hover: #2d3659;
    --error-text: #fbbf24;
}

/* Theme: Warm Sepia
 * Built-in theme - Cozy sepia comfort
 */
[data-theme="warm"] {
    --bg-gradient-start: #2a2318;
    --bg-gradient-end: #3a2f20;
    --text-primary: #f5e6d3;
    --cell-bg: #4a3d2a;
    --cell-border: #5a4a35;
    --cell-hover: #f59e0b;
    --cell-active: #f59e0b;
    --cell-active-border: #fbbf24;
    --cell-active-shadow: rgba(245, 158, 11, 0.5);
    --button-bg: #4a3d2a;
    --button-border: #5a4a35;
    --button-hover: #5a4a35;
    --error-text: #fca5a5;
}

/* Theme: Cyberdeck
 * Designed by: Gemini 3 Pro (Google)
 */
[data-theme="cyberdeck"] {
    --bg-gradient-start: #050a07;
    --bg-gradient-end: #022c22;
    --text-primary: #e2e8f0;
    --cell-bg: #15221b;
    --cell-border: #1f3628;
    --cell-hover: #10b981;
    --cell-active: #10b981;
    --cell-active-border: #059669;
    --cell-active-shadow: rgba(16, 185, 129, 0.5);
    --button-bg: #15221b;
    --button-border: #1f3628;
    --button-hover: #1f3628;
    --error-text: #fca5a5;
}

/* Theme: Glacial Drift
 * Designed by: ChatGPT (OpenAI GPT-4)
 */
[data-theme="glacial-drift"] {
    --bg-gradient-start: #0e181e;
    --bg-gradient-end: #1a2e38;
    --text-primary: #e6f4f8;
    --cell-bg: #1c2f38;
    --cell-border: #26404a;
    --cell-hover: #6ed0ff;
    --cell-active: #6ed0ff;
    --cell-active-border: #8ae0ff;
    --cell-active-shadow: rgba(110, 208, 255, 0.5);
    --button-bg: #1c2f38;
    --button-border: #26404a;
    --button-hover: #26404a;
    --error-text: #ffb5bd;
}

/* Theme: Emerald Canopy
 * Designed by: DeepSeek Reasoner
 */
[data-theme="emerald-canopy"] {
    --bg-gradient-start: #0d1a0f;
    --bg-gradient-end: #122018;
    --text-primary: #e5f0e7;
    --cell-bg: #243d27;
    --cell-border: rgba(92, 128, 97, 0.3);
    --cell-hover: #2dd4bf;
    --cell-active: #2dd4bf;
    --cell-active-border: #0d9488;
    --cell-active-shadow: rgba(45, 212, 191, 0.5);
    --button-bg: #243d27;
    --button-border: rgba(92, 128, 97, 0.3);
    --button-hover: rgba(92, 128, 97, 0.5);
    --error-text: #fca5a5;
}

/* Theme: Hacker Terminal
 * Designed by: Claude Opus (Anthropic)
 */
[data-theme="hacker-terminal"] {
    --bg-gradient-start: #0a0f0a;
    --bg-gradient-end: #0d1812;
    --text-primary: #00ff41;
    --cell-bg: #111a14;
    --cell-border: #1a3320;
    --cell-hover: #00ff41;
    --cell-active: #00ff41;
    --cell-active-border: #33ff66;
    --cell-active-shadow: rgba(0, 255, 65, 0.5);
    --button-bg: #111a14;
    --button-border: #1a3320;
    --button-hover: #1a3320;
    --error-text: #ff6666;
}

/* Theme: Giraffe
 * Description: Warm savanna-inspired theme with sandy tans and golden browns
 */
[data-theme="giraffe"] {
    --bg-gradient-start: #F5E6D0;
    --bg-gradient-end: #EAD8BF;
    --text-primary: #3E2A1E;
    --cell-bg: #EDD4B8;
    --cell-border: #C9B79C;
    --cell-hover: #D4842C;
    --cell-active: #D4842C;
    --cell-active-border: #E69A4A;
    --cell-active-shadow: rgba(212, 132, 44, 0.5);
    --button-bg: #DFC9A8;
    --button-border: #C9B79C;
    --button-hover: #D4842C;
    --error-text: #8B3A1E;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    text-align: center;
    padding: 2rem;
    position: relative;
}

.theme-toggle {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background: var(--button-hover);
    border-color: var(--cell-hover);
}

h1 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.pattern-grid {
    display: inline-grid;
    grid-template-columns: repeat(5, 60px);
    grid-template-rows: repeat(5, 60px);
    gap: 8px;
    margin-bottom: 2rem;
    user-select: none;
}

.cell {
    width: 60px;
    height: 60px;
    background: var(--cell-bg);
    border: 2px solid var(--cell-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cell:hover {
    border-color: var(--cell-hover);
}

.cell.active {
    background: var(--cell-active);
    border-color: var(--cell-active-border);
    box-shadow: 0 0 20px var(--cell-active-shadow);
}

#clear-btn {
    background: var(--button-bg);
    color: var(--text-primary);
    border: 1px solid var(--button-border);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#clear-btn:hover {
    background: var(--button-hover);
    border-color: var(--cell-hover);
}

.error-msg {
    margin-top: 1rem;
    color: var(--error-text);
    font-size: 0.9rem;
}

.error-msg.hidden {
    display: none;
}

@media (max-width: 480px) {
    .pattern-grid {
        grid-template-columns: repeat(5, 50px);
        grid-template-rows: repeat(5, 50px);
        gap: 6px;
    }
    
    .cell {
        width: 50px;
        height: 50px;
    }
}