/* ============================================================
 * PG 游戏大厅 · app.css
 * 深色赌场风：静谧底色 + 双色渐变主色 + 玻璃拟态卡片
 * ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#070a12;
  --bg-2:#0b101d;
  --panel:#111830;
  --panel-2:#151d38;
  --line:#1e2949;
  --txt:#e9eefb;
  --dim:#8b9abd;
  --dim-2:#5f6d8f;
  --brand:#7c5cff;
  --brand-2:#22d3ee;
  --gold:#ffc76b;
  --ok:#22c55e;
  --err:#f05252;
  --grad:linear-gradient(135deg,#7c5cff 0%,#22d3ee 100%);
  --grad-warm:linear-gradient(135deg,#ffc76b 0%,#ff7a59 100%);
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --sh:0 10px 30px rgba(0,0,0,.45);
  --head-h:60px;
  --tab-h:58px;
  --max:1320px;
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* 必须：否则 .errbar/.empty 的 display 会盖掉 hidden 属性 */
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,211,238,.16), transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; }
.muted{ color:var(--dim); font-size:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  height:var(--head-h);
  display:flex; align-items:center; gap:14px;
  padding:0 clamp(12px,3vw,28px);
  background:rgba(7,10,18,.82);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand-logo{
  width:34px; height:34px; border-radius:11px;
  background:var(--grad);
  display:grid; place-items:center;
  font-weight:900; font-size:13px; letter-spacing:.4px;
  color:#08101f;
  box-shadow:0 6px 18px rgba(124,92,255,.45);
}
.brand-name{ font-size:15px; font-weight:800; letter-spacing:.2px; white-space:nowrap; }
.brand-name small{ display:block; font-size:9.5px; font-weight:500; color:var(--dim-2); letter-spacing:1.4px; }

.search{
  flex:1 1 auto; max-width:440px; min-width:0;
  position:relative;
}
.search input{
  width:100%; height:38px;
  padding:0 38px 0 36px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--txt);
  font-size:13px;
  outline:none;
  transition:border-color .18s, background .18s;
}
.search input::placeholder{ color:var(--dim-2); }
.search input:focus{ border-color:rgba(124,92,255,.75); background:rgba(124,92,255,.10); }
.search .ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--dim-2); font-size:13px; }
.search .clr{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; color:var(--dim); display:none; place-items:center;
}
.search.has-val .clr{ display:grid; }
.search .clr:hover{ background:rgba(255,255,255,.08); }

.balance{
  display:flex; align-items:center; gap:7px;
  height:34px; padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,199,107,.28);
  background:rgba(255,199,107,.08);
  font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:700; color:var(--gold);
  white-space:nowrap;
}
.balance .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.balance.bad{ border-color:rgba(240,82,82,.3); background:rgba(240,82,82,.08); color:#ff9c9c; }

/* ---------- 分类 ---------- */
.cats{
  position:sticky; top:var(--head-h); z-index:50;
  display:flex; gap:9px;
  padding:11px clamp(12px,3vw,28px);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  background:linear-gradient(180deg,rgba(7,10,18,.94),rgba(7,10,18,.72));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05);
  scroll-behavior:smooth;
}
.cats::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 15px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--dim);
  font-size:13px; font-weight:600;
  white-space:nowrap;
  transition:all .16s;
}
.chip .em{ font-size:12px; opacity:.9; }
.chip:hover{ color:var(--txt); border-color:rgba(124,92,255,.45); transform:translateY(-1px); }
.chip.on{
  background:var(--grad); color:#08101f; border-color:transparent;
  box-shadow:0 8px 20px rgba(124,92,255,.38);
}
.chip .n{ font-size:10px; opacity:.6; }

