/* RUAY55 玩家端「浏览器放大」版面修复 v1 — 2026-09-19
 *
 * 场景：iPhone Safari 地址栏 ᴀA 放大（或安卓浏览器的文字/页面缩放）不是把画面拉大，
 * 而是让网页以为屏幕变窄、按更窄的宽度重新排版：390 宽 iPhone 上 115%→339、125%→312、150%→260。
 * 壳里的 viewport 缩放脚本读的是 screen.width（放大时不变），所以不会出手，页面真的按窄宽度硬排。
 * 正常手机（含比 390 窄的小屏，已整体按 390 排版再缩放）版面宽度永远 ≥ 390，
 * 所以下面两档媒体查询只在「被放大」时才生效，对现有版面零影响。
 *
 * 体检（泰/英/缅 × 22 页，对比 100% 基线）：115% 新增 2 处、125% 再多 1 处、150% 共 34 处。
 * 根源几乎都一样：卡片是「装饰图标 + 文字 + 数字」几栏并排、栏宽按 390 设计写死，
 * 变窄后文字栏被挤成一两个字宽（拆字、窄条）、数字冒出框、固定高度的卡片把第二行切掉。
 * 修法（沿用 README 原则：不缩字号、不改按钮尺寸）：去掉装饰图标把位置让给文字；
 * 并排改上下排；允许换行；写死的高度改成「至少原高度、随内容长」。
 *
 * 必须包在 @layer vip-source-lock 里、选择器带 html body #root#root（见 player-frontend-css-override-layer-trap）。
 */
