/* =============================================
   SITE-NAV.CSS — 全站色票 + 頂欄（#main-header）唯一一份樣式
   首頁 index.html（在 base.css 之前 link）與所有獨立 SSR 頁（functions/_lib/site-chrome.js 輸出）共用同一份；
   頂欄 HTML 的唯一來源是 index.html 的 <header id="main-header">、互動在 js/site-nav.js。
   2026-10-14 從 css/base.css（色票/籃球主題/導覽列/手機頂欄）、css/components.css（登入鈕/用戶小元件/☰）、
   css/basketball.css（足球｜籃球膠囊/手機讓位）原樣搬來，規則先後順序不變。
   ★ 改了這支一定要升 index.html 的 site-nav.css?v=（獨立頁的版號也是從 index.html 讀的）
   ============================================= */

/* ---------- CSS 變數 ---------- */
:root {
  --bg-primary:    #07091a;
  --bg-secondary:  #0f1328;
  --bg-card:       rgba(255,255,255,0.05);
  --bg-card-hover: rgba(255,255,255,0.09);
  --border:        rgba(255,255,255,0.10);
  --border-accent: rgba(240,192,64,0.40);
  --gold:    #f0c040;
  --gold-dk: #c89a20;
  --red:     #e53935;
  --red-dk:  #b71c1c;
  --blue:    #1e88e5;
  --green:   #43a047;

  /* 主題色（由賽事切換覆蓋） */
  --accent:         #f0c040;
  --accent-dk:      #c89a20;
  --accent-glow:    rgba(240,192,64,0.35);
  --accent-bg:      rgba(240,192,64,0.08);
  --accent-bg-deep: rgba(240,192,64,0.05);
  --accent-border:  rgba(240,192,64,0.40);
  --accent-gradient: linear-gradient(90deg, #f0c040, #ff8c42);
  --hero-gradient:  linear-gradient(160deg, rgba(240,192,64,0.08) 0%, transparent 40%),
                    linear-gradient(220deg, rgba(229,57,53,0.06) 0%, transparent 40%);
  --particle-a:     rgba(240,192,64,0.06);
  --particle-b:     rgba(30,136,229,0.07);

  /* 語意色彩 */
  --success:    #4caf50;
  --success-dk: #388e3c;
  --warning:    #f5a623;
  --warning-dk: #e09000;
  --danger:     #f44336;
  --danger-dk:  #d32f2f;
  --info:       #29b6f6;
  --orange:     #ff8c42;

  --text-primary:   #f0f0f0;
  --text-secondary: #90a4ae;
  --text-muted:     #546e7a;

  /* 間距比例 */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* 字級比例 */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base: 14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  --header-h: 68px;
  --radius:   14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow:   0 8px 32px rgba(0,0,0,0.45);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);

  /* Z-index 層級系統 */
  --z-base:     1;
  --z-dropdown: 900;
  --z-header:   1000;
  --z-modal:    2000;
  --z-overlay:  9999;
  --z-toast:    10000;
  --z-top:      99999;
}