/* ---------- 主容器 ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(12px,3vw,28px) 40px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  margin:16px 0 22px;
  border-radius:var(--r-lg);
  overflow:hidden;
  min-height:170px;
  display:flex; align-items:center;
  padding:26px clamp(20px,4vw,44px);
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(34,211,238,.30), transparent 60%),
    linear-gradient(115deg,#241a52 0%,#1a1338 45%,#0d1730 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--sh);
  isolation:isolate;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.5; z-index:-1;
  mask-image:linear-gradient(100deg,#000,transparent 70%);
}
.hero-txt{ max-width:520px; }
.hero h1{
  margin:0 0 8px;
  font-size:clamp(21px,3.2vw,32px);
  line-height:1.22;
  letter-spacing:-.4px;
  font-weight:900;
}
.hero h1 em{
  font-style:normal;
  background:var(--grad-warm);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin:0 0 16px; color:var(--dim); font-size:13px; }
.hero .btns{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 20px;
  border-radius:999px;
  font-size:13.5px; font-weight:700;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary{ background:var(--grad); color:#08101f; box-shadow:0 10px 24px rgba(124,92,255,.4); }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-ghost{ border:1px solid rgba(255,255,255,.18); color:var(--txt); background:rgba(255,255,255,.05); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.hero-orbs{ position:absolute; right:28px; top:50%; transform:translateY(-50%); display:flex; gap:14px; opacity:.9; }
.orb{
  width:var(--s); height:var(--s); border-radius:50%;
  background:var(--grad);
  filter:blur(.4px);
  box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 -8px 18px rgba(0,0,0,.28);
  animation:float 6s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.orb:nth-child(2){ background:var(--grad-warm); }
.orb:nth-child(3){ background:linear-gradient(135deg,#22c55e,#0ea5e9); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* ---------- 货架 ---------- */
.shelf{ margin-top:6px; }
.shelf-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 12px;
}
.shelf-head h2{
  margin:0; font-size:16px; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.shelf-head h2::before{
  content:""; width:3px; height:15px; border-radius:2px; background:var(--grad); display:inline-block;
}
.shelf-head .muted{ margin-left:auto; }
.tag-demo{
  font-size:10px; font-weight:700; letter-spacing:.6px;
  color:var(--gold); border:1px solid rgba(255,199,107,.35);
  background:rgba(255,199,107,.09);
  padding:2px 7px; border-radius:999px;
}

/* ---------- 卡片网格 ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:13px;
}
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .card-body{ padding:6px 7px 7px; }
  .card-name{ font-size:11.5px; }
  .card-meta{ font-size:9px; gap:4px; }
  .card-meta .sep,
  .card-meta > span:last-child{ display:none; }   /* 移动端只留 RTP，避免折行 */
  .badge{ font-size:8.5px; padding:2px 5px; }
  .card-cover .fav{ opacity:1; transform:none; }
}
@media (max-width:360px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.card{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
  will-change:transform;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.5); border-color:rgba(124,92,255,.45); }
.card:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; }
.card-cover{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  padding:9px;
  background:radial-gradient(120% 120% at 50% 0%, #1d2542 0%, #111830 55%, #0c1120 100%);
}
.card-cover img{
  width:100%; height:100%; object-fit:contain; border-radius:9px;
  transition:transform .35s;
}
.card:hover .card-cover img{ transform:scale(1.05); }
.card-cover .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:26px; font-weight:900; color:rgba(255,255,255,.35);
  background:linear-gradient(135deg,#2a2158,#16304a);
}
.badge{
  position:absolute; top:7px; left:7px; z-index:2;
  font-size:9.5px; font-weight:800; letter-spacing:.5px;
  padding:3px 6px; border-radius:6px;
  background:linear-gradient(135deg,#ff5f6d,#ffc371);
  color:#2a0f00;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.badge.hot{ background:var(--grad-warm); }
.badge.cat{
  background:rgba(7,10,18,.72); color:#d3e2ff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px);
  font-weight:800; letter-spacing:.3px;
}
.fav{
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(6,10,18,.55); backdrop-filter:blur(4px);
  color:#fff; font-size:13px; line-height:1;
  opacity:0; transform:scale(.85);
  transition:all .16s;
}
.card:hover .fav, .fav.on{ opacity:1; transform:scale(1); }
.fav.on{ color:var(--gold); }
.card-hover{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(7,10,18,0) 30%,rgba(7,10,18,.82) 100%);
  opacity:0; transition:opacity .18s;
}
.card:hover .card-hover{ opacity:1; }
.play-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 15px; border-radius:999px;
  background:var(--grad); color:#08101f;
  font-size:12px; font-weight:800;
  box-shadow:0 8px 20px rgba(124,92,255,.45);
}
.card-body{ padding:8px 9px 9px; }
.card-name{
  font-size:12.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-meta{
  display:flex; align-items:center; gap:6px;
  margin-top:3px; font-size:10px; color:var(--dim-2);
}
.card-meta .rtp{ color:var(--ok); font-weight:700; font-variant-numeric:tabular-nums; }
.card-meta .sep{ opacity:.4; }

/* ---------- 骨架屏 ---------- */
.sk{
  border-radius:var(--r-md);
  background:linear-gradient(100deg,var(--panel) 20%,#1b2444 40%,var(--panel) 60%);
  background-size:200% 100%;
  animation:shimmer 1.25s linear infinite;
  aspect-ratio:3/4;
}
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- 空 / 错 / 加载更多 ---------- */
.empty{
  text-align:center; padding:54px 20px; color:var(--dim);
}
.empty .big{ font-size:34px; margin-bottom:10px; opacity:.75; }
.empty h3{ margin:0 0 6px; font-size:15px; color:var(--txt); }
.errbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 0 0; padding:11px 14px;
  border-radius:var(--r-sm);
  border:1px solid rgba(240,82,82,.3);
  background:rgba(240,82,82,.08);
  color:#ff9c9c; font-size:12.5px;
}
.errbar button{
  margin-left:auto; height:28px; padding:0 13px; border-radius:999px;
  background:rgba(240,82,82,.18); border:1px solid rgba(240,82,82,.4);
  font-size:12px; font-weight:700;
}
.sentinel{ height:1px; }
.loadmore{
  display:grid; place-items:center; padding:22px 0 6px;
}
.loadmore button{
  height:36px; padding:0 22px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:12.5px; color:var(--dim); font-weight:600;
}
.loadmore button:hover{ color:var(--txt); border-color:rgba(124,92,255,.5); }
.spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--brand-2);
  animation:rot .7s linear infinite; display:inline-block;
}
@keyframes rot{ to{ transform:rotate(360deg); } }

