/* 戰鬥英雄辨識（docs/design/COMBAT_IDENTITY_HANDOFF.md）：主將頭像列 */
.leader-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b, 0px)); display: flex; gap: 6px; pointer-events: auto; z-index: 6; }
.lb-item { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 10px; border: 2px solid #5d5040; background: #1d1813cc; overflow: visible; box-shadow: 0 2px 6px #0009; }
.lb-item.r5 { border-color: #ff3b6b; } .lb-item.r4 { border-color: #ff8f1f; } .lb-item.r3 { border-color: #a653ea; } .lb-item.r2 { border-color: #3f8ee0; }
.lb-item > .px-av, .lb-item > img { position: absolute; inset: 1px; width: auto !important; height: auto !important; border-radius: 8px; background-position: center; }
/* 冷卻：從 12 點鐘方向順時針退去的暗色扇形（讀戰鬥裡實際的剩餘冷卻） */
.lb-cd { position: absolute; inset: 0; border-radius: 8px; background: conic-gradient(rgba(0, 0, 0, .42) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.lb-hp { position: absolute; left: 3px; right: 3px; bottom: -5px; height: 4px; border-radius: 2px; background: #000a; overflow: hidden; }
.lb-hp b { display: block; height: 100%; width: calc(var(--hp, 1) * 100%); background: #4cd964; }
.lb-item.ready { box-shadow: 0 0 10px #ffd24a, 0 2px 6px #0009; }
.lb-item.dead { filter: grayscale(1) brightness(.55); }
.lb-item.dead .lb-cd { background: rgba(0, 0, 0, .5); }
.lb-item.focus { outline: 2px solid #ffe27a; outline-offset: 2px; }
.lb-skill { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; font-style: normal; font-size: 12px; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; opacity: 0; pointer-events: none; }
.lb-item.cast { animation: lbCast .9s ease-out; }
.lb-item.cast .lb-skill { animation: lbName 1.4s ease-out; }
@keyframes lbCast { 0% { transform: scale(1.18); box-shadow: 0 0 16px #fff; } 100% { transform: scale(1); } }
@keyframes lbName { 0% { opacity: 1; transform: translate(-50%, 4px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
body.sheet-open .leader-bar { display: none; }
/* 手機：放在右側、技能按鈕上方的直排，不蓋住技能、任務、導覽 */
@media (max-width: 640px) {
  .leader-bar { left: auto; right: 6px; transform: none; bottom: calc(222px + var(--safe-b, 0px)); flex-direction: column-reverse; gap: 8px; }
  .lb-item { width: 40px; height: 40px; }
  .lb-skill { left: auto; right: 100%; bottom: 50%; transform: translateY(50%); margin: 0 6px 0 0; }
  @keyframes lbName { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  .lb-item.cast .lb-skill { animation: lbNameM 1.4s ease-out; }
  @keyframes lbNameM { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .lb-item.cast, .lb-item.cast .lb-skill { animation-duration: .01s; } .lb-item.cast .lb-skill { opacity: 1; } }
/* 首領進場提示：收在血條上方，不佔畫面中央（D） */
#bossbar.intro::before { content: attr(data-intro); position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 14px; color: #ffd24a; text-shadow: 0 2px 0 #000, 0 0 8px #ff3b3b; white-space: nowrap; animation: bbIntro 1.8s ease-out forwards; }
@keyframes bbIntro { 0% { opacity: 0; transform: translate(-50%, 6px) scale(1.3); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 手機：追蹤卡移到左下（任務框上方），不蓋住右側的主將頭像列與技能鈕 */
@media (max-width: 640px) {
  #heroFocus { left: 6px !important; right: auto !important; bottom: calc(150px + var(--safe-b, 0px)) !important; top: auto !important; width: min(220px, 58vw) !important; }
}
body.sheet-open #heroFocus { display: none; } /* 開著面板時不顯示追蹤卡 */

/* ---------- 養成深度：技能圖示、秘境、會長技能、技能特化、附魔（ui-depth.js）---------- */
.skic { display: inline-block; flex-shrink: 0; image-rendering: pixelated; background-repeat: no-repeat; border-radius: 4px; vertical-align: middle; }
.cmd-bar [data-cmd] .skic { pointer-events: none; }
.dg-list, .tal-list { display: flex; flex-direction: column; gap: 8px; }
.card.dg, .card.tal { display: flex; gap: 10px; align-items: center; }
.card.dg .grow, .card.tal .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card.dg.locked, .card.tal.locked { opacity: 0.55; }
.card.tal.on { box-shadow: inset 0 0 0 2px var(--gold, #ffd24a); }
.dg-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.dg .lvbar { height: 6px; margin: 2px 0; }
.dg .lvbar.warn i { background: #e0703a; }
/* 副本類型化（規則版本 47）：規則標籤、副本隊伍、編隊、屬性試煉塔 */
/* 招募：英雄招募的本週陣營加成（原本的陣營週） */
.gb-faction { display: grid; gap: 2px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--fc); background: color-mix(in srgb, var(--fc) 14%, #0000); }
.gb-faction b { color: var(--fc); } .gb-faction span { font-size: 12px; opacity: .9; }
.gb-fac-heroes { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
/* 招募：神話心願、限時池累抽里程碑（規則版本 54） */
.myth-wish { display: flex; align-items: center; gap: 10px; cursor: pointer; border-color: #ff5a5a66; margin: 8px 0; }
.myth-wish .grow { display: grid; } .myth-wish .link { color: #ffb0a0; font-size: 13px; }
.mw-empty { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 2px dashed #ff5a5a88; color: #ff9a8a; font-weight: 800; }
.lim-ms .ms-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
.lim-ms .ms { display: grid; gap: 2px; padding: 6px 4px; border-radius: 8px; border: 1px solid #ffffff22; background: #0003; color: inherit; font: inherit; text-align: center; }
.lim-ms .ms b { font-size: 15px; } .lim-ms .ms small { font-size: 10px; line-height: 1.2; opacity: .85; } .lim-ms .ms em { font-style: normal; font-size: 11px; color: #ffe08a; }
.lim-ms .ms.ok { border-color: #ffd24a; box-shadow: 0 0 8px #ffd24a55; } .lim-ms .ms.got { opacity: .5; }
/* 秘境、試煉塔的獎勵列：大圖示＋數量（使用者：獎勵要清楚明顯） */
.dg-reward { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px; background: #0003; border: 1px solid #ffd24a33; }
.dg-reward > span { font-size: 12px; color: #ffe08a; margin-right: 2px; }
.dg-reward > em { font-style: normal; font-size: 11px; opacity: .8; display: inline-flex; align-items: center; gap: 4px; }
.rw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 12px; background: #ffffff14; }
.rw-chip .ci { width: 22px; height: 22px; } .rw-chip b { font-size: 14px; color: #fff; }
.ci-souls { background-image: url('../assets/ui/ut/souls.png'); image-rendering: pixelated; }
.ci-items { background-image: url('../assets/ui/ut/chest.png'); image-rendering: pixelated; }
.dg .grow .dg-btns { flex-direction: row; margin-top: 6px; } .dg .grow .dg-btns .btn { flex: 1; }
.row.end { justify-content: flex-end; margin-bottom: 6px; }
.dg-rule { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #7a3cff44; color: #d9c2ff; vertical-align: middle; }
.dg-team { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; flex-wrap: wrap; }
.dg-team .btn { margin-left: auto; }
.dg-mem { position: relative; display: grid; place-items: center; border-radius: 8px; background: #0004; border: 2px solid #ffffff22; padding: 0; }
.dg-mem.r3 { border-color: #b36bff; } .dg-mem.r4 { border-color: #ffb13b; } .dg-mem.r5 { border-color: #ff5a5a; }
.dg-mem.empty { width: 48px; height: 48px; color: #fff6; font-size: 20px; border-style: dashed; }
.fit { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 10px; font-weight: 700; padding: 0 3px; border-radius: 6px; line-height: 14px; }
.fit.good { background: #3fbf6a; color: #fff; } .fit.bad { background: #c9483a; color: #fff; }
.dcard { position: relative; } .dcard .fit { right: 4px; bottom: auto; top: 4px; }
.dg-rec { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 10px; background: #ffd24a; color: #402a00; border-radius: 6px; padding: 0 4px; }
.dg-slots { display: flex; justify-content: center; gap: 6px; margin: 8px 0; }
.dg-pool { max-height: 46vh; overflow-y: auto; }
.card.dg.closed { opacity: .6; }
.trial-el { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--ec); color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 1px 2px #0008; }
.tal-loadout { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.tal-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.tal-slot.empty { justify-content: center; color: #aaa; font-size: 24px; min-height: 64px; }
.mast-row.spec { align-items: flex-start; gap: 8px; }
.spec-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.spec-chip { font-size: 11px; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.spec-chip.A { background: rgba(80, 200, 110, 0.3); }
.spec-chip.B { background: rgba(230, 80, 70, 0.3); }
.spec-chip.empty { color: #aaa; }
.spec-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 2px; }
.spec-pick .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; height: auto; padding: 6px 8px; }
.ench-slot { margin: 6px 0; }
.ench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 6px; }
.ench-grid .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; height: auto; padding: 6px 8px; }
/* 秘境難度格（DUNGEON_TIERS）：卡片上的 30 格進度、選關視窗的難度分頁與 10 格 */
.dg-prog { display: flex; gap: 4px; margin: 4px 0 2px; }
.dg-prog > span { flex: 1; display: flex; gap: 1px; padding: 2px; border-radius: 4px; background: #0005; }
.dg-prog i { flex: 1; height: 6px; border-radius: 2px; background: #ffffff18; }
.dg-prog .t0 i.on { background: #6fc8ff; } .dg-prog .t1 i.on { background: #ffa64a; } .dg-prog .t2 i.on { background: #ff4f4f; }
.dg-prog i.nx { background: #ffe066; box-shadow: 0 0 4px #ffe066; }
.dg-prog > span.abyss { flex: 0 0 auto; padding: 0 6px; font-size: 11px; line-height: 10px; color: #d9a3ff; background: #3a1450aa; } /* 深淵（沒有上限）：直接寫層數 */
.dg-tiers button small { display: block; font-size: 10px; opacity: .85; }
.dg-prog > span.off { opacity: .4; } .dg-tiers button.off { opacity: .6; } /* 還沒開放的難度（分頁照樣能切） */
.dg-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 8px; }
.dg-cell { display: grid; gap: 1px; padding: 8px 2px; min-height: 48px; border-radius: 8px; border: 2px solid #ffffff22; background: #0004; color: inherit; font: inherit; text-align: center; }
.dg-cell b { font-size: 15px; } .dg-cell small { font-size: 10px; opacity: .8; }
.dg-cell.done { border-color: #3fbf6a88; background: #3fbf6a22; } .dg-cell.next { border-color: #ffe066; box-shadow: 0 0 8px #ffe06655; }
.dg-cell.lock { opacity: .4; } .dg-cell.sel { outline: 2px solid #fff; outline-offset: 1px; }
.dg-detail { display: flex; flex-direction: column; gap: 4px; }
.dg-detail .dg-btns { flex-direction: row; margin-top: 6px; } .dg-detail .dg-btns .btn { flex: 1; }
.dg-cell-name { font-size: 17px; } .dg-cell-name.t0 { color: #8fd6ff; } .dg-cell-name.t1 { color: #ffb36a; } .dg-cell-name.t2 { color: #ff6a6a; } .dg-cell-name.t3 { color: #d9a3ff; }
.dg-pow { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; } .dg-pow b { color: #ffe08a; } .dg-pow small { opacity: .8; }
@media (max-width: 480px) { .card.dg, .card.tal { flex-wrap: wrap; } .dg-btns { flex-direction: row; flex-wrap: wrap; width: 100%; } }
/* 後援軍團人數（ui-leaders.js）：畫面外齊射的英雄與士兵 */
.leader-bar .lb-reserve { align-self: center; font-size: 12px; font-weight: 700; color: #ffe16b; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 225, 107, 0.5); border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
/* 背包裝備列：手機上按鈕（強化／進化／附魔／分解）排到名稱下方一整排，名稱不再被擠成一字一行 */
@media (max-width: 600px) {
  .item-row { flex-wrap: wrap; }
  .item-row .grow { flex: 1 1 140px; }
  .item-btns { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .item-btns .btn { flex: 1 1 30%; min-width: 0; white-space: normal; height: auto; padding: 4px 6px; }
  .item-btns .btn small { white-space: normal; font-size: 10px; line-height: 1.2; }
}
/* 陣容技（ui.js comboHtml）*/
.combo-row { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.combo-chip { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.combo-chip.on { background: color-mix(in srgb, var(--cc) 22%, rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 60%, transparent); }
.combo-chip div { display: flex; flex-direction: column; min-width: 0; }
.combo-chip small { font-size: 11px; opacity: 0.85; }
.combo-hint { font-size: 12px; color: #ffe08a; padding-left: 4px; }
.combo-hint::before { content: '▸ '; }

/* ---------- 英魂圖示：unTied「Super Pixel Objects And Items 2」紫色靈魂火（單張，任何尺寸都能縮放：頂欄 34／28／20px、費用小圖 18px） */
.ci-souls, .ic.souls { background: url('../assets/ui/ut/souls.png') center / contain no-repeat; image-rendering: pixelated; }
.ic.souls { color: transparent; border-radius: 8px; box-shadow: 0 2px 4px #0008; }
/* 符文（奧義的材料，規則版本 36）：技能圖集的 runes_A（第 12 欄、第 6 列） */
.ci-rune, .ic.rune { background: url('../assets/ui/skillicons.png') 52.1739% 27.2727% / 2400% 2300% no-repeat; image-rendering: pixelated; }
.ic.rune { color: transparent; border-radius: 8px; box-shadow: 0 2px 4px #0008; }
/* 覺醒石（英雄覺醒，shared/rules/awaken.js）：先用技能圖集的 empower_A（第 6 欄、第 1 列），Codex 畫好 ui/px/res/awaken_stone.png 再換 */
.ci-aw, .ic.aw { background: url('../assets/ui/skillicons.png') 26.087% 4.5455% / 2400% 2300% no-repeat; image-rendering: pixelated; }
.ic.aw { color: transparent; border-radius: 8px; box-shadow: 0 2px 4px #0008; }
/* 英雄覺醒卡（ui-awaken.js）：等級徽章＋加成「目前 → 下一級」＋擁有／需要進度條＋兩顆等寬按鈕 */
.aw-card { display: flex; flex-direction: column; gap: 10px; }
.aw-card.ready { box-shadow: 0 0 0 2px #ffd23a; }
.aw-top { display: flex; align-items: center; gap: 12px; }
.aw-badge { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #5a2a14, #1a1410 75%); border: 2px solid #c9862a; box-shadow: inset 0 0 12px #ff8a2a55; }
.aw-badge .ci-aw { width: 44px; height: 44px; margin-top: -8px; }
.aw-badge b { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: #2a1a0c; border: 2px solid #ffd23a; color: #ffd23a; font-size: 15px; line-height: 1.2; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.aw-badge.off { border-color: #6a5430; box-shadow: none; }
.aw-badge.off .ci-aw { filter: grayscale(.7) brightness(.7); }
.aw-badge.off b { border-color: #8a7550; color: #d8c9a8; }
.aw-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aw-title { font-weight: bold; font-size: 15px; white-space: nowrap; }
.aw-gain { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.aw-gain small { color: var(--muted, #b9a98a); font-size: 12px; }
.aw-gain b { font-size: 20px; line-height: 1.1; }
.aw-gain i { font-style: normal; color: var(--muted, #b9a98a); }
.aw-bar { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.aw-bar .ci-aw { width: 22px; height: 22px; }
.aw-track { flex: 1; height: 10px; border-radius: 999px; background: #0006; border: 1px solid #6a5430; overflow: hidden; }
.aw-track i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a2a, #ffd23a); border-radius: 999px; }
.aw-own { flex: none; font-size: 13px; white-space: nowrap; }
.aw-own b { color: #ffd23a; font-size: 15px; }
.aw-hint { margin-top: -6px; text-align: right; font-size: 12px; }
.aw-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aw-btns .btn { min-height: 44px; margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.aw-cost { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.aw-cost .ci-aw { width: 20px; height: 20px; }
/* 圖示借用技能圖集（底色是黑的）：深色底上用 lighten 去掉黑框，其他地方圓角 */
.ci-aw { border-radius: 3px; }
.aw-badge .ci-aw, .aw-bar .ci-aw, .ub .ci-aw,.hero-res .ci-aw, .prod-aw .ci-aw, .aw-chip .ci-aw, .aw-line .ci-aw, .ms-aw .ci-aw, .aw-note .ci-aw, .mat-chip .ci-aw, .res-tip .ci-aw, .sub-perks .ci-aw { mix-blend-mode: lighten; }
/* 英雄頁頂部：頂欄沒有的養成資源（覺醒石、神鑄石），點了看說明 */
.hero-res { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.hero-res > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: #0005; border: 1px solid #6a5430; font-size: 13px; cursor: pointer; white-space: nowrap; }
.hero-res .ci { width: 22px; height: 22px; }
.hero-res b { color: #ffd23a; }
/* 付費點的覺醒石標示（商城、戰令、基金、累儲、鑽石包、限時池里程碑） */
.aw-chip { display: inline-flex; align-items: center; gap: 2px; color: #ffcf7a; white-space: nowrap; }
.aw-chip .ci-aw, .prod-aw .ci-aw, .ms-aw .ci-aw, .aw-note .ci-aw { width: 18px; height: 18px; }
.prod > .prod-aw { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: #ffcf7a; white-space: nowrap; }
.lim-ms .ms-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lim-ms .ms .ms-aw { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1px; min-width: 0; font-size: 10px; line-height: 1.2; color: #ffcf7a; }
.lim-ms .ms .ms-aw .ci-aw { width: 14px; height: 14px; }
.aw-line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; font-size: 12px; color: #ffcf7a; }
.aw-line .ci-aw { width: 20px; height: 20px; }
.cost.aw-chip .ci-aw { width: 18px; height: 18px; }
.aw-note { color: #ffcf7a; margin: 4px 0; }
/* 資源圖示補齊（res-info.js 的說明表）：建築藍圖＝map_A、秘境鑰匙＝magic_key_A、同名碎片＝magic_crystal_C（技能圖集 24×23 格），城內資源用主城的圖 */
.ci-bp { background: url('../assets/ui/skillicons.png') 65.2174% 40.9091% / 2400% 2300% no-repeat; image-rendering: pixelated; }
.ci-key { background: url('../assets/ui/skillicons.png') 52.1739% 40.9091% / 2400% 2300% no-repeat; image-rendering: pixelated; }
.ci-shard { background: url('../assets/ui/px/res/shard_star.png') center / contain no-repeat; image-rendering: pixelated; } /* 同名碎片：金色星星（升星材料；原本的紫色圖示和英魂火焰太像，使用者：碎片圖片有點怪、跟英魂打架） */
.ci-wood { background-image: url('../assets/town/swords/res_wood.png'); image-rendering: pixelated; }
.ci-meat { background-image: url('../assets/town/swords/res_meat.png'); image-rendering: pixelated; }
.ci-ore { background-image: url('../assets/town/swords/res_gold.png'); image-rendering: pixelated; }
/* 資源說明小卡（點資源圖示、頂欄資源格） */
.res-tip { position: fixed; z-index: 400; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 10px; background: #1d1828f2; border: 1px solid #6b5a8e; box-shadow: 0 6px 18px #000a; color: #f2ead8; font-size: 12px; line-height: 1.45; animation: rtIn .12s ease-out; }
.res-tip .rt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.res-tip .rt-head .ci { width: 22px; height: 22px; }
.res-tip .rt-head b { font-size: 14px; color: #ffe08a; }
.res-tip .rt-head small { margin-left: auto; opacity: 0.8; }
.res-tip p { margin: 2px 0; }
.res-tip em { font-style: normal; color: #b8a8d8; margin-right: 6px; }
@keyframes rtIn { from { opacity: 0; transform: translateY(-3px); } }
.topbar [data-res]:not([data-open]) { cursor: help; }
/* 升星卡：碎片進度（金色＝已有的同名碎片、紫色＝英魂能補上的）＋英魂換碎片的小字與小按鈕 */
.sc-bar .lvbar.two { display: flex; }
.lvbar i.soul { background: repeating-linear-gradient(135deg, #b48cff 0 4px, #8a5ae0 4px 8px); }
.soul-t { margin-left: 2px; font-style: normal; color: #c9a8ff; }
.sc-sub { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sc-sub .btn { margin: 0; }
.star-card > small, .sc-sub small { font-size: 11px; }
/* 奧義卡（英雄詳情，升星卡下方）：可以升級時發亮 */
.ougi-card { border: 1px solid #7a5cc0; }
.ougi-card.ready { box-shadow: 0 0 0 2px #c79bff, 0 0 18px #9a5cff88; }
.ougi-title { display: flex; align-items: center; gap: 6px; font-size: 1.05em; }
.ougi-steps, .star-skills ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ougi-steps li, .star-skills li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #221c2e; border: 1px solid #3a2e52; font-size: 13px; }
.ougi-steps li b, .star-skills li b { text-align: center; font-weight: 700; }
.ougi-steps li em, .star-skills li em { font-style: normal; font-size: 11px; color: #9a8ab8; white-space: nowrap; }
.ougi-steps li.on, .star-skills li.on { background: linear-gradient(90deg, #4a2e7a, #2a2040); border-color: #c79bff; color: #fff; }
.ougi-steps li.on b { color: #e0c0ff; }
.ougi-steps li.next { border-color: #ffd23a; box-shadow: inset 0 0 0 1px #ffd23a55; }
.ougi-steps li.lock, .star-skills li:not(.on) { opacity: 0.6; }
/* 星級技能收合卡：標題列＝星級小格＋下一個解鎖，點開才列全部 */
.star-skills summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; cursor: pointer; list-style: none; }
.star-skills summary::-webkit-details-marker { display: none; }
.star-skills summary::after { content: '▾'; margin-left: auto; color: #9a8ab8; font-size: 12px; }
.star-skills[open] summary::after { content: '▴'; }
.ss-chips { display: flex; gap: 3px; }
.ss-chips i { font-style: normal; font-size: 11px; padding: 1px 5px; border-radius: 6px; background: #221c2e; color: #7a6c94; border: 1px solid #3a2e52; }
.ss-chips i.on { background: #4a2e7a; color: #fff; border-color: #c79bff; }
.ss-next { flex-basis: 100%; display: flex; gap: 6px; font-size: 12px; color: #c8bce0; }
.ss-next b { color: #ffd24a; }
.ougi-card .ougi-steps li em { display: flex; align-items: center; gap: 4px; }
.ougi-card .ougi-steps li .ub-ok { color: #e0c0ff; font-size: 16px; font-weight: 700; }
.ougi-cost { display: inline-flex; align-items: center; gap: 1px; color: #c8b8e0; }
.ougi-cost .ci { width: 16px; height: 16px; }
.skill-card.big .skill-icon { width: 56px; height: 56px; }
.skill-tab .btn.big { width: 100%; margin-top: 8px; }
.hero-tabs { margin: 10px 0 6px; }
.hero-tabs .tabdot::after { top: -2px; right: -2px; width: 10px; height: 10px; box-shadow: 0 0 0 2px #2a1d12; } /* 四個分頁較窄：紅點放到右上角，不壓字 */
.hero-tabs button { overflow: visible; }
/* 英雄詳情：比身上好的裝備格（裝備分頁）、推薦隊伍（資料分頁） */
.eq-slot .eq-better { position: absolute; left: 5px; bottom: 16px; color: #4ae06a; font-style: normal; font-size: 13px; text-shadow: 0 1px 0 #000; }
.hero-teams .ht-row { margin-top: 8px; }
.hero-teams .ht-name { display: flex; flex-direction: column; font-weight: bold; }
.hero-teams .ht-name small { font-weight: normal; }
.hero-teams .ht-mem { display: flex; gap: 4px; margin-top: 4px; }
.hero-teams .ht-m:not(.own) .px-av, .hero-teams .ht-m:not(.own) img { filter: grayscale(1) brightness(.45); }
.hero-teams .ht-m.me { outline: 2px solid #ffd23a; border-radius: 6px; }
.ougi-pips { display: flex; gap: 4px; }
.ougi-pip { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #2a2238; color: #8a7aa8; border: 1px solid #4a3a66; }
.ougi-pip.on { background: linear-gradient(#e0c0ff, #9a5cff); color: #1a1030; border-color: #fff; font-weight: 700; }
.ougi-done { margin: 6px 0 2px 18px; padding: 0; }
.ougi-next { margin: 6px 0 2px; }
.ougi-card > .btn.big { width: 100%; margin: 6px 0; }

/* ---------- 星級分階、升星卡、升級變化彈窗（2026-09-28） ---------- */
.stars.t1 { color: #ffd24a; }
.stars.t2 { color: #c58cff; text-shadow: 0 0 6px #9a5aff; }
.stars.t3 { color: #ff5a6a; text-shadow: 0 0 8px #ff2a4a; }
.tag.star-up { background: linear-gradient(#ffcf4a, #e89a1a); color: #3a2400; top: auto; bottom: 30px; }
.star-card { display: grid; gap: 8px; text-align: center; }
.star-card .sc-stars { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 20px; }
.star-card .sc-stars i, .wc-rows i, .sc-stats i { color: var(--muted); font-style: normal; font-size: 12px; }
.star-card .sc-body { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; justify-content: center; }
.sc-stats, .wc-rows { display: grid; gap: 4px; }
.sc-stats > div, .wc-rows > div { display: grid; grid-template-columns: 3em auto 1em auto; gap: 6px; align-items: center; justify-items: end; }
.sc-stats span, .wc-rows span { justify-self: start; color: var(--muted); font-size: 13px; }
.sc-stats .up, .wc-rows .up { color: #7dff9a; }
.sc-skill { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #0003; border: 1px solid #ffffff14; text-align: left; }
.sc-skill .skic { flex: none; border-radius: 6px; box-shadow: 0 0 0 1px #0008; }
.sc-sk-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sc-sk-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sc-sk-head em { font-style: normal; font-size: 11px; color: #d8b8ff; white-space: nowrap; }
.sc-sk-row { display: grid; grid-template-columns: 3em 1fr auto 1fr; gap: 6px; font-size: 13px; align-items: center; }
.sc-sk-row span { color: var(--muted); }
.sc-sk-row i { font-style: normal; text-align: right; }
.sc-sk-row i.arr { color: var(--muted); font-size: 10px; }
.sc-sk-row b { color: #7dff9a; }
.sc-bar { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.sc-bar .lvbar { height: 12px; }
.whatchanged { text-align: center; display: grid; gap: 10px; }
/* 任務送的新夥伴：光芒＋英雄卡彈出，再淡入說明 */
.gift-reveal { text-align: center; display: grid; gap: 10px; justify-items: center; }
.gift-reveal .gr-kicker { color: #ffd24a; letter-spacing: 2px; animation: grFade .4s ease-out both; }
.gift-reveal .gr-card { position: relative; isolation: isolate; width: 120px; height: 120px; display: grid; place-items: center; border-radius: 16px; border: 3px solid var(--rc); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, #2a1f17), #1a130d); box-shadow: 0 0 24px var(--rc); animation: grPop .55s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.gift-reveal .gr-rays { position: absolute; inset: -40px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 10deg, transparent 10deg 30deg); animation: grSpin 6s linear infinite, grFade .6s ease-out both; pointer-events: none; }
.gift-reveal h2, .gift-reveal p, .gift-reveal .center { animation: grFade .4s ease-out .6s both; }
@keyframes grPop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grSpin { to { transform: rotate(360deg); } }
@keyframes grFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.whatchanged .stars { font-size: 24px; }
.wc-rows { justify-content: center; font-size: 16px; }
.wc-new { animation: wcPop .5s ease-out; }
.wc-new small { display: block; color: #d8b8ff; }
@keyframes wcPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 圖鑑：陣容技牆、怪物圖鑑 ---------- */
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cb-cell { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: #0004; border: 2px solid #ffffff14; text-align: center; }
.cb-cell small { font-size: 11px; color: var(--muted); }
.cb-cell .cb-pass { color: #e8e0c8; }
.cb-cell em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 8px; background: #ffffff18; }
.cb-cell.on { border-color: var(--cc); box-shadow: 0 0 14px color-mix(in srgb, var(--cc) 60%, transparent); }
.cb-cell.on em { background: var(--cc); color: #1a1208; }
.cb-cell.lit { border-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.cb-cell.can em { background: #3a6a3a; }
.cb-cell.lock { filter: grayscale(1) brightness(.6); }
.bs-region.lock { opacity: .55; }
.bs-mons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bs-mon { display: grid; justify-items: center; width: 70px; }
.bs-mon canvas { width: 56px; height: 56px; image-rendering: pixelated; background: #0003; border-radius: 10px; }
.bs-mon.lock canvas { filter: brightness(0); opacity: .5; }
.bs-mon small { font-size: 11px; text-align: center; }

/* ---------- 下一步目標、一鍵收成、失敗分析（ui-growth.js） ---------- */
#goalbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(128px + var(--safe-t)); display: flex; justify-content: center; max-width: min(420px, calc(100vw - 170px)); pointer-events: auto; }
@media (max-width: 640px) { #goalbar { top: calc(166px + var(--safe-t)); max-width: calc(100vw - 150px); } }
@media (max-height: 560px) and (orientation: landscape) { #goalbar { top: calc(118px + var(--safe-t)); } }
#goalbar[hidden] { display: none; }
body.town #goalbar { display: none; }
.hv-btn { position: relative; flex: none; }
.hv-btn span img { image-rendering: pixelated; }
.hv-btn:not(.ready) span { filter: grayscale(.6) brightness(.8) drop-shadow(0 3px 2px #0008); }
.hv-btn.ready span { animation: wiggle 2.4s infinite; }
.hv-btn .hv-n { position: absolute; right: 0; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e8453b; border: 2px solid #fff; color: #fff; font: 700 11px/14px var(--num); font-style: normal; box-shadow: 0 1px 2px #0008; }
.hv-btn .hv-n:empty { display: none; }
/* 目標列：和左下任務條同一種木框底，左邊技能圖示 */
.goal-chip { display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 3px 14px 3px 4px; border-radius: 999px; border: 0; background: linear-gradient(180deg, rgba(18, 14, 10, 0.82), rgba(34, 27, 20, 0.82)); box-shadow: inset 0 0 0 1.5px rgba(232, 197, 121, 0.42), 0 3px 8px rgba(0, 0, 0, 0.35); color: #fff4dc; font-size: 13px; text-align: left; }
.goal-chip .gc-ico { border-radius: 999px !important; }
.goal-chip.hot { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 12px rgba(255, 210, 74, 0.5); }
.goal-chip .gc-ico { flex: none; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #0008; }
.goal-chip .gc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-chip.pop { animation: wcPop .35s ease-out; }
.harvest { text-align: center; display: grid; gap: 8px; }
.hv-chest { width: 72px; height: 72px; margin: 0 auto; background: url('../assets/ui/ut/chest.png') center/contain no-repeat; image-rendering: pixelated; animation: hvOpen .6s ease-out; }
@keyframes hvOpen { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1); } }
.hv-list { display: grid; gap: 4px; }
.hv-list > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 4px 10px; border-radius: 8px; background: #0003; opacity: 0; animation: hvRow .35s ease-out var(--d) forwards; }
.hv-list b { color: #ffe08a; }
@keyframes hvRow { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.gp-list { display: grid; gap: 3px; padding: 8px; border-radius: 10px; background: #2a4a2a55; text-align: left; }
.gp-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.gp-list em { color: #7dff9a; font-style: normal; }
.lost { display: grid; gap: 10px; text-align: center; }
.lost-why { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: #5a1a1a66; }
.lost-why > b { font-size: 18px; color: #ff9a8a; }
.lost-tips { display: grid; gap: 6px; }
/* 第一隻卡關首領：差一點！去培養再回來（ui-growth.js） */
.lost-gate { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: linear-gradient(180deg, #4a3a1466, #2a1f0c66); border: 1px solid #ffd24a55; }
.lost-gate > b { font-size: 22px; color: #ffe08a; letter-spacing: 2px; }
.lost-gate > span { font-size: 15px; color: #fff; }
.lost-gate > small { color: #bfae8c; }
.lost-tips .btn.pulse { animation: btGatePulse 1.1s ease-in-out infinite; }
@keyframes btGatePulse { 0%, 100% { box-shadow: 0 0 0 0 #ffd24a00; transform: scale(1); } 50% { box-shadow: 0 0 14px 4px #ffd24a99; transform: scale(1.03); } }
/* 破關演出：戰力 a → b，擊破！（大版：卡關首領；小版：前期山丘門檻） */
.bt-break { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; animation: btIn .25s ease-out; }
.bt-break.out { opacity: 0; transition: opacity .45s; }
.bt-break .bt-rays { position: absolute; left: 50%; top: 42%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(#ffd24a33 0 8deg, transparent 8deg 22deg); animation: btSpin 6s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); }
.bt-break .bt-card { position: relative; margin-top: -12vh; display: grid; justify-items: center; gap: 2px; padding: 12px 22px; border-radius: 16px; background: radial-gradient(ellipse at center, #000c 30%, #0000 75%); text-align: center; }
.bt-break .bt-st { color: #ffe08a; font-size: 13px; letter-spacing: 2px; }
.bt-break .bt-pw { display: flex; align-items: center; gap: 8px; font-size: 18px; color: #ddd; }
.bt-break .bt-pw .ci { width: 22px; height: 22px; }
.bt-break .bt-pw .a { color: #bbb; text-decoration: line-through #ff9a8a99; font-size: 16px; }
.bt-break .bt-pw em { font-style: normal; color: #ffd24a; }
.bt-break .bt-pw .b { color: #7dff9a; font-size: 26px; text-shadow: 0 0 10px #7dff9a88; }
.bt-break .bt-pw .b.done { animation: btPop .35s ease-out; }
.bt-break .bt-ko { font-size: 46px; font-weight: 900; color: #ffe27a; letter-spacing: 4px; text-shadow: 2px 0 0 #5a1606, -2px 0 0 #5a1606, 0 2px 0 #5a1606, 0 -2px 0 #5a1606, 0 5px 0 #8a2a0a, 0 0 24px #ffb000; animation: btKo .5s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.bt-break .bt-up { color: #7dff9a; font-size: 14px; }
.bt-break.small .bt-rays { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
.bt-break.small .bt-ko { font-size: 32px; }
.bt-break.small .bt-pw .b { font-size: 20px; }
@keyframes btIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes btSpin { to { transform: rotate(360deg); } }
@keyframes btKo { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes btPop { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .bt-break .bt-rays, .lost-tips .btn.pulse { animation: none; } }

/* ---------- 競技場 5 對 5：頂欄頭像與戰力（render/war.js 小隊模式） ---------- */
#warView .wv-pow { display: block; color: #ffe08a; font-size: 13px; }
#warView .wv-faces { display: flex; gap: 3px; margin: 3px 0; }
#warView .wv-side.b .wv-faces { justify-content: flex-end; }
#warView .wv-faces span { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: #0006; border: 2px solid #ffffff30; display: grid; place-items: center; transition: filter .3s; }
#warView .wv-side.a .wv-faces span { border-color: #5a9ae8aa; }
#warView .wv-side.b .wv-faces span { border-color: #e85a5aaa; }
#warView .wv-faces span.dead { filter: grayscale(1) brightness(.45); }
#warView .wv-vs { display: none; font: 900 22px var(--font); color: #ffd24a; text-shadow: 0 2px 0 #7a3000, 0 0 10px #ff8a00; }
#warView.small .wv-vs { display: block; }
@media (max-width: 640px) { #warView .wv-faces span { width: 26px; height: 26px; } }

/* ---------- 頂欄數字過長時縮小（ui.js setNum） ---------- */
.res b { white-space: nowrap; }
.res b.long { font-size: 13px; letter-spacing: -.5px; }
.res b.xlong { font-size: 11px; }
@media (max-width: 640px) { .res b.long { font-size: 11px; } .res b.xlong { font-size: 10px; } }
#stageName .st-tag { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 11px; background: #c0461a; color: #fff; vertical-align: 1px; }
.lead-head > b { white-space: nowrap; }

/* ---------- 地圖總覽（ui-warbands.js；隊伍清單的樣式在 style.css 的 .team-card） ---------- */
.map-row { display: flex; align-items: center; gap: 10px; }
.map-row .grow { display: grid; gap: 1px; min-width: 0; }
.map-row .skic { flex: none; border-radius: 8px; }
.map-row.locked { opacity: .55; }
.map-chip { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 8px; background: #0004; }
.map-chip b { display: block; font-size: 12px; } .map-chip small { font-size: 11px; color: var(--muted); }
.map-list { display: grid; gap: 6px; }
.map-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 2px solid #564a3c; background: linear-gradient(#3b322a, #2a231c); color: var(--text); text-align: left; }
.map-opt.on { border-color: #ffd24a; } .map-opt small { display: block; color: var(--muted); font-size: 12px; } .map-opt em { margin-left: auto; font-style: normal; color: #ffd24a; font-size: 12px; }
.map-opt:disabled { opacity: .5; }

/* ---------- 圖鑑：推薦隊伍 ---------- */
.tm-card { display: grid; gap: 6px; }
.tm-card.tier-legend { border-color: #ff8f1f66; } .tm-card.tier-myth { border-color: #ff5ad066; }
.tm-card.full { box-shadow: 0 0 12px #ffd24a55; }
.tm-tier { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 6px; background: #ffffff18; margin-left: 4px; }
.tier-legend .tm-tier { background: #ff8f1f; color: #2a1400; } .tier-myth .tm-tier { background: #ff5ad0; color: #2a0020; }
.tm-members { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-m { display: grid; justify-items: center; width: 58px; }
.tm-m small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58px; }
.tm-m:not(.own) .px-av, .tm-m:not(.own) img { filter: grayscale(1) brightness(.45); }
.tm-combos { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-combos span { font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--cc, #ffffff30); color: var(--cc, #e8e0c8); }
.tm-combos .bond { border-color: #ffd24a; color: #ffd24a; }
.fp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.fp-pick { display: grid; justify-items: center; gap: 2px; padding: 8px; border-radius: 12px; border: 2px solid #564a3c; background: linear-gradient(#3b322a, #2a231c); color: var(--text); }
.fp-pick.on { border-color: #ff8f1f; box-shadow: 0 0 12px #ff8f1f88; }
.fp-pick small { font-size: 11px; }
.gb-h .gb-team { display: block; font-size: 10px; color: #ffe08a; text-shadow: 0 1px 0 #000; font-style: normal; }

/* ---------- 裝備職業傾向 ---------- */
.aff-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-style: normal; color: #1a1208; background: var(--ac); vertical-align: 2px; }
.eq-slot.aff-on { box-shadow: 0 0 0 2px var(--ac), 0 0 10px var(--ac); }
.aff-set { margin: -2px 0 8px; text-align: center; font-size: 12px; color: var(--ac); text-shadow: 0 0 6px var(--ac); }

/* ---------- 頂欄資源與關卡條：乾淨的膠囊（取代石板框，2026-09-28） ---------- */
.res > div {
  border: 0 !important; border-image: none !important; border-radius: 999px;
  height: 28px; padding: 0 12px 0 30px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.82), rgba(34, 27, 20, 0.82));
  box-shadow: inset 0 0 0 1.5px rgba(232, 197, 121, 0.42), inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.res > div.jade { padding-right: 30px; }
.res b { color: #fff4dc; letter-spacing: .5px; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6); }
.res .ic { left: -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.res > div.jade .plus { right: 2px; border-radius: 999px; }
.stagebar {
  border: 0 !important; border-image: none !important; border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.82), rgba(34, 27, 20, 0.82)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(232, 197, 121, 0.42), inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35);
  padding: 5px 12px !important;
}
@media (max-width: 640px) {
  .res > div { height: 24px; padding: 0 8px 0 22px; }
  .res > div.jade { padding-right: 30px; }
  .res .ic { left: -4px; }
  .stagebar { padding: 3px 8px !important; }
}
.tag.main { background: #3a5a8a; }
.tag.band { background: #6a4a2a; }
.tag.band.lead, .tag.lead { background: #c08a1a; color: #1a1208; }
.idle-card { text-align: center; } .idle-card ul { text-align: left; display: inline-block; }
.tp-row { display: flex; align-items: center; gap: 10px; } .tp-row .grow { display: grid; } .tp-row.ok { border-color: #ffd24a; box-shadow: 0 0 10px #ffd24a55; }
.tp-row.next { border-color: #ffd24a66; } .tp-row.done { opacity: .55; } .tp-row.later { opacity: .85; }
.tp-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tp-pick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--rc); background: #0004; overflow: hidden; }

/* ---------- 競技場回合制（render/arena-turn.js） ---------- */
#turnView { position: fixed; inset: 0; z-index: 80; background: #120e18; }
#turnView canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#turnView .tv-top { position: absolute; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
#turnView .tv-side { flex: 1; display: grid; gap: 4px; color: #fff; font-size: 14px; }
#turnView .tv-side.b { text-align: right; }
#turnView .tv-side i { display: block; height: 10px; border-radius: 6px; background: #0008; overflow: hidden; box-shadow: inset 0 0 0 1px #ffffff30; }
#turnView .tv-side em { display: block; height: 100%; width: 100%; transition: width .25s; background: linear-gradient(#6fe39a, #2fa35a); }
#turnView .tv-side.b em { background: linear-gradient(#ff9a8a, #d0453a); margin-left: auto; }
#turnView .tv-mid { display: grid; justify-items: center; color: #fff; }
#turnView .tv-vs { font: 900 24px 'Lilita One', var(--font); color: #ffd24a; text-shadow: 0 2px 0 #7a3000, 0 0 10px #ff8a00; }
#turnView .tv-round { font-size: 12px; color: #e8d8b8; }
#turnView .tv-ctrl { position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
#turnView .tv-ctrl button { padding: 6px 12px; border-radius: 999px; border: 0; background: #0009; color: #fff; box-shadow: inset 0 0 0 1.5px #ffffff40; }
#turnView .tv-ctrl button.on { box-shadow: inset 0 0 0 2px #ffd24a; color: #ffd24a; }
#turnView .tv-end { position: absolute; inset: 0; display: grid; place-items: center; background: #0008; }

/* 國戰擊殺播報：左側，最新在上，4.5 秒後消失 */
#warView .wv-feed { position: absolute; left: 10px; top: calc(100px + var(--safe-t)); display: grid; gap: 4px; pointer-events: none; font-size: 12px; }
#warView .wv-feed div { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 6px; background: linear-gradient(90deg, #000c, #0000); animation: feedIn .25s ease-out; }
#warView .wv-feed div.s0 { border-left: 3px solid #4aa3ff; }
#warView .wv-feed div.s1 { border-left: 3px solid #ff5a4a; }
#warView .wv-feed b, #warView .wv-feed span { color: #ddd; font-weight: 700; }
#warView .wv-feed .q3 { color: #c77dff; } #warView .wv-feed .q4 { color: #ffb03a; } #warView .wv-feed .q5 { color: #ff6ad5; }
#warView .wv-feed i { font-style: normal; color: #ff8a4a; font-weight: 900; }
@keyframes feedIn { from { transform: translateX(-16px); opacity: 0; } }
@media (max-aspect-ratio: 10/11) { #warView .wv-feed { top: calc(96px + var(--safe-t)); font-size: 11px; } }

/* 全畫面橫幅大字（寶箱怪、會長技能、系統開放…）：原本透明漸層字＋細描邊＋光暈，疊在戰場上會糊。
   改成實心亮金字＋一圈粗深色描邊（八方向陰影，iOS 也穩定），背後底條加深 */
.banner::before { background: linear-gradient(90deg, transparent, #000d 18%, #000d 82%, transparent); }
.banner b {
  font-weight: 900; color: #ffe066; background: none; -webkit-text-fill-color: #ffe066; -webkit-text-stroke: 0; filter: none;
  text-shadow: 2px 0 0 #2a1200, -2px 0 0 #2a1200, 0 2px 0 #2a1200, 0 -2px 0 #2a1200, 2px 2px 0 #2a1200, -2px 2px 0 #2a1200, 2px -2px 0 #2a1200, -2px -2px 0 #2a1200, 0 4px 0 #2a1200, 0 5px 8px #000c;
}
.banner span { font-size: 15px; font-weight: 700; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }

/* 換陣容 */
.lead-btns { display: inline-flex; gap: 6px; margin-left: auto; }
.lu-heads { display: flex; gap: 6px; margin: 6px 0 4px; flex-wrap: wrap; }
.lu-heads > div { display: grid; justify-items: center; gap: 2px; width: 52px; }
.lu-heads small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px; }

/* 戰力提升：沿用最早的版面（深色發光底板、放射光、金色漸層大數字），改成像素風：直角、兩層硬邊、像素字標題；數字用拉霸滾輪 */
#powpop { border-radius: 0; border: 0; padding: 10px 30px 12px;
  box-shadow: inset 0 0 0 2px #ffd24a, inset 0 0 0 4px #7a4a10, inset 0 0 22px #ffb03a55; }
#powpop .pp-lbl { font-family: var(--pixel); font-size: 14px; letter-spacing: 3px; }
#powpop .pp-num { display: inline-flex; align-items: flex-end; animation: none; background: none; color: #ffd24a; }
/* 金色漸層字要套在每一個字上：套在外層時，裡面會移動的滾輪不會被畫出來 */
#powpop .rl-in i, #powpop .rl-s { background: linear-gradient(#fff6c8, #ffd24a 45%, #ff9a1a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
#powpop .rl { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
#powpop .rl-in { display: flex; flex-direction: column; transform: translateY(0); }
#powpop .rl-in.go { transform: translateY(calc(var(--n) * -1.1em)); transition: transform var(--d) cubic-bezier(.15, .75, .3, 1.12); }
#powpop .rl-in i, #powpop .rl-s { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; text-align: center; }
#powpop .rl-s { display: inline-block; }
#powpop.mega { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #ff9a3a, inset 0 0 30px #ffd24a88; }

/* 強化石圖示：原本是鐵砧（像鐵匠鋪），改成琥珀色像素晶石（內嵌 SVG，不新增素材檔）；和藍色鑽石區分 */
.ci-iron { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='0' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='11' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='12' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='13' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='14' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='14' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='15' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='8' y='15' width='1' height='1' fill='%233a1a06'/%3E%3C/svg%3E") !important; image-rendering: pixelated; }
[data-res="iron"] .ic img { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='0' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23fff4c8'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='10' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%23ffc45a'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='11' y='11' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='12' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='13' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='6' y='14' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%23f08a24'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%23b04a12'/%3E%3Crect x='9' y='14' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='7' y='15' width='1' height='1' fill='%233a1a06'/%3E%3Crect x='8' y='15' width='1' height='1' fill='%233a1a06'/%3E%3C/svg%3E"); image-rendering: pixelated; } /* 頂部資源列（素材清單指定的圖）也換成晶石 */

/* 主城「自動建造」還沒開：金色呼吸光提醒（新手引導第 5 步、主線任務都指向它） */
#townAutoBtn:not(.on) { animation: autoHint 1.4s ease-in-out infinite; }
@keyframes autoHint { 50% { transform: scale(1.06); } }
#townAutoBtn:not(.on) { box-shadow: 0 0 0 3px #ffd24a99, 0 0 12px #ffd24a; }

/* 目標提示（收成、可升星…）：縮小並靠右上，不擋戰鬥中央 */
#goalbar { left: auto; right: 8px; transform: none; justify-content: flex-end; max-width: min(300px, 55vw); }
.goal-chip { height: 28px; gap: 6px; padding: 2px 10px 2px 3px; font-size: 12px; opacity: .92; }
.goal-chip .gc-ico { width: 22px !important; height: 22px !important; }

/* 開場讀取畫面還沒收起來時（取名字、登入），視窗要疊在它上面 */
body.booting .modal { z-index: 110; }

/* 每日任務的活躍度寶箱：外框靠 transform 置中，動畫不能動外框（會把置中蓋掉、整個跳出畫面），改成裡面的圖原地縮放閃光 */
.act-chest.ready { animation: none; }
.act-chest.ready img { animation: chestPulse 0.9s ease-in-out infinite; }
@keyframes chestPulse { 50% { transform: scale(1.14); } }

/* 世界爭奪：出征結果卡（地圖下方） */
#worldMap .wm-result { position: absolute; left: 50%; bottom: calc(40px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #120e0bee; border: 1px solid #6a5a44; color: #fff; font-size: 14px; z-index: 3; }
#worldMap .wm-result[hidden] { display: none; }
#worldMap .wm-result b, #worldMap .wm-result span, #worldMap .wm-result .btn { white-space: nowrap; }

/* 卡池英雄：名字樣式（.gb-h i：最寬 72px、超出裁掉）也會套到頭像（同樣是 <i>），大頭像被切一半；頭像不套 */
.gb-h i.px-av { max-width: none; margin-top: 0; overflow: visible; }

/* 鑽石旁的＋縮小，不擋餘額數字 */
.res > div.jade { padding-right: 30px; }
.res > div.jade .plus { width: 20px; height: 22px; right: 3px; }
.res > div.jade .plus::after { font-size: 15px; }
@media (max-width: 640px) { .res > div.jade .plus { width: 18px; height: 20px; } .res > div.jade { padding-right: 28px; } }

/* 商店插圖（Codex 產，256×256 透明 WebP）：不裁切、像素放大不模糊 */
.shop-art { display: block; margin: 0 auto 4px; width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 8px #0008); }
.idle-card .shop-art { width: 96px; height: 96px; }
.fp-art { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fp-art .shop-art.big { width: 120px; height: 120px; margin: 0; }

/* 領主形象：頭像在框內約 76%，框蓋在最上層 */
.lord-face { position: relative; display: inline-block; flex: none; }
/* 頭像、框是 256px 的高解析圖、縮小顯示：用平滑縮小（不能用 pixelated——縮小時最近鄰取樣會跳格，細線斷掉、邊緣鋸齒，看起來像低解析度；
   左上角的 .avatar 有 pixelated 而且會繼承，所以這裡要明確寫 auto） */
.lord-face img { position: absolute; image-rendering: auto; }
.lord-face .lf-a { inset: 12%; width: 76%; height: 76%; border-radius: 4px; }
.lord-face .lf-f { inset: 0; width: 100%; height: 100%; }
#seal.lord { inset: 2px; background: none; box-shadow: none; border-radius: 0; }
#seal.lord .lord-face { width: 100% !important; height: 100% !important; }
.lord-card .row { align-items: center; }
.lord-card small { display: block; }
.lord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.lord-opt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px solid transparent; background: #0003; color: #fff; }
.lord-opt.on { border-color: #ffd24a; background: #ffd24a22; }
.lord-opt.locked { opacity: .45; }
.lord-opt small { font-size: 11px; white-space: nowrap; }
.lord-opt em { font-style: normal; font-size: 10px; color: #ffb03a; }
.toplist li .lord-face { margin-right: 6px; vertical-align: middle; }

/* 換地域過場 */
#regionIntro { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; gap: 22px; background: radial-gradient(ellipse at center, #0006, #0000 70%); animation: riIn .35s ease-out; cursor: pointer; } /* 只在文字後面淡淡一圈，不把整個戰場蓋黑 */
#regionIntro.out { opacity: 0; transition: opacity .5s; }
@keyframes riIn { from { opacity: 0; } }
.ri-title { display: grid; justify-items: center; gap: 10px; animation: riTitle .5s .15s both cubic-bezier(.2, 1.5, .4, 1); }
@keyframes riTitle { from { opacity: 0; transform: scale(.6); } }
.ri-title small { color: #e8cf94; font-size: 14px; letter-spacing: 2px; }
/* 緞帶標題（和遊戲其他橫幅同一套 ribbon 素材） */
.ri-title .ri-ribbon { display: inline-block; padding: 6px 34px 18px; border-style: solid; border-width: 0 40px; border-image: url('../assets/ui/ts/ribbon2.png') 0 97 0 98 fill / 0 40px stretch; image-rendering: pixelated; font: 400 38px var(--pixel); letter-spacing: 8px; text-indent: 8px; white-space: nowrap; color: #fff6c8; text-shadow: 0 3px 0 #5a3a00; filter: drop-shadow(0 6px 0 #0008); }
.ri-title span { color: #fff; font-size: 14px; text-shadow: 0 1px 2px #000; }
.ri-title span i { font-style: normal; font-weight: 700; }
/* 征途地圖 */
.jr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jr-wrap { position: relative; height: min(64vh, 620px); overflow-y: auto; border-radius: 12px; border: 3px solid #2a1a0a; -webkit-overflow-scrolling: touch; }
.jr-wrap canvas { display: block; width: 100%; cursor: pointer; }
.jr-party { position: absolute; width: 36px; height: 36px; border-radius: 6px; border: 2px solid #ffd24a; box-shadow: 0 0 12px #ffd24a; image-rendering: pixelated; animation: jrBob 1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes jrBob { to { transform: translateY(-5px); } }

/* 快速抽卡結果條：出現在抽卡按鈕附近，彈一下再淡出 */
.gx-fast { position: fixed; left: 50%; bottom: calc(26% + var(--safe-b)); z-index: 65; display: grid; justify-items: center; gap: 2px; padding: 10px 22px; border-radius: 14px; background: #120e0bf2; border: 2px solid #ffd24a; box-shadow: 0 0 20px #ffd24a66, 0 6px 16px #000a; color: #fff; font-size: 15px; white-space: nowrap; pointer-events: none;
  animation: gxFast 1.8s ease-out forwards; }
.gx-fast small { color: #ffe08a; font-size: 12px; letter-spacing: 2px; }
.gx-fast span { display: flex; gap: 6px; align-items: center; }
.gx-fast i { font-style: normal; color: #8a7a60; }
@keyframes gxFast { 0% { transform: translate(-50%, 16px) scale(.7); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1.08); opacity: 1; } 22% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -12px); opacity: 0; } }
@media (min-width: 900px) { .gx-fast { left: calc(100% - 244px); bottom: 22%; } } /* 電腦版招募面板在右側（寬 460、離右邊 14）：對準面板中心 */

/* 左側按鈕的文字：固定在按鈕圖片之上（原本被自己和下一顆按鈕的木頭圓框蓋住），加一條淡深色底 */
.medal em { position: relative; z-index: 3; padding: 0 4px; border-radius: 6px; background: #0007; }

/* 切回遊戲的結算遮罩：蓋住場景跳換，穩定後淡出 */
#returnVeil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #0d0b10e6; pointer-events: none; transition: opacity .35s; }
#returnVeil.out { opacity: 0; }
#returnVeil span { color: #e8cf94; font: 400 16px var(--pixel); letter-spacing: 3px; animation: rvPulse 1s ease-in-out infinite alternate; }
@keyframes rvPulse { from { opacity: .5; } }

/* 無盡之塔 */
.rg-hero { display: grid; gap: 8px; justify-items: center; text-align: center; }
.rg-hero > b { font: 400 22px var(--pixel); color: #ffe08a; letter-spacing: 2px; }
.rg-stats { display: flex; gap: 18px; }
.rg-stats div { display: grid; justify-items: center; }
.rg-stats b { font: 400 22px var(--num); color: #fff; }
/* 本週主題與塔之恩賜順序（規則 63）：已得到的恩賜亮起來 */
.rg-theme p { margin: 6px 0; }
.rg-boons { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.rg-boons li { display: grid; grid-template-columns: 52px 72px 1fr; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: #0003; font-size: 12px; opacity: .75; }
.rg-boons li.on { background: #7fe0ff22; box-shadow: inset 0 0 0 1px #7fe0ff88; opacity: 1; }
.rg-boons li b { color: #7fe0ff; }
.rg-boons li small { color: #c9b8e8; }
.rg-week .toplist { margin: 6px 0; }
/* 塔之恩賜三選一（規則 71）：戰場上半透明遮罩＋三張卡，推薦那張金框 */
.rg-pick { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #000c; animation: rgFade .2s both; }
.rg-pick-in { display: grid; gap: 8px; justify-items: center; width: min(560px, 100%); }
.rg-pick-t { font: 400 26px var(--pixel); color: #7fe0ff; letter-spacing: 3px; text-shadow: 0 2px 0 #0008; }
.rg-pick-in > small { color: #e9dcc2; font-size: 14px; }
.rg-pick-cd { display: inline-block; min-width: 28px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #ffd24a; color: #2a1b12; font: 400 15px var(--num); font-style: normal; }
.rg-pick-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.rg-pick .rg-card { position: relative; align-content: start; min-height: 150px; font: inherit; cursor: pointer; }
.rg-pick .rg-card b { font: 400 17px var(--pixel); color: #7fe0ff; }
.rg-pick .rg-card span { font-size: 12px; line-height: 1.45; color: #f0e6d0; }
.rg-pick .rg-card small { font-size: 11px; color: #c9b8e8; }
.rg-pick .rg-card.rec { border-color: #ffd24a; box-shadow: 0 0 0 2px #ffd24a66, 0 0 18px #ffd24a55; }
.rg-rec { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 10px; border-radius: 999px; background: #ffd24a; color: #2a1b12; font: 400 12px var(--pixel); font-style: normal; white-space: nowrap; }
@keyframes rgFade { from { opacity: 0; } }
.rg-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.rg-card { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 2px solid #b08a4a; background: linear-gradient(#3a2a1a, #221810); color: #fff; animation: rgIn .35s both cubic-bezier(.2, 1.5, .4, 1); }
.rg-card:nth-child(2) { animation-delay: .08s; } .rg-card:nth-child(3) { animation-delay: .16s; }
.rg-card:hover, .rg-card:active { border-color: #ffd24a; box-shadow: 0 0 14px #ffd24a88; }
.rg-card b { font: 400 16px var(--pixel); color: #ffe08a; }
.rg-card small { font-size: 11px; line-height: 1.4; color: #e8dcc4; }
@keyframes rgIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.rg-bless { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rg-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 999px; background: #0005; border: 1px solid #b08a4a88; font-size: 12px; }
.rg-card.rare { border-color: #ff8a3a; background: linear-gradient(#5a2a14, #2a140a); box-shadow: 0 0 16px #ff8a3a66; }
.rg-card.rare b { color: #ffb070; }
.rg-flash { text-align: center; font: 400 34px var(--pixel); color: #fff; letter-spacing: 4px; text-shadow: 0 3px 0 #000; animation: rgFlash .6s both cubic-bezier(.2, 1.6, .4, 1); }
.rg-flash.ok { color: #ffe066; }
@keyframes rgFlash { from { opacity: 0; transform: scale(1.8); } }

/* 網頁版更新中提示（伺服器已換新版、網站還在部署） */
#updBar { position: fixed; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); z-index: 120; padding: 6px 14px; border-radius: 999px; background: #120e0bee; border: 1px solid #ffd24a; color: #ffe08a; font-size: 13px; pointer-events: none; }

/* 招募結果：圖還沒載好前先不翻牌（載好才一張一張出來） */
/* 等圖期間：先不套動畫（拿掉 wait 時動畫才從頭開始算延遲），卡片以幾乎看不見的透明度畫出來，逼瀏覽器先解碼頭像 */
.gx.wait .gx-item, .gx.wait .gx-item::before, .gx.wait .gx-burst { animation: none !important; }
.gx.wait .gx-item { opacity: .01 !important; transform: none !important; }
/* 效能差的手機：只留翻牌動畫 */
.gx.lite .gx-rays { animation: none !important; opacity: .12; }
.gx.lite .gx-stars, .gx.lite .gx-burst { display: none; }
.gx.lite .gx-tile, .gx.lite .gx-item.r4 .gx-tile, .gx.lite .gx-item.r5 .gx-tile { box-shadow: 0 3px 0 #0007; }
.gx.lite .gx-title { text-shadow: 0 3px 0 #5b2a86; animation: none; }
.rg-skip small { display: block; }
/* 首頁兩顆大按鈕（練習、快速開始）在手機上並排會把卡片撐出畫面：可換行、按鈕可縮、文字可折行 */
.rg-hero > .row { flex-wrap: wrap; width: 100%; }
.rg-hero .btn.big { flex: 1 1 140px; min-width: 0; max-width: 100%; white-space: normal; }
/* 月卡、掛機特權卡：圖＋名稱價格一列、重點數字方格、左對齊清單、滿寬按鈕 */
.sub-card { padding: 14px; }
.sub-head { display: flex; align-items: center; gap: 12px; }
.sub-head .shop-art { width: 76px; height: 76px; margin: 0; flex: none; }
.sub-head h3 { margin: 0 0 6px; font-size: 20px; }
.sub-price { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #0004; color: var(--gold, #ffd76a); font-size: 13px; white-space: nowrap; }
.sub-perks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 6px; } /* 每天可領放三種資源，手機 390 寬不能撐破 */
.sub-perks > div > b { flex-wrap: wrap; column-gap: 8px; }
.sub-perks b > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.sub-perks > div { background: #0003; border: 1px solid #fff1; border-radius: 10px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.sub-perks small { font-size: 12px; opacity: .75; }
.sub-perks b { font-size: 20px; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sub-perks .ci { width: 18px; height: 18px; }
.sub-total { text-align: center; font-size: 13px; opacity: .85; margin: 4px 0 10px; }
.sub-total b { color: var(--gold, #ffd76a); }
.sub-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sub-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px 7px 30px; background: #0003; border-radius: 8px; font-size: 14px; position: relative; }
.sub-list li::before { content: '✓'; position: absolute; left: 10px; color: #7ee07e; font-weight: bold; }
.sub-list li b { color: var(--gold, #ffd76a); white-space: nowrap; }
.sub-left { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; white-space: nowrap; }
.sub-left .lvbar { flex: 1; margin: 0; }
.sub-btns { display: flex; gap: 8px; }
.sub-btns .btn { flex: 1; margin: 0; }
.sub-btns .btn.gold { flex: 1.6; } .sub-btns .btn { white-space: nowrap; }
/* 競技場、排行榜：名次獎牌、大頭像框、醒目的戰力、紅色挑戰鈕、底部固定我的排名 */
.ar-head { text-align: center; padding: 10px 12px 12px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(#4a2a6a, #2a1840); border: 2px solid #8a5ac0; box-shadow: 0 4px 12px #0006; }
.ar-head > b { display: block; font-size: 24px; letter-spacing: 4px; color: #ffd76a; text-shadow: 0 2px 0 #5a2a00, 0 0 10px #ff9f2f88; }
.ar-head > span { display: block; font-size: 12px; opacity: .8; margin: 2px 0 8px; }
.ar-tickets { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #0005; font-size: 13px; }
.ar-tickets b { color: #ffd76a; font-size: 16px; }
.ar-h { margin: 12px 2px 6px; }
.rk-list { display: flex; flex-direction: column; gap: 6px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, #3a3346, #2c2736); border: 1px solid #fff1; }
.rk-row.top1 { background: linear-gradient(90deg, #6a5320, #3a2f1c); border-color: #ffd76a88; }
.rk-row.top2 { background: linear-gradient(90deg, #4f5563, #33363f); border-color: #d8e0ee66; }
.rk-row.top3 { background: linear-gradient(90deg, #5e3b28, #3a2a22); border-color: #e0915a66; }
.rk-row.me { background: linear-gradient(90deg, #3b3aa8, #2a2870); border-color: #9fa8ff; box-shadow: 0 0 0 1px #9fa8ff55, 0 0 12px #6b73ff55; }
.rk-row .lord-face { flex: none; }
.rk-badge { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-weight: bold; font-size: 16px; color: #fff; border-radius: 8px; background: #0005; border: 1px solid #fff2; }
.rk-badge.m1, .rk-badge.m2, .rk-badge.m3 { border-radius: 50%; font-size: 18px; color: #3a2400; border: 2px solid #fff8; box-shadow: 0 2px 0 #0006, inset 0 -3px 0 #0003; }
.rk-badge.m1 { background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc53a 55%, #c07a10); }
.rk-badge.m2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c9d2df 55%, #7d8899); }
.rk-badge.m3 { background: radial-gradient(circle at 35% 30%, #ffd9b0, #e0915a 55%, #9a5226); }
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-row.me .rk-name { color: #ffe98a; }
.rk-sect { font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-val { display: inline-flex; align-items: center; gap: 4px; }
.rk-val .ci { width: 16px; height: 16px; }
.rk-val em { font-style: normal; font-size: 17px; font-weight: bold; color: #ffd76a; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.rk-val em.long { font-size: 14px; } /* 1 億以下的完整戰力（99,999,999）放得進挑戰鈕左邊 */
.rk-row .mini-team { display: flex; gap: 2px; margin-top: 3px; }
.rk-go { flex: none; min-width: 74px; padding: 8px 10px; font-size: 16px; }
.rk-go small { display: block; font-size: 10px; opacity: .85; }
.ar-me { position: sticky; bottom: -1px; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, #2a2870, #1e1c50); border: 2px solid #9fa8ff; box-shadow: 0 -4px 12px #0008; z-index: 2; }
.ar-me .grow { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ar-me .gold-t { font-size: 18px; }
.rk-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.ar-me em { font-style: normal; font-size: 16px; font-weight: bold; color: #ffd76a; }
.ar-me .ci { width: 16px; height: 16px; vertical-align: -3px; }
.ar-head > .ar-note { font-size: 11px; opacity: .6; margin: -4px 0 8px; }
.ar-me small { opacity: .7; margin-right: 2px; }
/* 獎勵遮罩：黑底＋旋轉光芒＋緞帶標題，獎勵依序彈出 */
.rw-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: #000000e0; opacity: 0; transition: opacity .25s; padding: 16px; overflow: hidden; }
.rw-overlay.show { opacity: 1; }
.rw-overlay.out { opacity: 0; }
.rw-rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(from 0deg, #ffd76a26 0 10deg, transparent 10deg 30deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: rwSpin 14s linear infinite; pointer-events: none; }
.rw-overlay.fail .rw-rays { background: repeating-conic-gradient(from 0deg, #8a9ab026 0 10deg, transparent 10deg 30deg); }
.rw-overlay.still .rw-rays { animation: none; }
@keyframes rwSpin { to { transform: rotate(360deg); } }
.rw-box { position: relative; width: min(92vw, 420px); text-align: center; transform: scale(.85); transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.rw-overlay.show .rw-box { transform: scale(1); }
.rw-title span { display: inline-block; padding: 8px 36px; font-size: 26px; letter-spacing: 4px; color: #fff6c8; background: linear-gradient(#d0342c, #9a1e1a); border: 3px solid #ffd76a; border-radius: 6px; box-shadow: 0 4px 0 #5a0e0c, 0 0 24px #ff9f2f88; text-shadow: 0 2px 0 #5a0e0c; }
.rw-overlay.fail .rw-title span { background: linear-gradient(#5a6272, #3a404c); border-color: #b8c2d4; box-shadow: 0 4px 0 #20242c; }
.rw-sub { margin: 10px 0 0; color: #ffe9a8; font-size: 15px; }
.rw-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 10px; }
.rw-item { width: 96px; padding: 10px 4px 8px; border-radius: 12px; background: linear-gradient(#3a3346, #241f2e); border: 2px solid #ffd76a88; box-shadow: 0 0 16px #ffd76a33; display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; transform: translateY(18px) scale(.6); animation: rwPop .45s cubic-bezier(.2,1.6,.4,1) var(--d) forwards; }
.rw-overlay.still .rw-item { animation-duration: .01s; }
@keyframes rwPop { to { opacity: 1; transform: none; } }
.rw-icon { width: 44px; height: 44px; display: grid; place-items: center; }
.rw-icon .ci { width: 40px; height: 40px; }
.rw-icon img { max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.rw-item b { font-size: 20px; color: #ffd76a; text-shadow: 0 2px 0 #000; min-height: 24px; }
.rw-item small { font-size: 12px; opacity: .85; }
.rw-item em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #d0342c; color: #fff; }
.rw-note { font-size: 13px; opacity: .8; margin: 4px 0 12px; }
.rw-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.rw-btns .btn { min-width: 130px; }
.rw-tap { display: block; margin-top: 10px; opacity: .5; font-size: 12px; }
/* 抽卡等待演出：中央紫色傳送門（fx/ut/u_portal.png 24 格）＋往上飄的光點，卡背從傳送門浮出、金框紋章＋反光掃過；結果回來直接翻牌（.cont） */
.gx.pending { background: radial-gradient(ellipse at 50% 45%, #3a1f5e 0%, #1a1233 55%, #0b0818 100%); justify-content: center; }
.gx.pending .gx-rays { opacity: .45; }
.gx-summon { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; }
.gx-portal { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; background-size: 6240px 260px; image-rendering: pixelated; animation: gxPortal 1.2s steps(24) infinite, gxPortalIn .5s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 24px #b06bffcc); }
@keyframes gxPortal { to { background-position-x: -6240px; } }
@keyframes gxPortalIn { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
.gx-wait { position: absolute; left: 0; right: 0; top: calc(44% - 190px); text-align: center; z-index: 1; margin: 0; font: 400 22px var(--pixel); letter-spacing: 6px; color: #f3d6ff; text-shadow: 0 2px 0 #3a1a5e, 0 0 12px #d77bff; }
.gx-wait b { font-weight: 400; animation: gxDot 1.2s infinite; }
.gx-wait b:nth-child(2) { animation-delay: .2s; } .gx-wait b:nth-child(3) { animation-delay: .4s; }
@keyframes gxDot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.gx.pending .gx-grid { position: absolute; left: 50%; top: calc(44% + 110px); transform: translateX(-50%); width: min(360px, 92vw); z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gx.pending.single .gx-grid { top: calc(44% - 68px); }
.gx-back { position: relative; width: 64px; height: 84px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #3b2a78 0%, #1c1640 70%); border: 3px solid #e8b84a; box-shadow: inset 0 0 0 2px #1c1640, inset 0 0 0 4px #8a6a2a, 0 0 16px #b06bffaa, 0 4px 0 #0008; animation: gxFloat 1.4s ease-in-out infinite alternate; animation-delay: var(--d); }
.gx-back::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; transform: rotate(45deg); background: linear-gradient(135deg, #fff3b0, #e8b84a 50%, #9a6a1a); box-shadow: 0 0 12px #ffd76a; }
.gx-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; transform: rotate(45deg); border: 2px solid #e8b84a88; }
.gx-back i { position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(90deg, transparent, #ffffff55, transparent); transform: skewX(-20deg); animation: gxShine 1.8s ease-in-out infinite; animation-delay: var(--d); }
.gx.pending.single .gx-back { width: 104px; height: 136px; }
.gx.pending.many .gx-back { width: 52px; height: 68px; }
.gx.pending .gx-item { animation: gxRise .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--d); }
@keyframes gxRise { from { opacity: 0; transform: translateY(-140px) scale(.2); } to { opacity: 1; transform: none; } }
@keyframes gxFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes gxShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.gx.pending.lite .gx-back, .gx.pending.lite .gx-back i { animation: none; }
.gx.pending.lite .gx-portal { animation: gxPortalIn .3s both; }
.gx.cont { transition: none; }
.gx.cont .gx-title { animation: none; }
/* 社交中心、社交小卡 */
.sc-me { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(90deg, #3b3aa8, #2a2870); border: 2px solid #9fa8ff; cursor: pointer; }
.sc-me .grow, .sc-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-me b { font-size: 18px; color: #ffe98a; }
.sc-me small, .sc-row small { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-hint { font-size: 12px; opacity: .7; white-space: nowrap; }
.sc-pw { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #ffd76a; }
.sc-pw .ci { width: 14px; height: 14px; }
.sc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sc-list h4 { margin: 10px 2px 2px; }
.sc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, #3a3346, #2c2736); border: 1px solid #fff1; cursor: pointer; }
.sc-row b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-on, .sc-off { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: #5fd35f; box-shadow: 0 0 6px #5fd35f; }
.sc-off { background: #777; box-shadow: none; }
.sc-btns { display: flex; flex-direction: column; gap: 4px; }
.sc-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #0004; opacity: .8; white-space: nowrap; }
.sc-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d0342c; color: #fff; font-size: 11px; }
.sc-search { display: flex; gap: 8px; }
.sc-search input { flex: 1; min-width: 0; }
.pcard .pc-top { display: flex; align-items: center; gap: 14px; }
.pcard .pc-top .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-name { font-size: 20px; color: #ffe98a; overflow-wrap: anywhere; }
.pc-title { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #6a3a9e; align-self: flex-start; }
.pc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 14px 0 6px; }
.pc-stats > div { background: #0003; border: 1px solid #fff1; border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pc-stats small { font-size: 11px; opacity: .7; }
.pc-stats b { font-size: 18px; color: #ffd76a; }
.pc-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.pc-btns .btn { flex: 1; max-width: 160px; }
.rk-row[data-act="card"], .sc-row { transition: transform .1s; }
.rk-row[data-act="card"]:active, .sc-row:active { transform: scale(.98); }
/* 社交小卡的主力陣容：一排 5 格，依稀有度上色的卡框、左上角稀有度、短名 */
.pc-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 14px; }
.pc-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pc-tile { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 42%, #2a2140), color-mix(in srgb, var(--rc) 30%, #1c1630)); border: 2px solid var(--rc); box-shadow: inset 0 2px 0 #fff3, 0 2px 0 #0007; overflow: hidden; }
.pc-tile > i { position: absolute; left: 2px; top: 2px; font-style: normal; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 4px; background: #000a; color: var(--rc); }
.pc-hero small { max-width: 100%; font-size: 11px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 抽卡過場：結果回來時傳送門放大消散、卡背發亮、白光一閃，接著翻牌 */
.gx.pending.burst .gx-portal { transition: transform .32s ease-in, opacity .32s ease-in; transform: scale(2.2); opacity: 0; }
.gx.pending.burst .gx-back { transition: transform .32s, filter .32s; transform: scale(1.12); filter: brightness(2.2) saturate(.6); animation: none; }
.gx.pending.burst .gx-wait { transition: opacity .2s; opacity: 0; }
.gx.pending.burst::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: gxFlash .32s ease-in forwards; pointer-events: none; }
@keyframes gxFlash { 60% { opacity: .55; } 100% { opacity: .85; } }
.gx.cont { animation: gxFlashOut .35s ease-out; }
@keyframes gxFlashOut { from { filter: brightness(2.2); } to { filter: none; } }

/* 號令拉霸（client/js/render/slot.js）：戰場上方的三格轉輪、技能列最左邊的號令按鈕 */
.slot { position: absolute; right: -4px; bottom: calc(100% + 22px); transform-origin: bottom right; transform: translateY(10px) scale(.8); z-index: 36; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.slot.show { opacity: 1; transform: scale(.8); pointer-events: auto; }
body.town .slot { display: none; }
.slot-reels { display: flex; gap: 6px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(#3a2a18, #1d1510); border: 3px solid #c9953a; box-shadow: 0 4px 0 #0008, inset 0 0 12px #000a, 0 0 18px #ffb03a55; }
.slot-reels b { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: #0d0a08; box-shadow: inset 0 0 0 2px #5d5040; overflow: hidden; }
.slot.spinning .slot-reels b:not(.stop) { filter: blur(.6px) brightness(1.2); }
.slot-reels b.stop { animation: slotStop .28s ease-out; }
.slot-crown { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 6px #ffd24a); }
.slot-say { min-height: 22px; font: 400 20px var(--num, sans-serif); color: #ffe27a; text-shadow: 0 2px 0 #000, 0 0 10px #ff8a3a; }
.slot.pair .slot-reels { border-color: #ffd24a; }
.slot.triple .slot-reels { border-color: #ff8a3a; animation: slotGlow .5s ease-in-out 4; }
.slot.jackpot .slot-reels { border-color: #fff; animation: slotGlow .35s ease-in-out 8; }
.slot.jackpot .slot-say, .slot.triple .slot-say { font-size: 28px; animation: rainbow 1s linear infinite; }
@keyframes slotStop { 0% { transform: translateY(-14px); } 70% { transform: translateY(4px); } 100% { transform: none; } }
@keyframes slotGlow { 50% { box-shadow: 0 4px 0 #0008, inset 0 0 12px #000a, 0 0 36px #ffd24a; transform: scale(1.06); } }
.cmd-bar button.slot-lever { display: grid; place-items: center; background: radial-gradient(#5a3a18, #1d1813); }
.cmd-bar button.slot-lever span { font-size: 24px; line-height: 1; margin-top: -8px; }
.combo.blaze b { font-size: 76px; text-shadow: 0 0 18px #ff3a1a, 0 3px 0 #000; }
body.fever3::before { box-shadow: inset 0 0 120px #ff5a1acc; }

/* 技能列只剩號令一顆：怒氣條往左延伸，看得清楚還差多少 */
.cmd-bar .cmd-energy { left: -86px; height: 12px; top: -18px; }
.cmd-bar .cmd-energy span { font-size: 10px; }
/* 戰鼓（client/js/render/slot.js）：三聲鼓點、節拍光圈、判定字、新手提示；冒險頁的戰鼓卡 */
.slot.spinning .slot-reels b:not(.stop) { filter: none; }
.slot-reels b { position: relative; overflow: visible; }
.drum-note { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed #c9953a88; }
.slot.rhythm .slot-reels b:not(.stop) .drum-note { border-color: #ffd24a; }
.slot.pulse .slot-reels { animation: drumPulse .22s ease-out; }
@keyframes drumPulse { 0% { box-shadow: 0 4px 0 #0008, inset 0 0 12px #000a, 0 0 0 0 #ffd24acc; } 100% { box-shadow: 0 4px 0 #0008, inset 0 0 12px #000a, 0 0 0 14px #ffd24a00; } }
.slot-reels b em { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font: 400 11px var(--num, sans-serif); font-style: normal; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.slot-reels b em.beat-perfect { color: #ffe27a; } .slot-reels b em.beat-good { color: #9ae8ff; } .slot-reels b em.beat-miss { color: #ff9a8a; }
.slot-reels b.perfect { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 10px #ffd24a; }
.cmd-bar button.slot-lever.tut { animation: cmdReady .6s ease-in-out infinite; border-color: #fff; }
.cmd-bar button.slot-lever.tut::after { content: '擂鼓！'; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; padding: 3px 8px; border-radius: 8px; background: #ffd24a; color: #2a1c0c; font-size: 13px; white-space: nowrap; pointer-events: none; }
.drum-card { padding: 12px; margin-bottom: 10px; }
.drum-title { font-size: 18px; }
.drum-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.drum-perks > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: #0003; }
.drum-perks small { font-size: 11px; opacity: .8; } .drum-perks b { font-size: 16px; } .drum-perks i { font-style: normal; font-size: 12px; color: #7dff9a; }
/* 戰鼓節奏：收縮光圈（縮到剛好套住鼓框＝準拍）、下一個要敲的鼓點亮起來 */
.drum-ring { position: absolute; inset: -3px; border-radius: 12px; border: 3px solid #ffd24a; box-shadow: 0 0 10px #ffd24a; opacity: 0; pointer-events: none; transform-origin: center; }
.slot-reels b.next { box-shadow: inset 0 0 0 2px #fff, 0 0 12px #ffd24a; }
.slot-reels b.next .drum-note { border-style: solid; border-color: #fff; }
.slot.rhythm .slot-say { font-size: 22px; }
.cmd-bar button.slot-lever .skic { margin-top: -10px; border-radius: 8px; }
.drum-ring { border: 4px solid #fff; box-shadow: 0 0 0 2px #ffd24a, 0 0 14px #ffd24a; }
/* 擂鼓按鈕：怒氣做成外圈光環（不再另外吊一條怒氣條）、右上角可敲次數、左邊自動開關 */
.cmd-bar .cmd-energy { display: none; }
.cmd-bar button.slot-lever { width: 72px; height: 72px; padding: 0; border: none; filter: none; background: conic-gradient(#ffb03a calc(var(--rage, 0) * 1%), #3a2e22 0); box-shadow: 0 3px 0 #0008; overflow: visible; }
.cmd-bar button.slot-lever:not(.ready) .drum-core { filter: grayscale(.6) brightness(.8); }
.slot-lever .drum-core { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(#5a3a18, #1d1813); display: grid; place-items: center; overflow: hidden; }
.slot-lever .drum-core .skic { margin-top: -10px; }
.slot-lever .drum-core em { position: absolute; left: 0; right: 0; bottom: 4px; font: 400 12px var(--num); font-style: normal; color: #fff; text-align: center; text-shadow: 0 1px 0 #000; background: none; }
.cmd-bar button.slot-lever.ready { box-shadow: 0 3px 0 #0008, 0 0 14px #ffb03a; animation: cmdReady 1.2s ease-in-out infinite; }
/* 擂鼓前 3 次：脈動更明顯並標出「擂鼓！」（外部試玩回饋） */
.cmd-bar button.slot-lever.learn { animation: drumLearn .7s ease-in-out infinite; border-color: #fff; }
.cmd-bar button.slot-lever.learn::after { content: '擂鼓！'; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; padding: 3px 8px; border-radius: 8px; background: #ffd24a; color: #2a1c0c; font-size: 13px; white-space: nowrap; pointer-events: none; }
@keyframes drumLearn { 50% { transform: scale(1.12); } }
.slot-lever .drum-n { position: absolute; top: -4px; right: -6px; min-width: 22px; padding: 1px 5px; border-radius: 10px; background: #d9611a; border: 2px solid #ffd24a; font: 400 12px var(--num); color: #fff; text-align: center; }
.cmd-bar .drum-auto { position: absolute; right: calc(100% + 8px); bottom: 6px; width: auto; height: auto; padding: 5px 10px; border-radius: 12px; border: 2px solid #5d5040; background: #1d1813e0; color: #b9ab94; font-size: 13px; filter: none; overflow: visible; white-space: nowrap; }
.cmd-bar .drum-auto.on { border-color: #7dff9a; color: #7dff9a; box-shadow: 0 0 8px #7dff9a66; }
.cmd-bar .drum-auto.locked { opacity: .6; font-size: 11px; }
.cmd-bar button.slot-lever.tut::after { right: 50%; top: auto; bottom: calc(100% + 10px); transform: translateX(50%); margin: 0; }
/* 擂鼓左邊一欄：上「戰鼓 LvN」（打開戰鼓面板，可升級時紅點）、下「自動」 */
.cmd-bar .drum-up { position: absolute; right: calc(100% + 8px); bottom: 44px; width: auto; height: auto; padding: 5px 10px; border-radius: 12px; border: 2px solid #c9953a; background: #2a1c0ce8; color: #ffe08a; font-size: 13px; filter: none; overflow: visible; white-space: nowrap; }
.cmd-bar .drum-up.dot::after { top: -6px; right: -6px; }
/* 手機（使用者：戰鼓按鈕有點大、擋視線）：擂鼓按鈕、戰鼓／自動按鈕、鼓的結果視窗都縮小 */
@media (max-width: 600px) {
  .cmd-bar button.slot-lever { width: 58px; height: 58px; }
  .slot-lever .drum-core { inset: 4px; }
  .slot-lever .drum-core .skic { transform: scale(.75); margin-top: -12px; } /* 用縮放，不改圖集尺寸（改了會裁到別張圖） */
  .slot-lever .drum-core em { font-size: 10px; bottom: 3px; }
  .slot-lever .drum-n { font-size: 10px; min-width: 18px; top: -5px; right: -6px; }
  .cmd-bar .drum-up, .cmd-bar .drum-auto { padding: 3px 7px; font-size: 11px; border-radius: 10px; }
  .cmd-bar .drum-up { bottom: 34px; }
  .cmd-bar .drum-auto { bottom: 4px; }
  .slot, .slot.show { transform-origin: bottom right; }
  .slot.show { transform: scale(.66); }
}
.drum-perks em { font-style: normal; font-size: 10px; opacity: .65; line-height: 1.3; margin-top: 2px; }

/* 據點「攻打用的部隊」：兩排三欄，戰力完整顯示（使用者：一排六顆太擠、很醜） */
.src-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.src-pick button { padding: 8px 4px; gap: 2px; border-radius: 10px; }
.src-pick b { font-size: 14px; display: flex; align-items: center; gap: 4px; }
.src-pick b em { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 6px; background: #ffd24a; color: #2a1c0c; }
.src-pick small { font-size: 11px; }
/* 關掉畫面閃光（設定頁；battle.js setFlash）：抽卡的白光、閃光層都不出現 */
body.no-flash .gx.pending.burst::after, body.no-flash .gx-flash, body.no-flash.mythic-flash::after, body.no-flash.pow-flash::after { display: none !important; }
/* 遠征：每小時產量（圖示＋數字） */
.rate-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.rate-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.rate-chip .ci { width: 18px; height: 18px; }
.rate-chip b { color: #ffe08a; font-variant-numeric: tabular-nums; }
.rate-chips > small { opacity: .7; }
.band-rates { display: flex; flex-direction: column; gap: 2px; }
.band-rates .rate-chip { font-size: 15px; }
.band-rates .rate-chip .ci { width: 22px; height: 22px; }

/* 新角色開場（ui-intro.js）：一鍵培養 → 軍團出征 */
#introCard { position: fixed; left: 50%; bottom: calc(var(--nav-h, 86px) + 90px); transform: translateX(-50%); z-index: 70; width: min(320px, 88vw); box-sizing: border-box; padding: 16px 16px 14px; border-radius: 14px; background: rgba(34, 22, 14, .94); border: 2px solid #ffe27a; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); color: #fff; text-align: center; display: flex; flex-direction: column; gap: 8px; animation: introIn .35s ease-out; }
#introCard b { font-size: 20px; color: #ffe08a; }
#introCard span { font-size: 14px; opacity: .9; }
#introCard .btn { margin-top: 4px; font-size: 18px; }
@keyframes introIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translateX(-50%); } }
body.intro .stagebar { opacity: .5; }
/* 戰鼓在主線任務輪到「擂鼓一次」之前不出現 */
.cmd-bar.drum-off .slot-lever, .cmd-bar.drum-off .drum-up, .cmd-bar.drum-off .drum-auto { display: none !important; }
/* 鑽石商店：每列左邊的資源圖示 */
.shop-row { justify-content: flex-start; }
.shop-row .grow { flex: 1; }
.shop-row .shop-ic { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* 競技場 5 對 5：頂欄的「存活人數」會壓到頭像（頭像本身會變暗表示陣亡），小隊模式不顯示 */
#warView.small .wv-side > span { display: none; }
/* 結算：培養比較（等級、星級、奧義） */
.wv-gap { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.wv-gap h4 { margin: 0 0 4px; font-size: 13px; color: #ccc; }
.wv-gap > div { display: grid; grid-template-columns: 3em 1fr 2em 1fr; align-items: center; text-align: center; font-size: 14px; }
.wv-gap > div span { text-align: left; color: #bbb; }
.wv-gap b.up { color: #7dff9a; } .wv-gap b.down { color: #ff8a7a; }
.wv-gap i { color: #888; font-style: normal; font-size: 12px; }
.wv-why { margin: 6px 0 0; font-size: 13px; color: #ffd9a0; text-align: center; }
.wv-why b { color: #ff8a7a; }
/* 競技場頭像：技能蓄力條（集滿就放技能）、施放時亮一下 */
#warView .wv-faces > span { position: relative; }
#warView .wv-faces .en { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 4px; border-radius: 2px; background: #0009; overflow: hidden; }
#warView .wv-faces .en em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ab8ff, #9ae8ff); transition: width .12s linear; }
#warView .wv-faces > span.full .en em { background: linear-gradient(90deg, #ffd24a, #fff4b0); box-shadow: 0 0 6px #ffd24a; }
#warView .wv-faces > span.cast { box-shadow: 0 0 0 2px #ffe27a, 0 0 14px #ffd24a; transform: scale(1.12); transition: transform .12s; }
#warView .wv-faces > span.dead .en { visibility: hidden; }
/* 公會防線（ui-frontline.js） */
.line-wave .bossbar { margin: 6px 0; }
.line-top { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 2px; font-size: 13px; }
.line-top i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 3px; border-radius: 50%; background: #ffd24a; color: #2a1a0a; font-size: 11px; font-weight: 900; }
.line-forts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.line-fort { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); }
.line-fort.mine { border-color: #7dff9a88; box-shadow: 0 0 0 1px #7dff9a44 inset; }
.line-fort > b { font-size: 15px; color: #ffe08a; }
.lf-gar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lf-gar span { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 12px; text-align: center; }
.lf-gar span.me { background: rgba(125, 255, 154, .15); color: #bfffcc; }
.lf-gar span.empty { color: #888; }
.lf-gar small { color: #aaa; font-size: 11px; }
.lf-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
/* 公會防線：我的戰績 */
.line-my { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.line-my > b { grid-column: 1 / -1; color: #ffe08a; }
.line-my > div { display: flex; flex-direction: column; }
.line-my span { font-size: 12px; color: #bbb; }
.line-my b.num { font-size: 16px; color: #fff; }
.line-my small { font-size: 11px; color: #999; }
/* 公會遠征（ui-guildexp.js）：直式路線圖，據點由上往下、左邊一條路徑線 */
.gx-head .gx-help, .gxm-bar .gx-help { min-width: 30px; font-weight: 900; }
/* 難度三檔：見習（綠）、正式（金）、深境（紫） */
.gx-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.gx-tiers button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); color: #ccc; font: inherit; }
.gx-tiers button b { font-size: 14px; }
.gx-tiers button small { font-size: 11px; color: #999; }
.gx-tiers button:disabled { opacity: 1; }
.gx-tiers button:disabled:not(.on) { opacity: .55; }
.gx-tiers button.on.t0 { border-color: #6fd38a; background: #1f4a2a; color: #dfffe6; }
.gx-tiers button.on.t1 { border-color: #ffd24a; background: #4a3a14; color: #fff3c4; }
.gx-tiers button.on.t2 { border-color: #b88aff; background: #34204f; color: #eadcff; }
.gx-next { position: absolute; top: -7px; right: -4px; padding: 0 5px; border-radius: 6px; background: #3f6fb5; color: #fff; font-size: 10px; font-style: normal; }
.gx-tn { font-size: 10px; padding: 0 4px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.gx-tn.t0 { color: #8fe6a6; } .gx-tn.t1 { color: #ffe08a; } .gx-tn.t2 { color: #cdb0ff; }
.gx-claim { width: 100%; margin-top: 8px; }
.gx-claim small { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.gx-rw { display: inline-flex; align-items: center; gap: 3px; }
.gx-rw em { font-style: normal; font-size: 11px; color: #ffe08a; }
.gx-me .gx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gx-me .gx-stats > div { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.gx-me .gx-stats b { font-size: 16px; }
.gx-me .gx-stats small { color: #aaa; }
.gx-band { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.gx-band > .btn.big { width: 100%; }
.gx-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-acts span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 12px; }
.gx-acts span.full { color: #7dff9a; }
.gx-top li.me { color: #bfffcc; }
.gx-helptext p { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; text-align: left; }
.gx-report .gx-rep-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.gx-report .gx-rep-row span { color: #bbb; font-size: 13px; }
.gx-report .gx-rep-row b { margin-left: auto; text-align: right; }
.gx-rep-rw { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 10px 0; }
/* 公會遠征大地圖（render/gexmap.js；GUILD_EXPEDITION_V2）：頂部進度條＋橫向捲動的地圖，名字與圖示疊在畫布上 */
.gxm-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #2a2138, #17121f); border: 1px solid #ffd24a44; border-bottom: 2px solid #ffd24a88; }
.gxm-rt { flex: none; color: #ffe08a; font-size: 15px; text-shadow: 0 2px 0 #000; }
.gxm-prog { position: relative; flex: 1; min-width: 60px; height: 16px; border-radius: 8px; background: #0009; box-shadow: inset 0 1px 3px #000; overflow: hidden; }
.gxm-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ffe58a, #e0a020); box-shadow: 0 0 10px #ffd24a; }
.gxm-prog span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
.gxm-rate { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #ffd9a8; white-space: nowrap; }
.gxm-rate small, .gxm-cd { color: #aab; font-size: 11px; white-space: nowrap; }
.gxm { position: relative; margin: 0 0 8px; overflow-x: auto; overflow-y: hidden; border-radius: 0 0 12px 12px; background: #1a2230; box-shadow: inset 0 0 0 1px #ffd24a33, 0 6px 14px #0008; -webkit-overflow-scrolling: touch; scrollbar-width: thin; touch-action: pan-x; }
.gxm.mini { margin: 8px 0; border-radius: 10px; touch-action: auto; }
.gxm-in { position: relative; }
/* 捲軸藏起來，改用左右按鈕切換據點（手機照樣可以滑） */
.gxm-wrap { position: relative; }
.gxm:not(.mini) { scrollbar-width: none; } .gxm:not(.mini)::-webkit-scrollbar { display: none; }
.gxm-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 54px; border: 1px solid #ffd24a66; border-radius: 10px; background: #000a; color: #ffe08a; font-size: 16px; cursor: pointer; }
.gxm-nav.l { left: 6px; } .gxm-nav.r { right: 6px; }
.gxm-nav:hover { background: #2a1d0ccc; }
.gxm-kills { font-style: normal; font-size: 11px; color: #ffd24a; }
.gxm-cv { display: block; image-rendering: pixelated; }
.gxm-n { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; pointer-events: none; text-shadow: 0 1px 2px #000; }
.gxm-n > b { padding: 1px 8px; border-radius: 8px; background: #000b; border: 1px solid #ffffff22; color: #ddd; }
.gxm-n.cur > b { color: #ffd9a8; border-color: #ff8a3a; box-shadow: 0 0 10px #ff6a2a88; }
.gxm-n.done > b { color: #bfe0ff; border-color: #4a7ab5; }
.gxm-n.next > b { color: #8890a0; }
.gxm-n.boss > b { font-size: 14px; color: #ffb3e6; border-color: #b8432a; }
.gxm-n.boss.done > b, .gxm-n.boss.cur > b { color: #ffe08a; }
.gxm-ic { display: flex; align-items: center; gap: 4px; }
.gxm-ic:empty { display: none; }
.gxm-tr, .gxm-gd { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 8px; background: #000a; font-size: 11px; }
.gxm-tr.fit { box-shadow: inset 0 0 0 1px #7dff9a; }
.gxm-tr b { color: #7dff9a; }
.gxm-gd { color: #8ad0ff; }
.gxm-el { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; color: #fff; box-shadow: inset 0 -2px 0 #0005, 0 0 0 1px #0008; }
.gxm-plus { pointer-events: auto; padding: 1px 6px; border-radius: 8px; border: 1px dashed #ffd24a; background: #000a; color: #ffd24a; font: inherit; font-size: 11px; }
.gxm-hp { position: relative; width: 112px; height: 10px; border-radius: 5px; background: #000b; box-shadow: 0 0 0 1px #ff8a3a88; overflow: hidden; }
.gxm-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff7a4a, #b8202a); }
.gxm-hp span { position: relative; display: block; text-align: center; font-size: 9px; line-height: 10px; color: #fff; }
.gxm-cur { display: flex; align-items: center; gap: 6px; }
.gxm-go { pointer-events: auto; animation: sigGlow 2.4s ease-in-out infinite; }
.gxm-tag { position: absolute; z-index: 1; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: #000a; color: #eef; font-size: 10px; white-space: nowrap; pointer-events: none; }
.gxm-tag.me { color: #ffe27a; box-shadow: inset 0 0 0 1px #ffe27a88; }
@media (min-width: 700px) { .gxm-n { font-size: 13px; } .gxm-tag { font-size: 11px; } }
.gxm-fsb { min-width: 30px; }
/* 手機（2026-10-05 回報：遠征內頁可以左右滑、跑版）：頂部列的路線名、每小時數字變長時會擠出面板，撐寬整個內頁；
   改成可以縮（路線名省略號、進度條最窄 36px），超出的部分裁掉。地圖的標籤也裁在畫布範圍內，地圖只在自己的框裡平移 */
.gxm-bar { min-width: 0; overflow: hidden; }
.gxm-bar > * { flex-shrink: 0; }
.gxm-bar > .gxm-rt { flex: 0 1 auto; min-width: 2.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxm-bar > .gxm-cd { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gxm-bar > .gxm-prog { flex: 1 1 36px; min-width: 36px; }
.gxm-in { overflow: hidden; }
@media (max-width: 480px) { .gxm-bar { gap: 5px; padding: 6px 8px; } .gxm-rt { font-size: 13px; } .gxm-rate { font-size: 12px; } .gxm-cd { font-size: 10px; } .gxm-bar .btn.sm { min-width: 26px; padding-left: 4px; padding-right: 4px; } }
@media (max-height: 520px) { .gxm-live { top: 46%; right: calc(96px + var(--safe-r, 0px)); } }
/* 全螢幕地圖（橫式手機預設、直式點 ⛶） */
.gxm-fs { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; justify-content: center; padding: var(--safe-t, 0px) var(--safe-r, 0px) var(--safe-b, 0px) var(--safe-l, 0px); background: #070a12; animation: gxmIn .25s ease-out both; }
.gxm-fs .gxm-bar { border-radius: 0; }
.gxm-fs .gxm { margin: 0; border-radius: 0; flex: none; }
/* 大首領倒下：全螢幕演出 */
.gxm-boss { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(circle at 50% 60%, #3a1a48 0%, #0b0612 72%); animation: gxmIn .4s ease-out both; }
.gxm-boss canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gxm-boss-t { position: absolute; left: 0; right: 0; top: calc(9% + var(--safe-t, 0px)); text-align: center; text-shadow: 0 3px 0 #000; }
.gxm-boss-t small { color: #c9b0e8; font-size: 13px; letter-spacing: 4px; }
.gxm-boss-t h1 { margin: 4px 0; font: 400 32px var(--pixel); color: #ffd9f0; }
.gxm-boss-t b { display: block; font: 400 30px var(--pixel); letter-spacing: 10px; text-indent: 10px; color: #ffe08a; text-shadow: 0 3px 0 #7a4a00, 0 0 18px #ffb03a; opacity: 0; animation: gxmPop .6s cubic-bezier(.2,1.6,.4,1) 2.3s forwards; }
.gxm-boss-f { position: absolute; left: 0; right: 0; bottom: calc(7% + var(--safe-b, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: gxmIn .4s ease-out 2.8s forwards; }
.gxm-boss-f .gx-rep-rw { padding: 6px 14px; border-radius: 12px; background: #0009; }
@media (max-height: 520px) { .gxm-boss-t { top: 4%; } .gxm-boss-t h1 { font-size: 24px; } .gxm-boss-t b { font-size: 22px; } .gxm-boss-f { flex-direction: row; flex-wrap: wrap; justify-content: center; bottom: 4%; } .gxm-boss-f .gx-rep-rw { flex-basis: 100%; margin: 0 auto; max-width: 92vw; } }
@keyframes gxmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gxmPop { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
/* 觀戰：右側即時「本場貢獻」 */
.gxm-live { position: fixed; right: calc(8px + var(--safe-r, 0px)); top: 28%; z-index: 60; min-width: 132px; padding: 6px 8px; border-radius: 10px; background: #000b; border: 1px solid #ffd24a55; font-size: 12px; color: #eee; pointer-events: none; }
.gxm-live > b { display: block; margin-bottom: 3px; color: #ffe08a; font-size: 12px; }
.gxm-live ol { margin: 0; padding: 0; list-style: none; }
.gxm-live li { display: flex; align-items: center; gap: 5px; line-height: 1.6; }
.gxm-live li i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.gxm-live li span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxm-live li em { margin-left: auto; font-style: normal; color: #ffd9a8; }
.gxm-live li.me span { color: #ffe27a; }
/* 公會：我的貢獻、兌換動畫 */
.gs-contrib { display: inline-flex; gap: 6px; align-items: baseline; margin-top: 4px; padding: 2px 10px; border-radius: 10px; background: rgba(255, 210, 74, .15); color: #ffe08a; font-size: 13px; }
.gs-contrib b { font-size: 16px; }
.gs-pop { animation: gsPop .6s ease-out; }
@keyframes gsPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 #ffd24a; } 30% { transform: scale(1.04); box-shadow: 0 0 16px 2px #ffd24a; } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }

/* ---------- 神話專武（client/js/ui/ui-sig.js）---------- */
/* 神鑄石：技能圖集的 magic_crystal_C（第 23 欄、第 5 列），之後由 Codex 畫的 ui/px/res/sig_stone.png 替換 */
.ci-sig, .ic.sig { background: url('../assets/ui/px/res/sig_stone.png') center / contain no-repeat; image-rendering: pixelated; } /* 神鑄石（Codex 2026-10-01） */
.sig-card { border: 1px solid #b8862a; }
.sig-card.ready { box-shadow: 0 0 0 2px #ffd23a, 0 0 18px #ffb03a88; }
.sig-card.awake { background: linear-gradient(180deg, #3a2a10, #221a10); }
.sig-head { display: flex; align-items: center; gap: 10px; }
.sig-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-stages { display: block; margin: 6px 0 2px; }
.sig-slot { position: relative; display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 10px; background: radial-gradient(circle, #3a2e1a, #1a1410); border: 2px solid #6a5430; }
.sig-slot img, .sig-slot .skic { image-rendering: pixelated; }
.sig-slot.locked img, .sig-slot.locked .skic { filter: grayscale(1) brightness(0.45); }
/* +30 覺醒：金色外框＋流光（程式上色，不另外畫） */
.sig-slot.gold { border-color: #ffd23a; box-shadow: 0 0 12px #ffd23a, inset 0 0 10px #ffd23a66; animation: sigGlow 2.4s ease-in-out infinite; }
@keyframes sigGlow { 50% { transform: scale(1.03); } }
.sig-lv { font-style: normal; color: #ffd23a; font-weight: 700; }
.sig-steps li span small { display: block; }
.sig-steps li.on { background: linear-gradient(90deg, #6a4a14, #2a2010); border-color: #ffd23a; }
/* 四段效果：已解鎖（金底 ✓）、下一段（金框＋還差幾階）、之後（暗、灰階） */
.sig-steps li em { display: flex; align-items: center; gap: 4px; }
.sig-steps li .sig-ok { color: #ffd23a; font-size: 16px; font-weight: 700; }
.sig-steps li.next { background: #2a2210; }
.sig-steps li.lock { opacity: 0.45; filter: grayscale(0.6); }
.sig-gap { color: #ffd23a; font-weight: 700; font-size: 12px; }
/* 共用升級區（client/js/ui/upgrade-box.js：專武、奧義、覺醒、裝備升星）：擁有／需要大字＋還差＋星級徽章＋進度條＋按鈕（灰的寫原因） */
.ub-star { display: inline-block; padding: 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ub-star.ok { background: #4a3a10; color: #ffd23a; }
.ub-star.lack { background: #4a1818; color: #ff8a7a; border: 1px solid #ff6a5a88; }
.ub { margin-top: 8px; padding: 10px; border-radius: 10px; background: #1a1510; border: 1px solid #5a4420; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ub.ok { border-color: #ffd23a; }
.ub.done { align-items: center; text-align: center; font-size: 13px; }
.ub.done > b { font-size: 18px; }
.ub-gain { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.ub-gain .ub-to { color: #c8b890; white-space: nowrap; }
.ub-gain .ub-to b { color: #fff; font-size: 16px; }
.ub-gain .ub-what { margin-left: auto; text-align: right; min-width: 0; }
.ub-need { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ub-lbl { flex-basis: 100%; font-size: 12px; color: #c8b890; }
.ub-amt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.ub-amt .ci { width: 26px; height: 26px; }
.ub-amt b { font-size: 22px; color: #fff; }
.ub-amt small { font-size: 15px; color: #c8b890; }
.ub .lack { color: #ff8a7a !important; }
.ub-left { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ub-left.ok { color: #8ae07a; }
.ub-starneed { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; }
.ub-starneed .ub-star { font-size: 13px; }
.ub-bar { height: 8px; border-radius: 4px; background: #000a; border: 1px solid #3a2e1a; overflow: hidden; }
.ub-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a03a2a, #ff6a4a); }
.ub-bar.full i { background: linear-gradient(90deg, #b8862a, #ffd23a); }
.ub-btns { display: flex; gap: 8px; }
.ub-btns .btn { flex: 1; min-width: 0; margin: 0; white-space: nowrap; }
.ub-btns .btn small { display: block; font-size: 12px; }
.btn.ub-no, .btn.ub-no:disabled { filter: none; opacity: 1; border-image: none; border: 2px dashed #6a4a3a; border-radius: 8px; background: #241a16; color: #8a7a6a; text-shadow: none; }
.ub-no small { color: #ff8a7a; font-weight: 700; font-size: 14px; }
.ub-note { margin: 0; text-align: center; color: #c8b890; }
.sig-dupe { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #2a2210; border: 1px dashed #b8862a; }
@media (prefers-reduced-motion: reduce) { .sig-slot.gold { animation: none; } }/* 遠征「派隊伍」：統一的安排面板（每隊一列，點地點就出發） */
.asg-open { display: block; width: 100%; margin: 2px 0 10px; }
.asg-list { display: grid; gap: 8px; margin: 8px 0 12px; }
.asg-row { padding: 8px; border-radius: 10px; border: 2px solid #564a3c; background: #00000033; display: grid; gap: 6px; }
.asg-row.locked { opacity: .5; }
.asg-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.asg-head > b { flex: none; color: var(--title); }
.asg-head > small { margin-left: auto; flex: none; color: var(--muted); font-size: 12px; }
.asg-head > .btn { margin-left: auto; }
.asg-leads { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.asg-leads .px-av { border-radius: 5px; background-color: #00000040; }
.asg-now { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.asg-now > small { color: #ffd24a; font-size: 12px; }
.asg-now .rate-chips { margin-top: 0; }
.asg-now .bx-where b { color: #ffd24a; }
/* 冒險 → 遠征：每隊一張小卡（隊名、地點名稱＋狀態標籤、頭像、資源收益） */
.bx-list { display: grid; gap: 6px; }
.bx-card { display: grid; gap: 4px; padding: 8px 10px; margin: 0; }
.bx-card.locked { opacity: .5; }
.bx-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bx-head > b { flex: none; color: var(--title); }
.bx-head > .btn, .bx-head > .bx-pw { margin-left: auto; }
.bx-pw { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.bx-pw .ci, .asg-head .ci-power { width: 14px; height: 14px; vertical-align: -2px; }
.bx-mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bx-where { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bx-where .skic { flex: none; border-radius: 6px; }
.bx-where b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-tag { flex: none; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: #4a3f32; color: #e8dcc4; }
.bx-tag.farm { background: #2f5a2c; color: #c9f2b4; }
.bx-tag.push { background: #7a2f22; color: #ffd2b8; }
.bx-tag.dg { background: #6a5320; color: #ffe08a; }
.bx-tag.gex { background: #24506a; color: #bfe6ff; }
.bx-tag.tower { background: #4b2d66; color: #e3c9ff; }
.bx-tag.bad { background: #6a2222; color: #ffb3b3; }
.bx-tag.idle, .bx-tag.lock { background: #3a3530; color: #a99f90; }
.bx-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bx-foot .tc-leads { flex: 0 1 auto; }
.bx-foot .rate-chips { margin: 0 0 0 auto; justify-content: flex-end; }
.band-rates .bx-head { margin-bottom: 2px; }
.band-rates .asg-open { display: inline-block; width: auto; margin: 0 0 0 auto; }
.gx-tgt { display: grid; min-width: 0; line-height: 1.1; }
.gx-tgt > small { color: #ffd24a !important; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-inc .rate-chips { margin: 0; }
.asg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.asg-opts.two { grid-template-columns: 1fr 1fr; }
.asg-opt { min-height: 44px; padding: 4px 2px; border-radius: 8px; border: 2px solid #564a3c; background: linear-gradient(#3b322a, #2a231c); color: var(--text); font-size: 13px; line-height: 1.15; min-width: 0; }
.asg-opt small { display: block; font-size: 10px; color: var(--muted); }
.asg-opt.on { border-color: #ffd24a; background: linear-gradient(#5a4520, #3a2c14); color: #ffe08a; }
.asg-opt:disabled { opacity: .4; }
html[lang="en"] .cmd-bar button.slot-lever.learn::after, html[lang="en"] .cmd-bar button.slot-lever.tut::after { content: 'Drum!'; }

/* 技能銘文（client/js/ui/ui-insc.js）：格子＝技能圖示＋稀有度色框＋等級角標；收藏兩欄卡片；抽銘文結果沿用 .gx 演出 */
.itile { --px: 56px; --ic: #3a4252; --kc: #8fd3ff; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--px); height: var(--px); border-radius: 9px; border: 2px solid var(--ic); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kc) 30%, #141a26) 0%, #121722 72%); box-shadow: inset 0 1px 0 #fff2, 0 2px 0 #0008; }
.itile .insc-ic { border-radius: 4px; }
.itile.empty { border-color: #ffffff22; background: #0000003a; box-shadow: inset 0 2px 6px #0008; }
.itile-plus { display: block; width: calc(var(--px) * .38); height: calc(var(--px) * .38); background: linear-gradient(#ffffff48, #ffffff48) center / 100% 3px no-repeat, linear-gradient(#ffffff48, #ffffff48) center / 3px 100% no-repeat; }
.itile.none { filter: grayscale(1) brightness(.55); border-color: #ffffff18; }
.itile-lv { position: absolute; right: -5px; bottom: -6px; min-width: 18px; padding: 0 4px; border-radius: 6px; font: 400 11px/15px var(--pixel); text-align: center; color: #fff; background: #000d; border: 1px solid var(--ic); }
.itile-lv::before { content: 'Lv'; font-size: 9px; opacity: .75; }
.itile-rar { position: absolute; left: -5px; top: -7px; padding: 0 3px; border-radius: 4px; font: 400 9px/13px var(--pixel); font-style: normal; color: #fff; background: color-mix(in srgb, var(--ic) 72%, #000); box-shadow: 0 1px 0 #0009; }

/* 技能分頁的銘文卡 */
.insc-card { border: 1px solid #4f8fc0; }
.insc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.insc-title { font-size: 1.05em; font-weight: 400; font-family: var(--pixel); color: var(--title); }
.insc-rune { display: inline-flex; align-items: center; gap: 3px; font-family: var(--pixel); font-size: 14px; white-space: nowrap; }
.insc-rune small { margin-left: 6px; font-size: 11px; color: var(--muted); }
.insc-slots { display: flex; justify-content: center; gap: 14px; }
.insc-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.insc-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #d8e6f5; }
.insc-slot small b { font-weight: 400; }
.insc-slot:active .itile { transform: scale(.94); }
.insc-draw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.insc-draw .btn { width: 100%; min-height: 50px; }

/* 收藏 */
.insc-modal { padding-bottom: 0 !important; }
.ilib h2 { padding-right: 44px; }
.ilib h2 .num { font-size: 15px; color: var(--muted); }
.ilib-hero { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px; background: #0000003a; box-shadow: inset 0 2px 6px #0007; }
.ilib-hero > .px-av, .ilib-hero > img, .ilib-hero > span:first-child { flex: none; }
.ilib-slots { display: flex; flex: 1; justify-content: space-around; gap: 6px; min-width: 0; }
.ilib-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.ilib-slot.on { border-color: var(--gold); background: #ffd24a1c; }
.ilib-slot small { font-size: 11px; white-space: nowrap; color: #d8e6f5; }
.ilib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ilib-card { --ic: #3a4252; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 70px; padding: 6px 6px 6px 9px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--ic) 55%, #000); background: linear-gradient(90deg, color-mix(in srgb, var(--ic) 22%, #1a1612), #1a1612 80%); color: inherit; text-align: left; cursor: pointer; }
.ilib-card.sel { border-color: var(--ic); box-shadow: 0 0 0 1px var(--ic), 0 0 12px color-mix(in srgb, var(--ic) 50%, transparent); }
.ilib-card.none { cursor: default; border-color: #ffffff12; background: #00000030; }
.ilib-card.none .ilib-tx { opacity: .4; }
.ilib-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ilib-tx b { font: 400 15px var(--pixel); color: color-mix(in srgb, var(--ic) 45%, #fff); white-space: nowrap; }
.ilib-card.none .ilib-tx b { color: var(--muted); }
.ilib-tx small { display: flex; align-items: center; gap: 2px; font: 400 12px var(--pixel); color: #cfd8e6; white-space: nowrap; }
.ilib-tx small em { font-style: normal; color: #ffe08a; margin-right: 2px; }
.ilib-on { position: absolute; right: 5px; top: 5px; width: 17px; height: 17px; border-radius: 50%; font: 400 11px/17px var(--pixel); font-style: normal; text-align: center; color: #3a2000; background: var(--gold); box-shadow: 0 1px 0 #0009; }
.ilib-act { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 10px 10px; border-radius: 10px; border: 2px solid var(--ic); background: #00000045; animation: popin .2s ease-out; }
.ilib-act.one { grid-template-columns: 1fr; }
.ilib-fx { font: 400 11px var(--pixel); font-style: normal; color: #a9b4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ilib-eff { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 13px var(--pixel); color: #dfe6f0; }
.ilib-eff b { color: #fff; } .ilib-eff b.up { color: #8dff9a; } .ilib-eff i { font-style: normal; color: var(--muted); font-size: 10px; }
.ilib-eff-p { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.ilib-act .btn { width: 100%; min-height: 52px; }
.ilib-xp { position: absolute; left: 10px; right: 10px; top: 4px; height: 4px; border-radius: 2px; background: #ffffff18; overflow: hidden; }
.ilib-xp i { display: block; height: 100%; background: var(--ic); }
.ilib-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px -16px 0; padding: 8px 12px calc(10px + var(--safe-b)); background: linear-gradient(#2a1b12f0, #2a1b12); border-top: 2px solid #00000060; }
.ilib-rune { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-left: 24px; font-size: 15px; white-space: nowrap; }
.ilib-rune > .ci { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; }
.ilib-rune small { font-size: 11px; color: var(--muted); }
.ilib-draw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ilib-draw .btn { width: 92px; min-height: 46px; }

/* 抽銘文結果：沿用招募的 .gx，卡面換成銘文圖示 */
.insc-gt { display: grid; place-items: center; padding: 10px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kc) 40%, #141a26) 0%, #121722 75%); }
.insc-gt .insc-ic { position: relative; }
.gx.many .insc-gt { padding: 7px; }
.insc-gx .gx-chip { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-style: normal; font-size: 11px; color: #cfe2ff; white-space: nowrap; }
.insc-gx .gx-up { color: #7dff9a; font-weight: 400; }
.insc-gx-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(320px, 86vw); }
.insc-gx-btns .btn { width: 100%; min-height: 54px; }
.insc-gx-btns .btn small { color: inherit; font-size: 12px; animation: none; }
.insc-gx .gx-foot > small { display: inline-flex; align-items: center; gap: 3px; animation: none; color: #e6d6b8; }
/* 養成階梯（client/js/ui/ui-ladder.js）：培養分頁最上面的階位卡＋突破條件、突破演出 */
.lad-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid #5a4420; }
.lad-card.ready { border-color: #ffd23a; box-shadow: 0 0 0 2px #ffd23a, 0 0 18px #ffd23a66; }
.lad-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; }
.lad-head i { color: var(--muted); font-style: normal; font-size: 13px; }
.lad-head .lad-next { color: #ffd23a; }
.lad-conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.lad-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 8px; background: #1a1510; border: 1px solid #5a4420; }
.lad-c span { color: #c8b890; font-size: 12px; display: inline-flex; align-items: center; }
.lad-c b { font-size: 17px; color: #fff; white-space: nowrap; }
.lad-c em { position: absolute; top: 2px; right: 6px; font-style: normal; color: #8ae07a; font-weight: 700; }
.lad-c.ok { border-color: #6a8a3a; }
.lad-c.lack { border-color: #6a3a2a; }
.lad-c.lack b { color: #ff8a7a; }
.lad-c .ci, .lad-cap .ci, .lad-rows .ci { width: 18px; height: 18px; }
.lad-caps { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 13px; color: #c8b890; }
.lad-cap { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.lad-cap em { font-style: normal; color: #c8b890; display: inline-flex; align-items: center; }
.lad-cap i { font-style: normal; font-size: 10px; color: var(--muted); }
.lad-cap b { color: #7dff9a; }
.lad-card .btn { margin: 0; }
.lad-card .lad-go { animation: ladGlow 1.4s ease-in-out infinite; }
@keyframes ladGlow { 0%, 100% { box-shadow: 0 0 6px #ffd23a88; } 50% { box-shadow: 0 0 20px #ffd23a; } }
.ub.locked { border-style: dashed; }
.lad-up { position: relative; isolation: isolate; text-align: center; display: grid; gap: 8px; justify-items: center; overflow: hidden; padding-top: 6px; }
.lad-up .lad-rays { position: absolute; inset: -60px; z-index: -1; background: repeating-conic-gradient(from 0deg, #ffd23a33 0 10deg, transparent 10deg 30deg); animation: grSpin 8s linear infinite, grFade .6s ease-out both; pointer-events: none; }
.lad-up .lad-kicker { color: #ffd24a; letter-spacing: 2px; animation: grFade .4s ease-out both; }
.lad-up .lad-title { margin: 0; font-size: 30px; color: #ffe08a; text-shadow: 0 0 12px #ffd23a; animation: grPop .55s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.lad-rows { display: grid; gap: 4px; font-size: 17px; }
.lad-rows > div, .lad-pow { display: grid; grid-template-columns: 3.2em auto 1em auto; gap: 6px; align-items: center; justify-items: end; opacity: 0; animation: ladRow .35s ease-out both; animation-delay: calc(.45s + var(--i) * .18s); }
.lad-rows span, .lad-pow span { justify-self: start; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; }
.lad-rows i, .lad-pow i { color: var(--muted); font-style: normal; font-size: 12px; }
.lad-rows .up, .lad-pow .up { color: #7dff9a; }
.lad-pow { grid-template-columns: 3.2em auto 1em auto auto; font-size: 22px; margin-top: 4px; }
.lad-pow em { font-style: normal; color: #ffd23a; font-size: 16px; font-weight: 700; animation: grPop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.75s + var(--i) * .18s); }
.lad-up .center { animation: grFade .4s ease-out both; animation-delay: calc(.6s + 7 * .18s); }
@keyframes ladRow { from { opacity: 0; transform: translateX(-14px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lad-card .lad-go, .lad-up .lad-rays { animation: none; } .lad-rows > div, .lad-pow { animation-duration: .01s; animation-delay: 0s; } }
/* 公會賽季領土（ui-territory.js）：公會頁的精簡小卡＋「進入領土」 */
.tm-enter { display: grid; gap: 10px; padding: 14px; background: linear-gradient(180deg, #2a2138, #17121f); border: 1px solid #ffd24a55; text-align: center; }
.tm-sum { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.tm-sum > :not(.btn) { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 10px; background: #0007; border: 1px solid #ffd24a33; color: #ffe08a; font-size: 14px; }
.tm-sum .tm-sn { font-size: 16px; text-shadow: 0 2px 0 #000; }
.tm-sum .tm-own i, #terrView .tv-own i { width: 12px; height: 12px; border-radius: 3px; background: var(--gc); box-shadow: 0 0 0 1px #000a; }
.tm-enter .tm-go, .tm-enter .tm-join { width: 100%; }
/* 領土地圖場景（render/terrmap.js）：和主城同一套框架——畫布在 #field 與 #hud 之間（上方資源列、底部導覽列蓋在上面），
   賽季資訊在主城待收成摘要的位置、按鈕列在主城待辦列的位置與樣式；格子小卡是 modal */
#terrView { position: fixed; inset: 0; background: #2b687d; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
#terrView canvas { position: absolute; inset: 0; cursor: grab; }
#terrView canvas:active { cursor: grabbing; }
#terrView .tv-hud { position: absolute; inset: 0; pointer-events: none; }
#terrView .tv-hud > * { pointer-events: auto; }
/* 按鈕列：沿用主城 .town-bar／.tb-b 的外觀（style.css「主城下方按鈕列」），這裡只補顯示條件與位置 */
#terrView .town-bar { display: flex; flex-direction: column; gap: 6px; position: absolute; left: 8px; right: 8px; max-width: 420px; margin: 0 auto; bottom: calc(112px + var(--safe-b)); padding: 6px; border-radius: 16px; background: linear-gradient(#2a1f16f2, #1a130df2); box-shadow: 0 6px 16px #000a, inset 0 0 0 2px #c9a45c55, inset 0 2px 0 #ffffff14; }
#terrView .tv-info { cursor: default; color: #fff3d6; }
#terrView .tv-sn { font-size: 14px; }
#terrView .tv-cd { flex: 1; color: #fff3d6; }
#terrView .tv-own, #terrView .tv-rk, #terrView .tv-pts, #terrView .tv-zone { display: inline-flex; align-items: center; gap: 4px; color: #ffe9b0; }
#terrView .tv-zone { padding: 0 6px 0 2px; border-radius: 8px; background: #0006; box-shadow: inset 0 0 0 1px #ffd24a44; }
#terrView .tv-zone b { color: #ffe9b0; font-family: inherit; }
#terrView .tv-own i { width: 12px; height: 12px; border-radius: 3px; background: var(--gc); box-shadow: 0 0 0 1px #000a; }
#terrView .tv-info .q-help { flex: none; }
#terrView .tb-row .tb-b { flex: 1 1 0; width: auto; }
#terrView .tb-row .tv-self, #terrView .tb-row .tv-join { flex-grow: 1.4; }
#terrView .tv-zoom { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
#terrView .tv-zoom .btn { min-width: 40px; min-height: 36px; padding: 0; font-size: 16px; }
body.terr .stagebar, body.terr .cmd-bar, body.terr #combo, body.terr #bossbar, body.terr .slot, body.terr #goalbar, body.terr #heroFocus { display: none !important; }
@media (max-width: 700px) { body.terr .side-left, body.terr .quest, body.terr .ticker { display: none !important; } #terrView .tv-zoom { display: none; } }
@media (max-width: 760px) { #terrView .town-bar { bottom: calc(76px + var(--safe-b)); left: 6px; right: 6px; } }
/* 新手公會、沒有公會：領土導引卡 */
.tm-guide { justify-items: center; }
.tm-guide-t { font-size: 17px; color: #ffe08a; }
.tm-guide-btns { display: flex; gap: 8px; width: 100%; }
.tm-guide-btns .btn { flex: 1; }
.tm-guide p { margin: 0; }
.tm-card h2 { text-align: center; }
.tm-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); flex-wrap: wrap; }
.tm-pb { position: relative; flex: 1; height: 18px; border-radius: 9px; background: #0009; overflow: hidden; }
.tm-pb i { position: absolute; inset: 0 auto 0 0; }
.tm-pb.def i { background: linear-gradient(180deg, #8ac8ff, #3a78c0); }
.tm-pb.inv i { background: linear-gradient(180deg, #ffb07a, #e0402a); }
.tm-pb b { position: relative; display: block; text-align: center; font-size: 11px; line-height: 18px; color: #fff; text-shadow: 0 1px 2px #000; }
.tm-gd { display: inline-flex; align-items: center; gap: 2px; }
.tm-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tm-legions { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 8px 0; }

/* ---------- 卡關目標（ui-stuck.js）：任務列正上方的小卡，可收起 ---------- */
#stuckCard { position: absolute; left: 8px; bottom: calc(150px + var(--safe-b)); width: min(236px, 58vw); padding: 5px 7px 6px; border-radius: 10px; background: linear-gradient(#3b322aeb, #2a231ceb); border: 2px solid #6b5c49; box-shadow: 0 4px 10px #0008; color: var(--text); display: grid; gap: 4px; z-index: 6; }
#stuckCard[hidden] { display: none; }
#stuckCard.wide { left: auto; right: 8px; bottom: auto; top: calc(168px + var(--safe-t)); width: 250px; }
#stuckCard.wide.fold { width: auto; }
#stuckCard.fold { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
#stuckCard .sk-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#stuckCard .sk-head b { color: #ffd24a; }
#stuckCard .sk-elite { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; border-radius: 6px; font-size: 11px; background: #c0461a; color: #fff; }
#stuckCard .sk-x { margin-left: auto; width: 26px; height: 22px; border-radius: 6px; border: 1px solid #6b5c49; background: #0004; color: var(--text); font-size: 12px; line-height: 1; cursor: pointer; }
#stuckCard .sk-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; font-size: 12px; min-height: 30px; }
#stuckCard .sk-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stuckCard .sk-row .ci { width: 20px; height: 20px; }
#stuckCard .sk-row em { font-style: normal; color: #7dff8a; }
#stuckCard .sk-team { border-bottom: 1px dashed #6b5c4999; padding-bottom: 3px; }
#stuckCard .sk-row.sk-team { grid-template-columns: 20px 1fr 20px 1fr; }
#stuckCard .sk-row em.dn { color: #ff8a7a; }
#stuckCard .sk-row .btn.sm { min-height: 28px; font-size: 12px; border-width: 7px 9px 8px; border-image-width: 7px 9px 8px; padding: 0 2px; }
#stuckCard .sk-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 2px 9px 2px 4px; border-radius: 15px; background: linear-gradient(#3b322aeb, #2a231ceb); border: 2px solid #ffd24a; color: #ffd24a; font-size: 13px; cursor: pointer; box-shadow: 0 0 10px #ffd24a66; }
body.town #stuckCard, body.arena #stuckCard, body.terr #stuckCard { display: none !important; }