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

body {
    font-family: '华文楷体', '楷体', serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1a237e 100%);
    min-height: 100vh;
    overflow-x: hidden;
    color: #fff;
}

.container {
    position: relative;
    min-height: 100vh;
    padding: 20px;
}

/* 星空背景 */
.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%;
    box-shadow: 
        20px 30px white, 
        40px 70px white,
        90px 40px white,
        130px 80px white,
        160px 30px white,
        200px 90px white,
        240px 50px white,
        280px 120px white,
        320px 80px white,
        360px 40px white,
        400px 110px white,
        440px 70px white,
        480px 30px white,
        520px 90px white,
        560px 50px white,
        600px 120px white,
        640px 80px white,
        680px 40px white,
        720px 110px white,
        760px 70px white;
    animation: twinkle 3s infinite alternate;
}

.stars::after {
    animation-delay: 1.5s;
}

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

/* 夜空元素 */
.night-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.moon {
    position: absolute;
    top: 50px;
    right: 100px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: moonGlow 4s ease-in-out infinite alternate;
}

@keyframes moonGlow {
    0% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); }
    100% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.8); }
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    opacity: 0.6;
}

.cloud1 {
    width: 100px;
    height: 40px;
    top: 100px;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.cloud2 {
    width: 80px;
    height: 30px;
    top: 150px;
    left: 70%;
    animation: float 8s ease-in-out infinite reverse;
}

.cloud3 {
    width: 120px;
    height: 50px;
    top: 80px;
    left: 40%;
    animation: float 10s ease-in-out infinite;
}

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

/* 标题区域 */
.title-section {
    text-align: center;
    padding: 40px 0;
    position: relative;
    z-index: 10;
}

.main-title {
    font-size: 4rem;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    margin-bottom: 20px;
}

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

.subtitle {
    font-size: 1.5rem;
    color: #ffeb3b;
    text-shadow: 0 2px 10px rgba(255, 235, 59, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* 游戏区域 */
.game-section {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.story-text {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #e1f5fe;
}

.game-area {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.river {
    position: relative;
    height: 200px;
    background: linear-gradient(45deg, #0d47a1, #1976d2, #42a5f5);
    border-radius: 15px;
    margin: 20px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.river::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 40px 40px;
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

.character {
    position: relative;
    z-index: 5;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character-body {
    width: 100px;
    height: 120px;
    position: relative;
    animation: bounce 2s ease-in-out infinite;
}

/* 牛郎卡通形象 */
.niulang .character-body {
    background: none;
}

.niulang .character-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #ffdbac;
    border-radius: 50%;
    border: 3px solid #8B4513;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.niulang .character-body::after {
    content: '👨‍🌾';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    z-index: 2;
}

.niulang .character-name {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #87CEEB, #4682B4);
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(70, 130, 180, 0.4);
}

/* 织女卡通形象 */
.zhinv .character-body {
    background: none;
}

.zhinv .character-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #ffdbac;
    border-radius: 50%;
    border: 3px solid #FF69B4;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.zhinv .character-body::after {
    content: '👸';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    z-index: 2;
}

.zhinv .character-name {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFB6C1, #FF69B4);
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.4);
}

/* 增加更多卡通细节 */
.niulang .character-body:hover::after {
    animation: wave 0.5s ease-in-out;
}

.zhinv .character-body:hover::after {
    animation: wave 0.5s ease-in-out;
}

@keyframes wave {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(-5deg); }
    75% { transform: translateX(-50%) rotate(5deg); }
}

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

.magpie-bridge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 20px;
    background: linear-gradient(90deg, #8e24aa, #ab47bc, #ce93d8);
    border-radius: 10px;
    transition: width 1.5s ease-in-out;
    box-shadow: 0 4px 15px rgba(142, 36, 170, 0.3);
    z-index: 10;
}

.bridge-active {
    width: 60% !important;
    min-width: 200px !important;
    animation: bridgeGlow 2s ease-in-out infinite alternate;
}

@keyframes bridgeGlow {
    0% { 
        box-shadow: 0 4px 15px rgba(142, 36, 170, 0.3);
        background: linear-gradient(90deg, #8e24aa, #ab47bc, #ce93d8);
    }
    100% { 
        box-shadow: 0 6px 25px rgba(142, 36, 170, 0.6);
        background: linear-gradient(90deg, #9c27b0, #ba68c8, #e1bee7);
    }
}

.bridge-complete .niulang {
    transform: translateX(80px);
    transition: transform 2s ease-in-out;
}

.bridge-complete .zhinv {
    transform: translateX(-80px);
    transition: transform 2s ease-in-out;
}

.game-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.game-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.game-btn:active {
    transform: translateY(0);
}

.score {
    display: flex;
    gap: 20px;
    color: #ffeb3b;
    font-weight: bold;
}

/* 消息区域 */
.love-messages {
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-item {
    font-size: 1.2rem;
    color: #e8f5e8;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 互动爱心 */
.interactive-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.heart {
    position: absolute;
    color: #ff6b6b;
    font-size: 2rem;
    animation: heartFloat 3s ease-out forwards;
    pointer-events: none;
}

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1.5);
    }
}

/* 祝福区域 */
.wishes {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.wish-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wish-card h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ffeb3b;
}

.blessing-text {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #e1f5fe;
}

.wish-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.wish-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .game-area {
        padding: 20px;
    }
    
    .river {
        height: 150px;
        padding: 0 20px;
    }
    
    .character-body {
        width: 80px;
        height: 100px;
    }
    
    .niulang .character-body::before,
    .zhinv .character-body::before {
        width: 50px;
        height: 50px;
    }
    
    .niulang .character-body::after,
    .zhinv .character-body::after {
        font-size: 2rem;
    }
    
    .character-name {
        font-size: 0.7rem !important;
        padding: 3px 6px !important;
    }
    
    .game-controls {
        flex-direction: column;
        gap: 15px;
    }
    
    .score {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .main-title {
        font-size: 2rem;
    }
    
    .moon {
        width: 60px;
        height: 60px;
        top: 30px;
        right: 30px;
    }
    
    .character-body {
        width: 70px;
        height: 90px;
    }
    
    .niulang .character-body::before,
    .zhinv .character-body::before {
        width: 45px;
        height: 45px;
    }
    
    .niulang .character-body::after,
    .zhinv .character-body::after {
        font-size: 1.8rem;
    }
}