/* 配色沿用原作 2009-12 新版介面：深藍金屬底、金邊、黃色標題、綠色數值 */
:root {
  --bg: #0f1826;
  --panel: #16223a;
  --panel-2: #1c2b47;
  --border: #34496d;
  --gold: #c9a24a;
  --title: #f2d16b;
  --num: #6fdc8c;
  --text: #e6e9ef;
  --muted: #8f9db4;
  --bad: #ff7b72;
  --warn: #f0b35a;
  --radius: 10px;
  --tabbar: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* 萬一有東西超出畫面，也不要讓整頁變寬、可以左右滑 */
}
/* iPhone 點輸入框時字小於 16px 會自動放大畫面，而且不會縮回去 */
@media (max-width: 600px) { input, select, textarea { font-size: 16px; } }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
}

.loading { text-align: center; color: var(--muted); padding-top: 40vh; }

button {
  font: inherit;
  color: inherit;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: linear-gradient(#2b3f63, #1e2e4c);
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { opacity: .45; cursor: default; border-color: var(--border); }
button.primary { background: linear-gradient(#c9a24a, #9c7a2f); color: #1a1405; font-weight: 700; border-color: #e6c46a; }
button.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
button.small { min-height: 32px; padding: 0 10px; font-size: 13px; }

input {
  font: inherit;
  color: var(--text);
  background: #0c1420;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 10px;
  width: 100%;
}

.num { color: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.flat { margin: 0; }
.small-text { font-size: 13px; }
.flat.small-text { margin-top: 4px; }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

/* ── 面板 ── */
.panel {
  background: linear-gradient(var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-top-color: var(--gold);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  margin: 12px 12px 0;
  padding: 12px 14px;
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--title);
  letter-spacing: .05em;
}

/* ── 頂部：玩家與資源 ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15, 24, 38, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold);
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
}
.who { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.who b { color: var(--title); }
.who > button { flex: none; white-space: nowrap; } /* 窄螢幕上「登出」不要被擠成直的 */
.faction-tag { font-size: 12px; border: 1px solid var(--gold); color: var(--title); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.res { display: grid; grid-template-columns: 1fr auto; align-items: baseline; font-size: 13px; }
.res .val { grid-column: 1 / -1; }
.res .name { color: var(--muted); }
.res .amt { font-size: 15px; }
.res .cap { color: var(--muted); font-size: 11px; }
.res .rate { color: var(--muted); font-size: 11px; white-space: nowrap; }
.res.full .amt { color: var(--bad); }
.res.near .amt { color: var(--warn); }

/* ── 建築佇列 ── */
.queue-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bar { height: 6px; background: #0c1420; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--title)); }

/* ── 建築列表 ── */
.cat-title { margin: 18px 16px 0; color: var(--gold); font-size: 13px; letter-spacing: .15em; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; }
.item + .item { border-top: 1px solid rgba(52, 73, 109, .6); margin-top: 10px; padding-top: 10px; }
.item .title { font-weight: 700; }
.item .title .lv { color: var(--num); font-weight: 400; margin-left: 6px; }
.item .desc, .item .effect, .item .cost { grid-column: 1 / -1; font-size: 13px; }
.item .desc { color: var(--muted); }
.cost span { margin-right: 8px; white-space: nowrap; }
.cost .short { color: var(--bad); }
.reason { grid-column: 1 / -1; font-size: 12px; color: var(--warn); min-height: 0; }

/* ── 專精 ── */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.spec-grid button { min-height: 52px; line-height: 1.25; font-size: 13px; }
.spec-grid button small { display: block; color: var(--muted); font-size: 11px; }

/* ── 徵兵 ── */
.troop-head { display: flex; justify-content: space-between; align-items: baseline; }
.tier { color: var(--title); font-size: 13px; margin-left: 6px; }
.counter { font-size: 12px; margin: 4px 0; }
.counter .up { color: var(--num); }
.counter .down { color: var(--bad); }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px auto auto; gap: 6px; margin-top: 8px; }
.stepper input { text-align: center; }
.pop-line { display: flex; justify-content: space-between; font-size: 13px; }
.total { font-size: 12px; margin-top: 6px; }
.total .bad { color: var(--bad); }

/* ── 底部分頁 ── */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  background: rgba(12, 20, 32, .97);
  border-top: 1px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-inner { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; max-width: 560px; }
.tabbar button {
  border: 0;
  border-radius: 0;
  background: none;
  min-height: var(--tabbar);
  color: var(--muted);
  font-size: 14px;
}
.tabbar button.on { color: var(--title); font-weight: 700; box-shadow: inset 0 2px 0 var(--title); }
.tabbar button small { display: block; font-size: 10px; }

/* ── 登入 ── */
.auth { padding: 12vh 16px 0; }
.auth h1 { text-align: center; color: var(--title); margin: 0 0 4px; letter-spacing: .1em; }
.auth .sub { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.auth label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.factions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.factions button.on { background: linear-gradient(#c9a24a, #9c7a2f); color: #1a1405; font-weight: 700; }
.auth .row { display: flex; gap: 8px; margin-top: 20px; }
.auth .row button { flex: 1; }
.auth .switch { text-align: center; margin: 12px 0 0; font-size: 13px; }

/* ── 提示 ── */
#toast {
  position: fixed;
  left: 0; right: 0; margin: 0 auto; width: fit-content;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  background: #0c1420;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 14px;
  max-width: calc(100% - 32px);
  pointer-events: none;
  z-index: 30;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.err { border-color: var(--bad); color: var(--bad); }

/* ── M2：將領 ── */
.panel h3 { margin: 12px 0 6px; font-size: 14px; color: var(--gold); }
.up { color: var(--num); }
.down { color: var(--bad); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.row-btns.end { justify-content: flex-end; }
.gen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gen-head b { color: var(--title); font-size: 16px; }
.order { display: flex; gap: 4px; }
.order button { min-width: 36px; padding: 0; }
.growth { font-size: 12px; margin-left: 8px; padding: 0 6px; border-radius: 4px; border: 1px solid currentColor; }
.g-gray { color: #a3abb6; }
.g-green { color: var(--num); }
.g-blue { color: #7ab8ff; }
.bar.exp { height: 4px; margin-top: 6px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; min-height: 36px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: linear-gradient(#c9a24a, #9c7a2f); color: #1a1405; font-weight: 700; }
.toggle { margin-top: 8px; width: 100%; }
.gen-details { border-top: 1px solid rgba(52, 73, 109, .6); margin-top: 10px; padding-top: 6px; }
.troop-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.troop-pick button { padding: 0; }
.troop-pick button.on, .train-grid button.on { background: linear-gradient(#c9a24a, #9c7a2f); color: #1a1405; font-weight: 700; }
.train-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.train-grid button { min-height: 48px; line-height: 1.2; }
.train-grid button small { display: block; font-size: 11px; color: var(--muted); }

/* ── M2：虎牢關 ── */
.unit-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; }
.unit-row + .unit-row { border-top: 1px dashed rgba(52, 73, 109, .6); }
.run .row-btns button { flex: 1; }

/* ── 戰報 ── */
.modal-back { position: fixed; inset: 0; z-index: 20; background: rgba(5, 9, 15, .78); display: flex; justify-content: center; align-items: flex-end; }
.modal {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(var(--panel-2), var(--panel)); border: 1px solid var(--gold); border-bottom: 0;
  border-radius: 14px 14px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}
.modal h2 { margin: 0 0 6px; color: var(--title); font-size: 17px; }
.legend .me, .blog .L, .flip .blog .R { color: #7ab8ff; }
.legend .foe, .blog .R, .flip .blog .L { color: #ff9a8f; }
.field { margin: 10px 0; background: #0c1420; border: 1px solid var(--border); border-radius: 8px; padding: 6px 0; }
.lane { position: relative; height: 40px; margin: 0 6px; border-bottom: 1px dashed rgba(52, 73, 109, .4); }
.lane:last-child { border-bottom: 0; }
.tok {
  position: absolute; top: 4px; width: 46px; height: 32px; border-radius: 6px;
  left: calc(var(--x) * (100% - 46px) / var(--w));
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  font-size: 12px; transition: left .35s ease, opacity .3s, transform .15s;
}
.tok b { font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.tok.L, .flip .tok.R { background: #1d3a5f; border: 1px solid #7ab8ff; }
.tok.R, .flip .tok.L { background: #5a2626; border: 1px solid #ff9a8f; }
.tok.act { transform: scale(1.15); box-shadow: 0 0 0 2px var(--title); z-index: 2; }
.tok.dead { opacity: .25; }
.tok .pop { position: absolute; top: -14px; font-style: normal; font-size: 12px; color: var(--bad); font-weight: 700; animation: rise .7s ease-out forwards; pointer-events: none; }
.tok .pop.up { color: var(--title); }
.tok .pop.crit { font-size: 15px; }
@keyframes rise { from { transform: translateY(4px); opacity: 1; } to { transform: translateY(-12px); opacity: 0; } }
.blog { list-style: none; margin: 8px 0 0; padding: 0; max-height: 34vh; overflow-y: auto; font-size: 12.5px; border-top: 1px solid var(--border); }
.blog li { padding: 4px 0; border-bottom: 1px solid rgba(52, 73, 109, .35); }
.blog .r { display: inline-block; min-width: 22px; color: var(--muted); }
.tag { display: inline-block; font-size: 11px; padding: 0 5px; margin-left: 4px; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); }
.tag.up { color: var(--num); border-color: var(--num); }
.tag.down { color: var(--bad); border-color: var(--bad); }
.bsum { margin-top: 10px; padding: 10px; border: 1px solid var(--gold); border-radius: 8px; }
.bsum p + p { margin-top: 4px; }

/* ── M3：地圖 ── */
.zone { font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid currentColor; margin-left: 4px; white-space: nowrap; }
.z-safe { color: var(--num); }
.z-open { color: var(--warn); }
.z-war { color: var(--bad); }
.mode-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mode-row .seg { flex: 1; margin: 0; }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.merit { margin-left: auto; align-self: center; }
.worldmap { width: 100%; height: auto; display: block; background: #0c1420; border: 1px solid var(--border); border-radius: 8px; }
.worldmap .edges line { stroke: #34496d; stroke-width: .6; }
.worldmap .node { cursor: pointer; }
.worldmap .node .hit { fill: transparent; }
.worldmap .node text { font-size: 3.4px; fill: var(--text); text-anchor: middle; pointer-events: none; }
.worldmap .node text.cnt { font-size: 2.8px; fill: var(--title); text-anchor: start; }
.worldmap .node.here circle:not(.hit) { stroke: #fff; stroke-width: .8; }
.worldmap .node.sel circle.hit { stroke: var(--title); stroke-width: .5; stroke-dasharray: 1 .8; }
.worldmap .me { fill: #fff; stroke: var(--title); stroke-width: .6; }
.sel-info { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.player, .report { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; }
.player + .player, .report + .report { border-top: 1px solid rgba(52, 73, 109, .6); }
.ftag { font-size: 11px; padding: 0 6px; border-radius: 4px; color: var(--fc); border: 1px solid var(--fc); }
.badge, .tabbar .dot {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-style: normal; text-align: center; margin-left: 6px; vertical-align: middle;
}
.tabbar button { position: relative; }
.tabbar .dot { position: absolute; top: 6px; right: 8px; margin: 0; }

/* ── M4：攻城 ── */
.target { padding: 10px 0; }
.target + .target { border-top: 1px solid rgba(52, 73, 109, .6); }
.target .tag { margin-left: 6px; }
.scout { margin-top: 6px; padding: 6px 8px; background: #0c1420; border: 1px dashed var(--border); border-radius: 6px; }
.scout div + div { margin-top: 2px; }
.tabbar button { font-size: 13px; }

/* ── M5：市場 ── */
.seg.three { grid-template-columns: repeat(3, 1fr); }
.mk-tabs { margin: 12px 12px 0; background: var(--panel); }
.claim-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.price-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.price-grid > div:nth-child(odd) { color: var(--muted); }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book-head { font-size: 12px; margin-bottom: 4px; }
.book-row {
  display: flex; justify-content: space-between; width: 100%; min-height: 32px; padding: 0 8px; margin-bottom: 4px;
  font-size: 13px; background: #0c1420; border: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.book-row.ask span:first-child { color: var(--bad); }
.book-row.bid span:first-child { color: var(--num); }
.field-label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.stepper.three { grid-template-columns: 40px 1fr 40px; }
.stepper.three.plus-max { grid-template-columns: 40px 1fr 40px auto; }
.wide { flex: 1; width: 100%; }
.tabbar button { font-size: 12.5px; padding: 0 2px; }
.tabbar .dot { right: 2px; }

/* ── M6：戰鬥子頁、競技場、公會 ── */
.sub-tabs { margin: 12px 12px 0; background: var(--panel); }
.member { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.member + .member { border-top: 1px solid rgba(52, 73, 109, .6); }
.member .row-btns { margin-top: 0; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4a5568; margin-right: 6px; vertical-align: middle; }
.online.on { background: var(--num); }
.stepper.two-col { grid-template-columns: 1fr auto; margin-top: 10px; }
.stepper.two-col input { text-align: left; }
.chat { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; font-size: 13px; }
.chat li { padding: 4px 0; border-bottom: 1px solid rgba(52, 73, 109, .35); word-break: break-word; }

/* ── M7：虎牢關守將 ── */
.cleared { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--gold); border-radius: 8px; background: rgba(201, 162, 74, .06); }
.cleared p { margin-top: 4px; }
.unit-row.me { color: var(--title); }

/* ── M8：世界 BOSS ── */
.boss { padding: 10px 0; }
.boss + .boss { border-top: 1px solid rgba(52, 73, 109, .6); }
.boss-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bar.hp { margin: 6px 0 4px; }
.bar.hp > i { background: linear-gradient(90deg, #b3413a, var(--bad)); }
.worldmap .boss-mark { cursor: pointer; }
.worldmap .boss-mark circle { fill: rgba(255, 123, 114, .18); stroke: var(--bad); stroke-width: .7; animation: boss-pulse 1.6s ease-in-out infinite; }
.worldmap .boss-mark text { font-size: 2.8px; fill: var(--bad); text-anchor: middle; font-weight: 700; }
@keyframes boss-pulse { 50% { stroke-width: 1.4; fill: rgba(255, 123, 114, .32); } }

/* ── M9：裝備、官職 ── */
.seg.four { grid-template-columns: repeat(4, 1fr); }
.r-green { color: #7fd88f; }
.r-blue { color: #7ab8ff; }
.r-purple { color: #c49bff; }
.r-orange { color: #ffae5c; }
.r-gem { color: var(--title); }
.r-stone { color: #9fd3d6; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { min-height: 50px; padding: 2px 4px; font-size: 12px; line-height: 1.2; border-color: var(--border); background: #0c1420; }
.slot small { display: block; color: var(--muted); font-size: 10px; }
.slot.empty { color: var(--muted); }
.slot.on { box-shadow: 0 0 0 2px var(--title); }
.gear-detail, .item-detail { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.item-detail .sockets { margin-top: 6px; }
.gem-opts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.target.selected { background: rgba(201, 162, 74, .06); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.pick-grid.four { grid-template-columns: repeat(4, 1fr); }
.pick-grid.five { grid-template-columns: repeat(5, 1fr); }
.pick-grid.slots-pick { grid-template-columns: repeat(4, 1fr); }
.pick-grid button { min-height: 40px; line-height: 1.15; padding: 2px 4px; }
.pick-grid button small { display: block; font-size: 10px; color: var(--muted); }
.pick-grid button.on { box-shadow: 0 0 0 2px var(--title); background: #2b3f63; }
.faction-tag.office { color: #1a1405; background: var(--gold); border-color: var(--gold); }
.announce { padding: 8px 10px; border-left: 3px solid var(--gold); background: rgba(201, 162, 74, .08); font-size: 14px; }
.rank-row { padding: 6px 0; }
.rank-row + .rank-row { border-top: 1px solid rgba(52, 73, 109, .6); }
/* 戰報：湊滿套裝的部隊有光環 */
.tok.halo-green { box-shadow: 0 0 6px 1px #7fd88f; }
.tok.halo-blue { box-shadow: 0 0 6px 1px #7ab8ff; }
.tok.halo-purple { box-shadow: 0 0 7px 2px #c49bff; }
.tok.halo-orange { box-shadow: 0 0 8px 2px #ffae5c; }

/* 查看玩家、裝備卡片、公會頻道展示 */
button.link {
  background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: inherit;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
button.link:hover { color: var(--title); }
.gear-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; }
.gear-card {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; min-width: 0;
  border: 1px solid currentColor; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 13px;
}
.gear-card small { color: var(--muted); font-size: 11px; }
.gear-card .small-text { color: var(--text); overflow-wrap: anywhere; }
.gear-card.empty { color: var(--muted); border-style: dashed; }
.profile-general { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.profile-general.halo-green { box-shadow: 0 0 6px 0 #7fd88f; }
.profile-general.halo-blue { box-shadow: 0 0 6px 0 #7ab8ff; }
.profile-general.halo-purple { box-shadow: 0 0 8px 0 #c49bff; }
.profile-general.halo-orange { box-shadow: 0 0 10px 0 #ffae5c; }
.chat-item { margin: 4px 0 2px; max-width: 240px; }

/* ── 聊天列、聊天面板、公告跑馬燈 ── */
#app { padding-bottom: calc(var(--tabbar) + var(--chatbar) + env(safe-area-inset-bottom) + 16px); }
:root { --chatbar: 32px; }
#toast { bottom: calc(var(--tabbar) + var(--chatbar) + env(safe-area-inset-bottom) + 12px); }
.chatbar {
  position: fixed; left: 0; right: 0; margin: 0 auto; z-index: 5;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px; height: var(--chatbar); min-height: 0;
  display: flex; align-items: center; gap: 4px; padding: 0 12px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: rgba(12, 20, 32, .95); color: var(--text); font-size: 13px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatbar .badge { margin-left: auto; flex: none; }
.ch { flex: none; color: var(--muted); }
.ch-world { color: #7ab8ff; } .ch-faction { color: #7fd88f; } .ch-guild { color: #c49bff; }
.ch-dm { color: #ffae5c; } .ch-system { color: var(--title); }
.chat-panel {
  position: fixed; left: 0; right: 0; margin: 0 auto; top: 0; z-index: 15;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.chat-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; color: var(--title); }
.chat-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 12px; }
.chat-tabs button { position: relative; }
.chat-tabs .dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px; }
.chat-hint { margin: 6px 0; }
.chat-empty { margin: 16px 0; }
.chat-body .chat-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.chat-body .chat-list li { padding: 3px 0; overflow-wrap: anywhere; }
.chat-body .chat-list li.mine b { color: var(--title); }
.chat-body .chat-list li.sys { padding: 5px 0; border-bottom: 1px dashed var(--border); }
.chat-input { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); }
.dm-threads { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.dm-thread { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 0; padding: 8px 10px; }
.dm-thread .badge { margin-left: 6px; }
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
#ticker {
  position: fixed; left: 0; right: 0; top: 0; transform: translateY(calc(-100% - 16px)); z-index: 25;
  width: calc(100% - 24px); max-width: 536px; margin: 8px auto 0; padding: 8px 12px;
  background: #1a1405; border: 1px solid var(--gold); border-radius: 8px; font-size: 14px;
  transition: transform .3s, visibility .3s; pointer-events: none; visibility: hidden; /* 收起來時整個藏好，不露出金邊 */
}
#ticker.show { transform: translateY(0); visibility: visible; }

/* 將領卡片的空裝備格：背包裡有能穿的 */
.slot { position: relative; }
.slot .dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }

/* ── 像素圖：將領頭像、物品圖示 ── */
.px { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.px.icon { border-radius: 4px; }
.gen-head { justify-content: flex-start; align-items: center; }
.gen-head .gen-name { flex: 1; min-width: 0; }
.item.offer { grid-template-columns: auto 1fr auto; align-items: center; }
.with-icon { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slot .px.icon { display: block; margin: 2px auto 0; }
.gc-head { display: flex; align-items: center; gap: 6px; }

/* ── 戰場小兵 ── */
.lane { height: 54px; }
.tok { height: 48px; top: 3px; justify-content: flex-end; padding-bottom: 1px; }
.tok .px.soldier { box-shadow: none; border-radius: 0; display: block; }
.px.face-left { transform: scaleX(-1); }
.legend-troops { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; color: var(--muted); }
.legend-troops span { display: inline-flex; align-items: center; gap: 4px; }
.legend-troops .px { box-shadow: none; }

/* ── 主城建築、地圖節點的像素圖 ── */
.item.bld .title.with-icon { gap: 10px; }
.px.building { border-radius: 6px; }
.worldmap .node .ring { fill: none; }

/* 戰場小兵：不要方形底色，用小兵自己的外框（我方藍、敵方紅）分敵我 */
.tok, .tok.L, .tok.R, .flip .tok.L, .flip .tok.R { background: none; border: 0; border-radius: 0; }
.tok b { text-shadow: 0 0 2px #000, 0 0 3px #000; }
.tok.L b, .flip .tok.R b { color: #a9cfff; }
.tok.R b, .flip .tok.L b { color: #ffb4ab; }
.tok.act { box-shadow: none; filter: drop-shadow(0 0 3px var(--title)); }
.tok.halo-green { box-shadow: none; filter: drop-shadow(0 0 3px #7fd88f); }
.tok.halo-blue { box-shadow: none; filter: drop-shadow(0 0 3px #7ab8ff); }
.tok.halo-purple { box-shadow: none; filter: drop-shadow(0 0 4px #c49bff); }
.tok.halo-orange { box-shadow: none; filter: drop-shadow(0 0 4px #ffae5c); }

/* 戰鬥紀錄：平常固定高度（約 4 行，自動捲到最新），展開才變長 */
.blog { height: 92px; max-height: none; }
.blog.expanded { height: 45vh; }

/* ── 新手引導、功能介紹 ── */
.panel.guide { border-color: var(--title); box-shadow: 0 0 0 1px rgba(242, 209, 107, .25); }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--title); }
.guide-bar { margin: 6px 0 4px; }
.guide-bar i { background: var(--title); }
.panel.intro { border-color: #7ab8ff; }
.panel.intro h2 { color: #a9cfff; }
.guide-pulse { animation: guide-pulse 1s ease-in-out 3; outline: 2px solid var(--title); outline-offset: 2px; border-radius: 8px; }
@keyframes guide-pulse { 0%, 100% { outline-color: rgba(242, 209, 107, 0); } 50% { outline-color: var(--title); } }

/* 註冊頁的世界觀 */
.auth .lore { max-width: 30em; margin: 0 auto 16px; font-size: 13px; line-height: 1.7; color: var(--muted); text-align: center; }

/* 陣營商店 */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.shop-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.shop-item button { grid-column: 1 / -1; }

/* 主城俯瞰圖 */
.town-panel { padding: 8px; }
.town-panel p { margin-top: 6px; }
.town { position: relative; width: 100%; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); background: #8fb05c; }
.town-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.spot { position: absolute; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.spot:hover { background: rgba(255, 255, 255, .14); }
.spot.sel { outline: 2px dashed var(--title); outline-offset: -1px; background: rgba(255, 240, 200, .12); }
.spot-lv { position: absolute; right: 0; bottom: 0; font-style: normal; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 5px; background: rgba(20, 16, 28, .85); color: #f2e6c4; font-weight: 700; pointer-events: none; }
.spot-lv.none { display: none; }
.spot-lv.can::after { content: '▲'; color: #7fe07f; margin-left: 1px; font-size: 8px; }
.spot-bar { position: absolute; left: 12%; right: 12%; top: 2px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .55); pointer-events: none; }
.spot-bar b { display: block; height: 100%; width: 0; background: #f2d16b; border-radius: 2px; }
.spot-hammer { position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; transform-origin: 40% 100%; animation: hammer .6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes hammer { from { transform: rotate(-35deg); } to { transform: rotate(15deg); } }
.smoke { position: absolute; pointer-events: none; }
.smoke b { position: absolute; left: 0; top: 0; width: 4px; height: 4px; background: rgba(230, 230, 236, .8); animation: smoke 2.4s linear infinite; }
.smoke b + b { animation-delay: 1.2s; }
@keyframes smoke { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(5px, -16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spot-hammer, .smoke b { animation: none; } .smoke { display: none; } }

/* 聊天管理：檢舉、禁言、管理員分頁 */
.chat-list .rep { margin-left: 6px; font-size: 11px; color: var(--muted); opacity: .55; min-height: 0; padding: 0 2px; }
.chat-list .rep:hover, .chat-list .rep:focus-visible { opacity: 1; color: var(--danger, #e07a6a); }
.chat-list li.rep-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; margin: 2px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.chat-muted { margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); color: var(--warn, #e0a03a); font-size: 13px; }
.mod-list { display: flex; flex-direction: column; gap: 8px; }
.mod-card { padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.mod-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.mod-mute-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.mod-mute-row button { margin-left: auto; }

/* 將領裝備格：方格，圖示撐滿；部位名在左上角，套裝名在底部；空格是灰色剪影 */
.slots { max-width: 380px; }
.slot { aspect-ratio: 1; min-height: 0; padding: 0; overflow: hidden; }
.slot .px.slot-icon { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 7px; box-shadow: none; }
.slot.empty .px.slot-icon { inset: 16%; width: 68%; height: 68%; }
.slot .slot-name { position: absolute; z-index: 1; top: 3px; left: 3px; padding: 0 4px; border-radius: 4px; background: rgba(12, 20, 32, .72); color: #cfd6e2; font-size: 10px; line-height: 15px; }
.slot .slot-set { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 8px 2px 3px; background: linear-gradient(transparent, rgba(12, 20, 32, .88) 55%); font-size: 11px; font-weight: 700; line-height: 1.2; }
.slot.empty .slot-set { background: none; font-weight: 400; }
.slot .dot { z-index: 2; }
.auto-to { margin-top: 6px; color: var(--muted); }
.auto-to input { width: 4.5em; min-height: 30px; padding: 2px 6px; text-align: center; }

/* 城主頭像 */
.who-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lord-btn { min-height: 0; padding: 0; border: 0; background: none; border-radius: 6px; line-height: 0; }
.lord-btn:hover .px, .lord-btn:focus-visible .px { box-shadow: 0 0 0 2px var(--title); }
.chat-list .px.lord { vertical-align: middle; margin-right: 3px; border-radius: 4px; }
.profile-head { gap: 10px; }
.profile-head h2 { margin: 0; }
.lord-top { display: flex; gap: 12px; align-items: center; }
.lord-top > div { flex: 1; min-width: 0; }
.lord-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.lord-row { display: grid; grid-template-columns: 5em auto 1fr auto; align-items: center; gap: 6px; }
.lord-row b { text-align: center; font-weight: 600; }
.lord-row button { min-width: 32px; }
.lord-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.lord-outfit { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 3px; border-radius: 6px; }
.lord-outfit.on { outline: 2px solid var(--title); color: var(--title); }
.target.with-lord { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.target.with-lord > .px.lord { grid-row: span 2; align-self: start; }
.bid-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.bid-form select, .bid-form input { min-height: 32px; }
.bid-form input { width: 6.5em; }

/* 元寶、貴族、錢莊、商城 */
.seg.five { grid-template-columns: repeat(5, 1fr); }
.seg.five button { padding: 0 4px; font-size: 13px; }
.gold-tag { margin-left: 6px; padding: 1px 8px; border-radius: 10px; border: 1px solid #b8923a; color: #f2d16b; font-size: 12px; white-space: nowrap; }
.gold-num { color: #f2d16b; font-weight: 700; }
.noble-tag { display: inline-block; margin: 0 3px; padding: 0 4px; border-radius: 4px; background: linear-gradient(#b98ae8, #7a4fc0); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: middle; }
.bank-book { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bank-book h3 { margin: 0 0 4px; font-size: 12px; }
.shop-perks { margin: 6px 0 8px; padding-left: 18px; line-height: 1.7; }
.shop-grid.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shop-grid.wide .shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
button.lord-outfit { min-height: 0; border: 0; background: none; cursor: pointer; }

/* 帳號提醒條 */
.acct-banner { max-width: 560px; margin: 8px auto 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acct-banner.warn-bg { border-color: #b8923a; background: rgba(240, 179, 90, .08); }
.acct-banner > span { flex: 1 1 240px; overflow-wrap: anywhere; } /* 文字一整段，按鈕排在後面（窄螢幕換到下一行） */
.legal-links { text-align: center; margin-top: 12px; }
.legal-links a, .lord-modal a { color: #8fc2ff; }

/* 分享戰報 */
.share-box { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: -4px 0 8px; }
.report-link { color: #f2d16b; }

/* 主城列表的建築分類 */
.cat-tabs button { padding: 0 2px; font-size: 13px; }
.cat-tabs small { font-size: 11px; }
.cat-tabs button.on small { color: #1a1405; }