/* @version 1.62.0 2026-08-17 量級清單改成一整排流動排列(.sc-flow / .sc-chip):
   十六個量級各佔一列太長, 要捲動才看得完, 而那些只是參考資訊。
   人數用 .sc-n 縮小 -- 主體是量級名稱, 人數是附註, 兩者同樣大小會互相干擾。*/
/* @version 1.61.0 2026-08-16 新增 .sc-item--static: 給「純顯示、不能點」的量級清單用
   (WT 官網匯入的量級清單 v2.13.0 起沒有勾選框了)。
   ⚠ 不要直接改 .sc-item -- 那個 class 世排匯入面板(world_ranking.php)也在用,
     而那邊的每一列都還是勾選框、確實可以點。.sc-toolbar / .sc-group-head button
     同理, 全都還在用, 不要因為 WT 匯入面板不用了就刪掉。*/
/* @version 1.60.0 2026-08-11 區塊外觀改成「圓角細框 + 標題壓在上緣」(fieldset legend
   那種樣子), 與 mySpace(net4p.com)的「篩選場地」一致。原本是白底陰影、標題在框內。
   ⚠ 標題用負的上邊距上移, 不是 absolute -- absolute 不佔空間, 標題一換行就會壓到內容,
     而各區塊標題長度差很多。標題的白色背景是關鍵, 靠它蓋掉後面那段框線。 */
/* @version 1.59.0 2026-08-10 按鈕統一: <button> 與 a.btn-secondary 長得一模一樣
   (display / font-family / line-height / vertical-align 一次釘死)。修掉兩個毛病 --
   a.btn-secondary 是 inline, 上下 padding 撐不開行高所以往下溢出壓到表格;
   <button> 預設不繼承頁面字型, 跟 <a> 排在一起就是有大有小。
   間隔改由 HTML 的一個空白字元控制, .inline-form 不再用 flex + gap
   (flex 會吃掉純空白的文字節點, 在 HTML 空一格根本沒有效果)。
   同時移除從未定義過的 .btn-gap。 */
/* @version 1.58.0 2026-08-07 戰績列表: 對手國碼的小字樣式 */
/* @version 1.57.0 2026-08-01 各國人數統計; 管理按鈕之間的間距 */
/* @version 1.56.0 2026-07-31 WT 官網選手頁連結的小圖示 */
/* @version 1.55.0 2026-07-30 勝率緊貼戰績圖示, 不留左邊距 */
/* @version 1.54.0 2026-07-30 勝率改為姓名後方小字; 臨時碼淺灰 */
/* @version 1.52.0 2026-07-30 窄欄位不換行, 避免表頭被拆成單字 */
/* @version 1.51.0 2026-07-30 說明氣泡: 行內清單樣式 + 手機定位改為 fixed */
/* @version 1.50.0 2026-07-29 選手查詢: 可點擊變更的欄位樣式 */
/* @version 1.49.0 2026-07-29 變更 Member ID: 勾選項樣式 */
/* @version 1.48.0 2026-07-29 變更 Member ID 視窗樣式 */
/* @version 1.47.0 2026-07-29 說明氣泡的「?」改為上標位置並縮小 */
/* @version 1.46.0 2026-07-29 備援匯入區塊(details/summary)樣式 */
/* @version 1.45.0 2026-07-29 新增賽事表單樣式 */
/* @version 1.44.0 2026-07-29 WT官網匯入: 量級勾選清單樣式 */
/* @version 1.44.0 2026-08-10 按鈕統一: <button> 與 a.btn-secondary 長得一模一樣
   (display/font-family/line-height/vertical-align 一次釘死)。修掉兩個毛病 --
   <a class=btn-secondary> 是 inline 所以往下溢出壓到表格; <button> 不繼承頁面字型
   所以跟 <a> 排在一起有大有小。間隔改由 HTML 的空白字元控制, .inline-form 不再用
   flex + gap (flex 會吃掉純空白節點, 在 HTML 空一格根本沒效果)。 */
/* @version 1.43.0 2026-07-29 說明氣泡(.help-dot / .help-pop): 桌機滑鼠移上去顯示, 手機點擊顯示 */
/* @version 1.27.0 2026-07-27 手機版隱藏導覽列的系統名稱; 選手查詢的篩選改分兩列 */
/* @version 1.42.0 2026-07-29 修正可編輯儲存格蓋掉整列底色; 籤號寬50; 世排也加TPE底色 */
/* @version 1.41.0 2026-07-29 選手名單: 籤號置中、TPE淺紅底、可排序表頭 */
/* @version 1.40.0 2026-07-28 選手姓名後的戰績/影片小圖示 */
/* @version 1.39.0 2026-07-27 賽事選單旁的 WT官網 連結樣式 */
/* @version 1.38.0 2026-07-27 人工指定清單顯示量級 */
/* @version 1.37.0 2026-07-27 籤號欄: 佔到兩個籤位時標紅 */
/* @version 1.36.0 2026-07-27 戰績表格手機版欄寬調整; 世排手機版只留四欄 */
/* @version 1.35.0 2026-07-27 英文字體改用 Georgia(中文仍用系統黑體) */
/* @version 1.34.0 2026-07-27 世排資料手機版隱藏「國家」欄 */
/* @version 1.33.0 2026-07-27 整列可點的樣式改為共用(世排資料也用) */
/* @version 1.32.0 2026-07-27 未登入時選手名單整列可點的樣式 */
/* @version 1.31.0 2026-07-27 比賽紀錄的影片欄縮窄(只放 ▶ 圖示) */
/* @version 1.30.0 2026-07-27 表格表頭一律置中, 新增 .col-c 置中欄位 */
/* @version 1.29.0 2026-07-27 行內編輯的儲存格強制吃掉貼上帶進來的樣式 */
/* @version 1.28.0 2026-07-27 選手查詢的篩選: 桌機版五個欄位排成一列(姓名縮窄),
   手機版維持直向堆疊 */
/* @version 1.27.0 2026-07-27 手機版隱藏導覽列的系統名稱與版本號; 選手查詢篩選改版 */
/* @version 1.26.0 2026-07-27 新增 .link-like(看起來像連結的按鈕) */
/* @version 1.25.0 2026-07-27 比賽紀錄視窗: 手機版縮小結果/影片欄, 空間讓給對手姓名 */
/* @version 1.24.0 2026-07-27 選手查詢: 比賽紀錄改每筆一列、TPE整列淺紅底、
   手機版只留姓名/性別/國家/世排 */