/* ---------- 籃球麥迪主題（SportMode 設 html[data-sport="basketball"]；顏色只准在這一處改） ---------- */
html[data-sport="basketball"] {
  /* 2026-10-13 用戶：「切過去畫面變化好大」→ 底色／卡片／邊框全部維持足球的深藍，籃球只換主色（橘）、
     品牌與麥迪；原本的深棕球場底（#160f0a／#24170f）留著註解、想回來再開 */
  /* --bg-primary:#160f0a; --bg-secondary:#24170f; --bg-card:rgba(255,190,130,.06); --bg-card-hover:rgba(255,190,130,.11); --border:rgba(255,190,130,.12); */
  --border-accent: rgba(255,122,26,0.45);
  --accent:         #ff7a1a;
  --accent-dk:      #d85f0a;
  --accent-glow:    rgba(255,122,26,0.35);
  --accent-bg:      rgba(255,122,26,0.10);
  --accent-bg-deep: rgba(255,122,26,0.06);
  --accent-border:  rgba(255,122,26,0.45);
  --accent-gradient: linear-gradient(90deg, #ff7a1a, #ffc46b);
  --accent-rgb:     255,122,26;
  --accent-2:       #ffc46b;
  --wood:           #c98a4b;
  --hero-gradient:  linear-gradient(160deg, rgba(255,122,26,0.08) 0%, transparent 40%),
                    linear-gradient(220deg, rgba(201,138,75,0.06) 0%, transparent 40%);
  --particle-a:     rgba(255,122,26,0.06);
  --particle-b:     rgba(30,136,229,0.07);
  --gold:    #ff7a1a;   /* 舊碼直接用 --gold 的也跟著變 */
  --gold-dk: #d85f0a;
}

/* ---------- 頂欄最小重置（:where 零權重，不壓過任何既有規則；獨立頁沒有 base.css 的重置靠它）---------- */
:where(#main-header) button { cursor: pointer; border: none; background: none; font-family: inherit; }
:where(#main-header) a { color: inherit; text-decoration: none; }
:where(#main-header) img { max-width: 100%; display: block; }
:where(#main-header) *, :where(#main-header) *::before, :where(#main-header) *::after { box-sizing: border-box; }

/* ---------- 導覽列 ---------- */
#main-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(7,9,26,0.85);
  /* 效能（2026-10-01）：18px→8px。背景已 85% 不透明、模糊半徑砍半肉眼幾乎看不出差，
     但這條常駐頂欄每捲一幀都要重算底下的模糊，半徑越大弱顯卡越吃力；弱機模式整個關掉（見 animations.css） */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  /* 2026-10-13：1400 → 1600。登入後右側用戶區＋足球｜籃球膠囊＋今晚小元件後，導覽剛好卡在臨界
     （「Soccer麥迪」比「籃球麥迪」寬十幾像素就被擠進第一級）；頂欄放寬、頁面本體仍 1400 */
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px; height: var(--header-h);
}
.logo {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; flex-shrink: 0;
}
.logo-icon { font-size: 28px; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.logo-svg  { filter: drop-shadow(0 0 8px var(--accent-glow)); flex-shrink: 0; }
.logo-title { display: block; font-size: 14px; font-weight: 700; color: var(--accent); line-height: 1; }
.logo-sub   { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* 賽事切換器 */
.tournament-switcher {
  display: flex; gap: 4px; flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border);
}
.tournament-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition);
  white-space: nowrap;
}
.tournament-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.tournament-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--tournament-color, var(--accent)), var(--tournament-accent, var(--accent-dk)));
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.tournament-btn .t-label { pointer-events: none; }
.tournament-btn .t-logo { height: 20px; width: 20px; object-fit: contain; vertical-align: middle; pointer-events: none; }

/* 拉桿 / backdrop：base 隱藏、只在 @media (max-width:768px) 顯示
   防止桌機看到漏出來的 button */
.pull-tab { display: none; }
.mobile-nav-backdrop { display: none; }

.main-nav {
  /* 重排（2026-07-02）：logo 左 / 選單置中 / 個人統計右 三區 */
  display: flex; gap: 2px;
  /* 允許被右側統計壓縮、避免整組被擠出螢幕 */
  flex: 1 1 auto; min-width: 0;
  justify-content: center;
  /* ⚠️ 不能加 overflow:hidden — 會把絕對定位的下拉選單裁掉（「更多點不開」bug 元兇）
     Phase 2 導覽只剩 5 項、不會再溢出、不需要 overflow 防護 */
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 12px; font-weight: 500;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-btn span { white-space: nowrap; }
.nav-btn i { font-size: 16px; }
/* 響應式：螢幕越窄、中間 nav padding / 字級越小、右側統計不動 */
@media (max-width: 1400px) {
  .nav-btn { padding: 7px 8px; }
}
@media (max-width: 1200px) {
  .nav-btn { padding: 7px 6px; font-size: 11px; }
  .nav-btn i { font-size: 14px; }
  .main-nav { gap: 0; }
}
@media (max-width: 1050px) {
  .nav-btn { padding: 6px 5px; }
  .nav-btn span { font-size: 10.5px; }
}
@media (max-width: 950px) {
  /* 極窄：nav-btn 只顯示 icon、標籤放 title、hover 才看 */
  .nav-btn span { display: none; }
  /* 頂欄「賽程」的待預測紅點也是 span、不能跟著標籤藏（隱藏與否交給 predict-hub.js 的 inline style）*/
  .nav-btn span.nav-predict-badge { display: flex; }
  .nav-btn { padding: 8px 8px; }
  .nav-btn i { font-size: 18px; }
}
.nav-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.nav-btn.active { color: var(--accent); }
.nav-btn.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; background: var(--accent); border-radius: 2px;
}

/* ─── 更多 dropdown ─── */
.nav-more-wrap { position: relative; }
.nav-more-btn { cursor: pointer; }
.nav-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-elevated, #171c3d);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 6px;
  display: none;
  z-index: 100;
  animation: nav-more-in 0.15s ease-out;
}
/* ⚠️ 關鍵幀不要碰 opacity — 動畫若被凍結（無頭瀏覽器 / 低階裝置）選單會整個隱形
   只動位移、就算動畫沒跑選單也完整可見 */
