/* Theme System - Dynamic Color Variables */

/* Default/Calm Theme (Level 1) */
:root {
    --primary-bg: #1a1a2e;
    --secondary-bg: #16213e;
    --text-color: #eee;
    --text-secondary: #bbb;
    --accent-color: #4a90e2;
    --shadow-color: rgba(74, 144, 226, 0.2);
}

/* Time-Specific Theme Overhauls */

/* 2:57 AM March 14, 2022 - Night of Tragedy */
.theme-night-tragedy {
    --primary-bg: #0a0a15;
    --secondary-bg: #151520;
    --text-color: #c8c8d0;
    --text-secondary: #808090;
    --accent-color: #6b73ff;
    --shadow-color: rgba(107, 115, 255, 0.3);
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
}

/* 3:23 AM - Hospital Morgue */
.theme-hospital-morgue {
    --primary-bg: #f0f0f0;
    --secondary-bg: #ffffff;
    --text-color: #2a2a2a;
    --text-secondary: #666666;
    --accent-color: #ff4757;
    --shadow-color: rgba(255, 71, 87, 0.4);
    background: linear-gradient(180deg, #f0f0f0 0%, #e8e8e8 100%);
}

/* 8:40 AM - Morning Grief */
.theme-morning-grief {
    --primary-bg: #2d2d35;
    --secondary-bg: #3a3a42;
    --text-color: #d4d4d8;
    --text-secondary: #a1a1aa;
    --accent-color: #fbbf24;
    --shadow-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(45deg, #2d2d35 0%, #404040 100%);
}

/* April 3, 2025 Evening - Melancholy */
.theme-evening-melancholy {
    --primary-bg: #1e1e2e;
    --secondary-bg: #2a2a3a;
    --text-color: #cdd6f4;
    --text-secondary: #9399b2;
    --accent-color: #f38ba8;
    --shadow-color: rgba(243, 139, 168, 0.3);
    background: linear-gradient(225deg, #1e1e2e 0%, #313244 100%);
}

/* 6:51 PM - Tea Incident */
.theme-tea-incident {
    --primary-bg: #2e1a1a;
    --secondary-bg: #3e2121;
    --text-color: #f4d4d4;
    --text-secondary: #d4a4a4;
    --accent-color: #ff6b6b;
    --shadow-color: rgba(255, 107, 107, 0.4);
    background: linear-gradient(135deg, #2e1a1a 0%, #4a2c2c 100%);
}

/* 7:40 PM - Branch 1 Horror Discovery */
.theme-horror-discovery {
    --primary-bg: #0f0f1a;
    --secondary-bg: #1a0f1a;
    --text-color: #e0d0e0;
    --text-secondary: #b0a0b0;
    --accent-color: #8a2be2;
    --shadow-color: rgba(138, 43, 226, 0.5);
    background: radial-gradient(circle at center, #1a0f1a 0%, #0f0f1a 70%);
}

/* 8:30 PM - Dinner Solitude */
.theme-dinner-solitude {
    --primary-bg: #2a2a1a;
    --secondary-bg: #3a3a2a;
    --text-color: #e8e8d8;
    --text-secondary: #c8c8b8;
    --accent-color: #d4af37;
    --shadow-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(180deg, #2a2a1a 0%, #3a3a2a 100%);
}

/* 10:10 PM - Storm Night */
.theme-storm-night {
    --primary-bg: #0a0a1a;
    --secondary-bg: #1a1a2a;
    --text-color: #d0d0f0;
    --text-secondary: #a0a0c0;
    --accent-color: #4169e1;
    --shadow-color: rgba(65, 105, 225, 0.6);
    background: linear-gradient(45deg, #0a0a1a 0%, #1a1a2a 50%, #0a0a1a 100%);
}

/* Branch 2 - 7:40 PM Crime Investigation */
.theme-crime-investigation-start {
    --primary-bg: #1a1a1a;
    --secondary-bg: #2a2a2a;
    --text-color: #f0f0f0;
    --text-secondary: #c0c0c0;
    --accent-color: #ffd700;
    --shadow-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Supernatural Encounters */
.theme-supernatural-encounter {
    --primary-bg: #1a0a1a;
    --secondary-bg: #2a1a2a;
    --text-color: #f0e0f0;
    --text-secondary: #d0c0d0;
    --accent-color: #ff69b4;
    --shadow-color: rgba(255, 105, 180, 0.5);
    background: radial-gradient(ellipse at center, #2a1a2a 0%, #1a0a1a 70%);
}

/* Flashback Scenes */
.theme-flashback {
    --primary-bg: #2a2a2a;
    --secondary-bg: #3a3a3a;
    --text-color: #f0f0f0;
    --text-secondary: #d0d0d0;
    --accent-color: #ff8c00;
    --shadow-color: rgba(255, 140, 0, 0.4);
    background: linear-gradient(45deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    filter: sepia(0.3) contrast(1.1);
}

/* Tension Theme (Level 2) */
.theme-tension {
    --primary-bg: #2e1a1a;
    --secondary-bg: #3e1621;
    --text-color: #eee;
    --text-secondary: #cbb;
    --accent-color: #e2904a;
    --shadow-color: rgba(226, 144, 74, 0.3);
}

/* Anxiety Theme (Level 3) */
.theme-anxiety {
    --primary-bg: #2e1a0f;
    --secondary-bg: #3e2116;
    --text-color: #eed;
    --text-secondary: #cba;
    --accent-color: #e25a4a;
    --shadow-color: rgba(226, 90, 74, 0.4);
}

/* Horror Theme (Level 4) - Branch 1 Supernatural */
.theme-horror {
    --primary-bg: #0f0f1a;
    --secondary-bg: #1a0f1a;
    --text-color: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-color: #8a2be2;
    --shadow-color: rgba(138, 43, 226, 0.5);
}

.theme-horror-blood {
    --primary-bg: #1a0f0f;
    --secondary-bg: #2a1616;
    --text-color: #ffe0e0;
    --text-secondary: #cc9999;
    --accent-color: #dc143c;
    --shadow-color: rgba(220, 20, 60, 0.6);
}

/* Crime Theme (Level 4) - Branch 2 Noir */
.theme-crime {
    --primary-bg: #0f0f0f;
    --secondary-bg: #1a1a1a;
    --text-color: #d0d0d0;
    --text-secondary: #909090;
    --accent-color: #ffd700;
    --shadow-color: rgba(255, 215, 0, 0.4);
}

.theme-crime-investigation {
    --primary-bg: #0a0a1a;
    --secondary-bg: #151520;
    --text-color: #c0c0d0;
    --text-secondary: #8080a0;
    --accent-color: #4169e1;
    --shadow-color: rgba(65, 105, 225, 0.4);
}

/* Resolution Themes (Level 5) */
.theme-resolution-peaceful {
    --primary-bg: #1a2e1a;
    --secondary-bg: #213e21;
    --text-color: #eef;
    --text-secondary: #bcb;
    --accent-color: #4ae24a;
    --shadow-color: rgba(74, 226, 74, 0.3);
}

.theme-resolution-tragic {
    --primary-bg: #2e1a2e;
    --secondary-bg: #3e213e;
    --text-color: #eee;
    --text-secondary: #cbc;
    --accent-color: #9a4ae2;
    --shadow-color: rgba(154, 74, 226, 0.4);
}

.theme-resolution-justice {
    --primary-bg: #1a1a2e;
    --secondary-bg: #21213e;
    --text-color: #eef;
    --text-secondary: #bbc;
    --accent-color: #4a4ae2;
    --shadow-color: rgba(74, 74, 226, 0.3);
}

/* Special Effects for Different Themes */

/* Horror Branch Effects */
.theme-horror .story-display,
.theme-horror-blood .story-display {
    position: relative;
    overflow: hidden;
}

.theme-horror .story-display::before,
.theme-horror-blood .story-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

.theme-horror .dialogue-content,
.theme-horror-blood .dialogue-content {
    position: relative;
    z-index: 2;
}

/* Supernatural flicker effect */
.supernatural-flicker {
    animation: supernaturalFlicker 3s ease-in-out infinite;
}

@keyframes supernaturalFlicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.8; }
    50% { opacity: 0.9; }
    75% { opacity: 0.7; }
}

/* Crime Branch Effects */
.theme-crime .story-display,
.theme-crime-investigation .story-display {
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.5),
        var(--shadow-color) 0 4px 20px;
}

/* Noir shadow effect */
.noir-shadows {
    position: relative;
}

.noir-shadows::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%
    );
    pointer-events: none;
}

/* Transition animations between themes */
.theme-transition {
    transition: 
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        box-shadow 2s ease;
}

/* Text effects for different intensities */
.text-glow {
    text-shadow: 0 0 10px var(--accent-color);
}

.text-horror {
    text-shadow: 
        0 0 5px var(--accent-color),
        0 0 10px var(--accent-color),
        0 0 15px var(--accent-color);
}

.text-crime {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px var(--accent-color);
}

/* Specific visual effects for story elements */
.ghost-text {
    opacity: 0.8;
    animation: ghostFloat 4s ease-in-out infinite;
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0px); opacity: 0.8; }
    50% { transform: translateY(-5px); opacity: 0.6; }
}

.blood-drip {
    position: relative;
}

.blood-drip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: var(--accent-color);
    animation: bloodDrip 2s ease-in-out infinite;
}

@keyframes bloodDrip {
    0% { height: 0; opacity: 1; }
    50% { height: 20px; opacity: 0.8; }
    100% { height: 0; opacity: 0; }
}

.investigation-highlight {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 100%
    );
    padding: 2px 4px;
    border-radius: 2px;
}

/* Responsive theme adjustments */
@media (max-width: 768px) {
    .theme-horror .story-display::before,
    .theme-horror-blood .story-display::before {
        background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
    }
    
    .text-horror,
    .text-crime {
        text-shadow: 
            0 0 3px var(--accent-color),
            0 0 6px var(--accent-color);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-bg: #000;
        --secondary-bg: #111;
        --text-color: #fff;
        --text-secondary: #ccc;
    }
    
    .theme-horror,
    .theme-horror-blood,
    .theme-crime,
    .theme-crime-investigation {
        --primary-bg: #000;
        --secondary-bg: #222;
        --text-color: #fff;
        --text-secondary: #ddd;
    }
}

/* Time-based transition effects */
.time-transition {
    animation: timeShift 3s ease-in-out;
}

@keyframes timeShift {
    0% { 
        filter: brightness(1) contrast(1) saturate(1);
        transform: scale(1);
    }
    25% { 
        filter: brightness(0.3) contrast(2) saturate(0.5);
        transform: scale(1.02);
    }
    50% { 
        filter: brightness(0.1) contrast(3) saturate(0);
        transform: scale(1.05);
    }
    75% { 
        filter: brightness(0.7) contrast(1.5) saturate(1.2);
        transform: scale(1.02);
    }
    100% { 
        filter: brightness(1) contrast(1) saturate(1);
        transform: scale(1);
    }
}

/* Hospital morgue specific effects */
.theme-hospital-morgue .story-display {
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(255, 71, 87, 0.2);
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.theme-hospital-morgue .dialogue-content {
    text-shadow: 0 0 2px rgba(42, 42, 42, 0.5);
}

/* Storm night effects */
.theme-storm-night {
    animation: lightning 8s ease-in-out infinite;
}

@keyframes lightning {
    0%, 90%, 100% { filter: brightness(1); }
    91%, 92% { filter: brightness(1.8) contrast(1.2); }
    93% { filter: brightness(1); }
    94%, 95% { filter: brightness(2) contrast(1.5); }
}

/* Supernatural encounter effects */
.theme-supernatural-encounter .story-display {
    position: relative;
    overflow: hidden;
}

.theme-supernatural-encounter .story-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 105, 180, 0.1) 50%, 
        transparent 100%);
    animation: ghostlyPass 4s ease-in-out infinite;
}

@keyframes ghostlyPass {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

/* Flashback sepia effect */
.theme-flashback .story-display {
    position: relative;
}

.theme-flashback .story-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(255, 140, 0, 0.05) 1px,
        transparent 2px
    );
    pointer-events: none;
}

/* Crime investigation noir effects */
.theme-crime-investigation-start .story-display {
    box-shadow: 
        inset 20px 0 40px rgba(0, 0, 0, 0.3),
        inset -20px 0 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.2);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .supernatural-flicker,
    .ghost-text,
    .blood-drip::after,
    .time-transition,
    .theme-storm-night,
    .theme-supernatural-encounter .story-display::before {
        animation: none;
    }
    
    .theme-transition {
        transition: none;
    }
}