/* guest-desktop-nav-nowrap-v4-20260919
   访客态（未登录）电脑版顶栏：泰文等语言下导航文字逐字竖排。

   现象（用户 Safari，窗口约 975px，泰文）：หน้าหลัก / เกม / โปรโมชั่น / ศูนย์ช่วยเหลือ
   每个字一行竖着排，「首页」高亮框被撑到 137px 高、压到下面的轮播图上。

   根因（浏览器面板实测，975px）：
   1. 顶栏 .guest-topbar 是三列网格：Logo 184px / 导航 272px / 右侧按钮 383px。
      四个导航按钮挤在 272px 里，每个只分到约 63px，扣掉左右各 16px 内边距，
      文字区只剩 9–27px。
   2. 文字带着 overflow-wrap:anywhere。泰文、缅文、老挝文、高棉文词与词之间
      没有空格，浏览器找不到合适的断点，就退化成「任意字符处都能断」——逐字断行。
      英文、中文不受影响，所以英文界面看不出来。
   3. 电脑浏览器不理 <meta name=viewport>，所以 9/17 上线的平板缩放方案
      （761–1099 按 760/1100 排版）对「电脑上开的窄窗口」不起作用，
      这个宽度段仍是无人区（见 player-tablet-gap-760-1100 记忆）。
      泰文不折行时一整行需要约 1013px，975px 放不下。

   做法：
   - 所有宽度：导航文字不许断行（nowrap + keep-all）。≥1100 一行放得下，只需这条。
   - 901–1099：顶栏改两行 —— 第一行 Logo + 语言/登录/注册，第二行导航独占整行居中。
     这样不管哪种语言、多长都放得下。低于 901 导航本来就隐藏（走手机顶栏），不受影响。
   - 两行后原来靠固定 88px 高 + 垂直居中留出的上边距没了，补 padding-top。

   实测（浏览器面板，访客态，6 种语言 zh/en/th/my/lo/km 逐一切换）：
     901 / 975 / 1099：两行，四个按钮都是 44px 等高，无溢出、无互压、不压轮播、无横向滚动
     1100 / 1280：一行，44px，无碰撞
   放在 @layer vip-source-lock 内（分层 !important 优先于未分层）。 */