@keyframes nav-more-in {
  from { transform: translateY(-4px); }
  to   { transform: translateY(0); }
}
.nav-more-wrap.open .nav-more-menu { display: block; }
.nav-more-wrap.open .nav-more-btn { color: var(--accent); background: var(--bg-card); }
/* 下拉 affordance：小箭頭、開啟 / hover 時旋轉 */
.nav-more-chevron {
  font-size: 9px !important;
  width: auto !important;
  margin-left: 2px;
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.nav-more-wrap.open .nav-more-chevron { transform: rotate(180deg); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav-more-wrap:hover .nav-more-chevron { transform: rotate(180deg); opacity: 1; }
}
/* 賽事情報▾ 在導覽偏左側、下拉靠左展開比較自然 */
.nav-wrap-align-left .nav-more-menu { left: 0; right: auto; }
/* 桌機（有滑鼠）：hover 即展開、不用點 */
@media (hover: hover) and (pointer: fine) {
  .nav-more-wrap:hover .nav-more-menu { display: block; }
  .nav-more-wrap:hover .nav-more-btn { color: var(--text-primary); background: var(--bg-card); }
}
/* 頂欄自動收合（2026-10-02，js/site-nav.js fitDesktop 依「實際放不放得下」切 class，登入後右側用戶區變寬也照顧到）
   .nav-fit-collapse：球隊/球員一級鈕收進「更多▾」（下拉裡的同名備援項才現身）
   .nav-fit-icons   ：再放不下 → 全部只剩圖示（同 ≤950px 規則）*/
.nav-more-collapsed-item { display: none !important; }
/* 量測中（app.js fit）：關掉頂欄所有 transition，收合狀態切換不播動畫 */
.header-inner.nav-fit-measuring, .header-inner.nav-fit-measuring * { transition: none !important; }
/* 第零級 .nav-fit-snug：先把按鈕左右內距縮緊（登入管理員在 1440 只差幾十 px、縮緊就放得下、不用收合）*/
.main-nav.nav-fit-snug { gap: 0; }
.main-nav.nav-fit-snug .nav-btn { padding-left: 5px; padding-right: 5px; }
.main-nav.nav-fit-collapse .nav-btn-collapsible { display: none !important; }
.main-nav.nav-fit-collapse .nav-more-collapsed-item { display: flex !important; }
.main-nav.nav-fit-icons .nav-btn span { display: none; }
.main-nav.nav-fit-icons .nav-btn span.nav-predict-badge { display: flex; }
.main-nav.nav-fit-icons .nav-btn { padding: 8px 7px; }
.main-nav.nav-fit-icons .nav-btn i { font-size: 17px; }
/* .nav-fit-tight（掛在 header-inner）：圖示模式還放不下（多半是登入後右側用戶區太寬）→ logo 只留圖 */
.header-inner.nav-fit-tight .logo-text { display: none; }
/* 選中的區塊在下拉裡 → 更多按鈕自身顯示 active
   （備援項沒現身時不算：display:none 的元素 :has 照樣比對得到、要手動 :not）*/
.nav-more-wrap:has(.nav-more-item.active:not(.nav-more-collapsed-item)) .nav-more-btn,
.main-nav.nav-fit-collapse .nav-more-wrap:has(.nav-more-collapsed-item.active) .nav-more-btn { color: var(--accent); }
.nav-more-wrap:has(.nav-more-item.active:not(.nav-more-collapsed-item)) .nav-more-btn::after,
.main-nav.nav-fit-collapse .nav-more-wrap:has(.nav-more-collapsed-item.active) .nav-more-btn::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-more-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  background: none; border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
}
.nav-more-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-more-item.active { color: var(--accent); background: rgba(255,213,79,0.08); }
.nav-more-item i { font-size: 14px; width: 16px; text-align: center; }

