/* Giao diện theo mùa - Dựa trên văn hóa Nhật Bản */
body.spring {
    background-color: #F8DDE4;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E91E63' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #C2185B;
}

body.summer {
    background-color: #FFE0B2;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFD12E' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #E65100;
}

body.autumn {
    background-color: #F5CBA7;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E2571E' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #BF360C;
}

body.winter {
    background-color: #D1E9F6;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230079B0' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #01579B;
}

/* Giao diện theo lễ hội */
body.christmas {
    background-color: #EF9A9A;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D32F2F' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #B71C1C;
}

body.tet {
    background-color: #FFD54F;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E91E63' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #C2185B;
}

body.halloween {
    background-color: #4A148C;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Gg fill='%23FF5722' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #FFCCBC;
}

/* Giao diện countdown theo mùa và lễ hội - Dựa trên văn hóa Nhật Bản */
.countdown.spring {
    background: linear-gradient(135deg, #FCE4EC 0%, #F8DDE4 100%);
    border-color: #C2185B;
}

.countdown.summer {
    background: linear-gradient(135deg, #FFF5E6 0%, #FFE0B2 100%);
    border-color: #E65100;
}

.countdown.autumn {
    background: linear-gradient(135deg, #F9EDE4 0%, #F5CBA7 100%);
    border-color: #BF360C;
}

.countdown.winter {
    background: linear-gradient(135deg, #E6F7FF 0%, #D1E9F6 100%);
    border-color: #01579B;
}

.countdown.christmas {
    background: linear-gradient(135deg, #FFF0F0 0%, #EF9A9A 100%);
    border-color: #B71C1C;
}

.countdown.tet {
    background: linear-gradient(135deg, #FFF8E6 0%, #FFD54F 100%);
    border-color: #E91E63;
}

.countdown.halloween {
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 100%);
    border-color: #FF5722;
}

/* Theme Overlay */
.theme-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
    animation: backgroundShift 30s ease-in-out infinite;
}

body.spring .theme-overlay, body.hanami .theme-overlay {
    background: linear-gradient(135deg, #FCE4EC 0%, #F8DDE4 50%, #F5C9D8 100%);
}

body.summer .theme-overlay, body.obon .theme-overlay {
    background: linear-gradient(135deg, #FFF5E6 0%, #FFE0B2 50%, #FFCC80 100%);
}

body.autumn .theme-overlay, body.tsukimi .theme-overlay {
    background: linear-gradient(135deg, #F9EDE4 0%, #F5CBA7 50%, #F0A869 100%);
}

body.winter .theme-overlay {
    background: linear-gradient(135deg, #E6F7FF 0%, #D1E9F6 50%, #B3E5FC 100%);
}

body.christmas .theme-overlay {
    background: linear-gradient(135deg, #FFF0F0 0%, #FFCDD2 50%, #EF9A9A 100%);
}

body.tet .theme-overlay {
    background: linear-gradient(135deg, #FFF8E6 0%, #FFE082 50%, #FFD54F 100%);
}

body.halloween .theme-overlay {
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%);
}

/* Animations cho hiệu ứng theo chủ đề */
@keyframes backgroundShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}

@keyframes sway {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

@keyframes blink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

@keyframes explode {
    0% { transform: scale(0); opacity: 1; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
    70% { transform: scale(2); opacity: 0.8; box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
    100% { transform: scale(0); opacity: 0; box-shadow: 0 0 10px rgba(255, 255, 255, 0); }
}

@keyframes fly {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(20px) translateY(-10px); }
    50% { transform: translateX(40px) translateY(0); }
    75% { transform: translateX(20px) translateY(10px); }
    100% { transform: translateX(0) translateY(0); }
}

/* Giao diện cho lễ hội Nhật Bản */
.hanami .countdown {
    background: linear-gradient(135deg, #FFE6F2 0%, #F8DDE4 100%);
    border-color: #C2185B;
}

.obon .countdown {
    background: linear-gradient(135deg, #FFF0E6 0%, #FFE0CC 100%);
    border-color: #E64A19;
}

.tsukimi .countdown {
    background: linear-gradient(135deg, #E6F2FF 0%, #D1E9F6 100%);
    border-color: #1976D2;
}

.hanami .game-button, .hanami .feature-button, .hanami .music-control, .hanami .share-button {
    background: #E91E63;
    border-color: #C2185B;
}

.obon .game-button, .obon .feature-button, .obon .music-control, .obon .share-button {
    background: #FF5722;
    border-color: #E64A19;
}

.tsukimi .game-button, .tsukimi .feature-button, .tsukimi .music-control, .tsukimi .share-button {
    background: #2196F3;
    border-color: #1976D2;
}

/* ===== THEME EFFECTS CSS CLASSES ===== */
/* Base class for all theme effects */
.theme-effect {
    position: fixed;
    pointer-events: none;
    z-index: 1;
}

/* Heat Wave Effect */
.heat-wave {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 0, 0.05);
    opacity: 0.3;
    animation: heatWave 3s ease-in-out infinite;
}

/* Sun Glare Effect */
.sun-glare {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(255, 255, 100, 0.3), transparent);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

/* Bat Effect */
.bat {
    width: 15px;
    height: 8px;
    background-color: #000;
    border-radius: 50% 50% 0 0;
    opacity: 0.7;
    animation: fly 4s ease-in-out infinite;
}

/* Petal Effect */
.petal {
    width: 8px;
    height: 8px;
    background-color: #FF9EB5;
    border-radius: 50%;
    opacity: 0.7;
    animation: fall 7s linear infinite;
}

/* Leaf Effect */
.leaf {
    opacity: 0.8;
    animation: fall 10s linear infinite, sway 2.5s ease-in-out infinite, rotate 3.5s linear infinite;
}

/* Snowflake Effect */
.snowflake {
    width: 4px;
    height: 4px;
    background-color: #FFF;
    border-radius: 50%;
    opacity: 0.6;
    animation: fall 8s linear infinite;
}

/* Lantern Effect */
.lantern {
    width: 15px;
    height: 20px;
    background-color: #FF4500;
    border-radius: 10%;
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
    animation: float 4s ease-in-out infinite;
}

/* Christmas Light Effect */
.christmas-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    animation: blink 1.5s ease-in-out infinite;
}

/* Firework Effect */
.firework {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: explode 2s ease-out forwards;
}

/* Ghost Effect */
.ghost {
    background-color: #FFF;
    border-radius: 50% 50% 0 0;
    opacity: 0.5;
    animation: float 7s ease-in-out infinite;
}

/* Theme Indicator */
.theme-indicator {
    position: fixed;
    top: 60px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 12px;
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 1.0;
}

/* ===== ADDITIONAL ANIMATIONS ===== */
@keyframes heatWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.02); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}