/* ══════════════════════════════════════════════════════════════════════════
   RACING DATA · 行動端樣式（mobile.css）
   ──────────────────────────────────────────────────────────────────────────
   產物性質：**獨立樣式檔**。不修改 index.html 任何既有規則，
             由 index.html 以一行 <link> 引入即可生效。

   引入位置：**排在 index.html 最後一個 <style> 之後、</head> 之前**。
             ⚠️ 放置順序就是本檔唯一的勝出機制：同特異性時「後載入者勝」，
             因此**必須晚於所有既有 <style> 區塊**；若放在其之前 ⇒
             絕大多數覆蓋會失效 ⇒ 手機端形同沒接入。
             ℹ️ 本專案 index.html 的巨型 <style> 止於 </head> 同一行，
             故精確落點＝該行 `</style>` 與 `<script src="odds_panel.js…">` 之間。
             少數無法靠載入順序取勝的（#odg / #tourTip / #hintBubble，
             因對方是運行時動態注入或自帶 !important）已在檔內以 !important 處理。

   生效範圍：全部規則包在 @media (max-width:900px) 內 ⇒ 桌面版零影響。

   依據：2026-09-21 夜 Playwright 實測（見 发现_手机端根因_20260921.md）
         量測環境 390×844 / 360×800 / 768×1024，真實登入（role=admin）
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   斷點說明：900px 是本專案既有側邊欄抽屜斷點（index.html 原生使用）
             以下規則只在 ≤900px 生效，桌機完全不變。
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ══ 修復 1 ══════════════════════════════════════════════════════════════
     漢堡鍵永遠隱形 —— 最致命缺陷
     ──────────────────────────────────────────────────────────────────────
     【根因】index.html 中：
         @media (max-width:900px){ … .sb-hamburger{display:grid;} }   ← 先出現
         .sb-hamburger{display:none;…}                                 ← 後出現（基礎規則）
     兩者特異性同為 (0,1,0)。CSS 不使用媒體查詢優先級，
     ⇒ 後出現的基礎規則勝出 ⇒ 漢堡鍵在手機上恆為 display:none。

     【修法】用更高特異性（多一個元素選擇器）強制顯示。
             選 header .sb-hamburger 的理由：漢堡鍵的父層正是 <header>，
             無需依賴 id 或 !important。
     也一併放大到 44×44 —— Apple HIG / Material 的最小可點尺寸。
     ══════════════════════════════════════════════════════════════════════ */
  header .sb-hamburger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    touch-action: manipulation;   /* 消除 300ms 點擊延遲 */
  }
  header .sb-hamburger svg {
    width: 20px;
    height: 20px;
  }

  /* ══ 修復 2 ══════════════════════════════════════════════════════════════
     側邊欄：既有抽屜機制是好的（實測關閉態 240px + translateX(-256px) 正確）
     此處只做三件事：確保不被漢堡鍵修復影響、放大觸控項、加安全區。
     ══════════════════════════════════════════════════════════════════════ */
  .sidebar {
    /* 既有的 translateX 位移量是「-100% - 16px」，與 left:16px 對應。
       這裡不改位移邏輯，只保證寬度在小屏上不超過視窗 */
    max-width: calc(100vw - 32px);
    /* 手機上抽屜要能縱向滾動 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .sb-item {
    /* 放大到可穩定點擊的高度 */
    min-height: 44px;
    padding: 0 0.75rem;
  }
  /* 抽屜打開時鎖住背景滾動（避免滑動穿透） */
  body:has(.sidebar.drawer-open) {
    overflow: hidden;
  }

  /* ══ 修復 3 ══════════════════════════════════════════════════════════════
     findings 跑馬燈 —— 實測寬 2894px（超出 390 畫面 2361px）
     ──────────────────────────────────────────────────────────────────────
     【根因】.findings-row{overflow:hidden} 遮住了視覺溢出，
             但 .findings-track{width:max-content} 仍把節點樹撐到 2894px，
             進而讓 innerWidth 被撐大到 431（≠390），整頁寬度計算失真。
     【修法】手機上關閉動畫、還原成「可橫向滑動」的原生手感。
             對齊機制改由 scroll-snap 提供，比無限動畫更省電、不誤觸。
     ══════════════════════════════════════════════════════════════════════ */
  .findings-row {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* ★ 關鍵：明確寬度，否則內部 max-content 仍會把外層撐開 */
    width: 100%;
    max-width: 100%;
  }
  .findings-row::-webkit-scrollbar {
    display: none;
  }
  .findings-track {
    /* ★ 關鍵修正：不能改成 width:auto
       初版改成 auto 後，track 被壓成 358px 而內部 .findings-copy 仍 1447px，
       變成「內容超寬但 overflow:visible」= 溢出到畫面外且不可滑（比修前更糟）。
       正解：**保留 width:max-content**（讓子項橫向排列不折行），
             只關掉動畫；可滑性由父層 .findings-row 的 overflow-x:auto 提供。 */
    width: max-content;
    animation: none !important;
  }
  .findings-copy {
    /* 這一層「本來就該」是全部卡片的總寬（1447px），
       只要它待在 .findings-row 的可滑容器內就是正確的。
       這裡只確保它不被壓縮、也不主動撐破父層。 */
    flex: 0 0 auto;
    min-width: 0;
  }
  .findings-copy[aria-hidden="true"] {
    /* 無縫循環用的視覺副本，動畫關掉後不再需要佔位 */
    display: none;
  }
  .findings-row .finding-card {
    flex: 0 0 min(230px, calc(100vw - 96px));
    scroll-snap-align: start;
  }

  /* ══ 修復 4 ══════════════════════════════════════════════════════════════
     表格：1150px 硬塞進手機
     ──────────────────────────────────────────────────────────────────────
     【根因】.rv-tablewrap{table min-width:1150px} 本身有 overflow-x:auto，
             但父層鏈缺少寬度約束 ⇒ 實測 scrollers:[] ⇒ 沒有產生可滑容器
             ⇒ 賠率表右側欄位永遠看不到、也滑不到。
     【修法】明確約束父層鏈寬度 + 提高滑動體驗。表格仍維持可讀寬度，
             但使用者能左右滑動看到全部欄位。
     ══════════════════════════════════════════════════════════════════════ */
  /* 4.1 先把「容器鏈」的寬度釘死在視窗內 —— 這是讓 overflow-x:auto 生效的關鍵
       ⚠️ 修正：初版對 #app-main/.container 下 overflow-x:hidden，
       但那會把「內部可滑容器」的滾動鏈切斷。改為只約束寬度，不動 overflow。 */
  #app-main,
  .container {
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* 4.2 表格外框：明確可橫滑 */
  .rv-tablewrap,
  .ev-tabwrap,
  .et-wrap,
  [class*="tablewrap"],
  [class*="tabwrap"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 提示可滑動：右側漸變遮罩 */
    background-image:
      linear-gradient(to left, rgba(var(--accent-rgb), 0.10), transparent 24px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 24px 100%;
  }
  /* 4.3 表格本身：保留既有 min-width（欄位不壓縮、不換行），靠滑動查看 */
  .rv-tablewrap table {
    /* 繼承既有 min-width:1150px，不覆蓋 —— 覆蓋會導致欄位擠壓不可讀 */
    margin: 0;
  }
  /* 4.4 ⭐ 其餘寬表格（實測各視圖最寬節點）：
        result=.rv-tablewrap table 1150px / speed=.sp-table 534px /
        race・odds=.race-table 698px / localpred・livewatch=#odg 600px
        —— 這些「本身就該比螢幕寬」，正解是**讓它們的容器可橫滑**，
        而不是把表格壓窄（壓窄＝欄位不可讀）。
        以下把已知的表格外框類別全部納入可橫滑清單。 */
  .sp-table-wrap,
  .race-table-wrap,
  .ev-wrap,
  [class$="-table-wrap"],
  [class*="-table-wrap"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* speed 視圖：.sp-table 有 min-width 訴求時不壓縮 */
  .sp-table,
  .race-table {
    /* 保持可讀：不強制縮到 100% 以下，交由外框滑動 */
    min-width: max-content;
  }

  /* ══ 修復 5 ══════════════════════════════════════════════════════════════
     頂部工具列：桌面版整條塞進 390px（截圖顯示面板被切、卡片被切）
     【修法】改為縱向堆疊 + 減少內距，並讓 sticky 列不遮住內容。
     ══════════════════════════════════════════════════════════════════════ */
  .sticky-bar {
    /* 讓出頂部空間，避免蓋住第一張卡片 */
    padding-bottom: 0.4rem;
  }
  .controls-row {
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
  }
  .controls-left {
    /* 允許換行堆疊，而不是被壓扁 */
    width: 100%;
    gap: 0.3rem;
  }
  /* 觸控目標放大（沿用既有 visual 樣式，只調尺寸） */
  .grid-btn, .view-btn, .sort-btn {
    min-height: 36px;
    padding: 0.4rem 0.65rem;
    touch-action: manipulation;
  }
  /* 系列標籤在手機上太佔位，縮小間距 */
  .section-title {
    margin: 0 0.25rem 0 0.3rem;
  }

  /* ── 5.2 ⭐⭐ 頂欄（header）在手機上的重排 ───────────────────────────────
     第 15 輪「逐一隱藏」隔離實驗定位到 innerWidth 被撐大的唯一元兇：
       隱藏 .topbar-actions        → innerWidth 415 ⇒ 390 ✅
       隱藏 a#dl-app-btn           → innerWidth 415 ⇒ 390 ✅
       隱藏 #mb-chip / #logout-btn → 不變 ❌
     ⇒ 是「⬇ 下載客戶端」這顆 <a> 把 header 右緣推到 x=415。

     header 的原始結構（index.html 第 1676–1691 行）：
       <header>
         <button.sb-hamburger>
         <div.stat-pills>        ← 三顆統計藥丸（總記錄／篩選後／數據更新）
         <div.topbar-actions>    ← 下載客戶端 + 登出，且 margin-left:auto 靠右
       </header>

     ⚠️ 第一版修法錯誤：我給了 .topbar-actions{flex-wrap:wrap}。
        結果是「動作區自己」在剩餘的窄縫裡折行 ⇒ 兩顆按鈕被壓成縱排窄條
        （驗收截圖 f_B_390_cards.png 可見「會員：專業版」「登出」變直排），
        雖解決了溢出，但把 UI 弄得很醜。

     ✅ 正解：讓 **header 這一層** 可折行，動作區作為整體落到第二行並靠左展開；
        動作區自己**不要**折行（內部保持橫排），但允許其子項收縮截斷。
     ══════════════════════════════════════════════════════════════════════ */
  header {
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
    row-gap: 0.4rem;
  }
  /* 統計藥丸區：可壓縮、允許其自身折行，不要撐破 */
  .stat-pills {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  /* 動作區：作為整體換到第二行；預設佔滿整行、靠左（原本是 margin-left:auto 靠右） */
  .topbar-actions {
    flex: 1 1 100%;          /* ★ 整行：逼它換到 header 的第二行 */
    flex-wrap: nowrap;       /* ★ 內部保持橫排，不再把按鈕壓成直排 */
    margin-left: 0;          /* 覆蓋原 margin-left:auto */
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .topbar-actions > * {
    /* 允許收縮：預設 min-width:auto 會以內容寬為下限，這裡必須歸零 */
    min-width: 0;
    flex: 0 1 auto;
  }
  #dl-app-btn {
    /* 可壓縮 + 文字可截斷，instead of 撐破 header */
    min-width: 0;
    max-width: 100%;
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 同排的其他動作鈕也一併允許收縮 */
  #mb-chip,
  #logout-btn {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
  }
  /* ≤380px（含 360 小屏）：三顆動作鈕再收一檔，避免「登出」被折成兩行 */
  .topbar-actions > * {
    font-size: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    letter-spacing: 0;
  }
  #dl-app-btn,
  #mb-chip,
  #logout-btn {
    white-space: nowrap;
  }

  /* ══ 修復 6 ══════════════════════════════════════════════════════════════
     賠率浮層 #odg：實測寬 600px、關閉鍵座標 x=576（在 390 畫面外，關不掉）
     —— 這是既有缺陷，在手機上被放大成致命問題。

     ⚠️⚠️ 關鍵根因（2026-09-21 第 13 輪實測才定位，前一版漏了）：
       client/odds_panel.js 第 186 行以**運行時注入**的方式建 <style id="odg-style">，
       並在第 253 行 document.head.appendChild(st) —— 因此它**永遠晚於 mobile.css 載入**。
       該規則含： `#odg{ … min-width:600px; max-width:96vw; … }`
       選擇器同為 #odg（特異性 1,0,0），後載入者勝。

       而 CSS 規範中 **min-width 的優先級高於 max-width**：
         width:auto; min-width:600px; max-width:calc(100vw-24px)
         ⇒ 最終寬度 = max(min-width, min(max-width, 可用寬)) = 600px
       所以前一版只覆寫 width/max-width，**min-width:600px 仍原封不動**
       ⇒ 浮層實際仍 600px 寬、right 座標 610，把 documentElement.scrollWidth
          從 390 撐到 415（量到的 innerWidth 415 就是這樣來的）。

       ⇒ 修法：必須**一併把 min-width 壓到 0**（用 !important 蓋過後載入的注入樣式）。
     ══════════════════════════════════════════════════════════════════════ */
  #odg,
  .odg-embed {
    /* ★ 先解除 min-width:600px 這道鎖，width/max-width 才有意義 */
    min-width: 0 !important;
    /* 寬度自適應視窗，保證右上角的 ↻ – ✕ 一定在畫面內可點 */
    width: min(600px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
    /* 浮窗定位若靠 left，改成左右都貼齊，避免超出 */
    left: 12px !important;
    right: 12px !important;
  }
  /* 浮層本體（#odg）在手機上高度收斂，避免遮死內容 */
  #odg {
    max-height: 82vh !important;
    min-height: 0 !important;
  }
  /* 浮層內寬表（wp-tbl 576px 等）：交給 .odg-body 橫滑，不要撐破 */
  #odg .odg-body {
    overflow: auto !important;
  }
  /* 內嵌版（.odg-embed）維持佔滿可用寬度 */
  .odg-embed {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 1rem;
  }
  /* 內嵌版在手機上縮短高度，避免完全遮住內容 */
  .odg-embed {
    min-height: 320px;
    height: 60vh;
  }

  /* ══ 修復 7 ══════════════════════════════════════════════════════════════
     登入頁（實測**已經是好的**，此處只做微調，不重做）
     —— 保留既有深色玻璃質感與居中品牌，僅確保小屏（≤360）不擠壓。
     ══════════════════════════════════════════════════════════════════════ */
  .auth-split {
    /* 既有規則已設 max-width:520px，此處只保證小屏留白 */
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .auth-card input,
  .auth-card button {
    /* 觸控目標放大（iOS 上 <16px 會觸發自動放大頁面） */
    font-size: 16px !important;
    min-height: 46px;
  }

  /* ══ 修復 8 ══════════════════════════════════════════════════════════════
     導覽浮層在手機上遮住內容
     ──────────────────────────────────────────────────────────────────────
     ⚠️ 修正歷程：初版把它改成「底部固定」——驗收截圖顯示**更糟**
     （底部正好壓住主要內容，且它是 fixed 不隨頁面消失）。
     正解：維持頂部，但改為「貼齊頂部 + 全寬 + 受控高度」，
           讓它像通知條一樣不佔據內容區中段。

     ℹ️ 既有規則（index.html 第 261 行）在 ≤600px 時把 #tourTip 改成
        「left:8px!important; right:8px; bottom:8px; top:auto!important」= 底部條狀。
        本檔載入較晚且特異性相同 ⇒ 以 !important 覆蓋回頂部。
        ⛔ 若未來想改回底部，須確認它不會壓住 #app-main 的主要內容。
     ══════════════════════════════════════════════════════════════════════ */
  #tourTip {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    z-index: 9000 !important;
    box-sizing: border-box;
  }
  /* 導覽的「下一步」按鈕放大到可穩定點擊 */
  #tourTip button {
    min-height: 40px;
    touch-action: manipulation;
  }

  /* ══ 修復 8.2 ═══════════════════════════════════════════════════════════
     #hintBubble（V7.26.9.6 任務B 的「首次進入提示氣泡」）
     ──────────────────────────────────────────────────────────────────────
     第 15 輪隔離實驗順帶量到：precise 視圖下它是 fixed、寬 399px、右緣 407
     ⇒ 超出 390 視窗 17px。它的既有窄屏規則（index.html 第 1148 行）只寫到
       max-width:none，沒有把左右釘進視窗，故仍會溢出。
     同 #tourTip 的處理原則：貼齊左右 + 受控高度，不佔內容中段。
     ══════════════════════════════════════════════════════════════════════ */
  #hintBubble {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }

  /* ══ 修復 9 ══════════════════════════════════════════════════════════════
     iOS 安全區：底部工具列/按鈕不被 Home Indicator 遮住
     ══════════════════════════════════════════════════════════════════════ */
  #app-main {
    /* 用 padding 讓最後一張卡片不貼底 */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* 頂部瀏海（橫向時） */
  .sticky-bar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* ══ 修復 10 ═════════════════════════════════════════════════════════════
     其他既有溢出來源（實測溢出元素 73 個，逐一收斂）
     ══════════════════════════════════════════════════════════════════════ */
  /* 事件文字欄位 min-width:420px 在 390 畫面必然溢出 */
  .ev-table td.ev-text {
    min-width: 0;
    max-width: calc(100vw - 140px);
    white-space: normal;
    word-break: break-word;
  }
  /* 區間面板 min-width:320px —— 在 360 屏上溢出 */
  .rng-panel {
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 24px);
  }
  /* 所有浮層 modal 統一不超出視窗 */
  .cl-modal,
  #confirm-modal,
  #admin-modal,
  .lm-modal {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }

  /* ══ 收尾：全域防護 ═════════════════════════════════════════════════════
     逐一修可能漏；此處兜底「任何元素不得超出視窗」。
     ⛔ 不能用 * { max-width:100% } —— 會破壞表格/跑馬燈等刻意超寬的可滑元素。
        因此只對「非可滑容器」生效。
     ══════════════════════════════════════════════════════════════════════ */
  img,
  video,
  canvas,
  svg,
  table {
    max-width: 100%;
  }
  /* 但表格要保留自身 min-width 以便橫滑 —— 覆蓋上面那條 */
  .rv-tablewrap table,
  [class*="tablewrap"] table {
    max-width: none;
  }
}