:root {
    --bg: #0d1117; --card: #161b22; --card2: #1c2330; --line: #2d333b;
    --text: #e6edf3; --muted: #8b949e; --accent: #58a6ff;
    --green: #3fb950; --red: #f85149; --yellow: #d29922;
  }
  body.light {
    --bg: #f5f6f8; --card: #ffffff; --card2: #eef1f5; --line: #d5dae0;
    --text: #1a1f26; --muted: #5c6773; --accent: #1657c8;
    --green: #1a7f37; --red: #cf222e; --yellow: #8a5a00;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text);
         font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; padding: 16px; }
  .wrap { max-width: 2000px; margin: 0 auto; }
  /* 整個標題列固定在頁面最上方（原本只有左上角選單按鈕是 fixed，其餘標題內容
     捲動就跟著跑掉）；背景/陰影蓋住底下捲動上來的卡片內容。上/左/右都用負 margin
     抵消 body 的 padding：不只是左右對齊卡片，上面也讓 header 一開始就貼齊視窗頂端
     （y=0），不然沒捲動時 header 還在 body 內距留出的 16px 位置、捲動後才「跳」到
     y=0，跟固定在 top:32px 的選單按鈕（不受捲動影響）中心對不齊。 */
  header { display: flex; align-items: center; gap: 14px; margin: -16px -16px 4px; flex-wrap: wrap;
           position: sticky; top: 0; z-index: 50; background: var(--bg);
           padding: 16px 16px 10px; box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); }
  header h1 { font-size: 26px; letter-spacing: 2px; }
  header .date { color: var(--muted); font-size: 15px; }
  .srcnote { color: var(--muted); font-size: 12px; margin-bottom: 16px; }
  .srcnote a { color: var(--accent); text-decoration: none; }

  /* 得分跑馬燈：所有有得分的比賽合併成同一條，依序捲動；不限只顯示一場。
     用 padding-left:100% 讓文字從整條最右側進場、跑到最左側才出場，
     確保無論訊息長短都會跑滿整個框框（而不是只在左側小範圍晃動）。
     時長依場次數量等比拉長（見 JS 的 tickerRoundDuration），每則訊息的閱讀速度
     維持一致；一輪跑完才會換下一輪，跑輪期間新得分的比賽先排隊，等這一輪跑完
     才併入下一輪一起跑（見 JS 的 announceScore/startTickerRound）。 */
  .score-ticker { margin: 0 0 16px; border-radius: 10px;
    background: linear-gradient(90deg, #1a2f1f, #133a24, #1a2f1f);
    border: 1px solid #2c6b45; box-shadow: 0 0 14px rgba(63,185,80,.25), inset 0 0 20px rgba(63,185,80,.08);
  }
  .score-ticker[hidden] { display: none; }
  .score-ticker-row { overflow: hidden; white-space: nowrap; }
  .score-ticker-track { display: inline-block; white-space: nowrap; padding: 9px 0 9px 100%;
    will-change: transform; }
  .score-ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 34px 0 0;
    font-size: 14px; font-weight: 700; color: #baf7c8; }
  .score-ticker-item b { color: #fff; }
  .score-ticker-item .tk-bolt { color: #ffd23f; }
  .score-ticker-item .tk-team { color: #ffd23f; }
  @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

  /* 得分後：卡片邊框用得分球隊的隊色持續發光（緩慢呼吸般的脈動，不是單次閃一下），
     一直持續到該場比賽的跑馬燈跑完完整三輪才熄滅（見 JS 的 startCardFlash/stopCardFlash）。
     --flash-color 由 JS 依得分球隊隊色設定，沒設時退回預設綠色。 */
  .card { transition: border-color .4s ease, box-shadow .4s ease; }
  .card.score-flash { border-color: var(--flash-color, #3fb950);
    animation: card-pulse 2s ease-in-out infinite; }
  .card.score-flash::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    border: 2px solid var(--flash-color, #3fb950); opacity: .45; pointer-events: none;
  }
  @keyframes card-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--flash-color, #3fb950) 30%, transparent),
                            0 0 14px color-mix(in srgb, var(--flash-color, #3fb950) 35%, transparent); }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--flash-color, #3fb950) 55%, transparent),
                       0 0 28px color-mix(in srgb, var(--flash-color, #3fb950) 60%, transparent); }
  }

  /* 每張卡最少 440px，寬度不夠擠 3 欄時自動退到 2 欄、1 欄，不會像固定 3 欄那樣在
     中等寬度螢幕被硬擠窄（今日戰況表格欄位多，太窄會被迫換行）。
     .cards 自己另外設 max-width（比 .wrap 窄）：超寬螢幕上 .wrap 的多餘空間拿來把
     既有 3 張卡「撐寬」，而不是讓 auto-fit 塞進第 4 張——寬度算法只看 minmax 的下限
     決定欄數，.wrap 留太多空間的話會直接多開一欄，而不是把原本幾欄變寬。
     align-items:start → 展開某張卡時其他卡不跟著被撐高。
     下限外面包一層 min()：視窗比 440px 還窄（手機直立多半是 375~430px）時，欄寬改用
     100% 而不是硬撐 440px——沒有這層保護，格線欄位會比視窗還寬，整頁被撐出橫向捲動、
     卡片右半截被切掉（實測 375px 視窗下 scrollWidth 會變成 456px）。 */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
           max-width: 1700px; margin: 0 auto; gap: 16px; align-items: start; }
  /* auto-fit 會把「剩下沒東西可佔的欄位」空間整個塞給僅有的卡片撐寬——今天只有
     1、2 場比賽時，卡片會被硬拉到跟整個 .cards 容器一樣寬（用 1700px 的極端案例
     實測過，卡片內文字、按鈕間距被拉得很誇張）。卡片自己另外設一個上限，比多欄
     版面常見的寬度（440~600px 左右）再寬一點，但不會無限跟著容器一起撐大。 */
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
          max-width: 640px; margin: 0 auto; width: 100%;
          padding: 16px; display: flex; flex-direction: column; gap: 12px;
          container-type: inline-size; position: relative; }
  .card.cancelled { opacity: .7; }

  /* 載入骨架：資料還沒回來前先畫出卡片大致外形，比純文字「載入中…」更不會讓人
     覺得網頁卡住；灰塊用同一個呼吸動畫，寬度隨機錯開一點看起來比較自然。 */
  @keyframes skel-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
  .skel-block { background: var(--card2); border-radius: 6px; animation: skel-pulse 1.4s ease-in-out infinite; }
  .skel-card .skel-vs { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .skel-card .skel-block.name { height: 20px; width: 40%; }
  .skel-card .skel-block.score { height: 30px; width: 60px; }
  .skel-card .skel-block.meta { height: 12px; width: 55%; margin-top: 10px; }
  .skel-card .skel-sp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .skel-card .skel-block.sp { height: 90px; }
  .skel-card .skel-block.bar { height: 22px; margin-top: 14px; }

  /* 精簡檢視：只留對戰組合／局數／比分／壘包狀況／文字轉播，隱藏先發投手、勝率、逐局比分、打序等 */
  .cards.compact { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1300px) { .cards.compact { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .cards.compact { grid-template-columns: 1fr; } }
  .cards.compact .card { padding: 12px 14px; gap: 8px; }
  .cards.compact .sp-box, .cards.compact .prob, .cards.compact .lu2,
  .cards.compact .boardbox, .cards.compact .updated, .cards.compact .h2h-box,
  .cards.compact .live-pb, .cards.compact details[data-k^="plays-"] { display: none; }
  .cards.compact .teamname { font-size: 16px; }
  .cards.compact .score { font-size: 26px; height: 40px; }
  .cards.compact .diamond-wrap { padding: 8px 10px; }
  /* 精簡模式下其餘區塊都隱藏，文字轉播自然落在卡片可見內容最下面；加分隔線讓它讀起來像跑馬燈 */
  .cards.compact .lastplay { padding-top: 6px; border-top: 1px dashed var(--line); }
  .vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .teamname { font-size: 19px; font-weight: 700; text-align: center; white-space: nowrap; }
  .teamname .rec { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
  .score { font-size: 34px; font-weight: 800; text-align: center; min-width: 84px;
           height: 58px; display: flex; flex-direction: column; justify-content: center; }
  .score small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
  .live-dot { color: var(--red); animation: blink 1.2s infinite; }
  @keyframes blink { 50% { opacity: .25; } }
  .meta { text-align: center; color: var(--muted); font-size: 13px; }

  .sp-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .sp { background: var(--card2); border-radius: 8px; padding: 10px; font-size: 13px;
        min-height: 150px; }
  .sp .who { font-weight: 700; font-size: 15px; margin-bottom: 4px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp .tag { color: var(--muted); font-size: 11px; white-space: nowrap; }
  .sp table { width: 100%; border-collapse: collapse; margin-top: 6px; }
  .sp td { padding: 1px 4px 1px 0; color: var(--muted); white-space: nowrap; }
  .sp td.v { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
  .sp-recent { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line);
    color: var(--yellow); font-size: 11px; white-space: nowrap; }

  .prob { margin-top: 2px; }
  .prob .bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden;
               font-size: 12px; font-weight: 700; }
  .prob .away-side { background: #b3562d; display: flex; align-items: center; padding: 0 8px; }
  .prob .home-side { background: #2d6cb3; display: flex; align-items: center;
                     justify-content: flex-end; padding: 0 8px; flex: 1; }
  .prob .cap { display: flex; justify-content: space-between; color: var(--muted);
               font-size: 12px; margin-top: 4px; }
  .prob.result .rescmp { background: var(--card2); border-radius: 6px; padding: 8px 10px;
               font-size: 13px; line-height: 1.7; }
  /* 即時勝率：跟上面賽前那條勝率條拉開一點距離＋矮一點的高度，一眼看得出是另一個數字 */
  .prob.live-wp { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .prob.live-wp .bar { height: 18px; }

  .snapshot-banner { background: var(--card2); border: 1px solid var(--line);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
  .snapshot-banner b { color: var(--yellow); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.66);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
  .modal-overlay[hidden] { display: none; }
  .modal-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    width: min(1180px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
  .modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
  .modal-head button { background: var(--card2); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; }
  .modal-head button:hover { background: var(--red); }
  .modal-body { flex: 1; overflow: auto; }
  .modal-body iframe { width: 100%; height: 100%; border: 0; background: var(--bg); display: block; }
  .modal-pad { padding: 16px; }
  /* 面板頂部固定列：捲動時查詢/返回列黏在最上方 */
  .sticky-bar { position: sticky; top: 0; z-index: 20; background: var(--bg);
    margin: -16px -16px 12px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
  .sticky-bar .search-row { margin: 0; }
  .sticky-bar .back-link { margin: 0 0 6px; display: inline-block; }

  /* 球員詳情：照片＋中文數據格 */
  .pd-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
  .pd-photo { width: 92px; height: 115px; border-radius: 9px; object-fit: cover;
    object-position: center top; border: 1px solid var(--line); background: #f4f6f8; flex: 0 0 auto; }
  .pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 7px; margin: 8px 0 14px; }
  .pd-cell { background: var(--card2); border-radius: 7px; padding: 6px 10px; }
  .pd-cell .lab { font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }
  .pd-cell .val { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
  td.p-link { cursor: pointer; }
  td.p-link:hover { text-decoration: underline; }

  /* 選單：按鈕彈出式（類似 Chrome 右上角的三點選單），不佔版面高度——手機打開網頁
     不會被選單擠掉，比賽卡片一開始就看得到，不用先往下滑過選單才看得到內容。 */
  /* top:16px 讓按鈕垂直中心跟 header 標題文字對齊（header 自己貼齊 y=0，內距 16px，
     標題內容中心約在 35.5px，扣掉按鈕自己高度 40px 的一半） */
  #menu-toggle { position: fixed; top: 16px; left: 10px; z-index: 501; width: 40px; height: 40px;
    border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text);
    font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  #menu-toggle:hover { background: var(--card2); }
  #menu-toggle.active { background: var(--accent); color: #04101f; border-color: var(--accent); }
  /* 深色／淺色切換：從選單裡移出來，固定在頁面右下角，樣式比照左上角選單按鈕 */
  #theme-btn { position: fixed; bottom: 16px; right: 16px; z-index: 501; width: 40px; height: 40px;
    border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text);
    font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  #theme-btn:hover { background: var(--card2); }
  #sidebar { position: fixed; top: 62px; left: 10px; width: 210px; max-height: calc(100vh - 72px);
    overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
    transition: opacity .15s ease, transform .15s ease; }
  #sidebar.open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
  /* 聯盟切換：置於頁面右上角（header 內靠右） */
  .league-switch { display: flex; gap: 4px; background: var(--card2); border-radius: 8px;
    padding: 4px; margin-left: auto; align-self: center; }
  .lg-btn { background: transparent; color: var(--muted); border: 0; border-radius: 6px;
    padding: 6px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; }
  .lg-btn.active { background: var(--accent); color: #04101f; }
  .compact-btn { background: var(--card2); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 14px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; align-self: center; }
  .compact-btn.active { background: var(--accent); color: #04101f; border-color: var(--accent); }
  .side-btn { text-align: left; background: transparent; color: var(--text); border: 0;
    border-radius: 8px; padding: 10px 12px; font-size: 14px; cursor: pointer;
    font-family: inherit; }
  .side-btn:hover { background: var(--card2); }
  .side-btn.active { background: var(--accent); color: #04101f; font-weight: 700; }
  /* header 左側原本被固定選單擠出去的空間現在空出來了，留一點內距讓標題不會貼著
     選單按鈕（選單按鈕是 fixed，不會影響 header 自己的排版寬度）。 */
  header { padding-left: 52px; }

  /* 面板通用表格 */
  table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.data th, table.data td { padding: 6px 10px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  table.data th { position: sticky; top: 0; background: var(--card2); color: var(--muted);
    font-weight: 400; cursor: default; }
  table.data td.l, table.data th.l { text-align: left; }
  table.data td.rank { color: var(--muted); }
  table.data tr:hover td { background: var(--card2); }
  table.data td.name { font-weight: 700; }
  .panel-note { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
  .search-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .search-row input, .search-row select { background: var(--card2); border: 1px solid var(--line);
    border-radius: 8px; color: var(--text); padding: 9px 12px; font-size: 14px; font-family: inherit; }
  .search-row input { flex: 1; }
  table.data th.lb-h { cursor: pointer; user-select: none; }
  table.data th.lb-h:hover { color: var(--accent); }
  .team-link { cursor: pointer; }
  .team-link:hover { text-decoration: underline; }
  .plist button { display: block; width: 100%; text-align: left; background: var(--card2);
    border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 12px;
    margin-bottom: 6px; cursor: pointer; font-family: inherit; font-size: 14px; }
  .plist button:hover { border-color: var(--accent); }
  .arch-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .arch-list button { background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
    color: var(--accent); padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 14px; }
  .arch-list button:hover { border-color: var(--accent); }
  .back-link { color: var(--accent); cursor: pointer; font-size: 13px; margin-bottom: 10px;
    display: inline-block; }

  /* 賽程月曆 */
  .cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .cal-nav button { background: var(--card2); border: 1px solid var(--line); color: var(--text);
    border-radius: 8px; padding: 4px 14px; cursor: pointer; font-size: 16px; font-family: inherit; }
  .cal-nav button:hover { border-color: var(--accent); }
  #cal-team-filter { background: var(--card2); border: 1px solid var(--line); color: var(--text);
    border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 13px; cursor: pointer; }
  .cal-cell.filtered-out { opacity: .3; cursor: default; pointer-events: none; }
  .cal-acc-legend { display: flex; align-items: center; gap: 6px; font-size: 11px;
    color: var(--muted); margin-bottom: 10px; }
  .cal-acc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  .cal-acc-grad { width: 60px; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, hsl(0,45%,20%), hsl(60,45%,20%), hsl(120,45%,20%)); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-grid.cal-head { margin-bottom: 4px; color: var(--muted); font-size: 12px; text-align: center; }
  .cal-cell { min-height: 84px; border-radius: 8px; padding: 10px 4px; display: flex;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px;
    border: 1px solid transparent; overflow: hidden; }
  .cal-cell.empty { visibility: hidden; }
  .cal-cell.has-games { background: var(--card2); cursor: pointer; }
  .cal-cell.has-games:hover { border-color: var(--accent); }
  .cal-cell.archived { background: color-mix(in srgb, var(--accent) 14%, var(--card2)); }
  .cal-cell.today { border-color: var(--accent); }
  .cal-day { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 2px; }
  /* 對戰組合小徽章：沒有隊徽圖檔，用隊伍代表色色塊＋縮寫代替，一天多場就一場一行。
     用 grid 固定「客隊欄／@欄／主隊欄」三欄寬度，每一行才會對整齊——原本用 flex
     置中，客隊名字長短不一會讓每行的 @ 符號左右飄移，看起來歪七扭八。 */
  .cal-matchup { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center;
    gap: 3px; font-size: 9px; line-height: 1.4; }
  .cal-team-badge { border-radius: 4px; padding: 1px 4px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-team-away { justify-self: end; }
  .cal-team-home { justify-self: start; }
  .cal-vs-sep { color: var(--muted); font-size: 8px; text-align: center; }
  .cal-score { color: var(--muted); font-size: 8px; justify-self: start; }
  .cal-game-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 6px 0;
    border-top: 1px solid var(--line); font-size: 13px; text-align: center; }

  /* Fantasy */
  .fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 640px){ .fx-grid { grid-template-columns: 1fr; } }
  .fx-card { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
  .fx-card h3 { font-size: 15px; margin-bottom: 10px; }
  .fx-field { margin-bottom: 8px; }
  .fx-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
  .fx-field input, .fx-field select { width: 100%; background: var(--bg); border: 1px solid var(--line);
    border-radius: 7px; color: var(--text); padding: 8px 10px; font-size: 14px; font-family: inherit; }
  .fx-btn { background: var(--accent); color: #04101f; border: 0; border-radius: 8px;
    padding: 9px 14px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; }
  .fx-btn.sec { background: var(--card2); color: var(--text); border: 1px solid var(--line); font-weight: 400; }
  .fx-code { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
  .fx-mgr { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 7px;
    background: var(--card2); margin-bottom: 5px; font-size: 14px; }
  .fx-mgr.clock { outline: 2px solid var(--accent); }
  .fx-msg { font-size: 13px; margin: 8px 0; }
  #app-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
    background: var(--red); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px;
    z-index: 9999; opacity: 0; pointer-events: none; max-width: 80vw;
    transition: opacity .25s, transform .25s; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
  #app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #app-toast.ok { background: var(--green); }
  .fx-pool { max-height: 340px; overflow-y: auto; margin-top: 8px; }
  .fx-pool button { display: flex; justify-content: space-between; width: 100%; text-align: left;
    background: var(--card2); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
    padding: 7px 10px; margin-bottom: 5px; cursor: pointer; font-family: inherit; font-size: 13px; }
  .fx-pool button:hover { border-color: var(--accent); }
  .fx-pool button:disabled { opacity: .4; cursor: default; }
  .fx-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
  .fx-tab { background: var(--card2); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
    padding: 7px 12px; cursor: pointer; font-family: inherit; font-size: 13px; }
  .fx-tab.active { background: var(--accent); color: #04101f; font-weight: 700; }
  .fx-howto { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
  .fx-howto h3 { font-size: 16px; margin-bottom: 8px; }
  .fx-lead { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
  .fx-steps { margin: 0 0 12px; padding-left: 22px; }
  .fx-steps li { font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; color: var(--text); }
  .fx-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
  .fx-cats span { background: var(--card2); border: 1px solid var(--line); border-radius: 6px;
    padding: 5px 10px; font-size: 12.5px; color: var(--muted); }
  .fx-tip { font-size: 13px; color: var(--muted); background: var(--card2);
    border-radius: 8px; padding: 10px 12px; line-height: 1.6; }

  /* ===== 球員卡包 ===== */
  .pk-wrap { text-align: center; padding: 10px 0 20px; }
  .pk-pack { width: 170px; height: 240px; margin: 14px auto; border-radius: 12px; cursor: pointer;
    background: linear-gradient(160deg, #1c3f8f 0%, #2a6fd6 45%, #12275c 100%);
    border: 2px solid #5b9bff; position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; user-select: none;
    box-shadow: 0 10px 30px rgba(30,90,200,.35); transition: transform .15s; }
  .pk-pack:hover { transform: translateY(-4px) scale(1.02); }
  .pk-pack .pk-logo { font-size: 30px; }
  .pk-pack .pk-title { font-weight: 800; letter-spacing: 3px; color: #fff; font-size: 18px; }
  .pk-pack .pk-sub { font-size: 11px; color: #cfe0ff; letter-spacing: 2px; }
  .pk-pack.shake { animation: pkshake .5s ease-in-out 2; }
  /* 啦啦隊卡包（粉色）與女孩卡面 */
  .pk-pack.pk-girls { background: linear-gradient(160deg, #8f1c56 0%, #d62a8a 45%, #5c1238 100%);
    border-color: #ff5bb0; box-shadow: 0 10px 30px rgba(200,30,120,.35); }
  .pk-pack.pk-girls .pk-sub { color: #ffd6ec; }
  .pk-pack.pk-girls-d { background: linear-gradient(160deg, #7a1212 0%, #d63030 45%, #4a0c0c 100%);
    border-color: #ffb35b; box-shadow: 0 10px 30px rgba(200,80,30,.35); }
  .pk-pack.pk-girls-d .pk-sub { color: #ffe3c9; }
  /* 三個卡包同一水平排列（窄螢幕自動換行） */
  .pk-row { display: flex; gap: 26px; justify-content: center; align-items: flex-start;
    flex-wrap: wrap; margin: 8px 0 4px; }
  .pk-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .pk-col .pk-pack { margin: 4px auto; }
  .pk-col .panel-note { font-size: 12px; }
  .gcard .pc-photo { background: linear-gradient(180deg, #fdf2f8, #f3d9e7); }
  /* 女孩照片：縮圖已在伺服器端統一成 220×300 透明畫布 */
  .gcard .pc-photo img { object-fit: contain; object-position: center; }
  /* 直式人物卡（味全）：貼齊底部（名字區塊上緣），不懸空 */
  .gcard.g-bottom .pc-photo img { object-position: center bottom; }
  @keyframes pkshake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
  .pk-cards { display: grid; grid-template-columns: repeat(5, 158px); gap: 14px;
    justify-content: center; padding: 6px 0 14px; }
  .pk-cards .pcard { width: 100%; }
  @media (max-width: 900px){
    .pk-cards { grid-template-columns: repeat(2, minmax(0, 158px)); }
  }

  .pcard { width: 158px; height: 288px; perspective: 800px; cursor: pointer; }
  .pc-photo { flex: 1; min-height: 0; position: relative; background: #f4f6f8; overflow: hidden;
    display: flex; align-items: center; justify-content: center; }
  .pc-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
    position: relative; z-index: 1; }
  .pc-photo .pc-sil { position: absolute; font-size: 34px; opacity: .25; color: #90a0b5; }
  .pc-team-badge { position: absolute; top: 5px; right: 5px; z-index: 2; font-size: 9.5px;
    font-weight: 700; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); }
  .pc-nameband { display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px; padding: 3px 9px; flex-shrink: 0; }
  .pc-nameband .pc-name { font-size: 14.5px; font-weight: 800; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .pc-nameband .pc-kind { font-size: 9.5px; opacity: .9; flex-shrink: 0; }
  .pcard-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.7,.3,1); }
  .pcard.flipped .pcard-inner { transform: rotateY(180deg); }
  .pcard-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 11px;
    overflow: hidden; }
  .pcard-back { background: repeating-linear-gradient(45deg, #16233f 0 12px, #1b2c50 12px 24px);
    border: 2px solid #3d557f; display: flex; align-items: center; justify-content: center;
    font-size: 34px; }
  .pcard-front { transform: rotateY(180deg); background: var(--card); border: 2px solid var(--line);
    display: flex; flex-direction: column; }
  .pc-stats { padding: 4px 11px 2px; display: flex; flex-direction: column; gap: 1px;
    background: var(--card); flex-shrink: 0; }
  .pc-stats div { display: flex; justify-content: space-between; font-size: 10.5px; }
  .pc-stats span:first-child { color: var(--muted); }
  .pc-stats span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
  .pc-rar { padding: 2px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
    text-align: right; flex-shrink: 0; }
  .pc-new { position: absolute; top: 6px; left: 6px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 6px; z-index: 3; }

  /* 稀有度外框效果 */
  .pcard-front.r-N  { border-color: #3a4453; }
  .pcard-front.r-R  { border-color: #9fb6cc; box-shadow: 0 0 10px rgba(160,185,210,.35); }
  .pcard-front.r-SR { border-color: #e8c34a; box-shadow: 0 0 14px rgba(230,195,80,.5); }
  .pcard-front.r-SSR { border: 2px solid transparent;
    background-image: linear-gradient(var(--card), var(--card)),
      linear-gradient(120deg, #ff5a5a, #ffd24a, #4affa2, #4ab6ff, #c84aff, #ff5a5a);
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: 0 0 22px rgba(180,120,255,.55); }
  /* 彩虹只閃邊框：用遮罩挖空中間的環，動畫只作用在這個環上 */
  .pcard-front.r-SSR::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    z-index: 4; border-radius: 9px; border: 2.5px solid transparent;
    background: linear-gradient(120deg, #ff5a5a, #ffd24a, #4affa2, #4ab6ff, #c84aff, #ff5a5a)
      border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; mask-composite: exclude;
    animation: ssrglow 2.6s linear infinite; }
  @keyframes ssrglow { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }
  /* SP 傳奇時刻：金色卡框＋流光邊框環 */
  .pcard-front.r-SP { border: 2px solid transparent;
    background-image: linear-gradient(var(--card), var(--card)),
      linear-gradient(120deg, #8a5a10, #ffd76a, #fff3c4, #ffd76a, #8a5a10);
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: 0 0 22px rgba(255,200,80,.55); }
  .pcard-front.r-SP::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    z-index: 4; border-radius: 9px; border: 2.5px solid transparent;
    background: linear-gradient(120deg, #8a5a10, #ffd76a 30%, #fff3c4 50%, #ffd76a 70%, #8a5a10)
      border-box;
    background-size: 250% 250%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; mask-composite: exclude;
    animation: spglow 2.4s ease-in-out infinite alternate; }
  @keyframes spglow { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
  .pc-feat { padding: 3px 9px; font-size: 10.5px; font-weight: 800; flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255,200,80,.22), transparent);
    color: #eec95a; letter-spacing: .5px; }
  .rar-SP { color: #ffd76a; }
  .rar-N { color: #8a97a8; } .rar-R { color: #b8cee0; }
  .rar-SR { color: #eec95a; } .rar-SSR {
    background: linear-gradient(90deg,#ff7a7a,#ffd24a,#6affb2,#6ac6ff,#d47aff);
    -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* 稀有卡開出特效：全螢幕閃光＋卡片彈跳 */
  .pk-flash { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0; }
  .pk-flash.ssr { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.92),
    rgba(180,120,255,.4) 40%, transparent 72%); }
  .pk-flash.sp { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95),
    rgba(255,205,80,.45) 40%, transparent 72%); }
  .pk-flash.go { animation: pkflash .85s ease-out forwards; }
  @keyframes pkflash { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0} }
  .pcard.epic { position: relative; z-index: 5; animation: epicpop .65s cubic-bezier(.2,.8,.3,1.35); }
  @keyframes epicpop { 0%{transform:scale(1)} 45%{transform:scale(1.16) rotate(-1.5deg)}
    70%{transform:scale(1.06)} 100%{transform:scale(1)} }

  /* 開包機率說明 */
  .pk-rates { max-width: 420px; margin: 10px auto 0; font-size: 12px; color: var(--muted); }
  .pk-rates table { border-collapse: collapse; margin: 6px auto; }
  .pk-rates th, .pk-rates td { border: 1px solid var(--line); padding: 3px 10px;
    text-align: center; font-variant-numeric: tabular-nums; }
  .pk-rates th { font-weight: 400; }

  /* 卡冊 */
  .cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; }
  .cg-grid .pcard { width: 100%; cursor: default; height: auto; aspect-ratio: 158 / 288; }
  .cg-item { display: flex; flex-direction: column; gap: 6px; }
  .cg-up { font-size: 11.5px; padding: 5px 6px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--line); background: var(--card2); color: var(--yellow);
    font-weight: 700; }
  .cg-up:hover { border-color: var(--yellow); }
  .cg-cnt { font-size: 11.5px; text-align: center; color: var(--muted); padding: 4px 0; }
  @media (max-width: 480px){
    .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pk-rates table { font-size: 11px; }
  }
  .cg-grid .pcard-inner { transform: rotateY(180deg); }
  .cg-locked .pcard-front { filter: grayscale(1) brightness(.45) !important;
    animation: none !important; box-shadow: none !important; }
  .cg-locked .pcard-front::after { display: none; }

  .diamond-wrap { display: flex; gap: 14px; align-items: center; background: var(--card2);
                  border-radius: 8px; padding: 10px; }
  .count { font-size: 13px; color: var(--muted); line-height: 1.9; }
  .count b { color: var(--text); }
  .outs-dots span { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
                    background: #30363d; margin-right: 4px; }
  .outs-dots span.on { background: var(--red); }
  .lastplay { font-size: 13px; color: var(--yellow); }

  .boardbox { overflow-x: auto; }
  table.board { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
  table.board th, table.board td { border: 1px solid var(--line); padding: 3px 7px;
    text-align: center; font-variant-numeric: tabular-nums; }
  table.board th { color: var(--muted); font-weight: 400; }
  table.board td.tm { text-align: left; font-weight: 700; }
  table.board td.tot { font-weight: 700; color: var(--accent); }

  details { border-top: 1px dashed var(--line); padding-top: 8px; }
  summary { cursor: pointer; color: var(--accent); font-size: 13px; }
  table.lineup { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
  table.lineup th { color: var(--muted); font-weight: 400; text-align: left; padding: 2px 5px;
                    white-space: nowrap; }
  table.lineup td { padding: 2px 5px; border-top: 1px solid var(--line);
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.lineup td.pname { max-width: 6em; overflow: hidden; text-overflow: ellipsis; }
  /* 今日戰況欄位比球季 OPS 多，7 個數字欄位窄卡片放不下——外層可橫向捲動當安全網，
     數字欄位本身縮小 padding／欄名縮成單字，盡量不用捲就看得完 */
  .lineup-scroll { overflow-x: auto; }
  table.lineup.today th, table.lineup.today td { padding: 2px 4px; }
  table.lineup.today td.pname { max-width: 6em; }
  table.lineup.today th.num, table.lineup.today td.num { text-align: right; }
  .lu2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

  .plays { font-size: 12px; color: var(--muted); max-height: 150px; overflow-y: auto;
           border-top: 1px dashed var(--line); padding-top: 6px; }
  .plays div { padding: 2px 0; }
  .plays b { color: var(--text); }

  .ptt a { display: block; color: var(--accent); font-size: 13px; text-decoration: none;
           padding: 2px 0; }
  .ptt a:hover { text-decoration: underline; }
  .ptt .push { color: var(--green); font-weight: 700; margin-right: 6px; }

  .standings { margin-top: 26px; }
  .standings h2 { font-size: 17px; margin-bottom: 8px; }
  .foot { color: var(--muted); font-size: 12px; margin-top: 24px; line-height: 1.7; }
  /* 連不上伺服器時取代骨架卡的錯誤畫面（第一次載入就失敗才會出現；
     已經有資料在畫面上時改用標題列的 .offline-tag 提示，不清掉舊資料）。
     grid-column:1/-1 讓它橫跨整個卡片格線，不要只佔一欄。 */
  .load-error { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--line);
                border-radius: 12px; padding: 34px 20px; text-align: center;
                display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .load-error .le-icon { font-size: 34px; }
  .load-error .le-title { font-size: 17px; font-weight: 700; }
  .load-error .le-msg { color: var(--muted); font-size: 13px; max-width: 420px; line-height: 1.6; }
  .load-error .fx-btn { margin-top: 6px; }
  .load-error .le-auto { color: var(--muted); font-size: 12px; }
  /* 資料來源出問題時的橫幅（見 app.js 的 renderSourceWarning）。
     用紅底而不是小小的灰字：這是「你看到的東西是舊的」這種等級的訊息，
     不該讓人一眼掃過去就漏掉。 */
  .source-warning { background: color-mix(in srgb, var(--red) 14%, var(--card));
                    border: 1px solid var(--red); border-radius: 10px;
                    padding: 10px 14px; margin-bottom: 16px;
                    font-size: 13.5px; line-height: 1.7; }
  .source-warning b { color: var(--red); }

  .offline-tag { color: var(--red); font-weight: 700; font-size: 13px;
                 border: 1px solid var(--red); border-radius: 6px; padding: 1px 7px; }
  .offline-tag[hidden] { display: none; }

  .empty { color: var(--muted); padding: 40px; text-align: center; font-size: 15px;
           background: var(--card); border-radius: 12px; }
  .updated { color: var(--muted); font-size: 11px; text-align: right; }
  /* 卡片不夠寬時（依卡片實寬，非視窗寬）：投手內框改上下堆疊，避免擠壓跑版 */
  @container (max-width: 470px) {
    .sp-box { grid-template-columns: 1fr; }
    .sp { min-height: 0; }
  }
  /* 今日戰況表格比球季 OPS 多 4 欄，客/主兩邊並排時每邊至少要有 ~300px 才放得下
     不用捲動——門檻比上面 .sp-box 那組寬，卡片沒那麼寬時寧可先堆疊也不要並排擠到
     要橫向捲動 */
  @container (max-width: 610px) {
    .lu2 { grid-template-columns: 1fr; }
  }

  /* ===== 投打對戰歷史 ===== */
  .h2h-box > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
  .h2h-box[open] > summary { color: var(--text); }
  /* min-width:0 是格線／彈性子項的必備解藥：預設的 min-width:auto 讓子項不能縮到比
     內容的 min-content 還窄，而對戰表格每格都是 nowrap，min-content 就等於整張表的
     寬度——結果不是表格自己在 .h2h-scroll 裡橫向捲動，而是把整張卡片、整個頁面撐爆。 */
  .h2h-side { min-width: 0; }
  .h2h-title { font-size: 13px; margin: 8px 0 4px; font-weight: 700; }
  .h2h-scroll { overflow-x: auto; }
  .h2h-table { font-size: 11.5px; width: 100%; }
  .h2h-table td, .h2h-table th { padding: 2px 4px; white-space: nowrap; }
  /* 對特定投手那幾欄用灰底跟「對球隊」的欄位分開——兩組數字放在同一列，
     沒有視覺分隔的話很容易看串行、把生涯對戰誤讀成本季對戰 */
  .h2h-table .h2h-sp-col { background: var(--card2); }
  /* 樣本太小的數字調淡：8 個打數打出 .500 不代表什麼，不能跟 200 打數的 .300 一樣醒目 */
  .h2h-table .h2h-thin { opacity: .45; }
  .h2h-sp { font-size: 11.5px; color: var(--muted); margin-top: 5px;
            padding-top: 5px; border-top: 1px dashed var(--line); line-height: 1.6; }
  .h2h-sp b { color: var(--text); }

  /* ===== 勝率拆解（模型解釋）===== */
  .explain-box { margin-top: 8px; }
  .explain-box > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
  .explain-box[open] > summary { color: var(--text); }
  .ex-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
  .ex-table td { padding: 2px 4px; vertical-align: middle; }
  .ex-label { white-space: nowrap; color: var(--muted); }
  .ex-barcell { width: 55%; }
  .ex-delta { text-align: right; width: 46px; font-variant-numeric: tabular-nums; font-weight: 700; }
  .ex-run { text-align: right; width: 38px; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* 中線＝50%：往右長代表把勝率推向主隊、往左推向客隊 */
  .ex-bar { display: flex; align-items: center; height: 12px; }
  .ex-bar .ex-half { flex: 1; display: flex; height: 100%; }
  .ex-bar .ex-half.left { justify-content: flex-end; }
  .ex-bar .ex-mid { width: 1px; height: 100%; background: var(--line); flex: 0 0 1px; }
  .ex-bar .ex-fill { height: 100%; border-radius: 2px; min-width: 2px; }
  .ex-detailrow .ex-detail { color: var(--muted); font-size: 10.5px; padding: 0 4px 5px 4px; }
  .ex-foot { color: var(--muted); font-size: 10.5px; line-height: 1.6; margin-top: 4px; }

  /* ===== 季後賽機率 ===== */
  .odds-group { font-size: 15px; margin: 16px 0 6px; }
  .odds-scroll { overflow-x: auto; }
  .odds-table { min-width: 520px; }   /* 比這再窄機率條就沒有意義了，寧可捲動 */
  .odds-table td, .odds-table th { padding: 5px 6px; }
  .odds-cell { min-width: 150px; }
  .odds-wrap { display: flex; align-items: center; gap: 8px; }
  .odds-bar { flex: 1; height: 16px; border-radius: 4px; background: var(--card2); overflow: hidden; }
  .odds-fill { height: 100%; border-radius: 4px; }
  .odds-txt { flex: 0 0 52px; text-align: right; font-size: 11.5px; font-weight: 700;
              font-variant-numeric: tabular-nums; }
  .odds-method { margin-top: 16px; }
  .odds-method > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
  .odds-method-body { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
  .odds-method-body p { margin-bottom: 6px; }
  .odds-method-body b { color: var(--text); }

  /* ===== 野球魂對戰 ===== */
  .gs-lead { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.6; }
  .gs-pick-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
  .gs-pick-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .gs-pick-row select { background: var(--card2); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 6px 8px; font-size: 14px; min-width: 160px; }
  .gs-btn { background: var(--card2); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 9px 18px; font-size: 14px; cursor: pointer; }
  .gs-btn:hover { background: var(--line); }
  .gs-btn-primary { background: var(--accent); color: #04101f; font-weight: 700; border-color: var(--accent); }
  .gs-btn-primary:hover { filter: brightness(1.08); }
  .gs-err { color: var(--red); font-size: 13px; margin-top: 8px; min-height: 18px; }

  .gs-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 20px; padding: 16px; }
  @media (max-width: 760px) { .gs-wrap { grid-template-columns: 1fr; } }
  .gs-field-svg { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
  .gs-scorebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    margin-top: 10px; font-size: 14px; }
  .gs-teamscore { text-align: center; font-weight: 700; }
  .gs-teamscore b { font-size: 20px; margin-left: 6px; }
  .gs-you { font-size: 10px; background: var(--accent); color: #04101f; border-radius: 4px;
    padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
  .gs-inning { text-align: center; font-size: 13px; color: var(--muted); }
  .gs-count { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
  .gs-count b { color: var(--text); }

  .gs-phase-label { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
  /* 瞄準疊層：left/top/width/height 由 gsSyncZoneOverlay() 依相機投影算出的實際好球帶
     螢幕座標即時設定，讓游標一定貼在畫面上真正看到的那個好球帶框框上，而不是另外
     擺一塊跟畫面對不齊的固定面板。 */
  .gs-zone-overlay { position: absolute; cursor: none; z-index: 4; }
  .gs-aimzone-strike { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%;
    border: 2px solid rgba(88,166,255,.55); background: rgba(88,166,255,.08); pointer-events: none; }
  .gs-aim-ball { position: absolute; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid #222; transform: translate(-50%,-50%);
    pointer-events: none; box-shadow: 0 0 6px rgba(0,0,0,.5); left: 50%; top: 50%; }
  .gs-aim-hint { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 220px; font-size: 11px; color: #b7c2cf; text-align: center;
    margin-top: 6px; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
  .gs-zone-pitchtype-indicator { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    margin-bottom: 8px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text);
    background: rgba(8,14,24,.6); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
    display: flex; align-items: center; gap: 6px; pointer-events: none; }
  .gs-pitchtype-arrow { pointer-events: auto; cursor: pointer; background: rgba(255,255,255,.08);
    border: 1px solid var(--line); border-radius: 5px; color: var(--text); font-size: 14px;
    font-weight: 700; line-height: 1; padding: 4px 9px; touch-action: manipulation; }
  .gs-pitchtype-arrow:active { background: rgba(255,255,255,.2); }
  .gs-zone-clock-badge { position: absolute; top: -28px; right: 0; font-size: 12px; color: #ffd166;
    background: rgba(8,14,24,.6); border-radius: 4px; padding: 2px 6px; pointer-events: none; }
  .gs-bat-cursor { position: absolute; font-size: 26px; line-height: 1; transform: translate(-50%,-50%) rotate(-40deg);
    pointer-events: none; left: 50%; top: 50%; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }

  .gs-timing-track { position: relative; height: 34px; background: var(--card2); border-radius: 8px;
    overflow: hidden; margin: 12px 0; border: 1px solid var(--line); }
  .gs-timing-zone { position: absolute; right: 8%; width: 12%; top: 0; bottom: 0; background: rgba(210,153,34,.35); }
  .gs-timing-marker { position: absolute; top: 3px; bottom: 3px; left: 0; width: 8px; border-radius: 4px;
    background: var(--accent); }
  .gs-swing-actions { display: flex; gap: 10px; margin-bottom: 14px; }

  .gs-bullpen { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
  .gs-bullpen select { background: var(--card2); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 5px 8px; font-size: 13px; }

  .gs-log { background: var(--card2); border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
    color: var(--muted); max-height: 220px; overflow-y: auto; line-height: 1.7; }
  .gs-log div:first-child { color: var(--text); font-weight: 700; }

  .gs-final { text-align: center; }
  .gs-final-score { font-size: 26px; font-weight: 800; margin: 12px 0; }

  /* 快速模擬 + 戰術按鈕（3D 覆蓋層內） */
  .gs-quick { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
  .gs-quick .gs-btn { padding: 4px 8px; font-size: 11px; }
  .gs-tactics { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 6px; }
  .gs-tactics .gs-btn { padding: 4px 8px; font-size: 11px; }
  .gs-pinch-sel { background: #1c2330; color: #e6edf3; border: 1px solid #2d333b;
    border-radius: 6px; padding: 3px 5px; font-size: 11px; max-width: 130px; }

  /* 逐局比分 + box score */
  .gs-linescore-wrap { overflow-x: auto; margin: 14px 0; }
  .gs-linescore { margin: 0 auto; border-collapse: collapse; font-size: 13px; }
  .gs-linescore th, .gs-linescore td { border: 1px solid var(--line); padding: 4px 8px; text-align: center; min-width: 22px; }
  .gs-linescore .gs-ls-team { text-align: left; font-weight: 700; }
  .gs-linescore .gs-ls-tot { font-weight: 800; color: var(--accent); }
  .gs-box-details { margin: 12px 0; text-align: left; }
  .gs-box-details summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
  .gs-box-wrap { display: flex; gap: 20px; flex-wrap: wrap; }
  .gs-box-team { flex: 1; min-width: 280px; }
  .gs-box-team h4 { margin: 6px 0; font-size: 14px; }
  .gs-box { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
  .gs-box th, .gs-box td { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: center; }
  .gs-box .gs-bx-name { text-align: left; }
  .gs-rec-summary { font-size: 15px; margin: 6px 0 10px; }
  .gs-rec-recent { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
  .gs-w { color: var(--green, #3fb950); font-weight: 700; }
  .gs-l { color: var(--red); font-weight: 700; }
  .gs-muted { color: var(--muted); font-size: 13px; }

  /* 3D 舞台與覆蓋層 */
  .gs3d-stage { position: relative; width: 100%; height: 100%; background: #0c1420; }
  #gs3d-canvas { position: absolute; inset: 0; }
  #gs3d-canvas canvas { display: block; }
  #gs3d-overlay { position: absolute; inset: 0; pointer-events: none; }
  #gs3d-overlay > * { pointer-events: auto; }
  .gs3d-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(8,14,24,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
    padding: 6px 14px; text-align: center; color: #e6edf3; backdrop-filter: blur(4px); }
  .gs3d-score { display: flex; align-items: center; gap: 16px; font-size: 15px; }
  .gs3d-score .gs-inning { font-size: 12px; color: #b7c2cf; }
  .gs3d-score .gs-teamscore b { font-size: 20px; margin: 0 3px; }
  .gs3d-count { font-size: 11.5px; color: #b7c2cf; margin-top: 3px; }
  .gs3d-count b { color: #fff; }
  .gs-hand { font-size: 9px; color: #04101f; background: #ffd166; border-radius: 3px;
    padding: 0 3px; margin-left: 3px; vertical-align: 1px; }
  .gs-wp { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 10.5px; color: #b7c2cf; }
  .gs-wp-bar { flex: 1; height: 6px; border-radius: 3px; background: #c8102e; overflow: hidden; min-width: 80px; }
  .gs-wp-fill { height: 100%; background: #1b2a5b; transition: width .4s ease; }
  .gs-wp-pct { white-space: nowrap; }
  .gs-bases { position: relative; width: 26px; height: 26px; display: inline-block; margin: 0 2px; vertical-align: middle; }
  .gs-base { position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.4); transform: rotate(45deg); }
  .gs-base.on { background: #ffd166; border-color: #ffd166; box-shadow: 0 0 5px #ffd166; }
  .gs-base-2 { top: 0; left: 9px; }
  .gs-base-3 { top: 9px; left: 0; }
  .gs-base-1 { top: 9px; left: 18px; }
  .gs3d-topleft { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 5; }
  .gs-icon-btn { padding: 4px 9px; font-size: 13px; }
  .gs-paused-panel { text-align: center; }
  .gs-pickoff-row { display: flex; gap: 6px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
  .gs3d-controls { position: absolute; bottom: 12px; right: 12px; left: auto; transform: none;
    background: rgba(8,14,24,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
    padding: 8px 10px; text-align: center; color: #e6edf3; backdrop-filter: blur(4px);
    max-width: 170px; }
  .gs3d-controls .gs-phase-label { color: #e6edf3; font-size: 11.5px; margin-bottom: 7px; line-height: 1.3; }
  .gs3d-controls .gs-swing-actions { justify-content: center; flex-wrap: wrap; gap: 5px; }
  .gs3d-bullpen { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px;
    background: rgba(8,14,24,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px; }
  .gs3d-bullpen select { background: #1c2330; color: #e6edf3; border: 1px solid #2d333b;
    border-radius: 6px; padding: 4px 6px; font-size: 12px; max-width: 150px; }
  .gs3d-banner { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%) scale(.8);
    font-size: 44px; font-weight: 900; letter-spacing: 3px; color: #fff; opacity: 0;
    text-shadow: 0 3px 14px rgba(0,0,0,.8); pointer-events: none; white-space: nowrap;
    transition: opacity .18s ease, transform .18s ease; }
  .gs3d-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .gs3d-banner.good { color: #ffd23f; }
  .gs3d-banner.bad { color: #ff6b6b; }
  .gs3d-clock { color: #ffd23f; font-weight: 800; }
  .gs3d-log { position: absolute; bottom: 14px; left: 14px; width: 240px; max-height: 150px;
    overflow: hidden; background: rgba(8,14,24,.6); border-radius: 8px; padding: 8px 10px;
    font-size: 11.5px; color: #b7c2cf; line-height: 1.6; }
  .gs3d-log div:first-child { color: #fff; font-weight: 700; }

  /* 換打者出場卡：擋住整個 3D 畫面，逼玩家先看過打擊數據再點擊繼續（投球/打擊皆同） */
  .gs-battercard { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center;
    justify-content: center; background: rgba(6,10,18,.72); backdrop-filter: blur(2px); cursor: pointer; }
  .gs-battercard-inner { background: rgba(14,20,32,.92); border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px; padding: 22px 30px; text-align: center; color: #e6edf3; min-width: 240px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
  .gs-battercard-title { font-size: 12.5px; color: #ffd166; font-weight: 700; margin-bottom: 6px; letter-spacing: 1px; }
  .gs-battercard-name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
  .gs-battercard-pos { font-size: 12px; color: #b7c2cf; font-weight: 400; margin-left: 4px; }
  .gs-battercard-order { font-size: 12px; color: #b7c2cf; margin-bottom: 14px; }
  .gs-battercard-stats { display: flex; gap: 18px; justify-content: center; margin-bottom: 16px; }
  .gs-battercard-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .gs-battercard-stats b { font-size: 18px; color: #fff; }
  .gs-battercard-stats span { font-size: 10.5px; color: #b7c2cf; }
  .gs-battercard-hint { font-size: 11px; color: #8b96a3; margin-top: 4px; }
  .gs-battinfo { font-size: 10.5px; color: #b7c2cf; margin-top: 2px; }
  .gs-battinfo b { color: #fff; }
  /* ===== 野球魂：CPU 模擬觀戰 ===== */
  .gsw-board { position: absolute; top: 10px; left: 10px; background: rgba(8,14,24,.78);
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 8px; color: #e6edf3;
    backdrop-filter: blur(4px); }
  .gsw-line { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .gsw-line th { text-align: left; padding: 1px 8px 1px 2px; font-weight: 700; white-space: nowrap; }
  .gsw-line td { width: 18px; text-align: center; padding: 1px 0; color: #b7c2cf; }
  .gsw-line tr:first-child td { color: #7d8896; font-size: 10px; }
  .gsw-line td.cur { color: #ffd166; font-weight: 700; }
  .gsw-line td.r, .gsw-line td.h { width: 24px; color: #fff; font-weight: 800; }
  .gsw-line td.r { border-left: 1px solid rgba(255,255,255,.18); }
  .gsw-line tr.bat th { color: #ffd166; }
  .gsw-bso { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 10.5px; }
  .gsw-bso-row { display: inline-flex; align-items: center; gap: 3px; }
  .gsw-bso-row i { font-style: normal; color: #7d8896; font-weight: 700; margin-right: 1px; }
  .gsw-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
  .gsw-dot.b.on { background: #3fb950; }
  .gsw-dot.s.on { background: #ffd166; }
  .gsw-dot.o.on { background: #ff6b6b; }
  .gsw-inning { color: #b7c2cf; margin-left: auto; }
  .gsw-ctrl { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; align-items: center;
    flex-wrap: wrap; justify-content: flex-end; max-width: 55%; }
  .gsw-speed { display: flex; gap: 3px; }
  .gsw-btn { padding: 4px 9px; font-size: 12.5px; background: rgba(8,14,24,.78); color: #e6edf3;
    border: 1px solid rgba(255,255,255,.18); }
  .gsw-cards { position: absolute; left: 10px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
  .gsw-card { background: rgba(8,14,24,.78); border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    padding: 5px 10px 6px; color: #e6edf3; min-width: 190px; backdrop-filter: blur(4px); }
  .gsw-card-team { font-size: 10px; color: #7d8896; }
  .gsw-card-main { font-size: 14px; display: flex; align-items: center; gap: 2px; }
  .gsw-card-sub { font-size: 11px; color: #b7c2cf; margin-top: 1px; }
  .gsw-tag { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px; background: #2f81f7;
    color: #fff; font-size: 11px; font-weight: 800; text-align: center; margin-right: 5px; }
  .gsw-log { position: absolute; right: 10px; bottom: 12px; width: 220px; background: rgba(8,14,24,.78);
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 8px; color: #e6edf3;
    backdrop-filter: blur(4px); }
  .gsw-log-title { font-size: 11px; color: #7d8896; margin-bottom: 3px; }
  .gsw-log-row { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 2px 0;
    border-top: 1px solid rgba(255,255,255,.06); }
  .gsw-log-order { color: #7d8896; width: 12px; text-align: right; }
  .gsw-log-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gsw-log-row.good .gsw-log-res { color: #ffd23f; font-weight: 700; }
  .gsw-log-row.bad .gsw-log-res { color: #b7c2cf; }
  .gsw-halfcard { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none !important; opacity: 0; transition: opacity .2s ease; }
  .gsw-halfcard.show { opacity: 1; }
  .gsw-halfcard-inner { background: rgba(14,20,32,.9); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
    padding: 14px 26px; text-align: center; color: #e6edf3; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
  .gsw-halfcard-title { font-size: 12px; color: #ffd166; font-weight: 700; letter-spacing: 1px; }
  .gsw-halfcard-team { font-size: 20px; font-weight: 800; margin: 2px 0 8px; }
  .gsw-halfcard-list { display: flex; flex-direction: column; gap: 3px; font-size: 13px; text-align: left; }
  @media (max-width: 640px) {
    .gsw-line td:not(.r):not(.h) { display: none; }
    .gsw-btn { padding: 3px 6px; font-size: 11.5px; }
    .gsw-log { width: 150px; }
    .gsw-log-row:nth-child(n+3) { display: none; }
    .gsw-card { min-width: 0; }
  }
  /* ===== 野球魂：固定 5x5 觸控面板 ===== */
  /* 3D 的瞄準框是照相機投影貼上去的，畫面窄時會被壓成一條（375px 視窗實測整塊只有
     23×88px，每格 5×18px，手指完全點不到）。窄畫面改用這個尺寸固定的面板。 */
  .gs-grid-panel { display: flex; flex-direction: column; align-items: center; gap: 6px;
                   margin-bottom: 8px; }
  .gs-grid-hint { font-size: 11px; color: #b7c2cf; }
  .gs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
             width: min(300px, 78vw); }
  /* aspect-ratio 讓每一格是正方形，配上 min 寬度後每格至少 44px 左右——觸控目標的下限 */
  .gs-cell { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 5px;
             background: rgba(12,20,32,.55); cursor: pointer; padding: 0;
             touch-action: manipulation; }
  .gs-cell.strike { background: rgba(88,166,255,.22); border-color: rgba(88,166,255,.55); }
  .gs-cell:active { background: rgba(255,255,255,.5); }
  .gs-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                   justify-content: center; margin-bottom: 6px; }
  .gs-ptype-row { display: flex; gap: 4px; flex-wrap: wrap; }
  .gs-ptype-btn { padding: 6px 12px; font-size: 13px; }
  .gs-ptype-btn.active { background: var(--accent); color: #04101f; font-weight: 700;
                         border-color: var(--accent); }
  .gs-panel-clock { font-size: 13px; color: #ffd166; font-weight: 700;
                    font-variant-numeric: tabular-nums; }

  /* ===== 野球魂：投手體力條 ===== */
  .gs-stamina { display: inline-flex; align-items: center; margin: 0 6px; vertical-align: middle; }
  .gs-stamina-bar { width: 42px; height: 6px; border-radius: 3px;
                    background: rgba(255,255,255,.18); overflow: hidden; }
  .gs-stamina-fill { display: block; height: 100%; background: #3fb950; border-radius: 3px; }
  .gs-stamina-fill.mid { background: #d29922; }
  .gs-stamina-fill.low { background: #f85149; }

  /* ===== 野球魂：打今天這場 ===== */
  .gs-today-box:empty { display: none; }
  .gs-today-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
  .gs-today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr));
                   gap: 8px; margin-bottom: 16px; }
  .gs-today-game { background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
                   padding: 8px 10px; }
  .gs-today-teams { font-size: 14px; font-weight: 700; }
  .gs-today-at { color: var(--muted); font-weight: 400; margin: 0 3px; }
  .gs-today-sp { font-size: 11.5px; color: var(--muted); margin: 3px 0 6px; }
  .gs-today-btns { display: flex; gap: 6px; }
  .gs-today-btns .gs-btn { padding: 5px 10px; font-size: 12px; }
  .gs-today-sim { border-color: var(--accent); color: var(--accent); }

  /* ===== 野球魂：CPU 模擬結果 ===== */
  .gs-sim-tag { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .gs-sim-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px;
                 flex-wrap: wrap; }

  /* ===== 野球魂：逐球回放 ===== */
  .gs-rec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                padding: 2px 0; }
  .gs-replay-btn { padding: 2px 8px; font-size: 11px; }
  .gs-rp-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px;
                background: var(--card2); }
  .gs-rp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
  .gs-rp-head .gs-btn { margin-left: auto; padding: 3px 10px; font-size: 12px; }
  .gs-rp-list { max-height: 46vh; overflow-y: auto; padding: 6px 10px; }
  .gs-rp-inning { font-size: 12px; font-weight: 700; color: var(--accent);
                  margin: 8px 0 3px; position: sticky; top: 0; background: var(--card2); }
  .gs-rp-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: baseline;
               font-size: 12px; padding: 1px 0; }
  .gs-rp-cnt { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
  .gs-rp-score { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
  /* 好壞球、界外只是過程，淡化；有結果的球才是重點 */
  .gs-rp-plain { opacity: .45; }
  .gs-rp-good .gs-rp-desc { color: var(--green); }
  .gs-rp-bad .gs-rp-desc { color: var(--red); }
  .gs-rp-big .gs-rp-desc { color: var(--yellow); font-weight: 700; }
  .gs-rp-note .gs-rp-desc { color: var(--accent); }

  /* 戰況紀錄：小螢幕改成可收合（原本直接 display:none，手機整場看不到任何文字紀錄） */
  .gs-log-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 5;
                   padding: 6px 10px; display: none; }
  .gs-log-toggle.active { background: var(--accent); color: #04101f; }
  @media (max-width: 640px) {
    .gs-log-toggle { display: block; }
    .gs3d-log { display: none; }
    .gs3d-log.open { display: block; bottom: 52px; max-height: 34vh; overflow-y: auto; }
    .gs3d-controls { padding: 8px 10px; }
  }


/* 先發投手的資料來源標示（球迷整理的預告 vs 官方／實際登板） */
.sp-source { font-size: 11px; color: var(--muted); opacity: .85; margin: 2px 0 1px; }