/* ============================================================================
   station.css —— 車站指標系統 × 車票／PASS（首頁 Desktop 以 target mockup 為準）
   ----------------------------------------------------------------------------
   本檔的成功標準是「畫面有多接近 target mockup」，不是「有沒有用票券元素」。
   所有數值都是從 `打字風格提案.png`（1407×1118）量出來再換算到 1440 視窗，
   量測腳本留在 `C:/dev/probe/mock-measure.py` 與 `mock2.py`，改版前先重跑對照。

   量到的關鍵比例（mockup 值 → 1360 內容寬的對應值）：
     內容寬 1323/1407 = 94%              → --shell-max 1360、左右留白 40
     乘客票 522 : STATS 678 : 票根 123   → 39.5% : 1fr : 126px，總高 162
     左欄 894 : 間距 19 : 右欄 412       → 1fr : 20px : 420px
     車票 272 寬・票根 39 寬・高 152     → 1fr×3、票根 40、最小高 150
     榜單列距 47、表頭列高 43、票牌高 58
     footer 高 92、區塊間距 20–24、卡片圓角 14
   ============================================================================ */

/* --- 1. 色票：取自 mockup 實際取樣 --------------------------------------- */
:root {
  --bg: #F7F4ED;            /* 月台灰（取樣 247,244,237）*/
  --bg2: #EFEBE1;
  --panel: #FFFFFF;
  --panel2: #F4F6F9;        /* 表頭／次要底（偏冷，配深藍）*/
  --ink: #13305F;
  --muted: #6D7893;
  --primary: #1D3E77;
  --primary-deep: #13305F;  /* 站牌藍（取樣 16,48,98 / 14,41,93）*/
  --amber: #FAD32B;         /* 螢光黃（取樣 250,212,37）*/
  --amber-ink: #7A5A05;
  --gold: #E8B23A;
  --line: #E7E4DA;
  --line-strong: #CFCCC0;
  --primary-soft: #E7EBF4;
  --amber-soft: #FDF2CE;
  --card-shadow-color: rgba(19, 48, 95, .06);
  --card-shadow-hover-color: rgba(19, 48, 95, .11);
  --chart-grid: rgba(109, 120, 147, .18);
  --chart-primary-area: rgba(29, 62, 119, .09);

  --radius-card: 14px;
  --radius-button: 10px;
  --shadow-card: 0 4px 14px var(--card-shadow-color);

  --shell-max: 1360px;      /* 首頁與 topbar／footer 的內容寬 */
  --gutter: 40px;
  --pass-h: 162px;          /* 乘客票整條的高度 */
  --stub-w: 126px;          /* 大票根（KEEP TYPING）*/
  --tk-stub-w: 40px;        /* 小車票的票根 */
  --side-w: 420px;          /* 右欄（排行榜）*/
  --gap: 20px;
  --scallop: 6px;           /* 撕票孔半徑（太大會咬進卡片圓角，看起來像破損）*/
}

/* --- 2. 版式 -------------------------------------------------------------- */
h1,
h2 {
  font-weight: 900;
  letter-spacing: -.02em;
}

.eyebrow {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 3. topbar ------------------------------------------------------------ */
.topbar {
  padding-inline: max(16px, calc((100vw - var(--shell-max)) / 2));
  border-bottom: 2px solid var(--primary-deep);
  background: #FCFCF8;
}

.brand {
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

/* 帳號入口：topbar 右上的圓形頭像，點開才出現登出／切換形態
   （mockup 右上就是一顆圓形頭像，內容區沒有裸露的「登出」按鈕）。
   只在遊戲畫面出現 —— 登入頁、註冊頁、選夥伴頁不該看到帳號選單。 */
.account {
  position: relative;
  display: none;
}

body[data-screen="screen-home"] .account,
body[data-screen="screen-board"] .account {
  display: block;
}

.account-avatar {
  display: flex;
  width: 36px;
  height: 36px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--primary-deep);
  border-radius: 50%;
  background: #F6F0E2;
  box-shadow: none;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-avatar[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--amber);
}

.account-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 6px;
  width: 210px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(19, 48, 95, .18);
}

