/* ============================================================
   星河鹊桥 · 七夕表白  —  移动端优先 · 重新设计
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Long+Cang&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap');

:root{
  --bg0:#04030d;
  --bg1:#0a0626;
  --bg2:#120a33;
  --rose:#ff6b9d;
  --rose-soft:#ffb3d1;
  --gold:#f5c842;
  --gold-soft:#ffe9a0;
  --lav:#9b7fe0;
  --text:#f3ecff;
  --muted:#b9a9e6;
  --glass:rgba(18,10,40,.55);
  --line:rgba(245,200,66,.22);
  --shadow:0 10px 40px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Noto Serif SC',serif;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(123,95,199,.22),transparent 60%),
    radial-gradient(100% 60% at 80% 20%,rgba(255,107,157,.10),transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 45%,#07041c 100%);
  background-attachment:fixed;
  color:var(--text);
  overflow-x:hidden;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}

/* ---------- 背景层 ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#starfield,#constellation{position:absolute;inset:0;width:100%;height:100%;}
#aurora{position:fixed;top:-30%;left:-20%;width:140%;height:60%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(123,95,199,.25),rgba(255,107,157,.18),rgba(245,200,66,.12),transparent);
  filter:blur(60px);opacity:.6;animation:aurora 14s ease-in-out infinite;}
@keyframes aurora{0%,100%{transform:translateX(-6%) translateY(0) skewX(0)}50%{transform:translateX(6%) translateY(20px) skewX(8deg)}}
#moon{position:fixed;top:6%;right:8%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fffaf0,#ffe9a0 55%,#f5c842 80%);
  box-shadow:0 0 30px 8px rgba(255,233,160,.45),0 0 70px 20px rgba(245,200,66,.25);
  z-index:0;pointer-events:none;transition:transform .2s ease-out;}
.shoot{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px #fff;opacity:0;animation:shoot linear forwards;}
@keyframes shoot{0%{opacity:1;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(-260px,260px) scale(.3)}}
.floath{position:fixed;bottom:-40px;z-index:6;pointer-events:none;will-change:transform;}
@keyframes floatUp{0%{transform:translateY(0) rotate(0) scale(.4);opacity:0}8%{opacity:1;transform:translateY(0) rotate(0) scale(1)}88%{opacity:.85}100%{transform:translateY(-115vh) rotate(40deg) scale(.7);opacity:0}}

/* ---------- 顶部进度条 ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--gold),var(--rose));box-shadow:0 0 10px var(--gold);transition:width .15s;}

/* ---------- 进入遮罩（点击开始） ---------- */
#intro{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#160a36,#04030d);text-align:center;padding:30px;transition:opacity .8s,visibility .8s;}
#intro.hide{opacity:0;visibility:hidden;}
#intro .e1{font-family:'Ma Shan Zheng',cursive;font-size:2.4rem;color:var(--gold-soft);text-shadow:0 0 24px rgba(245,200,66,.5);margin-bottom:14px;}
#intro .e2{color:var(--rose-soft);font-size:.95rem;margin-bottom:36px;letter-spacing:2px;}
#enterBtn{padding:14px 46px;border:1px solid var(--gold);border-radius:50px;background:rgba(245,200,66,.08);
  color:var(--gold-soft);font-family:'Ma Shan Zheng',cursive;font-size:1.3rem;cursor:pointer;transition:.3s;
  animation:pulseBtn 2s ease-in-out infinite;letter-spacing:3px;}
#enterBtn:hover{background:rgba(245,200,66,.2);transform:scale(1.05);}
@keyframes pulseBtn{0%,100%{box-shadow:0 0 12px rgba(245,200,66,.3)}50%{box-shadow:0 0 28px rgba(245,200,66,.6)}}

/* ---------- 音乐按钮 ---------- */
#music{position:fixed;top:14px;right:14px;z-index:1100;width:44px;height:44px;border-radius:50%;
  background:rgba(18,10,40,.6);backdrop-filter:blur(10px);border:1px solid var(--line);
  color:var(--gold-soft);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#music.paused{opacity:.55;}

