/* ==========================================================================
   金局 · 移动端适配层
   --------------------------------------------------------------------------
   最后加载，专门解决窄屏问题。原则：
     1. 只在 max-width 断点内生效，不动桌面端既有布局
     2. 触摸目标 ≥ 44px（Apple HIG）、输入框 ≥ 16px（防 iOS 自动放大）
     3. 固定宽度一律改成 max-width: 100%，消除横向溢出
     4. 安全区用 env()，适配刘海与底部横条
     5. 表格统一进横向滚动容器，而不是压成看不清的样子
   ========================================================================== */

/* ── 1. 全局基础 ─────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

* {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* 任何写死的大宽度都不该把页面撑破 */
[class*="layout"],
[class*="panel"],
[class*="card"],
[class*="grid"],
[class*="row"] {
  max-width: 100%;
}

/* ── 2. 安全区（刘海屏 / 底部横条） ───────────────────────────────────── */
.app-shell {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

#player-navigation {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

dialog {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
}

/* ── 3. 触摸目标与输入 ───────────────────────────────────────────────── */
@media (pointer: coarse) {
  button,
  .button,
  [role="button"],
  a.button,
  .pay-chip,
  .game-filters button,
  .record-tabs button,
  .activity-tabs button,
  .segmented button {
    min-height: 44px;
  }
  /* 小图标按钮单独给到 44×44 命中区，视觉尺寸不变 */
  .icon-button,
  .pay-refresh {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  /* iOS 上 <16px 会自动放大整页，这里统一抬到 16px */
  input,
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.4;
  }
}

/* ── 4. 平板及以下：收窄容器与间距 ──────────────────────────────────── */
@media (max-width: 980px) {
  :root {
    --pad: 15px;
    --radius-lg: 16px;
    --radius-md: 11px;
  }
}

/* ── 5. 手机竖屏：主战场 ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --pad: 14px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 7px;
  }

  /* 顶部栏压缩，给内容留高度 */
  .topbar {
    padding: 10px 14px;
    gap: 10px;
  }
  .topbar .brand {
    gap: 8px;
  }
  .brand b {
    font-size: 16px;
  }
  .brand small {
    font-size: 9px;
  }

  /* 标题阶梯下移，避免大屏字号在小屏上撑爆 */
  h1 { font-size: clamp(22px, 6.4vw, 30px); }
  h2 { font-size: clamp(18px, 5.2vw, 23px); }
  h3 { font-size: clamp(15px, 4.4vw, 18px); }
  p  { font-size: 14px; line-height: 1.72; }

  /* 内容区内边距收紧 */
  main,
  .player-page,
  .admin-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 网格统一单列 —— 手机上两列卡片信息密度太低 */
  .game-grid,
  .lounge-shortcuts,
  .metric-row,
  .intro-stats,
  .record-tabs,
  .activity-tabs,
  .pay-chips {
    grid-template-columns: 1fr !important;
  }
  .pay-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pay-chips > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 游戏卡片横向排布：色块 + 文案 */
  .game-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
  }
  .game-card .game-art {
    width: 84px;
    height: 84px;
    min-height: 84px;
    border-radius: var(--radius-md);
  }
  .game-card .game-copy {
    padding: 0;
    gap: 6px;
  }
  .game-card .game-copy h3 {
    font-size: 16px;
  }
  .game-card .game-copy p {
    font-size: 12.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .game-card .button {
    justify-self: start;
    padding: 9px 14px;
    font-size: 13px;
  }

  /* 首页 hero 区压缩 */
  .hero-hall,
  .scene-band {
    min-height: 320px !important;
    border-radius: var(--radius-lg);
  }
  .scene-caption {
    padding: 20px 16px;
  }
  .scene-caption h1,
  .hero-hall h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
  }
  .hero-stats {
    gap: 16px !important;
    padding: 12px 16px !important;
  }
  .hero-stats b {
    font-size: 18px !important;
  }

  /* 3D 场景：手机上按 16:10 收高度，避免占满整屏 */
  #lounge-scene,
  .scene-band {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }

  /* 账号行 */
  .lounge-account {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }
  .chip-shortcut {
    margin-left: auto;
  }

  /* VIP 横幅：竖排 */
  .vip-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .vip-banner-cta {
    align-self: stretch;
    justify-content: center;
  }

  /* 底部导航：必须同时命中 class 和 id
     lobby.css 用的是 .player-navigation（flex + gap:55px + 按钮定宽 85px），
     只写 #player-navigation 覆盖不掉，5 个按钮会溢出 645px 把文字压成竖排。 */
  .player-navigation,
  #player-navigation {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px;
    padding: 5px 2px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(8, 10, 15, .96) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    z-index: 120;
  }
  .player-navigation button,
  #player-navigation button {
    position: relative;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 1px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden;
    color: #75828f !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .player-navigation button span,
  #player-navigation button span {
    display: block !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
  .player-navigation button svg,
  #player-navigation button svg {
    width: 20px !important;
    height: 20px !important;
    flex: none;
  }
  .player-navigation button[aria-current="page"],
  #player-navigation button[aria-current="page"] {
    color: var(--gold) !important;
  }
  /* 选中态改成上方细条，不再用 lobby.css 那个 22px 的实心块 */
  .player-navigation button[aria-current="page"]::before,
  #player-navigation button[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--gold);
  }
  /* 有底部导航时，主内容留出它的高度 + 安全区 */
  body:has(.player-navigation:not([hidden])) main,
  body:has(#player-navigation:not([hidden])) main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* 弹窗：移动端居中、限宽、内部滚动 —— v1 这里漏了 position/inset，
     导致 dialog 用 UA 默认定位 + 内容撑宽，右侧整块被切出屏幕。 */
  dialog {
    position: fixed;
    inset: 0;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px);
    margin: auto !important;
    padding: 20px 18px;
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  dialog::backdrop {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(3, 4, 8, .62);
  }
  dialog .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
  }
  dialog .dialog-actions button {
    width: 100%;
    min-height: 46px;
  }
  dialog h2 {
    font-size: 18px;
    margin: 0 0 6px;
  }
  dialog p {
    font-size: 13.5px;
    line-height: 1.68;
    margin: 0;
  }

  /* 表单行：竖排 */
  .form-row,
  .audit-row,
  .search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* 支付页 */
  .pay-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .pay-row {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .pay-row strong {
    word-break: break-all;
  }

  /* 钱包 */
  .wallet-balance strong {
    font-size: clamp(28px, 9vw, 40px);
  }

  /* 登录页已在 login.css 内单独优化，这里只兜底内边距 */
  #login-panel.auth-layout {
    padding-left: 0;
    padding-right: 0;
  }

  /* 页脚说明文字缩小 */
  .lounge-footnote,
  .casino-disclaimer p,
  .muted-text {
    font-size: 12px;
    line-height: 1.65;
  }
}

