/* 直播间样式实验室 — 展示页共用样式（bg / fg / preview） */
@font-face{font-family:"Smiley Sans";src:url(/fonts/SmileySans-Oblique.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Source Han Sans CN";font-weight:900;src:url(/fonts/SourceHanSansCN-Heavy.woff2) format("woff2");font-display:swap}
:root{
  --wine:#3D060C;--cinnabar:#8E1420;--gold:#E9C98B;--gold2:#FBE3B4;--cream:#FFF3E2;
  --mute:rgba(255,243,226,.62);--rule:rgba(233,201,139,.45);--glass:rgba(45,4,10,.5);
  --title:"Smiley Sans","Source Han Sans CN",sans-serif;
  --heavy:"Source Han Sans CN","PingFang SC",sans-serif;
  --ui:-apple-system,"PingFang SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0}
body{font-family:var(--ui)}

/* 画布：1080×1920，内部按 440×956 设计坐标等比缩放并水平居中 */
.stage{position:relative;width:1080px;height:1920px;overflow:hidden;background:#3D060C}
.phone{position:absolute;left:0;top:0;width:440px;height:956px;overflow:hidden;color:var(--cream);background:#3a0610;
  transform-origin:0 0}
/* fit=preview 时由 JS 设定 .fitwrap 布局尺寸并缩放 .stage 适配窗口 */
.fitwrap{position:relative}
body.fit{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#111}

/* 主题 A 的纸纹覆盖层（代替 .phone::after，便于按主题开关） */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}

/* ===== 以下为设计稿原有样式（v10 三版布局一致） ===== */
.shade{position:absolute;inset:0}
.motif{position:absolute;inset:0;width:440px;height:956px;pointer-events:none}
.motif .ico{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.22}
.motif .trace{fill:none;stroke:var(--gold);stroke-width:1;opacity:.16}.motif .trace circle{fill:var(--gold)}
.motif .pulse{fill:none;stroke:#FFE2B8;stroke-width:1.6;stroke-linecap:round}
.motif .pulse path{stroke-dasharray:14 600;stroke-dashoffset:14;opacity:0;animation:pulse 32s linear infinite}
.motif .pulse .pd1{animation-delay:1s}.motif .pulse .pd9{animation-delay:9s}
.motif .pulse .pd17{animation-delay:17s}.motif .pulse .pd25{animation-delay:25s}
.fxo6{opacity:.6}.fxo7{opacity:.7}.fxo8{opacity:.8}.fxo9{opacity:.9}
@keyframes pulse{0%{stroke-dashoffset:14;opacity:0}1%{opacity:.7}9%{stroke-dashoffset:-260;opacity:.7}10%,100%{stroke-dashoffset:-260;opacity:0}}
.a-rocket{transform-box:fill-box;animation:launch 22s cubic-bezier(.5,0,.9,.4) infinite 4s}
.a-trail{stroke-dasharray:60;stroke-dashoffset:60;opacity:0;animation:trail 22s linear infinite 4s}
@keyframes launch{0%,70%{transform:translateY(0);opacity:1}72%{transform:translateY(2px)}73%{transform:translateY(-1px)}84%{transform:translateY(-640px);opacity:0}85%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes trail{0%,72%{stroke-dashoffset:60;opacity:0}74%{stroke-dashoffset:0;opacity:.9}84%{stroke-dashoffset:0;opacity:0}100%{opacity:0}}
.a-core{fill:#FFE2B8;stroke:none;opacity:0;animation:core 14s ease-in-out infinite 2s}
@keyframes core{0%,80%,100%{opacity:0}86%{opacity:.8}92%{opacity:0}}
.a-dots circle{fill:#FFE2B8;stroke:none;opacity:0;animation:dot 16s ease-in-out infinite}
.a-dots circle:nth-child(1){animation-delay:6s}.a-dots circle:nth-child(2){animation-delay:6.3s}.a-dots circle:nth-child(3){animation-delay:6.6s}.a-dots circle:nth-child(4){animation-delay:6.9s}
@keyframes dot{0%,90%,100%{opacity:0}93%{opacity:1}}
.a-bolt{fill:#FFE2B8;stroke:none;opacity:0;animation:charge 18s ease-in-out infinite 11s}
@keyframes charge{0%,82%,100%{opacity:0}85%{opacity:.8}87%{opacity:.2}89%{opacity:.8}94%{opacity:0}}
.a-eyes circle{fill:#FFE2B8;stroke:none;transform-box:fill-box;transform-origin:center;opacity:0;animation:blink 12s ease-in-out infinite 8s}
@keyframes blink{0%,86%,100%{opacity:0;transform:scaleY(1)}88%{opacity:.9}90%{transform:scaleY(.1)}92%{transform:scaleY(1);opacity:.9}96%{opacity:0}}
.a-k{transform-box:fill-box;transform-origin:bottom;animation:kgrow 20s ease-in-out infinite 14s}
@keyframes kgrow{0%,85%,100%{transform:scaleY(1)}90%{transform:scaleY(1.25)}95%{transform:scaleY(1)}}
.a-jet{transform-box:fill-box;animation:jet 26s ease-in-out infinite 18s}
@keyframes jet{0%,80%,100%{transform:translate(0,0)}88%{transform:translate(-10px,-14px)}96%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.motif *{animation:none!important}}
.bgart{position:absolute;inset:0;width:440px;height:956px;pointer-events:none}
.rise{position:absolute;left:0;top:560px;width:440px;height:200px;opacity:.35}

.title{position:absolute;top:112px;left:0;right:0;text-align:center;font-family:var(--title);font-size:40px;line-height:1.1;
  letter-spacing:.02em;color:var(--cream);text-shadow:0 3px 0 rgba(90,10,20,.55),0 8px 24px rgba(40,4,10,.45);z-index:1}
.title em{font-style:normal;color:var(--gold2)}

.screen{position:absolute;top:170px;left:14px;width:412px;height:232px;border-radius:14px;overflow:hidden;background:rgba(28,4,9,.38);
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 62%,transparent 100%)}
.screen svg{position:absolute;inset:0;width:100%;height:100%}

.judge{position:absolute;top:410px;left:6%;width:88%;height:34px;display:grid;place-items:center;text-align:center;z-index:3;
  font:900 22px var(--heavy);color:var(--cream);letter-spacing:.04em;text-shadow:0 2px 10px rgba(40,4,10,.6);perspective:600px}
.judge .j{grid-area:1/1;position:relative;padding:0 14px;white-space:nowrap}
.judge .j i{position:absolute;left:0;top:10%;height:80%;width:3px;background:#f0c48a}
.j.in{animation:jin .62s cubic-bezier(.2,.8,.2,1) both}.j.out{animation:jout .35s ease both}
@keyframes jin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes jout{to{opacity:0;transform:translateY(-10px)}}
.dots{position:absolute;top:448px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:3}
.dots i{width:5px;height:5px;border-radius:9px;background:var(--cream);opacity:.3;transition:width .45s}
.dots i.on{width:20px;opacity:.9}

.glow{position:absolute;left:80px;top:440px;width:280px;height:220px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,196,150,.28),transparent 68%)}
.host{position:absolute;left:39px;top:432px;width:380px;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 98%)}

.side{position:absolute;top:478px;width:108px;height:150px;padding:9px 10px;border-radius:10px;background:var(--glass);
  border:1px solid var(--rule);backdrop-filter:blur(6px)}
.side.l{left:14px}.side.r{right:14px}
.side>*{animation:cardIn .35s ease}@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quote{height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;font:900 16px/1.4 var(--heavy);color:var(--cream);letter-spacing:.02em;white-space:nowrap}
.quote p{margin:0}.quote p:first-child{margin-left:-8px}
.quote .o,.quote .c{color:var(--gold)}
.thermo{margin-top:6px;display:flex;gap:10px;align-items:stretch}
.thermo .tube{position:relative;width:8px;height:96px;border-radius:6px;background:linear-gradient(180deg,#FF8A6E,var(--gold) 50%,rgba(255,240,221,.35))}
.thermo .tube i{position:absolute;left:-4px;width:16px;height:16px;border-radius:50%;background:var(--cream);border:3px solid var(--wine);box-shadow:0 0 8px var(--gold);transform:translateY(-50%)}
.thermo .info{display:flex;flex-direction:column;justify-content:space-between;font:11px var(--ui);color:var(--mute)}
.thermo .info b{display:block;font:900 22px var(--heavy);color:var(--cream);letter-spacing:.06em}
.side .k{font:600 10px var(--ui);color:var(--gold);letter-spacing:.2em}
.side .big{font:900 18px var(--heavy);margin-top:4px;letter-spacing:.02em}
.side .chg{font:900 13px var(--heavy);color:var(--gold2)}
.gauge{position:relative;margin-top:8px;padding-left:14px;display:flex;flex-direction:column;gap:7px}
.gauge::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),rgba(244,199,156,.15))}
.gauge span{position:relative;font:12px var(--ui);color:var(--mute)}
.gauge span::before{content:"";position:absolute;left:-13px;top:6px;width:6px;height:2px;background:rgba(244,199,156,.5)}
.gauge .on{color:var(--cream);font:900 14px var(--heavy)}
.gauge .on::before{left:-15px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.odds{margin-top:5px}
.odds b{font:900 16px/1.2 var(--heavy);color:var(--gold2)}
.odds em{display:block;height:4px;border-radius:2px;margin:3px 0 3px;background:linear-gradient(90deg,var(--gold) var(--w),rgba(255,240,221,.12) var(--w))}
.odds small{display:block;font:11px/1.3 var(--ui);color:var(--cream)}
.odds.dim b{color:var(--mute)}.odds.dim small{color:var(--mute)}
.steps{margin-top:6px;display:flex;flex-direction:column;gap:5px}
.steps span{font:14px var(--ui);color:var(--mute);display:flex;align-items:center;gap:6px}
.steps span::before{content:"";width:5px;height:5px;border-radius:50%;border:1px solid var(--gold)}
.steps .on{color:var(--cream);font-weight:700}
.steps .on::before{background:var(--gold);box-shadow:0 0 6px var(--gold)}

.risk{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:8.5px/1.45 var(--ui);letter-spacing:.04em;color:rgba(255,240,221,.5);z-index:2}

/* 抖音平台示意层（仅预览页） */
.ui{position:absolute;inset:0;pointer-events:none}
.status{position:absolute;top:14px;left:34px;right:26px;display:flex;justify-content:space-between;font-weight:600;font-size:17px}
.anchor{position:absolute;top:56px;left:12px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border-radius:22px;padding:3px 4px 3px 3px}
.anchor .av{width:34px;height:34px;border-radius:50%;background:url(/assets/host.png) 48% 8%/130px no-repeat,#333}
.anchor div{font-size:13px;font-weight:600;line-height:1.2}
.anchor small{display:block;font-size:10px;opacity:.75;font-weight:400}
.anchor .fl{margin-left:4px;background:#FE2C55;border-radius:14px;padding:5px 10px;font-size:12px}
.viewers{position:absolute;top:64px;right:14px;display:flex;align-items:center;gap:10px;font-size:13px}
.viewers i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.28);margin-left:-8px}
.ui-x{font-size:18px}
.comments{position:absolute;left:10px;bottom:84px;width:300px;display:flex;flex-direction:column;gap:5px}
.comments p{align-self:flex-start;background:rgba(0,0,0,.24);border-radius:12px;padding:4px 10px;font-size:14px;line-height:1.35;color:#fff}
.comments p span{color:#A9C7FF;margin-right:4px}
.comments .sys{background:none;padding:0 2px;font-size:13px;color:rgba(255,255,255,.85)}
.comments .enter{background:none;color:rgba(255,255,255,.8)}
.bar{position:absolute;left:10px;right:10px;bottom:32px;display:flex;align-items:center;gap:10px}
.bar .in{flex:1;background:rgba(0,0,0,.28);border-radius:20px;padding:9px 14px;font-size:14px;color:rgba(255,255,255,.7)}
.bar i{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.28)}
.noui .ui{display:none}
.toggle{position:absolute;z-index:9;right:24px;top:376px;background:rgba(0,0,0,.45);color:#ddd;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:2px 8px;font:10px var(--ui);cursor:pointer}

/* 前景层专用：全透明 */
body.fg,body.fg .stage,body.fg .phone{background:transparent}
/* OBS 浏览器源无法模糊下层的摄像头画面，前景卡片改用更实的底色保证可读 */
body.fg .side{background:rgba(45,4,10,.72);backdrop-filter:none}