/* ============================================================================
   screen.css —— 大屏专属样式（只被 screen.html 引用）
   ----------------------------------------------------------------------------
   自适应策略（专业大屏做法，不使用 transform:scale）：

   ① 背景层 #bg-layer 固定视口 + background-size:cover
      任何分辨率/宽高比都铺满 → 根除"底部/侧边黑边"

   ② 内容层用流体单位  --u = min(100vw/1920, 100dvh/1080)
      设计稿 1920×1080 中的 1px = 屏幕上的 --u 像素；
      所有尺寸 calc(N * var(--u)) → 连续缩放、文字矢量清晰、无累积误差

   ③ 舞台 #stage 用 grid 居中，尺寸 = 设计稿 × --u
      短边铺满、长边余量交给背景承载 → 视觉无缝、内容不被裁

   ④ --dvh 而非 --vh：移动端地址栏伸缩不跳动
   ============================================================================ */

:root{
  /* 设计稿 1px 对应的实际像素；1920×1080 时恰为 1 */
  --u: min(100vw / 1920, 100dvh / 1080);
  /* 显式声明设计稿尺寸，方便阅读与后续改版 */
  --dw: 1920;
  --dh: 1080;
}

/* ---------- 背景层：独立于内容，永远铺满 ---------- */
/* 用 ::before 承载图片并向四周外扩(overscan)：把图片自带的暗角/渐变边推到视口外，
   投影时不会出现"像黑边"的深色边条。这是大屏背景的常用处理。 */
#bg-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:#070503;
  overflow:hidden;
  /* 外扩比例（相对视口的百分比，等比不吃亏） */
  --overscan: 4%;
}
#bg-layer::before{
  content:"";position:absolute;
  inset:calc(-1 * var(--overscan));
  background-image:var(--bg-img, none);
  background-color:#070503;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#bg-dim{position:absolute;inset:0;background:rgba(13,10,6,.55)}

/* ---------- 舞台：居中，尺寸随 --u 连续变化 ---------- */
#stage{
  position:fixed;inset:0;z-index:1;
  display:grid;place-items:center;
  overflow:hidden;
}
#frame{
  position:relative;
  width:calc(var(--dw) * var(--u));
  height:calc(var(--dh) * var(--u));
  overflow:hidden;
  /* 容器查询基准：供弹幕等需要"舞台宽度"的动画使用 100cqw，而不是视口的 100vw */
  container-type:size;
  container-name:stage;
}

/* ---------- 画布 / 图层 ---------- */
canvas#fireworks-canvas,
canvas#redpacket-canvas{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
canvas#fireworks-canvas{z-index:40}
canvas#redpacket-canvas{z-index:45}
#danmaku-container{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}
#dm-layer{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}
#dm-layer.hidden{display:none}

/* ---------- 公司 Logo 角标（右下、略偏左上） ---------- */
.brand-logo-corner{
  position:absolute;
  right:calc(61 * var(--u));bottom:calc(59 * var(--u));
  z-index:2;pointer-events:none;
  max-height:calc(76 * var(--u));max-width:calc(192 * var(--u));
  object-fit:contain;opacity:.85;
  filter:drop-shadow(0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(212,175,106,.45));
}

/* ---------- 场景容器 ---------- */
.scene{
  position:absolute;inset:0;z-index:10;display:none;
  flex-direction:column;align-items:center;overflow:hidden;
}
.scene.active{display:flex;animation:sceneIn .8s ease}
@keyframes sceneIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.scene-title{font-size:calc(88 * var(--u));font-weight:900;margin-top:calc(76 * var(--u));line-height:1.15}
.scene-subtitle{
  font-size:calc(27 * var(--u));color:rgba(212,175,106,.75);
  margin-top:calc(16 * var(--u));letter-spacing:.3em;
}