/* ── 6. 小屏（iPhone SE / 老安卓） ──────────────────────────────────── */
@media (max-width: 400px) {
  :root {
    --pad: 12px;
    --radius-lg: 12px;
  }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .game-card {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 10px;
    gap: 10px;
  }
  .game-card .game-art {
    width: 68px;
    height: 68px;
    min-height: 68px;
  }
  .intro-stats b,
  .hero-stats b {
    font-size: 17px !important;
  }
  .pay-tabs {
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    gap: 4px;
  }
  .pay-tabs button {
    height: 36px;
    font-size: 12.5px;
    padding: 0 4px;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   后台胜率页表格
   --------------------------------------------------------------------------
   上面为消除玩家端溢出统一把 th/td 的 min-width 归零，后台这张 5 列表
   因此被压成逐字换行、右侧裁切。这里给后台页单独恢复单元格宽度并允许横滑。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* 后台表格在自己的盒子里横滑：display:block 让 table 变成滚动容器，
     thead/tbody 退回 table 以保持列对齐 —— 比压字/裁切都可靠 */
  body.admin-winrate table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
  }

  body.admin-winrate thead,
  body.admin-winrate tbody {
    display: table !important;
    width: 100% !important;
    min-width: 560px !important;
  }

  body.admin-winrate th,
  body.admin-winrate td {
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 侧栏导航不要竖排 */
  body.admin-winrate .admin-sidebar nav button,
  body.admin-winrate .admin-sidebar nav a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    min-width: 88px !important;
  }
}

