:root{
    --ink:#fff6f8;
    --ink-soft:rgba(255,246,248,.72);
    --gold:#ffd98a;
    --rose:#ff8fb1;
    --card:rgba(30,17,56,.72);
    --line:rgba(255,255,255,.18);
    --ok:#7ee0b8;
    --no:#ff7a8a;
    --pad: max(18px, env(safe-area-inset-left));
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink);background:#150b2e;overflow:hidden;
    -webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;
  }

  /* ================= 背景 ================= */
  #bg{position:fixed;inset:0;z-index:0;overflow:hidden}
  .sky{
    position:absolute;inset:-2%;
    background:
      radial-gradient(120% 80% at 50% 108%, rgba(255,143,177,.30) 0%, transparent 55%),
      radial-gradient(90% 60% at 12% 8%, rgba(120,90,255,.35) 0%, transparent 60%),
      radial-gradient(80% 60% at 88% 4%, rgba(72,190,255,.22) 0%, transparent 60%),
      linear-gradient(180deg,#0d0722 0%,#1b0f3c 42%,#2a1250 72%,#3b1746 100%);
  }
  .milky{
    position:absolute;left:-30%;right:-30%;top:6%;height:58%;
    background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.30), rgba(190,170,255,.14) 45%, transparent 72%);
    filter:blur(18px);transform:rotate(-24deg);opacity:.7;mix-blend-mode:screen;
  }
  #bgPhoto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
  #bgPhoto.on{opacity:.55}
  #stars{position:absolute;inset:0}
  /* 牛郎织女 · 鹊桥场景 */
  #scene{
    position:absolute;left:0;right:0;bottom:0;
    height:min(34dvh,300px);
    opacity:.95;transition:opacity .6s ease, transform .6s ease;
    pointer-events:none;
  }
  #scene svg{width:100%;height:100%;display:block}
  body.dim #scene{opacity:.3;transform:translateY(6%)}
  body.donemode #scene{opacity:0}
  /* 通关页的大幅牵手场景 */
  #sceneDone{
    position:absolute;left:0;right:0;bottom:0;
    height:min(74vw, 34dvh, 340px);
    overflow:hidden;                     /* 平移时不溢出到别处 */
    /* 顶部渐隐，融进夜空，不露硬边 */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    opacity:0;transform:translateY(10%);
    transition:opacity 1s ease .3s, transform 1s ease .3s;
    pointer-events:none;
  }
  /* 内层负责缓慢平移 + 轻微缩放，被卡片和按钮遮住的部分会陆续露出来 */
  #sceneDone .pan{
    position:absolute;inset:0;
    background:url("assets/scene/done-couple.jpg?v=35b82c8d") center 42% / cover no-repeat;
    transform-origin:center center;
    animation:kenburns 32s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes kenburns{
    0%   { transform:scale(1.10) translate(-3.2%,  3.2%); }
    50%  { transform:scale(1.16) translate( 0%,   -1.5%); }
    100% { transform:scale(1.10) translate( 3.2%,  3.2%); }
  }
  @media (prefers-reduced-motion: reduce){
    #sceneDone .pan{animation:none;transform:scale(1.05)}
  }
  body.donemode #sceneDone{opacity:1;transform:none}
  #bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,5,25,.28) 0%,rgba(10,5,25,.06) 32%,rgba(10,5,25,.42) 78%,rgba(10,5,25,.62) 100%);
  }

  /* ================= 布局 ================= */
  #app{
    position:relative;z-index:2;height:100dvh;height:100svh;
    display:flex;flex-direction:column;
    padding: calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + 18px);
  }
  .screen{flex:1;display:none;flex-direction:column;animation:fadeUp .5s ease both}
  .screen.on{display:flex}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* ================= 封面 ================= */
  #start{align-items:center;justify-content:flex-start;text-align:center;gap:20px;padding-top:6dvh}
  .kicker{letter-spacing:.42em;font-size:12px;color:var(--gold);opacity:.9;padding-left:.42em}
  .title{
    font-size:clamp(38px,13vw,64px);line-height:1.1;margin:0;font-weight:700;
    background:linear-gradient(180deg,#fff 0%,var(--gold) 70%,var(--rose) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 40px rgba(255,180,210,.25);
  }
  .sub{margin:0;max-width:22em;color:var(--ink-soft);font-size:15px;line-height:1.9}
  .btn{
    -webkit-appearance:none;appearance:none;border:0;cursor:pointer;font:inherit;
    padding:16px 40px;border-radius:999px;font-size:17px;font-weight:600;color:#3b0d22;
    background:linear-gradient(135deg,#ffe6a7,#ffb0c6 55%,#ff8fb1);
    box-shadow:0 10px 30px rgba(255,143,177,.35),inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .15s ease,box-shadow .15s ease;touch-action:manipulation;
  }
  .btn:active{transform:scale(.96)}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;padding:13px 28px;font-size:15px;font-weight:500}

  /* ================= 答题 ================= */
  #quiz{gap:16px}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:50px}
  .step{font-size:13px;color:var(--ink-soft);letter-spacing:.08em}
  .dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:.35s}
  .dot.now{background:var(--gold);transform:scale(1.4);box-shadow:0 0 12px var(--gold)}
  .dot.done{background:var(--rose)}
  .dot.mine{border:1px solid rgba(255,217,138,.55)}

  .qwrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  .qnum{font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .tag{
    letter-spacing:0;font-size:10.5px;padding:2px 8px;border-radius:999px;
    background:rgba(255,143,177,.22);border:1px solid rgba(255,143,177,.45);color:#ffc8d8;
  }
  .qtext{font-size:clamp(18px,5.2vw,23px);line-height:1.6;font-weight:600;margin:0}
  .opts{display:flex;flex-direction:column;gap:10px}
  .opt{
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    padding:15px 16px;border-radius:16px;font:inherit;font-size:16px;color:var(--ink);
    background:rgba(45,27,80,.62);border:1px solid var(--line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .12s ease,background .2s,border-color .2s;touch-action:manipulation;cursor:pointer;
  }
  .opt:active{transform:scale(.985);background:rgba(70,45,115,.78)}
  .opt .idx{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:rgba(255,255,255,.16)}
  .opt.right{background:rgba(126,224,184,.28);border-color:rgba(126,224,184,.65)}
  .opt.right .idx{background:var(--ok);color:#08301f}
  .opt.wrong{background:rgba(255,122,138,.26);border-color:rgba(255,122,138,.65);animation:shake .42s}
  .opt.wrong .idx{background:var(--no);color:#3d0a12}
  .opt.lock{pointer-events:none}
  @keyframes shake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(6px)}50%{transform:translateX(-6px)}}
  .tip{min-height:42px;text-align:center;font-size:14.5px;line-height:1.6;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;padding:0 4px}
  .tip.bad{color:#ffc2ca}
  .tip.good{color:#a9f0d4}

  /* ================= 答错弹窗（私人题） ================= */
  #fail{
    position:fixed;inset:0;z-index:20;display:none;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(8,4,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    animation:fadeIn .25s ease both;
  }
  #fail.on{display:flex}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .failCard{
    width:min(88vw,340px);border-radius:22px;overflow:hidden;
    background:rgba(38,20,64,.9);border:1px solid rgba(255,143,177,.35);
    box-shadow:0 26px 70px rgba(0,0,0,.5);
    animation:wobbleIn .55s cubic-bezier(.2,1.2,.4,1) both;
  }
  @keyframes wobbleIn{
    0%{opacity:0;transform:scale(.7) rotate(-6deg)}
    60%{transform:scale(1.04) rotate(2deg)}
    100%{opacity:1;transform:none}
  }
  .failCard .pic{width:100%;aspect-ratio:1/1;background:#1c1033;display:grid;place-items:center;overflow:hidden}
  .failCard .pic img{width:100%;height:100%;object-fit:contain;display:block}
  .failCard .pic .none{font-size:58px}
  .failBody{padding:16px 18px 18px;text-align:center}
  .failBody p{margin:0 0 14px;white-space:pre-line;font-size:15.5px;line-height:1.7;color:#ffd4de}

  /* ================= 通关 · 轮播 ================= */
  #done{align-items:center;justify-content:center;text-align:center;gap:clamp(10px,2dvh,18px);padding-bottom:min(70vw,6dvh,220px)}
  .doneTitle{font-size:clamp(24px,7.6vw,34px);margin:0;font-weight:700;color:var(--gold)}
  .doneSub{
    margin:0 0 4px;color:var(--ink);font-size:14px;line-height:1.75;max-width:20em;
    padding:10px 16px;border-radius:16px;
    /* 底衬：插画的牵手光晕正好在这块，不加会读不清 */
    background:radial-gradient(120% 140% at 50% 50%, rgba(14,7,30,.72) 0%, rgba(14,7,30,.45) 60%, transparent 100%);
    text-shadow:0 1px 6px rgba(8,4,20,.8);
  }
  .carousel{
    position:relative;width:min(88vw,380px);height:min(55dvh,470px);
    flex:0 0 auto;   /* 不让 flex 压缩它，照片才够大 */
    border-radius:24px;overflow:hidden;
    border:1px solid rgba(255,255,255,.26);
    box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.06);
    background:linear-gradient(160deg,#2a1550,#3d1a54);
    animation:pop .7s cubic-bezier(.2,1.3,.4,1) both;
    touch-action:pan-y;
  }
  @keyframes pop{from{opacity:0;transform:scale(.84) rotate(-3deg)}to{opacity:1;transform:none}}
  .track{display:flex;height:100%;transition:transform .62s cubic-bezier(.22,.9,.25,1)}
  .slide{flex:0 0 100%;height:100%;display:grid;place-items:center;overflow:hidden;position:relative}
  .slide img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
  /* 图片背后的柔光，避免 contain 留下的黑边太生硬 */
  /* 不裁切时两侧/上下的留边，用同一张图的模糊版填充（去掉 z-index:-1，否则会被卡片底色盖住） */
  .slide .blur{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(26px) saturate(1.25);opacity:.6;z-index:0}
  .slide .ph{padding:24px;font-size:14.5px;line-height:2;color:#3a1030;font-weight:600;background:linear-gradient(160deg,#ff9fbf,#c58bff 55%,#8fd4ff);width:100%;height:100%;display:grid;place-items:center}
  @media (max-height:720px){
    .carousel{height:min(46dvh,470px)}
    #done{padding-bottom:min(70vw,4dvh,220px)}
  }
  .cdots{display:flex;gap:6px;justify-content:center;min-height:8px;flex-wrap:wrap;max-width:min(88vw,380px);margin:0 auto}
  .cdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:.3s;cursor:pointer}
  .cdot.on{background:var(--gold);width:18px;border-radius:999px}

  /* ================= 音乐按钮 ================= */
  #sound{
    position:fixed;z-index:25;right:max(14px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 12px);
    width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
    background:rgba(28,16,52,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:var(--ink);font-size:17px;display:none;place-items:center;cursor:pointer;touch-action:manipulation;
  }
  #sound.on{display:grid}
  #sound.muted{opacity:.45}

  /* 不明显的跳过按钮：只有一个极淡的小点，需要长按 0.7 秒才触发，避免误触 */
  #skip{
    position:fixed;z-index:26;
    left:max(6px,env(safe-area-inset-left));
    bottom:calc(env(safe-area-inset-bottom) + 6px);
    width:46px;height:46px;padding:0;
    border:0;background:transparent;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    display:grid;place-items:center;
  }
  #skip::after{
    content:"";width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,.13);transition:.25s;
  }
  #skip:active::after{background:rgba(255,217,138,.85);transform:scale(2.2)}
  body.donemode #skip{display:none}

  /* ================= 图片全屏查看 ================= */
  #lightbox{
    position:fixed;inset:0;z-index:30;display:none;
    align-items:center;justify-content:center;
    background:rgba(6,3,16,.94);
    animation:fadeIn .22s ease both;
  }
  #lightbox.on{display:flex}
  #lightbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  #lightbox .close{
    position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;
    width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:rgba(255,255,255,.1);color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;
  }
  #lightbox .hint{
    position:absolute;bottom:calc(env(safe-area-inset-bottom) + 18px);left:0;right:0;
    text-align:center;font-size:12.5px;color:rgba(255,255,255,.5);
  }
  .petal{position:fixed;top:-40px;z-index:3;pointer-events:none;font-size:18px;opacity:.9;will-change:transform}
  @keyframes fall{to{transform:translateY(112vh) rotate(var(--r));opacity:0}}