/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
  color: #fff;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 禁止 iOS Safari 双击放大：viewport 的 user-scalable=no 在 iOS 上被忽略，
     必须用 touch-action:manipulation 才能去掉双击缩放 + 300ms 点击延迟，
     同时保留正常的滚动/滑卡/点击响应。 */
  touch-action: manipulation;
}

/* ===== Layout Switch ===== */
.desktop-layout { display: none; }
.mobile-layout  { display: block; }

@media (min-width: 768px) {
  body:not(.is-mobile-device) .desktop-layout { display: flex; width: 100%; height: 100%; }
  body:not(.is-mobile-device) .mobile-layout  { display: none; }
  body:not(.is-mobile-device) .top-bar { display: none; }
  body:not(.is-mobile-device) .game-info-overlay { display: none; }
  body:not(.is-mobile-device) #bottomNav { display: none; }

  /* 桌面端：action-bar 始终作为右侧 96px 固定 sidebar
     feed 模式 → 显示当前可见卡片的厂商/收藏/转发等，下方预览下一张
     game-playing 模式 → 同样显示，预览跳到下一张游戏 */
  body:not(.is-mobile-device) .action-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 96px;
    padding: 12px 0 16px;
    gap: 18px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-left: 1px solid rgba(255,255,255,.06);
    z-index: 95;
    overflow-y: auto;
    scrollbar-width: none;
  }
  body:not(.is-mobile-device) .action-bar::-webkit-scrollbar { display: none; }
  /* 进入横屏全屏时隐藏 actionBar，把所有空间让给游戏 */
  body:not(.is-mobile-device).game-playing.game-fs-landscape .action-bar { display: none; }
  /* 桌面端右栏内的 action-item 文字稍小，避免占满 */
  body:not(.is-mobile-device) .action-bar .action-item .action-count { font-size: 11px; }
  /* 桌面端预览栏可见 + 紧跟转发按钮，与上面 action-item 保持 18px 间距 */
  body:not(.is-mobile-device) .next-game-preview {
    display: flex !important;
    margin-top: 0;
  }
  /* 桌面端隐藏移动端遗留的 game-info-overlay */
  body:not(.is-mobile-device) .game-info-overlay { display: none !important; }

  /* dt-main 让出右侧 96px 给 actionBar，避免 dt-game-card 被遮挡 */
  body:not(.is-mobile-device) .dt-main { padding-right: 96px; }
  /* 进入游戏 game-fullscreen 已自带 right:96px，不再叠加 padding */
  body:not(.is-mobile-device).game-playing .dt-main { padding-right: 0; }
  body:not(.is-mobile-device).game-playing.game-fs-landscape .dt-main { padding-right: 0; }
}

/* 桌面端 actionBar 顶部上下切换按钮组（移动端隐藏） */
.action-nav-group {
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.action-nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .12s;
}
.action-nav-btn:hover { background: rgba(255,255,255,.18); }
.action-nav-btn:active { transform: scale(.92); background: rgba(255,255,255,.25); }
@media (min-width: 768px) {
  /* 桌面端 actionBar 顶部上下切换按钮：feed 模式滚 dt-feed，game-playing 模式切游戏 */
  body:not(.is-mobile-device) .action-nav-group { display: flex; }
}

/* ======================================================
   DESKTOP — TikTok Web Style (3-column)
   ====================================================== */

/* -- Left Sidebar -- */
/* 桌面端导航栏宽度变量，窗口缩小时折叠
   学 TikTok 桌面：宽屏 240px 完整展示，窄屏只剩图标 */
:root { --dt-sidebar-w: 240px; }
.dt-sidebar {
  width: var(--dt-sidebar-w, 240px);
  min-width: var(--dt-sidebar-w, 240px);
  height: 100vh;
  background: #121212;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  /* 默认状态：在 desktop-layout flex 流里正常占位 */
  position: relative;
  z-index: 1;
  transition: width .2s ease, min-width .2s ease;
}

/* === 进入游戏后，sidebar 单独提升到 game-fullscreen 之上 ===
   只在 game-playing 时把 .dt-sidebar 提到 fixed + 极高 z-index，
   不动 .dt-main 布局（dt-main 反正被 #dtFeed visibility:hidden 让位了，
   不会因 sidebar 离开 flex 而抖动）。这样 sidebar 上的"推荐/老虎机/..."
   按钮永远可点，不会被全屏游戏 iframe 覆盖。
   z-index 设到 9999 + !important 是为了确保任何情况下都不会被其他覆盖物盖住，
   pointer-events:auto !important 防止任何上游规则把 sidebar 关闭点击。 */
@media (min-width: 768px) {
  body:not(.is-mobile-device).game-playing .dt-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  body:not(.is-mobile-device).game-playing .dt-sidebar * {
    pointer-events: auto !important;
  }
  body:not(.is-mobile-device).game-playing .action-bar {
    z-index: 9999 !important;
    pointer-events: none !important;  /* 容器透明，子元素接管 */
  }
  body:not(.is-mobile-device).game-playing .action-bar > * {
    pointer-events: auto !important;
  }
}

/* ====== 折叠模式：窗口 ≤1024px 时左侧导航变为 64px 图标-only ====== */
@media (max-width: 1024px) {
  :root { --dt-sidebar-w: 64px; }
  .dt-sidebar { overflow-y: auto; }
  /* 隐藏所有文字 */
  .dt-sidebar.is-collapsed .dt-sidebar-brand,
  body.is-collapsed-nav .dt-sidebar-brand,
  .dt-sidebar-brand { display: none; }
  .dt-nav-item span,
  .dt-nav-section-title { display: none; }
  /* 图标居中 */
  .dt-sidebar-logo {
    justify-content: center;
    padding: 16px 0 14px;
    gap: 0;
  }
  .dt-nav-item {
    justify-content: center;
    padding: 12px 8px;
    gap: 0;
  }
  .dt-nav-item svg { width: 22px; height: 22px; }
  /* 关注厂商等以前折行的菜单 → 单图标 */
  .dt-nav-divider { margin: 6px 8px; }
  /* footer：登录/注册改图标按钮、avatar 居中、文字隐藏 */
  .dt-sidebar-footer { padding: 10px 6px; }
  .dt-sidebar-login {
    flex-direction: column;
    gap: 6px;
  }
  .dt-login-btn, .dt-register-btn {
    padding: 8px 4px;
    font-size: 11px;
    width: 100%;
  }
  .dt-user-trigger {
    padding: 6px;
    flex-direction: column;
    gap: 2px;
  }
  .dt-user-info { display: none; }
  .dt-user-caret { display: none; }
  .dt-user-avatar { margin: 0 auto; }
  .dt-user-logout { display: flex; margin-top: 6px; padding: 6px; }
  /* 折叠模式下下拉菜单要完全在 sidebar 之外，避免被 64px 截断 */
  .dt-user-menu {
    position: fixed !important;
    left: 70px !important;
    bottom: 12px !important;
    width: 240px !important;
  }
  /* topbar 搜索栏在窄屏也缩小一点 */
  .dt-topbar-search { min-width: 160px; }
}

.dt-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* dt-feed-overlay (游戏中浏览大厅) 下，LOGO 充当返回游戏的入口，
   给一点可点击反馈 */
body.dt-feed-overlay .dt-sidebar-logo {
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
}
body.dt-feed-overlay .dt-sidebar-logo:hover { opacity: .8; }
body.dt-feed-overlay .dt-sidebar-logo:active { transform: scale(.96); }
.dt-sidebar-brand {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #FE2C55, #25F4EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
}

.dt-nav {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.dt-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.dt-nav-item.active {
  color: #FE2C55;
  font-weight: 700;
}
/* disabled 仅做视觉灰提示（"当前缓存里该分类没卡片游戏"），但仍允许点击：
   updateDisabledTabs 依赖 state.allGames 缓存判断，缓存可能不全（首页只拉
   card_only=true 池子，cat 游戏数为 0 不代表后端真的没有），早期版本加
   pointer-events:none 后体育/捕鱼这类小品类用户根本点不动，sidebar handler
   完全不触发，active 也无法切换。点击后 switchCategory 会调 loadGames 拉
   该分类真实数据，空了也会有「该分类暂无游戏」兜底 UI，比"按钮死了"更友好。 */
.dt-nav-item.disabled {
  color: rgba(255,255,255,.45);
}
.dt-nav-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.dt-nav-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 8px 14px;
}

.dt-nav-section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  padding: 4px 14px 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dt-sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.dt-sidebar-login {
  display: flex;
  gap: 8px;
}
.dt-login-btn, .dt-register-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.dt-login-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.dt-register-btn {
  background: #FE2C55;
  color: #fff;
}
.dt-login-btn:hover, .dt-register-btn:hover { opacity: .85; }

/* Desktop sidebar user (logged in) */
.dt-sidebar-user {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 12px;
}
.dt-user-trigger {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  color: inherit;
}
.dt-user-trigger:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.06);
}
.dt-user-trigger.open {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
}
.dt-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FE2C55, #25F4EE);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff;
  flex-shrink: 0;
}
.dt-user-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dt-user-name {
  font-size: 14px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-user-balance {
  font-size: 12px; color: #25F4EE; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dt-user-caret {
  flex-shrink: 0;
  color: rgba(255,255,255,.4);
  transition: transform .2s;
}
.dt-user-trigger.open .dt-user-caret {
  transform: rotate(180deg);
  color: rgba(255,255,255,.7);
}
.dt-user-logout {
  background: none; border: none; color: rgba(255,255,255,.5);
  cursor: pointer; padding: 6px; border-radius: 6px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.dt-user-logout:hover { color: #FE2C55; background: rgba(255,255,255,.05); }

/* Desktop sidebar user popover menu */
.dt-user-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  padding: 8px;
  background: #1f1f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.dt-user-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.dt-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  width: 100%;
}
.dt-user-menu-item:hover {
  background: rgba(255,255,255,.06);
}
.dt-user-menu-item.dt-um-danger:hover {
  background: rgba(254,44,85,.1);
  color: #FE2C55;
}
.dt-um-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: #fff;
  flex-shrink: 0;
}
.dt-um-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-um-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #FE2C55;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dt-user-menu-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 4px 4px;
}

/* -- Main Feed (Desktop) -- */
.dt-main {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dt-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
  height: 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(18,18,18,.95);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.dt-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 7px 16px;
  min-width: 220px;
}
.dt-topbar-search svg { color: rgba(255,255,255,.4); flex-shrink: 0; }
.dt-topbar-search input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  width: 100%;
}
.dt-topbar-search input::placeholder { color: rgba(255,255,255,.35); }

