/* ===== 通用 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #111; color: #fff; overflow: hidden; touch-action: manipulation;
}
.full { position: fixed; inset: 0; width: 100%; height: 100%; }
.flexc { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hidden { display: none; }

/* ===== 欢迎页 ===== */
#welcome { background: url("cover.jpg") no-repeat center/cover; }
#welcome::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: -1; }
.glitch { font-size: 14vw; font-weight: 700; text-transform: uppercase; position: relative; color: #fff; letter-spacing: .1em; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; width: 100%; height: 100%; }
.glitch::before { animation: glitch-1 .8s infinite; color: #00ffff; z-index: -1; }
.glitch::after { animation: glitch-2 .8s infinite; color: #ff00ff; z-index: -2; }
@keyframes glitch-1 {
    0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(32% 0 58% 0)}40%{clip-path:inset(19% 0 1% 0)}60%{clip-path:inset(93% 0 1% 0)}80%{clip-path:inset(43% 0 1% 0)}
}
@keyframes glitch-2 {
    0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(50% 0 30% 0)}40%{clip-path:inset(20% 0 60% 0)}60%{clip-path:inset(40% 0 30% 0)}80%{clip-path:inset(80% 0 5% 0)}
}
.glow { margin-top: 8vh; padding: 14px 40px; font-size: 18px; background: transparent; border: 2px solid #fff; color: #fff; cursor: pointer; letter-spacing: 2px; transition: .3s; }
.glow:hover { box-shadow: 0 0 20px #fff, 0 0 40px #fff; }

/* ===== 菜单页 ===== */
#menu .title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: clamp(1rem, 3vh, 2rem); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 2vw, 20px); width: min(90vw, 1020px); margin: 0 auto; }
.grid button { display: flex; flex-direction: column; width: 100%; border: none; padding: 0; background: #000; cursor: pointer; overflow: hidden; }
.btn-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; pointer-events: none; }
.grid button span { margin-top: 4px; font-size: clamp(.75rem, 1.8vw, 1.1rem); color: #fff; text-align: center; }

/* ===== 播放器页 ===== */
.swiper { height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #222 0%, #000 100%); }
#stage { max-width: 100vw; max-height: 100vh; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.ctrl { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; }
.ctrl button { font-size: 30px; background: rgba(255,255,255,.2); border: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; backdrop-filter: blur(5px); }
#counter { font-size: 14px; opacity: .8; }
.back { position: absolute; top: 20px; left: 20px; padding: 8px 18px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; backdrop-filter: blur(10px); }

/* ===== 全局花瓣背景 ===== */
.particle-bg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 1.2s; }
body:not(:has(#welcome:not(.hidden))) .particle-bg { opacity: 1; }
.particle { position: absolute; top: -10%; will-change: transform; animation: fall linear infinite; }
.petals { width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #ff4d8d, #c7004c); border-radius: 50% 0 50% 50%; transform-origin: 50% 50%; animation-name: fall-petals; }
.bokeh { width: 6px; height: 6px; background: radial-gradient(circle, rgba(255,215,0,.9), transparent 70%); border-radius: 50%; filter: blur(1px); animation-name: fall-bokeh; }
@keyframes fall-petals { 0%{transform:translateY(-10vh) rotate(0) scale(.8)} 100%{transform:translateY(110vh) rotate(360deg) scale(1.2)} }
@keyframes fall-bokeh { 0%{transform:translateY(-10vh) translateX(0)} 50%{transform:translateY(50vh) translateX(20px)} 100%{transform:translateY(110vh) translateX(-10px)} }

/* ===== 场景选择动画 ===== */
.grid button {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.6s forwards;
}
/* 四个按钮依次延迟 */
.grid button:nth-child(1) { animation-delay: 0.10s; }
.grid button:nth-child(2) { animation-delay: 0.18s; }
.grid button:nth-child(3) { animation-delay: 0.26s; }
.grid button:nth-child(4) { animation-delay: 0.34s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 悬停微放大 + 发光 */
.grid button {
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s;
}
.grid button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255,0,255,.5);
}


/* ========= 前景特效顶层 ========= */
.front-fx {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* 点击穿透 */
    z-index: 9999;          /* 最前方 */
    overflow: hidden;
}

/* ---- 闪星 ---- */
.spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px #fff, 0 0 12px #ff4d8d;
    animation: twinkle 3s infinite;
}

/* ---- 前景花瓣 ---- */
.front-petal {
    position: absolute;
    top: -10%;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #ff4d8d, #c7004c);
    border-radius: 50% 0 50% 50%;
    transform-origin: 50% 50%;
    animation: fall-petal 12s linear infinite;
}

/* 随机分布 */
.spark:nth-child(1)  { top: 15%; left: 20%; animation-delay: 0s; }
.spark:nth-child(2)  { top: 30%; left: 70%; animation-delay: 0.7s; }
.spark:nth-child(3)  { top: 50%; left: 40%; animation-delay: 1.4s; }
.spark:nth-child(4)  { top: 70%; left: 85%; animation-delay: 2.1s; }
.spark:nth-child(5)  { top: 25%; left: 50%; animation-delay: 2.8s; }

.front-petal:nth-child(6)  { left: 5%;  animation-duration: 11s; animation-delay: 0s; }
.front-petal:nth-child(7)  { left: 25%; animation-duration: 14s; animation-delay: 2s; }
.front-petal:nth-child(8)  { left: 45%; animation-duration: 13s; animation-delay: 4s; }
.front-petal:nth-child(9)  { left: 65%; animation-duration: 15s; animation-delay: 1s; }
.front-petal:nth-child(10) { left: 85%; animation-duration: 12s; animation-delay: 3s; }

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}
@keyframes fall-petal {
    0%   { transform: translateY(-10vh) rotate(0deg) scale(.8); }
    100% { transform: translateY(110vh) rotate(360deg) scale(1.2); }
}