/* ==================================================================
   呼狐唤文 · 下载落地页样式
   ==================================================================
   配色**直接取自海报**（见 MEMORY.md 的海报分析），不是另起一套：
     冰晶蓝   #A0C4FF     天青    #8ECAE6
     薰衣草紫 #CDB4DB     柔雾粉  #FFC8DD
     荧光青   #00F5FF（点缀）
     背景渐变 #E0E7FF → #DDEBFE → #F3E8FF → #FAE8FF
     标题     #3D3D66     正文    #5E5E8A     辅助 #8E8EAE

   弹窗/玻璃规范也照搬海报那一套：
     高斯模糊 28px、填充 #FFFFFF @42%、描边 1px #FFFFFF @55%、
     顶部 3dp 内发光、圆角 28px、
     **有色投影** rgba(157,142,198,.20) 而非黑色硬阴影。

   ------------------------------------------------------------------
   一处刻意的偏离：主按钮没用海报的浅粉浅紫
   ------------------------------------------------------------------
   海报的浅色系（#FFC8DD / #CDB4DB）配白字对比度只有 2~3:1，
   远低于 WCAG AA 要求的 4.5:1 —— 也就是说看不清。
   那套颜色适合做**装饰**（光晕、描边、背景），
   但不能承载"必须读清楚"的按钮文字。
   所以按钮换成同色系但压暗的 #6B5BD2 → #3F55C8：
     白字对 #6B5BD2 的对比度约 5.06:1 ✓ 通过 AA
   观感仍然是海报那一挂的紫蓝，但真的看得清。
   ================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC",
                "HarmonyOS Sans SC","Segoe UI","Microsoft YaHei",sans-serif;
    color:#5E5E8A;
    background:
        radial-gradient(120% 80% at 18% 0%,  #E0E7FF 0%, rgba(224,231,255,0) 60%),
        radial-gradient(110% 70% at 88% 12%, #DDEBFE 0%, rgba(221,235,254,0) 55%),
        radial-gradient(100% 70% at 78% 100%,#FAE8FF 0%, rgba(250,232,255,0) 60%),
        linear-gradient(168deg,#E0E7FF 0%,#DDEBFE 36%,#F3E8FF 72%,#FAE8FF 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

/* ==================== 背景光晕 ====================
   海报里"背后巨大低透明度圆形光晕"。
   filter:blur 比大量 radial-gradient 层更省，且边缘更柔。 */
.aurora{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}
.glow{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.55;
}
.g1{
    width:52vw; height:52vw; max-width:340px; max-height:340px;
    top:-9vw; left:-11vw;
    background:#A0C4FF;
}
.g2{
    width:44vw; height:44vw; max-width:300px; max-height:300px;
    top:12vh; right:-13vw;
    background:#CDB4DB;
    opacity:.5;
}
.g3{
    width:46vw; height:46vw; max-width:310px; max-height:310px;
    bottom:-10vh; left:22%;
    background:#FFC8DD;
    opacity:.42;
}

/* ==================== 四角星 sparkles ====================
   海报里的白色四角星。用 clip-path 画，不引入图片 ——
   多一张图就多一次请求，而它们只是氛围。 */
.sparkles{position:fixed;inset:0;pointer-events:none;z-index:1}
.sparkles span{
    position:absolute;
    left:var(--x); top:var(--y);
    width:var(--s); height:var(--s);
    background:#fff;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    opacity:.85;
    animation:twinkle 3.6s ease-in-out infinite;
    animation-delay:var(--d);
    filter:drop-shadow(0 0 4px rgba(0,245,255,.55));
}
@keyframes twinkle{
    0%,100%{opacity:.15;transform:scale(.7) rotate(0deg)}
    50%    {opacity:.95;transform:scale(1.15) rotate(45deg)}
}

/* ==================== 布局 ==================== */
.wrap{
    position:relative;
    z-index:2;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:32px 18px calc(28px + env(safe-area-inset-bottom));
}

