:root {
  --bg: #16181d;
  --panel: #1f2229;
  --line: #2e323b;
  --text: #e8eaee;
  --muted: #9aa1ad;
  --accent: #3ba55c;
  --accent-hover: #46bd6a;
  --danger: #d9534f;
  --warn: #e0a030;
  font-family: "Microsoft JhengHei UI", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* 手機點按鈕、卡片時不要出現藍色的反白框（按下的回饋用各自的 :active 縮放、變色） */
html { -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
/* 捲軸（直的、橫的）：細、圓角、沒有箭頭，顏色跟著主題；電腦版、手機 App、Chrome 都是 Chromium 用這組 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--muted) 40%, transparent); border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
/* 其他瀏覽器（Firefox）：用標準屬性做出接近的樣子 */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; }
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1em; }
/* 沒有內容的錯誤訊息不佔位置（不然按鈕列、卡片底下會多一塊空白）；出錯時才出現 */
.error:empty { display: none; }
.spacer { flex: 1; }

button {
  background: var(--line); color: var(--text); border: 0; border-radius: 6px;
  padding: 7px 14px; font: inherit; cursor: pointer;
}
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-hover); filter: none; }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button.link { background: none; color: var(--muted); padding: 0 4px; text-decoration: underline; }
button.big { padding: 12px 24px; font-size: 16px; }

input, textarea, select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; font: inherit; width: 100%;
}
/* 文字框不能自己拖拉大小（拖寬會撐破排版），高度跟著內容自動長（kit.js） */
textarea { resize: none; max-width: 100%; }
/* 下拉選單：自己畫箭頭，跟右邊框的距離和文字跟左邊框的距離一樣（10px） */
select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa0a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
}

.login-box { max-width: 380px; margin: calc(24vh / var(--z, 1)) auto 0; padding: 0 16px; text-align: center; }
.login-box h1 { margin-bottom: 4px; }
/* 登入、無法連線畫面標題上方的 App 圖示 */
.login-logo { display: block; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 16px; }
/* 語言選單不用撐滿整行（手機上不會碰到螢幕邊緣） */
/* 登入畫面：按鈕不撐滿整行，置中 */
.login-box .provider-buttons { align-items: center; }
.login-box .provider-btn { width: 260px; max-width: 100%; }
/* 等待登入時：「瀏覽器沒有反應？」和「取消」中間隔開 */
#login-status > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#login-status > div > p { flex-basis: 100%; margin: 0 0 4px; }
.login-box .lang-picker { width: auto; min-width: 160px; max-width: 100%; }
/* 語言選單和左邊的地球圖示 */
.lang-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.code { font-size: 32px; letter-spacing: 6px; font-weight: bold; margin: 12px 0; user-select: all; }