/* 手機 drawer 分組小標 */
.mobile-nav-more-label {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 12px 16px 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.nav-btn.nav-btn-secondary { opacity: 0.85; }

/* 下拉分隔小標 */
.nav-more-divider {
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 10px 12px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.nav-more-t-logo {
  width: 16px; height: 16px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}
/* 目前選中的賽事高亮 */
.nav-more-item.tournament-active {
  background: rgba(255,213,79,0.1);
  color: var(--accent);
}

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; margin-left: auto;
  position: relative;
}
/* 任何模組註冊通知（friend-room / rogue / 任務...）→ 漢堡按鈕右上紅點 */
.hamburger.has-notif::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 9px; height: 9px;
  background: #ff3b30;
  border-radius: 50%;
  border: 2px solid var(--bg-base, #0e1430);
  box-shadow: 0 0 8px rgba(255,59,48,0.75);
  animation: rogue-dot-pulse 1.4s ease-in-out infinite;
  z-index: 1;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: var(--transition);
}

.mobile-nav {
  display: none; padding: 8px 16px 12px;
  border-top: 1px solid var(--border);
}
.mobile-nav .nav-btn { flex-direction: row; gap: 10px; width: 100%; padding: 12px 16px; }
.mobile-nav-status {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 16px; margin-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.mobile-nav-stat { display: flex; align-items: center; gap: 4px; }
.mobile-nav-stat-icon { font-size: 14px; }

/* ---------- 頂欄手機版 ---------- */
@media (max-width: 768px) {
  /* header 單列、自適應佈局：logo 自然寬 + switcher flex:1 填滿中間 + 右群組固定
     EN 切換、☰ 漢堡都改用底部「梯形拉桿」開啟 */
  :root { --header-h: 64px; }
  #main-header { height: var(--header-h); overflow: visible; }
  .header-inner {
    gap: 8px;
    padding: 0 10px;
    height: var(--header-h);
  }
  /* Logo 加大、品牌存在感更強 */
  .logo { gap: 8px; min-width: 0; flex: 0 0 auto; }
  .logo-title { font-size: 14px; white-space: nowrap; line-height: 1.1; }
  .logo-img, .logo .logo-img { width: 40px !important; height: 40px !important; }
  .logo-svg { width: 36px; height: 40px; }
  .logo-sub { font-size: 10px; white-space: nowrap; line-height: 1.1; }
  .logo-text { min-width: 0; overflow: hidden; }
  .main-nav { display: none; }
  /* ☰ 漢堡按鈕拿掉、改用底部梯形拉桿 */
  .hamburger { display: none !important; }

  /* 桌機版 EN 按鈕在手機隱藏（已搬進拉桿選單） */
  #lang-toggle-btn { display: none !important; }

  /* 賽事切換器：flex:1 自動撐滿 logo 跟右群組之間的空白
     3 顆按鈕內部用 flex:1 1 0 平均分配、按鈕越寬 padding 越大 */
  .tournament-switcher { flex: 1 1 auto; }
  #nav-user-widget { flex: 0 0 auto; }
  .nav-streak-widget { flex: 0 0 auto; }
  .nav-today-widget { flex: 0 0 auto; }

  /* 手機版：widget 略縮一點點 */
  .nav-today-widget { padding: 5px 9px; font-size: 12px; }
  .nav-today-widget .ntw-icon { font-size: 14px; }

  /* ── 賽事切換器：自適應寬度、按鈕平均分配填滿中間空間 ── */
  .tournament-switcher {
    flex: 1 1 auto;        /* 自動撐滿剩餘空間 */
    min-width: 0;
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
  }
  .tournament-switcher .tournament-btn {
    flex: 1 1 0;          /* 3 顆按鈕平均分配寬度 */
    padding: 6px 4px !important;
    background: transparent !important;
    border-radius: 8px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    min-width: 28px;     /* 至少容納 icon 22 + tiny padding，不會 overflow */
  }
  .tournament-switcher .tournament-btn .t-label { display: none !important; }
  /* 不再 grayscale / 壓 brightness、保留品牌色（EPL 紫色才看得到）
     非 active 只用 opacity 0.78 區分、加白色背景襯托提升對比 */
  .tournament-switcher .tournament-btn .t-logo {
    height: 22px !important; width: 22px !important;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
    opacity: 0.78;
    transition: opacity 0.2s ease, transform 0.18s ease, filter 0.2s ease;
  }
  /* 非 active 加極淡背景襯托、讓 EPL 紫色之類深色 logo 不被 header 吃掉 */
  .tournament-switcher .tournament-btn:not(.active) {
    background: rgba(255,255,255,0.05) !important;
  }
  .tournament-switcher .tournament-btn:active .t-logo { transform: scale(0.92); }
  .tournament-switcher .tournament-btn.active {
    background: linear-gradient(135deg, rgba(255,193,7,0.20), rgba(255,152,0,0.12)) !important;
    box-shadow: 0 0 0 1px rgba(255,193,7,0.45) inset;
  }
  .tournament-switcher .tournament-btn.active .t-logo {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  }

  /* 手機版漢堡選單裡的語系按鈕 */
  .mobile-nav-lang { margin-top: 6px; padding: 12px 16px; }

  /* ── 漢堡選單展開：浮動定位 + 實心背景，修透明 bug ── */
  .mobile-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(7,9,26,0.97);
    /* 97% 不透明的實色、毛玻璃看不出來卻很貴 → 拿掉（2026-10-01 效能） */
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    padding: 14px 14px 18px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    z-index: 998;
    animation: drawer-slide-down 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
  }
  @keyframes drawer-slide-down {
    from { transform: translateY(-100%); opacity: 0.4; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  /* drawer 頂端 sticky 關閉鈕（捲動時固定可見） */
  .mobile-nav-close {
    display: none;
  }
  .mobile-nav.open .mobile-nav-close {
    display: flex;
    align-items: center; justify-content: center; gap: 8px;
    position: sticky; top: -14px;         /* 抵銷 drawer 上 padding、貼齊頂端 */
    margin: -14px -14px 8px;              /* 拉滿到 drawer 邊緣 */
    padding: 12px 16px;
    background: rgba(7,9,26,0.98);
    border: none;
    border-bottom: 1px solid rgba(255,213,79,0.2);
    color: var(--accent, #ffd54f);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    z-index: 2;
    animation: none !important;           /* 不參與 stagger、永遠可見 */
    opacity: 1 !important;
  }
  .mobile-nav-close i { font-size: 16px; }

  /* 選單項目「從上掉落」stagger 動畫 */
  .mobile-nav.open .nav-btn,
  .mobile-nav.open .mobile-nav-status {
    opacity: 0;
    animation: nav-item-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .mobile-nav.open .nav-btn:nth-child(1)  { animation-delay: 60ms; }
  .mobile-nav.open .nav-btn:nth-child(2)  { animation-delay: 110ms; }
  .mobile-nav.open .nav-btn:nth-child(3)  { animation-delay: 160ms; }
  .mobile-nav.open .nav-btn:nth-child(4)  { animation-delay: 210ms; }
  .mobile-nav.open .nav-btn:nth-child(5)  { animation-delay: 250ms; }
  .mobile-nav.open .nav-btn:nth-child(6)  { animation-delay: 290ms; }
  .mobile-nav.open .nav-btn:nth-child(7)  { animation-delay: 320ms; }
  .mobile-nav.open .nav-btn:nth-child(8)  { animation-delay: 350ms; }
  .mobile-nav.open .nav-btn:nth-child(9)  { animation-delay: 380ms; }
  .mobile-nav.open .nav-btn:nth-child(10) { animation-delay: 410ms; }
  .mobile-nav.open .nav-btn:nth-child(11) { animation-delay: 440ms; }
  .mobile-nav.open .mobile-nav-status     { animation-delay: 480ms; }
  @keyframes nav-item-drop {
    from { transform: translateY(-22px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  /* ── 梯形拉桿（凸面感版本）─────────────────────────────
     頂亮 + 底暗 + drop-shadow 落地、跟 header 接縫處 -1px overlap 蓋掉邊框 */
  .pull-tab {
    position: absolute;
    /* 往上 18px、跟 header 重疊更多、減少下方凸出量 → 不再蓋住 sticky filter 文字 */
    top: calc(var(--header-h) - 18px);
    left: 50%;
    transform: translate(-50%, 0);
    width: 138px;
    height: 34px;
    background: transparent;       /* SVG 才是真正背景 */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    color: #FFD54F;
    text-shadow: 0 0 6px rgba(255,193,7,0.45), 0 1px 0 rgba(0,0,0,0.5);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: flex;                 /* @media 內：覆寫 base 的 display:none */
    z-index: 999;                  /* 高於 drawer (998)、展開時 tab 不會被蓋 */
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    /* 光暈現在內建在 SVG 的多層 stroke blur、不需要 CSS drop-shadow
       只留一個極淡的深色細陰影增加「漂浮」立體感、Y=B 保證不上漏 */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
    /* 開合時平滑移動 top */
    transition:
      top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  /* SVG 背景：filling button area */
  .pull-tab .pull-tab-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
  }
  /* 內容（chevron / label / dot / shimmer）疊在 SVG 上面 */
  .pull-tab > *:not(.pull-tab-bg) { position: relative; z-index: 1; }
  .pull-tab .pull-tab-chevron {
    font-size: 11px;
    line-height: 1;
    color: #FFC107;
    text-shadow: 0 0 8px rgba(255,193,7,0.7);
    animation: pull-tab-bounce 2s ease-in-out infinite;
    transition: transform 0.3s ease;
  }
  .pull-tab .pull-tab-label { line-height: 1; }
  @keyframes pull-tab-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }
  /* Shimmer 金色反光（用 clip-path 跟隨梯形形狀、不會溢出邊緣） */
  .pull-tab-shimmer {
    position: absolute;
    inset: 0;
    /* 跟 SVG path 相同的梯形形狀（140x34 座標、跟新的 path 同步） */
    clip-path: path('M 0,0 L 140,0 L 127,30 Q 125,34 121,34 L 19,34 Q 15,34 13,30 Z');
    background: linear-gradient(
      100deg,
      transparent 0%,
      transparent 30%,
      rgba(255,213,79,0.35) 50%,
      transparent 70%,
      transparent 100%
    );
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: -180% 0;
    animation: pull-tab-shimmer 5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes pull-tab-shimmer {
    0%   { background-position: -180% 0; }
    40%  { background-position: 280% 0; }
    100% { background-position: 280% 0; }
  }
  /* 移除舊的 ::before/::after 邊框、SVG 的 stroke 已經畫金邊了 */
  .pull-tab::before, .pull-tab::after {
    display: none;
  }
  /* 通知紅點 */
  .pull-tab-dot {
    position: absolute;
    top: 3px;
    right: 14px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(255,71,87,0.6);
  }
  /* 拉桿按下回饋 */
  .pull-tab:active {
    transform: translate(-50%, 2px);
  }
  /* 拉桿打開狀態：⌄ 旋轉成 ⌃ */
  .pull-tab.open .pull-tab-chevron {
    transform: rotate(180deg);
    animation: none;
  }
  /* 拖動中（JS 加 .dragging 後）跟手位移 */
  .pull-tab.dragging { transition: none; }

  /* ── 背景遮罩：點外面關選單 ── */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 996;
    animation: backdrop-fade-in 0.3s ease forwards;
  }
  .mobile-nav-backdrop.show { display: block; }
  @keyframes backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---------- 登入 / 用戶元件（原 components.css）---------- */
.nav-login-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: all 0.2s;
  white-space: nowrap;
}
.nav-login-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }

.nav-user-widget {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  cursor: pointer; flex-shrink: 0; transition: all 0.2s;
}
.nav-user-widget:hover { background: rgba(255,255,255,0.09); }
.nav-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-glow); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.nav-user-name { font-size: 13px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
  .nav-login-btn span { display: none; }
  .nav-user-name { display: none; }
}

@media (max-width: 768px) {
  /* logo 單行、副標藏 */
  .logo-sub { display: none; }
  /* 頭像只留圓頭、名字跟箭頭省掉（點擊行為不變）*/
  #nav-user-widget .nav-user-name,
  #nav-user-widget .fa-chevron-down { display: none; }

  /* ── ☰ 選單鈕取代梯形拉桿（2026-07-02：拉桿非主流、改主流右上漢堡）── */
  .pull-tab { display: none !important; }
  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-btn:active { transform: scale(0.94); background: rgba(255,255,255,0.10); }
}
/* ☰ 桌機不顯示 */
@media (min-width: 769px) { .mobile-menu-btn { display: none; } }
@media (max-width: 420px) {
  /* 非常窄機型（< 380px 螢幕等）：再進一步壓縮 */
  .header-inner { gap: 4px !important; padding: 0 8px !important; }
  /* logo 文字保留、改用更小字 + 截斷取代隱藏 */
  .logo .logo-title { font-size: 10px !important; }
  .logo .logo-sub { font-size: 8px !important; }
  .tournament-switcher { padding: 2px; gap: 1px; }
  .tournament-switcher .tournament-btn { padding: 4px 6px !important; min-width: 32px !important; }
  .tournament-switcher .tournament-btn .t-logo { height: 20px !important; width: 20px !important; }
  .nav-streak-widget { padding: 3px 6px; }
}

/* ── 足球｜籃球切換膠囊（2026-10-13 統一：全站唯一位置＝頂欄 logo 右側）──
   首頁與獨立頁共用這一份；膠囊 HTML 由 js/site-nav.js 的 toggleHtml 畫（首頁按鈕版／獨立頁連結版） */
.sport-toggle-slot:empty { display: none; }
.sport-toggle-top { flex: 0 0 auto; display: flex; align-items: center; }
.sport-toggle {
  display: inline-flex; align-items: stretch; height: 28px; padding: 2px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card);
}
.sport-toggle button,
.sport-toggle a {
  appearance: none; border: 0; background: transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 10px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sport-toggle button:hover,
.sport-toggle a:hover { color: var(--text-primary); }
.sport-toggle button.on,
.sport-toggle a.on { background: var(--accent); color: var(--bg-primary); }
.sport-toggle button:focus-visible,
.sport-toggle a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sport-toggle .st-ico { font-size: 13px; line-height: 1; }
/* 桌機頂欄放不下時（js/site-nav.js 自動收合）：膠囊先縮成只剩 ⚽｜🏀，別急著把球隊/球員收進「更多」
   （10/13 用戶：1720 寬球隊/球員竟被收合＝膠囊佔掉的寬度）*/
/* 第零級 .nav-fit-pill（js/site-nav.js 掛在 header-inner）：只縮膠囊文字、不動導覽按鈕 */
.header-inner.nav-fit-pill .sport-toggle .st-lbl { display: none; }
.header-inner.nav-fit-pill .sport-toggle button,
.header-inner.nav-fit-pill .sport-toggle a { padding-left: 7px; padding-right: 7px; }
/* 手機：只留 ⚽｜🏀 兩段（約 64px 寬） */
@media (max-width: 768px) {
  .sport-toggle .st-lbl { display: none; }
  .sport-toggle button,
  .sport-toggle a { padding: 0 8px; }
}
/* 手機頂欄讓位（js/site-nav.js fitMobile 量了放不下才掛在 .header-inner 上） */
@media (max-width: 768px) {
  #main-header .header-inner.sport-fit-1 { gap: 4px; }
  #main-header .header-inner.sport-fit-1 .nav-today-widget { padding: 4px 6px; }
  #main-header .header-inner.sport-fit-1 .sport-toggle button,
  #main-header .header-inner.sport-fit-1 .sport-toggle a { padding: 0 6px; }
  #main-header .header-inner.sport-fit-2 .logo-text { display: none; }
  #main-header .header-inner.sport-fit-3 .nav-today-widget .ntw-icon { display: none; }
}