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

body {
    font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 2s ease;
}

/* 夕方の天気パターン */
body.clear {
    background: linear-gradient(to bottom, 
        #FF6B6B 0%,
        #FF8E53 20%,
        #FFA07A 40%,
        #FFB6A3 60%,
        #FFD4B8 80%,
        #FFEFD5 100%
    );
}

body.cloudy {
    background: linear-gradient(to bottom,
        #8B5A8B 0%,
        #9B6B8B 20%,
        #B8828B 40%,
        #C99A8B 60%,
        #D9B29B 80%,
        #E9CAAB 100%
    );
}

body.rainy {
    background: linear-gradient(to bottom,
        #4A5568 0%,
        #667084 20%,
        #7B8A9A 40%,
        #90A0B0 60%,
        #A5B6C6 80%,
        #BACCD0 100%
    );
}

body.foggy {
    background: linear-gradient(to bottom,
        #9B8B9B 0%,
        #AE9EAE 20%,
        #C1B1C1 40%,
        #D4C4D4 60%,
        #E7D7E7 80%,
        #F5EAF5 100%
    );
}

body.sunset {
    background: linear-gradient(to bottom,
        #D946A8 0%,
        #E94B75 20%,
        #F95738 40%,
        #FF7B3D 60%,
        #FFA052 80%,
        #FFC46B 100%
    );
}

/* 太陽 */
.sun {
    position: fixed;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    bottom: 25%;
    right: 15%;
    z-index: 1;
    transition: all 2s ease;
}

body.clear .sun {
    background: radial-gradient(circle, #FFE66D 0%, #FF6B6B 70%);
    box-shadow: 0 0 60px rgba(255, 107, 107, 0.6), 0 0 100px rgba(255, 230, 109, 0.4);
}

body.cloudy .sun {
    background: radial-gradient(circle, #FFD4A3 0%, #E8A87C 70%);
    box-shadow: 0 0 80px rgba(232, 168, 124, 0.4);
    opacity: 0.5;
}

body.rainy .sun {
    opacity: 0;
}

body.foggy .sun {
    background: radial-gradient(circle, #FFF5E1 0%, #E5D4C1 70%);
    opacity: 0.3;
    filter: blur(20px);
}

body.sunset .sun {
    background: radial-gradient(circle, #FFC107 0%, #F44336 70%);
    box-shadow: 0 0 80px rgba(255, 193, 7, 0.7), 0 0 120px rgba(244, 67, 54, 0.5);
}

/* 山 */
.mountains {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 2;
}

.mountain {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    transition: all 2s ease;
}

.mountain-back {
    left: 10%;
    border-width: 0 300px 350px 300px;
    border-color: transparent transparent rgba(50, 50, 80, 0.4) transparent;
}

.mountain-mid {
    right: 20%;
    border-width: 0 350px 400px 350px;
    border-color: transparent transparent rgba(40, 40, 70, 0.5) transparent;
}

.mountain-front {
    left: 30%;
    border-width: 0 400px 450px 400px;
    border-color: transparent transparent rgba(30, 30, 60, 0.6) transparent;
}

body.clear .mountain-back {
    border-color: transparent transparent rgba(80, 50, 100, 0.5) transparent;
}

body.clear .mountain-mid {
    border-color: transparent transparent rgba(60, 40, 80, 0.6) transparent;
}

body.clear .mountain-front {
    border-color: transparent transparent rgba(40, 30, 60, 0.7) transparent;
}

body.rainy .mountain-back,
body.rainy .mountain-mid,
body.rainy .mountain-front {
    border-color: transparent transparent rgba(30, 30, 50, 0.8) transparent;
}

.content {
    text-align: center;
    z-index: 10;
    position: relative;
    animation: fadeIn 3s ease;
}

.message {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 300;
    letter-spacing: 0.1em;
}

/* 天気エフェクト */
.weather-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* 雨のエフェクト */
body.rainy .weather-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(180deg, transparent 0%, transparent 70%, rgba(200, 220, 255, 0.5) 70%, rgba(200, 220, 255, 0.5) 71%, transparent 71%, transparent 100%),
        linear-gradient(180deg, transparent 0%, transparent 50%, rgba(180, 200, 255, 0.4) 50%, rgba(180, 200, 255, 0.4) 51%, transparent 51%, transparent 100%);
    background-size: 1px 25px, 1.5px 35px;
    background-position: 0 0, 10px 0;
    animation: rain 0.4s linear infinite;
}

@keyframes rain {
    0% {
        background-position: 0 0, 10px 0;
    }
    100% {
        background-position: 0 25px, 10px 35px;
    }
}

/* 雲のエフェクト */
body.cloudy .weather-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 200px 80px at 20% 20%, rgba(150, 130, 150, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 250px 100px at 60% 35%, rgba(160, 140, 160, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 180px 70px at 80% 15%, rgba(140, 120, 140, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 220px 90px at 40% 50%, rgba(155, 135, 155, 0.32) 0%, transparent 60%);
    animation: cloudMove 40s ease-in-out infinite;
}

body.rainy .weather-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 250px 90px at 15% 25%, rgba(70, 80, 100, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse 280px 110px at 55% 40%, rgba(80, 90, 110, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 200px 80px at 85% 20%, rgba(65, 75, 95, 0.48) 0%, transparent 60%),
        radial-gradient(ellipse 230px 95px at 35% 55%, rgba(75, 85, 105, 0.52) 0%, transparent 60%);
    animation: cloudMove 35s ease-in-out infinite;
}

@keyframes cloudMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(60px);
    }
}

/* 星のエフェクト（晴れた夕方） */
body.clear .weather-effect::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 80px white,
        300px 120px white,
        500px 60px white,
        700px 150px white,
        900px 90px white,
        1100px 130px white,
        200px 100px white,
        600px 140px white,
        800px 70px white,
        1000px 110px white,
        150px 180px rgba(255, 255, 255, 0.6),
        350px 200px rgba(255, 255, 255, 0.6),
        550px 160px rgba(255, 255, 255, 0.6),
        750px 220px rgba(255, 255, 255, 0.6),
        950px 190px rgba(255, 255, 255, 0.6);
    animation: twinkle 3s ease-in-out infinite;
}

body.sunset .weather-effect::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 200, 150, 0.8);
    box-shadow: 
        120px 50px rgba(255, 200, 150, 0.8),
        320px 90px rgba(255, 200, 150, 0.8),
        520px 40px rgba(255, 200, 150, 0.8),
        720px 110px rgba(255, 200, 150, 0.8),
        920px 70px rgba(255, 200, 150, 0.8),
        1120px 100px rgba(255, 200, 150, 0.8);
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* 霧のエフェクト */
body.foggy .weather-effect::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 400px 300px at 30% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 70% 60%, rgba(240, 240, 245, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 350px 280px at 50% 30%, rgba(250, 250, 255, 0.12) 0%, transparent 70%);
    animation: fog 25s ease-in-out infinite;
}

body.foggy .weather-effect::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    animation: fog 30s ease-in-out infinite reverse;
}

@keyframes fog {
    0%, 100% {
        opacity: 0.4;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-40px) scale(1.1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .message {
        font-size: 2.5rem;
    }
    
    .sun {
        width: 100px;
        height: 100px;
        bottom: 30%;
        right: 10%;
    }
    
    .mountain-back {
        border-width: 0 200px 250px 200px;
    }
    
    .mountain-mid {
        border-width: 0 250px 300px 250px;
    }
    
    .mountain-front {
        border-width: 0 280px 330px 280px;
    }
}