/* 幻想世界 — 介面樣式 v1.1「燈下古卷」
 * 視覺語彙（見 docs/02 §5）：胡桃木與墨色為底、羊皮紙文字、舊黃銅只給標題與主按鈕、銅綠代表魔力。
 * 原則：小直角與像素切角、浮雕而非發光、少用漸層；高飽和色只留給稀有度與戰鬥數字。
 */
:root {
  --bg: #15110d; --bg2: #1c1712; --panel: #231c16; --panel2: #2d241c; --well: #110d0a;
  --line: #3b3026; --line2: #574634; --ink: #0b0806;
  --brass: #b8913f; --brass2: #e3c272; --brassDark: #6e5226;
  --text: #ece0c5; --dim: #a8987c; --dim2: #75684f;
  --magic: #7fbfae; --ember: #e0904a; --good: #8fc27a; --bad: #d4645a;
  --hp: #b8473d; --exp: #7fbfae;
  --r0: #b9b2a2; --r1: #86b86c; --r2: #6aa4dc; --r3: #b08ad9; --r4: #e3a24a; --r5: #e0605a;
  --nav-h: 76px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  /* 像素切角：四角各缺 2px 的外框 */
  --notch: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; }
body { overscroll-behavior-y: none;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(227,194,114,.06), transparent 60%); background-attachment: fixed; }
img.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; }

/* ---------- 共用元件 ---------- */
.btn {
  appearance: none; border: 1px solid var(--ink); cursor: pointer; color: #2a1d0b; font-weight: 700; font-size: 14px; letter-spacing: .5px;
  background: #c9a14e; border-radius: 2px; padding: 9px 14px; min-height: 40px; white-space: nowrap;
  box-shadow: inset 0 1px 0 #f0d58f, inset 0 -2px 0 #8a6528; transition: transform .05s, filter .1s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #8a6528; }
.btn.sec { background: var(--panel2); color: var(--text); box-shadow: inset 0 1px 0 #43372a, inset 0 -2px 0 #19130e; border-color: var(--ink); }
.btn.sec:hover { border-color: var(--brassDark); }
.btn.magic { background: #5f9e8f; color: #0e1f1b; box-shadow: inset 0 1px 0 #a6d6c8, inset 0 -2px 0 #3a6a5f; }
.btn.danger { background: #a8443b; color: #fbe9e2; box-shadow: inset 0 1px 0 #d47a6e, inset 0 -2px 0 #6a2520; }
.btn.sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn[disabled] { filter: grayscale(.85) brightness(.65); cursor: not-allowed; }
.btn .cur { display: inline-flex; align-items: center; gap: 2px; }
.cur img { width: 16px; height: 16px; vertical-align: -3px; }

.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 12px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.04), 0 1px 0 var(--ink); }
.card h3 { margin: 0 0 8px; font-size: 15px; color: var(--brass2); display: flex; align-items: center; gap: 8px; letter-spacing: 1px; }
.card h3::before { content: ''; width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); flex: none; }
.card .sub { color: var(--dim); font-size: 13px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--dim); }
.small { font-size: 12px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 2px; background: var(--well); color: var(--dim); border: 1px solid var(--line); margin-right: 2px; }
.tag.gold { color: var(--brass2); border-color: var(--brassDark); }
.tag.magic { color: var(--magic); border-color: #3e6b61; }
.bar { position: relative; height: 10px; background: var(--well); border: 1px solid var(--ink); border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--exp); transition: width .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.bar.hp > i { background: var(--hp); }
.bar.boss > i { background: var(--ember); }
.bar > span { position: absolute; inset: 0; font-size: 9px; line-height: 10px; text-align: center; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.sep { height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); margin: 10px 0; }
.r0 { color: var(--r0); } .r1 { color: var(--r1); } .r2 { color: var(--r2); } .r3 { color: var(--r3); } .r4 { color: var(--r4); } .r5 { color: var(--r5); }

/* ---------- 建角畫面 ---------- */
#create { position: fixed; inset: 0; z-index: 25; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px max(16px, calc((100% - 1000px) / 2)) calc(60px + env(safe-area-inset-bottom)); background: var(--bg); } /* 自己的捲動層（修轉生頁手機捲不動） */
#create[hidden] { display: none; }
.logo { text-align: center; margin: 14px 0 6px; }
.logo h1 { margin: 0; font-size: 36px; letter-spacing: 10px; color: var(--brass2); text-shadow: 0 2px 0 var(--ink), 0 3px 0 var(--brassDark); }
.logo p { margin: 8px 0 0; color: var(--dim); letter-spacing: 4px; font-size: 13px; font-family: var(--serif); }
.lore { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 2px; padding: 14px 16px; color: #dccfb3; line-height: 1.9; font-size: 14px; margin: 16px 0; font-family: var(--serif); }
.cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cls { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 12px 8px 10px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.cls:hover { border-color: var(--line2); background: var(--panel2); }
.cls.on { border-color: var(--brass); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--brassDark); }
.cls.locked { cursor: not-allowed; opacity: .5; }
.cls img { width: 72px; height: 90px; display: block; margin: 0 auto 6px; }
.cls b { display: block; font-size: 16px; font-family: var(--serif); }
.cls small { color: var(--dim); font-size: 12px; }
.cls .lock { position: absolute; top: 6px; right: 6px; font-size: 11px; color: var(--ember); }
.cls-detail { margin-top: 14px; }
.name-row { display: flex; gap: 8px; margin-top: 14px; }
.name-row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--line2); background: var(--well); color: var(--text); }
.name-row input:focus { outline: none; border-color: var(--brass); }

