:root{
    --bg1:#ffecd2;
    --bg2:#fcb69f;
    --glass1:rgba(255,255,255,.35);
    --glass2:rgba(255,255,255,.15);
    --shadow:0 10px 30px rgba(0,0,0,.12);
    --radius:18px;               /* 更圆润一点 */
    --blur:14px;
    --floatC:20s;
    --font:'PingFang SC','SF Pro Display','HarmonyOS Sans','Microsoft YaHei',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font);
    background:
            radial-gradient(1200px 700px at 20% 10%, #fff5f1 0%, transparent 60%),
            radial-gradient(1000px 800px at 80% 90%, #e8f5ff 0%, transparent 60%),
            linear-gradient(135deg, var(--bg1), var(--bg2));
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
}

.field{ position:fixed; inset:0; display:block; overflow:hidden; }

.tip{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    padding:8px 14px; font-size:12px; letter-spacing:.2px; color:#3b3b3b;
    background:linear-gradient(135deg,var(--glass1),var(--glass2));
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(calc(var(--blur) * .6));
    -webkit-backdrop-filter: blur(calc(var(--blur) * .6));
    border-radius:999px; box-shadow:var(--shadow); z-index:2;
}

/* 背景彩色气泡（仅装饰） */
.bg-orbs{position:fixed; inset:-20vmax; filter:blur(60px); pointer-events:none; z-index:0}
.bg-orbs span{
    position:absolute; width:35vmin; height:35vmin; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.1));
    mix-blend-mode:screen; opacity:.6; animation:drift var(--floatC) ease-in-out infinite alternate;
}
.bg-orbs span:nth-child(1){top:10%; left:15%; background:radial-gradient(circle at 30% 30%, #ffd1dc, #ff8fb3); animation-duration:18s}
.bg-orbs span:nth-child(2){top:60%; left:10%; background:radial-gradient(circle at 30% 30%, #b5e7ff, #8ec5ff); animation-duration:22s}
.bg-orbs span:nth-child(3){top:30%; left:70%; background:radial-gradient(circle at 30% 30%, #d9ffd6, #8ef0b2); animation-duration:20s}
.bg-orbs span:nth-child(4){top:75%; left:65%; background:radial-gradient(circle at 30% 30%, #fff3b0, #ffd27a); animation-duration:24s}
.bg-orbs span:nth-child(5){top:5%;  left:80%; background:radial-gradient(circle at 30% 30%, #d2c0ff, #9aa7ff); animation-duration:26s}
.bg-orbs span:nth-child(n+6){width:22vmin; height:22vmin; opacity:.45}
@keyframes drift{from{transform:translate(-4vmin,-3vmin)} to{transform:translate(4vmin,3vmin)}}

/* 泡泡小方块：更大一点（更好读） */
.bubble{
    will-change: transform;
    position:absolute; z-index:2; left:50%; top:50%;
    transform: translate(-50%, -50%) translateZ(0); /* 初始都在中心 */
    opacity:0;

    padding:12px 16px;           /* 比之前略大 */
    max-width:300px;             /* 由 240 提升到 300 */
    color:#1f1f1f; font-size:15px; line-height:1.28; font-weight:600;
    border-radius: var(--radius);
    background:
            radial-gradient(120% 110% at 20% 10%, rgba(255,255,255,.95), rgba(255,255,255,.25) 60%),
            linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
    border:1px solid rgba(255,255,255,.55);
    box-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 0 20px rgba(255,255,255,.25);
    backdrop-filter: blur(var(--blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
    cursor:pointer;

    /* 从中心到目标位的过渡 */
    transition: transform 900ms cubic-bezier(.18,.8,.2,1), opacity 1100ms ease;
}
.bubble::after{
    content:""; position:absolute; right:10px; top:-6px; width:42px; height:18px; border-radius:999px;
    background: radial-gradient(70% 100% at 50% 50%, rgba(255,255,255,.8), rgba(255,255,255,0));
    filter: blur(2px); opacity:.9;
}
/* 散开到目标位并显现（目标位由 --tx/--ty 控制） */
.bubble.scatter{
    opacity:1;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
}

/* 点击快速消失 */
.bubble.vanish{ animation: vanish .22s cubic-bezier(.2,.7,.2,1) forwards; filter: blur(2px) saturate(140%); }
@keyframes vanish{
    from{ opacity:1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) }
    to  { opacity:0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.1) rotate(8deg) }
}

/* 玻璃按钮（最终按钮） */
.glass-btn{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    padding:14px 26px; font-size:16px; font-weight:700; letter-spacing:.4px;
    color:#1e1e1e; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--glass1),var(--glass2));
    border:1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border-radius:28px; box-shadow:var(--shadow); transition:transform .2s ease, opacity .25s ease; z-index:3;
}
.glass-btn:hover{ transform:translate(-50%,-50%) scale(1.05) }
.glass-btn:active{ transform:translate(-50%,-50%) scale(.97) }
.glass-btn.hidden{ opacity:0; pointer-events:none }
.glass-btn.final{ padding:18px 38px; font-size:18px; animation: gentle 2.2s ease-in-out infinite alternate; }
@keyframes gentle{ from{transform:translate(-50%,-50%) scale(1)} to{transform:translate(-50%,-50%) scale(1.06)} }

/* 最终文案 */
.final-text{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; color:#1d1d1f; font-size:30px; font-weight:800; line-height:1.5;
    opacity:0; z-index:4; flex-direction:column; gap:10px; text-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.final-text strong{ font-size:40px }
.final-text.show{ animation: fadeIn .9s ease forwards }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* 纸屑/小爱心粒子（DOM 实现） */
.particle{
    position:absolute; width:10px; height:10px; transform:translate(-50%,-50%);
    pointer-events:none; z-index:5; opacity:0; animation: fly 900ms ease-out forwards;
}
.particle.heart{ background: transparent; }
.particle.heart::before,
.particle.heart::after{
    content:""; position:absolute; width:10px; height:10px; background: currentColor; border-radius:50%;
    left:50%; top:50%; transform: translate(-50%,-50%);
}
.particle.heart::after{ transform: translate(calc(-50% + 5px), -50%) }
.particle.heart::before{ transform: translate(-50%, calc(-50% + 5px)) }
.particle.square{ background: currentColor; border-radius:3px }
@keyframes fly{
    0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) }
    20%{ opacity:1 }
    100%{ opacity:0; transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(0.2) }
}

/* 实用类 */
.hidden{ display:none }