/* ── 7. 表格：横向滚动而不是压塌 ────────────────────────────────────── */
@media (max-width: 900px) {
  .table-scroll,
  [class*="table-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
  }
  .table-scroll table,
  [class*="table-wrap"] table {
    min-width: 720px;
    margin: 0;
  }
  .table-scroll th,
  .table-scroll td {
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 12.5px;
  }
  /* 首列固定，横向滚动时不丢上下文 */
  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel-solid);
    box-shadow: 1px 0 0 var(--line);
  }
}

/* ── 8. 管理后台：侧栏转抽屉，主区全宽 ─────────────────────────────── */
@media (max-width: 980px) {
  .admin-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .admin-sidebar {
    position: static;
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .admin-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-sidebar nav button {
    flex: 1 1 auto;
    min-height: 42px;
    font-size: 13px;
    border-radius: 10px;
  }
  .admin-sidebar .sidebar-note {
    display: none;
  }
  .admin-content {
    padding: 0;
  }
  .view-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .metric-row {
    grid-template-columns: 1fr !important;
  }
  .econ-hero {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .econ-hero strong {
    font-size: 18px !important;
  }
}

/* ── 9. 游戏页通用（slot / fish / mahjong / bird-beast） ────────────── */
@media (max-width: 720px) {
  /* 游戏页通常有自己的整屏布局，收一下内边距与按钮尺寸 */
  .slot-shell,
  .fish-shell,
  .mahjong-shell,
  .bb-shell,
  .game-shell {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  /* 赔付表 / 规则面板：默认折叠高度，避免挤压操作区 */
  .paytable,
  .rules-panel {
    max-height: 180px;
    overflow-y: auto;
  }
  /* 下注按钮组等宽排布 */
  .bet-chips,
  .bet-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bet-chips > *,
  .bet-row > * {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    min-height: 44px;
  }
}

/* ── 10. 横屏手机：高度受限，压缩纵向占用 ───────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .scene-band,
  #lounge-scene {
    aspect-ratio: auto;
    min-height: 180px !important;
  }
  .hero-stats {
    display: none;
  }
  #login-panel .auth-intro {
    display: none;
  }
}

/* ── 11. 动效偏好与打印 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   游戏内表格溢出修复
   --------------------------------------------------------------------------
   style.css 的移动端规则给所有 table 加了 min-width:620px，赔付表 / 鱼种表
   因此被撑到 620px 塞进 358px 的卡片，把布局视口顶到 651px，整页等比缩小
   并在右侧被裁切。这里只让真正需要横向滚动的后台宽表保留 620px，
   游戏内表格回到 100%。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  table { min-width: 0; }
  .table-scroll table { min-width: 620px; }

  .fish-table table,
  .slot-paytable table,
  .mj-paytable table,
  .rules-body table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .fish-table th, .fish-table td,
  .slot-paytable th, .slot-paytable td,
  .mj-paytable th, .mj-paytable td,
  .rules-body th, .rules-body td {
    min-width: 0;
    padding: 8px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fish-table th:first-child, .fish-table td:first-child { width: 62%; }
  .slot-paytable th:first-child, .slot-paytable td:first-child { width: 34%; }
}

/* 游戏页移动端统一：圆角与触摸目标 */
@media (max-width: 720px) {
  .slot-stage, .fish-ocean { border-radius: 16px; }
  .slot-controls, .fish-controls { gap: 10px; }
  .slot-chip, .fish-chip { min-height: 44px; min-width: 56px; }
  .slot-btn { min-height: 52px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   底部导航定宽
   --------------------------------------------------------------------------
   #player-navigation 是 position:fixed，没写宽度时按内容撑开：
   5 个按钮 × 108px = 543px，在 390px 屏上溢出 153px，整页被撑出横向滚动。
   fixed 元素的包含块是视口，这里显式给 100% 并按比例分配。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .player-navigation,
  #player-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 2px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .player-navigation > button,
  #player-navigation > button,
  .player-navigation > a,
  #player-navigation > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    padding: 6px 0 !important;
  }

  .player-navigation > button span,
  #player-navigation > button span {
    white-space: normal !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    word-break: keep-all !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   宽表收口
   --------------------------------------------------------------------------
   style.css 移动端规则里的 table{min-width:620px} 会把玩家面板里的表格
   （近期记录 / 账变 / 榜单）整块撑到 620px，静默撑出 170px 横向溢出。
   这里在窄屏一律取消表格最小宽度，改为在容器内换行显示。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    min-width: 0 !important;
  }

  #player-panel table,
  main table {
    width: 100% !important;
    table-layout: fixed;
  }

  #player-panel th,
  #player-panel td,
  main table th,
  main table td {
    padding: 8px 6px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 12px !important;
  }

  /* 面板内的长标题与横幅允许换行，不再用 nowrap 顶出去 */
  #player-panel h1,
  #player-panel h2,
  #player-panel .vip-banner,
  #player-panel .vip-banner * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   大厅首屏 3D 场景带
   --------------------------------------------------------------------------
   #lounge-scene 实测在 358px 的容器里占 512px，是页面横向溢出的主因
   （main.scrollWidth 542 vs 390）。窄屏一律收成容器宽度。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #lounge-scene,
  #player-panel .scene-band,
  #player-panel .hero-hall.scene-band,
  .scene-band.spotlight {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #player-panel,
  #lounge-page,
  main {
    overflow-x: clip;
  }
}

/* 首屏主视觉文字压在绿呢桌面上，对比度不足；统一加描边阴影 */#player-panel .hero-hall .scene-caption p,
#player-panel .hero-hall > p,
#player-panel .hero-hall .scene-kicker {
  color: #f4f8f5 !important;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, .9),
    0 0 14px rgba(0, 0, 0, .7) !important;
}

@media (max-width: 720px) {
  #player-panel .hero-hall .scene-caption p,
  #player-panel .hero-hall > p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   移动端游戏卡：横排紧凑
   --------------------------------------------------------------------------
   lobby-pro.css 把 .game-card 设成 flex column，移动端每张卡被拉成 317px 高
   的竖条，14 款游戏把大厅撑到 6100px。这里强制回成 88px 图标 + 文字的横排。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .game-card,
  .game-card.featured {
    display: grid !important;
    flex-direction: row !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  .game-card .game-art {
    height: 100% !important;
    min-height: 104px !important;
    width: auto !important;
  }

  .game-card .game-icon {
    font-size: 32px !important;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 214, 120, .3) !important;
  }

  .game-card .game-copy {
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 12px 14px !important;
    min-width: 0 !important;
  }

  .game-card .game-copy h3 {
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  .game-card .game-copy p {
    font-size: 11.5px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    color: #93a1b3 !important;
  }

  .game-card .game-copy .tag {
    font-size: 10px !important;
    padding: 1px 7px !important;
    justify-self: start;
  }

  .game-card .game-copy .button {
    margin-top: 5px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    width: auto !important;
    justify-self: start !important;
  }

  .game-section { margin-top: 18px !important; }
  .game-section .section-heading { margin-bottom: 9px !important; }
  .game-section .section-heading h2 { font-size: 19px !important; }
  .game-grid { gap: 8px !important; }
}