:root{
  --bg:#0a0a14;
  --panel:#14142a;
  --panel-2:#1c1c38;
  --line:#2a2a4d;
  --txt:#e8e8ff;
  --muted:#9a9ac8;
  --accent:#7c5cff;
  --accent-2:#00e5ff;
  --good:#37e6a0;
  --warn:#ff5d8f;
  --glow:0 0 24px rgba(124,92,255,.45);
  /* ===== 视觉圣经扩展令牌（art-director 提供，禁止改值） ===== */
  --gold:#ffd24a;
  --gold-soft:#fff1b0;
  --cyan:#00e5ff;
  --platinum:#8be0ff;
  --silver:#c7ccea;
  --bronze:#b9824e;
  --bronze-soft:#ffcf9a;
  --slate:#6b6b9c;
  --attack:#ff5d6c;
  --season:linear-gradient(135deg,#ff5d8f 0%,#7c5cff 55%,#00e5ff 100%);
  --rarity-common:#9a9ac8;
  --rarity-rare:#00e5ff;
  --rarity-epic:#b9a6ff;
  --rarity-legend:#ffd24a;
  --rarity-mythic:linear-gradient(135deg,#ffd24a,#ff5d8f 50%,#7c5cff);
  --touch:44px;
  --bottombar:56px;
  --topbar:52px;
  /* 会员 Lv 调色板（逆钻贵族 7 级） */
  --lv1:#6b6b9c; --lv1-2:#8a8abf;
  --lv2:#b9824e; --lv2-2:#ffcf9a;
  --lv3:#c7ccea; --lv3-2:#ffffff;
  --lv4:#ffd24a; --lv4-2:#fff1b0;
  --lv5:#8be0ff; --lv5-2:#e0fbff;
  --lv6:#b9a6ff; --lv6-2:#e8e0ff;
  --lv7a:#7c5cff; --lv7b:#00e5ff; --lv7c:#ff5d8f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  overflow:hidden;
  user-select:none;
}
#bg-aurora{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(60vw 60vw at 15% 10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(50vw 50vw at 85% 80%, rgba(0,229,255,.16), transparent 60%),
    radial-gradient(40vw 40vw at 70% 15%, rgba(255,93,143,.12), transparent 60%);
  filter:saturate(1.1);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%, -1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}

.screen{
  position:fixed;inset:0;z-index:2;
  display:none;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 20px 20px;  /* 顶部安全区（notch / 灵动岛） */
}
.screen.active{display:flex}

/* ---------- 菜单 ---------- */
.menu-wrap{text-align:center;max-width:560px}
.logo{
  font-size:clamp(44px,9vw,84px);
  margin:0 0 6px;font-weight:900;letter-spacing:2px;
  background:linear-gradient(90deg,#fff,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(0,229,255,.25);
}
.logo span{background:linear-gradient(90deg,var(--accent),var(--warn));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);margin:0 0 34px;font-size:15px}
.menu-buttons{display:flex;flex-direction:column;gap:14px;max-width:320px;margin:0 auto}
.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--txt);
  padding:14px 18px;border-radius:14px;font-size:16px;cursor:pointer;
  transition:.18s ease;font-weight:600;
}
.btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--glow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#9b7bff);border:none;color:#fff}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.small{padding:10px 14px;font-size:14px;flex:1}
.credit{margin-top:38px;color:#4a4a72;font-size:12px;letter-spacing:3px}
.menu-beian{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;line-height:1.5;color:#5a5a82}
.menu-beian a,.site-beian a{color:#6b7a9c;text-decoration:none}
.menu-beian a:hover,.site-beian a:hover{color:var(--accent-2)}
.menu-beian-domain,.site-beian-domain{color:#4a4a72;font-size:10px;letter-spacing:1px}
.beian-gongan{display:inline-flex;align-items:center;gap:4px}
.beian-gongan img{opacity:.85;flex-shrink:0}
/* 全站备案底栏：桌面常驻；移动端叠在 Tab 栏上方 */
.site-beian{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  font-size:10px;line-height:1.4;color:#5a5a82;
  background:rgba(11,14,26,.92);border-top:1px solid rgba(124,92,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:auto;
}
@media (max-width:768px){
  .site-beian{bottom:calc(var(--bottombar) + env(safe-area-inset-bottom));padding-bottom:6px}
  .menu-beian{display:none} /* 移动端由全站底栏展示，避免重复 */
}
@media (min-width:769px){
  .screen{padding-bottom:calc(52px + env(safe-area-inset-bottom) + 16px)}
}

/* ---------- 通用面板 ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:28px;width:min(560px,94vw);max-height:90vh;overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.panel h2{margin:0 0 20px;font-size:26px}
.back{margin-top:18px}

/* ---------- 模式卡 ---------- */
.mode-grid{display:grid;gap:14px}
.mode-card{
  text-align:left;border:1px solid var(--line);background:var(--panel-2);
  border-radius:16px;padding:18px;cursor:pointer;color:var(--txt);transition:.18s;
}
.mode-card:hover{border-color:var(--accent-2);transform:translateY(-3px);box-shadow:0 0 24px rgba(0,229,255,.25)}
.mode-ico{font-size:30px}
.mode-card h3{margin:8px 0 6px;font-size:19px}
.mode-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

/* ---------- 解谜列表 ---------- */
.puzzle-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.puzzle-tile{
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 10px;text-align:center;cursor:pointer;transition:.18s;
}
.puzzle-tile:hover{border-color:var(--accent);transform:scale(1.04)}
.puzzle-tile .lv{font-size:26px;font-weight:900;color:var(--accent-2)}
.puzzle-tile .nm{font-size:13px;color:var(--muted);margin-top:4px}
.puzzle-tile .star{color:#ffd24a;font-size:13px;margin-top:6px;min-height:16px}

/* ---------- 排行榜 ---------- */
.lb-source{font-size:12px;color:var(--muted);margin-bottom:10px;letter-spacing:.3px}
.lb-tabs{display:flex;gap:8px;margin-bottom:16px}
.lb-tab{
  flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);cursor:pointer;font-weight:600;
}
.lb-tab.active{background:linear-gradient(135deg,var(--accent),#9b7bff);color:#fff;border:none}
.lb-list{list-style:none;margin:0;padding:0;counter-reset:rank}
.lb-list li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--panel-2);margin-bottom:8px;
}
.lb-list li.me{outline:2px solid var(--accent-2);background:#1d2348}
.lb-rank{width:28px;text-align:center;font-weight:800;color:var(--muted)}
.lb-list li:nth-child(1) .lb-rank{color:#ffd24a}
.lb-list li:nth-child(2) .lb-rank{color:#cfd6ff}
.lb-list li:nth-child(3) .lb-rank{color:#ff9d5c}
.lb-flag{font-size:20px}
.lb-name{flex:1;font-weight:600}
.lb-score{font-weight:800;color:var(--accent-2)}
.lb-empty{color:var(--muted);text-align:center;padding:30px}

/* ---------- 游戏 ---------- */
.game-wrap{display:flex;gap:22px;align-items:flex-start;z-index:3}
.playfield{position:relative}
#board{
  background:var(--board-bg,#0c0c1c);border:1px solid var(--line);border-radius:14px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 0 40px rgba(124,92,255,.15);
  width:300px;height:600px;display:block;touch-action:none;
}
.sidebar{width:200px;display:flex;flex-direction:column;gap:14px}
.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hud-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.hud-label{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:4px}
.hud-val{font-size:22px;font-weight:800}
.next-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
#next{width:120px;height:120px;display:block;margin:0 auto}
.ctrl-row{display:flex;gap:10px}
.touch-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tc{
  background:var(--panel-2);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:16px 0;font-size:18px;cursor:pointer;font-weight:700;
}
.tc:active{background:var(--accent);color:#fff}
.tc.wide{grid-column:1 / -1;background:linear-gradient(135deg,var(--accent),#9b7bff);border:none;color:#fff}
.legend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.legend p{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---------- 覆盖层 ---------- */
.overlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,18,.82);border-radius:14px;backdrop-filter:blur(4px);z-index:5;
}
.overlay.show{display:flex}
.overlay-card{text-align:center;padding:26px;width:260px}
.overlay-card h2{margin:0 0 18px;font-size:26px}
.overlay-card .btn{width:100%;margin-bottom:10px}
.go-stats{margin-bottom:18px;font-size:14px;color:var(--muted);line-height:1.9}
.go-stats b{color:var(--txt);font-size:18px}
.name-row{display:flex;gap:8px;margin-bottom:12px}
.name-row input{
  flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);padding:10px;font-size:14px;
}
.name-row .btn{padding:10px 12px;font-size:13px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(4,4,10,.7)}
.modal.show{display:flex}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(460px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-card h2{margin:0 0 14px}
.modal-card p{color:var(--muted);line-height:1.7}
.modal-card ul{color:var(--muted);line-height:1.9;padding-left:20px}
.modal-card b{color:var(--txt)}
.modal-card .btn{margin-top:18px;width:100%}

/* ---------- 充值档位弹层（C1） ---------- */
.recharge-cap{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 14px}
.recharge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.recharge-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);color:var(--txt);cursor:pointer;transition:.18s;min-height:var(--touch)}
.recharge-tier:hover{border-color:var(--accent-2);transform:translateY(-2px);box-shadow:0 0 18px rgba(0,229,255,.25)}
.recharge-tier .rt-bean{font-size:15px;font-weight:800;color:var(--accent-2)}
.recharge-tier .rt-cny{font-size:12.5px;color:var(--muted)}
.recharge-tier.hot{border-color:var(--accent)}
.recharge-tier .rt-tag{position:absolute;top:-8px;right:8px;font-size:10px;font-weight:800;color:#fff;background:var(--warn);padding:1px 8px;border-radius:999px}
.store-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.recharge-note{margin:0;font-size:11.5px;color:var(--muted)}

/* ---------- 会员月礼包（C5） ---------- */
.vip-gift{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.vip-gift-info{font-size:12px;color:var(--muted)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .game-wrap{flex-direction:column;align-items:center;gap:14px}
  .sidebar{width:300px}
  .touch-controls{margin-top:4px}
  #board{width:300px;height:600px}
}
@media (max-width:380px){
  #board{width:260px;height:520px}
  .sidebar{width:260px}
}

/* ===================================================================
   平台与商业化界面（登录 / 玩家中心 / 商店 / 好友 / 对战 / 设置）
   =================================================================== */
.panel.narrow{width:min(420px,94vw)}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{
  flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);cursor:pointer;font-weight:600;
}
.tab.active{background:linear-gradient(135deg,var(--accent),#9b7bff);color:#fff;border:none}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);padding:13px;font-size:15px;
}
.auth-msg{font-size:13px;color:var(--warn);min-height:18px;text-align:center}
.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0}

/* 玩家中心 */
.hub-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:none;
}
.hub-id{flex:1;min-width:0}
.hub-name{font-size:20px;font-weight:800}
.hub-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.coins{font-weight:800;color:#ffd24a;font-size:18px;white-space:nowrap}
.hub-best{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.hub-best .hud-label{margin:0 6px 0 0}
.best-chip{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px}
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hub-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.hub-actions .btn{width:100%}

/* 道具栏 */
.item-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.item-btn{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:8px 4px;cursor:pointer;color:var(--txt);display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:.15s;position:relative;
}
.item-btn:hover{border-color:var(--accent-2)}
.item-btn:active{transform:scale(.94)}
.item-btn.disabled{opacity:.32;cursor:not-allowed}
.item-ico{font-size:20px}
.item-name{font-size:11px;color:var(--muted)}
.item-count{
  position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:800;border-radius:10px;min-width:18px;height:18px;
  line-height:18px;text-align:center;padding:0 4px;
}

/* 商店 */
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel-head h2{margin:0}
.store-list{display:flex;flex-direction:column;gap:10px}
.store-item{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.si-ico{font-size:26px;width:34px;text-align:center}
.si-main{flex:1;min-width:0}
.si-name{font-weight:700;font-size:15px}
.si-desc{font-size:12.5px;color:var(--muted);margin-top:3px}
.store-item .btn{flex:none;min-width:92px}

/* 好友 */
.add-friend{display:flex;gap:10px;margin-bottom:18px}
.add-friend input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:12px;font-size:14px}
.friend-list{display:flex;flex-direction:column;gap:10px}
.friend-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.fr-ava{font-size:22px}
.fr-name{flex:1;font-weight:600}
.fr-best{font-size:13px;color:var(--muted)}
.empty,.loading{color:var(--muted);text-align:center;padding:24px;font-size:14px}

/* 对战 */
.vs-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.mode-card.small{padding:14px}
.mode-card.small.active{border-color:var(--accent-2);box-shadow:0 0 24px rgba(0,229,255,.3)}
.vs-info{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px;line-height:1.7;margin-bottom:16px;min-height:54px}
.vs-actions{display:flex;flex-direction:column;gap:10px}
.vs-actions .btn{width:100%}

/* 设置 */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.set-row:last-of-type{border-bottom:none}
.set-row span{font-size:15px}
.set-row input[type=range]{width:160px}
.set-row select{background:var(--panel-2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:8px 10px;font-size:14px}
.set-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--accent);color:var(--txt);
  padding:12px 20px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:var(--glow);opacity:0;pointer-events:none;transition:.25s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===================================================================
   技能树 / 任务 / 公会 界面
   =================================================================== */
.sec-sub{font-size:15px;color:var(--neon2);margin:16px 0 10px}
.hint{color:var(--muted);font-size:12px;line-height:1.6}

/* 技能树 */
.skills-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:560px){.skills-list{grid-template-columns:1fr}}
.skill-card{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.skill-card.unlocked{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.06)}
.sk-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sk-name{font-size:15px;font-weight:800}
.sk-tag{font-size:10.5px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.sk-进攻{background:rgba(255,93,143,.16);color:#ff8fb1}
.sk-防守{background:rgba(91,141,255,.16);color:#9bb8ff}
.sk-节奏{background:rgba(255,157,92,.16);color:#ffb27a}
.sk-辅助{background:rgba(124,92,255,.16);color:#b9a6ff}
.sk-资源{background:rgba(0,229,255,.16);color:#7fe9ff}
.sk-desc{font-size:12.5px;color:var(--txt);line-height:1.5}
.sk-meta{font-size:11px;color:var(--muted)}
.skill-card .btn{margin-top:2px}

/* 任务 */
.task-list{display:flex;flex-direction:column;gap:10px}
.task-card{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name btn" "bar bar" "info info";gap:8px;align-items:center}
.task-card.claimed{opacity:.62}
.tk-name{grid-area:name;font-size:14px;font-weight:700}
.tk-bar{grid-area:bar;height:8px;background:#0e1430;border-radius:6px;overflow:hidden}
.tk-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:6px;transition:width .3s}
.tk-info{grid-area:info;font-size:11.5px;color:var(--muted)}
.task-card .btn{grid-area:btn}

/* 公会 */
.guild-actions{display:flex;gap:10px;margin:8px 0 4px}
.guild-actions input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:12px;font-size:14px}
.guild-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.guild-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.gr-name{flex:1;font-weight:700;font-size:14px}
.gr-info{font-size:12px;color:var(--muted);margin-right:4px}
.guild-head{font-size:15px;margin-bottom:10px}
.guild-members{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.gm-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px}
.gm-row span:first-child{color:var(--muted)}
.gm-row span:last-child{font-weight:800;color:var(--accent-2)}

/* ===== 竞技对战面板（专家工作室改造） ===== */
.vs-panel{ margin-top:8px; padding:10px; background:rgba(255,93,143,0.08); border:1px solid rgba(255,93,143,0.32); border-radius:12px; }
.vs-panel .hud-label{ color:#ff8fb3; }
#vs-board{ width:100%; max-width:160px; height:auto; display:block; margin:6px auto; background:rgba(0,0,0,0.35); border-radius:8px; box-shadow:0 0 14px rgba(255,93,143,.25) inset; }
.vs-hint{ font-size:11px; color:#cbb6ff; text-align:center; line-height:1.4; }

/* ===== 段位徽章（专家工作室改造） ===== */
.hub-rank{ margin-top:4px; font-size:13px; font-weight:800; color:#ffd24a; letter-spacing:.5px; text-shadow:0 0 10px rgba(255,210,74,.4); }

/* ===== 联机对战 / 组队 / 攻击道具（专家工作室·对标 QQ 游戏大厅） ===== */
#online-panel{ background:rgba(92,141,255,0.08); border:1px solid rgba(92,141,255,0.35); }
#online-panel .hud-label{ color:#9bb8ff; }
.op-title{ font-size:12px; font-weight:800; color:#9bb8ff; margin-bottom:6px; }
.op-empty{ font-size:12px; color:var(--muted); text-align:center; padding:8px; }
.enemy-row{ display:flex; align-items:center; gap:7px; font-size:13px; padding:5px 4px; border-radius:8px; background:rgba(255,255,255,0.04); margin-bottom:5px; }
.enemy-dot{ width:9px; height:9px; border-radius:50%; background:#37e6a0; box-shadow:0 0 8px rgba(55,230,160,.6); }
.enemy-dot.dead{ background:#ff5d6c; box-shadow:0 0 8px rgba(255,93,108,.6); }
.enemy-st{ margin-left:auto; font-size:11px; color:var(--muted); }
.team-tag{ font-size:10px; font-weight:800; color:#fff; padding:1px 6px; border-radius:6px; }

/* 攻击型道具强调色 */
.item-btn.attack{ border-color:rgba(255,93,108,0.5); background:rgba(255,93,108,0.12); }
.item-btn.attack .item-ico{ filter:drop-shadow(0 0 4px rgba(255,93,108,.6)); }
.item-btn.attack .item-name{ color:#ff8f9c; }

/* 联机大厅 / 房间 */
.lobby-bar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.lobby-bar input{ flex:1; min-width:120px; }
.lobby-rooms{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; min-height:60px; }
.room-card{ display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.rc-name{ font-weight:800; flex:1; }
.rc-meta{ font-size:12px; color:var(--muted); }
.rc-live{ color:#ff5d6c; font-weight:700; }
.room-id{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.room-id b{ color:#9bb8ff; font-size:15px; letter-spacing:1px; }
.room-players{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.room-player{ display:flex; align-items:center; gap:8px; font-size:14px; padding:8px 12px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); }
.room-player.ready{ border-color:rgba(55,230,160,0.5); }
.rp-st{ margin-left:auto; font-size:12px; color:var(--muted); }
.room-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.room-chat{ height:120px; overflow-y:auto; background:rgba(0,0,0,0.25); border:1px solid var(--line); border-radius:10px; padding:8px; font-size:12px; display:flex; flex-direction:column; gap:4px; }
.chat-line{ color:#cbd5ff; line-height:1.4; }
.room-input-row{ display:flex; gap:6px; margin-bottom:10px; }
.room-input-row input{ flex:1; }

/* toast 提示 */
.toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px); background:rgba(20,16,40,0.95); color:#fff; border:1px solid var(--line); padding:10px 18px; border-radius:24px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s; z-index:999; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================================================================
   商业 UI 扩展 · 双币 / 逆钻贵族 / 商城5类 / 签到 / 赛季 / 扭蛋 / H5
   （令牌来自 art/visual-bible-extension.md，组件复用 .panel/.tabs/.store-item）
   =================================================================== */

/* ---------- 双币 chip ---------- */
.coin-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.coin-chip{display:inline-flex;align-items:center;gap:5px;font-weight:800;white-space:nowrap;
  padding:6px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:14px}
.coin-chip .ico{width:18px;height:18px;flex:none;display:inline-block}
.coin-bean{color:var(--gold)}
.coin-sand{color:var(--cyan)}
.coins{font-weight:800;color:var(--gold);font-size:18px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.coins .coin-sand{margin-left:8px}

/* ---------- 逆钻贵族徽章（内联 SVG，形状+罗马数字+名称三重编码） ---------- */
.badge{width:28px;height:28px;flex:none;display:inline-block;vertical-align:middle}
.badge.lg{width:40px;height:40px}
.badge.lv7{animation:irid 6s linear infinite}
@keyframes irid{to{filter:hue-rotate(360deg)}}
.vip-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(0,229,255,.10));
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.vip-card .vip-name{font-weight:900;font-size:17px}
.vip-card .vip-tier{font-size:12px;color:var(--muted)}
.vip-card .vip-perks{font-size:12.5px;color:var(--cyan);margin-top:3px;line-height:1.6}
.vip-locked{opacity:.5}
.vip-progress{height:8px;background:#0e1430;border-radius:6px;overflow:hidden;margin-top:8px}
.vip-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--bronze-soft));border-radius:6px}
.vip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.vip-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.vip-node.locked{opacity:.45}
.vip-node.cur{border-color:var(--accent-2);box-shadow:0 0 14px rgba(0,229,255,.3)}
.vip-node .lvl{font-size:11px;color:var(--muted)}

/* ---------- 商城品类 Tab + 商品卡扩展 ---------- */
.cat-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cat-tabs .tab{flex:1;min-width:64px;min-height:var(--touch);text-align:center}
.store-section-title{font-size:15px;font-weight:800;margin:18px 0 10px;color:var(--txt);display:flex;align-items:center;gap:8px}
.store-section-title .tag{font-size:11px;font-weight:700;color:#fff;background:var(--warn);padding:2px 8px;border-radius:999px}
.store-item{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px;border-left:4px solid transparent}
.store-item.r-common{border-left-color:var(--rarity-common)}
.store-item.r-rare{border-left-color:var(--rarity-rare);box-shadow:0 0 14px rgba(0,229,255,.12)}
.store-item.r-epic{border-left-color:var(--rarity-epic);box-shadow:0 0 14px rgba(185,166,255,.14)}
.store-item.r-legend{border-left-color:var(--rarity-legend);box-shadow:0 0 14px rgba(255,210,74,.16)}
.store-item.r-mythic{border-left-color:transparent;border-image:var(--rarity-mythic) 1;box-shadow:0 0 18px rgba(255,93,143,.2)}
.si-ico{width:48px;height:48px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--panel);overflow:hidden}
.si-ico svg{width:40px;height:40px;display:block}
.rarity-chip{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;margin-top:4px}
.rarity-chip.common{color:var(--rarity-common);background:rgba(154,154,200,.14)}
.rarity-chip.rare{color:var(--rarity-rare);background:rgba(0,229,255,.14)}
.rarity-chip.epic{color:var(--rarity-epic);background:rgba(185,166,255,.14)}
.rarity-chip.legend{color:var(--rarity-legend);background:rgba(255,210,74,.14)}
.rarity-chip.mythic{color:#fff;background:linear-gradient(135deg,#ffd24a,#ff5d8f);}
.si-owned{position:absolute;top:8px;left:8px;background:var(--good);color:#04121c;font-size:10px;font-weight:800;padding:2px 6px;border-radius:8px}
.store-item{position:relative}
.coin-mini{font-weight:800;display:inline-flex;align-items:center;gap:4px}
.coin-mini .ico{width:15px;height:15px}
.coin-mini.bean{color:var(--gold)}
.coin-mini.sand{color:var(--cyan)}

/* 至尊礼包 */
.supreme{background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(255,93,143,.12));
  border:1px solid transparent;border-image:var(--rarity-mythic) 1;border-radius:18px;padding:16px;margin:8px 0 16px}
.supreme h3{margin:0 0 6px;font-size:18px;background:var(--rarity-mythic);-webkit-background-clip:text;background-clip:text;color:transparent}
.supreme .sup-body{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.supreme .sup-list{flex:1;min-width:180px;font-size:13px;color:var(--muted);line-height:1.9}
.supreme .sup-list b{color:var(--txt)}
.supreme .ribbon{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--warn);padding:2px 10px;border-radius:999px;margin-bottom:8px}

/* 幸运扭蛋 */
.gacha-machine{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px;margin:8px 0 16px}
.gacha-caps{display:flex;gap:8px;justify-content:center}
.gacha-caps .cap{width:22px;height:30px;border-radius:11px 11px 9px 9px;box-shadow:inset 0 -6px 8px rgba(0,0,0,.25)}
.gacha-caps .c-rare{background:var(--rarity-rare)}
.gacha-caps .c-epic{background:var(--rarity-epic)}
.gacha-caps .c-legend{background:var(--rarity-legend)}
.gacha-caps .c-mythic{background:linear-gradient(135deg,#ffd24a,#ff5d8f)}
.gacha-odds{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7}
.gacha-pity{font-size:12px;color:var(--gold);text-align:center;margin-top:4px}
.gacha-actions{display:flex;gap:10px;width:100%}
.gacha-actions .btn{flex:1;min-height:var(--touch)}
.gacha-result{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.gacha-prize{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);min-width:84px}
.gacha-prize .gp-name{font-size:12px;font-weight:700}
.gacha-prize .gp-rar{font-size:10px}

/* ---------- 每日签到 ---------- */
.checkin-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.checkin-cell{aspect-ratio:1/1;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;min-height:var(--touch)}
.checkin-cell .cd{font-size:11px;color:var(--muted)}
.checkin-cell .cv{font-size:13px;font-weight:800}
.checkin-cell .cico{width:22px;height:22px}
.checkin-cell.done{opacity:.5}
.checkin-cell.done::after{content:"✓";position:absolute;top:4px;right:6px;color:var(--good);font-weight:900}
.checkin-cell.today{border-color:var(--accent-2);box-shadow:0 0 16px rgba(0,229,255,.35);cursor:pointer}
.checkin-cell.today::before{content:"";position:absolute;inset:0;border-radius:14px;animation:pulse 1.6s ease-in-out infinite;border:1px solid var(--accent-2)}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.7}}
.checkin-cell.locked{opacity:.4}
.checkin-info{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.checkin-streak{color:var(--gold);font-weight:800}

/* ---------- S1 赛季 ---------- */
.season-head{position:relative;border-radius:18px;padding:18px;overflow:hidden;
  background:var(--season);background-size:200% 200%;animation:seasonShift 8s ease infinite;margin-bottom:14px}
@keyframes seasonShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.season-head::before{content:"";position:absolute;inset:0;background:rgba(8,8,18,.62)}
.season-head>*{position:relative}
.season-head h2{margin:0;font-size:22px;color:#fff}
.season-head .sub{font-size:12px;color:#e8e8ff;opacity:.9;margin-top:4px}
.season-meta{display:flex;gap:12px;margin:12px 0;flex-wrap:wrap}
.season-meta .sm{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex:1;min-width:120px}
.season-meta .sm .k{font-size:11px;color:var(--muted)}
.season-meta .sm .v{font-size:18px;font-weight:900;background:var(--season);-webkit-background-clip:text;background-clip:text;color:transparent}
.season-track{display:flex;flex-direction:column;gap:0;margin:14px 0}
.season-node{display:flex;gap:12px;align-items:center;padding:10px 0;position:relative}
.season-node:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:-10px;width:2px;background:var(--line)}
.season-dot{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);font-weight:800;color:var(--muted);z-index:1;min-width:var(--touch);min-height:var(--touch)}
.season-node.claimable .season-dot{background:var(--season);color:#fff;border:none;animation:pulse 1.6s infinite}
.season-node.claimed .season-dot{border-color:var(--good);color:var(--good)}
.season-node .sn-body{flex:1}
.season-node .sn-title{font-weight:700;font-size:14px}
.season-node .sn-reward{font-size:12px;color:var(--muted)}
.season-node .btn{flex:none;min-width:84px;min-height:var(--touch)}
.season-buffs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.season-buff{display:inline-flex;align-items:center;gap:6px;background:rgba(0,229,255,.10);border:1px solid rgba(0,229,255,.3);
  border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--cyan);font-weight:700;min-height:var(--touch)}

/* ---------- 底部 Tab 栏（H5 · 5 项裁定） ---------- */
.bottombar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bottombar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);display:flex;background:var(--panel);border-top:1px solid var(--line);z-index:30}
.bottombar a{flex:1;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-size:11px;text-decoration:none;position:relative;cursor:pointer}
.bottombar a .bico{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.bottombar a .bico svg{width:22px;height:22px}
.bottombar a.active{color:var(--accent-2)}
.bottombar a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--accent-2)}
.screen{padding-bottom:calc(var(--bottombar) + env(safe-area-inset-bottom) + 52px)}

/* ---------- 设置：主题 / 高对比 ---------- */
.set-row select{min-width:140px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:8px 0 14px}
.theme-chip{border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;cursor:pointer;background:var(--panel-2);min-height:var(--touch)}
.theme-chip .sw{height:30px;border-radius:8px;margin-bottom:6px;border:1px solid rgba(255,255,255,.12)}
.theme-chip.active{border-color:var(--accent-2);box-shadow:0 0 14px rgba(0,229,255,.3)}
.theme-chip .tn{font-size:11px;color:var(--muted)}

/* ===================================================================
   皮肤主题系统 · [data-skin] 覆盖令牌（visual-bible-extension §5）
   基因约束：棋盘背景暗于 --bg，UI 强调色在品牌色域内偏移。
   =================================================================== */
:root,
[data-skin="neon"]{
  --bI:#00e5ff;--bO:#ffd24a;--bT:#7c5cff;--bS:#37e6a0;--bZ:#ff5d8f;--bJ:#5c8dff;--bL:#ff9d5c;
  --grid:#2a2a4d;--emblem:#7c5cff;--board-bg:#0a0a14;
}
[data-skin="deepsea"]{
  --bI:#4fd1e5;--bO:#ffd98a;--bT:#2f7fd1;--bS:#36e0a0;--bZ:#ff7a9c;--bJ:#3a5bd0;--bL:#ffb15c;
  --grid:#123040;--emblem:#4fd1e5;--board-bg:#04121c;
}
[data-skin="cyber"]{
  --bI:#00e5ff;--bO:#ff2d95;--bT:#b14bff;--bS:#2bff88;--bZ:#ff3b3b;--bJ:#2d6bff;--bL:#ffd000;
  --grid:#241433;--emblem:#ff2d95;--board-bg:#0a0a16;
}
[data-skin="guofeng"]{
  --bI:#2e8b8b;--bO:#d4af37;--bT:#8c1c13;--bS:#3ca35a;--bZ:#c0392b;--bJ:#1c2b4a;--bL:#e0a030;
  --grid:#2a241c;--emblem:#8c1c13;--board-bg:#0e0d0a;
}
[data-skin="festival"]{
  --bI:#ff5d5d;--bO:#ffd24a;--bT:#37e6a0;--bS:#ff8f3c;--bZ:#ff3b6b;--bJ:#5c8dff;--bL:#c77dff;
  --grid:#2a1830;--emblem:#ff5d5d;--board-bg:#0a0710;
}
[data-skin="season_S1"]{
  --bI:#ff5d8f;--bO:#ffd24a;--bT:#7c5cff;--bS:#37e6a0;--bZ:#00e5ff;--bJ:#9b7bff;--bL:#ff9d5c;
  --grid:#3a2a5a;--emblem:#ff5d8f;--board-bg:#0a0a14;
}
/* 皮肤主题对全局 UI 强调色的轻微影响（不破坏品牌统一感） */
[data-skin="deepsea"]{--accent:#4f9bff}
[data-skin="cyber"]{--accent:#ff2d95}
[data-skin="guofeng"]{--accent:#c0392b}
[data-skin="festival"]{--accent:#ff5d5d}
[data-skin="season_S1"]{--accent:#ff5d8f}
[data-skin="season_S1"] #bg-aurora{background:linear-gradient(135deg,rgba(255,93,143,.18),transparent 60%),linear-gradient(45deg,rgba(124,92,255,.16),transparent 60%),linear-gradient(90deg,rgba(0,229,255,.14),transparent 60%)}

/* ===================================================================
   高对比模式 · body.hc（accessibility-requirements §2）
   =================================================================== */
body.hc{--bg:#000;--panel:#0d0d16;--panel-2:#16162a;--line:#5a5a8a;--txt:#ffffff;--muted:#cfcfe8;--accent:#9b7bff;--accent-2:#5ff0ff}
body.hc .store-item,.vip-card,.supreme,.gacha-machine,.checkin-cell,.season-node .sn-body{box-shadow:none!important}
body.hc .badge{filter:drop-shadow(0 0 2px #000)!important}

/* ===================================================================
   触控目标 ≥44px（H5 红线） + 动效尊重 prefers-reduced-motion
   =================================================================== */
.btn,.tab,.item-btn,.lb-tab,.mode-card,.store-item .btn,.cat-tabs .tab{min-height:var(--touch)}
.item-btn{min-height:var(--touch);min-width:var(--touch)}
.bottombar a,.checkin-cell,.season-dot,.theme-chip,.vip-node{min-height:var(--touch)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  #bg-aurora{animation:none}
  .badge.lv7{animation:none}
}

/* 桌面端隐藏底部 Tab（沿用键盘鼠标），移动端显示（由断点控制） */
@media (min-width:769px){ .bottombar{display:none} .screen{padding-bottom:calc(52px + env(safe-area-inset-bottom) + 20px)} .site-beian{bottom:0} }
@media (max-width:768px){ .bottombar{display:flex} }

/* ============ W2-2 社交表情反应条 + 浮动表情（纯本地，零依赖） ============ */
.emoji-react-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px}
.emoji-react-bar .erb-label{color:var(--muted);font-size:13px;margin-right:2px}
.erb-btn{font-size:22px;line-height:1;width:var(--touch);height:var(--touch);min-width:var(--touch);min-height:var(--touch);
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease, background .12s ease}
.erb-btn:active{transform:scale(.86);background:rgba(124,92,255,.22)}
.emoji-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.emoji-float{position:absolute;font-size:34px;line-height:1;will-change:transform,opacity;
  animation:emojiFloat 1.1s ease-out forwards}
@keyframes emojiFloat{
  0%{transform:translateY(0) scale(.6);opacity:0}
  15%{opacity:1;transform:translateY(-10px) scale(1.1)}
  100%{transform:translateY(-160px) scale(1);opacity:0}
}

/* ============ W2-2 消除/连击/胜负闪光（≤300ms，纯视觉，不阻塞输入） ============ */
.fx-flash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 62%,
    rgba(0,229,255,var(--fx-alpha,0.3)) 0%,
    rgba(124,92,255,calc(var(--fx-alpha,0.3) * 0.6)) 42%,
    transparent 72%);
  mix-blend-mode:screen}
@keyframes fxFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ============ S-G5.1 特效：辉光（纯视觉，独立 class，不碰 data-skin） ============ */
.fx-glow #board{ box-shadow:0 0 24px var(--accent); transition:box-shadow .3s; }

/* =====================================================================
   联机大厅 功能增强 v1 · 视觉（art-director lobby-visual.md · 派生令牌 + 新组件类）
   仅追加，不改动任何现有类；数值严格遵循视觉规格 §2/§3。
   ===================================================================== */
/* —— 派生令牌（不含新品牌主色） —— */
:root{
  --ava-bg:linear-gradient(135deg,var(--accent),var(--accent-2));
  --team-red:var(--attack);
  --team-blue:#5c8dff;
  --live:#ff5d8f;
  --on:#37e6a0;
  --r-card:12px;
  --r-pill:999px;
  --r-modal:16px;
  --r-sm:10px;
  --t-ui:160ms ease;
}
body.hc{ --team-blue:#7fb0ff; --ava-bg:linear-gradient(135deg,#9b7bff,#5ff0ff); }

/* —— 大厅头 —— */
.lh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.lh-online{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.lh-online b{color:var(--txt);font-weight:800;font-size:13px}
.lh-input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);padding:12px 14px;font-size:15px}
.lh-input:focus{border-color:var(--accent);outline:none}
.lh-chip{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 14px 6px 6px;min-height:var(--touch);cursor:pointer}
.lh-chip:hover{border-color:var(--accent-2)}
.lh-ava{position:relative;width:36px;height:36px;border-radius:50%;
  background:var(--ava-bg);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;flex:none}
.lh-ava .badge{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px}
.lh-name{font-weight:700;font-size:14px;color:var(--txt);max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-edit{margin-left:2px;border:none;background:transparent;color:var(--muted);font-size:14px;
  cursor:pointer;width:var(--touch);height:var(--touch);border-radius:50%}
.lh-edit:hover{color:var(--accent-2)}

/* —— 模式 Tab —— */
.mode-tabs{display:flex;gap:8px;margin-bottom:14px}
.mode-tab{flex:1;min-height:var(--touch);padding:10px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-weight:600;font-size:14px;cursor:pointer;text-align:center;transition:var(--t-ui)}
.mode-tab:hover{border-color:var(--accent-2);color:var(--txt)}
.mode-tab.active{background:linear-gradient(135deg,var(--accent),#9b7bff);
  color:#fff;border:none}
.mode-tab:active{transform:scale(.97)}

/* —— 富房间卡 —— */
.rc{display:flex;align-items:center;gap:12px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;
  transition:var(--t-ui);cursor:pointer}
.rc:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--glow)}
.rc:active{transform:translateY(0)}
.rc-host{position:relative;width:40px;height:40px;border-radius:50%;
  background:var(--ava-bg);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;flex:none}
.rc-host .badge{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px}
.rc-main{flex:1;min-width:0}
.rc-mode{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--txt)}
.rc-mode .mi{font-size:18px}
.rc-meta{font-size:12px;color:var(--muted);margin-top:2px}
.rc-aside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.rc-join{min-width:84px}
.rc-count{height:5px;border-radius:var(--r-pill);background:var(--line);
  overflow:hidden;margin-top:8px}
.rc-count > i{display:block;height:100%;background:var(--accent);
  border-radius:var(--r-pill);transition:width .3s ease}
.rc-count.full > i{background:var(--good)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 8px rgba(255,93,143,.6);
  animation:live-pulse 1.4s ease-in-out infinite;flex:none}
.rc-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.rc-status.wait{background:rgba(154,154,200,.14);color:var(--muted)}
.rc-status.live{background:rgba(255,93,143,.14);color:var(--warn)}
.dot-on{width:7px;height:7px;border-radius:50%;background:var(--on);
  box-shadow:0 0 8px rgba(55,230,160,.6);
  animation:pulse 1.6s ease-in-out infinite;flex:none}

/* —— 快速匹配遮罩 —— */
.qm-mask{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(4,4,10,.72);backdrop-filter:blur(3px);animation:fade-in var(--t-ui)}
.qm-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-modal);
  padding:28px 26px;width:min(320px,88vw);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:modal-in var(--t-ui)}
.qm-spin{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
  border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);
  animation:spinner-rotate .8s linear infinite}
.qm-title{font-size:17px;font-weight:800;color:var(--txt)}
.qm-timer{margin-top:6px;font-size:13px;color:var(--muted)}
.qm-timer b{color:var(--accent-2);font-weight:800;font-variant-numeric:tabular-nums}
.qm-cancel{margin-top:18px;width:100%}

/* —— 创建房间模态 —— */
.cr-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-modal);
  padding:24px;width:min(420px,92vw);max-height:90vh;overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modal-in var(--t-ui)}
.cr-card h2{margin:0 0 16px;font-size:22px}
.cr-field{margin-bottom:14px}
.cr-field > label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.3px}
.cr-input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);padding:13px;font-size:15px}
.cr-input:focus{border-color:var(--accent);outline:none}
.cr-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cr-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-card);
  color:var(--muted);cursor:pointer;transition:var(--t-ui);min-height:var(--touch);text-align:center}
.cr-opt .ico{font-size:26px}
.cr-opt .nm{font-weight:700;font-size:14px}
.cr-opt.sel{border-color:var(--accent-2);color:var(--txt);
  background:rgba(0,229,255,.08);box-shadow:0 0 16px rgba(0,229,255,.22)}
.cr-actions{display:flex;gap:10px;margin-top:18px}
.cr-actions .btn{flex:1}

/* —— 好友面板 —— */
.fp{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);
  margin:14px 0;overflow:hidden}
.fp-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;cursor:pointer;min-height:var(--touch)}
.fp-head h3{margin:0;font-size:15px;font-weight:800;color:var(--txt)}
.fp-caret{color:var(--muted);font-size:13px;transition:transform var(--t-ui)}
.fp.collapsed .fp-caret{transform:rotate(-90deg)}
.fp-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
.fp-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px}
.fp-ava{position:relative;width:32px;height:32px;border-radius:50%;background:var(--ava-bg);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex:none}
.fp-ava .badge{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px}
.fp-name{flex:1;min-width:0;font-weight:600;font-size:14px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-dot{width:8px;height:8px;border-radius:50%;flex:none}
.fp-dot.on{background:var(--on);box-shadow:0 0 8px rgba(55,230,160,.6)}
.fp-dot.off{background:var(--slate)}
.fp-invite{min-width:64px}

/* —— 房间内富玩家卡 —— */
.rpc{position:relative;display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-left:4px solid transparent;border-radius:var(--r-card);
  padding:10px 12px;transition:var(--t-ui)}
.rpc.red{border-left-color:var(--team-red)}
.rpc.blue{border-left-color:var(--team-blue)}
.rpc.ready{border-color:rgba(55,230,160,.5)}
.rpc-ava{position:relative;width:36px;height:36px;border-radius:50%;background:var(--ava-bg);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex:none}
.rpc-ava .badge{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px}
.rpc-name{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpc-host .rpc-crown{position:absolute;top:-9px;left:10px;font-size:15px;
  filter:drop-shadow(0 0 4px rgba(255,210,74,.6))}
.rpc-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);flex:none}
.rpc-tag.alive{color:var(--good);background:rgba(55,230,160,.14)}
.rpc-tag.out{color:var(--muted);background:rgba(154,154,200,.12);text-decoration:line-through}
.rpc-team{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);flex:none}
.rpc.red .rpc-team{color:var(--team-red);background:rgba(255,93,108,.14)}
.rpc.blue .rpc-team{color:var(--team-blue);background:rgba(92,141,255,.14)}

/* —— 空状态 —— */
.estate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 20px;text-align:center;color:var(--muted)}
.estate-ico{font-size:34px;line-height:1;opacity:.92}
.estate-txt{font-size:13px;line-height:1.7;max-width:260px}
.estate-cta{margin-top:4px}
.estate.warn .estate-ico{filter:drop-shadow(0 0 10px rgba(255,93,143,.4))}

/* —— 小徽章工具类（18/16/14 三档） —— */
.badge.sm{width:18px;height:18px}
.badge.sm2{width:16px;height:16px}
.badge.sm3{width:14px;height:14px}

/* —— 动效（@keyframes 集中；pulse/drift/irid 沿用既有，不重定义） —— */
@keyframes spinner-rotate{to{transform:rotate(360deg)}}
@keyframes live-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.4);opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* —— 动效尊重 prefers-reduced-motion（作用域确认，保留即时状态） —— */
@media (prefers-reduced-motion:reduce){
  .qm-spin,.dot-live,.dot-on,.qm-mask,.qm-card,.cr-card,.rc,.mode-tab,.cr-opt{
    animation:none!important;transition:none!important}
  .qm-spin{border-top-color:var(--accent)}
  .dot-live{opacity:1}
}

/* —— 焦点态（focus-visible，不靠颜色 alone） —— */
.btn:focus-visible,.mode-tab:focus-visible,.cr-opt:focus-visible,
.rc:focus-visible,.fp-head:focus-visible,.fp-invite:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px}

/* =====================================================================
   着陆规格样式层 · art-director（landing-spec §S1/S2/S5/C3/C4/C6）
   追加区：仅新增规则，不改任何既有类/值；令牌·组件·keyframes 集中于此。
   依赖 DOM（由 engineering-lead 注入，契约不在此改 HTML）：
     #fx-reverse(.fx-reverse__title/.fx-reverse__particles) · #fx-promo(.fx-promo__badge)
     .trust-badge · .lb-trust · .locked/.is-locked
     #how-modal 分步(.how-steps/.tower-compare…) · C6(.store-guard/.si-tag/.ad-slot)
   ===================================================================== */

/* —— 派生令牌（不含新品牌主色，全部复用既有色域） —— */
:root{
  --rev-from:#00e5ff;            /* 逆转字幕渐变起点（S1-brief） */
  --rev-to:#7c5cff;              /* 逆转字幕渐变终点 */
  --rev-gold:#ffd86b;            /* 逆转金描边（S1-brief #ffd86b） */
  --rev-grad:linear-gradient(100deg,var(--rev-from),var(--rev-to));
  --trust-gold:#ffd24a;          /* 信任金（对齐 --gold） */
  --trust-bg:rgba(255,210,74,.10);
  --trust-line:rgba(255,210,74,.38);
  --lock:#6b6b9c;                /* 未解锁灰（对齐 --slate） */
  --tower-self:#ff5d6c;          /* 塔高对比·己方红（对齐 --attack） */
  --tower-opp:#5c8dff;           /* 塔高对比·对手蓝（对齐 --team-blue） */
  --guard:#37e6a0;               /* 护栏绿（对齐 --good） */
  --rev-ms:900ms;                /* 逆转字幕时长（S1-brief） */
  --rev-z:70;                    /* 全屏 FX 层级（覆盖对局，低于 toast 999） */
}
body.hc{ --rev-grad:linear-gradient(100deg,#5ff0ff,#9b7bff); --trust-line:#a98cff; --tower-self:#ff8f9c; --tower-opp:#7fb0ff; }

/* ============ S1 · 逆转反杀字幕 (#fx-reverse) ============ */
#fx-reverse{
  position:fixed; inset:0; z-index:var(--rev-z); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
}
#fx-reverse.is-show{ opacity:1; visibility:visible; }
#fx-reverse::before{   /* 屏幕边缘金色描边脉冲（2 次） */
  content:""; position:absolute; inset:0; border-radius:18px;
  border:3px solid var(--rev-gold); box-shadow:inset 0 0 24px rgba(255,210,74,.5);
  opacity:0;
}
#fx-reverse.is-show::before{ animation:rev-edge 120ms ease-in-out 2; }
.fx-reverse__title{
  position:relative; z-index:1; margin:0; padding:0 10px; text-align:center;
  font-size:clamp(48px,12vw,120px); font-weight:900; letter-spacing:2px; line-height:1.05;
  background:var(--rev-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:2px var(--rev-gold); paint-order:stroke fill;
  text-shadow:0 0 34px rgba(124,92,255,.55);
}
#fx-reverse.is-show .fx-reverse__title{ animation:reverse-pop var(--rev-ms) cubic-bezier(.2,.9,.2,1) both; }
.fx-reverse__particles{ position:absolute; inset:0; overflow:hidden; }
#fx-reverse.is-show .fx-reverse__particles{ animation:rev-flash 480ms ease-out both; } /* 白闪→径向（§4.1 ×3） */
.fx-reverse__particles > i,.fx-reverse__particles > span{ /* JS 注入的径向粒子（规模×3） */
  position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#fff,#9b7bff 60%,transparent 70%); opacity:0;
  animation:rev-particle 480ms ease-out forwards;
}
/* 屏震钩子（S1-brief shakeAmt=12px / 140ms，复用 #board） */
#board.reversal-shake{ animation:rev-shake 140ms linear; }

/* ============ S1 · 晋级「从 X 到 Y」横幅 (#fx-promo) ============ */
#fx-promo{
  position:fixed; inset:0; z-index:calc(var(--rev-z) + 2); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
}
#fx-promo.is-show{ opacity:1; visibility:visible; }
.fx-promo__badge{
  position:relative; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:26px 42px; border-radius:var(--r-modal);
  background:linear-gradient(135deg,rgba(255,93,143,.20),rgba(124,92,255,.16),rgba(0,229,255,.12));
  border:1px solid var(--trust-line);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 44px rgba(255,210,74,.22);
  transform:translateX(-120%);
}
#fx-promo.is-show .fx-promo__badge{ animation:promo-sweep 1.2s cubic-bezier(.2,.9,.2,1) both; }
.fx-promo__badge .fx-promo__title{
  font-size:clamp(20px,5vw,32px); font-weight:900; letter-spacing:1px; line-height:1.2;
  background:var(--rev-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fx-promo__badge .fx-promo__sub{ font-size:13px; color:var(--gold-soft); }
.fx-promo__badge .badge{ width:52px; height:52px; margin:2px auto 0; }   /* 三编码段位徽章（memberBadgeSVG） */
.fx-skip{   /* 可跳过（尊重 Autonomy） */
  position:absolute; right:16px; bottom:16px; pointer-events:auto;
  font-size:12px; color:var(--muted); background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; cursor:pointer;
}

/* ============ S1 · 本局高光卡 (.highlight-card) ============ */
.highlight-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-card); padding:14px; margin-top:14px; }
.highlight-card h4{ margin:0 0 10px; font-size:14px; color:var(--accent-2); }
.hl-timeline{ display:flex; flex-direction:column; gap:8px; }
.hl-node{ display:flex; align-items:center; gap:10px; }
.hl-ico{ width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--panel); border:1px solid var(--line); }
.hl-node.maxdown .hl-ico{ border-color:var(--tower-self); color:#ff8f9c; }
.hl-node.comeback .hl-ico{ border-color:var(--accent-2); color:var(--accent-2); }
.hl-node.reversal .hl-ico{ border-color:var(--gold); color:var(--gold); }
.hl-txt{ font-size:13px; line-height:1.5; }
.hl-txt b{ color:var(--txt); }

/* ============ S2 · 信任徽章 (.trust-badge，置于 #lh-chip 内) ============ */
.trust-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; color:var(--trust-gold); white-space:nowrap;
  background:var(--trust-bg); border:1px solid var(--trust-line);
  border-radius:var(--r-pill); padding:5px 12px; min-height:var(--touch);
}
.trust-badge .ico,.trust-badge svg{ width:16px; height:16px; flex:none; display:block; }

/* ============ S2 · 赛季进度视觉 ============ */
#season-progress{   /* 强化为进度胶囊（原已是渐变文字） */
  display:inline-block; padding:2px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.season-progress-bar{ height:8px; border-radius:var(--r-pill); background:#0e1430; overflow:hidden; margin-top:8px; } /* JS 可选注入：<i style="width:..%"> */
.season-progress-bar > i{ display:block; height:100%; background:var(--season); border-radius:var(--r-pill); transition:width .4s ease; }

/* ============ S5 · 榜单信任横条 (.lb-trust) ============ */
.lb-trust{
  display:flex; align-items:center; gap:10px; min-height:var(--touch);
  padding:10px 14px; margin-bottom:12px;
  background:linear-gradient(90deg,rgba(255,210,74,.14),rgba(255,210,74,.03));
  border:1px solid var(--trust-line); border-left:4px solid var(--trust-gold);
  border-radius:var(--r-card);
  font-size:13px; font-weight:800; color:var(--trust-gold);
}
.lb-trust .ico,.lb-trust svg{ width:20px; height:20px; flex:none; display:block; }
.lb-trust .lb-trust__sub{ margin-left:auto; font-size:11px; font-weight:600; color:var(--muted); }

/* ============ C3 · 渐进披露未解锁态 (.locked / .is-locked) ============ */
.locked,.is-locked{ position:relative; filter:grayscale(1) brightness(.72); opacity:.58; pointer-events:none; cursor:not-allowed; }
.locked::after,.is-locked::after{   /* 角落锁图标（白锁 SVG 于灰底圆，色盲安全：形状编码） */
  content:""; position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background-color:var(--lock);
  background-image:url("../design/assets/lock.svg"); background-size:13px; background-position:center; background-repeat:no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* ============ C4 · 引导分步 + 塔高对比条 (#how-modal) ============ */
#how-modal .modal-card{ position:relative; max-width:min(480px,92vw); }
.how-steps{ display:flex; gap:6px; margin:0 0 16px; }
.how-step{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--line); transition:background .3s; }
.how-step.done{ background:var(--accent); }
.how-step.active{ background:var(--accent-2); box-shadow:0 0 10px rgba(0,229,255,.45); }
.how-body{ font-size:14px; line-height:1.7; color:var(--txt); animation:how-fade .3s ease both; }
.how-body b{ color:var(--accent-2); }
.how-figure{ margin:14px 0; padding:14px; border-radius:var(--r-card); background:var(--panel-2); border:1px solid var(--line); }
.tower-compare{ display:flex; align-items:flex-end; justify-content:center; gap:22px; height:140px; }
.tower-col{ display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.tower-bar{ width:46px; border-radius:10px 10px 6px 6px; box-shadow:inset 0 -8px 14px rgba(0,0,0,.28); transition:height .45s cubic-bezier(.2,.9,.2,1); }
.tower-self .tower-bar{ background:linear-gradient(180deg,#ff8f9c,var(--tower-self)); } /* 己方红 */
.tower-opp .tower-bar{ background:linear-gradient(180deg,#9bb8ff,var(--tower-opp)); }   /* 对手蓝 */
.tower-cap{ font-size:12px; color:var(--muted); white-space:nowrap; }
.tower-self .tower-cap{ color:#ff8f9c; }
.tower-opp .tower-cap{ color:#9bb8ff; }
.how-actions{ display:flex; gap:10px; margin-top:18px; }
.how-actions .btn{ flex:1; }
.how-skip{ position:absolute; top:14px; right:14px; font-size:12px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; cursor:pointer; min-height:var(--touch); }

/* ============ C6 · 护栏 UI（商城 SKU 分类 / 广告位） ============ */
.store-guard{   /* 商城顶部护栏声明（禁付费制胜，纯视觉） */
  display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 14px;
  border-radius:var(--r-card); background:rgba(55,230,160,.08); border:1px solid rgba(55,230,160,.3);
  font-size:12px; color:var(--guard); line-height:1.5;
}
.si-tag{ display:inline-block; font-size:10px; font-weight:800; padding:1px 7px; border-radius:999px; margin-top:4px; }
.si-tag.cosmetic{ color:var(--cyan); background:rgba(0,229,255,.14); }  /* 纯外观 */
.si-tag.season{ color:var(--gold); background:rgba(255,210,74,.14); }   /* 赛季 */
.si-tag.conv{ color:var(--guard); background:rgba(55,230,160,.14); }     /* 便利 */
.si-tag.guard{ color:#fff; background:rgba(154,154,200,.22); }          /* 不影响战力·护栏 */
.ad-slot{   /* 广告位：非核心/结算视觉位（虚线 demarcation） */
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:var(--touch);
  padding:12px 14px; border-radius:var(--r-card);
  border:1px dashed rgba(154,154,200,.45); background:rgba(255,255,255,.03);
  color:var(--muted); font-size:12.5px;
}
.ad-slot .ad-tag{ font-size:10px; font-weight:800; color:var(--trust-gold); background:var(--trust-bg); border:1px solid var(--trust-line); padding:1px 8px; border-radius:999px; }
.ad-slot.reward{ border-style:solid; border-color:rgba(55,230,160,.32); background:rgba(55,230,160,.06); } /* 激励视频：仅奖励性 */
.ad-slot.reward .ad-tag{ color:var(--guard); background:rgba(55,230,160,.14); border-color:rgba(55,230,160,.4); }

/* ============ @keyframes（新增；live-pulse/modal-in/pulse/irid/drift/seasonShift 沿用既有，不重定义） ============ */
@keyframes reverse-pop{
  0%{ transform:scale(.5); opacity:0; }
  55%{ transform:scale(1.10); opacity:1; }
  70%{ transform:scale(.95); }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes rev-edge{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }                              /* 边缘金脉冲×2 */
@keyframes rev-flash{                                                                      /* 白闪→径向（§4.1 ×3） */
  0%{ opacity:0; }
  18%{ opacity:1; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(0,229,255,.35) 36%, transparent 70%); }
  100%{ opacity:0; background:radial-gradient(circle at 50% 50%, transparent, transparent); }
}
@keyframes rev-particle{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; } 20%{ opacity:1; } 100%{ transform:translate(var(--px,-50%),var(--py,-50%)) scale(1); opacity:0; } }
@keyframes rev-shake{ 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-12px,6px); } 40%{ transform:translate(10px,-8px); } 60%{ transform:translate(-8px,4px); } 80%{ transform:translate(6px,-3px); } }
@keyframes promo-sweep{ 0%{ transform:translateX(-120%); opacity:0; } 18%{ opacity:1; } 35%{ transform:translateX(0); } 70%{ transform:translateX(0); } 100%{ transform:translateX(120%); opacity:0; } }
@keyframes how-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ============ 动效尊重 prefers-reduced-motion（保留即时可见态，仅去过渡/脉冲） ============ */
@media (prefers-reduced-motion:reduce){
  #fx-reverse,#fx-promo{ animation:none!important; }
  #fx-reverse::before,.fx-reverse__title,.fx-reverse__particles,
  .fx-reverse__particles > i,.fx-reverse__particles > span,
  .fx-promo__badge,#board.reversal-shake,.how-body,.how-step,.tower-bar,
  .season-progress-bar > i,.lb-trust,.trust-badge,.ad-slot,.store-guard{
    animation:none!important; transition:none!important;
  }
  #fx-reverse::before{ opacity:0; }     /* 无脉冲，仅保留字幕/横幅静态呈现 */
  .fx-reverse__title{ transform:none; }
  .fx-promo__badge{ transform:none; }
}

/* ============ 焦点态扩展（focus-visible，不靠颜色 alone） ============ */
.trust-badge:focus-visible,.lb-trust:focus-visible,.how-skip:focus-visible,
.ad-slot.reward:focus-visible,.fx-skip:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }