/* ============================================================
   KING · 专属空间  (style.css)
   ============================================================ */

/* ---------------- 基础 ---------------- */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  color:#fff; overflow:hidden;
  background:
    radial-gradient(1100px 750px at 78% -12%, rgba(64,84,160,.35), transparent 60%),
    radial-gradient(900px 650px at 8% 112%, rgba(120,60,120,.22), transparent 55%),
    linear-gradient(180deg,#080b18 0%,#05070f 100%);
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }

/* ---------------- 星空 ---------------- */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.stars{ position:absolute; inset:0; }
.stars i{ position:absolute; border-radius:50%; background:#fff; opacity:.22;
  animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.08; transform:scale(.8); } 50%{ opacity:.55; transform:scale(1.15); } }
.meteor{ position:absolute; top:10%; left:-150px; width:130px; height:1.6px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  transform:rotate(18deg); opacity:0; animation:shoot 9s linear 3s infinite; }
@keyframes shoot{
  0%,86%{ opacity:0; transform:translate(0,0) rotate(18deg); }
  88%{ opacity:1; }
  97%,100%{ opacity:0; transform:translate(118vw,36vh) rotate(18deg); }
}

/* ---------------- 烟花画布 ---------------- */
#fx{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ---------------- 密码门 ---------------- */
.gate{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(80% 60% at 50% 38%, rgba(255,170,90,.08), transparent 65%);
  transition:opacity .9s ease, transform .9s ease, filter .9s ease, visibility 0s linear .9s; }
.gate.hidden{ opacity:0; transform:scale(1.12); filter:blur(14px); visibility:hidden; pointer-events:none; }

.gate-card{ width:min(88vw,360px); padding:36px 28px 30px; text-align:center; border-radius:24px;
  background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  animation:cardIn .9s cubic-bezier(.2,.85,.3,1.15) both;
  transition:box-shadow .5s, border-color .5s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(34px) scale(.94); } to{ opacity:1; transform:none; } }
.gate-card.shake{ animation:shake .45s; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-11px); }
  40%{ transform:translateX(9px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(4px); } }
.gate-card.success{ border-color:rgba(255,196,120,.75);
  box-shadow:0 0 0 3px rgba(255,180,90,.22), 0 0 70px rgba(255,160,60,.45); }

