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

body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
    background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460, #e94560);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    min-height: 100vh;
    position: relative;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.container {
    text-align: center;
    padding: 50px 20px;
    position: relative;
    z-index: 10;
}

/* 星空背景 */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite alternate;
    box-shadow: 
        100px 200px white,
        200px 100px white,
        300px 300px white,
        400px 150px white,
        500px 250px white,
        600px 50px white,
        700px 350px white,
        800px 200px white,
        900px 100px white,
        1000px 300px white,
        150px 400px white,
        250px 50px white,
        350px 150px white,
        450px 350px white,
        550px 100px white,
        650px 300px white,
        750px 150px white,
        850px 50px white,
        950px 250px white,
        50px 350px white;
}

.stars::after {
    animation-delay: 1.5s;
    transform: scale(0.8);
}

@keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* 主標題 */
.main-title {
    font-size: 4rem;
    font-weight: bold;
    margin: 100px 0 50px 0;
    position: relative;
    display: inline-block;
    text-shadow: 
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 30px #ff00ff,
        0 0 40px #ff00ff;
}

.char {
    display: inline-block;
    position: relative;
    color: #fff;
    font-size: 5rem;
    margin: 0 10px;
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 
        0 0 15px #f39c12,
        0 0 25px #e67e22,
        0 0 35px #d35400;
}

.char:nth-child(1) { animation-delay: 0s; }
.char:nth-child(2) { animation-delay: 0.2s; }
.char:nth-child(3) { animation-delay: 0.4s; }
.char:nth-child(4) { animation-delay: 0.6s; }
.char:nth-child(5) { animation-delay: 0.8s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(2deg); }
    66% { transform: translateY(-10px) rotate(-2deg); }
}

.char:hover {
    transform: scale(1.2) rotate(10deg) !important;
    text-shadow: 
        0 0 20px #f39c12,
        0 0 30px #e67e22,
        0 0 40px #d35400,
        0 0 50px #e74c3c;
    animation: rainbow 0.5s ease;
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* 英文標題 */
.english-title {
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 
        0 0 15px #74b9ff,
        0 0 25px #0984e3,
        0 0 35px #2d3436;
    animation: glow 2s ease-in-out infinite alternate;
    font-family: 'Arial', sans-serif;
    letter-spacing: 3px;
}

@keyframes glow {
    from { 
        text-shadow: 
            0 0 15px #74b9ff,
            0 0 25px #0984e3,
            0 0 35px #2d3436;
    }
    to { 
        text-shadow: 
            0 0 20px #74b9ff,
            0 0 30px #0984e3,
            0 0 40px #6c5ce7;
    }
}

/* 副標題 */
.subtitle {
    font-size: 1.5rem;
    color: #ddd;
    margin-bottom: 50px;
    text-shadow: 0 0 10px rgba(116, 185, 255, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 互動區域 */
.interactive-area {
    margin: 50px 0;
}

.magic-btn {
    background: linear-gradient(45deg, #e17055, #74b9ff, #81ecec, #fdcb6e);
    background-size: 400% 400%;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: btnGradient 3s ease infinite;
    box-shadow: 0 0 20px rgba(116, 185, 255, 0.4);
    transition: all 0.3s ease;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes btnGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.magic-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(116, 185, 255, 0.6);
}

.magic-btn:active {
    transform: scale(0.95);
}

/* 煙火效果容器 */
.heart-container {
    position: relative;
    height: 200px;
    margin-top: 20px;
}

/* 署名 */
.signature {
    margin-top: 60px;
    padding: 20px;
}

.signature p {
    font-size: 1rem;
    color: #bbb;
    text-align: center;
    margin: 0;
    opacity: 0.8;
    font-style: italic;
}

/* 粒子效果 */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
    }
    
    .char {
        font-size: 3rem;
        margin: 0 5px;
    }
    
    .english-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .magic-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    .signature p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 2rem;
    }
    
    .char {
        font-size: 2.5rem;
        margin: 0 2px;
    }
    
    .english-title {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .signature p {
        font-size: 0.8rem;
    }
}