/* ============================================================
   新春红包大抽奖 - 样式表
   主题色 / 动画时长集中在 :root 里，改这里就能整体换肤
   ============================================================ */
:root{
  /* 主题色 */
  --red-900:#3d0608;
  --red-800:#5c0a10;
  --red-700:#7d0f16;
  --red-600:#a4141c;
  --red-500:#c81e26;
  --gold-100:#fff6d8;
  --gold-300:#ffe08a;
  --gold-400:#ffcf5c;
  --gold-500:#f0b429;
  --gold-600:#d99a12;
  --gold-700:#a8730a;
  --ink:#2a0709;

  --text:#ffeede;
  --text-dim:rgba(255,238,222,.62);
  --line:rgba(255,207,92,.22);
  --line-soft:rgba(255,207,92,.12);

  /* 尺寸 / 圆角 */
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;

  /* 阴影 */
  --shadow-1:0 10px 26px rgba(0,0,0,.28);
  --shadow-2:0 22px 54px rgba(0,0,0,.42);

  /* 动画时长（动效开关会把它清零） */
  --t-fast:160ms;
  --t-base:320ms;
  --t-slow:1200ms;
}
:root.no-fx{ --t-fast:1ms; --t-base:1ms; --t-slow:1ms; }

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #8e1119 0%, rgba(142,17,25,0) 62%),
    radial-gradient(900px 600px at 12% 105%, #6d0d14 0%, rgba(109,13,20,0) 60%),
    radial-gradient(900px 600px at 88% 105%, #6d0d14 0%, rgba(109,13,20,0) 60%),
    linear-gradient(170deg, var(--red-800) 0%, var(--red-900) 55%, #260406 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
::selection{ background:rgba(255,207,92,.4); color:#3d2600; }
body::after{ /* 细金点纹理 */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,207,92,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}
.bg-glow{
  position:fixed; left:50%; top:-18vh; width:120vw; height:70vh; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,207,92,.18), rgba(255,207,92,0) 70%);
  pointer-events:none; z-index:0;
}
.fx-bg{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
/* 只把常规内容抬到画布之上，弹层 / Toast 保持自己的 fixed 定位 */
body > .banner-wrap, body > .layout{ position:relative; z-index:2; }
:root.no-fx .fx-bg{ display:none; }

/* ---------- 灯笼 ---------- */
.lantern{ position:fixed; top:-10px; z-index:1; pointer-events:none; opacity:.9; }
.lantern-l{ left:2vw; }
.lantern-r{ right:2vw; }
.lantern::before{ /* 挂绳 */
  content:""; display:block; width:2px; height:56px; margin:0 auto;
  background:linear-gradient(var(--gold-400), rgba(255,207,92,.15));
}
.lantern span{
  display:block; width:74px; height:92px; border-radius:50%/42%;
  background:radial-gradient(60% 50% at 32% 28%, #ff6a5e, var(--red-500) 45%, #7d0b12 100%);
  box-shadow:0 0 26px rgba(255,90,70,.55), inset 0 0 20px rgba(255,207,92,.35);
  border-top:6px solid var(--gold-500); border-bottom:6px solid var(--gold-500);
  position:relative;
  animation:lanternSway 5.5s ease-in-out infinite;
}
.lantern-r span{ animation-delay:-2.6s; }
@keyframes lanternSway{ 0%,100%{ transform:rotate(-2.4deg); } 50%{ transform:rotate(2.4deg); } }
.lantern span::after{
  content:""; position:absolute; left:50%; bottom:-22px; width:3px; height:22px; transform:translateX(-50%);
  background:linear-gradient(var(--gold-400), transparent);
}
@media (max-width:1100px){ .lantern{ display:none; } }

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px clamp(12px,2.4vw,26px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(61,6,8,.94), rgba(61,6,8,.68));
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,207,92,.55), transparent);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-ico{
  width:46px; height:46px; display:grid; place-items:center; font-size:24px; flex:0 0 auto;
  border-radius:15px; border:1px solid var(--line);
  background:radial-gradient(circle at 32% 26%, rgba(255,207,92,.32), rgba(255,207,92,.05));
  box-shadow:inset 0 1px 0 rgba(255,207,92,.25), 0 6px 16px rgba(0,0,0,.3);
  filter:drop-shadow(0 3px 8px rgba(255,120,60,.35));
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.2; }
.brand-txt strong{
  font-size:20px; letter-spacing:.06em;
  background:linear-gradient(180deg,var(--gold-100),var(--gold-400) 55%,var(--gold-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(255,207,92,.25);
}
.brand-txt small{ color:var(--text-dim); font-size:11px; letter-spacing:.16em; }

.progress-box{ flex:1 1 260px; min-width:230px; }
.progress-txt{ font-size:13px; color:var(--text-dim); margin-bottom:7px; }
.progress-txt b{ color:var(--text); font-variant-numeric:tabular-nums; }
.progress-txt .hl{ color:var(--gold-300); }
.progress-txt .dot{ opacity:.5; margin:0 4px; }
.progress-bar{ height:9px; border-radius:99px; background:rgba(0,0,0,.34); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.progress-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 60%,#fff3c4);
  box-shadow:0 0 14px rgba(255,207,92,.7);
  transition:width var(--t-base) cubic-bezier(.2,.8,.2,1);
}
.topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge{
  font-size:12px; padding:6px 11px; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line); color:var(--gold-300); background:rgba(255,207,92,.08);
}
.badge.soft{ color:var(--text-dim); background:rgba(255,255,255,.06); }
.badge.ok{ color:#8ff0a8; border-color:rgba(143,240,168,.4); background:rgba(143,240,168,.1); }
.badge.warn{ color:#ffd08a; border-color:rgba(255,208,138,.4); background:rgba(255,208,138,.1); }

/* ---------- 按钮 ---------- */
.btn{
  font:inherit; font-size:13px; cursor:pointer; border-radius:var(--r-sm);
  padding:9px 13px; color:var(--text);
  border:1px solid var(--line); background:rgba(255,255,255,.06);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover{ background:rgba(255,207,92,.14); border-color:rgba(255,207,92,.4); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:2px solid rgba(255,207,92,.65); outline-offset:2px; }
.btn.sm{ padding:7px 10px; font-size:12px; }
.btn.icon{ padding:8px 10px; font-size:15px; }
.btn.ghost{ backdrop-filter:blur(4px); }
.btn.gold{
  color:#4a2a00; font-weight:700; border-color:#ffe9a8;
  background:linear-gradient(180deg,#fff3c9,var(--gold-400) 45%,var(--gold-600));
  box-shadow:0 6px 18px rgba(240,180,41,.35), inset 0 1px 0 #fff8dd;
}
.btn.gold:hover{ background:linear-gradient(180deg,#fff8dd,var(--gold-400) 50%,var(--gold-500)); box-shadow:0 10px 24px rgba(240,180,41,.5), inset 0 1px 0 #fff8dd; }
.btn.danger{ color:#ffd9d9; border-color:rgba(255,120,120,.45); background:rgba(200,30,38,.35); }
.btn.danger:hover{ background:rgba(200,30,38,.55); border-color:rgba(255,120,120,.6); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- 提示条 ---------- */
.banner-wrap{ padding:0 clamp(12px,2.4vw,26px); }
.banner{
  margin:10px 0; padding:11px 14px; border-radius:var(--r-md); font-size:13px; line-height:1.6;
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(255,208,138,.45); background:rgba(255,208,138,.1); color:#ffe6bb;
  box-shadow:var(--shadow-1);
}
.banner.err{ border-color:rgba(255,120,120,.45); background:rgba(200,30,38,.22); color:#ffdada; }
.banner .close{ margin-left:auto; cursor:pointer; opacity:.7; background:none; border:0; color:inherit; font-size:15px; }
.banner .close:hover{ opacity:1; }
.banner code{ background:rgba(0,0,0,.3); padding:1px 5px; border-radius:5px; font-size:12px; }

/* ---------- 布局 ---------- */
.layout{
  display:grid; gap:clamp(12px,1.6vw,20px);
  grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(260px,340px);
  padding:clamp(12px,1.8vw,22px);
  align-items:start;
}
@media (max-width:1180px){
  .layout{ grid-template-columns:minmax(230px,290px) minmax(0,1fr); }
  .panel-right{ grid-column:1 / -1; }
  .record-list{ max-height:230px; }
}
@media (max-width:860px){
  .layout{ grid-template-columns:1fr; }
  .panel-right{ grid-column:auto; }
}

.panel{
  position:relative; border-radius:var(--r-lg); padding:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(92,10,16,.72), rgba(61,6,8,.62));
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,207,92,.14);
}
.panel::before{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,207,92,.5), transparent);
}
.block + .block{ margin-top:16px; }
.block-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.block-head h2{
  display:flex; align-items:center; gap:7px;
  font-size:14px; margin:0; letter-spacing:.06em; color:var(--gold-300); font-weight:600;
}
.block-head h2::before{
  content:""; width:3px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  box-shadow:0 0 8px rgba(255,207,92,.6);
}
.seg{ margin-left:auto; display:flex; border:1px solid var(--line); border-radius:99px; overflow:hidden; background:rgba(0,0,0,.2); }
.seg-btn{
  font:inherit; font-size:11px; padding:5px 10px; cursor:pointer; color:var(--text-dim);
  background:transparent; border:0; transition:background var(--t-fast), color var(--t-fast);
}
.seg-btn:hover{ color:var(--gold-300); }
.seg-btn.active{ background:rgba(255,207,92,.2); color:var(--gold-300); }
.seg-btn:focus-visible{ outline:2px solid rgba(255,207,92,.65); outline-offset:-2px; }

/* ---------- 添加人员 ---------- */
.add-person{ display:grid; grid-template-columns:1fr 72px auto; gap:8px; margin-bottom:10px; }
.add-person input{
  font:inherit; font-size:13px; width:100%; padding:9px 11px; color:var(--text);
  border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(0,0,0,.28);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.add-person input::placeholder{ color:rgba(255,238,222,.38); }
.add-person input:focus{
  outline:none; border-color:rgba(255,207,92,.55);
  box-shadow:0 0 0 3px rgba(255,207,92,.16);
}

/* ---------- 人员列表 ---------- */
.person-list, .prize-list, .record-list, .marquee{ list-style:none; margin:0; padding:0; }
.person-list{ display:flex; flex-direction:column; gap:7px; max-height:42vh; overflow:auto; padding-right:2px; }
.person{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-md); cursor:pointer; position:relative; overflow:hidden;
  border:1px solid var(--line-soft); background:rgba(0,0,0,.22);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.person:hover{ background:rgba(255,207,92,.1); border-color:rgba(255,207,92,.3); transform:translateX(1px); }
.person.active{
  border-color:var(--gold-400); background:rgba(255,207,92,.16);
  box-shadow:0 0 0 1px rgba(255,207,92,.35), 0 6px 18px rgba(0,0,0,.28);
}
.person.active .p-avatar{ box-shadow:0 0 0 2px rgba(255,207,92,.5), 0 6px 14px rgba(0,0,0,.35); }
.person.done{ opacity:.55; }
.person.win-flash{
  border-color:var(--gold-400);
  background:rgba(255,207,92,.2);
  box-shadow:0 0 0 2px rgba(255,207,92,.45), 0 8px 22px rgba(0,0,0,.3);
}
.person.win-flash::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 70%);
  transform:translateX(-120%); animation:sweep var(--t-slow) ease-out 1;
}
@keyframes sweep{ to{ transform:translateX(120%); } }
.person.added{ animation:addedPop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes addedPop{
  0%{ opacity:0; transform:translateY(-8px) scale(.96); box-shadow:0 0 0 2px rgba(255,207,92,.6); }
  60%{ opacity:1; transform:translateY(0) scale(1.01); box-shadow:0 0 0 2px rgba(255,207,92,.6); }
  100%{ transform:scale(1); box-shadow:none; }
}
.p-avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-size:14px; font-weight:700; color:#4a2a00;
  background:linear-gradient(180deg,#fff3c9,var(--gold-400) 55%,var(--gold-600));
  box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 #fff8dd;
}
.p-main{ display:flex; flex-direction:column; min-width:0; }
.person .p-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person .p-sub{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.p-bar{ display:block; height:4px; margin-top:6px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.p-bar i{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));
  box-shadow:0 0 8px rgba(255,207,92,.45);
  transition:width var(--t-base) cubic-bezier(.2,.8,.2,1);
}
.person.done .p-bar i{ background:rgba(255,238,222,.35); box-shadow:none; }
.person .p-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.p-actions{ display:inline-flex; align-items:center; gap:4px; }
.person .p-money{ font-size:14px; color:var(--gold-300); font-variant-numeric:tabular-nums; font-weight:700; }
.person .p-money.dim{ color:rgba(255,238,222,.42); font-weight:600; }
.quota{
  display:inline-flex; align-items:center; gap:3px; padding:2px;
  border-radius:99px; border:1px solid var(--line-soft); background:rgba(0,0,0,.25);
}
.quota button{
  width:20px; height:20px; line-height:1; font-size:14px; cursor:pointer; color:var(--gold-300);
  border-radius:50%; border:1px solid transparent; background:rgba(255,207,92,.08);
  transition:background var(--t-fast), color var(--t-fast);
}
.quota button:hover{ background:rgba(255,207,92,.28); color:var(--gold-100); }
.quota button[disabled]{ opacity:.35; cursor:not-allowed; background:transparent; }
.quota button:focus-visible{ outline:2px solid rgba(255,207,92,.65); outline-offset:1px; }
.quota b{ font-size:13px; min-width:18px; text-align:center; font-variant-numeric:tabular-nums; }
.p-del{
  border:0; background:transparent; color:rgba(255,180,180,.6); cursor:pointer; font-size:13px;
  padding:3px 5px; border-radius:6px; transition:color var(--t-fast), background var(--t-fast);
}
.p-del:hover{ color:#ff9a9a; background:rgba(255,120,120,.14); }
.p-del:focus-visible{ outline:2px solid rgba(255,207,92,.65); outline-offset:1px; }

/* ---------- 奖品列表 ---------- */
.prize-list{ display:flex; flex-direction:column; gap:6px; max-height:32vh; overflow:auto; }
.prize{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center;
  padding:9px 11px; border-radius:var(--r-md); background:rgba(0,0,0,.2); border:1px solid var(--line-soft);
  transition:border-color var(--t-fast), background var(--t-fast);
}
.prize:hover{ border-color:var(--line); background:rgba(255,207,92,.06); }
.prize.empty{ opacity:.42; }
.prize .k-name{ font-size:13px; }
.prize .k-amount{ font-size:12px; color:var(--gold-300); }
.prize .k-count{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.prize .k-bar{ grid-column:1 / -1; height:5px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.prize .k-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold-600),var(--gold-300)); transition:width var(--t-base); }
.hint{ font-size:12px; color:var(--text-dim); margin:8px 0 0; }
.hint:not([hidden]){
  padding:18px 14px; text-align:center;
  border:1px dashed rgba(255,207,92,.28); border-radius:var(--r-md);
  background:rgba(0,0,0,.14);
}
.row-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* ---------- 舞台 ---------- */
.stage{
  border-radius:var(--r-lg); padding:clamp(14px,2vw,26px) clamp(12px,2vw,22px) 16px;
  border:1px solid var(--line); text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255,207,92,.16), rgba(255,207,92,0) 70%),
    linear-gradient(180deg, rgba(125,15,22,.66), rgba(61,6,8,.7));
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,207,92,.18);
}
.stage-title{ display:flex; align-items:center; justify-content:center; gap:12px; }
.stage-title h1{
  font-size:clamp(19px,2.4vw,30px); margin:0; letter-spacing:.1em;
  background:linear-gradient(180deg,#fffbe8,var(--gold-300) 45%,var(--gold-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,180,60,.35));
}
.stage-title .deco{ color:var(--gold-400); text-shadow:0 0 12px rgba(255,207,92,.8); animation:twinkle 2.8s ease-in-out infinite; }
.stage-title .deco:last-child{ animation-delay:-1.4s; }
@keyframes twinkle{ 0%,100%{ opacity:.55; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.08); } }

.current-person{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:16px auto 0; padding:9px 18px; border-radius:99px;
  border:1px solid var(--line); background:rgba(0,0,0,.26);
  box-shadow:inset 0 1px 0 rgba(255,207,92,.12);
}
.cp-label{ font-size:12px; color:var(--text-dim); }
.cp-name{ font-size:17px; font-weight:700; color:var(--gold-300); }
.cp-meta{ font-size:12px; color:var(--text-dim); }

.draw-area{ position:relative; margin:clamp(14px,2.4vh,28px) 0 6px; display:flex; flex-direction:column; align-items:center; }
.env-float{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%); opacity:0; pointer-events:none;
  transition:opacity var(--t-fast); z-index:4; perspective:720px;
}
.env-float.on{ opacity:1; }
.env-shape{ width:132px; height:168px; position:relative; transform-style:preserve-3d; backface-visibility:hidden; }
.env-body{
  position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(170deg,#ff5b52,var(--red-500) 40%,#8d0c14);
  box-shadow:0 18px 34px rgba(0,0,0,.45), inset 0 0 26px rgba(255,207,92,.25);
  border:2px solid rgba(255,207,92,.5);
}
.env-flap{
  position:absolute; left:0; right:0; top:0; height:74px; z-index:3;
  background:linear-gradient(180deg,#ff7a6a,#c81e26); border-radius:14px 14px 40% 40%/14px 14px 90% 90%;
  border-bottom:2px solid rgba(255,207,92,.35);
}
.env-seal{
  position:absolute; left:50%; top:56px; transform:translateX(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:#ffe9a8; font-size:24px; font-weight:700;
  background:radial-gradient(60% 60% at 35% 30%, #ffe9a8, var(--gold-500) 45%, #b8790c);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.env-float.on .env-shape{ animation:envShake var(--t-slow) cubic-bezier(.3,.1,.2,1) forwards; }
@keyframes envShake{
  0%{ transform:rotateY(0) rotateZ(0) scale(.9); }
  18%{ transform:rotateY(180deg) rotateZ(-6deg) scale(1.02); }
  36%{ transform:rotateY(360deg) rotateZ(5deg) scale(1.04); }
  55%{ transform:rotateY(520deg) rotateZ(-4deg) scale(1.06); }
  76%{ transform:rotateY(640deg) rotateZ(2deg) scale(1.1); }
  92%{ transform:rotateY(700deg) scale(1.22); opacity:1; }
  100%{ transform:rotateY(720deg) scale(1.5); opacity:0; }
}

.draw-btn{
  position:relative; width:min(64vw,260px); aspect-ratio:1/1; border-radius:50%; cursor:pointer;
  border:3px solid #ffe9a8; color:#4a2a00; font:inherit;
  background:
    radial-gradient(60% 55% at 32% 26%, #fff8dd, var(--gold-300) 42%, var(--gold-500) 68%, var(--gold-700) 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 10px rgba(255,207,92,.1), 0 0 44px rgba(255,180,60,.4), inset 0 -8px 22px rgba(168,115,10,.45);
  transition:transform var(--t-fast), box-shadow var(--t-base), filter var(--t-base);
  overflow:hidden;
}
.draw-btn::after{ /* 流光 */
  content:""; position:absolute; top:-60%; left:-120%; width:60%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:rotate(18deg); animation:shine 3.6s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-120%; } 55%{ left:130%; } 100%{ left:130%; } }
.draw-btn-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; }
.draw-btn b{ font-size:clamp(22px,3.2vw,34px); letter-spacing:.12em; font-weight:800; text-shadow:0 2px 0 rgba(255,255,255,.5); }
.draw-btn small{ font-size:12px; color:rgba(74,42,0,.72); font-weight:600; }
.draw-btn:not([disabled]):hover{ transform:scale(1.03); box-shadow:0 18px 42px rgba(0,0,0,.5), 0 0 0 12px rgba(255,207,92,.16), 0 0 60px rgba(255,180,60,.55), inset 0 -8px 22px rgba(168,115,10,.45); }
.draw-btn:not([disabled]):active{ transform:scale(.97); }
.draw-btn[disabled]{ filter:grayscale(.55) brightness(.8); cursor:not-allowed; }
.draw-btn.pulse{ animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 10px rgba(255,207,92,.1), 0 0 44px rgba(255,180,60,.4), inset 0 -8px 22px rgba(168,115,10,.45); } 50%{ box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 0 18px rgba(255,207,92,.06), 0 0 66px rgba(255,180,60,.6), inset 0 -8px 22px rgba(168,115,10,.45); } }
.draw-btn.busy{ animation:busyPop var(--t-slow) cubic-bezier(.3,.1,.2,1); }
@keyframes busyPop{ 0%{ transform:scale(1); } 22%{ transform:scale(.93); } 45%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.draw-tip{ font-size:12px; color:var(--text-dim); margin:14px 0 0; }

/* 跑马灯 */
.marquee{ display:flex; gap:10px; overflow:hidden; justify-content:center; margin:18px auto 0; max-width:100%; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee:empty{ display:none; }
.marquee li{
  flex:0 0 auto; font-size:12px; padding:6px 12px; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line); background:rgba(255,207,92,.08); color:var(--gold-100);
}
.marquee li b{ color:var(--gold-300); }
.stage-foot{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.mode-note{ font-size:12px; color:var(--text-dim); }

/* ---------- 记录 ---------- */
.record-list{ display:flex; flex-direction:column; gap:6px; max-height:calc(100vh - 240px); overflow:auto; padding-right:2px; }
.record{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  padding:8px 10px; border-radius:var(--r-md); background:rgba(0,0,0,.22); border:1px solid var(--line-soft);
  font-size:13px;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.record:hover{ border-color:var(--line); background:rgba(255,207,92,.06); }
.record .r-idx{ font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.record .r-name{ font-weight:600; }
.record .r-sub{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.record .r-amount{ color:var(--gold-300); font-weight:700; font-variant-numeric:tabular-nums; }
.record.zero .r-amount{ color:var(--text-dim); font-weight:400; }
.record.fresh{ animation:slidein .55s cubic-bezier(.2,.9,.2,1), flash 1s ease-out .55s 1; }
@keyframes slidein{ from{ opacity:0; transform:translateY(-14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes flash{ 0%{ background:rgba(255,207,92,.42); } 100%{ background:rgba(0,0,0,.22); } }

/* ---------- 弹层 ---------- */
.overlay{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px;
  background:rgba(20,2,3,.68); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:fade .2s ease-out;
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.result-card{
  position:relative; width:min(92vw,420px); padding:30px 24px 24px; border-radius:24px; text-align:center;
  border:2px solid rgba(255,207,92,.6);
  background:linear-gradient(180deg,#a4141c,#5c0a10 70%,#3d0608);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,207,92,.35);
  animation:pop .45s cubic-bezier(.2,1.3,.35,1);
}
@keyframes pop{ 0%{ opacity:0; transform:scale(.8) translateY(16px); } 100%{ opacity:1; transform:none; } }
.result-glow{
  position:absolute; inset:-30% -10% auto; height:80%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,207,92,.35), transparent 70%);
}
.result-hi{ margin:0; font-size:14px; letter-spacing:.3em; color:var(--gold-300); }
.result-name{ margin:8px 0 0; font-size:26px; font-weight:800; color:#fff7e2; }
.result-amount{ margin:6px 0 0; display:flex; align-items:baseline; justify-content:center; gap:4px; }
.result-amount .yuan{ font-size:22px; color:var(--gold-300); }
.result-amount b{
  font-size:clamp(44px,11vw,68px); line-height:1.05; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fffbe8,var(--gold-300) 50%,var(--gold-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 16px rgba(255,180,60,.45));
}
.result-prize{ margin:10px 0 0; font-size:15px; color:var(--gold-100); }
.result-sub{ margin:6px 0 20px; font-size:12px; color:var(--text-dim); }
.result-card.zero .result-amount b{ background:none; color:#ffdada; -webkit-text-fill-color:#ffdada; }
.result-card .btn{ min-width:150px; }

.confirm-card{
  width:min(92vw,420px); padding:24px; border-radius:var(--r-lg); text-align:left;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#84121a,#3d0608 80%);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,207,92,.25);
  animation:pop .3s cubic-bezier(.2,1.2,.4,1);
}
.confirm-card h3{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:16px; color:var(--gold-300); }
.confirm-card h3::before{
  content:""; width:4px; height:16px; border-radius:3px;
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  box-shadow:0 0 8px rgba(255,207,92,.6);
}
.confirm-card p{ margin:0 0 18px; font-size:13px; line-height:1.75; color:var(--text); }
.confirm-card p b{ color:var(--gold-300); }
.confirm-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  padding:10px 16px; border-radius:99px; font-size:13px; max-width:88vw;
  border:1px solid var(--line); background:rgba(61,6,8,.94); color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.45); animation:toastIn .28s ease-out;
}
.toast.ok{ border-color:rgba(143,240,168,.5); color:#dcffe6; }
.toast.ok::before{ content:"✅ "; }
.toast.err{ border-color:rgba(255,120,120,.5); color:#ffe0e0; }
.toast.err::before{ content:"⚠ "; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* 滚动条 */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,207,92,.28); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,207,92,.45); }
::-webkit-scrollbar-track{ background:transparent; }

/* 低配 / 用户偏好：关闭动效 */
:root.no-fx .draw-btn::after,
:root.no-fx .draw-btn.pulse,
:root.no-fx .lantern span,
:root.no-fx .stage-title .deco{ animation:none !important; }
:root.no-fx .record.fresh,
:root.no-fx .person.win-flash::after,
:root.no-fx .person.added,
:root.no-fx .env-float.on .env-shape,
:root.no-fx .draw-btn.busy{ animation:none !important; }
:root.no-fx .result-card,
:root.no-fx .overlay,
:root.no-fx .toast{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
}
@media (max-width:520px){
  .topbar{ gap:10px; padding:10px 12px; }
  .brand-ico{ width:38px; height:38px; font-size:20px; }
  .brand-txt strong{ font-size:16px; }
  .progress-box{ order:3; flex-basis:100%; }
  .draw-btn{ width:min(70vw,220px); }
  .panel{ padding:12px; }
  .person-list{ max-height:none; }
  .person{ grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:8px; }
  .p-bar{ display:none; }
}