/* --- THEME VARIABLES --- */
:root, [data-theme="night"] {
    --bg-start: #0a0a1a; --bg-mid: #100f24; --bg-end: #0a0a1a;
    --text-main: #e0e0e0; --text-accent: #a5b4fc; --text-muted: #9ca3af;
    --card-bg: #1a1a2e; --card-border: #3a3a5e;
    --neon-shadow-color: #6366f1; --neon-shadow-color-light: #818cf8;
    --btn-border: #6366f1; --btn-hover-bg: #6366f1;
}
[data-theme="day"] {
    --bg-start: #050508; --bg-mid: #000000; --bg-end: #050508;
    --text-main: #f0f0f0; --text-accent: #eab308; --text-muted: #a1a1aa;
    --card-bg: #18181b; --card-border: #3f3f46;
    --neon-shadow-color: #eab308; --neon-shadow-color-light: #fde047;
    --btn-border: #eab308; --btn-hover-bg: #eab308;
}
[data-theme="forest"] {
    --bg-start: #0c1412; --bg-mid: #1a2c28; --bg-end: #0c1412;
    --text-main: #e8f5e9; --text-accent: #81c784; --text-muted: #a5d6a7;
    --card-bg: #2e4740; --card-border: #4caf50;
    --neon-shadow-color: #4caf50; --neon-shadow-color-light: #a5d6a7;
    --btn-border: #81c784; --btn-hover-bg: #81c784;
}
[data-theme="ocean"] {
    --bg-start: #0b1c2e; --bg-mid: #132d4b; --bg-end: #0b1c2e;
    --text-main: #e1f5fe; --text-accent: #4fc3f7; --text-muted: #b3e5fc;
    --card-bg: #1e4064; --card-border: #29b6f6;
    --neon-shadow-color: #03a9f4; --neon-shadow-color-light: #81d4fa;
    --btn-border: #4fc3f7; --btn-hover-bg: #4fc3f7;
}
[data-theme="halloween"] {
    --bg-start: #000000; --bg-mid: #080808; --bg-end: #000000;
    --text-main: #f0f0f0; --text-accent: #d4d4d4; --text-muted: #a3a3a3;
    --card-bg: #1c1c1c; --card-border: #525252;
    --neon-shadow-color: #a3a3a3; --neon-shadow-color-light: #e5e5e5;
    --btn-border: #a3a3a3; --btn-hover-bg: #d4d4d4;
}
[data-theme="christmas"] {
    --bg-start: #0f172a; --bg-mid: #1e293b; --bg-end: #0f172a;
    --text-main: #e2e8f0; --text-accent: #ef4444; --text-muted: #94a3b8;
    --card-bg: #334155; --card-border: #dc2626;
    --neon-shadow-color: #ef4444; --neon-shadow-color-light: #f87171;
    --btn-border: #ef4444; --btn-hover-bg: #ef4444;
}

/* --- STYLES USING VARIABLES --- */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-start);
    color: var(--text-main);
    transition: background-color 0.8s ease;
    overflow-x: hidden;
}
.bg-gradient-custom {
      background-image: linear-gradient(to bottom right, var(--bg-start), var(--bg-mid), var(--bg-end));
}
.font-header { font-family: 'Teko', sans-serif; }
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease;
    transform-style: preserve-3d;
}
.card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.03);
    box-shadow: 0 25px 50px -12px var(--neon-shadow-color);
}
.neon-text {
    color: var(--text-main);
    text-shadow: 0 0 5px var(--neon-shadow-color), 0 0 10px var(--neon-shadow-color), 0 0 20px var(--neon-shadow-color-light);
    transition: text-shadow 0.5s ease, color 0.5s ease;
}
.text-accent { color: var(--text-accent); transition: color 0.5s ease; }
.text-muted { color: var(--text-muted); transition: color 0.5s ease;}
.btn {
    transition: all 0.3s ease;
    border: 1px solid var(--btn-border);
    color: var(--text-main);
}
.btn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--bg-mid);
    box-shadow: 0 0 15px var(--btn-border);
    transform: translateY(-2px);
}

@keyframes flicker {
    0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% { opacity: 0.99; filter: brightness(1); }
    20%, 21.9%, 63%, 63.9%, 65%, 69.9% { opacity: 0.4; filter: brightness(0.8); }
}
/* Apply flicker only to neon-text headers in day mode */
[data-theme="day"] .neon-text { 
    animation: flicker 5s infinite linear; 
}

.background-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    transition: opacity 1.5s ease;
    opacity: 0;
}
.background-canvas.active { opacity: 1; }