/* @version 1.23.0 2026-07-27 選手查詢頁的樣式(固定表頭、可拖曳欄位、參賽標籤) */
/* @version 1.22.0 2026-07-26 比賽紀錄的青方/紅方標籤樣式 */
/* @version 1.21.0 2026-07-26 選手名單的籤號欄樣式 */
/* @version 1.20.0 2026-07-26 對戰表勾選選手時的標示樣式 */
/* @version 1.19.0 2026-07-26 選手紀錄的賽事名稱改為連結樣式 */
/* @version 1.18.0 2026-07-26 人工指定選手: 新增選手到主檔的小表單與強制改指定樣式 */
/* @version 1.17.0 2026-07-26 賽事下拉選單: 尚未舉辦的賽事以灰色顯示 */
/* @version 1.16.0 2026-07-26 匯入對戰表卡片: 自訂的檔案選擇按鈕與分隔線樣式 */
/* @version 1.15.0 2026-07-26 登入畫面改為置中; 導覽列的系統版本號樣式 */
/* @version 1.14.0 2026-07-26 新增導覽列右側的管理員登入狀態、登入頁與
   「僅供瀏覽」提示的樣式 */
/* @version 1.13.0 2026-07-26 影片連結的字體大小改為獨立設定(原本繼承表格的),
   方便單獨調整「▶ 影片」的大小 */
/* @version 1.12.0 2026-07-26 選手紀錄視窗的標題改為 flex 排版: 量級在最左、
   日期在最右、賽事名稱佔中間; 新增名單表格的「紀錄」按鈕樣式 */
/* @version 1.11.0 2026-07-26 選手紀錄視窗的表格改為固定欄寬(不同賽事之間對齊),
   對手姓名吃掉剩餘寬度、結果與影片靠右; 新增「尚未舉辦/尚無對戰表」的樣式 */
/* @version 1.10.0 2026-07-25 新增「選手對戰紀錄」視窗樣式; 對戰表上的選手方框
   改為手型游標並加上滑鼠移過的高亮(現在點下去會開啟該選手的紀錄) */
/* @version 1.9.0 2026-07-25 上方導覽列改為固定在畫面頂端(position:sticky),
   捲動長對戰表時選單不會跑掉; z-index 設 500, 低於場次編輯視窗(900) */
/* @version 1.8.0 2026-07-25 滑鼠移過的高亮效果改為只作用在可點擊的場次編號徽章上,
   選手方框(.bracket-athlete)明確設為一般游標, 避免看起來像可以點 */
/* @version 1.7.0 2026-07-25 新增對戰表場次編輯視窗(match-editor)與場次編號
   顏色圖例(mno-legend)樣式; 對戰表上的場次群組加上滑鼠移過的高亮效果 */
/* @version 1.6.0 2026-07-25 新增import-methods-row樣式(兩種匯入方式左右並排, 窄螢幕自動改回上下堆疊) */
/* @version 1.5.0 2026-07-24 新增PDF鎖定標示(badge-locked)與PDF匯入預覽狀態標籤樣式 */
/* @version 1.3.3 2026-07-22 新增table-scroll樣式, 讓表格在窄螢幕下可橫向捲動而不撐破版面 */
/* @version 1.3.0 2026-07-22 新增標題斷行、下拉選單防溢出、SVG對陣圖捲動容器樣式;
   移除已不再使用的舊版對陣表區塊樣式 */
/* @version 1.0.0 2026-07-22 初始建立 */

