/* player-desktop-polish-v8-20260910
   三处桌面版式收拾：首页红包卡、我的中心、钱包页。都是同一个病根 ——
   手机版式放进宽屏后被扯开或被切。用户逐页指出来的。

   全部包在 @layer vip-source-lock 内（分层 !important 优先于未分层，
   见 [[player-frontend-css-override-layer-trap]]），并带 min-width:1100px 闸门，
   手机端逐项确认不受影响。 */
@layer vip-source-lock {
  @media screen and (min-width: 1100px) {

    /* ══ 1. 首页红包卡：插画被卡片边框拦腰切 ══════════════════════
       卡片 1053×155（比例 6.77），底图原始 2041×770（比例 2.65）。
       原 background-size:112% auto 把图画成 1179×445，塞进 155px 高的盒子 ——
       上下各切掉一大截，底部那枚金币只剩上半截。
       改成按卡片高度完整放下（412×155）、靠左、不平铺。
       右侧留白由卡片自身底色 rgb(255,242,235) 接住，与文案区衔接自然。
       注意 no-repeat 不能省：图变窄后会平铺 2.5 次。 */
    html body #root .app-shell.player-shell .grab-red-packet-banner {
      background-size: auto 100% !important;
      background-position: left center !important;
      background-repeat: no-repeat !important;
    }

    /* ══ 2. 我的中心 ═══════════════════════════════════════════
       2a. 身份卡中间一千像素空白：头像绝对定位在 x=259、姓名块只有 168px
           宽（x=370-538）、VIP 徽记绝对定位在 x=1215 —— 中间 677px 全空。
           姓名块里「VIP member / VIP 3 / 会员号」是竖着堆的手机排法。
           改成横排一行，空白从 677px 降到 275px。

       ⚠️ 只把这三个拉回文档流，**不要动昵称覆盖层**：
       player-profile-nickname-logo-safe-v4 用纯内联样式画了一个绝对定位的
       span 盖在 visibility:hidden 的 h1 上。把它拉回流内，h1 会留下 132px
       空洞、名字往右错位。 */
    html body #root .app-shell.player-shell .profile-page .profile-identity {
      min-height: 0 !important;
      padding-block: 8px !important;
    }

    html body #root .app-shell.player-shell .profile-page .profile-identity .profile-name {
      width: auto !important;
      display: flex !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 10px 14px !important;
      height: auto !important;
    }

    html body #root .app-shell.player-shell .profile-page .profile-identity .profile-name > .profile-vip-kicker,
    html body #root .app-shell.player-shell .profile-page .profile-identity .profile-name > .profile-option3-vip-badge,
    html body #root .app-shell.player-shell .profile-page .profile-identity .profile-name > .member-id-copy {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
    }

    /* DOM 顺序是「徽章 -> 会员标」，横排后要按手机版的读序摆 */
    html body #root .app-shell.player-shell .profile-page .profile-vip-kicker { order: 1 !important; }
    html body #root .app-shell.player-shell .profile-page .profile-option3-vip-badge { order: 2 !important; }
    html body #root .app-shell.player-shell .profile-page .member-id-copy { order: 3 !important; }

    /* 2b. 双栏。9/7 试过一次失败，那时卡片还是按 976px 硬调的白底卡；
       现在卡片已换成手机那套流式设计（release-profile-desktop-theme-20260907），
       535px 一栏能撑住 —— 重测通过。
       行号必须显式指定：只给 grid-column 的话自动排布会把 tools 推到第 4 行，
       第 2 列第 2 行空着。 */
    html body #root .app-shell.player-shell .profile-page {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      align-items: start !important;
      column-gap: 16px !important;
      row-gap: 12px !important;
    }

    html body #root .app-shell.player-shell .profile-page > .profile-identity { grid-column: 1 / -1 !important; grid-row: 1 !important; }
    html body #root .app-shell.player-shell .profile-page > .profile-wallet-card { grid-column: 1 !important; grid-row: 2 !important; }
    html body #root .app-shell.player-shell .profile-page > .profile-tools { grid-column: 2 !important; grid-row: 2 !important; }
    html body #root .app-shell.player-shell .profile-page > .profile-turnover-card { grid-column: 1 !important; grid-row: 3 !important; }
    html body #root .app-shell.player-shell .profile-page > .downline-overview { grid-column: 2 !important; grid-row: 3 !important; }
    html body #root .app-shell.player-shell .profile-page > .profile-record-preview { grid-column: 1 / -1 !important; grid-row: 4 !important; }
    html body #root .app-shell.player-shell .profile-page > .profile-record-preview-list { grid-column: 1 / -1 !important; grid-row: 5 !important; }

    /* 2c. 「最近记录」自身滚动，把整页压进一屏。
       184px 是量出来的：双栏后整页 890，要落到 <=796 才能一屏。 */
    html body #root .app-shell.player-shell .profile-page > .profile-record-preview-list {
      max-height: 150px !important;
      overflow-y: auto !important;
    }

    /* 【2d 已撤除，2026-09-10】原本这里有三条改 .profile-rollover-values 的规则，
       想修「流水金额被挤到 49px（需 71px）」。改错了层：真正被卡住的是内层每个
       <span> 自己（它是个 1 列网格，列宽 48.75px），我却去改了外层容器的 display，
       从 grid 换成 flex + flex-wrap:wrap。双栏后那一栏只有 535px，三组「标签+数值」
       换行，而这张卡是定高 + overflow:hidden —— 换下去的那行直接被切掉，
       线上表现是「未达标流水还差」卡只剩两个标签、三个数值全没了。
       （项目记忆 fixed-height-card-overflow-trap 就写着这条，还是踩了。）
       要重修：先在登录态量 .profile-rollover-values 的 grid-template-columns
       和每个 > span 的列定义，只放宽列宽，不要动容器的 display。 */

    /* 2d(v3). 「未达标流水还差」卡的数值整排掉在卡外面。
       这张卡是定高 92px + overflow:hidden，而里面的数值块用的是 cqw
       （容器查询宽度）单位：height:10.2cqw、strong 的 font-size:3.5cqw、
       margin-top:1.1cqw —— 全按 352px 手机宽调的。容器一变宽，这块就按比例
       长高，顶穿定高的卡，被 overflow:hidden 切掉。
       实测（Safari 无障碍树，1341 宽）：三个数值在 y=627-643，卡片底边 y≈620。

       解法照 theme.css 里已有的同款写法：桌面下让这张卡按内容撑高、
       数值块回到文档流。不要去调 cqw 的系数 —— 那是按手机宽推的，
       换个断点就又不对。 */
    html body #root .app-shell.player-shell .profile-page .profile-turnover-card {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      padding-block: 12px !important;
    }

    html body #root .app-shell.player-shell .profile-page .profile-rollover-values {
      position: static !important;
      inset: auto !important;
      height: auto !important;
      margin: 10px 0 0 !important;
    }

    /* v4 补两处，都是「按手机宽推出来的尺寸」在宽屏下暴涨：
       - > span 的 min-height:8.9vw —— 1341px 视口下 = 119px，光这三格就把卡撑爆
       - 卡片的 aspect-ratio:797/287 —— 582px 宽时算出 210px 高，且内容只占上半截
       本地 harness（拉生产真实样式表）实测：
         只发 v3 → 卡 210px；+ min-height:0 → 数值块 119->38px；+ aspect-ratio:auto → 卡 181px
       三步都测过，数值始终 0 个在卡外、0 个被截断。 */
    html body #root .app-shell.player-shell .profile-page .profile-rollover-values > span {
      min-height: 0 !important;
    }

    html body #root .app-shell.player-shell .profile-page .profile-turnover-card {
      aspect-ratio: auto !important;
    }

    /* 2e. 「充值 / 提现 / 会员转账」三个按钮里的图标+文字不居中：
       第一个正，后两个整体右移约 50-60px。

       【根因，已查实】主包 JSX 是这样的：
         <button class="primary">      <svg/>  {文案}   </button>   ← 充值
         <button class="subtle-button"><svg/>  {文案}   </button>   ← 提现
         <button class="subtle-button"><svg/>  {文案}   </button>   ← 会员转账
       **文案是裸文本节点，不是 <span>**。文本节点不算元素，所以那个 svg 就是
       按钮里唯一的元素子节点，命中了 theme 里这条：

         .subtle-button svg:last-child { margin-left: auto }

       （本意是「图标在右侧时靠右」）于是图标连着文案被 auto 外边距推到右边。
       .primary 没这条，所以只有充值是正的 —— 症状完全对上。

       下面 margin-inline:0 那条就是解药。登录态实测：三个按钮偏移 0/1/0，
       svg 的 margin-left 为 0px。

       注意：theme 里还有一批 `...button span{...}` 的规则同样是空转的
       （没有 span 可命中）。别照着它们改。 */
    html body #root .app-shell.player-shell .profile-page .profile-wallet-actions button {
      justify-content: center !important;
    }

    html body #root .app-shell.player-shell .profile-page .profile-wallet-actions button > * {
      margin-inline: 0 !important;
    }

    /* 2f. 流水三个金额被截成「฿ 3,0…」，标签也断成「Complet/ed」。
       根因：.profile-turnover-detail 带着 padding-right: 335.25px —— 又一个
       按手机宽推出来的值（本意是给右侧「View details」链接留位）。它把数值区
       从 509px 压到 173px，三格各 57.75px，而金额要 64px。
       登录态实测 padding-right:150px：数值区 359px、三格各约 120px，
       三个金额全部完整、标签单行不折，右侧到链接（x=639）还留 32px 不重叠，
       卡片高度还从 137px 收到 125px。 */
    html body #root .app-shell.player-shell .profile-page .profile-turnover-detail {
      padding-right: 150px !important;
    }

    /* 2g. 订单记录里的状态徽标「Deposit failed」折成两行、下半截被切
       （needH 29 / haveH 20，父层 overflow:hidden）。改成不折行、按内容撑宽。 */
    html body #root .app-shell.player-shell .profile-page .winm-order-status-stable {
      white-space: nowrap !important;
      width: max-content !important;
      max-width: 100% !important;
      overflow: visible !important;
    }

    /* ══ 3. 钱包页 ═════════════════════════════════════════════
       3a. Withdraw / Deposit 被拉成 544px 和 587px 宽 —— 那是按钮不是横幅。
           收成 180px，右对齐，币种选择器留在左边。 */
    html body #root .app-shell.player-shell .wallet-page .wallet-vip-controls {
      grid-template-columns: 124px minmax(0, 1fr) !important;
      gap: 16px !important;
    }

    html body #root .app-shell.player-shell .wallet-page .wallet-vip-actions {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 12px !important;
      width: auto !important;
    }

    html body #root .app-shell.player-shell .wallet-page .wallet-vip-actions > * {
      flex: 0 0 auto !important;
      width: 180px !important;
      min-width: 0 !important;
    }

    /* 3b. 账本列表 1240px 高，整页远超一屏。给它自身滚动。 */
    html body #root .app-shell.player-shell .wallet-page .wallet-ledger-list {
      max-height: 260px !important;
      overflow-y: auto !important;
    }

    /* 3c. ฿32.23K / ฿75.89K / ฿0.00 被切（行高 21.85px 装不下 25px）。
       9/7 的 text-clipping 补丁只覆盖了 .balance-amount-grid > * > strong 那一层，
       是未分层规则，被 theme 的分层 !important 压过；这里放在 layer 内才生效。 */
    html body #root .app-shell.player-shell .wallet-page .balance-amount-grid strong {
      overflow: visible !important;
      line-height: 1.35 !important;
      height: auto !important;
      min-height: max-content !important;
    }
    /* ══ 4. 首页钱包摘要卡的三个按钮「压线」 ═══════════════════════
       用户最早指出的那一处：THBDeposit / THBWithdraw 的文案冲出按钮边框。

       量出来的实情：按钮 63x70，内容需要 75px 高 —— 溢出 5px，而按钮是
       overflow:visible，所以内容直接压到边框外（不是被裁，是压线）。
       成因：文案是两个嵌套 span（THB 22px + Deposit 32px = 54px），
       盒子 57px 本来放得下，却被 overflow-wrap:anywhere 拆成两行把高度撑爆。

       改法只有两条，且**刻意不动按钮宽度和金额那一列**：
       试过把按钮列从 210px 放宽到 232/252px，按钮确实宽松了，但会把左边
       「THB 2,006.20」从 164px 压到 107-129px —— 金额需要 156px，反而被挤出去。
       为修按钮牺牲余额显示是划不来的。
       改成不折行 + 标签 9px + 内边距收到 1px 后：按钮 63px 原宽不变，
       横向纵向溢出都是 0，金额那一列一个像素没动。 */
    html body #root .app-shell.player-shell .hero-grid > .wallet-summary .wallet-actions button span {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: keep-all !important;
      font-size: 9px !important;
    }

    html body #root .app-shell.player-shell .hero-grid > .wallet-summary .wallet-actions button {
      padding-inline: 1px !important;
    }

    /* ══ 5. 「总资产」卡三个小格里的文字偏上 ═════════════════════════
       用户原话：「字太上面了不是应该对中吗」。量出来确实偏上 15px，
       甚至顶出了格子的内边距。

       根因：每个格子是 2 行网格 `grid-template-rows: 18.63px 25.55px`
       + `align-content: start`，但只有第一行有内容。文字块 32px 高被塞进
       18.6px 的第一行里居中溢出 —— 又是按手机调的固定行高。
       改成行高 auto + 垂直居中。实测：内容中心 358 = 格子中心 358（偏差 1px）。 */
    html body #root .app-shell.player-shell .profile-page .profile-wallet-card .profile-balance-status > * {
      grid-template-rows: auto !important;
      align-content: center !important;
      align-items: center !important;
    }

    /* ══ 6. 活动页一屏放不下 ═══════════════════════════════════════
       改前 875px 高、超出一屏 85px。

       两处：礼盒插画 330x263px 撑着整行（右边文案只有 179px），
       以及整页单栏堆叠没用上宽度。

       先把插画压到与文案齐平（175px），再改成双栏：活动卡在左（613px），
       「More offers」与「Claim records」在右（409px）。
       实测 875 -> 742px，底部 814 <= 868（一屏），0 裁切、无横向滚动。
       没有去逐条砍内边距和间距 —— 那样能凑够高度但会很挤，用宽度更划算。 */
    html body #root .app-shell.player-shell .promotions-redesign {
      display: grid !important;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
      column-gap: 18px !important;
      row-gap: 14px !important;
      align-items: start !important;
    }

    html body #root .app-shell.player-shell .promotions-redesign > .page-heading { grid-column: 1 / -1 !important; grid-row: 1 !important; }
    html body #root .app-shell.player-shell .promotions-redesign > .red-packet-panel { grid-column: 1 !important; grid-row: 2 / 4 !important; }
    html body #root .app-shell.player-shell .promotions-redesign > .promo-other-section { grid-column: 2 !important; grid-row: 2 !important; }
    html body #root .app-shell.player-shell .promotions-redesign > .admin-panel { grid-column: 2 !important; grid-row: 3 !important; }

    html body #root .app-shell.player-shell .promotions-redesign .promo-gift-art {
      height: auto !important;
      align-self: center !important;
    }

    html body #root .app-shell.player-shell .promotions-redesign .promo-gift-art img {
      max-height: 175px !important;
      width: auto !important;
      height: auto !important;
    }

  }
}