/* ---------- 右侧导航（桌面） ---------- */
#nav{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:100;display:none;flex-direction:column;gap:12px;}
#nav .d{width:9px;height:9px;border-radius:50%;background:rgba(245,200,66,.25);border:1px solid var(--line);cursor:pointer;transition:.3s;}
#nav .d.on{background:var(--gold);box-shadow:0 0 12px var(--gold);transform:scale(1.35);}

/* ---------- 回到顶部 ---------- */
#top{position:fixed;bottom:20px;right:16px;z-index:100;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose),var(--lav));color:#fff;font-size:20px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(255,107,157,.4);opacity:0;transform:scale(.6);transition:.3s;pointer-events:none;}
#top.show{opacity:1;transform:scale(1);pointer-events:auto;}

/* ---------- 通用区块 ---------- */
.wrap{width:100%;max-width:480px;margin:0 auto;padding:0 20px;}
section{position:relative;z-index:2;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:80px 0;}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border:1px solid var(--line);
  border-radius:30px;color:var(--gold);font-size:.74rem;letter-spacing:3px;margin-bottom:16px;
  background:rgba(245,200,66,.06);}
.title{font-family:'Ma Shan Zheng',cursive;font-size:clamp(1.9rem,8vw,2.8rem);color:var(--gold-soft);
  text-align:center;line-height:1.4;margin-bottom:34px;text-shadow:0 0 22px rgba(245,200,66,.4);}
.divider{display:flex;align-items:center;gap:14px;margin:40px auto;width:80%;max-width:340px;opacity:.55;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.divider i{color:var(--gold);font-style:normal;font-size:1.2rem;animation:beat 1.6s ease-in-out infinite;}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* 进入动画 */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- 封面 ---------- */
#cover{text-align:center;}
#cover .sub{font-size:.76rem;letter-spacing:5px;color:var(--rose-soft);text-transform:uppercase;margin-bottom:22px;}
#cover h1{font-family:'Ma Shan Zheng',cursive;font-size:clamp(3rem,13vw,4.6rem);color:var(--gold-soft);line-height:1.3;
  text-shadow:0 0 30px rgba(245,200,66,.5),0 0 60px rgba(255,107,157,.3);margin-bottom:30px;}
#cover h1 span{display:inline-block;animation:shimmer 3.5s ease-in-out infinite;}
@keyframes shimmer{0%,100%{text-shadow:0 0 30px rgba(245,200,66,.5),0 0 60px rgba(255,107,157,.3)}50%{text-shadow:0 0 55px rgba(245,200,66,.95),0 0 110px rgba(255,107,157,.6)}}
.photo-ring{position:relative;width:min(64vw,260px);aspect-ratio:1;margin:0 auto 28px;}
.photo-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--gold);
  box-shadow:0 0 40px rgba(245,200,66,.4),0 0 80px rgba(255,107,157,.25);}
.photo-ring::before{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(245,200,66,.4);animation:spin 16s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
#cover .line{color:var(--rose-soft);font-size:.95rem;letter-spacing:1px;}
#cover .scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--rose-soft);font-size:.72rem;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:bob 2.2s ease-in-out infinite;}
#cover .scroll b{width:14px;height:14px;border-right:2px solid var(--rose-soft);border-bottom:2px solid var(--rose-soft);transform:rotate(45deg);}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

/* ---------- 故事 ---------- */
.story{text-align:center;font-size:.96rem;color:var(--text);margin-bottom:44px;}
.story .hl{color:var(--gold-soft);font-weight:600;}
.story .pk{color:var(--rose-soft);font-style:italic;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cell{aspect-ratio:1;border-radius:16px;overflow:hidden;border:2px solid rgba(245,200,66,.3);box-shadow:var(--shadow);cursor:pointer;transition:.3s;position:relative;}
.cell:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(245,200,66,.3);}
.cell img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.cell:hover img{transform:scale(1.08);}
.cell span{position:absolute;bottom:0;left:0;right:0;padding:6px;background:linear-gradient(transparent,rgba(4,3,13,.85));font-size:.68rem;color:var(--gold-soft);text-align:center;opacity:0;transition:.3s;}
.cell:hover span{opacity:1;}

/* ---------- 心里话 ---------- */
.card{background:linear-gradient(135deg,rgba(18,10,40,.6),rgba(4,3,13,.85));border:1px solid var(--line);
  border-radius:20px;padding:26px 22px;margin-bottom:18px;text-align:center;font-size:.95rem;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,107,157,.22);}
.card .ic{font-size:1.8rem;display:block;margin-bottom:10px;}
.card .em{color:var(--gold-soft);font-weight:600;font-size:1.04rem;}
.card .pk{color:var(--rose-soft);font-style:italic;}
.card::after{content:'';position:absolute;top:-60%;left:-60%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%);transform:translateX(-100%);transition:transform .8s;}
.card:hover::after{transform:translateX(100%);}

/* ---------- 回忆 ---------- */
.mem{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,rgba(18,10,40,.5),rgba(4,3,13,.7));
  border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:16px;box-shadow:var(--shadow);}
.mem.rev{flex-direction:row-reverse;text-align:right;}
.mem .ph{flex:0 0 96px;height:96px;border-radius:12px;overflow:hidden;border:2px solid rgba(245,200,66,.3);cursor:pointer;flex-shrink:0;transition:.3s;}
.mem .ph:hover{transform:scale(1.04);}
.mem .ph img{width:100%;height:100%;object-fit:cover;}
.mem .tx{flex:1;font-size:.86rem;display:flex;flex-direction:column;justify-content:center;}
.mem .tx .lb{color:var(--gold);font-size:.74rem;letter-spacing:2px;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.mem.rev .tx .lb{justify-content:flex-end;}
.mem .tx .em{color:var(--gold-soft);font-weight:600;}

/* ---------- 约定 ---------- */
.promise{text-align:center;font-size:.96rem;max-width:420px;margin:0 auto 34px;}
.pquote{font-family:'Ma Shan Zheng',cursive;font-size:clamp(1.5rem,7vw,2.2rem);color:var(--gold);line-height:1.8;
  text-shadow:0 0 22px rgba(245,200,66,.45);}

/* ---------- 游戏 ---------- */
.games{display:flex;flex-direction:column;gap:20px;width:100%;}
.gbox{background:linear-gradient(135deg,rgba(18,10,40,.55),rgba(4,3,13,.82));border:1px solid var(--line);
  border-radius:22px;padding:24px 20px;text-align:center;box-shadow:var(--shadow);}
.gbox h3{font-family:'Ma Shan Zheng',cursive;font-size:1.5rem;color:var(--gold);margin-bottom:4px;}
.gbox .tip{font-size:.76rem;color:var(--rose-soft);margin-bottom:16px;letter-spacing:1px;}
.btn{padding:11px 30px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--rose),var(--lav));
  color:#fff;font-size:.95rem;cursor:pointer;position:relative;overflow:hidden;transition:.3s;font-family:inherit;}
.btn:hover{transform:scale(1.05);box-shadow:0 8px 26px rgba(255,107,157,.45);}
.btn::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);transition:transform .6s;}
.btn:hover::before{transform:translateX(100%);}

/* 转盘 */
.wheelwrap{position:relative;width:min(70vw,230px);aspect-ratio:1;margin:0 auto 16px;}
.point{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:5;font-size:1.5rem;}
#wheel2{width:100%;height:100%;border-radius:50%;border:4px solid var(--gold);box-shadow:0 0 40px rgba(245,200,66,.4);
  transition:transform 4.5s cubic-bezier(.12,.7,.12,1);}
.wres{margin-top:12px;min-height:22px;font-size:.92rem;color:var(--gold-soft);font-weight:600;}

/* 默契 */
.qpro{font-size:.72rem;color:var(--lav);margin-bottom:8px;letter-spacing:1px;}
.qq{font-size:.92rem;margin-bottom:12px;}
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.opt{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(4,3,13,.5);font-size:.85rem;cursor:pointer;transition:.25s;text-align:left;}
.opt:hover{background:rgba(123,95,199,.4);transform:translateX(3px);}
.opt.sel{background:linear-gradient(135deg,var(--rose),var(--lav));border-color:var(--gold);}
.chart{width:110px;height:110px;margin:8px auto;border-radius:50%;background:conic-gradient(var(--gold) 0deg,var(--lav) 0deg);
  display:flex;align-items:center;justify-content:center;position:relative;}
.chart::after{content:'';position:absolute;inset:12px;border-radius:50%;background:rgba(4,3,13,.92);}

