/* 主戰場 HUD 小元件、公會（首頁、對決、遠征卡片、領土小卡）、社交、聊天的介面打磨（2026-10-04）
   和商城（style.css .shop2）同一套石板卡框、圖示＋數字；只放數字、圖示、按鈕，不寫說明文字。
   放在 style.css、combat.css 之後載入，同名選擇器以這裡為準。 */

/* ---------- 小圖示：石材圖示當遮罩，顏色跟著文字 ---------- */
.pi { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
.pi-medal { --pi: url('../assets/ui/stone/picto_medal.png'); color: #ffcf5a; }
.pi-up { --pi: url('../assets/ui/stone/picto_up.png'); color: #8fe6a6; }
.pi-chat { --pi: url('../assets/ui/stone/picto_chat.png'); }

/* ---------- 公會首頁 ---------- */
.sect-head.gh { gap: 12px; padding: 10px 12px; border-radius: 12px; }
.sect-head.gh .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sect-head.gh h3 { display: flex; align-items: baseline; gap: 6px; font-size: 21px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sect-head.gh h3 small { font-size: 14px; color: #ffe08a; letter-spacing: 0; }
.gh-exp { display: flex; align-items: center; gap: 6px; }
.gh-exp .lvbar { margin: 0; max-width: none; height: 8px; }
.gh-exp small { flex: none; font-size: 11px; color: #e8dcc6; opacity: .85; }
.gh-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.gh-stats > span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; background: #0007; box-shadow: inset 0 0 0 1px #ffffff1a; }
.gh-stats b { font-weight: 400; font-size: 13px; color: #fff3c4; }
.gh-stats .ci { width: 16px; height: 16px; }
.gh-notice { margin: 8px 2px 0; padding: 6px 10px; border-left: 3px solid #ffd24a; border-radius: 0 8px 8px 0; background: #0005; color: #f4e2c4; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.sheet-body h4.gh-h { display: flex; align-items: center; gap: 8px; }
.sheet-body h4.gh-h > small { font-family: var(--num); color: var(--muted); }
.gh-mycon { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 999px; background: #0008; box-shadow: inset 0 0 0 1px #ffcf5a55; font-size: 14px; text-shadow: none; }
.gh-mycon b { font-weight: 400; color: #ffe08a; }

/* 公會週目標：門檻數字＋獎勵的里程碑格 */
.gg .gg-head { display: flex; align-items: center; gap: 6px; }
.gg .gg-head > b { font-weight: 400; color: #ffe08a; }
.gg .q-help { min-width: 26px; min-height: 26px; border-width: 6px; border-image-width: 6px; font-size: 12px; }
.gg-pts { margin-left: auto; font-family: var(--num); }
.gg-pts b { font-weight: 400; font-size: 18px; color: #ffd24a; }
.gg-pts small { font-size: 12px; color: var(--muted); }
.gg-mine { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 5px; border-radius: 999px; background: #0007; font-size: 13px; }
.gg-mine b { font-weight: 400; }
.gg .lvbar { margin: 6px 0 2px; }
.gg-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px 0 2px; }
.gg-tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 5px 2px 6px; border-radius: 8px; border: 1px solid #ffffff1f; background: #0006; color: #e9dcc6; font: inherit; cursor: default; }
.gg-tier > b { font: 400 15px var(--num); color: #c8b8a2; }
.gg-rw { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; font: 400 12px var(--num); line-height: 1.35; }
.gg-rw > span { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.gg-rw .ci, .gg-rw img { width: 15px; height: 15px; }
.gg-rw .legend-pick { font-size: 11px; color: #ffd86b; }
.gg-tier.lock .gg-rw { opacity: .7; }
.gg-tier.ready { border-color: #ffd24a; background: linear-gradient(#6a4a12, #3a2808); box-shadow: 0 0 8px #ffd24a88; cursor: pointer; animation: ggGlow 1.4s ease-in-out infinite alternate; }
.gg-tier.ready > b { color: #ffe08a; }
.gg-tier.got { opacity: .55; }
.gg-ok { position: absolute; right: -4px; top: -6px; width: 20px; height: 20px; background: url('../assets/ui/stone/picto_check.png') center / contain no-repeat; image-rendering: pixelated; }
@keyframes ggGlow { to { box-shadow: 0 0 14px #ffd24acc; } }
.gg-top { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
.gg-top b { font-weight: 400; color: #e9dcc6; }

/* 公會首領：名字一行、血條、置中的出戰鈕（剩餘次數放在按鈕上） */
.boss-card.gb { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; text-align: left; }
/* 左側首領頭像：和英雄頭像框同大小（64px 方框、圓角、邊框），腳貼底置中 */
.gb-face { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; border: 2px solid #c8603a; background: radial-gradient(circle at 50% 70%, #6a3a1e, #24120a); box-shadow: inset 0 2px 0 #fff3, 0 2px 0 #0007, 0 0 10px #ff7a3a55; box-sizing: content-box; }
.gb-face > .px-av { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.gb .boss-name { font-size: 20px; letter-spacing: 2px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb .boss-name small { font: 400 14px var(--num); letter-spacing: 0; color: #ffe08a; vertical-align: 2px; }
.gb-go.btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; align-self: center; min-width: min(180px, 100%); margin-top: 6px; }
.gb-go.btn small { margin: 0; padding: 0 7px; border-radius: 999px; background: #3a200033; font: 400 13px var(--num); }

/* 捐獻：三格並排 */
.gdn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gdn-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 0 0; border-style: solid; border-width: 10px 11px; border-image: url('../assets/ui/ts/slate.png') 44 55 43 55 fill / 10px 11px stretch; image-rendering: pixelated; text-align: center; }
.gdn-name { font-weight: 400; font-size: 13px; color: var(--gold); white-space: nowrap; }
.gdn-pay { font: 400 15px var(--num); color: #fff; }
.gdn-pay .ci { width: 20px; height: 20px; }
.gdn-get { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; font-size: 12px; }
.gdn-get > span { display: inline-flex; align-items: center; gap: 2px; }
.gdn-get b { font-weight: 400; font-family: var(--num); color: #e9dcc6; }
.gdn-tile .btn { align-self: stretch; margin: 2px -4px -4px; min-height: 36px; }
.gdn-tile.done .gdn-pay, .gdn-tile.done .gdn-get { filter: grayscale(.8); opacity: .6; }

/* 公會商店：和商城一樣的格子（大圖示＋數量，按鈕上是貢獻價格） */
.gsh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.gsh-art .ci-aw { mix-blend-mode: lighten; }
.gsh-tile { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px 0 0; border-style: solid; border-width: 9px 8px; border-image: url('../assets/ui/ts/slate.png') 44 55 43 55 fill / 9px 8px stretch; image-rendering: pixelated; text-align: center; }
.gsh-tile::before { content: ''; position: absolute; left: 50%; top: 0; width: 60px; height: 48px; transform: translateX(-50%); background: radial-gradient(closest-side, #ffe9a644, transparent); pointer-events: none; }
.gsh-art { position: relative; display: grid; place-items: center; width: 40px; height: 40px; filter: drop-shadow(0 2px 2px #0009); }
.gsh-art .ci, .gsh-art img { width: 36px; height: 36px; image-rendering: pixelated; }
.gsh-amt { position: relative; margin-top: -6px; font: 400 14px var(--num); white-space: nowrap; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.gsh-name { font-size: 12px; color: var(--gold); white-space: nowrap; }
.gsh-lim { position: absolute; z-index: 2; top: -6px; left: -7px; padding: 1px 5px; border-radius: 0 0 6px 0; background: #000a; color: #ffe08a; font-size: 11px; }
.gsh-tile .btn { flex-direction: row; align-self: stretch; margin: 4px -2px -2px; min-height: 30px; gap: 2px; padding: 0 2px; }
.gsh-tile .btn .num { font-size: 14px; }
.gsh-tile .btn:not(.gold) .pi-medal { color: inherit; }
.gsh-tile.sold .gsh-art, .gsh-tile.sold .gsh-amt, .gsh-tile.sold .gsh-name { filter: grayscale(1) brightness(.6); }
.gsh-tile.gs-pop { animation: gsPopTile .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gsPopTile { 40% { transform: scale(1.08); filter: brightness(1.4); } }

/* 成員：名字一行（不換行）、下面一行在線＋最高關＋貢獻，右邊戰力 */
.gm-list li { gap: 8px; padding: 6px 8px; }
.gm-list li.me { background: #ffd24a1f; box-shadow: inset 0 0 0 1px #ffd24a55; }
.gm-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gm-name { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.gm-name > span { overflow: hidden; text-overflow: ellipsis; }
.gm-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.gm-sub > span { display: inline-flex; align-items: center; gap: 2px; }
.gm-sub .sc-on, .gm-sub .sc-off { margin-right: -4px; }
.gm-list li em { flex: none; }
.guild-log > div { display: flex; gap: 6px; padding: 3px 0; }
.guild-log > div small { flex: none; }
.gh-admin { display: grid; gap: 6px; margin-top: 10px; }
.gh-admin input { flex: 1; min-width: 0; }
.gh-admin details.card { margin: 0; }
.gh-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.gh-chat.btn { flex: 1; display: inline-flex; flex-direction: row; min-height: 40px; align-items: center; justify-content: center; gap: 6px; }
.gh-chat .pi { width: 16px; height: 16px; }
.gh-leave.btn { flex: none; opacity: .75; filter: saturate(.4); }
.gh-leave.btn.confirm { opacity: 1; filter: none; border-image-source: url('../assets/ui/ts/btn_red.png'); color: #fff; }

/* ---------- 公會對決 ---------- */
.gw-head > div { justify-content: center; gap: 0; padding: 4px 2px; }
.gw-head .gw-l { font-size: 12px; color: var(--muted); }
.gw-head .big-num { line-height: 1.1; }
.gw-wl { font-size: 13px; color: var(--muted); }
.gw-wl .w { font-style: normal; color: #8fe6a6; }
.gw-wl .l { font-style: normal; color: #ff9a8a; }
.gw-pw { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #ffd76a; white-space: nowrap; }
.gw-pw .ci { width: 14px; height: 14px; }
.gw-pips { display: flex; gap: 3px; margin-top: 3px; }
.gw-pips i { width: 8px; height: 8px; transform: rotate(45deg); background: #0009; border: 1px solid #8a7a60; }
.gw-pips i.on { background: #ffd24a; border-color: #fff3a8; box-shadow: 0 0 4px #ffd24a; }
.gw-list { display: flex; flex-direction: column; gap: 6px; }
.gw-opp { gap: 8px; }
.gw-opp .grow { min-width: 0; }
.gw-name { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.gw-name small { font-size: 12px; color: #ffe08a; }
.gw-opp .gw-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.gw-opp .gw-meta > span, .gw-opp .gw-pw { display: inline-flex; align-items: center; }
.gw-meta b { font-weight: 400; margin-left: 2px; color: #e9dcc6; }
.gw-opp > .btn { flex: none; min-width: 72px; }
.gw-refresh { display: flex; justify-content: center; margin: 8px 0 2px; }
.gw-top li.me { background: #ffd24a1f; }

/* ---------- 公會遠征（卡片部分） ---------- */
.gx-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.gx-acts span { justify-content: center; gap: 1px; padding: 3px 0; font-size: 11px; }
.gx-me .gx-stats > div.idle { opacity: .6; }
.gx-band > .btn.gold:last-child { flex: 1; }
.gx-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gx-h > b, b.gx-h { font-weight: 400; color: #ffe08a; }
.gx-ally { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: #e9dcc6 !important; opacity: 1 !important; }
.gx-myrank { margin-left: auto; padding: 0 8px; border-radius: 999px; background: #ffd24a; color: #3a2000; font-size: 13px; }
.gx-slot { flex: none; width: 44px; height: 44px; border-radius: 8px; border: 2px dashed #ffffff40; background: #0004; color: #ffffff80; font-size: 22px; line-height: 1; cursor: pointer; }
.gx-empty { padding: 8px 0 4px; text-align: center; color: var(--muted); }
.gx-rank .toplist li { padding: 5px 8px; }
.gx-rank .toplist li .gx-tn { margin-left: 4px; }
.gx-rank .toplist li em { margin-left: auto; }

/* ---------- 領土分頁小卡 ---------- */
.tm-v2 { gap: 8px; padding: 10px 12px 12px; }
.tm-v2 .tm-top { display: flex; align-items: center; gap: 8px; }
.tm-v2 .tm-sn { padding: 1px 10px; border-radius: 8px; background: #ffd24a; color: #3a2000; font-size: 16px; }
.tm-v2 .tm-cd { color: #ffe08a; font-size: 14px; }
.tm-v2 .tm-top .q-help { margin-left: auto; min-width: 28px; min-height: 28px; border-width: 6px; border-image-width: 6px; }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-stats > div { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 10px; background: #0007; box-shadow: inset 0 0 0 1px #ffd24a33; }
.tm-stats b { font-weight: 400; font-size: 22px; color: #fff3c4; }
.tm-stats .tm-own i { width: 16px; height: 16px; border-radius: 4px; background: var(--gc); box-shadow: 0 0 0 1px #000a; }
.tm-stats .tm-cup { font-size: 18px; }
.tm-v2 .tm-go.btn { flex-direction: row; gap: 8px; }

/* ---------- 社交 ---------- */
.sc-me .sc-guild { color: #d8dcff; opacity: .9; }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13px; color: #e8ecff; }
.sc-me .sc-hint { font-size: 22px; opacity: .6; }
.sc-row .sc-pw em { margin-left: 8px; font-style: normal; color: #e9dcc6; opacity: .8; }
.pc-team .empty { grid-column: 1 / -1; padding: 14px 0; }
.pcard .pc-stats b { font-family: var(--num); font-weight: 400; }

/* ---------- 聊天 ---------- */
.chatbox { padding: 6px 8px; }
.chatbox .msg { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; border-bottom: 0; font-size: 14px; }
.chatbox .msg.cont { padding-top: 0; }
.msg-face { flex: none; width: 34px; min-height: 1px; cursor: pointer; }
.msg-face .lord-face { display: block; }
.msg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; max-width: calc(100% - 46px); }
.msg-head { display: flex; align-items: center; gap: 3px; max-width: 100%; font-size: 12px; white-space: nowrap; cursor: pointer; }
.msg-head b { margin: 0; overflow: hidden; text-overflow: ellipsis; color: #8fd3ff; font-weight: 400; }
.msg-head small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; }
.msg-head small::before { content: '·'; margin: 0 2px; }
.msg-head time { margin-left: 4px; color: #ffffff55; font-size: 10px; }
.msg-head .vipb { margin-right: 0; }
.msg-text { display: inline-flex; align-items: flex-end; gap: 4px; max-width: 100%; padding: 5px 10px; border-radius: 4px 12px 12px 12px; background: #3a322b; color: #f4ead8; line-height: 1.4; overflow-wrap: anywhere; box-shadow: 0 1px 0 #0006; }
.msg-text .chat-tr { flex: none; margin: 0; }
.chatbox .msg.me { flex-direction: row-reverse; }
.chatbox .msg.me .msg-body { align-items: flex-end; }
.chatbox .msg.me .msg-head { flex-direction: row-reverse; }
.chatbox .msg.me .msg-head > :not(time) { display: none; }
.chatbox .msg.me .msg-head time { margin: 0 4px 0 0; }
.chatbox .msg.me .msg-head b { color: #ffe08a; }
.chatbox .msg.me .msg-text { border-radius: 12px 4px 12px 12px; background: #5a4a1e; color: #fff6dc; }
.chatbox .msg.sys { justify-content: center; padding: 4px 0; }
.chatbox .msg.sys > span { max-width: 92%; padding: 3px 10px; border-radius: 999px; background: #0007; color: #ffe08a; font-size: 12px; text-align: center; line-height: 1.4; }
.chatbox .msg.sys em { margin-right: 6px; padding: 0 5px; border-radius: 4px; background: #ffd24a; color: #3a2000; font-style: normal; font-size: 11px; }
.msg-empty { padding: 30px 0; text-align: center; }

/* ---------- 卡關目標小卡：石板卡框（和商城卡片同一套） ---------- */
#stuckCard:not(.fold) { padding: 2px 3px 3px; border-radius: 0; background: none; border-style: solid; border-width: 9px 10px; border-image: url('../assets/ui/ts/slate.png') 44 55 43 55 fill / 9px 10px stretch; image-rendering: pixelated; box-shadow: none; filter: drop-shadow(0 3px 4px #0009); gap: 3px; }
#stuckCard .sk-head { padding-bottom: 2px; border-bottom: 1px solid #ffffff1a; }
#stuckCard .sk-x { width: 24px; height: 20px; }
#stuckCard:not(.fold):not(.wide) { width: min(252px, 64vw); }
#stuckCard .sk-row { grid-template-columns: 20px minmax(0, 1fr) 66px; gap: 5px; min-height: 28px; }
#stuckCard .sk-row .btn.sm { width: 100%; }
#stuckCard .sk-row > span { font-size: 12px; color: #fff3c4; }

/* ---------- 浮動提示：放到首領血條下面，不蓋住關卡列、「你 Lv vs 首領 Lv」和首領血量 ---------- */
#toasts { top: calc(200px + var(--safe-t)); }
@media (max-width: 640px) { #toasts { top: calc(188px + var(--safe-t)); } body.sheet-open #toasts { top: calc(118px + var(--safe-t)); } } /* 面板開著時面板標題比戰況重要：回到原本位置 */
.toast { border-color: #8a7350; }

/* ---------- 電腦版：右側面板打開時，關卡列、首領血條移到左邊剩下的戰場中間，不被面板蓋住 ---------- */
@media (min-width: 900px) {
  .stagebar, #bossbar { transition: left .28s cubic-bezier(.2, .9, .3, 1); }
  body.sheet-open:not(.town):not(.terr) .stagebar, body.sheet-open:not(.town):not(.terr) #bossbar, body.sheet-open .banner { left: calc(50% - 244px); }
  body.sheet-open:not(.town):not(.terr):has(.shop2) .stagebar, body.sheet-open:not(.town):not(.terr):has(.shop2) #bossbar, body.sheet-open:has(.shop2) .banner { left: calc(50% - 294px); }
}