#topbar { display: flex; align-items: center; gap: 4px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); height: 52px; }
.brand { font-weight: bold; margin-right: 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-logo { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.tab { background: none; border-radius: 0; padding: 16px 12px; border-bottom: 2px solid transparent; }
.tab.active { border-bottom-color: var(--accent); }

main { padding: 16px; max-width: 1100px; margin: 0 auto; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.toolbar input[type=search] { max-width: 320px; }
.toolbar label { display: flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--muted); }
.toolbar label input { width: auto; }
.toolbar select.rooms-lang { width: auto; flex: none; }
/* 房間頁的連線紀錄、建立房間：永遠排在同一行 */
.toolbar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; }
.toolbar-actions:empty { display: none; }
/* 版本號：小框框（不用括號） */
.ver-chip { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.5; }

table.rooms { width: 100%; border-collapse: collapse; }
table.rooms tr.room-row { cursor: pointer; }
.rooms th { text-align: left; color: var(--muted); font-weight: normal; padding: 8px; border-bottom: 1px solid var(--line); }
.rooms td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* 點欄位標題排序（rooms.js）：排序中的欄位標題變亮，後面加上箭頭 */
.rooms th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.rooms th.sortable:hover, .rooms th[aria-sort=ascending], .rooms th[aria-sort=descending] { color: var(--text); }
/* V 形圖示的位置一直留著（沒排序時看不到），點了欄寬不會變、字不會左右跑；由小到大時朝上 */
.rooms th.sortable > .ic { margin-left: 3px; visibility: hidden; transition: transform .15s; }
.rooms th[aria-sort=ascending] > .ic { visibility: visible; transform: rotate(180deg); }
.rooms th[aria-sort=descending] > .ic { visibility: visible; }
.room-name { font-weight: bold; }
/* 開房表單的「簡介」：右邊是「填入上次的介紹」 */
.host-desc-head { display: flex; align-items: center; gap: 8px; }
.host-desc-head > :first-child { flex: 1; }
/* 「填入上次的簡介」：比一般小按鈕再矮一點，不高過「簡介」這行字；這一行也固定留這個高度，按鈕出現、消失時下面不會跳 */
/* 選擇器要比後面的 button.small 優先 */
.host-desc-head button.host-fill-desc { gap: 4px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.host-desc-head { min-height: 20px; }
/* 拖檔案經過可以放下的地方（聊天室、發文框、留言框，kit.js 的 acceptDrop）：虛線框 */
.drop-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* 房間列表：房名和公開設定的小標籤（限好友、私人）一行，標籤跟房名垂直置中 */
.room-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.room-name-line > .room-name { min-width: 0; overflow-wrap: anywhere; }
.room-name-line > .room-pill { font-size: 11px; padding: 1px 8px; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.tag.warn { background: rgba(224, 160, 48, .15); color: var(--warn); }
/* 版本號後面的「版本不相容」：跟版本號隔開（空白不放在標籤裡，不然版本號會貼著標籤），字的上下左右也多留一點 */
.tag.warn { display: inline-block; margin-left: 8px; padding: 2px 8px; line-height: 1.4; vertical-align: middle; white-space: nowrap; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.card h2 { margin-top: 0; }
form.card label, details label { display: block; margin-bottom: 12px; color: var(--muted); }
form.card label input, form.card label textarea, form.card label select, details label input { margin-top: 4px; color: var(--text); }
details summary { cursor: pointer; color: var(--muted); }
details[open] summary { margin-bottom: 12px; }
.row { display: flex; gap: 8px; }

ul.players { list-style: none; padding: 0; margin: 0; }
ul.players li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* 清單裡只有一行提示（沒有資料、載入中、讀取失敗）時不要分隔線 */
ul.players > li.list-note { border-bottom: 0; }

/* 更新提示：左邊圖示、中間說明、右邊按鈕；按下去後按鈕鎖住並轉圈 */
.update-bar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.update-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.update-text { flex: 1; min-width: 0; }
.update-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 16px; }
.update-btn.busy, .update-btn.busy:disabled { opacity: 1; background: color-mix(in srgb, var(--accent) 35%, var(--panel)); color: var(--text); cursor: default; }
.update-btn.busy::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.join-bar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: rgba(59, 165, 92, .15); border-bottom: 1px solid var(--accent); }
/* 加入房間的狀態列：狀態＋房名一行（房名太長時省略），說明小字最多兩行，按鈕在右邊 */
.join-bar .join-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.join-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.join-title strong { flex: none; }
.join-room { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.join-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; }
.join-bar > button { flex: none; }
/* 網站加入：「重新開啟遊戲」＋「取消加入」兩顆按鈕；窄螢幕時按鈕換到下一行 */
.join-actions { flex: none; display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) { .web-join-bar.two { flex-wrap: wrap; } .web-join-bar.two .join-actions { flex: 1 1 100%; justify-content: flex-end; } }
/* 手機打開聊天室（訊息分頁的對話滿版）時不顯示加入狀態列：它會把聊天室往下推、擋住輸入框；回到列表或其他分頁就再出現 */
@media (max-width: 700px) { html:has(#pages > .page:not(.hidden) .dm.thread-open) .join-bar { display: none; } }
/* 電腦瀏覽器的加入按鈕下面：「沒有反應？直接用 Minecraft 加入」 */
.join-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.join-wrap .join-direct { white-space: nowrap; font-size: 12px; }
/* 房間頁：加入按鈕跟原本一樣撐滿右側欄，小連結置中在下面 */
.room-hero-side > .join-wrap { display: flex; align-items: stretch; gap: 6px; }
.room-hero-side > .join-wrap > .join-btn { width: 100%; padding-block: 10px; font-size: 15px; text-align: center; justify-content: center; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; max-width: 460px; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* ---------- 帳號 ---------- */
/* 底線畫成連續的一條：預設會在 @、g、y 這類往下的筆畫斷開，看起來像被字蓋住 */
a { color: var(--accent); text-decoration-skip-ink: none; }
/* 連不上伺服器時最上面的細條 */
.offline-bar { padding: 6px 12px; font-size: 13px; text-align: center; color: var(--text); background: color-mix(in srgb, var(--muted) 20%, var(--panel)); border-bottom: 1px solid var(--line); }
.notice { background: rgba(59, 165, 92, .15); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px; text-align: left; }
.provider-buttons { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.login-box.left { text-align: left; }
.card label.check, label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
label.check input { width: auto; margin: 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; color: #fff; font-weight: bold; flex: none; vertical-align: middle; }
.me-btn { display: flex; align-items: center; gap: 6px; background: none; padding: 4px 6px; }
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-head h2 { margin: 0; }
.badges { display: flex; gap: 6px; margin-top: 4px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent); color: #fff; }
label.button-like { display: inline-block; background: var(--line); color: var(--text); border-radius: 6px; padding: 7px 14px; cursor: pointer; margin: 0; }
form.card label.button-like { color: var(--text); margin-bottom: 0; }
label.button-like.with-icon, form.card label.button-like.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.strong-link { font-weight: bold; }

/* ---------- 好友、訊息 ---------- */
.count-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.presence::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--muted); }
.presence.online::before { background: var(--accent); }
.presence.playing::before { background: var(--warn); }
.presence.offline { color: var(--muted); }
.person { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.small-btn { padding: 3px 10px; }
.subtabs { display: flex; gap: 4px; margin-bottom: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* 子分頁放不下（英文、日文比較長）時在自己這一列左右捲動，不會把整頁撐寬 */
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex-shrink: 0; }
.subtabs button { background: none; border-radius: 0; border-bottom: 2px solid transparent; color: var(--muted); }
.subtabs button.on { color: var(--text); border-bottom-color: var(--accent); }
/* 子分頁還有放不下的按鈕（kit.js 的 scrollHint）：那一側蓋一層漸層和箭頭，提示可以左右滑。
   sticky 讓它一直貼在看得到的邊緣；負的 margin（含按鈕間距 4px）不佔排版的位置。
   箭頭用 SVG 畫（文字的 ‹ › 會偏下），跟按鈕文字垂直置中：按鈕底下有 2px 的選取底線，所以往上 1px */
:root { --chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="light"] { --chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6773' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6773' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6773' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6773' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } }
.subtabs.more-left::before, .subtabs.more-right::after { content: ''; position: sticky; z-index: 1; flex: none; width: 32px; pointer-events: none; }
.subtabs.more-left::before { left: 0; margin-right: -36px; background: var(--chev-l) left 2px top calc(50% - 1px) / 14px no-repeat, linear-gradient(to left, transparent, var(--bg) 60%); }
.subtabs.more-right::after { right: 0; margin-left: -36px; background: var(--chev-r) right 2px top calc(50% - 1px) / 14px no-repeat, linear-gradient(to right, transparent, var(--bg) 60%); animation: hint-nudge 1.6s ease-in-out 2; }
@keyframes hint-nudge { 50% { transform: translateX(3px); } }
/* Addon 的「排行 ▼」：文字後面接一個小箭頭 */
.subtabs .rank-btn { display: inline-flex; align-items: center; gap: 4px; }
ul.players li .spacer { text-align: right; }
#search-results:not(:empty) { margin-top: 8px; }
/* 訊息分頁：上面是「訊息｜好友」切換，下面的對話區填滿剩下的高度 */
.dm-page, .friends-page { display: flex; flex-direction: column; height: calc(calc(100vh / var(--z, 1)) - 140px); }
.friends-page > * { flex-shrink: 0; }
.friends-page > .friends-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 0; }
.friends-search ul.players { max-height: calc(30vh / var(--z, 1)); overflow-y: auto; }
/* 搜尋結果：滑桿放在搜尋框右邊外面（伸進卡片內距 14px = 滑桿 10px＋留 4px，一直留著滑桿的位置），右邊的按鈕跟搜尋框對齊；
   左邊也伸出 8px 給滑過時的底色（好友名單的列往左右伸 8px）。不橫向捲動：列伸出去的底色在邊緣切齊 */
.friends-search ul.players { margin: 0 -14px 0 -8px; padding: 0 4px 0 8px; scrollbar-gutter: stable; overflow-x: hidden; }
/* 搜尋中（people.js 加上 searching）：藏起分類和好友名單，搜尋結果往下長到底、在卡片裡捲動 */
.friends-page.searching > :is(.subtabs, .friends-list) { display: none; }
.friends-page.searching > .friends-search { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.friends-page.searching .friends-search ul.players { flex: 1 1 auto; min-height: 0; max-height: none; }
.dm { display: grid; grid-template-columns: 260px 1fr; gap: 16px; flex: 1; min-height: 0; }
.dm .card { margin: 0; display: flex; flex-direction: column; overflow: hidden; }
.dm-list ul { overflow-y: auto; }
/* 對話列表的捲軸放在卡片右邊的留白裡（列表往右多 12px，捲軸固定佔 10px），對話跟上面的「建立群組」一樣寬；手機不顯示捲軸，直接滑 */
.dm-list ul.conv-list { margin-right: -12px; padding-right: 2px; scrollbar-gutter: stable; }
/* 第一個對話的頭像框往上長（光環、皇冠、耳朵的光暈）會被列表的上緣切掉：把「建立群組」下面的 8px 間距移進列表裡（位置不變），給它畫。
   上面有群組邀請時不往上借（會蓋到最後一個邀請） */
.dm-list .group-create + ul.group-invites:empty + ul.conv-list { margin-top: -8px; padding-top: 8px; }
@media (pointer: coarse) {
  .dm-list ul.conv-list { margin-right: 0; padding-right: 0; scrollbar-gutter: auto; scrollbar-width: none; }
  .dm-list ul.conv-list::-webkit-scrollbar { display: none; }
}
/* 群組邀請不跟對話列表搶高度（被壓扁時底部會被切掉、多一條捲軸），照內容的高度顯示；捲動的是下面的對話列表 */
.dm-list ul.group-invites { flex: none; overflow: visible; }
.conv { cursor: pointer; border-radius: 6px; padding: 6px !important; border-bottom: 0 !important; }
.conv:hover, .conv.on { background: var(--line); }
/* 手機的列表和對話分兩頁：不用標出目前打開的是哪一個（按著、滑鼠指著照樣有底色） */
@media (max-width: 700px) { .conv.on:not(:hover) { background: none; } }
/* 對話之間留一點空隙：選取中和滑鼠指著的兩列底色不會黏在一起 */
.conv + .conv { margin-top: 3px; }
.conv-text { flex: 1; min-width: 0; }
.conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 對話列表右邊：最後一則的時間，未讀數在時間下面 */
.conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; align-self: flex-start; padding-top: 2px; }
.conv-time { white-space: nowrap; font-size: 11px; }
.conv-side .count-badge { margin-left: 0; }
.thread-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); min-height: 36px; }
.thread-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 2px; display: flex; flex-direction: column; gap: 8px; }
/* 捲動錨定由 messages.js 自己做（iPhone 沒有內建的）：關掉瀏覽器內建的，兩邊不會重複補 */
.thread-msgs { overflow-anchor: none; }
/* 捲軸的位置一直留著：訊息少（沒有捲軸）時自己的訊息也跟有捲軸時一樣離右邊一個捲軸寬，不會貼到最右邊（手機的捲軸浮在上面，不佔位置） */
.thread-msgs { scrollbar-gutter: stable; }
.msg { max-width: 75%; align-self: flex-start; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg-body { display: inline-block; text-align: left; padding: 6px 11px; border-radius: 12px; background: var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .msg-body { background: var(--accent); color: #fff; }
.thread-form { display: flex; gap: 8px; padding-top: 8px; }
.thread-form textarea { flex: 1; resize: none; }
/* 房間列表的房主那一行：只在手機（房主欄藏起來時）顯示在房名上面 */
.room-host-line { display: none; }
.col-name-narrow { display: none; }
@media (max-width: 700px) {
  .col-name-wide { display: none; }
  .col-name-narrow { display: inline; }
  .room-host-line { display: block; margin-bottom: 4px; }
  .room-host-line > .person { display: inline-flex; gap: 2px; max-width: 100%; }
  /* 這裡的間距只有 2px，通用的 -3px 會讓勾勾壓到名字：改成跟其他地方一樣，名字和勾勾之間留 3px */
  .room-host-line > .person > .verified { margin-left: 1px; }
}

/* ---------- @名稱 ---------- */
.handle-input { display: flex; align-items: center; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding-left: 10px; }
.handle-input > span { color: var(--muted); }
.handle-input input { border: 0 !important; margin: 0 !important; background: transparent !important; padding-left: 4px; }
p.ok { color: var(--accent); }
p.error.small { min-height: 0; }

/* ---------- 貼文 ---------- */
.posts-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.posts-layout:has(#post-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr) 360px; }
.post-detail { position: sticky; top: 0; max-height: calc(calc(100vh / var(--z, 1)) - 100px); overflow-y: auto; }
.detail-head { align-items: center; margin-bottom: 8px; }
.post-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6.5px; }
/* Markdown（貼文、訊息；ui/kit.js 的 mdText）：外框是 pre-wrap，區塊本身不留多餘的空白 */
.md-h { font-weight: 700; line-height: 1.3; margin: 4px 0 2px; }
.md-h1 { font-size: 1.35em; }
.md-h2 { font-size: 1.2em; }
.md-h3 { font-size: 1.07em; }
.md-list { margin: 2px 0; padding-left: 1.5em; }
.md-list > li { margin: 1px 0; }
/* 留言列表是 ul.players：裡面的 Markdown 清單不要套到列表每一列的樣式（flex、內距、底線） */
ul.players ul.md-list { list-style-type: disc; }
ul.players .md-list > li { display: list-item; padding: 0; border: 0; }
.md-quote { margin: 3px 0; padding: 1px 0 1px 10px; border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent); opacity: .85; }
.md-pre { margin: 4px 0; padding: 7px 10px; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent); overflow-x: auto; white-space: pre; font: 13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.md-code-inline { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 13%, transparent); font: .92em ui-monospace, SFMono-Regular, Consolas, monospace; }
/* 訊息泡泡不能比那一列寬：程式碼區塊（不換行）很長時，泡泡停在可用的寬度，程式碼在泡泡裡左右捲動，不會超出畫面 */
.msg-body { max-width: 100%; box-sizing: border-box; }
.msg-body .md-pre { max-width: 100%; }
/* 程式碼區塊：外面包一層，底色畫在外層；左邊是程式碼（太長自己左右捲動），右上角另外一欄放複製按鈕，捲動的文字不會跑到按鈕下面 */
/* 程式碼區塊：比卡片暗一點的底（像程式編輯器）加一圈細外框 */
.md-code { display: flex; align-items: flex-start; margin: 6px 0; max-width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--line); }
.md-code > .md-pre { flex: 1; min-width: 0; margin: 0; padding: 9px 12px; background: none; }
.md-code:last-child { margin-bottom: 0; }
/* .md-code 開頭：蓋過 .icon-btn 的灰色、內距；圖示平常淡淡的，滑過區塊才明顯，手機一直看得到 */
.md-code .md-copy { flex: none; margin: 4px 4px 0 0; padding: 4px; border-radius: 5px; color: inherit; background: none; transition: background .15s; }
.md-code .md-copy:hover { background: color-mix(in srgb, currentColor 14%, transparent); filter: none; }
.md-copy > svg { opacity: .5; transition: opacity .15s; }
.md-code:hover .md-copy > svg, .md-copy:focus-visible > svg, .md-copy.done > svg { opacity: 1; }
.md-code .md-copy.done { color: var(--accent); }
.msg.mine .md-code .md-copy.done { color: #fff; }
@media (hover: none) { .md-copy > svg { opacity: .8; } }
/* 程式碼上色（ui/highlight.js）：深色主題的配色；淺色主題在下面換一組。自己的訊息泡泡是綠底：程式碼區塊改成深色底，用深色配色 */
:root { --hl-kw: #c678dd; --hl-str: #98c379; --hl-num: #d19a66; --hl-com: #7f848e; --hl-fn: #61afef; --hl-lit: #56b6c2; --hl-prop: #e06c75; --hl-sel: #e5c07b; }
.hl-kw { color: var(--hl-kw); }
.hl-str { color: var(--hl-str); }
.hl-num { color: var(--hl-num); }
.hl-com { color: var(--hl-com); font-style: italic; }
.hl-fn { color: var(--hl-fn); }
.hl-lit { color: var(--hl-lit); }
.hl-prop { color: var(--hl-prop); }
.hl-sel { color: var(--hl-sel); }
.msg.mine .md-code { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .18); --hl-kw: #d7a1ec; --hl-str: #b5e08f; --hl-num: #f0b77e; --hl-com: #b9bec7; --hl-fn: #8cc8ff; --hl-lit: #7fd8e3; --hl-prop: #ff9aa2; --hl-sel: #f5d38b; }
.post-hidden { margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--danger); color: var(--danger); }
.post-images { display: grid; gap: 4px; margin-top: 8px; border-radius: 8px; overflow: hidden; }
.post-images.n2, .post-images.n3, .post-images.n4 { grid-template-columns: 1fr 1fr; }
/* 一張圖：一律填滿寬度（左右不留空白），高度跟著圖片的比例；太高的圖到上限（畫面高度的 85%）為止，超過的部分裁掉上下 */
.post-images img { display: block; width: 100%; height: auto; max-height: min(1000px, calc(85vh / var(--z, 1))); object-fit: cover; cursor: zoom-in; background: var(--line); }
.post-images.n2 img, .post-images.n3 img, .post-images.n4 img { aspect-ratio: 1; max-height: none; height: 100%; object-fit: cover; }
.post-images.n3 img:first-child { grid-row: span 2; }
.post-clip { width: 100%; max-height: 420px; margin-top: 8px; border-radius: 8px; }
.yt { position: relative; display: block; width: 100%; padding: 0; margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 44px; border-radius: 12px; background: rgba(0,0,0,.7); color: #fff; font-size: 20px; line-height: 44px; }
.post-actions { display: flex; gap: 4px; margin-top: 8px; }
.post-act { background: none; color: var(--muted); padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.post-act:hover { background: var(--line); filter: none; }
.post-act.on { color: var(--danger); }
#post-more, #pf-posts-more { display: block; margin: 0 auto 16px; }
.composer textarea { resize: none; }
.composer input[type=url] { margin-top: 8px; }
.composer input[type=url]:disabled { opacity: .5; }
.cmp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.cmp-bar > .muted { white-space: nowrap; }
/* 紅字、要按兩次的按鈕（捨棄、刪除、封鎖、退出群組…）按了第一次變成「確定…？」：字加粗，看得出要再按一次才會執行 */
:is(.danger-text, button.danger)[data-armed], .icon-btn.danger-text.armed, button.danger-text.danger { font-weight: 900; -webkit-text-stroke: .1px currentColor; }
/* 發文的 +、表情符號、程式碼三個按鈕：一樣大的方塊、圖示一樣大，垂直置中排成一列（+ 包在選單的 .dropdown 裡，要改成 flex 才不會往下偏） */
.cmp-bar > .dropdown { display: inline-flex; }
.cmp-bar :is(.cmp-add, .emoji-btn, .code-btn) { width: 34px; height: 34px; padding: 0; align-self: center; }
.cmp-bar :is(.cmp-add, .emoji-btn, .code-btn) svg { width: 22px; height: 22px; }
.cmp-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-previews:not(:empty) { margin-top: 8px; }
.cmp-thumb { position: relative; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; background: var(--line); }
.cmp-thumb img, .cmp-thumb video { width: 100%; height: 100%; object-fit: cover; }
.cmp-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; line-height: 20px; }
ul.comment-list li.comment { display: block; }
/* 留言框（兩行高）：在上面那條線和卡片底部中間（上下都是 14px） */
.comment-form { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
/* 上面 10px：「留言」標題跟右邊的「熱門｜最新」置中會多約 4px，標題到上邊框約 14px，跟文字框到下邊框（14px）一樣 */
.card.comments { padding-top: 10px; padding-bottom: 14px; }
.comment-form textarea { flex: 1; resize: none; }
/* 內距用比 ul.players li 更明確的選擇器蓋過去，不用 !important：!important 的內距動畫改不動，刪除時收起來會卡在一條細縫再突然消失 */
.notify { cursor: pointer; border-radius: 6px; }
ul.players li.notify { padding: 8px 6px; }
.notify:hover { background: var(--line); }
.notify-text { text-align: left !important; overflow-wrap: anywhere; }
.notify.unread .notify-text { font-weight: bold; }
.report-dialog form label.check { margin: 6px 0; }
.report-dialog textarea { margin-top: 8px; }
/* 檢舉：附上截圖的按鈕（旁邊是張數說明）、選好的縮圖 */
.report-images { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.report-picks { padding-top: 8px; }
.report-actions { justify-content: flex-end; margin-top: 12px; }
#pf-posts { margin-top: 8px; }

/* ---------- 程式內個人頁、⋯ 選單、備註、頭像裁切 ---------- */
.dropdown { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 160px; padding: 4px; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.menu-item { display: block; width: 100%; text-align: left; background: none; padding: 7px 10px; white-space: nowrap; }
.menu-item.with-icon { display: flex; align-items: center; gap: 8px; }
.menu-item:hover { background: var(--line); filter: none; }
.icon-btn { background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; }
.icon-btn:hover { background: var(--line); filter: none; }
button.done, button.done:disabled { background: var(--line); color: var(--muted); opacity: 1; cursor: default; }
/* 個人頁的「好友」：外觀跟其他「已完成」的按鈕一樣，但可以按（打開解除好友的小選單） */
button.done.friend-menu-btn { cursor: pointer; }
.back-link { margin-bottom: 8px; text-decoration: none; }
#tab-user .profile-head h2 { margin: 0; }
#tab-user .counts { margin: 10px 0 4px; }
/* 個人頁：數字那一行和頭像之間留多一點空間 */
.profile-head + .counts { margin-top: 8px; }
.joined { margin: 6px 0 0; }
/* 狀態文字、裝置圖示、加入按鈕排成一列並垂直置中（vertical-align: middle 對中文會讓圖示看起來偏高） */
.presence-line { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.presence-line > .presence { min-width: 0; }
.presence-device { margin-left: 8px; display: inline-flex; gap: 6px; }
/* 「加入」跟遊玩中的文字隔開一點 */
.presence-line > button, .presence-line > .btn { margin-left: 10px; }
.profile-actions { flex-wrap: wrap; align-items: center; margin-top: 10px; }
.bio { white-space: pre-wrap; overflow-wrap: anywhere; margin: 1em 0; }
.user-room { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; cursor: pointer; }
/* 房主那一行：名字太長時用「…」截斷（只截名字，頭像框不會被裁），不把右邊的「加入」擠出卡片 */
/* 手機上放不下（網站版的「加入」底下還有一行說明）時，「加入」換到下一行，房名、房主、世界有整行的寬度 */
.user-room { flex-wrap: wrap; }
.user-room > .spacer { flex: 1 1 220px; min-width: 0; }
/* 房名、房主、世界三行之間多留一點，頭像框才不會跟上下兩行擠在一起；頭像比房間列表小一號（20px），跟名字之間 6px */
.user-room-host { display: flex; align-items: center; gap: 6px; margin: 8px 0; min-width: 0; }
.user-room-host > .person { display: inline-flex; gap: 6px; min-width: 0; }
/* 拿掉一般個人連結頭像右邊多的外距，只留頭像框兩邊一樣的空間（框不會超出左邊、跟名字的距離固定） */
.user-room-host > .person > :is(.avatar, .deco-av.deco-av) { margin-block: 0; margin-inline: var(--deco-ext, 0px); }
.user-room-host .deco-name { min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.note-box { margin: 10px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; display: grid; gap: 6px; justify-items: start; }
.note-box textarea { resize: none; }
/* 個人頁卡片（別人的、自己的）的間距：頭像那一列 → 好友數和上線狀態（兩行靠近一點）→ 按鈕列 → 備註、自我介紹 → 加入日期 → 正在開的房間。
   每一段之間 14px，同一段裡的兩行 6px，加入日期跟著上面的自我介紹（10px） */
.profile-card > .counts { margin: 14px 0 0; }
.profile-card > .presence-line { margin: 6px 0 0; }
.profile-card > .profile-actions { margin-top: 14px; }
.profile-card > .error { margin: 8px 0 0; }
.profile-card > .note-box { margin-top: 12px; }
.profile-card > .bio { margin: 14px 0 0; }
.profile-card > .joined { margin-top: 14px; }
.profile-card > .bio + .joined { margin-top: 10px; }
.profile-card > .user-room { margin-top: 16px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dialog.crop-modal { width: min(340px, calc(92vw / var(--z, 1))); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.crop-canvas { display: block; width: 280px; height: 280px; margin: 8px auto; border-radius: 8px; background: #000; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 10px; }
.crop-zoom input { flex: 1; }
.post-detail.inline { position: static; max-height: none; overflow: visible; }
.post-detail.inline .detail-head, .post-detail.inline #detail-post { display: none; }
.post.open, .post-time { cursor: pointer; }
.post-time { color: var(--muted); text-decoration: none; }
.post-time:hover { text-decoration: none; }
/* 介面大小用 html 的 zoom（settings.js）：zoom 底下 vh、vw 也會跟著縮放（調小時「整個畫面高」只剩 90%、底下多出空白），
   所以這個檔案裡的 vh、vw 一律除以 --z（settings.js 設成目前的 zoom）換回真正的畫面大小 */
/* 寫成 .dialog.lightbox：一般對話框的 .dialog（寬 460px、可捲動）寫在後面，不能蓋過全螢幕的圖片預覽。
   不用 vw/vh：介面大小調大時（html 的 zoom）vw/vh 也會被放大，圖片會超出畫面 */
.dialog.lightbox { border: 0; border-radius: 0; outline: none; padding: 0; margin: 0; inset: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; overflow: hidden; }
/* 下拉重新整理的提示 */
.pull-tip { position: fixed; top: 56px; left: 50%; z-index: 50; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; }
.pull-tip.ready { color: var(--accent); }
.pull-tip.spin { animation: pull-spin .6s ease-out forwards; }
@keyframes pull-spin { from { transform: translate(-50%, 20px) rotate(0); opacity: 1; } 70% { opacity: 1; } to { transform: translate(-50%, 20px) rotate(360deg); opacity: 0; } }
/* 浮動的小提示（例如加入房間失敗） */
.toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; max-width: min(420px, calc(calc(100vw / var(--z, 1)) - 32px));
  padding: 10px 8px 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: toast-in .18s ease-out; }
/* popover 的預設樣式（置中、外框、白底）拿掉，照上面的位置 */
.toast[popover] { inset: auto; top: 64px; left: 50%; width: max-content; margin: 0; color: var(--text); overflow: visible; }
.toast > span { flex: 1; min-width: 0; }
/* 「復原」：只用綠色區分（底線、粗體會讓它看起來比旁邊的字低） */
.toast .toast-action { flex: none; color: var(--accent); text-decoration: none; white-space: nowrap; }
.toast .toast-action:hover { text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* Android 自己的下拉選單（取代系統的白色大選單） */
.dialog.select-sheet { width: min(340px, calc(88vw / var(--z, 1))); padding: 8px; }
.select-sheet h2 { font-size: 15px; margin: 6px 8px 8px; color: var(--muted); }
.select-options { display: flex; flex-direction: column; max-height: calc(60vh / var(--z, 1)); overflow-y: auto; }
.select-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; padding: 11px 10px; border-radius: 6px; color: var(--text); }
.select-option:hover { background: var(--line); filter: none; }
.select-option.on { color: var(--accent); font-weight: 600; }
/* 選單一打開焦點就在目前選的那一項：外框會被捲動區切掉一半，改成淡淡的底色 */
.select-options .select-option:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox-inner { position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: 30px 70px; display: flex; align-items: center; justify-content: center; }
.lightbox-inner img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-inner img.lightbox-avatar { width: 420px; border-radius: 12px; }
@media (max-width: 700px) { .lightbox-inner { padding: 60px 8px; } }
.lightbox-btn { position: absolute; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; padding: 10px 14px; border-radius: 999px; }
.lightbox-btn:hover { background: rgba(0,0,0,.75); filter: none; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
/* iPhone 的網頁 App：狀態列疊在畫面上，按鈕往下讓出安全區域（不然點不到） */
.lightbox-close { right: calc(20px + env(safe-area-inset-right)); top: calc(20px + env(safe-area-inset-top)); font-size: 20px; }
/* 縮放、拖曳由 kit.js 處理，不讓瀏覽器自己捲動或放大 */
.lightbox-inner { touch-action: none; }
.lightbox-inner img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lightbox-inner img.zoomed { cursor: grab; }
.lightbox-inner img.zoomed:active { cursor: grabbing; }
.lightbox .lightbox-menu { right: auto; min-width: 0; z-index: 3; transform-origin: top left; }
.lightbox-prev, .lightbox-next, .lightbox-close { transition: opacity .15s; }
.lightbox-bare :is(.lightbox-prev, .lightbox-next, .lightbox-close) { opacity: 0; pointer-events: none; }
.lightbox-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ddd; font-size: 13px; }

.mention-box { position: fixed; z-index: 60; list-style: none; margin: 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); max-width: 320px; overflow-y: auto; }
.mention-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mention-item.on { background: var(--line); }
.mention-name { overflow: hidden; text-overflow: ellipsis; }
.mention-handle { color: var(--muted); font-size: 13px; }
.host-help ol { margin: 0 0 6px; padding-left: 22px; line-height: 1.7; }
.host-help p { margin: 4px 0 0; }

/* ---------- Addon ---------- */
.addon-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.addon-toolbar .subtabs { margin: 0; }
.addon-toolbar select { width: auto; }
.addon-toolbar input[type=search] { width: 220px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.addon-card { display: block; text-align: left; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: inherit; }
/* 滑過時往上推（transform，見下面），外框跟商店物品一樣用灰色（首頁的卡片也是） */
/* 只在有滑鼠的裝置：手機長按、點過之後會一直停在 :hover，外框留在卡片上 */
.addon-card:hover, a.hcard:hover, button.hcard:hover, .room-hcard:hover, a.rank-mini:hover { filter: none; }
@media (hover: hover) { .addon-card:hover, a.hcard:hover, button.hcard:hover, .room-hcard:hover, a.rank-mini:hover { border-color: var(--muted); } }
.addon-card > img, .addon-card > .addon-noshot { display: block; width: calc(100% - 20px); margin: 0 10px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--line); }
.addon-noshot { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--line); }
.addon-card-body { padding: 8px 10px 10px; display: grid; gap: 2px; }
/* 作品卡片：頭像＋作者名稱；下載、愛心、留言數 */
.addon-by { display: flex; align-items: center; gap: 6px; min-width: 0; }
.addon-by > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Addon 分頁的卡片：作者在圖片上面一行 */
.addon-card-author { padding: 8px 10px; }
.addon-by > .addon-card-time { flex: none; overflow: visible; }
.addon-stats { display: flex; flex-wrap: wrap; gap: 10px; }
/* 自己按過愛心的作品：紅色實心愛心（跟首頁卡片一樣） */
.addon-stats .stat.liked { color: var(--danger); }
.addon-stats .stat.liked .ic-heart { fill: currentColor; }
.addon-meta > span { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; }
.addon-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 6px; }
.addon-stat { display: inline-flex; align-items: center; gap: 5px; }
.addon-file { margin: 6px 0 0; overflow-wrap: anywhere; }
/* 個人頁「作品」「貼文」標題旁的數量 */
.h-with-count { display: flex; align-items: center; }
.people-list.loading { opacity: .5; transition: opacity .15s; }
.h-count { margin-left: 8px; font-size: 15px; font-weight: 400; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.h-count:empty { display: none; }
.like-btn { display: inline-flex; align-items: center; gap: 5px; }
.like-btn.on { color: var(--danger); }
.addon-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 截圖和資訊各佔一半（截圖小一點，資訊這邊的按鈕才排得進一列） */
.addon-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.addon-gallery { margin-bottom: 16px; }
.addon-shot-main { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--line); }
.addon-thumbs { display: flex; gap: 6px; margin-top: 6px; }
.addon-thumbs img { width: 80px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: .6; border: 2px solid transparent; }
.addon-thumbs img.on { opacity: 1; border-color: var(--accent); }
.addon-info h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
/* 作品頁的說明卡片：標題上面不再多一段空白，跟底部的空白一樣 */
.addon-desc > h3 { margin-top: 0; }
.addon-desc > .post-body > :last-child { margin-bottom: 0; }
.addon-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* 下載（安裝）、愛心、分享排成一列不換行：放不下時下載按鈕的字變「…」，手機上分享只留圖示 */
.addon-actions { flex-wrap: nowrap; align-items: center; min-width: 0; }
.addon-actions > * { flex: none; }
.addon-actions > .addon-main-btn { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.addon-share.compact .btn-label { display: none; }
/* 作者：只有頭像和名字是連結，右邊的空白不是 */
.addon-info > a.person { align-self: flex-start; max-width: 100%; }
.addon-status { margin-top: 10px; }
.addon-status progress { width: 100%; }
.addon-status.ok { border-left: 3px solid var(--accent); padding-left: 10px; }
.addon-status p { margin: 4px 0; }
.addon-form { display: grid; gap: 10px; }
.addon-form h2, .addon-form p { margin: 0; }
.addon-form .row { align-items: center; }
.addon-form label.button-like { display: inline-block; }
.addon-form > button { justify-self: start; }
#addon-detail .card h3 { margin-top: 0; }
.addon-form .row label { flex: 1; }
/* 說明欄下面：表情、程式碼按鈕往左貼齊欄位，字數在右邊；跟說明欄靠近一點 */
.addon-form .addon-desc-tools { gap: 2px; margin-top: -6px; }
/* 上傳頁的表單是卡片：欄位的 label 下面還多 12px，往上多拉一點，跟編輯視窗一樣離說明欄約 4px */
.addon-form.card .addon-desc-tools { margin-top: -18px; }
.addon-desc-tools > .icon-btn:first-child { margin-left: -4px; }
/* 「加截圖」是按鈕樣子的 label：維持按鈕本身的寬度，不要跟分類、版本欄位一樣撐開 */
.addon-form .row label.button-like { flex: none; }
.post-addon { display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 8px; padding: 8px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: inherit; }
.post-addon:hover { filter: none; border-color: var(--accent); }
.post-addon img, .post-addon .addon-noshot { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: none; }
.cmp-addon { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; position: relative; }
.cmp-addon .cmp-x { position: static; }
/* 一欄時也用 minmax(0, 1fr)：只寫 1fr 的話，不換行的按鈕列（系統字體放大的手機）會把整頁撐得比畫面寬 */
@media (max-width: 900px) { .addon-page { grid-template-columns: minmax(0, 1fr); } }
.addon-page > * { min-width: 0; }

/* ---------- 主題（淺色）與設定頁 ---------- */
:root[data-theme="light"] { --hl-kw: #a626a4; --hl-str: #3f8f3e; --hl-num: #986801; --hl-com: #8a8c93; --hl-fn: #2f6fe0; --hl-lit: #0184bc; --hl-prop: #d03f33; --hl-sel: #b57600; --bg: #f3f4f6; --panel: #ffffff; --line: #dde1e7; --text: #1d2025; --muted: #5f6773; --accent: #2f9150; --accent-hover: #37a65d; color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) { --hl-kw: #a626a4; --hl-str: #3f8f3e; --hl-num: #986801; --hl-com: #8a8c93; --hl-fn: #2f6fe0; --hl-lit: #0184bc; --hl-prop: #d03f33; --hl-sel: #b57600; --bg: #f3f4f6; --panel: #ffffff; --line: #dde1e7; --text: #1d2025; --muted: #5f6773; --accent: #2f9150; --accent-hover: #37a65d; color-scheme: light; }
}
.settings h2 { margin-top: 0; }
.settings > label { display: block; margin: 10px 0; }
.settings > .push-checks > label { margin: 10px 0; }
.settings select { width: auto; margin-left: 8px; }
.seg { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.seg label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.seg input, .settings .check input { width: auto; }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }
/* 留言的愛心、回覆、查看回覆：按鈕有內距（上下 4px、左右 8px，比較好按），滑過有灰色底（跟貼文一樣）。
   按鈕之間 2px，圖示之間看起來約 18px（字比貼文小，比貼文的 24px 緊一點）；
   整列往左移 8px，愛心的圖示還是對齊內文；上下的 margin 扣掉內距，跟內文、下一則的距離看起來不變 */
.c-actions { display: flex; gap: 2px; align-items: center; margin: 1px 0 -4px -8px; }
button.link.c-act { font-size: 12px; color: var(--muted); text-decoration: none; }
button.link.c-act:hover { color: var(--text); }
button.link.c-act.on { color: var(--danger); }
button.link.reply-toggle { color: var(--accent); }
ul.players.reply-list { margin: 6px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--line); }
.players li.comment.reply { border-bottom: 0; padding: 7px 0; }
/* 手機：留言、回覆的名字後面不接 @ID（太擠會把名字截成「…」），電腦照舊顯示 */
@media (max-width: 700px) { .comment-head .author-handle { display: none; } }
.edit-box { margin: 6px 0; }
.edit-box textarea { width: 100%; box-sizing: border-box; }
/* 儲存、取消、表情按鈕和錯誤訊息垂直置中 */
.edit-box .row { align-items: center; }
.edit-box .row { gap: 8px; margin-top: 4px; }
#group-create { margin-bottom: 8px; }
.group-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; flex: none; }
.group-invite { display: block !important; background: var(--line); border-radius: 6px; padding: 8px !important; margin-bottom: 6px; }
.group-invite .row { gap: 8px; margin-top: 6px; }
.msg-system { align-self: center; text-align: center; }
/* 「釘選了一則訊息」：點了跳到那則（不加底線，滑過才變亮） */
.msg-system .msg-system-link { display: inline-flex; align-items: center; gap: 4px; font-size: inherit; text-decoration: none; }
.msg-system .msg-system-link:hover { color: var(--text); }
.msg-from { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--muted); }
/* 群組裡別人的訊息：頭像在左，名稱、訊息、時間在右 */
.msg.with-face { display: flex; align-items: flex-start; gap: 6px; }
.msg-face { flex: none; min-width: 26px; line-height: 0; }
/* 連續訊息：看不見的頭像佔位（跟第一則一樣寬，有頭像框時也對齊） */
.msg-face.ghost { visibility: hidden; }
/* 鍵盤選不到的頭像連結（tabindex -1、aria-hidden：聊天室訊息、貼文作者、通知的頭像）：點了、或程式把焦點移過來時不畫焦點外框。
   外框畫在頭像格外圍，會被戴著的頭像框蓋住、看起來缺一塊；名稱的連結還是選得到 */
a[tabindex="-1"][aria-hidden="true"]:is(:focus, :focus-visible) { outline: none; }
.msg-main { min-width: 0; }
.msg-row { position: relative; width: fit-content; max-width: 100%; }
.msg.mine .msg-row { margin-left: auto; }
/* 文字泡泡和它的工具列（messages.js）：工具列以泡泡為準定位 */
.msg-anchor { position: relative; width: fit-content; max-width: 100%; }
.msg.mine .msg-anchor { margin-left: auto; }
/* 同一個人連續的訊息貼近一點（列表的間距是 16px） */
.msg.cont { margin-top: -12px; }
/* 群組裡訊息上方的名字：一般文字顏色（深色主題是白色），有名字特效的照特效 */
.msg-from-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
/* 群組成員：一列放得下（手機也是）：頭像、名字（太長用「…」）、群主／管理員標籤，管理的選項收在最右邊的 ⋯；邀請中的「由誰邀請」、可以邀請的好友和「邀請」也是一行 */
ul.players.group-members li { flex-wrap: nowrap; }
ul.players.group-members li > a.person:first-child { flex: 0 1 auto; min-width: 0; }
ul.players.group-members li > .spacer { flex: 1 1 0; }
.group-members li > :is(.badge, .dropdown, button) { flex: none; }
.group-members li > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 成員的操作（設為管理員、設為群主、移出…）：不要底線，滑過變成一般文字顏色 */
.group-members button.link { text-decoration: none; }
.group-members button.link:hover { color: var(--text); filter: none; }
.group-dialog { width: min(460px, calc(90vw / var(--z, 1))); max-height: calc(80vh / var(--z, 1)); overflow-y: auto; }
.group-dialog h3 { margin: 12px 0 4px; font-size: 14px; }
.group-dialog .group-invite-search { margin: 2px 0 4px; }
.group-dialog input { width: 100%; box-sizing: border-box; }
.group-dialog .row input { flex: 1; }
/* 建立群組：要邀請的人（每個人右邊一個「邀請」按鈕） */
/* 選好友的清單（開房邀請好友、建立群組）：跟送禮選好友一樣最高到畫面的 42% */
.group-pick-list { max-height: calc(42vh / var(--z, 1)); overflow-y: auto; }
/* 滑桿放在搜尋框右邊外面（伸進視窗的內距），右邊的「邀請」按鈕跟搜尋框、底下的按鈕對齊：
   往右伸 14px = 滑桿 10px＋留 4px；一直留著滑桿的位置，人少沒有滑桿時也一樣對齊 */
.dialog .group-pick-list { margin-right: -14px; padding-right: 4px; scrollbar-gutter: stable; }
.group-pick { flex: none; }
/* 首頁：每一類一橫列，左右捲動 */
.home-section { margin-bottom: 20px; }
.home-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.home-head h2 { margin: 0; font-size: 17px; }
.hrow { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
/* 鍵盤選到的卡片：外框畫在卡片邊框內側（橫向捲動的列會把超出去的外框切掉） */
.hrow > :is(a, button, div):focus-visible { outline-offset: -2px; }
.hcard { flex: 0 0 210px; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; position: relative; min-height: 120px; }
button.hcard { cursor: pointer; }
.hcard-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-foot { margin-top: auto; align-items: center; }
.hthumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--line); display: flex; align-items: center; justify-content: center; }
.hauthor { display: flex; align-items: center; gap: 6px; }
/* 名稱和時間固定一行：時間完整顯示，名稱太長的部分用…省略 */
.hauthor { min-width: 0; white-space: nowrap; }
.hauthor > .htime { flex: none; }
.hauthor > .deco-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 頭像有框：跟貼文一樣多空框往下超出的距離（kit.js 的 takeDecoExt；首頁頭像小，框超出的也跟著小） */
.hcard > .hauthor { margin-bottom: var(--deco-below, 0px); }
/* 首頁的作品卡片：頭像那一列到圖片的距離跟貼文卡片一樣（貼文中間多一個內文的空位，等於多一個 4px 的間距） */
.hcard-addon > .hthumb { margin-top: 4px; }
/* 作品名稱往下 1px（分類不動）：粗體標題的筆畫離圖片比離下面的分類近，移完上下看起來一樣（中文標題約 7.7px／7.8px） */
.hcard-addon > .hcard-title { margin: 1px 0 -1px; }
a.hauthor, a.hauthor:hover { color: var(--text); text-decoration: none; min-width: 0; }
.to-profile { cursor: pointer; }
/* 首頁的標題（熱門房間…）：點了跟旁邊的「查看全部」一樣，看起來還是標題 */
.home-title-link, .home-title-link:hover { color: inherit; text-decoration: none; }
/* 上面多 1px：文字本身上方有約 3px 的行高留白，加起來跟頭像列到圖片的 8px 差不多 */
.hbody { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 1px; }
.hbody.long { -webkit-line-clamp: 5; }
/* 首頁卡片的貼文摘要：大小、行高照原本的（卡片小，維持緊湊），只有文字跟貼文內文一樣稍暗（--text-body） */
.hbody { color: var(--text-body); }
/* 首頁卡片的上下間距照貼文的節奏縮小：中間（頭像→文字→圖片→愛心）看起來都是 8px，上下框都是 10px（中間的 1.25 倍，跟貼文一樣）。
   上下框是所有首頁卡片（房間、作品也是）；中間只有貼文卡片（摘要、圖片、愛心那一列） */
.hcard { padding: 9px 10px 8px; }
.hbody { margin: 1.5px 0 1.2px; }
.hthumb + .hstats { margin-top: 2.8px; }
.hlabel { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--accent); color: #fff; }
.hempty { margin: 8px 0; }
/* 登入方式的品牌圖示 */
.brand-icon { display: inline-flex; flex: none; vertical-align: middle; }
.brand-icon svg { width: 100%; height: 100%; }
button:has(> .brand-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* 登入按鈕：跟著深色／淺色主題（卡片底色＋細框，滑過時框變綠），各家的圖示保留原本的顏色 */
.provider-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); font-weight: 500; transition: border-color .15s, background-color .15s; }
.provider-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); filter: none; }
.provider-btn .brand-xbox { color: #107c10; }
.feed-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.feed-toolbar .subtabs { margin: 0; }
.myroom-panel { margin-bottom: 16px; }
/* 首頁公告 */
.announce { border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px; background: var(--panel); padding: 12px 14px; margin-bottom: 20px; }
.announce-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.announce-icon { line-height: 0; color: var(--accent); }
.announce-head .muted { margin-left: 2px; }
.announce-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 好友清單：有沒有按鈕的列都一樣高 */
#friend-list li { min-height: 48px; box-sizing: border-box; }
/* 群組：頭貼、@ 標記 */
.group-icon { flex: none; }
/* 頭像、群組頭貼（含頭像框）不能選取、拖曳，手機長按也不跳出圖片選單：要複製圖片時點開大圖再長按／右鍵 */
:is(.avatar, .group-icon, .deco-framed, .deco-av) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.mention { color: var(--accent); font-weight: 500; }
a.mention { text-decoration: none; }
a.mention:hover { text-decoration: underline; }
/* 聊天室的 @ID：跟訊息裡的其他連結一樣預設就有底線（下面 .msg-body a） */
.msg-body a.mention { text-decoration: underline; }
.msg.mine .mention { color: #fff; text-decoration: underline; }
.msg.at-me .msg-body { box-shadow: 0 0 0 2px var(--accent); }
.mention-flag { color: var(--danger); font-weight: 600; }
.group-avatar-row { align-items: center; gap: 10px; margin-bottom: 8px; }
/* 沒有縮圖的卡片：標籤放在第一行右邊，不蓋住文字 */
.hlabel.inline { position: static; align-self: flex-end; margin-bottom: -2px; }
/* 對話列表：名字和 ID 同一行，太長就用「…」 */
.conv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 訊息之間多留一點空間，時間跟泡泡分開 */
.thread-msgs { gap: 16px; }
.msg-time { margin-top: 4px; font-size: 11px; }
/* 工具列（回覆、刪除）：浮在訊息的上角，不佔位置；電腦滑過、手機點訊息時出現 */
/* 放在訊息泡泡旁邊：別人的在右邊、自己的在左邊；旁邊放不下時（.inside，messages.js 判斷）改成浮在泡泡上角 */
.msg-tools { position: absolute; top: min(50%, 17px); left: 100%; transform: translateY(-50%); margin-left: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); visibility: hidden; }
/* 自己的訊息：工具列放在訊息左邊（左邊一定有空間），不蓋到訊息 */
.msg.mine .msg-tools { left: auto; right: 100%; margin: 0 6px 0 0; }
.msg .msg-tools.inside { top: -14px; transform: none; margin: 0; left: auto; right: 0; }
.msg-tools .icon-btn { padding: 2px 4px; color: var(--muted); }
/* 泡泡和工具列中間的空隙也算在訊息上：滑鼠移過去的途中工具列不會消失 */
.msg-tools::before { content: ''; position: absolute; inset: -8px -10px; z-index: -1; }
.msg-tools .icon-btn.armed { color: var(--danger); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.msg.tools-open .msg-tools { visibility: visible; }
@media (hover: hover) { .msg:hover .msg-tools { visibility: visible; } }
/* 回覆的那一則（訊息上方）、輸入框上方的「回覆 XXX」 */
.msg-reply { display: flex; align-items: center; gap: 4px; max-width: 100%; margin-bottom: 4px; padding: 2px 8px; border-left: 2px solid var(--muted); cursor: pointer; text-align: left; }
.msg.mine .msg-reply { margin-left: auto; width: fit-content; }
.msg-reply-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-top: 6px; border-radius: 8px; background: var(--line); font-size: 13px; }
.reply-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 點群組邀請的通知過來：那個邀請閃一下 */
.group-invite.flash { animation: invite-flash 1.4s ease-out; }
/* 邀請卡片貼著對話列表（會捲動、超出的部分切掉）的左右兩邊：外框畫在卡片裡面，不然只剩圓角那一點點露出來 */
@keyframes invite-flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
/* 文字裡的網址 */
.ext-link { overflow-wrap: anywhere; }
/* 內文裡的連結（網址、@ID、#標籤、Markdown 連結）：平常只有顏色，滑鼠指上去才有底線。
   聊天訊息例外：連結一律有底線（自己的訊息泡泡是綠底白字，連結也是白字，底線才分得出來；別人的訊息跟著一致） */
:is(.post-body, .comment-body, .bio, .announce-text, .note-text) a { text-decoration: none; }
:is(.post-body, .comment-body, .bio, .announce-text, .note-text) a:hover { text-decoration: underline; }
.msg-body a { text-decoration: underline; }
.msg.mine .msg-body .ext-link { color: #fff; text-decoration: underline; }
/* 群組的加入連結：成員面板裡的網址和按鈕，/g/<代碼> 的頁面 */
.group-link { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 10px 0 0; }
.group-link.group-link-off { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.group-link-url { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }
.group-link-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
.group-link-page { max-width: 420px; margin: 24px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.group-link-page h2 { margin: 4px 0 0; overflow-wrap: anywhere; }
.group-link-page p { margin: 0; }
.group-link-faces { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; padding: 10px 8px; }
/* 個人頁：暱稱、ID，右邊是 Xbox 框 */
.profile-names h2 { line-height: 1.25; }
/* 個人頁的徽章框（像 Discord，deco.js badgeBox）：頭像、名字下面另外一行（名字的位置不變），裝備的徽章排成一列包在圓角框裡；
   上面緊接頭像下方的留白，下面跟好友數那一行隔開 */
.deco-badge-box { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 4px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--line); }
.deco-badge-slot { display: inline-flex; line-height: 0; }
.deco-badge-slot > .deco-badge { vertical-align: 0; }
.deco-badge-box + .counts { margin-top: 10px; }
.profile-names .badges { margin-top: 8px; }
.profile-handle { font-size: 17px; margin-top: 2px; }
/* @ID 點了複製 */
button.link.profile-handle { padding: 0; text-decoration: none; text-align: left; white-space: normal; cursor: copy; }
button.link.profile-handle:hover { color: var(--text); }
.xbox-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); white-space: nowrap; }
.xbox-chip .brand-icon { color: #107c10; }
.xbox-name { font-weight: 500; }

/* ---------- 共用畫面的外框（ui/shell.js） ---------- */
#topbar { position: sticky; top: 0; z-index: 30; }
#topbar .brand { color: var(--text); text-decoration: none; }
#tabs { display: flex; align-items: stretch; height: 100%; }
.tab { display: flex; align-items: center; gap: 4px; color: var(--text); }
.tab-icon { display: none; }
#top-right { display: flex; align-items: center; gap: 10px; }
.me-name { color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#top-right .menu { right: 0; left: auto; }
.login-menu { min-width: 260px; padding: 10px; }
.login-menu .provider-buttons { margin: 0; }
.provider-buttons { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.provider-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; }
.need-login { text-align: center; max-width: 420px; margin: 40px auto; }

/* 連結做成按鈕的樣子 */
a.btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--line); color: var(--text); border: 0; border-radius: 6px;
  padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; }
a.btn.primary, .btn.primary { background: var(--accent); color: #fff; }
.btn.small, button.small { padding: 4px 10px; font-size: 13px; }
a { color: var(--accent); }
a.person { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.person-name { font-weight: 500; }

/* 對話框 */
.dialog { width: min(460px, calc(92vw / var(--z, 1))); max-height: calc(85vh / var(--z, 1)); overflow-y: auto; }
.dialog h2 { margin-top: 0; }
/* 視窗最上面「標題＋右邊的 ✕」那一列：標題不帶上下外距，跟 ✕ 垂直置中對齊；跟下面的內容隔開 */
.dialog > .row:first-child { align-items: center; margin-bottom: 12px; }
.dialog > .row:first-child > h2 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

#foot { max-width: 1100px; margin: 24px auto; padding: 0 16px 24px; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.footer-links a { color: var(--muted); }
.settings-legal { justify-content: center; margin: 8px 0 16px; }

/* 窄螢幕（手機）：分頁移到底部，只顯示圖示和短標籤 */
@media (max-width: 700px) {
  #topbar { height: 48px; padding: 0 12px; }
  #tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); z-index: 40;
    justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); }
  .tab { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; flex: 1; border-bottom: 0; border-top: 2px solid transparent; font-size: 11px; position: relative; }
  .tab.active { border-top-color: var(--accent); border-bottom: 0; }
  .tab-icon { display: block; line-height: 0; }
  .tab-icon svg { width: 22px; height: 22px; }
  .tab.active { color: var(--accent); }
  .tab .count-badge { position: absolute; top: 2px; right: 18%; }
  main { padding: 12px 12px 76px; }
  .me-name { max-width: 96px; font-size: 13px; }
  #foot { padding-bottom: 76px; }
}

/* 整張卡片是連結：不要底線、維持一般文字顏色 */
a.hcard, a.hcard:hover { text-decoration: none; color: var(--text); }
a.hcard .muted { color: var(--muted); }
a.hcard-title { color: var(--text); text-decoration: none; }

/* 單一房間頁（/r/:id，rooms.js）：整頁撐到畫面底（扣掉上面的列、返回鍵、頁尾），房內玩家那一格往下長 */
.room-page { display: flex; flex-direction: column; gap: 16px; min-height: calc(calc(100vh / var(--z, 1)) - var(--topbar-h) - 150px); min-height: calc(calc(100dvh / var(--z, 1)) - var(--topbar-h) - 150px); }
.room-page .card { margin: 0; }
.room-page h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
/* 右邊的人數＋加入按鈕往下對齊（跟左邊最後一行的版本、模式同一條底線）；手機改成上下排（下面 max-width: 700px） */
.room-hero { display: flex; gap: 24px; align-items: flex-end; padding: 24px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), var(--panel); }
.room-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.room-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.room-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.room-title { margin: 0; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.room-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--muted); }
.room-facts-row { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.room-fact { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.room-fact > .ic { flex: none; }
.room-hero-side { flex: none; width: 200px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.room-count { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.room-count > .ic { align-self: center; color: var(--muted); }
.room-count strong { font-size: 30px; line-height: 1; }
.room-meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.room-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s; }
.room-meter.full > span { background: var(--warn); }
.room-hero-side > :is(button, .btn) { width: 100%; padding-block: 10px; font-size: 15px; text-align: center; justify-content: center; }
.room-yours { text-align: right; }
.room-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; }
.room-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 右邊欄上面的房主、分享（每次重畫只換這裡，聊天室不動）：不多一層排版 */
.room-aside-top { display: contents; }
.room-about .desc { margin: 0; }
.room-players { flex: 1; display: flex; flex-direction: column; }
.room-n { padding: 0 7px; border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--muted); background: color-mix(in srgb, var(--text) 10%, transparent); }
.room-player-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.room-player-list li { min-width: 0; }
a.person.room-player, span.person.room-player { display: flex; gap: 4px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
a.person.room-player:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.room-person-text { display: flex; flex-direction: column; min-width: 0; }
.room-person-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 名稱後面接認證勾勾：同一行，名稱太長時名稱省略、勾勾留著 */
.room-person-line { display: flex; align-items: center; min-width: 0; }
.room-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 140px; text-align: center; }
.room-empty > .ic { opacity: .5; }
/* 房內玩家框外面底下的說明：靠近框一點（.room-col 的間距是 16px） */
.room-players-note { grid-column: 1; margin: -8px 0 0; padding: 0 4px; }
.room-host { display: flex; gap: 4px; }
.room-host .room-person-name { font-size: 16px; }
a.person.room-host:hover .room-person-name { text-decoration: underline; }
.room-share { justify-content: center; }
/* 房間聊天室：右邊欄剩下的空間；訊息區固定高度自己捲動 */
.room-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.room-chat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.room-chat-head > .spacer { text-align: right; }
.room-chat-head h3 { margin: 0; }
/* 往左靠：頭像那一格伸進卡片的內距一點（頭像框還有位置） */
/* 高度不跟著訊息長：height 0、至少 360px，跟左邊房內玩家的框一樣高時再撐滿，訊息多了自己捲動（不把整欄撐高） */
.room-chat-list { flex: 1 1 0; height: 0; min-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 6px 0; margin-left: -8px; }
.room-chat-empty { margin: auto; text-align: center; }
.room-chat-msg { display: flex; gap: 6px; align-items: flex-start; }
/* 同一個人連續發的（5 分鐘內）：不顯示頭像、名稱、時間，頭像那格留著寬度對齊，跟上一則靠近一點 */
.room-chat-msg.cont { margin-top: -7px; }
.room-chat-msg.cont .room-chat-av > *, .room-chat-msg.cont :is(.room-chat-meta, .room-chat-time) { display: none; }
/* 頭像格固定寬度（28px 頭像的 1.5 倍）：戴頭像框的不會把名字推歪 */
.room-chat-av { flex: none; display: inline-flex; justify-content: center; width: 42px; }
.room-chat-av > .deco-av.deco-framed { margin: 0; }
.room-chat-body { flex: 1; min-width: 0; }
.room-chat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; font-size: 13px; }
.room-chat-name { min-width: 0; overflow-wrap: anywhere; color: var(--text); text-decoration: none; font-weight: 600; }
/* 名稱不截斷（有認證勾勾、名字特效的也一樣），太長就換行 */
.room-chat-name .name-v > :first-child, .room-chat-name .deco-name { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.room-chat-time { font-size: 11px; line-height: 1.3; }
.room-chat-tag { flex: none; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.room-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.room-chat-bell { flex: none; margin: -4px -6px -4px 0; }
.room-chat-bell.off { color: var(--muted); }
/* 輸入框、表情、送出：上下置中，表情在框和按鈕正中間（兩邊間距一樣） */
.room-chat-input { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.room-chat-input textarea { flex: 1; min-width: 0; resize: none; min-height: 38px; max-height: 110px; }
/* 表情按鈕看起來偏右（輸入框的邊框淡、送出按鈕亮）：往左挪一點 */
.room-chat-input .emoji-btn { position: relative; left: -2px; }
.room-chat-note { margin: 10px 0 0; }
.desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.hint { margin: 8px 0; }
a.room-name { color: var(--text); text-decoration: none; }
.rooms td a { color: var(--text); }
@media (max-width: 700px) {
  .rooms .col-world, .rooms .col-version, .rooms .col-host, .rooms td.col-world, .rooms td.col-version { display: none; }
  .toolbar { flex-wrap: wrap; }
  /* 搜尋框和旁邊的小按鈕（例如房間的連線紀錄）放同一行，放不下才換行 */
  .toolbar input[type=search] { flex: 1 1 180px; min-width: 0; }
  /* 「只顯示相容版本」在英文、日文比較長：手機上可以換行，不要把整頁撐寬 */
  .toolbar label { white-space: normal; }
  /* 手機：卡片一格一格往下排，人數和加入鍵放在房名下面；扣掉底下的分頁列 */
  .room-page { min-height: calc(calc(100dvh / var(--z, 1)) - var(--topbar-h) - 56px - 90px - env(safe-area-inset-bottom)); }
  .room-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .room-title { font-size: 22px; }
  .room-hero-side { width: auto; }
  .room-count { justify-content: flex-start; }
  .room-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  /* 手機：一格一格往下排——房主、分享、房間介紹、聊天室、房內玩家（兩欄拆開排順序） */
  .room-body > .room-col { display: contents; }
  .room-host-card, .room-share { order: -3; }
  .room-about { order: -2; }
  .room-chat { order: -1; }
  .room-chat-list { flex: none; height: 300px; min-height: 0; }
  .room-player-list { grid-template-columns: minmax(0, 1fr); }
}

/* 單篇貼文頁的留言；.flash：點通知跳過來的那則，短暫標示 */
/* box-shadow 只往左右擴：標示框比留言本身寬一點，上下維持原本高度，不影響排版 */
.comment.flash { --flash: color-mix(in srgb, var(--accent) 18%, transparent); background: var(--flash); box-shadow: -10px 0 0 var(--flash), 10px 0 0 var(--flash); transition: background .6s, box-shadow .6s; border-radius: 6px; }
.comments h2 { margin-top: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; }
/* 留言、回覆的內文在頭像和愛心那一列的正中間（愛心圖示上面還有約 1.5px 的行高空白，所以下面少留一點） */
.comment-body { margin: 4.5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 頭像跟名字、時間兩行垂直置中：留言的頭像（32px）比回覆的（26px）大，底下少 3px。
   內文多空 3px，頭像底部到內文的距離跟回覆一樣 */
li.comment:not(.reply) > .comment-head + .comment-body { margin-top: 7.5px; }
/* 只有圖片、沒有文字的留言：圖片也一樣多空 3px */
li.comment:not(.reply):has(> .comment-body.hidden) > .comment-images { margin-top: 9px; }
.players li.comment { display: block; }
/* 最上層留言跟上下的分隔線多留一點空間（名單一般是 8px） */
.players li.comment:not(.reply) { padding: 10px 0; }
.yt-box { margin-top: 8px; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.notify { cursor: pointer; }
.need-login .provider-buttons { align-items: center; }

/* 留言底下的小按鈕（愛心、回覆、查看回覆）：文字連結的樣子 */
button.c-act { background: none; padding: 4px 8px; border-radius: 6px; color: var(--muted); font-size: 12px; }
/* 留言的愛心和讚數之間留一點空間 */
button.c-act:has(> .ic) { display: inline-flex; align-items: center; gap: 4px; }
button.c-act:hover { color: var(--text); background: var(--line); filter: none; }
/* 回覆列表下面的「載入更多回覆」：一樣往左移掉內距 */
li.comment > button.c-act { margin-left: -8px; }
button.c-act.on { color: var(--danger); }
button.reply-toggle { color: var(--accent); }

/* 作品頁：網站上的安裝說明；卡片是連結 */
.addon-hint { margin-top: 10px; }
.addon-hint p { margin: 4px 0; }
a.addon-card, a.addon-card:hover { text-decoration: none; color: var(--text); }
a.addon-card .muted { color: var(--muted); }

/* 好友清單：有沒有按鈕的列都一樣高 */
.friend-list li { min-height: 48px; box-sizing: border-box; }

/* 滑鼠滑過一列：淺色背景（跟聊天室列表、送禮選人一樣）。房間列表、排行榜、好友頁的名單（各個分頁、搜尋結果）；
   好友名單的列往左右伸進卡片內距 8px 再補回內距，文字位置不變、背景左右留一點空間 */
@media (hover: hover) {
  .rooms tr.room-row:hover > td { background: color-mix(in srgb, var(--text) 5%, transparent); }
  a.rank-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
  /* 前三名：滑過時是同一個排行顏色深一點（不變成跟第 4 名以後一樣的灰色） */
  a.rank-row.podium:hover { background: color-mix(in srgb, var(--rank-c) 13%, transparent); }
  .friends-page ul.players > li { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
  .friends-page ul.players > li:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
  .friends-page ul.players > li.person-row { cursor: pointer; }
  /* 個人頁的好友、粉絲、追蹤中名單（對話框，清單自己捲動：不往外伸，左右內距 8px） */
  .people-list > li.person-row { padding-left: 8px; padding-right: 8px; border-radius: 6px; cursor: pointer; }
  .people-list > li.person-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
}

/* 訊息：窄螢幕時列表和對話一次只顯示一個 */
.group-create { width: 100%; margin-bottom: 8px; }
/* 從別的 App 分享進來：列表上方的「選擇要傳給誰」 */
.share-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; font-size: 14px; }
.share-pick > span { flex: 1; min-width: 0; }
.dm-back { display: none; }
/* 聊天室頂部維持一行：名字太長時截掉名字（後面加「…」），搜尋固定在右上角 */
.dm .thread-head { flex-wrap: nowrap; min-width: 0; }
.thread-head > :is(button, .muted, .dropdown) { flex: none; }
/* 外層不能 overflow: hidden（會切到頭像框），只截斷裡面的文字 */
.thread-head > :is(.person, .group-head-open) { flex: 0 1 auto; min-width: 0; }
.thread-head > .person > :is(.avatar, .deco-av, .presence-av), .group-head-open > :is(.avatar, .deco-av, .group-icon) { flex: none; }
.thread-head > .person > :not(.presence-av, .avatar, .deco-av), .group-head-open > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 名字優先完整顯示：放不下時先縮 @ID（縮到看不見才輪到名字加「…」） */
.thread-head > .person > .muted { flex-shrink: 100000; }
.thread-head > .muted { white-space: nowrap; }
/* 對方有頭像框：返回鍵和頭像之間多空框往左超出的距離（kit.js 的 takeDecoExt），框到返回鍵的距離跟沒框一樣 */
.thread-head > .person { margin-left: var(--deco-side, 0px); }
/* 手機的返回鍵：跟後面的頭像（群組圖示）多隔 4px（共 12px） */
@media (max-width: 700px) { .thread-head > .dm-back + :is(.person, .group-head-open) { margin-left: calc(4px + var(--deco-side, 0px)); } }
@media (max-width: 700px) {
  .dm { grid-template-columns: 1fr; }
  .dm-page, .friends-page { height: calc(calc(100vh / var(--z, 1)) - 150px); }
  .dm-page:has(.dm.thread-open:not(.edge-swiping, .edge-leaving, .edge-entering)) .social-switch { display: none; }
  .dm .dm-thread { display: none; }
  .dm.thread-open .dm-list { display: none; }
  .dm.thread-open .dm-thread { display: flex; }
  .dm-back { display: inline-block; }
}

.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.danger-zone { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.danger-zone h3 { color: var(--danger); margin: 0 0 6px; }
/* 「永久刪除我的帳號」跟上面輸入暱稱的框隔開一點 */
.danger-zone .delete-account { margin-top: 14px; }
#bars .notice { max-width: 1100px; margin: 10px auto 0; }
.open-in-app { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 下載頁 */
.download-big { display: inline-block; font-size: 18px; padding: 14px 26px; margin: 8px 0; }
.download-page h3 { margin: 18px 0 6px; font-size: 16px; }
.ios-steps .ic { vertical-align: -3px; margin: 0 2px; }

/* 底部分頁列：標籤固定一行（日文、英文比較長） */
@media (max-width: 700px) {
  .tab-label { white-space: nowrap; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* 分頁標籤不換行；寬度不夠時上方分頁列可以左右捲動 */
.tab { white-space: nowrap; }
@media (min-width: 701px) { #tabs { overflow-x: auto; scrollbar-width: none; min-width: 0; flex-shrink: 1; } }

/* 手機：用 dvh（網址列展開時的實際可見高度），並扣掉底部分頁列與 iPhone 的安全區域 */
@media (max-width: 700px) {
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .dm-page, .friends-page { height: calc(calc(100vh / var(--z, 1)) - 48px - 56px - 32px - env(safe-area-inset-bottom)); height: calc(calc(100dvh / var(--z, 1)) - 48px - 56px - 32px - env(safe-area-inset-bottom)); }
}

/* 線條圖示（kit.js 的 icon）：跟旁邊的文字垂直置中 */
.ic { flex-shrink: 0; vertical-align: -0.2em; }
.post-act, button.link.c-act, button.link.back-link, a.download-big { display: inline-flex; align-items: center; gap: 5px; }
button.link.back-link { padding: 0; text-decoration: none; }
button.link.back-link:hover { color: var(--text); }
/* 夾在一般文字裡（Addon 卡片的下載次數）：inline-flex 的基準線會落在圖示底部，整塊被抬高，所以改成跟行頂對齊 */
.stat { display: inline-flex; align-items: center; gap: 3px; vertical-align: top; }
/* 按過讚：實心愛心 */
.on .ic-heart { fill: currentColor; }
/* 首頁卡片最下面的下載、愛心、留言數；自己按過愛心的是紅色 */
.hstats { display: flex; align-items: center; gap: 10px; }
.hstat { display: inline-flex; align-items: center; gap: 3px; }
.hstat.on { color: var(--danger); }
.icon-btn, .lightbox-btn { display: inline-flex; align-items: center; justify-content: center; }

/* 不要被擠成一個字一行：按鈕、人數、貼文時間不換行；太長的名字用「…」；一列放不下時把後面的東西換到下一行 */
button, .btn, .post-time, .nowrap { white-space: nowrap; }
a.person { min-width: 0; }
a.person > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.players li { flex-wrap: wrap; }
ul.players li .spacer { min-width: 0; }
.presence { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* 玩家一列的狀態欄（上線狀態＋「加入」）：狀態太長時縮成「…」，按鈕維持完整 */
ul.players li > .spacer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
ul.players li > .spacer > .presence { flex: 0 1 auto; min-width: 0; }
/* 好友在玩的地圖名稱（「加入」左邊）：跟名字一樣大、一般文字顏色，前面是房間分頁的手把圖示（灰色）；
   跟「加入」多空一點（列的間距 6px＋6px）；太長用「…」；手機放不下，不顯示 */
.presence-map { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; margin-right: 6px; color: var(--text); }
.presence-map > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-map > .ic { flex: none; color: var(--muted); }
a.presence-map { text-decoration: none; }
@media (max-width: 700px) { .presence-map { display: none; } }
@media (max-width: 700px) {
  /* 手機：名字自己一行，狀態和按鈕放第二行 */
  ul.players li > a.person:first-child { flex: 1 1 100%; }
  ul.players li > .spacer { justify-content: flex-start; }
  /* 開房的玩家名單：名字和踢出、封鎖按鈕同一行 */
  ul.host-players li > a.person:first-child { flex: 0 1 auto; }
  ul.host-players li > .spacer { flex: 1 1 0; }
}
/* 通知的文字不是狀態欄：一般文字靠左排 */
ul.players li > .spacer.notify-text { display: block; }
/* 個人頁的頭：手機上換行，不要超出畫面 */
.profile-head { flex-wrap: wrap; }
.avatar.zoomable { cursor: zoom-in; }
.profile-names { min-width: 0; flex: 1 1 160px; }
.profile-names h2, .profile-handle { overflow-wrap: anywhere; }
/* 個人頁的 ⋯（people.js headMore）：電腦在右上角（Xbox 右邊）；手機在名字那一列的最右上角，跟名字垂直置中 */
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name-row > h2 { flex: 1; min-width: 0; }
.profile-more-narrow { display: none; }
@media (max-width: 700px) {
  .profile-more-wide { display: none; }
  .profile-more-narrow { display: block; flex: none; margin-right: -6px; }
}
/* 手機：頭像自己一行，名字、@ID 換到下面用整個寬度（名字和認證勾勾才放得下）；⋯ 移到頭像那一行的最右邊，
   跟頭像垂直置中（頭像上面留 18px 的框空間，72px 頭像的中心在 18 + 36 = 54px） */
@media (max-width: 700px) {
  .profile-head { position: relative; }
  .profile-head > .profile-names { flex: 0 0 100%; }
  .profile-more-narrow { position: absolute; top: 54px; right: 0; transform: translateY(-50%); }
}
.xbox-chip { max-width: 100%; min-width: 0; }
.xbox-name { overflow: hidden; text-overflow: ellipsis; }
/* 徽章框（people.js badgeBox）：電腦在頭那一列下面，手機在頭那一列裡面、Xbox 名稱上面自己一行 */
.profile-head > .badge-narrow { display: none; }
@media (max-width: 700px) {
  .profile-head > .badge-narrow { display: block; flex: 0 0 100%; }
  .deco-badge-box.badge-wide { display: none; }
}

/* 下載頁：平台標題旁的品牌標誌 */
.platform-title { display: flex; align-items: center; gap: 10px; }
.platform-sep { border: none; border-top: 1px solid var(--line); margin: 32px 0 24px; }
.download-logo { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.platform-title .brand-windows { color: #0078d4; }
.platform-title .brand-android { color: #34a853; }
/* Apple 標誌是單色：跟著主題的文字顏色 */
.platform-title .brand-apple { color: var(--text); }
/* 個人頁的好友、粉絲、追蹤中：點了看名單 */
button.count-link { padding: 0; color: inherit; font: inherit; text-decoration: none; }
button.count-link:hover { color: var(--text); text-decoration: none; }
/* 數字那一行最後的「統計資料」：有外框的小按鈕 */
.counts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
button.stats-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text); font-size: 13px; transition: border-color .15s; }
/* 滑鼠指上去的框跟首頁卡片一樣 */
button.stats-btn:hover { border-color: var(--muted); filter: none; }
.people-dialog .people-list { max-height: calc(60vh / var(--z, 1)); overflow-y: auto; margin: 0; }
/* 留言區：排序（熱門／最新）、置頂的留言 */
/* 留言區頂部：標題和「熱門｜最新」垂直置中（分頁本身的下邊距拿掉，不然分頁看起來偏上），底下一條線跟留言隔開，選取中的分頁底線疊在這條線上 */
.comments-head { align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.comments-head h2 { margin: 0; }
.comments-head .subtabs { margin-bottom: -1px; align-self: flex-end; }
.comment-sort { margin-bottom: 0; }
.pinned-mark { display: flex; align-items: center; gap: 4px; margin-bottom: 7.5px; }
/* 訊息的附件：圖片縮圖、檔案；送出前選好的附件 */
.msg-files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 4px; }
.msg.mine .msg-files { justify-content: flex-end; }
.msg-image { max-width: 240px; max-height: 240px; border-radius: 10px; cursor: zoom-in; object-fit: cover; background: var(--line); }
/* 手機拖游標時（ui/messages.js 加上 caret-drag）暫停聊天裡裝飾品的動畫：有些手機拖游標時跳出的放大鏡，遇到一直在重畫的動畫會整塊閃黑；打字時照常動 */
.dm-thread.caret-drag :is(.deco-fx, .deco-arm, .deco-name, .deco-bubble),
.dm-thread.caret-drag .deco-fx::before, .dm-thread.caret-drag .deco-fx::after, .dm-thread.caret-drag .deco-arm::after { animation-play-state: paused !important; }
/* 訊息裡的影片：跟圖片差不多大，直的影片不會太高 */
/* 寬度直接定 280px（不能只寫 max-width: min(280px, 100%)：瀏覽器算泡泡寬度時會忽略百分比、用影片原本的寬度，泡泡被撐滿整行、工具列跑到最右邊） */
.msg-video { width: 280px; max-width: 100%; max-height: 320px; border-radius: 10px; }
.msg-file { display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; text-align: left; }
.msg-file:hover { border-color: var(--accent); }
.msg-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 音訊：檔名那一列（點了下載）和播放器包在同一個框裡，寬度跟檔案一樣 */
.msg-audio { display: flex; flex-direction: column; gap: 6px; width: 280px; max-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.msg-audio > .msg-file { border: 0; padding: 2px 4px; max-width: none; }
.msg-audio-player { width: 100%; }
/* 訊息輸入列：＋、輸入框、送出都垂直置中；＋往左靠、按鈕本身窄一點，輸入框更寬 */
.thread-form { align-items: center; gap: 6px; }
.attach-btn { align-self: center; padding: 4px; margin-left: -6px; }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; }
.attach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 貼文、留言開頭：頭像｜暱稱＋ID / 時間・已編輯｜⋯（⋯ 固定在右上角） */
.author-head { align-items: flex-start; }
.author-face { flex: none; line-height: 0; }
.author-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* 貼文、留言：名稱和時間對齊頭像的中間（⋯ 還是在右上角） */
:is(.post-head, .comment-head) > :is(.author-face, .author-text) { align-self: center; }
/* 名稱連結只佔文字本身的寬度：點名稱右邊的空白算點卡片（打開貼文），不是打開個人頁 */
.author-text > a.person { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 6px; min-width: 0; }
.author-meta { display: flex; flex-wrap: wrap; align-items: baseline; }
.author-head > .dropdown { flex: none; }

/* 手機 App（Android、加到主畫面的 iPhone 網頁 App）：介面文字不能長按選取，只有貼文、留言、訊息的內文（和輸入框）可以 */
:is(.app-android, .ios-app) body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(.app-android, .ios-app) :is(.post-body, .comment-body, .msg-body, input, textarea) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* 網頁 App（加到主畫面）：iPhone 的狀態列疊在畫面上方，頂部列往下讓出位置（border-box，所以高度要加上去） */
@media (display-mode: standalone) {
  #topbar { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) and (max-width: 700px) {
  #topbar { height: calc(48px + env(safe-area-inset-top)); }
  .dm-page, .friends-page { height: calc(calc(100dvh / var(--z, 1)) - 48px - 56px - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* ---------- 動畫 ----------
   時間控制在 150–250ms；系統開了「減少動態效果」就全部關掉（最下面） */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.95); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.95); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }

/* 換頁：淡入、稍微往上滑 */
.page-in { animation: rise-in .22s var(--ease-out); }
/* 列表項目（貼文、作品、好友、房間、留言）一個接一個淡入；延遲由 kit.js 設定 */
.item-in { animation: rise-in .25s var(--ease-out) both; }
/* 自己會捲動的列表（對話列表、好友名單）：只淡入不往上滑，不然往下錯開的那 8px 會讓列表一瞬間超出高度、閃出捲軸 */
:is(.dm-list, .friends-page) .item-in { animation-name: fade-in; }

/* 對話框：背景淡入，視窗放大淡入；關閉時反過來 */
dialog[open] { animation: pop-in .2s var(--ease-out); }
dialog[open]::backdrop { animation: fade-in .2s ease-out; }
dialog.closing { animation: pop-out .15s var(--ease-in) forwards; }
dialog.closing::backdrop { animation: fade-out .15s var(--ease-in) forwards; }
/* 圖片全螢幕預覽：整片只淡入淡出，圖片本身從縮圖放大（kit.js） */
.dialog.lightbox[open] { animation: fade-in .2s ease-out; }
.dialog.lightbox.closing { animation: fade-out .15s var(--ease-in) forwards; }

/* ⋯ 選單：從按鈕那一角縮放展開（往右開、往上開時換角落） */
.menu { transform-origin: top right; animation: pop-in .14s var(--ease-out); }
.menu.align-left { transform-origin: top left; }
.menu.up { top: auto; bottom: calc(100% + 4px); transform-origin: bottom right; }
.menu.up.align-left { transform-origin: bottom left; }
.menu.leaving { animation: pop-out .12s var(--ease-in) forwards; pointer-events: none; }

/* 浮動提示：離場往上淡出 */
.toast.leaving { animation: toast-out .15s var(--ease-in) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -8px); } }

/* 按鈕：顏色慢慢變，按下時縮一點 */
button, .btn, .tab, .subtabs button, .menu-item, .select-pop-item { transition: background-color .15s, color .15s, border-color .15s, filter .15s, transform .1s; }
button:active:not(:disabled), a.btn:active { transform: scale(.97); }
button.tab:active, .subtabs button:active, button.menu-item:active, button.select-pop-item:active, button.link:active, button.c-act:active, button.lightbox-btn:active { transform: none; }
button.lightbox-prev:active, button.lightbox-next:active { transform: translateY(-50%); }
/* 卡片：滑鼠移上去浮起來一點（只在有滑鼠的裝置） */
.addon-card, .hcard, .rank-mini, .post-addon, .msg-file { transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s; }
@media (hover: hover) {
  .addon-card:hover, a.hcard:hover, button.hcard:hover, .room-hcard:hover, a.rank-mini:hover, .post-addon:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
}
.addon-card:active, a.hcard:active, button.hcard:active, a.rank-mini:active, .post-addon:active { transform: scale(.98); }
/* 按讚：愛心彈一下 */
.ic.pop { animation: heart-pop .35s var(--ease-out); }
@keyframes heart-pop { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
/* 作品頁的縮圖切換、輸入框聚焦 */
.addon-thumbs img { transition: opacity .15s, border-color .15s; }
input, textarea, select { transition: border-color .15s, box-shadow .15s; }

/* 載入中的灰色占位（骨架屏），上面有一道光掃過 */
.skel { background: var(--line); border-radius: 6px; position: relative; overflow: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 8px 0; }
.skel-line.w20 { width: 20%; } .skel-line.w25 { width: 25%; } .skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; } .skel-line.w50 { width: 50%; }
.skel-line.w60 { width: 60%; } .skel-line.w70 { width: 70%; } .skel-line.w80 { width: 80%; } .skel-line.w90 { width: 90%; }
.skel-face { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.skel-face.big { width: 72px; height: 72px; }
.skel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.skel-grow { flex: 1; min-width: 0; }
.skel-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.skel-card .skel-shot { aspect-ratio: 16 / 9; border-radius: 0; }
.skel-body { padding: 4px 10px 6px; }
.skel-hcard { flex: 0 0 210px; min-height: 120px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.skel-hcard .skel-body { padding: 0; }
.skel-hcard .skel-shot { border-radius: 6px; }
.skel-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; list-style: none; }
.skel-row .skel-face { width: 32px; height: 32px; }

/* 電腦版的下拉清單（取代 Windows 系統選單，kit.js 的 SelectPopup） */
.select-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; max-height: min(440px, calc(70vh / var(--z, 1))); overflow-y: auto; scrollbar-width: thin; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transform-origin: top center; animation: pop-in .12s var(--ease-out); }
.select-pop.up { transform-origin: bottom center; }
.select-pop.leaving { animation: pop-out .1s var(--ease-in) forwards; pointer-events: none; }
.select-pop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; padding: 7px 10px; border-radius: 6px; color: var(--text); }
.select-pop .select-pop-item:hover, .select-pop .select-pop-item:focus-visible { background: var(--line); filter: none; outline: none; }
.select-pop-item.on { color: var(--accent); font-weight: 600; }
select.open { border-color: var(--accent); }

/* 個人頁的 Xbox 框是連結 */
a.xbox-chip { text-decoration: none; transition: border-color .15s, background-color .15s; }
a.xbox-chip:hover { border-color: #107c10; background: color-mix(in srgb, #107c10 10%, transparent); }

/* 頂部的個人按鈕：名稱在左、頭像在右（名稱只在寬螢幕顯示）。
   名稱到頭像框的邊緣固定 8px（跟方塊幣到名稱一樣）：頭像左右多空出這個框往旁邊超出的寬度（deco.js 依框的種類設定 --deco-side），
   大的框（星界之門、翅膀…）離名稱遠一點、小的框（耳朵、光環）近一點，沒有框就是 8px */
.me-btn { gap: 8px; }
.me-btn > :is(.avatar, .deco-av.deco-av) { margin: 0; }
/* 右邊也空出框的寬度：框的邊緣離視窗邊緣的距離，跟沒有框時頭像離邊緣一樣（跟左上角的 Logo 對稱），框不會被視窗邊緣切掉 */
.me-btn > .deco-av.deco-framed { margin-left: var(--deco-side, 0px); margin-right: var(--deco-side, 0px); }
/* 名字特效的像素字體會改變名稱的寬度（方塊幣跟著移動）：右上角的名稱一律用一般字體，只套顏色、光暈這些不影響寬度的效果 */
.me-name.deco-pixel { font-family: inherit; letter-spacing: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .skel::after { display: none; }
}

/* 未讀線：打開對話時，還沒讀過的訊息上面；文字在中間。點一下畫面或按 Esc 就拿掉 */
.unread-line { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 11px; font-weight: 600; margin: -6px 0; }
.unread-line::before, .unread-line::after { content: ''; flex: 1; border-top: 1px solid var(--danger); }

/* 愛心旁的數字：點了看按讚的人 */

/* 左右撥動的開關 */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); cursor: pointer; }
input.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--muted); cursor: pointer; transition: background-color .15s; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s var(--ease-out); }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 個人頁背景（裝飾品）：貼齊卡片上緣的橫幅 */
.profile-banner { height: 120px; margin: -16px -16px 14px; border-radius: 8px 8px 0 0; overflow: hidden; background: var(--line); }
/* 名字特效在連結裡：不要底線蓋到漸層字 */
a.person:hover .deco-name, a.msg-from-link:hover .deco-name { text-decoration: none; }
.conv-name .deco-name-row { vertical-align: bottom; max-width: 70%; }
.me-btn .deco-name-row { max-width: 140px; }

/* ---------- 商店 ---------- */
/* 商店最上面一列：商店／我的裝飾品、類別，右邊是方塊幣（窄的時候類別換到第二列） */
.shop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.shop-head .subtabs { margin: 0; min-width: 0; }
@media (max-width: 900px) { .shop-head .shop-slots { order: 3; flex-basis: 100%; } }
/* 稀有度篩選和搜尋框：電腦在類別後面；手機放不下時一起排在最下面一行（篩選在左、搜尋框佔滿剩下的寬度） */
.shop-head .shop-rarities { width: auto; flex: none; }
.shop-head .shop-search { flex: 1 1 130px; max-width: 240px; min-width: 0; }
@media (max-width: 600px) { .shop-head .shop-rarities { order: 4; } .shop-head .shop-search { order: 4; flex: 1 1 0; max-width: none; } }
.shop-coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #e0a526; font-variant-numeric: tabular-nums; }
.shop-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.shop-views button { background: none; padding: 5px 12px; border-radius: 7px; color: var(--muted); }
.shop-views button.on { background: var(--accent); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); white-space: normal; }
.shop-item:hover { filter: none; }
@media (hover: hover) { .shop-item:hover { border-color: var(--muted); } }
.shop-item.equipped { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.shop-thumb { height: 100px; border-radius: 9px; background: var(--bg); display: grid; place-items: center; overflow: hidden; position: relative; }
.shop-thumb.slot-bg { display: block; }
.shop-item-name { font-weight: 700; }
.shop-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* 卡片上的稀有度、價格固定在底部：名稱換成兩行的卡片跟一行的對齊 */
.shop-item > .shop-item-meta { margin-top: auto; }
.shop-dialog .shop-item-meta { justify-content: flex-start; margin-bottom: 10px; }
.shop-rarity { font-size: 12px; font-weight: 700; }
.r-common { color: #8f98a8; } .r-rare { color: #3f9bf0; } .r-epic { color: #a86ef5; } .r-legend { color: #e39a14; }
/* 神話：紅到紫的漸層字 */
.r-mythic { color: #ff3d6e; background: linear-gradient(90deg, #ff4d6d, #c13dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shop-state { font-size: 12px; color: var(--muted); }
.shop-state.on { color: var(--accent); font-weight: 700; }
.shop-state.free { color: var(--accent); }
.shop-limited { color: #e39a14; }
.shop-hint { margin-top: 18px; }
.shop-name-sample { font-size: 20px; font-weight: 800; }
.shop-big .shop-name-sample { font-size: 30px; }
.shop-bubble-sample { padding: 7px 12px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14px; max-width: 90%; }
.shop-banner-sample { width: 100%; height: 100%; }
.shop-big { height: 170px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; }
.shop-big.slot-bg { display: block; }
.shop-try-title { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
/* 試穿：跟個人頁一樣，背景橫幅在最上面（沒有背景就沒有），下面頭像和名字一列、徽章框在下一行，最後是訊息泡泡。
   頭像框（圓環、像素、火焰）會超出頭像：外框不裁切，只有背景自己裁出上面的圓角，頭像上下多留空間給框 */
.shop-try { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.shop-try-banner { height: 70px; border-radius: 11px 11px 0 0; overflow: hidden; }
/* 跟個人頁一樣：頭像不另外留框的寬度（框畫進卡片的內距裡），徽章框才會跟頭像左邊對齊 */
.shop-try-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 22px; }
.shop-try-head { display: flex; align-items: center; gap: 16px; max-width: 100%; }
.shop-try-head > :is(.avatar, .deco-av.deco-av) { margin-block: 6px; margin-inline: 0 6px; }
.shop-try-name { font-size: 20px; font-weight: 800; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.shop-try-body .shop-bubble-sample { align-self: flex-end; }
.dialog.shop-dialog { width: min(480px, calc(calc(100vw / var(--z, 1)) - 32px)); }
/* 「方塊幣不足」跟購買按鈕垂直置中 */
.shop-dialog .dialog-actions { align-items: center; }

/* 右鍵（長按）的小選單：圖片、訊息、對話列表 */
.pop-menu { z-index: 1000; min-width: 0; transform-origin: top left; }
/* 長按浮起來時的選單：一開始就不透明，只從小一點放大（kit.js popMenu） */
.menu.hold-menu { animation: hold-menu-in .18s var(--ease-out); }
@keyframes hold-menu-in { from { transform: scale(.92); } }
/* 手機長按的選單：按到的東西（.held）浮起來，其他地方變暗、模糊（kit.js 的 focusHeld）。
   模糊的是一整片，用遮罩挖出跟它一樣形狀的洞；外層透明的那層只擋點擊 */
.hold-veil { position: fixed; inset: 0; z-index: 999; }
/* 出現時模糊和變暗一起從 0 開始（不用整層淡入：iPhone 的 Safari 淡入時不畫模糊，要等淡入完才補上，會慢半拍） */
.hold-blur { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: hold-in .18s ease-out both;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hold-veil.out .hold-blur { animation: hold-out .2s ease-in both; }
.held { transition: transform .24s cubic-bezier(.2, .9, .3, 1.15), box-shadow .24s; }
/* 背景模糊挖的洞跟著浮起來的東西移動：時間、速度曲線跟上面的 transform 一樣（kit.js 的 focusHeld） */
.hold-blur.moving { transition: -webkit-mask-position .24s cubic-bezier(.2, .9, .3, 1.15), mask-position .24s cubic-bezier(.2, .9, .3, 1.15); }
.held[style*="scale"] { box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }
/* 貼文的圖片框：浮起來時不裁切，圖片自己帶圓角、蓋在旁邊的圖上面 */
.post-images.hold-open { overflow: visible; }
.post-images img.held { position: relative; z-index: 1; border-radius: 8px; }
/* 文字裡的連結：不放大，加一點底色 */
a.held { border-radius: 4px; background: color-mix(in srgb, var(--accent) 22%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@keyframes hold-out { to { background-color: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes hold-in { from { background-color: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hold-blur, .hold-veil.out .hold-blur { animation: none; } .held, .hold-blur.moving { transition: none; } }
.danger-text { color: var(--danger); }
/* 刪除、移除、登出等按鈕：紅色文字和圖示（文字連結樣子的按鈕、訊息工具列的灰色圖示也一樣，滑過不變色） */
button.danger-text, button.link.danger-text, .msg-tools .icon-btn.danger-text, .group-members button.link.danger-text:hover { color: var(--danger); }
.msg-menu { min-width: 200px; }
.msg-menu-emoji { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.reaction-pick { background: none; font-size: 22px; line-height: 1; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.reaction-pick:hover { background: var(--line); filter: none; }
.reaction-pick.on { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* 手機：長按訊息是打開選單，不要選取文字（要複製用選單的「複製文字」）。
   內文也要蓋掉手機 App 讓 .msg-body 可以選取的設定（:is(.app-android, .ios-app) :is(...)），不然長按會先選到字、選單出不來 */
@media (pointer: coarse) {
  .thread-msgs .msg-main, .thread-msgs .msg-main .msg-body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* 對話列表：關掉通知的對話名字後面的小鈴鐺 */
.conv-muted { margin-left: 4px; display: inline-flex; vertical-align: -2px; }
/* 群組對話上方：頭貼和名稱可以點（打開成員面板） */
.group-head-open { display: inline-flex; align-items: center; gap: 8px; background: none; padding: 0; color: inherit; font: inherit; min-width: 0; }
.group-head-open:hover { filter: none; }
/* 關掉成員面板後焦點回到這個按鈕，不要出現白框 */
.group-head-open:focus-visible { outline: none; }
/* 對話框打開時焦點在對話框本身（裡面沒有要先輸入的欄位時），外圍不要出現白框；裡面的按鈕、欄位照常有 */
dialog:focus-visible { outline: none; }
/* 鍵盤焦點（Tab 鍵、關掉選單或對話框後回到按鈕上）：按鈕、連結外面隔一點距離畫淡綠色的框，不壓到字和圖的邊緣（取代瀏覽器預設的白框） */
:is(button, a, summary, [role="button"]):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; }
/* 分頁列、子分頁：在可以左右捲動的列裡，外框會被切掉，改成淡綠色底（下緣的選取底線照舊） */
:is([data-tab], .subtabs button, [role="tab"]):focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 6px 6px 0 0; }
/* 輸入框、文字框、下拉選單：打字的時候邊框變綠、外圍一圈淡綠光暈（不用瀏覽器的白框） */
:is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* 搜尋列裡的輸入框沒有自己的邊框（外面那一整列會變綠），不要光暈 */
:is(.msg-search, .emoji-search-row) input:focus { box-shadow: none; }
/* 勾選框、圓圈選項、開關、滑桿：跟按鈕一樣外面隔一點距離的淡綠框 */
input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; }
/* 手機回到對話列表：聊天室往右滑出去、下面露出列表（返回按鈕、系統返回鍵、iPhone 網頁 App 從左邊緣滑；messages.js）；
   從列表點開聊天室時相反，聊天室從右邊推進來（edge-entering） */
@media (max-width: 700px) {
  .dm { position: relative; }
  .dm.thread-open .dm-thread { transition: transform .22s var(--ease-out); }
  .dm.edge-swiping .dm-thread { transition: none; }
  /* 列表自己一層（isolation）：裡面的在線燈號（z-index 3）不會蓋到滑進來、滑出去的聊天室上 */
  .dm.thread-open:is(.edge-swiping, .edge-leaving, .edge-entering) .dm-list { display: flex; position: absolute; inset: 0; isolation: isolate; }
  .dm:is(.edge-swiping, .edge-leaving, .edge-entering) .dm-thread { position: relative; z-index: 1; box-shadow: -8px 0 20px rgba(0,0,0,.35); }
}
/* 設定頁：空的錯誤訊息不佔位置（卡片下面不會多一塊空白）；欄位名稱和輸入框之間留一點空間 */
.card.settings p:empty { display: none; }
.card.settings > :last-child { margin-bottom: 0; }
.card.settings > label.settings-field { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
/* Addon 資訊：標題右邊放 ⋯；檔名和按鈕貼在卡片下面（卡片跟左邊截圖一樣高） */
.addon-page { align-items: stretch; }
.addon-info { display: flex; flex-direction: column; }
.addon-info-head { display: flex; align-items: flex-start; gap: 8px; }
.addon-info-head h2 { flex: 1; min-width: 0; }
.addon-bottom { margin-top: auto; padding-top: 4px; }
.addon-bottom .addon-file { margin: 0 0 10px; }
.addon-status:empty { display: none; }
/* 設定頁的清單（登入方式、封鎖名單）：最後一列下面不畫線 */
.card.settings ul.players li:last-child { border-bottom: 0; padding-bottom: 0; }

/* 設定頁每個區塊的標題：前面有圖示 */
.settings-title { display: flex; align-items: center; gap: 10px; }
.settings-title .ic { color: var(--accent); }
/* 設定頁的「關於」：圖示＋名稱和網址，右邊開啟、複製 */
ul.players.about-links li { flex-wrap: nowrap; }
ul.players.about-links li > .person { flex: 0 1 auto; min-width: 0; }
ul.players.about-links li > .person > .ic { flex: none; color: var(--muted); }
ul.players.about-links li > button { flex: none; }
.about-text { display: flex; flex-direction: column; min-width: 0; }
.about-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.settings ul.about-links li:last-child { border-bottom: 0; padding-bottom: 0; }
/* 手機：開啟、複製只留圖示（方形小按鈕），網址多顯示一點 */
@media (max-width: 700px) {
  ul.players.about-links li { gap: 6px; }
  .about-btn { padding: 8px 10px; }
  .about-btn > .about-btn-text { display: none; }
}

/* 我的個人頁：我的裝飾品（每一類一列，點了裝備） */
.my-deco-head { align-items: center; }
.my-deco.open .my-deco-head { margin-bottom: 4px; }
.my-deco-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; padding: 0; color: var(--text); font-size: 1.5em; font-weight: bold; }
.my-deco-toggle .ic { color: var(--muted); }
.my-deco-row { padding: 10px 0; border-top: 1px solid var(--line); }
.my-deco-row:first-of-type { border-top: 0; }
.my-deco-slot { margin-bottom: 8px; }
/* 跟首頁的卡片列一樣（.hrow）：滑鼠可以拖、捲軸是同一種，手機不顯示捲軸 */
.my-deco-opts { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.my-deco-opt { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); white-space: normal; }
.my-deco-opt:hover { border-color: var(--muted); filter: none; }
.my-deco-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.my-deco-prev { height: 44px; width: 100%; display: grid; place-items: center; overflow: visible; color: var(--muted); }
.my-deco-prev.slot-bg { overflow: hidden; border-radius: 6px; }
.my-deco-label { font-size: 12px; line-height: 1.3; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-deco-name { font-weight: 800; font-size: 14px; max-width: 76px; overflow: clip; overflow-clip-margin: 10px; text-overflow: ellipsis; white-space: nowrap; }
/* 毛玻璃泡泡（deco.js）：原本是半透明白底＋淺色字，淺色主題的白底上看不見；改成半透明深色底＋主題的文字色（顏色是 element.style 設的，要 !important 才蓋得過） */
:root[data-theme="light"] .deco-bubble.deco-glass { background: rgba(20, 24, 30, .07) !important; color: var(--text) !important; box-shadow: 0 0 0 1px rgba(20, 24, 30, .16) inset !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .deco-bubble.deco-glass { background: rgba(20, 24, 30, .07) !important; color: var(--text) !important; box-shadow: 0 0 0 1px rgba(20, 24, 30, .16) inset !important; }
}
.my-deco-bubble { padding: 4px 10px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; }
.my-deco-banner { display: block; width: 72px; height: 40px; border-radius: 6px; overflow: hidden; }
.my-deco-empty { margin: 0; }

/* 整頁的捲軸一直都在（頁面不夠長時只有軌道）：切換分頁、內容長短變化時不會讓整頁左右跳動；
   軌道塗成跟旁邊一樣的顏色（頂部列那一段是頂部列的顏色），不會像以前預留的空位那樣看起來缺一塊。
   開著對話框時 overflow 是 hidden，靠 scrollbar-gutter 留住位置 */
html { scrollbar-gutter: stable; overflow-y: scroll; }
/* 手機寬度（電腦版視窗拉窄也是）：跟手機一樣不顯示整頁的捲軸、不預留位置（滾輪照樣能捲）。
   不然打開聊天室（整頁不捲動）時，捲軸那一條要嘛拿掉、整個畫面往右寬一條，要嘛留著、聊天室右邊多一塊空白 */
@media (max-width: 700px) { html { scrollbar-width: none; scrollbar-gutter: auto; } }
/* 開著對話框（好友名單、商品詳情…）時，後面的頁面不跟著捲；對話框裡捲到底也不會帶動後面 */
html:has(dialog[open]) { overflow: hidden; }
dialog, dialog * { overscroll-behavior: contain; }

/* 首頁卡片列：滑鼠可以按住拖動 */
/* 滑鼠不對齊卡片（放開後的慣性滑行停在哪就是哪）；手指滑動保留對齊 */
@media (pointer: fine) { .hrow { cursor: grab; scroll-snap-type: none; } .hrow.dragging { cursor: grabbing; } .hrow.dragging, .hrow.dragging * { user-select: none; } }
/* 手機（觸控）：首頁卡片列不顯示橫向捲軸，直接在卡片上左右滑（捲軸太細，手指拖不動） */
@media (pointer: coarse) { .hrow { scrollbar-width: none; } .hrow::-webkit-scrollbar { display: none; } }

/* 首頁每一列右上角的「查看全部」：圓形箭頭 */
.see-all { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
/* 滑過（或滑過標題）：不用綠色，改成亮一點的灰——箭頭和外框變亮、底色變淺 */
.see-all:hover { color: var(--text); border-color: var(--muted); background: var(--line); text-decoration: none; }
.home-head:has(.home-title-link:hover) .see-all { color: var(--text); border-color: var(--muted); background: var(--line); }

/* 訊息：要送出的圖片顯示縮圖，右上角是移除 */
.attach-list { align-items: flex-end; }
.attach-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); flex: none; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb .attach-x { position: absolute; top: 3px; right: 3px; padding: 3px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; }
.attach-thumb .attach-x:hover { background: rgba(0,0,0,.8); }
.profile-form .group-avatar-row, .profile-form > .row { margin-bottom: 12px; }

/* ---------- 方塊幣：右上角的數量、方塊幣頁（簽到、任務、紀錄） ---------- */
.coin-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  color: #e0a526; font-weight: 700; font-size: 14px; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.coin-chip:hover { border-color: #e0a526; text-decoration: none; }
.coin-chip .ic { flex: none; }
.coin-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--panel); }
.coins-page { max-width: 720px; margin: 0 auto; }
.coins-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.coins-head h1 { margin: 0; font-size: 22px; }
.coins-balance { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; color: #e0a526; }
.coins-balance-n { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.coins-balance-icon { line-height: 0; }
/* 免費、儲值各多少：數字下一行的小框（字是方塊幣的黃色，框是一般的線條顏色）；前面的 .coins-balance-break 佔滿一整行讓它換行 */
.coins-balance { flex-wrap: wrap; row-gap: 0; }
.coins-balance-break { flex-basis: 100%; height: 0; }
.coins-balance-split { margin-top: 8px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.coins-views { margin-bottom: 12px; }
/* 儲值：兩欄方案卡片 */
.topup-need { background: color-mix(in srgb, var(--warn) 18%, var(--panel)); color: var(--warn); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
/* 付款確認中：一般提示（不是錯誤），淡綠底＋時鐘圖示 */
.topup-wait { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.topup-wait > .ic { flex: none; color: var(--accent); }
.topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.topup-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); text-align: center; }
.topup-card.hint { border-color: var(--accent); }
.topup-img { width: 72px; height: 72px; margin-bottom: 2px; }
.topup-n { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; color: #e0a526; font-variant-numeric: tabular-nums; }
.topup-x2 { position: absolute; top: -9px; right: -6px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.topup-old { color: var(--muted); font-size: 13px; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.topup-bonus { color: var(--accent-hover); font-size: 13px; }
.topup-price { margin-top: 8px; width: 100%; font-weight: 700; }
.topup-note { margin-top: 12px; line-height: 1.5; }
.topup-note:has(+ .topup-agree) { margin-bottom: 0; }
.topup-agree { margin-top: 6px; line-height: 1.5; }
.topup-off p { margin: 0 0 12px; }
.topup-cost { margin-top: 8px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pricing-page .topup-grid { margin: 16px 0 0; }
.coins-body .card { margin-bottom: 12px; }
.coins-body h2 { margin: 0; font-size: 17px; }
.coins-daily > p { margin: 6px 0 12px; }
.daily-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.daily-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.daily-day .daily-icon { line-height: 0; color: #e0a526; }
.daily-day .daily-n { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.daily-day.done { border-color: transparent; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.daily-day.done .daily-icon { color: var(--accent); }
.daily-day.today { border-color: #e0a526; box-shadow: 0 0 0 1px #e0a526 inset; }
.daily-day.today.done { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.daily-label { white-space: nowrap; font-size: 11px; }
.coins-ads > p { margin: 4px 0 10px; }
.ads-row { display: flex; align-items: center; gap: 12px; }
.ads-row .coins-daily-actions { margin-top: 0; }
.ads-days { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ads-day { flex: 0 0 52px; }
.ads-privacy { margin: 8px 0 0; text-align: right; }
.coins-daily-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
/* 按鈕預設不換行：英文「Checked in today — come back tomorrow」加上手機放大字體會從左邊超出卡片。最寬到卡片寬，放不下就換行 */
.coins-daily-actions > button { max-width: 100%; white-space: normal; text-align: center; }
.coins-task-list { list-style: none; margin: 8px 0 0; padding: 0; }
.coins-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.coins-task:first-child { border-top: 0; }
.coins-task-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.coins-task-text { flex: 1; min-width: 0; }
.coins-task-title { font-weight: 600; }
.coins-task.claimed .coins-task-title, .coins-task.claimed .coins-amount { opacity: .55; }
.coins-amount { flex: none; display: inline-flex; align-items: center; gap: 3px; color: #e0a526; font-weight: 700; font-variant-numeric: tabular-nums; }
.coins-task > .btn, .coins-task > button, .coins-state { flex: none; min-width: 64px; justify-content: center; text-align: center; }
.coins-state { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; }
/* 任務卡片：每週／一次性分頁、自訂任務的進度條和「3/5 天」 */
.coins-tasks-head h2 { margin: 0; }
/* 標題右邊的小膠囊（連續簽到、還有多久重置）：字小一點、不換行，跟標題中間留空 */
.coins-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.coins-chip.streak { color: #e39a14; border-color: color-mix(in srgb, #e39a14 45%, transparent); background: color-mix(in srgb, #e39a14 10%, transparent); }
.coins-tasks-hint { margin: 2px 0 0; }
/* 邀請好友：我的邀請碼（大字、虛線框）＋複製、分享；邀滿送的徽章；邀請了誰（頭像）；新玩家填邀請碼的欄位 */
.coins-invite > p { margin: 2px 0 0; }
.coins-chip.invite-full { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.invite-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invite-code { padding: 4px 14px; border: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); border-radius: 8px; background: var(--bg);
  font-family: ui-monospace, Consolas, monospace; font-size: 1.35em; font-weight: 700; letter-spacing: .14em; user-select: all; }
.invite-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
/* 一格：上面是裝飾品（頭像框往外多留空間），下面名稱和「邀請 N 位」；還沒拿到的淡一點 */
.invite-prize { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); text-align: center; min-width: 0;
  color: inherit; font: inherit; cursor: pointer; }
.invite-prize:hover { background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.invite-prize-art { height: 58px; display: grid; place-items: center; max-width: 100%; }
.invite-prize-sample { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-prize-name { font-weight: 600; overflow-wrap: anywhere; }
.invite-prize-at { display: inline-flex; align-items: center; gap: 3px; }
.invite-prize:not(.got) .invite-prize-at { color: var(--muted); }
.invite-prize.got { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.invite-prize.got .invite-prize-at { color: var(--accent); }
.invite-faces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.invite-redeem { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.invite-redeem p { margin: 2px 0 0; }
.invite-redeem-head { align-items: center; }
.invite-redeem-row { display: flex; gap: 8px; margin-top: 8px; }
.invite-input { flex: 1; min-width: 0; max-width: 220px; text-transform: uppercase; letter-spacing: .1em; }
.invite-input::placeholder { text-transform: none; letter-spacing: normal; }
.invite-by { margin: 12px 0 0; }
/* 邀請連結（/i/<邀請碼>）的頁面 */
.invite-page { max-width: 420px; margin: 24px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.invite-page h2 { margin: 4px 0 0; overflow-wrap: anywhere; }
.invite-page p { margin: 0; }
.invite-page-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.5em; font-weight: 700; letter-spacing: .16em; }
.invite-page-ok { justify-content: center; color: var(--accent); }
.coins-task-tabs { margin: 10px 0 0; }
.coins-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.coins-progress { flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.coins-progress > span { display: block; height: 100%; border-radius: inherit; background: #e0a526; }
.coins-progress.done > span { background: var(--accent); }
/* 右邊的數字一樣寬，每個任務的進度條才一樣長：格子裡疊著列表裡所有的文字（看不到，coins.js），寬度是最寬的那個 */
.coins-progress-n { flex: none; display: grid; justify-items: start; font-variant-numeric: tabular-nums; }
.coins-progress-n > * { grid-area: 1 / 1; white-space: nowrap; }
.coins-progress-ghost { visibility: hidden; }
.coins-history { list-style: none; padding: 4px 16px; }
.coins-entry { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.coins-entry:first-child { border-top: 0; }
.coins-entry-text { flex: 1; min-width: 0; }
.coins-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.coins-delta.plus { color: #e0a526; }
.coins-delta.minus { color: var(--muted); }

/* 中等寬度（分頁還在上面）：分頁放不下時，品牌只留圖示 */
@media (min-width: 701px) and (max-width: 960px) {
  .brand-text { display: none; }
  .brand { margin-right: 8px; }
}
/* 手機和中等寬度：右上角只留頭像，不顯示名字（名字在頭像選單的個人頁裡看得到）；方塊幣直接靠在頭像旁邊 */
@media (max-width: 960px) {
  .me-btn > :first-child:not(:last-child) { display: none; }
}

/* 窄螢幕：右上角要放下載、方塊幣、名字和頭像，品牌只留圖示 */
@media (max-width: 480px) {
  .brand-text { display: none; }
  .brand { margin-right: 8px; }
  #top-right { gap: 8px; }
  .coin-chip { padding: 0 8px 0 6px; font-size: 13px; }
  .daily-day { padding: 6px 0; }
  .daily-label { font-size: 10px; }
  .coins-task { gap: 10px; }
  .coins-task-icon { display: none; }
}
/* 手機 App、iPhone 網頁 App 沒有「下載程式」按鈕：標題留著 */
@media (max-width: 480px) {
  :is(.app-android, .ios-app) .brand-text { display: inline; }
}

/* ---------- 連線紀錄 ---------- */
.join-log-title { margin: 8px 0 10px; font-size: 22px; }
.join-log { list-style: none; padding: 4px 16px; margin-top: 8px; }
.join-log > li { padding: 12px 0; border-top: 1px solid var(--line); }
.join-log > li:first-child { border-top: 0; }
.join-log-row { display: flex; align-items: center; gap: 12px; }
.join-log-face { flex: none; line-height: 0; }
.join-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 這一列和名字連結都不能 overflow: hidden：名字特效的光暈會被裁成方框（iPhone 不支援 overflow-clip-margin）。
   「…」交給最裡面的名字自己做（.deco-name 已經處理好光暈），外面幾層只負責讓它能縮 */
.join-log-names { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
a.join-log-name { color: var(--text); text-decoration: none; font-weight: 600; }
.join-log-name { font-weight: 600; }
/* 名字太長才用「…」（ID 先被擠掉） */
.join-log-names > .join-log-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.join-log-names > .join-log-name:has(.deco-name) { overflow: visible; display: flex; align-items: baseline; }
.join-log-name > .deco-name { min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.join-log-names > .muted { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.join-log-room { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text); }
.join-log-room > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-log-room .ic { flex: none; color: var(--muted); }
.join-log-side { flex: none; display: flex; align-items: center; gap: 8px; }
/* 「多久前・幾次」自己一行，文字本身不換行（「3 次」不會被拆成兩行） */
.join-log-when { white-space: nowrap; }
.tag.live { color: var(--accent); font-size: 12px; font-weight: 700; }
/* 手機：搜尋框自己一行，下一行右邊是「連線紀錄」和「建立房間」（都有文字） */
@media (max-width: 480px) {
  [data-page="rooms"] .toolbar input[type=search] { flex-basis: 100%; max-width: none; }
}

/* ---------- Emoji 選擇器 ---------- */
.emoji-btn { flex: none; align-self: center; padding: 4px; color: var(--muted); }
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { color: var(--text); }
/* 插入程式碼區塊的「</>」按鈕：跟笑臉按鈕同樣的樣子 */
.code-btn { flex: none; align-self: center; padding: 4px; color: var(--muted); }
.code-btn:hover { color: var(--text); }
.emoji-picker { position: fixed; z-index: 70; width: min(352px, calc(calc(100vw / var(--z, 1)) - 16px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; animation: pop-in .15s var(--ease-out); }
.emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.emoji-tab { flex: 1 0 auto; min-width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: none; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--muted); opacity: .6; filter: grayscale(.6); }
.emoji-tab:hover { opacity: 1; filter: none; }
.emoji-tab.on { background: var(--bg); opacity: 1; filter: none; color: var(--text); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); padding: 6px; flex: 0 1 232px; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.emoji-cell { height: 38px; padding: 0; background: none; border-radius: 8px; font-size: 24px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.emoji-cell:hover { background: var(--bg); filter: none; }
.emoji-empty { grid-column: 1 / -1; text-align: center; margin: 24px 0; }

/* ---------- 載入畫面（index.html 的 #splash）：等超過一下子才淡入，畫面好了就淡出 ---------- */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); animation: fade-in .25s ease-out .4s both; }
#splash img { width: 96px; height: 96px; border-radius: 22px; }
#splash.leaving { animation: fade-out .2s var(--ease-in) forwards; }

/* 整頁捲軸的軌道（Chromium 的整頁捲軸樣式是看 body 的）：頂部列那一段是頂部列的顏色，下面是背景色 */
:root { --topbar-h: 52px; }
@media (max-width: 700px) { :root { --topbar-h: 48px; } }
@media (display-mode: standalone) { :root { --topbar-h: calc(52px + env(safe-area-inset-top)); } }
@media (display-mode: standalone) and (max-width: 700px) { :root { --topbar-h: calc(48px + env(safe-area-inset-top)); } }
body::-webkit-scrollbar-track { background: var(--bg); }
/* 有頂部列時：軌道（滑桿能跑的範圍）從頂部列下面開始，不蓋過頂部列；上面空出來那段塗成頂部列的顏色和底線。
   手機往下滑把頂部列藏起來時從最上面開始 */
body:has(#app:not(.hidden))::-webkit-scrollbar { background: linear-gradient(var(--panel) calc(var(--topbar-h) - 1px), var(--line) 0 var(--topbar-h), var(--bg) 0); }
body:has(#app:not(.hidden))::-webkit-scrollbar-track { background: var(--bg); margin-top: var(--topbar-h); }
:root.bars-hidden:not(.mini) body::-webkit-scrollbar-track { margin-top: 0; }

/* Minecraft 的格式代碼（kit.js 的 mcText）：基岩版的顏色、粗體、斜體 */
.mc-0 { color: #000000; } .mc-1 { color: #0000aa; } .mc-2 { color: #00aa00; } .mc-3 { color: #00aaaa; } .mc-4 { color: #aa0000; } .mc-5 { color: #aa00aa; }
.mc-6 { color: #ffaa00; } .mc-7 { color: #aaaaaa; } .mc-8 { color: #555555; } .mc-9 { color: #5555ff; } .mc-a { color: #55ff55; } .mc-b { color: #55ffff; }
.mc-c { color: #ff5555; } .mc-d { color: #ff55ff; } .mc-e { color: #ffff55; } .mc-f { color: #ffffff; } .mc-g { color: #ddd605; } .mc-h { color: #e3d4d1; }
.mc-i { color: #cecaca; } .mc-j { color: #443a3b; } .mc-m { color: #971607; } .mc-n { color: #b4684d; } .mc-p { color: #deb12d; } .mc-q { color: #47a036; }
.mc-s { color: #2cbaa8; } .mc-t { color: #21497b; } .mc-u { color: #9a5cc6; } .mc-v { color: #eb7114; }
/* 自己的訊息泡泡是綠底：彩色字加一圈暗邊，綠色、黃色字才看得清楚 */
.msg.mine .msg-body span[class*="mc-"]:not([class="mc-l"]):not([class="mc-o"]):not([class="mc-l mc-o"]) { text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 0 1px rgba(0, 0, 0, .7); }
.mc-l { font-weight: 700; }
.mc-o { font-style: italic; }

/* 清單裡的頭像（好友、粉絲名單、按讚的人、群組成員、通知、對話列表、訊息、貼文和留言的作者、@ 選單、連線紀錄）：
   有沒有頭像框都左右各留頭像大小 1/4 的空間（框和光暈剛好放得下），每一列的頭像、名字才會對齊 */
:is(ul.players li > .person, ul.players li, .conv, .msg-face, .mention-item, .join-log-face) > :is(.avatar, .deco-av, .group-icon, .presence-av, .notify-face) { margin-inline: calc(var(--av, 28px) / 4); }
/* 貼文、留言的作者：頭像左邊貼齊內文（卡片的內距放得下框），右邊一樣留空間（加上 8px 的 gap，最大的框也碰不到名字），名字才會對齊 */
.author-face > :is(.avatar, .deco-av) { margin: 0 calc(var(--av, 28px) / 8) 0 0; }
/* 卡片裡的作者（Addon 卡片、首頁卡片）：頭像不管有沒有框都左邊貼齊卡片的文字，右邊留一樣的小間距，名字才會對齊
   （框和光暈往外伸到卡片內距裡，小頭像的框很細，不會壓到名字） */
:is(.addon-by, .hauthor) > :is(.avatar, .deco-av.deco-av) { margin: 0 calc(var(--av, 20px) / 8) 0 0; }

/* 個人頁的大頭像上下固定留最大的框（火焰，頭像的 1/4）的空間：有沒有框、換哪種框，版面高度都一樣，框不會壓到下面的好友、粉絲數 */
.profile-head > :is(.avatar, .deco-av.deco-av) { margin-block: 18px; }
/* 手機：頭像下面換行接徽章框、Xbox 名稱，下方留的框空間和換行的間距縮小，徽章以下整體往上靠近頭像 */
@media (max-width: 700px) {
  .profile-head { row-gap: 8px; }
  .profile-head > :is(.avatar, .deco-av.deco-av) { margin-bottom: 4px; }
}

/* 右上角跟左上角的 Logo 對稱：最右邊的頭像離視窗邊緣的距離跟 Logo 離左邊一樣（扣掉整頁捲軸的寬度）；
   方塊幣、名字、頭像之間的間距一樣 */
#topbar { padding-right: max(0px, calc(16px - (calc(100vw / var(--z, 1)) - 100%))); }
@media (max-width: 700px) { #topbar { padding-right: max(0px, calc(12px - (calc(100vw / var(--z, 1)) - 100%))); } }
#top-right { gap: 12px; }
.me-btn { padding: 4px 0; }
/* 寬螢幕有顯示名稱：方塊幣跟名稱靠近一點（12px → 8px） */
@media (min-width: 961px) { #top-right > .coin-chip + .dropdown { margin-left: -4px; } }
@media (max-width: 480px) { #top-right { gap: 8px; } }

/* 商店的購買按鈕：購買 ⬢ 100 */
.shop-dialog .dialog-actions button.primary:has(.buy-price) { display: inline-flex; align-items: center; gap: 8px; }
.buy-price { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 訊息的表情符號反應：泡泡下面一排小框（表情＋人數），自己按過的是綠框 */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg.mine .msg-reactions { justify-content: flex-end; }
.reaction { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 13px; line-height: 20px; }
.reaction:hover { border-color: var(--muted); filter: none; }
.reaction.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.reaction-emoji { font-size: 15px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.reaction-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.reaction.on .reaction-n { color: var(--accent); font-weight: 600; }

/* iPhone 加到主畫面的網頁 App：只能捲動，不能兩指縮放、點兩下放大（platform.web.js） */
.ios-app, .ios-app body { touch-action: pan-x pan-y; }
/* iPhone 網頁 App：不顯示網站底部的連結列（服務條款等在設定頁最下面），頁面底下只留底部分頁列的位置 */
.ios-app #foot { display: none; }

/* ---------- 浮動球的小視窗（Android，?mini=1）：分頁放在頂部列（沒有底部分頁列），只有房間、訊息、好友 ---------- */
.mini #topbar { height: 44px; padding: 0 4px 0 6px; gap: 2px; }
.mini .brand, .mini #foot, .mini #topbar > .spacer { display: none; }
.mini #tabs { position: static; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; overflow: hidden; }
/* 分頁平分頂部列（不用左右捲動） */
.mini .tab { flex: 1 1 0; min-width: 0; justify-content: center; flex-direction: row; gap: 4px; padding: 0 3px; border-top: 0; border-bottom: 2px solid transparent; font-size: 13px; }
.mini .tab.active { border-bottom-color: var(--accent); }
.mini .tab-icon { display: block; line-height: 0; }
.mini .tab-icon svg { width: 18px; height: 18px; }
.mini .tab-label { font-size: 13px; }
/* 小視窗直的時候：紅點疊在分頁右上角，不佔文字的寬度（「訊息」兩個字不會被擠成「訊…」） */
.mini .tab { position: relative; }
.mini .tab .count-badge { position: absolute; top: 3px; right: 0; margin: 0; }
.mini #top-right { gap: 0; }
.mini .tab-label { max-width: none; overflow: hidden; text-overflow: ellipsis; }
/* 透明度的拉桿 */
.opacity-menu { min-width: 220px; padding: 10px 12px; }
.opacity-head { align-items: center; margin-bottom: 6px; }
.opacity-menu input[type=range] + .opacity-head { margin-top: 12px; }
.opacity-menu input[type=range], .card.settings input[type=range] { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); }
/* 整個小視窗固定高度：頂部列、加入狀態列，剩下的給內容（自己捲動）；訊息、好友分頁剛好填滿，輸入框一直看得到 */
.mini #app { display: flex; flex-direction: column; height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); }
.mini #topbar, .mini #bars { flex: none; }
.mini main { flex: 1; min-height: 0; width: 100%; overflow-y: auto; padding: 8px; }
/* 小視窗的主畫面不顯示捲軸（用手指捲）：換分頁時內容一瞬間超出高度，捲軸出現又消失，整個排版會左右跳一下
   （自訂樣式的捲軸會佔寬度，不像系統預設的浮在上面） */
.mini main { scrollbar-width: none; }
.mini main::-webkit-scrollbar { display: none; }
.mini #pages, .mini .page { height: 100%; }
.mini .dm-page, .mini .friends-page { height: 100%; }
.mini .join-bar { padding: 6px 10px; gap: 8px; font-size: 13px; }
.mini .join-hint { font-size: 11px; }
.mini .join-bar button { padding: 4px 10px; }
/* 小視窗：加入狀態列（遊戲中：…）只在房間分頁顯示，訊息、好友分頁省下空間（android.js 標上 mini-off-rooms） */
.mini.mini-off-rooms .join-bar { display: none; }
/* 小視窗裡用不到的：訊息／好友的切換（分頁列已經有）、更新提示、開房說明、好友的搜尋（附件可以用：選檔由 PickActivity 代開）；
   好友名單下面沒有錯誤訊息時不留空白，名單一路填到底 */
.mini .social-switch, .mini .update-bar, .mini .host-help, .mini .host-help-btn, .mini .friends-page > p.error:empty { display: none !important; }
/* 小視窗（直的、窄的）：訊息的對話列表、聊天室和好友名單不用圓角外框，往外伸到小視窗的邊緣（蓋掉 main 的內距），跟 App 裡手機版一樣 */
@media (max-width: 700px) {
  .mini .dm :is(.dm-list, .dm-thread) { border: 0; border-radius: 0; margin: -8px; padding: 8px; }
  .mini .friends-page > .friends-list { border: 0; border-radius: 0; margin: 0 -8px -8px; padding: 8px; }
}
@media (max-width: 700px) and (orientation: landscape) {
  .mini .dm :is(.dm-list, .dm-thread) { margin: -6px -8px; padding: 6px 8px; }
  .mini .friends-page > .friends-list { margin: 0 -8px -6px; }
}

/* 小視窗橫放（玩遊戲時）：分頁改成左側的直欄、收起／設定／展開改成右側的直欄（由上到下），加入狀態列和內容用中間的整個高度；
   聊天的卡片、輸入框縮小一點，多留給訊息。頂部列拆開（display: contents），分頁和按鈕各自放進格子 */
@media (orientation: landscape) {
  /* 左右兩欄一樣寬、都從上面開始排；分頁和按鈕都是一樣大的圓角方塊，目前的分頁用淡淡的綠底標出來 */
  .mini #app { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: auto minmax(0, 1fr); }
  .mini #topbar { display: contents; }
  .mini #tabs { grid-column: 1; grid-row: 1 / -1; flex: none; flex-direction: column; justify-content: flex-start; align-items: center; width: 56px; height: auto; min-height: 0;
    padding: 6px 0; gap: 4px; background: var(--panel); border: 0; border-right: 1px solid var(--line); overflow-y: auto; }
  .mini .tab { flex: none; width: 46px; height: 50px; flex-direction: column; justify-content: center; gap: 2px; padding: 0; border: 0; border-radius: 10px; font-size: 11px; position: relative; }
  .mini .tab.active { border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .mini .tab-label { font-size: 11px; max-width: 100%; }
  .mini .tab .count-badge { position: absolute; top: 2px; right: 2px; margin: 0; }
  /* 右側：收起在最上面，接著設定、展開（畫面上的順序是展開、設定、收起，反過來排）；不裁切，設定的小視窗才不會被擋住 */
  .mini #top-right { grid-column: 3; grid-row: 1 / -1; position: relative; z-index: 35; flex-direction: column-reverse; justify-content: flex-end; align-items: center;
    gap: 4px; padding: 6px 0; background: var(--panel); border-left: 1px solid var(--line); }
  .mini #top-right > .icon-btn, .mini #top-right > .dropdown > .icon-btn { width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
  .mini #bars { grid-column: 2; grid-row: 1; }
  .mini main { grid-column: 2; grid-row: 2; padding: 6px 8px; }
  .mini .dm .card { padding: 8px 10px; }
  .mini .thread-head { min-height: 0; padding-bottom: 6px; }
  .mini .thread-form { padding-top: 6px; }
  .mini .thread-form textarea { height: 40px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}

/* 好友名單：最愛的好友名字旁的星星 */
.fav-star { flex: none; display: inline-flex; color: #e0a526; overflow: visible !important; }
.fav-star .ic { fill: currentColor; }

/* Emoji 選擇器的搜尋框 */
.emoji-search-row { display: flex; align-items: center; gap: 6px; margin: 8px 8px 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); }
.emoji-search-row:focus-within { border-color: var(--accent); }
.emoji-search-row input { border: 0; background: none; padding: 7px 0; min-width: 0; flex: 1; outline: none; }

/* ---------- 頭像框的對齊（第二輪）：頭像本身對齊旁邊、下面的文字，有沒有框都一樣；框伸到內距裡 ---------- */
/* 貼文、留言的作者：頭像左邊貼齊內文（有框的也一樣，框伸到卡片的內距），名字才會對齊；貼文卡片內距加大一點，框不會擠到卡片邊緣 */
.author-face > :is(.avatar, .deco-av.deco-av) { margin: 0 calc(var(--av, 28px) / 8) 0 0; }
.card.post { padding-inline: 20px; }
/* 頭像到上邊框約 15px：上面 14px（頭像跟旁邊兩行字置中會多 1px）；
   愛心那一列到下邊框約 12～14px：下面 8px（愛心、留言、分享的按鈕本身已經有 4px 的內距） */
.card.post { padding-top: 14px; padding-bottom: 8px; }
/* 貼文的內文、圖片、影片左邊對齊頭像的左邊，右邊延伸到對稱的位置；愛心等按鈕往左移按鈕的內距（10px），圖示也對齊頭像；跟頭像那一列多空一點 */
/* 內文在頭像和愛心那一列的正中間：愛心的圖示上面還有按鈕的內距，所以頭像那邊多空一點、按鈕列少空一點（實測差約 4px） */
.card.post > .post-actions { margin-left: -10px; margin-top: 6px; }
/* 頭像有框時再多空框往下超出的距離（kit.js 的 takeDecoExt 設定 --deco-below），框到內文、圖片、影片的距離跟沒框一樣 */
.card.post > .post-head { margin-bottom: calc(8px + var(--deco-below, 0px)); }
/* 個人頁：大頭像左邊對齊下面的好友數、自我介紹；右邊留給框（會動的火焰框伸出頭像 1/4） */
.profile-card, .card.profile-head { padding-inline: 22px; }
.profile-card > .profile-banner { margin: -16px -22px 14px; }
.profile-head > :is(.avatar, .deco-av.deco-av) { margin-inline: 0 6px; }
/* 其他「頭像＋名字」（房間列表的房主、對話上方、Addon 作者）：頭像左邊對齊上面的標題、文字，右邊留框的空間 */
:is(a, span).person > :is(.avatar, .deco-av.deco-av, .presence-av) { margin: 0 calc(var(--av, 28px) / 4) 0 0; }

/* ---------- 訊息：未讀、新訊息、正在輸入、滑動回覆、圖片按鈕 ---------- */
.thread-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread-body > .thread-msgs { flex: 1; min-height: 0; }
/* 上方中間「N 則未讀訊息」、下方中間「N 則新訊息」 */
.unread-jump, .new-pill { position: absolute; left: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transform: translateX(-50%); animation: pill-in .16s var(--ease-out); }
@keyframes pill-in { from { opacity: 0; transform: translateX(-50%) scale(.92); } }
/* 「最新訊息」按鈕消失時：縮小淡出（messages.js） */
@keyframes pill-out { to { opacity: 0; transform: translateX(-50%) scale(.92); } }
.new-pill.pill-leaving { animation: pill-out .14s var(--ease-in) forwards; pointer-events: none; }
.unread-jump:hover, .new-pill:hover { background: var(--accent-hover); filter: none; }
/* 按下時的縮放要保留置中用的 translateX（不然一般按鈕的 scale 會蓋掉它，按鈕往旁邊跳、放開時已經不在按鈕上，點不到） */
button.unread-jump:active, button.new-pill:active { transform: translateX(-50%) scale(.97); }
.unread-jump { top: 8px; }
.new-pill { bottom: 10px; }
.msg-loading { margin: auto; padding: 16px; text-align: center; }
.thread-body:has(.typing:not(.hidden)) .new-pill { bottom: 26px; }
.thread-body:has(.typing:not(.hidden)) > .thread-msgs { padding-bottom: 22px; }
/* 誰正在輸入：輸入框上面，浮在訊息上（不佔排版的位置），三個點上下跳 */
/* 三個點的左邊對齊下面輸入框的左邊（--typing-left 是輸入框離對話區左邊多遠，ui/messages.js 量；減掉左內距 8px）。
   輸入框上面沒有分隔線：往下移 4px，靠近輸入框一點（還在輸入區上方的內距裡，不會碰到輸入框） */
.typing { position: absolute; left: max(0px, calc(var(--typing-left, 10px) - 8px)); bottom: -4px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - max(0px, calc(var(--typing-left, 10px) - 8px)) - 2px); padding: 2px 10px 2px 8px;
  border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; }
.typing-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing-dots { display: inline-flex; gap: 3px; flex: none; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typing-dot 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }
/* 滑動回覆：訊息跟著手指移動，旁邊出現回覆圖示，滑夠遠變綠色 */
.msg { position: relative; transition: transform .2s var(--ease-out); }
.msg.swiping { transition: none; }
.swipe-hint { position: absolute; top: 50%; left: -36px; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%;
  background: var(--line); color: var(--text); opacity: 0; pointer-events: none; transition: background .15s, transform .15s; }
.msg.mine .swipe-hint { left: auto; right: -36px; }
.msg.swipe-ready .swipe-hint { background: var(--accent); color: #fff; transform: scale(1.12); }
/* 附件的檔案：手機上不超出訊息的寬度（檔名用「…」） */
.msg-row.with-file { width: auto; }
.msg-files { max-width: 100%; }
.msg-file { max-width: min(280px, 100%); min-width: 0; box-sizing: border-box; }
.msg-file > .muted { flex: none; white-space: nowrap; }
/* 輸入框左邊：＋（任何檔案）和圖片（相片、影片）兩個按鈕靠近一點 */
.thread-form .image-btn { margin-left: -8px; }
/* 聊天輸入列的表情按鈕：量起來是正中間，但文字框的邊框顏色淡、送出按鈕顏色亮，看起來偏右，往左挪 1px（不影響其他東西的位置） */
.thread-form .emoji-btn { position: relative; left: -1px; }
/* 誰按了表情：反應後面的小按鈕、名單對話框 */
.reaction-who { padding: 1px 6px; color: var(--muted); }
.reaction-who .ic { display: block; }
.reactor-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.reactor-tabs button { display: inline-flex; align-items: center; gap: 2px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text); font-size: 13px; }
.reactor-tabs button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.reactor-list { max-height: min(calc(50vh / var(--z, 1)), 420px); overflow-y: auto; }
.reactor-list .reaction-emoji { font-size: 18px; }
ul.players.reactor-list li { flex-wrap: nowrap; }
.reactor-list li > .person { flex: 1; min-width: 0; }
.reactor-list li > .spacer { display: none; }
/* 釘選的訊息清單：頭像、名稱＋時間、內容（兩行截斷）；頭像框不裁（列表留左右內距，按鈕不 overflow: hidden） */
.pins-list { max-height: min(calc(60vh / var(--z, 1)), 480px); overflow-y: auto; padding: 0 6px; }
ul.players.pins-list li { padding: 0; }
/* 沒有釘選的訊息：只有一行字，留一點內距 */
ul.players.pins-list li.pins-empty { padding: 4px; }
.pin-row { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 10px 4px; background: none; border: 0; border-radius: 6px; color: var(--text); text-align: left; cursor: pointer; }
.pin-row:hover { background: var(--line); }
.pin-face { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; }
.pin-face > .deco-av.deco-framed { margin: 0; }
.pin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pin-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pin-head > :first-child { min-width: 0; font-weight: 600; }
.pin-body { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* 滑鼠停留的提示（kit.js）：跟選單一樣的底色、邊框和陰影 */
.tip { position: fixed; z-index: 1000; max-width: min(300px, calc(calc(100vw / var(--z, 1)) - 16px)); padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--text); font-size: 12px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s var(--ease-out); }
.tip.on { opacity: 1; transform: none; }

/* 搜尋對話的訊息：對話上方的搜尋框，結果蓋在訊息上面 */
.msg-search { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); }
.msg-search:focus-within { border-color: var(--accent); }
.msg-search input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: none; outline: none; }
/* 瀏覽器自己的清除 ✕ 不要（右邊已經有關閉搜尋的 ✕） */
.msg-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.msg-search .icon-btn { padding: 4px; }
/* 搜尋的篩選：傳送者、有圖片／影片／檔案／連結（按下去是亮的）、日期範圍；手機上一列放不下就換行 */
.msg-search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* 疊在訊息區上面：按鈕的焦點框（綠框）往下超出時不會被訊息（圖片）蓋住 */
.msg-search, .msg-search-filters { position: relative; z-index: 5; }
.msg-search-from, .msg-search-date { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.msg-search-from { display: inline-flex; align-items: center; gap: 5px; max-width: 12em; color: var(--muted); cursor: pointer; }
.msg-search-from.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.msg-search-from { overflow: visible; }
/* 只有名字太長時截斷（頭像和頭像框外層也是 span，不能一起裁，不然框會被切掉） */
.msg-search-from-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-search-from > :is(.avatar, .deco-av, .ic) { flex: none; }
/* 傳送者的清單：每個人有頭像；人多時捲動 */
.msg-search-from-menu { max-height: min(360px, calc(50vh / var(--z, 1))); overflow-y: auto; min-width: 12em; }
.msg-search-from-item { display: flex; align-items: center; gap: 8px; }
/* 頭像格子：24px 的頭像加上最寬的框（火焰左右各超出 1/4）都放得下 */
.msg-search-from-face { flex: none; width: 38px; display: grid; place-items: center; overflow: visible; }
.msg-search-from-face > :is(.avatar, .deco-av) { margin: 0; }
.msg-search-from-item.on { color: var(--accent); font-weight: 600; }
.msg-search-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: inherit; font-size: 13px; }
.msg-search-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.msg-search-dates { display: inline-flex; align-items: center; gap: 4px; }
.msg-search-date { width: 9.5em; padding-right: 26px; cursor: pointer; }
/* 內建的日曆圖示藏起來（滑過有瀏覽器自己的提示），換成自己的圖示；圖示不擋點擊 */
.msg-search-date::-webkit-calendar-picker-indicator { display: none; }
.msg-search-date-box { position: relative; display: inline-flex; align-items: center; }
.msg-search-date-box > .ic { position: absolute; right: 9px; color: var(--muted); pointer-events: none; }
.msg-search-clear { margin-left: 2px; }
/* 往左多蓋 12px：訊息區往左伸進卡片的內距（.thread-msgs），不蓋的話後面訊息的頭像框會從左邊露出來；手機滿版時右邊也一樣（下面 max-width: 700px 那段） */
.msg-search-results { position: absolute; inset: 0 0 0 -12px; z-index: 4; overflow-y: auto; padding: 6px 0 6px 12px; background: var(--panel); animation: fade-in .12s; }
.msg-search-count { padding: 4px 8px 6px; }
.msg-search-hit { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; font: inherit; }
.msg-search-hit:hover, .msg-search-hit:focus-visible { background: var(--line); filter: none; }
/* 頭像放在固定寬度的格子（24px 頭像左右各留 0.25 倍給頭像框 = 36px）：有沒有戴框名字都對齊，框也不會超出列表被切掉 */
.msg-search-hit-face { flex: none; width: 36px; margin-top: 2px; display: grid; place-items: center; overflow: visible; }
.msg-search-hit-face > :is(.avatar, .deco-av) { margin: 0; }
.msg-search-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-search-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.msg-search-text mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.thread-head .search-open { padding: 6px; color: var(--muted); }
/* 私訊、群組的通知鈴鐺（搜尋左邊）：跟搜尋一樣大小；關掉時是灰色劃掉的鈴鐺 */
.thread-head .conv-bell { padding: 6px; }
.thread-head .conv-bell.off { color: var(--muted); }

/* 對話的訊息區往左伸進卡片的內距：別人的頭像和訊息靠左一點，頭像框（火焰等）還是在訊息區裡面，不會被切掉 */
.thread-msgs { margin-left: -12px; padding-left: 2px; }
/* 未讀線左邊縮回訊息區多伸出去的部分，左右兩端的空白一樣：一般往左多伸 12px；iPhone 網頁 App 右邊還多留 8px 給捲動條；
   手機開著對話時左右都伸到畫面邊緣（iPhone 網頁 App 一樣右邊多 8px） */
.thread-msgs .unread-line { margin-left: 12px; }
.ios-app .thread-msgs .unread-line { margin-left: 20px; }
@media (max-width: 700px) {
  :root:not(.mini) .dm.thread-open .thread-msgs .unread-line { margin-left: 0; }
  :root.ios-app:not(.mini) .dm.thread-open .thread-msgs .unread-line { margin-left: 8px; }
}
.msg.with-face { gap: 3px; }

/* 首頁的房間卡片：房主那一列只有頭像和名字是連結（右邊的空白算點卡片，打開房間頁） */
.room-hcard { cursor: pointer; }
.room-hcard > .hauthor { align-self: flex-start; max-width: 100%; }

/* 審核帳號登入（登入畫面連點標題 5 次才出現） */
.review-login { display: flex; flex-direction: column; gap: 8px; width: 260px; max-width: 100%; margin: 16px auto 0; text-align: left; }
.review-login h2 { margin: 0; font-size: 16px; }
/* 建立房間的卡片：上面世界狀態（右邊「如何開房」），中間表單，底下自動開房開關和「開房」按鈕 */
.host-card { display: flex; flex-direction: column; gap: 12px; }
.host-head { display: flex; align-items: flex-start; gap: 12px; }
.host-status { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.host-status strong { overflow-wrap: anywhere; }
/* 燈號對齊第一行文字的中間：中文字在行框裡偏上一點，照行高算的正中間（6px）看起來偏低，所以少 2px */
.host-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--muted); }
.host-dot.on { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.host-help-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.host-card .host-help { padding: 10px 12px; border-radius: 8px; background: var(--bg); }
.host-fields { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
form.host-card .host-fields label { margin: 0; }
.host-room-fields { display: flex; flex-direction: column; gap: 10px; }
.host-room-fields.hidden { display: none; }
.host-foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
form.host-card label.host-auto { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; color: var(--text); }
/* 中文字在行高裡偏上，往下 2px 才跟開關的中線對齊（手機實測差約 1.8px） */
.host-auto > span { transform: translateY(2px); }
.host-auto-hint { margin: -4px 0 0; }
/* 手機 App：鍵盤打開時收起底部分頁列（ui/android.js 加上 kb-open） */
.kb-open #tabs { display: none; }
/* 手機 App 橫放（寬版版面）在聊天室打字：鍵盤佔掉大半個畫面，對話區的高度（calc(100vh / var(--z, 1)) - 140px）會剩不到一行、輸入框被擠出畫面。
   改成跟直放一樣：藏起頂部列和對話列表，聊天室用整個剩下的高度 */
@media (min-width: 701px) {
  :root.kb-open:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open) :is(#topbar, #foot, .social-switch, .dm-list) { display: none; }
  :root.kb-open:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open) main { padding: 0; }
  :root.kb-open:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open) .dm-page { height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); }
  :root.kb-open:not(.mini) .dm.thread-open { grid-template-columns: 1fr; }
  :root.kb-open:not(.mini) .dm.thread-open .dm-thread { border: 0; border-radius: 0; }
}
/* 設定頁的意見回饋：送出按鈕跟輸入框隔開一點 */
.feedback-actions { margin-top: 10px; }
/* 留言的「查看回覆／隱藏回覆」：箭頭圖示，展開時朝上 */
.reply-toggle { display: inline-flex; align-items: center; gap: 4px; }
.reply-toggle svg { transition: transform .15s var(--ease-out); }
.reply-toggle.open svg { transform: rotate(180deg); }

/* 外部連結確認：網域單獨一行標出來，完整網址可以換行、可以選取 */
.link-dialog { max-width: min(460px, calc(calc(100vw / var(--z, 1)) - 32px)); }
.link-host { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; overflow-wrap: anywhere; }
.link-url { margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--bg); font: 13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; max-height: calc(30vh / var(--z, 1)); overflow-y: auto; }
.link-dialog .dialog-actions a.btn { text-decoration: none; }

/* 好友分頁的名單：上線狀態是頭像右下角的燈號（像 Discord，外圈是卡片底色），不顯示文字。
   有沒有頭像框都一樣大、放在一樣的位置（每一列對齊）；外圈 3px 在框上切出缺口，燈號不會跟框的線條黏在一起 */
/* 包著頭像的外層是 a.person 裡的 span：不能套用名字的「太長裁掉」（會把框切掉）；裡面的頭像框不再自己留左右空間（外層已經統一留頭像 1/4），名字才會對齊 */
.presence-av { position: relative; display: inline-block; flex: none; line-height: 0; overflow: visible !important; text-overflow: clip !important; }
.presence-av > .deco-av.deco-av { margin-inline: 0; }
.presence-dot { position: absolute; z-index: 3; left: calc(50% + var(--av, 28px) / 2 - 10px); top: calc(var(--av, 28px) - 10px); width: 13px; height: 13px; box-sizing: border-box;
  border-radius: 50%; border: 3px solid var(--panel); background: var(--muted); }
.presence-dot.online { background: var(--accent); }
.presence-dot.playing { background: var(--warn); }
/* 對話列表：滑過、選取中的那一列底色不同，燈號外圈跟著換 */
.conv:is(:hover, .on) .presence-dot { border-color: var(--line); }
/* 名單一列放得下：頭像、名字、ID 在左（太長用「…」），按鈕收在右邊的 ⋯ 裡。
   搜尋結果也一樣一行：「加好友／已是好友」按鈕跟名字同一行，名字放不下用「…」 */
:is(.friends-list, .friends-search) ul.players li { flex-wrap: nowrap; }
:is(.friends-list, .friends-search) ul.players li > a.person:first-child { flex: 0 1 auto; min-width: 0; }
:is(.friends-list, .friends-search) ul.players li > .spacer { flex: 1 1 0; justify-content: flex-end; }
:is(.friends-list, .friends-search) ul.players li > :not(a.person, .spacer) { flex: none; }
/* 推薦的原因（共同好友、同一個群組…）：在加好友按鈕左邊，太長用「…」 */
/* 推薦：頭像右邊兩行（第一行名字、ID，第二行原因），頭像對著兩行的中間；右邊是在玩的房間和加好友按鈕（上下置中） */
.friends-list ul.players li.suggest-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; align-items: center; }
.friends-list ul.players li.suggest-row > a.person { min-width: 0; align-items: center; }
.suggest-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.suggest-names { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 放不下時先截 @ID（用「…」），暱稱（含認證勾勾）不縮；暱稱長到整列都放不下才截暱稱。只截文字本身，不裁整個連結，頭像框才不會被切掉 */
.suggest-names > :is(.person-name, .name-v) { flex-shrink: 0; max-width: 100%; }
.suggest-names .person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-names > .muted { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-text > .suggest-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
/* iPhone 網頁 App：捲動條是浮在內容上的細條，會被卡片、訊息（各自有 transform，疊在上面）蓋住。
   首頁的橫列在卡片下面多留空間給捲動條（多出的部分用負的 margin 抵掉，間距不變）；聊天室右邊留空間，捲動條在自己的訊息右邊 */
.ios-app .hrow { padding-bottom: 16px; margin-bottom: -8px; }
.ios-app .thread-msgs { padding-right: 10px; }
/* iPhone 網頁 App：iOS 有時候（切到內容短的頁面、鍵盤收起來後）整個網頁的顯示範圍會比螢幕矮一截，下面那塊不屬於網頁、畫不到東西。
   分頁列還是貼在網頁顯示範圍的底部（往下移會被切掉），只是那時候下面已經沒有 Home 指示條的區域，不用再留安全區域的空白，
   分頁列變回原本的高度，圖示和文字完整顯示（--ios-gap：少掉的高度，ui/platform.web.js 量） */
@media (max-width: 700px) {
  .ios-app #tabs { --tabs-pad: max(0px, calc(env(safe-area-inset-bottom) - var(--ios-gap, 0px))); height: calc(56px + var(--tabs-pad)); padding-bottom: var(--tabs-pad); }
}
/* #標籤：綠色、沒有底線（滑過才有），跟一般網址區分；標籤頁上方的標題 */
a.hashtag { text-decoration: none; }
a.hashtag:hover { text-decoration: underline; }
.tag-title { margin: 8px 0 12px; font-size: 22px; overflow-wrap: anywhere; }
/* 個人資料表單的自我介紹：平常是排版後的內容，框起來跟輸入框一樣的位置和樣子；滑過框變綠、右上角的鉛筆變亮，點了就編輯 */
.bio-field { margin-bottom: 12px; color: var(--muted); }
.bio-view { position: relative; margin-top: 4px; padding: 7px 34px 7px 10px; min-height: 2.6em; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); cursor: text; transition: border-color .15s; }
.bio-view:hover, .bio-view:focus-visible { border-color: var(--accent); outline: none; }
.bio-view > .bio { margin: 0; }
.bio-pencil { position: absolute; top: 8px; right: 10px; color: var(--muted); opacity: .6; line-height: 0; transition: opacity .15s, color .15s; }
.bio-view:hover .bio-pencil, .bio-view:focus-visible .bio-pencil { opacity: 1; color: var(--accent); }
.bio-field textarea { margin-top: 4px; color: var(--text); }
/* 儲存、（編輯自我介紹時的）取消、已儲存 同一列 */
.profile-form .profile-save { align-items: center; margin-bottom: 0; }
/* iPhone 網頁 App：網頁內容太短（不能捲動）時 iOS 會把顯示範圍縮短、底下留一塊空白（ui/platform.web.js 有實測數值），
   所以網頁一律至少比螢幕高 1px（--screen-h 是螢幕高度，platform.web.js 設定） */
/* --screen-h 是 JS 量的 px：px 在 zoom 底下一定會縮放，所以除以實際的 zoom（--zoom），不是 --z */
.ios-app body { min-height: calc(var(--screen-h, 100vh) / var(--zoom, 1) + 1px); }
/* 通知：頭像和名字是個人頁連結（其他地方點了到貼文）；名字跟句子一樣的顏色，滑過才有底線 */
.notify-face { flex: none; line-height: 0; }
/* 外層連結已經統一留頭像 1/4 的空間：裡面的頭像框不再自己留，有框沒框的名字才會對齊 */
.notify-face > .deco-av.deco-av { margin-inline: 0; }
a.notify-name { color: inherit; text-decoration: none; }
/* 官方的通知（發方塊幣、管理員處理了你的內容）：頭像的位置是 28px 的圓，中間一個圖示 */
.notify-official { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.notify-official { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.notify-coinGrant { background: rgba(224,165,38,.18); color: #e0a526; }
.notify-moderated { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
/* 沒有頁面可以打開的通知（刪掉的內容） */
.notify.no-link { cursor: default; }
a.notify-name:hover { text-decoration: underline; }
/* 房主的房內玩家：有 Cube Arcade 帳號的名字是個人頁連結（一般文字顏色，滑過才有底線） */
/* 開房面板的房內玩家：名字不加底線（滑過也不加） */
a.host-player, a.host-player:hover { color: var(--text); text-decoration: none; }
.host-loading { margin-left: 8px; white-space: nowrap; }

/* 個人頁的統計資料（people.js openStats）：上面是個人頁背景（沒有就是漸層），頭像壓在背景下緣；
   三張大卡片各有顏色（單色底、圓形圖示、數字會跑上去）；下面依作品（綠）、貼文（藍）、房間（橘）分組，小格子跟著組別的顏色 */
.dialog.stats-dialog { width: min(480px, calc(94vw / var(--z, 1))); padding: 0; overflow-x: hidden; }
.stats-banner { position: relative; height: 96px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #4a90e2 55%, transparent), transparent 65%), var(--bg); }
.stats-banner > canvas { display: block; width: 100%; height: 100%; }
/* 右上角：分享、關閉（圓形、半透明的深色底） */
.stats-top-btns { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px; }
.stats-close { color: #fff; background: rgba(0, 0, 0, .35); border-radius: 50%; }
.stats-close:disabled { opacity: .5; }
.stats-close:hover { background: rgba(0, 0, 0, .55); }
/* 左上角的「統計資料」：跟右上角的關閉鈕一樣是半透明的深色底，在什麼背景上都看得清楚 */
.stats-kicker { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .35); }
/* 頭像置中，往上拉自己高度的一半（--face-h，people.js 量的），剛好一半在背景裡；名字、ID 置中在下面 */
.stats-who { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; margin: calc(var(--face-h, 64px) / -2) 18px 0; }
.stats-who > .avatar { box-shadow: 0 0 0 4px var(--panel); border-radius: 50%; }
/* 名稱到頭像框下緣固定 8px（跟右上角的頭像和名稱一樣）：頭像下面多空出這個框往下超出的高度（deco.js 依框的種類設定 --deco-below） */
.stats-who > .deco-av.deco-framed { margin-bottom: var(--deco-below, 0px); }
.stats-who h2 { margin: 8px 0 0; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
/* 認證勾勾不算進置中的寬度（勾勾 1em＋左邊 .25em）：名字本身對準頭像中間，勾勾掛在右邊 */
.stats-who h2 > .verified { margin-right: -1.25em; }
.stats-body { padding: 16px 18px 18px; }
.stats-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-hero-item { --tone: var(--accent); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); }
.stats-hero-item.pink { --tone: #e2557e; }
.stats-hero-item.blue { --tone: #4a90e2; }
.stats-hero-item.gold { --tone: #e0a030; }
.stats-hero-item .stats-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--tone); background: color-mix(in srgb, var(--tone) 20%, transparent); }
.stats-hero-item .stats-num b { font-size: 24px; }
.stats-num { display: flex; align-items: baseline; justify-content: center; gap: 3px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stats-num b { font-size: 17px; font-weight: 700; }
.stats-num small { font-size: 12px; color: var(--muted); }
.stats-label { font-size: 12px; color: var(--muted); }
.stats-sec { --tone: var(--accent); margin-top: 18px; }
.stats-sec.green { --tone: #3fb27f; }
.stats-sec.sky { --tone: #4a90e2; }
.stats-sec.orange { --tone: #e8833a; }
.stats-sec.purple { --tone: #9b6ae0; }
/* 組別標題：圓形圖示＋標題，後面一條淡線 */
.stats-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.stats-sec h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stats-sec-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); }
/* 三格一排；四格排成 2×2（不會變成 3＋1） */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-grid.n4 { grid-template-columns: repeat(2, 1fr); }
/* 手機：一行 3 個放不下圖示＋文字，3 個一組的改成直排（圖示在上，跟最上面的大卡片一樣），4 個一組的改兩欄 */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid.n3 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid.n3 .stats-tile { flex-direction: column; gap: 6px; padding: 12px 4px 10px; text-align: center; }
  .stats-grid.n3 .stats-num { justify-content: center; }
}
.stats-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tone) 7%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line)); }
.stats-tile .stats-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.stats-tile-text { min-width: 0; }
.stats-tile .stats-num { justify-content: flex-start; }
.stats-note { margin: 16px 0 0; text-align: center; }
.group-pick-list .person { gap: 6px; min-width: 0; }

/* 表情符號表上面的「表情符號｜GIF」切換，和 GIF 分頁（兩欄，依圖片比例往下排） */
.emoji-modes { display: flex; gap: 4px; padding: 6px 8px 0; }
.emoji-mode { flex: 1; padding: 6px 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 600; }
.emoji-mode:hover { color: var(--text); filter: none; }
.emoji-mode.on { background: var(--bg); color: var(--text); }
/* 跟表情一樣：畫面放不下時（表情符號表限制了高度）可以變矮 */
.gif-grid { display: flex; align-items: flex-start; gap: 6px; padding: 6px; flex: 0 1 278px; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; }
.gif-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gif-cell { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--line); }
.gif-cell.skel { position: relative; height: 90px; }
.gif-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-cell:hover { filter: brightness(1.1); }
.gif-grid .emoji-empty { flex: 1; }
/* 訊息、留言、貼文裡的 GIF（自己一行的 GIF 網址） */
/* 外框的寬度跟著圖片：圖片的上限要用固定的 px（用 % 的話外框會照圖片原始寬度撐開，自己的訊息靠右時圖片右邊空一段） */
.md-gif-box { position: relative; display: block; width: fit-content; max-width: 100%; border-radius: 8px; overflow: hidden; }
.md-gif { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; cursor: zoom-in; background: var(--line); }
.md-gif-box + .md-gif-box { margin-top: 4px; }
/* 貼文：文字到 GIF 的距離跟文字到圖片一樣（.post-images 的 margin-top） */
.post-body > .md-gif-box.after-text { margin-top: 6.5px; }
/* 留言：文字到 GIF 跟文字到圖片一樣（.comment-images 的 6px）；
   圖片、GIF 到愛心、回覆那一列跟文字到那一列看起來一樣：文字下面本身有約 4px 的行高留白，所以多空 4px（5px＋4px） */
.comment-body > .md-gif-box.after-text { margin-top: 4.5px; }
.comment-images + .c-actions, .comment-body:has(> .md-gif-box.at-end) + .c-actions { margin-top: 5px; }
.klipy-mark { position: absolute; left: 6px; bottom: 6px; width: 34px; height: 10px; background: url(klipy-watermark.svg) left bottom / contain no-repeat; pointer-events: none; }
/* 只有 GIF 的訊息：不要泡泡的底色（像 Discord） */
.msg-body:has(> .md-gif-box:only-child) { padding: 0; background: none !important; }
/* 留言附上的圖片：比貼文小 */
.comment-images { max-width: 360px; margin-top: 6px; }
.comment-images.n1 img { max-height: 320px; }
.comment-body + .comment-images { margin-top: 6px; }
.comment-form .image-btn { margin: 0 -4px 0 -6px; }
.comment-picks { padding-top: 6px; }

/* 連結預覽卡片（kit.js linkCards）：左邊一條網站的主題色，網站名稱、標題、說明；寬的圖放在下面，方的放右邊 */
.link-cards:empty { display: none; }
.link-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 440px; }
/* 貼文裡：文字到網址預覽跟文字到圖片一樣（.post-images 的 8px） */
.card.post .link-cards { margin-top: 8px; }
/* 外框用不透明、比分隔線明顯一點的顏色（半透明的線在介面縮放、落在半個像素上時會淡到看不見）；網站有主題色時左邊是一條主題色的粗線（沒有就一圈一樣粗的外框，不然左邊看起來像被切掉） */
.link-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, var(--panel)); border: 1px solid color-mix(in srgb, var(--muted) 30%, var(--panel)); text-align: left; white-space: normal; }
.link-card.lc-colored { border-left: 4px solid var(--lc-color); }
.lc-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-site { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 18px; }
a.lc-title { font-weight: 600; color: var(--accent); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; text-decoration: none; }
a.lc-title:hover { text-decoration: underline; }
.lc-desc { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.lc-pic { display: block; align-self: start; }
.lc-pic img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--line); }
.link-card.lc-wide .lc-pic { grid-column: 1 / -1; }
.link-card.lc-wide .lc-pic img { width: 100%; height: auto; max-height: 240px; aspect-ratio: auto; }
.lc-hide { position: absolute; top: 4px; right: 4px; padding: 3px; color: var(--muted); }
.lc-hide:hover { color: var(--text); }
/* 自己的訊息（綠色泡泡）下面的卡片跟別人的一樣，靠右 */
.msg.mine .link-cards { margin-left: auto; }

/* 紅色按鈕按第一次（變成「確定…？」）：左右輕晃一下當作警告（kit.js warnShake） */
/* 用 left 晃，不用 transform：transform 動畫會讓按鈕變成獨立的圖層，Windows 上文字的反鋸齒在晃的時候換成另一種、晃完再換回來，
   字看起來忽粗忽細（加粗的「確定…？」特別明顯） */
@keyframes warn-shake { 0%, 100% { left: 0; } 20% { left: -3px; } 40% { left: 3px; } 60% { left: -2px; } 80% { left: 2px; } }
.warn-shake { position: relative; animation: warn-shake .35s ease-in-out; }
/* 手機往下捲時藏起頂部列和底部分頁列，往上捲就出現（shell.js）；頂部列整條收起來（iPhone 狀態列那一段改由下面的 #app::before 補底色）。
   頂部列用 top（sticky 的位置）移，不能用 transform：分頁列是頂部列裡面的 fixed 元素，父元素有 transform 時它會改成跟著頂部列，跑到上面去 */
@media (max-width: 700px) {
  :root:not(.mini) #topbar { transition: top .2s var(--ease-out); }
  :root:not(.mini) #tabs { transition: transform .2s var(--ease-out); }
  :root.bars-hidden:not(.mini) #topbar { top: calc(-1 * var(--topbar-h)); }
  :root.bars-hidden:not(.mini) #tabs { transform: translateY(100%); }
}
/* iPhone 網頁 App：頂部列收起來後，狀態列（時間、動態島、電量）那一段留一條頂部列的底色，內容不會捲到圖示後面 */
@media (display-mode: standalone) and (max-width: 700px) {
  :root.bars-hidden:not(.mini) #app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--panel); z-index: 31; }
}
/* 手機打開聊天室：藏起頂部列（圖示、標題、方塊幣、頭像）和底部分頁列，對話用整個畫面；回到對話列表、換到別的分頁就恢復。
   對話不用圓角外框，直接填滿畫面（狀態列、Home 條那段也是對話的底色，內容留在安全區域裡）。小視窗（浮動球）本來就很小，照舊 */
@media (max-width: 700px) {
  :root:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open:not(.edge-swiping, .edge-leaving, .edge-entering)) :is(#topbar, #foot) { display: none; }
  /* 整頁不捲動 */
  :root:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open:not(.edge-swiping, .edge-leaving, .edge-entering)) { overflow: hidden; }
  :root:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open:not(.edge-swiping, .edge-leaving, .edge-entering)) main { padding: 0; }
  :root:not(.mini):has(#pages > .page:not(.hidden) .dm.thread-open:not(.edge-swiping, .edge-leaving, .edge-entering)) .dm-page { height: calc(100vh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); }
  /* 訊息區也往右伸進內距（跟左邊一樣）：捲動條貼著畫面右邊緣，自己的訊息靠右 */
  :root:not(.mini) .dm.thread-open .thread-msgs { margin-right: -12px; }
  /* 搜尋結果也往右多蓋 12px（不然自己訊息的右邊會從右邊露出來） */
  :root:not(.mini) .dm.thread-open .msg-search-results { right: -12px; padding-right: 12px; }
  :root:not(.mini) .dm.thread-open .dm-thread { border: 0; border-radius: 0; padding: calc(10px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)); }
  /* 對話列表也不用圓角外框：左右伸到畫面邊緣（蓋掉 main 的 12px 內距），下面伸到底部分頁列（蓋掉列表下面 20px 的空白） */
  :root:not(.mini) .dm .dm-list { border: 0; border-radius: 0; margin: 0 -12px -20px; padding: 12px; }
  /* 好友分頁的名單（好友、追蹤…子分頁的內容）也一樣 */
  :root:not(.mini) .friends-page > .friends-list { border: 0; border-radius: 0; margin: 0 -12px -20px; padding: 12px; }
  /* 聊天室滑進來、滑出去時：下面已經是一般的列表頁（頂部列、切換列、分頁列都在），聊天室蓋在整個畫面上滑；
     滑完版面已經是最後的樣子，返回時頂部列不會在最後一下才冒出來、把列表往下推 */
  :root:not(.mini) .dm.thread-open:is(.edge-swiping, .edge-leaving, .edge-entering) .dm-list { position: static; }
  :root:not(.mini) .dm:is(.edge-swiping, .edge-leaving, .edge-entering) .dm-thread { position: fixed; inset: 0; z-index: 50; }
}
/* 貼文、留言的內文：行高 1.5（中文是方塊字，預設的約 1.29 倍太擠，一大段文字很密），文字比標題稍暗一點（大段文字看久了不刺眼）。
   行高變大，文字上下各多約 1.5px 的留白：內文的上下各扣 1.5px，跟頭像列、圖片、愛心那一列看起來的距離不變
   （上面改在各自的 margin-top；下面用 margin-bottom -1.5px，後面接的東西照原本的數字）。最後是 GIF 時下面沒有留白，不扣 */
:root { --text-body: #e0e3e7; }
:root[data-theme="light"] { --text-body: #24272d; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --text-body: #24272d; } }
:is(.post-body, .comment-body) { line-height: 1.5; color: var(--text-body); margin-bottom: -1.5px; }
.post-body:has(> .md-gif-box:last-child) { margin-bottom: 0; }
.comment-body:has(> .md-gif-box.at-end) { margin-bottom: 0; }
/* 聊天訊息：比較短，只稍微拉開（1.45）；泡泡上下的內距各少 1px，泡泡高度差不多 */
.msg-body { line-height: 1.45; }
/* 首頁公告、個人頁的自我介紹：跟貼文內文一樣行高 1.5、文字稍暗（--text-body）。
   文字上下多出的約 1.5px 留白扣掉，跟公告標題、卡片邊緣、加入日期、編輯框邊緣的距離看起來不變 */
:is(.announce-text, .bio) { line-height: 1.5; color: var(--text-body); }
.announce-head { margin-bottom: 2.5px; }
.announce-text { margin-bottom: -1.5px; }
.profile-card > .bio { margin: 12.5px 0 -1.5px; }
.bio-view > .bio { margin: -1.5px 0; }
/* 我的房間（開房中）：房間簡介。可以改的時候是跟自我介紹一樣的框（.bio-view，點了編輯，rooms.js editDesc） */
/* 自己開房的卡片：房名和「房間頁面」按鈕上下置中 */
/* 房名原本的下外距（h2 的 .83em）移到外層，房名本身沒有外距，按鈕才會對準房名正中間 */
.host-room-head { display: flex; align-items: center; gap: 10px; font-size: 1.5em; margin-bottom: .83em; }
.host-room-head > h2 { min-width: 0; margin: 0; font-size: 1em; overflow-wrap: anywhere; }
.host-room-page { flex: none; }
.host-desc { margin: 4px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.host-desc-form { margin: 4px 0 10px; }
.host-desc-form textarea { width: 100%; box-sizing: border-box; }
.host-desc-actions { display: inline-flex; gap: 8px; }
/* 窄的畫面（手機浮動球）放不下時換行，取消、儲存靠右 */
.host-actions { flex-wrap: wrap; }
.host-actions > .host-desc-actions { margin-left: auto; }
/* 編輯介紹時放不下換行：取消、儲存那一行在上面（緊貼輸入框右下），邀請好友那一行在下面（上下對調，左右不變） */
.host-actions:has(> .host-desc-actions:not(.hidden)) { flex-wrap: wrap-reverse; }
/* 我的裝飾品：裝備中的徽章排順序（shop.js badgeRow），每個徽章左右各一個箭頭 */
.my-badge-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* 裝備中的徽章：按住拖（手機長按）排順序；直向滑動照樣捲頁面 */
.my-badge-chip { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); line-height: 0;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.my-badge-chip:hover { border-color: var(--muted); }
/* 手機：「順序」自己一行，5 個徽章排成一列（換行了就不好左右拖） */
@media (max-width: 700px) { .my-badge-order > .muted { flex-basis: 100%; } }
.my-badge-chip.dragging { position: relative; z-index: 1; cursor: grabbing; border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
/* 貼文、留言內文底下的「翻譯」（posts.js translateBox）：小小的灰色連結，按了在下面顯示翻譯，左邊一條線跟原文區分 */
.translate { margin-top: 4px; }
button.link.translate-btn { padding: 0; font-size: 13px; color: var(--muted); text-decoration: none; }
button.link.translate-btn:hover { color: var(--text); text-decoration: underline; }
.translated { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.translated-by { margin-top: 4px; font-size: 12px; }
.translated > .translated-body { margin-top: 0; }
/* 右上角方塊幣左邊的通知鈴鐺（shell.js renderTop）：跟方塊幣一樣高的圓形按鈕，未讀數疊在右上角 */
a.notify-btn { position: relative; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: var(--muted); text-decoration: none; }
a.notify-btn:hover { color: var(--text); background: var(--line); }
a.notify-btn .count-badge { position: absolute; top: -2px; right: -4px; margin: 0; }
/* 通知頁 */
.notify-title { margin: 8px 0 12px; font-size: 22px; }
.notify-card { padding-top: 4px; padding-bottom: 4px; }
/* 最後一則下面不要分隔線（卡片的邊框已經是底了） */
.notify-card ul.players li:last-child { border-bottom: 0; }
/* 電腦版：鈴鐺下面的通知浮動視窗（shell.js notifyBell），跟選單一樣的外框和位置，寬一點、太長就在裡面捲動 */
/* 電腦版鈴鐺的通知視窗：寬 680、最高 720（視窗矮時最多畫面的 80%） */
.menu.notify-pop { width: 680px; max-width: calc(calc(100vw / var(--z, 1)) - 16px); max-height: min(720px, calc(80vh / var(--z, 1))); overflow-y: auto; padding: 4px 12px 8px; cursor: default; }
.notify-pop-head { padding: 10px 0 6px; font-size: 18px; display: flex; align-items: center; justify-content: space-between; }
/* 通知頁標題列：標題在左、「⋯」（刪除全部）在右 */
.notify-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notify-title-row .notify-title { margin-inline: 0; }
.notify-pop ul.players li:last-child { border-bottom: 0; }
.notify-pop ul.players li { cursor: pointer; }
.notify-pop .notify-empty { margin: 8px 0; }
/* 手機的通知頁：不用圓角外框，左右伸到畫面邊緣（蓋掉 main 的 12px 內距），跟手機的好友名單、對話列表一樣 */
@media (max-width: 700px) {
  .card.notify-card { margin-inline: -12px; border: 0; border-radius: 0; padding-inline: 12px; }
}

/* 影片播放器（kit.js 的 videoPlayer）：黑底圓角框，控制列是底部的深色漸層，進度條用主題色 */
.vplayer { position: relative; display: block; overflow: hidden; background: #000; line-height: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vplayer > video { display: block; width: 100%; height: auto; max-height: inherit; object-fit: contain; }
.vplayer.idle { cursor: none; }
.vplayer .vp-big { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .15s var(--ease-out), opacity .15s; }
.vplayer .vp-big:hover { background: rgba(0, 0, 0, .7); transform: scale(1.06); }
.vplayer .vp-big .ic { margin-left: 3px; }
.vplayer:not(.paused) .vp-big { opacity: 0; pointer-events: none; transform: scale(.85); }
.vplayer :is(.ic-play, .ic-pause) { fill: currentColor; }
.vplayer .vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 18px 6px 4px; line-height: normal; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); transition: opacity .2s; }
.vplayer.idle .vp-bar { opacity: 0; pointer-events: none; }
.vplayer .vp-btn { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; box-shadow: none; }
.vplayer .vp-btn:hover { background: rgba(255, 255, 255, .16); }
.vplayer .vp-time { flex: none; padding: 0 4px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vplayer .vp-track { flex: 1; min-width: 40px; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.vplayer .vp-rail { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); transition: height .12s; }
.vplayer .vp-buffered { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: rgba(255, 255, 255, .3); }
.vplayer .vp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--accent); }
.vplayer .vp-fill::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transform: scale(0); transition: transform .12s; }
.vplayer :is(.vp-track:hover, .vp-track:focus-visible) .vp-rail, .vplayer.seeking .vp-rail { height: 6px; }
.vplayer :is(.vp-track:hover, .vp-track:focus-visible) .vp-fill::after, .vplayer.seeking .vp-fill::after { transform: scale(1); }
@media (pointer: coarse) { .vplayer .vp-fill::after { transform: scale(1); } }
/* 音量：滑鼠指在靜音鍵上（或手指按住上下滑）時，上面出現直的音量條 */
.vplayer .vp-vol { position: relative; flex: none; display: flex; }
.vplayer .vp-vol-pop { position: absolute; left: 50%; bottom: 100%; width: 30px; margin-left: -15px; padding: 10px 0 6px; display: flex; justify-content: center;
  border-radius: 15px; background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
/* 按鍵和音量條中間的空隙也算指在上面（移過去時不會收起來） */
.vplayer .vp-vol-pop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
@media (hover: hover) { .vplayer .vp-vol:hover .vp-vol-pop { opacity: 1; visibility: visible; transform: none; } }
.vplayer .vp-vol.open .vp-vol-pop, .vplayer .vp-vol:focus-within .vp-vol-pop { opacity: 1; visibility: visible; transform: none; }
.vplayer .vp-vol-rail { position: relative; width: 4px; height: 64px; border-radius: 2px; background: rgba(255, 255, 255, .28); cursor: pointer; touch-action: none; outline: none; }
/* 點、拖的範圍比線寬一點 */
.vplayer .vp-vol-rail::before { content: ''; position: absolute; inset: -6px -10px; }
.vplayer .vp-vol-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: inherit; background: var(--accent); }
.vplayer .vp-vol-fill::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
/* 音訊（聊天室的音訊檔）：沒有畫面，控制列直接排在框裡、一直顯示，顏色跟著介面 */
.vplayer.aplayer { overflow: visible; background: none; }
.vplayer.aplayer > audio { display: none; }
.vplayer.aplayer .vp-bar { position: static; padding: 0; background: none; color: var(--text); }
.vplayer.aplayer .vp-btn { color: var(--text); }
.vplayer.aplayer .vp-btn:hover { background: var(--line); }
.vplayer.aplayer .vp-time { color: var(--muted); text-shadow: none; }
.vplayer.aplayer :is(.vp-rail, .vp-vol-rail) { background: var(--line); }
.vplayer.aplayer .vp-buffered { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.vplayer.aplayer .vp-vol-pop { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.vplayer.full { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.vplayer.full > video { height: 100%; max-height: none; }

/* 官方認證的勾勾（kit.js verifiedMark）：名稱後面，跟著文字大小，名稱太長被省略時勾勾留著 */
.verified { display: inline-flex; flex: none; align-items: center; margin-left: .25em; color: var(--accent); line-height: 0; vertical-align: -0.12em; }
.verified .ic { width: 1em; height: 1em; }
/* 名稱＋勾勾（kit.js userName）：同一行，名稱太長時名稱省略、勾勾留著 */
.name-v { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.name-v > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 在有 gap 的橫排裡直接放勾勾的（房主、@ 選人清單）：勾勾貼近名稱一點 */
:is(.person, .hauthor, .mention-item) > .verified { margin-left: -3px; }

/* 送禮：選人（搜尋結果一列一個人）、選好的人、附的話；收到禮物的視窗 */
.gift-dialog .shop-big { height: 130px; }
.gift-search, .gift-message { width: 100%; margin-top: 6px; }
.gift-message { resize: none; margin-top: 10px; }
/* 滑桿放在搜尋框右邊外面（列表往右多伸出 12px，滑桿佔 10px），內容跟搜尋框一樣寬；有沒有滑桿都先留位置，內容不會左右跳 */
ul.players.gift-results { max-height: calc(42vh / var(--z, 1)); overflow-y: auto; margin-right: -12px; padding-right: 2px; scrollbar-gutter: stable; }
/* 列表每一列的上下空白交給按鈕（底色蓋滿整列）；要比 ul.players li 明確才蓋得過 */
ul.players.gift-results li { padding: 0; }
.gift-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 8px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; min-width: 0; }
/* 滑過的底色跟聊天室列表一樣（比較淡） */
.gift-person:hover { background: var(--line); }
/* 鍵盤選到的那一列：綠框畫在列的內側（清單自己捲動，畫在外面會被裁掉、看起來缺一塊） */
.gift-person:focus-visible { outline-offset: -2px; }
/* 頭像放在固定寬度的格子：有沒有戴頭像框名字都對齊（火焰框左右各超出頭像大小的 0.25，24px 要 36px、32px 要 48px） */
.gift-actions { align-items: center; }
.gift-left { flex: 1; min-width: 0; }
.gift-left:has(.gift-error:not(:empty)) .gift-paid { display: none; }
/* 找不到人：跟一列差不多高 */
ul.players.gift-results li.muted { padding: 14px 8px; }
.gift-face { flex: none; width: 36px; display: grid; place-items: center; overflow: visible; }
.gift-face.big { width: 48px; }
.gift-face > :is(.avatar, .deco-av) { margin: 0; }
.gift-person .person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-picked { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.gift-picked .person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-count { margin-top: 2px; }
.shop-dialog .dialog-actions button.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.gift-by { margin: 0 0 6px; }
/* 按鈕列上面的說明（徽章已滿）：靠右對著按鈕，跟按鈕列靠近一點 */
.shop-action-note { margin: 12px 0 0; text-align: right; }
.shop-action-note + .dialog-actions { margin-top: 6px; }
/* 方塊幣不足：在購買按鈕正上方置中；「送給別人」跟購買按鈕底部對齊 */
.buy-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.shop-dialog .dialog-actions:has(.buy-wrap) { align-items: flex-end; }
.gift-received-head { display: flex; align-items: center; justify-content: center; gap: 10px; color: #e0a526; }
.gift-received-head h2 { margin: 0; color: var(--text); }
.gift-from { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.gift-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 排行榜 ---------- */
/* 首頁：每種排行一張小卡（本週前 3 名），跟其他列一樣左右滑、滑鼠可以拖（.hrow），不會自動吸附 */
.hrow.rank-grid { gap: 10px; scroll-snap-type: none; }
.rank-mini { --rank-c: var(--accent); flex: none; width: 260px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border: 1px solid var(--line); border-top: 3px solid var(--rank-c); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; min-width: 0; }
/* 滑過時外框變色（跟其他卡片一樣），上面那條排行的顏色保留 */
a.rank-mini:hover { border-top-color: var(--rank-c); }
.rank-mini-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* 標題的獎章跟下面的名次圓牌（18px）中心對齊：第 1 名的獎章兩側有月桂葉比較寬，置中後往兩邊超出 */
.rank-ic { flex: none; display: inline-flex; justify-content: center; width: 18px; line-height: 0; }
.rank-mini-row { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; font-size: 13px; }
/* 頭像的格子：寬度固定（頭像加上框左右各超出的 0.25 個頭像），框不佔排版，有框沒框名字都對齊 */
.rank-face { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--rank-av, 28px) * 1.5); }
.rank-face > .deco-av.deco-framed { margin: 0; }
.rank-mini-empty { margin: 4px 0; }
.rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { flex: none; font-variant-numeric: tabular-nums; }
/* 名次：前 3 名是金銀銅的圓牌 */
.rank-no { flex: none; min-width: 18px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-no.top { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; border-radius: 50%; color: #3a2a00; }
.rank-no.top1 { background: linear-gradient(135deg, #fff1a8, #f5c542 55%, #c8901e); }
.rank-no.top2 { background: linear-gradient(135deg, #ffffff, #cfd6e2 55%, #8d96a6); color: #2a2f38; }
.rank-no.top3 { background: linear-gradient(135deg, #ffd2a6, #d98a4a 55%, #9a5a2c); color: #2e1606; }
/* 排行頁 */
.rank-page { --rank-c: var(--accent); max-width: 720px; margin: 0 auto; padding-bottom: 64px; }
.rank-boards button { display: inline-flex; align-items: center; gap: 6px; }
.rank-boards button.on { color: var(--rank-c); border-bottom-color: var(--rank-c); }
.rank-periods { gap: 6px; margin-bottom: 12px; }
.rank-periods button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; color: var(--muted); }
.rank-periods button.on { color: var(--text); border-color: var(--rank-c); background: color-mix(in srgb, var(--rank-c) 18%, transparent); }
.rank-head { border-top: 3px solid var(--rank-c); }
.rank-head-top { align-items: center; margin-bottom: 10px; }
.rank-head p { margin: 10px 0 0; }
.rank-rewards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rank-reward { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 4px; background: none; border: 1px solid transparent; border-radius: 8px; color: inherit; cursor: pointer; }
.rank-reward:hover { border-color: var(--line); background: color-mix(in srgb, var(--rank-c) 8%, transparent); }
.rank-reward-look { display: flex; align-items: center; justify-content: center; height: 60px; max-width: 100%; }
.rank-reward-name { font-weight: 700; font-size: 15px; max-width: 100%; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
/* 手機：名稱特效的獎勵兩欄兩列（每格寬一倍，名字放得下），預覽那一格矮一點 */
@media (max-width: 700px) {
  .rank-rewards.names { grid-template-columns: repeat(2, 1fr); }
  .rank-rewards.names .rank-reward-look { height: 40px; }
}
/* 沒有上下內距：前 3 名的底色要貼到外框的頂端（圓角用 overflow 裁掉） */
.rank-list { padding: 0; overflow: hidden; transition: opacity .15s; }
.rank-list.loading { opacity: .5; }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--text); text-decoration: none; min-width: 0; }
.rank-row + .rank-row { border-top: 1px solid var(--line); }
.rank-row.podium { background: color-mix(in srgb, var(--rank-c) 7%, transparent); }
.rank-row.mine { box-shadow: inset 3px 0 0 var(--rank-c); }
/* 名稱右邊的 @ID：比名稱小一點；放不下時先縮它（名稱優先），手機不顯示 */
.rank-id { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
@media (max-width: 700px) { .rank-id { display: none; } }
.rank-empty { padding: 12px 16px; margin: 0; }
/* 名單底下的說明（週、月：上面是即時名次，獎勵照上一期） */
.rank-foot { margin: -8px 4px 16px; }
/* 最底下固定一列：自己的名次 */
.rank-me { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 -4px 12px rgba(0, 0, 0, .25); }
@media (max-width: 480px) {
  .rank-row { padding: 8px 12px; gap: 8px; }
}
/* 統計資料的「排行」、商店的排行獎勵 */
.stats-sec.gold { --tone: #e8a917; }
a.stats-tile { color: inherit; text-decoration: none; }
.shop-state.rank { display: inline-flex; align-items: center; gap: 3px; color: #e8a917; }
.shop-rank-hint, .shop-rank-how { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-rank-how { margin: 0 0 8px; }
/* 裝飾品視窗的按鈕列：排行獎勵怎麼拿放在左邊，跟右邊的按鈕對齊 */
.dialog-actions > .shop-rank-how { margin: 0; min-width: 0; }

/* ---------- 投票（poll.js）：貼文、聊天室的投票卡片和建立投票的視窗 ---------- */
.poll { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; }
.msg-anchor > .poll { margin-top: 0; min-width: min(260px, 70vw); }
/* 問題和選項之間一條分隔線（線伸到卡片兩邊） */
.poll-head { display: flex; align-items: flex-start; gap: 6px; margin: 0 -12px 2px; padding: 0 12px 8px; border-bottom: 1px solid var(--line); }
.poll-head > .ic { flex: none; margin-top: 3px; color: var(--accent); }
.poll-head > strong { min-width: 0; overflow-wrap: anywhere; }
.poll-head > .icon-btn { margin: -4px -6px 0 0; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; overflow: hidden; }
button.poll-opt:hover { border-color: var(--accent); background: none; filter: none; }
.poll-opt.on, .poll-opt.mine { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
/* 自己投的選項：沒有勾勾，只用綠框標出來（比選擇中的再明顯一點） */
.poll-opt.result.mine { border-color: var(--accent); }
.poll-opt > :not(.poll-bar) { position: relative; }
.poll-opt > .ic { flex: none; color: var(--accent); }
/* 結果：底下一條比例 */
.poll-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: width .3s var(--ease-out); }
.poll-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-count { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.poll-count.link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* 複選的勾選框 */
.poll-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 4px; }
.poll-opt.on .poll-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.poll-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.poll-foot button.link { font-size: 12px; }
.poll-foot button.primary.small { padding: 3px 12px; }
.poll .error:empty { display: none; }
.cmp-poll .poll { margin: 8px 0 0; }
/* 選項的圖片：文字左邊一張小方圖，點了放大 */
.poll-opt-img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--line); cursor: zoom-in; }
/* 建立投票：選項左邊的圖片（點了拿掉，右上角一個 x） */
.poll-edit-img { position: relative; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 6px; overflow: hidden; background: var(--line); }
.poll-edit-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poll-edit-img-x { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .6); }
/* 首頁卡片的投票預覽：問題一行、選項一個一框（太長用…），最後是「還有 N 個選項 · N 人投票」 */
.poll-mini { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.poll-mini-q { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; font-size: 13px; }
.poll-mini-q > .ic { flex: none; color: var(--accent); }
.poll-mini-q > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*沒圖片時的投票預覽：問題換行（最多三行），不要把首頁卡片撐寬*/
.poll-mini > .poll-mini-q { align-items: flex-start; }
.poll-mini > .poll-mini-q > .ic { margin-top: 2px; }
.poll-mini > .poll-mini-q > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
.poll-mini-opt { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.poll-mini-opt > img { flex: none; width: 20px; height: 20px; object-fit: cover; border-radius: 4px; }
.poll-mini-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-mini-foot { margin-top: 1px; }
.poll-edit input[type=text] { width: 100%; box-sizing: border-box; }
/* 選項上面一條分隔線，跟問題分開（跟投票卡片一樣） */
.poll-edit-options { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.poll-edit-row { display: flex; align-items: center; gap: 6px; }
.poll-edit-opts { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }

/* 選檔案的錯誤：貼著檔案那一列 */
.addon-form .addon-file-err { margin-top: -6px; }

/* 暴雷內容（kit.js spoilerCover）：蓋著時模糊、變暗，中間「暴雷」標籤，點一下才顯示 */
.spoiler-box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; border-radius: 10px; overflow: hidden; line-height: 0; }
.spoiler-box.spoiler { cursor: pointer; }
.spoiler-box.spoiler > :not(.spoiler-tag) { filter: blur(40px) brightness(.75); }
.spoiler-box.spoiler .vp-bar, .spoiler-box.spoiler .vp-big { visibility: hidden; }
.spoiler-tag { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; pointer-events: none; white-space: nowrap; }
.spoiler-box.spoiler:hover .spoiler-tag { background: rgba(0,0,0,.88); }
.spoiler-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 貼文、留言的圖片格子：外框代替圖片當格子（圓角交給格子本身） */
.post-images > .spoiler-box { display: block; border-radius: 0; }
.post-images > .spoiler-box > img { width: 100%; height: 100%; }
.post-images.n3 > .spoiler-box:first-child { grid-row: span 2; }
.spoiler-box:has(> .post-clip) { display: block; margin-top: 8px; border-radius: 8px; }
.spoiler-box > .post-clip { margin-top: 0; }
.spoiler-box:has(> .msg-video) { width: 280px; }
.spoiler-box > .msg-video { width: 100%; }
/* 上傳前的縮圖：✕ 旁邊的「標記暴雷」按鈕；標記了縮圖模糊、出現標籤 */
.attach-thumb .attach-spoiler { position: absolute; top: 3px; right: 29px; padding: 3px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; }
.attach-thumb .attach-spoiler:hover { background: rgba(0,0,0,.8); }
.cmp-spoiler { position: absolute; top: 2px; right: 24px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; }
.cmp-spoiler svg { width: 12px; height: 12px; }
.spoiler-btn.on { background: var(--accent) !important; color: #fff; }
.attach-thumb > .spoiler-tag, .cmp-thumb > .spoiler-tag { display: none; padding: 3px 7px; font-size: 11px; }
.attach-thumb.marked > .spoiler-tag, .cmp-thumb.marked > .spoiler-tag { display: block; }
.attach-thumb.marked > img, .cmp-thumb.marked > img, .cmp-thumb.marked > video { filter: blur(8px) brightness(.8); }
.attach-chip > .spoiler-tag { display: none; position: static; margin: 0; padding: 1px 6px; font-size: 11px; }
.attach-chip.marked > .spoiler-tag { display: inline-block; }