/* 翻牌 */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:280px;margin:0 auto 10px;}
.mc{aspect-ratio:1;border-radius:12px;cursor:pointer;perspective:600px;position:relative;}
.mc .in{position:absolute;inset:0;transition:transform .5s;transform-style:preserve-3d;}
.mc.flip .in{transform:rotateY(180deg);}
.fc{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.fr{background:linear-gradient(135deg,var(--bg2),var(--bg0));border:1px solid var(--line);}
.bk{background:linear-gradient(135deg,var(--rose),var(--lav));transform:rotateY(180deg);}
.mstat{font-size:.8rem;color:var(--gold-soft);min-height:20px;}

/* 鹊桥 */
.bridge{position:relative;height:120px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.bridge .end{font-size:2rem;filter:drop-shadow(0 0 8px rgba(245,200,66,.6));}
.bridge .path{position:absolute;left:14%;right:14%;top:50%;height:0;border-top:2px dashed rgba(245,200,66,.3);}
.mag{display:flex;justify-content:space-between;align-items:center;position:relative;width:72%;margin:0 auto;}
.mag b{width:26px;height:26px;border-radius:50%;background:rgba(18,10,40,.7);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:.3s;flex-shrink:0;}
.mag b.lit{background:linear-gradient(135deg,var(--gold),var(--rose));border-color:var(--gold);transform:scale(1.15);box-shadow:0 0 14px var(--gold);}
.bres{font-size:.84rem;color:var(--gold-soft);min-height:20px;margin-top:6px;}

/* 星河 */
.wish{position:relative;width:100%;height:150px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 120%,rgba(123,95,199,.3),rgba(4,3,13,.6));margin-bottom:10px;cursor:pointer;}
.wstar{position:absolute;width:13px;height:13px;font-size:13px;line-height:13px;text-align:center;cursor:pointer;transition:.3s;}
.wstar.lit{animation:pop .5s ease;}
@keyframes pop{0%{transform:scale(.2);opacity:.3}60%{transform:scale(1.4)}100%{transform:scale(1);opacity:1}}
.wcount{font-size:.8rem;color:var(--gold-soft);}

/* ---------- 结尾 ---------- */
#end{text-align:center;}
#end h1{font-family:'Ma Shan Zheng',cursive;font-size:clamp(2.6rem,12vw,4.4rem);color:var(--gold-soft);
  text-shadow:0 0 44px rgba(245,200,66,.6),0 0 90px rgba(255,107,157,.4);line-height:1.4;margin-bottom:22px;}
#end .sub{font-size:.9rem;color:var(--rose-soft);max-width:440px;margin:0 auto 30px;}
#end .sign{font-family:'Ma Shan Zheng',cursive;font-size:1.4rem;color:var(--gold);}
#end .yr{font-size:.76rem;color:var(--lav);letter-spacing:4px;margin-top:6px;}

/* ---------- 灯箱 ---------- */
#lb{position:fixed;inset:0;z-index:2500;background:rgba(4,3,13,.96);display:none;align-items:center;justify-content:center;flex-direction:column;padding:18px;backdrop-filter:blur(6px);}
#lb.open{display:flex;animation:lbin .3s ease;}
@keyframes lbin{from{opacity:0}to{opacity:1}}
#lb img{max-width:92vw;max-height:80vh;border-radius:12px;border:2px solid var(--gold);box-shadow:0 0 50px rgba(245,200,66,.4);animation:lbz .4s ease;}
@keyframes lbz{from{transform:scale(.85);opacity:.4}to{transform:scale(1);opacity:1}}
#lb .cap{margin-top:14px;color:var(--gold-soft);font-size:.88rem;text-align:center;}
#lb .x{position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(18,10,40,.6);border:1px solid var(--line);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#lb .nv{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(18,10,40,.55);border:1px solid var(--line);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#lb .pv{left:12px;}#lb .nx{right:12px;}

/* ---------- 点触爱心粒子 ---------- */
.burst{position:fixed;z-index:9999;pointer-events:none;font-size:18px;animation:burst 1s ease-out forwards;}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(.3);opacity:0}}

/* ---------- 桌面增强 ---------- */
@media(min-width:600px){
  #nav{display:flex;}
  .wrap{max-width:560px;}
  section{padding:90px 0;}
}
@media(min-width:900px){
  .wrap{max-width:640px;}
}