/* ========== 基础 ========== */
:root{
  --ink:#26222b;
  --sub:#8d8798;
  --paper:#fff8f4;
  --card:#ffffff;
  --line:rgba(38,34,43,.08);
  --pink:#ff5d8f;
  --orange:#ff8a3d;
  --shadow:0 12px 32px rgba(255,93,143,.14);
  --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  padding:24px 16px;
}

/* 背景光斑 */
body::before,body::after{
  content:"";position:fixed;border-radius:50%;filter:blur(90px);
  pointer-events:none;z-index:0;
}
body::before{width:340px;height:340px;background:#ffdbe6;top:-100px;left:-90px;}
body::after{width:300px;height:300px;background:#ffe7d0;bottom:-90px;right:-80px;}

.stage{position:relative;z-index:1;width:100%;max-width:460px;text-align:center;}

.scene{animation:rise .6s cubic-bezier(.2,.9,.3,1) both;}
.hidden{display:none !important;}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ========== 场景一 ========== */
.pre{
  font-size:14px;color:var(--sub);letter-spacing:4px;margin-bottom:14px;
}
.big{
  font-size:clamp(40px,11vw,64px);
  font-weight:800;line-height:1.22;letter-spacing:-1px;
  background:linear-gradient(110deg,#ff5d8f,#ff8a3d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:40px;
}

.btn-zone{
  position:relative;height:96px;
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.btn-yes,.btn-no{
  border:none;cursor:pointer;font-family:inherit;font-weight:800;
  border-radius:999px;transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s,opacity .3s;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn-yes{
  font-size:22px;padding:16px 52px;color:#fff;
  background:linear-gradient(110deg,var(--pink),var(--orange));
  box-shadow:0 14px 30px rgba(255,93,143,.35);
}
.btn-yes:hover{transform:translateY(-3px) scale(1.04);}
.btn-no{
  font-size:16px;padding:14px 30px;color:var(--sub);
  background:var(--card);border:2px solid var(--line);
}
.btn-no.gone{opacity:0;pointer-events:none;}

.no-hint{
  margin-top:26px;min-height:22px;
  font-size:14.5px;color:var(--pink);font-weight:600;
}

/* ========== 场景二 ========== */
.mini-avatar{
  width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto 16px;box-shadow:0 10px 26px rgba(255,138,61,.3);
}
.lead{font-size:14.5px;color:var(--sub);margin:-26px 0 26px;}

.acc-list{
  list-style:none;display:flex;flex-direction:column;gap:12px;text-align:left;
}
.acc{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:14px 16px;box-shadow:var(--shadow);
}
.acc-info{flex:1;min-width:0;}
.acc-info b{display:block;font-size:15px;}
.acc-info span{font-size:13px;color:var(--sub);font-family:ui-monospace,Menlo,Consolas,monospace;}
.acc-copy{
  flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(110deg,var(--pink),var(--orange));
  padding:8px 16px;border-radius:999px;
  transition:transform .2s,filter .2s;
}
.acc-copy:hover{transform:translateY(-1px);filter:brightness(1.06);}
.acc-copy:active{transform:scale(.94);}

.ending{
  margin-top:28px;font-size:16px;font-weight:700;color:var(--ink);
}
.btn-again{
  margin-top:14px;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--sub);text-decoration:underline;
}
.btn-again:hover{color:var(--pink);}

/* 撒花粒子 */
.petal{
  position:fixed;z-index:9;pointer-events:none;font-size:20px;
  animation:fall 1.4s ease-in forwards;
}
@keyframes fall{
  0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.5);}
}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,24px);
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:14px;opacity:0;pointer-events:none;
  transition:.3s cubic-bezier(.2,.9,.3,1);z-index:99;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* 抖动 */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}
.shake{animation:shake .35s ease;}