/* 玩家資料頁 */
/* 門面改版（2026-08-21）：改用 mh-theme.css 的 Lyrical Parchment token，
   不再寫死 WP 後台灰／藍色。稀有度色直接沿用各遊戲成就目錄的 TIERS
   （例如 sight-read-game/public/achievements.js），不是這裡發明的新色。 */

/* ============================================================
 * 2026-10-05 照設計稿 player_profile_redesign_v2 改版。
 * 色票仍然只用 mh-theme.css 的 token —— 設計稿的 #45533a／#e9bd39
 * 就是 --mh-primary／--mh-honey 的近似值，不另立一份。
 * ============================================================ */

.mh-profile {
	padding: 4px 0 24px;
	font-family: var(--mh-serif, serif);
	color: var(--mh-ink, #1c1c17);
	--mhp-line: rgba(118, 120, 108, .22);
}
.mhp-ico { flex: 0 0 auto; }

/* ---- 頂端列（返回鍵＋頁名） ---- */
/* 沉浸模式藏掉主題導覽，這一列就是玩家離開這一頁的唯一出口（見 mh-profile.js
   的 renderNav）。沿用下面的 .mhp-btn-ghost，不另立一套按鈕規格。 */
.mhp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.mhp-nav .mhp-back { margin-top: 0; background: var(--mh-surface-hi, #fff); }
.mhp-logo { font-size: 12px; letter-spacing: .2em; color: var(--mh-outline, #76786c); text-align: right; }

/* ---- 標頭（立繪｜名字・晶片・按鈕｜等級圓環） ---- */
.mhp-head {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; gap: 26px; align-items: center;
	padding: 26px; margin-bottom: 18px;
	border: 1px solid var(--mh-border, #d9d6c9);
	border-radius: 28px;
	background: linear-gradient(135deg, var(--mh-surface, #f1eee5), var(--mh-parchment-warm, #f6eccc));
	box-shadow: var(--mh-shadow-card, 0 8px 24px -12px rgba(28,28,23,.35));
}
/* 背景浮水印音符。純裝飾，所以用偽元素（不進無障礙樹、不吃點擊）。 */
.mhp-head::before {
	content: "\266B"; position: absolute; right: 200px; top: -56px;
	font-size: 190px; line-height: 1; color: rgba(var(--mh-ink-rgb, 28,28,23), .045);
	transform: rotate(-12deg); pointer-events: none;
}
.mhp-portrait-frame {
	position: relative; z-index: 1;
	width: 170px; height: 170px;
	border-radius: 28px;
	border: 5px solid var(--mh-honey, #fed65b);
	box-shadow: var(--mh-shadow-lift, 0 10px 26px -8px rgba(28,28,23,.5));
	overflow: hidden;
	background: var(--mh-surface-hi, #fff);
}
.mhp-portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhp-portrait-fallback {
	display: flex; align-items: center; justify-content: center;
	color: var(--mh-primary, #455529); background: var(--mh-surface-hi, #fff);
}

.mhp-who { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mhp-eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--mh-primary-dim, #5d6d3f); }
.mhp-name {
	font-family: var(--mh-serif, serif); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12;
	font-weight: 600; color: var(--mh-primary, #455529); overflow-wrap: anywhere;
}
/* 改暱稱。鉛筆平常低調（opacity .5），hover/focus 才亮起來 —— 它不是主要動作，
   但必須**看得到**：以前完全沒有這個入口，站上 11 位真的玩過的玩家有 10 位
   永遠是「匿名樂手」。44px 是觸控下限，手機上點得到才算數。 */
.mhp-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mhp-name-edit { background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
	padding: 0 6px; min-width: 44px; min-height: 44px; opacity: .5; transition: opacity .15s; }
.mhp-name-edit:hover, .mhp-name-edit:focus-visible { opacity: 1; }
.mhp-name-editor { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mhp-name-input { font-size: 18px; padding: 6px 10px; min-height: 44px; max-width: 220px;
	border: 1px solid var(--mh-primary, #455529); border-radius: 6px; }
/* 錯誤訊息（重名、字數）自成一行，窄畫面才不會把輸入框擠掉。 */
.mhp-name-msg { flex-basis: 100%; font-size: 13px; color: #a33; min-height: 1em; }

.mhp-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.mhp-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 12px; border-radius: var(--mh-radius-pill, 999px);
	font-size: 13px; font-weight: 700; white-space: nowrap;
	border: 1px solid transparent;
}
.mhp-chip-title { background: rgba(104,67,98,.12); color: var(--mh-plum, #684362); border-color: rgba(104,67,98,.3); }
.mhp-chip-fact { background: var(--mh-surface-hi, #fff); color: var(--mh-muted, #45483d); border-color: var(--mh-border, #d9d6c9); }
.mhp-chip-icon { width: 18px; height: 18px; object-fit: contain; }
.mhp-chip-clef { height: 20px; width: auto; }

.mhp-sub { color: var(--mh-outline, #76786c); font-size: 13.5px; }
.mhp-head-btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.mhp-head-btns .mhp-btn-ghost { margin-top: 0; }

/* 等級圓環：--mhp-ring 是本級經驗百分比（JS 寫進來）。 */
.mhp-level-box { position: relative; z-index: 1; text-align: center; }
.mhp-ring {
	width: 126px; height: 126px; margin: 0 auto; padding: 8px; border-radius: 50%;
	background: conic-gradient(var(--mh-honey, #fed65b) 0 var(--mhp-ring, 0%), var(--mh-surface-dim, #dddad1) var(--mhp-ring, 0%) 100%);
}
.mhp-ring-inner {
	height: 100%; border-radius: 50%; background: var(--mh-surface-hi, #fff);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 8px;
}
.mhp-ring-inner b { font-size: 30px; line-height: 1.1; color: var(--mh-primary, #455529); font-weight: 600; }
.mhp-ring-inner span { font-size: 12px; color: var(--mh-outline, #76786c); line-height: 1.25; overflow-wrap: anywhere; }
.mhp-xp { margin-top: 9px; font-size: 12px; color: var(--mh-outline, #76786c); font-variant-numeric: tabular-nums; }

/* ---- 分頁 ---- */
.mhp-tabs {
	display: flex; gap: 6px; overflow-x: auto;
	background: var(--mh-surface, #f1eee5);
	border: 1px solid var(--mhp-line);
	border-radius: 20px;
	padding: 6px; margin-bottom: 18px;
	scrollbar-width: thin;
}
.mhp-tab {
	flex: 1 0 auto; min-width: 104px; min-height: 44px;
	padding: 10px 12px; border: 0; background: none;
	font: inherit; font-size: 15px; font-weight: 600; color: var(--mh-muted, #45483d);
	cursor: pointer; border-radius: 15px;
	transition: background-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.mhp-tab:hover { background: rgba(var(--mh-ink-rgb, 28,28,23), .05); }
/* 選中態刻意不用綠色（跟主色系衝突、也容易被誤讀成「已通過」的語意），
   改用蜂蜜金＋可讀金字，呼應選角頁的「已選中」語彙。 */
.mhp-tab.mhp-on { background: var(--mh-honey, #fed65b); color: var(--mh-gold-ink, #735c00); box-shadow: 0 3px 9px rgba(80,65,20,.10); }

/* ---- 卡片 ---- */
.mhp-card {
	border: 1px solid var(--mhp-line); border-radius: 24px;
	padding: 20px 21px; margin-bottom: 18px;
	background: rgba(var(--mh-surface-hi-rgb, 255,255,255), .82);
	box-shadow: 0 8px 24px rgba(var(--mh-ink-rgb, 28,28,23), .055);
}
.mhp-game-title {
	margin: 0 0 14px; font-family: var(--mh-serif, serif); font-size: 20px; font-weight: 600; color: var(--mh-primary, #455529);
	display: flex; align-items: center; gap: 8px; min-width: 0;
}
/* 遊戲圖示多半是 dashicons 字型圖示：它自帶 20px 的方框，不夾住的話
   窄畫面會被 flex 當成可壓縮項壓扁。文字那一段才是可以換行的。 */
.mhp-game-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.mhp-game-icon.dashicons { width: 20px; height: 20px; }
.mhp-game-title > span:not(.mhp-game-icon) { min-width: 0; overflow-wrap: anywhere; }
.mhp-muted { color: var(--mh-muted, #45483d); margin: 0; }
.mhp-empty { color: var(--mh-outline, #76786c); text-align: center; padding: 36px 12px; }

/* 文字型連結鈕（「看全部徽章 →」）。按鈕不是 <a>：它切分頁，不換頁。 */
.mhp-link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
	background: none; border: 0; cursor: pointer;
	font: inherit; font-size: 13px; font-weight: 700; color: var(--mh-primary, #455529);
}
.mhp-link:hover, .mhp-link:focus-visible { text-decoration: underline; }

/* ---- 儀表板：四格數字 ---- */
.mhp-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.mhp-metrics:empty { display: none; }
.mhp-metric {
	min-width: 0; padding: 16px 18px; border-radius: 20px;
	border: 1px solid var(--mhp-line); background: rgba(var(--mh-surface-hi-rgb, 255,255,255), .76);
}
.mhp-metric-label { font-size: 12px; color: var(--mh-outline, #76786c); margin-bottom: 7px; }
.mhp-metric-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; }
.mhp-metric strong { font-size: 26px; font-weight: 600; color: var(--mh-primary, #455529); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mhp-metric em { font-style: normal; font-size: 12px; color: var(--mh-primary-dim, #5d6d3f); }

/* ---- 儀表板：主欄＋側欄 ---- */
.mhp-dash { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .9fr); gap: 18px; align-items: start; }
.mhp-dash > .mhp-card { margin-bottom: 0; }
.mhp-dash + * { margin-top: 18px; }

.mhp-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.mhp-title-row h2 {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-family: var(--mh-serif, serif); font-size: 21px; font-weight: 600; color: var(--mh-primary, #455529);
}
.mhp-title-row h2 .mhp-ico { color: var(--mh-gold-ink, #735c00); }
.mhp-title-aside { font-size: 12px; color: var(--mh-outline, #76786c); text-align: right; }

.mhp-goal { background: var(--mh-surface, #f1eee5); border-radius: 18px; padding: 16px; margin-bottom: 20px; }
.mhp-goal-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 8px; }
.mhp-goal-bottom { display: flex; justify-content: space-between; gap: 10px; color: var(--mh-outline, #76786c); font-size: 12px; margin-top: 7px; }
.mhp-bar { height: 9px; background: var(--mh-surface-dim, #dddad1); border-radius: 99px; overflow: hidden; }
.mhp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mh-gold-ink, #735c00), var(--mh-honey, #fed65b)); }

/* 一列關卡（最近關卡／全部紀錄共用） */
.mhp-lv-row {
	display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center;
	padding: 12px 0; border-bottom: 1px solid var(--mhp-line);
}
.mhp-lv-row:last-child { border-bottom: 0; }
.mhp-lv-icon {
	width: 42px; height: 42px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mh-surface, #f1eee5); color: var(--mh-primary, #455529);
}
.mhp-lv-icon-boss { background: rgba(104,67,98,.12); color: var(--mh-plum, #684362); }
.mhp-lv-main { min-width: 0; }
.mhp-lv-name { display: block; font-size: 15px; font-weight: 600; color: var(--mh-ink, #1c1c17); overflow-wrap: anywhere; }
.mhp-lv-main small { display: block; font-size: 12px; color: var(--mh-outline, #76786c); margin-top: 3px; }
.mhp-lv-right { text-align: right; white-space: nowrap; }
.mhp-pct { font-size: 12px; font-weight: 700; color: var(--mh-primary-dim, #5d6d3f); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mhp-stars { color: var(--mh-honey, #fed65b); letter-spacing: 1px; -webkit-text-stroke: .4px var(--mh-gold-ink, #735c00); }

/* 全部紀錄：超過 8 關先收起來（列都還在 DOM 裡，只是不顯示）。 */
.mhp-lv-list-folded > .mhp-lv-row:nth-child(n+9) { display: none; }

/* ---- 側欄 ---- */
.mhp-side-sec { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--mhp-line); }
.mhp-side-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mhp-side-sec .mhp-title-row h2 { font-size: 19px; }

.mhp-ach { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.mhp-ach-badge {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center; font-size: 20px;
	background: var(--mh-parchment-warm, #f6eccc); color: var(--mh-outline, #76786c);
}
.mhp-ach b { display: block; font-size: 14px; font-weight: 600; }
.mhp-ach small { display: block; color: var(--mh-outline, #76786c); font-size: 12px; margin-top: 2px; }
.mhp-ach-locked { opacity: .55; }

.mhp-rank-box {
	border-radius: 18px; padding: 16px 17px;
	background: linear-gradient(135deg, var(--mh-primary, #455529), var(--mh-primary-dim, #5d6d3f));
	color: var(--mh-on-primary, #fff);
}
.mhp-rank-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mhp-rank-line small { display: block; font-size: 12px; opacity: .8; }
.mhp-rank-line strong { font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mhp-rank-change { font-size: 14px; font-weight: 700; white-space: nowrap; }
.mhp-rank-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); margin-top: 12px; overflow: hidden; }
.mhp-rank-bar i { display: block; height: 100%; background: var(--mh-honey, #fed65b); border-radius: 99px; }
.mhp-rank-note { font-size: 12px; opacity: .85; margin-top: 7px; }

.mhp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mhp-day { aspect-ratio: 1; border-radius: 7px; background: var(--mh-surface-dim, #dddad1); }
.mhp-day-on { background: #d5b545; }
.mhp-day-hot { background: var(--mh-primary-dim, #5d6d3f); }
.mhp-cal-note { margin-top: 8px; font-size: 12px; color: var(--mh-outline, #76786c); }

.mhp-tip {
	padding: 13px 14px; border-radius: 15px; font-size: 13px; line-height: 1.7;
	background: var(--mh-paper, #fcf9f0); border: 1px dashed var(--mh-outline, #76786c); color: var(--mh-muted, #45483d);
}
.mhp-tip-go { margin-top: 10px; }

/* ---- 統計方塊（全部紀錄卡的三格） ---- */
.mhp-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.mhp-stat {
	flex: 1 1 120px; min-width: 0; text-align: center;
	padding: 10px 8px; border-radius: 14px; background: var(--mh-surface, #f1eee5);
}
.mhp-stat-v { font-family: var(--mh-serif, serif); font-size: 20px; font-weight: 600; color: var(--mh-primary, #455529); font-variant-numeric: tabular-nums; }
.mhp-stat-l { font-size: 11px; letter-spacing: .06em; color: var(--mh-outline, #76786c); margin-top: 3px; }

/* ---- 窄畫面 ---- */
@media (max-width: 850px) {
	.mhp-head { grid-template-columns: 130px minmax(0, 1fr); }
	/* 名字欄在窄畫面會長高（晶片、按鈕換行），立繪若跟著置中就會掉到卡片中段。 */
	.mhp-portrait-frame { width: 130px; height: 130px; align-self: start; }
	.mhp-head::before { right: 20px; }
	.mhp-level-box { grid-column: 1 / -1; display: flex; align-items: center; gap: 15px; text-align: left; }
	.mhp-ring { width: 84px; height: 84px; margin: 0; padding: 6px; }
	.mhp-ring-inner b { font-size: 21px; }
	.mhp-ring-inner span { font-size: 10px; }
	.mhp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mhp-dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.mhp-logo { display: none; }
	.mhp-head { grid-template-columns: 88px minmax(0, 1fr); gap: 13px; padding: 16px; border-radius: 22px; }
	.mhp-portrait-frame { width: 88px; height: 88px; border-width: 3px; border-radius: 19px; }
	.mhp-eyebrow { font-size: 10px; }
	.mhp-chip { font-size: 11px; padding: 5px 9px; }
	.mhp-metrics { gap: 8px; }
	.mhp-metric { padding: 12px 11px; border-radius: 16px; }
	.mhp-metric strong { font-size: 21px; }
	.mhp-card { padding: 15px; border-radius: 20px; }
	.mhp-lv-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
	.mhp-lv-icon { width: 38px; height: 38px; }
	.mhp-tab { min-width: 92px; font-size: 14px; }
}

/* ---- 表格（只剩 renderRanksLegacy 在用；那支沒有人呼叫，留著對照） ---- */
/* 寬表在窄螢幕自己捲，頁面本身不能產生水平捲動 */
.mhp-scroll { overflow-x: auto; }
.mhp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.mhp-table th, .mhp-table td {
	padding: 9px 10px; text-align: left; border-bottom: 1px solid rgba(118,120,108,.16); white-space: nowrap;
}
.mhp-table th {
	color: var(--mh-outline, #76786c); font-weight: 700; font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .05em;
	border-bottom-color: var(--mh-border, #d9d6c9);
}
.mhp-table tbody tr:last-child td { border-bottom: 0; }
.mhp-table td.mhp-num, .mhp-table th.mhp-num { text-align: right; font-variant-numeric: tabular-nums; }
.mhp-lv-name { white-space: normal; font-weight: 700; color: var(--mh-ink, #1c1c17); }
.mhp-boss {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border-radius: 50%;
	background: rgba(186,26,26,.12); margin-right: 6px; font-size: 12px;
}
.mhp-pass, .mhp-fail {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 3px 9px; border-radius: var(--mh-radius-pill, 999px);
	font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.mhp-pass { background: rgba(79,164,106,.15); color: #2f6d47; }
.mhp-fail { background: var(--mh-surface-dim, #dddad1); color: var(--mh-muted, #45483d); }
.mhp-rank { font-family: var(--mh-serif, serif); font-variant-numeric: tabular-nums; }
.mhp-me { background: var(--mh-primary-soft, #dbeeb5); box-shadow: inset 3px 0 0 0 var(--mh-primary, #455529); }
.mhp-me td:first-child { border-radius: 6px 0 0 6px; }
.mhp-me td:last-child { border-radius: 0 6px 6px 0; }
.mhp-title-tag {
	margin-left: 6px; padding: 2px 9px; border-radius: var(--mh-radius-pill, 999px);
	background: rgba(104,67,98,.12); font-size: 11.5px; font-weight: 700; color: var(--mh-plum, #684362);
}

/* ---- 徽章 ---- */
.mhp-kind { margin-top: 16px; }
.mhp-kind:first-of-type { margin-top: 0; }
.mhp-kind-title { margin: 0 0 10px; font-size: 15px; color: var(--mh-primary, #455529); }
/* 稱號組標題用 plum，呼應頁首稱號晶片與排行榜稱號標籤的色彩規則。 */
.mhp-kind--title .mhp-kind-title { color: var(--mh-plum, #684362); }
.mhp-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.mhp-badge {
	position: relative;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	padding: 12px 8px 10px; border-radius: var(--mh-radius-sm, 10px);
	background: var(--mh-surface, #f1eee5);
	border: 2px solid var(--mh-surface-dim, #dddad1);
}
.mhp-badge-icon { font-size: 28px; line-height: 1; }
.mhp-badge-name { font-family: var(--mh-serif, serif); font-weight: 600; font-size: 13px; }
.mhp-badge-desc { font-size: 10.5px; color: var(--mh-muted, #45483d); line-height: 1.35; }
/* 已解鎖：邊框改用該項目的稀有度色（--tier-color 由 JS 依 TIERS 表填入）。 */
.mhp-badge.mhp-unlocked { border-color: var(--tier-color, var(--mh-surface-dim, #dddad1)); box-shadow: var(--mh-shadow-card, 0 8px 24px -12px rgba(28,28,23,.35)); }
.mhp-tier-tag {
	margin-top: 2px; font-size: 9.5px; font-weight: 700; color: #fff;
	padding: 1px 8px; border-radius: var(--mh-radius-pill, 999px);
	background: var(--tier-color, var(--mh-outline, #76786c));
}
/* 金色底用深金字，白色字在亮黃底上讀不清楚。 */
.mhp-badge.mhp-tier-3 .mhp-tier-tag { color: var(--mh-gold-ink, #735c00); }
/* 傳說級再加一圈低透明度發光，不用讀字也認得出最稀有的那顆。 */
.mhp-badge.mhp-tier-5.mhp-unlocked { box-shadow: 0 0 0 1px var(--tier-color), 0 0 20px -2px rgba(139,92,246,.55); }
/* 未解鎖：稀有度色是解鎖後的獎勵，不是預告，一律灰階＋鎖頭圖示
   （顏色與圖示雙重編碼，不是只靠透明度分辨）。 */
.mhp-badge.mhp-locked { opacity: .55; filter: grayscale(1); }
.mhp-badge.mhp-locked .mhp-badge-name { color: var(--mh-outline, #76786c); }
.mhp-lock {
	position: absolute; top: 6px; right: 6px;
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(var(--mh-ink-rgb, 28,28,23), .55); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 9px;
}
/* 目前裝備中的稱號：沿用選角頁「蜂蜜圈＋綠勾」代表已選中的語彙。 */
.mhp-badge.mhp-equipped { border-color: var(--mh-honey, #fed65b); }
.mhp-equip {
	position: absolute; top: -6px; right: -6px;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--mh-primary, #455529); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 11px;
	border: 2px solid var(--mh-surface-hi, #fff); box-shadow: var(--mh-shadow-card, 0 8px 24px -12px rgba(28,28,23,.35));
}

@media (max-width: 480px) {
	.mhp-head { padding: 14px; }
	.mhp-card { padding: 12px; }
}

/* ---- 我的教師分頁 ---- */
.mht-msg { margin-bottom: 12px; }
.mht-note { padding: 9px 12px; border-radius: 6px; font-size: 14px; }
.mht-ok { background: #ecfdf5; color: #065f46; }
.mht-err { background: #fef2f2; color: #991b1b; }

.mht-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.mht-scope { flex: 1 1 240px; min-width: 0; padding: 7px; }

.mht-btn {
	padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px;
	background: #fff; cursor: pointer; font: inherit; font-size: 13px;
}
.mht-btn:hover { border-color: #9ca3af; background: #f9fafb; }
.mht-primary { background: #2271b1; border-color: #2271b1; color: #fff; }
.mht-primary:hover { background: #135e96; border-color: #135e96; }
.mht-danger { color: #b91c1c; border-color: #fecaca; }
.mht-danger:hover { background: #fef2f2; border-color: #f87171; }

/* 邀請碼要能一眼抄對，所以放大、等寬、拉開字距 */
.mht-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 17px; letter-spacing: 3px; font-weight: 700;
	background: #f3f4f6; padding: 3px 10px; border-radius: 5px;
}
.mht-past { margin-top: 14px; color: #6b7280; font-size: 13px; }
.mht-past ul { margin: 6px 0 0 18px; }

.mht-bylock{font-size:12px;white-space:nowrap}

/* ---------------- 我的角色（立繪已搬到頁首，這裡只留等級/XP/大賢者/換裝） ---------------- */
.mhp-level { font-size: 20px; font-weight: 700; margin: 8px 0 4px; color: var(--mh-primary, #455529); }
/* 經驗條／大賢者進度條共用。純 CSS，不引入圖表函式庫（同後台總覽頁的作法）。 */
.mhp-xpbar { height: 10px; border-radius: var(--mh-radius-pill, 999px); background: var(--mh-surface-dim, #dddad1); overflow: hidden; margin: 4px 0 6px; }
.mhp-xpbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mh-primary, #455529), var(--mh-honey, #fed65b)); }

/* 通往選角頁的按鈕：全頁最重要的行動呼籲，用平台的「主要動作」蠟封規格。 */
.mhp-btn {
	display: inline-block; margin-top: 10px; 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));
}
.mhp-btn:hover, .mhp-btn:focus { filter: brightness(1.06); color: #fff; }

/* 頁首的「繼續冒險」：設計稿的金色主要鈕。不用蠟封紅 —— 那是「去選角色」
   這種一次性的大決定，這一顆是每天都會按的日常入口。 */
.mhp-btn-primary {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
	border-radius: var(--mh-radius-pill, 999px);
	background: var(--mh-honey, #fed65b); color: var(--mh-gold-ink, #735c00);
	font-weight: 700; text-decoration: none; line-height: 1.2;
	box-shadow: 0 3px 9px rgba(80,65,20,.14);
}
.mhp-btn-primary:hover, .mhp-btn-primary:focus { filter: brightness(1.04); color: var(--mh-gold-ink, #735c00); }

/* 訪客登入：次要動作，幽靈按鈕（不用純藍 .mh-btn，那個色票在這套系統裡沒有位置）。 */
.mhp-btn-ghost {
	display: inline-flex; align-items: center; margin-top: 10px; padding: 9px 20px; min-height: 44px; box-sizing: border-box;
	border-radius: var(--mh-radius-pill, 999px);
	background: transparent; border: 1px solid var(--mh-outline, #76786c);
	color: var(--mh-muted, #45483d); font-weight: 700; text-decoration: none; line-height: 1.2;
}
.mhp-btn-ghost:hover, .mhp-btn-ghost:focus { background: rgba(var(--mh-ink-rgb, 28,28,23), .05); color: var(--mh-ink, #1c1c17); }

/* ---- 徽記圖（v3，2026-10-06） ----
   圓形底座＋階級色雙圈由這裡畫；圖騰是遊戲目錄給的透明圖（SRG_ACH.imgOf）。
   框不在圖裡，所以 69 張的框必然一致。圖載不到時顯示名字的第一個字。 */
.mhp-art {
	position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #fff, var(--mh-surface, #f1eee5) 72%);
	box-shadow: 0 0 0 2px var(--tier-color, var(--mh-outline, #76786c)), 0 0 0 4px #fff,
		0 0 0 5px var(--tier-color, var(--mh-outline, #76786c)), 0 4px 10px -4px rgba(var(--mh-ink-rgb, 28,28,23), .4);
}
.mhp-art-sm { width: 42px; height: 42px; }
.mhp-art-lg { width: 84px; height: 84px; }
.mhp-art-img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.mhp-art-glyph { font-family: var(--mh-serif, serif); font-weight: 700; font-size: 22px; color: var(--tier-color, var(--mh-outline, #76786c)); }
.mhp-art-sm .mhp-art-glyph { font-size: 16px; }
.mhp-art-has-img .mhp-art-glyph { visibility: hidden; }
.mhp-art-off { filter: grayscale(1); opacity: .55; }
/* 徽章牆卡片裡的圖已經自帶灰階，卡片本身就不必再整張 grayscale 一次。 */
.mhp-badge.mhp-locked { filter: none; opacity: .8; }
.mhp-badge { gap: 6px; padding-top: 16px; }
.mhp-badge-lore { font-family: var(--mh-serif, serif); font-style: italic; font-size: 11px; line-height: 1.5; color: var(--mh-gold-ink, #735c00); }
.mhp-badges { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* 關卡名放不下時由 mh-profile.js 的 autoFit 縮字；這裡只負責讓句子不要留一個字在最後一行
   （徽記說明、今日建議）。text-wrap:pretty 不支援的瀏覽器（Firefox）照舊折行，不會壞。 */
[data-mh-profile] { text-wrap: pretty; }
/* 短標題（「穆茲卡傳奇 · 全部關卡紀錄」「會員　·　風之精靈笛手」）只在分隔點換行：
   中文預設每個字之間都能斷，balance 會斷成「全／部關卡紀錄」。keep-all 讓斷點只剩空白，
   anywhere 是保險 —— 真的一整串放不下時仍然會斷，不會撐破卡片。 */
[data-mh-profile] h2, [data-mh-profile] h3, .mhp-sub {
	word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}