/* ---------- 底部导航（移动） ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:none;
  background:rgba(9,13,23,.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.07);
}
.tabbar .t{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--dim-2); font-size:10px; font-weight:600;
}
.tabbar .t .i{ font-size:17px; line-height:1; }
.tabbar .t.on{ color:var(--brand-2); }
@media (max-width:640px){
  .tabbar{ display:flex; }
  .brand-name{ font-size:13.5px; line-height:1.15; }
  .brand-name small{ display:none; }
  .brand-logo{ width:30px; height:30px; border-radius:10px; font-size:12px; }
  .topbar{ gap:9px; height:54px; }
  .cats{ top:54px; padding:9px 12px; }
  .search input{ height:34px; font-size:12.5px; padding:0 32px; }
  .search .ico{ left:11px; }
  .hero{ margin:12px 0 16px; }
  .hero p{ font-size:12px; }
  body{ padding-bottom:calc(var(--tab-h) + 12px); }
  .hero{ min-height:150px; padding:20px; }
  .hero-orbs{ display:none; }
  .balance{ display:none; }
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  z-index:200;
  max-width:min(90vw,420px);
  padding:11px 18px;
  border-radius:12px;
  background:rgba(18,24,44,.97);
  border:1px solid rgba(124,92,255,.4);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  font-size:13px; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- 页脚 ---------- */
.foot{
  margin-top:34px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:11.5px; color:var(--dim-2);
}
.foot a{ color:var(--dim); }
.foot a:hover{ color:var(--txt); }
.foot .sp{ margin-left:auto; }

/* ============================================================
 * play.html —— 游戏容器 / 演示机台
 * ============================================================ */
