:root{
    --paper:#F8F1ED;
    --card:#FFFFFF;
    --ink:#41322D;
    --ink-soft:#7C6A63;
    --rose:#C4707F;
    --hankou:#B9502F;   /* 汉口 · 老租界砖红 */
    --wuchang:#3E6E8E;  /* 武昌 · 长江青蓝 */
    --donghu:#5B8A63;   /* 东湖 · 湖岸绿 */
    --guanggu:#C4694A;  /* 光谷 · 西班牙砖红 */
    --gold:#D2A04F;     /* 过早酱黄 */
    --river:#CBD8DE;
    --line:#EEDFD8;
    --radius:18px;
    --shadow:0 6px 24px rgba(120,70,60,.09);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{
    font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    min-height:100vh;
    overflow-x:hidden;
  }
  .kai{font-family:"Kaiti SC","STKaiti","KaiTi","PingFang SC",serif}

  .wrap{max-width:480px;margin:0 auto;padding:0 18px 90px}


  /* ============ 场景背景（跟随页面切换） ============ */
  .scenery{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .scene{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
  .scene.on{opacity:1}
  .scene svg{position:absolute;width:100%;height:100%;left:0;top:0}
  .wrap{position:relative;z-index:1}
  .drift{animation:driftDown 11s linear infinite}
  .drift.d2{animation-duration:14s;animation-delay:3s}
  .drift.d3{animation-duration:17s;animation-delay:6s}
  @keyframes driftDown{
    0%{transform:translate(0,-6%) rotate(0deg)}
    100%{transform:translate(-40px,106vh) rotate(300deg)}
  }
  .gull{animation:gullFly 26s linear infinite}
  @keyframes gullFly{0%{transform:translateX(-10vw)}100%{transform:translateX(110vw)}}
  @media(prefers-reduced-motion:reduce){.drift,.gull{animation:none}}


  /* ============ 开屏天气动画 ============ */
  #weather-intro{
    position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
    opacity:1;cursor:pointer
  }
  #weather-intro.intro-sun{background:linear-gradient(180deg,#FBEAD0,#F8DDBA)}
  #weather-intro.intro-rain{background:linear-gradient(180deg,#DCE5EC,#C9D6E0)}
  #weather-intro.intro-night{background:linear-gradient(180deg,#494E6B,#6B6486)}
  #intro-cat{width:200px;height:200px;position:relative;z-index:2;will-change:transform}
  #intro-cat svg{width:100%;height:100%}
  .intro-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  /* 晴：旋转光轮 */
  .intro-sun .intro-fx::before{
    content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;
    background:conic-gradient(from 0deg, rgba(245,160,95,.35) 0 14deg, transparent 14deg 30deg,
      rgba(245,160,95,.35) 30deg 44deg, transparent 44deg 60deg, rgba(245,160,95,.35) 60deg 74deg,
      transparent 74deg 90deg, rgba(245,160,95,.35) 90deg 104deg, transparent 104deg 120deg,
      rgba(245,160,95,.35) 120deg 134deg, transparent 134deg 150deg, rgba(245,160,95,.35) 150deg 164deg,
      transparent 164deg 180deg, rgba(245,160,95,.35) 180deg 194deg, transparent 194deg 210deg,
      rgba(245,160,95,.35) 210deg 224deg, transparent 224deg 240deg, rgba(245,160,95,.35) 240deg 254deg,
      transparent 254deg 270deg, rgba(245,160,95,.35) 270deg 284deg, transparent 284deg 300deg,
      rgba(245,160,95,.35) 300deg 314deg, transparent 314deg 330deg, rgba(245,160,95,.35) 330deg 344deg,
      transparent 344deg 360deg);
    border-radius:50%;animation:rayspin 9s linear infinite;
    -webkit-mask:radial-gradient(circle, transparent 96px, #000 100px, #000 60%, transparent 72%);
    mask:radial-gradient(circle, transparent 96px, #000 100px, #000 60%, transparent 72%);
  }
  @keyframes rayspin{to{transform:rotate(360deg)}}
  /* 雨：斜落雨丝两层 */
  .intro-rain .intro-fx::before,
  .intro-rain .intro-fx::after{
    content:"";position:absolute;left:-30%;top:-120%;width:160%;height:240%;
    background:repeating-linear-gradient(105deg, transparent 0 16px, rgba(72,110,150,.28) 16px 18px);
    animation:rainfall 1.1s linear infinite;
  }
  .intro-rain .intro-fx::after{
    background:repeating-linear-gradient(105deg, transparent 0 26px, rgba(72,110,150,.16) 26px 27.5px);
    animation-duration:.7s;
  }
  @keyframes rainfall{to{transform:translate(-36px,132px)}}
  /* 夜：星星 */
  .intro-night .intro-fx i{
    position:absolute;width:4px;height:4px;border-radius:50%;background:#F4E9B8;
    animation:twinkle 1.6s ease-in-out infinite alternate;
  }
  .intro-night .intro-fx i:nth-child(2){animation-delay:.4s}
  .intro-night .intro-fx i:nth-child(3){animation-delay:.8s}
  .intro-night .intro-fx i:nth-child(4){animation-delay:.2s}
  .intro-night .intro-fx i:nth-child(5){animation-delay:.6s}
  .intro-night .intro-fx i:nth-child(6){animation-delay:1s}
  @keyframes twinkle{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:scale(1.2)}}
  .intro-night .intro-fx::before{
    content:"";position:absolute;right:14%;top:12%;width:52px;height:52px;border-radius:50%;
    background:#F4E9B8;box-shadow:-14px 6px 0 6px #58547A inset;opacity:.9;
  }
  #intro-hint{
    position:absolute;bottom:34px;left:0;right:0;text-align:center;
    font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.85);z-index:2
  }
  .intro-sun #intro-hint,.intro-rain #intro-hint{color:rgba(70,60,50,.5)}


  #intro-cat{width:210px;height:auto}
  #intro-cat svg{display:block;width:100%;height:auto}
  .icat .p2{opacity:0;transition:opacity .35s ease}
  .icat.act .p2{opacity:1}
  .icat .p1{transition:opacity .3s ease}
  .icat.act .p1{opacity:0}
  .icat .umb{transform:scale(0);transform-origin:32px 2px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .icat.act .umb{transform:scale(1)}
  .sweat{animation:sweatFall 1s ease-in infinite}
  .sweat.s2{animation-delay:.45s}
  @keyframes sweatFall{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(9px);opacity:0}}
  .dripline{animation:dripFall .8s linear infinite}
  .dripline.d2{animation-delay:.3s}
  .dripline.d3{animation-delay:.55s}
  @keyframes dripFall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
  .icat .zz{opacity:0;transition:opacity .5s ease .25s}
  .icat.act .zz{opacity:1}


  /* ==== 开屏小剧场 v3：动画式脸部（squash&stretch + 五官迁移，2.4s） ==== */
  .in2{transform-box:fill-box}
  .in2-breathe{transform-origin:center bottom;animation:in2breath 1.3s ease-in-out infinite alternate}
  @keyframes in2breath{from{transform:scaleY(1)}to{transform:scaleY(1.02)}}
  .in2-umb{transform-origin:center bottom;animation:in2umb 2.4s cubic-bezier(.34,1.4,.5,1) forwards}
  @keyframes in2umb{
    0%,44%{transform:scale(0) rotate(-24deg);opacity:0}
    50%{opacity:1}
    56%{transform:scale(1.1) rotate(3deg);opacity:1}
    64%,100%{transform:scale(1) rotate(0);opacity:1}
  }
  .in2-sweat{animation:in2sweat 2.4s ease forwards}
  .in2-sweat.s2{animation-delay:.12s}
  @keyframes in2sweat{
    0%{opacity:0;transform:translateY(0)}8%{opacity:1}
    18%{opacity:0;transform:translateY(7px)}22%{opacity:0;transform:translateY(0)}
    30%{opacity:1}42%,100%{opacity:0;transform:translateY(7px)}
  }
  .in2-faceA{animation:in2fa 2.4s steps(1,end) forwards}
  @keyframes in2fa{0%{opacity:1}50%,100%{opacity:0}}
  .in2-faceB{animation:in2fb 2.4s steps(1,end) forwards}
  @keyframes in2fb{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
  .in2-faceB-eyes{animation:in2fbe 2.4s steps(1,end) forwards}
  @keyframes in2fbe{0%{opacity:0}50%{opacity:1}84%{opacity:0}89%{opacity:1}100%{opacity:1}}
  .in2-blink{animation:in2blink 2.4s steps(1,end) forwards}
  @keyframes in2blink{0%{opacity:0}84%{opacity:1}89%{opacity:0}100%{opacity:0}}
  /* 喘气两帧循环（晴·前半段） */
  .in2-pantA{animation:in2pa 2.4s steps(1,end) forwards}
  @keyframes in2pa{0%{opacity:0}7%{opacity:1}14%{opacity:0}21%{opacity:1}28%{opacity:0}35%{opacity:1}42%,100%{opacity:0}}
  .in2-pantB{animation:in2pb 2.4s steps(1,end) forwards}
  @keyframes in2pb{0%{opacity:1}7%{opacity:0}14%{opacity:1}21%{opacity:0}28%{opacity:1}35%{opacity:0}42%{opacity:1}50%,100%{opacity:0}}
  /* 头部形变：晴=融化下塌→蓄力→弹起 */
  .in2-headS{transform-origin:center bottom;animation:in2headS 2.4s ease forwards}
  @keyframes in2headS{
    0%{transform:none}
    14%,40%{transform:translateY(2.5px) scale(1.07,.9)}
    47%{transform:translateY(3.5px) scale(1.11,.82)}
    54%{transform:translateY(-4px) scale(.96,1.1)}
    62%{transform:translateY(.5px) scale(1.03,.97)}
    70%,100%{transform:none}
  }
  .in2-wilt{transform-origin:center bottom;animation:in2wilt 2.4s ease forwards}
  @keyframes in2wilt{0%{transform:rotate(0)}14%,44%{transform:rotate(2.2deg)}54%{transform:rotate(-1deg)}64%,100%{transform:rotate(0)}}
  /* 雨：缩脖压缩 + 身体甩、头部滞后反摆 */
  .in2-headR{transform-origin:center bottom;animation:in2headR 2.4s ease forwards}
  @keyframes in2headR{
    0%,5%{transform:none}
    10%,44%{transform:translateY(1.6px) scale(1.03,.94)}
    56%{transform:rotate(5deg)}61%{transform:rotate(-5deg)}
    66%{transform:rotate(3.5deg)}72%,100%{transform:none}
  }
  .in2-shiver{transform-origin:center bottom;animation:in2shiv 2.4s ease forwards}
  @keyframes in2shiv{
    0%,4%{transform:translateX(0)}8%{transform:translateX(-1.4px)}14%{transform:translateX(1.4px)}
    20%{transform:translateX(-1.4px)}26%{transform:translateX(1.4px)}32%{transform:translateX(-1.2px)}
    38%{transform:translateX(1.2px)}44%{transform:translateX(0)}
    56%{transform:rotate(-6deg)}61%{transform:rotate(6deg)}66%{transform:rotate(-4.5deg)}
    70%{transform:rotate(3.5deg)}74%,100%{transform:rotate(0)}
  }
  .in2-trem{animation:in2trem 2.4s linear forwards}
  @keyframes in2trem{
    0%{transform:translateX(0)}10%{transform:translateX(.8px)}20%{transform:translateX(-.8px)}
    30%{transform:translateX(.8px)}40%{transform:translateX(-.6px)}46%,100%{transform:translateX(0)}
  }
  .in2-wet{animation:in2wet 2.4s ease forwards}
  @keyframes in2wet{0%,52%{opacity:.75}68%,100%{opacity:0}}
  /* 夜：眨眼→眼皮沉→仰头哈欠（眼挤死）→迷糊睁一拍→闭眼 */
  .in2-headN{transform-origin:center bottom;animation:in2headN 2.4s ease forwards}
  @keyframes in2headN{
    0%,14%{transform:none}
    22%{transform:rotate(-8deg) translateY(-1px) scaleY(1.05)}
    30%{transform:rotate(-9deg) translateY(-1.2px) scaleY(1.06)}
    40%{transform:rotate(-5deg)}
    50%,100%{transform:none}
  }
  .in2-eyesO{transform-origin:center;animation:in2eo 2.4s steps(1,end) forwards, in2droop 2.4s ease forwards}
  @keyframes in2eo{0%{opacity:1}20%{opacity:0}44%{opacity:1}48%,100%{opacity:0}}
  @keyframes in2droop{
    0%,5%{transform:scaleY(1)}8%{transform:scaleY(.12)}11%{transform:scaleY(1)}
    18%{transform:scaleY(.8)}42%{transform:scaleY(.8)}45%,100%{transform:scaleY(.45)}
  }
  .in2-yawnEyes{animation:in2ye 2.4s steps(1,end) forwards}
  @keyframes in2ye{0%{opacity:0}20%{opacity:1}44%{opacity:0}100%{opacity:0}}
  .in2-eyesC{animation:in2ec 2.4s steps(1,end) forwards}
  @keyframes in2ec{0%{opacity:0}48%{opacity:1}100%{opacity:1}}
  .in2-yawn{transform-origin:center;animation:in2yawn 2.4s ease forwards}
  @keyframes in2yawn{
    0%,14%{transform:scale(0);opacity:0}24%{transform:scale(1.15);opacity:1}
    36%{transform:scale(1.2);opacity:1}48%,100%{transform:scale(0);opacity:0}
  }
  .in2-mouth{animation:in2mouth 2.4s steps(1,end) forwards}
  @keyframes in2mouth{0%{opacity:1}14%{opacity:0}48%{opacity:1}100%{opacity:1}}
  .in2-zzz{animation:in2zzz 2.4s ease forwards}
  @keyframes in2zzz{0%,64%{opacity:0;transform:translateY(4px)}80%,100%{opacity:1;transform:translateY(0)}}
  .in2-nod{transform-origin:center bottom;animation:in2nod 2.4s ease forwards}
  @keyframes in2nod{0%,58%{transform:rotate(0) translateY(0)}86%,100%{transform:rotate(-4deg) translateY(2px)}}

  /* ==== 隐藏信笺 ==== */
  footer{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
  #egg-letter{position:fixed;inset:0;z-index:2100;background:rgba(60,40,45,.45);
    display:flex;align-items:center;justify-content:center;padding:30px;
    opacity:0;pointer-events:none;transition:opacity .45s ease}
  #egg-letter.show{opacity:1;pointer-events:auto}
  .letter-card{background:#FFFDF8;border-radius:18px;padding:28px 24px 22px;max-width:320px;
    box-shadow:0 18px 50px rgba(60,30,30,.35);font-size:14.5px;line-height:2.1;color:#41322D;
    transform:translateY(10px);transition:transform .45s ease}
  #egg-letter.show .letter-card{transform:none}
  .letter-hint{text-align:center;font-size:11px;letter-spacing:.25em;color:#FFF;opacity:.8;
    position:absolute;bottom:26px;left:0;right:0}


  /* ==== 信笺开场 v2：全屏花开 + 花瓣雨 + 信从花心浮出 ==== */
  #egg-letter{background:linear-gradient(180deg, rgba(62,36,50,.88), rgba(88,52,66,.9));
    flex-direction:column;overflow:hidden}
  .egg-flower{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .egg-flower .stem,.egg-flower .leaf,.egg-flower .petal,.egg-flower .core,
  .egg-flower .glow{opacity:0}
  .egg-flower *{transform-box:view-box}
  #egg-letter.show .egg-flower .glow{animation:glowIn 1.4s ease 1.3s forwards}
  @keyframes glowIn{from{opacity:0}to{opacity:.55}}
  #egg-letter.show .egg-flower .stem{
    opacity:1;transform-origin:195px 780px;animation:stemGrow2 .85s cubic-bezier(.4,0,.35,1) .15s both}
  @keyframes stemGrow2{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  #egg-letter.show .egg-flower .leaf{transform-origin:195px 600px;animation:leafPop .5s ease .72s forwards}
  #egg-letter.show .egg-flower .leaf.l2{animation-delay:.86s}
  @keyframes leafPop{from{opacity:0;transform:scale(0) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
  #egg-letter.show .egg-flower .petal{
    transform-origin:195px 392px;
    animation:petalFan .95s cubic-bezier(.3,1.35,.45,1) forwards}
  @keyframes petalFan{
    from{opacity:0;transform:rotate(0deg) scale(.12)}
    55%{opacity:1}
    to{opacity:1;transform:rotate(var(--pr,0deg)) scale(1)}}
  #egg-letter.show .petal.o1{animation-delay:1.00s} #egg-letter.show .petal.o2{animation-delay:1.09s}
  #egg-letter.show .petal.o3{animation-delay:1.18s} #egg-letter.show .petal.o4{animation-delay:1.27s}
  #egg-letter.show .petal.o5{animation-delay:1.36s} #egg-letter.show .petal.o6{animation-delay:1.45s}
  #egg-letter.show .petal.i1{animation-delay:1.58s} #egg-letter.show .petal.i2{animation-delay:1.67s}
  #egg-letter.show .petal.i3{animation-delay:1.76s} #egg-letter.show .petal.i4{animation-delay:1.85s}
  #egg-letter.show .petal.i5{animation-delay:1.94s}
  #egg-letter.show .petal.a1{animation-delay:2.06s} #egg-letter.show .petal.a2{animation-delay:2.14s}
  #egg-letter.show .petal.a3{animation-delay:2.22s}
  #egg-letter.show .egg-flower .core{animation:corePop .5s cubic-bezier(.3,1.5,.5,1) 2.32s forwards}
  @keyframes corePop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
  /* 花瓣雨 */
  #egg-letter .rp{position:absolute;top:-6vh;font-size:0;width:16px;height:16px;opacity:0;
    left:var(--x);pointer-events:none;z-index:1}
  #egg-letter .rp::before{content:"";display:block;width:100%;height:100%;
    background:radial-gradient(ellipse at 40% 30%, #F7CBD5, #E8A2AE 70%);
    border-radius:70% 30% 60% 40%/60% 40% 70% 30%;transform:scale(var(--s,1))}
  #egg-letter.show .rp{animation:rainFall var(--d,7s) linear var(--dl,2s) infinite}
  @keyframes rainFall{
    0%{opacity:0;transform:translate(0,-4vh) rotate(0deg)}
    8%{opacity:.9}
    100%{opacity:.85;transform:translate(var(--sw,-40px),112vh) rotate(var(--r,300deg))}}
  /* 信从花心浮出 */
  #egg-letter .letter-card{opacity:0;transform:translateY(15vh) scale(.28);transition:none;
    z-index:3;max-width:330px;background:#FFFBF4;border:1px solid rgba(196,112,127,.35);
    box-shadow:0 24px 70px rgba(40,15,25,.5)}
  #egg-letter.show .letter-card{animation:letterBloom 1s cubic-bezier(.25,.9,.3,1) 2.55s forwards}
  @keyframes letterBloom{
    from{opacity:0;transform:translateY(15vh) scale(.28)}
    45%{opacity:1}
    to{opacity:1;transform:translateY(-5vh) scale(1)}}
  #egg-letter .letter-hint{opacity:0}
  #egg-letter.show .letter-hint{animation:hintIn .8s ease 3.5s forwards}
  @keyframes hintIn{to{opacity:.8}}

  /* ==== 信笺收起：倒放（显式 from = 展开完成态，防瞬移） ==== */
  #egg-letter.show.closing{opacity:0;transition:opacity .6s ease 1.05s}
  #egg-letter.show.closing .letter-card{animation:letterFold .5s cubic-bezier(.6,0,.7,.4) forwards}
  @keyframes letterFold{
    from{opacity:1;transform:translateY(-5vh) scale(1)}
    to{opacity:0;transform:translateY(15vh) scale(.28)}}
  #egg-letter.show.closing .egg-flower .core{animation:coreFold .3s ease .3s both}
  @keyframes coreFold{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}
  #egg-letter.show.closing .egg-flower .petal{animation:petalFold .55s cubic-bezier(.6,0,.75,.3) both}
  #egg-letter.show.closing .petal.a1,#egg-letter.show.closing .petal.a2,
  #egg-letter.show.closing .petal.a3{animation-delay:.32s}
  #egg-letter.show.closing .petal.i1,#egg-letter.show.closing .petal.i2,
  #egg-letter.show.closing .petal.i3,#egg-letter.show.closing .petal.i4,
  #egg-letter.show.closing .petal.i5{animation-delay:.44s}
  #egg-letter.show.closing .petal.o1,#egg-letter.show.closing .petal.o2,
  #egg-letter.show.closing .petal.o3,#egg-letter.show.closing .petal.o4,
  #egg-letter.show.closing .petal.o5,#egg-letter.show.closing .petal.o6{animation-delay:.56s}
  @keyframes petalFold{
    from{opacity:1;transform:rotate(var(--pr,0deg)) scale(1)}
    to{opacity:0;transform:rotate(0deg) scale(.12)}}
  #egg-letter.show.closing .egg-flower .leaf{animation:leafFold .35s ease .7s both}
  @keyframes leafFold{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}
  #egg-letter.show.closing .egg-flower .stem{animation:stemFold .5s cubic-bezier(.6,0,.7,.4) .85s both}
  @keyframes stemFold{from{opacity:1;transform:scaleY(1)}to{opacity:1;transform:scaleY(0)}}
  #egg-letter.show.closing .egg-flower .glow{animation:glowOut .5s ease .5s both}
  @keyframes glowOut{from{opacity:.55}to{opacity:0}}
  #egg-letter.show.closing .letter-hint{animation:hintOut .3s ease both}
  @keyframes hintOut{from{opacity:.8}to{opacity:0}}
  /* 移动端/Safari 加固 */
  #egg-letter .letter-card{width:min(330px,86vw)}
  #egg-letter .letter-hint{bottom:calc(22px + env(safe-area-inset-bottom))}

  /* ==== 堆叠翻页画廊 ==== */
  .card-stack{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;margin-top:8px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .card-stack .s-slide{position:absolute;bottom:0;overflow:hidden;will-change:transform;cursor:grab;transition:transform .4s cubic-bezier(.18,.89,.32,1.18),opacity .4s ease;transform-origin:center bottom;background:transparent}
  .card-stack .s-slide img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
  .cs-main{width:100%;height:100%;object-fit:contain;display:block}
  .card-stack .s-slide.cur{z-index:10;width:calc(100% - 28px);left:14px;transform:none;opacity:1}
  .card-stack .s-slide.prev{z-index:9;transform:rotate(-5deg);opacity:.55}
  .card-stack .s-slide.next{z-index:9;transform:rotate(5deg);opacity:.55}
  .card-stack .s-slide.hide{z-index:5;opacity:0;pointer-events:none}
  .stack-dots{display:flex;justify-content:center;gap:6px;padding:6px 0 0}
  .stack-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.35;transition:opacity .3s}
  .stack-dots span.act{opacity:.9;background:var(--dot,var(--rose))}




  /* ==== 艺术字（情感文案/标题专用） ==== */
  .art{
    background:linear-gradient(135deg,#A94A60 0%,#8A4A72 55%,#5E4A80 100%);
    -webkit-background-clip:text;background-clip:text;
    color:#8A4A72;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.35));
    letter-spacing:.08em;
  }
  body.soft .art{background:linear-gradient(135deg,#C4707F 0%,#A96A8E 60%,#8A6AA0 100%);
    -webkit-background-clip:text;background-clip:text}

  /* ==== 温柔模式：全局调色 ==== */
  body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(243,209,218,.42), rgba(247,228,226,.3) 55%, rgba(250,236,232,.35));
    opacity:0;transition:opacity .9s ease}
  body.soft::after{opacity:1}
  .scenery{transition:filter .9s ease}
  body.soft .scenery{filter:saturate(.68) brightness(1.05) hue-rotate(-6deg)}
  body.soft{
    --paper:#F7EAEA;--card:#FFF9F7;--ink:#4A3A3E;--ink-soft:#866F78;
    --rose:#C97F8E;--hankou:#A96763;--wuchang:#7F9BAE;
    --donghu:#8DA58D;--guanggu:#BE876F;--gold:#D7AF76;
    --river:#C7D5DA;--line:#E8D6D5;
  }
  body.soft .card{background:var(--card)}
  body.soft .alert{background:#FAE8E6;border-color:#EBD5C8}
  .card,.alert{transition:background .9s ease}

  /* ==== 出发前点位预览 ==== */
  .spots-bar{margin:14px 0 4px;background:var(--card);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:13px 16px;display:flex;align-items:center;gap:10px;
    cursor:pointer;-webkit-user-select:none;user-select:none;border:1.5px solid transparent}
  .spots-bar .cam{font-size:17px}
  .spots-bar .t{flex:1;font-size:14px;color:var(--ink)}
  .spots-bar .chev{font-size:13px;color:var(--dot,var(--ink-soft));
    animation:chevBob 1.8s ease-in-out infinite;transition:transform .4s}
  @keyframes chevBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  .spots-bar.open{border-color:var(--dot,var(--line))}
  .spots-bar.open .chev{animation:none;transform:rotate(180deg)}
  .spots-panel{max-height:0;overflow:hidden;transition:max-height .65s cubic-bezier(.4,0,.2,1)}
  .spots-panel.open{max-height:2200px}
  .spots-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 2px 6px}
  .spot-item{margin:0}
  .spot-ph{aspect-ratio:4/3;border:1.6px dashed var(--dot,var(--ink-soft));border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:11px;
    color:var(--ink-soft);background:rgba(255,255,255,.6)}
  .spot-item img{width:100%;border-radius:12px;display:block}
  .spot-item figcaption{padding:6px 2px 0}
  .spot-item figcaption b{display:block;font-size:13.5px;color:var(--ink)}
  .spot-item figcaption span{font-size:11.5px;color:var(--ink-soft);line-height:1.55;display:block;margin-top:2px}


  /* ==== 小猫信箱弹窗 ==== */
  #msg-modal{position:fixed;inset:0;z-index:2200;background:rgba(62,40,48,.42);
    display:flex;align-items:center;justify-content:center;padding:34px;
    opacity:0;pointer-events:none;transition:opacity .35s ease}
  #msg-modal.show{opacity:1;pointer-events:auto}
  .msg-card{background:#FFFBF4;border-radius:18px;padding:22px 20px 16px;width:min(310px,84vw);
    box-shadow:0 20px 60px rgba(40,15,25,.4);transform:translateY(14px) scale(.96);transition:transform .35s ease}
  #msg-modal.show .msg-card{transform:none}
  .msg-card .from{font-size:12px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:8px}
  .msg-card .body{font-size:15px;line-height:2;color:var(--ink)}
  .msg-card .ok{display:block;margin:14px auto 0;border:none;background:var(--rose);color:#fff;
    border-radius:99px;padding:7px 26px;font-size:13.5px;letter-spacing:.1em;cursor:pointer}


  /* ==== 扑克扇轮播 ==== */
  .fan{position:relative;aspect-ratio:4/3;margin:4px 0 26px;touch-action:pan-y;
    -webkit-user-select:none;user-select:none}
  .fan-card{position:absolute;inset:0;overflow:hidden;
    background:transparent;
    transform-origin:50% 115%;
    transition:transform .48s cubic-bezier(.3,.9,.4,1), opacity .48s ease;will-change:transform}
  .fan-card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
  .fan-card.is-top{transform:rotate(0) translateX(0);z-index:4}
  .fan-card.is-right{transform:rotate(11deg) translateX(9%) scale(.97);z-index:3;cursor:pointer}
  .fan-card.is-left{transform:rotate(-11deg) translateX(-9%) scale(.97);z-index:2;cursor:pointer}
  .fan-card.is-back{transform:rotate(0) scale(.93);opacity:0;z-index:1;pointer-events:none}
  .fan-dots{position:absolute;left:0;right:0;bottom:-20px;display:flex;justify-content:center;gap:6px}
  .fan-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s}
  .fan-dots i.on{background:var(--dot,var(--rose))}
  /* ==== 站内收起画廊 ==== */
  .pv{margin-top:10px}
  .pv-toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dot,var(--ink-soft));
    cursor:pointer;padding:8px 12px;background:var(--paper);border-radius:12px;
    -webkit-user-select:none;user-select:none}
  .pv-n{font-size:11px;opacity:.75}
  .pv-chev{margin-left:auto;transition:transform .35s}
  .pv.open .pv-chev{transform:rotate(180deg)}
  .pv-body{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1);padding:0 2px}
  .pv.open .pv-body{max-height:560px}
  .pv-body .pv-img,.pv-body .fan{margin-top:10px}
  .pv-img{width:100%;border-radius:12px;display:block}
  /* ==== 区域相册弹层 ==== */
  #gallery-modal{position:fixed;inset:0;z-index:2150;background:rgba(62,40,48,.5);
    display:flex;align-items:flex-end;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .35s ease}
  #gallery-modal.show{opacity:1;pointer-events:auto}
  .gal-card{background:var(--paper);border-radius:22px 22px 0 0;width:min(480px,100vw);
    max-height:82vh;display:flex;flex-direction:column;
    transform:translateY(40px);transition:transform .4s cubic-bezier(.3,.9,.4,1)}
  #gallery-modal.show .gal-card{transform:none}
  .gal-head{display:flex;align-items:center;padding:16px 18px 8px}
  .gal-title{font-size:19px}
  .gal-x{margin-left:auto;border:none;background:var(--card);width:32px;height:32px;border-radius:50%;
    font-size:14px;color:var(--ink-soft);cursor:pointer;box-shadow:var(--shadow)}
  .gal-body{overflow-y:auto;padding:6px 16px calc(20px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .gal-page{display:none}
  .gal-page.on{display:block}
  .gal-page .spots-grid{grid-template-columns:1fr}
  .gal-page .spot-item{margin-bottom:6px}
  /* ==== 地图相机 & 光谷芯片 ==== */
  .cam-btn{cursor:pointer}
  .cam-btn circle{filter:drop-shadow(0 3px 6px rgba(60,30,35,.25))}
  .gal-chip{margin-top:8px;border:1.5px solid var(--dot,var(--rose));background:var(--card);
    color:var(--dot,var(--rose));border-radius:99px;padding:5px 14px;font-size:12.5px;cursor:pointer}




  /* ==== 意象艺术字 ==== */
  .artx{font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;font-weight:900;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;letter-spacing:.06em}
  .art-wood{background-image:
      repeating-linear-gradient(95deg, rgba(64,40,24,.3) 0 2px, transparent 2px 5px),
      linear-gradient(175deg,#96684A 0%,#6E4A30 55%,#87573B 100%);
    filter:drop-shadow(0 1px 0 rgba(255,244,230,.55)) drop-shadow(0 2px 2px rgba(70,45,25,.35))}
  .art-water{background-image:linear-gradient(115deg,#4E9AAE 0%,#2E6E63 35%,#7FC8D2 65%,#3C7E8E 100%);
    background-size:220% 100%;animation:artFlow 7s ease-in-out infinite alternate;
    filter:drop-shadow(0 2px 3px rgba(46,110,99,.32))}
  @keyframes artFlow{from{background-position:0% 0}to{background-position:100% 0}}
  .art-brick{background-image:
      repeating-linear-gradient(45deg, rgba(255,235,220,.18) 0 1.5px, transparent 1.5px 4px),
      linear-gradient(170deg,#B65238 0%,#8C3C26 60%,#A94A32 100%);
    filter:drop-shadow(0 1px 0 rgba(255,240,230,.5)) drop-shadow(0 2px 2px rgba(90,35,20,.3))}
  .art-neon{background-image:linear-gradient(115deg,#4EC4D2,#7B8CE8 55%,#A96FE0);
    filter:drop-shadow(0 0 5px rgba(110,200,220,.6)) drop-shadow(0 0 12px rgba(150,120,230,.4))}
  @media(prefers-reduced-motion:reduce){.art-water{animation:none}}

  /* ============ 顶部 ============ */
  header{padding:34px 4px 6px;text-align:center}
  .eyebrow{font-size:12px;letter-spacing:.35em;color:var(--ink-soft);text-transform:uppercase}
  h1{font-size:34px;font-weight:400;letter-spacing:.06em;margin-top:6px}
  h1 .dot{color:var(--rose)}
  .sub{font-size:13px;color:var(--ink-soft);margin-top:4px;letter-spacing:.12em}

  /* ============ 预约警报 ============ */
  .alert{
    margin:18px 0 6px;background:#FCF4E4;border:1px solid #EAD8B4;
    border-radius:var(--radius);padding:14px 16px;font-size:13.5px;
  }
  .alert b{color:#9A6B1C}
  .alert ul{list-style:none;margin-top:6px}
  .alert li{padding-left:1.3em;position:relative;margin-top:3px}
  .alert li::before{content:"⏰";position:absolute;left:0;font-size:11px;top:2px}

  /* ============ Q版地图 ============ */
  .map-card{position:relative;margin-top:16px;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:14px 10px 4px;overflow:hidden}
  .map-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);letter-spacing:.2em;padding-bottom:10px}
  svg{display:block;width:100%;height:auto}
  .region, .region *, .cam-btn, .cam-btn * {
    cursor: pointer;
    pointer-events: auto;
  }
  .region .blob{transition:transform .35s ease, filter .35s ease;transform-origin:center;transform-box:fill-box}
  .region:active .blob{transform:scale(.96)}
  @media(hover:hover){.region:hover .blob{transform:scale(1.03);filter:brightness(1.04)}}
  .float1{animation:bob 5s ease-in-out infinite}
  .float2{animation:bob 6s ease-in-out 1.2s infinite}
  .float3{animation:bob 5.5s ease-in-out .6s infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .river-flow{stroke-dasharray:10 14;animation:flow 14s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-240}}
  @media(prefers-reduced-motion:reduce){
    .float1,.float2,.float3,.river-flow{animation:none}
    *{transition:none!important}
  }

  /* ============ 视图切换 ============ */
  .view{display:none;animation:fadeUp .45s ease both}
  .view.active{display:block}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* ============ 天页头部 ============ */
  .day-top{display:flex;align-items:center;gap:12px;padding:26px 2px 4px}
  .back{
    flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)
  }
  .day-title{font-size:26px;font-weight:400;letter-spacing:.05em}
  .day-tag{font-size:12px;color:#fff;border-radius:99px;padding:2px 12px;letter-spacing:.15em;display:inline-block;margin-bottom:2px}
  .day-note{
    margin:12px 0 4px;font-size:13.5px;color:var(--ink-soft);
    background:var(--card);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)
  }

  /* ============ 时间线 ============ */
  .timeline{margin-top:18px;position:relative;padding-left:22px}
  .timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
  .stop{position:relative;margin-bottom:16px}
  .stop::before{
    content:"";position:absolute;left:-21px;top:22px;width:12px;height:12px;border-radius:50%;
    background:var(--card);border:3px solid var(--dot,var(--ink-soft));z-index:1
  }
  .stop.now::before{animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--dot) 22%,transparent)}}
  .card{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:16px 16px 14px;border:1.5px solid transparent
  }
  .stop.now .card{border-color:var(--dot)}
  .now-chip{
    display:none;font-size:11px;color:#fff;background:var(--dot);border-radius:99px;
    padding:1px 10px;letter-spacing:.2em;vertical-align:2px;margin-left:8px
  }
  .stop.now .now-chip{display:inline-block}
  
  .time{font-size:12.5px;color:var(--dot,var(--ink-soft));font-weight:600;letter-spacing:.08em}
  .place{font-size:19px;margin-top:2px;letter-spacing:.03em}
  .why{font-size:14px;color:var(--ink-soft);margin-top:6px}
  .tip{
    margin-top:10px;font-size:13px;background:var(--paper);border-radius:12px;
    padding:9px 12px;color:var(--ink)
  }
  .tip.warn{background:#FBEFEA;color:#8C3B22}
  .tip b{font-weight:600}
  .nav-btn{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    font-size:13px;color:var(--dot);border:1.5px solid var(--dot);
    border-radius:99px;padding:5px 14px;text-decoration:none;font-weight:500
  }
  .nav-btn:active{background:var(--dot);color:#fff}

  /* ============ 区域主题 ============ */
  .theme-wuchang{--dot:var(--wuchang)}
  .theme-donghu{--dot:var(--donghu)}
  .theme-hankou{--dot:var(--hankou)}
  .theme-guanggu{--dot:var(--guanggu)}

  /* ============ 实用信息 ============ */
  .info-block{margin-top:26px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .info-block h3{font-size:17px;letter-spacing:.1em;margin-bottom:10px}
  .info-block ul{list-style:none}
  .info-block li{font-size:13.5px;color:var(--ink-soft);padding:7px 0 7px 1.6em;position:relative;border-top:1px dashed var(--line)}
  .info-block li:first-child{border-top:none}
  .info-block li::before{position:absolute;left:0;top:7px}
  .li-sun::before{content:"☀️"}
  .li-metro::before{content:"🚇"}
  .li-boat::before{content:"⛴"}
  .li-x::before{content:"🙅"}
  .li-food::before{content:"🥢"}
  .li-shoe::before{content:"👟"}
  .li-cal::before{content:"📅"}

  .soft-only{display:none}
  body.soft .soft-only{display:block}
  body.soft .tip.soft-only,
  body.soft .soft-note{background:#FAE8E6;border-color:#EBD5C8;color:#8C4A42}
  .soft-note{
    margin:12px 0 0;font-size:13px;color:#8C4A42;background:#FAE8E6;
    border-radius:var(--radius);padding:12px 16px;line-height:1.8
  }
  .dice{
    display:block;margin:0 auto 16px;font-size:15px;letter-spacing:.1em;
    background:var(--rose);color:#fff;border:none;border-radius:99px;
    padding:10px 26px;cursor:pointer;box-shadow:var(--shadow)
  }
  .dice:active{transform:scale(.96)}
  .petal{position:absolute;left:0;top:0;width:24px;height:24px;pointer-events:none;z-index:5;will-change:transform}
  .petal svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(120,70,60,.25))}
  footer{text-align:center;margin-top:34px;font-size:12.5px;color:var(--ink-soft);letter-spacing:.25em}

  /* ============ 机位与特色推荐组件 ============ */
  .spot-box {
    margin-top: 10px;
    background: color-mix(in srgb, var(--dot) 8%, var(--card));
    border-left: 3.5px solid var(--dot);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .spot-box-title {
    font-weight: 600;
    color: var(--dot);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
  }
  .spot-box-item {
    margin-top: 4px;
    padding-left: 14px;
    position: relative;
    color: var(--ink);
    line-height: 1.5;
  }
  .spot-box-item::before {
    content: "📸";
    position: absolute;
    left: -2px;
    font-size: 11px;
    top: 1px;
  }
  .spot-box-tips {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 2px;
    padding-left: 14px;
  }

  /* ============ 折叠面板 (交通、避雷、演出) ============ */
  .accordion {
    margin-top: 16px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .accordion details {
    border-bottom: 1px solid var(--line);
  }
  .accordion details:last-child {
    border-bottom: none;
  }
  .accordion summary {
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .accordion summary::-webkit-details-marker {
    display: none;
  }
  .accordion summary::after {
    content: "＋";
    font-size: 14px;
    color: var(--rose);
    transition: transform 0.25s ease;
  }
  .accordion details[open] summary::after {
    content: "－";
    transform: rotate(90deg);
  }
  .accordion-content {
    padding: 4px 18px 16px;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .accordion-content ul {
    list-style: none;
  }
  .accordion-content li {
    position: relative;
    padding-left: 1.5em;
    margin-top: 8px;
  }
  .accordion-content li:first-child {
    margin-top: 4px;
  }
  .accordion-content li::before {
    position: absolute;
    left: 0;
    font-size: 12px;
  }
  .li-check::before { content: "✅"; }
  .li-warn::before { content: "⚠️"; }
  .li-cross::before { content: "🙅"; }
  .li-tip::before { content: "💡"; }

  /* ============ 动态日期提示 ============ */
  .day-alert {
    margin: 10px 0 0;
    padding: 11px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    display: none;
    line-height: 1.6;
  }
  .day-alert.show { display: block; }
  .day-alert-mon { background: #FEF3E2; border: 1px solid #F0D080; color: #7A5500; }
  .day-alert-sat { background: #EEF6EE; border: 1px solid #A8D4A8; color: #3A6B3A; }



  /* 权重压制：意象字必须重字重 */
  .artx{font-weight:900}

  /* Anti-FOUC rules for SPA initial rendering */
  html[data-initial-view]:not([data-initial-view="map"]) #view-map {
    display: none !important;
  }
  html[data-initial-view="wuchang"] #view-wuchang,
  html[data-initial-view="donghu"] #view-donghu,
  html[data-initial-view="hankou"] #view-hankou,
  html[data-initial-view="guanggu"] #view-guanggu {
    display: block !important;
  }

  .city-switch {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent);
    border-radius: 999px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    font-size: 13px;
    text-decoration: none;
  }