Mobile
手機版不是把桌機版縮小。production 在 960px 以下換一套 chrome：較矮的 header、底部 tab bar、可橫向捲動的分類列。下面的數值全部來自 production 原始碼。
斷點：960px
只有一條線：md = 60rem = 960px。960 以上是桌機版，959 以下是手機版。
CSS 的 md: 與 JS 的 useBreakpoints（mobile = max-width 959px）是同一條線，兩邊不會出現「CSS 已經換版、JS 還沒換」的中間狀態。
手機版 chrome
Header
AllCryptoFinancePoliticsSports
TrendingSportsPortfolio
- 48px
- Header（手機）
- 48px
- 分類捲動列（sticky）
- 12px
- 內容區左右內距
- 68px
- Tab bar（+ 安全區）
示意圖。header、分類列、tab bar 的高度是 1:1；寬度近似手機。
| Part | Value | Production class |
|---|---|---|
| Header 高度 | 手機 48px · 桌機 72px | h-12 md:h-18 |
| Header 底色 | 手機 bg-primary、無底線 · 桌機 bg-header-bg | bg-primary md:bg-header-bg border-b-0 |
| Header 內容 | 手機收掉搜尋框與導覽連結；部分內頁左上角換成返回鈕 | max-md:hidden · showMobileBackButton |
| Tab bar | 固定在底部，68px + iPhone 底部安全區；只在手機出現 | fixed bottom-0 h-[calc(68px+env(safe-area-inset-bottom))] · md:hidden |
| Tab bar 項目 | Trending · Sports · Portfolio，icon 在上、文字在下 | Icon size=md + SmallText |
| Tab bar 選中 | 選中 text-brand-secondary · 其餘 text-tertiary | text-brand-secondary / text-tertiary |
| 內容區底部 | 留出與 tab bar 同高的空間，內容才不會被蓋住；桌機歸零 | pb-[calc(68px+env(safe-area-inset-bottom))] md:pb-0 |
| 內容區左右內距 | 手機 12px · 桌機 20px | px-3 md:px-5 |
| 文字 footer | 只在桌機出現，手機完全不顯示 | hidden md:block |
分類導覽
- 手機版從不把桌機的側欄整塊疊在內容上方。
- 第一層分類是一排可橫向捲動的純文字，黏在 header 下方（sticky），高 48px，捲軸隱藏。
- 全部用粗體；選中的是 text-primary，其餘 text-quaternary。不用底線、不用色塊。
- 往右捲過之後左緣出現漸層與向左箭頭；右端固定放這一列的工具（/sports 是搜尋）。
- 第一層的列上不顯示數量。第二層（例如聯賽）才用一顆「Categories ▾」小按鈕打開底部面板，面板裡的項目才帶數量。
手機沒有 hover
- 觸控螢幕沒有 hover。靜止的畫面就要看得出什麼可以點：品牌色、常駐底線、按鈕外觀。
- 回饋改由 pressed 負責——手指按下的瞬間就要看得到變化。
- 把為桌機寫的 hover 規則用到手機之前，先確認拿掉 hover 之後這個元件還成不成立。