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

/* --- Root Variables & Default Theme (Classic) --- */
:root {
    --bg-color: #ecf0f1;
    --text-color: #333333;
    --snake-color: #28a745;
    --canvas-bg: #ffffff;
    --border-color: #00b8d4; 
}

/* Theme Colors */
.theme-classic {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --snake-color: #1e7e34;
    --canvas-bg: #ffffff;
    --border-color: #343a40;
}

body.theme-dark {
    --bg-color: #1a1a1a;
    --text-color: #f8f9fa;
    --snake-color: #51cf66;
    --canvas-bg: #2d2d2d;
    --border-color: #339af0;
}

body.theme-neon {
    --bg-color: #000000;
    --text-color: #39ff14; 
    --snake-color: #39ff14;
    --canvas-bg: #0a0a0a;
    --border-color: #ff00ff; 
}

body.theme-garfield {
    --bg-color: #fca311;           
    --text-color: #000000;         
    --snake-color: #6d2301;        
    --canvas-bg: #ffeaa7;          
    --border-color: #9d3a05;       
    --button-text-color: #000000;  
}

body.theme-uncaffeinated {
    --bg-color: #2c1e16;           
    --text-color: #f3e5ab;         
    --snake-color: #d35400;        
    --canvas-bg: #3e2723;          
    --border-color: #f39c12;       
    --button-text-color: #ffffff;
}

body.theme-una {
    --bg-color: #f0f0f5;           
    --text-color: #592B8A;         
    --snake-color: #FFB92A;        
    --canvas-bg: #ffffff;          
    --border-color: #592B8A;       
    --button-text-color: #592B8A;  
}

/* --- Global Styles --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    min-height: 100vh;
}

.site-title {
    letter-spacing: 2px;
    color: var(--text-color);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

/* --- Utility Classes for No-Inline Requirement --- */
.bg-canvas { background-color: var(--canvas-bg) !important; }
.bg-theme { background-color: var(--bg-color) !important; }
.text-theme { color: var(--text-color) !important; }
.bg-theme-header { background-color: var(--border-color); }
.text-theme-header { color: var(--bg-color); }
.bg-hud-stats { background-color: rgba(0,0,0,0.03); }
.snake-score-color { color: var(--snake-color); }
.btn-start-custom { background-color: var(--snake-color); color: var(--button-text-color, var(--canvas-bg)); }
.btn-outline-custom { border: 1px solid var(--border-color); color: var(--text-color); background-color: transparent; }
.input-custom { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-color); }
.table-theme-custom { --bs-table-bg: transparent; --bs-table-color: var(--text-color); }
.overlay-start { background-color: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
.overlay-gameover { background-color: rgba(255, 0, 0, 0.2); backdrop-filter: blur(6px); }
.text-shadow-heavy { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.text-shadow-medium { text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* --- Layout Controls --- */
.game-container-viewport {
    min-height: 560px; /* Aligns with the 520px canvas + padding */
}

.hud-panel {
    background-color: var(--bg-color);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

body.theme-neon .hud-panel,
body.theme-dark .hud-panel {
    border: 1px solid rgba(255,255,255,0.1);
}

body.theme-garfield .hud-panel {
    border: 2px solid var(--border-color);
}

.tracking-wide {
    letter-spacing: 0.05em;
}

/* --- Game Canvas & Containers --- */
#game-board canvas {
    border: 4px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background-color: var(--canvas-bg);
    max-width: 100%;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
}

body.theme-neon #game-board canvas {
    box-shadow: 0 0 20px var(--snake-color);
}

#startScreen, #gameOverScreen {
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* --- Modal & Input Styling --- */
.btn-close-white {
    filter: invert(1);
    opacity: 0.5;
}

.text-dark {
    color: #212529 !important;
}

/* --- Mobile Controls Styling --- */
@media (min-width: 992px) {
    #mobileControls {
        display: none !important;
    }
}

#mobileControls .btn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    background-color: var(--border-color);
    border: none;
    color: var(--bg-color);
}

#mobileControls .btn:active {
    filter: brightness(1.2);
}

@media (max-width: 991px) and (orientation: landscape) {
    .game-container-viewport {
        min-height: 80vh;
    }
}