@layer vip-source-lock {

  /* ===== 第 1 档：≤ 359.98px（115% 起就会发作的 3 处）===== */
  @media (max-width: 359.98px) {
    /* 1. 会员转账：余额行标签栏被分到 0 宽，标签被挤成一个字一行 → 标签在上、金额在下 */
    html body #root#root .transfer-balance-inline {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    /* 2. 钱包页礼码「฿ 11.00 + 6.23 USD」不换行、被自动缩到 7px 还冒出框 → 允许在「+」处换行 */
    html body #root#root .wallet-vip-asset-details > span > b {
      white-space: normal !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      line-height: 1.2 !important;
    }
    /* 3. 游戏页厂商筛选条：横向可滑，厂商名不该被拆成两行 */
    html body #root#root .game-provider-filter-list > button > span {
      white-space: nowrap !important;
    }
    /* 3b. 游戏页厂商分组标题「Microgaming」「KingMidas」被拆成两行 → 放不下就省略 */
    html body #root#root .provider-heading strong {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      min-width: 0 !important;
    }
    /* 3c. 实名页顶部：盾牌图标 62 + 文字，第二行被定高 104 切掉（英文 115% 就发作）→ 去图标、高度随内容 */
    html body #root#root .tool-hero.identity { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
    html body #root#root .tool-hero.identity > .identity-hero-seal { display: none !important; }
    /* 3d. 功能页顶栏：标题放不下就省略；右侧「THB」小标签不许拆行（125% 就发作） */
    html body #root#root .player-action-page-header h1 { text-overflow: ellipsis !important; }
    html body #root#root .player-action-page-header > span { white-space: nowrap !important; flex: none !important; }
    /* 3e. 提现页「提现方式」卡标题行：标题 148 把右边「THB」小标签挤到 14px、拆成两行（英文 125% 发作） */
    html body #root#root .funding-list-card > header > span { flex: none !important; white-space: nowrap !important; }
    html body #root#root .funding-list-card > header > h2 { min-width: 0 !important; }
    /* 标题区必须能收缩，否则厂商名不换行后会把右边「查看全部」按钮挤成窄条 */
    html body #root#root .provider-heading > div:first-child { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
    html body #root#root .provider-heading > button { flex: none !important; white-space: nowrap !important; }
  }

  /* ===== 第 2 档：≤ 300px（150% 起）===== */
  @media (max-width: 300px) {
    /* 首页钱包卡：余额 | 三个按钮 左右两栏 → 上下排，余额拿到整行宽度 */
    html body #root#root .wallet-summary {
      grid-template-columns: minmax(0, 1fr) !important;
      height: auto !important;
    }
    html body #root#root .wallet-summary > .wallet-title { grid-column: 1 !important; grid-row: 1 !important; }
    html body #root#root .wallet-summary > .wallet-actions { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; }

    /* 首页红包横幅：图片栏收窄，把位置让给文字（横幅定高 140，只做减法） */
    html body #root#root .grab-red-packet-banner {
      grid-template-columns: 52px minmax(0, 1fr) !important;
    }
    /* 首页两张福利卡：并排 → 上下排 */
    html body #root#root .home-growth-actions {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    /* 「我的」页余额三格：每格图标占掉一半宽度 → 去掉图标（卡片定高 170，只做减法）。
       栏宽 34px 和文字格位置是脚本写在元素上的行内 !important（grid-template-columns / grid-area），样式表盖不过；
       所以图标藏掉后，文字格用负左边距伸进空出来的图标位（34 + 3 间距），宽度同步加上。实测 30 → 67px，余额完整显示。 */
    html body #root#root .profile-balance-status > article > .profile-balance-icon { display: none !important; }
    html body #root#root .profile-balance-status > article > .profile-balance-copy {
      margin-left: -37px !important;
      width: calc(100% + 37px) !important;
      max-width: none !important;
      min-width: 0 !important;
    }
    /* 「我的」页流水卡标题 + 「Live」小徽章挤在一行，徽章被拆行 → 徽章不换行，标题放不下就省略（卡片定高） */
    html body #root#root .profile-turnover-title > span { white-space: nowrap !important; flex: none !important; }
    html body #root#root .profile-turnover-title > h2 {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    /* 钱包页余额明细：「Withdrawable 数字」挤在一行、字被缩到 5.5px → 标签在上、数字在下 */
    html body #root#root .balance-stats.balance-amount-grid > span { grid-template-columns: minmax(0, 1fr) !important; }
    /* 优惠页主活动卡两个小标签并排各 54px → 上下排 */
    html body #root#root .promo-feature-facts { grid-template-columns: minmax(0, 1fr) !important; }
    /* 「我的」页钱包按钮文字被切 → 允许换行 */
    html body #root#root .profile-wallet-actions > button {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      line-height: 1.15 !important;
      height: auto !important;
    }

    /* 「我的」页最近记录 + 记录页：图标 | 标题 | 金额 → 去图标，标题（含「已过期」状态）可换行 */
    html body #root#root .profile-record-preview-row,
    html body #root#root .detailed-record-row {
      grid-template-columns: minmax(0, 1fr) auto !important;
      height: auto !important;
    }
    html body #root#root .profile-record-preview-row > .record-icon,
    html body #root#root .detailed-record-row > .record-icon,
    html body #root#root .detailed-record-row > span:first-child:not(.record-main) { display: none !important; }
    html body #root#root .profile-record-preview-row .record-main > strong,
    html body #root#root .detailed-record-row .record-main > strong {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      height: auto !important;
    }

    /* 钱包页 / 钱包：币种切换 | 提现充值 左右两栏 → 上下排 */
    html body #root#root .wallet-vip-controls {
      grid-template-columns: minmax(0, 1fr) !important;
      height: auto !important;
    }
    html body #root#root .wallet-vip-controls > .wallet-vip-currency { grid-column: 1 !important; grid-row: 1 !important; }
    html body #root#root .wallet-vip-controls > .wallet-vip-actions { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; }

    /* 提现页余额行：标签固定 88、金额只剩 24 → 标签占剩余、金额按需要 */
    html body #root#root .funding-wallet-body dl > div {
      grid-template-columns: minmax(0, 1fr) auto !important;
    }
    html body #root#root .funding-wallet-body { grid-template-columns: minmax(0, 1fr) !important; }
    html body #root#root .funding-wallet-body > :first-child:not(dl) { display: none !important; }

    /* 会员转账弹窗：外边距 10 + 内边距 22 + 卡片外边距 14 层层叠加，两边吃掉 92px → 收紧 */
    html body #root#root .transfer-entry-backdrop .transfer-entry-modal {
      padding-left: 12px !important;
      padding-right: 12px !important;
      margin-left: 4px !important;
      margin-right: 4px !important;
    }
    html body #root#root .transfer-entry-modal > .transfer-entry-hero,
    html body #root#root .transfer-entry-modal > .transfer-entry-card,
    html body #root#root .transfer-entry-modal > .transfer-entry-note {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    /* 顶栏：返回 | 标题 | 币种，标题原来只剩 32px 被拆成一个字一行 */
    html body #root#root .transfer-entry-topbar {
      grid-template-columns: 40px minmax(0, 1fr) auto !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    /* 收款方式两个按钮并排被挤窄 → 上下排；快捷金额四格 → 两格 */
    html body #root#root .transfer-method-grid { grid-template-columns: minmax(0, 1fr) !important; }
    html body #root#root .transfer-method-grid > button { height: auto !important; }
    html body #root#root .transfer-quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: auto !important; }

    /* 兑换页顶部：图标 54 + 文字 → 去图标 */
    html body #root#root .tool-hero.exchange { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
    html body #root#root .tool-hero.exchange > span:first-child { display: none !important; }

    /* 兑换页两张余额卡并排各 115，每张图标又占 38、文字只剩 46 → 去图标 */
    html body #root#root .tool-rate-card > article { grid-template-columns: minmax(0, 1fr) !important; }
    html body #root#root .tool-rate-card > article > .exchange-balance-icon { display: none !important; }

    /* 二维码中心推荐卡：图标 | 文字 50 | 按钮 76 → 图标 + 文字一行、按钮单独一行 */
    html body #root#root .qr-vip-referral-card {
      grid-template-columns: 46px minmax(0, 1fr) !important;
      height: auto !important;
    }
    html body #root#root .qr-vip-referral-card > button { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; }

    /* 红包页统计格：图标占掉一半 → 去图标（格子定高、只做减法） */
    html body #root#root .red-packet-stat-copy { min-width: 0 !important; }
    html body #root#root article:has(> .red-packet-stat-copy) { grid-template-columns: minmax(0, 1fr) !important; }
    html body #root#root article:has(> .red-packet-stat-copy) > i { display: none !important; }

    /* 设置页：名称 39 | 状态 85 | 箭头 → 名称整行、状态在下、箭头靠右 */
    html body #root#root .settings-list > button {
      grid-template-columns: minmax(0, 1fr) 16px !important;
      height: auto !important;
    }
    html body #root#root .settings-list > button > span:first-child { grid-column: 1 !important; grid-row: 1 !important; }
    html body #root#root .settings-list > button > small { grid-column: 1 !important; grid-row: 2 !important; }
    html body #root#root .settings-list > button > svg { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: center !important; }

    /* 优惠页活动行：图标 42 | 文字 34 | 奖励 94 → 去图标，文字整行、奖励在下 */
    html body #root#root .promo-offer-row { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
    html body #root#root .promo-offer-row > .promo-offer-icon { display: none !important; }
    html body #root#root .promo-offer-row > div:not(.promo-offer-reward) { grid-column: 1 !important; grid-row: 1 !important; }
    html body #root#root .promo-offer-row > .promo-offer-reward { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; }
  }
}