.play-page{ height:100vh; display:flex; flex-direction:column; background:#05070d; }
.play-bar{
  flex:0 0 auto;
  height:52px; display:flex; align-items:center; gap:12px;
  padding:0 14px;
  background:rgba(9,13,23,.92);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.play-bar .back{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 13px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:12.5px; color:var(--dim); font-weight:600;
}
.play-bar .back:hover{ color:var(--txt); }
.play-bar .title{ font-size:14px; font-weight:800; }
.play-bar .title small{ display:block; font-size:10px; color:var(--dim-2); font-weight:500; }
.play-bar .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.play-stage{ flex:1 1 auto; position:relative; overflow:hidden; }
.play-stage iframe{ width:100%; height:100%; border:0; display:block; background:#0b0f1a; }
.stage-center{
  position:absolute; inset:0; display:grid; place-items:center; gap:12px;
  color:var(--dim); font-size:13px;
}
.loader-wrap{ display:grid; place-items:center; gap:14px; }
.loader-ring{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--brand-2);
  animation:rot .8s linear infinite;
}

/* 错误提示清单 */
.hint{
  text-align:left; margin:0 auto; max-width:460px;
  padding-left:20px; color:var(--dim); font-size:12.5px; line-height:1.95;
}
.hint li{ margin:1px 0; }

/* 演示机台 */
.demo{
  position:absolute; inset:0; overflow:auto;
  display:grid; place-items:center;
  padding:18px;
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(500px 300px at 80% 90%, rgba(34,211,238,.16), transparent 60%),
    #080b14;
}
.machine{
  width:min(560px,94vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,#151a2e,#0c1120);
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding:16px;
}
.machine-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.machine-head .mh-ico{
  width:38px; height:38px; border-radius:11px; background:var(--grad);
  display:grid; place-items:center; font-size:18px;
}
.machine-head h3{ margin:0; font-size:15px; font-weight:800; }
.machine-head .muted{ font-size:10.5px; }
.machine-head .demo-tag{
  margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.5px;
  color:var(--gold); border:1px solid rgba(255,199,107,.35);
  background:rgba(255,199,107,.1); padding:3px 8px; border-radius:999px;
}
.reels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:12px; border-radius:16px;
  background:#05070e; border:1px solid rgba(255,255,255,.07);
}
.reel{
  height:150px; border-radius:12px;
  background:linear-gradient(180deg,#121a2e,#0a0e1a);
  border:1px solid rgba(255,255,255,.06);
  display:grid; place-items:center;
  font-size:40px;
  overflow:hidden; position:relative;
}
.reel.spinning .cell{ animation:blur .12s linear infinite; }
@keyframes blur{ 0%{ transform:translateY(-6px); opacity:.4; } 100%{ transform:translateY(6px); opacity:1; } }
.reel.hit{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(255,199,107,.35); }
.machine-foot{
  display:flex; align-items:center; gap:10px; margin-top:13px; flex-wrap:wrap;
}
.bet{ display:flex; align-items:center; gap:6px; }
.bet button{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); font-weight:700; color:var(--dim);
}
.bet .val{
  min-width:76px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:13px;
}
.spin-btn{
  flex:1 1 140px; height:42px; border-radius:12px;
  background:var(--grad-warm); color:#2a1200; font-weight:900; font-size:14px;
  box-shadow:0 10px 26px rgba(255,122,89,.35);
  transition:transform .14s, filter .14s;
}
.spin-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.spin-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.machine-stat{
  margin-top:11px; display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--dim-2);
}
.machine-stat b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.paytable{
  margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px;
}
.pay{
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05); font-size:11px; color:var(--dim);
}
.pay b{ display:block; color:var(--txt); font-size:12.5px; margin-top:2px; }

/* ============================================================
 * 进游戏前弹窗广告（ads.js）
 * ============================================================ */