/* ==================== 主卡：液态玻璃 ==================== */
.card{
    width:100%;
    max-width:400px;
    padding:22px 22px 26px;
    border-radius:28px;

    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(28px) saturate(165%);
    backdrop-filter:blur(28px) saturate(165%);

    border:1px solid rgba(255,255,255,.55);

    /* 有色投影 + 顶部内发光（"液面高光"），
       两样都不能换成黑色硬阴影 —— 那会让整张卡显脏 */
    box-shadow:
        0 10px 30px rgba(157,142,198,.20),
        0 2px 6px  rgba(157,142,198,.10),
        inset 0 1px 0 rgba(255,255,255,.85);

    animation:cardIn .5s cubic-bezier(.22,1.2,.36,1) both;
    position:relative;
    overflow:hidden;
}

/* 玻璃顶部的斜向高光。没有它，"玻璃"看起来就是一块半透明方块 */
.card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:42%;
    background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
    pointer-events:none;
}

@keyframes cardIn{
    from{opacity:0;transform:translateY(22px) scale(.96)}
    to  {opacity:1;transform:none}
}

/* ==================== 海报 ==================== */
.poster-frame{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(160deg,#DDEBFE,#F3E8FF);
    box-shadow:
        0 8px 26px rgba(157,142,198,.26),
        inset 0 0 0 1px rgba(255,255,255,.6);
    /* 海报是 2:3 竖图。限制最大高度，免得在小屏上把
       下载按钮顶到首屏外面 —— 按钮必须在首屏能看见。 */
    aspect-ratio:2/3;
    max-height:min(46vh,340px);
    margin:0 auto 18px;
}

.poster{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 22%;   /* 海报人物在偏上位置，别裁到脸 */
}

/* 海报上的斜向反光，让它看起来是"压在玻璃下面" */
.poster-sheen{
    position:absolute;
    inset:0;
    background:linear-gradient(118deg,
        rgba(255,255,255,.30) 0%,
        rgba(255,255,255,.06) 34%,
        rgba(255,255,255,0)   60%);
    pointer-events:none;
}

/* ==================== 文字 ==================== */
.title{
    margin:0;
    font-size:27px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.02em;
    text-align:center;
    /* 蓝紫渐变文字（海报主标题的做法）。
       -webkit-text-fill-color 让文字本身透明、只留背景渐变。 */
    background:linear-gradient(96deg,#6B5BD2 0%,#4A7BD0 48%,#8E7BE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:#3D3D66;   /* 不支持 background-clip 时的兜底 */
}

.slogan{
    margin:7px 0 0;
    text-align:center;
    font-size:13.5px;
    letter-spacing:.16em;
    color:#8E8EAE;
}

/* 被邀请提示 */
.invite-note{
    margin:16px 0 0;
    padding:10px 14px;
    border-radius:16px;
    text-align:center;
    font-size:13.5px;
    font-weight:600;
    color:#6B5BD2;
    background:linear-gradient(96deg,rgba(255,200,221,.42),rgba(205,180,219,.36));
    border:1px solid rgba(255,255,255,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.invite-note .heart{color:#FF7AA8;margin-right:5px}

/* ==================== 提示条 ==================== */
.alert{
    margin:14px 0 0;
    padding:12px 14px;
    border-radius:16px;
    font-size:13px;
    line-height:1.65;
    text-align:center;
}
.alert b{color:#3D3D66}

.alert-warn{
    color:#8A5A00;
    background:rgba(255,236,199,.72);
    border:1px solid rgba(255,214,140,.9);
}
.alert-info{
    color:#4A5FD0;
    background:rgba(224,231,255,.7);
    border:1px solid rgba(180,199,255,.9);
}

/* ==================== 主按钮 ====================
   对比度：白字 / #6B5BD2 ≈ 5.06:1，通过 WCAG AA。
   （海报原来的 #FFC8DD 配白字只有 2.2:1，看不清，所以压暗了） */
.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    width:100%;
    margin:20px 0 0;
    padding:16px 20px;

    border:0;
    border-radius:18px;
    cursor:pointer;
    text-decoration:none;

    font-size:17px;
    font-weight:700;
    letter-spacing:.04em;
    color:#fff;

    background:linear-gradient(96deg,#6B5BD2 0%,#3F55C8 100%);
    box-shadow:
        0 8px 22px rgba(107,91,210,.36),
        inset 0 1px 0 rgba(255,255,255,.30);

    transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
    -webkit-tap-highlight-color:transparent;
}

/* 「液体下压」：按下缩到 0.95，和 App 内所有弹窗按钮一致 */
.btn:active{
    transform:scale(.955);
    box-shadow:
        0 4px 14px rgba(107,91,210,.30),
        inset 0 1px 0 rgba(255,255,255,.24);
}

.btn .ico{width:21px;height:21px;flex:0 0 auto}

/* 唤起中：视觉上做成"正在做事"，但**仍然可点**（href 已经指向 dl.php）。
   万一 JS 挂了或唤起失败，用户点一下照样能下载。 */
.btn-launching{
    background:linear-gradient(96deg,#7E6FDD 0%,#4E63D4 100%);
    opacity:.92;
}

.spinner{
    width:18px;height:18px;flex:0 0 auto;
    border:2px solid rgba(255,255,255,.38);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================== 版本信息 ==================== */
.meta{
    margin:13px 0 0;
    text-align:center;
    font-size:12px;
    line-height:1.6;
    color:#8E8EAE;
}

/* ==================== 安装说明（折叠） ==================== */
.tips{
    margin:18px 0 0;
    border-radius:16px;
    background:rgba(255,255,255,.34);
    border:1px solid rgba(255,255,255,.6);
    overflow:hidden;
}
.tips summary{
    padding:12px 15px;
    font-size:13px;
    font-weight:600;
    color:#6B5BD2;
    cursor:pointer;
    list-style:none;
}
.tips summary::-webkit-details-marker{display:none}
.tips summary::after{content:"▾";float:right;opacity:.6;transition:transform .2s}
.tips[open] summary::after{transform:rotate(180deg)}
.tips ol{
    margin:0;
    padding:2px 18px 16px 32px;
    font-size:12.5px;
    line-height:1.85;
    color:#5E5E8A;
}
.tips li + li{margin-top:2px}

/* ==================== 页脚 ==================== */
.foot{
    width:100%;
    max-width:400px;
    text-align:center;
    font-size:12px;
    line-height:1.7;
    color:#8E8EAE;
}
.foot p{margin:0}
.foot .copy{
    margin-top:6px;
    opacity:.7;
    letter-spacing:.06em;
}

/* ==================== 无障碍：尊重"减少动效" ====================
   系统开了这个开关的用户多半是因为动效会让他不适，
   不是"性能差"。所以这里必须真的关掉，而不是缩短时长。 */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .card{animation:none;opacity:1;transform:none}
}

/* ==================== 小屏微调 ====================
   iPhone SE 这类 320~360px 宽的机器上，
   默认字号会把卡片撑得很挤，按钮也可能掉出首屏。 */
@media (max-width:360px){
    .wrap{padding:22px 14px}
    .card{padding:18px 18px 22px;border-radius:24px}
    .title{font-size:24px}
    .poster-frame{max-height:min(40vh,290px);margin-bottom:14px}
    .btn{padding:15px 18px;font-size:16px;margin-top:16px}
}

/* 横屏 / 矮屏：海报会让按钮看不到，所以这时把海报压得更小 */
@media (max-height:640px){
    .poster-frame{max-height:34vh;margin-bottom:12px}
    .wrap{padding-top:20px;padding-bottom:20px}
}