/* ============================================================
   抽奖主界面样式（节庆深色主题 + 四种玩法视觉）
   ============================================================ */

.draw-screen{
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--ds-a) 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, var(--ds-b) 0%, transparent 55%),
    linear-gradient(160deg,var(--ds-g1) 0%,var(--ds-g2) 45%,var(--ds-g3) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.draw-screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:2;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(255,214,120,.05) 0 2px, transparent 2px 22px);
}
.draw-screen::after{
  content:"";position:absolute;left:0;right:0;top:-180px;height:420px;pointer-events:none;z-index:2;
  background:radial-gradient(60% 100% at 50% 100%, var(--ds-glow), transparent 70%);
}

/* ---------------- 自定义背景图层（后台可上传，按玩法切换） ---------------- */
.bg-layer{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity .5s ease;
}
.bg-layer.on{opacity:1;}
.bg-mask{
  position:absolute;inset:0;z-index:1;background:#000;opacity:.45;
  pointer-events:none;transition:opacity .3s;
}

/* ---------------- 顶部 ---------------- */
.draw-header{
  position:relative;z-index:3;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 26px;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0));
}
.dh-left{display:flex;align-items:center;gap:14px;min-width:0;}
.dh-logo{
  width:56px;height:56px;border-radius:16px;flex:none;
  display:grid;place-items:center;font-size:30px;
  background:linear-gradient(150deg,#ffd75e,#e0930a);
  box-shadow:0 8px 22px rgba(224,147,10,.4);
}
.dh-titles h1{
  font-size:27px;font-weight:800;letter-spacing:1.5px;line-height:1.2;
  background:linear-gradient(180deg,#fff8e2,#ffd062 70%,#e9a41a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.dh-titles p{font-size:14px;color:rgba(255,255,255,.72);margin-top:3px;letter-spacing:.6px;}
.dh-right{display:flex;align-items:center;gap:12px;}
.dh-stat{
  display:flex;align-items:baseline;gap:5px;padding:8px 16px;border-radius:99px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18);
}
.dh-stat .k{font-size:12.5px;color:rgba(255,255,255,.7);}
.dh-stat b{font-size:22px;font-family:var(--font-num);color:var(--gold-l);line-height:1;}

/* ---------------- 主体 ---------------- */
.draw-body{position:relative;z-index:3;flex:1;display:flex;gap:var(--win-panel-gap);padding:6px var(--win-panel-gap) 10px;min-height:0;}

.stage-wrap{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;}
.stage{
  position:relative;flex:1;min-height:0;border-radius:var(--r-xl);
  background:radial-gradient(70% 70% at 50% 35%, rgba(255,255,255,.10), rgba(0,0,0,.16));
  border:1px solid rgba(255,214,120,.28);
  box-shadow:inset 0 0 70px rgba(0,0,0,.35), 0 10px 40px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.stage-live{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.stage-badge{
  position:absolute;top:16px;left:18px;z-index:6;display:none;
  padding:7px 15px;border-radius:99px;font-size:13.5px;font-weight:600;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,214,120,.35);color:var(--gold-l);
}
.stage-badge.show{display:block;}

/* 本局剩余抽奖次数：四种玩法共用同一套次数，每消耗 1 次当场刷新 */
.stage-counter{
  position:absolute;top:16px;right:18px;z-index:6;display:none;
  padding:7px 15px;border-radius:99px;font-size:13.5px;font-weight:700;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);color:#fff;
  letter-spacing:.4px;
}
.stage-counter.show{display:block;}
.stage-counter b{font-family:var(--font-num);font-size:19px;color:var(--gold-l);margin:0 3px;vertical-align:-1px;}
.stage-counter.live{border-color:rgba(255,214,120,.55);box-shadow:0 0 18px rgba(240,180,41,.3);}

/* ---------------- 右侧「本次中奖」面板（仅幸运跑马灯） ----------------
   一列独占，**始终占位**：跑马灯的灯格位置是挂载时按舞台实际宽度算的
   （wheel.js#layout 只监听 window.resize），中途收放面板会让环排错位。
   结果弹层打开时（body.result-open）遮罩全屏覆盖，面板整体浮于遮罩上方保持可见。 */
:root{--win-panel-w:360px;--win-panel-gap:26px;}
.win-panel{
  position:relative;flex:0 0 var(--win-panel-w);min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;
  border-radius:var(--r-xl);
  background:radial-gradient(70% 70% at 50% 25%, rgba(255,255,255,.10), rgba(0,0,0,.16));
  border:1px solid rgba(255,214,120,.28);
  box-shadow:inset 0 0 70px rgba(0,0,0,.35), 0 10px 40px rgba(0,0,0,.28);
}
.win-panel[hidden]{display:none;}
.wp-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wp-title{font-size:15px;font-weight:800;color:var(--gold-l);letter-spacing:1.2px;}
.wp-round{font-size:12.5px;font-weight:700;font-family:var(--font-num);color:rgba(255,255,255,.72);}
.wp-body{
  flex:1;min-height:0;overflow:hidden;padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
}
.wp-state{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.85;}
.wp-spin{color:var(--gold-l);font-weight:700;letter-spacing:1px;}
.wp-hint{font-size:12.5px;color:rgba(255,255,255,.45);}
.wp-icon{font-size:clamp(44px,7.5vh,72px);line-height:1;animation:iconPop .5s cubic-bezier(.2,1.4,.4,1) both;}
.wp-icon img{width:clamp(44px,7.5vh,72px);height:clamp(44px,7.5vh,72px);object-fit:contain;border-radius:16px;}
.wp-name{font-size:clamp(18px,3vh,26px);font-weight:900;color:#fff;letter-spacing:1.5px;line-height:1.28;}
.wp-level{
  display:inline-block;padding:3px 12px;border-radius:99px;font-size:12.5px;font-weight:700;
  color:#5c3800;background:linear-gradient(160deg,#ffe9a8,#f0c24a);border:1px solid rgba(255,255,255,.5);
}
.wp-sub{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.9;}
.wp-nothing .wp-name{color:rgba(255,255,255,.6);letter-spacing:3px;}
.wp-nothing .wp-icon{opacity:.7;}
.wp-big .wp-name{color:var(--gold-l);text-shadow:0 0 24px rgba(240,180,41,.6);}

/* ---- 本局奖品明细列表（在上方，滚动，最新一条自动滚入视野） ---- */
.wp-list{
  flex:0 1 auto;min-height:0;max-height:56%;overflow-y:auto;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:8px;padding:2px 2px 0;
}
.wp-list:empty{display:none;}
.wp-list-hd{
  flex:0 0 auto;font-size:13px;font-weight:800;letter-spacing:1.8px;
  color:rgba(255,214,120,.62);padding:9px 2px 0;margin-top:2px;
  border-top:1px solid rgba(255,214,120,.16);
}
.wp-item{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,214,120,.12);
}
.wp-item.thanks{opacity:.55;}
.wp-item.pend .wp-no{background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);}
.wp-item.pend .wp-nm{color:var(--gold-l);}
.wp-no{
  flex:0 0 auto;width:27px;height:27px;border-radius:99px;display:grid;place-items:center;
  font-size:13.5px;font-weight:800;font-family:var(--font-num);
  color:#3a2600;background:linear-gradient(160deg,#ffe9a8,#eebd3f);
}
.wp-ic{flex:0 0 auto;font-size:21px;line-height:1;}
.wp-ic img{width:27px;height:27px;object-fit:contain;border-radius:6px;display:block;}
.wp-nm{
  flex:1;min-width:0;text-align:left;font-size:16.5px;font-weight:800;color:#fff;
  word-break:break-all;line-height:1.35;letter-spacing:.6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wp-lv{
  flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.5px;
  padding:2px 9px;border-radius:99px;color:#ffe9a8;background:rgba(238,189,63,.18);
  border:1px solid rgba(238,189,63,.45);white-space:nowrap;
}
.wp-tm{flex:0 0 auto;font-size:12.5px;color:rgba(255,255,255,.45);font-family:var(--font-num);}

/* 管理后台入口平时不显示：F12 / Ctrl+Shift+M 是唯一入口 */
#btnManage[hidden]{display:none !important;}

@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ---------------- 待机态 · 奖品展示区 ---------------- */
.stage-idle{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px 16px 8px;gap:8px;
}
.prize-wall{
  position:relative;flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;gap:8px;
}
.pw-head{flex:none;display:flex;align-items:baseline;gap:12px;justify-content:center;}
.pw-title{font-size:16px;font-weight:800;letter-spacing:1.5px;color:var(--gold-l);text-shadow:0 2px 10px rgba(0,0,0,.35);}
.pw-count{font-size:13px;color:rgba(255,255,255,.55);}
/* 全部奖品一次性铺满：列数由 JS 写入 --pw-cols，放不下时纵向滚动（不再分页）
   右栏移除后可用宽度翻倍，卡片随之放大以填满整幅 */
.pw-grid{
  position:relative;flex:1;min-height:0;
  display:grid;
  grid-template-columns:repeat(var(--pw-cols,5),minmax(0,1fr));
  grid-auto-rows:minmax(64px,1fr);
  gap:10px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
}
.pw-grid::-webkit-scrollbar{width:6px;}
.pw-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;}
.pw-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:8px 6px;border-radius:14px;min-height:0;overflow:hidden;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,214,120,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pw-icon{font-size:clamp(22px,5.6vh,64px);line-height:1;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.pw-icon img{width:clamp(26px,6.4vh,76px);height:clamp(26px,6.4vh,76px);object-fit:contain;border-radius:8px;display:block;}
.pw-name{
  font-size:clamp(11px,1.85vh,18px);font-weight:700;color:#fff;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;
}
.pw-level{font-size:clamp(9.5px,1.2vh,13px);padding:2px 10px;border-radius:99px;font-weight:700;flex:none;letter-spacing:.3px;}
.pw-level.lvc-0{background:linear-gradient(180deg,#ff7b6b,#c81e1e);color:#fff;}
.pw-level.lvc-1{background:linear-gradient(180deg,#ffc061,#e08a00);color:#5c3a00;}
.pw-level.lvc-2{background:linear-gradient(180deg,#ffdf90,#f0b429);color:#5c3a00;}
.pw-level.lvc-3{background:rgba(255,255,255,.22);color:#fff;}
.pw-level.lvc-4,.pw-level.lvc-5{background:rgba(255,255,255,.15);color:rgba(255,255,255,.92);}
.pw-level.lvc-9{background:rgba(255,255,255,.12);color:rgba(255,255,255,.72);}
.pw-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.45);font-size:14px;
}
.pw-hint{flex:none;font-size:13px;color:rgba(255,255,255,.62);letter-spacing:.5px;}

/* 玩法切换 */
.mode-switch{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mode-btn{
  height:64px;border-radius:var(--r);font-size:13.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.82);transition:all .16s;
}
.mode-btn span{font-size:15px;}
.mode-btn i{display:none;}
.mode-btn:hover{background:rgba(255,255,255,.15);}
.mode-btn.on{
  background:linear-gradient(180deg, rgba(255,214,120,.26), rgba(237,166,10,.16));
  border-color:var(--gold);color:#fff;box-shadow:0 6px 22px rgba(224,150,0,.28);
}

/* ---------------- 右侧面板 ---------------- */
/* ---------------- 底部 · 抽奖次数（与「开始抽奖」同一行） ----------------
   右侧常驻面板与屏幕数字键盘已移除：次数直接键入（电脑键盘），
   空出的宽度全部让给奖品展示区。 */
.times-box{flex:none;width:min(400px,32vw);display:flex;flex-direction:column;gap:6px;}
.tb-head{display:flex;align-items:baseline;gap:8px;}
.tb-name{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.4px;}
.tb-head .tip{font-style:normal;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.6);}
.tb-head .tip b{color:var(--gold-l);font-family:var(--font-num);font-size:13px;}

.ticket-input{display:flex;gap:8px;}
.ticket-input input{
  flex:1;min-width:0;height:44px;font-size:16px;letter-spacing:1px;border-radius:10px;
  background:rgba(0,0,0,.28);border:1.5px solid rgba(255,255,255,.2);color:#fff;
  font-family:var(--font-num);
}
.ticket-input input::placeholder{color:rgba(255,255,255,.38);font-family:var(--font);letter-spacing:0;font-size:12.5px;}
.ticket-input input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,180,41,.2);}
.ticket-input .btn{height:44px;min-width:62px;font-size:13.5px;flex:none;}

/* 说明：原「待抽奖次数列表」「今日数据」「库存预警」三个模块已按需求移除，
   剩余抽奖次数统一显示在底部大按钮的副标题上。 */

/* ---------------- 底部 ---------------- */
.draw-footer{
  position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:20px;
  padding:10px 26px 20px;
}
.draw-footer .btn-outline{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);}
.draw-footer .btn-outline:hover{background:rgba(255,255,255,.14);}
.btn-xl{
  flex:1;height:96px;border-radius:var(--r-xl);flex-direction:column;gap:3px;
  font-size:32px;font-weight:900;letter-spacing:4px;
  background:linear-gradient(180deg,#ffe083 0%,#f5b301 45%,#d98d00 100%);
  color:#5c3a00;border:2px solid #ffe9a8;
  box-shadow:0 12px 34px rgba(224,150,0,.42), inset 0 2px 0 rgba(255,255,255,.6);
  animation:btnPulse 2.6s ease-in-out infinite;
}
.btn-xl .bd-main{line-height:1;}
.btn-xl .bd-sub{font-size:13px;font-weight:500;letter-spacing:1px;opacity:.78;}
.btn-xl:disabled{animation:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.18);box-shadow:none;}
@keyframes btnPulse{0%,100%{box-shadow:0 12px 34px rgba(224,150,0,.42), inset 0 2px 0 rgba(255,255,255,.6)}
  50%{box-shadow:0 14px 44px rgba(255,196,60,.66), inset 0 2px 0 rgba(255,255,255,.6)}}
.btn-xl.drawing{animation:none;filter:saturate(.4) brightness(.9);}

/* ============================================================
   玩法 1 · 环形跑马灯
   ============================================================ */
.mq-box{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:6px;}
.mq-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;}
.mq-ring{position:absolute;inset:0;}
/* 椭圆环：每格的 left/top 由 JS 按椭圆参数直接写入。
   舞台是宽扁的（1920×1080 下可用区约 1100×445），正圆会被高度卡死导致每格弧长过小，
   改用椭圆后周长近乎翻倍，灯格才放得下图标与名称。 */
.mq-cell{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:var(--cw,72px);height:var(--ch,90px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#8a1f24,#5d1216);
  border:2px solid rgba(255,214,120,.3);
  box-shadow:0 4px 12px rgba(0,0,0,.34);
  /* 刻意不加 transition：跑马灯最快时可低至 ~11ms 一格，
     带过渡会让跑过的灯格来不及熄灭，视觉上"整圈发亮"。 */
}
.mq-cell .mq-ic{display:grid;place-items:center;width:100%;line-height:1;font-size:calc(var(--cw,72px) * 0.42);}
.mq-cell .mq-ic img{width:calc(var(--cw,72px) * 0.62);height:calc(var(--cw,72px) * 0.62);object-fit:contain;}
.mq-cell .mq-name{
  font-size:calc(var(--cw,72px) * 0.165);line-height:1.14;font-weight:800;color:#ffe9b8;
  max-width:94%;padding:0 2px;text-align:center;word-break:break-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 跑动中高亮（不使用 transform，避免与环形定位的 transform 冲突） */
.mq-cell.on{
  background:linear-gradient(160deg,#fff3cf,#f0b429);
  border-color:#fff8e0;
  box-shadow:0 0 0 3px rgba(255,238,190,.9), 0 0 24px rgba(255,196,60,.95);
}
.mq-cell.on .mq-name{color:#5c3800;}
/* 最终停留格 */
.mq-cell.win{
  background:linear-gradient(160deg,#fffaea,#ffcf4d);
  border-color:#ffffff;
  box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 0 38px rgba(255,196,60,1);
  animation:mqWin .55s ease-out;
}
.mq-cell.win .mq-name{color:#5c3800;}
@keyframes mqWin{0%{filter:brightness(1)}42%{filter:brightness(1.55)}100%{filter:brightness(1.12)}}
.mq-cell.mq-thanks{background:linear-gradient(160deg,#5a6472,#39404c);border-color:rgba(255,255,255,.3);}
.mq-cell.mq-thanks .mq-name{color:#e6ebf3;}
.mq-cell.mq-thanks.on,.mq-cell.mq-thanks.win{background:linear-gradient(160deg,#eef2f8,#c3cbd8);}
.mq-cell.mq-thanks.on .mq-name,.mq-cell.mq-thanks.win .mq-name{color:#3a4150;}

.mq-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 28%,#fff8e6,#f3bd3f 58%,#c98a06);
  border:5px solid rgba(255,255,255,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.42), inset 0 -10px 26px rgba(160,104,0,.36);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:12px;
}
.mq-hub-icon{font-size:clamp(26px,5vh,52px);line-height:1;}
.mq-hub-title{font-size:clamp(13px,2vh,20px);font-weight:900;color:#6b4300;letter-spacing:1.5px;}
.mq-hub-sub{
  font-size:clamp(11px,1.6vh,15px);font-weight:700;color:#8a5a00;
  max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mq-hub.done .mq-hub-title{color:#a8141c;}

/* ============================================================
   玩法 2 · 刮刮乐
   ============================================================ */
.scratch-box{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:14px;}
/* 实时剩余张数：每刮开一张立即减 1，随抽奖次数驱动 */
.scratch-left{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:6;
  padding:6px 20px;border-radius:99px;font-size:15px;font-weight:800;letter-spacing:.5px;
  background:rgba(0,0,0,.44);border:1px solid rgba(255,214,120,.45);color:var(--gold-l);
  white-space:nowrap;
}
.scratch-left b{font-family:var(--font-num);font-size:21px;color:#fff;margin:0 3px;vertical-align:-1px;}

.scratch-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#fff8ea,#ffe7bd);
  border:5px solid var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.4);
  display:grid;place-items:center;
}
.scratch-under{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;}
.scratch-under .su-icon{font-size:clamp(64px,12vh,120px);line-height:1;}
.scratch-under .su-name{font-size:clamp(22px,3.4vh,34px);font-weight:900;color:#7a1720;letter-spacing:2px;}
.scratch-under .su-level{font-size:15px;font-weight:700;color:#c2410c;background:#fff2e0;padding:5px 16px;border-radius:99px;}
.scratch-canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair;}
.scratch-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  font-size:13.5px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.42);
  padding:6px 16px;border-radius:99px;pointer-events:none;
}

/* ============================================================
   玩法 3 · 砸金蛋
   ============================================================ */
/* 铺满整个舞台：蛋的尺寸由格子决定（与十二生肖同款做法），18 枚 = 6 列 × 3 行 */
.egg-box{width:100%;height:100%;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,16px);padding:clamp(8px,1.6vh,18px) clamp(10px,1.6vw,26px);}
.egg-grid{
  flex:1;min-height:0;width:100%;
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.3vw,20px);
}
.egg{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0;cursor:pointer;transition:transform .14s;touch-action:manipulation;}
.egg:active{transform:scale(.95);}
.egg-body{
  /* 蛋身按固定纵横比在格子里居中。
     ① 不能用 left:0;right:0 —— 那会把宽度拉伸到整格，aspect-ratio 失效、蛋被压扁；
     ② 也不能用 translate(-50%) 居中 —— 破蛋动画 eggBreak 也走 transform，会覆盖位移。
     故交给父级 .egg 的 grid 居中，本元素保持文档流内定高定比。 */
  position:relative;height:100%;width:auto;aspect-ratio:1/1.26;max-width:100%;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(150deg,#ffe9a8 0%,#f4c542 38%,#d99b06 70%,#a87400 100%);
  box-shadow:inset -8px -12px 22px rgba(120,78,0,.4), 0 10px 26px rgba(0,0,0,.38);
  border:2px solid rgba(255,255,255,.4);
  display:grid;place-items:center;overflow:hidden;
}
.egg-body .eg-num{font-size:clamp(15px,2.1vh,22px);font-weight:900;color:rgba(120,78,0,.55);font-family:var(--font-num);}
.egg-stand{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:56%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.45), rgba(0,0,0,0) 72%);
}
.egg.shake{animation:eggShake .42s cubic-bezier(.36,.07,.19,.97);}
@keyframes eggShake{10%,90%{transform:translate(-2px,1px) rotate(-2deg)}30%,70%{transform:translate(3px,-1px) rotate(3deg)}
  50%{transform:translate(-4px,1px) rotate(-3deg)}}
.egg.broken .egg-body{background:linear-gradient(150deg,#fff3d2,#ffd970);
  animation:eggBreak .5s forwards;box-shadow:inset 0 0 30px rgba(255,255,255,.8),0 10px 26px rgba(0,0,0,.3);}
@keyframes eggBreak{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
.egg.broken .egg-body::before{
  content:"";position:absolute;top:38%;left:-10%;width:120%;height:8%;
  background:linear-gradient(90deg,transparent,rgba(140,95,0,.65),rgba(140,95,0,.2),transparent);
  transform:rotate(-12deg);
}
.egg.broken .egg-crack{display:block;}
.egg-crack{
  display:none;position:absolute;inset:0;
  background:
    linear-gradient(118deg,transparent 46%,rgba(120,80,0,.75) 47%,transparent 48%),
    linear-gradient(62deg,transparent 52%,rgba(120,80,0,.6) 53%,transparent 54%);
}
.egg .egg-prize{
  position:absolute;left:-2%;right:-2%;top:2%;bottom:-2%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  opacity:0;transform:scale(.5);transition:all .4s cubic-bezier(.2,1.3,.4,1);z-index:4;pointer-events:none;
}
.egg.broken .egg-prize{opacity:1;transform:scale(1);}
.egg-prize .ep-icon{font-size:clamp(28px,4.8vh,50px);filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.egg-prize .ep-name{
  font-size:clamp(10px,1.5vh,14px);font-weight:800;color:#7a1720;margin-top:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(255,255,255,.94);border-radius:8px;padding:2px 8px;box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.egg.dim{opacity:.36;filter:grayscale(.5);}
.egg.ready{animation:eggGlow 1.6s ease-in-out infinite;}
@keyframes eggGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,214,120,0))}50%{filter:drop-shadow(0 0 16px rgba(255,214,120,.9))}}

/* ---- 玩法样式：彩蛋（彩虹条纹） ---- */
.egg.egg-skin-rainbow .egg-body{
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 34%),
    repeating-linear-gradient(125deg,
      #ff8fa3 0 14%, #ffb56b 14% 28%, #ffe066 28% 42%, #8fe388 42% 56%,
      #6ec6ff 56% 70%, #b39dff 70% 84%, #ff9de2 84% 100%);
  box-shadow:inset -8px -12px 22px rgba(90,40,90,.35), 0 10px 26px rgba(0,0,0,.38);
  border-color:rgba(255,255,255,.55);
}
.egg.egg-skin-rainbow .eg-num{color:rgba(90,40,90,.6);text-shadow:0 1px 0 rgba(255,255,255,.6);}
.egg.egg-skin-rainbow.broken .egg-body{background:linear-gradient(150deg,#fff0f6,#ffd6ec);box-shadow:inset 0 0 30px rgba(255,255,255,.85),0 10px 26px rgba(0,0,0,.3);}
.egg.egg-skin-rainbow.broken .egg-body::before{background:linear-gradient(90deg,transparent,rgba(160,60,130,.6),rgba(160,60,130,.2),transparent);}
.egg.egg-skin-rainbow .egg-crack{background:
    linear-gradient(118deg,transparent 46%,rgba(150,60,120,.75) 47%,transparent 48%),
    linear-gradient(62deg,transparent 52%,rgba(150,60,120,.6) 53%,transparent 54%);}

/* ---- 玩法样式：恐龙蛋（绿底深斑） ---- */
.egg.egg-skin-dino .egg-body{
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 68% 58%, #2e7d32 0 9%, rgba(46,125,50,0) 10%),
    radial-gradient(circle at 34% 66%, #2e7d32 0 7%, rgba(46,125,50,0) 8%),
    radial-gradient(circle at 60% 32%, #388e3c 0 6%, rgba(56,142,60,0) 7%),
    radial-gradient(circle at 44% 44%, #43a047 0 5%, rgba(67,160,67,0) 6%),
    linear-gradient(150deg,#c8e6a0 0%,#8bc34a 38%,#558b2f 72%,#33691e 100%);
  box-shadow:inset -8px -12px 22px rgba(30,70,20,.45), 0 10px 26px rgba(0,0,0,.38);
  border-color:rgba(230,255,210,.45);
}
.egg.egg-skin-dino .eg-num{color:rgba(30,70,20,.65);text-shadow:0 1px 0 rgba(255,255,255,.35);}
.egg.egg-skin-dino.broken .egg-body{background:linear-gradient(150deg,#f1f8e9,#c5e1a5);box-shadow:inset 0 0 30px rgba(255,255,255,.85),0 10px 26px rgba(0,0,0,.3);}
.egg.egg-skin-dino.broken .egg-body::before{background:linear-gradient(90deg,transparent,rgba(60,110,40,.65),rgba(60,110,40,.2),transparent);}
.egg.egg-skin-dino .egg-crack{background:
    linear-gradient(118deg,transparent 46%,rgba(50,95,35,.75) 47%,transparent 48%),
    linear-gradient(62deg,transparent 52%,rgba(50,95,35,.6) 53%,transparent 54%);}
.egg-tip{flex:none;width:100%;text-align:center;font-size:15px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:1px;}
.hammer{
  position:absolute;font-size:clamp(38px,7vh,72px);z-index:20;pointer-events:none;
  transform-origin:90% 90%;animation:hammerHit .5s ease-in forwards;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
@keyframes hammerHit{
  0%{opacity:0;transform:translate(-30%,-60%) rotate(-70deg) scale(.8)}
  30%{opacity:1;transform:translate(-30%,-60%) rotate(-50deg) scale(1)}
  55%{transform:translate(-30%,-60%) rotate(22deg) scale(1.05)}
  70%{transform:translate(-30%,-60%) rotate(6deg) scale(1)}
  100%{opacity:0;transform:translate(-30%,-60%) rotate(8deg) scale(1)}
}

/* ============================================================
   玩法 4 · 十二生肖翻牌
   ============================================================ */
.zodiac-box{
  width:100%;height:100%;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,16px);
  padding:clamp(8px,1.6vh,18px) clamp(10px,1.6vw,26px);
}
/* 铺满整个舞台：卡片尺寸由格子决定（不再用固定宽度居中摆放） */
.zodiac-grid{
  flex:1;min-height:0;width:100%;
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.3vw,20px);
}
.z-card{
  position:relative;width:100%;height:100%;min-height:0;
  perspective:1100px;cursor:pointer;touch-action:manipulation;
}
.z-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,1.2,.4,1);}
.z-card.flipped .z-inner{transform:rotateY(180deg);}
.z-face{
  position:absolute;inset:0;border-radius:clamp(12px,1.8vh,22px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.2vh,16px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);border:3px solid rgba(255,214,120,.5);
}
.z-front{
  background:linear-gradient(155deg,#b5142a,#7d0d16 65%);
  color:var(--gold-l);
}
.z-front .zf-icon{font-size:clamp(40px,9.5vh,116px);line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));}
.z-front .zf-name{font-size:clamp(14px,2.4vh,28px);font-weight:800;letter-spacing:2px;}
.z-front .zf-seal{
  position:absolute;top:6px;right:8px;font-size:clamp(10px,1.4vh,15px);font-weight:700;padding:1px 6px;
  border:1px solid rgba(255,214,120,.55);border-radius:4px;opacity:.8;
}
.z-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#fffaf0,#ffe2a8);color:#7a1720;
}
.z-back .zb-icon{font-size:clamp(36px,8.5vh,104px);line-height:1;}
.z-back .zb-name{font-size:clamp(12px,2.1vh,24px);font-weight:800;padding:0 6px;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.z-card:hover:not(.flipped) .z-inner{transform:translateY(-6px) rotateY(0deg);}
.z-card.dim{opacity:.34;filter:grayscale(.55);}
.z-card.lucky .z-front{box-shadow:0 0 0 3px var(--gold),0 10px 30px rgba(255,214,120,.6);}
.zodiac-tip{flex:none;text-align:center;font-size:16px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:1px;}

/* ---- 玩法样式：十二星座（星空紫蓝卡面） ---- */
.z-face.z-face-star,
.zodiac-set-xingzuo .z-front{
  background:linear-gradient(155deg,#2b2e6e,#141638 65%);
  color:#e8eaff;border-color:rgba(160,170,255,.5);
}
.zodiac-set-xingzuo .z-front .zf-seal{border-color:rgba(160,170,255,.6);}
.zodiac-set-xingzuo .z-card.lucky .z-front{box-shadow:0 0 0 3px #9fa8ff,0 10px 30px rgba(120,130,255,.55);}

/* ---- 玩法样式：十二地支（青玉铜字卡面） ---- */
.z-face.z-face-jade,
.zodiac-set-dizhi .z-front{
  background:linear-gradient(155deg,#0f5a4e,#06332c 65%);
  color:#ffe9b8;border-color:rgba(120,220,190,.45);
}
.zodiac-set-dizhi .z-front .zf-seal{border-color:rgba(120,220,190,.55);}
.zodiac-set-dizhi .z-card.lucky .z-front{box-shadow:0 0 0 3px #6fdcb8,0 10px 30px rgba(80,200,160,.5);}

/* ============================================================
   结果弹层
   ============================================================ */
.result-mask{
  position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 50% 40%, rgba(120,10,20,.72), rgba(10,8,10,.9));
  animation:fadeIn .2s ease;
}
/* 右侧「本次中奖」面板可见时：遮罩不再右侧让位（旧方案会在面板列下方露出
   「开始抽奖」按钮的黄色尾巴），改为遮罩全屏覆盖 + 面板整体抬到遮罩之上。
   面板是纯展示、无按钮，浮在遮罩上方只影响观感不影响交互。
   前提：弹层打开期间临时放开 .draw-body 的堆叠上下文（z-index:3 → auto），
   让 .win-panel 的 z-index 能在根层叠上下文里直接压过 .result-mask(1100)。 */
body.has-win-panel.result-open .draw-body{z-index:auto;}
body.has-win-panel.result-open .win-panel{z-index:1150;}
.result-card{
  position:relative;width:min(560px,92vw);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(170deg,#fff8ea 0%,#ffe9bd 55%,#ffd88a 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 5px rgba(255,214,120,.5);
  animation:resultIn .5s cubic-bezier(.2,1.25,.35,1);
  padding:34px 30px 26px;text-align:center;
}
@keyframes resultIn{0%{opacity:0;transform:translateY(40px) scale(.85)}60%{transform:translateY(-6px) scale(1.02)}100%{opacity:1;transform:none}}
.result-card::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.55) 0deg 6deg, transparent 6deg 12deg);
  mask-image:radial-gradient(circle at 50% 42%, transparent 34%, #000 62%, transparent 88%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, transparent 34%, #000 62%, transparent 88%);
  animation:spinSlow 30s linear infinite;
}
.result-card>*{position:relative;z-index:2;}
.rc-top{font-size:15px;font-weight:800;letter-spacing:6px;color:#a8620a;margin-bottom:6px;}
.rc-level{
  display:inline-block;padding:6px 22px;border-radius:99px;font-size:15px;font-weight:800;letter-spacing:3px;
  background:linear-gradient(180deg,#e0a800,#b8860b);color:#fff;box-shadow:0 4px 14px rgba(184,134,11,.4);
}
.rc-icon{font-size:clamp(80px,15vh,132px);line-height:1;margin:16px 0 10px;animation:iconPop .6s cubic-bezier(.2,1.4,.4,1) .12s both;}
@keyframes iconPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.1) rotate(4deg)}100%{transform:none;opacity:1}}
.rc-name{font-size:clamp(28px,5vh,44px);font-weight:900;color:#7a1720;letter-spacing:2px;line-height:1.24;}
.rc-sub{margin-top:14px;font-size:14px;color:#8a6a1f;line-height:1.9;}
.rc-sub b{color:#7a1720;font-family:var(--font-num);}
.rc-nothing .rc-name{color:#6b4300;}
.rc-actions{display:flex;gap:14px;justify-content:center;margin-top:24px;}
.rc-actions .btn{min-width:132px;height:54px;font-size:16px;}
.rc-ribbon{
  position:absolute;top:14px;left:-2px;z-index:3;
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:1px;
  padding:6px 16px 6px 12px;border-radius:0 99px 99px 0;box-shadow:0 3px 10px rgba(216,30,44,.4);
}
/* 右上角「返回」按钮：结果卡唯一的多余空白处关闭入口（点遮罩空白已禁用） */
.rc-close{
  position:absolute;top:14px;right:14px;z-index:5;height:36px;padding:0 18px;border-radius:99px;
  border:1px solid rgba(122,23,32,.28);background:rgba(122,23,32,.06);color:#7a1720;
  font-size:14px;font-weight:800;letter-spacing:2px;cursor:pointer;line-height:1;
}
.rc-close:hover{background:rgba(122,23,32,.15);}
.rc-close:active{transform:scale(.95);}

/* 说明：原「打印凭条」功能已按需求移除，相关 @media print 样式一并删除。 */

/* ============================================================
   自适应（竖屏 / 小屏）
   ============================================================ */
@media (max-width:1280px){
  :root{--win-panel-w:300px;}
  .dh-titles h1{font-size:23px;}
  .btn-xl{font-size:26px;height:84px;letter-spacing:2px;}
  .times-box{width:min(320px,34vw);}
  .pw-grid{gap:8px;}
  .pw-icon{font-size:clamp(20px,4.4vh,44px);}
  .pw-icon img{width:clamp(24px,5vh,52px);height:clamp(24px,5vh,52px);}
  .pw-name{font-size:clamp(10.5px,1.6vh,15px);}
}
@media (max-width:1024px){
  .draw-body{flex-direction:column;padding:4px 14px;}
  /* 窄屏：右侧面板改为舞台下方的横条，结果弹层恢复全屏覆盖（不留空档） */
  .win-panel{flex:0 0 auto;width:100%;max-height:150px;padding:12px 14px 14px;}
  .wp-head{justify-content:flex-start;}
  .wp-body{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:6px 14px;text-align:left;}
  .wp-icon{font-size:clamp(30px,5vh,48px);}
  .wp-icon img{width:clamp(30px,5vh,48px);height:clamp(30px,5vh,48px);}
  /* 窄屏：明细列表改为横向滚动条 */
  .wp-list{flex-direction:row;align-items:center;gap:8px;overflow-y:hidden;overflow-x:auto;max-height:none;}
  .wp-list-hd{padding:0;margin:0;border-top:none;}
  .wp-item{padding:7px 11px;}
  .wp-nm{font-size:14px;}
  .rc-close{top:10px;right:10px;height:32px;padding:0 13px;font-size:13px;}
  .draw-header{padding:10px 14px;}
  .mode-switch{grid-template-columns:repeat(2,1fr);gap:8px;}
  .mode-btn{height:52px;}
  .dh-titles h1{font-size:20px;}
  /* 窄屏：次数栏与抽奖按钮分两行 */
  .draw-footer{flex-wrap:wrap;padding:8px 14px 14px;gap:10px;}
  #btnReset{order:1;}
  .times-box{order:2;flex:1 1 220px;width:auto;}
  .btn-xl{order:3;flex:1 1 100%;font-size:22px;height:72px;letter-spacing:1px;}
  .btn-xl .bd-sub{display:none;}
  .egg-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,minmax(0,1fr));}
  .zodiac-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(0,1fr));}
  .pw-grid{grid-auto-rows:minmax(52px,1fr);gap:6px;}
  .pw-icon{font-size:clamp(18px,4vh,36px);}
  .pw-icon img{width:clamp(20px,4.4vh,40px);height:clamp(20px,4.4vh,40px);}
  .pw-name{font-size:clamp(10px,1.5vh,13px);}
  .pw-hint{display:none;}
}

/* ============================================================
   启动玩法选择层（仅桌面版 · 见 index.html #modeGate）
   ------------------------------------------------------------
   打开软件 → 先选玩法 → 再进入界面，与 BAT 版命令行 4 选 1 对齐。
   层级 700：压住抽奖界面，但**低于** .manage-panel(800)、.layer(900)、
   结果弹层(1100)，保证「试用次数已用完」这类提示弹层不会被挡住。
   尺寸全部用 clamp(最小, vh/vw, 最大)：1920×1080 触摸一体机上按钮够大，
   笔记本小窗也不会挤爆。
   ============================================================ */
.mode-gate{
  position:fixed;inset:0;z-index:700;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 0%,#3a1114 0%,#1a1012 58%,#110a0b 100%);
}
.mode-gate[hidden]{display:none !important;}
.mode-gate .mg-card{
  width:min(1360px,94vw);max-height:92vh;overflow:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,214,120,.28);border-radius:24px;
  padding:clamp(24px,4vh,52px);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.mode-gate .mg-ico{font-size:clamp(30px,5.4vh,56px);line-height:1;display:block;}
.mode-gate h2{
  margin:14px 0 10px;font-size:clamp(22px,4vh,40px);font-weight:900;letter-spacing:3px;
  color:var(--gold-l,#ffd678);
}
.mode-gate .mg-head2 p{
  margin:0;font-size:clamp(12.5px,1.9vh,17px);line-height:1.8;color:rgba(255,255,255,.62);
}
.mode-gate .mg-opts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.8vw,22px);margin:clamp(20px,4vh,44px) 0 clamp(14px,2.4vh,22px);
}
.mode-gate .mg-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:clamp(20px,4.4vh,52px) 12px;border-radius:20px;cursor:pointer;font:inherit;
  font-size:clamp(26px,5.4vh,56px);line-height:1;color:#fff;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,214,120,.22);
  transition:transform .16s,background .16s,border-color .16s;
}
.mode-gate .mg-opt b{font-size:clamp(14px,2.4vh,25px);font-weight:800;letter-spacing:1.5px;}
.mode-gate .mg-opt span{
  font-size:clamp(11px,1.6vh,14.5px);line-height:1.6;color:rgba(255,255,255,.58);
}
.mode-gate .mg-opt:hover,.mode-gate .mg-opt:focus-visible{
  background:rgba(255,214,120,.16);border-color:var(--gold-l,#ffd678);
  transform:translateY(-3px);outline:none;
}
.mode-gate .mg-opt:active{transform:translateY(-1px) scale(.985);}
.mode-gate .mg-remember{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-size:clamp(12px,1.7vh,15px);color:rgba(255,255,255,.66);
}
.mode-gate .mg-remember input{width:18px;height:18px;flex:none;accent-color:var(--brand,#d81e2c);}
.mode-gate .mg-foot{
  margin-top:14px;font-size:clamp(10.5px,1.45vh,13.5px);line-height:1.7;color:rgba(255,255,255,.38);
}
@media (max-width:900px){
  .mode-gate .mg-opts{grid-template-columns:repeat(2,minmax(0,1fr));}
}