@layer vip-source-lock {
  html body #root .guest-shell .guest-topbar .guest-desktop-nav > *,
  html body #root .guest-shell .guest-topbar .guest-desktop-nav > * * {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  @media screen and (min-width: 901px) and (max-width: 1099.98px) {
    html body #root .guest-shell .guest-topbar {
      grid-template-columns: auto minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      row-gap: 10px !important;
      height: auto !important;
      min-height: 0 !important;
      padding-top: 16px !important;
      padding-bottom: 12px !important;
    }

    html body #root .guest-shell .guest-topbar > .brand {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    html body #root .guest-shell .guest-topbar > .guest-actions {
      grid-column: 2 !important;
      grid-row: 1 !important;
      justify-self: end !important;
    }

    html body #root .guest-shell .guest-topbar > .guest-desktop-nav {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      justify-self: center !important;
      width: auto !important;
      max-width: 100% !important;
    }
  }

  /* ── v2：访客态「游戏」页厂商名被省略号截断（≥901px） ─────────────────
     9/7 已在登录态修过同一个问题（player-desktop-text-clipping-fix-v1），
     但那条规则挂在 .app-shell.player-shell 下，访客态是 .guest-shell，没覆盖到。
     975px 实测 8 个名字被截（SABA Sports Tran… / PP Live Casino T… 等，need 137–171 / have 133–138）。

     放开成最多两行。只放开会让同一排卡片 131/149px 高低不齐、封面图上下错开，
     所以同时让标题统一预留两行高度（min-height:2.4em），单行名字垂直居中。
     实测：975 四列卡片全部 149px 等高、每排封面图顶端对齐；
     1100/1366/1920 的 62px 紧凑卡与 860 单列都 0 截断、无横向滚动。 */
  @media screen and (min-width: 901px) {
    html body #root .guest-shell .provider-section .provider-heading strong {
      white-space: normal !important;
      line-height: 1.2 !important;
      min-height: 2.4em !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      align-content: center !important;
    }

    html body #root .guest-shell .provider-section .provider-heading > div {
      align-items: center !important;
    }
  }


  /* ── v3：访客首页右侧「注册 / 登录」卡悬在半空（≥901px） ──────────────────
     用户截图（约 1000px 宽）：左边轮播约 250px 高，右边卡片只有 132px，
     垂直居中悬在中间，上下都空着。轮播按 2.28:1 比例随宽度长高，
     1440 宽时轮播 425px、卡片仍是 132px，差得更远。

     根因：guest-desktop-auth-layout-refine-v12-20260823.css 在 ≥901px 把
     .guest-join-card 钉成 height/min-height/max-height:132px + align-self:center。
     它前面的 v11 本来写的是 height:100%（撑满），被 v12 盖掉了。

     改成撑满网格行高。卡片本身是网格且已设 align-content:center，
     两个 82px 的按钮会自己留在正中，不会被拉长。
     实测 901/1000/1180/1440/1920：卡片高度 = 轮播高度（207/246/318/425/467），
     顶底对齐，按钮垂直居中，无横向滚动。 */
  @media screen and (min-width: 901px) {
    html body #root .guest-shell .hero-grid > .guest-join-card {
      align-self: stretch !important;
      height: auto !important;
      max-height: none !important;
      min-height: 0 !important;
    }
  }


  /* ── v4：顶栏右侧三个按钮高低不一（≥901px） ────────────────────────
     用户问「顶部栏按钮可以吗」。量出来三个按钮规格各不相同，只是中线对齐，
     所以看起来一个比一个矮：
       语言 Lang TH      44px / 圆角 12 / 16px 400
       登录 เข้าสู่ระบบ    40px / 圆角 10 / 14px 900
       注册 สมัครสมาชิก   34px / 圆角 9  / 16px 800
     而下面一排导航统一是 44px / 圆角 12。
     三个都统一成导航的规格（44px、圆角 12），登录与注册字号统一 15px / 800。
     实测 901/1000/1100/1280/1920 × 6 种语言：三个按钮 44px、中线一致、
     无溢出、单行布局时不与导航碰撞、无横向滚动。 */
  @media screen and (min-width: 901px) {
    html body #root .guest-shell .guest-topbar .guest-actions {
      align-items: center !important;
    }

    html body #root .guest-shell .guest-topbar .guest-actions > .language-select,
    html body #root .guest-shell .guest-topbar .guest-actions > .guest-login-button,
    html body #root .guest-shell .guest-topbar .guest-actions > .primary {
      box-sizing: border-box !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      border-radius: 12px !important;
    }

    html body #root .guest-shell .guest-topbar .guest-actions > .guest-login-button,
    html body #root .guest-shell .guest-topbar .guest-actions > .primary {
      font-size: 15px !important;
      font-weight: 800 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
    }
  }

  /* ── v5：登录态 901–1099 三处（20260919 逐页 × 5 宽度 × 泰/缅/英 实测） ──
     这个宽度段没有任何桌面补丁生效（polish v8、friends v2 都只在 ≥1100），
     登录态 10 个页面里只有下面三处坏，其余 7 页全部无溢出、无截字：
     1. 首页钱包卡「THBWithdraw」按钮横溢 11px（英文）——照搬 polish v8 第 4 节。
     2. 会员转账页：.transfer-layout 两列，表单写死 590px，右边规则栏在 975
        只剩 92px，标题宽 42px、正文宽 22px，每个字一行竖排。改单列，规则栏放到
        表单下面（与手机一致）。
     3. 好友页：整页是按 352px 手机调的（头部 3 列放 4 个孩子，「Friend requests」
        按钮被压成 48px；卡片里「Ready to transfer」只有 3px）。把
        player-friends-desktop-layout-v2 的桌面排法原样延伸到 901–1099。 */
  @media screen and (min-width: 901px) and (max-width: 1099.98px) {
    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;
    }

    html body #root .app-shell.player-shell .transfer-layout {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #root .app-shell.player-shell .transfer-layout > .transfer-form {
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    /* 好友页容器在这个宽度被 max-width:430px 卡成手机宽，≥1100 由别的规则放到 1100。
       不放开的话头部一行放不下，返回键被 flex 压到 16px。 */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page {
      width: 100% !important;
      max-width: 100% !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header > .friend-vault-page-back {
      flex: 0 0 auto !important;
    }

    /* ↓ 以下为 player-friends-desktop-layout-v2-20260910.css 原文（仅改了断点） */

    /* ── 头部：单行，不换行 ───────────────────────────────── */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header {
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
      flex-wrap: nowrap !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header > * {
      margin: 0 !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-box {
      flex: 0 0 auto !important;
      width: auto !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-asset-pill {
      flex: 0 0 auto !important;
      width: auto !important;
      margin-left: auto !important;
      order: 9 !important;
    }

    /* ── hero：收成一条标题横幅，底图作背景 ─────────────────── */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-hero {
      height: auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 12px 20px !important;
      display: flex !important;
      align-items: center !important;
      border-radius: 16px !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-panel-art {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      z-index: 0 !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-hero-title {
      position: relative !important;
      z-index: 1 !important;
      width: auto !important;
      height: auto !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
    }

    /* 两条藤蔓装饰各 382px，横屏下只会把标题挤出盒子 */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-flourish {
      display: none !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-title-shield {
      flex: 0 0 auto !important;
      width: 44px !important;
      height: 44px !important;
    }

    /* 见文件头的取舍说明 */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-trusted-deck {
      display: none !important;
    }

    /* ── 列表行：5 个流内孩子排成一行 ───────────────────────── */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row {
      grid-template-columns: 54px 54px minmax(0, 1fr) auto auto !important;
      align-items: center !important;
      column-gap: 14px !important;
      row-gap: 0 !important;
      height: auto !important;
      min-height: 64px !important;
      padding: 9px 18px !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main {
      grid-template-rows: auto auto !important;
      row-gap: 2px !important;
      text-align: left !important;
    }

    /* 行高等于字号 + overflow:hidden，"Add reci_p_ient" 的下沉笔画会被切 */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main > strong,
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row-main > small {
      overflow: visible !important;
      line-height: 1.35 !important;
      height: auto !important;
    }

    /* ── 底部添加栏：标题与输入行并排 ───────────────────────── */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      padding: 12px 18px !important;
      grid-template-rows: none !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .panel-heading {
      position: relative !important;
      inset: auto !important;
      width: auto !important;
      height: auto !important;
      flex: 0 0 auto !important;
      justify-content: flex-start !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .friend-vault-add-row {
      flex: 1 1 auto !important;
      width: auto !important;
    }
    /* ── v2 补三处（都是登录态实测出来的，v1 时没有量测能力） ────────
       1. 列表行的「Add friend」按钮宽度写死 54px，内容要 58px → 横向压出 6px
       2. 头部「Friend requests」按钮是 4 列网格（18/48/21/12px），文案挤在
          48px 那一列，折成三行，"s" 单独掉到第三行
       3. 底部添加栏的 .panel-heading 带着 transform: translateX(-58.7px)
          —— 又一个手机端偏移。它把标题推到容器外 58px，左边第一个字母被
          页面边缘切掉（显示成「dd friend」）。left/margin 都改了没用，
          必须 transform:none。 */
    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-row > button {
      width: auto !important;
      min-width: max-content !important;
      padding-inline: 10px !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-header button:not(.friend-vault-page-back) {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: auto !important;
      min-width: max-content !important;
      height: auto !important;
      padding: 8px 12px !important;
      white-space: nowrap !important;
      grid-template-columns: none !important;
    }

    html body #root .app-shell.player-shell .friends-page.friend-vault-page .friend-vault-add-dock .panel-heading {
      transform: none !important;
      left: 0 !important;
      right: auto !important;
      top: auto !important;
      margin: 0 !important;
    }

  
  }
}