/* Desktop Feed — TikTok Web scroll */
.dt-feed {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.dt-feed::-webkit-scrollbar { display: none; }

/* Desktop 收藏 / 历史 网格视图 — 点击左侧"收藏" / "历史"后在 #dtFeed
   内渲染。覆盖默认 scroll-snap 行为，改成普通可滚动网格列表。
   注意 historygrid 必须和 favgrid 共用同一规则，否则历史视图会沿用
   .dt-feed 默认 scroll-snap-type: y mandatory，导致 dt-fav-header
   被强制对齐到下一个 snap 点（视觉上"返回按钮和标题都消失了"）。 */
.dt-feed[data-view="favgrid"],
.dt-feed[data-view="historygrid"] {
  scroll-snap-type: none;
  display: block;
}
/* 收藏 / 历史 grid 容器：以 sidebar 右边缘为基准向右排列，不再 max-width+居中。
   旧实现 max-width:1280px + margin:0 auto 在宽屏（>1280+sidebar）下会让 grid
   居中悬空，第一列卡片离 sidebar 很远，体验上"看起来 sidebar 跟卡片没关系"。
   改成 width:100% 后，grid 跟随 dt-main 满宽，padding 控制与 sidebar / 视口右
   边缘的安全间距，无论窗口怎么拉伸卡片都从左侧 sidebar 边贴齐。 */
.dt-fav-wrap {
  width: 100%;
  padding: 28px 32px 80px;
  color: #fff;
  box-sizing: border-box;
}
/* dt-fav-header 用 sticky 贴顶：滚动列表时返回按钮始终在顶部，
   避免滚下去之后找不到返回入口。背景给一层渐变 + blur，让卡片
   滚到下方不会"穿透"显得乱。 */
.dt-fav-header {
  display: flex; align-items: center;
  margin: -28px -32px 18px;
  padding: 18px 32px 14px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(18,18,18,.96) 0%, rgba(18,18,18,.85) 80%, rgba(18,18,18,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dt-fav-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  padding: 6px 12px 6px 8px;
  border-radius: 18px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.dt-fav-back:hover {
  background: rgba(254,44,85,.15);
  border-color: rgba(254,44,85,.4);
  color: #FE2C55;
}
.dt-fav-back:active { transform: scale(.96); }
.dt-fav-back svg { display: block; }
.dt-fav-header h3 {
  font-size: 22px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg,#FE2C55,#25F4EE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.dt-fav-count {
  font-size: 13px; color: rgba(255,255,255,.55);
  margin-left: auto;
}
.dt-fav-grid {
  display: grid;
  /* min(180px, 100%) 避免容器宽度不足 180px 时卡片溢出导致图标被截断；
     例如 sidebar 折叠 + 窗口拉到很窄时 dt-main 内可用宽度 < 180px，
     原来的 minmax(180px, 1fr) 会强行 180px 宽，卡片溢出到 sidebar 后面 */
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.dt-fav-loading,
.dt-fav-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 16px;
  font-size: 14px; color: rgba(255,255,255,.5);
}
.dt-fav-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
.dt-fav-card:hover {
  transform: translateY(-3px);
  border-color: rgba(254,44,85,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(254,44,85,.25) inset;
}
.dt-fav-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #1a1a22;
  overflow: hidden;
}
.dt-fav-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
.dt-fav-card:hover .dt-fav-cover img { transform: scale(1.04); }
.dt-fav-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
.dt-fav-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.32);
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
.dt-fav-card:hover .dt-fav-play { opacity: 1; }
.dt-fav-del {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; opacity: 0;
  transition: opacity .15s, background .15s, transform .12s;
}
.dt-fav-card:hover .dt-fav-del { opacity: 1; }
.dt-fav-del:hover { background: #FE2C55; }
.dt-fav-del:active { transform: scale(.9); }
.dt-fav-meta {
  padding: 10px 12px 12px;
}
.dt-fav-name {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff;
}
.dt-fav-provider {
  font-size: 12px; color: rgba(255,255,255,.5);
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1024px) {
  .dt-fav-wrap { padding: 20px 18px 80px; }
  .dt-fav-header { margin: -20px -18px 16px; padding: 14px 18px 12px; }
  .dt-fav-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
  .dt-fav-name { font-size: 13px; }
}

/* Desktop Game Card — TikTok Web Style */
.dt-game-card {
  scroll-snap-align: start;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dt-card-inner {
  width: 420px;
  max-width: 90%;
  height: calc(100vh - 80px);
  max-height: 800px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.dt-card-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dt-card-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dt-card-bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* 默认透明：未 active 的卡片 video 没 src，让底层海报 <img> 露出来；
     仅 active 卡（.is-playing）才上黑底防止视频解码出第一帧前透出底图 */
  background: transparent;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
.dt-game-card.is-playing .dt-card-bg-video {
  background: #000;
}
/* 海报底图：永远位于 video 之下、其他叠层之上 */
.dt-card-bg-img-poster {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
}
/* 桌面卡片无 bg_url 时：image 模糊放大铺底，与中央 LOGO 拉开层次 */
.dt-card-bg-img-blur {
  width: 130%; height: 130%;
  margin-left: -15%; margin-top: -15%;
  filter: blur(28px) brightness(.55) saturate(1.3);
  -webkit-filter: blur(28px) brightness(.55) saturate(1.3);
}

.dt-card-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.3) 100%);
  pointer-events: none;
}

.dt-card-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  z-index: 2;
  text-align: center;
  width: 80%;
}

.dt-card-logo {
  width: 100px; height: 100px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  overflow: hidden;
  animation: iconFloat 3s ease-in-out infinite;
}
.dt-card-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 20px;
}
.dt-card-logo .dt-card-logo-fallback {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  border-radius: 20px;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.dt-card-name {
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  margin-bottom: 6px;
}

.dt-card-rtp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(254,44,85,.85);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.dt-card-provider-tag {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

/* LOGO 下方的醒目徽章行（HOT / NEW / LIVE / 维护中），
   与移动端 .game-card-badges 居中布局保持一致 */
.dt-card-badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* Desktop card bottom info */
.dt-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  z-index: 3;
}

.dt-card-prov-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dt-card-prov-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}

.dt-card-prov-name {
  font-size: 14px;
  font-weight: 700;
}

.dt-card-follow {
  background: #FE2C55;
  border: none;
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
}

.dt-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dt-card-tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dt-card-tag-row span {
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.dt-card-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FE2C55, #ff6b81);
  border: none;
  color: #fff;
  padding: 8px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(254,44,85,.4);
  transition: transform .2s;
}
.dt-card-play-btn:hover { transform: scale(1.05); }

/* Desktop right action column - matching mobile */
.dt-card-actions {
  position: absolute;
  right: -60px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 4;
}

.dt-action-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin-bottom: 6px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.dt-action-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #1a1a2e;
}
.dt-action-avatar-text {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
/* TikTok 风格：+ 角标始终显示，未登录点击会拉起登录窗 */

/* 未登录时隐藏"收藏"入口（桌面侧栏 + 移动端下拉菜单） */
body:not(.is-logged-in) .dt-mode[data-mode="favorites"],
body:not(.is-logged-in) .cat-dd-item[data-mode="favorites"] { display: none !important; }

.dt-action-avatar .avatar-plus {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #FE2C55; color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, transform .2s cubic-bezier(.175,.885,.32,1.275);
  z-index: 2;
}
.dt-action-avatar .avatar-plus:hover { transform: translateX(-50%) scale(1.1); }
.dt-action-avatar .avatar-plus:active { transform: translateX(-50%) scale(.85); }
.dt-action-avatar .avatar-plus .ap-check { display: none; vertical-align: middle; }
.dt-action-avatar .avatar-plus.followed {
  background: rgba(0,0,0,.65);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  animation: pfbPop .35s cubic-bezier(.175,.885,.32,1.275);
}
.dt-action-avatar .avatar-plus.followed .ap-text { display: none; }
.dt-action-avatar .avatar-plus.followed .ap-check { display: block; }

.dt-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform .15s;
}
.dt-action:hover { transform: scale(1.15); }
.dt-action svg {
  width: 32px; height: 32px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.dt-action span {
  font-size: 12px;
  margin-top: 3px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.dt-action.liked svg { fill: #FE2C55; stroke: #FE2C55; }

/* ======================================================
   MOBILE — TikTok App Style (existing)
   ====================================================== */

/* -- Top Bar (sits outside mobileLayout for z-index isolation) -- */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; align-items: center;
  height: 54px;
  padding: 0 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%);
  transition: background .3s;
  pointer-events: auto;
}
body.game-playing .top-bar {
  background: #161823;
}
.top-bar-right {
  flex-shrink: 0;
  width: 36px;
  display: flex; align-items: center; justify-content: center;
}
.search-btn {
  background: none; border: none; color: #fff; cursor: pointer; opacity: .85;
}

/* 顶部 tab 条：左侧「推荐 ▾」cat-dropdown 把 mode 收成紧凑下拉，右侧 cat tab
   平铺并支持手指横向滑动浏览。配合 #mobileCatTabs { display:contents }
   把 cat-tab 提升为 .category-tabs 的直接 flex child，避免 inline span 子节点
   被默认 inline-block 自动换行（截图中"老虎机/真人/体育"换行的根因）。
   主 feed 区还有左右滑手势 → 直接切到上/下个 cat tab（参照 TikTok）。 */
.category-tabs {
  flex: 1;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; overflow-y: visible;
  padding: 0 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  flex-wrap: nowrap;
  min-width: 0;
}
.category-tabs::-webkit-scrollbar { display: none; }

/* 关键：让 #mobileCatTabs 自身从布局树消失，里面的 .cat-tab 直接成为
   #categoryTabs 的 flex child，自动 flex-shrink:0 + nowrap，不再换行。 */
#mobileCatTabs { display: contents; }

.cat-dropdown {
  position: relative; flex-shrink: 0;
}
.cat-dropdown-btn {
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 15px; font-weight: 500;
  padding: 8px 8px; cursor: pointer;
  position: relative;
  transition: color .25s;
  white-space: nowrap;
  display: flex; align-items: center; gap: 2px;
}
.cat-dropdown-btn.active {
  color: #fff; font-weight: 700; font-size: 15px;
}
.cat-dropdown-btn.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px;
  background: #FE2C55; border-radius: 2px;
}
.cat-dd-arrow {
  transition: transform .25s;
}
.cat-dropdown.open .cat-dd-arrow {
  transform: rotate(180deg);
}
/* 关键：用 position: fixed 而不是 absolute，避免被父级 .category-tabs 的
   overflow-x:auto 自动裁切（CSS 规范 overflow-x/y 不能一裁一不裁，会强制
   都变 auto）。打开时由 JS 把按钮 bounding rect 写入 inline style top/left。
   z-index 必须高于 .top-bar (300) 让 dropdown 不被搜索栏 / 卡片遮挡。 */
.cat-dropdown-menu {
  display: none;
  position: fixed;
  top: 0; left: 0;
  background: rgba(30,30,30,.96);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 90px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cat-dropdown.open .cat-dropdown-menu {
  display: block;
  animation: catDdFadeIn .2s ease;
}
@keyframes catDdFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cat-dd-item {
  display: block; width: 100%;
  background: none; border: none;
  color: rgba(255,255,255,.7);
  font-size: 14px; font-weight: 500;
  padding: 8px 20px;
  text-align: center;
  cursor: pointer;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.cat-dd-item:hover { background: rgba(255,255,255,.08); }
.cat-dd-item.active {
  color: #FE2C55; font-weight: 700;
}

.cat-tab-divider {
  display: none;
}

/* Category tabs */
.cat-tab {
  flex-shrink: 0;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 15px; font-weight: 500;
  padding: 8px 8px; cursor: pointer;
  position: relative;
  transition: color .25s;
  white-space: nowrap;
}
.cat-tab.active {
  color: #fff; font-weight: 700; font-size: 15px;
}
.cat-tab.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px;
  background: #FE2C55; border-radius: 2px;
}
.cat-tab.disabled {
  color: rgba(255,255,255,.25);
}
.cat-tab.disabled::after { display: none; }
/* 用户反馈：滑到「彩票/其他」（无游戏 → .disabled）时也要看到切换动作。
   active 时强制恢复白字 + 红条，让 disabled tab 也能高亮显示当前选中状态。 */
.cat-tab.disabled.active { color: #fff; }
.cat-tab.disabled.active::after { display: block; }

/* -- Feed Container -- */
.feed-container {
  position: fixed;
  top: 54px; left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  overflow: hidden; z-index: 1;
  overscroll-behavior: none;
  touch-action: none;
}

.game-card {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform, opacity;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.game-card.animating {
  transition: transform .38s cubic-bezier(.22,.68,0,1.0), opacity .38s ease-out;
}

.game-card-bg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.game-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; top: 0; left: 0;
}
.game-card-video-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; top: 0; left: 0;
  /* 关键：默认透明而非纯黑，否则相邻卡片 video 没 src 时
     会盖住底层海报图，上下滑动只看到一片黑（丢 TikTok 预览效果）。
     仅当卡片成为 active（is-playing）时再上不透明黑底，避免视频
     还没解码出第一帧时透出底图导致闪烁。 */
  background: transparent;
  pointer-events: none;
}
.game-card.is-playing .game-card-video-bg {
  background: #000;
}
/* 海报底图：和视频同位，永远可见，被 video 盖住时也不影响显示 */
.game-card-video-poster {
  z-index: 0;
}
.game-card-video-bg {
  z-index: 1;
}
/* 没有 bg_url 时：把 image 模糊放大铺满，避免和中央 LOGO 视觉重复 */
.game-card-bg-blur {
  overflow: hidden;
}
.game-card-img-blur {
  width: 130%; height: 130%;
  left: -15%; top: -15%;
  filter: blur(28px) brightness(.55) saturate(1.3);
  -webkit-filter: blur(28px) brightness(.55) saturate(1.3);
  transform: scale(1.05);
}
.game-card-gradient {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.65) 100%);
  z-index: 1;
}

.game-card-content {
  position: relative; z-index: 2;
  text-align: center; padding: 20px;
}

