/*
 * 多榜排行榜的版面。**只有結構與中性色**——配色由消費端的樣式表覆寫
 * （穆茲卡傳奇在 game.css 裡把它換成羊皮紙那一套）。
 * 這裡用的顏色一律走 mh-theme.css 的 token，平台不在時退回字面值。
 */

.mh-lb { display: block; }

.mh-lb-title { margin: 0 0 8px; font-size: 20px; }

/* 分頁列：手機上會超出寬度，讓它橫向捲而不是換行成兩三排。 */
.mh-lb-tabs {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; margin-bottom: 8px;
  scrollbar-width: thin;
}
.mh-lb-tab {
  flex: 0 0 auto;
  border: 1px solid rgba(var(--mh-ink-rgb, 43, 58, 74), .22);
  background: var(--mh-surface, #fff);
  color: inherit;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit; font-size: 14px; line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.mh-lb-tab:hover { border-color: rgba(var(--mh-ink-rgb, 43, 58, 74), .45); }
.mh-lb-tab.is-on {
  background: var(--mh-primary, #455529);
  border-color: var(--mh-primary, #455529);
  color: #fff;
  font-weight: 700;
}

.mh-lb-picker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mh-lb-cat { font: inherit; max-width: 100%; padding: 4px 6px; }

.mh-lb-msg { margin: 10px 0; opacity: .75; }

/* ---------------- 空榜／載入失敗（三種空白必須分得出來） ---------------- */
/* 空榜：吉祥物＋標題＋門檻＋出路，跟載入失敗不共用任何 class 或外觀。 */
.mh-lb-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; margin: 10px 0; padding: 18px 12px;
}
.mh-lb-empty h3 { margin: 0; font-size: 16px; }
.mh-lb-empty p { margin: 0; font-size: 13px; opacity: .75; }
.mh-lb-empty-art {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--mh-border);
}
/* 蠟封印章規格（與平台其他「主要行動」按鈕同一套語彙）。 */
.mh-lb-empty-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 4px; padding: 11px 24px;
  border-radius: var(--mh-radius-pill, 999px);
  background: linear-gradient(180deg, var(--mh-seal-a, #c62828), var(--mh-seal-b, #93000a));
  border: 1px solid var(--mh-seal-edge, #7a0006);
  color: #fff; font-weight: 700; text-decoration: none; line-height: 1.2;
  box-shadow: var(--mh-shadow-card, 0 8px 24px -12px rgba(28,28,23,.35));
}
.mh-lb-empty-cta:hover, .mh-lb-empty-cta:focus { filter: brightness(1.06); color: #fff; }

/* 載入失敗：說出原因＋重試。**不可以跟 .mh-lb-empty 長得一樣**——
   空白與「還在載」長得一樣，玩家分不出「沒有人」還是「壞了」。 */
.mh-lb-error {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; margin: 10px 0; padding: 18px 12px;
}
.mh-lb-error p { margin: 0; color: var(--mh-seal-a, #c62828); font-weight: 700; }
.mh-lb-retry {
  min-height: 44px; padding: 8px 22px;
  border: 1px solid rgba(var(--mh-ink-rgb, 43, 58, 74), .3);
  border-radius: var(--mh-radius-sm, 10px);
  background: var(--mh-surface, #fff); color: inherit;
  font: inherit; font-weight: 700; cursor: pointer;
}
.mh-lb-retry:hover { border-color: rgba(var(--mh-ink-rgb, 43, 58, 74), .55); }

/* 名冊列。**不是表格**：台座、compact、結算畫面共用同一種列。 */
.mh-lb-ledger { display: block; }
.mh-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px dashed rgba(var(--mh-gold-rgb), .7);
}
.mh-lb-row:last-child { border-bottom: none; }
/* min-width:0 不能省：沒有它，超長暱稱會把 metric 推出容器外，
   而 .srg-root 是 overflow:hidden —— 推出去的部分是被裁掉，不是可以捲。 */
.mh-lb-who { flex-grow: 1; min-width: 0; }
.mh-lb-name { display: block; font-weight: 700; overflow-wrap: break-word; }
.mh-lb-metric { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mh-lb-face-box {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--mh-border);
  background: var(--mh-surface); overflow: hidden;
}
.mh-lb-face { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mh-lb-face-none { color: var(--mh-outline); }

.mh-lb-rank { width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.mh-lb-sub { font-size: 12px; opacity: .65; }

.mh-lb-you {
  font-size: 12px; font-weight: 700;
  background: var(--mh-honey, #fed65b);
  color: #3a2f00;
  border-radius: 999px; padding: 1px 7px;
}
/* `--mh-honey` 只有 hex 沒有通道值，所以這裡直接寫字面值的半透明版。 */
.mh-lb-me { background: rgba(254, 214, 91, .22); }
.mh-lb-row--me { background: rgba(254, 214, 91, .22); }

@media (max-width: 480px) {
  .mh-lb-row { padding: 6px 2px; gap: 8px; }
}

/* ---------------- 台座（前三名） ---------------- */
/* 台座。第一名抬高：**用 margin 不用 transform** —— transform 會讓
   序號章的絕對定位基準跟著移動，實測序號會鑽進金環裡。 */
.mh-lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 4px 0 18px; }
.mh-lb-slot { flex-grow: 1; flex-basis: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mh-lb-slot--1 { margin-bottom: 26px; }
.mh-lb-slot--1 .mh-lb-face-box { border: 3px solid var(--mh-honey); box-shadow: 0 0 0 5px rgba(254, 214, 91, .28), var(--mh-shadow-lift); }
/* **`anywhere` 不是 `break-word`，而且 `max-width` 是必要的。**
   `.mh-lb-slot` 是 column flex ＋ `align-items:center`，所以名字是
   shrink-to-fit：它照著整個不可斷的單字決定自己的 min-content 寬度，
   而 `overflow-wrap:break-word` **不會縮小 min-content 寬度** —— 實測一個
   78 字的無空白暱稱讓 390px 的頁面長出 149px 的橫向捲動。
   名冊列免疫是因為 `.mh-lb-who{flex-grow:1;min-width:0}` 給了它明確的寬度。 */
.mh-lb-slot .mh-lb-name { font-family: var(--mh-serif); overflow-wrap: anywhere; max-width: 100%; }
.mh-lb-slot .mh-lb-char { font-size: 12px; opacity: .65; }
.mh-lb-slot .mh-lb-metric { font-weight: 700; margin-top: 2px; }

/* 序號章（蠟封）。**用負 margin 疊上頭像下緣，不用 absolute** —— 同樣是
   為了不讓 slot--1 的抬高（margin）跟章的定位基準打架。 */
.mh-lb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: -13px; z-index: 1;
  border-radius: 50%; border: 2px solid var(--mh-gold-ink);
  background: var(--mh-surface-hi);
  color: var(--mh-ink);
  font-weight: 800; font-size: 13px; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--mh-shadow-card);
}
.mh-lb-slot--1 .mh-lb-badge {
  border-color: var(--mh-seal-edge);
  background: radial-gradient(circle at 30% 28%, var(--mh-seal-a), var(--mh-seal-b));
  color: var(--mh-on-primary);
}
/* 第二名：銀。第三名：古銅。兩個 token 在 mh-theme.css，這裡只用不定義。 */
.mh-lb-slot--2 .mh-lb-badge {
  border-color: var(--mh-silver-edge);
  background: var(--mh-silver);
  color: var(--mh-ink);
}
.mh-lb-slot--3 .mh-lb-badge {
  border-color: var(--mh-bronze-edge);
  background: var(--mh-bronze);
  color: var(--mh-ink);
}

/* ---------------- 「你」那一列 ---------------- */
.mh-lb-youslot:empty { display: none; }
/* 版面是 full／compact 共用的，只有定位方式不同 —— 別把兩件事混進同一個
   variant 選擇器裡（曾經混過，compact 因此完全沒有版面，只有 position）。 */
.mh-lb-youbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-top: 2px solid var(--mh-honey);
  background: var(--mh-parchment-warm, #f6eccc);
}
/* full：釘在容器底部。**sticky 在 overflow:hidden 的祖先裡不可靠**，
   所以關卡選擇頁用 compact（那裡它就是最後一列，不 sticky）。 */
.mh-lb--full .mh-lb-youbar { position: sticky; bottom: 0; z-index: 2; }

/* ---------------- compact（關卡選擇頁密度） ---------------- */
/* compact 只畫前三名的橫列＋你那一列＋一個出口，不畫榜籤／分類選單。
   列的骨架與名冊列一樣（序號｜頭像｜名字｜數字），只是序號換成金銀銅章。 */
.mh-lb-mini { display: block; margin: 2px 0 8px; }
.mh-lb-mini-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(var(--mh-gold-rgb, 201, 168, 106), .7);
}
.mh-lb-mini-item:last-child { border-bottom: none; }
.mh-lb-mini-item .mh-lb-badge { margin-top: 0; flex-shrink: 0; }
.mh-lb-mini-item .mh-lb-name { overflow-wrap: anywhere; max-width: 100%; } /* 同上，見 .mh-lb-slot .mh-lb-name */
.mh-lb-mini-item .mh-lb-metric { font-weight: 700; }
.mh-lb-mini-item--1 .mh-lb-badge {
  border-color: var(--mh-seal-edge);
  background: radial-gradient(circle at 30% 28%, var(--mh-seal-a), var(--mh-seal-b));
  color: var(--mh-on-primary);
}
.mh-lb-mini-item--2 .mh-lb-badge { border-color: var(--mh-silver-edge); background: var(--mh-silver); }
.mh-lb-mini-item--3 .mh-lb-badge { border-color: var(--mh-bronze-edge); background: var(--mh-bronze); }

/* 出口。**不是滿版的大按鈕**：這一頁的主角按鈕是「進入關卡」，
   摘要的出口要退到次要層級（置中的描邊膠囊）。高度仍至少 44px（觸控目標）。 */
.mh-lb-more {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; margin: 10px auto 0;
  min-height: 44px; padding: 8px 22px;
  border: 1.5px solid var(--mh-gold-ink, #8a6f3d); border-radius: 999px;
  background: transparent; color: var(--mh-ink, #2b3a4a);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.mh-lb-more:hover { background: rgba(var(--mh-gold-rgb, 201, 168, 106), .18); }

/* compact：就是最後一列。**不可以 sticky** —— 它的祖先（.srg-root）是
   overflow:hidden，sticky 在那裡不可靠（見上面 full 規則同一個教訓）。 */
.mh-lb--compact .mh-lb-youbar { position: static; }

/* ---------------- 獨立排行榜頁（短代碼 [music_hub_leaderboard]） ---------------- */
.mh-lb-page { padding: 18px 16px 28px; }

/* 封面帶。屬於**頁面**不屬於元件 —— 玩家資料頁已經有自己的頁首，
   元件再長一條封面帶就是兩層標題。背景圖掛在這個容器本身（CSS 的
   background-image），不塞 scrim 子元素：mount() 開頭會清空 `.mh-lb-sheet`
   的 innerHTML，`.mh-lb-cover` 在它外面，不受影響，但同樣的道理沒有子元素
   可以偷懶——漸層與圖放在同一個 background-image 而不是另一層元素。 */
.mh-lb-cover {
  position: relative; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 18px 30px; text-align: center;
  /* 上下各壓一段、中間留亮：與進版頁的 .srg-splash-scrim 同一組數值。 */
  background-image:
    linear-gradient(to bottom, rgba(20,20,14,.62) 0%, rgba(20,20,14,.24) 46%, rgba(20,20,14,.72) 100%),
    var(--mh-lb-bg);
  background-size: auto, cover;
  background-position: center, center 38%;
}
/* **`ranks` 背景槽目前是空的**，所以無圖退路不是邊緣案例而是預設。
   退回深色帶，排版一字不動——要看起來像刻意的，不是像圖掛了。 */
.mh-lb-cover--noimg {
  background-image: linear-gradient(160deg, var(--mh-ink) 0%, var(--mh-primary) 100%);
}
.mh-lb-eyebrow {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .22em;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mh-lb-cover h1 {
  margin: 0; font-family: var(--mh-serif); font-size: clamp(32px, 9vw, 58px);
  font-weight: 700; line-height: 1.1; letter-spacing: .06em; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.mh-lb-sheet {
  margin-top: -20px; padding: 14px 14px 0;
  border-radius: var(--mh-radius-lg) var(--mh-radius-lg) 0 0;
  border-top: 1px solid rgba(var(--mh-gold-rgb), .55);
  background-color: var(--mh-paper);
  background-image: url(assets/weave.svg);   /* 相對樣式表解析 */
  background-size: 28px 28px;
  position: relative; z-index: 1;
}

/* ---- 獨立排行榜頁的返回列（2026-10-06，進沉浸模式之後的唯一出口） ----
   規格比照玩家資訊頁的 .mhp-back：幽靈膠囊鈕、44px 觸控高度。 */
.mh-lb-nav { margin: 0 0 12px; }
.mh-lb-back {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; box-sizing: border-box;
	border-radius: var(--mh-radius-pill, 999px);
	background: var(--mh-surface-hi, #fff); border: 1px solid var(--mh-outline, #76786c);
	color: var(--mh-muted, #45483d); font-weight: 700; text-decoration: none; line-height: 1.2;
}
.mh-lb-back:hover, .mh-lb-back:focus { background: var(--mh-surface, #f1eee5); color: var(--mh-ink, #1c1c17); }