.account-who {
  margin: 0;
  color: var(--primary-deep);
  font-size: 14px;
  font-weight: 700;
}

.account-sub {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}

.account-menu button {
  min-height: 34px;
  padding: 4px 10px;
  border-color: var(--line-strong);
  box-shadow: none;
  font-size: 13px;
}

.home-msg {
  min-height: 0;
  margin: 0 0 8px;
}

.home-msg:empty {
  display: none;
}

main {
  padding: 20px var(--gutter) 0;
}

#screen-home {
  max-width: var(--shell-max);
}

/* --- 4. 乘客票：一張大票分成三區 ------------------------------------------
   撕票孔用「重複的半圓背景」畫在交界上，不用 mask —— mask 在部分瀏覽器
   會整塊消失，而背景漸層到處都支援。 */
.pass-strip {
  display: grid;
  grid-template-columns: 39.5% minmax(0, 1fr);
  gap: 8px;
  height: var(--pass-h);
  margin-bottom: 20px;
}

.pass-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 0 26px 0 22px;
  border-radius: var(--radius-card);
  background: var(--primary-deep);
  color: var(--white);
}

/* 乘客票的右緣＝撕線（半圓咬痕，露出頁面底色）*/
.pass-ticket::after {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: var(--scallop);
  background-image: radial-gradient(circle at 100% 50%, var(--bg) var(--scallop), transparent calc(var(--scallop) + .5px));
  background-size: var(--scallop) 14px;
  background-repeat: repeat-y;
  content: "";
}

.pass-ticket .specimen-frame {
  width: 110px;
  height: 110px;
  margin: 0;
  border: 0;
  border-radius: 16px;
  background: #F6F0E2;
  box-shadow: none;
}

.pass-body {
  min-width: 0;
}

.pass-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.pass-name h2 {
  margin: 0;
  color: var(--white);
  font-size: 25px;
  font-weight: 900;
}

.pass-ticket .pet-stage {
  padding: 2px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pass-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 9px 0 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pass-meta-sep {
  color: rgba(255, 255, 255, .35);
  font-weight: 400;
}

.pass-ticket .pet-xp {
  color: var(--white);
  font: inherit;
}

.pass-ticket .xp-bar {
  height: 11px;
  margin-top: 12px;
  border: 0;
  background: rgba(255, 255, 255, .22);
}

.pass-ticket .xp-bar-fill {
  background: var(--amber);
}

/* XP 里程碑本來就是「站」，畫成月台圓點 */
.pass-ticket .xp-ticks span {
  top: 50%;
  bottom: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
  opacity: .5;
  transform: translate(-50%, -50%);
}

.pass-ticket .pet-tonext {
  margin: 7px 0 0;
  color: var(--amber);
  font-size: 11px;
  text-align: left;
}

.pass-ticket .pet-tonext:empty {
  display: none;
}

/* 白色 STATS ＋ 黃色票根：同一張票的右半 */
.stats-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub-w);
  border-radius: var(--radius-card);
  background: #FCF9F4;
}

/* 左緣的咬痕，與乘客票的撕線對上 */
.stats-ticket::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -1px;
  bottom: 0;
  width: var(--scallop);
  background-image: radial-gradient(circle at 0 50%, var(--bg) var(--scallop), transparent calc(var(--scallop) + .5px));
  background-size: var(--scallop) 14px;
  background-repeat: repeat-y;
  content: "";
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 0 8px 0 4px;
}

.stats-row > div {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid var(--line);
}

.stats-row > div:first-child {
  border-left: 0;
}

.stats-row span {
  display: block;
  color: var(--primary-deep);
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stats-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.pass-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--amber);
  color: var(--primary-deep);
  text-align: center;
}