/* ============================ 场景 1：欢迎 ============================ */
.gala-title{
  font-size:calc(138 * var(--u));font-weight:900;text-align:center;
  margin-top:calc(52 * var(--u));line-height:1.12;
  max-width:calc(1760 * var(--u));
  animation:breath 5s ease-in-out infinite;
}
@keyframes breath{
  0%,100%{filter:drop-shadow(0 2px 14px rgba(180,140,60,.45))}
  50%{filter:drop-shadow(0 2px 34px rgba(230,190,90,.75))}
}
.gala-subtitle{
  text-align:center;font-size:calc(42 * var(--u));margin-top:calc(26 * var(--u));
  color:var(--gold-2);font-family:"Noto Serif SC","Songti SC",sans-serif;
  letter-spacing:.4em;
}
.brand-logo{
  display:block;margin:calc(36 * var(--u)) auto 0;
  max-height:calc(96 * var(--u));max-width:calc(420 * var(--u));object-fit:contain;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(212,175,106,.35));
}
.brand-company{
  text-align:center;font-size:calc(31 * var(--u));color:rgba(245,230,196,.85);
  margin-top:calc(16 * var(--u));letter-spacing:.5em;font-weight:700;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
.welcome-word{
  text-align:center;font-size:calc(36 * var(--u));margin-top:calc(32 * var(--u));
  color:#F0D9A8;letter-spacing:.35em;min-height:calc(40 * var(--u));
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  text-shadow:0 0 calc(18 * var(--u)) rgba(212,175,106,.4);
  animation:wordIn 1s ease backwards;
}
@keyframes wordIn{
  from{opacity:0;transform:translateY(calc(14 * var(--u)))}
  to{opacity:1;transform:none}
}
.welcome-stats{text-align:center;margin-top:calc(30 * var(--u))}
.stat-num{
  font-size:calc(150 * var(--u));font-weight:900;color:#FFF3D6;line-height:1;
  text-shadow:0 0 calc(40 * var(--u)) rgba(212,175,106,.55);
}
.stat-label{
  font-size:calc(30 * var(--u));color:rgba(245,230,196,.65);
  margin-top:calc(10 * var(--u));letter-spacing:.35em;
}
.welcome-bottom{margin-top:auto;padding-bottom:calc(60 * var(--u));width:100%}
.footer-hint{
  width:100%;text-align:center;font-size:calc(22 * var(--u));
  color:rgba(230,196,120,.75);letter-spacing:.25em;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
/* 跑马灯开启时整体收紧 */
body.has-ticker .welcome-word{margin-top:calc(22 * var(--u));font-size:calc(31 * var(--u))}
body.has-ticker .welcome-stats{margin-top:calc(22 * var(--u))}
body.has-ticker .stat-num{font-size:calc(116 * var(--u))}
body.has-ticker .welcome-bottom{padding-bottom:calc(78 * var(--u))}

/* 星光粒子 */
.stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars::before,.stars::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 25%, rgba(245,230,196,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 60%, rgba(212,175,106,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 15%, rgba(255,243,214,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 45%, rgba(245,230,196,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 70%, rgba(212,175,106,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 80%, rgba(255,243,214,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 90%, rgba(245,230,196,.65) 50%, transparent 51%);
  animation:twinkle 4s ease-in-out infinite;
}
.stars::after{background-size:100% 100%;animation-delay:2s;transform:scaleX(-1)}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.9}}

/* ============================ 场景 2：头像墙 ============================ */
.wall-count{
  font-size:calc(29 * var(--u));color:var(--gold-2);margin:calc(18 * var(--u)) 0 0;
  font-family:"Noto Serif SC","Songti SC",sans-serif;z-index:2;
}
.wall-count span{font-size:calc(50 * var(--u));color:#FFF3D6;font-weight:900}
.sphere-stage{
  position:relative;flex:1;width:100%;overflow:hidden;
  perspective:calc(1700 * var(--u));perspective-origin:50% 46%;
  background:radial-gradient(circle at 50% 46%, rgba(212,175,106,.10) 0%, rgba(212,175,106,.03) 34%, transparent 62%);
}
#sphere{
  position:absolute;left:50%;top:46%;width:0;height:0;
  transform-style:preserve-3d;
  animation:sphereSpin 64s linear infinite;
}
@keyframes sphereSpin{
  from{transform:rotateX(-7deg) rotateY(0deg)}
  to{transform:rotateX(-7deg) rotateY(360deg)}
}
.sphere-item{
  position:absolute;left:0;top:0;
  width:calc(96 * var(--u));height:calc(125 * var(--u));
  margin-left:calc(-48 * var(--u));margin-top:calc(-62 * var(--u));
  border-radius:calc(11 * var(--u));background:rgba(28,22,11,.9);
  border:1px solid rgba(212,175,106,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(4 * var(--u));
  box-shadow:0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.55),
             inset 0 0 calc(12 * var(--u)) rgba(212,175,106,.06);
  will-change:transform;
}
.sphere-item img{
  width:calc(54 * var(--u));height:calc(54 * var(--u));
  border-radius:50%;object-fit:cover;
  border:calc(2 * var(--u)) solid rgba(212,175,106,.55);
}
.sphere-item .nm{
  font-size:calc(16 * var(--u));color:#FFF3D6;line-height:1.1;white-space:nowrap;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
.sphere-item .dp{
  font-size:calc(12 * var(--u));color:rgba(212,175,106,.6);line-height:1;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}

/* ============================ 场景 3：抽奖 ============================ */
.draw-prize-name{
  font-size:calc(100 * var(--u));font-weight:900;
  margin-top:calc(52 * var(--u));text-align:center;line-height:1.1;
}
.draw-prize-count{
  font-size:calc(29 * var(--u));color:var(--gold-2);margin-top:calc(8 * var(--u));
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
#roll-stage{
  margin-top:calc(26 * var(--u));width:calc(1650 * var(--u));flex:1;
  max-height:calc(600 * var(--u));position:relative;
  display:flex;align-items:center;justify-content:center;gap:calc(42 * var(--u));
}
#slot-rays{
  position:absolute;left:50%;top:50%;
  width:calc(1150 * var(--u));height:calc(520 * var(--u));
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(212,175,106,.16) 0%, rgba(212,175,106,.05) 45%, transparent 72%);
  animation:raysPulse 1.6s ease-in-out infinite;
}
@keyframes raysPulse{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
#slot-cursor{
  position:absolute;top:calc(-28 * var(--u));left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:6;
  border-left:calc(21 * var(--u)) solid transparent;
  border-right:calc(21 * var(--u)) solid transparent;
  border-top:calc(28 * var(--u)) solid #F0D9A8;
  filter:drop-shadow(0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(245,230,196,.9));
  animation:cursorBob .7s ease-in-out infinite;
}
@keyframes cursorBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(calc(10 * var(--u)))}
}
#slot-machine{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:calc(42 * var(--u));z-index:2;
}

