/* =========================================
   全局基础重置与布局
========================================= */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: "PingFang SC", "Helvetica Neue", sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    user-select: none; 
}

body, html { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background: linear-gradient(135deg, #ffe6ea 0%, #fff0f3 100%); 
    touch-action: none; /* 禁用系统默认手势 */
}

.hidden { 
    display: none !important; 
    opacity: 0; 
    pointer-events: none;
}

/* =========================================
   游戏背景与主容器
========================================= */
.bg-decoration { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    pointer-events: none; 
    z-index: 0; 
    background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 70%); 
}

#game-container { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    z-index: 1; 
}

/* =========================================
   新核心机制：线条样式（红线与死神线）
========================================= */
/* 强制掉落线 (过线强制失控) */
.force-drop-line {
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 2px;
    background: rgba(255, 71, 87, 0.8);
    z-index: 2; 
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.4);
    opacity: 0.5; 
}

.force-drop-line span {
    position: absolute; 
    right: 10px;
    top: -20px;
    font-size: 12px; 
    color: #ff4757; 
    font-weight: 900;
}

/* 极限警戒线 */
.death-line {
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 2px;
    background: repeating-linear-gradient(90deg, #ffb6c1, #ffb6c1 10px, transparent 10px, transparent 20px);
    z-index: 2; 
    pointer-events: none; 
    transition: all 0.3s ease;
}

.death-line span { 
    position: absolute; 
    right: 10px; 
    top: -20px; 
    font-size: 12px; 
    color: #ffb6c1; 
    font-weight: bold; 
}

/* 危险状态（触碰死神线倒计时） */
.death-line.danger {
    background: repeating-linear-gradient(90deg, #ff4757, #ff4757 10px, transparent 10px, transparent 20px);
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.8); 
    animation: flashDanger 0.6s infinite alternate;
}

.death-line.danger span { 
    color: #ff4757; 
}

/* =========================================
   游戏 UI（分数、提示等）
========================================= */
.game-header { 
    position: absolute; 
    top: 20px; left: 5%; 
    width: 90%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 10; 
    pointer-events: none; 
}

.score-board, .title-badge { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    padding: 10px 20px; 
    border-radius: 30px; 
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4); 
    color: #ff6b81; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    border: 2px solid rgba(255, 255, 255, 0.8); 
}

.score-number { 
    font-size: 20px; 
    color: #ff4757; 
    transition: transform 0.2s; 
}

/* 浮动加分效果 */
.floating-score { 
    position: absolute; 
    color: #ff4757; 
    font-weight: 900; 
    font-size: 26px; 
    pointer-events: none; 
    z-index: 50; 
    transform: translate(-50%, -50%); 
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; 
    animation: floatUp 1s cubic-bezier(0.25, 1.5, 0.5, 1) forwards; 
}

/* 顶部里程碑 Toast 提示 */
.milestone-toast { 
    position: absolute; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); 
    color: white; 
    padding: 12px 20px; 
    border-radius: 15px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 14px; 
    z-index: 20; 
    box-shadow: 0 5px 15px rgba(255, 154, 158, 0.5); 
    border: 2px solid white; 
    animation: dropDown 0.5s ease-out forwards; 
    transition: opacity 0.3s; 
}

/* =========================================
   弹窗面板系统
========================================= */
.modal-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(255, 228, 233, 0.85); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 100; 
}