.adwall{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:16px;
  background:rgba(3,5,10,.84);
  backdrop-filter:blur(6px) saturate(1.1);
  opacity:0; transition:opacity .18s;
}
.adwall.on{ opacity:1; }
.ad-card{
  width:min(560px,94vw);
  border-radius:18px; overflow:hidden;
  background:#0f1526; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.98);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.adwall.on .ad-card{ transform:none; }
.ad-top{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px 9px 12px;
  background:rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ad-tag{
  font-size:9.5px; font-weight:800; letter-spacing:1px;
  color:#0a0f1c; background:#c9d6f2; padding:2px 6px; border-radius:4px;
}
.ad-count{ font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.ad-timer{
  margin-left:auto; min-width:28px; text-align:right;
  font-size:11.5px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.ad-x{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#e9eefb;
  font-size:13px; line-height:1;
  transition:background .15s, transform .15s;
}
.ad-x.locked{ opacity:.4; cursor:not-allowed; }
.ad-x:not(.locked):hover{ background:rgba(240,82,82,.9); transform:rotate(90deg); }
.ad-body{ position:relative; background:#0b0f1a; }
.ad-link{ display:block; position:relative; }
.ad-img{ width:100%; display:block; aspect-ratio:16/10; object-fit:contain; background:#0b1020; }
.ad-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 11px;
  font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,6,12,.9));
}
.ad-ph{
  aspect-ratio:16/10; display:grid; place-content:center; gap:7px;
  text-align:center; padding:22px;
  background:var(--grad); color:#08101f;
}
.ad-ph b{ font-size:18px; font-weight:900; }
.ad-ph span{ font-size:11.5px; opacity:.8; }
.ad-foot{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; font-size:11px; color:var(--dim-2);
  background:rgba(255,255,255,.02);
}
.ad-dots{ margin-left:auto; display:flex; gap:5px; }
.ad-dots i{ width:14px; height:4px; border-radius:2px; background:rgba(255,255,255,.16); }
.ad-dots i.on{ background:var(--brand-2); width:22px; }
.ad-dots i.done{ background:rgba(255,255,255,.42); }

/* ---------- 顶部公告（后台 → 站点信息 → 公告） ---------- */
.notice{
  margin:14px 0 -4px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,199,107,.32);
  background:linear-gradient(90deg,rgba(255,199,107,.12),rgba(255,199,107,.03));
  color:#ffe0a8;
  font-size:12.5px;
  line-height:1.6;
}
@media (max-width:640px){ .notice{ margin:10px 0 -2px; font-size:12px; } }

/* ============================================================
 * 广告位：横幅 / 右下浮窗 / 开屏
 * ============================================================ */
.banner{
  position:relative;margin:14px 0 -2px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#0d1322;
}
.bn-track{position:relative;aspect-ratio:16/5;min-height:96px;background:linear-gradient(120deg,#1a1338,#0b1226)}
.bn-item{position:absolute;inset:0;opacity:0;transition:opacity .35s;display:block}
.bn-item.on{opacity:1}
.bn-item img{width:100%;height:100%;object-fit:contain;display:block}
.bn-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-size:12.5px;
  font-weight:700;color:#fff;background:linear-gradient(180deg,transparent,rgba(4,6,12,.85))}
.bn-dots{position:absolute;right:10px;bottom:8px;display:flex;gap:5px}
.bn-dots i{width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer}
.bn-dots i.on{background:var(--brand-2);width:20px}
.bn-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:rgba(6,10,18,.6);color:#fff;font-size:12px;display:grid;place-items:center;
  backdrop-filter:blur(4px)}
.bn-close:hover{background:rgba(240,82,82,.85)}

.ad-float{position:fixed;right:16px;bottom:78px;z-index:120;width:152px;border-radius:14px;
  overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0f1526;
  box-shadow:0 18px 40px rgba(0,0,0,.55);opacity:0;transform:translateY(10px);transition:.25s}
.ad-float.on{opacity:1;transform:none}
.ad-float .af-link{display:block;position:relative}
.ad-float img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.ad-float .af-cap{display:block;padding:6px 8px;font-size:11px;color:var(--txt);text-align:center}
.ad-float .af-x{position:absolute;top:4px;right:4px;z-index:2;width:22px;height:22px;border-radius:50%;
  background:rgba(6,10,18,.7);color:#fff;font-size:11px;display:grid;place-items:center}
.ad-float .af-x:hover{background:rgba(240,82,82,.9)}

.adwall-splash .ad-splash-card{width:min(560px,94vw)}
.adwall-splash .ad-img{aspect-ratio:auto;width:100%;height:auto;max-height:76vh;object-fit:contain;background:#0b1020}

@media (max-width:640px){
  .ad-float{width:112px;bottom:70px;right:10px}
  .adwall-splash .ad-splash-card{width:94vw}
  .banner{margin:10px 0 0}
  .bn-track{aspect-ratio:2/1}
}

/* 顶栏客服按钮 */
.head-kf{
  display:inline-flex;align-items:center;gap:5px;
  height:34px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(124,92,255,.45);
  background:rgba(124,92,255,.12);
  color:#d6ccff;font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:all .16s;
}
.head-kf:hover{background:rgba(124,92,255,.24);border-color:rgba(124,92,255,.75);color:#fff}
.head-kf span{font-size:13px;line-height:1}
@media (max-width:640px){
  .head-kf{height:30px;padding:0 9px;font-size:11.5px}
  .head-kf span{font-size:12px}
}