* { box-sizing: border-box; }
body {
    /* 英文用 Georgia(襯線), 中文仍用系統黑體 --
       字型堆疊是「由左往右, 找得到該字元就用」, 所以 Georgia 只會吃到它有的
       英數字元, 中文會落到後面的 Noto Sans TC / 微軟正黑體。 */
    font-family: Georgia, "Times New Roman", "Noto Sans TC", "Microsoft JhengHei", serif;
    background: #fff;   /* 標題壓在框線上之後, 灰底跟白色標題底不搭 -- 整片改白 */
    color: #222;
    margin: 0;
}
.topnav {
    /* 固定在畫面頂端: 對戰表很長, 捲動時上方選單要一直看得到 */
    position: sticky;
    top: 0;
    z-index: 500;   /* 低於場次編輯視窗(.match-editor 的 900), 才不會蓋住彈出視窗 */
    background: #1f2937;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.topnav .brand { color: #fff; font-weight: bold; margin-right: 20px; }
/* 系統名稱後面的版本號 (來源: includes/version.php) */
.topnav .brand-ver { color: #94a3b8; font-weight: normal; font-size: 0.78rem; }
.topnav a { color: #cbd5e1; text-decoration: none; padding: 6px 10px; border-radius: 4px; }
.topnav a.active, .topnav a:hover { background: #374151; color: #fff; }

.container { max-width: 1200px; margin: 20px auto; padding: 0 16px; }

/* 區塊外觀: 圓角細框 + 標題壓在上緣(fieldset 的 legend 那種樣子),
   與 mySpace(net4p.com)的「篩選場地」一致。

   ⚠ 為什麼用「負的上邊距」而不是 position:absolute:
     absolute 的標題不佔空間, 內容得自己留 padding-top, 而各區塊標題長度差很多
     (「選擇賽事」到「2026中國G1 對戰表」都有), 一行變兩行就會壓到內容。
     負邊距是一般流排版, 標題自己撐開高度, 換行也不會壓到東西。
   ⚠ 標題要有背景色, 才能把它後面那段框線蓋掉 -- 這是這個效果的關鍵,
     背景改成透明的話會看到框線從字中間穿過去。 */
.card {
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    /* ⚠ 上內距要留著。留 0 的話, 沒有標題的區塊(例如賽事下拉那一區)內容會貼著上框線,
       看起來像被切掉一半。標題那邊改成把這個內距一起扣掉即可。 */
    padding: 16px 20px;
    margin-bottom: 24px;
}
.card h2 {
    /* ⚠ 一定要用 block + fit-content, 不能用 inline-block。
       inline-block 是躺在「行框」裡的, 垂直位置被行框的基線與 strut 高度牽著走,
       負邊距不會照字面把盒子往上搬 -- 而且每一頁的標題內容不同(有的含說明氣泡),
       行框就不同, 結果每頁跑的位置都不一樣。這就是 -1.5em 也推不上去的原因。
       block 不在行框裡, 負邊距直接生效; fit-content 保留「只有文字那麼寬」的縮寬,
       白底才不會整條蓋掉框線。 */
    display: block;
    width: fit-content;
    /* ⚠ 這三個數字是綁在一起的, 改一個要一起改:
       .card 的 padding-top 是 0 -> 標題的自然位置就在框線上;
       再往上推自己高度的一半(line-height 的 0.5 倍), 就正好被框線切成上下兩半。
       用 em 而不是 px, 字級改了也不會跑掉 -- 上一版寫死 -19px 就是這樣沒對準。 */
    /* -16px 抵銷 .card 的上內距, 再往上推自己高度的一半(line-height 1.5 的一半)。
       兩個數字要跟上面的 padding 一起改。 */
    margin: calc(-16px - 0.75em) 0 12px;
    padding: 0 8px;
    background: #fff;
    line-height: 1.5;
    font-size: 15px;
    color: #374151;
    max-width: calc(100% - 16px);
    overflow-wrap: break-word; word-break: break-word;
}
/* ⚠ 這個標題內部是上下兩段(賽事名稱 + 副標), 原本靠 flex 排。
   上面把 .card h2 設成 inline-block 會蓋掉它, 所以改用 inline-flex 保留直排。 */
.card .btn-row { margin: 0 0 10px; }
/* .help-line 已不再使用(說明氣泡改接在按鈕後面), 留著會誤導 -- 直接刪掉 */
.card .sub-title { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: #4b5563; }
.card h2.event-title-wrap { display: flex; width: fit-content; flex-direction: column; gap: 4px; }
.event-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.event-title-main { overflow-wrap: break-word; word-break: break-word; }

.inline-form select, .inline-form input {
    max-width: 100%;
}

.bracket-svg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 8px;
}
.bracket-svg-wrap svg { display: block; min-width: 600px; }

/* ⚠ 間隔一律靠 HTML 裡的一個空白字元, 不用 CSS 的 gap/margin。
   原本是 display:flex + gap:10px, 有兩個問題:
     1. flex 容器會「吃掉」子元素之間的純空白文字節點 -- 在 HTML 裡空一格
        完全沒有效果, 想改間隔只能回頭改 CSS, 兩套規則並存很容易走偏。
     2. 只有掛了 .inline-form 的地方有間隔, 沒掛的地方(例如選手名單那排按鈕)
        就得另外補 margin, 於是出現了 .btn-gap 這種「用過但根本沒定義」的類別。
   改成一般流排版之後, 元素之間的換行/空白就是唯一的間隔來源, 到處都一致。 */
.inline-form > * { vertical-align: middle; }
.inline-form input, .inline-form select {
    padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;
}

/* ⚠ button 與 a.btn-secondary 必須「長得一模一樣」。
   原本沒有統一, 造成兩個看得見的毛病:
     1. .btn-secondary 沒有設 display, <a> 就是 inline --
        inline 元素的上下 padding 不會撐開行高, 所以它會往下溢出去
        壓到下面的表格(這就是「按鈕標籤跟表格重疊」的原因)。
     2. <button> 預設不繼承頁面的 font-family/line-height(瀏覽器用自己的),
        <a> 則會繼承 -- 同樣寫 font-size:14px, 兩者的實際高度與字寬還是不同,
        排在一起就是有大有小。
   所以這裡一次把 display / font / line-height / 垂直對齊都釘死。 */
button, .btn-secondary {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    /* ⚠ 這個上下留白不能拿掉。inline-block 的行高只算文字, 不含 padding --
       按鈕擠不下換到第二行時, 兩排會直接壓在一起(跟 <a> 壓到表格是同一個毛病)。
       左右間隔靠 HTML 的空白字元, 上下靠這一條, 各管各的。 */
    margin-bottom: 4px;
}
button:hover { background: #1d4ed8; }
.btn-secondary { background: #6b7280; }
.btn-secondary:hover { background: #4b5563; }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }

.result-box { margin-top: 10px; padding: 10px; border-radius: 4px; font-size: 14px; }
.result-ok { background: #ecfdf5; border: 1px solid #10b981; }
.result-error { background: #fef2f2; border: 1px solid #ef4444; color: #b91c1c; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .data-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; }
.data-table th { background: #f9fafb; }
.data-table th a { color: #374151; text-decoration: none; }
.data-table td.editable { cursor: text; }
.data-table td.editable:hover { background: #fffbeb; }
.data-table td.saved-flash { background: #d1fae5; transition: background 0.6s; }
.empty-row { text-align: center; color: #9ca3af; padding: 20px; }
.muted { color: #6b7280; font-size: 13px; font-weight: normal; }

/* 對陣表 SVG 樣式定義在上方 .bracket-svg-wrap */

/* 兩種匯入方式左右並排 (Google試算表 / PDF對戰表), 窄螢幕自動改回上下堆疊 */
.import-methods-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 20px; }
.import-methods-row .import-method-col { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 860px) {
    .import-methods-row { flex-direction: column; }
    .import-methods-row .import-method-col { margin-bottom: 20px; }
}

/* PDF對戰表鎖定標示 */
.badge-locked {
    display: inline-block; font-size: 12px; font-weight: normal; color: #92400e;
    background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px;
    padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}

/* PDF匯入預覽狀態標籤 */
.pdf-category-block { margin-top: 16px; }
.pdf-category-block h3 { font-size: 15px; margin-bottom: 6px; }
.pdf-status-new { color: #059669; font-weight: bold; }
.pdf-status-matched { color: #374151; }
.pdf-status-review { color: #b45309; font-weight: bold; }
.pdf-status-removed { color: #dc2626; font-weight: bold; }


/* 對戰表: 場次編號顏色圖例 */
.mno-legend {
    display: inline-block; color: #fff; font-size: 12px; line-height: 1.4;
    border-radius: 3px; padding: 0 6px; vertical-align: middle;
}
.mno-legend.mno-none  { background: #94a3b8; }
.mno-legend.mno-win   { background: #10b981; }
.mno-legend.mno-stale { background: #f59e0b; }

/* 對戰表: 場次編號徽章 (登入後可點擊開啟編輯視窗)。
   游標與滑鼠移過的高亮只在管理模式下出現 -- 未登入時點了也存不了, 不要誤導。 */
.is-admin .bracket-svg-wrap .bracket-match { cursor: pointer; }
.is-admin .bracket-svg-wrap .bracket-match:hover rect:first-of-type {
    stroke: #111827; stroke-width: 1.5;
}
/* 選手方框的點擊行為與樣式定義在檔案最後的「選手對戰紀錄視窗」區塊 */

/* 對戰表場次編輯視窗 */
.match-editor {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.match-editor[hidden] { display: none; }
.match-editor-panel {
    background: #fff; border-radius: 8px; padding: 20px;
    width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.match-editor-panel h3 { margin: 0 0 14px; font-size: 17px; }
.match-editor-panel .me-field { display: block; margin-bottom: 14px; font-size: 14px; }
.match-editor-panel fieldset.me-field {
    border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px;
}
.match-editor-panel fieldset.me-field legend { font-size: 13px; color: #6b7280; padding: 0 4px; }
.match-editor-panel input[type="url"],
.match-editor-panel input[type="text"],
.match-editor-panel textarea {
    display: block; width: 100%; margin-top: 5px; padding: 7px 9px;
    border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px;
    font-family: inherit;
}
.me-slot {
    display: block; padding: 7px 4px; font-size: 14px; cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.me-slot:last-child { border-bottom: none; }
.me-slot input { margin-right: 7px; }
.me-slot-disabled { cursor: not-allowed; color: #9ca3af; }
/* ⚠ 不要改回 flex + gap。flex 容器會吃掉子元素之間的純空白文字節點,
   在 HTML 裡空一格就完全沒有效果 -- 間隔一律靠 HTML 的空白字元(規範 §8.15)。 */
.me-actions { margin-top: 6px; }
#meCancel { background: #6b7280; }
#meCancel:hover { background: #4b5563; }

@media (max-width: 480px) {
    .match-editor-panel { padding: 16px; }
}

/* ---------- 選手對戰紀錄視窗 ---------- */
/* 對戰表上的選手方框可以點擊(查這位選手的所有比賽), 所以改用手型游標 */
.bracket-svg-wrap .bracket-athlete { cursor: pointer; }
.bracket-svg-wrap .bracket-athlete:hover rect:first-of-type {
    stroke: #111827; stroke-width: 1.5;
}

.ah-photo { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.photo-empty { color: #cbd5e1; font-size: 18px; line-height: 34px; }
.photo-cell.can-upload { cursor: pointer; }
.photo-cell.can-upload:hover .photo-empty { color: #2563eb; }
.athlete-photo { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; display: block; margin: 0 auto; }
.photo-cell { width: 42px; }
.ah-share-text { width: 100%; height: 120px; margin-bottom: 10px; font-size: 12px; }
.athlete-history-panel { max-width: 720px; }
.ah-summary { margin: -4px 0 12px; font-size: 0.9rem; }
.ah-body { max-height: 60vh; overflow-y: auto; }
.ah-group { margin-bottom: 16px; }
/* 標題列: 量級固定在最左邊、日期固定在最右邊, 中間是賽事名稱(長的話自己換行) */
.ah-group h4 {
    margin: 0 0 6px; font-size: 0.95rem; line-height: 1.35;
    border-bottom: 1px solid #e5e7eb; padding-bottom: 4px;
    display: flex; align-items: baseline; gap: 8px;
}
.ah-group h4 .ah-cat {
    flex: 0 0 auto; padding: 1px 6px;
    border-radius: 3px; background: #eff6ff; color: #1d4ed8;
    font-size: 0.8rem; font-weight: normal; white-space: nowrap;
}
.ah-group h4 .ah-ev { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ah-group h4 .ah-date {
    flex: 0 0 auto; margin-left: auto;
    color: #6b7280; font-size: 0.8rem; font-weight: normal; white-space: nowrap;
}
.ah-table {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
    /* 固定欄寬: 不同賽事各自一個表格, 不固定的話每個表格會依自己的內容決定欄寬,
       上下看起來就對不齊(對手姓名長度差很多時特別明顯) */
    table-layout: fixed;
}
.ah-table th, .ah-table td { padding: 4px 6px; text-align: left; vertical-align: top; }
.ah-table th { color: #6b7280; font-weight: normal; font-size: 0.8rem; }
.ah-table tr + tr td { border-top: 1px solid #f3f4f6; }
/* 對手姓名留最寬的一欄(不設寬度, 吃掉剩下的空間), 結果與影片固定在最右邊 */
.ah-table col.ah-c-no    { width: 62px; }
.ah-table col.ah-c-round { width: 56px; }
.ah-table col.ah-c-res   { width: 48px; }
/* 影片欄只放一個 ▶ 圖示(可能再加一個起始時間), 不需要 118px 那麼寬 */
.ah-table col.ah-c-video { width: 62px; }
.ah-table col.ah-c-opp   { width: auto; }
.ah-table th:nth-child(3), .ah-table td:nth-child(3) { word-break: break-word; }
.ah-table th:nth-child(4), .ah-table td:nth-child(4),
.ah-table th:nth-child(5), .ah-table td:nth-child(5) { text-align: right; }
.ah-win  { color: #065f46; font-weight: bold; }
.ah-lose { color: #b91c1c; }
.ah-tbd  { color: #9ca3af; }
/* ▶ 影片 連結。字體大小原本是繼承 .ah-table 的 0.88rem, 這裡拉出來獨立設定,
   要調整「▶」跟「影片」兩個字的大小改這一行就好, 不會動到表格其他欄位 */
.ah-video a { color: #dc2626; text-decoration: none; font-size: 0.88rem; }
.ah-video a:hover { text-decoration: underline; }
/* 起始時間(只有非 YouTube 的影片才會出現, YouTube 的時間已經在網址裡) */
.ah-video .ah-time { color: #6b7280; font-size: 0.8rem; }
.ah-note { color: #6b7280; font-size: 0.82rem; }
/* 選手名單表格上的「紀錄」按鈕 */
.btn-history {
    padding: 2px 8px; font-size: 0.82rem; cursor: pointer;
    border: 1px solid #93c5fd; border-radius: 3px;
    background: #eff6ff; color: #1d4ed8;
}
.btn-history:hover { background: #dbeafe; }

/* 還沒有對戰表的賽事(尚未抽籤/尚未舉辦) */
.ah-pending {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 3px; background: #fef3c7; color: #92400e;
    font-size: 0.78rem; font-weight: normal;
}
.ah-empty { color: #6b7280; font-size: 0.85rem; padding: 4px 6px; }

/* ---------- 導覽列右側: 管理員登入狀態 ---------- */
/* .topnav 本身是 flex, 這裡用 margin-left:auto 把整組推到最右邊 */
.topnav .nav-right {
    margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.topnav .nav-user { color: #cbd5e1; font-size: 0.85rem; white-space: nowrap; }
.topnav a.nav-auth {
    padding: 4px 10px; border-radius: 4px; font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.35);
}
.topnav a.nav-auth:hover { background: rgba(255,255,255,0.12); }

/* ---------- 登入頁 ---------- */
/* 登入畫面整組置中(水平置中 + 稍微往下推, 不要黏在導覽列底下) */
.login-wrap {
    display: flex; flex-direction: column; align-items: center;
    margin-top: 6vh;
}
.login-wrap h1 { margin-bottom: 16px; }
.login-card { width: 100%; max-width: 380px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.login-form input { padding: 7px 8px; font-size: 1rem; }
.login-form button { align-self: flex-start; padding: 6px 18px; }

/* 未登入時顯示的說明 */
.view-only-note {
    margin: 0 0 14px; padding: 8px 12px; border-radius: 4px;
    background: #f1f5f9; color: #475569; font-size: 0.88rem;
}
.view-only-note a { color: #1d4ed8; }

/* ---------- 匯入對戰表: 檔案選擇 ---------- */
/* 瀏覽器原生 <input type="file"> 的「選擇檔案」字樣改不掉(各家瀏覽器還不一樣),
   所以把 input 藏起來、用 label 當按鈕, 檔名自己顯示在旁邊 */
.file-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.file-pick-btn {
    display: inline-block; padding: 5px 12px; border-radius: 4px;
    border: 1px solid #cbd5e1; background: #f8fafc; color: #1f2937;
    font-size: 0.9rem; white-space: nowrap;
}
.file-pick:hover .file-pick-btn { background: #eef2f7; }
.file-pick-name { color: #6b7280; font-size: 0.85rem; }
.file-pick-name.has-file { color: #1f2937; }

/* 同一張卡片裡兩種匯入方式之間的分隔線 */
.import-divider {
    border: 0; border-top: 1px solid #e5e7eb; margin: 14px 0 10px;
}

/* ---------- 賽事下拉選單 ---------- */
/* 尚未舉辦的賽事用灰色, 跟已經打完的分開 -- 已經打完的才是情搜主要在看的資料 */
.opt-upcoming { color: #9ca3af; }

/* ---------- 人工指定選手 ---------- */
.ur-addmaster {
    margin: 8px 0 10px; padding: 8px 10px; border-radius: 4px;
    background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.88rem;
}
.ur-addmaster input, .ur-addmaster select { padding: 4px 6px; font-size: 0.88rem; }
.ur-force { display: block; margin-top: 4px; font-size: 0.78rem; color: #b91c1c; white-space: nowrap; }

/* 選手紀錄: 賽事名稱是連結(點了跳到該量級的對戰表) */
.ah-group h4 .ah-ev a { color: #1f2937; text-decoration: none; }
.ah-group h4 .ah-ev a:hover { color: #1d4ed8; text-decoration: underline; }

/* ---------- 對戰表: 勾選選手標示晉級路線 ---------- */
.bracket-svg-wrap .athlete-pick { cursor: pointer; }
.bracket-svg-wrap .athlete-pick:hover rect { stroke: #1d4ed8; stroke-width: 1.6; }

/* 被勾選的選手: 籤位框與他打過的每一場都標起來。
   用外框加粗 + 底色, 不用改變顏色 -- 對戰表本來就用顏色區分國籍與勝負,
   再換顏色會跟既有的資訊打架。 */
.bracket-svg-wrap .pick-hl rect:first-of-type {
    stroke: #f59e0b;
    stroke-width: 2.5;
}
.bracket-svg-wrap .pick-hl text { font-weight: bold; }

/* 選手名單的籤號欄: 跟對戰表同一個編號 */
/* 籤號: 置中(原本是靠右, 會蓋掉 .col-c 的置中設定) */
#eventAthleteTable .draw-no { color: #6b7280; font-size: 0.85rem; text-align: center; width: 50px; }

/* ---------- 比賽紀錄: 青方/紅方標籤 ---------- */
/* 對戰表上面那一格是青方(B)、下面是紅方(R)。用實心底色而不是只有文字顏色,
   因為這兩個字母要在一堆數字裡一眼認出來。 */
.side-badge {
    display: inline-block; min-width: 14px; padding: 0 3px; margin-left: 4px;
    border-radius: 3px; font-size: 0.68rem; font-weight: bold;
    line-height: 15px; text-align: center; color: #fff; vertical-align: middle;
}
.side-badge.side-b { background: #2563eb; }   /* 青方 */
.side-badge.side-r { background: #dc2626; }   /* 紅方 */

/* ---------- 選手查詢 ---------- */
.athlete-filters { flex-wrap: wrap; gap: 6px; }
.athlete-filters select { max-width: 200px; }

/* 表頭固定在上方。⚠ 這裡的捲動容器是 .athlete-table-wrap 本身,
   所以 sticky 的 top 是相對於它, 不是視窗 -- 這跟一般直覺不同,
   寫成 top:0 並讓容器有 max-height 才會生效。 */
.athlete-table-wrap {
    max-height: 70vh; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px;
}
.athlete-directory { margin: 0; }
.athlete-directory thead th {
    position: sticky; top: 0; z-index: 3;
    background: #f8fafc; box-shadow: inset 0 -1px 0 #e5e7eb;
    white-space: nowrap; user-select: none;
}
.athlete-directory th.sortable { cursor: pointer; }
.athlete-directory th.sortable:hover { background: #eef2f7; }
.athlete-directory th.sort-asc::after  { content: ' ▲'; font-size: 0.7em; color: #2563eb; }
.athlete-directory th.sort-desc::after { content: ' ▼'; font-size: 0.7em; color: #2563eb; }
.athlete-directory th.dragging { opacity: 0.4; }
.athlete-directory th.drag-over { background: #dbeafe; box-shadow: inset 3px 0 0 #2563eb; }
.athlete-directory td { vertical-align: top; }

/* 比賽紀錄: 每一筆自成一列, 不要接在一起 --
   接在一起雖然省空間, 但賽事名稱長短不一, 眼睛要一直重新對位很難掃。 */
.entries-cell { min-width: 320px; padding: 4px 6px; }
.entry-row {
    display: grid;
    grid-template-columns: 58px 1fr 76px;
    gap: 6px; align-items: center;
    padding: 2px 6px; margin-bottom: 2px;
    border-radius: 4px; background: #f8fafc;
    font-size: 0.78rem; text-decoration: none; color: #1f2937;
}
.entry-row:hover { background: #eff6ff; }
.entry-row .chip-cat { color: #2563eb; font-weight: bold; }
.entry-row .chip-ev { color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-row .chip-place { color: #6b7280; text-align: right; }
.entry-row .chip-place.chip-medal { color: #b45309; font-weight: bold; }

/* 我方選手(TPE): 整列淺紅底。用很淡的顏色, 因為可能連續好幾列都是,
   太重會讓整個表格變得很吵。 */
.athlete-directory tr.row-tpe > td { background: #fef2f2; }
.athlete-directory tr.row-tpe:hover > td { background: #fee2e2; }

.badge-warn {
    display: inline-block; padding: 0 5px; border-radius: 3px;
    background: #fef3c7; color: #92400e; font-size: 0.72rem;
}

.pager { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.pager a { text-decoration: none; }

/* ---------- 選手查詢: 手機版 ---------- */
/* 手機螢幕窄, 只留最關鍵的四欄: 姓名 / 性別 / 國家 / 世排。
   其餘欄位(Member ID、獎牌、參賽次數、比賽紀錄)整欄隱藏 --
   用橫向捲動雖然能全部塞下, 但在手機上要一直左右滑, 反而更難用。 */
@media (max-width: 768px) {
    .athlete-directory [data-col="member_id"],
    .athlete-directory [data-col="medals"],
    .athlete-directory [data-col="count"],
    .athlete-directory [data-col="entries"] {
        display: none;
    }
    .athlete-table-wrap { max-height: 62vh; }
    .athlete-filters select, .athlete-filters input { width: 100%; max-width: none; }
}

/* ---------- 比賽紀錄視窗: 手機版欄寬 ---------- */
/* 手機螢幕窄, 固定欄位加起來就吃掉大半 (場次62 + 輪次56 + 結果48 + 影片118 = 284px),
   對手姓名只剩下不到 100px, 長姓名會被折成好幾行很難讀。
   手機版把「結果」與「影片」縮到最小 -- 那兩欄的內容本來就很短
   (勝/敗、一個播放圖示), 空間讓給對手姓名。 */
@media (max-width: 768px) {
    .ah-table col.ah-c-no    { width: 52px; }
    .ah-table col.ah-c-round { width: 42px; }
    .ah-table col.ah-c-res   { width: 38px; }
    .ah-table col.ah-c-video { width: 38px; }
    .ah-table td, .ah-table th { padding: 4px 3px; font-size: 0.82rem; }
    .ah-time { display: block; font-size: 0.68rem; }
}

/* 看起來像連結的按鈕: 用在「姓名可點開紀錄」的地方。
   用 <button> 而不是 <a> 是因為它不會導向任何網址, 語意上是動作不是連結;
   但外觀要像連結, 使用者才知道可以點。 */
.link-like {
    background: none; border: 0; padding: 0; margin: 0;
    color: #1d4ed8; font: inherit; text-align: left; cursor: pointer;
}
.link-like:hover { text-decoration: underline; }

/* ---------- 手機版導覽列 ---------- */
/* 系統名稱與版本號在手機上隱藏 -- 導覽列橫向空間有限, 三個功能分頁比
   「自己叫什麼名字」重要得多。版本號在版本清單與桌機版都查得到。 */
@media (max-width: 768px) {
    .topnav .brand { display: none; }
    .topnav { gap: 8px; padding: 8px 10px; }
    .topnav a { font-size: 0.9rem; }
}

/* ---------- 選手查詢: 篩選列 ---------- */
/* 這裡的基準版面是「手機版」(直向堆疊), 桌機版再用 min-width 覆蓋成單列 --
   窄螢幕的限制比較嚴格, 先把它做對再往上加, 比反過來容易維護。 */
.athlete-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.athlete-filters .filter-row { display: flex; gap: 6px; }
.athlete-filters .filter-row > * { flex: 1 1 auto; min-width: 0; }
/* 手機版: 性別/國家/量級三個併成一列, 平均分配寬度 */
.athlete-filters .filter-row-3 > select { flex: 1 1 0; }
.athlete-filters input, .athlete-filters select { padding: 5px 8px; }

/* 桌機版: 五個欄位全部排成一列。
   display:contents 讓 .filter-row 這層「消失」, 它底下的欄位直接變成
   .athlete-filters 的 flex 項目 -- 不用改 HTML 結構就能重排。 */
@media (min-width: 769px) {
    .athlete-filters { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .athlete-filters .filter-row { display: contents; }
    /* 姓名不用太寬: 這裡打的多半是姓氏或 Member ID 片段, 200px 綽綽有餘 */
    .athlete-filters input[name="q"] { flex: 0 0 200px; }
    .athlete-filters select[name="gender"] { flex: 0 0 80px; }
    .athlete-filters select[name="nation"] { flex: 0 0 110px; }
    .athlete-filters select[name="weight"] { flex: 0 0 110px; }
    /* 賽事名稱最長, 剩下的空間都給它 */
    .athlete-filters select[name="event_id"] { flex: 1 1 220px; min-width: 0; }
}

/* ---------- 導覽列: 手機版 ---------- */
/* 手機螢幕窄, 導覽列要塞下三個分頁 + 登入狀態就很勉強。
   系統名稱與版本號在手機上沒有實際用途(分頁標題已經寫著了), 隱藏起來把空間讓給功能。 */
@media (max-width: 768px) {
    .topnav .brand { display: none; }
    .topnav { gap: 6px; padding: 6px 8px; }
    .topnav a { padding: 4px 8px; font-size: 0.9rem; }
    .nav-user { display: none; }   /* 帳號名稱同理, 手機上只留登出連結 */
}

/* 行內編輯的儲存格: 強制吃掉貼上內容可能帶進來的樣式。
   ⚠ 即使 JS 已經把貼上內容轉成純文字, 這裡仍然保留 --
   萬一某個瀏覽器的行為不同(或使用者用了輸入法/擴充套件的貼上路徑),
   CSS 這一層可以確保畫面不會被弄髒。 */
/* ⚠ background 的重設只能套在「子元素」, 不能套在儲存格本身。
   貼上帶格式的內容時, 髒東西是以子元素(span)的形式進來的 --
   儲存格自己的背景不會被貼上影響。
   套在儲存格上的話會蓋掉整列的底色(例如 TPE 選手的淺紅底),
   結果只有可編輯的那幾欄變白, 看起來像沒對齊。 */
td.editable {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
}
td.editable * {
    color: inherit !important;
    background: transparent !important;
    font: inherit !important;
    text-decoration: none !important;
}
td.editable:focus {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
    background: #f8fafc !important;
}

/* 表格的置中欄位。表頭一律置中(欄名通常很短, 靠左反而不容易對應到下面的資料),
   數值型與短代碼型的資料欄也置中; 姓名這類長度不一的維持靠左比較好讀。 */
.data-table th { text-align: center; }
.data-table .col-c { text-align: center; }

/* 未登入時選手名單整列可點(開啟戰績)。加上手指游標與 hover 底色,
   不然使用者不會知道可以點 -- 這是唯一的提示。 */
tr.row-athlete { cursor: pointer; }
tr.row-athlete:hover > td { background: #eff6ff; }
/* 可編輯的儲存格點下去是要編輯的, 游標維持文字游標, 不要誤導成「可點開視窗」 */
tr.row-athlete > td.editable { cursor: text; }

/* 世排資料: 手機版隱藏「國家」欄。
   國碼在 Member ID 的前綴裡已經看得到(KSA-2006), 手機上再開一欄放全名太佔位置。 */
/* 世排資料手機版只留「年月 / 量級 / 排名 / 姓名」四欄。
   Member ID、國家、管理都藏起來 -- 手機螢幕塞不下, 而且國碼在姓名旁邊
   本來就看得到; 要編輯或刪除本來就不會在手機上做。 */
@media (max-width: 768px) {
    #rankingTable .col-hide-sm { display: none; }
}

/* 籤號欄: 一位選手佔到兩個籤位(資料問題)時標紅提醒 */
#eventAthleteTable .draw-no.draw-dup {
    color: #b91c1c; font-weight: bold; background: #fef2f2;
}

/* 人工指定未對應選手: 顯示這個姓名出現在哪些量級 */
.ur-cats { font-size: 0.78rem; color: #6b7280; }
.ur-fill { margin-left: 4px; }

/* 賽事選單旁的「WT官網」連結: 做成跟旁邊按鈕一樣的外觀 */
.wt-official-link { text-decoration: none; white-space: nowrap; }

/* 選手姓名後面的小圖示: 📋 有戰績紀錄 / ▶ 有影片可看。
   刻意做小且不搶眼 -- 那是輔助資訊, 不該蓋過姓名本身。 */
.flag-rec, .flag-vid { font-size: 0.8em; opacity: 0.75; cursor: help; }
.flag-vid { color: #dc2626; }

/* 選手名單: 我方選手(TPE)整列淺紅底, 跟選手查詢那一頁一致。
   用很淡的紅 -- 同一場可能連續好幾位, 太重會讓整張表變吵。 */
#eventAthleteTable tr.row-tpe > td { background: #fef2f2; }
#eventAthleteTable tr.row-tpe:hover > td { background: #fee2e2; }

/* 可以點的表頭 */
#eventAthleteTable th.sortable { cursor: pointer; user-select: none; }
#eventAthleteTable th.sortable:hover { background: #e5e7eb; }
#eventAthleteTable th.sort-asc::after  { content: " ▲"; font-size: 0.75em; }
#eventAthleteTable th.sort-desc::after { content: " ▼"; font-size: 0.75em; }

/* 世排資料: 我方選手(TPE)整列淺紅底, 跟另外兩頁一致 */
#rankingTable tr.row-tpe > td { background: #fef2f2; }
#rankingTable tr.row-tpe:hover > td { background: #fee2e2; }

/* ---------- 說明氣泡 ---------- */
/* 桌機靠 :hover / :focus-within 顯示; 手機沒有 hover, 由 app.js 加上 .open。 */
.help-wrap { position: relative; display: inline-block; margin-left: 4px; vertical-align: super; }
/* ⚠ 這顆小圓點也是 <button>, 會吃到上面那條統一樣式。
   它是「跟在標題文字後面的小圖示」, 不是排在一起的按鈕, 所以要把上下留白歸零,
   否則會被往上推、跟旁邊的文字對不齊。 */
.help-dot {
    width: 15px; height: 15px; line-height: 13px; padding: 0; margin-bottom: 0;
    border: 1px solid #9ca3af; border-radius: 50%;
    background: #fff; color: #6b7280;
    font-size: 10px; font-weight: 700; cursor: pointer;
}
.help-dot:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.help-pop {
    display: none; position: absolute; z-index: 50;
    top: 20px; left: 0; width: 360px;
    padding: 12px 14px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
    font-size: 13px; font-weight: normal; line-height: 1.7; color: #374151;
    text-align: left; white-space: normal;
}
.help-wrap.open .help-pop { display: block; }
@media (hover: hover) {
    .help-wrap:hover .help-pop, .help-wrap:focus-within .help-pop { display: block; }
}
.help-pop b { color: #111827; }
.help-pop ol { margin: 8px 0 0; padding-left: 20px; }
.help-pop li { margin-bottom: 8px; }
.help-pop code {
    background: #f3f4f6; border-radius: 3px; padding: 1px 4px;
    font-size: 12px; word-break: break-all;
}
.help-note { display: block; color: #6b7280; font-size: 12px; line-height: 1.6; }
.help-warn { color: #b91c1c; }

/* ---------- WT官網匯入: 量級勾選清單 ---------- */
.sc-division-list {
    max-height: 260px; overflow: auto;
    border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 8px 10px; font-size: 14px;
}
.sc-group { margin-bottom: 6px; }
.sc-group-head {
    display: flex; align-items: center; gap: 8px;
    background: #f3f4f6; border-radius: 4px;
    padding: 4px 8px; margin-bottom: 4px; font-weight: 700;
}
/* ⚠ 不要 margin-left:auto -- 那會把「全選本組」推到最右邊, 離組名很遠,
   看起來像跟整組無關的東西。緊接在組名後面(靠 flex 的 gap 空一格)才看得出來
   它是在操作這一組。 */
.sc-group-head button {
    padding: 2px 8px; font-size: 12px;
    font-weight: normal; cursor: pointer;
}
.sc-item { display: flex; align-items: center; gap: 8px; padding: 2px 8px; cursor: pointer; }
.sc-item:hover { background: #f9fafb; }
.sc-item.disabled { color: #9ca3af; cursor: default; }
.sc-item.disabled:hover { background: none; }
.sc-item .sc-why { font-size: 12px; color: #9ca3af; }
/* 純顯示的清單: 拿掉「可以點」的暗示(游標與 hover 底色), 不然會一直去點沒反應的一列 */
.sc-item--static { cursor: default; }
.sc-item--static:hover { background: none; }
/* 量級清單: 一整排流動排列, 寬度不夠就自己換行 */
.sc-flow { padding: 2px 8px; line-height: 1.9; }
.sc-chip { white-space: nowrap; }
/* ⚠ 不要用 opacity 來表示停用 -- 那會連人數一起變淡, 反而看不清楚 */
.sc-chip.disabled { color: #9ca3af; }
/* 人數與鎖頭是附註, 縮小並降低對比, 讓量級名稱留在視覺主線上 */
.sc-n { font-size: 11px; color: #6b7280; margin-left: 1px; }
.sc-chip.disabled .sc-n { color: #b6bcc6; }
.sc-sep { color: #9ca3af; }
.sc-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.sc-toolbar button { padding: 3px 10px; font-size: 12px; cursor: pointer; }
/* 多量級預覽的彙總表 */
.sc-summary { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.sc-summary th, .sc-summary td { border-bottom: 1px solid #e5e7eb; padding: 5px 8px; text-align: left; }
.sc-summary th { background: #f9fafb; font-size: 13px; }
.sc-summary td.num { text-align: right; }
.sc-row-status { font-size: 13px; color: #6b7280; }
.sc-row-status.done { color: #047857; font-weight: 700; }
.sc-row-status.fail { color: #b91c1c; font-weight: 700; }

/* ---------- 新增賽事 ---------- */
.new-event-form { display: flex; flex-wrap: wrap; gap: 14px; }
.new-event-form label { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; }
.new-event-form label:nth-child(2) { flex: 1 1 380px; }
.new-event-form input[type=text] { min-width: 220px; padding: 6px 8px; }
.new-event-form label:nth-child(2) input { width: 100%; box-sizing: border-box; }
.new-event-form .muted { font-weight: normal; }
@media (max-width: 680px) {
    .new-event-form { flex-direction: column; gap: 10px; }
    .new-event-form input[type=text] { width: 100%; box-sizing: border-box; }
}

/* ---------- 備援匯入區塊 ---------- */
.import-fallback { margin-top: 4px; }
.import-fallback > summary {
    cursor: pointer; padding: 6px 0;
    font-size: 15px; font-weight: 600; color: #6b7280;
    list-style: revert;
}
.import-fallback > summary:hover { color: #2563eb; }
.import-fallback[open] > summary { margin-bottom: 8px; color: #374151; }

/* 「?」是上標, 但氣泡內容要維持正常字級與基準線, 否則會跟著縮小抬高 */
.help-pop { vertical-align: baseline; font-size: 13px; }
h2 .help-wrap, h3 .help-wrap, summary .help-wrap { font-size: 14px; }

/* ---------- 變更 Member ID ---------- */
.btn-mid-change { padding: 2px 10px; font-size: 13px; }
.mid-current {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 8px 10px; margin-bottom: 14px; font-size: 14px; line-height: 1.7;
}
.mid-current b { color: #111827; }
/* 合併是不可逆的操作, 用醒目的底色逼使用者看一眼目標是誰 */
.mid-warn {
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px;
    padding: 10px 12px; margin: 10px 0; font-size: 13px; line-height: 1.8; color: #7f1d1d;
}
.mid-warn ul { margin: 6px 0 0; padding-left: 20px; }
#midApplyBtn { background: #b91c1c; }
#midApplyBtn:hover { background: #991b1b; }

.mid-check { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.mid-check input[type=checkbox] { margin-top: 3px; }
.mid-check .muted { flex-basis: 100%; margin-left: 22px; font-size: 12px; line-height: 1.6; }

/* ---------- 選手查詢: 可點擊變更的欄位 ---------- */
/* 只有管理員登入時 PHP 才會輸出 data-mid-edit, 所以不必再判斷權限 */
[data-mid-edit] { cursor: pointer; }
[data-mid-edit]:hover { background: #eff6ff; outline: 1px solid #bfdbfe; }
/* 姓名欄要保留「點了開戰績」, 改名另外給一個小鉛筆 */
.mid-pencil {
    border: none; background: none; cursor: pointer; padding: 0 2px;
    color: #9ca3af; font-size: 12px;
}
.mid-pencil:hover { color: #2563eb; }

/* ---------- 說明氣泡: 行內清單 ---------- */
/* ⚠ 不能用 ol/li -- 氣泡有時放在 p 或 summary 裡, HTML 規範不允許那樣巢狀,
   瀏覽器會把外層元素提前關掉, 內容就從隱藏的容器掉出來變成常駐顯示。
   改用 span 搭配 CSS 計數器, 外觀一樣但巢狀合法。 */
.help-list { display: block; counter-reset: helpitem; margin: 8px 0 0; }
.help-li {
    display: block; counter-increment: helpitem;
    margin-bottom: 8px; padding-left: 22px; text-indent: -22px;
}
.help-li::before {
    content: counter(helpitem) '. ';
    font-weight: 700; color: #374151;
}

/* ---------- 說明氣泡: 手機 ---------- */
/* 原本用 right:0 相對於觸發點展開, 觸發點靠近畫面左緣時氣泡會整個跑出畫面外。
   改成 position:fixed 貼齊視窗左右, 與觸發點的位置無關, 一定看得到。 */
@media (max-width: 680px) {
    .help-pop {
        position: fixed;
        left: 12px; right: 12px; top: auto; bottom: 16px;
        width: auto; max-width: none;
        max-height: 65vh; overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 -4px 24px rgba(0,0,0,.25);
    }
    /* 手機沒有 hover, 只靠點擊開合 -- 這裡把 hover 規則關掉,
       免得手指按住時閃一下又收起來 */
    .help-wrap:hover .help-pop, .help-wrap:focus-within .help-pop { display: none; }
    .help-wrap.open .help-pop { display: block; }
}

/* ---------- 窄欄位不換行 ---------- */
/* 自動表格版面是依「最小內容寬度」分配空間的, 而這兩欄的最小寬度會被算得很小:
     表頭「量級」是中日韓文字, 預設可以逐字斷行 -> 最小寬度只有一個字
     資料「M-87+」可以在連字號後斷行           -> 最小寬度只到「87+」
   瀏覽器因此認為這兩欄可以很窄, 把空間全給了姓名欄, 結果表頭被拆成
   「量/級」「排/名」。
   設成不換行, 最小寬度就會是完整字串, 版面自然分配得合理。
   ⚠ 表格外層有 .table-scroll, 螢幕再窄也只是可以左右滑動, 不會擠爆版面。 */
#rankingTable .col-cat,
#rankingTable .col-rank { white-space: nowrap; }

/* 賽事名單的選手名單同理: 籤號與世排都是短數字, 沒有理由換行 */
#eventAthleteTable [data-col="draw"],
#eventAthleteTable [data-col="rank"] { white-space: nowrap; }

/* ---------- 勝率(姓名後方) ---------- */
/* 次要資訊, 不要跟姓名搶注意力。滑鼠移上去(手機長按)有詳細勝負場次。 */
.win-rate {
    font-size: 12px; color: #9ca3af;
    white-space: nowrap; cursor: help;
}

/* ---------- 臨時碼 ---------- */
/* NA- 開頭是還沒對到正式 Member ID 的暫時識別碼。淺灰顯示,
   掃一眼就知道哪些選手還需要用「換」去整併。 */
.id-placeholder { color: #b0b6be; }

/* ---------- WT 官網選手頁連結 ---------- */
/* 只有「從 WT 官網匯入」進來的選手才有, 所以這個圖示本身就代表
   「這位選手的身分是官方來源」-- 有點像一個小小的認證標記。 */
.wt-profile {
    margin-left: 4px; padding: 0 3px;
    font-size: 10px; font-weight: 700; line-height: 1.4;
    color: #6b7280; text-decoration: none;
    border: 1px solid #d1d5db; border-radius: 3px;
    white-space: nowrap; vertical-align: middle;
}
.wt-profile:hover { color: #fff; background: #2563eb; border-color: #2563eb; }

/* ---------- 選手名單: 各國人數統計 ---------- */
/* 接在「共 N 人」後面, 屬於次要資訊 */
.nation-summary { margin-left: 6px; font-size: 13px; }
/* ---------- 戰績列表: 對手國碼 ---------- */
/* 與對戰表方框裡的識別碼、勝方國碼同一個視覺層級(小字灰色)。
   ⚠ 這裡只管字級與顏色 -- 姓名與國碼之間的空格寫在 HTML 裡, 不用 margin。 */
.opp-nat { font-size: 11px; color: #9ca3af; white-space: nowrap; }