/* --- 风格 A：老虎机滚筒（390 = 3 × 130，整除才能无缝循环） --- */
.slot-reel{
  width:calc(250 * var(--u));height:calc(390 * var(--u));
  position:relative;overflow:hidden;border-radius:calc(18 * var(--u));
  background:linear-gradient(180deg,rgba(20,15,8,.92) 0%,rgba(46,35,16,.94) 50%,rgba(20,15,8,.92) 100%);
  border:1.5px solid rgba(212,175,106,.55);
  box-shadow:0 0 calc(34 * var(--u)) rgba(212,175,106,.28),
             inset 0 calc(14 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.65),
             inset 0 calc(-14 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.65);
  flex:0 0 auto;
}
.slot-reel::before,.slot-reel::after{
  content:"";position:absolute;left:0;right:0;
  height:calc(140 * var(--u));z-index:5;pointer-events:none;
}
.slot-reel::before{top:0;background:linear-gradient(180deg,rgba(8,6,3,.94),rgba(8,6,3,.35) 62%,transparent)}
.slot-reel::after{bottom:0;background:linear-gradient(0deg,rgba(8,6,3,.94),rgba(8,6,3,.35) 62%,transparent)}
.slot-reel .reel-line{
  position:absolute;left:4%;right:4%;top:50%;height:calc(130 * var(--u));
  transform:translateY(-50%);
  border-top:2px solid rgba(245,230,196,.75);
  border-bottom:2px solid rgba(245,230,196,.75);
  border-radius:calc(12 * var(--u));z-index:6;pointer-events:none;
  box-shadow:0 0 calc(18 * var(--u)) rgba(245,230,196,.4),
             inset 0 0 calc(22 * var(--u)) rgba(212,175,106,.12);
}
.slot-reel .reel-mask{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:calc(130 * var(--u));z-index:5;pointer-events:none;overflow:hidden;
}
.slot-reel .reel-mask::before,.slot-reel .reel-mask::after{
  content:"";position:absolute;left:0;right:0;height:calc(17 * var(--u));
}
.slot-reel .reel-mask::before{top:0;background:linear-gradient(180deg,rgba(13,10,6,.97),rgba(13,10,6,0))}
.slot-reel .reel-mask::after{bottom:0;background:linear-gradient(0deg,rgba(13,10,6,.97),rgba(13,10,6,0))}
.slot-reel .reel-strip{position:absolute;left:0;top:0;width:100%;will-change:transform;z-index:2}
.slot-cell{
  height:calc(130 * var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(5 * var(--u));overflow:hidden;
}
.slot-cell img{
  width:calc(75 * var(--u));height:calc(75 * var(--u));
  border-radius:50%;object-fit:cover;
  border:calc(2 * var(--u)) solid rgba(212,175,106,.6);
}
.slot-cell .sn{
  font-size:calc(28 * var(--u));font-weight:700;color:#FFF3D6;white-space:nowrap;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  text-shadow:0 0 calc(14 * var(--u)) rgba(245,230,196,.4);
}
.slot-reel.locked{
  animation:reelLock .5s cubic-bezier(.15,1.6,.35,1);border-color:#FFF3D6;
  box-shadow:0 0 calc(60 * var(--u)) rgba(245,230,196,.75),
             inset 0 0 calc(30 * var(--u)) rgba(212,175,106,.3);
}
@keyframes reelLock{
  0%{transform:scale(1)}
  35%{transform:scale(1.09)}
  70%{transform:scale(.97)}
  100%{transform:scale(1)}
}
.slot-reel.locked .reel-line{background:rgba(245,230,196,.16);border-color:#FFF3D6}

/* --- 风格 B：头像飞入 --- */
#slot-machine.fly-mode{gap:calc(46 * var(--u))}
.fly-cell{
  width:calc(250 * var(--u));height:calc(390 * var(--u));position:relative;
  border-radius:calc(18 * var(--u));flex:0 0 auto;
  background:linear-gradient(180deg,rgba(46,35,16,.5),rgba(20,15,8,.65));
  border:1.5px solid rgba(212,175,106,.4);
  box-shadow:0 0 calc(24 * var(--u)) rgba(212,175,106,.18);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.fly-inner{display:flex;flex-direction:column;align-items:center;gap:calc(11 * var(--u));width:100%}
.fly-inner.swap{animation:flySwap .22s ease}
@keyframes flySwap{
  0%{opacity:.25;transform:translateY(calc(-14 * var(--u))) scale(.92)}
  100%{opacity:1;transform:none}
}
.fly-cell.locked{
  border-color:#FFF3D6;
  box-shadow:0 0 calc(60 * var(--u)) rgba(245,230,196,.75),
             inset 0 0 calc(30 * var(--u)) rgba(212,175,106,.3);
  animation:reelLock .5s cubic-bezier(.15,1.6,.35,1);
  background:linear-gradient(180deg,rgba(60,46,20,.9),rgba(30,24,12,.95));
}
.fly-inner img,.flip-face img{
  width:calc(115 * var(--u));height:calc(115 * var(--u));
  border-radius:50%;object-fit:cover;
  border:calc(3 * var(--u)) solid rgba(212,175,106,.7);
}
.fly-inner .sn,.flip-face .sn{
  font-size:calc(35 * var(--u));font-weight:700;color:#FFF3D6;white-space:nowrap;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  text-shadow:0 0 calc(14 * var(--u)) rgba(245,230,196,.4);
  margin-top:calc(6 * var(--u));
}

/* --- 风格 C：星光翻牌 --- */
#slot-machine.flip-mode{gap:calc(46 * var(--u));perspective:calc(1400 * var(--u))}
.flip-cell{width:calc(250 * var(--u));height:calc(390 * var(--u));position:relative;flex:0 0 auto}
.flip-inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,1.4,.5,1);
  border-radius:calc(18 * var(--u));
}
.flip-inner.shuffling{animation:flipShuffle .42s ease-in-out infinite}
@keyframes flipShuffle{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.flip-inner.revealed{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:calc(18 * var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.flip-front{
  background:linear-gradient(160deg,#3a2c12,#1a1409);
  border:1.5px solid rgba(212,175,106,.55);
  font-size:calc(96 * var(--u));font-weight:900;color:rgba(212,175,106,.75);
  text-shadow:0 0 calc(24 * var(--u)) rgba(212,175,106,.5);
}
.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,rgba(60,46,20,.95),rgba(30,24,12,.97));
  border:1.5px solid var(--gold-2);
}
.flip-cell.locked .flip-back{
  border-color:#FFF3D6;
  box-shadow:0 0 calc(60 * var(--u)) rgba(245,230,196,.75),
             inset 0 0 calc(30 * var(--u)) rgba(212,175,106,.3);
}

/* --- 中奖结果卡 --- */
#result-stage{margin-top:calc(38 * var(--u));text-align:center}
.result-title{
  font-size:calc(69 * var(--u));font-weight:900;margin-bottom:calc(32 * var(--u));
  animation:popIn .6s cubic-bezier(.2,1.4,.4,1) backwards;
}
#result-cards{display:flex;justify-content:center;gap:calc(30 * var(--u));flex-wrap:wrap}
.result-card{
  position:relative;z-index:0;
  width:calc(200 * var(--u));padding:calc(20 * var(--u)) calc(14 * var(--u));
  border-radius:calc(18 * var(--u));
  background:linear-gradient(180deg,rgba(60,46,20,.95),rgba(30,24,12,.97));
  border:1.5px solid var(--gold-2);
  box-shadow:0 0 calc(40 * var(--u)) rgba(212,175,106,.45),
             inset 0 0 calc(24 * var(--u)) rgba(212,175,106,.12);
  animation:popIn .7s cubic-bezier(.2,1.4,.4,1) backwards,
            cardGlow 2.6s ease-in-out .8s infinite;
}
@keyframes cardGlow{
  0%,100%{box-shadow:0 0 calc(30 * var(--u)) rgba(212,175,106,.42),
                      inset 0 0 calc(22 * var(--u)) rgba(212,175,106,.10);
          border-color:rgba(212,175,106,.85)}
  50%{box-shadow:0 0 calc(76 * var(--u)) rgba(245,230,196,.8),
                  inset 0 0 calc(36 * var(--u)) rgba(212,175,106,.22);
      border-color:#FFF3D6}
}
.result-card img{
  width:calc(108 * var(--u));height:calc(108 * var(--u));
  border-radius:50%;object-fit:cover;border:calc(3 * var(--u)) solid var(--gold-1);
  animation:avatarPulse 2.6s ease-in-out infinite;
}
@keyframes avatarPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 calc(18 * var(--u)) rgba(245,230,196,.45)}
  50%{transform:scale(1.07);box-shadow:0 0 calc(44 * var(--u)) rgba(245,230,196,.9)}
}
.result-card .rn{
  font-size:calc(33 * var(--u));font-weight:900;margin-top:calc(14 * var(--u));
  background:linear-gradient(100deg,#FFF8E7 24%,#ffffff 46%,#F0D9A8 60%,#FFF8E7 76%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:nameShine 3.2s ease-in-out infinite;
}
@keyframes nameShine{0%{background-position:130% 0}100%{background-position:-40% 0}}
.result-card .rd{
  font-size:calc(19 * var(--u));color:rgba(212,175,106,.8);margin-top:calc(6 * var(--u));
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
@keyframes popIn{
  from{opacity:0;transform:scale(.4) translateY(calc(40 * var(--u)))}
  to{opacity:1;transform:none}
}

/* ============================ 场景 4：中奖榜单 ============================ */
#board-list{
  margin-top:calc(54 * var(--u));display:flex;flex-wrap:wrap;
  gap:calc(23 * var(--u));justify-content:center;
  max-width:calc(1650 * var(--u));max-height:calc(690 * var(--u));overflow:auto;
}
.board-item{
  display:flex;align-items:center;gap:calc(19 * var(--u));
  padding:calc(15 * var(--u)) calc(31 * var(--u));
  border-radius:calc(12 * var(--u));
  background:var(--card-bg);border:1px solid rgba(212,175,106,.3);
  animation:flyIn .5s ease backwards;
}
@keyframes flyIn{
  from{opacity:0;transform:translateY(calc(20 * var(--u)))}
  to{opacity:1;transform:none}
}
.board-item .bp{
  font-size:calc(19 * var(--u));color:var(--gold-2);
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  border:1px solid rgba(212,175,106,.4);
  padding:calc(3 * var(--u)) calc(13 * var(--u));border-radius:99px;
}
.board-item .bn{font-size:calc(29 * var(--u));color:#FFF3D6;font-weight:700}

/* ============================ 弹幕 ============================ */
.dm-item{
  position:absolute;left:100%;display:flex;align-items:center;
  gap:calc(13 * var(--u));white-space:nowrap;
  padding:calc(8 * var(--u)) calc(21 * var(--u));border-radius:99px;
  background:rgba(20,16,10,.42);border:1px solid rgba(212,175,106,.28);
  box-shadow:0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.35);
  animation-name:dmFly;animation-timing-function:linear;animation-fill-mode:forwards;
}
.dm-item img{
  width:calc(44 * var(--u));height:calc(44 * var(--u));
  border-radius:50%;object-fit:cover;
  border:1px solid rgba(212,175,106,.6);
}
.dm-item .dm-name{
  color:#D4AF6A;font-size:calc(22 * var(--u));
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
.dm-item .dm-text{
  color:#FFF3D6;font-size:calc(30 * var(--u));font-weight:700;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  text-shadow:0 0 calc(12 * var(--u)) rgba(245,230,196,.35);
}
/* 弹幕横穿整个舞台：用容器查询单位 100cqw（= 舞台宽度），不依赖视口 */
@keyframes dmFly{to{transform:translateX(calc(-100cqw - 100%))}}

/* ============================ 跑马灯 ============================ */
#ticker{
  position:absolute;bottom:0;left:0;right:0;z-index:50;height:calc(50 * var(--u));
  background:linear-gradient(90deg,rgba(20,15,8,.85),rgba(46,35,16,.78),rgba(20,15,8,.85));
  border-top:1px solid rgba(212,175,106,.35);
  overflow:hidden;display:flex;align-items:center;
}
#ticker-track{
  white-space:nowrap;font-size:calc(22 * var(--u));color:#F0D9A8;letter-spacing:.2em;
  font-family:"Noto Serif SC","Songti SC",sans-serif;
  animation:tickerMove 28s linear infinite;
  padding-left:100%;
}
#ticker-track .sep{margin:0 calc(42 * var(--u));color:rgba(212,175,106,.5)}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ============================ 二维码弹窗 ============================ */
.modal{
  position:absolute;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
}
.modal.active{display:flex}
.modal-card{
  position:relative;
  background:linear-gradient(180deg,#221a0d,#14100a);
  border:1.5px solid var(--gold-2);
  border-radius:calc(20 * var(--u));
  padding:calc(54 * var(--u)) calc(96 * var(--u));
  text-align:center;
  box-shadow:0 0 calc(60 * var(--u)) rgba(212,175,106,.4);
}
.modal-head{
  font-size:calc(38 * var(--u));color:#FFF3D6;
  margin-bottom:calc(27 * var(--u));font-weight:700;
}
#qr-img{
  width:calc(460 * var(--u));height:auto;display:block;margin:0 auto;
  border-radius:calc(12 * var(--u));border:calc(2 * var(--u)) solid var(--gold-2);
}
.modal-hint{
  margin-top:calc(21 * var(--u));font-size:calc(21 * var(--u));
  color:rgba(212,175,106,.8);
  font-family:"Noto Serif SC","Songti SC",sans-serif;
}
.close-btn{
  position:absolute;top:calc(8 * var(--u));right:calc(16 * var(--u));
  font-size:calc(46 * var(--u));color:var(--gold-1);
  cursor:pointer;opacity:.7;line-height:1;
}
.close-btn:hover{opacity:1}

/* ============================ 极窄屏兜底 ============================ */
@media (max-aspect-ratio: 1/1){
  /* 竖屏/方屏：内容按宽度缩放，字号间距略收紧，避免拥挤 */
  :root{ --u: min(100vw / 1920, 100dvh / 1080); }
  .brand-company{letter-spacing:.3em}
  .gala-subtitle{letter-spacing:.25em}
  .welcome-word{letter-spacing:.2em}
}


/* ============================================================
   抽奖场景 · 环形光墙（DRAW_STYLE = arc）
   视觉：弧形排列的头像墙 + 中央悬浮奖品 + 洗牌式滚动
   ---- 全部新样式挂 .arc-mode / #arc-wall / #prize-float，
        不影响原 slot / fly / flip 三种风格 ----
   ============================================================ */

/* ---- 弧形头像墙 ---- */
#arc-wall{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none;
  perspective:calc(1500 * var(--u));
  perspective-origin:50% 44%;
}
/* 中心暗场：让中央奖品跳出来，前景卡片退到后面 */
#arc-wall::before{
  content:""; position:absolute; inset:0; z-index:200; pointer-events:none;
  background:radial-gradient(ellipse 40% 34% at 50% 44%,
    rgba(7,4,2,.98) 0%, rgba(7,4,2,.94) 40%,
    rgba(7,4,2,.60) 64%, transparent 82%);
}
/* 底部压暗，给跑马灯和提示留干净区域 */
#arc-wall::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:calc(230 * var(--u)); z-index:201; pointer-events:none;
  background:
    /* 地面光池：中央一片暖色反光，像站在打蜡地板上 */
    radial-gradient(ellipse 64% 86% at 50% 100%,
      rgba(255,236,180,.15) 0%, rgba(212,175,106,.07) 40%, transparent 72%),
    /* 墙脚暗线：墙与地面的交界处压一道暗，立体感的关键 */
    linear-gradient(to top, rgba(4,3,1,.55) 0%, rgba(4,3,1,.16) 9%, transparent 20%),
    /* 整体压暗（比原来轻，否则倒影看不见） */
    linear-gradient(to top, rgba(6,4,2,.48), rgba(6,4,2,.20) 50%, transparent 84%);
}