/* 票根與 STATS 的交界＝撕線 */
.pass-stub::before {
  position: absolute;
  top: 0;
  left: -1px;
  bottom: 0;
  width: 7px;
  background-image: radial-gradient(circle at 0 50%, #FCF9F4 5px, transparent 5.5px);
  background-size: 7px 16px;
  background-repeat: repeat-y;
  content: "";
}

.pass-stub::after {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: var(--scallop);
  background-image: radial-gradient(circle at 100% 50%, var(--bg) var(--scallop), transparent calc(var(--scallop) + .5px));
  background-size: var(--scallop) 14px;
  background-repeat: repeat-y;
  content: "";
}

.pass-stub-arrow {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.pass-stub-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}

/* --- 5. 首頁雙欄 ---------------------------------------------------------- */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  gap: var(--gap);
  align-items: start;
  padding-bottom: 28px;
}

.home-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.home-main > .card {
  margin: 0;
}

.home-side {
  min-width: 0;
}

/* --- 6. 面板通用：站牌 icon ＋ 標題 --------------------------------------- */
.card.wide {
  padding: 22px 20px;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(19, 48, 95, .05);
}

.panel-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.station-icon {
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--primary-deep);
}

/* 單色圖示：mockup 的車站標誌是白色線描，彩色 emoji 在 Windows 上一定會變成
   彩色小圖，跟整套指標系統的語彙不合，所以用內嵌 SVG。 */
.ico {
  width: 27px;
  height: 27px;
  fill: var(--white);
}

.board-plate-icon .ico {
  width: 21px;
  height: 21px;
  fill: var(--primary-deep);
}

.panel-heading-text {
  min-width: 0;
}

.panel-heading h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1.15;
}

.panel-lead {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* 排行榜入口：桌機右欄已常駐一份就藏起來（純 responsive，不複製功能）*/
@media (min-width: 1081px) {
  .board-entry {
    display: none;
  }
}

/* --- 7. 計時測驗與基本功：三張同尺寸橫向車票 ------------------------------ */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;
  margin-top: 18px;
}

.challenge-btn {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 9px;
  row-gap: 3px;
  min-height: 150px;
  padding: 16px calc(var(--tk-stub-w) + 16px) 16px 16px;
  border: 2px solid var(--primary-deep);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: none;
  text-align: left;
}

.challenge-btn:hover {
  border-color: var(--primary-deep);
  box-shadow: var(--shadow-card);
}

.challenge-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

/* 票根：黃色直立區 ＋ 箭頭，左緣咬痕 */
.challenge-btn::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--tk-stub-w);
  align-items: center;
  justify-content: center;
  background-color: var(--amber);
  background-image: radial-gradient(circle at 0 50%, var(--panel) 6px, transparent 6.5px);
  background-size: 6px 15px;
  background-repeat: repeat-y;
  color: var(--primary-deep);
  content: "→";
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
}

.challenge-icon {
  grid-row: 1;
  font-size: 20px;
  line-height: 1;
}

.challenge-title {
  color: var(--primary-deep);
  font-size: 20px;
  font-weight: 900;
}

.challenge-sub {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.challenge-best {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--panel2);
  color: var(--primary-deep);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- 8. 選擇練習關卡 ------------------------------------------------------- */
.lessons-panel .lesson-tabs {
  display: grid;
  grid-template-columns: repeat(3, 112px);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lesson-tab {
  min-height: 44px;
  border: 2px solid var(--primary-deep);
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
}

.lesson-tab:first-child {
  border-radius: 10px 0 0 10px;
}

.lesson-tab:last-child {
  border-radius: 0 10px 10px 0;
}

.lesson-tab + .lesson-tab {
  border-left-width: 0;
}

.lesson-tab.active {
  border-color: var(--primary-deep);
  background: var(--primary-deep);
  box-shadow: none;
}

/* chapter header 要薄 */
.chapter-card {
  margin-top: 14px;
  border-color: var(--line);
  box-shadow: none;
}

.chapter-card summary {
  padding-block: 8px;
}

.chapter-card .series-desc,
.chapter-title small {
  font-size: 12px;
  line-height: 1.45;
}

.chapter-index {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .04em;
}

/* article cards：兩欄目的地票券，右側統一黃色箭頭票根 */
.lesson-btn.article-btn {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 15px calc(var(--tk-stub-w) + 14px) 15px 15px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: none;
}

.lesson-btn.article-btn:hover,
.lesson-btn.article-btn.completed {
  border-color: var(--primary-deep);
}

.lesson-btn.article-btn::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--tk-stub-w);
  align-items: center;
  justify-content: center;
  background-color: var(--amber);
  background-image: radial-gradient(circle at 0 50%, var(--panel) 6px, transparent 6.5px);
  background-size: 6px 15px;
  background-repeat: repeat-y;
  color: var(--primary-deep);
  content: "→";
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
}

.article-btn .lesson-title {
  font-weight: 900;
}

.lesson-btn.lesson-node {
  border-width: 2px;
  border-color: var(--line-strong);
  box-shadow: none;
}

.lesson-btn.lesson-node.completed {
  border-color: var(--amber-ink);
  box-shadow: none;
}

/* --- 9. 排行榜：首頁 Desktop 的主要右欄 ----------------------------------- */
.board-panel {
  padding: 16px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: 0 2px 10px rgba(19, 48, 95, .05);
}

.board-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* 深藍票牌：左右兩側都有咬痕，像一張撕下來的票 */
.board-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 30px 0 18px;
  border-radius: 8px;
  background: var(--primary-deep);
  color: var(--white);
}

.board-plate::before,
.board-plate::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background-size: 6px 14px;
  background-repeat: repeat-y;
  content: "";
}

.board-plate::before {
  left: 0;
  background-image: radial-gradient(circle at 0 50%, var(--panel) 4px, transparent 4.5px);
}

.board-plate::after {
  right: 0;
  background-image: radial-gradient(circle at 100% 50%, var(--panel) 4px, transparent 4.5px);
}

.board-plate-icon {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--amber);
  font-size: 18px;
  line-height: 1;
}

.board-plate h2 {
  margin: 0;
  color: var(--white);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .06em;
}

.board-plate-arrow {
  color: rgba(255, 255, 255, .4);
  font-family: var(--font-mono);
  font-size: 15px;
}

.board-mode select {
  min-height: 32px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--primary-deep);
  font-size: 15px;
  font-weight: 700;
}

/* 榜單本體：時刻表排版 —— 高密度、細分隔線、等寬數字 */
.board-thead,
.board-tr {
  display: grid;
  grid-template-columns: 34px 84px 52px 92px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.board-thead {
  height: 43px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--panel2);
  color: var(--primary-deep);
  font-size: 13px;
  font-weight: 700;
}

.board-tr {
  height: 47px;
  padding: 0 12px;
  border-bottom: 1px solid #F0EFE9;
  color: var(--primary-deep);
}

.board-tr:last-child {
  border-bottom: 0;
}

.board-tr.is-self {
  border-radius: 6px;
  background: var(--amber-soft);
}

.board-td-rank {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* 金銀銅：實心圓牌 ＋ 一小截緞帶，不加光暈、不加動畫 */
.board-medal {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-deep);
  font-size: 13px;
  font-weight: 700;
}

.board-medal::before {
  position: absolute;
  top: -4px;
  width: 8px;
  height: 6px;
  border-radius: 2px;
  background: inherit;
  content: "";
  opacity: .75;
}