.game-card-logo {
  width: 120px; height: 120px;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 900; color: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  margin: 0 auto 16px;
  animation: iconFloat 3s ease-in-out infinite;
  overflow: hidden;
}
.game-card-logo img {
  width: 100%; height: 100%; object-fit: cover;
}
.game-card-logo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 900; color: #fff;
  border-radius: 24px;
}
/* 中央 LOGO 可点击：增加触控反馈与高亮，提示这里能点 */
.game-card-logo-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.18);
  transition: transform .12s ease-out, box-shadow .2s;
  position: relative;
}
.game-card-logo-clickable:active {
  transform: scale(.94);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.game-card-logo-clickable:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.game-card-name {
  font-size: 28px; font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  margin-bottom: 8px;
}
.game-card-rtp {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(254,44,85,.9);
  padding: 4px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
}
.game-card-provider {
  margin-top: 10px; font-size: 13px;
  color: rgba(255,255,255,.7); font-weight: 500;
}
.card-badge {
  display: inline-block;
  padding: 2px 10px; border-radius: 10px;
  font-size: 10px; font-weight: 700; color: #fff;
  margin-top: 8px; margin-right: 4px;
}
.badge-hot {
  background: linear-gradient(135deg, #FE2C55, #ef4444);
  box-shadow: 0 2px 8px rgba(254,44,85,.45);
  letter-spacing: 1px;
  animation: hotPulse 2s infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(254,44,85,.45); }
  50%      { box-shadow: 0 2px 14px rgba(254,44,85,.7); }
}
.badge-new {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 2px 8px rgba(34,197,94,.4);
}
.badge-maintenance {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.badge-live {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 2px 8px rgba(239,68,68,.5);
  letter-spacing: 1.5px;
  position: relative; padding-left: 18px;
}
.badge-live::before {
  content: '';
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff;
  animation: liveBlink 1.4s infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.game-card-badges {
  margin-top: 10px;
  display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: center;
}
.game-card.is-table-game .game-card-logo {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dt-card-maintenance {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.55);
  font-size: 14px; font-weight: 700; color: #FFA500;
  pointer-events: none;
}

/* -- Action Bar (Douyin Style) -- */
.action-bar {
  position: fixed;
  right: 4px;
  top: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  pointer-events: none;
  padding-bottom: 10px;
}
.action-bar > * { pointer-events: auto; }
body.game-playing .action-bar {
  z-index: 200;
}

/* === actionBar 收起 / 展开 === */
/* 收起：整条 actionBar 右移到屏幕外；同时显示 #actionBarHandle 小拉手。
   桌面端 actionBar 是 width:96px 的 fixed sidebar，translateX(100%) 同样能滑出。
   游戏 iframe 在底层不受影响，用户可以看到完整游戏 UI。 */
.action-bar {
  transition: transform .25s ease, opacity .2s;
}
body.action-bar-collapsed .action-bar {
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none !important;
}
body.action-bar-collapsed .action-bar > * {
  pointer-events: none !important;
}
/* actionCollapseBtn 收起按钮：作为 .action-bar 内 flex 流的第一个子元素，
   自然紧贴 actionBar 顶端（移动端 flex-end 堆栈最顶 / 桌面 flex-start 第一项），
   随 actionBar transform 一起滑出，无需 fixed 定位。
   - 用 nova39 / TikTok 主色 #FE2C55 + 脉动光晕 → 醒目
   - 仅在游戏中（body.game-playing）显示，首页 feed 不需要 */
/* providerBadge 作为 collapse-btn 的锚点容器 */
.action-bar .provider-avatar { position: relative; }

/* collapse-btn —— 小拉手 ›› 折叠样式（与右边缘 #actionBarHandle 风格呼应，
   方向相反：>> 表示「把这条 actionBar 向右收起」）。
   锚定在 providerBadge 紧邻上方 6px。 */
.action-collapse-btn {
  display: flex;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 22px;
  border-radius: 11px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  pointer-events: auto !important;
  z-index: 3;
}
.action-collapse-btn:hover { background: rgba(0,0,0,.75); }
.action-collapse-btn:active { transform: translateX(-50%) scale(.92); background: rgba(0,0,0,.85); }
.action-collapse-btn svg { display: block; pointer-events: none; }
/* 横屏全屏游戏时（actionBar 已被 hidden）也隐藏 */
body.game-playing.game-fs-landscape .action-collapse-btn { display: none !important; }
/* 移动端首页 feed（无遮挡问题）隐藏；进入游戏后显示 */
body.is-mobile-device:not(.game-playing) .action-collapse-btn { display: none; }
/* actionBar 收起后右边缘的小拉手 */
.action-bar-handle {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 56px;
  border-radius: 12px 0 0 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-right: none;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  transition: background .15s, transform .12s;
}
.action-bar-handle:hover { background: rgba(0,0,0,.7); }
.action-bar-handle:active { transform: translateY(-50%) scale(.9); }
body.action-bar-collapsed .action-bar-handle { display: flex; }
.action-item {
  display: flex; flex-direction: column;
  align-items: center; cursor: pointer;
}
.action-item.provider-avatar {
  margin-top: auto;
  margin-bottom: 6px;
}
.action-btn-wrap {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
}
.action-item:active .action-btn-wrap { transform: scale(.8); }
.action-icon {
  width: 30px; height: 30px;
  fill: #fff; stroke: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition: fill .2s, transform .2s;
}
.action-count {
  font-size: 11px; margin-top: -3px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  color: #fff;
  letter-spacing: .3px;
}
#btnLiveChat, #btnFavorite, #btnShare { margin-top: -4px; }
.action-item.liked .action-icon {
  fill: #FE2C55; stroke: none;
  animation: tikLike .5s cubic-bezier(.175,.885,.32,1.275);
}
#btnFavorite.liked .action-icon {
  fill: #FACD00; stroke: none;
}
@keyframes tikLike {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.provider-avatar { position: relative; }
.avatar-ring {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2.5px solid #fff; overflow: hidden;
  background: linear-gradient(135deg, #FE2C55, #25F4EE);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,.4);
}
.avatar-placeholder {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
}

/* TikTok 风格：厂商头像下方的关注 +/✓ 角标 */
.provider-follow-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FE2C55;
  color: #fff;
  border: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(254,44,85,.45);
  transition: background .25s ease, transform .25s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s ease;
  z-index: 2;
}
.provider-follow-badge:active { transform: translateX(-50%) scale(.85); }
.provider-follow-badge .pfb-plus {
  font-size: 18px; font-weight: 900; line-height: 1;
  margin-top: -1px;
}
.provider-follow-badge .pfb-check { display: none; }
.provider-follow-badge.followed {
  background: rgba(0,0,0,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  animation: pfbPop .35s cubic-bezier(.175,.885,.32,1.275);
}
.provider-follow-badge.followed .pfb-plus { display: none; }
.provider-follow-badge.followed .pfb-check { display: block; }
@keyframes pfbPop {
  0%   { transform: translateX(-50%) scale(.6); }
  60%  { transform: translateX(-50%) scale(1.25); }
  100% { transform: translateX(-50%) scale(1); }
}

/* -- Next Game Preview -- */
.next-game-preview {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 2px;
  cursor: pointer;
  animation: nextFadeIn .4s ease;
}
.next-game-arrow {
  font-size: 10px; color: rgba(255,255,255,.6);
  animation: nextBounce 1.5s ease infinite;
  margin-bottom: 2px;
}
@keyframes nextBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes nextFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.next-game-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 3px 12px rgba(0,0,0,.5);
  background: #222;
  display: flex; align-items: center; justify-content: center;
}
.next-game-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.next-game-thumb .next-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
}
.next-game-name {
  font-size: 9px; color: rgba(255,255,255,.7);
  max-width: 54px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.spinning-disc { margin-top: 4px; }
.disc-outer {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(from 0deg, #333, #666, #333);
  display: flex; align-items: center; justify-content: center;
  animation: discSpin 4s linear infinite;
}
.disc-inner {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1a1a1a; border: 2px solid #444;
}
@keyframes discSpin { to { transform: rotate(360deg); } }

/* -- Game Info Overlay -- */
.game-info-overlay {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px);
  left: 12px; right: 80px;
  z-index: 50; padding-bottom: 8px;
}
body.game-playing .game-info-overlay { display: none; }
body.game-playing .double-tap-heart { display: none; }
/* 游戏 iframe 打开时，把卡片 feed 容器从渲染树里摘掉。
   1. 避免浏览器继续 layout/paint 几十张卡片（已隐藏但还在 DOM）。
   2. 配合 JS 里的 pauseAllCardVideos() 卸载 src，硬件解码器能彻底
      让出来给游戏 iframe 用，避免老虎机/直播桌台画面卡顿掉帧。
   关闭 iframe 后 closeGameIframe() 会移除 game-playing 类并 syncCardVideos() 恢复。 */
body.game-playing #feedContainer,
body.game-playing #dtFeed { visibility: hidden; }

/* === 桌面端「游戏中浏览大厅」模式 ===
   游戏中点左侧 sidebar 任一导航 → body 加 .dt-feed-overlay。
   dt-feed 浮在 game-fullscreen (z=90) 之上，让用户看到 buildFeed/收藏页
   重建出的新内容；游戏 iframe 仍在底层运行，不打断 session。
   返回入口：sidebar LOGO 点击，或收藏/历史 grid 内自带的「返回」按钮。 */
@media (min-width: 768px) {
  body:not(.is-mobile-device).game-playing.dt-feed-overlay #dtFeed {
    visibility: visible !important;
  }
  body:not(.is-mobile-device).game-playing.dt-feed-overlay .dt-main {
    position: relative;
    z-index: 100;
    background: #000;
    /* 关键：游戏中 sidebar 被提到 position:fixed，已经离开 flex 流，
       dt-main 会贴到 viewport 左边 → 第一列卡片被 fixed sidebar 盖住。
       这里手动补一个等同 sidebar 宽度的 padding-left，把内容推到 sidebar 之外。
       --dt-sidebar-w 在 ≤1024px 折叠时会自动变成 64px，与 sidebar 同步缩。 */
    padding-left: var(--dt-sidebar-w, 240px);
    /* 让 dt-main 占满 sidebar 与 actionBar 之间整块，避免透出底层 iframe */
    padding-right: 96px;
  }
}
.game-provider-name {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.game-provider-name span {
  font-size: 16px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.follow-btn {
  background: rgba(254,44,85,.9);
  border: none; color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 4px; cursor: pointer;
}
.follow-btn.followed { background: rgba(255,255,255,.15); }
.game-title {
  font-size: 15px; font-weight: 500;
  margin-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.game-desc { margin-bottom: 6px; overflow: hidden; }
.desc-text {
  font-size: 13px; color: rgba(255,255,255,.85);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.game-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tag { font-size: 12px; color: rgba(255,255,255,.75); font-weight: 500; }

.play-now-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FE2C55, #ff6b81);
  border: none; color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 8px 20px; border-radius: 24px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(254,44,85,.5);
  transition: transform .2s;
}
.play-now-btn:hover { transform: scale(1.05); }

/* -- Bottom Nav -- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  background: rgba(18,18,18,.98);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding-top: 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
}
.nav-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 10px; cursor: pointer;
  transition: color .2s; padding: 4px 10px;
  position: relative;
}
.nav-balance {
  font-size: 9px; font-weight: 700;
  color: #FACD00;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  margin-top: -1px;
}
.nav-item.active { color: #fff; }
.nav-icon { width: 24px; height: 24px; }

.nav-sub-label {
  font-size: 8px;
  color: rgba(254,44,85,.8);
  margin-top: -1px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 首页按钮：去掉文字标签，整圆按钮在底部栏内上下居中 */
.nav-home-btn {
  /* 让此按钮自身在 .bottom-nav 的 align-items:flex-start 之外居中 */
  align-self: center;
  justify-content: center;
  /* 抵消 .bottom-nav 的 padding-top:6px 偏移，做到真正的视觉居中 */
  margin-top: -6px;
}
.nav-home-btn .home-btn-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #25F4EE, #FE2C55);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.nav-home-btn .home-btn-wrap::before {
  content: ''; position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  background: #161823; border-radius: 50%;
}
.nav-home-btn .home-btn-wrap .home-logo-svg {
  position: relative; z-index: 1;
}
.nav-home-btn .home-btn-wrap .home-currency-icon {
  position: relative; z-index: 1;
  font-size: 18px; line-height: 1;
  color: #FACD00; font-weight: 700;
}
/* 隐藏首页按钮下方的文字（"首页" 或 余额），无论登录与否 */
.nav-home-btn .nav-home-label {
  display: none !important;
}

/* ===== Shared: Panels & Overlays ===== */
.overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.overlay.active { opacity: 1; pointer-events: auto; z-index: 310; }

.provider-panel, .comment-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #1e1e1e;
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,.37,1.12);
}
.provider-panel { max-height: 70vh; }
.comment-panel { height: 65vh; }
.overlay.active .provider-panel,
.overlay.active .comment-panel { transform: translateY(0); }

.panel-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.panel-header h3 { font-size: 16px; font-weight: 700; }
.panel-close {
  background: none; border: none;
  color: #fff; font-size: 28px;
  cursor: pointer; opacity: .7; line-height: 1;
}
.panel-close:hover { opacity: 1; }

.provider-search { padding: 12px 20px; }
.provider-search input {
  width: 100%; background: rgba(255,255,255,.08);
  border: none; color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; outline: none;
}
.provider-search input::placeholder { color: rgba(255,255,255,.4); }

.provider-grid {
  display: grid;
  /* minmax(0,1fr) 让 grid item 能正确收缩，避免长文字（如 AFB Gaming / Pragmatic Play）撑爆列宽 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; padding: 12px 20px 30px;
  overflow-y: auto;
}
.provider-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .2s, transform .2s;
  border: 1px solid transparent;
  overflow: hidden;
  min-width: 0;
}
.provider-card:hover { background: rgba(255,255,255,.08); }
.provider-card.selected {
  background: rgba(254,44,85,.15);
  border-color: rgba(254,44,85,.5);
}
.provider-card > img {
  width: 48px; height: 48px; border-radius: 12px;
  object-fit: contain;
  background: #222;
  flex-shrink: 0;
}
.provider-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.provider-card-name {
  font-size: 11px; color: rgba(255,255,255,.85);
  text-align: center; font-weight: 500;
  width: 100%;
  line-height: 1.25;
  /* 限两行省略，长英文单词允许任意位置换行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.provider-card-count {
  font-size: 10px; color: rgba(255,255,255,.4);
  width: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 厂商 ICON 悬停 / 聚焦时无限左右摇摆。
   - 仅作用在图标本身（img / .provider-card-icon），不带动卡片整体，
     卡片仍走原 transition 高亮，互不干扰。
   - 0% / 50% / 100% 都回到 0deg，确保 animation-iteration 平滑无回弹卡顿。
   - 用 transform 触发 GPU 合成，避免 layout/paint，移动端不发烫。
   - 尊重系统的 prefers-reduced-motion，关闭动画。 */
@keyframes nv39-icon-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-14deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(14deg); }
  100% { transform: rotate(0deg); }
}
.provider-card > img,
.provider-card > .provider-card-icon {
  transform-origin: 50% 60%;
  will-change: transform;
}
.provider-card:hover > img,
.provider-card:hover > .provider-card-icon,
.provider-card:focus > img,
.provider-card:focus > .provider-card-icon,
.provider-card:focus-within > img,
.provider-card:focus-within > .provider-card-icon {
  animation: nv39-icon-wiggle 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .provider-card:hover > img,
  .provider-card:hover > .provider-card-icon,
  .provider-card:focus > img,
  .provider-card:focus > .provider-card-icon,
  .provider-card:focus-within > img,
  .provider-card:focus-within > .provider-card-icon { animation: none; }
}

.comment-list { flex: 1; overflow-y: auto; padding: 12px 20px; }
.comment-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.comment-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FE2C55, #25F4EE);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.comment-body { flex: 1; }
.comment-user { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 500; margin-bottom: 4px; }
.comment-text { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.9); }
.comment-time { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }

.comment-input-wrap {
  display: flex; gap: 8px; padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #1e1e1e;
}
.comment-input-wrap input {
  flex: 1; background: rgba(255,255,255,.08);
  border: none; color: #fff;
  padding: 10px 16px; border-radius: 20px;
  font-size: 14px; outline: none;
}
.comment-input-wrap input::placeholder { color: rgba(255,255,255,.4); }
.send-btn {
  background: #FE2C55; border: none; color: #fff;
  padding: 8px 18px; border-radius: 20px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}

.share-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #1e1e1e;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,.37,1.12);
  padding-bottom: 30px;
}
.overlay.active .share-panel { transform: translateY(0); }
.share-grid {
  display: flex; gap: 20px; padding: 20px 24px; overflow-x: auto;
}
.share-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; cursor: pointer;
}
.share-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
}
.share-icon.telegram { background: #0088cc; }
.share-icon.whatsapp { background: #25D366; }
.share-icon.facebook { background: #1877F2; }
.share-icon.twitter { background: #000; }
.share-icon.line { background: #06C755; }
.share-icon.link { background: #555; font-size: 22px; }
.share-item span { font-size: 11px; color: rgba(255,255,255,.7); }
.share-game-info {
  padding: 12px 24px 0;
  font-size: 13px; color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-url-box {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 24px 6px; padding: 8px 12px;
  background: rgba(255,255,255,.08); border-radius: 8px;
}
.share-url-box input {
  flex: 1; background: none; border: none; color: #fff;
  font-size: 13px; outline: none;
}
.share-copy-btn {
  background: #FE2C55; border: none; color: #fff;
  padding: 6px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}

.search-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #121212;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32,.72,.37,1.12);
}
.overlay.active .search-panel { transform: translateX(0); }

.search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.back-btn {
  background: none; border: none;
  color: #fff; cursor: pointer; opacity: .7;
}
.search-bar input {
  flex: 1; background: rgba(255,255,255,.08);
  border: none; color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-size: 15px; outline: none;
}
.search-bar input::placeholder { color: rgba(255,255,255,.4); }
.search-hot { padding: 20px; }
.search-hot h4 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.hot-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hot-tag {
  background: rgba(255,255,255,.08);
  padding: 6px 14px; border-radius: 16px;
  font-size: 13px; color: rgba(255,255,255,.8);
  cursor: pointer;
}
.hot-tag:hover { background: rgba(255,255,255,.14); }
.search-results { padding: 0 20px; overflow-y: auto; max-height: calc(100vh - 160px); }
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
}
.search-result-icon {
  position: relative;
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.search-result-icon .sri-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.search-result-icon .sri-fallback {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff;
}
/* 桌号角标：D02 / D03 / S1 等，区分同系列实景桌的相同缩略图 */
.search-result-tag {
  position: absolute;
  right: 3px; bottom: 3px;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(0,0,0,.78);
  color: #FFE25C;
  font-size: 10px; font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.1;
  text-align: center;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
}
.search-result-info { flex: 1; }
.search-result-info .name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.search-result-info .meta { font-size: 12px; color: rgba(255,255,255,.5); }

/* -- Double Tap Heart (only on feed, not during game play) -- */
.double-tap-heart {
  position: fixed; z-index: 150; pointer-events: none; opacity: 0;
}
.double-tap-heart svg {
  width: 100px; height: 100px;
  filter: drop-shadow(0 4px 16px rgba(254,44,85,.6));
}
.double-tap-heart.show { animation: heartBurst .8s ease-out forwards; }
@keyframes heartBurst {
  0% { transform: scale(0) rotate(-15deg); opacity: 1; }
  30% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3) translateY(-40px); opacity: 0; }
}

/* -- Toast -- */
.toast {
  position: fixed;
  top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: rgba(50,50,50,.95);
  color: #fff; padding: 10px 24px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
  z-index: 300; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s, box-shadow .2s;
  backdrop-filter: blur(10px);
}
.toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* 成功反馈：品牌色高亮 + 强阴影 + 微微放大，比普通灰色 toast 更醒目，
   常用于"链接已复制 / 收藏成功 / 操作成功"等正向反馈 */
.toast.toast-success {
  background: linear-gradient(135deg, #FE2C55 0%, #ff5577 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(254,44,85,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
  letter-spacing: .5px;
}
.toast.toast-success.show {
  transform: translateX(-50%) translateY(0) scale(1.04);
}
.toast.toast-error {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(192,57,43,.4);
}
.toast.toast-warning {
  background: linear-gradient(135deg, #d35400 0%, #f39c12 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(211,84,0,.4);
}

/* ===== Desktop panels override ===== */
@media (min-width: 768px) {
  body:not(.is-mobile-device) .overlay .provider-panel,
  body:not(.is-mobile-device) .overlay .comment-panel,
  body:not(.is-mobile-device) .overlay .share-panel {
    max-width: 480px;
    margin: 0 auto;
  }
  body:not(.is-mobile-device) .overlay .search-panel {
    max-width: 480px;
    left: auto; right: 0;
  }
}

/* ======================================================
   PROFILE PAGE — TikTok Style
   ====================================================== */
.profile-page {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  /* z-index 150：盖在 game-fullscreen(z=90) 之上、bottom-nav(z=200) 之下，
     这样进入个人中心时游戏 iframe 仍存活，退出后游戏继续，无需重连。 */
  z-index: 150;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  color: #161823;
}

.profile-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  height: 48px; background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.profile-topbar-title {
  font-size: 17px; font-weight: 700;
}
.profile-back-btn {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #FE2C55; display: flex; align-items: center;
  font-size: 14px; gap: 2px; padding: 4px;
}
.profile-topbar-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #161823;
}

/* Guest State */
.profile-guest {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 120px 40px 40px; text-align: center;
}
.profile-guest-avatar {
  margin-bottom: 20px; opacity: .5;
}
.profile-guest-text {
  font-size: 15px; color: #888; margin-bottom: 24px;
}
.profile-login-btn {
  width: 280px; max-width: 80%;
  padding: 14px 0; border: none;
  border-radius: 50px;
  background: #FE2C55; color: #fff;
  font-size: 17px; font-weight: 700;
  cursor: pointer; margin-bottom: 16px;
}
.profile-register-link {
  background: none; border: none;
  color: #FE2C55; font-size: 14px;
  cursor: pointer; font-weight: 500;
}

/* Logged In Header */
.profile-header {
  text-align: center;
  padding: 20px 20px 0;
}
.profile-avatar-wrap {
  position: relative; display: inline-block; margin-bottom: 12px;
}
.profile-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #FE2C55, #25F4EE);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.profile-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-avatar-camera {
  position: absolute; bottom: 0; right: -4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #FE2C55; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.profile-name-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 4px;
}
.profile-nickname {
  font-size: 20px; font-weight: 800;
}
.profile-edit-btn {
  padding: 4px 14px; border: 1px solid #e0e0e0;
  border-radius: 4px; background: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: #161823;
}
.profile-username {
  font-size: 14px; color: #888; margin-bottom: 16px;
}

.profile-stats {
  display: flex; justify-content: center; gap: 32px;
  margin-bottom: 14px;
}
.profile-stat {
  display: flex; flex-direction: column; align-items: center;
}
.profile-stat-num {
  font-size: 18px; font-weight: 800;
}
.profile-stat-label {
  font-size: 12px; color: #888;
}

.profile-bio {
  font-size: 13px; color: #999;
  padding: 0 20px 16px; text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

/* Balance Card */
.profile-balance-card {
  position: relative;
  margin: 16px; padding: 18px 20px 16px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 16px; color: #fff;
  overflow: hidden;
}
/* 顶部装饰光斑，提升视觉层次 */
.profile-balance-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,215,0,.18), transparent 60%);
  pointer-events: none;
}
.balance-main {
  position: relative;
  display: flex; flex-direction: row; align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.balance-label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .3px;
}
.balance-main .balance-label {
  flex: 0 0 auto;
}
.balance-amount {
  font-size: 28px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
/* 奖金余额 + 积分：双列副信息卡，紧凑、有分隔 */
.balance-sub-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
  padding: 12px 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
.balance-sub-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 0 12px;
}
.balance-sub-item + .balance-sub-item {
  border-left: 1px solid rgba(255,255,255,.08);
}
.balance-sub-item .balance-label {
  font-size: 11px;
}
.balance-amount-sm {
  font-size: 18px; font-weight: 800; color: #25F4EE;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* 积分用暖色与余额区分 */
.balance-amount-sm.balance-points {
  color: #FFC857;
}
.balance-actions {
  display: flex; gap: 8px;
}
.balance-action-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: transform .1s, filter .15s, background .15s;
}
.balance-action-btn:active {
  transform: scale(0.97);
}
.balance-action-btn.deposit {
  background: linear-gradient(135deg, #FE2C55, #ff5274);
  color: #fff;
  box-shadow: 0 4px 14px rgba(254, 44, 85, .3);
}
.balance-action-btn.deposit:hover { filter: brightness(1.05); }
.balance-action-btn.withdraw,
.balance-action-btn.transfer {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
}
.balance-action-btn.withdraw:hover,
.balance-action-btn.transfer:hover {
  background: rgba(255,255,255,.18);
}

/* Profile Tabs */
.profile-tabs {
  display: flex; border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 48px; background: #fff; z-index: 5;
}
.profile-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 0; background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; color: #888; transition: all .2s;
}
.profile-tab.active {
  color: #161823; border-bottom-color: #161823;
}
.profile-tab svg { stroke: currentColor; }

.profile-tab-content { padding: 16px; min-height: 300px; padding-bottom: 80px; }
.profile-section-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 12px;
}
.profile-section-header h4 { font-size: 15px; font-weight: 700; }

.profile-games-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.profile-game-card {
  aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
  position: relative; cursor: pointer; background: #f0f0f0;
}
.profile-game-card img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-game-card .game-overlay-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4px 6px; font-size: 10px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  display: flex; align-items: center; gap: 3px;
}
.profile-game-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #fff;
}
.profile-empty {
  grid-column: 1 / -1; text-align: center;
  color: #bbb; font-size: 14px; padding: 60px 0;
}