#arc-wall .arc-card{
  position:absolute; left:0; top:0;
  width:calc(132 * var(--u)); height:calc(170 * var(--u));
  margin-left:calc(-66 * var(--u)); margin-top:calc(-85 * var(--u));
  border-radius:calc(10 * var(--u));
  background:linear-gradient(180deg, rgba(54,43,21,.97), rgba(19,15,8,.99));
  border:1px solid rgba(212,175,106,.32);
  box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.65);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(4 * var(--u));
  overflow:hidden;
  will-change:transform,opacity;
  transform-style:preserve-3d;
  transition:box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
}
#arc-wall .arc-card img{
  width:calc(98 * var(--u)); height:calc(98 * var(--u));
  border-radius:calc(8 * var(--u)); object-fit:cover;
  border:1px solid rgba(212,175,106,.42);
  background:rgba(0,0,0,.35);
}
#arc-wall .arc-card .nm{
  font-size:calc(17 * var(--u)); color:#FFF3D6; line-height:1.1;
  max-width:calc(120 * var(--u)); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-align:center;
}

/* 洗牌中：随机卡片爆亮，制造"头像在飞"的错觉 */
#arc-wall.rolling .arc-card.hot{
  border-color:#F5E6C4;
  box-shadow:0 0 calc(30 * var(--u)) rgba(245,230,196,.85),
             inset 0 0 calc(14 * var(--u)) rgba(245,230,196,.30);
}
#arc-wall.rolling .arc-card.hot img{
  border-color:#FFF8E7;
  filter:brightness(1.28) saturate(1.15);
}