.medal-1 { background: #F2C230; }
.medal-2 { background: #CBD0D8; }
.medal-3 { background: #D9A06A; }

.board-td-seat {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.board-td-nick {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-td-speed {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-td-speed b {
  font-size: 20px;
  font-weight: 700;
}

.board-td-speed small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.board-td-when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

.board-empty {
  margin: 16px 8px;
  color: var(--muted);
  font-size: 14px;
}

.board-more {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 9px;
  background: var(--panel2);
  box-shadow: none;
  color: var(--primary-deep);
  font-size: 15px;
  font-weight: 700;
}

.board-more:hover {
  background: var(--primary-soft);
}

/* 完整排行榜畫面沿用同一套數字語彙 */
.board-speed b {
  font-variant-numeric: tabular-nums;
}

.board-row.top-1 { border-color: #F2C230; }
.board-row.top-3 { border-color: #D9A06A; }

/* --- 10. footer ----------------------------------------------------------- */
.station-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 92px;
  padding: 20px max(16px, calc((100vw - var(--shell-max)) / 2));
  background: var(--primary-deep);
  color: var(--white);
}

.station-footer-quote {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.station-footer-next {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  /* 這行是中文，不能沿用為全大寫拉丁字調的等寬字型與 .2em 字距 */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
}

.station-footer-arrow {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber);
  color: var(--primary-deep);
  font-size: 18px;
  font-weight: 700;
}

/* --- 11. ≤1180px：右欄先變窄，再收成單欄 ---------------------------------- */
@media (max-width: 1180px) {
  :root {
    --side-w: 360px;
    --gutter: 20px;
  }
}

@media (max-width: 1080px) {
  /* 單欄時排行榜要排在「計時測驗」之後、關卡清單之前。
     直接收成一欄它會落到整份關卡清單下面（實測 390px 時 top ≈ 10,300px＝看不到）。
     用 display: contents 把 .home-main 的卡片攤平，才能用 order 插隊。 */
  .home-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .home-main {
    display: contents;
  }

  .challenge-panel { order: 1; }
  .home-side { order: 2; }
  .lessons-panel { order: 3; }
  .progress-card { order: 4; }

  .pass-strip {
    grid-template-columns: 1fr;
    height: auto;
  }

  .pass-ticket {
    padding: 18px 22px;
  }

  .pass-ticket::after,
  .stats-ticket::before {
    display: none;
  }

  .stats-ticket {
    min-height: 116px;
  }

  .challenge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 12. ≤560px ----------------------------------------------------------- */
@media (max-width: 560px) {
  /* topbar 多了頭像，390px 要縮一點才不會把品牌擠到換行 */
  .brand {
    font-size: 14px;
  }

  .account-avatar {
    width: 30px;
    height: 30px;
  }

  :root {
    --stub-w: 64px;
    --tk-stub-w: 34px;
    --gutter: 14px;
  }

  .pass-ticket {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .pass-ticket .specimen-frame {
    width: 84px;
    height: 84px;
  }

  .pass-name h2 {
    font-size: 20px;
  }

  .pass-meta {
    font-size: 15px;
  }

  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 6px;
    row-gap: 14px;
  }

  .stats-row > div {
    padding: 0 12px;
  }

  .stats-row > div:nth-child(odd) {
    border-left: 0;
  }

  .stats-row span {
    font-size: 22px;
  }

  .pass-stub-text {
    font-size: 9px;
  }

  .panel-heading {
    grid-template-columns: 42px minmax(0, 1fr);
    row-gap: 12px;
  }

  .panel-heading h2 {
    font-size: 22px;
  }

  .station-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
  }

  .lessons-panel .lesson-tabs,
  .panel-heading .board-entry {
    grid-column: 1 / -1;
  }

  .lessons-panel .lesson-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .challenge-grid {
    grid-template-columns: 1fr;
  }

  .challenge-btn {
    min-height: 0;
  }

  /* 榜單在窄螢幕收成三欄：名次／學生（座號＋名字＋時間）／成績 */
  .board-thead {
    display: none;
  }

  .board-tr {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    height: auto;
    padding: 9px 6px;
  }

  .board-td-seat {
    grid-column: 2;
    grid-row: 1;
  }

  .board-td-nick {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin-left: 68px;
  }

  .board-td-when {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: 11px;
  }

  .board-td-speed {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .station-footer {
    min-height: 0;
    padding-block: 18px;
  }

  .station-footer-quote {
    font-size: 15px;
  }

  .station-footer-next {
    font-size: 12px;
    letter-spacing: .08em;
  }
}