.lock{ font-size:38px; animation:lockBob 2.6s ease-in-out infinite; }
@keyframes lockBob{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-6px) rotate(4deg); } }
.gate-title{ margin-top:10px; font-size:44px; font-weight:900; letter-spacing:.1em; text-indent:.1em;
  background:linear-gradient(180deg,#fff 10%,#ffd9a0 55%,#ff8a3d 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.gate-sub{ margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.55); letter-spacing:.08em; }

.pwd{ margin-top:22px; width:100%; padding:13px 12px 13px calc(12px + .45em);
  font-size:20px; letter-spacing:.45em; text-align:center; color:#ffd9a0; caret-color:#ffab5e;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:14px;
  outline:none; transition:.25s; }
.pwd::placeholder{ color:rgba(255,255,255,.28); letter-spacing:.2em; }
.pwd:focus{ border-color:rgba(255,180,100,.8); box-shadow:0 0 0 3px rgba(255,170,80,.15);
  background:rgba(255,255,255,.09); }

.unlock-btn{ margin-top:16px; width:100%; padding:13px; min-height:46px;
  font-size:16.5px; font-weight:800; letter-spacing:.3em; text-indent:.3em; color:#381800;
  background:linear-gradient(135deg,#ffd36b,#ff9a3d 60%,#ff7a2e);
  border:none; border-radius:14px; cursor:pointer;
  box-shadow:0 10px 26px rgba(255,150,60,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s, filter .2s; }
.unlock-btn:hover{ filter:brightness(1.06); }
.unlock-btn:active{ transform:scale(.96); }

.gate-err{ height:20px; margin-top:12px; font-size:13.5px; color:#ff8585; opacity:0; transition:opacity .3s; }
.gate-err.show{ opacity:1; }

/* 解锁光波 */
.wave{ position:absolute; left:50%; top:50%; width:90px; height:90px; margin:-45px 0 0 -45px;
  border-radius:50%; border:2px solid rgba(255,196,120,.85); opacity:0; pointer-events:none; }
.wave.go{ animation:waveGo 1s ease-out forwards; }
@keyframes waveGo{ from{ transform:scale(.1); opacity:.9; } to{ transform:scale(46); opacity:0; } }

/* 过场大字 */
.flash-king{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(90px,30vw,300px); font-weight:900; letter-spacing:.05em;
  background:linear-gradient(180deg,#fff 15%,#ffca7a 55%,#ff7a2e 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; pointer-events:none; }
.flash-king.go{ animation:kingFlash 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes kingFlash{
  0%{ opacity:0; transform:scale(.18); filter:blur(10px); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:scale(2.7); filter:blur(2px); }
}

/* ---------------- 首页（可上下滑动） ---------------- */
.home{ position:fixed; inset:0; z-index:1; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  opacity:0; visibility:hidden;
  transition:opacity 1s ease, visibility 0s linear 1.1s; }
.home::-webkit-scrollbar{ display:none; }
.home.show{ opacity:1; visibility:visible; }

.page{ position:relative; z-index:2; }
.screen{ position:relative; }

/* 漂浮文字层（固定背景，不随滚动） */
.float-layer{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease .25s; will-change:transform; }
.home.show .float-layer{ opacity:1; }
.float-word{ position:absolute; font-weight:800; white-space:nowrap; color:#fff; opacity:var(--o,.4);
  text-shadow:0 0 16px rgba(255,200,130,.4), 0 2px 12px rgba(0,0,0,.45);
  animation-duration:var(--d,10s); animation-delay:var(--dl,0s);
  animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;
  will-change:transform; }
.float-word.blur{ filter:blur(2.2px); }
@keyframes floatA{
  0%{ transform:translate(0,0) rotate(0deg); }
  30%{ transform:translate(calc(var(--x)*.65), calc(var(--y)*.45)) rotate(calc(var(--r)*.7)); }
  65%{ transform:translate(calc(var(--x)*-.35), calc(var(--y)*1.05)) rotate(calc(var(--r)*-.5)); }
  100%{ transform:translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes floatB{
  0%{ transform:translate(0,0) rotate(0deg); }
  28%{ transform:translate(calc(var(--x)*-.5), calc(var(--y)*.7)) rotate(calc(var(--r)*-.8)); }
  58%{ transform:translate(calc(var(--x)*.8), calc(var(--y)*.2)) rotate(calc(var(--r)*.4)); }
  100%{ transform:translate(calc(var(--x)*.2), var(--y)) rotate(calc(var(--r)*1.15)); }
}
@keyframes floatC{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); }
  25%{ transform:translate(calc(var(--x)*.5), calc(var(--y)*.9)) rotate(calc(var(--r)*.6)) scale(1.05); }
  55%{ transform:translate(calc(var(--x)*-.7), calc(var(--y)*.4)) rotate(calc(var(--r)*-.6)) scale(.96); }
  100%{ transform:translate(var(--x), calc(var(--y)*1.2)) rotate(var(--r)) scale(1); }
}

/* ---------------- 第一屏 ---------------- */
.hero-screen{ min-height:100vh; min-height:100svh; }
.hero{ position:absolute; top:11vh; left:0; width:100%; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:2.2vh; pointer-events:none; }
.main-title{ font-size:clamp(56px,16vw,150px); font-weight:900; line-height:1; letter-spacing:.06em;
  text-indent:.06em;
  background:linear-gradient(180deg,#ffffff 12%,#ffd9a0 55%,#ff8a3d 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 8px 34px rgba(255,150,60,.35)); opacity:0; }
.home.show .main-title{ animation:titleIn 1s .25s cubic-bezier(.18,.85,.3,1.2) both,
  titleGlow 4.5s 1.5s ease-in-out infinite; }
@keyframes titleIn{ from{ opacity:0; transform:translateY(-46px) scale(.85); } to{ opacity:1; transform:none; } }
@keyframes titleGlow{ 0%,100%{ filter:drop-shadow(0 8px 34px rgba(255,150,60,.35)); }
  50%{ filter:drop-shadow(0 8px 56px rgba(255,175,85,.65)); } }

/* 下滑箭头提示 */
.scroll-hint{ pointer-events:auto; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:7px; background:none; border:none; opacity:0; padding:6px 16px; }
.home.show .scroll-hint{ animation:fadeUp .9s .7s ease both; }
.hint-txt{ font-size:12.5px; letter-spacing:.32em; text-indent:.32em; color:rgba(255,255,255,.6);
  text-shadow:0 0 10px rgba(255,200,130,.25); }
.chev{ width:13px; height:13px;
  border-right:2.4px solid rgba(255,210,150,.95); border-bottom:2.4px solid rgba(255,210,150,.95);
  transform:rotate(45deg); animation:chevBob 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(255,190,110,.65)); }
@keyframes chevBob{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5; }
  50%{ transform:rotate(45deg) translate(4px,4px); opacity:1; } }
.scroll-hint:active .chev{ transform:rotate(45deg) translate(6px,6px); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------------- 蜡烛区（已去掉边框，蛋糕更大） ---------------- */
.candle-card{ position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:3;
  width:min(92vw,430px); padding:0; text-align:center;
  opacity:0; transform:translate(-50%,26px);
  transition:opacity .8s ease, transform .8s ease; }
.candle-card.in{ opacity:1; transform:translate(-50%,0); }

.candle-stage{ position:relative; cursor:pointer; }

/* 环境融合①：蛋糕身后的暖色氛围光（像蛋糕把周围照亮） */
.candle-stage::before{ content:''; position:absolute; left:50%; top:58%; z-index:0;
  width:128%; height:86%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,150,60,.17) 0%, rgba(255,120,45,.09) 40%, rgba(140,80,140,.05) 60%, transparent 74%);
  filter:blur(16px); }

/* 环境融合②：托盘下的地面光斑（落地感 + 灯光洒在地上） */
.candle-stage::after{ content:''; position:absolute; left:50%; bottom:-3.2%; z-index:0;
  width:96%; height:13%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,150,70,.16) 0%, rgba(255,130,55,.07) 48%, transparent 74%);
  filter:blur(9px); }

.candle-stage img{ position:relative; z-index:1; display:block; width:100%; height:auto;
  user-select:none; -webkit-user-drag:none;
  filter:brightness(.965) contrast(.975) saturate(.95) drop-shadow(0 16px 26px rgba(0,0,0,.5)); }

/* 环境融合③：色调协调层 —— 盒子大于图片，光晕在盒内渐隐（避免矩形硬边） */
.cake-tone{ position:absolute; inset:-25% -30%; z-index:2; pointer-events:none; opacity:.55;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(26% 24% at 50% 30%, rgba(110,140,255,.45) 0%, rgba(110,140,255,.12) 55%, transparent 78%),
    radial-gradient(30% 24% at 50% 72%, rgba(255,150,70,.40) 0%, rgba(255,150,70,.12) 55%, transparent 80%); }

/* 点亮时打在蛋糕上的暖光（盒子溢出图片边界，光自然洒到页面背景上） */
.cake-light{ position:absolute; inset:-28% -38%; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .9s ease; mix-blend-mode:screen;
  background:radial-gradient(40% 32% at 50.2% 25%, rgba(255,175,85,.5) 0%, rgba(255,140,50,.16) 46%, transparent 70%); }
.candle-stage.lit .cake-light{ opacity:1; animation:breath 3s ease-in-out infinite alternate; }
@keyframes breath{ from{ opacity:.72; } to{ opacity:1; } }

/* 火苗（定位在蜡烛/烟花棒顶端：dg.png 引线尖端 ≈ x 50.26% / y 5.81%） */
.flame-wrap{ position:absolute; left:50.26%; top:5.81%; z-index:3; width:0; height:0;
  opacity:0; transition:opacity .5s ease; pointer-events:none; }
.candle-stage.lit .flame-wrap{ opacity:1; }

.flame-glow{ position:absolute; left:-62px; bottom:-64px; width:124px; height:124px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,170,70,.55) 0%, rgba(255,130,40,.2) 45%, transparent 70%);
  filter:blur(4px); animation:glowPulse 1.7s ease-in-out infinite alternate; }
@keyframes glowPulse{ from{ transform:scale(.92); opacity:.85; } to{ transform:scale(1.1); opacity:1; } }

.flame-core{ position:absolute; left:0; bottom:-5px; transform-origin:50% 100%;
  animation:sway 2s ease-in-out infinite alternate; }
@keyframes sway{ from{ transform:rotate(-3deg) translateX(-1px); } to{ transform:rotate(3deg) translateX(1px); } }

.flame{ position:absolute; left:-17px; bottom:0; width:34px; height:34px;
  background:linear-gradient(-45deg,#ff5e00 10%,#ff9a3d 45%,#ffd36b 80%,#ffefb8 100%);
  border-radius:50% 0 50% 50%; transform:rotate(-45deg);
  filter:drop-shadow(0 0 8px rgba(255,140,20,.9));
  animation:flick .26s ease-in-out infinite alternate; }
@keyframes flick{ from{ transform:rotate(-45deg) scale(1,1); } to{ transform:rotate(-37deg) scale(.93,1.08); } }
.flame-inner{ position:absolute; inset:7px 6px 8px;
  background:radial-gradient(circle at 42% 72%, #ffffff 0%, #fff3c4 45%, rgba(255,220,140,0) 78%);
  border-radius:50% 0 50% 50%; }
.flame-blue{ position:absolute; left:-9px; bottom:-10px; width:18px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 50% 62%, rgba(110,150,255,.85) 0%, rgba(80,110,255,.3) 60%, transparent 78%);
  filter:blur(.6px); }

/* 点亮后：蛋糕上方居中缓缓浮现的文字（如 809天） */
.days-wrap{ position:absolute; left:50%; top:-7%; z-index:5; pointer-events:none;
  transform:translate(-50%,-100%) translateY(16px);
  opacity:0; filter:blur(10px);
  transition:opacity 1.8s ease, transform 1.8s cubic-bezier(.2,.8,.3,1), filter 1.8s ease; }
.candle-stage.lit .days-wrap{ opacity:1; transform:translate(-50%,-100%) translateY(0); filter:blur(0); }
.days-text{ display:block; white-space:nowrap; font-weight:900; letter-spacing:.08em;
  font-size:clamp(26px,7.5vw,44px);
  background:linear-gradient(180deg,#ffffff 10%,#ffe6b0 55%,#ff9a3d 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 6px 24px rgba(255,150,60,.65)) drop-shadow(0 0 40px rgba(255,190,120,.35));
  animation:daysFloat 4.5s ease-in-out infinite alternate; }
@keyframes daysFloat{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }

/* 熄灭时的烟 */
.smoke-anchor{ position:absolute; left:50.26%; top:5.8%; width:0; height:0; z-index:4; pointer-events:none; }
.puff{ position:absolute; left:0; bottom:0; width:11px; height:11px; border-radius:50%;
  background:rgba(205,215,230,.4); filter:blur(3px);
  animation:rise 1.6s ease-out forwards; }
@keyframes rise{
  0%{ transform:translate(-50%,0) scale(.55); opacity:.85; }
  100%{ transform:translate(calc(-50% + var(--dx,0px)),-78px) scale(2.3); opacity:0; }
}

/* 按钮（独立胶囊，不再有框） */
.candle-btn{ margin:16px auto 0; display:block; width:min(74%,240px); min-height:48px; padding:12px;
  font-size:16px; font-weight:800; letter-spacing:.12em; color:#3a1c00;
  background:linear-gradient(135deg,#ffd36b,#ff9a3d 65%,#ff7a2e);
  border:none; border-radius:999px; cursor:pointer;
  box-shadow:0 12px 28px rgba(255,150,60,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s, background .4s, color .4s, box-shadow .4s; }
.candle-btn:active{ transform:scale(.96); }
.candle-btn.off{ color:#eaf1ff; background:linear-gradient(135deg,#7fb3ff,#4d7dff 65%,#3a5ce0);
  box-shadow:0 12px 28px rgba(80,120,255,.4), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------------- 音乐播放器 ---------------- */
.player{ width:min(92vw,560px); margin:0 auto 30px; padding:16px 16px 12px; border-radius:22px;
  background:linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.45); }

.player-head{ display:flex; gap:16px; align-items:center; }

/* 唱片：点击播放后旋转 */
.disc{ position:relative; width:96px; height:96px; flex:none; border-radius:50%; cursor:pointer;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, #2a2f45 0 26%, #14182a 27% 55%, #0d1120 56% 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  animation:spin 7s linear infinite; animation-play-state:paused; }
.disc.playing{ animation-play-state:running;
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 26px rgba(255,180,90,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.disc-cover{ position:absolute; left:50%; top:50%; width:52%; height:52%; margin:-26% 0 0 -26%;
  border-radius:50%; overflow:hidden; }
.disc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.disc-ring{ position:absolute; inset:8%; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.disc-hole{ position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:#080b16; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }

/* 信息与控制 */
.player-info{ flex:1 1 auto; min-width:0; }
.song-title{ font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-artist{ margin-top:2px; font-size:12px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.progress{ margin-top:10px; height:5px; border-radius:99px; background:rgba(255,255,255,.14); cursor:pointer;
  position:relative; overflow:hidden; }
.progress i{ display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#ffd36b,#ff8a3d); transition:width .2s linear; }
.time{ margin-top:5px; display:flex; justify-content:space-between; font-size:11px;
  color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums; }
.ctrls{ margin-top:8px; display:flex; align-items:center; gap:12px; }
.ctrl{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); color:#fff; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .15s, background .25s; }
.ctrl:active{ transform:scale(.92); }
.ctrl.play{ width:44px; height:44px; font-size:15px; color:#3a1c00; border:none;
  background:linear-gradient(135deg,#ffd36b,#ff9a3d 65%,#ff7a2e);
  box-shadow:0 8px 20px rgba(255,150,60,.4); }

/* 歌单 */
.playlist{ margin-top:14px; border-top:1px solid rgba(255,255,255,.1); padding-top:8px; }
.pl-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:10px; cursor:pointer;
  font-size:14px; color:rgba(255,255,255,.72); transition:background .25s, color .25s; }
.pl-row:active{ background:rgba(255,255,255,.08); }
.pl-row.active{ color:#ffd7a0; background:rgba(255,170,80,.12); }
.pl-idx{ width:22px; flex:none; font-size:12px; color:rgba(255,255,255,.4); font-variant-numeric:tabular-nums; }
.pl-name{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-bars{ flex:none; display:none; gap:2px; align-items:flex-end; height:12px; }
.pl-row.active .pl-bars{ display:flex; }
.pl-bars i{ width:2.5px; height:100%; background:#ffb15e; border-radius:2px;
  animation:eq .9s ease-in-out infinite alternate; }
.pl-bars i:nth-child(2){ animation-delay:-.3s; }
.pl-bars i:nth-child(3){ animation-delay:-.6s; }
@keyframes eq{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }

/* ---------------- 对话 ---------------- */
.chat-screen{ min-height:100vh; min-height:100svh;
  padding:9vh 16px calc(14vh + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, transparent 0%, rgba(4,6,12,.4) 45%, rgba(4,6,12,.55) 100%); }
.chat-title{ text-align:center; font-size:13px; letter-spacing:.4em; text-indent:.4em;
  color:rgba(255,255,255,.5); margin-bottom:26px; opacity:0; }
.home.show .chat-title{ animation:fadeUp .9s 1s ease both; }
.chat-wrap{ width:min(92vw,560px); margin:0 auto; display:flex; flex-direction:column; gap:20px; }

.msg{ display:flex; gap:10px; align-items:flex-end;
  opacity:0; transform:translateY(26px) scale(.97);
  transition:opacity .6s ease var(--dl,0s), transform .6s cubic-bezier(.2,.85,.3,1.12) var(--dl,0s); }
.msg.vis{ opacity:1; transform:none; }
.msg.right{ flex-direction:row-reverse; }

.avatar{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none;
  border:1px solid rgba(255,255,255,.2); background:#1a2036;
  display:flex; align-items:center; justify-content:center; font-size:19px; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.bubble{ max-width:78%; padding:8px; border-radius:16px;
  background:linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.35); }
.msg.right .bubble{ background:linear-gradient(165deg, rgba(255,170,80,.30), rgba(255,120,40,.15));
  border-color:rgba(255,180,100,.32); }

.msg-img{ display:block; width:min(60vw,230px); border-radius:10px; user-select:none; -webkit-user-drag:none; }
.msg-text{ margin-top:6px; padding:0 5px 3px; font-size:15px; line-height:1.6; color:#fff;
  word-break:break-word; }

/* ---------------- 信封区 ---------------- */
.letter-area{ position:relative; width:min(92vw,560px); margin:44px auto 0; text-align:center;
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.85,.3,1.12); }
.letter-area.vis{ opacity:1; transform:none; }

.letter-title{ font-size:13px; letter-spacing:.4em; text-indent:.4em; color:rgba(255,255,255,.5); }

/* 信封本体（上方留出的空白 = 信纸升起的空间） */
.envelope{ position:relative; width:min(90%,400px); margin:clamp(118px,33vw,168px) auto 0; }
.envelope::before{ content:''; position:absolute; left:50%; top:58%; z-index:-1;
  width:150%; height:120%; transform:translate(-50%,-50%); pointer-events:none; filter:blur(16px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,158,78,.20) 0%, rgba(255,130,60,.07) 46%, transparent 72%); }
.envelope.open::before{ animation:envGlow 1.15s ease-out; }
@keyframes envGlow{
  0%{ transform:translate(-50%,-50%) scale(1); }
  45%{ transform:translate(-50%,-50%) scale(1.13); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

.env-body{ position:relative; height:clamp(196px,54vw,258px); border-radius:12px;
  perspective:1200px; cursor:pointer; }

/* 信封主体（奶白米色，押花信封风） */
.env-back{ position:absolute; inset:0; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,#fcfaf4 0%,#f6f1e4 48%,#ece3d0 100%);
  box-shadow:0 20px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.65); }
.env-back::before{ content:''; position:absolute; left:0; right:0; top:0; height:72%;
  background:linear-gradient(180deg, rgba(122,100,70,.20) 0%, rgba(122,100,70,.06) 58%, transparent 100%); }
.env-back::after{ content:''; position:absolute; inset:9px; border-radius:7px;
  border:1px dashed rgba(160,140,108,.30); }

/* 信纸（打开时从三角口缓缓升起） */
.env-paper-clip{ position:absolute; left:6%; right:6%; top:-70%; bottom:5%; z-index:2;
  overflow:hidden; pointer-events:none; }
.env-paper{ position:absolute; left:0; right:0; top:0; height:100%;
  transform:translateY(100%); transition:transform 1.15s cubic-bezier(.2,.85,.3,1);
  border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#fffdf7 0%,#fdf6e7 58%,#f5ead4 100%);
  box-shadow:0 -12px 30px rgba(0,0,0,.38), 0 0 0 1px rgba(122,92,52,.14); }
.envelope.open .env-paper{ transform:translateY(0); pointer-events:auto; }

.paper-inner{ position:relative; height:45%; padding:14px 17px 8px;
  display:flex; flex-direction:column; }
.paper-lines{ position:absolute; left:12px; right:12px; top:13px; bottom:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(160,120,70,0) 0 24px, rgba(160,120,70,.12) 24px 25px); }
.paper-body{ position:relative; flex:1 1 auto; overflow-y:auto; scrollbar-width:none;
  font-size:13.5px; line-height:24px; color:#5b4222; text-align:left; }
.paper-body::-webkit-scrollbar{ display:none; }
.paper-body p{ margin:0 0 8px; }
.paper-body p:last-child{ margin-bottom:0; }
.paper-sign{ position:relative; margin-top:8px; text-align:right; font-size:12.5px;
  color:#8b6a3c; font-style:italic; letter-spacing:.04em; }

/* 前袋（V 形信封口） */
.env-front{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(168deg,#f8f2e5 0%,#f0e8d4 45%,#e3d8bf 100%);
  clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  filter:drop-shadow(0 -3px 8px rgba(120,95,60,.30)); }
/* 前袋上缘加深，让 V 形开口的折线更清晰 */
.env-front::before{ content:''; position:absolute; left:0; right:0; top:0; height:72%;
  background:linear-gradient(180deg, rgba(130,105,72,.20) 0%, rgba(130,105,72,.06) 42%, rgba(130,105,72,0) 100%); }
/* 前袋下缘压一道高光，做出纸张厚度感 */
.env-front::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(0deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 100%); }

/* 邮戳（装饰） */
.env-postmark{ position:absolute; right:7%; bottom:11%; z-index:3; width:76px; height:76px;
  border-radius:50%; border:1.6px dashed rgba(150,122,96,.42); transform:rotate(-14deg);
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.env-postmark span{ font-size:9px; font-weight:800; letter-spacing:.05em;
  color:rgba(150,122,96,.62); white-space:nowrap; }

/* 三角封盖（点印章后翻开）——SVG 绘制：三角 + 明显的 V 形折痕边（深痕+下缘高光） */
.env-flap{ position:absolute; left:0; top:0; width:100%; height:58%; z-index:4; pointer-events:none;
  transform-origin:top center; transform:rotateX(0deg);
  transition:transform .9s cubic-bezier(.25,.82,.3,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 116' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='fg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fcf7ea'/%3E%3Cstop offset='.55' stop-color='%23f4ecd8'/%3E%3Cstop offset='1' stop-color='%23e8ddc4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 L200,0 L100,116 Z' fill='url(%23fg)'/%3E%3Cpath d='M0,0 L100,116 L200,0' fill='none' stroke='%23a68c62' stroke-width='1.6' opacity='.72' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0,0 L100,116 L200,0' fill='none' stroke='%23fffef6' stroke-width='1' opacity='.9' transform='translate(0,1.6)' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 11px rgba(120,95,60,.45)); }
.envelope.open .env-flap{ transform:rotateX(-172deg); }

/* 前袋 V 形压痕（关闭时被翻盖压住，翻开后显露出来） */
.env-crease{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L50,56 L100,0' fill='none' stroke='%23a1875d' stroke-width='1.5' opacity='.62' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0,0 L50,56 L100,0' fill='none' stroke='%23fffdf2' stroke-width='1' opacity='.85' transform='translate(0,1.3)' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.envelope.open .env-crease{ z-index:7; }

/* 火漆印章（YZ.png 图片印章，压在花束中央像"火漆封花"） */
.wax-seal{ position:absolute; left:50%; top:58%; z-index:7; width:66px; height:66px; padding:0;
  transform:translate(-50%,-50%); border:none; border-radius:50%; cursor:pointer;
  background:transparent; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .45s cubic-bezier(.2,.8,.3,1.35), opacity .45s ease; }
.wax-seal img{ width:100%; height:100%; object-fit:contain; border-radius:50%;
  filter:drop-shadow(0 6px 12px rgba(70,30,35,.42));
  user-select:none; -webkit-user-drag:none; }
.wax-seal::before{ content:''; position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(233,120,150,.45); animation:sealRing 2.8s ease-out infinite; }
@keyframes sealRing{
  0%{ box-shadow:0 0 0 0 rgba(233,120,150,.5); opacity:.85; }
  70%,100%{ box-shadow:0 0 0 20px rgba(233,120,150,0); opacity:0; }
}
.wax-seal:hover{ transform:translate(-50%,-50%) scale(1.07); }
.wax-seal:active{ transform:translate(-50%,-50%) scale(.93); }
.envelope.open .wax-seal{ transform:translate(-50%,-50%) scale(.8) rotate(-12deg); opacity:.55; }
.envelope.open .wax-seal::before{ animation:none; opacity:0; }

/* 押花装饰（横贯信封上部，压住 V 口，真实干花质感） */
.env-flowers{ position:absolute; left:-3%; top:-32%; width:106%; height:auto; z-index:6;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 6px 11px rgba(110,80,50,.38));
  transition:transform 1.1s cubic-bezier(.2,.85,.3,1); }
/* 开信时花丛轻轻下沉一点，给升起的信让路 */
.envelope.open .env-flowers{ transform:translateY(22%); }
/* 手写小标签（奶油色纸条） */
.env-tag{ position:absolute; right:6%; bottom:9%; z-index:4; pointer-events:none;
  padding:7px 15px 8px; border-radius:3px; transform:rotate(-2.5deg);
  background:linear-gradient(165deg,#fdf7e3 0%,#f5ecd2 100%);
  box-shadow:0 3px 8px rgba(110,85,50,.28), inset 0 0 0 1px rgba(255,255,255,.6);
  font-family:'Segoe Script','Brush Script MT','Snell Roundhand',cursive;
  font-size:11.5px; line-height:1.3; color:#6d5b3e; white-space:nowrap; }

/* 打开后：前袋 / 邮戳 / 标签 浮到信纸之上，花与印章在最上层 */
.envelope.open .env-paper-clip{ z-index:6; }
.envelope.open .env-front{ z-index:7; }
.envelope.open .env-postmark{ z-index:7; }
.envelope.open .env-tag{ z-index:7; }
.envelope.open .env-flowers{ z-index:8; }
.envelope.open .wax-seal{ z-index:9; }

.letter-hint{ margin-top:22px; font-size:12.5px; letter-spacing:.14em; color:rgba(255,216,164,.62);
  text-shadow:0 0 12px rgba(255,190,110,.25); }

/* ---------------- 响应式适配 ---------------- */
@media (min-width:768px){
  .hero{ top:12vh; }
  .main-title{ font-size:clamp(64px,11.5vw,118px); }
  .candle-card{ width:420px; bottom:6vh; }
}
/* 矮桌面窗口：进一步压缩纵向空间 */
@media (min-width:768px) and (max-height:720px){
  .hero{ top:7vh; }
  .main-title{ font-size:clamp(56px,9.5vw,96px); }
  .candle-card{ width:min(46vh,380px); bottom:4vh; }
  .days-text{ font-size:clamp(24px,4.6vh,36px); }
}
@media (max-width:360px){
  .candle-card{ width:94vw; }
  .disc{ width:84px; height:84px; }
}
/* 手机横屏 */
@media (max-height:560px) and (orientation:landscape){
  .hero{ top:3.5vh; gap:1.2vh; }
  .main-title{ font-size:clamp(36px,13vh,84px); }
  .candle-card{ width:min(56vw,300px); bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
  .candle-btn{ min-height:40px; padding:8px; font-size:14px; margin-top:10px; }
  .chat-screen{ padding:8vh 14px 10vh; }
  .letter-area{ margin-top:28px; }
  .envelope{ margin-top:clamp(92px,25vw,124px); }
  .env-body{ height:clamp(150px,40vw,196px); }
}
/* 减少动态效果偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01s !important; animation-iteration-count:1 !important; }
}