/* 收藏卡片右上角的删除按钮 */
.profile-game-card .profile-game-del {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; opacity: 0; transition: opacity .15s, background .15s;
}
.profile-game-card:hover .profile-game-del,
.profile-game-card:focus-within .profile-game-del { opacity: 1; }
.profile-game-card .profile-game-del:hover { background: #ff3b30; }
.profile-game-card .profile-game-del:active { transform: scale(.92); }
/* 触屏环境（无 hover）下始终显示删除按钮 */
@media (hover: none) {
  .profile-game-card .profile-game-del { opacity: .92; }
}

/* 个人中心 → 我关注的厂商：卡片右上角"取消关注"按钮 */
.followed-vendor-card { position: relative; }
.followed-vendor-card .followed-vendor-unfollow {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: background .15s, transform .15s;
}
.followed-vendor-card .followed-vendor-unfollow:hover { background: #ff3b30; }
.followed-vendor-card .followed-vendor-unfollow:active { transform: scale(.9); }

/* Records */
.profile-records-tabs {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.rec-tab {
  padding: 6px 14px; border-radius: 20px;
  background: #f0f0f0; border: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
  color: #666;
}
.rec-tab.active { background: #161823; color: #fff; }

.profile-records-list {
  display: flex; flex-direction: column; gap: 8px;
}
.record-item {
  display: flex; justify-content: space-between;
  align-items: center; padding: 14px 16px;
  background: #f8f8f8; border-radius: 10px;
}
.record-left {
  display: flex; flex-direction: column; gap: 2px;
}
.record-title { font-size: 14px; font-weight: 600; }
.record-time { font-size: 11px; color: #999; }
.record-amount { font-size: 15px; font-weight: 700; }
.record-amount.positive { color: #22c55e; }
.record-amount.negative { color: #FE2C55; }

/* Settings */
.settings-menu {
  display: flex; flex-direction: column;
}
.settings-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 4px; cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background .15s;
}
.settings-item:active { background: #f5f5f5; }
.settings-item span { flex: 1; font-size: 15px; font-weight: 500; }
.settings-arrow { color: #ccc; margin-left: auto; }
.settings-divider { height: 8px; background: #f5f5f5; margin: 0 -16px; }

/* Profile Side Menu — slide from right */
.profile-side-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  z-index: 200; opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.profile-side-backdrop.open { opacity: 1; pointer-events: auto; }

.profile-side-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 280px; max-width: 80vw;
  background: #fff; z-index: 201;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32,.72,.37,1.0);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.1);
}
.profile-side-menu.open { transform: translateX(0); }

.side-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 17px; font-weight: 700;
  color: #161823;
}
.side-menu-close {
  background: none; border: none;
  font-size: 24px; color: #999;
  cursor: pointer; padding: 0; line-height: 1;
}
.profile-side-menu .settings-menu {
  flex: 1; overflow-y: auto;
  padding: 8px 16px;
  -webkit-overflow-scrolling: touch;
}
.profile-side-menu .settings-item {
  padding: 14px 4px;
}
.profile-side-menu .settings-divider {
  margin: 0 -16px;
}

/* ======================================================
   VENDOR PROFILE PAGE — TikTok Creator Style
   ====================================================== */
.vendor-profile-page {
  position: fixed; top: 54px; left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 150; background: #fff; color: #161823;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.vendor-profile-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  position: sticky; top: 0; z-index: 10; background: #fff;
  border-bottom: none;
  height: 44px;
}
.vendor-back-btn {
  background: none; border: none; padding: 4px;
  cursor: pointer; color: #161823; line-height: 0;
}
.vendor-topbar-title {
  font-size: 17px; font-weight: 700;
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 100px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.vendor-topbar-spacer { width: 32px; }

.vendor-profile-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px 10px; text-align: center;
}
.vendor-profile-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #fff;
  margin-bottom: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  background: #666;
}
.vendor-profile-avatar img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 50%;
  background: #1a1a2e;
}
.vendor-profile-name {
  font-size: 20px; font-weight: 800; margin: 0 0 2px;
  max-width: 100%;
  word-break: break-word; overflow-wrap: anywhere;
  text-align: center; line-height: 1.25;
}
.vendor-profile-code {
  font-size: 13px; color: #999; margin: 0 0 16px;
  max-width: 100%;
  word-break: break-all;
}
.vendor-profile-follow {
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 36px;
  padding: 0 22px;
  margin: 4px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #FE2C55;
  border-radius: 18px;
  transition: background .2s, color .2s, transform .1s;
}
.vendor-profile-follow:active {
  transform: scale(0.97);
}
.vendor-profile-follow.followed {
  background: #f1f1f2;
  color: #161823;
}
.vendor-profile-stats {
  display: flex; gap: 32px;
}
.vendor-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vendor-stat strong {
  font-size: 18px; font-weight: 800;
}
.vendor-stat span {
  font-size: 12px; color: #888;
}

.vendor-profile-tabs {
  display: flex; border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 44px; z-index: 9; background: #fff;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vendor-profile-tabs::-webkit-scrollbar { display: none; }
.vendor-tab {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: #999; cursor: pointer; transition: all .2s;
  font-size: 13px; font-weight: 500; white-space: nowrap; gap: 4px;
}
.vendor-tab.active {
  color: #161823; border-bottom-color: #FE2C55; font-weight: 700;
}
.vendor-tab .vt-count {
  font-size: 11px; color: #bbb; font-weight: 400;
}

.vendor-games-grid {
  display: grid;
  /* minmax(0,1fr) 确保 grid item 能正常收缩，避免长内容撑爆列宽 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; padding: 0;
}
.vendor-game-card {
  aspect-ratio: 1/1; position: relative; overflow: hidden;
  cursor: pointer; background: #1a1a1a;
  min-width: 0;
  /* contain: layout 进一步隔离子元素布局，防止溢出影响相邻卡片 */
  contain: layout paint;
}
/* 旧浏览器若不支持 aspect-ratio，给一个保底高度 */
@supports not (aspect-ratio: 1) {
  .vendor-game-card { padding-top: 100%; }
  .vendor-game-card > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
}
.vendor-game-card img {
  width: 100%; height: 100%;
  /* AFB 等厂商 LOGO 是 200x200/250x250 正方形，contain 完整显示，cover 会裁掉边缘文字 */
  object-fit: contain;
  background: #1a1a1a;
  display: block;
}
.vendor-game-card .vg-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  font-weight: 700; color: #fff;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}
.vendor-game-card .vg-name {
  font-size: 11px; text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  /* 限制 3 行省略，长英文单词允许任意位置换行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.vendor-game-card .vg-icon {
  font-size: 36px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  flex-shrink: 0;
}
.vendor-game-card .vg-initial {
  font-size: 28px; font-weight: 900;
}
.vendor-game-card .vg-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 6px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px;
  pointer-events: none;
  box-sizing: border-box;
  max-width: 100%;
}
.vendor-game-card .vg-title {
  font-size: 11px; color: #fff; font-weight: 600;
  /* min-width:0 + flex:1 是 ellipsis 在 flex 容器中生效的关键 */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-game-card .vg-badge {
  font-size: 9px; color: #FE2C55; font-weight: 700;
  background: rgba(255,255,255,.9); padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.vendor-games-empty {
  grid-column: 1 / -1; text-align: center;
  color: #bbb; font-size: 14px; padding: 60px 0;
}
.vendor-games-loading {
  grid-column: 1 / -1; text-align: center;
  color: #999; font-size: 13px; padding: 32px 0;
}

/* Desktop 端把 vendor 页面变成居中 modal */
.vendor-page-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 999;
}

@media (min-width: 768px) {
  /* 桌面下整个 modal 自身可滚动；不使用内部 flex column，否则会把 grid 高度
     固定为剩余空间，aspect-ratio:1/1 失效，卡片被压成横条 */
  body:not(.is-mobile-device) .vendor-profile-page {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: calc(100vw - 40px);
    height: 82vh;
    max-height: 780px;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    z-index: 1000;
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.is-mobile-device) .vendor-profile-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    height: 48px;
  }
  body:not(.is-mobile-device) .vendor-profile-tabs {
    position: sticky;
    top: 48px;
    z-index: 4;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
  }
  body:not(.is-mobile-device) .vendor-profile-header {
    padding: 20px 20px 14px;
  }
  /* 卡片网格：保持 3 列、正方形，让 modal 滚动而不是压缩 grid 高度 */
  body:not(.is-mobile-device) .vendor-games-grid {
    grid-auto-rows: auto;
    padding: 8px;
    gap: 8px;
  }
  body:not(.is-mobile-device) .vendor-game-card {
    border-radius: 8px;
  }
}

/* Login/Register Panels — shared base */
.login-panel {
  background: #fff; color: #161823;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.login-panel .panel-header {
  border-bottom: 1px solid #f0f0f0;
}
.login-panel .panel-header h3 { color: #161823; }
.login-panel .panel-close { color: #161823; }

.login-panel-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 24px 0 8px;
}
.login-panel-logo svg { width: 48px; height: 40px; flex-shrink: 0; }
.login-panel-brand {
  font-size: 20px; font-weight: 800; color: #161823;
  letter-spacing: .5px;
}
/* 站点名为空（site_name 还没注入或后端没配）时，自动隐藏 span 并让 ∞ 完全居中 */
.login-panel-brand:empty { display: none; }

.login-form {
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-field input, .login-field select {
  width: 100%; padding: 14px 16px;
  border: 1px solid #e0e0e0; border-radius: 8px;
  font-size: 16px; outline: none; color: #161823;
  background: #f8f8f8;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.login-field select {
  background: #f8f8f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 36px;
}
.login-field input:focus, .login-field select:focus {
  border-color: #FE2C55; background: #fff;
}
.login-submit-btn {
  width: 100%; padding: 14px 0;
  border: none; border-radius: 50px;
  background: #FE2C55; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  margin-top: 4px;
  transition: opacity .2s;
}
.login-submit-btn:hover { opacity: .88; }
.login-submit-register { background: #25F4EE; color: #161823; }
.login-submit-register:hover { opacity: .88; }

/* Quick Register */
.quick-reg-divider {
  display: flex; align-items: center; gap: 12px;
  color: #bbb; font-size: 13px; margin: 2px 0;
}
.quick-reg-divider::before,
.quick-reg-divider::after {
  content: ''; flex: 1; height: 1px; background: #e8e8e8;
}
.quick-reg-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.quick-reg-btn:hover { opacity: .9; }

/* Quick Register Result */
.quick-reg-result {
  padding: 8px 24px 28px; text-align: center;
}
.quick-reg-icon { font-size: 48px; margin-bottom: 4px; }
.quick-reg-title {
  font-size: 20px; font-weight: 700; color: #161823; margin-bottom: 6px;
}
.quick-reg-warn {
  font-size: 12px; color: #e74c3c; margin-bottom: 18px;
  background: #fff5f5; border-radius: 6px; padding: 8px 12px;
  line-height: 1.5;
}
.quick-reg-credentials {
  background: #f8f9fa; border-radius: 12px; padding: 16px 20px;
  margin-bottom: 18px; text-align: left;
}
.quick-reg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
}
.quick-reg-row + .quick-reg-row { border-top: 1px solid #eee; }
.quick-reg-label { font-size: 13px; color: #999; }
.quick-reg-value {
  font-size: 16px; font-weight: 700; color: #161823;
  font-family: 'Courier New', monospace; letter-spacing: .5px;
}
.quick-reg-copy-btn {
  background: #fff; color: #667eea;
  border: 2px solid #667eea !important;
  margin-bottom: 8px;
}
.quick-reg-copy-btn:hover { background: #f0f0ff; opacity: 1; }
.login-footer {
  text-align: center; padding: 0 20px 24px;
  font-size: 14px; color: #888;
}
.login-to-register {
  background: none; border: none; color: #FE2C55;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-to-register:hover { text-decoration: underline; }

/* ── Mobile: bottom sheet ── */
@media (max-width: 767px) {
  .login-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,.37,1.12);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    max-height: 92vh;
  }
  .overlay.active .login-panel { transform: translateY(0); }
  .login-panel-logo { padding: 16px 0 4px; }
}

/* ── Desktop: centered modal ── */
@media (min-width: 768px) {
  body:not(.is-mobile-device) .login-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    width: 420px;
    max-width: 90vw;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,.25);
    transition: transform .3s cubic-bezier(.32,.72,.37,1.12), opacity .3s ease;
  }
  body:not(.is-mobile-device) .overlay.active .login-panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  body:not(.is-mobile-device) .login-form { padding: 28px 32px; gap: 16px; }
  body:not(.is-mobile-device) .login-field input,
  body:not(.is-mobile-device) .login-field select {
    padding: 15px 18px;
    border-radius: 10px;
  }
  body:not(.is-mobile-device) .login-submit-btn {
    padding: 15px 0;
    font-size: 16px;
    margin-top: 8px;
  }
  body:not(.is-mobile-device) .login-footer { padding: 0 32px 28px; font-size: 14px; }
  body:not(.is-mobile-device) .login-panel .panel-header { padding: 20px 28px; }
}

.profile-bottom-nav {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  backdrop-filter: none;
}
.profile-bottom-nav .nav-item { color: #888; }
.profile-bottom-nav .nav-item.active { color: #161823; }
.profile-bottom-nav .nav-item svg { stroke: currentColor; }
.profile-bottom-nav .nav-home-btn .home-btn-wrap::before { background: #f5f5f5; }
.profile-bottom-nav .nav-home-btn .home-btn-wrap .home-logo-svg { stroke: #43A047; fill: none; }
.profile-bottom-nav .nav-home-btn .home-btn-wrap .home-currency-icon { color: #161823; }

@media (min-width: 768px) {
  body:not(.is-mobile-device) .profile-page { display: none !important; }
}

/* ======================================================
   FINANCE PANELS (Deposit / Withdraw / Transfer)
   ====================================================== */
.finance-overlay { z-index: 250; }
.finance-panel {
  background: #fff; border-radius: 16px 16px 0 0;
  position: absolute; bottom: 0; left: 0; right: 0;
  max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,.37,1.12);
}
.overlay.active .finance-panel {
  transform: translateY(0);
}
.finance-panel .panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px; border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.finance-panel .panel-header h3 {
  font-size: 17px; font-weight: 700; color: #161823; margin: 0;
}
.finance-panel .panel-close {
  background: none; border: none; font-size: 24px; color: #999; cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.finance-body {
  padding: 12px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1; min-height: 0;
}
.finance-loading {
  text-align: center; padding: 40px 0; color: #999; font-size: 14px;
}
.msg-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #f0f0f0;
  padding: 0 20px;
}
.msg-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  color: #999; cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.msg-tab.active { color: #161823; border-bottom-color: #FE2C55; }
.msg-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}
.msg-item-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}
.msg-item-icon.sys { background: #e3f2fd; color: #1976d2; }
.msg-item-icon.deposit { background: #e8f5e9; color: #388e3c; }
.msg-item-icon.withdraw { background: #fff3e0; color: #f57c00; }
.msg-item-body { flex: 1; min-width: 0; }
.msg-item-title { font-size: 13px; font-weight: 600; color: #333; }
.msg-item-desc { font-size: 12px; color: #999; margin-top: 2px; }
.msg-item-time { font-size: 11px; color: #bbb; margin-top: 4px; }
.msg-empty { text-align: center; padding: 40px 0; color: #bbb; font-size: 13px; }

/* 系统消息：未读高亮 + 行内「标为已读」按钮、顶部「全部已读」工具条
   后端 GetMessages 返回 is_read=false 的项时打 .msg-unread，行内按钮调
   POST /member/messages/:id/read，工具条按钮调 /messages/read-all */
.msg-item.msg-unread {
  background: #fffafb;
  border-bottom-color: #fde2e7;
  position: relative;
  padding-left: 8px;
}
.msg-item.msg-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #FE2C55;
  box-shadow: 0 0 6px rgba(254,44,85,.55);
}
.msg-item-actions {
  margin-top: 8px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.msg-read-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: #fff; color: #FE2C55;
  border: 1px solid #FE2C55; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.msg-read-btn:hover:not(:disabled) { background: #FE2C55; color: #fff; }
.msg-read-btn:active:not(:disabled) { transform: scale(.95); }
.msg-read-btn:disabled { opacity: .5; cursor: not-allowed; }
.msg-read-btn svg { display: block; }

.msg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}
.msg-toolbar-info { font-size: 12px; color: #666; }
.msg-toolbar-info b { font-weight: 700; }
.msg-readall-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #FE2C55, #ff5274);
  color: #fff; border: 0; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(254,44,85,.25);
  transition: transform .1s, box-shadow .15s;
}
.msg-readall-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(254,44,85,.35); }
.msg-readall-btn:active:not(:disabled) { transform: scale(.96); }
.msg-readall-btn:disabled { opacity: .6; cursor: not-allowed; }

/* === 提现 - 洗码未达标拦截面板 ===
   /finance/turnover-check 返回 can_withdraw=false 时渲染，列出每条
   未完成的洗码要求 + 进度条 + 还需流水。让用户在填表前就知道情况。 */
.fin-turnover-block { padding: 4px 0 12px; }
.fin-turnover-banner {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(135deg, #fff5f7 0%, #ffe4ea 100%);
  border: 1px solid #ffd2da;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: center;
}
.fin-turnover-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FE2C55;
  color: #fff;
  font-size: 22px; font-weight: 800; line-height: 36px;
  margin-bottom: 8px;
}
.fin-turnover-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 4px; }
.fin-turnover-subtitle { font-size: 13px; color: #666; }
.fin-turnover-subtitle b { color: #FE2C55; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-turnover-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.fin-turnover-item {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
}
.fin-turnover-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.fin-turnover-name { font-weight: 600; color: #333; }
.fin-turnover-progress-text { color: #FE2C55; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-turnover-meta { font-size: 11px; color: #999; margin-top: 2px; }
.fin-turnover-bar {
  height: 6px; border-radius: 3px;
  background: #eee;
  overflow: hidden;
  margin: 8px 0 6px;
}
.fin-turnover-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FE2C55, #ff6b85);
  border-radius: 3px;
  transition: width .3s;
}
.fin-turnover-amounts { font-size: 12px; color: #666; }
.fin-turnover-remaining { color: #FE2C55; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-submit-btn-secondary {
  background: linear-gradient(135deg, #444, #666) !important;
  color: #fff !important;
}

/* Channel grid */
.fin-section-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 10px; }
.fin-channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;
}
.fin-channel-card {
  border: 2px solid #eee; border-radius: 10px; padding: 10px 6px;
  text-align: center; cursor: pointer; transition: all .2s; background: #fafafa;
}
.fin-channel-card.active { border-color: #FE2C55; background: #fff5f7; }
.fin-channel-card-name { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.fin-channel-card-limit { font-size: 11px; color: #999; }

/* Bank info display */
.fin-bank-info {
  background: #f8f9fa; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid #eee;
}
.fin-bank-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.fin-bank-label { color: #999; }
.fin-bank-value { color: #333; font-weight: 500; }
.fin-bank-value.copyable { color: #FE2C55; cursor: pointer; }
.fin-bank-value.copyable:active { opacity: .6; }

/* Form elements */
.fin-form-group { margin-bottom: 10px; }
.fin-form-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.fin-form-hint { font-size: 11px; color: #999; margin-top: 2px; }
.fin-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #e8e8e8; border-radius: 8px;
  font-size: 14px; background: #fafafa; outline: none; transition: border-color .2s;
  box-sizing: border-box;
}
.fin-input:focus { border-color: #FE2C55; background: #fff; }
.fin-select {
  width: 100%; padding: 12px 14px; border: 1.5px solid #e8e8e8; border-radius: 8px;
  font-size: 15px; background: #fafafa; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  box-sizing: border-box;
}
.fin-file-upload {
  border: 2px dashed #ddd; border-radius: 10px; padding: 20px;
  text-align: center; cursor: pointer; transition: border-color .2s;
  position: relative; overflow: hidden;
}
.fin-file-upload:hover { border-color: #FE2C55; }
.fin-file-upload input[type="file"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.fin-file-upload-text { font-size: 13px; color: #999; }
.fin-file-upload-name { font-size: 13px; color: #FE2C55; margin-top: 4px; }
.fin-submit-btn {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #FE2C55, #ff6b81);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .2s; margin-top: 6px;
}
.fin-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.fin-submit-btn:not(:disabled):active { opacity: .8; }

/* Wallet cards (transfer) */
.fin-wallet-list { display: flex; flex-direction: column; gap: 10px; }
.fin-wallet-card {
  background: #f8f9fa; border-radius: 10px; padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #eee;
}
.fin-wallet-card.main { background: linear-gradient(135deg, #fff5f7, #fff); border-color: #FE2C55; }
.fin-wallet-name { font-size: 14px; font-weight: 600; color: #333; }
.fin-wallet-balance { font-size: 16px; font-weight: 700; color: #FE2C55; }
.fin-wallet-transfer-btn {
  padding: 6px 14px; border: none; border-radius: 6px;
  background: #FE2C55; color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity .2s;
}
.fin-wallet-transfer-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Promo cards */
.fin-promo-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fin-promo-card {
  border: 1.5px solid #eee; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 10px;
}
.fin-promo-card.active { border-color: #FE2C55; background: #fff5f7; }
.fin-promo-radio {
  width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%;
  flex-shrink: 0; position: relative;
}
.fin-promo-card.active .fin-promo-radio {
  border-color: #FE2C55;
}
.fin-promo-card.active .fin-promo-radio::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px; border-radius: 50%; background: #FE2C55;
}
.fin-promo-name { font-size: 13px; color: #333; font-weight: 500; }
.fin-promo-desc { font-size: 11px; color: #999; }

/* Bank card management */
.fin-card-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fin-bank-card-item {
  border: 1.5px solid #eee; border-radius: 10px; padding: 12px;
  display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all .2s;
}
.fin-bank-card-item.active { border-color: #FE2C55; background: #fff5f7; }
.fin-bank-card-icon {
  width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #666;
}
.fin-bank-card-info { flex: 1; }
.fin-bank-card-name { font-size: 13px; font-weight: 600; color: #333; }
.fin-bank-card-num { font-size: 12px; color: #999; }
.fin-add-card-btn {
  width: 100%; padding: 12px; border: 2px dashed #ddd; border-radius: 10px;
  background: none; cursor: pointer; font-size: 14px; color: #999;
  transition: all .2s; margin-bottom: 16px;
}
.fin-add-card-btn:hover { border-color: #FE2C55; color: #FE2C55; }

/* Add card form */
.fin-add-card-form { margin-bottom: 16px; padding: 14px; background: #f8f9fa; border-radius: 10px; }
.fin-bank-search-wrap { position: relative; }
.fin-bank-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid #ddd; border-radius: 0 0 8px 8px;
  max-height: 160px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.fin-bank-suggestion {
  padding: 10px 14px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid #f0f0f0; color: #333;
}
.fin-bank-suggestion:hover { background: #f0f0f0; color: #000; }

/* Desktop — 个人中心相关弹窗改成"左侧抽屉"，贴左侧导航栏右边显示，
   不遮盖游戏画面，玩家可继续看/操作游戏 */
@media (min-width: 768px) {
  /* overlay 不再做整屏黑色 mask，也不拦截事件；仅靠抽屉本体提供视觉聚焦 */
  body:not(.is-mobile-device) .finance-overlay,
  body:not(.is-mobile-device) .finance-overlay.active {
    background: transparent;
    pointer-events: none;
  }

  body:not(.is-mobile-device) .finance-panel {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--dt-sidebar-w, 240px);
    right: auto;
    width: 420px;
    max-height: none;
    height: 100vh;
    border-radius: 0 14px 14px 0;
    box-shadow: 8px 0 28px rgba(0,0,0,.35);
    transform: translateX(-100%);
    opacity: 1;
    transition: transform .32s cubic-bezier(.32,.72,.37,1.12);
    /* ★ 关键 fix：默认 pointer-events:none —— 抽屉收起后虽然 transform:translateX(-100%)
       视觉上移出，但起点 left:240px + width:420px 后实际占据 (-180, 240)，
       右边缘正好覆盖 sidebar (0~240)。pointer-events:auto 会让收起的抽屉静默吞掉
       sidebar 上所有 click。改为 .active 时才 auto，彻底放过 sidebar。 */
    pointer-events: none;
  }
  body:not(.is-mobile-device) .overlay.active .finance-panel {
    transform: translateX(0);
    pointer-events: auto;
  }
  body:not(.is-mobile-device) .finance-body {
    max-height: none;
    flex: 1; min-height: 0;
  }
  body:not(.is-mobile-device) .fin-channel-grid { grid-template-columns: repeat(3, 1fr); }

  /* 抽屉模式下，let panel-header 略微高一些更顺眼 */
  body:not(.is-mobile-device) .finance-panel .panel-header {
    padding: 16px 20px 12px;
  }

  /* "我关注的厂商"也用同款抽屉样式（默认是底部弹起） */
  body:not(.is-mobile-device) #followedProvidersOverlay,
  body:not(.is-mobile-device) #followedProvidersOverlay.active {
    background: transparent;
    pointer-events: none;
  }
  body:not(.is-mobile-device) #followedProvidersOverlay .provider-panel {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--dt-sidebar-w, 240px);
    right: auto;
    width: 420px;
    max-width: 420px;
    max-height: none;
    height: 100vh;
    margin: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: 8px 0 28px rgba(0,0,0,.35);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.32,.72,.37,1.12);
    /* 同 finance-panel：默认 pointer-events:none 避免抽屉收起后还吞 sidebar 点击 */
    pointer-events: none;
  }
  body:not(.is-mobile-device) #followedProvidersOverlay.active .provider-panel {
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Settings detail panel height override */
.settings-detail-panel .finance-body { max-height: calc(90vh - 56px); }
@media (min-width: 768px) {
  body:not(.is-mobile-device) .settings-detail-panel {
    max-height: none; height: 100vh; width: 420px;
  }
  body:not(.is-mobile-device) .settings-detail-panel .finance-body { max-height: none; }
}

/* KYC status badges */
.kyc-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.kyc-status-badge.pending { background: #fff3cd; color: #856404; }
.kyc-status-badge.approved { background: #d4edda; color: #155724; }
.kyc-status-badge.rejected { background: #f8d7da; color: #721c24; }

/* VIP progress bar */
.vip-progress-wrap { margin: 12px 0; }
.vip-progress-bar {
  height: 8px; background: #eee; border-radius: 4px; overflow: hidden;
}
.vip-progress-fill {
  height: 100%; background: linear-gradient(90deg, #FE2C55, #ff6b81);
  border-radius: 4px; transition: width .5s ease;
}
.vip-level-card {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 12px; padding: 16px; color: #fff; margin-bottom: 16px;
}
.vip-level-card .vip-star { color: #ffd700; font-size: 20px; }
.vip-level-name { font-size: 22px; font-weight: 800; margin: 4px 0; }
.vip-level-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.vip-level-table th { text-align: left; padding: 8px 6px; color: #999; border-bottom: 1px solid #f0f0f0; font-weight: 500; }
.vip-level-table td { padding: 8px 6px; border-bottom: 1px solid #f5f5f5; }
.vip-level-table tr.current { background: #fff5f7; }

/* ===== Daily Checkin — full-screen dark theme ===== */
/* z-index 1000：必须高于 .top-bar (300)，否则 ci-header 顶部 54px 会被 top-bar
   完全遮挡，返回按钮 + 标题 + 签到记录全部不可见，用户无法关掉签到页面回到游戏。
   这是用户报告 "添加返回按钮、不可以遮挡其他游戏" 的根因。 */
.ci-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(170deg, #0a0a12 0%, #161823 40%, #1a1b2e 100%);
  display: none; flex-direction: column;
  color: #fff;
}
.ci-overlay.open { display: flex; }

/* 桌面端：ci-overlay（活动中心 / 签到 / 签到历史）默认 inset:0 会盖住
   左侧 sidebar，导致 sidebar 整列被吞、ph-tabs 头部「优惠 / 活动 / 签到」
   被 viewport 左边遮（用户报告"左边的部分看不到"）。
   解决：与 dt-feed-overlay 模式（收藏/历史 grid 浮层）对齐 —— 让 ci-overlay
   从 --dt-sidebar-w 开始，sidebar 仍完整可见可点（点 LOGO / 其他 mode/cat
   都能瞬间切走，不必先关掉活动中心）。 */
@media (min-width: 768px) {
  body:not(.is-mobile-device) .ci-overlay {
    left: var(--dt-sidebar-w, 240px);
  }
}
.ci-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
}
.ci-back {
  background: none; border: none; color: #fff; padding: 4px; cursor: pointer;
  width: 36px; display: flex; align-items: center; justify-content: center;
}
.ci-title { font-size: 17px; font-weight: 700; }
.ci-history-btn {
  background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
  color: rgba(255,255,255,.7); font-size: 12px; padding: 4px 12px; cursor: pointer;
}
.ci-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 16px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Stats row */
.ci-stats {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.ci-stat-card {
  flex: 1; background: rgba(255,255,255,.06); border-radius: 12px;
  padding: 14px 10px; text-align: center;
  border: 1px solid rgba(255,255,255,.06);
}
.ci-stat-num {
  font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #FE2C55, #ff6b81);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.2;
}
.ci-stat-num.green {
  background: linear-gradient(135deg, #43A047, #66BB6A);
  -webkit-background-clip: text; background-clip: text;
}
.ci-stat-num.gold {
  background: linear-gradient(135deg, #FFB300, #FFCA28);
  -webkit-background-clip: text; background-clip: text;
}
.ci-stat-label {
  font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; font-weight: 500;
}

/* 7-day reward strip */
.ci-week-strip {
  display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ci-week-strip::-webkit-scrollbar { display: none; }
.ci-week-card {
  flex: 0 0 calc((100% - 36px) / 7); min-width: 44px;
  background: rgba(255,255,255,.05); border-radius: 10px;
  padding: 10px 4px 8px; text-align: center;
  border: 1px solid rgba(255,255,255,.06);
  position: relative; transition: all .25s ease;
}
.ci-week-card.done {
  background: rgba(254,44,85,.12);
  border-color: rgba(254,44,85,.25);
}
.ci-week-card.today {
  border-color: #FE2C55;
  box-shadow: 0 0 12px rgba(254,44,85,.3);
}
.ci-week-card.today::after {
  content: '今天'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-size: 9px; background: #FE2C55; color: #fff; padding: 1px 6px;
  border-radius: 6px; white-space: nowrap;
}
.ci-week-card.milestone {
  border-color: rgba(255,179,0,.4);
  background: rgba(255,179,0,.08);
}
.ci-week-day {
  font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 6px; font-weight: 600;
}
.ci-week-icon {
  font-size: 22px; line-height: 1.1; margin-bottom: 4px;
}
.ci-week-card.done .ci-week-icon::after { content: '✓'; font-size: 10px; color: #43A047; }
.ci-week-bonus {
  font-size: 10px; color: rgba(255,255,255,.55); font-weight: 600;
}

/* Calendar grid */
.ci-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ci-cal-title { font-size: 15px; font-weight: 700; }
.ci-cal-nav {
  background: none; border: none; color: rgba(255,255,255,.5); padding: 4px 8px;
  cursor: pointer; font-size: 16px;
}
.ci-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 20px;
}
.ci-cal-label {
  text-align: center; font-size: 11px; color: rgba(255,255,255,.3);
  font-weight: 600; padding: 4px 0;
}
.ci-cal-day {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.35); position: relative;
  transition: all .2s ease;
}
.ci-cal-day.checked {
  background: rgba(254,44,85,.15); color: #FE2C55; font-weight: 700;
}
.ci-cal-day.checked::after {
  content: '✓'; position: absolute; top: 2px; right: 4px;
  font-size: 8px; color: #43A047; font-weight: 800;
}
.ci-cal-day.today {
  background: rgba(254,44,85,.08);
  border: 1.5px solid #FE2C55; font-weight: 700; color: #FE2C55;
}
.ci-cal-day.empty { visibility: hidden; }

/* Big CTA button */
.ci-action-btn {
  width: 100%; padding: 16px; border: none; border-radius: 14px;
  font-size: 17px; font-weight: 800; cursor: pointer;
  color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FE2C55 0%, #ff4070 50%, #ff6b81 100%);
  box-shadow: 0 4px 20px rgba(254,44,85,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ci-action-btn:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(254,44,85,.3); }
.ci-action-btn:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none;
  background: rgba(255,255,255,.1);
}

/* Reward table */
.ci-reward-section {
  background: rgba(255,255,255,.04); border-radius: 14px;
  padding: 14px; margin-top: 16px;
  border: 1px solid rgba(255,255,255,.06);
}
.ci-reward-title {
  font-size: 14px; font-weight: 700; margin-bottom: 10px;
  color: rgba(255,255,255,.8);
}
.ci-reward-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}
.ci-reward-row:last-child { border-bottom: none; }
.ci-reward-day { color: rgba(255,255,255,.5); }
.ci-reward-val { color: #FFB300; font-weight: 700; }

/* History page */
.ci-history-month {
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.7);
  padding: 12px 0 8px; border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.ci-history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ci-history-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(254,44,85,.12); color: #FE2C55;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.ci-history-dot.makeup { background: rgba(255,179,0,.12); color: #FFB300; }
.ci-history-info { flex: 1; }
.ci-history-date { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.ci-history-detail { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }
.ci-history-reward {
  font-size: 14px; font-weight: 700; color: #43A047; text-align: right;
}
.ci-history-empty {
  text-align: center; padding: 60px 0; color: rgba(255,255,255,.3); font-size: 14px;
}
.ci-history-load-more {
  display: block; width: 100%; padding: 12px; margin-top: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: rgba(255,255,255,.5); font-size: 13px;
  text-align: center; cursor: pointer;
}
.ci-history-load-more:hover { background: rgba(255,255,255,.1); }

/* ===== Promo Hub (活动中心) — directory tabs + section cards ===== */
.ph-tabs {
  display: flex; gap: 6px; padding: 4px 16px 12px; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ph-tabs::-webkit-scrollbar { display: none; }
.ph-tab {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 18px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.ph-tab:active { transform: scale(.96); }
.ph-tab.active {
  background: linear-gradient(135deg, #FE2C55, #ff6b81);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(254,44,85,.3);
}
.ph-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 14px 14px;
  margin-bottom: 10px; cursor: pointer;
  transition: all .2s ease; display: flex; align-items: center; gap: 12px;
}
.ph-card:active { transform: scale(.98); background: rgba(255,255,255,.08); }
.ph-card-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(254,44,85,.2), rgba(255,179,0,.15));
}
.ph-card-body { flex: 1; min-width: 0; }
.ph-card-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.ph-card-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.4; }
.ph-card-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 8px;
  background: rgba(255,179,0,.15); color: #FFB300; font-weight: 700;
  flex-shrink: 0; align-self: flex-start;
}
.ph-empty {
  text-align: center; padding: 80px 20px; color: rgba(255,255,255,.35);
  font-size: 13px; line-height: 1.6;
}
.ph-empty-icon { font-size: 44px; margin-bottom: 12px; opacity: .5; }
.ph-empty-title { font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 6px; font-weight: 600; }

/* Rebate table */
.rebate-config-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.rebate-config-table th { text-align: left; padding: 8px 6px; background: #f8f9fa; color: #666; font-weight: 600; }
.rebate-config-table td { padding: 8px 6px; border-bottom: 1px solid #f5f5f5; }

/* Referral */
.referral-code-box {
  background: #f8f9fa; border: 2px dashed #FE2C55; border-radius: 12px;
  padding: 20px; text-align: center; margin-bottom: 16px;
}
.referral-code { font-size: 28px; font-weight: 900; color: #FE2C55; letter-spacing: 4px; margin: 8px 0; }
.referral-copy-btn {
  padding: 8px 24px; border: none; border-radius: 8px;
  background: #FE2C55; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.referral-stat { display: flex; gap: 16px; margin-bottom: 16px; }
.referral-stat-item {
  flex: 1; background: #f8f9fa; border-radius: 10px; padding: 14px; text-align: center;
}
.referral-stat-num { font-size: 22px; font-weight: 800; color: #FE2C55; }
.referral-stat-label { font-size: 12px; color: #999; margin-top: 4px; }

/* Messages */
.msg-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
.msg-header-count { font-size: 13px; color: #666; }
.msg-read-all-btn {
  background: none; border: 1px solid #FE2C55; color: #FE2C55;
  font-size: 12px; padding: 4px 12px; border-radius: 14px; cursor: pointer;
  transition: all .2s;
}
.msg-read-all-btn:active { background: #FE2C55; color: #fff; }
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-item {
  padding: 12px 14px; border-radius: 10px; background: #f8f9fa; cursor: pointer;
  border: 1px solid #eee; transition: all .2s;
}
.msg-item:active { background: #f0f0f0; }
.msg-item.unread { background: #fff5f7; border-color: #fed7dc; }
.msg-item.unread::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #FE2C55; position: absolute;
  top: 16px; left: 6px;
}
.msg-item { position: relative; padding-left: 14px; }
.msg-item-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.msg-type-badge {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
  flex-shrink: 0;
}
.msg-item-title {
  font-size: 14px; font-weight: 600; color: #333;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-item-time { font-size: 11px; color: #bbb; flex-shrink: 0; }
.msg-item-preview { font-size: 13px; color: #888; line-height: 1.5; }
.msg-item-full-text {
  font-size: 13px; color: #555; line-height: 1.7; white-space: pre-wrap;
  word-break: break-word; padding: 8px 0 4px;
}
.msg-item-expand {
  font-size: 11px; color: #bbb; text-align: center; margin-top: 6px;
}
.msg-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0f0f0;
}
.msg-pager-btn {
  background: none; border: 1px solid #ddd; padding: 6px 14px;
  border-radius: 6px; font-size: 13px; cursor: pointer; color: #333;
}
.msg-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.msg-pager-info { font-size: 12px; color: #999; }
.msg-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #FE2C55; border-radius: 8px;
  font-size: 10px; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* WS toast */
.ws-toast {
  position: fixed; top: 60px; right: 16px; z-index: 600;
  background: #fff; border-radius: 12px; padding: 14px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); min-width: 260px; max-width: 340px;
  animation: wsSlideIn .3s ease; border-left: 4px solid #FE2C55;
}
.ws-toast.admin { border-left-color: #3b82f6; }
.ws-toast-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 4px; }
.ws-toast-body { font-size: 13px; color: #666; }
@keyframes wsSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes notifyProgress {
  from { width: 100%; }
  to { width: 0; }
}

/* ======================================================
   GAME IFRAME (inline with nav visible)
   ====================================================== */
.game-fullscreen {
  position: fixed;
  top: 54px;
  left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  background: #000;
  display: flex; flex-direction: column;
  isolation: isolate;
  will-change: transform;
  touch-action: auto;
}
/* 进入全屏的判定：toggleGameFs() 设 .game-fullscreen[data-fs="1"]
   并在 body 上加 .game-fs-landscape 类。下面所有「全屏后」的样式
   都用 [data-fs="1"] 锚定，避免之前 .fs-true 死选择器的问题。 */
.game-fullscreen[data-fs="1"] {
  top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 99999 !important;
}
/* 全屏后：隐藏整个 .game-fs-topbar，让游戏 iframe 真正占满
   .game-fullscreen 区域 (top:0~bottom:0)，不再被 40px 标题栏占位。
   退出全屏的入口由浮动按钮 .game-fs-exit-btn 提供（在游戏右上角悬浮）。
   .game-shield 也要把 top:40px 顶到 0，否则全屏后 shield 起点错位。 */
.game-fullscreen[data-fs="1"] .game-fs-topbar { display: none !important; }
.game-fullscreen[data-fs="1"] .game-shield { top: 0; }

/* === 全屏模式下取消所有遮罩 / 覆盖层 ===
   用户进入全屏（toggleGameFs → data-fs=1 + body.game-fs-landscape）时，
   彻底放开游戏 iframe，让玩家在真人 / 捕鱼 / 老虎机等任意游戏中都能
   正常操作（确认下注、点击桌台、拖拉转盘等），不被任何前端浮层拦截。
   退出全屏时 body 上的 .game-fs-landscape 自动移除 → 所有规则失效，
   恢复原状，无需额外 JS。
*/

/* 1. 加载遮罩 / TikTok 滑切手势区 / 桌面滚轮切游戏 zone：全屏时彻底关闭。
      这些都是为非全屏体验设计的，全屏后必须让位给游戏本身。 */
body.game-fs-landscape .game-shield,
body.game-fs-landscape .game-swipe-edge,
body.game-fs-landscape .game-wheel-edge {
  display: none !important;
}

/* 2. 右侧 actionBar 整列 + 上方收起小拉手 + 右边缘 #actionBarHandle：
      原本在桌面 game-fs-landscape 已隐藏 actionBar，这里扩到移动端，
      且把所有相关附属元素一起关闭。 */
body.game-fs-landscape .action-bar,
body.game-fs-landscape .action-collapse-btn,
body.game-fs-landscape .action-bar-handle,
body.game-fs-landscape .next-game-preview {
  display: none !important;
}

/* 3. 浮动按钮：红包雨入口、客服 FAB、其它 ng-fab-* 类悬浮按钮全部藏起。
      游戏内已经有自己的菜单按钮，再叠浮层只会挡画面或抢点击。 */
body.game-fs-landscape #rp-float-btn,
body.game-fs-landscape .ng-lc-fab,
body.game-fs-landscape .ng-fab,
body.game-fs-landscape .ng-fab-cs {
  display: none !important;
}

/* 4. 移动端顶部 / 底部导航条：全屏自然不该出现。 */
body.is-mobile-device.game-fs-landscape #topBar,
body.is-mobile-device.game-fs-landscape #bottomNav,
body.is-mobile-device.game-fs-landscape .game-info-overlay {
  display: none !important;
}

/* 5. 桌面 sidebar：全屏时游戏要完全占满，sidebar 滑出屏幕外让位。 */
@media (min-width: 768px) {
  body:not(.is-mobile-device).game-fs-landscape .dt-sidebar {
    display: none !important;
  }
  body:not(.is-mobile-device).game-fs-landscape .dt-main {
    padding-right: 0 !important;
  }
}

/* 6. iframe 自身确保接管所有指针事件，避免任何残留 z-index 较高的
      overlay（如 toast / 下拉菜单等）默认情况下拦截游戏点击。 */
body.game-fs-landscape .game-fs-iframe {
  pointer-events: auto !important;
  touch-action: auto !important;
}

/* 7. 终极兜底：全屏时 .game-fullscreen 容器内除了 iframe 和退出按钮，
      其余任何子元素（左右两边 swipe-edge / wheel-edge / shield / 自定义
      浮层 / 未来新加的元素）一律隐藏 + 关闭点击。这样不必再针对每个
      具体 class 维护白名单，新增覆盖物默认就被屏蔽。 */
body.game-fs-landscape .game-fullscreen > *:not(#gameIframe):not(.game-fs-exit-btn) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 8. iframe 容器本身放最低层：保证 iframe 占满（top:0;left:0;right:0;bottom:0），
      退出按钮独立浮在最上层（z-index:20，已在 .game-fs-exit-btn 中定义）。 */
body.game-fs-landscape .game-fs-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* 浮动「退出全屏」按钮：仅在全屏 (data-fs="1") 时显示，
   悬浮于游戏右上角，不占据布局空间。 */
.game-fs-exit-btn {
  display: none;
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 20;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, transform .12s;
}
.game-fs-exit-btn:hover { background: rgba(0,0,0,.75); }
.game-fs-exit-btn:active { transform: scale(.9); }
.game-fs-exit-btn svg { display: block; pointer-events: none; }
.game-fullscreen[data-fs="1"] .game-fs-exit-btn { display: flex; }
/* 全平台隐藏左上角 ← 返回按钮：
   - 桌面端：sidebar 上的 LOGO 已经是返回大厅入口，且任意 dt-nav 项进入
     dt-feed-overlay 模式（游戏不打断）；
   - 移动端：底部 #bottomNav 的「游戏大厅」+ 浏览器原生后退键已经能返回；
   多一个 ← 容易和浏览器顶部「后退」重叠造成误触。 */
.game-fs-back { display: none !important; }

.game-fs-topbar {
  height: 40px; flex-shrink: 0;
  background: #161823;
  display: flex; align-items: center;
  padding: 0 8px; gap: 8px;
  z-index: 10;
  position: relative;
}
.game-fs-back, .game-fs-fullscreen, .game-fs-nav {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .2s;
  min-width: 44px; min-height: 44px;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
}
.game-fs-back:hover, .game-fs-fullscreen:hover, .game-fs-nav:hover { background: rgba(255,255,255,.1); }
.game-fs-nav:active { background: rgba(255,255,255,.18); transform: scale(.92); }
.game-fs-nav { display: none; }  /* 默认隐藏：移动端走 swipe 手势 */
@media (min-width: 768px) {
  body:not(.is-mobile-device) .game-fs-nav { display: flex; }
}
.game-fs-title {
  flex: 1; color: #fff; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.game-fs-iframe {
  flex: 1; width: 100%; border: none; background: #000;
  touch-action: auto;
}
.game-swipe-edge {
  position: absolute;
  top: 30%; bottom: 30%;
  left: 50px; right: 50px;
  z-index: 3;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}
.game-swipe-edge.passthrough {
  pointer-events: none;
}
.game-swipe-right { display: none; }
.game-shield {
  position: absolute;
  top: 40px; left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: transparent;
  touch-action: auto;
}

@media (min-width: 768px) {
  body:not(.is-mobile-device) .game-fullscreen {
    top: 0; bottom: 0;
    /* left/right 用 CSS 变量，与 .dt-sidebar/.action-bar 同步折叠 */
    left: var(--dt-sidebar-w, 240px); right: 96px;
    z-index: 90;
  }
  body:not(.is-mobile-device) .game-fullscreen[data-fs="1"] { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 99999 !important; }
  /* 桌面端没有触摸，不需要 TikTok 滑动手势区。
     若不禁用，这层透明 div 会盖在 iframe 上吃掉所有鼠标点击 → 游戏无法操作。 */
  body:not(.is-mobile-device) .game-swipe-edge { display: none; }
  /* gameShield 用于 loading 阶段引导用户点击解锁音频；桌面端不需要遮罩，
     load 完成前万一未及时隐藏，也不要拦截鼠标 */
  body:not(.is-mobile-device) .game-shield { pointer-events: none; }
  /* 桌面端 iframe 左侧 wheel zone：滚轮/中键切游戏 */
  body:not(.is-mobile-device) .game-wheel-edge { display: block; }
}

/* 桌面端 wheel zone：透明覆盖在 iframe 四边（除右边由 actionBar 接管），
   学 TikTok"任意地方都能滚轮切下一个"的体验。游戏中心区域不被遮挡。
   移动端默认隐藏（用 swipe-edge 即可） */
.game-wheel-edge {
  display: none;
  position: absolute;
  z-index: 4;
  background: transparent;
  pointer-events: auto;
  cursor: ns-resize;
}
.game-wheel-edge-left {
  top: 40px; bottom: 0;
  left: 0;
  width: 60px;
}
.game-wheel-edge-top {
  top: 40px;
  left: 0; right: 0;
  height: 60px;
}
.game-wheel-edge-bottom {
  /* 底部只留 20px，避免遮挡游戏内的 BUY FEATURE / BALANCE / TOTAL BET 等按钮 */
  bottom: 0;
  left: 0; right: 0;
  height: 20px;
}

/* ===== Landscape Lock ===== */
.landscape-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0d0d14;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  touch-action: none;
  pointer-events: auto;
}
.landscape-lock-inner {
  text-align: center;
  color: rgba(255,255,255,.7);
}
.landscape-lock-inner svg {
  margin-bottom: 20px;
  opacity: .6;
  animation: landscape-pulse 2s ease-in-out infinite;
}
.landscape-lock-inner p {
  font-size: 15px;
  letter-spacing: .5px;
  margin: 0;
}
.landscape-rotate-arrow { opacity: .5; }

@keyframes landscape-pulse {
  0%, 100% { transform: rotate(0deg); opacity: .6; }
  50% { transform: rotate(90deg); opacity: 1; }
}

body.is-mobile-device.is-landscape .landscape-lock { display: flex; }
body.is-mobile-device.is-landscape.game-fs-landscape .landscape-lock { display: none; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }