/* Weather Mood - Weather Theme Styles */

/* Base weather theme variables */
:root {
    --clear-primary: #87CEEB;
    --clear-secondary: #FFD700;
    --clear-accent: #98FB98;
    
    --sunny-primary: #FFA500;
    --sunny-secondary: #FFD700;
    --sunny-accent: #FFFFE0;
    
    --cloudy-primary: #708090;
    --cloudy-secondary: #D3D3D3;
    --cloudy-accent: #F5F5F5;
    
    --rainy-primary: #4682B4;
    --rainy-secondary: #5F9EA0;
    --rainy-accent: #E0F6FF;
    
    --snowy-primary: #F0F8FF;
    --snowy-secondary: #E6E6FA;
    --snowy-accent: #FFFAFA;
    
    --stormy-primary: #23321E;
    --stormy-secondary: #374828;
    --stormy-accent: #506040;
}

/* Clear Weather Theme */
.weather-clear {
    background: linear-gradient(135deg, 
        rgba(135, 206, 235, 0.8) 0%, 
        rgba(255, 215, 0, 0.6) 50%, 
        rgba(152, 251, 152, 0.4) 100%);
}

/* Standardized header and footer for all weather conditions */
.weather-clear .game-header,
.weather-clear .game-controls,
.weather-sunny .game-header,
.weather-sunny .game-controls,
.weather-cloudy .game-header,
.weather-cloudy .game-controls,
.weather-rainy .game-header,
.weather-rainy .game-controls,
.weather-snowy .game-header,
.weather-snowy .game-controls,
.weather-stormy .game-header,
.weather-stormy .game-controls {
    background: rgba(25, 25, 112, 0.95) !important;
    border-color: rgba(70, 130, 180, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px);
}


/* Sunny Weather Theme */
.weather-sunny {
    background: linear-gradient(135deg, 
        rgba(255, 165, 0, 0.8) 0%, 
        rgba(255, 215, 0, 0.9) 50%, 
        rgba(255, 255, 224, 0.6) 100%);
}



/* Cloudy Weather Theme */
.weather-cloudy {
    background: linear-gradient(135deg, 
        rgba(112, 128, 144, 0.7) 0%, 
        rgba(211, 211, 211, 0.6) 50%, 
        rgba(245, 245, 245, 0.4) 100%);
}



/* Rainy Weather Theme */
.weather-rainy {
    background: linear-gradient(135deg, 
        rgba(70, 130, 180, 0.8) 0%, 
        rgba(95, 158, 160, 0.7) 50%, 
        rgba(224, 246, 255, 0.5) 100%);
}



/* Snowy Weather Theme */
.weather-snowy {
    background: linear-gradient(135deg, 
        rgba(240, 248, 255, 0.9) 0%, 
        rgba(230, 230, 250, 0.8) 50%, 
        rgba(255, 250, 250, 0.7) 100%);
}



/* Stormy Weather Theme — alias mirrors .weather-thunderstorm (DEC-021) */
.weather-stormy {
    background: linear-gradient(135deg,
        rgba(35,50,30,0.88) 0%,
        rgba(55,72,42,0.75) 50%,
        rgba(80,95,60,0.55) 100%);
}



/* Standardized control buttons for all weather conditions */
.weather-clear .control-btn,
.weather-sunny .control-btn,
.weather-cloudy .control-btn,
.weather-rainy .control-btn,
.weather-snowy .control-btn,
.weather-stormy .control-btn {
    background: rgba(70, 130, 180, 0.3) !important;
    border-color: rgba(70, 130, 180, 0.6) !important;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.weather-clear .control-btn:hover,
.weather-sunny .control-btn:hover,
.weather-cloudy .control-btn:hover,
.weather-rainy .control-btn:hover,
.weather-snowy .control-btn:hover,
.weather-stormy .control-btn:hover {
    background: rgba(70, 130, 180, 0.5) !important;
    border-color: rgba(70, 130, 180, 0.8) !important;
    box-shadow: 0 4px 15px rgba(70, 130, 180, 0.4);
    transform: translateY(-2px);
}

/* Standardized text colors for all header elements */
.weather-clear .game-header *,
.weather-sunny .game-header *,
.weather-cloudy .game-header *,
.weather-rainy .game-header *,
.weather-snowy .game-header *,
.weather-stormy .game-header * {
    color: white !important;
}

.weather-clear .game-controls *,
.weather-sunny .game-controls *,
.weather-cloudy .game-controls *,
.weather-rainy .game-controls *,
.weather-snowy .game-controls *,
.weather-stormy .game-controls * {
    color: white !important;
}

/* Weather Intensity Modifiers */
.weather-light {
    filter: brightness(1.1) saturate(0.8);
}

.weather-moderate {
    filter: brightness(1) saturate(1);
}

.weather-heavy {
    filter: brightness(0.9) saturate(1.2);
}

/* Temperature Modifiers */
.temp-cold {
    filter: hue-rotate(240deg) brightness(0.8);
}

.temp-cold .game-header,
.temp-cold .game-controls {
    background: rgba(173, 216, 230, 0.3);
}

.temp-cool {
    filter: hue-rotate(180deg) brightness(0.9);
}

.temp-warm {
    filter: hue-rotate(-30deg) brightness(1.1);
}

.temp-hot {
    filter: hue-rotate(-60deg) brightness(1.2) saturate(1.3);
}

.temp-hot .game-header,
.temp-hot .game-controls {
    background: rgba(255, 69, 0, 0.2);
}

/* Time of Day Modifiers */
.time-dawn {
    filter: sepia(0.2) hue-rotate(20deg);
}

.time-dawn .game-header,
.time-dawn .game-controls {
    background: rgba(255, 192, 203, 0.2);
}

.time-day {
    filter: brightness(1.1);
}

.time-dusk {
    filter: sepia(0.3) hue-rotate(-10deg) brightness(0.9);
}

.time-dusk .game-header,
.time-dusk .game-controls {
    background: rgba(255, 140, 0, 0.2);
}

.time-night {
    filter: brightness(0.6) saturate(0.8) hue-rotate(240deg);
}

.time-night .game-header,
.time-night .game-controls {
    background: rgba(25, 25, 112, 0.4);
}

/* Weather-specific particle effects */
.weather-rainy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.6)"/><circle cx="30" cy="20" r="1" fill="rgba(255,255,255,0.4)"/><circle cx="50" cy="5" r="1" fill="rgba(255,255,255,0.5)"/><circle cx="70" cy="15" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="8" r="1" fill="rgba(255,255,255,0.6)"/></svg>') repeat;
    animation: rainDrop 2s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.weather-snowy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.8)"/><circle cx="30" cy="20" r="1.5" fill="rgba(255,255,255,0.6)"/><circle cx="50" cy="5" r="2.5" fill="rgba(255,255,255,0.9)"/><circle cx="70" cy="15" r="1" fill="rgba(255,255,255,0.7)"/><circle cx="90" cy="8" r="2" fill="rgba(255,255,255,0.8)"/></svg>') repeat;
    animation: snowFall 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Weather transition animations */
.weather-transition {
    transition: all 1s ease-in-out;
}

/* Special weather effects */
.weather-stormy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    animation: lightning 3s infinite;
    pointer-events: none;
    z-index: 2;
}

/* Loading screen weather-specific styling */
.weather-clear .loading-screen {
    background: linear-gradient(135deg, #87CEEB 0%, #FFD700 100%);
}

.weather-sunny .loading-screen {
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
}

.weather-cloudy .loading-screen {
    background: linear-gradient(135deg, #708090 0%, #D3D3D3 100%);
}

.weather-rainy .loading-screen {
    background: linear-gradient(135deg, #4682B4 0%, #5F9EA0 100%);
}

.weather-snowy .loading-screen {
    background: linear-gradient(135deg, #F0F8FF 0%, #E6E6FA 100%);
}

.weather-stormy .loading-screen {
    background: linear-gradient(135deg, #23321E 0%, #374828 100%);
}

/* Modal weather theming */
.weather-clear .modal-content {
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.weather-sunny .modal-content {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.weather-cloudy .modal-content {
    background: linear-gradient(135deg, rgba(112, 128, 144, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.weather-rainy .modal-content {
    background: linear-gradient(135deg, rgba(70, 130, 180, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.weather-snowy .modal-content {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.weather-stormy .modal-content {
    background: linear-gradient(135deg, rgba(35, 50, 30, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* Weather-specific animations */
@keyframes rainDrop {
    0% { transform: translateY(-100px) translateX(0); }
    100% { transform: translateY(100vh) translateX(20px); }
}

@keyframes snowFall {
    0% { transform: translateY(-100px) translateX(0) rotate(0deg); }
    100% { transform: translateY(100vh) translateX(-20px) rotate(360deg); }
}

@keyframes lightning {
    0%, 90%, 100% { opacity: 0; }
    1%, 5% { opacity: 1; }
}

/* Weather intensity effects */
.weather-heavy.weather-rainy::before {
    animation-duration: 1s;
    opacity: 0.8;
}

.weather-heavy.weather-snowy::before {
    animation-duration: 3s;
    opacity: 1;
}

.weather-heavy.weather-stormy .game-canvas {
    animation: shake 0.1s infinite;
}

/* Stop shake animation when game is paused or over */
body.game-paused .game-canvas,
body.game-over .game-canvas {
    animation: none !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

/* Fog/Mist effect */
.weather-fog::before,
.weather-mist::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: fog 10s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes fog {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Wind effect on UI elements */
.weather-windy .control-btn {
    animation: sway 2s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(2px) rotate(0.5deg); }
    75% { transform: translateX(-2px) rotate(-0.5deg); }
}

/* Responsive weather effects */
@media (max-width: 768px) {
    .weather-rainy::before,
    .weather-snowy::before {
        opacity: 0.5;
    }
    
    .weather-stormy::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-rainy::before,
    .weather-snowy::before,
    .weather-stormy::after,
    .weather-fog::before,
    .weather-mist::before {
        animation: none;
    }

    .weather-windy .control-btn {
        animation: none;
    }

    .weather-heavy.weather-stormy {
        animation: none;
    }
}

/* ============================================================================
   Phase 0a Stage 1 — K 8-canonical class aliases + MOOD CSS custom properties
   ----------------------------------------------------------------------------
   Adopts the canonical class names per K WEATHER_DATA_SOURCES.md and DEC-010 Q4.
   Old .weather-{clear,sunny,cloudy,rainy,snowy,stormy} are retained as
   transitional aliases — to be removed in Phase 0a Stage 2 once all callers
   migrate. New names are 8: clear-sunny, partly-cloudy, cloudy-overcast,
   rain-drizzle, thunderstorm, snow-sleet, fog-mist, extreme.
   ============================================================================ */

:root {
    /* MOOD bucket accents per WEATHER_DATA_SOURCES.md (K taxonomy + L precision-gap fix). */
    --mood-bright:    rgba(255, 215, 0, 0.6);    /* clear/sunny */
    --mood-precision: rgba(200, 220, 255, 0.55); /* partly-cloudy */
    --mood-neutral:   rgba(211, 211, 211, 0.5);  /* cloudy/overcast */
    --mood-calm:      rgba(70, 130, 180, 0.5);   /* rain/drizzle */
    --mood-dramatic:  rgba(35, 50, 30, 0.55);    /* thunderstorm */
    --mood-muted:     rgba(230, 230, 250, 0.5);  /* snow/sleet */
    --mood-hushed:    rgba(180, 180, 200, 0.5);  /* fog/mist */
    --mood-intense:   rgba(220, 60, 30, 0.55);   /* extreme */
}

.weather-clear-sunny {
    background: linear-gradient(135deg,
        rgba(79,179,232,0.85) 0%,
        rgba(245,200,50,0.5) 50%,
        rgba(120,200,100,0.3) 100%);
}
.weather-partly-cloudy {
    background: linear-gradient(135deg,
        rgba(140,170,195,0.75) 0%,
        rgba(190,205,215,0.6) 50%,
        rgba(230,235,240,0.4) 100%);
}
.weather-cloudy-overcast {
    background: linear-gradient(135deg,
        rgba(92,107,115,0.78) 0%,
        rgba(140,155,160,0.65) 50%,
        rgba(200,205,210,0.45) 100%);
}
.weather-rain-drizzle {
    background: linear-gradient(135deg,
        rgba(50,70,90,0.85) 0%,
        rgba(70,95,115,0.72) 50%,
        rgba(100,120,135,0.55) 100%);
}
.weather-thunderstorm {
    background: linear-gradient(135deg,
        rgba(35,50,30,0.88) 0%,
        rgba(55,72,42,0.75) 50%,
        rgba(80,95,60,0.55) 100%);
}
.weather-snow-sleet {
    background: linear-gradient(135deg,
        rgba(200,220,235,0.90) 0%,
        rgba(220,232,242,0.82) 50%,
        rgba(240,245,250,0.72) 100%);
}
.weather-fog-mist {
    background: linear-gradient(135deg,
        rgba(165,172,178,0.72) 0%,
        rgba(195,200,205,0.62) 50%,
        rgba(225,228,232,0.52) 100%);
}
.weather-extreme {
    background: linear-gradient(135deg,
        rgba(15,15,15,0.92) 0%,
        rgba(130,60,20,0.60) 50%,
        rgba(30,25,20,0.75) 100%);
}

/* Shared header/control rules extended to 8 canonical classes */
.weather-clear-sunny .game-header,    .weather-clear-sunny .game-controls,
.weather-partly-cloudy .game-header,  .weather-partly-cloudy .game-controls,
.weather-cloudy-overcast .game-header,.weather-cloudy-overcast .game-controls,
.weather-rain-drizzle .game-header,   .weather-rain-drizzle .game-controls,
.weather-thunderstorm .game-header,   .weather-thunderstorm .game-controls,
.weather-snow-sleet .game-header,     .weather-snow-sleet .game-controls,
.weather-fog-mist .game-header,       .weather-fog-mist .game-controls,
.weather-extreme .game-header,        .weather-extreme .game-controls {
    background: rgba(25, 25, 112, 0.95) !important;
    border-color: rgba(70, 130, 180, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px);
}

.weather-clear-sunny .control-btn,
.weather-partly-cloudy .control-btn,
.weather-cloudy-overcast .control-btn,
.weather-rain-drizzle .control-btn,
.weather-thunderstorm .control-btn,
.weather-snow-sleet .control-btn,
.weather-fog-mist .control-btn,
.weather-extreme .control-btn {
    background: rgba(70, 130, 180, 0.3) !important;
    border-color: rgba(70, 130, 180, 0.6) !important;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.weather-clear-sunny .control-btn:hover,
.weather-partly-cloudy .control-btn:hover,
.weather-cloudy-overcast .control-btn:hover,
.weather-rain-drizzle .control-btn:hover,
.weather-thunderstorm .control-btn:hover,
.weather-snow-sleet .control-btn:hover,
.weather-fog-mist .control-btn:hover,
.weather-extreme .control-btn:hover {
    background: rgba(70, 130, 180, 0.5) !important;
    border-color: rgba(70, 130, 180, 0.8) !important;
    box-shadow: 0 4px 15px rgba(70, 130, 180, 0.4);
    transform: translateY(-2px);
}

.weather-clear-sunny .game-header *,
.weather-partly-cloudy .game-header *,
.weather-cloudy-overcast .game-header *,
.weather-rain-drizzle .game-header *,
.weather-thunderstorm .game-header *,
.weather-snow-sleet .game-header *,
.weather-fog-mist .game-header *,
.weather-extreme .game-header *,
.weather-clear-sunny .game-controls *,
.weather-partly-cloudy .game-controls *,
.weather-cloudy-overcast .game-controls *,
.weather-rain-drizzle .game-controls *,
.weather-thunderstorm .game-controls *,
.weather-snow-sleet .game-controls *,
.weather-fog-mist .game-controls *,
.weather-extreme .game-controls * {
    color: white !important;
}

/* Particle/effect pseudo-elements for new canonical classes */
.weather-rain-drizzle::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.6)"/><circle cx="30" cy="20" r="1" fill="rgba(255,255,255,0.4)"/><circle cx="50" cy="5" r="1" fill="rgba(255,255,255,0.5)"/><circle cx="70" cy="15" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="8" r="1" fill="rgba(255,255,255,0.6)"/></svg>') repeat;
    animation: rainDrop 2s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.weather-snow-sleet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.8)"/><circle cx="30" cy="20" r="1.5" fill="rgba(255,255,255,0.6)"/><circle cx="50" cy="5" r="2.5" fill="rgba(255,255,255,0.9)"/><circle cx="70" cy="15" r="1" fill="rgba(255,255,255,0.7)"/><circle cx="90" cy="8" r="2" fill="rgba(255,255,255,0.8)"/></svg>') repeat;
    animation: snowFall 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.weather-thunderstorm::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    animation: lightning 3s infinite;
    pointer-events: none;
    z-index: 2;
}
.weather-fog-mist::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: fog 10s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Reduced-motion: freeze new canonical particles + decorative animations (BUG-006 prep) */
@media (prefers-reduced-motion: reduce) {
    .weather-rain-drizzle::before,
    .weather-snow-sleet::before,
    .weather-thunderstorm::after,
    .weather-fog-mist::before {
        animation: none;
    }
}

/* ============================================================================
   PR-CSS-2 (C-VAL-119/124): Per-condition visibility overlay colors (DEC-019)
   ----------------------------------------------------------------------------
   --visibility-overlay-color defines the RGBA tint of the .visibility-overlay
   div created by B's ObjectRenderer. Color communicates weather type; opacity
   and blur scale by tier (see css/main.css .visibility-overlay.tier-visibility-N).
   Placeholders (* below) await K taxonomy canonical class names.
   Merge gated on N a11y sign-off (DEC-019 Status).
   ============================================================================ */
:root {
    --visibility-overlay-color: rgba(100, 120, 140, 0.50); /* fallback: storm grey-blue */
}
/* Existing 8-condition taxonomy */
.weather-clear-sunny     { --visibility-overlay-color: rgba(255, 255, 220, 0.00); }
.weather-partly-cloudy   { --visibility-overlay-color: rgba(200, 210, 220, 0.00); }
.weather-cloudy-overcast { --visibility-overlay-color: rgba(180, 180, 200, 0.12); }
.weather-rain-drizzle    { --visibility-overlay-color: rgba(100, 120, 140, 0.28); }
.weather-thunderstorm    { --visibility-overlay-color: rgba( 60,  80, 100, 0.48); }
.weather-snow-sleet      { --visibility-overlay-color: rgba(230, 240, 255, 0.38); }
.weather-fog-mist        { --visibility-overlay-color: rgba(200, 205, 210, 0.48); }
.weather-extreme         { --visibility-overlay-color: rgba( 30,  40,  50, 0.68); }
/* Phase 3 new conditions — awaiting K taxonomy canonical class names */
.weather-blizzard        { --visibility-overlay-color: rgba(240, 245, 255, 0.68); }
.weather-wildfire        { --visibility-overlay-color: rgba(100,  50,  20, 0.58); }
.weather-volcanic-ash    { --visibility-overlay-color: rgba( 80,  75,  70, 0.78); }
.weather-haboob          { --visibility-overlay-color: rgba(180, 140,  80, 0.68); }
.weather-tsunami         { --visibility-overlay-color: rgba( 40,  80, 100, 0.70); }
.weather-seismic         { --visibility-overlay-color: rgba( 90,  80,  70, 0.55); }
.weather-tropical-storm  { --visibility-overlay-color: rgba( 50,  70,  90, 0.55); }
.weather-ice-storm       { --visibility-overlay-color: rgba(210, 230, 255, 0.58); }

/* BUG-E-007 / C-VAL-155: Tier background fallback colors (used when tier image fails to load) */
.bg-tier-1 { background-color: #87CEEB; } /* Idyllic — sky blue */
.bg-tier-2 { background-color: #B0C4DE; } /* Pleasant — light steel blue */
.bg-tier-3 { background-color: #708090; } /* Unsettled — slate grey */
.bg-tier-4 { background-color: #4A5568; } /* Wet & Blustery — dark slate */
.bg-tier-5 { background-color: #2D3748; } /* Severe Storm — near-black */
.bg-tier-6 { background-color: #1A202C; } /* Extreme Storm — very dark */
.bg-tier-7 { background-color: #0D1117; } /* Catastrophic — almost black */

/* Phase 2/3 / C-VAL-158: Object sprite display classes (NN_name.webp pattern) */
.sprite-object-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.sprite-placeholder {
    background-color: #e8e8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}