/* ---------- 遊戲主畫面 ---------- */
#game { display: flex; flex-direction: column; min-height: 100%; }
.left { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.hud { display: flex; align-items: center; gap: 10px; padding: 8px 10px 7px; background: var(--bg2); border-bottom: 1px solid var(--ink); box-shadow: 0 1px 0 var(--brassDark); }
.avatar { position: relative; cursor: pointer; width: 44px; height: 44px; border-radius: 2px; background: var(--well); border: 1px solid var(--brass); display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px var(--ink); }
.avatar img { width: 36px; height: 45px; margin-top: 6px; }
.hud .who { flex: 1; min-width: 0; }
.hud .name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); }
.hud .name .lv { color: var(--brass2); margin-left: 6px; font-family: var(--font); font-size: 13px; }
.hud .name .rb { color: var(--magic); font-size: 12px; margin-left: 4px; font-family: var(--font); }
.hud .bar { margin-top: 5px; height: 14px; }
.hud .bar > span { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; color: #f3ead6; text-shadow: 0 1px 0 var(--ink), 0 0 2px var(--ink); } /* 字要完整在條內，不被切 */
.wallet { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet div { display: contents; } /* 2×2 網格：四種貨幣圖示上下對齊、數字右對齊 */
.wallet .cur { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 4px; min-width: 66px; }
.wallet .cur > span { text-align: right; }
.wallet img { width: 20px; height: 20px; flex: none; }

.stage-wrap { position: relative; background: var(--ink); line-height: 0; }
#stage { width: 100%; aspect-ratio: 16 / 9; display: block; max-height: 42vh; object-fit: contain; }
.stage-top { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; line-height: 1.2; pointer-events: none; }
.chip { pointer-events: auto; background: rgba(17,13,10,.82); border: 1px solid var(--line2); color: var(--text); border-radius: 2px; padding: 3px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.chip.fr-chip { color: #ffe08a; border-color: #e9b949; background: rgba(60,44,12,.9); animation: frPulse 1.6s ease-in-out infinite; } @keyframes frPulse { 50% { box-shadow: 0 0 8px rgba(233,185,73,.7); } } /* v7.3.5 好友邀請 */
.chip.gold { border-color: var(--brassDark); color: var(--brass2); }
.stage-bars { display: flex; gap: 10px; align-items: flex-end; padding: 5px 10px 6px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.stage-bars .lbl { font-size: 11px; color: var(--dim); display: flex; justify-content: space-between; margin-bottom: 2px; gap: 6px; white-space: nowrap; }
.stage-bars .lbl span:last-child { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.stage-bars .hp-col { flex: 3; min-width: 0; } .stage-bars .boss-col { flex: 2; min-width: 0; }
.stage-bars .lbl .num { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pot-chip { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; margin-bottom: 1px; font-size: 12px; color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.pot-chip img { width: 16px; height: 16px; }
.pot-chip.low { color: var(--bad); border-color: var(--bad); }
.boss-btn { pointer-events: auto; }
.stage-top .st-left { flex: 1; min-width: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; } /* 狀態圖示接在地圖切換右邊，放不下才換行 */
.stage-top .st-left > .chip { flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buffs { display: flex; gap: 4px; flex-wrap: wrap; line-height: 1.2; }
.buffs .chip { font-size: 11px; padding: 2px 6px; }

/* 技能列：8 格等寬方塊，冷卻以由上往下的暗幕表示 */
.skillbar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 5px 10px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.skillbar .sk { position: relative; aspect-ratio: 1; max-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; justify-self: center; width: 100%; max-width: 44px; }
.skillbar .sk img { width: 100%; height: 100%; display: block; }
.skillbar .sk i { position: absolute; left: 2px; right: 2px; top: 2px; height: 0; max-height: calc(100% - 4px); background: rgba(10,7,5,.7); pointer-events: none; }
.skillbar .sk.off img { filter: grayscale(1) brightness(.6); }
.skillbar .sk.locked img { filter: grayscale(1) brightness(.35); }
.skillbar .sk span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: var(--dim); font-weight: 700; text-shadow: 0 1px 0 #000; }

.log { background: var(--bg2); border-bottom: 1px solid var(--line); padding: 4px 10px; font-size: 12px; height: 46px; overflow: hidden; }
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 19px; }
.log .good { color: var(--good); } .log .bad { color: var(--bad); } .log .warn { color: var(--ember); }
.log .rare { color: var(--magic); } .log .epic { color: var(--r3); } .log .legend { color: var(--r4); font-weight: 700; }

.right { flex: 1; display: flex; flex-direction: column; }
.tabs { display: none; }
.panel { padding: 12px 10px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); } /* 讓出下方選單＋iPhone 安全區，內容不被遮住 */
.panel h2 { font-size: 19px; margin: 4px 0 12px; color: var(--brass2); display: flex; align-items: center; gap: 10px; letter-spacing: 2px; }
.panel h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brassDark), transparent); }

/* 底部導覽（手機）：切角黃銅徽章，和「燈下古卷」界面同一套材質。 */
#bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 4px 3px calc(3px + env(safe-area-inset-bottom)); z-index: 20; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: linear-gradient(180deg, #2a2117 0, #1c1712 18%, #110d0a 100%); /* v7.3.32 改不透明（負責人：下方會穿透看到聊天頻道） */
  border-top: 1px solid var(--brassDark); box-shadow: 0 -1px 0 var(--ink), 0 -5px 18px rgba(5,3,2,.56), inset 0 1px 0 rgba(240,213,143,.08); isolation: isolate; }
#bottomnav::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 3px; height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(227,194,114,.24) 18%, rgba(227,194,114,.08) 50%, rgba(227,194,114,.24) 82%, transparent 98%); }
.nav-btn { --nav-accent: var(--brass2); --nav-glow: rgba(227,194,114,.13); appearance: none; position: relative; min-width: 0; min-height: 68px; padding: 2px 1px 1px;
  background: transparent; border: 0; color: #8c7c61; font-size: 10.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; letter-spacing: .45px; touch-action: manipulation; transition: color .16s ease, background .16s ease; }
.nav-btn::after { content: ''; position: absolute; right: 0; top: 13px; bottom: 10px; width: 1px; background: linear-gradient(180deg, transparent, rgba(87,70,52,.45), transparent); }
.nav-btn:last-child::after { display: none; }
.nav-icon { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; overflow: hidden; clip-path: var(--notch);
  background: radial-gradient(circle at 50% 38%, var(--nav-glow), transparent 61%), linear-gradient(180deg, #2d251e 0, #19130f 100%);
  border: 1px solid #4a3a29; box-shadow: inset 0 1px 0 rgba(255,236,190,.07), inset 0 -2px 0 rgba(5,3,2,.56), 0 1px 0 #080604;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease; }
.nav-icon::before { content: ''; position: absolute; inset: 3px; pointer-events: none; border: 1px solid rgba(184,145,63,.1); clip-path: var(--notch); }
.nav-btn img { position: relative; z-index: 1; width: 34px; height: 34px; object-fit: contain; opacity: .68; filter: grayscale(.24) brightness(.82); transition: opacity .16s ease, filter .16s ease; }
.nav-btn.nav-hero img { width: 28px; height: 34px; margin-top: 3px; }
.nav-label { line-height: 15px; white-space: nowrap; font-weight: 650; text-shadow: 0 1px 0 #000; }
.nav-btn.on { color: var(--nav-accent); background: linear-gradient(180deg, var(--nav-glow), transparent 72%); }
.nav-btn.on::before { content: ''; position: absolute; top: -4px; left: 19%; right: 19%; height: 3px; background: var(--nav-accent);
  box-shadow: 0 0 7px var(--nav-accent), 0 1px 0 rgba(255,255,255,.32); clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 100%, 0 100%); }
.nav-btn.on .nav-icon { transform: translateY(-2px); border-color: var(--nav-accent); filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,236,190,.18), inset 0 -2px 0 rgba(5,3,2,.62), 0 2px 0 #080604, 0 0 9px var(--nav-glow); }
.nav-btn.on .nav-icon::before { border-color: rgba(227,194,114,.28); }
.nav-btn.on img { opacity: 1; filter: none; }
.nav-btn:active .nav-icon { transform: translateY(1px) scale(.96); box-shadow: inset 0 2px 3px rgba(0,0,0,.65); transition-duration: .05s; }
.nav-btn:focus-visible { outline: 2px solid var(--brass2); outline-offset: -3px; }
@media (hover:hover) { .nav-btn:hover { color: var(--text); } .nav-btn:hover .nav-icon { border-color: var(--line2); filter: brightness(1.08); } }
.nav-hero { --nav-accent: #e3c272; --nav-glow: rgba(227,194,114,.17); }
.nav-bag { --nav-accent: #d49b55; --nav-glow: rgba(212,155,85,.18); }
.nav-skill { --nav-accent: #73c8b5; --nav-glow: rgba(95,240,230,.16); }
.nav-map { --nav-accent: #a6c47a; --nav-glow: rgba(166,196,122,.16); }
.nav-social { --nav-accent: #83a9d2; --nav-glow: rgba(106,164,220,.17); }
.nav-shop { --nav-accent: #e3b456; --nav-glow: rgba(227,180,86,.18); }
.nav-more { --nav-accent: #b697d5; --nav-glow: rgba(176,138,217,.17); }
.dot { position: absolute; z-index: 3; top: 2px; right: calc(50% - 23px); min-width: 17px; height: 17px; border-radius: 50%; background: #bd493f; color: #fff4ed;
  font-size: 10px; line-height: 17px; text-align: center; padding: 0 4px; font-weight: 800; box-shadow: 0 0 0 2px var(--bg2), 0 1px 3px #000; }
@media (max-width: 360px) {
  :root { --nav-h: 72px; }
  #bottomnav { padding-left: 1px; padding-right: 1px; }
  .nav-btn { min-height: 64px; font-size: 10px; }
  .nav-icon { width: 39px; height: 39px; }
  .nav-btn img { width: 34px; height: 34px; }
  .nav-btn.nav-hero img { width: 28px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .nav-btn, .nav-icon, .nav-btn img { transition: none; } }

/* ---------- 面板內容 ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; }
.stats-grid div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); padding: 3px 0; }
.stats-grid span { color: var(--dim); }
.stats-grid b { font-weight: 600; }
.attr { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; }
.attr .v { font-weight: 700; font-size: 16px; }
.attr.attr2 { grid-template-columns: 1fr 44px auto; border-bottom: 1px dashed var(--line); padding: 7px 0; } .attr2 .an { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } .attr2 .an small { flex-basis: 100%; font-size: 12px; color: var(--dim2); line-height: 1.4; } .attr2 .v { text-align: right; }
.raid-eff { margin-top: 8px; padding: 8px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,.18); } .re-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; } .re-grid > div { display: grid; grid-template-columns: 1fr auto; row-gap: 1px; font-size: 13px; } .re-grid b { color: var(--gold, #e9b949); } .re-grid small { grid-column: 1 / -1; font-size: 11px; color: var(--dim2); } /* v7.3.5 配點說明 */
.power { font-size: 28px; font-weight: 800; color: var(--brass2); text-shadow: 0 2px 0 var(--ink); font-family: var(--serif); }

.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { position: relative; aspect-ratio: 1; background: var(--well); border: 1px solid var(--line); border-radius: 2px; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.slot:hover { border-color: var(--line2); }
.slot { container-type: inline-size; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc, #fff) 16%, transparent) 0, transparent 62%), var(--well); }
.slot img { width: 40px; height: 40px; } /* 整數倍縮放：圖示 20 像素（含外框＋亮邊）× 2，避免像素寬窄不一而糊掉 */
@container (min-width: 84px) { .slot img { width: 60px; height: 60px; } }
@container (max-width: 44px) { .slot img { width: 20px; height: 20px; } }
.slot img.i24 { width: 56px; height: 56px; } /* 24×24 新圖示（含外框亮邊 28px）× 2 */
@container (max-width: 58px) { .slot img.i24 { width: 28px; height: 28px; } }
.slot .plus { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: var(--brass2); text-shadow: 0 1px 0 #000; }
.slot .slab { position: absolute; left: 4px; top: 2px; font-size: 10px; color: var(--dim2); }
.slot.empty img { opacity: .16; filter: grayscale(1); }
.slot.rare-glow { box-shadow: inset 0 0 0 1px var(--glow), inset 0 2px 4px rgba(0,0,0,.5); }

.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.bag-grid .slot .lk { position: absolute; left: 3px; top: 1px; font-size: 10px; }
.bag-grid .slot .lvl { position: absolute; left: 3px; bottom: 1px; font-size: 9px; color: var(--dim); }
.bag-grid .slot.cant { opacity: .5; }
.bag-grid .slot.up::after { content: '▲'; position: absolute; top: 1px; right: 4px; color: var(--good); font-size: 10px; }
.cons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cons .c { display: flex; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; }
.cons img { width: 32px; height: 32px; }
.cons .n { font-weight: 700; }

.skill { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; }
.skill .ico { width: 60px; height: 60px; display: block; }
.skill.locked { opacity: .5; }
.skill.locked .ico { filter: grayscale(1); }
.switch { position: relative; width: 40px; height: 20px; border-radius: 2px; background: var(--well); border: 1px solid var(--line2); cursor: pointer; flex: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 14px; border-radius: 1px; background: var(--dim2); transition: left .15s; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.switch.on { background: #2e4a43; border-color: #4e8072; } .switch.on::after { left: 20px; background: var(--magic); }

.map-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.map-item.cur { border-color: var(--brass); box-shadow: inset 3px 0 0 var(--brass); }
.map-item.locked { opacity: .5; }
.mob-row { display: flex; gap: 4px; margin-top: 6px; }
.mob-row img { width: 32px; height: 32px; background: var(--well); border-radius: 2px; border: 1px solid var(--line); }
.mob-row img.boss { border-color: var(--ember); }

.subtabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.subtabs button { flex: none; }
.shop-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; }
.shop-item .ico { width: 52px; height: 52px; background: var(--well); border-radius: 2px; border: 1px solid var(--line); display: grid; place-items: center; }
.shop-item .ico img { width: 40px; height: 40px; }
.shop-item.sold { opacity: .4; }
.shop-item.phantom { border-color: var(--r4); box-shadow: inset 3px 0 0 var(--r4); }
.strike { text-decoration: line-through; color: var(--dim2); font-size: 12px; margin-right: 4px; }
.owl { display: flex; gap: 12px; align-items: center; }
.owl img { width: 64px; height: 64px; flex: none; }
.owl .say { background: var(--well); border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; font-size: 13px; line-height: 1.7; position: relative; font-family: var(--serif); }

.talent { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.task { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.task:last-child { border-bottom: 0; }
.task .bar { margin-top: 4px; }

/* 圖鑑 */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cx { position: relative; background: var(--well); border: 1px solid var(--line); border-radius: 2px; padding: 18px 4px 8px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cx:hover { border-color: var(--line2); }
.cx.boss { border-color: var(--brassDark); box-shadow: inset 0 0 0 1px rgba(184,145,63,.25); }
.cx img { width: 54px; height: 54px; object-fit: contain; }
.cx b { font-size: 12px; line-height: 1.3; }
.cx.unknown b { color: var(--dim2); }
.cx.variant { border-color: #5a4378; }
.cx.variant:not(.unknown) { box-shadow: inset 0 0 0 1px rgba(176,138,217,.35); }
.cx.soon { border-style: dashed; border-color: var(--brassDark); }
.map-item.teaser { border-style: dashed; border-color: var(--brassDark); }
.cx .no { position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--dim2); }
.cx .st { color: var(--r4); font-size: 12px; letter-spacing: 1px; }
.cx .st i { color: var(--line2); font-style: normal; }
.cx small { color: var(--dim); font-size: 10px; }

/* ---------- 社群（聊天／公會／組隊） ---------- */
.chat { display: flex; flex-direction: column; gap: 6px; }
.chat-list { background: var(--well); border: 1px solid var(--line); border-radius: 2px; height: 46vh; min-height: 220px; overflow-y: auto; padding: 8px 10px; font-size: 13px; line-height: 1.6; }
.chat-list .m { padding: 2px 0; word-break: break-word; }
.chat-list .m b { color: var(--brass2); font-weight: 600; margin-right: 4px; cursor: pointer; }
.chat-list .m .t { color: var(--dim2); font-size: 11px; margin-right: 4px; }
.chat-list .m.sys { color: var(--dim); font-style: italic; }
.chat-list .m.me b { color: var(--magic); }
.chat-list .ch { font-size: 11px; color: var(--dim2); margin-right: 4px; }
.chat-list .ch.guild { color: var(--good); } .chat-list .ch.party { color: var(--r2); }
.chat-in { display: flex; gap: 6px; }
.chat-in input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 2px; border: 1px solid var(--line2); background: var(--well); color: var(--text); }
.chat-in input:focus { outline: none; border-color: var(--brass); }
.ticker { background: var(--bg2); border-bottom: 1px solid var(--line); padding: 3px 10px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ticker b { color: var(--brass2); font-weight: 600; }
.member { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.member:last-child { border-bottom: 0; }
.member img { width: 32px; height: 40px; }
.member .on { color: var(--good); font-size: 11px; } .member .off { color: var(--dim2); font-size: 11px; }
.net-off { border-left: 3px solid var(--ember); }
/* 所有文字輸入框統一遊戲樣式（之前沒加 class 的輸入框會變成瀏覽器預設的細白框） */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea { font: inherit; font-size: 16px; padding: 8px 10px; min-height: 40px; box-sizing: border-box; border-radius: 2px; border: 1px solid var(--line2); background: var(--well); color: var(--text); }
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus { outline: none; border-color: var(--brass); }
select { font-size: 16px; }
input.text { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 2px; border: 1px solid var(--line2); background: var(--well); color: var(--text); width: 100%; }
input.text:focus { outline: none; border-color: var(--brass); }

/* ---------- 彈窗 / 提示 ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8,6,4,.84); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; background: var(--panel); border: 1px solid var(--brass); border-radius: 2px; box-shadow: 0 0 0 1px var(--ink), 0 12px 40px rgba(0,0,0,.7); }
.modal header { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: var(--panel2); }
.modal header h3 { margin: 0; font-size: 16px; flex: 1; color: var(--brass2); letter-spacing: 1px; }
.modal .x { background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; width: 36px; height: 36px; }
.modal .body { padding: 14px; line-height: 1.6; }
.modal footer { padding: 10px 14px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.modal footer .btn { flex: 1; }
/* 標題固定在上方、按鈕固定在下方，只有內文捲動（負責人 11/8） */
.modal { display: flex; flex-direction: column; overflow: hidden; }
.modal > header, .modal > footer { flex: none; }
.modal > footer { border-top: 1px solid var(--line); padding-top: 10px; }
.modal > .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.item-head { display: flex; gap: 12px; align-items: center; }
.item-head .slot { width: 64px; flex: none; }
.cmp { font-size: 13px; }
.cmp .up { color: var(--good); } .cmp .down { color: var(--bad); }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px); /* 訊息改在上方，最新的在最上面往下排 */ z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: rgba(28,23,18,.97); border: 1px solid var(--brassDark); border-left-width: 3px; color: var(--text); padding: 8px 14px; border-radius: 2px; font-size: 14px; animation: dropIn .2s; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.toast.bad { border-color: var(--bad); } .toast.good { border-color: var(--good); }
.update-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--panel2); border-bottom: 1px solid var(--brass); padding: 8px 12px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
@keyframes fade { from { opacity: 0; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.more-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.more-list button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; }
.more-list img { width: 32px; height: 32px; }
textarea.code { width: 100%; min-height: 90px; font-family: ui-monospace, monospace; font-size: 16px; background: var(--well); color: var(--text); border: 1px solid var(--line2); border-radius: 2px; padding: 8px; }
select { font: inherit; background: var(--well); color: var(--text); border: 1px solid var(--line2); border-radius: 2px; padding: 6px 8px; }
input[type=checkbox] { accent-color: var(--brass); width: 18px; height: 18px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 桌機：左右雙欄 ---------- */
@media (min-width: 900px) {
  body { overflow: hidden; }
  #game { flex-direction: row; height: 100vh; }
  .left { position: relative; width: 58%; max-width: 980px; display: flex; flex-direction: column; border-right: 1px solid var(--ink); box-shadow: 1px 0 0 var(--brassDark); }
  #stage { max-height: none; }
  .log { flex: 1; height: auto; font-size: 13px; overflow: auto; padding: 8px 14px; }
  .log div { line-height: 22px; }
  .right { min-width: 0; height: 100vh; }
  .tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 8px 0; background: var(--bg2); border-bottom: 1px solid var(--line); }
  .tabs button { position: relative; background: none; border: 1px solid transparent; border-bottom: 0; color: var(--dim); padding: 7px 11px; border-radius: 2px 2px 0 0; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; margin-bottom: -1px; }
  .tabs button:hover { color: var(--text); }
  .tabs button img { width: 20px; height: 20px; }
  .tabs button[data-arg="hero"] img { width: 16px; height: 20px; object-fit: contain; }
  .tabs button.on { color: var(--brass2); border-color: var(--line); background: var(--bg); }
  .tabs .dot { top: -4px; right: -4px; }
  .panel { flex: 1; overflow: auto; padding: 14px 16px 30px; }
  #bottomnav { display: none; }
  #toasts { top: 16px; }
  .equip-grid { grid-template-columns: repeat(7, 1fr); }
  .skillbar { padding: 6px 14px; }
}
@media (min-width: 1400px) { .left { width: 62%; } }

/* ===== 帳號與登入（docs/07）：沿用「燈下古卷」——2px 直角、黃銅描邊、面板漸層；品牌色只用在登入鈕本身 ===== */
.pv { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 2px; font: 800 12px/1 var(--font); flex: none; box-shadow: 0 0 0 1px var(--ink); }
.pv-line { background: #06c755; color: #fff; }
.pv-discord { background: #5865f2; color: #fff; }
.pv-email { background: #f4efe4; color: #c5372b; }
.login-btns { display: flex; flex-direction: column; gap: 8px; }
.btn.login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; font-weight: 700; letter-spacing: 1px; }
.btn.login-btn .pv { background: rgba(0,0,0,.22); color: #fff; box-shadow: none; }
.btn.login-line { background: linear-gradient(#0bd45f, #05a948); border-color: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25); }
.btn.login-discord { background: linear-gradient(#6a76f5, #4752c4); border-color: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25); }
.btn.login-email { background: linear-gradient(#f6f1e6, #ddd2bd); border-color: var(--ink); color: #3a2f22; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.18); }
.btn.login-email .pv { background: #fff; color: #c5372b; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.back-title { text-align: center; margin: 6px 0 2px; font-size: 13px; }

/* 抬頭帳號徽章：跟 .tag 同一套語彙 */
.acct-chip { margin-left: 6px; padding: 0 6px; border-radius: 2px; font: 700 11px/17px var(--font); cursor: pointer; vertical-align: 1px; border: 1px solid; background: var(--well); letter-spacing: 1px; }
.acct-chip.guest { color: var(--r4); border-color: var(--brassDark); animation: acctPulse 2.4s ease-in-out infinite; }
.acct-chip.safe { color: var(--good); border-color: #3f5a33; }
@keyframes acctPulse { 50% { color: var(--brass2); border-color: var(--brass); } }
@media (prefers-reduced-motion: reduce) { .acct-chip.guest { animation: none; } }

/* 設定頁：冒險者證（沿用 .card，左側一條狀態色） */
.acct-card { border-left: 3px solid var(--line2); }
.acct-card.guest { border-left-color: var(--r4); }
.acct-card.safe { border-left-color: var(--good); }
.acct-head { display: flex; gap: 12px; align-items: center; }
.acct-head img { width: 48px; height: 48px; object-fit: contain; background: var(--well); border: 1px solid var(--line2); border-radius: 2px; padding: 2px; box-shadow: inset 0 0 0 1px var(--ink); }
.acct-badge { display: inline-block; padding: 0 6px; border-radius: 2px; border: 1px solid; font-size: 11px; font-weight: 700; vertical-align: 1px; background: var(--well); }
.acct-card.guest .acct-badge { color: var(--r4); border-color: var(--brassDark); }
.acct-card.safe .acct-badge { color: var(--good); border-color: #3f5a33; }
.acct-warn { margin-top: 10px; padding: 8px 10px; border-radius: 2px; background: rgba(224,144,74,.08); border: 1px solid var(--brassDark); border-left: 3px solid var(--r4); color: #e9cfa2; font-size: 13px; line-height: 1.6; }
.acct-sec { margin: 14px 0 6px; font-size: 12px; color: var(--brass); letter-spacing: 3px; display: flex; align-items: center; gap: 8px; }
.acct-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brassDark), transparent); }
.acct-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 2px; background: var(--well); border: 1px solid var(--line); }
.acct-row.on { border-color: #3f5a33; }
.acct-row .grow { flex: 1; min-width: 0; }
.acct-row .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-list .acct-row b { min-width: 64px; }
.acct-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.acct-foot details { flex: 1; min-width: 200px; }
.code-input { width: 100%; padding: 10px; font: 700 28px/1 ui-monospace, Menlo, monospace; letter-spacing: 12px; text-align: center; color: var(--brass2); background: var(--well); border: 1px solid var(--line2); border-radius: 2px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.code-input:focus { outline: none; border-color: var(--brass); }

/* ===== 標題畫面（登入頁）：像素月夜營火＋燈下古卷面板 ===== */
.title-screen { position: fixed; inset: 0; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #120f2b; }
#title-scene { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.title-screen::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(8,6,4,.55) 100%); }
.title-ui { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.title-logo { text-align: center; }
.title-logo h1 { margin: 0; font-family: var(--serif); font-size: clamp(40px, 11vw, 64px); letter-spacing: .3em; padding-left: .3em; color: var(--brass2);
  text-shadow: 0 2px 0 var(--ink), 0 4px 0 var(--brassDark), 0 0 24px rgba(246,211,107,.35); }
.title-logo p { margin: 10px 0 0; color: #d8c9a6; letter-spacing: 6px; font-size: 13px; font-family: var(--serif); text-shadow: 0 1px 0 var(--ink); }
.title-panel { width: min(100%, 400px); display: flex; flex-direction: column; gap: 10px; padding: 16px; background: linear-gradient(rgba(35,28,22,.94), rgba(28,23,18,.94));
  border: 1px solid var(--brass); border-radius: 2px; box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(227,194,114,.08), 0 16px 48px rgba(0,0,0,.6); clip-path: var(--notch); }
.title-sub { text-align: center; color: var(--dim); font-size: 12px; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.title-sub::before, .title-sub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); }
.btn.title-main, .btn.title-new { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 54px; padding: 8px 12px; }
.btn.title-main span, .btn.title-new span { font: 700 17px/1.2 var(--serif); letter-spacing: 4px; }
.btn.title-main small, .btn.title-new small { font-size: 12px; opacity: .8; letter-spacing: 1px; }
.title-links { display: flex; justify-content: center; gap: 18px; font-size: 13px; margin-top: 2px; }
.title-foot { color: rgba(216,201,166,.55); font-size: 11px; letter-spacing: 2px; }

/* ===== 手機：戰鬥主畫面＋全螢幕操作頁（桌機維持左右雙欄） ===== */
.sheet-head { display: none; }
@media (max-width: 899px) {
  /* 主畫面：戰鬥＋戰報撐滿到下方選單 */
  #game .left { position: relative; display: flex; flex-direction: column; height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); }
  #game .left .log { flex: 1; height: auto; overflow: auto; font-size: 13px; padding: 8px 12px; }
  #game .left .log div { line-height: 21px; white-space: normal; }
  #game .right { display: none; }
  /* 操作頁：全螢幕，固定在下方選單上面，自己捲動 */
  body.sheet-open { overflow: hidden; }
  body.sheet-open #game .right { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 15;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); animation: sheetIn .18s ease-out; }
  body.sheet-open .panel { padding: 12px 12px 28px; }
  .sheet-head { display: flex; position: sticky; top: 0; z-index: 20; /* 高於紅點（.dot z3）與持有列，捲動時不會穿出去 */ align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: var(--bg2); border-bottom: 1px solid var(--ink); box-shadow: 0 1px 0 var(--brassDark); }
  .sheet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .sheet-mini { max-width: 100%; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-back { background: var(--panel2); color: var(--text); border: 1px solid var(--ink); border-radius: 2px; padding: 6px 10px; font-size: 14px; cursor: pointer; box-shadow: inset 0 1px 0 #43372a, inset 0 -2px 0 #19130e; }
  .sheet-cur { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sheet-cur span { display: inline-flex; align-items: center; gap: 3px; }
  .sheet-cur img { width: 18px; height: 18px; }
}
@keyframes sheetIn { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.sheet-open #game .right { animation: none; } }
.title-links a { color: var(--brass2); }

/* ===== 戰鬥區下方：訊息視窗（戰報＋聊天整合） ===== */
.feed-tabs { display: flex; gap: 2px; padding: 4px 8px 0; background: var(--bg2); border-bottom: 1px solid var(--line); }
.feed-tabs[hidden] { display: none; }
.feed-tabs button { position: relative; background: none; border: 1px solid transparent; border-bottom: 0; color: var(--dim); padding: 4px 12px; border-radius: 2px 2px 0 0; font-size: 13px; cursor: pointer; margin-bottom: -1px; letter-spacing: 2px; }
.feed-tabs button.on { color: var(--brass2); border-color: var(--line); background: var(--bg); }
.feed-tabs .dot { top: 2px; right: 2px; }
.log .m { padding: 1px 0; white-space: normal; word-break: break-word; line-height: 1.55; color: var(--text); }
.log .m b { color: var(--brass2); font-weight: 600; cursor: pointer; }
.log .m.me b { color: var(--magic); }
.log .m.sys { color: var(--brass2); }
.log .ch { font-size: 11px; margin-right: 3px; color: #cfc2a3; }
.log .ch.guild { color: var(--good); } .log .ch.party { color: var(--r2); }
.feed-in { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--line); background: var(--bg2); }
.feed-in[hidden] { display: none; }
.feed-in input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 7px 10px; border-radius: 2px; border: 1px solid var(--line2); background: var(--well); color: var(--text); }
.feed-in input:focus { outline: none; border-color: var(--brass); }
.feed-chbtn { flex: none; min-width: 48px; padding: 7px 8px; border-radius: 2px; border: 1px solid var(--line2); background: var(--panel2); color: #cfc2a3; font-size: 13px; cursor: pointer; }
.feed-chbtn.guild { color: var(--good); border-color: #3f5a33; } .feed-chbtn.party { color: var(--r2); border-color: #2e4a66; }

/* 商店「持有」列：固定在上方 */
.wallet-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 10px; padding: 7px 10px;
  background: var(--panel2); border: 1px solid var(--brassDark); border-radius: 2px; box-shadow: 0 0 0 1px var(--ink), 0 4px 10px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.wallet-bar .wb-lbl { font-size: 12px; color: var(--brass); letter-spacing: 2px; }
.wallet-bar .wb-item { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.wallet-bar img { width: 20px; height: 20px; }
@media (max-width: 899px) { body.sheet-open .wallet-bar { top: calc(env(safe-area-inset-top) + 56px); } }

/* ===== MP（v1.2） ===== */
.stage-bars .mp-lbl { margin-top: 3px; }
.bar.mp i { background: linear-gradient(#5aa0ff, #2f62c4); }
.bar.mp { height: 7px; }
.pot-chip { gap: 6px; }
.pot-chip span { display: inline-flex; align-items: center; gap: 2px; }
.pot-chip span.low { color: var(--bad); }
.pot-chip.low { color: inherit; border-color: var(--line); }
.sk.nomp img { filter: grayscale(.6) brightness(.7) sepia(.3) hue-rotate(180deg); }
.sk.nomp::after { content: 'MP'; position: absolute; right: 2px; bottom: 1px; font: 700 9px/1 var(--font); color: #8fc8ff; text-shadow: 0 0 2px #000; }

/* 紙娃娃（docs/09 ①） */
.doll-stage { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px 10px;
  background: radial-gradient(ellipse at 40px 70%, rgba(255,255,255,.07), transparent 70%); border-radius: 8px; }
.doll-stage .doll-big { width: 90px; height: 110px; flex: none; }
.doll-stage .doll-wpn { position: absolute; left: 78px; top: 34px; width: 36px; height: 36px; transform: rotate(-20deg); }
.doll-stage .small { padding-left: 26px; }

/* ---------- docs/11 P1：詞條品質、首領詞條、具名道具 ---------- */
.affix .stars { color: #8a8070; letter-spacing: -1px; margin-left: 4px; font-size: 11px; }
.affix .stars.q5 { color: #ffd36b; text-shadow: 0 0 4px rgba(255,211,107,.6); }
.boss-affix { background: linear-gradient(90deg, rgba(110,50,170,.45), rgba(110,50,170,.08)); color: #ffd36b; padding: 2px 6px; margin: 2px 0; border-left: 2px solid #b56cff; }
.tag.bossaf { background: #5a2a8a; color: #ffd36b; border-color: #b56cff; }
.tag.uniq { color: #ffa53a; border-color: #ffa53a; } .tag.uniq.myth { color: #ff6b7a; border-color: #ff4d5e; }
.uniq-power { color: #ffa53a; font-weight: 700; } .uniq-power.myth { color: #ff6b7a; }
.uniq-lore { font-style: italic; color: #cbbfa8; margin: 4px 0; }
.slot .uq { position: absolute; left: 2px; top: 0; font-size: 10px; color: #ffd36b; text-shadow: 0 0 3px #000; }
.slot.uniq-slot { box-shadow: 0 0 8px var(--glow, #ffa53a), inset 0 0 6px rgba(255,211,107,.35); }
.cons .c { position: relative; }
.cons .c.rare-c { border-color: #6a4a9a; background: linear-gradient(135deg, rgba(90,42,138,.25), var(--well)); }
.cons .boss-mark { position: absolute; left: 2px; top: 1px; font-size: 9px; background: #5a2a8a; color: #ffd36b; padding: 0 3px; border-radius: 2px; }
.uniq-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; animation: uqfade 3.2s forwards; }
.uniq-flash .pillar { position: absolute; left: 50%; top: 0; bottom: 0; width: 140px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,211,107,.55), rgba(255,255,230,.9), rgba(255,211,107,.55), transparent); filter: blur(6px); animation: uqpillar 3.2s forwards; }
.uniq-flash.myth .pillar { background: linear-gradient(90deg, transparent, rgba(255,77,94,.55), rgba(255,230,230,.9), rgba(255,77,94,.55), transparent); }
.uniq-banner { position: relative; text-align: center; background: rgba(20,14,10,.92); border: 2px solid #ffd36b; padding: 14px 28px; box-shadow: 0 0 40px rgba(255,211,107,.6); animation: uqpop .5s cubic-bezier(.2,1.6,.4,1); max-width: calc(100vw - 32px); }
.uniq-flash.myth .uniq-banner { border-color: #ff4d5e; box-shadow: 0 0 40px rgba(255,77,94,.7); }
.uniq-banner small { display: block; color: #ffd36b; letter-spacing: 3px; font-size: 12px; }
.uniq-flash.myth .uniq-banner small, .uniq-flash.myth .uniq-banner b { color: #ff8a96; }
.uniq-banner b { display: block; font-size: 22px; color: #ffe9a8; margin-top: 4px; }
.uniq-banner em { display: block; font-style: normal; font-size: 12px; color: #8fe39a; margin-top: 4px; }
@keyframes uqpillar { 0% { opacity: 0; transform: translateX(-50%) scaleX(.2); } 15% { opacity: 1; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(1.6); } }
@keyframes uqpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes uqfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 戰鬥畫面下方狀態列（2026-11-02 改版）：2×2 對齊格線、文字放進條內、無空隙 ----------
 *  [ 生命 ████████ 484/1K ] [ 首領能量 ███ 0% ]
 *  [ 魔力 ██████   106/143 ] [ 🧪35  🧪30 | 挑戰 ] */
.stage-bars { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 5px 8px; align-items: stretch; padding: 6px 10px; }
.stage-bars .bar.sb { height: 18px; margin: 0; border-radius: 2px; }
.stage-bars .bar.sb > b, .stage-bars .bar.sb > span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11px; line-height: 1; color: #f3ead6; text-shadow: 0 1px 0 var(--ink), 0 0 2px var(--ink), 0 0 2px var(--ink); white-space: nowrap; pointer-events: none; }
.stage-bars .bar.sb > b { left: 6px; font-weight: 700; letter-spacing: 1px; }
.stage-bars .bar.sb > span { right: 6px; left: auto; inset-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.stage-bars .bar.sb.mp > i { background: linear-gradient(#5aa0ff, #2f62c4); }
.stage-bars .bar.sb.boss > i { background: linear-gradient(#ffb35a, #c4541e); }
.stage-bars .sb-side { display: flex; gap: 6px; min-width: 0; }
.stage-bars .pot-chip { flex: 1; height: 18px; margin: 0; padding: 0 6px; justify-content: space-around; box-sizing: border-box; font-size: 12px; }
.stage-bars .pot-chip img { width: 14px; height: 14px; }
.stage-bars .boss-btn { flex: none; height: 18px; padding: 0 8px; font-size: 11px; line-height: 16px; }
@media (min-width: 900px) { .stage-bars .bar.sb, .stage-bars .pot-chip, .stage-bars .boss-btn { height: 20px; } .stage-bars .bar.sb > b, .stage-bars .bar.sb > span { font-size: 12px; } }
.stage-top .st-right { display: flex; gap: 6px; align-items: flex-start; flex: none; }
.stage-top .chip { white-space: nowrap; }
.stage-top .chip.snd { pointer-events: auto; cursor: pointer; min-width: 26px; text-align: center; }
.stage-top .chip.snd.off { opacity: .55; }
.stage-top .chip.snd.off { text-decoration: line-through; }
.stage-top .chip.snd.need { color: #ffd36b; border-color: #ffd36b; animation: sndpulse 1.4s ease-in-out infinite; }
@keyframes sndpulse { 50% { box-shadow: 0 0 10px rgba(255,211,107,.7); } }

/* 寶物收藏冊（docs/11 P3） */
.cx.tr.leg:not(.unknown) { border-color: #a8741e; box-shadow: inset 0 0 0 1px rgba(242,193,78,.3); }
.cx.tr.myth:not(.unknown) { border-color: #b8432e; box-shadow: inset 0 0 0 1px rgba(255,77,94,.35), 0 0 6px rgba(255,77,94,.25); }
.cx.tr.unknown img, img.sil { filter: brightness(0) opacity(.35); }
.cx.tr.unknown b { color: var(--dim2); }
.card.map-item.over { opacity: .85; }
.base-line { color: #a8c8e8; margin-top: 4px; }
/* 核心鍛造／地圖套裝（docs/11 P4） */
.set-card.locked { opacity: .7; }
.set-sw { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.set-sw i { width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(0,0,0,.4); }
.set-line { color: var(--dim); } .set-line.on { color: #7fe07a; font-weight: 700; }
.set-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; }
.set-part { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; background: var(--well); border: 1px solid var(--line); padding: 6px 2px; }
.set-part img { width: 40px; height: 40px; } .set-part small { font-size: 10px; line-height: 1.2; }
.slot .uq.set { color: #7fe07a; }
/* 職業天賦樹（docs/15 B） */
.talent-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.talent-col { padding: 8px 6px; } .talent-col h3 { font-size: 13px; }
.tnode { background: var(--well); border: 1px solid var(--line); padding: 6px 4px; margin-bottom: 6px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.tnode b { font-size: 12px; } .tnode small { color: var(--dim); font-size: 10px; } .tnode .small { font-size: 10px; line-height: 1.25; }
.tnode.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px rgba(242,193,78,.25); } .tnode.on small { color: var(--brass); }
.tnode.core { border-style: double; border-width: 3px; } .tnode.locked { opacity: .45; }
.adv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.adv { background: var(--well); border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.adv.on { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
/* 信箱（docs/17 F1） */
.chip.mail { cursor: pointer; } .chip.mail.new { color: #ffd36b; border-color: #ffd36b; animation: pulseGlow 1.6s infinite; }
.mail-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mail { display: flex; gap: 8px; align-items: center; background: var(--well); border: 1px solid var(--line); padding: 8px; }
.mail.done { opacity: .55; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 rgba(255,211,107,0); } 50% { box-shadow: 0 0 8px rgba(255,211,107,.7); } }

/* ---------- 夢境扭蛋（docs/17 F2） ---------- */
.gacha-top { display: flex; gap: 12px; align-items: center; }
.gacha-top .grow { flex: 1; min-width: 0; }
.gacha-machine { position: relative; width: 84px; height: 108px; flex: none; }
.gacha-machine.shake { animation: gmShake .5s ease-in-out; }
@keyframes gmShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.gm-dome { position: absolute; left: 6px; top: 4px; width: 72px; height: 64px; border-radius: 36px 36px 8px 8px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(120,140,220,.18) 45%, rgba(40,40,90,.55)); border: 2px solid #cfd8ff; overflow: hidden; }
.gm-dome i { position: absolute; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset -2px -2px 0 rgba(0,0,0,.25); }
.gm-dome i:nth-child(1) { left: 8px; top: 38px; background: #e8e8e8; } .gm-dome i:nth-child(2) { left: 24px; top: 44px; background: #6fb4ff; }
.gm-dome i:nth-child(3) { left: 40px; top: 36px; background: #c08bff; } .gm-dome i:nth-child(4) { left: 52px; top: 46px; background: #ffcf4a; } .gm-dome i:nth-child(5) { left: 30px; top: 26px; background: #e8e8e8; }
.gm-moon { position: absolute; left: 0; right: 0; top: -6px; text-align: center; color: #ffe9a8; font-size: 22px; text-shadow: 0 0 6px #ffd56b; }
.gm-base { position: absolute; left: 10px; top: 66px; width: 64px; height: 40px; background: linear-gradient(#4b3f6e, #2a2140); border: 2px solid #8a7ac0; border-radius: 4px; }
.gm-base span { position: absolute; left: 22px; top: 12px; width: 18px; height: 14px; background: #1b1425; border: 2px solid #cfd8ff; border-radius: 0 0 8px 8px; }
.gacha-cur { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 14px; align-items: center; }
.pity { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.pity-bar { flex: 1; height: 8px; background: var(--well); border: 1px solid var(--line2); }
.pity-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c08bff, #ffcf4a); }
.gacha-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 2px; }
.gacha-btns .gfree { grid-column: 1 / -1; background: linear-gradient(#ffe9a8, #e3c272); }
.glims { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 6px; }
.glim { display: flex; gap: 8px; align-items: center; background: var(--well); border: 1px solid var(--line); padding: 6px; }
.gsw { display: inline-block; width: 28px; height: 28px; border: 2px solid; flex: none; }
.gex { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.gball-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gball-grid.ten { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 60vh; overflow-y: auto; }
.gball-card { text-align: center; background: var(--well); border: 1px solid var(--tc); padding: 8px 6px; opacity: 0; animation: gbIn .4s ease-out forwards; }
.gball-card.t-legend { box-shadow: 0 0 12px var(--tc); } .gball-card.t-epic { box-shadow: 0 0 6px var(--tc); }
@keyframes gbIn { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.gball { width: 28px; height: 28px; margin: 0 auto 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--tc) 55%, rgba(0,0,0,.4)); }
.gb-tier { font-size: 12px; font-weight: 700; } .gb-name { font-size: 14px; } .gb-dup { font-size: 12px; color: var(--dim, #aaa); } .gb-new { font-size: 12px; color: #ffcf4a; font-weight: 700; }

/* 頭像個人選單：信箱、扭蛋、稱號、外觀（取代戰鬥畫面上的信箱 chip） */
/* 頭像外框：依配戴稱號變化造型（頭像本身 overflow hidden，不會跑出框） */
.av-wrap { position: relative; flex: none; cursor: pointer; }
.av-wrap::before, .av-wrap::after { content: ''; position: absolute; inset: -4px; pointer-events: none; display: none; }
.av-wrap.t-map::before { display: block; border: 2px solid #c9d1dc; clip-path: polygon(0 0, 14px 0, 14px 2px, 2px 2px, 2px 14px, 0 14px, 0 100%, 14px 100%, 14px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 14px), 0 calc(100% - 14px), 0 0, 100% 0, 100% 14px, calc(100% - 2px) 14px, calc(100% - 2px) 2px, calc(100% - 14px) 2px, calc(100% - 14px) 0, 100% 0, 100% 100%, calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 14px), 100% calc(100% - 14px)); }
.av-wrap.t-map .avatar { box-shadow: inset 0 0 0 1px var(--ink), 0 0 6px rgba(201,209,220,.45); }
.av-wrap.t-variant::before { display: block; border: 2px solid #b48cff; box-shadow: 0 0 10px #8a4fd0, inset 0 0 6px rgba(180,140,255,.5); animation: avPulse 2.4s ease-in-out infinite; }
.av-wrap.t-master::before { display: block; inset: -5px; border: 2px solid #ffd36b; box-shadow: 0 0 12px #ff9f43, inset 0 0 6px rgba(255,211,107,.6); animation: avPulse 1.8s ease-in-out infinite; }
.av-wrap.t-master::after { display: block; inset: auto; left: 50%; top: -7px; width: 20px; height: 9px; transform: translateX(-50%); background: #ffd36b; filter: drop-shadow(0 0 3px #ff9f43); clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
@keyframes avPulse { 50% { opacity: .55; } }
.av-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d8453a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg2); }
.av-badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -4px; right: -4px; }
.me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: var(--well); border: 1px solid var(--line2); color: var(--text); font: inherit; cursor: pointer; }
.me-tile .ic { font-size: 24px; line-height: 1; } .me-tile small { color: var(--dim); font-size: 11px; text-align: center; }
.me-tile .av-badge { top: 4px; right: 4px; box-shadow: none; }
.title-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.title-list .btn { justify-content: flex-start; text-align: left; }

/* 超過安定值強化成功特效（+7 以上） */
.enh-fx { --c: #ffd36b; --c2: #fff3c4; position: fixed; inset: 0; z-index: 9998; pointer-events: none; display: grid; place-items: center; animation: uqfade 2.4s forwards; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%); }
.enh-fx.epic { --c: #c08bff; --c2: #f0e2ff; } .enh-fx.myth { --c: #ff4d5e; --c2: #ffe0b0; }
.enh-fx > * { grid-area: 1 / 1; }
.enh-ring { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--c2); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); animation: enhRing .9s ease-out forwards; }
.enh-sparks { position: relative; width: 0; height: 0; }
.enh-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--c2); box-shadow: 0 0 8px var(--c); opacity: 0; animation: enhSpark .9s ease-out forwards; }
.enh-card { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(20,14,10,.92); border: 2px solid var(--c); padding: 12px 24px; box-shadow: 0 0 36px var(--c); animation: uqpop .45s cubic-bezier(.2,1.6,.4,1); max-width: calc(100vw - 32px); }
.enh-card img { width: 64px; height: 64px; filter: drop-shadow(0 0 8px var(--c)); animation: enhGlow .6s ease-in-out 3 alternate; }
.enh-card b { font-size: 34px; line-height: 1.1; color: var(--c2); text-shadow: 0 0 10px var(--c), 0 2px 0 #000; }
.enh-card span { font-size: 15px; color: var(--text); } .enh-card small { font-size: 12px; letter-spacing: 3px; color: var(--c); }
.enh-fx.myth .enh-card b { background: linear-gradient(90deg, #ff4d5e, #ffd36b, #8fe39a, #6fb4ff, #c08bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes enhRing { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes enhSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); } }
@keyframes enhGlow { to { filter: drop-shadow(0 0 18px var(--c)) brightness(1.4); } }
/* 金色（主要）按鈕上的次要文字：改深棕色，避免淡灰字在金底上看不清 */
.btn:not(.sec) .muted, .btn:not(.sec) small { color: #4a3210; opacity: 1; }

/* 扭蛋開獎（v2.5.4）：球落下 → 裂開 → 道具原圖＋稀有度光芒 */
.gres { position: relative; display: grid; gap: 8px; cursor: pointer; }
.gres.one { grid-template-columns: minmax(0, 200px); justify-content: center; }
.gres.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 380px) { .gres.ten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gcard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 104px; padding: 8px 2px 6px; background: var(--well); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); overflow: hidden; text-align: center; }
.gres.one .gcard { min-height: 170px; padding-top: 16px; }
.gcard.t-legend { box-shadow: inset 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent); }
.gcard.t-epic { box-shadow: inset 0 0 10px color-mix(in srgb, var(--tc) 35%, transparent); }
.gc-ball { position: absolute; left: 50%; top: 14px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--tc) 55%, rgba(0,0,0,.45)); opacity: 0; animation: gcDrop .35s cubic-bezier(.3,1.5,.5,1) forwards, gcShake .25s ease-in-out .35s 2, gcCrack .2s ease-in forwards; animation-delay: calc(var(--d) - .5s), calc(var(--d) - .15s), var(--d); }
.gres.one .gc-ball { top: 30px; width: 44px; height: 44px; margin-left: -22px; }
.gc-burst { position: absolute; left: 50%; top: 30px; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 10%, var(--tc) 12%, transparent 16% 35%, var(--tc) 37%, transparent 41% 60%, var(--tc) 62%, transparent 66% 85%, var(--tc) 87%, transparent 91%); opacity: 0; animation: gcBurst .7s ease-out forwards; animation-delay: var(--d); pointer-events: none; }
.gres.one .gc-burst { top: 52px; width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.gcard.t-common .gc-burst { display: none; }
.gcard.t-legend .gc-burst { animation: gcBurst .9s ease-out forwards, gcSpin 3s linear infinite; animation-delay: var(--d), var(--d); }
.gc-ic { position: relative; height: 48px; display: grid; place-items: center; opacity: 0; transform: scale(.3); animation: gcPop .35s cubic-bezier(.2,1.6,.4,1) forwards; animation-delay: calc(var(--d) + .08s); }
.gres.one .gc-ic { height: 76px; }
.gc-ic img { width: 42px; height: 42px; filter: drop-shadow(0 0 4px var(--tc)); }
.gres.one .gc-ic img { width: 66px; height: 66px; }
.gc-ic .gc-plus { position: absolute; right: -8px; bottom: 0; font-style: normal; font-size: 12px; color: var(--tc); font-weight: 700; }
.gc-sw { display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid var(--cc); box-shadow: 0 0 10px var(--cc); color: var(--cc); font-size: 16px; font-weight: 700; }
.gc-sw.k-aura { border-radius: 50%; } .gc-sw.k-nameColor { background: color-mix(in srgb, var(--cc) 25%, transparent); }
.gc-tier, .gc-name, .gc-dup, .gc-new { opacity: 0; animation: gcFade .3s forwards; animation-delay: calc(var(--d) + .2s); }
.gc-tier { font-size: 11px; font-weight: 700; color: var(--tc); line-height: 1.2; }
.gc-name { font-size: 12px; line-height: 1.25; color: var(--text); word-break: break-all; }
.gres.one .gc-name { font-size: 16px; } .gres.one .gc-tier { font-size: 13px; }
.gc-dup { font-size: 10px; color: var(--dim, #aaa); } .gc-new { position: absolute; top: 2px; right: 3px; font-size: 10px; font-weight: 700; color: #ffcf4a; }
.g-flash { position: absolute; inset: -40px; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0; animation: gFlash .9s ease-out forwards; background: radial-gradient(circle, rgba(255,240,190,.95), rgba(255,207,74,.55) 40%, transparent 75%); }
.g-flash.epic { background: radial-gradient(circle, rgba(240,226,255,.95), rgba(192,139,255,.55) 40%, transparent 75%); }
.g-flash b { font-size: 30px; color: #fff; text-shadow: 0 0 12px #ffcf4a, 0 2px 0 #000; letter-spacing: 4px; }
.g-flash.epic b { text-shadow: 0 0 12px #c08bff, 0 2px 0 #000; }
.gres.skip *, .gres.skip *::before { animation-delay: 0s !important; animation-duration: .01s !important; }
.gres.skip .g-flash { display: none; }
@keyframes gcDrop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes gcShake { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes gcCrack { to { opacity: 0; transform: scale(1.8); } }
@keyframes gcBurst { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: .9; } 100% { opacity: .35; transform: scale(1); } }
@keyframes gcSpin { to { rotate: 360deg; } }
@keyframes gcFade { to { opacity: 1; } }
@keyframes gcPop { to { opacity: 1; transform: scale(1); } }
@keyframes gFlash { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* 狀態圖示＋倒數環（v2.5.6）：環的剩餘比例＝剩餘時間／本次累積最長時間 */
.buffs { gap: 6px; align-items: center; flex: 0 1 auto; min-width: 0; }
.bf { pointer-events: auto; cursor: pointer; position: relative; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p, 100) * 1%), rgba(255,255,255,.14) 0); box-shadow: 0 1px 3px rgba(0,0,0,.6); flex: none; }
.bf > i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(17,13,10,.9); font-style: normal; font-size: 14px; line-height: 1; }
.bf img { width: 18px; height: 18px; }
.bf > b { position: absolute; right: -5px; bottom: -4px; min-width: 14px; padding: 0 2px; border-radius: 7px; background: rgba(17,13,10,.92); border: 1px solid var(--c); color: var(--text); font-size: 9px; line-height: 12px; text-align: center; font-variant-numeric: tabular-nums; }

.stage-top .st-left .bf { width: 28px; height: 28px; } .stage-top .st-left .bf img { width: 17px; height: 17px; }

/* 戰力移到經驗條下方（v2.5.8） */
.hud-power { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--brass2); line-height: 1.2; cursor: pointer; font-variant-numeric: tabular-nums; }
.hud-power::before { content: '⚔ '; color: var(--brass); }

/* 聲音按鈕移到戰鬥區域右下（v2.5.9） */
.st-br { position: absolute; right: 8px; bottom: 6px; z-index: 2; display: flex; gap: 6px; align-items: center; } .st-br[hidden], .st-br > [hidden] { display: none !important; }
.st-snd-br { line-height: 1.2; min-width: 26px; text-align: center; }
.chip.snd.off { opacity: .55; text-decoration: line-through; }
.chip.snd.need { color: #ffd36b; border-color: #ffd36b; animation: sndpulse 1.4s ease-in-out infinite; }

/* 開寶箱特效（v2.6.1）：l0 一般、l1 稀有、l2 史詩、l3 傳說、l4 神話／具名。全部以舞台中心絕對定位，避免光柱撐高版面而跑版 */
.chest-fx { --c: #ffd36b; position: fixed; inset: 0; z-index: 9997; pointer-events: none; overflow: hidden; }
.cf-flash { position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, #fff) 0%, color-mix(in srgb, var(--c) 35%, transparent) 35%, transparent 75%); opacity: 0; animation: cfFlash 1.6s ease-out .35s forwards; }
.cf-stage { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; animation: cfOut .35s ease-in forwards; animation-delay: var(--out, 1s); }
.chest-fx.l1 .cf-stage { --out: 1.55s; } .chest-fx.l2 .cf-stage { --out: 1.75s; } .chest-fx.l3 .cf-stage { --out: 2.45s; } .chest-fx.l4 .cf-stage { --out: 2.85s; }
.cf-stage > * { position: absolute; }
.cf-beam { left: calc(50% - 35px); top: calc(50% - 50vh); width: 70px; height: 100vh; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, transparent), rgba(255,255,255,.8), color-mix(in srgb, var(--c) 55%, transparent), transparent); filter: blur(5px); animation: cfBeam 1.4s ease-out .4s forwards; }
.cf-rays { left: 20px; top: 20px; width: 200px; height: 200px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, #fff) 0 12%, transparent 13%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 75%, transparent) 0 6deg, transparent 6deg 24deg); mask: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); animation: cfRays 1s ease-out .35s forwards; }
.chest-fx.l2 .cf-rays, .chest-fx.l3 .cf-rays, .chest-fx.l4 .cf-rays { left: -20px; top: -20px; width: 280px; height: 280px; animation: cfRays 1.4s ease-out .35s forwards, cfSpin 4s linear .35s infinite; }
.cf-coins { left: 50%; top: 50%; width: 0; height: 0; }
.cf-coins i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: #ffd36b; box-shadow: 0 0 4px #ffb02e, inset -1px -1px 0 #b8741e; opacity: 0; animation: cfCoin .7s ease-out forwards; }
/* 寶箱：同一張圖切成蓋子與箱身，蓋子往後掀開，箱口透出光 */
.cf-box { left: 84px; top: 84px; width: 72px; height: 72px; animation: cfShake .3s ease-in-out; }
.cf-box img { position: absolute; inset: 0; width: 72px; height: 72px; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.cf-box .base { clip-path: inset(46% 0 0 0); }
.cf-box .lid { clip-path: inset(0 0 54% 0); transform-origin: 20% 46%; animation: cfLid .35s cubic-bezier(.3,1.4,.5,1) .3s forwards; }
.cf-glow { left: 6px; top: 22px; width: 60px; height: 22px; position: absolute; border-radius: 50%; background: radial-gradient(ellipse, #fff, var(--c) 45%, transparent 75%); opacity: 0; animation: cfGlow 1s ease-out .3s forwards; }
.cf-loot { left: -60px; right: -60px; bottom: calc(50% + 46px); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; animation: cfLoot .45s cubic-bezier(.2,1.6,.4,1) .45s forwards; }
.cf-loot img { width: 56px; height: 56px; filter: drop-shadow(0 0 10px var(--c)); }
.cf-loot span { font-size: 14px; font-weight: 700; white-space: nowrap; background: rgba(17,13,10,.88); border: 1px solid var(--c); padding: 2px 8px; text-shadow: 0 1px 0 #000; }
.cf-banner { left: -80px; right: -80px; top: calc(50% + 46px); text-align: center; white-space: nowrap; font-size: 24px; font-weight: 900; letter-spacing: 4px; color: #fff; text-shadow: 0 0 12px var(--c), 0 0 24px var(--c), 0 2px 0 #000; opacity: 0; animation: cfBanner 2.2s ease-out .5s forwards; }
@keyframes cfShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.05); } 75% { transform: rotate(10deg) scale(1.05); } }
@keyframes cfLid { to { transform: translate(-4px, -16px) rotate(-32deg); } }
@keyframes cfGlow { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.3); } 100% { opacity: .5; transform: scale(1); } }
@keyframes cfRays { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes cfSpin { to { rotate: 360deg; } }
@keyframes cfCoin { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(20px); } }
@keyframes cfBeam { 0% { opacity: 0; transform: scaleX(.2); } 25% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.5); } }
@keyframes cfLoot { from { opacity: 0; transform: translateY(40px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cfFlash { 0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: 0; } }
@keyframes cfBanner { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes cfOut { to { opacity: 0; transform: scale(.9); } }

.gear-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; }

/* 世界首領（docs/17 F3） */
.wb-chip { color: #ffcf8a; border-color: #ff7a4a; } .wb-chip.fight { color: #fff; background: rgba(160,30,30,.85); border-color: #ff4d5e; animation: pulseGlow 1.4s infinite; }
.wb-head { display: flex; gap: 12px; align-items: center; }
.wb-img { width: 128px; height: 128px; object-fit: contain; flex: none; filter: drop-shadow(0 0 8px rgba(255,77,94,.5)); }
.wb-img.fight { animation: wbBob 1.6s ease-in-out infinite; }
@keyframes wbBob { 50% { transform: translateY(-4px) scale(1.03); } }
.wb-name { font-size: 18px; color: #ffb08a; }
.wb-hp { position: relative; height: 22px; margin-top: 10px; background: #2a1014; border: 1px solid #ff4d5e; }
.wb-hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff4d5e, #ff9f43); transition: width .5s; }
.wb-hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.wb-me { background: var(--well); border: 1px solid var(--line2); padding: 8px; margin: 6px 0; position: relative; }
.wb-pop { margin-left: 8px; color: #ffcf4a; font-weight: 700; animation: gcFade .3s; }
.wb-top { display: flex; flex-direction: column; gap: 2px; max-height: 26vh; overflow-y: auto; }
.wb-next { margin: 10px 0 6px; }
.av-wrap.t-boss::before { display: block; border: 2px solid #ff6b4a; box-shadow: 0 0 10px #ff4d5e, inset 0 0 6px rgba(255,107,74,.5); animation: avPulse 1.6s ease-in-out infinite; }

.wb-tower { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-bottom: 6px; }
.wb-tower span { text-align: center; font-size: 10px; padding: 3px 0; background: var(--well); border: 1px solid var(--line); color: var(--dim, #888); }
.wb-tower span.done { background: #3a2a14; color: #ffd36b; border-color: #a8741e; } .wb-tower span.cur { background: #5a1a2a; color: #fff; border-color: #ff4d5e; font-weight: 700; animation: pulseGlow 1.6s infinite; }
@media (max-width: 420px) { .wb-head { flex-direction: column; text-align: center; } }

/* 競技場（docs/17 F4） */
.ar-me { display: flex; gap: 12px; align-items: center; }
.ar-badge { flex: none; width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; border: 2px solid var(--tc); background: radial-gradient(circle, color-mix(in srgb, var(--tc) 25%, transparent), var(--well) 70%); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 50%, transparent); }
.ar-badge b { font-size: 12px; color: var(--tc); }
.ar-tier { display: inline-block; font-size: 11px; border: 1px solid; padding: 0 4px; border-radius: 2px; }
.ar-opp { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ar-face { width: 40px; height: 50px; display: grid; place-items: center; background: var(--well); flex: none; } .ar-face img { width: 32px; height: 40px; }
.ar-duel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; cursor: pointer; min-height: 200px; }
.ar-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ar-side b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ar-fighter { width: 72px; height: 90px; } .ar-fighter.flip { transform: scaleX(-1); }
.ar-fighter.hit { animation: arHit .25s; } .ar-fighter.flip.hit { animation: arHitF .25s; }
@keyframes arHit { 50% { filter: brightness(2.2); transform: translateX(-4px); } } @keyframes arHitF { 50% { filter: brightness(2.2); transform: scaleX(-1) translateX(-4px); } }
.ar-vs { font-size: 22px; font-weight: 900; color: #ff7a4a; }
.ar-hp { position: relative; width: 100%; height: 14px; background: #2a1014; border: 1px solid var(--line2); }
.ar-hp i { display: block; height: 100%; background: linear-gradient(90deg, #e0475b, #ff9f43); transition: width .15s; }
.ar-hp span { position: absolute; inset: 0; font-size: 10px; display: grid; place-items: center; text-shadow: 0 1px 1px #000; }
.ar-pops { position: absolute; inset: 0; pointer-events: none; }
.ar-pop { position: absolute; top: 45%; font-weight: 700; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; animation: arPop .7s ease-out forwards; }
.ar-pop.to-b { right: 14%; } .ar-pop.to-a { left: 14%; } .ar-pop.crit { color: #ffcf4a; font-size: 18px; }
@keyframes arPop { to { transform: translateY(-36px); opacity: 0; } }
.ar-result { text-align: center; margin: 8px 0; }

/* 血盟攻城（docs/17 F5） */
.sg-castle { border-left: 3px solid var(--cc); }
.sg-castle h3 { color: var(--cc); }
.gw-land { border-left: 3px solid var(--cc); padding: 6px 8px; margin-top: 8px; background: rgba(0,0,0,.18); }
.gw-land b { color: var(--cc); }
.gw-rates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gw-score { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.gw-score b { min-width: 2.5em; text-align: center; font-size: 18px; color: var(--brass2); }
.gw-bar { flex: 1; height: 10px; background: var(--bad); border: 1px solid var(--ink); position: relative; overflow: hidden; }
.gw-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); }
.gw-foe { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.gw-foe .grow { min-width: 0; }
.sg-fight { margin: 6px 0; padding: 6px; background: var(--well); border: 1px solid var(--line2); }
.me-grid { grid-template-columns: repeat(3, 1fr); }

/* 紅包（docs/17 F7） */
.rp-btn { background: linear-gradient(#e0475b, #a52a43); color: #ffe9a8; border-color: #ffd36b; margin-left: 4px; padding: 2px 8px; font-size: 12px; }

/* Codex 美術整合（docs/18） */
.gacha-machine.art { width: 96px; height: 120px; } .gacha-machine.art img { width: 96px; height: 120px; image-rendering: pixelated; }
.gacha-machine.art.shake { animation: none; }
.gc-ball.art { background: none; border-radius: 0; width: 36px; height: 36px; margin-left: -18px; image-rendering: pixelated; }
.gres.one .gc-ball.art { width: 48px; height: 48px; margin-left: -24px; }
.ui-ic { width: 20px; height: 20px; vertical-align: -4px; image-rendering: pixelated; }
.me-ic { width: 32px; height: 32px; image-rendering: pixelated; }
.mail-ic { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }

/* 夢境裂隙（docs/17 F7） */
.rift { border-left: 3px solid var(--rc); } .rift h3 { color: var(--rc); }
.rift-waves { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 4px 0 6px; }
.rift-waves span { text-align: center; font-size: 11px; padding: 3px 0; background: var(--well); border: 1px solid var(--line); }
.rift-waves span.done { background: #2a2a4a; color: #b4a8ff; border-color: #6a5acd; } .rift-waves span.cur { background: #3a1a5a; color: #fff; border-color: var(--rc); animation: pulseGlow 1.6s infinite; }

/* 夢偶・坐騎・變身（docs/17 F6） */
.comp-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.comp-row img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; } .comp-row.locked img { filter: grayscale(1) brightness(.6); }
.comp-row .col { display: flex; flex-direction: column; gap: 4px; } .comp-ic { font-size: 26px; width: 40px; text-align: center; flex: none; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 40vh; overflow-y: auto; }
.tf-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: var(--well); border: 1px solid var(--line2); color: var(--text); font: inherit; cursor: pointer; }
.tf-cell img { width: 36px; height: 36px; image-rendering: pixelated; } .tf-cell small { font-size: 10px; line-height: 1.2; text-align: center; }
.tf-cell.seen { border-color: #c08bff; } .tf-cell.seen::after { content: '✦'; color: #c08bff; font-size: 10px; }

/* 轉生儀式畫面 */
#create.rebirth-mode { background: radial-gradient(ellipse at 50% 115%, rgba(255,214,120,.38), transparent 55%), linear-gradient(#070614, #15103a 45%, #2a1d4a 80%, #3a2a3a); }
.rb-sky, .rb-well { position: fixed; inset: 0; pointer-events: none; }
.rb-sky i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: #ffe9a8; border-radius: 50%; box-shadow: 0 0 6px #ffd36b; opacity: 0; animation: rbRise linear infinite; }
@keyframes rbRise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-105vh); opacity: 0; } }
.rb-well { background: radial-gradient(ellipse 60% 18% at 50% 100%, rgba(255,240,190,.55), transparent 70%); animation: rbPulse 4s ease-in-out infinite; }
@keyframes rbPulse { 50% { opacity: .6; } }
.rb-inner { position: relative; max-width: 720px; margin: 0 auto; }
.rb-head { text-align: center; margin: 10px 0 16px; animation: rbIn 1.2s ease-out both; }
.rb-head h1 { margin: 6px 0; font-size: 40px; letter-spacing: 8px; color: #fff3c8; text-shadow: 0 0 18px #ffd36b, 0 0 36px rgba(255,180,80,.6), 0 2px 0 #000; font-family: var(--serif); }
.rb-sub, .rb-sub2 { color: #c9c0e8; letter-spacing: 2px; font-size: 14px; } .rb-sub2 { color: #a8a0c8; font-size: 13px; }
@keyframes rbIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.rb-memory { display: flex; gap: 12px; align-items: center; background: rgba(20,14,40,.7); border: 1px solid rgba(200,180,255,.25); padding: 12px; animation: rbIn 1.2s ease-out .3s both; }
.rb-old { width: 64px; height: 80px; flex: none; filter: grayscale(.6) brightness(.85) drop-shadow(0 0 6px rgba(180,160,255,.6)); opacity: .85; }
.rb-mt { color: #b4a8ff; font-size: 12px; letter-spacing: 3px; margin-bottom: 4px; }
.rb-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #d8d0f0; margin-top: 4px; }
.rb-gain { display: flex; flex-direction: column; align-items: center; margin: 14px 0; padding: 14px; background: radial-gradient(ellipse at center, rgba(255,214,120,.22), transparent 70%); animation: rbIn 1.2s ease-out .6s both; }
.rb-gain span { color: #e8d8a8; font-size: 13px; letter-spacing: 2px; } .rb-gain b { font-size: 30px; color: #7fe0c0; text-shadow: 0 0 14px rgba(127,224,192,.8); margin: 2px 0; } .rb-gain small { color: #a8a0c8; }
.rb-keep { font-size: 13px; line-height: 1.8; background: rgba(20,14,40,.55); border: 1px solid rgba(200,180,255,.18); padding: 10px 12px; animation: rbIn 1.2s ease-out .9s both; }
.rb-unlock { margin-top: 12px; text-align: center; padding: 10px; color: #ffe9a8; border: 1px solid #ffd36b; background: rgba(255,211,107,.12); box-shadow: 0 0 16px rgba(255,211,107,.3); animation: rbIn 1.2s ease-out 1.1s both, pulseGlow 2s 2.3s infinite; }
.rb-cls { animation: rbIn 1.2s ease-out 1.2s both; }
.rb-cls .cls { background: rgba(20,14,40,.72); border-color: rgba(200,180,255,.25); }
.rb-cls .cls.on { border-color: #ffd36b; box-shadow: 0 0 14px rgba(255,211,107,.45), inset 0 0 18px rgba(255,211,107,.15); }
.rb-cls .cls.fresh { border-color: #7fe0c0; box-shadow: 0 0 12px rgba(127,224,192,.45); }
.cls .lock.new { background: #2f9a8a; color: #fff; } .cls .lock.prev { top: auto; bottom: 4px; background: rgba(120,100,200,.6); color: #fff; }
.rb-name { margin-top: 14px; } .rb-go { background: linear-gradient(#fff3c8, #e3c272); color: #3a2a10; font-weight: 900; letter-spacing: 2px; box-shadow: 0 0 16px rgba(255,211,107,.6); }
.rb-flash { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, #fffbe8, #ffe9a8 40%, rgba(255,214,120,.9)); animation: rbFlash 2.6s ease-in-out forwards; }
.rb-flash div { text-align: center; color: #5a3a10; } .rb-flash small { display: block; letter-spacing: 6px; } .rb-flash b { font-size: 34px; letter-spacing: 10px; font-family: var(--serif); }
@keyframes rbFlash { 0% { opacity: 0; } 25% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.comp-row img.comp-mt { width: 54px; height: 36px; }
.tag.cp-phys { color: #ffb08a; } .tag.cp-magic { color: #ff9f43; } .tag.cp-heal { color: #8fe39a; } .tag.cp-mana { color: #7fb4ff; }
.vault-grid { max-height: 30vh; overflow-y: auto; } .vrow { padding: 4px 0; border-bottom: 1px dashed var(--line); gap: 6px; flex-wrap: wrap; }

/* 連結：全站不用看不清的預設藍色（負責人回報） */
a, a:visited { color: var(--brass2); text-decoration: none; }
a:hover { color: #ffe08a; text-decoration: underline; }
.back-title a { color: var(--brass2); font-size: 14px; }
/* 創角頁：職業介紹排版＋技能圖示 */
.cd-card { padding: 14px; }
.cd-head { display: flex; gap: 14px; align-items: center; }
.cd-hero { width: 80px; height: 100px; flex: none; image-rendering: pixelated; background: radial-gradient(circle, rgba(227,194,114,.15), transparent 70%); }
.cd-head h3 { margin: 0 0 4px; }
.cd-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--brass2); }
.cd-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.cd-feat { background: var(--well); border: 1px solid var(--line); padding: 8px 10px; }
.cd-lbl { font-size: 11px; letter-spacing: 2px; color: var(--brass); margin-bottom: 2px; }
.cd-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; }
.cd-skill { display: flex; gap: 8px; align-items: flex-start; background: var(--well); border: 1px solid var(--line); padding: 6px 8px; }
.cd-skill img { width: 40px; height: 40px; flex: none; image-rendering: pixelated; }
.name-row { display: flex; gap: 8px; align-items: stretch; }
.name-dice { flex: none; white-space: nowrap; }
#hero-name.pop { animation: namePop .3s; } @keyframes namePop { 50% { transform: scale(1.03); border-color: var(--brass); } }
@media (max-width: 520px) { .cd-head { flex-direction: column; text-align: center; } .cd-stats { justify-content: center; } }

/* ---------- 組隊分身（v4.0） ---------- */
.party-strip { display: flex; gap: 4px; padding: 4px 10px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.party-strip::-webkit-scrollbar { display: none; }
.party-strip .pm { flex: 1 1 0; min-width: 78px; max-width: 160px; display: flex; gap: 4px; align-items: center; padding: 3px 5px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.party-strip .pm.me { border-color: color-mix(in srgb, var(--gold, #f2c14e) 55%, var(--line)); }
.party-strip .pm.ally { border-style: dashed; }
.party-strip .pm.dead { opacity: .45; filter: grayscale(.8); }
.party-strip .pm img { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.party-strip .pm-b { flex: 1; min-width: 0; }
.party-strip .pm-n { display: flex; gap: 3px; align-items: baseline; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.party-strip .pm-n span { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--ink, #efe6d2); font-weight: 700; }
.party-strip .pm-n small { color: var(--dim2); font-size: 10px; }
.party-strip .pm-n em { margin-left: auto; font-style: normal; font-size: 10px; color: #ffcf3a; }
.party-strip .pm-bar { height: 4px; background: #2a1820; margin-top: 2px; border-radius: 1px; overflow: hidden; }
.party-strip .pm-bar.mp { height: 3px; background: #172038; }
.party-strip .pm-bar i { display: block; height: 100%; width: 100%; background: #e0475b; transition: width .25s; }
.party-strip .pm-bar.mp i { background: #5aa0ff; }
.clone-cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 6px 0; }
.clone-cls { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; color: inherit; cursor: pointer; font: inherit; }
.clone-cls:hover:not([disabled]) { border-color: var(--gold, #f2c14e); }
.clone-cls img { width: 40px; height: auto; image-rendering: pixelated; }
.clone-cls small { font-size: 10px; color: var(--dim2); }
.clone-cls.locked { opacity: .45; cursor: not-allowed; }
.clone-head { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.clone-head > img { width: 64px; height: auto; image-rendering: pixelated; flex: none; }
.clone-eq { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 480px) { .clone-eq { grid-template-columns: repeat(4, 1fr); } }
.clone-sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; }
.clone-sk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; color: inherit; font: inherit; cursor: pointer; }
.clone-sk img { width: 32px; height: 32px; image-rendering: pixelated; }
.clone-sk small { font-size: 11px; line-height: 1.2; text-align: center; }
.clone-sk em { font-style: normal; font-size: 10px; color: var(--dim2); }
.clone-sk.on { border-color: #ffcf3a; box-shadow: inset 0 0 0 1px #ffcf3a55; }
.clone-sk.on em { color: #ffcf3a; }
.clone-sk.locked { opacity: .4; cursor: not-allowed; }
/* 技能冷卻倒數秒數（v4.1） */
.skillbar .sk .cdt { position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.skillbar .sk .cdt:empty { display: none; }

/* ---------- 團隊首領戰（v4.2） ---------- */
.raid-boss, .raid-rec { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--well); margin: 4px 0; }
.raid-boss img, .raid-rec img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; flex: none; }
.raid-pick { display: block; cursor: pointer; }
.raid-pick.on .raid-boss { border-color: #ffcf3a; box-shadow: inset 0 0 0 1px #ffcf3a66; }
.raid-pick.locked { opacity: .45; }
.tag.bad { color: #ff8a94; }
.raid-roles { display: grid; gap: 4px; margin: 6px 0; }
.raid-roles > div { display: grid; grid-template-columns: 120px 1fr; gap: 6px; font-size: 12px; padding: 4px 6px; background: var(--well); border-radius: 3px; }
.raid-roles em { font-style: normal; color: #ffd36b; }
#raid-ov { position: fixed; inset: 0; z-index: 900; background: rgba(10,6,18,.94); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; }
#raid-ov[hidden] { display: none; }
#raid-ov .raid-top { width: 100%; max-width: 768px; display: flex; gap: 8px; align-items: center; color: #ffd36b; }
#raid-ov .raid-top b { flex: 1; font-size: 15px; }
#raid-cv { width: 100%; max-width: 768px; aspect-ratio: 16 / 9; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; }
.raid-tele { width: 100%; max-width: 768px; display: flex; gap: 8px; align-items: center; }
.raid-tele[hidden] { display: none; }
.raid-tele-bar { flex: 1; height: 10px; background: #3a1420; border-radius: 5px; overflow: hidden; }
.raid-tele-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff4d5e, #ffcf3a); transition: width .25s linear; }
.raid-guard { font-size: 16px; padding: 10px 18px; animation: raidPulse .5s infinite alternate; }
.raid-tele.done .raid-guard { animation: none; }
@keyframes raidPulse { to { transform: scale(1.06); box-shadow: 0 0 12px #9ff6ff; } }
.raid-mem { width: 100%; max-width: 768px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.raid-mem .rm { background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font-size: 12px; color: var(--ink, #efe6d2); }
.raid-mem .rm.down { opacity: .5; }
.raid-mem .rm small { display: block; color: var(--dim2); font-size: 10px; margin-top: 2px; }
.raid-mem .pm-bar { height: 5px; background: #2a1820; border-radius: 1px; overflow: hidden; margin-top: 2px; }
.raid-mem .pm-bar i { display: block; height: 100%; background: #e0475b; }
#raid-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 850; }
#raid-chip[hidden] { display: none; }
.raid-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.raid-tbl th, .raid-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.raid-tbl th:nth-child(2), .raid-tbl td:nth-child(2) { text-align: left; }
.raid-tbl tr.me td { color: #ffd36b; }
.raid-roll { margin-top: 8px; padding: 6px 8px; border: 1px dashed #ffcf3a88; border-radius: 3px; background: #2a2010; }

/* 遊戲分級標示（v4.3：遊戲軟體分級管理辦法，啟動頁標示級別與警語） */
.rating-badge { display: inline-block; padding: 0 6px; border-radius: 3px; background: #f2c94c; color: #2a1a08; font-weight: 900; font-size: 11px; line-height: 18px; margin-right: 4px; }
.rating-note { font-size: 10px; line-height: 1.5; opacity: .75; max-width: 520px; margin: 4px auto 0; padding: 0 12px; }

/* 桌機游標：放在元件樣式之後，避免被個別 `cursor:pointer` 覆蓋；觸控裝置不啟用 */
@media (hover: hover) and (pointer: fine) {
  html, body, #game, #create, .modal, .sheet { cursor: url("../assets/cursors/default.svg") 3 3, default; }
  a, button, summary, label[for], select,
  [role="button"], [data-act], [data-tab], [data-sub], [data-set],
  .avatar, .slot, .chip, .pot-chip, .switch, .cx, .ticker, .bf, .me-tile, .tf-cell, .raid-pick {
    cursor: url("../assets/cursors/pointer.svg") 10 3, pointer;
  }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable="true"] { cursor: text; }
  input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="range"] { cursor: url("../assets/cursors/pointer.svg") 10 3, pointer; }
  button:disabled, input:disabled, select:disabled, [aria-disabled="true"], .locked { cursor: not-allowed; }
}

/* 夢之塔（v4.5）：戰鬥畫面樓層／攀爬進度、上樓動畫、分頁 */
.tw-hud { position: absolute; left: 50%; transform: translateX(-50%); top: 30px; display: flex; gap: 6px; align-items: center; padding: 3px 8px; background: rgba(20,14,34,.82); border: 1px solid #6a4aa8; border-radius: 3px; font-size: 11px; color: #e8dcff; white-space: nowrap; z-index: 3; pointer-events: auto; }
.tw-hud[hidden] { display: none; }
.tw-hud b { color: #ffd36b; }
.tw-hud em { font-style: normal; color: #a8a0c0; } .tw-hud em.ok { color: #8fe39a; }
.tw-hud .tw-wait { color: #ff8af0; animation: raidPulse .6s infinite alternate; }
.tw-bar { position: relative; width: 120px; height: 10px; background: #2a1c44; border-radius: 2px; overflow: hidden; }
.tw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a5ad8, #c8a8ff); transition: width .3s; }
.tw-bar span { position: absolute; inset: 0; font-size: 8px; line-height: 10px; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
.bar.tw i { background: linear-gradient(90deg, #7a5ad8, #c8a8ff); }
.tw-upfx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; animation: twFade 2.3s ease forwards; background: radial-gradient(ellipse at 50% 100%, rgba(200,168,255,.45), rgba(20,10,40,.0) 70%); }
.tw-upfx.boss { background: radial-gradient(ellipse at 50% 100%, rgba(255,90,110,.5), rgba(20,10,40,0) 70%); }
.tw-stairs { position: absolute; left: 50%; bottom: 0; width: 120px; transform: translateX(-50%); }
.tw-stairs i { display: block; height: 8px; margin: 3px auto; background: rgba(255,240,200,.75); box-shadow: 0 0 8px #ffd36b; animation: twStep 1.2s ease-out infinite; }
.tw-stairs i:nth-child(1) { width: 30%; animation-delay: .5s } .tw-stairs i:nth-child(2) { width: 42%; animation-delay: .4s } .tw-stairs i:nth-child(3) { width: 54%; animation-delay: .3s }
.tw-stairs i:nth-child(4) { width: 66%; animation-delay: .2s } .tw-stairs i:nth-child(5) { width: 78%; animation-delay: .1s } .tw-stairs i:nth-child(6) { width: 90%; }
.tw-uptext { position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: #fff; text-shadow: 0 0 6px #6a4aa8, 0 2px 0 #1b1425; animation: twRise 2.3s ease-out forwards; }
.tw-uptext b { display: block; font-size: 26px; color: #ffe08a; letter-spacing: 2px; } .tw-uptext small { display: block; font-size: 11px; color: #c8a8ff; } .tw-uptext span { font-size: 12px; }
@keyframes twStep { 0% { opacity: 0; transform: translateY(14px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes twRise { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes twFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.tw-now b { font-size: 16px; color: #ffd36b; }
.tw-boss { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .tw-boss img { width: 64px; height: 64px; }
.tw-sc, .tw-ch { min-width: 64px; }
/* 開放加入的多人首領戰（夢之塔首領樓＋世界王） */
#fx-ov { position: fixed; inset: 0; z-index: 900; background: #0a0a18; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; }
#fx-ov[hidden] { display: none; }
#fx-ov .raid-top { width: 100%; max-width: 768px; display: flex; gap: 8px; align-items: center; color: #ffd36b; flex-wrap: wrap; }
#fx-ov .raid-top b { flex: 1; font-size: 15px; min-width: 140px; }
#fx-ov .fx-n { color: #c8d8f0; font-size: 12px; transition: transform .2s, color .2s; } #fx-ov .fx-n.pop { color: #ffe08a; transform: scale(1.15); }
#fx-cv { width: 100%; max-width: 768px; aspect-ratio: 16 / 9; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; }
#fx-tele .raid-guard { animation: none; } #fx-tele.warn .raid-guard { animation: raidPulse .5s infinite alternate; } #fx-tele.done .raid-guard { animation: none; }
.fx-mech { width: 100%; max-width: 768px; color: #ffb08a; } .fx-mech b { margin-right: 6px; }
#fx-ov .raid-mem .rm.me { border-color: #ffd36b; } #fx-ov .raid-mem .rm.mate { border-color: #5fd06a; } #fx-ov .raid-mem .rm.mate .pm-bar i { background: #5fd06a; }
#fx-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(108px + env(safe-area-inset-bottom)); z-index: 850; }
#fx-chip[hidden] { display: none; }

/* 村莊「夢見村」（v4.6）：下方操作列、市集 */
.vil-bar { padding: 4px 6px; background: rgba(16,12,28,.92); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.vil-bar input.text { padding: 3px 6px; font-size: 12px; }
.vil-bar[hidden] { display: none; }
.vil-bar .vil-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vil-bar .vil-name { color: #ffe08a; font-size: 12px; font-weight: 700; margin-right: auto; }
.vil-bar .btn.sm { padding: 2px 6px; }
.vil-regen { color: #8fe39a; }
.mkt-row { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mkt-row img { width: 32px; height: 32px; } .mkt-row .grow { flex: 1; min-width: 0; } .mkt-row b.num { color: #ffd36b; white-space: nowrap; }
.st-recall { position: absolute; right: 0; top: 0; z-index: 3; pointer-events: auto; }
.st-recall[hidden] { display: none; }
.st-recall.casting { color: #9ff6ff; border-color: #9ff6ff; animation: raidPulse .4s infinite alternate; }

/* 背包道具改版（v4.7，docs/27） */
.bag-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; } .bag-tabs small { opacity: .75; }
.bag-tools { display: flex; gap: 6px; margin-bottom: 6px; } .bag-tools input { flex: 1; min-width: 0; } .bag-tools select { width: 108px; }
.bag-items .bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; }
.bag-items .bag-grid .ic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 6px 3px 5px; background: #1e1830; border: 1px solid #4a3f62; border-radius: 3px; color: #f2ead8; cursor: pointer; min-height: 86px; }
.bag-items .bag-grid .ic:hover { border-color: #c8a46a; background: #2a2240; }
.bag-items .bag-grid .ic img { width: 38px; height: 38px; }
.bag-items .bag-grid .ic b.num { position: absolute; right: 2px; top: 2px; min-width: 16px; padding: 0 4px; font-size: 11px; line-height: 15px; color: #fff; background: rgba(10,8,20,.85); border: 1px solid #6a5a8a; border-radius: 8px; text-align: center; }
.bag-items .bag-grid .ic small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.25; font-weight: 700; color: #f2ead8; text-align: center; max-width: 100%; overflow: hidden; word-break: break-all; }
.bag-items .bag-grid .ic i { position: absolute; font-style: normal; font-size: 9px; line-height: 12px; padding: 0 3px; border-radius: 2px; }
.bag-items .bag-grid .ic i.exp { left: 2px; top: 2px; background: #3a2a14; color: #ffd36b; } .bag-items .bag-grid .ic i.exp.soon { background: #5a1420; color: #ffb0b8; }
.bag-items .bag-grid .ic i.nw { left: 3px; top: 3px; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #ff4d5e; }
.bag-items .bag-grid .ic i.qk { left: 2px; top: 30px; background: #2a4a6a; color: #bfeaff; } .bag-items .bag-grid .ic i.on { left: 2px; top: 17px; background: #1a4a2a; color: #8fe39a; }
.bag-items .bag-grid .ic.tw { border-color: #6a4aa8; } .bag-items .bag-grid .ic.tw.ch { border-color: #c8a8ff; } .bag-items .bag-grid .ic i.tag-f { left: 2px; top: 2px; background: #3a2a5a; color: #e8dcff; }
.bag-items .bag-grid .ic.rare-c { border-color: #c88af0; } .bag-items .bag-grid .ic.rare-c small { color: #e8c8ff; }
.quickbar { display: flex; gap: 6px; padding: 3px 10px 5px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.quickbar[hidden] { display: none; }
.quickbar .qk { position: relative; width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--well); cursor: pointer; line-height: 0; }
.quickbar .qk img { width: 100%; height: 100%; } .quickbar .qk.none { opacity: .4; } .quickbar .qk.on { border-color: #8fe39a; box-shadow: 0 0 6px #8fe39a88; }
.quickbar .qk b { position: absolute; right: 1px; bottom: 1px; font-size: 10px; line-height: 10px; text-shadow: 0 0 2px #000, 0 0 2px #000; color: #fff; }
.quickbar .qk i { position: absolute; left: 1px; top: 1px; font-size: 8px; line-height: 9px; font-style: normal; background: #2a4a6a; color: #bfeaff; padding: 0 2px; border-radius: 2px; }
.shop-sec { margin: 8px 0 4px; color: #ffd36b; font-size: 12px; font-weight: 700; }
#net-block { position: fixed; inset: 0; z-index: 1200; background: rgba(10,8,20,.82); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: #efe6d2; }
#net-block[hidden] { display: none; } #net-block b { font-size: 17px; color: #ffd36b; } #net-block > div { max-width: 360px; }
body.op-busy { cursor: progress; }
/* 重新整理／歡迎回來提示（v4.9.4：字大一點、有轉圈） */
#reload-ov, #net-block { position: fixed; inset: 0; z-index: 1300; background: rgba(10,8,20,.86); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: #f2ead8; }
#reload-ov b, #net-block b { display: block; font-size: 24px; color: #ffd36b; margin: 10px 0 6px; }
#reload-ov p, #net-block p { font-size: 17px; margin: 4px 0; }
#net-block p.small { font-size: 14px; }
.spin { width: 42px; height: 42px; margin: 0 auto; border: 4px solid #4a3f62; border-top-color: #ffd36b; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* v5.1.6 世界王戰場與介紹頁排版（負責人 2026-11-03：底下畫面透出來、文字難讀、浮條和返回戰場重複） */
#fx-ov .raid-top { flex-wrap: nowrap; gap: 6px; }
#fx-ov .raid-top b { min-width: 0; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fx-ov .fx-sub { width: 100%; max-width: 768px; display: flex; gap: 14px; align-items: center; font-size: 13px; color: #c8d8f0; margin-top: -2px; }
#fx-ov .fx-sub b { color: #ffd36b; } #fx-ov #fx-weak b { color: #ffe066; }
#fx-ov .raid-mem .rm { background: #15131f; color: #efe6d2; border-color: #3a3450; font-size: 13px; padding: 6px 8px; }
#fx-ov .raid-mem .rm span, #fx-ov .raid-mem .rm b { color: #efe6d2; } #fx-ov .raid-mem .rm.me span { color: #ffd36b; }
#fx-ov .raid-mem .rm small { color: #a8a0b8; font-size: 11px; }
#fx-ov .fx-mech { font-size: 13px; line-height: 1.55; } #fx-ov .fx-mech .muted { color: #c8bfae; }
body:has(#modal-root .modal-bg) #fx-chip { display: none; }
.wb { font-size: 14px; line-height: 1.6; }
.wb-rot-h { font-size: 12px; color: var(--dim2); margin-bottom: 4px; } .wb-rot-h b { color: #ffd36b; }
.wb-tower span.done { opacity: .75; }
.wb-id { min-width: 0; } .wb-no { font-size: 12px; color: #ffcf8a; letter-spacing: 1px; }
.wb-name { display: block; font-size: 20px; line-height: 1.3; } .wb-en { font-size: 12px; color: var(--dim2); }
.wb-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; } .wb-tags span { background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; }
.wb-lore { margin: 8px 0 6px; font-size: 13px; color: #c8bfae; text-align: left; }
.wb-mech { background: #2a1a14; border: 1px solid #7a4a2a; border-left: 3px solid #ff9f43; border-radius: 3px; padding: 6px 10px; text-align: left; }
.wb-mech b { color: #ffb08a; font-size: 13px; } .wb-mech p { margin: 2px 0 0; font-size: 13px; color: #f0e0cc; }
.wb-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin: 8px 0 6px; } .wb-stat small { color: var(--dim2); font-size: 11px; }
.wb-acts { display: flex; gap: 8px; margin: 6px 0; } .wb-acts .btn { flex: 1; min-height: 44px; font-size: 15px; } .wb-acts .btn.sec { flex: 0 0 34%; }
.wb-tips { margin: 6px 0; padding-left: 18px; font-size: 13px; color: #c8bfae; } .wb-tips li { margin: 1px 0; } .wb-tips b { color: #ffd36b; }
.wb-warn { color: #ff8a8a; font-size: 13px; margin: 4px 0; }
.wb-board { background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; margin: 6px 0; }
.wb-board-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 2px; } .wb-board-h b { color: #ffd36b; }
.wb-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; border-top: 1px dashed var(--line); } .wb-row:first-child { border-top: 0; } .wb-row small { color: var(--dim2); }
.wb-rew { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; text-align: left; }
.wb-rew-h b { font-size: 15px; color: #ffd36b; } .wb-rew-h small { display: block; color: var(--dim2); font-size: 12px; }
.wb-rew dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px; margin: 8px 0 4px; font-size: 13px; }
.wb-rew dt { color: #ffcf8a; font-weight: 700; white-space: nowrap; } .wb-rew dd { margin: 0; color: #efe6d2; }
.wb-foot { font-size: 12px; color: var(--dim2); }
@media (max-width: 420px) { .wb-head { flex-direction: column; text-align: center; gap: 4px; } .wb-img { width: 112px; height: 112px; } .wb-tags { justify-content: center; } }
#fx-tele .raid-tele-bar { position: relative; height: 22px; border-radius: 4px; } #fx-tele .raid-tele-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #c8bfae; text-shadow: 0 1px 2px #000; } #fx-tele.warn .raid-tele-bar span { color: #fff; font-weight: 700; }
.wb-req { list-style: none; margin: 6px 0; padding: 6px 10px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; font-size: 13px; } .wb-req li.ok { color: #8fe39a; } .wb-req li.no { color: #ff8a8a; }

/* v5.2 村莊：在村裡時收起戰鬥介面（負責人：說話框以下都不重要），改顯示村裡對話紀錄 */
#game.in-vil .stage-bars, #game.in-vil .skillbar, #game.in-vil .quickbar, #game.in-vil .feed-tabs, #game.in-vil #log, #game.in-vil .feed-in, #game.in-vil .ticker { display: none !important; }
.vil-bar .vil-main { flex-wrap: nowrap; } .vil-bar .vil-main .btn.sm { padding: 4px 6px; font-size: 12px; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.vil-today { gap: 4px; } .vil-today > .muted { margin-right: 2px; }
.vil-todo { background: var(--well); border: 1px solid var(--line2); color: #efe6d2; font-size: 12px; padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.vil-todo.done { color: #8fe39a; border-color: #3a7a4a; background: #142a1a; }
.vil-log[hidden] { display: none; }
.vil-log { background: var(--bg2); border-bottom: 1px solid var(--line); padding: 6px 10px; font-size: 13px; line-height: 1.55; height: 230px; overflow-y: auto; }
@media (min-width: 900px) { .vil-log { flex: 1; height: auto; min-height: 140px; } }
.vil-log-h { font-size: 12px; color: #ffe08a; margin-bottom: 2px; } .vil-log-h .muted { font-size: 11px; margin-left: 4px; }
.vil-log .vl b { color: #9ff6ff; } .vil-log .vl.me b { color: #ffd36b; }
.smith-bag { font-size: 13px; margin: 6px 0 2px; }
.smith-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.smith-row { display: flex; gap: 8px; align-items: center; background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 6px; }
.smith-info { flex: 1; min-width: 0; font-size: 13px; } .smith-plus { color: #ffe08a; } .smith-row .btn { min-width: 64px; min-height: 40px; font-size: 15px; }
.smith-ic { flex: none; width: 48px; height: 48px; position: relative; } .smith-ic > * { position: relative !important; inset: auto !important; }
.qk-cfg { margin-top: 8px; padding: 8px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; }
.qk-cfg-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } .qk-cfg-h b { color: #ffd36b; }
.qk-cfg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.qk-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: var(--panel); border: 1px solid var(--line2); border-radius: 3px; color: #efe6d2; font-size: 12px; cursor: pointer; min-height: 72px; }
.qk-slot img { width: 32px; height: 32px; image-rendering: pixelated; } .qk-slot small { color: var(--dim2); font-size: 10px; }
.qk-slot.empty { border-style: dashed; color: var(--dim2); justify-content: center; } .qk-slot.empty b { font-size: 20px; color: #ffd36b; }
.qk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; max-height: 55vh; overflow-y: auto; }
.qk-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; color: #efe6d2; font-size: 12px; cursor: pointer; }
.qk-opt img { width: 32px; height: 32px; image-rendering: pixelated; } .qk-opt small { color: var(--dim2); font-size: 10px; }
/* v5.2.1 更多選單：圖示與文字放大（負責人） */
.more-list { gap: 10px; }
.more-list .more-item { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px 12px; min-height: 76px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 4px; color: #efe6d2; cursor: pointer; text-align: left; }
.more-list .more-item:active { background: var(--panel); }
.more-list .more-item img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.more-list .mi-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .more-list .mi-t b { font-size: 18px; color: #ffe08a; } .more-list .mi-t small { font-size: 12px; color: var(--dim2); line-height: 1.35; }
.more-list .mi-badge { display: inline-block; background: #e0475b; color: #fff; font-size: 12px; border-radius: 10px; padding: 0 7px; margin-left: 4px; vertical-align: middle; }
@media (max-width: 360px) { .more-list { grid-template-columns: 1fr; } }
#more-pop { margin-top: 12px; } #more-pop .pop-bar { margin-bottom: 0; }
/* v5.3 史萊姆賽跑 */
.race-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; } .race-top b { color: #ffd36b; }
#race-cv { width: 100%; image-rendering: pixelated; border: 1px solid var(--line2); border-radius: 3px; background: #2a4a2a; }
.race-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.race-r { display: flex; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 5px 8px; }
.race-r img { width: 36px; height: 36px; image-rendering: pixelated; flex: none; } .race-ri { flex: 1; min-width: 0; font-size: 14px; } .race-r .btn { min-width: 56px; min-height: 38px; }
.race-odds { color: #ffd36b; font-size: 15px; }
.race-form { font-size: 11px; padding: 0 6px; border-radius: 8px; } .f-a { background: #5a1a2a; color: #ffb8c8; } .f-b { background: #4a3a14; color: #ffe08a; } .f-c { background: #1a3a4a; color: #9ff6ff; } .f-d { background: #2a2a2a; color: #b8b0a8; }
.race-rule { line-height: 1.55; } .race-hist { font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .race-hist span { background: var(--well); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; }
.item-src { margin: 6px 0; padding: 6px 8px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; font-size: 12px; line-height: 1.55; } .item-src b { color: #ffd36b; font-size: 12px; }
/* v5.4 村莊操作列固定高度（負責人：介面高度不要跳來跳去） */
.vil-bar .vil-row:first-child { height: 30px; flex-wrap: nowrap; overflow: hidden; }
.vil-bar .btn.sm.vil-spot { height: 26px; padding: 0 10px; font-size: 13px; line-height: 26px; white-space: nowrap; }
.vil-bar .vil-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vil-bar .vil-regen { height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.vil-bar .vil-today { flex-wrap: nowrap; overflow-x: auto; }
.vil-bar .vil-today { scrollbar-width: none; } .vil-bar .vil-today::-webkit-scrollbar { display: none; }
.vil-bar .vil-today .vil-todo, .vil-bar .vil-today > .muted { white-space: nowrap; flex: none; }
.eco-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; } .eco-it { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px 1px 3px; cursor: pointer; } .eco-it img { width: 18px; height: 18px; image-rendering: pixelated; }
.dw-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 55vh; overflow-y: auto; } .dw-list .vil-todo { font-size: 13px; padding: 4px 10px; }
.cx-drops { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; } .cx-drop { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px 1px 3px; } .cx-drop img { width: 18px; height: 18px; image-rendering: pixelated; } .cx-drop.sil img { filter: brightness(0) opacity(.55); } .cx-drop.sil { color: var(--dim2); }
/* v5.6 分頁列：只橫向滑動、不顯示捲軸（負責人：不要橫向與直向捲軸） */
.subtabs, .lb-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 2px; }
.subtabs::-webkit-scrollbar, .lb-tabs::-webkit-scrollbar { display: none; }
/* v5.6 社群：App 風格列表 */
.soc-help { background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; margin-bottom: 8px; font-size: 13px; }
.soc-help summary { cursor: pointer; color: #ffd36b; font-weight: 700; list-style: none; } .soc-help summary::-webkit-details-marker { display: none; }
.soc-help ul { margin: 6px 0 2px; padding-left: 18px; color: #d8cfbe; line-height: 1.6; }
.lb-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.lb-tabs button { flex: none; padding: 7px 12px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel2); color: #d8cfbe; font-size: 13px; font-weight: 700; }
.lb-tabs button.on { background: linear-gradient(180deg, #e9c46a, #b88a2a); color: #1b1425; border-color: #ffd36b; }
.lb-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .lb-note .btn { margin-left: auto; }
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(180deg, #2a221a, #1f1913); border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; }
.lb-row.me { border-color: #ffd36b; box-shadow: inset 0 0 0 1px #ffd36b55; background: linear-gradient(180deg, #3a2e14, #261d10); }
.lb-rk { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #3a3026; color: #d8cfbe; }
.lb-rk.m1 { background: linear-gradient(180deg, #ffe08a, #c8902a); color: #3a2410; } .lb-rk.m2 { background: linear-gradient(180deg, #f0f0f8, #9aa2b4); color: #2a2a3a; } .lb-rk.m3 { background: linear-gradient(180deg, #f0b07a, #a8602a); color: #3a1a0a; }
.lb-face { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--well); border-radius: 8px; overflow: hidden; } .lb-face img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } .lb-gface { font-size: 22px; }
.lb-main { flex: 1; min-width: 0; } .lb-name { font-weight: 800; font-size: 15px; color: #f3e9d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-sub { font-size: 12px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-val { flex: none; text-align: right; } .lb-val b { font-size: 16px; color: #ffd36b; } .lb-val small { font-size: 11px; color: var(--dim2); margin-left: 2px; }
.lb-dot { font-size: 11px; font-weight: 400; color: var(--dim2); margin-left: 4px; } .lb-dot.on { color: #8fe39a; }
.lb-pod .lb-pon { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 0; padding: 1px 7px; border-radius: 10px; background: rgba(80,200,110,.16); border: 1px solid rgba(143,227,154,.45); } .lb-pod .lb-pon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8fe39a; box-shadow: 0 0 4px #8fe39a; } /* v7.3.4 前三名也標在線 */
.lb-acts { display: flex; gap: 4px; flex: none; } .lb-acts .lb-x { padding: 2px 8px; }
.lb-acts .fr-party { font-weight: 800; box-shadow: 0 0 8px rgba(233,185,73,.55); } @media (max-width: 560px) { .lb-row:has(.lb-acts) { flex-wrap: wrap; } .lb-row .lb-acts { flex-basis: 100%; justify-content: flex-end; margin-top: 4px; } } /* v7.3.9 好友列按鈕有文字，手機換行到下方 */
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px; align-items: end; margin-bottom: 10px; }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line2); background: linear-gradient(180deg, #2e261c, #1c1610); cursor: pointer; min-width: 0; }
.lb-pod.p1 { border-color: #ffd36b; background: linear-gradient(180deg, #4a3a14, #241a0a); padding-top: 12px; } .lb-pod.p2 { border-color: #c8d0e0; } .lb-pod.p3 { border-color: #d8905a; }
.lb-pod b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-pod small { font-size: 11px; color: var(--dim2); }
.lb-crown { font-size: 20px; } .lb-pface img { width: 48px; height: 48px; image-rendering: pixelated; } .lb-pod.p1 .lb-pface img { width: 60px; height: 60px; }
.lb-pv { font-weight: 800; color: #ffd36b; font-size: 15px; } .lb-pv small { font-size: 10px; margin-left: 2px; }
.lb-mine { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line2); }
.ar-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--well); margin-bottom: 4px; border-left: 3px solid #555; }
.ar-h.win { border-left-color: #8fe39a; } .ar-h.lose { border-left-color: #ff6b7a; }
.ar-wl { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; } .ar-h.win .ar-wl { background: #1e4a2a; color: #8fe39a; } .ar-h.lose .ar-wl { background: #4a1e24; color: #ff8a8a; }
.ar-hv { flex: 1; min-width: 0; font-size: 13px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-hv b { color: #f3e9d2; margin-left: 4px; }
.ar-d { flex: none; font-weight: 800; } .ar-d.up { color: #8fe39a; } .ar-d.down { color: #ff8a8a; }
.rk-chip { cursor: pointer; }
.tip-t { cursor: pointer; border-bottom: 1px dotted currentColor; white-space: nowrap; } .tip-t i { font-style: normal; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 2px; border-radius: 50%; background: #4a3a1a; color: #ffd36b; font-size: 10px; font-weight: 800; vertical-align: 1px; border: 0; }
.tip-t:empty, .tip-t:not(:has(*)) { border: 0; }
#tip-pop { position: fixed; z-index: 2000; background: #2a2218; color: #f3e9d2; border: 1px solid #ffd36b; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.55; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
#tip-pop[hidden] { display: none; }
.pop-bar { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, #1c2a24, #22202e, #2a2418); border: 1px solid var(--line2); font-size: 13px; color: #d8cfbe; }
.pop-bar b { color: #ffe08a; font-size: 15px; margin-left: 2px; } .pop-bar i.g { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5fe08a; box-shadow: 0 0 6px #5fe08a; margin-right: 5px; animation: popPulse 1.6s ease-in-out infinite; }
@keyframes popPulse { 50% { opacity: .35; } }
/* v5.6 讀取畫面（負責人：重新整理、載入新版本、更新資料的 Loading 要美觀、優雅耐看） */
#reload-ov, #net-block { background: radial-gradient(ellipse at 50% 40%, rgba(58,44,98,.96), rgba(14,10,28,.98) 70%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#reload-ov::before, #net-block::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 22%, #ffe9b0 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 72%, #c8d8ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 66%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 64% 84%, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 8% 52%, #c8d8ff 50%, transparent 51%);
  animation: ldTwinkle 4s ease-in-out infinite alternate; }
@keyframes ldTwinkle { to { opacity: .2; } }
.ld { position: relative; max-width: 360px; animation: ldIn .6s ease-out both; }
@keyframes ldIn { from { opacity: 0; transform: translateY(8px); } }
.ld-orb { position: relative; width: 96px; height: 96px; margin: 0 auto 6px; }
.ld-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255,211,107,.15) 65%, #ffd36b 92%, #fff8d8 100%); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%, #000 68%, transparent 70%); mask: radial-gradient(circle, transparent 55%, #000 57%, #000 68%, transparent 70%); animation: spin 2.4s linear infinite; filter: drop-shadow(0 0 6px rgba(255,211,107,.6)); }
.ld-ring.r2 { inset: 12px; background: conic-gradient(from 180deg, transparent 0 60%, rgba(159,246,255,.15) 70%, #9ff6ff 100%); animation: spin 3.6s linear infinite reverse; opacity: .8; filter: drop-shadow(0 0 5px rgba(159,246,255,.5)); }
.ld-moon { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffbe8, #ffe08a 45%, #c8902a 100%); box-shadow: 0 0 18px rgba(255,224,138,.75), inset -6px -4px 0 rgba(120,80,20,.35); animation: ldBreath 2.4s ease-in-out infinite; }
@keyframes ldBreath { 50% { transform: scale(.9); box-shadow: 0 0 28px rgba(255,224,138,.95), inset -6px -4px 0 rgba(120,80,20,.35); } }
.ld-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0; animation: ldSpark 2.4s ease-in-out infinite; }
.ld-spark.s1 { left: 12%; top: 20%; } .ld-spark.s2 { right: 8%; top: 46%; animation-delay: .8s; } .ld-spark.s3 { left: 40%; bottom: 4%; animation-delay: 1.6s; }
@keyframes ldSpark { 30% { opacity: 1; transform: scale(1.2); } 60% { opacity: 0; transform: scale(.4); } }
.ld b { display: block; font-size: 22px; color: #ffe08a; letter-spacing: 2px; margin: 12px 0 4px; text-shadow: 0 0 12px rgba(255,211,107,.35); }
.ld p { font-size: 15px; color: #d8cfe8; margin: 2px 0; letter-spacing: 1px; }
.ld-bar { width: 180px; height: 3px; margin: 14px auto 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ld-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffd36b, #fff8d8, #ffd36b, transparent); animation: ldBar 1.6s ease-in-out infinite; }
@keyframes ldBar { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .ld-ring, .ld-moon, .ld-spark, .ld-bar i, #reload-ov::before, #net-block::before { animation-duration: 6s; } }
.update-bar { display: flex !important; align-items: center; gap: 8px; padding: 10px 12px !important; background: linear-gradient(90deg, #2e2450, #3a2c1a) !important; border-bottom: 1px solid #ffd36b88 !important; box-shadow: 0 4px 16px rgba(0,0,0,.45); animation: ubIn .4s ease-out both; }
@keyframes ubIn { from { transform: translateY(-100%); } }
.update-bar .ub-ic { font-size: 20px; animation: ldBreath 2.4s ease-in-out infinite; } .update-bar .ub-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .update-bar .ub-t b { color: #ffe08a; font-size: 14px; } .update-bar .ub-t small { color: #c8bfe0; font-size: 12px; }
/* v5.6 手機聊天展開：蓋住技能列、快捷欄，訊息區加高 */
.feed-tabs .feed-tog { margin-left: auto; letter-spacing: 0; color: var(--brass2); font-size: 12px; }
@media (min-width: 900px) { .feed-tabs .feed-tog { display: none; } }
@media (max-width: 899px) {
  #game.feed-open .skillbar, #game.feed-open .quickbar, #game.feed-open .ticker, #game.feed-open .party-strip { display: none !important; }
  #game.feed-open #log { height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #game.feed-open #log div { white-space: normal; }
}
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); cursor: pointer; }
.pick-row.cur { border-color: #ffd36b; background: #2a2210; cursor: default; } .pick-row.cant { opacity: .5; }
.pick-ic { flex: none; width: 48px; height: 48px; position: relative; } .pick-ic > * { position: relative !important; inset: auto !important; width: 48px !important; height: 48px !important; }
.pick-info { flex: 1; min-width: 0; font-size: 13px; } .pick-info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-d { flex: none; font-size: 12px; font-weight: 800; color: var(--dim2); } .pick-d.up { color: #8fe39a; } .pick-d.down { color: #ff8a8a; }
/* v5.7 商城 */
.st-wallet { margin: -4px 0 8px; }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line2); background: radial-gradient(circle at 50% 20%, #3a2a4a, #1e1828); text-align: center; }
.gp-card img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(255,138,240,.5)); } .gp-card b { font-size: 17px; color: #ffd0f4; } .gp-card small { font-size: 11px; color: var(--dim2); } .gp-bonus { color: #ffe08a !important; }
.gp-card .btn { margin-top: 4px; width: 100%; font-size: 12px; padding: 4px 2px; } .gp-price { margin-top: 4px; font-size: 13px; color: #d8cfbe; }
.gp-first { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: linear-gradient(90deg, #4a2a14, #3a1a3a); border: 1px solid #ffd36b; font-size: 13px; } .gp-first b { color: #ffe08a; }
.st-hd { display: flex; gap: 10px; align-items: flex-start; } .st-ic { font-size: 28px; line-height: 1; } .st-hd b { font-size: 16px; color: #ffe08a; }
.st-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; } .st-row > span { margin-right: auto; }
.st-month.on { border-color: #ffd36b; }
.st-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.st-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); font-size: 12px; } .st-tier b { color: #ffd0f4; font-size: 14px; } .st-tier.can { border-color: #8fe39a; } .st-tier.done { opacity: .55; } .st-tier .btn { padding: 2px 8px; }
.st-item .btn { flex: none; }
.gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gp-card { min-width: 0; } .gp-card .btn { white-space: normal; line-height: 1.25; word-break: keep-all; }
/* v5.7 電腦版分頁：兩層（主要 6 等寬徽章＋次要 5 小標籤） */
@media (min-width: 900px) {
  .tabs { display: flex !important; flex-direction: column; gap: 6px; padding: 10px 12px 8px !important; }
  .tabs .tabs-main { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .tabs .tabs-sub { display: flex; gap: 6px; flex-wrap: wrap; }
  .tabs button.tm { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px 6px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: linear-gradient(180deg, #2a221a, #1c1712) !important; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
  .tabs button.tm img { width: 34px !important; height: 34px !important; object-fit: contain; image-rendering: pixelated; }
  .tabs button.tm[data-arg="hero"] img { width: 28px !important; height: 34px !important; }
  .tabs button.tm.on { border-color: var(--brass) !important; background: linear-gradient(180deg, #4a3a1a, #2a2010) !important; color: #ffe08a; box-shadow: inset 0 2px 0 #ffd36b55, 0 0 10px rgba(255,211,107,.15); }
  .tabs button.tm:hover { border-color: var(--line2) !important; color: var(--text); }
  .tabs button.ts { padding: 4px 12px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; font-size: 13px; background: var(--well) !important; }
  .tabs button.ts img { width: 18px !important; height: 18px !important; }
  .tabs button.ts.on { border-color: var(--brass) !important; color: #ffe08a; background: #3a2e14 !important; }
  .tabs .dot { top: 2px !important; right: 4px !important; }
}
/* v5.7 App 版（iOS／Android）：狀態列與瀏海安全區（網頁版 env() 為 0 不受影響） */
html.app body { padding-top: env(safe-area-inset-top); }
@media (max-width: 899px) { html.app #game .left { height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom) - env(safe-area-inset-top)); } } /* App 的 body 已讓出瀏海高度，戰報區要扣掉，否則最下面幾行卡在選單底下捲不到 */
.doll-stage .doll-wpn.w-bow { width: 46px; height: 46px; left: 72px; top: 26px; transform: scaleX(-1) rotate(-12deg); } /* 弓：比例放大、弦朝角色 */
/* 轉職卡：兩欄等高、按鈕對齊底部（負責人：按鈕排版要排好） */
.adv-cols { align-items: stretch; } .adv-cols .adv { display: flex; flex-direction: column; gap: 4px; } .adv-cols .adv > .btn, .adv-cols .adv > .tag:last-child { margin-top: auto; align-self: stretch; text-align: center; min-height: 40px; }
/* 元素卡 */
.el-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--ec); background: color-mix(in srgb, var(--ec) 14%, #15110d); border: 1px solid color-mix(in srgb, var(--ec) 45%, transparent); white-space: nowrap; }
.el-chip.none { --ec: #9a8f80; }
.el-arr { font-style: normal; color: var(--dim2); margin: 0 3px; font-size: 12px; }
.el-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: var(--well); border-radius: 6px; margin-bottom: 8px; }
.el-mul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; } .el-mul > div { text-align: center; background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 4px 2px; } .el-mul b { display: block; font-size: 15px; } .el-mul b.up { color: #8fe39a; } .el-mul b.down { color: #ff8a8a; } .el-mul small { font-size: 11px; color: var(--dim2); }
.el-cycles { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .el-cycles > div { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .el-cycles small { width: 48px; color: var(--dim2); font-size: 11px; flex: none; }
.el-react-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } .el-react-h b { color: #ffd36b; }
.el-reacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.el-react { padding: 6px 8px; border-radius: 8px; background: var(--well); border: 1px dashed var(--line); } .el-react.on { border-style: solid; border-color: #3a6a7a; background: #14222a; }
.el-rh { display: flex; justify-content: space-between; align-items: baseline; } .el-rh b { color: #9ff6ff; font-size: 13px; } .el-react:not(.on) .el-rh b { color: var(--dim2); } .el-rh small { color: var(--dim2); font-size: 11px; }
.el-rf { display: flex; align-items: center; gap: 3px; margin: 3px 0; } .el-rf i { font-style: normal; color: var(--dim2); }
/* 電腦版（滑鼠）分頁列：換行全部顯示，不靠橫向捲動（負責人：電腦無法往右捲） */
@media (min-width: 900px), (hover: hover) and (pointer: fine) {
  .subtabs, .lb-tabs, .bag-tabs { flex-wrap: wrap !important; overflow: visible !important; }
}

/* 背包道具分頁（負責人：道具越來越多要有上下分頁） */
.bag-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; } .bag-pager span { min-width: 54px; text-align: center; color: #e8d8a8; font-weight: 700; } .bag-pager .btn[disabled] { opacity: .35; pointer-events: none; }
.bag-tools select { width: 120px; }
/* 戰鬥畫面藥水：圖示放大、可點選切換自動喝的藥水 */
.stage-bars .pot-chip { height: 24px !important; padding: 0 4px; gap: 4px; }
.stage-bars .pot-chip .pp { flex: 1; justify-content: center; gap: 4px; height: 100%; border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 700; }
.stage-bars .pot-chip .pp:hover, .stage-bars .pot-chip .pp:active { background: rgba(200,164,106,.18); }
.stage-bars .pot-chip .pp img { width: 20px; height: 20px; }
.stage-bars .pot-chip .pp i { font-style: normal; font-size: 9px; color: #c8a46a; opacity: .8; }
.pot-pick { display: grid; gap: 6px; margin-top: 8px; }
.pp-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #1e1830; border: 1px solid #4a3f62; border-radius: 3px; color: #f2ead8; text-align: left; cursor: pointer; }
.pp-opt img { width: 32px; height: 32px; flex: none; } .pp-opt span { flex: 1; display: flex; flex-direction: column; } .pp-opt small { color: #a99cc0; font-size: 11px; }
.pp-opt em { font-style: normal; color: #e8d8a8; font-weight: 700; } .pp-opt i { font-style: normal; color: #7dff9a; font-size: 11px; }
.pp-opt.on { border-color: #c8a46a; background: #2a2240; } .pp-opt.none { opacity: .55; }
.bag-items .bag-grid .ic.ph { cursor: default; background: rgba(30,24,48,.45); border-style: dashed; border-color: #3a3150; } .bag-items .bag-grid .ic.ph:hover { background: rgba(30,24,48,.45); border-color: #3a3150; }
/* v5.9 裝備紙娃娃（docs/34 §3.2）：左右兩欄裝備圍住角色、下排副手＋戒指 1～4 */
.pdoll { display: grid; grid-template-columns: minmax(52px, 72px) 1fr minmax(52px, 72px); grid-template-areas: 'l m r' 'b b b'; gap: 6px; align-items: stretch; }
.pdoll .pd-col { grid-area: l; display: flex; flex-direction: column; gap: 6px; } .pdoll .pd-r { grid-area: r; }
.pdoll .pd-bot { grid-area: b; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pdoll .doll-stage { grid-area: m; flex-direction: column; justify-content: center; margin: 0; padding: 6px 4px; min-height: 0; }
.pdoll .doll-stage .doll-big { width: 112px; height: 136px; } .pdoll .doll-stage .doll-wpn { left: calc(50% + 22px); top: 44%; }
.pdoll .doll-stage .doll-wpn.w-bow { left: calc(50% + 16px); top: 40%; }
.pdoll .doll-stage .small { padding: 4px 2px 0; text-align: center; font-size: 10px; }
.pdoll .slot { width: 100%; }
.slot.lockd { cursor: pointer; background: repeating-linear-gradient(135deg, #1a1526 0 6px, #201a2e 6px 12px); border-style: dashed; border-color: #4a3f62; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; opacity: .85; }
.slot.lockd .lk-ic { font-size: 16px; filter: grayscale(.3); } .slot.lockd .lk-t { font-size: 12px; font-weight: 700; color: #f0cf8a; line-height: 1.25; text-align: center; padding: 0 3px; text-shadow: 0 1px 2px #000; } /* v7.3.21 未開啟文字放大、提亮（負責人） */
.slot .pos-mul { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 9px; color: #9ff6ff; background: rgba(10,8,20,.7); padding: 0 2px; border-radius: 2px; }
.pos-lock-info { display: flex; gap: 10px; align-items: center; } .pos-lock-info img { width: 48px; height: 48px; flex: none; }
@media (min-width: 900px) { .pdoll { grid-template-columns: 76px 1fr 76px; } }
/* App 版：標題／建立角色畫面也避開瀏海與動態島（這兩個是 position:fixed，不吃 body 的 padding） */
html.app #create { padding-top: calc(20px + env(safe-area-inset-top)); }
html.app .title-screen .title-ui { padding-top: env(safe-area-inset-top); }
html.app #net-block, html.app .net-block { padding-top: env(safe-area-inset-top); }
/* 夢偶・夥伴・變身：三張圖示卡（點了直接挑選） */
.comp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comp-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; background: #1e1830; border: 1px solid #4a3f62; border-radius: 3px; color: #f2ead8; cursor: pointer; min-width: 0; }
.comp-tile:hover { border-color: #c8a46a; background: #2a2240; } .comp-tile.on { border-color: #c8a46a; box-shadow: inset 0 0 0 1px rgba(200,164,106,.35); }
.comp-tile .ct-art { height: 56px; display: flex; align-items: flex-end; justify-content: center; } .comp-tile .ct-art img { max-height: 56px; max-width: 84px; image-rendering: pixelated; } .comp-tile .ct-art i { font-style: normal; font-size: 30px; opacity: .55; }
.comp-tile:not(.on) .ct-art img { filter: grayscale(.4) brightness(.8); }
.comp-tile .ct-l { font-size: 11px; color: #c8a46a; } .comp-tile b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp-tile small { font-size: 10px; color: #a99cc0; text-align: center; line-height: 1.25; }
/* 管理清單右側按鈕統一大小（負責人：按鈕大小要一致） */
.comp-list .comp-row > .btn, .comp-list .comp-row .col .btn { width: 108px; min-height: 36px; justify-content: center; padding-left: 6px; padding-right: 6px; flex: none; }
.comp-list .comp-row .col { flex: none; }
/* App 版：「新版本已上線」橫幅避開狀態列／動態島 */
html.app .update-bar { padding-top: calc(10px + env(safe-area-inset-top)) !important; }
/* 標題畫面直式：底部留給營火場景，選單不壓到角色 */
@media (max-aspect-ratio: 3/4) { html .title-screen .title-ui, html.app .title-screen .title-ui { padding-bottom: calc(26vw + env(safe-area-inset-bottom)); justify-content: flex-start; padding-top: calc(10vh + env(safe-area-inset-top)); } }
/* 使用 Apple 登入（依 Apple 人機介面規範：黑底白字＋Apple 標誌） */
.login-btn.login-apple { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.pv.pv-apple { background: transparent; color: #fff; } .pv.pv-apple::before { content: '\F8FF'; font-family: -apple-system, 'SF Pro Text', sans-serif; font-size: 17px; }
/* 角色頁：武器依握點握在手上（在角色後方，拳頭蓋住握柄） */
.doll-fig { position: relative; display: inline-block; width: 112px; height: 136px; flex: none; }
.doll-fig .doll-big { position: relative; z-index: 1; width: 112px !important; height: 136px !important; }
.doll-fig .doll-wpn2 { position: absolute; z-index: 0; width: 36px; height: 36px; image-rendering: pixelated; }
.btn .ic-s { width: 16px; height: 16px; vertical-align: -3px; margin-left: 4px; }
.skill-pre { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--line); opacity: .85; } .skill-pre img { width: 36px; height: 36px; filter: grayscale(.5); flex: none; }
.doll-fig .doll-wpn2 { z-index: 2 !important; } .doll-fig .doll-fist { position: absolute; z-index: 3; image-rendering: pixelated; }
.tf-cell .tf-form { display: block; font-style: normal; font-size: 9px; color: #c8a46a; margin-top: 1px; }
.tf-forms { margin: 6px 0; } .tf-forms summary { cursor: pointer; color: #c8a46a; font-size: 13px; } .tf-f { display: flex; gap: 6px; font-size: 12px; padding: 2px 0; } .tf-f b { flex: none; width: 72px; color: #e6c8ff; } .tf-f span { color: #cfc4b0; }
.mkt-pick { max-height: 46vh; overflow-y: auto; } .mkt-pick .bag-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; }
.mkt-pick .sel { outline: 2px solid #ffd36b; outline-offset: -2px; box-shadow: 0 0 8px rgba(255,211,107,.5); }
.mkt-sel { margin: 8px 0 6px; padding: 6px 8px; background: #1e1830; border: 1px solid #4a3f62; border-radius: 3px; }
.rep-why { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .rep-why label { display: flex; gap: 6px; align-items: center; padding: 6px; background: #1e1830; border: 1px solid #4a3f62; border-radius: 3px; font-size: 13px; }
.pdoll .pd-bot.pd-bot4 { grid-template-columns: repeat(4, 1fr); }
#nb-p { line-height: 1.7; text-align: center; } #nb-p small { opacity: .75; font-size: .85em; }

/* v7.3.8 好友邀請按鈕更醒目（負責人：這樣好不明顯）：金底深字、白邊發光、紅色數字、跳動 */
#st-frq.fr-chip { position: relative; background: linear-gradient(180deg, #ffe08a, #e9a93a); color: #2a1a0a; font-weight: 800; font-size: 14px; padding: 6px 14px 6px 10px; border: 2px solid #fff3c4; border-radius: 8px; box-shadow: 0 0 0 2px #1b1425, 0 0 14px rgba(255,205,90,.85); animation: frBounce 1.8s ease-in-out infinite; }
#st-frq .fr-ic { font-size: 17px; margin-right: 2px; }
#st-frq .fr-n { position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; line-height: 20px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
@keyframes frBounce { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-4px) scale(1.06); } 86% { transform: translateY(0) scale(1); } 92% { transform: translateY(-2px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { #st-frq.fr-chip { animation: none; } }

.st-evt { display: flex; gap: 6px; } .st-evt .wb-chip { font-variant-numeric: tabular-nums; } /* v7.3.11 世界王移到右下 */

.pm-choice { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,.18); } .pm-choice b { display: block; } .pm-choice small { color: var(--dim2); font-size: 12px; } /* v7.3.12 組隊換圖兩選一 */

.bag-auto { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,.15); } .bag-auto select { max-width: 140px; } /* v7.3.14 背包自動整理／自動販賣 */

/* v7.3.17 分段按鈕（取代原生下拉） */
.as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.25); }
.seg-b { appearance: none; border: 0; border-right: 1px solid var(--line2); background: transparent; color: var(--dim2, #bbb); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 11px; cursor: pointer; min-height: 32px; }
.seg-b:last-child { border-right: 0; } .seg-b:hover { color: var(--text); background: rgba(255,255,255,.05); }
.seg-b.on { background: linear-gradient(180deg, #e9c46a, #c9963a); color: #2a1a0a; }

.pm-list { display: grid; gap: 6px; margin-top: 6px; } .pm-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(233,185,73,.08); color: var(--text); font: inherit; cursor: pointer; }
.pm-pick:hover { background: rgba(233,185,73,.18); } .pm-pick small { font-size: 12px; color: var(--dim2); } .pm-pick.off { opacity: .45; cursor: not-allowed; filter: grayscale(1); } /* v7.3.17 隊友地圖清單 */

/* v7.3.18 背包整合總覽 */
.bag-head { padding: 8px 10px; } .bag-head .bh-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .bh-buy { flex: none; padding: 4px 8px; white-space: nowrap; } .bh-cap { font-weight: 700; white-space: nowrap; }
.bh-bar { flex: 1; min-width: 90px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid var(--line2); overflow: hidden; } .bh-bar i { display: block; height: 100%; }
.bh-tabs { display: flex; } .bh-tabs .seg-b { flex: 1; font-size: 14px; padding: 6px 10px; min-height: 34px; }

/* v7.3.19 倉庫左右兩欄 */
.vt-tabs { display: flex; } .vt-tabs .seg-b { flex: 1; }
.vt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vt-col { min-width: 0; display: flex; flex-direction: column; } .vt-h { font-size: 13px; margin-bottom: 6px; white-space: nowrap; }
.vt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .vt-grid .slot { width: auto; aspect-ratio: 1; min-width: 0; } .vt-grid .slot img { width: 70%; height: auto; }
.slot.vt-empty, .vt-row.vt-empty { border: 1px dashed var(--line); background: rgba(255,255,255,.02); pointer-events: none; }
.vt-list { display: grid; gap: 4px; } .vt-row { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,.2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; min-width: 0; }
.vt-row img { width: 24px; height: 24px; flex: none; } .vt-row .vt-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-row i { font-style: normal; color: #e9b949; font-weight: 800; } .vt-row:active { background: rgba(233,185,73,.2); }
.vt-pg { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 13px; } .vt-pg .btn { min-width: 40px; }
@media (min-width: 700px) { .vt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cf-loot.cf-got { display: flex; flex-direction: column; align-items: center; gap: 2px; } .cf-loot.cf-got span { font-size: 14px; color: #fff3c4; text-shadow: 0 1px 2px #000; } /* v7.3.20 */

.pm-pick .ui-ic, .modal .ui-ic, .btn .ui-ic { margin-right: 5px; } .pm-pick small .ui-ic { width: 16px; height: 16px; vertical-align: -3px; } /* v7.3.22 */

/* v7.3.23 隊長皇冠、成員名單 */
.party-strip .pm-crown { width: 14px; height: 14px; image-rendering: pixelated; flex: none; align-self: center; } .party-strip .pm-n span { color: #f3ead6; }
.pt-mem { display: grid; gap: 6px; margin-top: 8px; } .pt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0,0,0,.18); } .pt-row.off { opacity: .55; }
.pt-row .pt-face { width: 32px; height: 32px; image-rendering: pixelated; } .pt-nm { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pt-row .btn { flex: none; }

.vt-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 76px; align-content: flex-start; } /* v7.3.23 倉庫按鈕區固定高度 */

/* v7.3.23 倉庫兩欄內容區固定高度：裝備 4 列、道具 6 筆，切分頁／翻頁不跳 */
.vt-grid { grid-auto-rows: 58px; height: calc(58px * 4 + 5px * 3); align-content: start; } .vt-grid .slot { aspect-ratio: auto; height: 58px; }
.vt-list { height: calc(40px * 6 + 4px * 5); align-content: start; grid-auto-rows: 40px; }
.vt-extra .as-row { width: 100%; } .vt-extra .seg { flex: 1; display: flex; } .vt-extra .seg-b { flex: 1; }
.vt-note { margin: 6px 0; height: 3em; line-height: 1.5; overflow: hidden; } .vt-extra { height: 76px; min-height: 0; overflow: hidden; } /* 說明與按鈕區固定高度，切分頁不跳 */
.vt-list { height: calc(58px * 4 + 5px * 3); grid-template-rows: repeat(6, 1fr); grid-auto-rows: auto; gap: 4px; } .vt-list .vt-row { height: auto; min-height: 0; } /* 道具清單與裝備格同高 */

.buyback { margin-top: 10px; border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; } .buyback > summary { cursor: pointer; font-weight: 700; } .buyback .bag-grid { margin-top: 6px; } /* v7.3.28 */

/* v7.3.29 我的角色名單 */
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cr-cell { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(0,0,0,.2); min-width: 0; min-height: 118px; color: var(--text); font: inherit; text-align: left; }
.cr-cell.main { border-color: #e9b949; background: linear-gradient(180deg, rgba(233,185,73,.14), rgba(0,0,0,.2)); } .cr-cell.rest { opacity: .8; }
.cr-cell.empty, .cr-cell.locked { align-items: center; justify-content: center; text-align: center; border-style: dashed; cursor: pointer; } .cr-cell.locked { cursor: default; opacity: .6; }
.cr-cell.empty small, .cr-cell.locked small { color: var(--dim2); font-size: 11px; } .cr-plus { font-size: 22px; line-height: 1; color: #e9b949; } .cr-lock { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line2); color: var(--dim2); }
.cr-top { display: flex; gap: 8px; align-items: center; min-width: 0; } .cr-face { width: 40px; height: 50px; image-rendering: pixelated; flex: none; object-fit: contain; }
.cr-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; } .cr-info small { font-size: 11px; color: var(--dim2); }
.cr-tags { display: flex; flex-wrap: wrap; gap: 4px; } .cr-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } .cr-acts .btn { flex: 1; min-width: 0; padding: 5px 4px; }
.cr-sw { appearance: none; border: 1px solid var(--line2); border-radius: 10px; padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.05); color: var(--dim2); }
.cr-sw.on { background: rgba(95,208,104,.18); border-color: rgba(143,227,154,.6); color: #8fe39a; } .cr-note { margin-top: 8px; }
@media (min-width: 1100px) { .cr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 寬螢幕 4 欄時卡片變窄：頭像在上、文字在下，標籤不直排（負責人 2026-11-08 回報跑版） */
.cr-tags .tag { white-space: nowrap; }
@media (min-width: 1100px) { .cr-top { flex-direction: column; align-items: flex-start; } .cr-info { width: 100%; } }

/* v7.3.33 觸控裝置：視窗內上下捲動不顯示捲軸（負責人：強化裝備手機上不要出現 scrollbar） */
@media (hover: none) and (pointer: coarse) { .modal, .modal * { scrollbar-width: none; } .modal::-webkit-scrollbar, .modal *::-webkit-scrollbar { display: none; width: 0; height: 0; } }

/* v7.3.34 外觀預覽 */
.cpv { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 6px; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.06), rgba(0,0,0,.25)); }
.cpv-m { width: 48px; height: 52px; } .cpv-l { width: 76px; height: 80px; } .cpv img { width: 32px; height: 40px; image-rendering: pixelated; position: relative; z-index: 1; } .cpv-l img { width: 48px; height: 60px; }
.cpv.k-aura .cpv-glow { position: absolute; left: 15%; right: 15%; bottom: 6%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, var(--cc), transparent 70%); opacity: .8; animation: cpvPulse 1.6s ease-in-out infinite; }
.cpv.k-aura i { position: absolute; z-index: 2; width: 3px; height: 3px; background: var(--cc); box-shadow: 0 0 4px var(--cc); bottom: 12%; animation: cpvRise 1.8s linear infinite; }
.cpv.k-aura i:nth-child(2) { left: 24%; } .cpv.k-aura i:nth-child(3) { left: 46%; animation-delay: .6s; } .cpv.k-aura i:nth-child(4) { left: 66%; animation-delay: 1.1s; } .cpv.k-aura i:nth-child(5) { left: 36%; animation-delay: 1.4s; }
@keyframes cpvRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } } @keyframes cpvPulse { 50% { opacity: .45; transform: scaleX(.85); } }
.cpv.k-frame .cpv-av { display: grid; place-items: center; width: 86%; height: 86%; border: 3px solid var(--cc); border-radius: 6px; box-shadow: 0 0 0 1px #1b1425, inset 0 0 0 1px rgba(0,0,0,.6), 0 0 8px var(--cc); overflow: hidden; background: #1a1526; }
.cpv.k-frame .cpv-av img { transform: translateY(8%) scale(1.15); }
.cpv.k-name { width: auto; min-width: 48px; padding: 0 6px; } .cpv.k-name b { color: var(--cc); font-size: 14px; text-shadow: 0 1px 2px #000; white-space: nowrap; } .cpv-l.k-name b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .cpv.k-aura i, .cpv.k-aura .cpv-glow { animation: none; } }
/* v7.3.34 扭蛋結果卡精緻化 */
.gcard { overflow: hidden; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 22%, transparent), var(--well) 70%); }
.gcard::after { content: ''; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); border-radius: 4px; pointer-events: none; }
.gc-corner { position: absolute; width: 8px; height: 8px; border: 2px solid var(--tc); opacity: .85; } .gc-corner.tl { left: 4px; top: 4px; border-right: 0; border-bottom: 0; } .gc-corner.tr { right: 4px; top: 4px; border-left: 0; border-bottom: 0; } .gc-corner.bl { left: 4px; bottom: 4px; border-right: 0; border-top: 0; } .gc-corner.br { right: 4px; bottom: 4px; border-left: 0; border-top: 0; }
.gc-spark { position: absolute; width: 4px; height: 4px; background: #fff; box-shadow: 0 0 6px var(--tc); transform: rotate(45deg); opacity: 0; animation: gcSpark 2.2s ease-in-out infinite; animation-delay: calc(var(--d) + .6s); }
.gc-spark.s1 { left: 18%; top: 22%; } .gc-spark.s2 { right: 16%; top: 34%; animation-delay: calc(var(--d) + 1.2s); } .gc-spark.s3 { left: 26%; bottom: 26%; animation-delay: calc(var(--d) + 1.7s); }
@keyframes gcSpark { 0%, 100% { opacity: 0; transform: rotate(45deg) scale(.4); } 40% { opacity: 1; transform: rotate(45deg) scale(1); } }
.gc-tier { padding: 1px 10px; border-radius: 10px; background: color-mix(in srgb, var(--tc) 22%, #1b1425); border: 1px solid var(--tc); color: var(--tc); font-size: 12px; font-weight: 800; }
.gres.one { grid-template-columns: minmax(0, 260px); } .gres.one .gcard { min-height: 230px; padding: 20px 12px 14px; gap: 6px; } .gres.one .gc-ic { height: 92px; } .gres.one .gc-ic img { width: 64px; height: 64px; }
.gres.one .gc-name { font-size: 18px; font-weight: 800; } .gc-desc { font-size: 12px; color: var(--dim2); text-align: center; line-height: 1.4; opacity: 0; animation: gcPop .35s ease forwards; animation-delay: calc(var(--d) + .45s); }
.gc-ic .cpv img, .gres.one .gc-ic .cpv img { width: 48px; height: 60px; filter: none; } .gc-ic .cpv-m img { width: 32px; height: 40px; }

.bar.bar-lg { height: 20px; } .bar.bar-lg > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; white-space: nowrap; } /* v7.3.35 職業經驗條加高，文字不被擠壓 */
.bar:has(> span) { height: 18px; } .bar:has(> span) > span { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } /* 所有帶文字的進度條加高 */

.box-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid #e9b949; border-radius: 6px; background: rgba(233,185,73,.12); } .box-bar img { width: 28px; height: 28px; } .seg-b, .bag-tabs .btn { position: relative; } .dot.in { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e5484d; color: #fff; font-size: 10px; line-height: 16px; text-align: center; } .bag-tabs .dot.in:empty { min-width: 8px; width: 8px; height: 8px; padding: 0; } /* v7.3.37 */

.oa-gold { font-size: 18px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .oa-list { display: flex; flex-wrap: wrap; gap: 6px; } .oa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(0,0,0,.2); font-size: 13px; } .oa-chip img { width: 20px; height: 20px; } .oa-chip b { color: #ffe08a; } .oa-gear { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .oa-gear .slot { width: 56px; height: 56px; } /* v7.3.38 全部打開結算 */

/* 夢之塔傳送卷／符：選樓層視窗（固定高度，分頁切換不跳動） */
.tw-tabs { margin-top: 8px; } .tw-tabs .seg-b { min-height: 34px; padding: 4px 8px; font-size: 12px; }
.tw-fl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; min-height: 216px; align-content: start; }
.tw-fl { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 3px 2px; border: 1px solid #6a4aa8; border-radius: 6px; background: linear-gradient(180deg, rgba(120, 80, 200, .28), rgba(50, 26, 100, .3)); color: #e9e0ff; font: inherit; cursor: pointer; } .tw-fl b { font-size: 13px; } .tw-fl small { font-size: 10px; opacity: .8; white-space: nowrap; } .tw-fl.boss { border-color: #e9c46a; background: linear-gradient(180deg, rgba(233, 196, 106, .24), rgba(90, 47, 160, .3)); color: #ffe9b0; }
.tw-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #6a4aa8; border-radius: 6px; background: linear-gradient(90deg, rgba(90, 47, 160, .42), rgba(30, 16, 66, .3)); } .tw-head img { width: 48px; height: 48px; flex: none; } .tw-head div { display: flex; flex-direction: column; min-width: 0; } .tw-head small { font-size: 11px; letter-spacing: .12em; color: #c8a8ff; } .tw-head b { font-size: 16px; color: #ffe48a; } .tw-head span { font-size: 12px; opacity: .8; }
.tw-ask { display: grid; gap: 6px; } .tw-ask-b { gap: 8px; margin-top: 6px; }

/* 道具多選賣出 */
.sell-bar { display: flex; align-items: center; gap: 6px; min-height: 40px; margin: 6px 0; padding: 4px 8px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(0, 0, 0, .18); } .sell-bar .grow { flex: 1; min-width: 0; }
.bag-items .bag-grid .ic.sel { outline: 2px solid #e9c46a; outline-offset: -2px; background: rgba(233, 196, 106, .16); } .bag-items .bag-grid .ic.nosell { opacity: .35; }
.sell-list { display: grid; gap: 4px; max-height: 44vh; overflow-y: auto; } .sell-list > div { display: flex; justify-content: space-between; gap: 8px; } .sell-tot { margin: 8px 0 2px; text-align: right; }
.tw-more { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }

/* 夢境深淵 */
.ab-head { background: linear-gradient(135deg, rgba(74, 45, 143, .4), rgba(20, 8, 40, .5)); border-color: #6a3fb0; } .ab-week { display: flex; flex-direction: column; } .ab-week small, .ab-stat small { color: #c8a8ff; font-size: 11px; } .ab-week b { color: #ff9ae8; font-size: 16px; } .ab-week span { font-size: 12px; opacity: .85; }
.ab-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .ab-stat > div { display: flex; flex-direction: column; padding: 6px; background: rgba(0, 0, 0, .25); border-radius: 6px; min-width: 0; } .ab-stat b { color: #ffe48a; font-size: 14px; }
.ab-list { display: grid; gap: 6px; } .ab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 6px; } .ab-row.on { border-color: #c86af0; background: rgba(200, 106, 240, .12); } .ab-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .ab-n small { width: 100%; opacity: .85; } .ab-n span { width: 100%; }
.ab-t { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 3px; background: #6a3fb0; color: #fff; } .ab-t.lord { background: #b8842a; }
.ab-cost { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 13px; }

/* 全螢幕戰鬥：避開狀態列與瀏海（iPhone 時間、電量原本壓在標題上） */
#fx-ov, #raid-ov { padding-left: calc(10px + env(safe-area-inset-left)); }
.update-bar { padding-top: calc(10px + env(safe-area-inset-top)) !important; } /* 既有規則用了 !important */
#fx-ov .fx-n { display: inline-flex; align-items: center; gap: 4px; } #fx-ov .fx-n .ui-ic { width: 16px; height: 16px; }
#fx-guard { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fx-gi { width: 24px; height: 24px; }

/* 開放戰鬥下方資訊區：填滿剩餘高度，紀錄區吃掉多的空間 */
.fx-more { width: 100%; max-width: 768px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-box { padding: 7px 9px; background: #15131f; border: 1px solid #3a3450; border-radius: 6px; min-width: 0; } .fx-box h4 { margin: 0 0 5px; font-size: 12px; font-weight: 700; color: #c8a8ff; letter-spacing: .06em; }
.fx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .fx-stats > div { display: flex; flex-direction: column; padding: 4px 5px; background: rgba(255, 255, 255, .04); border-radius: 4px; min-width: 0; } .fx-stats small { font-size: 10px; color: #a8a0b8; } .fx-stats b { font-size: 14px; color: #ffe08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-stats .ok b { color: #8fe39a; } .fx-stats .no b { color: #ff9a7a; font-size: 12px; }
.fx-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px; }
.fx-rk { position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 2px 5px; margin-bottom: 3px; font-size: 12px; color: #efe6d2; border-radius: 3px; overflow: hidden; } .fx-rk i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(224, 71, 91, .3); } .fx-rk.me i { background: rgba(255, 211, 107, .32); } .fx-rk span, .fx-rk b { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-rk b { flex: none; font-weight: 500; }
.fx-rw { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #efe6d2; margin-bottom: 3px; } .fx-rw img { width: 16px; height: 16px; flex: none; }
.fx-logbox { flex: 1 1 110px; min-height: 110px; display: flex; flex-direction: column; } .fx-log { flex: 1; min-height: 0; overflow-y: auto; font-size: 12px; line-height: 1.6; color: #d8d0e0; } .fx-log time { color: #8a8298; margin-right: 6px; font-variant-numeric: tabular-nums; } .fx-log .bad { color: #ff9a9a; } .fx-log .good { color: #8fe39a; } .fx-log .cy { color: #9ff6ff; } .fx-log .warn { color: #ffcf8a; }
.fx-st { font-style: normal; font-size: 10px; padding: 0 3px; border-radius: 3px; background: #4a3a68; color: #fff; } .fx-st.g { background: #2f9fe0; }
#fx-ov .fx-sub + canvas { flex: none; } #fx-ov .raid-mem { flex: none; }

/* 頁面內紅點：帶玩家找到要按的地方 */
.in-dot { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; background: #bd493f; color: #fff4ed; font: 700 11px/1 var(--font, inherit); font-style: normal; vertical-align: 1px; }

/* 轉職外觀預覽 */
.adv-pv { display: grid; place-items: center; height: 104px; margin-bottom: 6px; border-radius: 6px; background: radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--ac) 30%, transparent), rgba(0, 0, 0, .25) 70%); } .adv-pv img { height: 92px; width: auto; image-rendering: pixelated; }
.adv > .tag.gold { display: inline-block; height: auto; align-self: flex-start; }

/* 空白提示跨滿格狀版面、置中（原本落在第一格，擠在左邊） */
.bag-grid > .small.muted { grid-column: 1 / -1; display: grid; place-items: center; min-height: 150px; padding: 24px 16px; text-align: center; line-height: 1.8; border: 1px dashed var(--line2); border-radius: 6px; text-wrap: balance; }

/* 首領戰血條數字（負責人：血量要看得到） */
.pm-bar.fx-hp { position: relative; height: 16px !important; margin-top: 3px; background: #3a1a24; border-radius: 3px; overflow: hidden; } .pm-bar.fx-hp i { display: block; height: 100%; background: #e0475b; } .pm-bar.fx-hp em { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; }

/* 商店購買數量 */
.shop-buy { display: grid; gap: 8px; } .shop-buy-h { display: flex; gap: 10px; align-items: center; } .shop-buy-h img { width: 48px; height: 48px; flex: none; }
.shop-q { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 5px; align-items: center; } .shop-q input { width: 100%; min-width: 0; text-align: center; font-size: 16px; } .shop-q2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.shop-sum { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: rgba(0, 0, 0, .25); border-radius: 6px; } .shop-sum b { font-size: 16px; }

.adv-cur { display: grid; place-items: center; min-height: 40px; margin-top: auto; border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--ac); font-weight: 700; font-size: 14px; }
/* 轉生天賦 */
.rbt { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 7px; } .rbt-h { font-size: 12px; font-weight: 700; color: #ffd36b; line-height: 1.3; } .rbt-h small { display: block; font-weight: 400; color: #8a8298; }
.rbt-c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .rbt-b { appearance: none; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 58px; padding: 4px; border: 1px solid var(--line2); border-radius: 5px; background: rgba(255, 255, 255, .04); color: inherit; font: inherit; text-align: left; cursor: pointer; } .rbt-b i { font-style: normal; font-size: 10px; color: #c8a8ff; } .rbt-b b { font-size: 12px; line-height: 1.25; } .rbt-b small { font-size: 10.5px; color: #a8e8b0; line-height: 1.25; } .rbt-b.on { border-color: #ffd36b; background: rgba(255, 211, 107, .16); box-shadow: inset 0 0 0 1px #ffd36b; }
.rbt.lock .rbt-b { opacity: .45; cursor: default; }
.rb-next { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 8px; border: 1px dashed #6a4aa8; border-radius: 6px; font-size: 13px; } .rb-next b { color: #c8a8ff; }

/* 神話裝備（負責人 2026-11-08：要更特別、外框閃動）：流動的彩虹外框＋外光脈動＋角落星光；傳說輕微呼吸光 */
.slot.myth-slot { border-color: transparent !important; background: radial-gradient(circle at 50% 46%, rgba(255,77,94,.28) 0, transparent 62%) padding-box, linear-gradient(var(--well), var(--well)) padding-box, linear-gradient(120deg, #ff4d5e, #ffd36b, #ff8af0, #b56cff, #ff4d5e) border-box; background-size: 100% 100%, 100% 100%, 300% 300%; border-width: 2px; animation: mythFlow 3s linear infinite, mythPulse 1.8s ease-in-out infinite; }
.slot.myth-slot::after { content: ''; position: absolute; inset: -3px; pointer-events: none; border-radius: 3px; background: radial-gradient(circle at 12% 14%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 86% 80%, #ffd36b 0 1.5px, transparent 2.5px), radial-gradient(circle at 84% 16%, #ff8af0 0 1px, transparent 2px); animation: mythTwinkle 1.4s ease-in-out infinite; }
.slot.leg-slot { animation: legBreath 2.6s ease-in-out infinite; }
.myth-name { background: linear-gradient(90deg, #ff4d5e, #ffd36b, #ff8af0, #ff4d5e); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: mythFlow 3s linear infinite; text-shadow: none; }
@keyframes mythFlow { 0% { background-position: 0 0, 0 0, 0% 50%; } 100% { background-position: 0 0, 0 0, 300% 50%; } }
.myth-name { animation-name: mythText; } @keyframes mythText { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes mythPulse { 0%, 100% { box-shadow: 0 0 6px rgba(255,77,94,.55), inset 0 0 6px rgba(255,211,107,.25); } 50% { box-shadow: 0 0 16px rgba(255,77,94,.95), 0 0 4px #ffd36b, inset 0 0 10px rgba(255,211,107,.45); } }
@keyframes mythTwinkle { 0%, 100% { opacity: .2; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes legBreath { 0%, 100% { box-shadow: inset 0 0 0 1px var(--glow), 0 0 2px var(--glow); } 50% { box-shadow: inset 0 0 0 1px var(--glow), 0 0 9px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .slot.myth-slot, .slot.myth-slot::after, .slot.leg-slot, .myth-name { animation: none; } }

/* 深淵層數列（負責人 2026-11-08：挑戰中直排）：右側按鈕／標籤不換行、說明文字可換行 */
.ab-row .ab-n { flex: 1; min-width: 0; } .ab-row > .btn, .ab-row > .tag { flex: none; white-space: nowrap; }
.ab-now { color: #ffd36b; border-color: #c86af0; background: rgba(200,106,240,.18); }

/* 首領倒數：剩 10 秒以內閃爍 */
.boss-hurry { animation: bossHurry .6s ease-in-out infinite alternate; } @keyframes bossHurry { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .boss-hurry { animation: none; } }
/* 詞條共鳴（docs/40） */
.reso-line { color: #ffd36b; font-weight: 700; margin-top: 2px; }
.card.reso.on h3 { color: #ffd36b; }
.card.reso:not(.on) h3 { color: var(--muted, #8d97a8); }
/* 參觀別人的裝備 */
.view-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; margin: 6px 0; }
.view-gear .slot { cursor: pointer; }
/* 每週夢境預報 */
.fc-card { border-color: #e3c27288; }
.fc-card .fc-map { margin-top: 3px; }
/* 每週夢境預報 */
.fc-card { border-color: #e3c27288; }
.fc-card .fc-map { margin-top: 3px; }

/* v7.15.0 外觀特效（負責人：外觀要真的有效果、非常搶眼） */
.av-frame { position: absolute; inset: -4px; border: 3px solid var(--fc, #fff); border-radius: 4px; pointer-events: none; z-index: 2; box-shadow: 0 0 8px var(--fc, #fff), inset 0 0 6px var(--fc, #fff); animation: frGlow 2.2s ease-in-out infinite; }
.av-frame.fx-glow { box-shadow: 0 0 12px var(--fc), 0 0 22px var(--fc), inset 0 0 8px var(--fc); }
.av-frame.fx-prism, .av-frame.fx-gold { border: 0; padding: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); background-size: 300% 100%; animation: frSweep 2.4s linear infinite; box-shadow: none; }
.av-frame.fx-prism { background-image: linear-gradient(90deg, #ff5f8f, #ffb34a, #fff36b, #6bff9a, #5fd0ff, #a87bff, #ff5f8f, #ffb34a, #fff36b); filter: drop-shadow(0 0 4px #ff9fe0) drop-shadow(0 0 8px #8fd0ff); }
.av-frame.fx-gold { background-image: linear-gradient(110deg, #8a5a14 0%, #ffd36b 30%, #fff8dc 38%, #ffd36b 46%, #a8741e 60%, #ffd36b 80%, #8a5a14 100%); filter: drop-shadow(0 0 4px #ffb43a) drop-shadow(0 0 9px #ff9f43); }
.av-frame.fx-flame { border-color: #ff7a3a; animation: frFlame .9s ease-in-out infinite alternate; }
@keyframes frGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: brightness(1.35); } }
@keyframes frSweep { from { background-position: 0% 0; } to { background-position: 150% 0; } }
@keyframes frFlame { 0% { box-shadow: 0 0 6px #ff4a1c, 0 -3px 10px #ff9a2f, inset 0 0 6px #ff7a2f; } 100% { box-shadow: 0 0 12px #ff6a2a, 0 -7px 18px #ffd36b, inset 0 0 9px #ff9a2f; } }
.cpv.k-frame .av-frame { inset: 4%; }
/* 特效名字（自己的抬頭、聊天、排行榜、名片都會套用） */
[data-nc="rainbow"] { background: linear-gradient(90deg, #ff6f9f, #ffb34a, #fff36b, #7dffa8, #6fd6ff, #b48cff, #ff6f9f) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: ncFlow 2.4s linear infinite; filter: drop-shadow(0 0 3px rgba(255,159,224,.55)); text-shadow: none !important; }
[data-nc="ice"] { color: #d8f3ff !important; text-shadow: 0 0 4px #6fd0ff, 0 0 9px #3aa8ff !important; animation: ncPulse 2s ease-in-out infinite; }
[data-nc="blaze"] { color: #ffd0a0 !important; text-shadow: 0 0 4px #ff7a2f, 0 -2px 9px #ff4a1c !important; animation: ncPulse 1.1s ease-in-out infinite; }
@keyframes ncFlow { to { background-position: 200% 0; } }
@keyframes ncPulse { 50% { filter: brightness(1.35); } }
/* 預覽：光環即時動畫畫布、流轉染色 */
.cpv.k-live { width: 64px; height: 70px; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, rgba(255,255,255,.08), rgba(0,0,0,.45)); }
.cpv-l.k-live { width: 116px; height: 126px; } .cpv.k-live canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cpv.k-cycle img { position: absolute; opacity: 0; animation: cpvCyc 2.1s steps(1) infinite; }
@keyframes cpvCyc { 0% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; } }
/* 商城：外觀精選 */
.cos-feat .cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; margin-top: 8px; }
.cf-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.18); text-align: center; }
.cf-card .cpv-m { width: 64px; height: 70px; } .cf-card .cpv-m img { width: 40px; height: 50px; }
.cf-card.star { border-color: transparent; background: linear-gradient(var(--panel, #1a1526), var(--panel, #1a1526)) padding-box, linear-gradient(120deg, #ff6f9f, #ffd36b, #7dffa8, #6fd6ff, #b48cff, #ff6f9f) border-box; background-size: 100% 100%, 300% 100%; border: 2px solid transparent; animation: cfStar 4s linear infinite; box-shadow: 0 0 14px rgba(255,159,224,.25); }
.cf-card.on { outline: 2px solid #ffd36b; outline-offset: 1px; }
@keyframes cfStar { to { background-position: 0 0, 300% 0; } }
.cf-name { font-weight: 700; } .cf-kind { font-size: 11px; color: var(--muted, #9aa); } .cf-kind b { color: #ff9fe0; }
.cf-desc { min-height: 2.6em; line-height: 1.3; } .cf-card .btn { margin-top: auto; }
.task.cos-star { background: linear-gradient(90deg, rgba(255,159,224,.10), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .av-frame, [data-nc], .cf-card.star, .cpv.k-cycle img { animation: none !important; } .cpv.k-cycle img:first-child { opacity: 1; } }

/* ===== 正式服／測試服切換（上架規劃/正式服與測試服_實作規劃.md） ===== */
.srv-switch { display: flex; gap: 0; margin: 0 0 10px; border: 2px solid #1b1425; border-radius: 10px; overflow: hidden; background: rgba(20, 14, 34, .7); }
.srv-opt { flex: 1; padding: 8px 6px; font: inherit; font-weight: 700; font-size: 14px; color: #c9bfe0; background: transparent; border: 0; cursor: pointer; }
.srv-opt + .srv-opt { border-left: 2px solid #1b1425; }
.srv-opt.on { color: #1b1425; background: linear-gradient(#ffe08a, #f0b84a); }
html[data-server="test"] .srv-opt.on { background: linear-gradient(#9fe6ff, #4ab8e8); }
.srv-note { margin: -4px 0 10px; padding: 6px 8px; font-size: 12px; line-height: 1.45; color: #0d2a3a; background: #bfefff; border: 2px solid #1b1425; border-radius: 8px; }
.acct-card .srv-switch { margin-top: 6px; }
html[data-server="test"] body::after { content: '測試服'; position: fixed; z-index: 9000; top: calc(env(safe-area-inset-top, 0px) + 2px); left: 50%; transform: translateX(-50%); padding: 1px 10px; font: 700 11px/1.6 "PingFang TC", "Noto Sans TC", sans-serif; letter-spacing: 2px; color: #0d2a3a; background: #7fd8ff; border: 2px solid #1b1425; border-radius: 0 0 8px 8px; pointer-events: none; }
html[data-server="test"] .title-logo p::after { content: ' ・ 測試服'; color: #7fd8ff; }