.modal-panel { 
    background: rgba(255, 255, 255, 0.95); 
    width: 85%; 
    max-width: 350px; 
    border-radius: 25px; 
    padding: 30px 20px; 
    text-align: center; 
    box-shadow: 0 10px 30px rgba(255, 107, 129, 0.2); 
    border: 3px solid #fff; 
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

/* 文本与图标 */
.icon-big { font-size: 50px; margin-bottom: 10px; } 
.cake-3d { font-size: 70px; margin: 15px 0; animation: bounce 2s infinite; } 
.confetti { font-size: 40px; margin-bottom: 10px; }
h1, h2, .win-title { color: #ff4757; margin-bottom: 10px; font-size: 24px; } 
.subtitle { color: #666; font-size: 14px; margin-bottom: 20px; } 
.highlight { color: #ff4757; font-size: 24px; font-weight: bold; } 
.encouragement { color: #ff6b81; font-size: 14px; margin-bottom: 25px; }

/* 规则说明块 */
.instructions { 
    background: #fff0f3; 
    border-radius: 15px; 
    padding: 15px; 
    margin-bottom: 25px; 
    text-align: left; 
    color: #555; 
    font-size: 14px; 
    line-height: 1.8; 
}

/* =========================================
   兑换券样式
========================================= */
.coupon { 
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); 
    border-radius: 15px; 
    padding: 20px; 
    margin: 20px 0; 
    color: white; 
    border: 2px dashed #fff; 
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); 
    position: relative; 
}

.coupon::before, .coupon::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    width: 20px; 
    height: 20px; 
    background: #fff; 
    border-radius: 50%; 
    transform: translateY(-50%); 
}
.coupon::before { left: -10px; } 
.coupon::after { right: -10px; } 

.coupon h3 { 
    color: #fff; 
    text-shadow: 0 2px 4px rgba(255, 0, 0, 0.2); 
    margin-bottom: 10px; 
}

.highlight-text { 
    font-size: 16px; 
    font-weight: bold; 
    margin: 8px 0; 
    color: #fff1f2; 
    background: rgba(255, 255, 255, 0.3); 
    padding: 5px; 
    border-radius: 8px;
}

/* 终极至尊奖励面板 */
.supreme-panel { 
    background: linear-gradient(to bottom, #fffdf2, #fff); 
    border-color: #ffd700; 
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3); 
}

.supreme-title { 
    color: #d4af37; 
    text-shadow: 0 2px 5px rgba(212, 175, 55, 0.3); 
}

.supreme-coupon { 
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%); 
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.8), 0 5px 15px rgba(255, 140, 0, 0.4); 
    border: 2px dashed #fff9c4; 
}

.supreme-coupon h3 { 
    text-shadow: 0 2px 4px rgba(200, 80, 0, 0.5); 
}

.highlight-text-supreme { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 8px 0; 
    color: #fff; 
    background: rgba(255, 255, 255, 0.2); 
    padding: 5px; 
    border-radius: 8px;
}

/* =========================================
   按钮样式系统
========================================= */
.btn { 
    width: 90%; 
    padding: 12px; 
    border: none; 
    border-radius: 30px; 
    font-size: 16px; 
    font-weight: bold; 
    color: white; 
    cursor: pointer; 
    transition: transform 0.1s; 
}

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

.btn-primary { 
    background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%); 
    box-shadow: 0 5px 15px rgba(255, 117, 140, 0.4); 
}

.btn-special { 
    background: linear-gradient(90deg, #f6d365 0%, #fda085 100%); 
    box-shadow: 0 5px 15px rgba(253, 160, 133, 0.4); 
    color: #d35400; 
}

.btn-outline { 
    background: transparent; 
    border: 2px solid #ff758c; 
    color: #ff758c; 
    padding: 10px; 
}

.btn-supreme { 
    background: linear-gradient(90deg, #ffd700 0%, #ff8c00 100%); 
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.5); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    font-size: 18px; 
    padding: 15px; 
}

/* =========================================
   动画定义 (Keyframes)
========================================= */
@keyframes flashDanger { 
    0% { opacity: 0.5; box-shadow: 0 0 5px rgba(255, 71, 87, 0.5); } 
    100% { opacity: 1; box-shadow: 0 0 20px rgba(255, 71, 87, 1); } 
}

@keyframes floatUp { 
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 
    30% { transform: translate(-50%, -80px) scale(1.2); } 
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); } 
}

@keyframes dropDown { 
    0% { top: 0px; opacity: 0; } 
    100% { top: 80px; opacity: 1; } 
}

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

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

.pulse { animation: pulseAnim 2s infinite; } 
@keyframes pulseAnim { 
    0%, 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 117, 140, 0.4); } 
    50% { transform: scale(1.05); box-shadow: 0 8px 25px rgba(255, 117, 140, 0.6); } 
}

.float-anim { animation: float 4s ease-in-out infinite; } 
@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-8px); } 
}