/* ============================================================
   梦境闯关地图（竖向滚动长卷 · 樱花糖果粉）
   一条自下而上蜿蜒的发光丝带小路，串起全部关卡；上下滑动查看所有关；
   满屏粉色星云氛围 + 精细 Q 版角色(多动作) + 磨砂弹窗
   ============================================================ */

:root{
  --p-hot:#ff7fb8; --p-mid:#ffb0d8; --p-soft:#ffd4ec; --p-deep:#e85f95;
  --gold:#ffd76a; --gold-d:#f2a93a; --ink:#a24672;
}

body.on-adventure .game-header{ display:none; }
body.on-adventure{ overscroll-behavior:none; }
html.adv-lock{ overflow:hidden; height:100%; overscroll-behavior:none; }
#page-levels.page{ padding:0; }
#page-levels.page.active{ display:block; }

/* ---------- 根画布（固定视口，内部滚动） ---------- */
.dream-root{
  position:fixed; inset:0; overflow:hidden; user-select:none;
  /* 背景变量化：默认值＝樱花粉春（与旧版完全一致）；季节主题在 season.css 覆盖 */
  background:
    radial-gradient(120% 80% at 72% 10%, var(--dream-hi, rgba(255,255,255,.65)), transparent 50%),
    radial-gradient(100% 80% at 16% 90%, var(--dream-c1, rgba(255,208,232,.7)), transparent 60%),
    radial-gradient(90% 70% at 50% 48%, var(--dream-c2, rgba(255,180,220,.45)), transparent 70%),
    var(--dream-grad, linear-gradient(165deg,#ffd7ee 0%, #ffc2e4 32%, #ffb2da 58%, #ffcbe8 82%, #ffe8f4 100%));
  transition:background 1.2s ease;
}

/* ---------- 满屏梦境氛围（固定不滚） ---------- */
.dream-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.dream-moon{
  position:absolute; top:6%; right:12%; width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #fffafd, #ffe6f2 55%, #ffd0e6);
  box-shadow:0 0 66px 24px rgba(255,214,235,.6); animation:moonGlow 7s ease-in-out infinite; z-index:1;
}
@keyframes moonGlow{ 0%,100%{ opacity:.85; transform:scale(1) } 50%{ opacity:1; transform:scale(1.05) } }
.dream-mist{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); filter:blur(6px); animation:mistDrift linear infinite; }
@keyframes mistDrift{ from{ transform:translateX(-8%) } to{ transform:translateX(8%) } }
.dream-isle{ position:absolute; border-radius:50% 50% 46% 46%/70% 70% 30% 30%; background:linear-gradient(180deg, rgba(255,190,225,.55), rgba(255,160,205,.4)); filter:blur(1px); box-shadow:0 0 24px rgba(255,180,220,.5); animation:floaty ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.dream-crystal{ position:absolute; width:0;height:0; opacity:.75; animation:floaty ease-in-out infinite, spinSlow linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg) } }
.dream-star{ position:absolute; background:#fff; border-radius:50%; box-shadow:0 0 6px #fff; animation:twinkle ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.3; transform:scale(.6) } 50%{ opacity:1; transform:scale(1) } }
.dream-fly{ position:absolute; width:6px;height:6px; border-radius:50%; background:radial-gradient(circle,#fff3d6,#ffd98a); box-shadow:0 0 10px 3px rgba(255,210,140,.7); animation:flyPath ease-in-out infinite; }
@keyframes flyPath{ 0%{ transform:translate(0,0); opacity:.4 } 25%{ transform:translate(22px,-18px); opacity:1 } 50%{ transform:translate(-14px,-30px); opacity:.7 } 75%{ transform:translate(16px,-14px); opacity:1 } 100%{ transform:translate(0,0); opacity:.4 } }

/* ---------- 滚动区 + 长卷轨道 ---------- */
.dream-scroll{ position:absolute; inset:0; z-index:2; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dream-scroll::-webkit-scrollbar{ display:none; }
.dream-track{ position:relative; width:100%; }

/* ---------- 发光丝带小路 ---------- */
.road-svg{ position:absolute; left:0; top:0; overflow:visible; }
.road-glow{ fill:none; stroke:#ff9ecf; stroke-width:28; stroke-linecap:round; stroke-linejoin:round; filter:blur(8px); opacity:.5; animation:roadBreathe 3.5s ease-in-out infinite; }
@keyframes roadBreathe{ 0%,100%{ opacity:.4 } 50%{ opacity:.68 } }
.road-band{ fill:none; stroke:url(#roadGrad); stroke-width:16; stroke-linecap:round; stroke-linejoin:round; }
.road-shine{ fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:2 26; opacity:.9; animation:roadFlow 9s linear infinite; }
@keyframes roadFlow{ to{ stroke-dashoffset:-560 } }
.road-particle{ position:absolute; width:5px;height:5px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 8px #ffd0ea; animation:pUp ease-in-out infinite; }
@keyframes pUp{ 0%{ transform:translateY(4px) scale(.5); opacity:0 } 40%{ opacity:.95 } 100%{ transform:translateY(-16px) scale(1); opacity:0 } }

/* ---------- 水晶关卡节点（长列表：仅当前关做动画，其余静态发光） ---------- */
.node{
  position:absolute; width:50px;height:50px; margin:-25px 0 0 -25px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5;
  font-weight:800; font-size:17px; color:#fff; transition:transform .18s;
}
.node::before{ content:""; position:absolute; left:20%; top:12%; width:36%; height:26%; border-radius:50%; background:rgba(255,255,255,.75); filter:blur(1px); }
.node .num{ position:relative; text-shadow:0 1px 3px rgba(150,60,110,.5); }
.node.locked{ background:radial-gradient(circle at 40% 34%, #ffe8f5, #ff9ecf 92%); opacity:.9; box-shadow:0 0 14px rgba(255,150,205,.55), inset 0 3px 6px rgba(255,255,255,.6); }
.node.locked .num{ opacity:.8; }
.node.completed{ background:radial-gradient(circle at 40% 34%, #fff0c0, var(--gold) 70%, var(--gold-d)); box-shadow:0 0 18px rgba(255,199,90,.7), inset 0 3px 6px rgba(255,255,255,.6); }
.node.current{ width:58px;height:58px;margin:-29px 0 0 -29px; background:radial-gradient(circle at 40% 34%, #ffe1ef, #ff7fb8 60%, var(--p-deep)); box-shadow:0 0 24px rgba(255,127,184,.85), inset 0 3px 7px rgba(255,255,255,.7); animation:nodePulse 1.5s ease-in-out infinite; z-index:6; }
.node:not(.locked):hover{ transform:scale(1.12); }
@keyframes nodePulse{ 0%,100%{ box-shadow:0 0 24px rgba(255,127,184,.7), 0 0 0 0 rgba(255,127,184,.5), inset 0 3px 7px rgba(255,255,255,.7) } 50%{ box-shadow:0 0 28px rgba(255,127,184,.95), 0 0 0 15px rgba(255,127,184,0), inset 0 3px 7px rgba(255,255,255,.7) } }
.node .chest{ position:absolute; top:-26px; font-size:22px; animation:floaty 2.4s ease-in-out infinite; }
.node .flag{ position:absolute; top:-15px; font-size:14px; }
.node .bell{ position:absolute; top:-18px; right:-8px; font-size:14px; animation:bellRing 1.2s ease-in-out infinite; transform-origin:top center; }
/* 褪色星光修复：待复习的节点星光黯淡、缓慢明灭，召唤玩家来「点亮」 */
.node.faded{ filter:grayscale(.35) brightness(.86); animation:fadeStar 2.6s ease-in-out infinite; }
.node.faded .num{ opacity:.7; }
.node .fadestar{ position:absolute; top:-19px; right:-9px; font-size:14px; color:#cdbdf0; text-shadow:0 0 8px rgba(150,120,220,.7); animation:fadeStar 2.6s ease-in-out infinite; }
@keyframes fadeStar{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes bellRing{ 0%,100%{ transform:rotate(-12deg) } 50%{ transform:rotate(12deg) } }
.node .cap{ position:absolute; bottom:-20px; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(150,60,110,.6); white-space:nowrap; }

/* ---------- 章节横幅（滚动路标） ---------- */
.dream-chapter{
  position:absolute; z-index:5; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.32); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55); border-radius:20px; padding:6px 18px;
  font-size:14px; font-weight:800; color:#a24672; text-shadow:0 1px 3px rgba(255,255,255,.6); white-space:nowrap;
  box-shadow:0 0 18px rgba(255,170,215,.5);
}

/* ---------- 角色 ---------- */
.dream-char{ position:absolute; z-index:8; width:112px; height:140px; margin:-138px 0 0 -56px; transform-origin:bottom center; }
.dream-char svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 6px 10px rgba(150,60,110,.28)); }
.dream-char .aura{ animation:auraPulse 3s ease-in-out infinite; transform-origin:center; }
@keyframes auraPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:.6 } }
.dream-char .eyes{ animation:blink 4.2s ease-in-out infinite; transform-origin:center 40px; }
@keyframes blink{ 0%,6%,12%,100%{ transform:scaleY(1) } 3%,9%{ transform:scaleY(.12) } }
.dream-char .m-happy,.dream-char .m-sad{ display:none; }
.dream-char.exp-happy .m-normal{ display:none; } .dream-char.exp-happy .m-happy{ display:block; }
.dream-char.exp-sad .m-normal{ display:none; } .dream-char.exp-sad .m-sad{ display:block; }
.dream-char.idle{ animation:charBob 1.9s ease-in-out infinite; }
@keyframes charBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.dream-char.idle .arm-r{ animation:armWave 3.4s ease-in-out infinite; transform-origin:top center; }
@keyframes armWave{ 0%,72%,100%{ transform:rotate(2deg) } 80%{ transform:rotate(-38deg) } 88%{ transform:rotate(-20deg) } 96%{ transform:rotate(-38deg) } }
.dream-char.idle .arm-l{ animation:armIdle 2.4s ease-in-out infinite; transform-origin:top center; }
@keyframes armIdle{ 0%,100%{ transform:rotate(3deg) } 50%{ transform:rotate(-5deg) } }
.dream-char.rest{ animation:charHop 1.1s ease-in-out infinite; }
@keyframes charHop{ 0%,100%{ transform:translateY(0) } 40%,55%{ transform:translateY(-14px) } }
.dream-char.walking{ animation:walkBob .42s ease-in-out infinite; }
@keyframes walkBob{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-7px) rotate(1deg) } }
.dream-char .leg-l,.dream-char .leg-r,.dream-char .arm-l,.dream-char .arm-r{ transform-origin:top center; }
.dream-char.walking .leg-l,.dream-char.walking .arm-r{ animation:swingA .42s linear infinite; }
.dream-char.walking .leg-r,.dream-char.walking .arm-l{ animation:swingB .42s linear infinite; }
@keyframes swingA{ 0%,100%{ transform:rotate(22deg) } 50%{ transform:rotate(-22deg) } }
@keyframes swingB{ 0%,100%{ transform:rotate(-22deg) } 50%{ transform:rotate(22deg) } }
.dream-char.win{ animation:charWin 1.2s ease; }
@keyframes charWin{ 0%{ transform:translateY(0) rotate(0) } 25%{ transform:translateY(-54px) rotate(0) } 55%{ transform:translateY(-60px) rotate(360deg) } 100%{ transform:translateY(0) rotate(360deg) } }
.dream-char.happy{ animation:charHop .6s ease-in-out infinite; }
.dream-char.happy .arm-l{ animation:clapL .4s ease-in-out infinite; transform-origin:top center; }
.dream-char.happy .arm-r{ animation:clapR .4s ease-in-out infinite; transform-origin:top center; }
@keyframes clapL{ 0%,100%{ transform:rotate(-30deg) } 50%{ transform:rotate(-6deg) } }
@keyframes clapR{ 0%,100%{ transform:rotate(30deg) } 50%{ transform:rotate(6deg) } }
.dream-char.sad{ animation:charSad 2.4s ease-in-out infinite; }
@keyframes charSad{ 0%,100%{ transform:translateY(2px) rotate(-2deg) } 50%{ transform:translateY(4px) rotate(2deg) } }
.dream-char .cape{ transform-origin:top center; animation:capeSway 2.2s ease-in-out infinite; }
@keyframes capeSway{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }

.name-tag{
  position:absolute; z-index:9; transform:translate(-50%,-100%);
  background:rgba(255,255,255,.42); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.6);
  color:#a24672; font-size:13px; font-weight:800; white-space:nowrap; padding:4px 14px; border-radius:16px;
  text-shadow:0 1px 2px rgba(255,255,255,.5); box-shadow:0 0 16px rgba(255,170,215,.6); cursor:pointer;
  transition:left 1.05s ease-in-out, top 1.05s ease-in-out;
}
.name-tag .edit{ opacity:.6; margin-left:4px; }

.dust{ position:absolute; z-index:7; font-size:16px; opacity:0; pointer-events:none; }
.dust.go{ animation:dustGo .7s ease-out; }
@keyframes dustGo{ 0%{ opacity:.9; transform:scale(.5) } 100%{ opacity:0; transform:scale(1.4) translateY(-10px) } }
.burst{ position:absolute; z-index:9; pointer-events:none; }
.burst span{ position:absolute; font-size:16px; animation:burstOut .9s ease-out forwards; }
@keyframes burstOut{ 0%{ transform:translate(0,0) scale(.4); opacity:1 } 100%{ transform:translate(var(--bx),var(--by)) scale(1.1); opacity:0 } }

/* ============================================================
   悬浮 UI（固定安全区，不随滚动）
   ============================================================ */
.adv-profile{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); z-index:30;
  display:flex; align-items:center; gap:10px; max-width:66vw;
  background:rgba(255,255,255,.35); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.55);
  border-radius:24px; padding:6px 15px 6px 6px; box-shadow:0 0 22px rgba(255,150,205,.4); cursor:pointer;
}
.adv-profile .pf-avatar{ width:40px;height:40px; border-radius:50%; background:rgba(255,255,255,.5); overflow:hidden; display:flex; align-items:flex-start; justify-content:center; flex:0 0 auto; box-shadow:inset 0 0 0 2px rgba(255,127,184,.4); }
.adv-profile .pf-avatar svg{ width:150%; height:150%; margin-top:14%; }
.adv-profile .pf-name{ font-weight:800; color:#a24672; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adv-profile .pf-sub{ font-size:11px; color:#b56b90; white-space:nowrap; }
.adv-profile .pf-login{ font-weight:800; color:#a24672; font-size:13px; padding:3px 4px; }

.adv-round{
  position:fixed; z-index:30; width:42px;height:42px; border:none; border-radius:50%;
  background:rgba(255,255,255,.38); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5);
  color:#a24672; font-size:19px; cursor:pointer; box-shadow:0 0 16px rgba(255,150,205,.45);
}
.adv-back{ top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); }
.bgm-toggle{ top:calc(64px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); font-size:17px; }
.act-btn{ top:calc(114px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); font-size:18px; }
.adv-review{
  position:fixed; top:calc(164px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); z-index:30;
  display:none; align-items:center; gap:6px; background:rgba(255,127,184,.9); color:#fff; font-weight:800; font-size:12px;
  padding:7px 12px; border-radius:16px; cursor:pointer; box-shadow:0 0 16px rgba(255,127,184,.55); animation:floaty 2.4s ease-in-out infinite;
}
.adv-review.show{ display:flex; }
.adv-cta{
  position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:30; border:none; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,190,225,.96), rgba(255,127,184,.96)); color:#fff; font-weight:800; font-size:15px;
  padding:12px 30px; border-radius:30px; box-shadow:0 0 26px rgba(255,127,184,.6), inset 0 2px 4px rgba(255,255,255,.5);
  animation:ctaFloat 1.8s ease-in-out infinite;
}
@keyframes ctaFloat{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-5px) } }

.act-panel{
  position:fixed; top:calc(114px + env(safe-area-inset-top)); right:calc(64px + env(safe-area-inset-right)); z-index:31;
  display:none; flex-direction:column; gap:6px; background:rgba(255,130,185,.5); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:8px; box-shadow:0 0 22px rgba(255,150,205,.5);
}
.act-panel.show{ display:flex; animation:advFade .2s ease; }
.act-panel button{ border:none; background:rgba(255,255,255,.35); color:#a24672; font-size:13px; font-weight:700; padding:7px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.act-panel button:hover{ background:rgba(255,255,255,.6); }

/* ---------- 弹窗 ---------- */
.adv-modal{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(150,60,110,.32); backdrop-filter:blur(5px); }
.adv-modal.show{ display:flex; animation:advFade .25s ease; }
@keyframes advFade{ from{ opacity:0 } to{ opacity:1 } }
.adv-sheet{
  width:min(92vw,360px); border-radius:26px; padding:22px 20px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,240,248,.95));
  box-shadow:0 20px 60px rgba(150,60,110,.34), 0 0 30px rgba(255,150,205,.4);
  animation:advPop .32s cubic-bezier(.2,1.3,.5,1);
}
@keyframes advPop{ from{ transform:scale(.82); opacity:0 } to{ transform:scale(1); opacity:1 } }
.adv-sheet h3{ margin:2px 0 4px; color:#e85f95; font-size:19px; }
.adv-sheet .tip{ color:#b07a95; font-size:12.5px; margin-bottom:16px; }
.adv-pick{ display:flex; gap:14px; justify-content:center; margin:6px 0 4px; }
.adv-pick .opt{ flex:1; border-radius:20px; padding:12px 6px 10px; cursor:pointer; background:rgba(255,245,250,.9); box-shadow:0 4px 14px rgba(255,130,185,.18); border:3px solid transparent; transition:.18s; }
.adv-pick .opt:hover{ transform:translateY(-3px); }
.adv-pick .opt.sel{ border-color:#ff7fb8; box-shadow:0 6px 18px rgba(255,127,184,.45); }
.adv-pick .opt svg{ width:88px; height:110px; }
.adv-pick .opt .cap{ font-weight:800; font-size:13px; margin-top:4px; color:var(--ink); }
.adv-pick .opt.girl .cap{ color:#d6648a; } .adv-pick .opt.boy .cap{ color:#4a90d9; }
.adv-pick .opt svg .arm-l{ transform-origin:top center; animation:armIdle 2.4s ease-in-out infinite; }
.adv-pick .opt svg .arm-r{ transform-origin:top center; animation:armIdle 2.4s ease-in-out infinite .3s; }
.adv-input{ width:100%; box-sizing:border-box; padding:11px 14px; border-radius:14px; border:2px solid #ffcfe6; font-size:15px; color:var(--ink); outline:none; margin:6px 0 4px; background:#fff; }
.adv-input:focus{ border-color:#ff7fb8; }
.adv-btn{ width:100%; box-sizing:border-box; margin-top:12px; padding:12px; border:none; border-radius:16px; cursor:pointer; font-size:15px; font-weight:800; color:#fff; background:linear-gradient(180deg,#ffa6cf,#ff7fb8); box-shadow:0 8px 20px rgba(255,127,184,.45); }
.adv-btn.ghost{ background:none; color:#b07a95; box-shadow:none; margin-top:4px; }
.adv-note{ font-size:11px; color:#c496ac; margin-top:10px; }
.adv-stat-row{ display:flex; justify-content:space-around; margin:14px 0 6px; }
.adv-stat-row .s{ text-align:center; } .adv-stat-row .s b{ display:block; font-size:20px; color:#e85f95; } .adv-stat-row .s span{ font-size:11px; color:#b07a95; }

@media (prefers-reduced-motion:reduce){
  .dream-mist,.dream-fly,.dream-star,.dream-isle,.dream-crystal,.road-shine,.road-particle,.dream-char *{ animation:none !important; }
}