/* 抽赏机台 · 前台共享样式
   风格: html[data-theme="default"] 默认风格 / "fire" 火焰小孩 / "dark" 暗黑风
   各页面通过下面的颜色变量取色; 登录/大厅/房间页对非默认风格另有覆盖(见文末)
   body 带 pg-index / pg-login / pg-lobby / pg-room 区分页面 */

/* ================= 手机交互: 点按文字不选中、不出灰色点击块; 输入框仍可选中编辑 ================= */
html{-webkit-tap-highlight-color:transparent}
/* 写在每个元素上(不靠继承): 部分手机浏览器 / 小程序内置浏览器只认元素自身的设置, 长按文字会弹出「复制 / 搜索」菜单 */
*,*::before,*::after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none}
input,textarea,select,[contenteditable],input *,textarea *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ================= 颜色变量 ================= */
:root{
  --bg:linear-gradient(180deg,#e94f6a 0%,#f27a5e 40%,#fbb03b 100%); --bg-solid:#f27a5e;
  --c-on-bg:#fff; --c-top:rgba(0,0,0,.14); --c-top-line:transparent;
  --c-title:linear-gradient(180deg,#fff,#fff); --c-title-glow:rgba(0,0,0,.25);
  --c-hero:radial-gradient(circle at 50% 42%,rgba(255,255,255,.42),rgba(255,255,255,.08) 68%,transparent 80%);
  --c-card:#fff; --c-card2:#fff5f3; --c-text:#333; --c-sub:#999; --c-line:#f1f2f6;
  --c-accent:#e94f6a; --c-accent2:#f27a5e; --c-chip:#fff1ee; --c-gold:#f59e0b;
  --c-multi:linear-gradient(90deg,#f59e0b,#ef4444); --c-multi-text:#fff;
  --c-mask:rgba(0,0,0,.55); --c-cancel:#f5f6fa; --c-cancel-text:#666; --c-btn-text:#fff;
  --c-border:transparent; --c-glow:none;
  --c-shadow:0 18px 50px rgba(0,0,0,.25);
}
html[data-theme="fire"]{
  --bg:radial-gradient(ellipse 90% 45% at 50% -8%,rgba(255,120,30,.55),transparent 60%),
       radial-gradient(ellipse 60% 40% at 105% 100%,rgba(210,30,10,.45),transparent 60%),
       radial-gradient(ellipse 55% 35% at -5% 75%,rgba(255,90,0,.28),transparent 60%),
       linear-gradient(180deg,#2a0b06 0%,#140605 45%,#0d0404 100%);
  --bg-solid:#120605;
  --c-on-bg:#fbe8cf; --c-top:rgba(30,8,5,.96); --c-top-line:rgba(255,190,90,.35);
  --c-title:linear-gradient(180deg,#fff4bf 0%,#ffc247 45%,#ff6a00 100%); --c-title-glow:rgba(255,90,0,.7);
  --c-hero:radial-gradient(ellipse at 50% 100%,rgba(255,90,0,.5),rgba(60,12,6,.35) 60%,transparent 80%);
  --c-card:#1d0b07; --c-card2:#2a0f09; --c-text:#fbe8cf; --c-sub:#c7a585; --c-line:rgba(255,190,90,.22);
  --c-accent:#ff6a00; --c-accent2:#d81e06; --c-chip:rgba(255,120,30,.16); --c-gold:#ffd36b;
  --c-multi:linear-gradient(180deg,#ffe48f 0%,#ffb52b 55%,#ff7a00 100%); --c-multi-text:#4a1300;
  --c-mask:rgba(8,2,1,.74); --c-cancel:rgba(255,255,255,.08); --c-cancel-text:#e8cfae; --c-btn-text:#fff8e6;
  --c-border:rgba(255,190,90,.4); --c-glow:0 0 16px rgba(255,90,0,.45);
  --c-shadow:0 0 0 1px rgba(255,190,90,.35),0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(255,80,0,.18);
  --x-particle1:#ffb347; --x-particle2:#ff7a1a; --x-particle3:#ffd36b;
}
html[data-theme="dark"]{
  --bg:radial-gradient(circle at 50% 10%,rgba(236,232,220,.20),transparent 42%),
       radial-gradient(ellipse 70% 30% at 50% 100%,rgba(120,20,26,.22),transparent 70%),
       linear-gradient(180deg,#141416 0%,#0b0b0c 55%,#060607 100%);
  --bg-solid:#0b0b0c;
  --c-on-bg:#e9e5da; --c-top:rgba(10,10,12,.96); --c-top-line:rgba(220,210,190,.22);
  --c-title:linear-gradient(180deg,#ffffff 0%,#e4dfd2 55%,#9c968a 100%); --c-title-glow:rgba(255,255,255,.28);
  --c-hero:radial-gradient(circle at 50% 36%,rgba(240,236,224,.30),rgba(30,30,34,.25) 52%,transparent 74%);
  --c-card:#141416; --c-card2:#1c1c1f; --c-text:#e9e5da; --c-sub:#8f8a7e; --c-line:rgba(220,210,190,.18);
  --c-accent:#b3262e; --c-accent2:#6e0f14; --c-chip:rgba(179,38,46,.2); --c-gold:#d8c7a0;
  --c-multi:linear-gradient(180deg,#f2ede0 0%,#c9c2b1 60%,#8f897c 100%); --c-multi-text:#141416;
  --c-mask:rgba(0,0,0,.78); --c-cancel:rgba(255,255,255,.07); --c-cancel-text:#cfc9bb; --c-btn-text:#f5f1e6;
  --c-border:rgba(220,210,190,.32); --c-glow:0 0 14px rgba(240,236,224,.18);
  --c-shadow:0 0 0 1px rgba(220,210,190,.25),0 18px 50px rgba(0,0,0,.75);
  --x-particle1:#ffffff; --x-particle2:#d9d4c7; --x-particle3:#b3262e;
}
/* 挖矿小孩: 金矿洞穴的深褐 + 金块的金色 + 小孩衣服的中国红 */
html[data-theme="miner"],html[data-theme="miner2"],html[data-theme="miner3"]{
  --bg:linear-gradient(180deg,rgba(14,8,4,.80) 0%,rgba(14,8,4,.90) 45%,rgba(10,6,3,.97) 100%),
       url(/game/assets/img/miner_bg.jpg) center top/cover no-repeat,#120a05;
  --bg-solid:#120a05;
  --c-on-bg:#f6e7c8; --c-top:rgba(26,14,6,.97); --c-top-line:rgba(255,200,90,.35);
  --c-title:linear-gradient(180deg,#fff7cf 0%,#ffd75e 45%,#e79a12 100%); --c-title-glow:rgba(255,170,30,.65);
  --c-hero:#1a0f07;
  --c-card:#1c130b; --c-card2:#271a0f; --c-text:#f6e7c8; --c-sub:#c8a876; --c-line:rgba(255,200,90,.2);
  --c-accent:#e0342b; --c-accent2:#9a1513; --c-chip:rgba(255,190,60,.14); --c-gold:#ffd04d;
  --c-multi:linear-gradient(180deg,#fff0a8 0%,#ffcb3d 50%,#e8960c 100%); --c-multi-text:#4a2200;
  --c-mask:rgba(8,4,2,.76); --c-cancel:rgba(255,255,255,.08); --c-cancel-text:#ead5b0; --c-btn-text:#fff8e6;
  --c-border:rgba(255,200,90,.42); --c-glow:0 0 16px rgba(255,170,40,.32);
  --c-shadow:0 0 0 1px rgba(255,200,90,.35),0 18px 50px rgba(0,0,0,.65),0 0 30px rgba(255,170,40,.16);
  --x-particle1:#ffd75e; --x-particle2:#ffb02e; --x-particle3:#fff2b0;
}
/* 奥黛: 夜晚房间的深紫蓝 + 白纱淡紫 + 台灯暖金 */
html[data-theme="aodai"]{
  --bg:linear-gradient(180deg,rgba(16,12,32,.80) 0%,rgba(16,12,32,.90) 45%,rgba(10,8,22,.97) 100%),
       url(/game/assets/img/aodai_bg.jpg) center top/cover no-repeat,#120f22;
  --bg-solid:#141126;
  --c-on-bg:#f3ecff; --c-top:rgba(22,17,40,.97); --c-top-line:rgba(214,180,255,.32);
  --c-title:linear-gradient(180deg,#ffffff 0%,#f1dcff 45%,#c99bff 100%); --c-title-glow:rgba(200,150,255,.6);
  --c-hero:#1a1630;
  --c-card:#1d1933; --c-card2:#262140; --c-text:#f3ecff; --c-sub:#b9a9d6; --c-line:rgba(214,180,255,.18);
  --c-accent:#b57bff; --c-accent2:#7b46c9; --c-chip:rgba(200,160,255,.14); --c-gold:#ffd98c;
  --c-multi:linear-gradient(180deg,#ffeec4 0%,#ffd27f 50%,#e9a649 100%); --c-multi-text:#4a2a00;
  --c-mask:rgba(8,6,18,.78); --c-cancel:rgba(255,255,255,.08); --c-cancel-text:#e6dcf7; --c-btn-text:#fff;
  --c-border:rgba(214,180,255,.38); --c-glow:0 0 16px rgba(190,140,255,.3);
  --c-shadow:0 0 0 1px rgba(214,180,255,.3),0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(190,140,255,.15);
  --x-particle1:#ffd6f2; --x-particle2:#f3c6ff; --x-particle3:#ffffff;
}

/* ================= 弹窗组件 ================= */
.ui-mask{position:fixed;inset:0;background:var(--c-mask);display:flex;align-items:center;justify-content:center;z-index:1000;padding:22px;opacity:0;transition:opacity .18s}
.ui-mask.ui-on{opacity:1}
.ui-dialog{width:100%;max-width:330px;background:var(--c-card);color:var(--c-text);border-radius:20px;padding:24px 20px 18px;text-align:center;box-shadow:var(--c-shadow);transform:scale(.88);transition:transform .2s cubic-bezier(.2,1.3,.4,1)}
.ui-mask.ui-on .ui-dialog{transform:scale(1)}
.ui-icon{font-size:38px;line-height:1;margin-bottom:8px}
.ui-title{font-size:17px;font-weight:900;margin-bottom:8px;color:var(--c-text)}
.ui-msg{font-size:14px;line-height:1.7;color:var(--c-sub);word-break:break-word;text-align:left;display:inline-block;max-width:100%;max-height:62vh;overflow-y:auto}
.ui-input{width:100%;height:84px;margin-top:12px;border:1.5px solid var(--c-line);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit;resize:none;outline:none;background:transparent;color:var(--c-text)}
.ui-input:focus{border-color:var(--c-accent)}
.ui-btns{display:flex;gap:10px;margin-top:18px}
.ui-btn{flex:1;height:44px;border:0;border-radius:22px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.ui-ok{background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));color:var(--c-btn-text);box-shadow:var(--c-glow)}
.ui-cancel{background:var(--c-cancel);color:var(--c-cancel-text)}
.ui-danger .ui-ok{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.ui-toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-8px);background:rgba(17,24,39,.92);color:#fff;padding:10px 18px;border-radius:12px;font-size:13px;z-index:1100;opacity:0;transition:.22s;pointer-events:none;max-width:86vw;text-align:center}
.ui-toast.ui-on{opacity:1;transform:translate(-50%,0)}
html:not([data-theme="default"]) .ui-toast{background:var(--c-card2);border:1px solid var(--c-border);color:var(--c-text);box-shadow:var(--c-glow)}
html:not([data-theme="default"]) .ui-ok{border:1px solid var(--c-border)}
html:not([data-theme="default"]) .ui-title{background:var(--c-title);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ================= 背包面板 ================= */
.bag-mask{position:fixed;inset:0;background:var(--c-mask);z-index:200;display:none;align-items:flex-end;justify-content:center}
.bag-mask.on{display:flex}
.bag{width:100%;max-width:640px;height:88vh;height:88dvh;background:var(--c-card);color:var(--c-text);border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:var(--c-shadow);animation:bagUp .25s ease-out}
@keyframes bagUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.bag-head{display:flex;align-items:center;padding:14px 16px 8px}
.bag-head b{font-size:17px}
.bag-head .x{margin-left:auto;font-size:24px;line-height:1;cursor:pointer;color:var(--c-sub);padding:0 4px}
/* 背包标题旁: 淘宝 OpenID(未设置时可点「设置」) */
.bag-oid{margin-left:auto;display:flex;align-items:center;gap:4px;min-width:0;max-width:62%;font-size:11.5px;color:var(--c-sub);padding:3px 4px 3px 10px;border-radius:12px;background:var(--c-chip)}
.bag-oid:empty{display:none}
.bag-head .bag-oid b{font-size:12px;letter-spacing:0;color:var(--c-text);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background:none;-webkit-text-fill-color:currentColor;filter:none}
.bag-oid i{font-style:normal}
.bag-oid u{text-decoration:none;cursor:pointer;font-weight:900;color:var(--c-btn-text);padding:2px 9px;border-radius:9px;background:linear-gradient(180deg,var(--c-accent),var(--c-accent2))}
.bag-oid + .x{margin-left:6px}
.bag-tabs{display:flex;gap:6px;padding:4px 14px 10px}
.bag-tabs div{flex:1;min-width:0;white-space:nowrap;text-align:center;padding:9px 0;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;color:var(--c-sub);background:var(--c-cancel)}
.bag-tabs div span{font-size:11px;font-weight:600;margin-left:3px}
.bag-tabs div.on{background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));color:var(--c-btn-text)}
.bag-tools{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;font-size:12px;color:var(--c-sub)}
.bag-tools label{display:flex;align-items:center;gap:5px;cursor:pointer}
.bag-body{flex:1;overflow:auto;padding:4px 14px 14px}
.bag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.bag-item{position:relative;border:2px solid var(--c-line);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--c-card);transition:.15s}
.bag-item.sel{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-chip)}
.bag-item .im{height:88px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#ff9a8b,#fecfef);overflow:hidden}
.bag-item .im img{width:100%;height:100%;object-fit:cover}
.bag-item .nm{font-size:12px;font-weight:800;padding:5px 7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-item .mt{font-size:10px;color:var(--c-sub);padding:1px 7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-item .ck{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900}
.bag-item.sel .ck{background:var(--c-accent);border-color:var(--c-accent)}
.bag-item .tg{position:absolute;top:6px;left:6px;font-size:10px;font-weight:800;color:#fff;padding:2px 7px;border-radius:9px;background:rgba(0,0,0,.55)}
.bag-item .tg.pts{background:linear-gradient(135deg,#8b5cf6,#6366f1)}
.bag-item .tg.lock{background:linear-gradient(135deg,#f59e0b,#d97706)}
.bag-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px dashed var(--c-line)}
.bag-row .im{width:46px;height:46px;border-radius:10px;flex:none;background:linear-gradient(135deg,#ff9a8b,#fecfef);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bag-row .im img{width:100%;height:100%;object-fit:cover}
.bag-row .mid{flex:1;min-width:0;font-size:13px}
.bag-row .mid b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-row .mid span{font-size:11px;color:var(--c-sub);display:block;margin-top:2px;word-break:break-all}
.bag-row .st{flex:none;font-size:11px;font-weight:800;padding:3px 9px;border-radius:10px;background:var(--c-chip);color:var(--c-accent)}
.bag-row .st.done{background:rgba(22,163,74,.14);color:#16a34a}
.bag-row button{flex:none;border:0;border-radius:12px;padding:5px 10px;font-size:11px;font-weight:800;background:var(--c-cancel);color:var(--c-cancel-text);cursor:pointer}
.bag-empty{text-align:center;color:var(--c-sub);font-size:13px;padding:50px 0}
.bag-bar{display:flex;align-items:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--c-line)}
.bag-bar .uid{font-size:12px;color:var(--c-sub);white-space:nowrap}
.bag-bar .uid b{color:var(--c-text);display:block;font-size:13px}
.bag-bar .sp{flex:1}
.bag-bar button{border:0;border-radius:20px;padding:10px 13px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:inherit}
.bag-bar .b-dec{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff}
.bag-bar .b-lock{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.bag-bar .b-ex{background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));color:var(--c-btn-text)}
.bag-bar button:disabled{opacity:.45;cursor:not-allowed}
.bag-item .tg.tmp{top:auto;bottom:44px;left:6px;right:6px;text-align:center;background:rgba(59,130,246,.85)}
.bag-item .tg.tmp.hot{background:rgba(239,68,68,.9)}
/* 道具卡 / 通兑赏 */
.bag-item .tg.prop{top:30px;left:6px;right:6px;text-align:center;background:linear-gradient(90deg,#7c3aed,#4c1d95)}
.bag-item .tg.td{left:auto;right:6px;color:#3b2400;background:linear-gradient(180deg,#ffe48f,#f5b72b)}
.bag-warn{flex-basis:100%;margin-top:6px;padding:6px 10px;border-radius:10px;font-size:12px;background:rgba(239,68,68,.12);color:#ef4444}
.bag-tools{flex-wrap:wrap}
/* 悬浮背包按钮(机台页底部已有「我的背包」时隐藏) */
.bag-fab{position:fixed;right:14px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:150;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:25px;cursor:pointer;background:var(--c-card);border:1px solid var(--c-border);
  box-shadow:0 6px 16px rgba(0,0,0,.3),var(--c-glow)}
.bag-fab b{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:11px;line-height:19px;text-align:center;font-weight:800}
body.has-footer .bag-fab{display:none}
html:not([data-theme="default"]) .bag-item .im,
html:not([data-theme="default"]) .bag-row .im{background:var(--c-card2)}
@media(min-width:560px){ .bag-grid{grid-template-columns:repeat(4,1fr)} }

/* 首页横幅图(后台全局配置里上传) */
.site-banner{margin:12px 14px 0;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25);border:1px solid var(--c-border)}
.site-banner img{width:100%;display:block}

/* ================= 非默认风格: 页面底色与飘落粒子 ================= */
html:not([data-theme="default"]){background:var(--bg-solid)}
/* 背景用固定图层代替 background-attachment:fixed —— 后者在手机上滚动时会整屏重绘, 导致上方动画闪烁 */
html:not([data-theme="default"]) body{color:var(--c-on-bg);background:transparent}
html:not([data-theme="default"]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg);transform:translateZ(0)}
html:not([data-theme="default"]) body::after{
  content:"";position:fixed;inset:-50% 0 0 0;pointer-events:none;z-index:1;opacity:.5;will-change:transform;backface-visibility:hidden;
  background-image:
    radial-gradient(2px 2px at 12% 88%,var(--x-particle1),transparent 60%),
    radial-gradient(2px 2px at 34% 76%,var(--x-particle2),transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 92%,var(--x-particle3),transparent 60%),
    radial-gradient(2.5px 2.5px at 76% 82%,var(--x-particle2),transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 95%,var(--x-particle1),transparent 60%),
    radial-gradient(2px 2px at 22% 60%,var(--x-particle2),transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 55%,var(--x-particle1),transparent 60%);
  background-size:100% 50%;animation:themeParticles 9s linear infinite;
}
html[data-theme="dark"] body::after{opacity:.32;animation-duration:16s;animation-direction:reverse}   /* 暗黑风: 缓慢飘落的灰白余烬 */
@keyframes themeParticles{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ================= 非默认风格: 登录 / 擂台大厅 / 对战房间 ================= */
html:not([data-theme="default"]) .pg-lobby .hero h1,
html:not([data-theme="default"]) .pg-room .rname,
html:not([data-theme="default"]) .pg-login .logo h1{
  background:var(--c-title);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 8px var(--c-title-glow));letter-spacing:2px;font-weight:900;
}
html:not([data-theme="default"]) .pg-login .card,
html:not([data-theme="default"]) .pg-lobby .room,
html:not([data-theme="default"]) .pg-lobby .modal,
html:not([data-theme="default"]) .pg-room .board,
html:not([data-theme="default"]) .pg-room .modal{
  background:linear-gradient(180deg,var(--c-card2),var(--c-card));border:1px solid var(--c-border);color:var(--c-text);
  box-shadow:0 8px 24px rgba(0,0,0,.5),var(--c-glow);
}
html:not([data-theme="default"]) .pg-lobby .top,
html:not([data-theme="default"]) .pg-room .top{background:var(--c-top);border-bottom:1px solid var(--c-top-line)}
html:not([data-theme="default"]) .pg-room .footer{background:var(--c-card);border-top:1px solid var(--c-border);box-shadow:0 -6px 22px rgba(0,0,0,.55)}
html:not([data-theme="default"]) .pg-login .btn,
html:not([data-theme="default"]) .pg-lobby .btn-p,
html:not([data-theme="default"]) .pg-lobby .fab,
html:not([data-theme="default"]) .pg-room .btn-draw,
html:not([data-theme="default"]) .pg-room .btn-close{
  background:linear-gradient(180deg,var(--c-accent),var(--c-accent2));border:1px solid var(--c-border) !important;color:var(--c-btn-text);
  text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:var(--c-glow);
}
html:not([data-theme="default"]) .pg-room .btn-back,
html:not([data-theme="default"]) .pg-lobby .btn-o{background:var(--c-chip);color:var(--c-gold);border:1.5px solid var(--c-border) !important}
html:not([data-theme="default"]) .pg-login .logo .ic{background:var(--c-card2);box-shadow:0 0 0 2px var(--c-border),var(--c-glow)}
html:not([data-theme="default"]) .pg-login .logo p,
html:not([data-theme="default"]) .pg-login .tip,
html:not([data-theme="default"]) .pg-login .back,
html:not([data-theme="default"]) .pg-login .hint,
html:not([data-theme="default"]) .pg-login .fi label{color:var(--c-sub)}
html:not([data-theme="default"]) .pg-login .tabs,
html:not([data-theme="default"]) .pg-lobby .tabs{background:var(--c-cancel);border:1px solid var(--c-line)}
html:not([data-theme="default"]) .pg-login .tabs div,
html:not([data-theme="default"]) .pg-lobby .tabs div{color:var(--c-sub)}
html:not([data-theme="default"]) .pg-login .tabs div.on,
html:not([data-theme="default"]) .pg-lobby .tabs div.on{background:linear-gradient(180deg,var(--c-accent),var(--c-accent2));color:var(--c-btn-text)}
html:not([data-theme="default"]) .pg-login .fi input,
html:not([data-theme="default"]) .pg-lobby .modal input{background:rgba(0,0,0,.3);border-color:var(--c-line);color:var(--c-text)}
html:not([data-theme="default"]) .pg-login .fi input:focus{border-color:var(--c-gold)}
html:not([data-theme="default"]) .pg-login .sendbtn{background:var(--c-chip);color:var(--c-gold);border:1px solid var(--c-border)}
html:not([data-theme="default"]) .pg-login .cap{border-color:var(--c-line)}
html:not([data-theme="default"]) .pg-login .bindtip{background:var(--c-chip);border-color:var(--c-border);color:var(--c-gold)}
html:not([data-theme="default"]) .pg-login .msg.ok{color:#86efac}
html:not([data-theme="default"]) .pg-login .msg.err{color:#ff8a65}
html:not([data-theme="default"]) .pg-lobby .hero p,
html:not([data-theme="default"]) .pg-lobby .empty,
html:not([data-theme="default"]) .pg-lobby .room .meta,
html:not([data-theme="default"]) .pg-lobby .modal .desc,
html:not([data-theme="default"]) .pg-room .board h3 em,
html:not([data-theme="default"]) .pg-room .tips,
html:not([data-theme="default"]) .pg-room .stage .pname{color:var(--c-sub)}
html:not([data-theme="default"]) .pg-lobby .me{background:var(--c-chip);border:1px solid var(--c-line)}
html:not([data-theme="default"]) .pg-lobby .me b,
html:not([data-theme="default"]) .pg-lobby .room .meta b,
html:not([data-theme="default"]) .pg-room .timer,
html:not([data-theme="default"]) .pg-room .board h3,
html:not([data-theme="default"]) .pg-room .modal .mtitle{color:var(--c-gold)}
html:not([data-theme="default"]) .pg-lobby .room .rh .nm,
html:not([data-theme="default"]) .pg-lobby .prow .v,
html:not([data-theme="default"]) .pg-room .prow .n,
html:not([data-theme="default"]) .pg-room .modal .mname,
html:not([data-theme="default"]) .pg-room .champ-name{color:var(--c-text)}
html:not([data-theme="default"]) .pg-lobby .prow .n{color:var(--c-sub)}
html:not([data-theme="default"]) .pg-lobby .pbar,
html:not([data-theme="default"]) .pg-room .pbar{background:rgba(255,255,255,.08)}
html:not([data-theme="default"]) .pg-lobby .pbar i,
html:not([data-theme="default"]) .pg-room .pbar i{background:linear-gradient(90deg,var(--c-accent),var(--c-accent2))}
html:not([data-theme="default"]) .pg-lobby .pbar i.lead,
html:not([data-theme="default"]) .pg-room .pbar i.lead{background:linear-gradient(90deg,var(--c-gold),var(--c-gold))}
html:not([data-theme="default"]) .pg-lobby .btn-cancel{background:var(--c-cancel);color:var(--c-cancel-text)}
html:not([data-theme="default"]) .pg-room .stage{background:var(--c-hero);border:1px solid var(--c-line)}
html:not([data-theme="default"]) .pg-room .stage .box{background:var(--c-card2);box-shadow:0 0 0 2px var(--c-border),var(--c-glow),0 10px 26px rgba(0,0,0,.6)}
html:not([data-theme="default"]) .pg-room .stage .pprice{background:var(--c-card);color:var(--c-gold);border:1px solid var(--c-border)}

/* ================= 样式精修(共享组件): 弹窗 / 背包 / 悬浮按钮 ================= */
.ui-dialog{border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--c-shadow)}
.bag{border-radius:24px 24px 0 0}
.bag-head{padding:16px 18px 10px}
.bag-tabs{gap:6px;padding:4px 14px 12px}
.bag-tabs div{border-radius:14px;padding:10px 0}
.bag-tabs div.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.15)}
.bag-tools{padding:0 18px 10px}
.bag-body{padding:4px 16px 16px}
.bag-grid{gap:10px}
.bag-item{border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.bag-item .im{height:92px;position:relative}
.bag-item .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.bag-item .nm{font-size:12.5px;padding:6px 8px 0}
.bag-item .mt{padding:2px 8px 8px}
.bag-bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px}
.bag-bar button{border-radius:18px;padding:10px 14px 9px;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.14),0 3px 0 rgba(0,0,0,.18);transition:transform .08s}
.bag-bar button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.18)}
.bag-fab{width:54px;height:54px;background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,0)),var(--c-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px rgba(0,0,0,.3),var(--c-glow)}

/* ===== 一番赏特殊赏开奖: 单独弹出(只给获奖者本人), 卡片慢慢出现 -> 背面朝上停一会儿 -> 翻开 ===== */
.sp-mask{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:20px}
.sp-mask.on{display:flex}
.sp-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px}
.sp-title{font-size:20px;font-weight:900;color:#ffe08a;text-shadow:0 2px 10px rgba(255,180,40,.6)}
.sp-card{width:62%;max-width:230px;aspect-ratio:3/4;perspective:1100px;opacity:0;transform:scale(1.6);transition:opacity 1.1s ease-out,transform 1.2s cubic-bezier(.2,.75,.25,1)}
.sp-card.dealt{opacity:1;transform:none}
.sp-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.sp-card.open .sp-in{transform:rotateY(180deg)}
.sp-face{position:absolute;inset:0;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #facc15;box-shadow:0 0 34px rgba(250,204,21,.9)}
.sp-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,transparent 8px 16px),linear-gradient(160deg,#f59e0b,#b91c1c)}
.sp-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:900;padding:3px 14px;border-radius:12px;color:#fff;white-space:nowrap;background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7)}
.sp-logo{font-size:56px}
.sp-q{margin-top:6px;font-size:14px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:4px}
.sp-front{transform:rotateY(180deg);background:var(--c-card,#fff);color:var(--c-text,#222)}
.sp-im{flex:1;width:100%;display:flex;align-items:center;justify-content:center;font-size:50px;background:var(--c-card2,#f3f4f6);overflow:hidden}
.sp-im img{width:100%;height:100%;object-fit:cover}
.sp-front b{font-size:14px;padding:8px 8px 0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-front i{font-style:normal;font-size:12px;color:#b45309;font-weight:800;padding:2px 8px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sum{opacity:0;transition:opacity .4s;text-align:center;color:#fff;font-size:14px;line-height:1.8}
.sp-sum b{color:#ffd54a}
.sp-sum.on{opacity:1}
.sp-ops{opacity:0;pointer-events:none;transition:opacity .4s}
.sp-ops.on{opacity:1;pointer-events:auto}
.sp-ops button{border:0;border-radius:22px;padding:11px 42px;font-size:16px;font-weight:900;color:#5a2a00;background:linear-gradient(180deg,#ffe48f,#f5a300);cursor:pointer;box-shadow:0 6px 18px rgba(245,163,0,.45)}