/* ═══════════════════════════════════════════════════════════════════
   screens.css — 多屏导航系统 + 底部 Tab 栏 + 各屏占位样式
   依赖：main.css（沿用现有暗金主题色值）
   ═══════════════════════════════════════════════════════════════════ */

/* === 顶层容器 === */
#app-root {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  display: flex; flex-direction: column;
}

/* 全局 Toast——跨屏可见，屏幕正中 */
.global-toast {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 99999;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px; font-weight: bold; font-family: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out, transform .25s ease-out;
  max-width: 90vw;
  text-align: center;
  line-height: 1.4;
}
.global-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
/* 错误态 */
.global-toast.error {
  color: #f88;
  background: rgba(120,30,30,.94);
  border: 1px solid rgba(220,80,80,.5);
  box-shadow: 0 4px 16px rgba(200,60,60,.25);
}
/* 成功态 */
.global-toast.success {
  color: #8f8;
  background: rgba(30,100,30,.94);
  border: 1px solid rgba(80,200,80,.5);
  box-shadow: 0 4px 16px rgba(60,180,60,.25);
}
/* 信息态 */
.global-toast.info {
  color: #ffd700;
  background: rgba(40,30,10,.94);
  border: 1px solid rgba(201,160,80,.5);
  box-shadow: 0 4px 16px rgba(201,160,80,.25);
}

/* === 通用屏幕容器 === */
.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.screen.active { display: flex; }

/* === 屏幕内容区（可滚动） === */
.screen-body {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,160,80,.3) transparent;
}
.screen-body::-webkit-scrollbar { width: 4px; }
.screen-body::-webkit-scrollbar-track { background: rgba(10,8,4,.4); }
.screen-body::-webkit-scrollbar-thumb {
  background: rgba(201,160,80,.3); border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════
   底部导航栏 —— 已删除源代码。导航由各屏内联按钮实现。
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   对战屏幕（包裹现有 #game）
   ═══════════════════════════════════════════════════════════ */
#screen-battle {
  /* display 由 .screen / .screen.active 控制，不在此覆写 */
}
#screen-battle.active {
  display: flex;
  /* 大厅模式不居中，由子元素自主布局；.in-game 时才居中 */
}
#screen-battle.active.in-game {
  align-items: center; justify-content: center;
}

/* 齿轮菜单（对战屏内）
   ★ 2026-08-16 用户拍板：移出 #game → fixed 视口锚定右上角；固定 40px 不随
   --battle-s 缩放（桌面手机一致）；"菜单"文字改齿轮图标；悬停旋转 90°。
   下拉菜单 top/right 由 toggleGearMenu 按按钮视口 rect 计算（fixed）。 */
#gear-btn {
  position: fixed; top: 12px; right: 12px; z-index: 700;  /* ★ 590→700 同历史按钮（大图不盖四角） */
  width: 40px; height: 40px; border-radius: 50%;
  background: #000; border: 1px solid #4a4a4a;   /* ★ 2026-08-23 实色不透明（用户拍板） */
  /* ★ 2026-08-16 默认隐藏——只在对局中显示（body.in-game 标记）：
     对战大厅同在 #screen-battle 内，此前齿轮在非对局界面照样可见（用户报"窜界面"）。
     setBattleHudHidden 恢复 display:'' 会回落到此规则：对局中 flex、非对局 none。 */
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .35s ease, border-color .2s, box-shadow .2s;
}
body.in-game #gear-btn { display: flex; }
#gear-btn img {
  width: 62%; height: 62%;
  pointer-events: none; /* 点击落在按钮上，img 不拦截 */
}
#gear-btn:hover {
  border-color: #ffd700;
  transform: rotate(90deg);   /* ★ 悬停旋转 90°（用户拍板） */
  box-shadow: 0 0 10px rgba(255,215,0,.35);
}
#gear-dropdown {
  display: none;
  position: fixed; z-index: 701; /* top/right 由 toggleGearMenu 动态设置；★ 591→701 跟随按钮抬层 */
  background: rgba(16,12,6,.96);
  border: 1px solid rgba(201,160,80,.2);
  border-radius: 8px; padding: 4px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}
#gear-dropdown.active { display: block; }
.gear-item {
  display: block; width: 100%; padding: 10px 16px;
  background: none; border: none; border-radius: 6px;
  color: #d4c8a0; font-size: 14px; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.gear-item:hover { background: rgba(201,160,80,.12); color: #ffd700; }
.gear-item.danger { color: #e88; }
.gear-item.danger:hover { background: rgba(200,80,80,.15); color: #faa; }

/* ═══════════════════════════════════════════════════════════════════
   四角圆形组件（2026-08-23 #7/#9 用户拍板）：
   左上=历史、右上=齿轮、左下=短语、右下=结束回合——全部 40px 圆形蒙板，
   fixed 视口锚定挂 body（不随 #game 缩放/翻转），body.in-game 门控显隐。
   ═══════════════════════════════════════════════════════════════════ */

/* 历史按钮（左上）——蒙板条点击向下弹出，再次点击收回 */
#history-btn {
  /* ★ 2026-08-23 z-index 590→700：大图 overlay 600 会盖住按钮（用户实机
     「按钮消失」）——700 压大图、低于功能弹窗（1000+，弹窗要求响应仍盖按钮） */
  position: fixed; top: 12px; left: 12px; z-index: 700;
  width: 40px; height: 40px; border-radius: 50%;
  /* ★ 2026-08-23 用户拍板：蒙板全部实色不透明——黑色就是黑色（原 rgba 半透明，
     点击开面板 .active 还变 25% 透明金，用户报「点击变透明」） */
  background: #000; border: 1px solid #4a4a4a;
  color: #d4c8a0; font-size: 13px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.in-game #history-btn { display: flex; }
#history-btn:hover, #history-btn.active { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,.35); }
/* ★ 2026-08-23 面板打开态只亮金边，蒙板保持纯黑（原 25% 透明金背景=「点击变透明」根因） */
#history-btn.active { background: #000; }

/* 历史蒙板条——按钮正下方弹出（向下滑入）。
   ★ 2026-08-23 用户拍板：竖排一列 4 张（最新在底部，新卡进来最上面消失） */
#battle-history-panel {
  position: fixed; top: 60px; left: 12px; z-index: 595;
  width: 60px;
  min-height: 60px;
  max-height: 274px;            /* 4 张 × 60px + 3 间隔 + 内边距——正好一列 4 张 */
  display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  background: rgba(12,10,6,.94); border: 1px solid #5a4a2a; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  overflow-x: hidden; overflow-y: auto;
  /* 收起态：向上缩回按钮（无布局 transform 的元素，transform 动画安全） */
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
body.in-game #battle-history-panel.open {
  display: flex; opacity: 1; transform: translateY(0); pointer-events: auto;
}
#battle-history-panel .bh-empty {
  color: #8a7a50; font-size: 13px; padding: 12px 16px; white-space: nowrap;
}
#battle-history-panel .bh-entry {
  flex-shrink: 0; width: 44px; height: 60px; padding: 0;
  border-radius: 4px; overflow: hidden;
  border: 2px solid #8a3a3a;   /* 对方=暗红描边 */
  background: rgba(0,0,0,.6);
  cursor: pointer; transition: transform .15s, border-color .15s;
}
#battle-history-panel .bh-entry.mine { border-color: #e6c268; }  /* 我方=金色描边 */
#battle-history-panel .bh-entry:hover { border-color: #ffd700; transform: translateY(-2px); }
#battle-history-panel .bh-entry img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 结束回合按钮（右下）——原 #end-button-zone 内按钮移出 #game（#9）。
   ★ 2026-08-23 用户追加拍板：放大 2 倍（40→80px）+ z 590→700（同历史按钮不盖） */
#btn-phase-next {
  position: fixed; bottom: 12px; right: 12px; z-index: 700;
  width: 80px; height: 80px; padding: 4px; min-width: 0;
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1.25; text-align: center;
  white-space: normal;   /* 4 字文案折两行排进圆内 */
}
body.in-game #btn-phase-next { display: flex; }

/* ★ 2026-08-23 用户拍板三态配色（实色不透明——黑色就是黑色、白色就是白色）：
   战斗结束=黑色蒙板+白字；结束回合=白色面板+黑字；等待=实色灰（去掉原 opacity:.6 半透明） */
#btn-phase-next.phase-battle { background: #000; border: 1px solid #4a4a4a; color: #fff; }
#btn-phase-next.phase-battle:hover { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,.35); }
#btn-phase-next.phase-end { background: #fff; border: 1px solid #4a4a4a; color: #000; }
#btn-phase-next.phase-end:hover { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,.35); }
#btn-phase-next.phase-wait { opacity: 1; background: #202020; border: 1px solid #3a3a3a; color: #8a8a8a; }
/* 禁用态（等待/链中）不再整体半透明——蒙板保持实色，用灰字+禁用光标表达 */
#btn-phase-next:disabled { opacity: 1; cursor: not-allowed; }

/* 通用游戏内确认弹窗 */
#game-confirm-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); z-index: 10000;
  align-items: center; justify-content: center;
}
#game-confirm-overlay.active { display: flex; }
#game-confirm-box {
  background: linear-gradient(160deg, #2a2018, #1a1410);
  border: 1px solid rgba(201,160,80,.3);
  border-radius: calc(12px * var(--battle-s,1)); padding: calc(24px * var(--battle-s,1)) calc(28px * var(--battle-s,1));
  min-width: calc(300px * var(--battle-s,1)); max-width: calc(420px * var(--battle-s,1));
  box-shadow: 0 calc(8px * var(--battle-s,1)) calc(32px * var(--battle-s,1)) rgba(0,0,0,.7), 0 0 0 1px rgba(255,215,0,.05) inset;
  text-align: center;
  animation: confirm-pop 0.2s ease-out;
}
@keyframes confirm-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#game-confirm-title {
  font-size: calc(18px * var(--battle-s,1)); font-weight: bold; color: #ffd700;
  margin-bottom: calc(10px * var(--battle-s,1));
}
#game-confirm-message {
  font-size: calc(14px * var(--battle-s,1)); color: #c9a050; line-height: 1.6;
  margin-bottom: calc(20px * var(--battle-s,1));
}
#game-confirm-btns {
  display: flex; gap: calc(12px * var(--battle-s,1)); justify-content: center;
}
#btn-game-confirm-yes {
  background: linear-gradient(180deg, #5a2020, #3a1010);
  border-color: #8a3a3a; color: #e88;
  padding: calc(8px * var(--battle-s,1)) calc(28px * var(--battle-s,1)); min-width: calc(90px * var(--battle-s,1));
}
#btn-game-confirm-yes:hover { background: #7a2a2a; border-color: #e55; color: #faa; }
#btn-game-confirm-no {
  background: rgba(201,160,80,.1); border-color: rgba(201,160,80,.2);
  color: #c9a050; padding: calc(8px * var(--battle-s,1)) calc(28px * var(--battle-s,1)); min-width: calc(90px * var(--battle-s,1));
}
#btn-game-confirm-no:hover { background: rgba(201,160,80,.2); border-color: #c9a050; }

/* ── 通用提示弹窗（独立于战斗确认弹窗）── */
#notice-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5); z-index: 10001;
  align-items: center; justify-content: center;
}
#notice-overlay.active { display: flex; }
#notice-box {
  background: #fff;
  border: 2px solid #222;
  border-radius: 8px; padding: 32px 36px 24px;
  min-width: 260px; max-width: 380px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  text-align: center;
  animation: confirm-pop 0.2s ease-out;
}
#notice-message {
  font-size: 16px; color: #1a1a1a; line-height: 1.7;
  margin-bottom: 16px;
}
#notice-box .game-btn {
  background: #fff; color: #1a1a1a;
  border: 1.5px solid #333;
  padding: 6px 36px; min-width: 80px;
  font-size: 14px; cursor: pointer;
}
#notice-box .game-btn:hover {
  background: #f5f5f5; border-color: #111;
}

/* ── 文字输入弹窗（复用 game-confirm 样式）── */
#text-prompt-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); z-index: 10001;
  align-items: center; justify-content: center;
}
#text-prompt-overlay.active { display: flex; }
#text-prompt-box {
  background: linear-gradient(160deg, #2a2018, #1a1410);
  border: 1px solid rgba(201,160,80,.3);
  border-radius: 12px; padding: 24px 28px;
  min-width: 300px; max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(255,215,0,.05) inset;
  text-align: center;
  animation: confirm-pop 0.2s ease-out;
}
#text-prompt-title {
  font-size: 18px; font-weight: bold; color: #ffd700;
  margin-bottom: 16px;
}
#text-prompt-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; font-size: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(201,160,80,.35);
  border-radius: 6px; color: #ffd700;
  outline: none; text-align: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
}
#text-prompt-input:focus { border-color: #c9a050; background: rgba(255,255,255,.12); }
#text-prompt-btns {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 16px;
}
#btn-text-prompt-ok {
  background: linear-gradient(180deg, #3a3a1a, #2a2a10);
  border-color: #8a8a3a; color: #dd8;
  padding: 8px 28px; min-width: 90px;
}
#btn-text-prompt-ok:hover { background: #5a5a2a; border-color: #c9c050; }
#btn-text-prompt-cancel {
  background: rgba(201,160,80,.1); border-color: rgba(201,160,80,.2);
  color: #c9a050; padding: 8px 28px; min-width: 90px;
}
#btn-text-prompt-cancel:hover { background: rgba(201,160,80,.2); border-color: #c9a050; }

/* ═══════════════════════════════════════════════════════════
   主界面
   ═══════════════════════════════════════════════════════════ */
.screen-logo {
  text-align: center; padding: 40px 20px 8px;
  font-size: 36px; font-weight: bold; color: #ffd700;
  text-shadow: 0 0 24px rgba(255,215,0,.4), 0 4px 8px rgba(0,0,0,.6);
  letter-spacing: 6px;
}
.screen-subtitle {
  text-align: center; font-size: 14px; color: #8a7a50;
  margin-bottom: 28px;
}
.menu-btn {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px;
  width: 100%; max-width: 280px; margin: 8px auto;
  padding: 14px 20px; font-size: 16px; font-weight: bold;
  border: 1px solid #8a7a4a; border-radius: 10px;
  background: linear-gradient(180deg, #3a3020, #2a2010);
  color: #d4c8a0; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: all 0.2s;
}
.menu-btn:hover {
  background: linear-gradient(180deg, #5a4a2a, #3a3020);
  border-color: #ffd700; color: #ffd700;
  transform: translateX(4px);
}
.menu-btn .menu-btn-icon { font-size: 24px; }
.player-info-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; margin-top: auto;
  background: rgba(20,14,10,.8);
  border-top: 1px solid rgba(201,160,80,.1);
  font-size: 12px; color: #8a7a50;
}

/* ═══════════════════════════════════════════════════════════
   通用占位组件
   ═══════════════════════════════════════════════════════════ */
.placeholder-block {
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(201,160,80,.12);
  border-radius: 8px; padding: 24px;
  color: #555; font-size: 14px; text-align: center;
  min-height: 120px;
  margin-bottom: 12px;
}
.placeholder-block.large { min-height: 200px; }

/* === 卡片缩略网格（卡组/收藏/交易共用） === */
.card-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.card-thumb {
  width: 100%; aspect-ratio: 80/112;
  background: rgba(255,255,255,.03);
  border-radius: 6px; cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  font-size: 24px; color: #555;
}
.card-thumb:hover {
  border-color: #ffd700; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,215,0,.3);
}
.card-thumb.unowned {
  opacity: 0.35; filter: grayscale(0.7);
}

/* ═══════════════════════════════════════════════════════════
   冒险模式 —— 待重构，旧 CSS 已删
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   竞技场——卡牌选择界面
   ═══════════════════════════════════════════════════════════ */

/* ★ 混搭布局：20:9 背景拉伸填满视口 */
#arena-select-bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #0d0b08;
}
/* 20:9 背景图——拉伸填充（用户拍板宁可变形不裁切） */
.arena-select-bg-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none; user-select: none;
}
/* ★ 等比容器——维持 1312:800 比例，JS 动态设尺寸和居中。
 *   蒙板和所有内容在此层内，不受背景拉伸影响。 */
#arena-select-proportional {
  position: absolute;
  /* width/height/left/top 由 resizeArenaSelectBgLayer() 动态设置 */
}
.arena-select-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