/* 中奖者定格：金色描边 + 呼吸光 */
#arc-wall .arc-card.won{
  border-color:#FFE9B0;
  box-shadow:0 0 calc(48 * var(--u)) rgba(245,230,196,.95),
             inset 0 0 calc(20 * var(--u)) rgba(245,230,196,.35);
  animation:arcWon 1.6s ease-in-out infinite;
  z-index:2;
}
#arc-wall .arc-card.won img{ border-color:#FFF8E7; }
@keyframes arcWon{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.22) }
}

/* 落选卡片在开奖后整体压暗，聚焦中奖者 */
#arc-wall.settled .arc-card:not(.won){
  opacity:.30;
  filter:grayscale(.55) brightness(.7);
}

/* ---- 中央悬浮奖品 ---- */
#prize-float{
  position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%);
  z-index:220; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
}
#prize-float .pf-inner{
  position:relative;
  width:calc(640 * var(--u)); height:calc(640 * var(--u));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:pfFloat 4s ease-in-out infinite;
}
/* 外圈光晕 */
#prize-float .pf-halo{
  position:absolute; left:50%; top:46%;
  width:calc(580 * var(--u)); height:calc(580 * var(--u));
  margin-left:calc(-290 * var(--u)); margin-top:calc(-290 * var(--u));
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,236,180,.30) 0%, rgba(212,175,106,.18) 34%,
    rgba(212,175,106,.06) 56%, transparent 72%);
  animation:pfBreath 3.4s ease-in-out infinite;
}
/* 旋转光芒 */
#prize-float .pf-rays{
  position:absolute; left:50%; top:46%;
  width:calc(700 * var(--u)); height:calc(700 * var(--u));
  margin-left:calc(-350 * var(--u)); margin-top:calc(-350 * var(--u));
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,236,180,.20) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask-image:radial-gradient(circle, transparent 26%, #000 40%, #000 62%, transparent 76%);
  mask-image:radial-gradient(circle, transparent 26%, #000 40%, #000 62%, transparent 76%);
  animation:pfSpin 26s linear infinite;
  opacity:.55;
}
/* 双发光环 */
#prize-float .pf-ring{
  position:absolute; left:50%; top:46%;
  width:calc(440 * var(--u)); height:calc(440 * var(--u));
  margin-left:calc(-220 * var(--u)); margin-top:calc(-220 * var(--u));
  border-radius:50%;
  border:calc(2 * var(--u)) solid rgba(255,240,200,.82);
  box-shadow:0 0 calc(56 * var(--u)) rgba(245,230,196,.80),
             inset 0 0 calc(38 * var(--u)) rgba(212,175,106,.50);
}
#prize-float .pf-ring.two{
  width:calc(520 * var(--u)); height:calc(520 * var(--u));
  margin-left:calc(-260 * var(--u)); margin-top:calc(-260 * var(--u));
  border:calc(1 * var(--u)) dashed rgba(255,236,180,.35);
  box-shadow:none;
  animation:pfSpin 40s linear infinite reverse;
}
/* 礼盒 */
#prize-float .pf-box{
  position:relative; z-index:2;
  width:calc(300 * var(--u)); height:calc(300 * var(--u));
  filter:drop-shadow(0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(255,200,90,.55));
  animation:pfBox 4s ease-in-out infinite;
}
#prize-float .pf-box svg{ width:100%; height:100%; display:block }
/* 奖项名 */
#prize-float .pf-name{
  position:relative; z-index:2;
  margin-top:calc(-6 * var(--u));
  font-size:calc(96 * var(--u)); font-weight:900; line-height:1.1;
  letter-spacing:calc(4 * var(--u));
  background:linear-gradient(100deg,#FFF8E7 18%,#ffffff 38%,#F0D9A8 56%,#FFF8E7 78%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:nameShine 3.4s ease-in-out infinite;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.85));
  text-align:center;
}
#prize-float .pf-sub{
  position:relative; z-index:2;
  margin-top:calc(10 * var(--u));
  font-size:calc(30 * var(--u)); color:rgba(245,230,196,.88);
  letter-spacing:.18em;
  text-shadow:0 0 calc(16 * var(--u)) rgba(0,0,0,.8);
}

@keyframes pfFloat{
  0%,100%{ transform:translateY(calc(-12 * var(--u))) }
  50%    { transform:translateY(calc(12 * var(--u))) }
}
@keyframes pfBox{
  0%,100%{ transform:rotate(-3deg) scale(1) }
  50%    { transform:rotate(3deg) scale(1.04) }
}
@keyframes pfBreath{
  0%,100%{ opacity:.62; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.09) }
}
@keyframes pfSpin{ to{ transform:rotate(360deg) } }

/* ---- arc 模式下隐藏旧的三种滚动容器 ---- */
#scene-draw.arc-mode #roll-stage{ display:none }
/* 结果卡在 arc 模式下浮到中央，代替原来的流式布局 */
#scene-draw.arc-mode #result-stage{
  position:absolute; left:50%; top:47%;
  transform:translate(-50%,-50%);
  margin:0; z-index:230;
}
#scene-draw.arc-mode .result-title{
  font-size:calc(62 * var(--u)); margin-bottom:calc(44 * var(--u));
  text-shadow:0 calc(4 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.9);
}
#scene-draw.arc-mode .result-card{
  width:calc(240 * var(--u));
  background:linear-gradient(180deg,#4A3818 0%,#241B0C 62%,#1B1409 100%);
  border:calc(2 * var(--u)) solid rgba(240,217,168,.92);
  box-shadow:0 0 calc(70 * var(--u)) rgba(245,230,196,.72),
             0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0,0,0,.75),
             inset 0 0 calc(30 * var(--u)) rgba(212,175,106,.22);
}
#scene-draw.arc-mode .result-card img{
  width:calc(146 * var(--u)); height:calc(146 * var(--u));
}
#scene-draw.arc-mode .result-card .rn{ font-size:calc(40 * var(--u)) }
/* arc 模式下顶部奖项名不占位（信息已在中央） */
#scene-draw.arc-mode .draw-prize-name,
#scene-draw.arc-mode .draw-prize-count,
#scene-draw.arc-mode #brand-logo-draw{ display:none }

/* ---- 地面镜面倒影 ----
   box-reflect 直接复制卡片的渲染结果（含 rotateY/scale），零 DOM 开销。
   Chrome / Edge 支持；不支持的浏览器只是没有倒影，其余效果不受影响。 */
#arc-wall .arc-card.arc-mirror{
  -webkit-box-reflect: below calc(3 * var(--u))
    linear-gradient(to bottom,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.20) 22%,
      rgba(0,0,0,.08) 44%,
      rgba(0,0,0,.015) 60%,
      rgba(0,0,0,0) 68%);
}