/* 卡牌选择框——视觉底由底板蒙板大面板承载（arena-select-mask.png），自身透明 */
.arena-select-pool {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
}
/* 4 张候选卡牌水平排列，居中 */
#arena-select-pool-cards {
  display: flex; gap: calc(16px * var(--arena-s)); align-items: center; justify-content: space-evenly;
  width: 100%; height: 100%;
  padding: calc(10px * var(--arena-s));
}

/* ★ 候选卡牌——完整卡框比例 5:7，高度接近框高 */
.arena-pool-card {
  flex-shrink: 0;
  width: calc(221px * var(--arena-s) * 1.5);
  height: calc(310px * var(--arena-s) * 1.5);
  background-image: url('../assets/card-frame.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  border-radius: calc(6px * var(--arena-s));
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  user-select: none;
  overflow: hidden;
}
/* 合成卡模式：卡面由 FullCard 承载，去掉底图；内卡流式充满 */
.arena-pool-card.fc-composited {
  background-image: none;
  display: flex; align-items: center; justify-content: center;
}
.arena-pool-card:hover {
  transform: translateY(calc(-4px * var(--arena-s)));
  box-shadow: 0 calc(6px * var(--arena-s)) calc(20px * var(--arena-s)) rgba(255,215,0,0.4);
  filter: brightness(1.1);
}
/* 卡牌内文字叠层——固定在卡框透明开窗区域 */
.arena-pool-card .card-name {
  position: absolute;
  top: 5%; left: 8%; right: 8%;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(15px * var(--arena-s));
  color: #f5e6c8;
  text-align: center;
  text-shadow: 0 calc(1px * var(--arena-s)) calc(3px * var(--arena-s)) rgba(0,0,0,.8);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.arena-pool-card .card-type-badge {
  position: absolute;
  top: 24%; left: 50%; transform: translateX(-50%);
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(11px * var(--arena-s));
  color: #8a7a50;
  background: rgba(0,0,0,.5);
  padding: calc(2px * var(--arena-s)) calc(8px * var(--arena-s));
  border-radius: calc(3px * var(--arena-s));
  pointer-events: none;
}
.arena-pool-card .card-stats {
  position: absolute;
  bottom: 18%; left: 8%; right: 8%;
  display: flex; justify-content: center; gap: calc(12px * var(--arena-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(13px * var(--arena-s));
  color: #ffd700;
  text-shadow: 0 calc(1px * var(--arena-s)) calc(3px * var(--arena-s)) rgba(0,0,0,.8);
  pointer-events: none;
}
.arena-pool-card .card-cost-icon {
  position: absolute;
  top: 3%; left: 56%;
  font-size: calc(12px * var(--arena-s));
  color: #7ec8e3;
  text-shadow: 0 0 calc(4px * var(--arena-s)) rgba(126,200,227,.5);
  pointer-events: none;
}

/* 已选卡牌框——视觉底由底板蒙板面板下区承载，自身透明 */
.arena-select-deck {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
}
/* ★ 已选卡牌——水平单排，拖拽滚动 */
#arena-select-deck-cards {
  display: flex; flex-wrap: nowrap; gap: calc(8px * var(--arena-s)); align-items: center;
  width: 100%; height: 100%;
  padding: calc(8px * var(--arena-s));
  overflow-x: auto; /* 触摸滑动 + JS 拖拽 */
  cursor: grab;
  user-select: none;
  /* 手游：隐藏滚动条，按住滑动不变 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#arena-select-deck-cards::-webkit-scrollbar { display: none; }
#arena-select-deck-cards.dragging { cursor: grabbing; }

/* ★ 卡组框内卡牌——合成卡实卡展示（对标卡组编辑牌库网格），FullCard 接管卡面 */
.arena-deck-card {
  flex-shrink: 0;
  width: calc(110px * var(--arena-s) * 1.25);
  height: calc(150px * var(--arena-s) * 1.25);
  background-image: url('../assets/card-frame.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  border-radius: calc(4px * var(--arena-s));
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}
/* 合成卡模式：卡面由 FullCard 承载，去掉底图；内卡流式充满 */
.arena-deck-card.fc-composited {
  background-image: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.arena-deck-card:hover {
  transform: translateY(calc(-2px * var(--arena-s)));
  box-shadow: 0 calc(3px * var(--arena-s)) calc(10px * var(--arena-s)) rgba(255,215,0,0.3);
}
/* 兜底：FullCard 未加载时的文字卡名 */
.arena-deck-card .deck-card-name {
  position: absolute;
  top: 6%; left: 6%; right: 6%;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(11px * var(--arena-s));
  color: #d4c8a0;
  text-align: center;
  text-shadow: 0 calc(1px * var(--arena-s)) calc(2px * var(--arena-s)) rgba(0,0,0,.8);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

/* 按钮——白色楷体，可点击 */
.arena-select-btn {
  position: absolute;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  color: rgba(255,255,255,1);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, text-shadow 0.2s;
}
.arena-select-btn:hover {
  color: #FFD700;
  text-shadow: 0 0 12px rgba(255,215,0,0.6);
}

/* 计数文字——白色楷体，不可点击 */
.arena-select-txt {
  position: absolute;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  color: rgba(255,255,255,1);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ★ 玻璃珠装饰——左右各 5 颗对称分布在蒙版两侧，--arena-s 等比缩放 */
.arena-glass-bead-col {
  position: absolute;
  top: 0;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: calc(4.4px * var(--arena-s, 1));
  height: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.arena-glass-bead-left {
  left: calc(-157px * var(--arena-s, 1));
}
.arena-glass-bead-right {
  right: calc(-157px * var(--arena-s, 1));
}
.arena-bead-wrap {
  position: relative;
  display: block;
}
.arena-glass-bead {
  display: block;
  width: calc(130.15px * var(--arena-s, 1));
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: 0.9;
}
.arena-bead-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(42px * var(--arena-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 calc(4px * var(--arena-s, 1)) rgba(0,0,0,.5);
  pointer-events: none;
  user-select: none;
}
.arena-bead-cnt {
  position: absolute;
  right: calc(4px * var(--arena-s, 1));
  bottom: calc(2px * var(--arena-s, 1));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(30px * var(--arena-s, 1));
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 calc(6px * var(--arena-s, 1)) rgba(255,215,0,.6), 0 calc(1px * var(--arena-s, 1)) calc(2px * var(--arena-s, 1)) rgba(0,0,0,.8);
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   卡组编辑器
   ═══════════════════════════════════════════════════════════ */
.deck-slot-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 12px;
}
.deck-slot {
  flex-shrink: 0; width: 90px; aspect-ratio: 80/112;
  border: 2px dashed rgba(201,160,80,.15);
  border-radius: 8px; background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  font-size: 32px; color: #555;
}
.deck-slot.has-card { border-style: solid; border-color: rgba(201,160,80,.3); }
.deck-slot.add { border-color: #2ecc71; color: #2ecc71; }
.deck-slot:hover { border-color: #ffd700; }
.deck-info-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin-bottom: 12px;
  background: rgba(20,14,10,.8); border-radius: 8px;
  border: 1px solid rgba(201,160,80,.1);
  font-size: 13px; color: #c9a050;
}
.card-search-bar {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.card-search-bar input {
  flex: 1; padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,160,80,.15);
  border-radius: 6px; color: #d4c8a0;
  font-family: inherit; font-size: 13px;
  outline: none;
}
.card-search-bar input:focus { border-color: #ffd700; }
.card-search-bar select {
  padding: 8px 10px;
  background: rgba(20,14,10,.9);
  border: 1px solid rgba(201,160,80,.15);
  border-radius: 6px; color: #d4c8a0;
  font-family: inherit; font-size: 13px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   收藏
   ═══════════════════════════════════════════════════════════ */
.collection-filter-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.collection-filter-tab {
  padding: 6px 14px; border-radius: 16px;
  background: rgba(201,160,80,.06);
  border: 1px solid rgba(201,160,80,.12);
  color: #8a7a50; cursor: pointer;
  font-family: inherit; font-size: 12px;
  transition: all 0.15s;
}
.collection-filter-tab:hover { border-color: #c9a050; color: #c9a050; }
.collection-filter-tab.active { background: rgba(255,215,0,.15); border-color: #ffd700; color: #ffd700; }
.collection-progress-bar {
  height: 6px; background: rgba(255,255,255,.05);
  border-radius: 3px; margin-bottom: 8px; overflow: hidden;
}
.collection-progress-fill {
  height: 100%; background: linear-gradient(90deg, #c9a050, #ffd700);
  border-radius: 3px; transition: width 0.5s;
}
.collection-progress-text {
  font-size: 12px; color: #8a7a50; margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════
   商店
   ═══════════════════════════════════════════════════════════ */
/* 三货币横排栏 */
.shop-currency-bar {
  display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;
  padding: 10px 16px;
  background: rgba(20,14,10,.7);
  border: 1px solid rgba(201,160,80,.12);
  border-radius: 10px;
}
.currency-item {
  font-size: 15px; font-weight: bold;
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 4px;
}
.currency-gold { color: #ffd700; }
.currency-jade { color: #a78bfa; }
.currency-tickets { color: #5dade2; }

/* 商店分区 */
.shop-section {
  margin-bottom: 20px;
}
.shop-section-title {
  font-size: 16px; font-weight: bold; color: #ffd700;
  margin-bottom: 10px; padding-left: 4px;
  letter-spacing: 1px;
}

/* 卡包卡片 */
.pack-grid {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.pack-card {
  width: 150px; min-height: 160px;
  border: 2px solid rgba(201,160,80,.2);
  border-radius: 12px; background: linear-gradient(180deg, rgba(30,25,15,.9), rgba(15,10,5,.95));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; transition: all 0.2s;
  color: #d4c8a0; font-family: inherit;
  padding: 16px;
}
.pack-card:hover {
  border-color: #ffd700; transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,215,0,.2);
}
.pack-card:active { transform: scale(0.96); }
.pack-icon { font-size: 40px; }
.pack-name { font-size: 15px; font-weight: bold; }
.pack-price { font-size: 13px; color: #ffd700; }
/* 卡包描述小字 */
.pack-desc {
  font-size: 11px; color: #8a7a50; text-align: center;
}

/* 高级卡包——紫色边框 */
.pack-card-premium {
  border-color: rgba(167,139,250,.3);
  background: linear-gradient(180deg, rgba(30,25,35,.9), rgba(15,10,20,.95));
}
.pack-card-premium:hover {
  border-color: #a78bfa;
  box-shadow: 0 8px 24px rgba(167,139,250,.25);
}
.pack-card-premium .pack-price { color: #a78bfa; }

/* 传奇卡包——金色边框 + 微光 */
.pack-card-legendary {
  border-color: rgba(255,215,0,.3);
  background: linear-gradient(180deg, rgba(35,30,15,.9), rgba(20,15,10,.95));
  animation: legend-glow 2s ease-in-out infinite;
}
.pack-card-legendary:hover {
  border-color: #ffd700;
  box-shadow: 0 8px 28px rgba(255,215,0,.35);
}
.pack-card-legendary .pack-price { color: #ff6b35; }
@keyframes legend-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,.15); }
  50%      { box-shadow: 0 0 18px rgba(255,215,0,.35); }
}

/* 兑换券网格 */
.ticket-exchange-grid {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.ticket-card {
  flex: 1; min-width: 140px; max-width: 200px;
  border: 2px solid rgba(93,173,226,.2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,25,35,.9), rgba(10,12,20,.95));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; transition: all 0.2s;
  color: #d4c8a0; font-family: inherit;
  padding: 18px 12px; font-size: 13px;
}
.ticket-card:hover {
  border-color: #5dade2; transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(93,173,226,.2);
}
.ticket-card:active { transform: scale(0.96); }
.ticket-rarity {
  font-size: 20px; font-weight: bold;
  padding: 4px 12px; border-radius: 6px;
  background: rgba(93,173,226,.12);
  color: #5dade2;
}
.ticket-card .pack-price { color: #5dade2; }

/* 商店内嵌开包结果 */
.shop-pack-result {
  margin-top: 20px; padding: 16px;
  border: 1px solid rgba(201,160,80,.2);
  border-radius: 10px;
  background: rgba(20,14,10,.6);
  min-height: 80px;
}

/* 旧开包区占位 */
.pack-opening-zone {
  border: 2px dashed rgba(201,160,80,.2); border-radius: 12px;
  min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  color: #555; font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   兑换券卡牌选择弹窗（Duel Links / 影之诗风格）
   ═══════════════════════════════════════════════════════════ */
#exchange-select-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.82);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  flex-direction: column;
}
#exchange-select-box {
  width: 95%; max-width: 600px; max-height: 85vh;
  background: linear-gradient(180deg, rgba(20,15,8,.98), rgba(10,8,4,.98));
  border: 2px solid rgba(93,173,226,.35);
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
#exchange-select-header {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(93,173,226,.08);
  border-bottom: 1px solid rgba(93,173,226,.15);
  flex-shrink: 0;
}
.exchange-back-btn {
  background: none; border: 1px solid rgba(201,160,80,.2);
  color: #c9a050; font-family: inherit; font-size: 13px;
  padding: 4px 12px; border-radius: 6px; cursor: pointer;
  transition: all .15s;
}
.exchange-back-btn:hover { border-color: #ffd700; color: #ffd700; }
#exchange-select-title {
  flex: 1; font-size: 16px; font-weight: bold; color: #ffd700;
}
.exchange-select-cost {
  font-size: 15px; font-weight: bold; color: #5dade2;
  padding: 4px 12px; border-radius: 6px;
  background: rgba(93,173,226,.1);
}

/* 卡牌网格——可滚动的选择区 */
#exchange-card-grid {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(93,173,226,.25) transparent;
}
#exchange-card-grid::-webkit-scrollbar { width: 4px; }
#exchange-card-grid::-webkit-scrollbar-track { background: transparent; }
#exchange-card-grid::-webkit-scrollbar-thumb {
  background: rgba(93,173,226,.25); border-radius: 2px;
}

/* 单张可兑换卡牌 */
.exchange-card {
  border: 2px solid rgba(201,160,80,.12);
  border-radius: 8px; padding: 10px 8px;
  background: rgba(20,14,10,.6);
  cursor: pointer; text-align: center;
  transition: all .15s;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit; color: #d4c8a0;
}
.exchange-card:hover {
  border-color: #5dade2;
  background: rgba(93,173,226,.06);
  transform: translateY(-2px);
}
.exchange-card.selected {
  border-color: #ffd700;
  background: rgba(255,215,0,.08);
  box-shadow: 0 0 12px rgba(255,215,0,.2);
}
.exchange-card-name {
  font-size: 14px; font-weight: bold; color: #ffd700;
}
.exchange-card-faction {
  font-size: 11px; color: #8a7a50;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(201,160,80,.08);
  display: inline-block; align-self: center;
}
.exchange-card-stats {
  font-size: 11px; color: #a09070;
  display: flex; gap: 8px; justify-content: center;
}
.exchange-card-cost {
  font-size: 11px; color: #8a7a50;
}

/* 确认栏——选中卡牌后底部浮现 */
#exchange-confirm-bar {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(20,14,10,.95);
  border-top: 1px solid rgba(93,173,226,.15);
  flex-shrink: 0;
  animation: confirm-slide-up .2s ease-out;
}
@keyframes confirm-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#exchange-confirm-info {
  flex: 1; font-size: 13px; color: #d4c8a0;
}
#btn-exchange-confirm {
  width: auto; padding: 8px 28px;
  background: linear-gradient(135deg, #5dade2, #2e86c1);
  color: #fff;
  border: none; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: bold;
  cursor: pointer; transition: all .15s;
}
#btn-exchange-confirm:hover {
  box-shadow: 0 0 12px rgba(93,173,226,.4);
}
#btn-exchange-confirm:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   Card Selection Screen（Duel Links 卡片商人风格双栏布局）
   ═══════════════════════════════════════════════════════════ */

/* 屏幕 body：零内边距让双栏撑满 */
#screen-card-select .screen-body {
  padding: 0;
  display: flex; flex-direction: column;
}

/* 双栏布局 */
.card-select-layout {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

/* ── LEFT：卡牌大图预览 ── */
.card-select-preview {
  width: 42%; min-width: 280px; max-width: 420px;
  border-right: 1px solid rgba(201,160,80,.15);
  background: linear-gradient(180deg, rgba(20,14,10,.97), rgba(30,20,14,.97));
  display: flex; flex-direction: column; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(201,160,80,.3) transparent;
}
.card-select-preview::-webkit-scrollbar { width: 4px; }
.card-select-preview::-webkit-scrollbar-track { background: transparent; }
.card-select-preview::-webkit-scrollbar-thumb {
  background: rgba(201,160,80,.25); border-radius: 2px;
}
.card-select-preview-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%;
  color: rgba(201,160,80,.25);
}
.preview-placeholder-icon {
  font-size: 64px; margin-bottom: 12px;
}
.preview-placeholder-text {
  font-size: 14px; text-align: center; line-height: 1.6;
}

/* 预览内容区——卡框 + 信息叠层 */
.card-select-preview-content { padding: 12px; display: flex; align-items: flex-start; justify-content: center; }

/* 卡牌预览容器：卡框比例 744×1039 ≈ 1:1.396 */
.card-preview-card {
  position: relative; width: 100%; max-width: 320px;
  /* aspect-ratio 由 JS 根据图片实际高度动态撑开 */
}
.card-preview-frame {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.6));
}

/* 信息叠层——定位在卡框上 */
.card-preview-overlay {
  position: absolute;
  /* 叠层区域：卡框下部（文字区域），避开立绘透明窗 */
  top: 52%; left: 8%; right: 8%; bottom: 4%;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(201,160,80,.3) transparent;
  -webkit-overflow-scrolling: touch;
  /* sRGB 线性减淡——让文字浮在卡框底色上 */
}
.card-preview-overlay::-webkit-scrollbar { width: 3px; }
.card-preview-overlay::-webkit-scrollbar-thumb { background: rgba(201,160,80,.3); border-radius: 2px; }

/* 叠层内的卡牌信息样式（精简版，适配卡框宽度）*/
.card-preview-overlay .cpo-name {
  font-size: 16px; font-weight: bold; color: #ffd700;
  text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  margin-bottom: 1px; line-height: 1.3;
}
.card-preview-overlay .cpo-type {
  font-size: 11px; text-align: center; margin-bottom: 4px;
}
.card-preview-overlay .cpo-stats {
  display: flex; justify-content: space-around; gap: 4px;
  font-size: 12px; font-weight: bold; color: #eee;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  margin-bottom: 4px;
}
.card-preview-overlay .cpo-stat {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 3px;
}
.card-preview-overlay .cpo-cost {
  text-align: center; font-size: 11px; color: #c9a050;
  margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.card-preview-overlay .cpo-desc {
  font-size: 11px; color: #c8b878; line-height: 1.5;
  padding: 4px 6px; background: rgba(0,0,0,.35);
  border-left: 2px solid #c9a050; border-radius: 0 3px 3px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  max-height: 80px; overflow-y: auto;
  user-select: none; cursor: grab;
}
.card-preview-overlay .cpo-effects {
  margin-top: 2px;
}
.card-preview-overlay .cpo-effect {
  font-size: 10px; color: #ddd; padding: 2px 4px;
  background: rgba(0,0,0,.3); border-radius: 3px;
  margin-bottom: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.card-preview-overlay .cpo-effect-trigger {
  color: #f1c40f; font-weight: bold;
}
.card-preview-overlay .cpo-tags {
  font-size: 9px; color: #8a7a50; text-align: center; margin-top: 2px;
}

/* ── RIGHT：可选卡牌列表 ── */
.card-select-grid-wrap {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.card-select-grid-header {
  padding: 8px 14px; font-size: 12px; color: #8a7a50;
  border-bottom: 1px solid rgba(201,160,80,.08); flex-shrink: 0;
}
.card-select-grid {
  flex: 1; overflow-y: auto; padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; align-content: start;
  scrollbar-width: thin; scrollbar-color: rgba(201,160,80,.25) transparent;
}
.card-select-grid::-webkit-scrollbar { width: 4px; }
.card-select-grid::-webkit-scrollbar-track { background: transparent; }
.card-select-grid::-webkit-scrollbar-thumb {
  background: rgba(201,160,80,.25); border-radius: 2px;
}

/* 网格中的单张卡牌 */
.card-select-card {
  border: 2px solid rgba(201,160,80,.12);
  border-radius: 8px; padding: 10px 8px;
  background: rgba(20,14,10,.6);
  cursor: pointer; text-align: center;
  transition: all .15s;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit; color: #d4c8a0;
  position: relative;
}
.card-select-card:hover {
  border-color: #ffd700;
  background: rgba(201,160,80,.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(201,160,80,.15);
}
.card-select-card.selected {
  border-color: #ffd700;
  background: rgba(255,215,0,.1);
  box-shadow: 0 0 14px rgba(255,215,0,.25);
}
.card-select-card .csc-name {
  font-size: 13px; font-weight: bold; color: #ffd700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-select-card .csc-faction {
  font-size: 10px; color: #8a7a50;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(201,160,80,.08);
  display: inline-block; align-self: center;
}
.card-select-card .csc-stats {
  font-size: 10px; color: #a09070;
  display: flex; gap: 6px; justify-content: center; margin-top: 2px;
}
.card-select-card .csc-cost {
  font-size: 10px; color: #8a7a50;
}
.card-select-card .csc-rarity {
  position: absolute; top: 4px; right: 6px;
  font-size: 9px; font-weight: bold;
  padding: 1px 4px; border-radius: 3px;
}
.csc-rarity.R  { color: #aaa; background: rgba(170,170,170,.12); }
.csc-rarity.SR { color: #5dade2; background: rgba(93,173,226,.12); }
.csc-rarity.SSR{ color: #f39c12; background: rgba(243,156,18,.12); }
.csc-rarity.UR { color: #e74c3c; background: rgba(231,76,60,.12); }

/* ── 排序下拉框 ── */
.card-select-sort {
  background: rgba(20,14,10,.8);
  border: 1px solid rgba(201,160,80,.25);
  border-radius: 6px; color: #c9a050;
  font-family: inherit; font-size: 12px;
  padding: 4px 8px; margin-left: auto;
  cursor: pointer;
}
.card-select-sort:focus { outline: none; border-color: #ffd700; }

/* ── 底部确认栏 ── */
.card-select-confirm-bar {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(20,14,10,.95);
  border-top: 1px solid rgba(201,160,80,.2);
  flex-shrink: 0;
  animation: confirm-slide-up .2s ease-out;
}
.card-select-confirm-info {
  flex: 1; font-size: 13px; color: #d4c8a0;
}
.card-select-confirm-btn {
  width: auto; padding: 10px 32px;
  background: linear-gradient(135deg, #c9a050, #8b6914);
  color: #1a1410;
  border: none; border-radius: 8px;
  font-family: inherit; font-size: 15px; font-weight: bold;
  cursor: pointer; transition: all .15s;
}
.card-select-confirm-btn:hover {
  box-shadow: 0 0 16px rgba(201,160,80,.5);
  transform: scale(1.03);
}
.card-select-confirm-btn:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ── 移动端：面板纵向堆叠 ── */
@media (max-width: 640px) {
  .card-select-layout { flex-direction: column; }
  .card-select-preview {
    width: 100%; max-width: none; min-width: 0;
    max-height: 40vh; border-right: none;
    border-bottom: 1px solid rgba(201,160,80,.15);
  }
  .card-select-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }
  .card-select-card { padding: 8px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   交易行
   ═══════════════════════════════════════════════════════════ */
.trade-search-bar {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.trade-search-bar input {
  flex: 1; padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,160,80,.15);
  border-radius: 6px; color: #d4c8a0;
  font-family: inherit; font-size: 13px;
  outline: none;
}
.trade-search-bar input:focus { border-color: #ffd700; }
.trade-search-bar select {
  padding: 8px 10px;
  background: rgba(20,14,10,.9);
  border: 1px solid rgba(201,160,80,.15);
  border-radius: 6px; color: #d4c8a0;
  font-family: inherit; font-size: 13px;
  cursor: pointer;
}
.trade-sort-row {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.trade-sort-btn {
  padding: 4px 12px; border-radius: 12px;
  background: rgba(201,160,80,.06);
  border: 1px solid rgba(201,160,80,.1);
  color: #8a7a50; cursor: pointer;
  font-family: inherit; font-size: 11px;
  transition: all 0.15s;
}
.trade-sort-btn:hover { border-color: #c9a050; color: #c9a050; }
.trade-sort-btn.active { background: rgba(255,215,0,.15); border-color: #ffd700; color: #ffd700; }
.trade-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.trade-listing-card {
  border: 1px solid rgba(201,160,80,.12); border-radius: 8px;
  padding: 10px; background: rgba(20,14,10,.6);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: all 0.15s;
  color: #d4c8a0; font-size: 12px;
}
.trade-listing-card:hover { border-color: #ffd700; }
.trade-listing-placeholder {
  width: 80px; height: 80px; border-radius: 6px;
  background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
  font-size: 24px;
}
.trade-listing-price { color: #ffd700; font-weight: bold; }

/* ═══════════════════════════════════════════════════════════
   设置
   ═══════════════════════════════════════════════════════════ */
/* ── 设置（水墨风·楷体）── */
/* ── 设置项（等比缩放，var(--main-s,1) 回退）── */
.settings-group {
  border: calc(1px * var(--main-s, 1)) solid rgba(80,70,50,.25); border-radius: calc(4px * var(--main-s, 1));
  padding: calc(16px * var(--main-s, 1)) calc(18px * var(--main-s, 1));
  margin-bottom: calc(12px * var(--main-s, 1));
  background: rgba(18,15,10,.7);
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
  overflow: hidden; /* 手机端：裁剪滑动条溢出 */
}
.settings-group-title {
  font-size: calc(26px * var(--main-s, 1)); font-weight: bold; color: #b8a080;
  margin-bottom: calc(14px * var(--main-s, 1)); letter-spacing: calc(3px * var(--main-s, 1));
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
  border-bottom: calc(1px * var(--main-s, 1)) solid rgba(80,70,50,.15);
  padding-bottom: calc(8px * var(--main-s, 1));
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px * var(--main-s, 1)) 0;
  gap: calc(14px * var(--main-s, 1));
}
.settings-label {
  font-size: calc(26px * var(--main-s, 1)); color: #c8b898;
  display: flex; align-items: center; gap: calc(10px * var(--main-s, 1));
  flex-shrink: 0; letter-spacing: calc(2px * var(--main-s, 1));
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
}
.settings-label-icon { font-size: calc(26px * var(--main-s, 1)); }
.settings-value { font-size: calc(22px * var(--main-s, 1)); color: #8a7860; min-width: calc(50px * var(--main-s, 1)); text-align: right;
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif; }
.settings-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: calc(4px * var(--main-s, 1));
  background: rgba(80,70,50,.25);
  border-radius: calc(2px * var(--main-s, 1)); outline: none;
  /* 手机端：阻止滑动条拖动时触发页面滚动/溢出 */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(18px * var(--main-s, 1)); height: calc(18px * var(--main-s, 1));
  background: #a08060; border-radius: 50%;
  cursor: pointer; box-shadow: 0 0 calc(6px * var(--main-s, 1)) rgba(160,128,96,.3);
}
.settings-toggle {
  width: calc(44px * var(--main-s, 1)); height: calc(24px * var(--main-s, 1));
  border-radius: calc(12px * var(--main-s, 1));
  background: rgba(60,50,35,.4);
  border: calc(1px * var(--main-s, 1)) solid rgba(80,70,50,.3);
  cursor: pointer; transition: all 0.2s;
  position: relative; flex-shrink: 0;
}
.settings-toggle.on { background: rgba(160,128,96,.25); border-color: #a08060; }
.settings-toggle::after {
  content: ''; position: absolute;
  top: calc(2px * var(--main-s, 1)); left: calc(2px * var(--main-s, 1));
  width: calc(18px * var(--main-s, 1)); height: calc(18px * var(--main-s, 1));
  border-radius: 50%; background: #8a7860; transition: all 0.2s;
}
.settings-toggle.on::after {
  left: calc(22px * var(--main-s, 1)); background: #c8a888;
}
.settings-dropdown {
  padding: calc(8px * var(--main-s, 1)) calc(12px * var(--main-s, 1));
  background: rgba(18,15,10,.9);
  border: calc(1px * var(--main-s, 1)) solid rgba(80,70,50,.3);
  border-radius: calc(4px * var(--main-s, 1)); color: #c8b898;
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
  font-size: calc(22px * var(--main-s, 1)); cursor: pointer; letter-spacing: calc(1px * var(--main-s, 1));
}
.settings-link-btn {
  background: none; border: none; color: #a08060;
  cursor: pointer; font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
  font-size: calc(22px * var(--main-s, 1));
  padding: calc(8px * var(--main-s, 1)) 0; text-align: left;
  transition: color 0.15s; letter-spacing: calc(1px * var(--main-s, 1));
}
.settings-link-btn:hover { color: #c8a888; }
.settings-version {
  text-align: center; font-size: calc(18px * var(--main-s, 1)); color: #5a4a38;
  margin-top: calc(16px * var(--main-s, 1)); letter-spacing: calc(2px * var(--main-s, 1));
  font-family: 'KaiTi', '楷体', 'STKaiti', '楷体_GB2312', serif;
}

/* ── 装饰品 UI（Phase C2，等比缩放）── */
.cosmetics-type-label{font-size:calc(13px * var(--main-s, 1));color:#d4c8a0;display:flex;align-items:center;gap:calc(6px * var(--main-s, 1));flex-shrink:0;min-width:calc(70px * var(--main-s, 1))}
.cosmetics-type-icon{font-size:calc(16px * var(--main-s, 1))}
.cosmetics-equipped-name{font-size:calc(12px * var(--main-s, 1));color:#ffd700;font-weight:bold;max-width:calc(140px * var(--main-s, 1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosmetics-equipped-name.default{color:#8a7a50;font-weight:normal}
.cosmetics-select{padding:calc(4px * var(--main-s, 1)) calc(8px * var(--main-s, 1));font-size:calc(12px * var(--main-s, 1));background:rgba(20,14,10,.9);border:calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.15);border-radius:calc(6px * var(--main-s, 1));color:#d4c8a0;font-family:inherit;cursor:pointer;max-width:calc(160px * var(--main-s, 1));min-width:calc(100px * var(--main-s, 1))}
.cosmetics-action-btn{padding:calc(3px * var(--main-s, 1)) calc(10px * var(--main-s, 1));font-size:calc(11px * var(--main-s, 1));font-weight:bold;border-radius:calc(4px * var(--main-s, 1));border:calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.2);background:rgba(201,160,80,.1);color:#c9a050;font-family:inherit;cursor:pointer;white-space:nowrap;transition:all .15s}
.cosmetics-action-btn:hover{background:rgba(201,160,80,.25);border-color:#ffd700;color:#ffd700}
.cosmetics-action-btn.unequip{background:rgba(200,80,80,.1);border-color:rgba(200,80,80,.2);color:#e88}
.cosmetics-action-btn.unequip:hover{background:rgba(200,80,80,.25);border-color:#e55;color:#faa}
.cosmetics-row{display:flex;align-items:center;justify-content:space-between;padding:calc(8px * var(--main-s, 1)) 0;gap:calc(8px * var(--main-s, 1));flex-wrap:wrap}
.cosmetics-loading{font-size:calc(12px * var(--main-s, 1));color:#8a7a50;text-align:center;padding:calc(12px * var(--main-s, 1)) 0}
.cosmetics-empty{font-size:calc(12px * var(--main-s, 1));color:#555;text-align:center;padding:calc(12px * var(--main-s, 1)) 0}

/* Phase C2 + C5: 装饰品屏幕背景（仅装备时覆盖） */
#screen-main.screen.active {
  background-image: var(--cosmetic-bg-main, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* 商店背景装饰品（BgShop）：旧 #screen-shop 已删（2026-07-02 商店=卡包坊），
   装备后作用于卡包坊等比容器的兜底背景 */
#pack-bg-layer {
  background-image: var(--cosmetic-bg-shop, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
#screen-collection.screen.active {
  background-image: var(--cosmetic-bg-collection, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* ── 卡组管理：混搭布局 20:9 背景拉伸 + 等比容器 ── */
.deck-bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #0d0b08;
}
/* ★ 20:9 背景图——拉伸填充 */
.deck-bg-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none; user-select: none;
}
/* ★ 等比容器——维持 1312:800 比例，JS 动态设尺寸和居中 */
#deck-proportional {
  position: absolute;
  /* width/height/left/top 由 resizeDeckBgLayer() 动态设置 */
}
.deck-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* ── 卡组管理返回按钮——视口固定锚定（position:fixed + --nav-s，对标主界面货币）── */
#deck-return-btn {
  position: fixed;
  top: calc(34px * var(--nav-s, 1) + env(safe-area-inset-top, 0px));
  left: calc(50px * var(--nav-s, 1));
  width: calc(165px * var(--nav-s, 1));
  height: auto;
  z-index: 100;
  cursor: pointer;
  filter: drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transition: filter 0.2s, transform 0.15s;
}
.deck-return-btn-img {
  display: block;
  width: 100%;
  height: auto;
}
.deck-return-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--nav-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.85);
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transform: translateX(calc(-10px * var(--nav-s, 1)));
  pointer-events: none;
  user-select: none;
}
#deck-return-btn:hover {
  filter: drop-shadow(0 0 calc(6px * var(--nav-s, 1)) rgba(255,215,0,.4)) drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transform: scale(1.05);
}
#deck-return-btn:hover .deck-return-btn-text {
  color: #ffd700;
}
/* 默认隐藏，由 body[data-screen] 控制显隐 */
#deck-return-btn { display: none; }
body[data-screen="deck"] #deck-return-btn { display: block; }

/* ── 卡包坊返回按钮——复制卡组界面设计（视口固定锚定 + --nav-s，图片+文字叠层）── */
#pack-return-btn {
  position: fixed;
  top: calc(34px * var(--nav-s, 1) + env(safe-area-inset-top, 0px));
  left: calc(50px * var(--nav-s, 1));
  width: calc(165px * var(--nav-s, 1));
  height: auto;
  z-index: 100;
  cursor: pointer;
  filter: drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transition: filter 0.2s, transform 0.15s;
}
.pack-return-btn-img {
  display: block;
  width: 100%;
  height: auto;
}
.pack-return-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--nav-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.85);
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transform: translateX(calc(-10px * var(--nav-s, 1)));
  pointer-events: none;
  user-select: none;
}
#pack-return-btn:hover {
  filter: drop-shadow(0 0 calc(6px * var(--nav-s, 1)) rgba(255,215,0,.4)) drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transform: scale(1.05);
}
#pack-return-btn:hover .pack-return-btn-text {
  color: #ffd700;
}
/* 默认隐藏，由 body[data-screen] 控制显隐 */
#pack-return-btn { display: none; }
body[data-screen="pack-shop"] #pack-return-btn { display: block; }

/* ── 卡包详情返回按钮——同卡组界面设计（视口固定锚定 + --nav-s，图片+文字叠层），回卡包坊 ── */
#pack-detail-return-btn {
  position: fixed;
  top: calc(34px * var(--nav-s, 1) + env(safe-area-inset-top, 0px));
  left: calc(50px * var(--nav-s, 1));
  width: calc(165px * var(--nav-s, 1));
  height: auto;
  z-index: 100;
  cursor: pointer;
  filter: drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transition: filter 0.2s, transform 0.15s;
}
.pack-detail-return-btn-img {
  display: block;
  width: 100%;
  height: auto;
}
.pack-detail-return-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--nav-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.85);
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transform: translateX(calc(-10px * var(--nav-s, 1)));
  pointer-events: none;
  user-select: none;
}
#pack-detail-return-btn:hover {
  filter: drop-shadow(0 0 calc(6px * var(--nav-s, 1)) rgba(255,215,0,.4)) drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transform: scale(1.05);
}
#pack-detail-return-btn:hover .pack-detail-return-btn-text {
  color: #ffd700;
}
/* 默认隐藏，由 body[data-screen] 控制显隐 */
#pack-detail-return-btn { display: none; }
body[data-screen="pack-detail"] #pack-detail-return-btn { display: block; }

/* ── 卡组编辑返回按钮——复制卡组界面设计（视口固定锚定 + --nav-s，图片+文字叠层）── */
#deck-editor-return-btn {
  position: fixed;
  top: calc(34px * var(--nav-s, 1) + env(safe-area-inset-top, 0px));
  left: calc(50px * var(--nav-s, 1));
  width: calc(165px * var(--nav-s, 1));
  height: auto;
  z-index: 100;
  cursor: pointer;
  filter: drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transition: filter 0.2s, transform 0.15s;
}
.deck-editor-return-btn-img {
  display: block;
  width: 100%;
  height: auto;
}
.deck-editor-return-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--nav-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.85);
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transform: translateX(calc(-10px * var(--nav-s, 1)));
  pointer-events: none;
  user-select: none;
}
#deck-editor-return-btn:hover {
  filter: drop-shadow(0 0 calc(6px * var(--nav-s, 1)) rgba(255,215,0,.4)) drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transform: scale(1.05);
}
#deck-editor-return-btn:hover .deck-editor-return-btn-text {
  color: #ffd700;
}
/* 默认隐藏，由 body[data-screen] 控制显隐 */
#deck-editor-return-btn { display: none; }
body[data-screen="deck-editor"] #deck-editor-return-btn { display: block; }

/* ── 收藏界面返回按钮——复制卡组界面设计（同蒙版素材+同视口锚定位置）── */
#coll-return-btn {
  position: fixed;
  top: calc(34px * var(--nav-s, 1) + env(safe-area-inset-top, 0px));
  left: calc(50px * var(--nav-s, 1));
  width: calc(165px * var(--nav-s, 1));
  height: auto;
  z-index: 100;
  cursor: pointer;
  filter: drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transition: filter 0.2s, transform 0.15s;
}
.coll-return-btn-img {
  display: block;
  width: 100%;
  height: auto;
}
.coll-return-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(28px * var(--nav-s, 1));
  font-weight: bold;
  color: rgba(255,255,255,.85);
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transform: translateX(calc(-10px * var(--nav-s, 1)));
  pointer-events: none;
  user-select: none;
}
#coll-return-btn:hover {
  filter: drop-shadow(0 0 calc(6px * var(--nav-s, 1)) rgba(255,215,0,.4)) drop-shadow(0 calc(2px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.5));
  transform: scale(1.05);
}
#coll-return-btn:hover .coll-return-btn-text {
  color: #ffd700;
}
/* 默认隐藏，由 body[data-screen] 控制显隐 */
#coll-return-btn { display: none; }
body[data-screen="collection"] #coll-return-btn { display: block; }

/* ── 拥有卡组计数 ── */
.deck-count-text {
  position: absolute;
  left: calc(52px * var(--deck-s));
  top: calc(6px * var(--deck-s));
  font-size: calc(30px * var(--deck-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  color: rgba(255,255,255,.55);
  text-shadow: 0 calc(1px * var(--deck-s)) calc(4px * var(--deck-s)) rgba(0,0,0,.7);
  z-index: 2;
  white-space: nowrap;
}

/* ── 卡组滚动容器 ── */
.deck-scroll-container {
  position: absolute;
  left: calc(38px * var(--deck-s));
  top: calc(57px * var(--deck-s));
  width: calc(1450px * var(--deck-s));
  height: calc(526px * var(--deck-s));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 1;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.deck-scroll-container::-webkit-scrollbar { display: none; }
.deck-scroll-container:active { cursor: grabbing; }
/* 网格：6 列，填充容器 1350px，space-evenly 均衡间距（限定卡组管理屏，不与对战选卡组冲突） */
#deck-scroll-container .deck-grid {
  display: grid;
  grid-template-columns: repeat(6, calc(170px * var(--deck-s)));
  gap: calc(28px * var(--deck-s));
  padding: calc(28px * var(--deck-s)) calc(28px * var(--deck-s));
  justify-content: space-evenly;
}
/* 卡组槽外层包装——框 + 名称纵向排列 */
.deck-slot-wrapper {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
/* 卡组框——卡背比例 744:1039 ≈ 170:238 */
.deck-slot {
  position: relative;
  width: calc(170px * var(--deck-s));
  height: calc(238px * var(--deck-s));
  border-radius: calc(6px * var(--deck-s));
  border: calc(1.5px * var(--deck-s)) solid rgba(201,160,80,.25);
  background: rgba(10,8,4,.65);
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.deck-slot:hover {
  border-color: rgba(255,215,0,.55);
  box-shadow: 0 0 calc(12px * var(--deck-s)) rgba(255,215,0,.12);
}
/* 卡背图——填满框体 */
.deck-slot-cardback {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* 卡牌数角标——卡背右上角，字号加粗便于手机查看 */
.deck-slot-count {
  position: absolute;
  top: calc(4px * var(--deck-s));
  right: calc(6px * var(--deck-s));
  font-size: calc(24px * var(--deck-s));
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: calc(2px * var(--deck-s)) calc(6px * var(--deck-s));
  border-radius: calc(3px * var(--deck-s));
}
/* 卡组名——框下方居中 */
.deck-slot-name {
  margin-top: calc(8px * var(--deck-s));
  font-size: calc(14px * var(--deck-s));
  font-weight: bold;
  color: #ffd700;
  text-align: center;
  max-width: calc(170px * var(--deck-s));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
/* 加号槽 */
.deck-slot-add {
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
.deck-slot-add .deck-slot-plus {
  font-size: calc(40px * var(--deck-s));
  color: rgba(255,255,255,.3);
  transition: color .2s;
}
.deck-slot-add:hover .deck-slot-plus { color: #ffd700; }
/* 初始卡组——金色边框区分 */
.deck-slot-preset {
  border-color: rgba(255,215,0,.35);
  background: rgba(255,215,0,.04);
}
.deck-slot-preset:hover {
  border-color: rgba(255,215,0,.65);
  box-shadow: 0 0 calc(14px * var(--deck-s)) rgba(255,215,0,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   卡组编辑界面 —— bg-layer 等比容器（1512px 基准画布，1312×800 背景）
   9 个定位元素：返回 / ③详情 / ①卡库 / 卡组名 / 主计数 / 辎重计数 / ④描述 / ②编辑区 / 保存
   ═══════════════════════════════════════════════════════════════════ */
#screen-deck-editor { background: #0d0b08; }

/* ── 等比容器 ── */
.deck-editor-bg-layer {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  --deck-editor-s: 1;
  z-index: 1;
}
/* ★ 20:9 背景图——拉伸填满视口（屏幕级元素，不随等比容器缩放） */
.deck-editor-bg-img {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none; user-select: none;
}

/* （旧 .deck-editor-return 已删除——返回按钮改视口固定锚定，同卡组界面设计） */

/* ── ③ 卡牌详情面板（视觉底由蒙板左上面板承载，自身透明） ── */
.deck-editor-card-detail {
  position: absolute;
  left: calc(68px * var(--deck-editor-s));
  top: calc(165px * var(--deck-editor-s));
  width: calc(339px * var(--deck-editor-s));
  height: calc(415px * var(--deck-editor-s));
  border-radius: 4px;
  z-index: 1;
  overflow: hidden; cursor: grab;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(12px * var(--deck-editor-s));
}
.card-detail-placeholder {
  color: rgba(140,190,230,0.5);
  font-size: calc(22px * var(--deck-editor-s));
  margin-top: calc(120px * var(--deck-editor-s));
}

/* 卡牌详情——大图 + 信息 */
.deck-editor-card-detail .detail-card-img {
  width: calc(140px * var(--deck-editor-s));
  border-radius: calc(6px * var(--deck-editor-s));
  margin-bottom: calc(8px * var(--deck-editor-s));
  object-fit: contain;
}
/* ── 合成卡详情布局：上排（合成卡展示区+文本区）+ 下方历史介绍区 ── */
.deck-editor-card-detail .detail-top-row {
  display: flex;
  gap: calc(10px * var(--deck-editor-s));
  width: 100%;
  align-items: flex-start;
  flex: none;
}
.deck-editor-card-detail .detail-fullcard-wrap {
  flex: none;
  cursor: zoom-in;
}
.deck-editor-card-detail .detail-fullcard-wrap:hover { filter: brightness(1.12); }
.deck-editor-card-detail .detail-text-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: calc(215px * var(--deck-editor-s));
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.deck-editor-card-detail .detail-text-col:active { cursor: grabbing }
.deck-editor-card-detail .detail-text-col::-webkit-scrollbar { display: none }
.deck-editor-card-detail .detail-lore-box {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: calc(8px * var(--deck-editor-s));
  font-size: calc(12px * var(--deck-editor-s));
  line-height: 1.5;
  color: rgba(255,255,255,0.68);
  white-space: pre-line;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
}
.deck-editor-card-detail .detail-lore-box::-webkit-scrollbar { display: none }
.deck-editor-card-detail .detail-lore-box:active { cursor: grabbing }
.deck-editor-card-detail .detail-lore-box.lore-empty {
  color: rgba(140,190,230,0.35);
  font-style: italic;
}
.deck-editor-card-detail .detail-card-name {
  font-size: calc(18px * var(--deck-editor-s));
  font-weight: bold;
  color: #ffd700;
  margin-bottom: calc(4px * var(--deck-editor-s));
}
.deck-editor-card-detail .detail-card-info {
  font-size: calc(12px * var(--deck-editor-s));
  color: rgba(255,255,255,0.7);
  text-align: center;
  line-height: 1.6;
}
.deck-editor-card-detail .detail-card-desc {
  font-size: calc(20px * var(--deck-editor-s));
  color: rgba(255,255,255,0.85);
  text-align: left;
  margin-top: calc(6px * var(--deck-editor-s));
  line-height: 1.5;
  width: 100%;
}
.deck-editor-card-detail .detail-card-effects {
  font-size: calc(10px * var(--deck-editor-s));
  color: rgba(255,215,0,0.55);
  text-align: left;
  margin-top: calc(4px * var(--deck-editor-s));
  line-height: 1.4;
  width: 100%;
  border-top: 1px solid rgba(255,215,0,0.15);
  padding-top: calc(4px * var(--deck-editor-s));
}

/* ── 制造/分解按钮 ── */
.deck-editor-card-detail .craft-dust-row {
  display: flex; gap: calc(8px * var(--deck-editor-s));
  margin-top: calc(6px * var(--deck-editor-s));
  width: 100%;
}
.deck-editor-card-detail .craft-btn,
.deck-editor-card-detail .dust-btn {
  flex: 1;
  padding: calc(5px * var(--deck-editor-s)) calc(8px * var(--deck-editor-s));
  border: 1px solid;
  border-radius: 4px;
  font-size: calc(18px * var(--deck-editor-s));
  font-family: "KaiTi","楷体","STKaiti",serif;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.deck-editor-card-detail .craft-btn {
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.35);
  color: #ffd700;
}
.deck-editor-card-detail .craft-btn:hover {
  background: rgba(255,215,0,0.22);
  border-color: #ffd700;
}
.deck-editor-card-detail .dust-btn {
  background: rgba(180,100,100,0.1);
  border-color: rgba(180,100,100,0.3);
  color: #cc9999;
}
.deck-editor-card-detail .dust-btn:hover {
  background: rgba(180,100,100,0.22);
  border-color: #cc8888;
}

/* 按钮内货币图标 */
.currency-icon {
  height: calc(22px * var(--deck-editor-s));
  width: auto;
  vertical-align: middle;
  margin-left: calc(2px * var(--deck-editor-s));
  image-rendering: auto;
  position: relative;
  top: -1px;
}

/* ── ④ 描述保存面板（视觉底由蒙板左下面板承载，与③同步） ── */
.deck-editor-desc-save {
  position: absolute;
  left: calc(68px * var(--deck-editor-s));
  top: calc(642px * var(--deck-editor-s));
  width: calc(339px * var(--deck-editor-s));
  height: calc(180px * var(--deck-editor-s));
  border-radius: 4px;
  z-index: 1;
  overflow-y: auto;
  padding: calc(8px * var(--deck-editor-s));
}
/* ④ 费用统计玻璃珠——10 颗两行（0费~9+费），统计卡组费用分布（同竞技场玻璃珠） */
.deck-editor-desc-save .de-bead-grid {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(5, calc(54px * var(--deck-editor-s)));
  grid-template-rows: repeat(2, calc(54px * var(--deck-editor-s)));
  gap: calc(6px * var(--deck-editor-s)) calc(10px * var(--deck-editor-s));
  align-content: center; justify-content: center;
  transform: translateY(calc(-20px * var(--deck-editor-s))); /* ★ 微调：整体上移 20px */
}
.de-bead-wrap {
  position: relative;
  display: block;
  width: 100%; height: 100%;
}
.de-bead-img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  opacity: 0.9;
  pointer-events: none; user-select: none;
}
.de-bead-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(16px * var(--deck-editor-s));
  font-weight: bold;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 calc(3px * var(--deck-editor-s)) rgba(0,0,0,.5);
  pointer-events: none; user-select: none;
}
.de-bead-cnt {
  position: absolute;
  right: calc(2px * var(--deck-editor-s));
  bottom: calc(1px * var(--deck-editor-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(13px * var(--deck-editor-s));
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 calc(4px * var(--deck-editor-s)) rgba(255,215,0,.6), 0 calc(1px * var(--deck-editor-s)) calc(2px * var(--deck-editor-s)) rgba(0,0,0,.8);
  pointer-events: none; user-select: none;
}

/* ── 卡库筛选条（级联）── */
.card-library-filters {
  position: absolute;
  left: calc(442px * var(--deck-editor-s));
  top: calc(123px * var(--deck-editor-s));
  width: calc(1000px * var(--deck-editor-s));
  height: calc(41px * var(--deck-editor-s));
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: calc(6px * var(--deck-editor-s));
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge */
  cursor: grab;
  user-select: none;
  z-index: 2;
}
.card-library-filters::-webkit-scrollbar { display: none; } /* Chrome 隐藏滚动条 */
.card-library-filters:active { cursor: grabbing; }
.filter-btn {
  font-size: calc(26px * var(--deck-editor-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  padding: calc(2px * var(--deck-editor-s)) calc(10px * var(--deck-editor-s));
  border: 1px solid rgba(201,160,80,0.35);
  border-radius: calc(4px * var(--deck-editor-s));
  background: rgba(201,160,80,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-btn:hover {
  background: rgba(201,160,80,0.2);
  border-color: #ffd700;
  color: #ffd700;
}
.filter-btn.active {
  background: rgba(255,215,0,0.18);
  border-color: #ffd700;
  color: #ffd700;
}
.filter-btn.all-btn {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}
.filter-btn.back-btn {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
}
.filter-btn.back-btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.85);
}
.filter-sep {
  color: rgba(255,255,255,0.15);
  font-size: calc(18px * var(--deck-editor-s));
  margin: 0 calc(4px * var(--deck-editor-s));
  user-select: none;
}
.filter-select {
  background: rgba(201,160,80,0.08);
  border: 1px solid rgba(201,160,80,0.35);
  color: #c9a050;
  font-size: calc(24px * var(--deck-editor-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  padding: calc(2px * var(--deck-editor-s)) calc(6px * var(--deck-editor-s));
  border-radius: calc(4px * var(--deck-editor-s));
  cursor: pointer;
}
.filter-select:focus {
  outline: none;
  border-color: #ffd700;
}

/* ── ① 卡库 —— 全卡网格 ── */
.deck-editor-library {
  position: absolute;
  left: calc(445px * var(--deck-editor-s));
  top: calc(178px * var(--deck-editor-s));
  width: calc(1000px * var(--deck-editor-s));
  height: calc(403px * var(--deck-editor-s));
  border-radius: 4px;
  z-index: 1;
  overflow: hidden; cursor: grab;
  padding: calc(8px * var(--deck-editor-s));
}
.deck-editor-library::-webkit-scrollbar { display: none; }
.card-library-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(8px * var(--deck-editor-s));
  align-content: start;
}

/* 卡库中的单张卡片——5 列等比填充，卡背比例 744:1039 */
.card-lib-item {
  aspect-ratio: 0.716;
  border-radius: calc(6px * var(--deck-editor-s));
  border: 1px solid rgba(201,160,80,0.3);
  background: rgba(20,18,14,0.8);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
  touch-action: none; /* 手机端：防止浏览器抢触摸事件，由 JS 拖拽系统接管 */
}
.card-lib-item:hover {
  border-color: #ffd700;
  box-shadow: 0 0 calc(8px * var(--deck-editor-s)) rgba(255,215,0,0.3);
}
.card-lib-item.selected {
  border-color: #ffd700;
  box-shadow: 0 0 calc(12px * var(--deck-editor-s)) rgba(255,215,0,0.5);
}
/* 未拥有——灰色 */
.card-lib-item.not-owned {
  filter: grayscale(0.8) brightness(0.65);
  border-color: rgba(100,100,100,0.45);
}
.card-lib-item .lib-card-name {
  font-size: calc(13px * var(--deck-editor-s));
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: 1.2;
  margin-top: calc(4px * var(--deck-editor-s));
  padding: 0 calc(4px * var(--deck-editor-s));
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  width: 100%;
}
/* 仅回退路径（FullCard 未加载时的文字卡面）使用——:not 限定防止属性泄漏进合成卡角标。
   Bug #79 根因：本规则的 bottom 曾与合成卡规则的 top 叠加，把角标拉成全高黑带 */
.card-lib-item:not(.lib-composited) .lib-card-count {
  position: absolute;
  bottom: calc(3px * var(--deck-editor-s));
  right: calc(6px * var(--deck-editor-s));
  font-size: calc(11px * var(--deck-editor-s));
  color: rgba(255,255,255,0.5);
}
/* 拖拽中 */
.card-lib-item.dragging {
  opacity: 0.4;
}

/* ── ② 牌组编辑区 —— 拖放目标 ── */
.deck-editor-area {
  position: absolute;
  left: calc(445px * var(--deck-editor-s));
  top: calc(655px * var(--deck-editor-s));
  width: calc(1000px * var(--deck-editor-s));
  height: calc(168px * var(--deck-editor-s));
  /* 视觉底由蒙板右下面板承载；透明虚线基底保留 drag-over 金框反馈 */
  border: 2px dashed transparent;
  background: transparent;
  border-radius: 4px;
  z-index: 1;
  overflow: hidden;
  padding: calc(6px * var(--deck-editor-s));
}
.deck-editor-area.drag-over {
  border-color: #ffd700;
  background: rgba(255,215,0,0.1);
}

/* 卡牌横排容器——按住拖拽左右滑动 */
.deck-area-cards {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: calc(4px * var(--deck-editor-s));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  height: 100%; width: 100%;
}
.deck-area-cards::-webkit-scrollbar { display: none; }
.deck-area-cards:active { cursor: grabbing; }
.deck-area-placeholder {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: rgba(201,160,80,0.4);
  font-size: calc(22px * var(--deck-editor-s));
  pointer-events: none;
  white-space: nowrap;
}
/* 编辑区中的卡片——撑满牌组区高度 */
.deck-area-card {
  width: calc(104px * var(--deck-editor-s));
  height: calc(156px * var(--deck-editor-s));
  border-radius: calc(4px * var(--deck-editor-s));
  border: 1px solid rgba(201,160,80,0.4);
  background: rgba(20,18,14,0.85);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s;
}
.deck-area-card:hover {
  border-color: #ffd700;
}
.deck-area-card .area-card-name {
  font-size: calc(22px * var(--deck-editor-s));
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: 1.1;
  padding: 0 calc(4px * var(--deck-editor-s));
}
/* 仅回退路径使用（同上 :not 防泄漏——对称保护，防未来给此规则加定位时撞合成卡角标） */
.deck-area-card:not(.area-composited) .area-card-count {
  font-size: calc(18px * var(--deck-editor-s));
  color: rgba(255,255,255,0.5);
}

/* ── 卡组名输入 ── */
.deck-editor-name-input {
  position: absolute;
  left: calc(447px * var(--deck-editor-s));
  top: calc(597px * var(--deck-editor-s));
  width: calc(200px * var(--deck-editor-s));
  height: calc(40px * var(--deck-editor-s));
  font-size: calc(22px * var(--deck-editor-s));
  background: rgba(10,8,4,0.7);
  border: 1.5px solid rgba(255,215,0,0.35);
  border-radius: 4px;
  color: rgba(255,255,255,0.85);
  padding: 0 calc(10px * var(--deck-editor-s));
  z-index: 2;
  cursor: pointer;  /* 点击弹出改名弹窗 */
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  user-select: none;
}
.deck-editor-name-input:hover { border-color: #ffd700; }
/* 占位态——未命名时灰色提示 */
.deck-editor-name-input.unnamed { color: rgba(255,255,255,0.25); }

/* ── 主卡组计数文字 ── */
.deck-editor-main-count {
  position: absolute;
  left: calc(667px * var(--deck-editor-s));
  top: calc(602px * var(--deck-editor-s));
  font-size: calc(20px * var(--deck-editor-s));
  color: rgba(255,255,255,0.65);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.deck-editor-main-count.invalid {
  color: #ff4444;
  text-shadow: 0 0 calc(6px * var(--deck-editor-s)) rgba(255,68,68,0.4);
}

/* ── 辎重计数文字 ── */
.deck-editor-equip-count {
  position: absolute;
  left: calc(972px * var(--deck-editor-s));
  top: calc(602px * var(--deck-editor-s));
  font-size: calc(20px * var(--deck-editor-s));
  color: rgba(255,255,255,0.65);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.deck-editor-equip-count.invalid {
  color: #ff4444;
  text-shadow: 0 0 calc(6px * var(--deck-editor-s)) rgba(255,68,68,0.4);
}

/* ── 阵营计数文字（主卡组与辎重之间，838 落位留 53px 余量不压辎重） ── */
.deck-editor-faction-count {
  position: absolute;
  left: calc(838px * var(--deck-editor-s));
  top: calc(602px * var(--deck-editor-s));
  font-size: calc(20px * var(--deck-editor-s));
  color: rgba(255,255,255,0.65);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.deck-editor-faction-count.invalid {
  color: #ff4444;
  text-shadow: 0 0 calc(6px * var(--deck-editor-s)) rgba(255,68,68,0.4);
}

/* ── 保存按钮 ── */
.deck-editor-save-btn {
  position: absolute;
  left: calc(310px * var(--deck-editor-s));
  top: calc(783px * var(--deck-editor-s));
  font-size: calc(26px * var(--deck-editor-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-weight: bold;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
  padding: 0;
}
.deck-editor-save-btn:hover {
  color: #ffd700;
  text-shadow: 0 0 calc(12px * var(--deck-editor-s)) rgba(255,215,0,0.6);
}

/* 删除卡组按钮——保存按钮左侧 */
.deck-editor-delete-btn {
  position: absolute;
  left: calc(190px * var(--deck-editor-s));
  top: calc(783px * var(--deck-editor-s));
  font-size: calc(26px * var(--deck-editor-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-weight: bold;
  color: rgba(255,100,100,0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
  padding: 0;
}
.deck-editor-delete-btn:hover {
  color: #ff4444;
  text-shadow: 0 0 calc(12px * var(--deck-editor-s)) rgba(255,68,68,0.6);
}

/* ═══════════════════════════════════════════════════════════
   对战大厅 —— 等比容器 1312×800（新设计 bg = 对战界面设计2.png）
   所有元素锚定 --battle-lobby-s，位置百分比由定位器量取
   ═══════════════════════════════════════════════════════════ */

/* ── 战大厅容器（被动，bg-layer 控制所有定位）── */
#battle-lobby {
  width: 100%; height: 100%;
}
/* ── 背景 ── */
.battle-lobby-bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #0d0b08;
  --battle-lobby-s: 1;
}
.battle-lobby-bg-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  /* stretch 拉伸填充（对标 adventure，与蒙板坐标系一致） */
}
/* ★ 2026-08-29 动态背景层（方案同主界面/收藏/冒险界面）：
   视频叠在静态兜底图之上、.battle-lobby-content-layer 内容层之下（同层按 DOM 序绘制）；
   文件=正放循环+循环点 1s 交叉淡化（无缝）；0.7× 慢放/起播兜底与进对局暂停
   在 screens-main.js（showBattleLobby + 两处大厅隐藏点——大厅与对局同屏，防后台解码） */
#lobby-bg-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;   /* 背景层不拦任何点击 */
}
#lobby-bg-video video {
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
  object-fit: cover;      /* 21:9（1470×630）素材在 20:9 视口两侧各裁 ~2.3%，同 main-bg */
}
.battle-lobby-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
/* ★ 规则蒙板容器——固定比例 1.64，JS 动态尺寸，内部元素百分比锚定 */
.battle-lobby-mask-wrapper {
  position: absolute; left: 0;
  /* width/height/top 由 JS resizeBattleLobbyBgLayer() 设置 */
}

/* ── 三个模式按钮（白色文字，居中压在蒙板墨块上，蒙板底板 250×85）── */
.battle-lobby-mode-btn {
  position: absolute;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(45px * var(--battle-lobby-s));
  color: rgba(255,255,255,.7);
  cursor: pointer;
  text-shadow: 0 calc(1px * var(--battle-lobby-s)) calc(4px * var(--battle-lobby-s)) rgba(0,0,0,.7);
  transition: color .2s, text-shadow .2s;
  z-index: 2;
  white-space: nowrap;
  /* 墨块宽度=文字容器宽度，text-align 居中——三块墨块 x 区间相同 */
  left: 4.80%; width: 18.14%; text-align: center;
  /* ★ 三场赛事蒙板——文字底板（assets/battle-lobby/mode-mask.png） */
  background-image: url('../assets/battle-lobby/mode-mask.png?v=20260811');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 给文字留出 padding，让蒙板底板在文字后面显形 */
  padding: calc(12px * var(--battle-lobby-s)) 0;
}
.battle-lobby-mode-btn:hover { color: #ffd700; }
/* 各模式按钮垂直落位（墨块中心 y 202/364/524 → 文字行居中） */
#lobby-mode-full   { top: 22.33%; }
#lobby-mode-warchess { top: 42.58%; }
#lobby-mode-weekly { top: 62.58%; }
/* 选中态——金色 */
.battle-lobby-mode-btn.selected {
  color: #ffd700;
  text-shadow: 0 0 calc(12px * var(--battle-lobby-s)) rgba(255,215,0,.6), 0 calc(1px * var(--battle-lobby-s)) calc(4px * var(--battle-lobby-s)) rgba(0,0,0,.7);
}
/* ★ 战棋模式暂锁（完善开发中）——暗色不可选，hover 不亮金 */
.battle-lobby-mode-btn.locked {
  color: rgba(255,255,255,.42);
  cursor: not-allowed;
}
.battle-lobby-mode-btn.locked:hover { color: rgba(255,255,255,.42); }
/* ★ 锁定角标——右上角小签"暂未开启"（悬于墨块右上，pointer-events 穿透不挡点击） */
.lobby-mode-lock-tag {
  position: absolute;
  top: calc(-10px * var(--battle-lobby-s));
  right: calc(-16px * var(--battle-lobby-s));
  font-size: calc(17px * var(--battle-lobby-s));
  color: #e8d9b0;
  background: rgba(58,22,14,.88);
  border: calc(1px * var(--battle-lobby-s)) solid rgba(232,217,176,.45);
  border-radius: calc(4px * var(--battle-lobby-s));
  padding: calc(1px * var(--battle-lobby-s)) calc(7px * var(--battle-lobby-s));
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;
}

/* ── 卡组展示区（positioner: 27.45%, 50.11%, 980×183）── */
.battle-lobby-deck-area {
  position: absolute;
  left: 27.45%; top: 50.11%;
  width: calc(980px * var(--battle-lobby-s));
  height: calc(183px * var(--battle-lobby-s));
  z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.battle-lobby-deck-area::-webkit-scrollbar { height: 4px; }
.battle-lobby-deck-area::-webkit-scrollbar-track { background: transparent; }
.battle-lobby-deck-area::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15); border-radius: 2px;
}
.battle-lobby-deck-list {
  display: flex; flex-wrap: nowrap; gap: calc(14px * var(--battle-lobby-s));
  padding: calc(12px * var(--battle-lobby-s)) calc(10px * var(--battle-lobby-s));
  height: 100%; align-items: center;
}
/* 单张卡组卡片——卡背比例 744:1039，高度适配单行 183px 区域 */
.battle-lobby-deck-card {
  position: relative;
  flex-shrink: 0;
  width: calc(107px * var(--battle-lobby-s));
  height: calc(150px * var(--battle-lobby-s));
  border-radius: calc(5px * var(--battle-lobby-s));
  border: calc(1.5px * var(--battle-lobby-s)) solid rgba(201,160,80,.25);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  /* 卡背图——填满框体 */
  background: url('../assets/card-back.png') center/cover;
}
.battle-lobby-deck-card:hover {
  border-color: rgba(255,215,0,.55);
  box-shadow: 0 0 calc(10px * var(--battle-lobby-s)) rgba(255,215,0,.15);
}
.battle-lobby-deck-card.selected {
  border-color: rgba(255,215,0,.7);
  box-shadow: 0 0 calc(12px * var(--battle-lobby-s)) rgba(255,215,0,.3);
}
/* 卡背底部遮罩 + 文字覆盖层 */
.battle-lobby-deck-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  pointer-events: none;
}
/* 卡组名——卡背底部叠加 */
.battle-lobby-deck-card-name {
  position: absolute; bottom: calc(8px * var(--battle-lobby-s)); left: 0; right: 0;
  font-size: calc(25px * var(--battle-lobby-s));
  font-weight: bold; color: #fff;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  text-align: center; z-index: 1;
  text-shadow: 0 calc(1px * var(--battle-lobby-s)) calc(2px * var(--battle-lobby-s)) rgba(0,0,0,.8);
}
/* 阵营——卡背底部叠加 */
.battle-lobby-deck-card-info {
  position: absolute; bottom: calc(2px * var(--battle-lobby-s)); left: 0; right: 0;
  font-size: calc(10px * var(--battle-lobby-s));
  color: rgba(255,255,255,.6); text-align: center; z-index: 1;
  text-shadow: 0 calc(1px * var(--battle-lobby-s)) calc(2px * var(--battle-lobby-s)) rgba(0,0,0,.8);
}
/* 张数角标——右上角黑色蒙板 + 白色数字 */
.battle-lobby-deck-card-count {
  position: absolute; top: calc(4px * var(--battle-lobby-s)); right: calc(4px * var(--battle-lobby-s));
  min-width: calc(30px * var(--battle-lobby-s)); height: calc(30px * var(--battle-lobby-s));
  background: rgba(0,0,0,.78); border-radius: calc(6px * var(--battle-lobby-s));
  font-size: calc(25px * var(--battle-lobby-s)); font-weight: bold; color: #fff;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  display: flex; align-items: center; justify-content: center;
  text-align: center; z-index: 2; line-height: 1;
  padding: 0 calc(6px * var(--battle-lobby-s));
}

/* ── 模式说明（positioner: 27.45%, 22.02%, 980×232）── */
.battle-lobby-rules {
  position: absolute;
  left: 27.45%; top: 22.02%;
  width: calc(980px * var(--battle-lobby-s));
  height: calc(232px * var(--battle-lobby-s));
  z-index: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.battle-lobby-rules::-webkit-scrollbar { width: 4px; }
.battle-lobby-rules::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1); border-radius: 2px;
}
.battle-lobby-rules-title {
  font-size: calc(40px * var(--battle-lobby-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-weight: bold; color: #ffd700;
  margin-bottom: calc(10px * var(--battle-lobby-s));
}
.battle-lobby-rules-text {
  font-size: calc(29px * var(--battle-lobby-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
}

/* ── 开始按钮（★ 视口固定锚定——对标底部导航栏，position:fixed + --nav-s）── */
.battle-lobby-start {
  position: fixed;
  left: calc(85.44% - 35px); top: 77.66%;
  width: calc(7.47% + 130px); text-align: center;
  font-size: calc(36px * var(--nav-s, 1));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-weight: bold;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  text-shadow: 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
  transition: color .2s, text-shadow .2s;
  z-index: 10;
  white-space: nowrap;
  /* ★ 开始按键底板 */
  background-image: url('../assets/battle-lobby/start-btn-mask.png?v=20260811');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: calc(12px * var(--nav-s, 1)) 0;
}
.battle-lobby-start:hover {
  color: #ffd700;
  text-shadow: 0 0 calc(14px * var(--nav-s, 1)) rgba(255,215,0,.7), 0 calc(1px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1)) rgba(0,0,0,.7);
}

/* ═══════════════════════════════════════════════════════════
   登录/注册屏（Phase A 鉴权）
   ═══════════════════════════════════════════════════════════ */
.auth-container {
  width: 100%; max-width: 360px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0;
}
.auth-logo {
  font-size: 36px; font-weight: bold;
  color: #ffd700; letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255,215,0,.3);
  margin-bottom: 4px;
}
.auth-subtitle {
  font-size: 13px; color: #8a7a50;
  margin-bottom: 24px;
}

/* 登录/注册 Tab 切换 */
.auth-tabs {
  display: flex; width: 100%; gap: 0;
  border: 1px solid rgba(201,160,80,.2);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 16px;
}
.auth-tab {
  flex: 1; padding: 10px 0;
  background: rgba(20,14,10,.6);
  border: none; color: #8a7a50;
  font-family: inherit; font-size: 14px; font-weight: bold;
  cursor: pointer; transition: all 0.15s;
}
.auth-tab.active {
  background: rgba(255,215,0,.12);
  color: #ffd700;
}
.auth-tab:hover { color: #c9a050; }

/* 表单 */
.auth-form {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.auth-input {
  width: 100%; padding: 12px 14px;
  background: rgba(20,14,10,.8);
  border: 1px solid rgba(201,160,80,.2);
  border-radius: 8px; color: #d4c8a0;
  font-family: inherit; font-size: 14px;
  outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
}
.auth-input:focus { border-color: #ffd700; }
.auth-input::placeholder { color: #5a4a30; }

/* 按钮（等比缩放，var(--main-s,1) 回退保证独立页面不变） */
.auth-btn {
  width: 100%; padding: calc(12px * var(--main-s, 1)) 0;
  border: none; border-radius: calc(8px * var(--main-s, 1));
  font-family: inherit; font-size: calc(15px * var(--main-s, 1)); font-weight: bold;
  cursor: pointer; transition: all 0.15s;
}
.auth-btn:active { transform: scale(0.97); }
.auth-btn.primary {
  background: linear-gradient(135deg, #c9a050, #ffd700);
  color: #0a0a0a;
}
.auth-btn.primary:hover { box-shadow: 0 0 calc(12px * var(--main-s, 1)) rgba(255,215,0,.4); }
.auth-btn.ghost {
  background: transparent;
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.25);
  color: #c9a050;
}
.auth-btn.ghost:hover { border-color: #ffd700; color: #ffd700; }
.auth-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* 分割线 "或" */
.auth-divider {
  width: 100%; text-align: center;
  border-bottom: 1px solid rgba(201,160,80,.15);
  line-height: 0; margin: 12px 0 16px;
}
.auth-divider span {
  background: #0a0a0a; padding: 0 12px;
  color: #5a4a30; font-size: 12px;
}

/* 消息 */
.auth-msg {
  width: 100%; text-align: center;
  margin-top: 12px; font-size: 13px;
  min-height: 20px;
}
.auth-msg.error { color: #e74c3c; }
.auth-msg.success { color: #2ecc71; }

/* ═══════════════════════════════════════════════════════════
   起始卡组选择屏
   ═══════════════════════════════════════════════════════════ */
.starter-faction-grid {
  display: flex; gap: 16px;
  width: 100%; margin: 20px 0;
}
.starter-faction-card {
  flex: 1; min-width: 140px;
  padding: 24px 16px;
  border-radius: 12px;
  border: 2px solid rgba(201,160,80,.25);
  background: linear-gradient(180deg, rgba(30,25,15,.9), rgba(15,10,5,.95));
  cursor: pointer; text-align: center;
  transition: all .2s;
  font-family: inherit; color: #d4c8a0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.starter-faction-card:hover {
  border-color: #ffd700;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255,215,0,.15);
}
.starter-faction-card.selected {
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255,215,0,.3);
  background: linear-gradient(180deg, rgba(255,215,0,.08), rgba(20,15,5,.95));
}
.starter-faction-icon { font-size: 48px; }
.starter-faction-name {
  font-size: 20px; font-weight: bold; color: #ffd700;
}
.starter-faction-desc {
  font-size: 12px; color: #8a7a50; line-height: 1.5;
}
.starter-faction-card:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

/* ═══════════════════════════════════════════════════════════
   主界面——货币显示 + 开包结果弹窗
   ═══════════════════════════════════════════════════════════ */
.main-currency-row {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 16px;
}
.main-currency {
  font-size: 16px; font-weight: bold;
  padding: 6px 16px; border-radius: 8px;
}
.main-currency-gold {
  color: #ffd700;
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.2);
}
.main-currency-jade {
  color: #a78bfa;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.2);
}

/* 开包结果弹窗（内嵌在主界面） */
#pack-result-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
}
#pack-result-box {
  background: linear-gradient(180deg, rgba(30,25,15,.98), rgba(15,10,5,.98));
  border: 2px solid #ffd700; border-radius: 12px;
  padding: 20px;
  max-width: 420px; width: 90%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 0 30px rgba(255,215,0,.2);
}
#pack-result-title {
  text-align: center; font-size: 18px; font-weight: bold;
  color: #ffd700; margin-bottom: 16px;
}
#pack-result-cards {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.pack-result-card {
  width: 80px; padding: 8px;
  border-radius: 6px; text-align: center;
  font-size: 11px; color: #d4c8a0;
  border: 1px solid rgba(201,160,80,.2);
  background: rgba(20,14,10,.6);
}
.pack-result-card .card-rarity { font-weight: bold; margin-bottom: 2px; }
.pack-result-card .card-name { font-size: 10px; color: #a09070; }
.pack-result-card.rarity-R .card-rarity { color: #a0c4ff; }
.pack-result-card.rarity-SR .card-rarity { color: #c9a0ff; }
.pack-result-card.rarity-SSR .card-rarity { color: #ffa500; }
.pack-result-card.rarity-UR .card-rarity { color: #ff6b35; }
.pack-result-card.golden {
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255,215,0,.3);
}

/* ═══════════════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .screen-body { padding: 8px; }
  .screen-logo { font-size: 28px; padding-top: 24px; }
  .menu-btn { max-width: 240px; padding: 12px 16px; font-size: 14px; }
  .pack-card { width: 120px; }
}

/* ═══════════════════════════════════════════════════════════
   加载画面——浮动卡牌动画（YGO Master Duel 风格）
   ═══════════════════════════════════════════════════════════ */

/* 浮动卡牌基底——绝对定位于 #loading-cards-layer，JS 通过 transform 移动 */
.loading-float-card {
  position: absolute;
  left: 0; top: 0;
  width: 72px; height: 100px;
  background: var(--cosmetic-cardback, url('../assets/card-back.png')) center/cover;
  border: 2px solid rgba(201,160,80,.25);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  pointer-events: auto;
  cursor: pointer;
  transition: filter .3s, box-shadow .3s, border-color .3s;
  will-change: transform, opacity;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}
.loading-float-card:hover {
  border-color: #ffd700;
  box-shadow: 0 4px 24px rgba(255,215,0,.4);
  filter: brightness(1.2);
  z-index: 10;
}

/* 翻面状态——显示卡图（JS 设置 background-image），无图数据时回退暗底+卡名 */
.loading-float-card.flipped {
  background-size: cover !important;
  background-position: center top !important;
  border-color: #c9a050;
  box-shadow: 0 4px 24px rgba(201,160,80,.35);
}
/* 无图数据的翻面卡——暗底+卡名文字（JS 未设 background-image 时走此回退） */
.loading-float-card.flipped.no-art {
  background: linear-gradient(160deg, #1a1410, #0d0b08) !important;
}
.loading-float-card.flipped.no-art::after {
  content: attr(data-card-name);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  letter-spacing: 1px;
  line-height: 1.3;
  text-shadow: 0 0 8px rgba(255,215,0,.3);
  pointer-events: none;
}
/* 翻面卡 hover——金光强化（不用 transform——会和 JS 定位 transform 冲突导致疯狂闪烁） */
.loading-float-card.flipped:hover {
  z-index: 100 !important;
  box-shadow: 0 8px 40px rgba(255,215,0,.55);
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(255,215,0,.4));
  border-color: #ffd700;
}

/* 翻转动画——透明度闪变（不与 JS transform 冲突） */
.loading-float-card.flip-animating {
  opacity: 0 !important;
  transition: opacity .12s ease-out;
}

/* 旧卡被顶出时的淡出 */
.loading-float-card.fading-out {
  opacity: 0;
  transition: opacity .5s ease-out;
  pointer-events: none;
}

/* 卡牌层整体淡出模式——所有卡牌同步透明 */
#loading-cards-layer.fading .loading-float-card {
  transition: opacity .4s ease-out;
}

/* 进度条满格发光 */
#loading-progress-fill.near-complete {
  box-shadow: 0 0 14px rgba(255,215,0,.7), 0 0 28px rgba(255,215,0,.3);
}

/* ═══════════════════════════════════════════════════════════
   加载画面——翻牌详情弹窗
   ═══════════════════════════════════════════════════════════ */
#loading-card-detail-overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 100000;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease-out;
  pointer-events: none;
}
#loading-card-detail-overlay.active {
  opacity: 1; pointer-events: auto;
}
.loading-card-detail-card {
  background: linear-gradient(160deg, #1a1410, #0d0b08);
  border: 2px solid #c9a050;
  border-radius: 12px;
  padding: 20px;
  max-width: 340px;
  width: 80vw;
  text-align: center;
  box-shadow: 0 8px 48px rgba(0,0,0,.7), 0 0 32px rgba(201,160,80,.25);
  position: relative;
}
.loading-card-detail-card .detail-art {
  width: 100%; max-height: 260px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.3);
}
.loading-card-detail-card .detail-name {
  font-size: 22px; font-weight: bold;
  color: #ffd700;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-family: 'KaiTi','楷体','STKaiti',serif;
}
.loading-card-detail-card .detail-faction {
  font-size: 12px; color: #8a7a50;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.loading-card-detail-card .detail-stats {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 10px;
  font-size: 15px; color: #c9a050;
  letter-spacing: 1px;
}
.loading-card-detail-card .detail-stats span {
  display: inline-flex; align-items: center; gap: 4px;
}
.loading-card-detail-card .detail-stats .stat-atk { color: #e74c3c; }
.loading-card-detail-card .detail-stats .stat-hp { color: #2ecc71; }
.loading-card-detail-card .detail-stats .stat-cost { color: #f39c12; }
.loading-card-detail-card .detail-desc {
  font-size: 13px; color: #aaa;
  line-height: 1.7;
  text-align: left;
  padding: 10px 8px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  max-height: 120px; overflow-y: auto;
}
.loading-card-detail-card .detail-close {
  position: absolute; top: 8px; right: 12px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #8a7a50; font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
  line-height: 1;
}
.loading-card-detail-card .detail-close:hover {
  background: rgba(255,215,0,.2); color: #ffd700;
}

/* ═══════════════════════════════════════════════════════════
   主界面重构 —— 素材图层 + 楷体纯文字导航 + 极简白图标
   ═══════════════════════════════════════════════════════════ */

/* ── 全屏背景层：全视口铺满，不再 letterbox 锁定比例 —— */
.main-bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #fff;
  /* ★ 缩放因子默认值——JS 会覆盖为实际比例，确保子元素 calc(px*var) 生效 */
  --main-s: 1;
}
.main-bg-layer > img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
}
/* ★ 2026-08-23 用户拍板：主界面动态背景（MP4 循环）。
   video 默认 object-fit 是 contain（铺不满出黑边）——必须显式 cover；
   画幅 21:9（1470×630）比 20:9 宽 4.7%，cover 两侧各裁 ~2.3%，锚点布局不受影响。 */
.main-bg-layer > video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
  object-fit: cover;
  pointer-events: none;   /* 背景层不拦任何点击 */
}
/* 背景层之上的内容覆盖层——全视口铺满，元素直接视口锚定 */
.main-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ── 主界面顶部信息栏（视口锚定，对标 MD 顶部 UI）── */
/* ★ 锚定分治重构：bar 仅作 fixed 定位容器（无高度），子元素 absolute 独立锚定。
 *   左组（.top-rank-group）：段位蒙板 + 头像框 + 头像 + 玩家名 + 等级/XP + 段位徽章
 *   右组（.top-bar-right）：货币底板 + 数字
 *   pointer-events:none 让空区域穿透到下层内容 */
#main-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 无 height——纯定位容器，子元素 absolute 各自锚定 */
  background: transparent;
  z-index: 10;
  pointer-events: none; /* 空区域穿透到下层内容 */
}
/* ★ 段位蒙板组——relative 容器承载蒙板+头像+名字+段位徽章叠层 */
.top-rank-group {
  position: absolute;
  pointer-events: auto; /* 恢复子元素点击 */
}
/* 右组：货币底板 + 数字——absolute 锚定视口右上 */
.top-bar-right {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
/* ★ 混搭布局：body-level 共享元素 body[data-screen] 控制显隐
 *   （旧规则 .screen:not(.active) #main-top-bar 已删除——
 *    #main-top-bar 已移至 body 不再在 .screen 内，旧规则永远不匹配） */
body:not([data-screen="main"]) #main-top-bar .top-rank-group { display: none; }
body:not([data-screen="main"]):not([data-screen="adventure"]):not([data-screen="battle"]):not([data-screen="deck"]):not([data-screen="pack-shop"]):not([data-screen="pack-detail"]) #main-top-bar { display: none; }
/* 货币图标——阴之玉铜钱 / 阳之玉玉璧，紧贴数字左侧 */
.top-bar-currency-icon {
  width: calc(28px * var(--nav-s, 1));
  height: calc(28px * var(--nav-s, 1));
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── 主界面底部导航栏（视口锚定，对标 MD 底部 UI）── */
/* ★ 锚定分治重构：nav-jump-bar.png 作为 absolute 全宽底板，按钮 flex 浮于上方 */
#main-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: calc(50px * var(--nav-s, 1));
  align-items: center;
  padding: calc(12px * var(--nav-s, 1)) calc(74px * var(--nav-s, 1)) calc(12px * var(--nav-s, 1)) calc(4px * var(--nav-s, 1));
  padding-bottom: calc(23px * var(--nav-s, 1) + env(safe-area-inset-bottom, 0px));
  background: transparent;
  z-index: 10;
  pointer-events: none; /* 空区域穿透 */
}
/* ★ 跳转便条底板——absolute 全宽铺底，pointer-events:none 不挡按钮点击 */
#main-nav-bar .nav-jump-bar-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
/* 按钮恢复点击，浮在底板上方 */
#main-nav-bar .nav-btn-injected {
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transform: translateX(calc(-70px * var(--nav-s, 1)));
}
/* 点击时金色高亮 */
#main-nav-bar .nav-btn-injected:active {
  color: #ffd700 !important;
  text-shadow: 0 0 calc(14px * var(--nav-s, 1)) rgba(255,215,0,.9) !important;
}
/* ★ 混搭布局：body-level 导航栏仅在主界面/冒险/对战大厅显示，其他界面隐藏 */
body:not([data-screen="main"]):not([data-screen="adventure"]):not([data-screen="battle"]) #main-nav-bar { display: none; }
/* 对战中隐藏导航栏（游戏区覆盖全屏） */
body.in-game #main-nav-bar { display: none; }
/* ★ 对战中隐藏货币顶栏——战场无货币显示（2026-08-16 用户拍板；大厅仍显示） */
body.in-game #main-top-bar { display: none; }
/* ★ 开始按钮——仅对战大厅显示，对战中隐藏（与导航栏同生命周期） */
body:not([data-screen="battle"]) .battle-lobby-start,
body.in-game .battle-lobby-start { display: none; }
.screen:not(.active) #main-bulletin { display: none; }

/* ── 主界面公告栏（视口锚定，对标 MD 中部 UI）── */
/* ★ 锚定分治重构：公告栏从 content-layer 移出，vw/vh 独立锚定视口中部偏左 */
#main-bulletin {
  position: fixed;
  z-index: 5;
  pointer-events: none; /* 公告栏无交互 */
}
#main-bulletin img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 导航按钮点击发光效果 ── */
/* 8 个楷体导航按钮（JS 注入 .nav-btn-injected）——点击时金色光晕，各容器用自己的 --s 变量 */
.main-content-layer .nav-btn-injected:active {
  color: #ffd700 !important;
  text-shadow: 0 0 calc(14px * var(--main-s)) rgba(255,215,0,.9), 0 0 calc(32px * var(--main-s)) rgba(255,215,0,.5), 0 0 calc(54px * var(--main-s)) rgba(255,215,0,.25), 0 calc(1px * var(--main-s)) calc(4px * var(--main-s)) rgba(0,0,0,.7) !important;
}
.adventure-content-layer .nav-btn-injected:active {
  color: #ffd700 !important;
  text-shadow: 0 0 calc(14px * var(--adventure-s)) rgba(255,215,0,.9), 0 0 calc(32px * var(--adventure-s)) rgba(255,215,0,.5), 0 0 calc(54px * var(--adventure-s)) rgba(255,215,0,.25), 0 calc(1px * var(--adventure-s)) calc(4px * var(--adventure-s)) rgba(0,0,0,.7) !important;
}
/* 5 个圆形图标按钮——点击时金光环（主界面独有） */
.main-content-layer button[title]:active {
  filter: drop-shadow(0 0 calc(10px * var(--main-s)) rgba(255,215,0,.85)) drop-shadow(0 0 calc(22px * var(--main-s)) rgba(255,215,0,.45));
  transform: scale(0.93);
  transition: filter .15s, transform .15s;
}

/* ── 冒险模式：等比容器 1312×800（与主界面相同）── */
.adventure-bg-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #0d0b08;
  --adventure-s: 1;
}
.adventure-bg-layer > img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
}
/* ★ 2026-08-29 动态背景层（方案同主界面/收藏界面）：
   视频叠在静态兜底图之上、.adventure-content-layer 内容层之下（同层按 DOM 序绘制）；
   文件=正放循环+循环点 1s 交叉淡化（无缝）；0.7× 慢放/起播兜底在 screens-main.js onEnter */
#adv-bg-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;   /* 背景层不拦任何点击 */
}
#adv-bg-video video {
  width: 100%; height: 100%;
  display: block;
  opacity: 0.92;
  object-fit: cover;      /* 21:9（1470×630）素材在 20:9 视口两侧各裁 ~2.3%，同 main-bg */
}
.adventure-content-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ── 冒险模式：事件条（事件底板 377×37@1312 → 2 倍高度 434×86 设计基准@1512，锚定 --adventure-s 等比缩放）── */
.adventure-event-bar {
  position: relative;
  /* 宽高基于新底板原生尺寸（377×37 于 1312 画布 = 434×43 于 1512 设计基准），整体系数缩放 */
  width: calc(434px * var(--adventure-s));
  height: calc(86px * var(--adventure-s));
  /* 间距同样锚定缩放因子——行距 86+12=98px（2 倍高度），列表框高 10 行 */
  margin: calc(6px * var(--adventure-s)) auto;
  border-radius: calc(4px * var(--adventure-s));
  cursor: pointer;
  transition: filter .2s, transform .15s;
  /* 底板图从 CSS 加载，不再通过 JS 内联 style */
  background-image: url('../assets/adventure/event-bar-bg2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex; align-items: center; justify-content: center; text-align: center; justify-content: center;
}
.adventure-event-bar:hover {
  filter: brightness(1.25);
  transform: scale(1.02);
}
.adventure-event-bar.current {
  box-shadow: 0 0 calc(10px * var(--adventure-s)) rgba(255,215,0,.35);
}
.adventure-event-bar.locked {
  opacity: 0.55; cursor: not-allowed; filter: grayscale(0.5);
}
.adventure-event-bar.locked:hover {
  filter: grayscale(0.5) brightness(1.1); transform: none;
}
.adventure-event-bar .event-name {
  position: relative; z-index: 1;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(40px * var(--adventure-s)); font-weight: bold;
  color: rgba(255,255,255,.88);
  text-shadow: 0 calc(1px * var(--adventure-s)) calc(3px * var(--adventure-s)) rgba(0,0,0,.8);
  pointer-events: none;
}
.adventure-event-bar .event-status-icon {
  position: absolute; left: calc(12px * var(--adventure-s)); top: 50%; transform: translateY(-50%);
  font-size: calc(32px * var(--adventure-s)); z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
/* 锁链图标——锁定章节的 SVG 挂锁 */
.event-lock-icon {
  width: calc(36px * var(--adventure-s));
  height: calc(36px * var(--adventure-s));
}
/* 锁链图标在 locked 状态条中更加醒目 */
.adventure-event-bar.locked .event-lock-icon {
  stroke: rgba(180,160,100,.6);
  filter: drop-shadow(0 0 calc(3px * var(--adventure-s)) rgba(200,180,120,.3));
}
/* 红章「胜」——已通关事件条左侧 */
.event-stamp-win {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(44px * var(--adventure-s)); height: calc(44px * var(--adventure-s));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(30px * var(--adventure-s)); font-weight: bold;
  color: #c0392b;
  border: calc(4px * var(--adventure-s)) solid #c0392b;
  border-radius: calc(6px * var(--adventure-s));
  background: rgba(192,57,43,.08);
  text-shadow: none;
}

/* ── 事件详情文本框选中态 ── */
#adventure-story-box .story-title {
  font-size: calc(30px * var(--adventure-s)); color: #ffd700; font-weight: bold;
  margin-bottom: calc(16px * var(--adventure-s)); padding-bottom: calc(10px * var(--adventure-s));
  border-bottom: calc(1px * var(--adventure-s)) solid rgba(201,160,80,.2);
  text-shadow: 0 0 calc(10px * var(--adventure-s)) rgba(255,215,0,.3);
}

/* ── 故事逐行动画：由下往上依次出现 ── */
@keyframes storyLineReveal {
  0%   { opacity: 0; transform: translateY(calc(18px * var(--adventure-s, 1))); }
  100% { opacity: 1; transform: translateY(0); }
}
#adventure-story-box .story-line {
  display: block;
  opacity: 0;
  animation: storyLineReveal .55s ease-out forwards;
}
#adventure-story-box .story-body .story-line {
  margin-bottom: calc(4px * var(--adventure-s, 1));
}

/* 事件开始战斗按钮——故事底部居中 */
.adventure-start-btn {
  display: block; margin: calc(30px * var(--adventure-s, 1)) auto 0;
  padding: calc(14px * var(--adventure-s, 1)) calc(48px * var(--adventure-s, 1));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(32px * var(--adventure-s, 1)); font-weight: bold;
  color: #000; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.85);
  border: calc(2px * var(--adventure-s, 1)) solid rgba(255,255,255,.5);
  border-radius: calc(8px * var(--adventure-s, 1));
  transition: background .2s, box-shadow .2s;
  width: fit-content;
}
.adventure-start-btn:hover {
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 calc(16px * var(--adventure-s, 1)) rgba(255,255,255,.25);
}

/* 事件模式卡组选择下拉框——对标对战大厅卡组选择器 */
.adventure-deck-select {
  display: block; margin: calc(20px * var(--adventure-s, 1)) auto 0;
  padding: calc(12px * var(--adventure-s, 1)) calc(28px * var(--adventure-s, 1));
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(26px * var(--adventure-s, 1)); font-weight: bold;
  color: #f5e6c8; text-align: center; cursor: pointer;
  background: rgba(0,0,0,.55);
  border: calc(2px * var(--adventure-s, 1)) solid rgba(200,184,122,.35);
  border-radius: calc(8px * var(--adventure-s, 1));
  outline: none; width: auto; min-width: calc(240px * var(--adventure-s, 1));
  appearance: none; -webkit-appearance: none;
  /* 自定义下拉箭头——▼ */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23c8b87a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(14px * var(--adventure-s, 1)) center;
  background-size: calc(12px * var(--adventure-s, 1)) auto;
  padding-right: calc(42px * var(--adventure-s, 1));
}
.adventure-deck-select:hover {
  border-color: rgba(200,184,122,.6); background-color: rgba(0,0,0,.65);
}
.adventure-deck-select option {
  background: #1a1814; color: #f5e6c8;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  font-size: calc(22px * var(--adventure-s, 1));
}

/* ═══════════════════════════════════════════════════════════
   新屏幕：邮箱 / 任务 / 录像 / 好友
   ═══════════════════════════════════════════════════════════ */

/* ── 邮箱 ── */
.mail-tabs {
  display: flex; gap: calc(6px * var(--main-s, 1)); margin-bottom: calc(12px * var(--main-s, 1)); flex-wrap: wrap;
}
.mail-tab {
  padding: calc(6px * var(--main-s, 1)) calc(14px * var(--main-s, 1)); border-radius: calc(16px * var(--main-s, 1));
  background: rgba(201,160,80,.06);
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.12);
  color: #8a7a50; cursor: pointer;
  font-family: inherit; font-size: calc(12px * var(--main-s, 1));
  transition: all .15s;
}
.mail-tab:hover { border-color: #c9a050; color: #c9a050; }
.mail-tab.active { background: rgba(255,215,0,.15); border-color: #ffd700; color: #ffd700; }

/* ── 每日任务（等比缩放，var(--main-s,1) 回退保证独立页面不变）── */
.quests-reset-bar {
  text-align: center; font-size: calc(22px * var(--main-s, 1)); color: #8a7a50;
  margin-bottom: calc(20px * var(--main-s, 1)); padding: calc(12px * var(--main-s, 1)) calc(18px * var(--main-s, 1));
  background: rgba(255,255,255,.02); border-radius: calc(8px * var(--main-s, 1));
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.08);
}
.quests-list { display: flex; flex-direction: column; gap: calc(18px * var(--main-s, 1)); }
.quest-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  gap: calc(22px * var(--main-s, 1));
  padding: calc(26px * var(--main-s, 1)); border-radius: calc(12px * var(--main-s, 1));
  background: rgba(20,14,10,.6);
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.12);
  transition: all .15s;
}
.quest-card:hover { border-color: rgba(201,160,80,.3); }
.quest-icon { font-size: calc(52px * var(--main-s, 1)); }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-size: calc(26px * var(--main-s, 1)); font-weight: bold; color: #d4c8a0; margin-bottom: calc(6px * var(--main-s, 1)); }
.quest-desc { font-size: calc(20px * var(--main-s, 1)); color: #d4c8a0; margin-bottom: calc(12px * var(--main-s, 1)); }
.quest-progress {
  height: calc(8px * var(--main-s, 1)); background: rgba(255,255,255,.08);
  border-radius: calc(3px * var(--main-s, 1)); overflow: hidden;
}
.quest-progress-fill {
  height: 100%; background: linear-gradient(90deg, #c9a050, #ffd700);
  border-radius: calc(3px * var(--main-s, 1)); transition: width .4s;
}
.quest-reward {
  font-size: calc(26px * var(--main-s, 1)); font-weight: bold; color: #ffd700;
  white-space: nowrap;
}
.quest-progress-text {
  font-size: calc(17px * var(--main-s, 1)); color: #aaa; margin-top: calc(4px * var(--main-s, 1));
  text-align: left;
}
.quest-reward-area {
  display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--main-s, 1));
  min-width: calc(80px * var(--main-s, 1));
}
.quest-claim-btn {
  padding: calc(6px * var(--main-s, 1)) calc(16px * var(--main-s, 1));
  font-size: calc(20px * var(--main-s, 1)); font-weight: bold;
  color: #1a1008; background: linear-gradient(135deg, #ffd700, #c9a050);
  border: none; border-radius: calc(6px * var(--main-s, 1)); cursor: pointer;
  transition: filter .2s;
}
.quest-claim-btn:hover { filter: brightness(1.2); }
.quest-reroll-btn {
  padding: calc(4px * var(--main-s, 1)) calc(12px * var(--main-s, 1));
  font-size: calc(17px * var(--main-s, 1)); color: #8a7a50;
  background: rgba(255,255,255,.06); border: 1px solid rgba(201,160,80,.2);
  border-radius: calc(6px * var(--main-s, 1)); cursor: pointer;
  transition: all .15s;
}
.quest-reroll-btn:hover { color: #c9a050; border-color: rgba(201,160,80,.5); }
.quest-claimed-label, .quest-rerolled-label {
  font-size: calc(17px * var(--main-s, 1)); color: #555; white-space: nowrap;
}
.quest-claimed { opacity: .5; }

/* ── 对战录像（档案弹窗内滑动卡片）── */
.replay-swipe-container {
  height: calc(200px * var(--main-s, 1));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: calc(12px * var(--main-s, 1));
  /* 隐藏滚动条——保持可滚动 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.replay-swipe-container::-webkit-scrollbar { display: none; }
.replay-swipe-card {
  height: calc(200px * var(--main-s, 1));
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8px * var(--main-s, 1));
  padding: calc(16px * var(--main-s, 1)) calc(24px * var(--main-s, 1));
  cursor: pointer;
  background: rgba(255,255,255,.03);
  border-bottom: calc(1px * var(--main-s, 1)) solid rgba(255,255,255,.06);
  transition: background .15s;
}
.replay-swipe-card:hover { background: rgba(255,255,255,.06); }
.replay-card-badge {
  font-size: calc(28px * var(--main-s, 1)); font-weight: bold;
  padding: calc(2px * var(--main-s, 1)) calc(16px * var(--main-s, 1));
  border-radius: calc(6px * var(--main-s, 1));
}
.replay-badge-win  { color: #4caf50; background: rgba(76,175,80,.12); }
.replay-badge-loss { color: #f44336; background: rgba(244,67,54,.12); }
.replay-badge-draw { color: #9e9e9e; background: rgba(158,158,158,.12); }
.replay-card-type {
  font-size: calc(20px * var(--main-s, 1)); color: #aaa;
}
.replay-card-opponent {
  font-size: calc(24px * var(--main-s, 1)); color: #ddd; font-weight: bold;
}
.replay-card-meta {
  font-size: calc(18px * var(--main-s, 1)); color: #888;
}
.replay-card-watch-hint {
  font-size: calc(16px * var(--main-s, 1)); color: #c9a050;
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.25);
  padding: calc(2px * var(--main-s, 1)) calc(14px * var(--main-s, 1));
  border-radius: calc(4px * var(--main-s, 1));
}

/* 旧样式——保留兼容（独立对战录像屏用） */
.replays-info-bar {
  text-align: center; font-size: calc(20px * var(--main-s, 1)); color: #8a7a50;
  margin-bottom: calc(16px * var(--main-s, 1)); padding: calc(8px * var(--main-s, 1)) calc(14px * var(--main-s, 1));
  background: rgba(255,255,255,.02); border-radius: calc(8px * var(--main-s, 1));
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.08);
}
.replays-list, .replays-saved-list {
  display: flex; flex-direction: column; gap: calc(10px * var(--main-s, 1)); margin-bottom: calc(16px * var(--main-s, 1));
}
.replays-saved-section { margin-top: calc(8px * var(--main-s, 1)); }
.replays-saved-title {
  font-size: calc(26px * var(--main-s, 1)); font-weight: bold; color: #ffd700;
  margin-bottom: calc(10px * var(--main-s, 1)); letter-spacing: calc(1px * var(--main-s, 1));
}

/* ── 好友 ── */
.friends-search-bar {
  display: flex; gap: calc(10px * var(--main-s, 1)); margin-bottom: calc(12px * var(--main-s, 1));
}
.friends-search-bar input {
  flex: 1; padding: calc(10px * var(--main-s, 1)) calc(14px * var(--main-s, 1));
  background: rgba(255,255,255,.05);
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.15);
  border-radius: calc(8px * var(--main-s, 1)); color: #d4c8a0;
  font-family: inherit; font-size: calc(22px * var(--main-s, 1)); outline: none;
}
.friends-search-bar input:focus { border-color: #ffd700; }
.friends-add-btn {
  padding: calc(10px * var(--main-s, 1)) calc(20px * var(--main-s, 1)); border-radius: calc(8px * var(--main-s, 1));
  background: rgba(201,160,80,.15);
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.3);
  color: #c9a050; cursor: pointer;
  font-family: inherit; font-size: calc(22px * var(--main-s, 1)); font-weight: bold;
  white-space: nowrap; transition: all .15s;
}
.friends-add-btn:hover { background: rgba(255,215,0,.2); border-color: #ffd700; color: #ffd700; }
.friends-tabs {
  display: flex; gap: calc(8px * var(--main-s, 1)); margin-bottom: calc(14px * var(--main-s, 1));
}
.friend-tab {
  padding: calc(8px * var(--main-s, 1)) calc(18px * var(--main-s, 1)); border-radius: calc(16px * var(--main-s, 1));
  background: rgba(201,160,80,.06);
  border: calc(1px * var(--main-s, 1)) solid rgba(201,160,80,.12);
  color: #8a7a50; cursor: pointer;
  font-family: inherit; font-size: calc(22px * var(--main-s, 1));
  transition: all .15s;
}
.friend-tab:hover { border-color: #c9a050; color: #c9a050; }
.friend-tab.active { background: rgba(255,215,0,.15); border-color: #ffd700; color: #ffd700; }
.friends-list {
  display: flex; flex-direction: column; gap: calc(10px * var(--main-s, 1));
}


/* ═══════════════════════════════════════════════════════════
   竞技模式——确认弹窗（全局覆盖层，浮在所有界面上）
   ═══════════════════════════════════════════════════════════ */

/* 弹窗覆盖层——全屏固定，半透明黑底遮罩 */
#arena-confirm-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
}

/* 弹窗容器——等比缩放 508:268 */
#arena-confirm-box {
  position: relative;
  width: 508px; height: 268px;
}

#arena-confirm-bg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}

/* 弹窗内文字——白色楷体，百分比定位 */
.arena-popup-txt {
  position: absolute;
  font-family: 'KaiTi','楷体','STKaiti',serif;
  color: rgba(255,255,255,1);
  white-space: nowrap;
  pointer-events: none;
}

/* 提示区——换行长文本 */
.arena-popup-hint {
  white-space: normal;
  text-align: left;
  line-height: 1.5;
}

/* 按钮——可点击 */
.arena-popup-btn {
  pointer-events: auto;
  cursor: pointer;
}
.arena-popup-btn:hover {
  text-shadow: 0 0 12px rgba(255,215,0,0.8);
  color: #FFD700;
}

/* ── 回放播放器覆盖层（录像）── */
.replay-viewer-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.75); z-index: 10002;
  align-items: center; justify-content: center;
}
.replay-viewer-overlay.active { display: flex; }

.replay-viewer-box {
  background: #fff;
  border: 2px solid #222;
  border-radius: 10px;
  width: 90%; max-width: 640px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 6px 30px rgba(0,0,0,.5);
  animation: confirm-pop 0.2s ease-out;
  overflow: hidden;
}

/* 标题栏 */
.replay-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #ddd;
  background: #fafafa;
}
.replay-viewer-title {
  font-size: 16px; font-weight: bold; color: #1a1a1a;
}
.replay-viewer-close {
  background: none; border: none; font-size: 20px;
  color: #888; cursor: pointer; padding: 0 4px;
}
.replay-viewer-close:hover { color: #222; }

/* 进度条 */
.replay-viewer-progress-bar {
  position: relative;
  height: 6px; background: #e0e0e0;
  margin: 0; flex-shrink: 0;
}
.replay-viewer-progress-fill {
  height: 100%; background: #4a90d9;
  transition: width 0.3s ease;
  width: 0%;
}
.replay-viewer-progress-text {
  position: absolute; right: 8px; top: -20px;
  font-size: 11px; color: #888;
}

/* 事件显示区 */
.replay-viewer-event-area {
  padding: 24px 20px 12px;
  text-align: center;
  min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.replay-viewer-event-text {
  font-size: 20px; font-weight: bold; color: #1a1a1a;
  line-height: 1.5;
}
.replay-viewer-event-index {
  font-size: 12px; color: #999; margin-top: 4px;
}

/* 事件历史 */
.replay-viewer-history {
  padding: 8px 20px;
  max-height: 140px; overflow-y: auto;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.replay-history-item {
  font-size: 13px; color: #999; padding: 3px 0;
  transition: color 0.2s;
}
.replay-history-current {
  color: #1a1a1a; font-weight: bold;
  font-size: 14px;
}

/* 控制栏 */
.replay-viewer-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 20px;
  background: #fafafa;
}
.replay-btn {
  background: #fff; color: #1a1a1a;
  border: 1.5px solid #333;
  border-radius: 6px;
  padding: 8px 14px; min-width: 40px;
  font-size: 14px; cursor: pointer;
  transition: all .15s;
}
.replay-btn:hover {
  background: #f0f0f0;
  border-color: #000;
}
.replay-btn.active {
  background: #1a1a1a; color: #fff;
  border-color: #1a1a1a;
}
.replay-speed-btn {
  font-size: 12px; padding: 6px 10px; min-width: 32px;
}

/* ── 5 图标弹窗（等比缩放：calc(px * var(--main-s,1))，跟随主界面缩放）── */
.popup-overlay {
  display: flex;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55); z-index: 10002;
  align-items: center; justify-content: center;
}
.popup-box {
  background: #fff;
  border: calc(2px * var(--main-s, 1)) solid #222;
  border-radius: calc(10px * var(--main-s, 1));
  max-width: 90vw; max-height: 80vh;
  box-shadow: 0 calc(6px * var(--main-s, 1)) calc(28px * var(--main-s, 1)) rgba(0,0,0,.4);
  animation: confirm-pop 0.2s ease-out;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.popup-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(18px * var(--main-s, 1)) calc(20px * var(--main-s, 1)) calc(12px * var(--main-s, 1));
  border-bottom: calc(1px * var(--main-s, 1)) solid #e0e0e0;
}
.popup-title {
  font-size: calc(32px * var(--main-s, 1)); font-weight: bold; color: #1a1a1a;
}
.popup-close {
  background: none; border: none; font-size: calc(18px * var(--main-s, 1)); color: #666;
  cursor: pointer; padding: calc(4px * var(--main-s, 1)) calc(8px * var(--main-s, 1)); line-height: 1;
}
.popup-close:hover { color: #1a1a1a; }
.popup-body {
  flex: 1; overflow-y: auto; padding: calc(12px * var(--main-s, 1)) calc(16px * var(--main-s, 1));
  max-height: calc(480px * var(--main-s, 1));
}
/* 弹窗内通用按钮放大 */
.popup-body .game-btn { font-size: calc(22px * var(--main-s, 1)); padding: calc(10px * var(--main-s, 1)) calc(20px * var(--main-s, 1)); }
/* 弹窗关闭按钮放大 */
.popup-close { font-size: calc(26px * var(--main-s, 1)); }
.popup-tabs {
  display: flex; gap: calc(6px * var(--main-s, 1));
  padding-bottom: calc(10px * var(--main-s, 1));
  border-bottom: calc(1px * var(--main-s, 1)) solid #f0f0f0;
  margin-bottom: calc(8px * var(--main-s, 1));
}
.popup-tab {
  background: #f5f5f5; border: calc(1px * var(--main-s, 1)) solid #ddd;
  border-radius: calc(6px * var(--main-s, 1));
  padding: calc(8px * var(--main-s, 1)) calc(18px * var(--main-s, 1));
  font-size: calc(22px * var(--main-s, 1));
  color: #666; cursor: pointer;
}
.popup-tab.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.popup-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(16px * var(--main-s, 1)) calc(10px * var(--main-s, 1));
  border-bottom: calc(1px * var(--main-s, 1)) solid #f5f5f5;
}
.popup-row:last-child { border-bottom: none; }
.popup-row-left {
  display: flex; flex-direction: column; gap: calc(4px * var(--main-s, 1)); flex: 1;
}
.popup-row-emoji { font-size: calc(26px * var(--main-s, 1)); }
.popup-row-title { font-size: calc(26px * var(--main-s, 1)); color: #1a1a1a; font-weight: 500; }
.popup-row-meta { font-size: calc(20px * var(--main-s, 1)); color: #999; }

/* ── 卡组编辑·合成卡实卡格（2026-07-12：底板+名字 → 真实卡面，对标炉石）── */
.card-lib-item.lib-composited,
.deck-area-card.area-composited {
  background: none;
  justify-content: flex-start;
  overflow: hidden;
}
.card-lib-item.lib-composited .lib-card-count {
  position: absolute;
  top: calc(2px * var(--deck-editor-s));
  right: calc(3px * var(--deck-editor-s));
  z-index: 2;
  font-size: calc(12px * var(--deck-editor-s));
  color: #ffd700;
  background: rgba(0,0,0,0.78);
  border-radius: calc(3px * var(--deck-editor-s));
  padding: 0 calc(4px * var(--deck-editor-s));
  pointer-events: none;
}
.deck-area-card.area-composited .area-card-count {
  position: absolute;
  top: calc(2px * var(--deck-editor-s));
  right: calc(3px * var(--deck-editor-s));
  z-index: 2;
  font-size: calc(14px * var(--deck-editor-s));
  color: #ffd700;
  background: rgba(0,0,0,0.78);
  border-radius: calc(3px * var(--deck-editor-s));
  padding: 0 calc(4px * var(--deck-editor-s));
  pointer-events: none;
}
/* 卡名标签——手机端卡太小，不加名字看不清（对标商店卡包 .pd-name） */
.deck-area-card.area-composited .area-card-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  font-size: calc(20px * var(--deck-editor-s));
  color: #f5e8c8; text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  padding: calc(10px * var(--deck-editor-s)) calc(2px * var(--deck-editor-s)) calc(3px * var(--deck-editor-s));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   送审包：用户协议覆盖层（Pattern B 固定覆盖层 + 深色主题）
   z-index 100001 高于 loading-overlay(99999) 和所有 popup-overlay(10002)
   ═══════════════════════════════════════════════════════════════════ */
.agreement-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100001;
  background: rgba(0,0,0,.88);
  align-items: center; justify-content: center;
}
.agreement-overlay.active { display: flex; }

.agreement-box {
  width: min(90vw, 680px);
  max-height: 88vh;
  background: linear-gradient(175deg, #1e1912, #0d0b08);
  border: 2px solid rgba(201,160,80,.35);
  border-radius: 12px;
  padding: calc(28px * var(--main-s, 1)) calc(24px * var(--main-s, 1));
  display: flex; flex-direction: column;
  color: #d0c8a8;
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
}

.agreement-title {
  text-align: center;
  font-size: calc(20px * var(--main-s, 1));
  font-weight: bold;
  color: #c9a050;
  margin-bottom: calc(16px * var(--main-s, 1));
  letter-spacing: calc(2px * var(--main-s, 1));
  flex-shrink: 0;
}

.agreement-text {
  flex: 1;
  overflow-y: auto;
  font-size: calc(14px * var(--main-s, 1));
  line-height: 1.8;
  white-space: pre-wrap;
  max-height: 52vh;
  padding: calc(4px * var(--main-s, 1)) calc(8px * var(--main-s, 1));
  /* 滚动条微调——暗色细条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(201,160,80,.3) transparent;
}
.agreement-text::-webkit-scrollbar { width: 6px; }
.agreement-text::-webkit-scrollbar-thumb {
  background: rgba(201,160,80,.3); border-radius: 3px;
}

.agreement-privacy-link {
  text-align: center;
  padding: calc(10px * var(--main-s, 1)) 0 calc(6px * var(--main-s, 1)) 0;
  flex-shrink: 0;
}
.agreement-privacy-link a {
  color: #8a9ab0;
  font-size: calc(13px * var(--main-s, 1));
  text-decoration: underline;
}
.agreement-privacy-link a:hover { color: #aab8cc; }

.agreement-btns {
  display: flex;
  gap: calc(16px * var(--main-s, 1));
  justify-content: center;
  padding-top: calc(8px * var(--main-s, 1));
  flex-shrink: 0;
}
.agreement-btns .game-btn {
  min-width: calc(120px * var(--main-s, 1));
  padding: calc(10px * var(--main-s, 1)) calc(24px * var(--main-s, 1));
  font-size: calc(15px * var(--main-s, 1));
}
.agreement-btns .game-btn.primary {
  background: linear-gradient(180deg, #c9a050, #a07830);
  border-color: #c9a050;
  color: #1a1510;
  font-weight: bold;
}

/* 注册表单隐私提示 */
.auth-privacy-notice {
  text-align: center;
  font-size: calc(11px * var(--main-s, 1));
  color: #7a7a6a;
  margin-top: calc(8px * var(--main-s, 1));
}
.auth-privacy-notice a {
  color: #8a9ab0;
  text-decoration: underline;
}
.auth-privacy-notice a:hover { color: #aab8cc; }

/* ── 玩家档案弹窗 ── */
.profile-section {
  background: #f9f6f0;
  border-radius: calc(8px * var(--main-s, 1));
  padding: calc(14px * var(--main-s, 1));
  margin-bottom: calc(12px * var(--main-s, 1));
}
.profile-section-title {
  font-size: calc(32px * var(--main-s, 1));
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: calc(8px * var(--main-s, 1));
}
.profile-avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--main-s, 1));
}
.profile-avatar-item {
  width: calc(160px * var(--main-s, 1));
  height: calc(160px * var(--main-s, 1));
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: calc(3px * var(--main-s, 1)) solid #ddd;
  position: relative;
  transition: border-color 0.2s;
}
.profile-avatar-item:hover { border-color: #c9a050; }
.profile-avatar-item.active { border-color: #c9a050; }
.profile-avatar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(201,160,80,.85);
  color: #fff;
  font-size: calc(16px * var(--main-s, 1));
  text-align: center;
  padding: calc(2px * var(--main-s, 1)) 0;
}
.profile-stat-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.profile-stat-value {
  font-size: calc(48px * var(--main-s, 1));
  font-weight: bold;
}
.profile-stat-label {
  font-size: calc(24px * var(--main-s, 1));
  color: #999;
}
.profile-progress-bar {
  height: calc(16px * var(--main-s, 1));
  background: #eee;
  border-radius: calc(8px * var(--main-s, 1));
  overflow: hidden;
}
.profile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a050, #ffd700);
  border-radius: inherit;
}
.profile-progress-fill.small { height: calc(4px * var(--main-s, 1)); background: #c9a050; border-radius: calc(2px * var(--main-s, 1)); }