/* 網頁掛機：手機單欄 App。黑漆金匾（跟遊戲對話檔同一套顏色），刻意只有深色一種樣子 */
:root {
  --lacquer: #131012; --panel: #1d1819; --panel-2: #272021; --line: #3b302a;
  --gold: #d6ac52; --gold-soft: #8f733a; --ink: #f0e7d6; --muted: #a8998a;
  --cinnabar: #de5a40; --jade: #4fae8f; --azure: #5b8fd0; --violet: #b294ea; --line-green: #06c755;
  --f-display: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--lacquer); color: var(--ink); margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iPhone 橫拿會自己把長句放大（2026-10-30 使用者：設定頁經驗藥水說明字突然變很大）；網站首頁 site.css 本來就有，掛機頁只載這支所以漏了 */
body { font-family: var(--f-body); font-size: 15px; line-height: 1.6; padding-inline: 14px; padding-block: 0 calc(84px + env(safe-area-inset-bottom, 0px)); }
body:not(.is-app) { padding-bottom: 40px; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.app { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); font-size: 13px; }
.err { color: var(--cinnabar); }
.ok { color: var(--jade); }
.rare { color: var(--gold); } .epic { color: var(--violet); } .warn { color: var(--cinnabar); } .good { color: var(--jade); }
h1 { font-family: var(--f-display); font-weight: 900; font-size: 22px; color: var(--gold); margin: 0 0 8px; text-wrap: balance; }
h2 { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--gold); margin: 0 0 8px; letter-spacing: .04em; }

.top { display: flex; align-items: center; justify-content: space-between; padding-block: 12px 0; }
.brand { font-family: var(--f-display); font-weight: 900; font-size: 19px; color: var(--gold); text-decoration: none; letter-spacing: .06em; }
.brand small { font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.home { font-size: 13px; color: var(--muted); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card.plaque { border-top: 2px solid var(--gold-soft); }
.hero p { margin: 0 0 10px; }
.steps { margin: 6px 0 14px; padding-left: 20px; display: grid; gap: 4px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, select { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 500; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--gold-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.btn.line { background: var(--line-green); border-color: var(--line-green); color: #fff; width: 100%; font-size: 16px; padding: 12px; }
.btn.end { color: var(--cinnabar); border-color: color-mix(in srgb, var(--cinnabar) 50%, var(--line)); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn.block { width: 100%; margin-top: 12px; }
.linkish { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 0; font-size: 13px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pill { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill.on { color: var(--jade); } .pill.off { color: var(--muted); } .pill.alert { color: var(--cinnabar); } .pill.town { color: var(--azure); } .pill.gold { color: var(--gold); }

/* 角色清單 */
.chars { display: grid; gap: 10px; }
.char { display: grid; gap: 6px; }
.char .who { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.char .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 地圖選擇 */
.maps { display: grid; gap: 8px; }
.mapopt { text-align: left; width: 100%; display: grid; gap: 2px; }
.mapopt b { font-size: 15px; }
.gear { display: grid; gap: 2px; font-size: 13px; }

/* 戰況 */
.bars { display: grid; gap: 6px; margin-top: 10px; }
.bar-lab { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.bar { height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; transition: width .25s; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.stat b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { font-size: 12px; color: var(--muted); }
.mapwrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #0b090a; }
#map { display: block; width: 100%; height: 340px; touch-action: manipulation; }
.sndbtn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: color-mix(in srgb, var(--lacquer) 78%, transparent); color: var(--muted); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.sndbtn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-soft); }
.bossbar { background: color-mix(in srgb, var(--cinnabar) 14%, var(--panel)); border: 1px solid var(--cinnabar); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cmds .btn { padding: 10px 4px; font-size: 14px; }
.cmds .wide { grid-column: 1 / -1; }
.log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.log li { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; }
.log time { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }

/* 帳本、角色 */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tile span { font-size: 12px; color: var(--muted); }
.tile b { display: block; font-size: 19px; font-weight: 500; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 6px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
th { font-size: 12px; color: var(--muted); border-top: 0; }
td:last-child, th:last-child { text-align: right; }
.items { display: grid; gap: 6px; }
.item { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.item .nm { display: flex; justify-content: space-between; gap: 8px; }
.item .lines { margin-top: 6px; font-size: 13px; display: grid; gap: 1px; }
.item.eq { border-left: 3px solid var(--gold); }
.statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; font-size: 13px; }
.statgrid div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 3px 0; }
.statgrid span { color: var(--muted); }

/* 設定 */
.field { display: grid; gap: 4px; padding-block: 10px; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field .lab { font-size: 14px; font-weight: 500; }
input[type=range] { padding: 0; background: none; border: 0; accent-color: var(--gold); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.chips button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.buy { display: grid; grid-template-columns: 1fr 90px; gap: 6px 10px; align-items: center; font-size: 14px; }

/* 聊天 */
.chatlog { height: 46vh; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.chatlog .ln b { margin-right: 6px; }
.chatlog .world b { color: #f2cf7a; } .chatlog .clan b { color: #7fd6b8; } .chatlog .hunt b { color: #9fb3c8; } .chatlog .sys { color: var(--gold); }
.chatbar { display: flex; gap: 6px; margin-top: 8px; }
.chatbar input { flex: 1; min-width: 0; }

/* 分頁列、提示 */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 5; }
.tabs nav { max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabs button { background: none; border: 0; padding: 12px 0; font-size: 14px; color: var(--muted); cursor: pointer; border-top: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--gold); border-top-color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--gold-soft); border-radius: 12px; padding: 10px 16px; font-size: 14px; z-index: 60; max-width: calc(100% - 28px); } /* 要蓋過確認視窗（30）、載入畫面（40）、聲音面板（50），錯誤才看得到 */
.toast.bad { border-color: var(--cinnabar); }
.toast b { color: var(--cinnabar); margin-right: 6px; }
.banner { border-radius: 10px; padding: 8px 12px; font-size: 13px; background: color-mix(in srgb, var(--azure) 16%, var(--panel)); border: 1px solid var(--azure); }
.banner.bad { background: color-mix(in srgb, var(--cinnabar) 16%, var(--panel)); border-color: var(--cinnabar); }
.sheet { position: fixed; inset: 0; background: rgba(5, 4, 4, .74); display: flex; align-items: flex-end; justify-content: center; z-index: 30; padding-inline: 14px; }
.sheet .card { width: 100%; max-width: 460px; margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 86vh; overflow: auto; }
.sheet .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }

/* ---------- 聲音開關 ---------- */
.top-r { display: flex; align-items: center; gap: 12px; }
.sndbtn.hdr { position: static; width: 34px; height: 34px; }
.sndbtn.wait { animation: sndwait 1.6s ease-in-out infinite; }
@keyframes sndwait { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 172, 82, 0); } 50% { box-shadow: 0 0 0 5px rgba(214, 172, 82, .28); } }

/* ---------- 登入畫面（客戶端登入圖 15306） ---------- */
.title-art { margin: 0; border: 1px solid var(--gold-soft); border-radius: 12px; overflow: hidden; background: #0b090a; box-shadow: 0 0 0 3px var(--lacquer), 0 0 0 4px var(--line); }
.title-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.title-art.short img { aspect-ratio: 16 / 9; object-position: 50% 12%; }

/* ---------- 選角畫面 ---------- */
.select {
  border: 1px solid var(--gold-soft); border-radius: 14px; padding-block: 14px 16px; overflow: hidden;
  background: linear-gradient(rgba(12, 9, 9, .7), rgba(12, 9, 9, .55) 40%, rgba(12, 9, 9, .94) 85%), url("../../hunt/assets/ui/loading.webp") 50% 92% / 175% auto no-repeat, #120e0e;
  box-shadow: 0 0 0 3px var(--lacquer), 0 0 0 4px var(--line);
}
.sel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-inline: 14px; }
.sel-top h1 { margin: 0; letter-spacing: .12em; text-shadow: 0 2px 6px #000; }
.sel-empty { padding-inline: 14px; }
.slots { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 14px 4px; scrollbar-width: none; }
.slots::-webkit-scrollbar { display: none; }
.slot {
  flex: 0 0 31%; min-width: 104px; scroll-snap-align: center; position: relative; display: grid; justify-items: center; gap: 1px;
  padding: 6px 4px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer;
  background: radial-gradient(ellipse 58% 14% at 50% 77%, rgba(214, 172, 82, .14), transparent 70%), linear-gradient(rgba(31, 25, 24, .78), rgba(14, 11, 11, .88));
  transition: border-color .2s, box-shadow .2s;
}
.slot[aria-selected="true"] {
  border-color: var(--gold);
  background: radial-gradient(ellipse 62% 16% at 50% 77%, rgba(242, 207, 122, .42), transparent 72%), linear-gradient(rgba(46, 35, 26, .82), rgba(18, 13, 12, .9));
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 20px rgba(214, 172, 82, .32);
}
.slot canvas { width: 100%; max-width: 132px; height: auto; aspect-ratio: 132 / 150; }
.slot b { font-family: var(--f-display); font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot[aria-selected="true"] b { color: var(--gold); }
.slot span { font-size: 11px; color: var(--muted); }
.slot .pill { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 0 7px; background: var(--lacquer); }
.selinfo { display: grid; gap: 10px; }
.selinfo .who { font-family: var(--f-display); font-weight: 900; font-size: 22px; color: var(--gold); letter-spacing: .04em; }
.selinfo p { margin: 0; }
.lstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lstats div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; text-align: center; }
.lstats span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.lstats b { font-size: 17px; font-weight: 500; }
.lstats .hp { color: #ec8a78; } .lstats .mp { color: #86aee8; }
.six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; font-size: 14px; }
.six div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 3px 0; }
.six span { color: var(--muted); }
.passes { display: grid; gap: 3px; font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }
.pass { display: flex; justify-content: space-between; gap: 10px; }
.pass em { font-style: normal; color: var(--muted); text-align: right; }
.pass.ok em { color: var(--jade); }
.selacts { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.btn.big {
  font-family: var(--f-display); font-size: 17px; font-weight: 900; letter-spacing: .24em; padding: 12px;
  background: linear-gradient(#f3d58a, #cf9c44 52%, #a8772a); border-color: #f2d68e; color: #2a1c06;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #5a3f12;
}
.btn.big:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 #5a3f12; }

/* ---------- 載入畫面（15308 江湖載入中）、收工畫面（15309 江湖路遠） ---------- */
.loadscr {
  position: fixed; inset: 0; z-index: 40; background: #0a0808; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); transition: opacity .4s; overflow-y: auto;
}
.loadscr.done { opacity: 0; }
.loadscr img { width: 100%; max-width: 640px; height: auto; border-radius: 10px; border: 1px solid var(--gold-soft); }
.lbox { width: 100%; max-width: 420px; display: grid; gap: 8px; }
.lbar { height: 10px; border: 1px solid var(--gold-soft); border-radius: 6px; background: #1a1413; overflow: hidden; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8f2c1c, #de5a40, #f2cf7a); transition: width .12s linear; }
.lbox p { margin: 0; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.farewell { justify-content: flex-start; }
.farewell .card { width: 100%; max-width: 460px; }
@media (prefers-reduced-motion: reduce) { .sndbtn.wait { animation: none; } .lbar i { transition: none; } }

/* ---------- 聲音面板（點喇叭跳出：音效、背景音樂各一條拉桿） ---------- */
.sndbtn.muted { color: var(--muted); border-color: var(--line); }
.sndpanel {
  position: fixed; z-index: 50; width: min(260px, calc(100vw - 16px)); display: grid; gap: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.sndrow { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 2.4em; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink); }
.sndrow input { width: 100%; padding: 0; margin: 0; background: none; border: 0; accent-color: var(--gold); height: 28px; }
.sndrow b { text-align: right; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- 手動模式列（地圖左上） ---------- */
.modebar { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--lacquer) 80%, transparent); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.modebar.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(214, 172, 82, .35); }
.modebar span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.modebtn { background: var(--panel-2); border: 1px solid var(--gold-soft); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.modebar.on .modebtn { border-color: var(--line); }
#map { cursor: pointer; }

.netnote { margin: 0; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; }

/* 角色列左右箭頭（電腦用；手機也能點） */
.slotwrap { position: relative; }
.slotnav { position: absolute; top: 50%; transform: translateY(-40%); z-index: 2; width: 32px; height: 52px; padding: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--lacquer) 82%, transparent); border: 1px solid var(--gold-soft); color: var(--gold);
  font-size: 26px; line-height: 1; cursor: pointer; }
.slotnav.prev { left: 4px; } .slotnav.next { right: 4px; }
.slotnav:hover { border-color: var(--gold); }
.slots.dragging { cursor: grabbing; scroll-snap-type: none; }
.slots.dragging .slot { pointer-events: none; }

.slot { touch-action: manipulation; } /* 手機點兩下不要放大畫面 */

/* ---------- 掛機畫面 HUD（照遊戲畫面：上方血條、左下戰報、右下藥水） ---------- */
.hudbars { position: absolute; top: 10px; right: 52px; width: clamp(110px, 40%, 220px); display: grid; gap: 3px; pointer-events: none; }
.hb { position: relative; height: 13px; background: rgba(8, 6, 6, .7); border: 1px solid #5c4a34; border-radius: 3px; overflow: hidden; }
.hb i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .25s; }
.hb.hp i { background: linear-gradient(#ef5a48, #b3231a); }
.hb.mp i { background: linear-gradient(#5b8ff2, #2442b8); }
.hb span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 13px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.netbadge { position: absolute; top: 48px; left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--lacquer) 80%, transparent); border: 1px solid var(--azure); color: var(--azure); }
.netbadge.warn { border-color: #e0a640; color: #e0a640; }
.maplog { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 170px); margin: 0; padding: 4px 8px; list-style: none; border-radius: 6px; cursor: pointer;
  background: rgba(8, 6, 6, .38); font-size: 12px; line-height: 1.5; color: #f0e7d6; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.maplog:empty { display: none; }
.maplog li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.potbar { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 5px; }
.potbar button { position: relative; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 8, 8, .72); border: 1px solid #7a6440; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.potbar button:active { transform: translateY(1px); border-color: var(--gold); }
.potbar img { width: 32px; height: 32px; image-rendering: pixelated; }
.potbar b { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 500; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.potbar button.empty { opacity: .45; }

/* ---------- 地圖下面的聊天（顏色照遊戲：一般白、世界淺藍、血盟淺綠） ---------- */
.gamechat { background: #0b0909; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 8px; display: grid; gap: 6px; }
.gchat { height: 118px; overflow-y: auto; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.gchat .ln { color: #f8f8f8; }
.gchat .ln.world { color: #a8e8e8; }
.gchat .ln.clan { color: #a8f0a8; }
.gchat .ln.sys { color: var(--gold); }
.gchat .ln.dim { color: var(--muted); }
.gamechat .chatbar { margin: 0; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.gamechat .chatbar input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; }
.chsel { position: relative; flex: none; }
.chbtn { height: 100%; min-height: 36px; padding: 0 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; font-size: 13px; white-space: nowrap; }
.chbtn::after { content: ' ▾'; font-size: 10px; color: var(--muted); }
.chbtn.hunt, .chmenu .hunt { color: #f8f8f8; } .chbtn.world, .chmenu .world { color: #a8e8e8; } .chbtn.clan, .chmenu .clan { color: #a8f0a8; }
.chmenu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; display: grid; min-width: 84px; padding: 4px; gap: 2px;
  background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.chmenu button { background: none; border: 0; border-radius: 6px; padding: 7px 10px; text-align: left; font-size: 14px; cursor: pointer; }
.chmenu button:hover { background: var(--panel-2); }
.sendbtn { flex: none; width: 38px; min-height: 36px; padding: 0 !important; display: grid; place-items: center; }

/* 地圖＋聊天＝一整塊畫面：外側圓角，接縫是一條直線（不要兩塊分開的感覺） */
#tab-live { display: flex; flex-direction: column; gap: 12px; }
.screen { display: flex; flex-direction: column; }
.screen .mapwrap { border-radius: 12px 12px 0 0; border-bottom: 0; }
.screen .gamechat { border-radius: 0 0 12px 12px; border-top: 1px solid #3b302a; }

/* 密語（粉紫）、公告與 GM（金色） */
.gchat .ln.whisper, .chbtn.whisper, .chmenu .whisper { color: #f8c8c8; } /* 遊戲密語的淡粉色 */
.gchat .ln.gm { color: #f80000; } /* GM 說話：整行紅色，跟遊戲一樣 */
.gchat .ln.whisper.out { color: #f8f800; } /* 自己密別人：遊戲裡是黃色；別人密我：淡粉紫 */

/* 右上角訊號格（喇叭下面）：4 格綠、3 格綠、2 格黃、1 格紅 */
.netsig { position: absolute; top: 8px; right: 8px; width: 36px; height: 30px; padding: 0 0 7px; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  background: color-mix(in srgb, var(--lacquer) 78%, transparent); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.netsig i { display: block; width: 4px; border-radius: 1px; background: rgba(255, 255, 255, .2); }
.netsig i:nth-child(1) { height: 5px; } .netsig i:nth-child(2) { height: 8px; } .netsig i:nth-child(3) { height: 11px; } .netsig i:nth-child(4) { height: 14px; }
.netsig[data-lv="4"] i, .netsig[data-lv="3"] i:nth-child(-n+3) { background: #4fd18a; }
.netsig[data-lv="2"] i:nth-child(-n+2) { background: #e8c547; }
.netsig[data-lv="1"] i:nth-child(1) { background: #e5484d; }
.netsig[aria-expanded="true"] { border-color: var(--gold-soft); }

/* 掉落分頁 */
.dropmaps { display: grid; gap: 8px; }
.dropq { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--lacquer) 60%, transparent); color: inherit; font: inherit; }
.dropmob { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--lacquer) 70%, transparent); overflow: hidden; }
.dropmob summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.dropmob summary::-webkit-details-marker { display: none; }
.dropmob summary .nm { font-weight: 700; }
.dropmob summary .dim { font-size: 12px; font-variant-numeric: tabular-nums; }
.dropmob[open] summary { border-bottom: 1px solid var(--line); }
.dropmob table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dropmob th, .dropmob td { padding: 5px 8px; text-align: left; }
.dropmob th { font-weight: 400; opacity: .7; font-size: 12px; }
.dropmob td.num, .dropmob th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dropmob tr + tr td { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.dropmob tr.rare td:first-child { color: #d6ac52; }
.dropmob tr.epic td:first-child { color: #b294ea; }
.bossb { display: inline-block; font-style: normal; font-size: 11px; line-height: 1; padding: 3px 5px; margin-right: 6px; border-radius: 4px; background: #b3412f; color: #fff; vertical-align: 1px; }
.dropmob.shared { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.dropmob.shared summary .nm { color: var(--gold); }

/* 掛機停止：畫面正中間 */
.sheet.center { align-items: center; z-index: 55; }
/* 帳號鈕與帳號選單（2026-11-09：一個 LINE 最多綁 3 個帳號） */
.hdacc { background: rgba(30, 24, 18, .9); border: 0; box-shadow: inset 0 0 0 1px #6e5a34; border-radius: 13px; padding: 4px 11px; color: #e6c47c; font: 700 12px/1.2 var(--f-body); cursor: pointer; white-space: nowrap; }
.hdacc:active { background: rgba(110, 90, 52, .5); }
.accmenu .acclist { display: grid; gap: 8px; margin: 10px 0; }
.accmenu .accrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid rgba(201, 162, 77, .3); background: rgba(0, 0, 0, .3); }
.accmenu .accrow.cur { border-color: #c9a24d; }
.accmenu .accrow b { flex: 1 1 auto; font-size: 16px; color: #f4ecd2; letter-spacing: .04em; }
.accmenu .accrow b i { margin-left: 6px; padding: 1px 6px; font-style: normal; font-size: 11px; color: #1a1408; background: #e6c47c; border-radius: 8px; vertical-align: 2px; }
.accmenu .accrow span { display: flex; gap: 6px; }
.accmenu .accrow .btn { padding: 6px 10px; font-size: 13px; }
.accmenu .acts .btn { font-size: 14px; }
.dim.small { font-size: 12px; }
.pwform label { display: block; margin: 8px 0 0; color: #f0d48a; font-size: 14px; }
.pwform input { display: block; width: 100%; box-sizing: border-box; height: 40px; margin-top: 4px; padding: 0 10px; background: #050404; border: 1px solid #7a6036; color: #f4ecd2; font-size: 16px; }
.sheet.takenbox { z-index: 60; } /* 同一隻角色在別的視窗看（2026-10-29）：蓋在畫面最上面 */
.sheet.takenbox .card p { font-size: 14px; color: var(--muted); }
.sheet.takenbox .btn { width: 100%; height: 44px; letter-spacing: .15em; }
.sheet.center .card { margin-bottom: 0; text-align: center; max-width: 360px; }
.sheet.center .card h2 { margin-top: 0; }
.sheet.center .card p { margin: 8px 0 16px; line-height: 1.6; }

/* 比武擂台分頁 */
.arenahead h2 { margin: 0; }
.arenagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.fighter { display: grid; gap: 2px; text-align: left; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--lacquer) 70%, transparent); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.fighter:disabled { cursor: default; }
.fighter .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter .od { color: var(--gold); font-variant-numeric: tabular-nums; }
.fighter .dim { font-size: 12px; min-height: 1.2em; }
.fighter.mine { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.fighter.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.fighter.dead { opacity: .45; }
.fighter.dead .nm { text-decoration: line-through; }
.fighter.win { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--lacquer)); }
.hpbar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hpbar i { display: block; height: 100%; background: #d9443a; transition: width .9s linear; }
.betbox h2 { margin-top: 0; }
.betbox .chips { margin: 8px 0; }
.betbox .chips button { font-variant-numeric: tabular-nums; }
#tab-arena b.gold, #tab-arena .num.gold { color: var(--gold); }
#tab-arena table { width: 100%; border-collapse: collapse; font-size: 13px; }
#tab-arena td, #tab-arena th { padding: 5px 4px; text-align: left; }
#tab-arena td.num { text-align: right; white-space: nowrap; }
#tab-arena tr.won td { color: var(--gold); }
#tab-arena tr.lost td { opacity: .55; }
.betchips { margin: 10px 0; }
.betchips button { font-variant-numeric: tabular-nums; }
.betsheet h2 .gold, .betsheet b.gold { color: var(--gold); }
.betsheet h2 { margin-top: 0; }

/* 擂台觀戰畫面（鏡頭固定在場中央） */
.arenaview { margin: 0 -14px 10px; background: #0b090a; border-bottom: 1px solid var(--line); }
.arenaview canvas { display: block; width: 100%; height: auto; aspect-ratio: 390 / 281; max-height: 480px; touch-action: pan-y; } /* 比例固定（照畫布寬，不照視窗寬）：電腦上才不會變成正方形、上下拍到黑邊（2026-10-17） */

/* 擂台觀戰：切換鈕、追蹤字、下方播報條、卡片號碼牌 */
.arenaview { position: relative; }
.atgl { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.atgl button { font: 700 11px "Microsoft JhengHei", sans-serif; padding: 4px 9px; color: var(--muted); border: 0; cursor: pointer;
  background: linear-gradient(#3e3833, #1d1a18); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a433c; }
.atgl button.on { color: #f3d98a; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #d6ac52; }
.afol { position: absolute; left: 8px; top: 8px; font: 700 12px "Noto Serif TC", serif; color: #f3d98a; background: rgba(0,0,0,.65); padding: 3px 9px; box-shadow: inset 0 0 0 1px #d6ac52; }
.atick { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 2px; pointer-events: none; }
.atick div { font-size: 12px; padding: 1px 7px; background: rgba(0,0,0,.6); color: #e6dcc6; text-shadow: 0 1px 0 #000; width: fit-content; max-width: 100%; animation: tickIn .25s ease-out; }
.atick div b { color: #fff; } .atick div.my, .atick div.my b { color: #f3d98a; } .atick div.ko { color: #ff9a8a; }
@keyframes tickIn { from { opacity: 0; transform: translateY(4px); } }
.fighter { position: relative; }
.fighter .no { position: absolute; right: 6px; top: 6px; min-width: 17px; height: 17px; border-radius: 9px; font: 700 10px/17px Consolas, monospace; text-align: center;
  color: #fff; background: #1a1614; box-shadow: 0 0 0 1px #7a7064; }
.fighter.mine .no { background: linear-gradient(#fbe6a0, #b48a34); color: #2a1d06; box-shadow: 0 0 0 1px #000; }

/* =====================================================================
 * A 版：天堂鐵框（2026-10-15 使用者選定）
 * 深鐵底、亮邊暗邊立體、四角鉚釘、上緣雕花；金屬斜面按鈕；方角；遊戲原版圖示
 * 只覆蓋外觀，結構與功能不動。示意圖：服務端/網站/天堂風介面示意*.png
 * ===================================================================== */
:root {
  --lacquer: #0b0a0b; --panel: #1b1918; --panel-2: #24211f; --line: #48423c;
  --iron-hi: rgba(255, 255, 255, .07); --iron-lo: rgba(0, 0, 0, .6); --rivet: #8c8274;
  --gold: #d9b45a; --gold2: #f3d98a; --gold-soft: #8d6a24; --ink: #e6dcc6; --muted: #9a8f80;
}
html, body { background: #070606; }
body { background: radial-gradient(ellipse 120% 60% at 50% 0%, #1a1614, #070606 70%) fixed, #070606; }
h1, h2 { color: var(--gold2); text-shadow: 0 2px 0 #000; }
h2 { display: flex; align-items: center; gap: 7px; }
h2::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold2), #7a5a1c); box-shadow: 0 0 0 1px #000; }
.brand { color: var(--gold2); text-shadow: 0 2px 0 #000; }

/* 鐵框面板 */
.card, .tile, .gamechat, .bossbar, .netnote, .dropmob, .selinfo, .passes {
  position: relative; border-radius: 3px; border: 1px solid #050404;
  background: linear-gradient(180deg, #24211f, #151314);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--iron-hi), inset 0 -2px 0 var(--iron-lo), 0 2px 6px rgba(0, 0, 0, .5);
}
.card::before, .card::after, .tile::before, .tile::after {
  content: ""; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #d8cbb5, var(--rivet) 45%, #3a342e 75%); box-shadow: 0 1px 1px #000;
}
.card::before, .tile::before { left: 3px; } .card::after, .tile::after { right: 3px; }
.card.plaque { border-top: 1px solid #050404; }
.card.plaque > :first-child { position: relative; }
.card.plaque::before { left: 3px; }
/* 上緣雕花（牌匾類） */
.card.plaque { margin-top: 6px; }
.card.plaque .row:first-child::before {
  content: ""; position: absolute; left: 50%; top: -21px; transform: translateX(-50%); width: 64px; height: 12px; pointer-events: none;
  background: linear-gradient(180deg, #5d554c, #2a2522); clip-path: polygon(0 100%, 12% 30%, 30% 30%, 40% 0, 60% 0, 70% 30%, 88% 30%, 100% 100%);
  filter: drop-shadow(0 1px 0 #000);
}
.bossbar { border-color: #050404; color: #f0a040; background: linear-gradient(180deg, #2a1a14, #160d0b); box-shadow: inset 0 0 0 1px #7a3a26, inset 0 2px 0 var(--iron-hi); }
.banner { border-radius: 3px; }

/* 金屬按鈕 */
.btn, .chbtn, .modebtn, .slotnav, .chips button, .linkish.btn {
  border-radius: 3px; border: 1px solid #050404; color: var(--ink); font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #5a534b 0%, #3a3531 48%, #2a2623 52%, #1f1c1a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.btn:hover, .chips button:hover { border-color: #050404; filter: brightness(1.12); }
.btn:active, .chips button:active { transform: translateY(1px); filter: brightness(.92); }
.btn.gold, .btn.big, .sendbtn {
  color: #2a1d06; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); border-color: #050404;
  background: linear-gradient(180deg, #fbe6a0 0%, #d9b45a 48%, #b48a34 52%, #8d6a24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.btn.end { color: #ffd9cf; border-color: #050404; background: linear-gradient(180deg, #8a3a30 0%, #5e211b 48%, #4a1813 52%, #34100c 100%); }
.btn.line { border-radius: 3px; }
.chips button[aria-pressed="true"] { color: var(--gold2); border-color: #050404; box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .18); }
.pill { border-radius: 2px; background: #0f0d0d; }

/* 凹陷輸入框 */
input, select, .gamechat .chatbar input {
  border-radius: 2px; border: 1px solid #050404; background: #070606;
  box-shadow: inset 0 0 0 1px #3d3731, inset 0 2px 3px #000;
}

/* 戰況：牌匾、狀態、HUD */
.crest { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 900 18px var(--f-display); color: var(--gold2);
  background: radial-gradient(circle at 40% 35%, #7c3a2c, #2b0f0b 70%); box-shadow: 0 0 0 2px #5a5047, 0 0 0 3px #0a0909, inset 0 0 6px #000; }
.card.plaque > .row:first-child { justify-content: flex-start; flex-wrap: nowrap; }
.whobox { min-width: 0; flex: 1; }
.whoname { font: 900 18px var(--f-display); color: var(--gold2); text-shadow: 0 1px 0 #000; }
.where { color: #8fe08f; font-size: 12px; text-shadow: 0 1px 0 #000; }
.stats { gap: 5px; }
.stat { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 12px;
  background: #0b0a0a; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3d3731; }
.stat b { font: 600 13px Consolas, "Microsoft JhengHei", monospace; }
.stat span { font-size: 11px; }
.mapwrap { border-radius: 3px; border: 1px solid #050404; box-shadow: inset 0 0 0 1px var(--line); }
.screen .mapwrap { border-radius: 3px 3px 0 0; }
.screen .gamechat { border-radius: 0 0 3px 3px; }
.gamechat { background: rgba(4, 3, 3, .95); }
.gchat { scrollbar-color: #5d554c #141212; }
.hb { border-radius: 7px; border: 1px solid #000; box-shadow: 0 0 0 1px #5a5047, inset 0 2px 3px #000; }
.sndbtn, .netsig { border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 40% 35%, #4b4540, #1a1716 70%); box-shadow: 0 0 0 1px #6e665c, inset 0 0 4px #000; }
.netsig { border-radius: 4px; }
.modebar { border-radius: 3px; background: rgba(0, 0, 0, .65); border-color: #5a5047; }
.modebtn { border-radius: 2px; }

/* F5～F10 快捷格（藥水、絕招、瞬移、打王）：像遊戲的物品格 */
.fkeys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 6px; border: 1px solid #050404; border-radius: 3px;
  background: linear-gradient(180deg, #24211f, #151314); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--iron-hi); }
.fk { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #2a2624, #0b0a0a 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a433c, inset 0 0 8px #000; touch-action: manipulation; }
.fk:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold), inset 0 0 8px #000; }
.fk img { width: 64%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.fk .k { position: absolute; left: 3px; top: 1px; font: 9px Consolas, monospace; color: var(--muted); }
.fk .t { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 700 10px "Microsoft JhengHei", sans-serif; color: var(--ink); text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.fk.empty { opacity: .4; }
.fk[data-cd]:not([data-cd=""])::after { content: attr(data-cd); position: absolute; inset: 2px; display: grid; place-items: center; border-radius: inherit; background: rgba(0, 0, 0, .62); font: 700 17px Consolas, monospace; color: #fff; } /* 倒數遮罩跟著按鈕形狀（橫式是圓的，2026-11-02 使用者：方的會跑出來） */
.fk.ready { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold2), 0 0 10px rgba(243, 217, 138, .6); }
.cmds.two { grid-template-columns: 1fr 1fr; }

/* 分頁列：遊戲右下角那種方形圖示鈕 */
.tabs { background: linear-gradient(180deg, #2a2624, #121011); border-top: 0; box-shadow: inset 0 1px 0 #5a5047, inset 0 2px 0 #000, 0 -4px 12px rgba(0, 0, 0, .5); }
.tabs nav { padding: 6px 4px 4px; gap: 3px; }
.tabs button { display: grid; justify-items: center; gap: 2px; padding: 0 0 4px; border-top: 0; font-size: 11px; font-weight: 700; color: var(--muted); }
.tabs button i { width: 40px; height: 36px; display: block;
  background: linear-gradient(180deg, #4a443e, #1e1b19); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5d554c, inset 0 2px 0 rgba(255, 255, 255, .12); }
.tabs button i { background-repeat: no-repeat; background-position: center; background-size: auto 30px, auto; image-rendering: pixelated; }
.tabs button[aria-selected="true"] { color: var(--gold2); border-top: 0; }
.tabs button[aria-selected="true"] i { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold), 0 0 8px rgba(217, 180, 90, .45); }
.tabs [data-tab="live"] i { background-image: url("../../hunt/assets/ui/nav_live_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="live"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_live_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="char"] i { background-image: url("../../hunt/assets/ui/nav_char_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="char"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_char_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="led"] i { background-image: url("../../hunt/assets/ui/nav_led_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="led"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_led_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="drop"] i { background-image: url("../../hunt/assets/ui/nav_drop_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="drop"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_drop_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="arena"] i { background-image: url("../../hunt/assets/ui/nav_arena_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="arena"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_arena_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="set"] i { background-image: url("../../hunt/assets/ui/nav_set_0.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
.tabs [data-tab="set"][aria-selected="true"] i { background-image: url("../../hunt/assets/ui/nav_set_1.png"), linear-gradient(180deg, #4a443e, #1e1b19); }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* 彈出視窗、提示：遊戲對話框 */
.sheet .card { border-radius: 3px; }
.sheet.center .card h2 { justify-content: center; }
.toast { border-radius: 3px; border: 1px solid #050404; background: linear-gradient(180deg, #2a2624, #151314); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 6px 18px rgba(0, 0, 0, .6); }
.toast.bad { box-shadow: inset 0 0 0 1px #a0574a, 0 6px 18px rgba(0, 0, 0, .6); color: #ffd2c8; }
/* left:50% 置中時瀏覽器只給半個螢幕寬，短句也會折行（2026-10-16「前往 哈維女皇（-10,000 金幣）」跑到第二行）：照內容撐開，最寬還是 max-width */
.toast { width: max-content; text-align: center; }
.sndpanel, .chmenu { border-radius: 3px; border: 1px solid #050404; background: linear-gradient(180deg, #2a2624, #151314); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 8px 20px rgba(0, 0, 0, .6); }

/* 表格、清單 */
td, th { border-top-color: #2b2724; }
.item { border-radius: 2px; background: #0f0d0d; box-shadow: inset 0 0 0 1px #3d3731; }
.item.eq { border-left: 0; box-shadow: inset 0 0 0 1px #3d3731, inset 3px 0 0 var(--gold); }

/* 選角色：天堂經典四拱門選角畫面（2106c），每座拱門站一隻 */
.select { border-radius: 3px; border: 1px solid #050404; padding-block: 12px 10px; background: linear-gradient(180deg, #1b1918, #0d0b0b);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--iron-hi), 0 2px 8px rgba(0, 0, 0, .6); }
.select .slotwrap { margin: 8px 6px 0; aspect-ratio: 640 / 270; background: url("../../hunt/assets/ui/charsel.webp") center / 100% 100% no-repeat; box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a433c; }
.select .slots { height: 100%; gap: 0; padding: 0; scroll-snap-type: x mandatory; }
.select .slot { flex: 0 0 25%; min-width: 0; height: 100%; padding: 0 0 13%; border: 0; border-radius: 0; scroll-snap-align: start;
  align-content: end; background: none; box-shadow: none; }
.select .slot[aria-selected="true"] { border: 0; box-shadow: none;
  background: radial-gradient(ellipse 34% 7% at 50% 86%, rgba(243, 217, 138, .75), rgba(243, 217, 138, .15) 60%, transparent 75%); }
.select .slot canvas { width: 92%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .8)); }
.select .slot b { font-size: 12px; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.select .slot span { font-size: 10px; text-shadow: 0 1px 0 #000; }
.select .slot .pill { top: 14%; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 0 5px; }
.select .slot:not([aria-selected="true"]) canvas { filter: brightness(.62) drop-shadow(0 4px 4px rgba(0, 0, 0, .8)); }
.select .slotnav { width: 26px; height: 40px; font-size: 20px; }

/* 載入、收工畫面 */
.loadscr img { border-radius: 3px; border: 1px solid #050404; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0, 0, 0, .7); }
.lbar { border-radius: 2px; border-color: #5a5047; }
.title-art { border-radius: 3px; border-color: #050404; box-shadow: 0 0 0 1px var(--line), 0 0 0 3px #0b0a0b; }

/* 擂台卡片、掉落：物品格風 */
.fighter { border-radius: 2px; border: 1px solid #050404; background: linear-gradient(180deg, #24211f, #151314); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--iron-hi); }
.fighter.mine { box-shadow: inset 0 0 0 1px var(--gold), inset 0 2px 0 var(--iron-hi); }
.fighter.sel { box-shadow: inset 0 0 0 2px var(--gold2), 0 0 10px rgba(243, 217, 138, .45); }
.dropq { border-radius: 2px; }

/* 開場：天堂標誌（775），一次開網頁只出現一次，1 秒淡出、點一下跳過 */
.splash { position: fixed; inset: 0; z-index: 70; background: #000 url("../../hunt/assets/ui/splash.webp") center / min(100vw, 640px) auto no-repeat; transition: opacity .6s; cursor: pointer; }
.splash.out { opacity: 0; pointer-events: none; }
/* 拱門格子高度固定：人物圖縮放、名字等級保留完整高度（不然名字被壓扁看不到） */
.select .slot { grid-template-rows: minmax(0, 1fr) auto auto; }
.select .slot canvas { width: auto; height: 100%; max-width: 92%; min-height: 0; justify-self: center; }
.select .slot b, .select .slot span { line-height: 1.25; }
/* 角色資訊：HP／MP／AC／MR 四格、能力表、月卡清單改成凹陷鐵格 */
.lstats div, .passes { border-radius: 2px; border: 1px solid #050404; background: #0b0a0a; box-shadow: inset 0 0 0 1px #3d3731, inset 0 2px 3px #000; }
.six div, .statgrid div { border-bottom-color: #2b2724; }
/* 牌匾的 6 個數字：上面小字標籤、下面數字（窄手機也不會被截掉） */
.stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 4px 8px 5px; border-radius: 3px; }
.stat b { font-size: 14px; width: 100%; }
.stat span { order: -1; font-size: 10.5px; line-height: 1.3; }

/* 角色資訊：紙娃娃（照遊戲裝備視窗） */
.dollstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.dollstats div { padding: 4px 7px; border-radius: 2px; background: #0b0a0a; box-shadow: inset 0 0 0 1px #3d3731, inset 0 2px 3px #000; }
.dollstats span { display: block; font-size: 10.5px; color: var(--muted); }
.dollstats b { font: 600 14px Consolas, monospace; } .dollstats .hp { color: #ec8a78; } .dollstats .mp { color: #86aee8; }
.doll { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 6px; align-items: center; }
.doll .col { display: grid; gap: 5px; min-width: 0; }
.doll .me { position: relative; display: grid; justify-items: center; align-self: center; }
.doll .me canvas { width: 84px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .8)); }
.doll .me .disc { width: 70px; height: 16px; margin-top: -10px; border-radius: 50%; background: radial-gradient(ellipse, #5a524a, #1c1917 70%); box-shadow: 0 0 0 1px #000; }
.eqs { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 5px; align-items: center; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; min-width: 0; color: inherit; }
.eqs.r { grid-template-columns: minmax(0, 1fr) 34px; text-align: right; } .eqs.r .sl { order: 2; }
.eqs .sl { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 2px;
  background: radial-gradient(circle at 50% 40%, #2a2624, #0b0a0a 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a433c, inset 0 0 8px #000; }
.eqs .sl img { width: 32px; height: 32px; image-rendering: pixelated; }
.eqs .nm { font-size: 11px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.eqs .nm small { display: block; color: var(--muted); font-size: 10px; }
.eqs.empty { cursor: default; } .eqs.empty .sl { opacity: .45; } .eqs.empty .nm { color: #5d554c; }
.eqs:not(.empty):active .sl { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold), inset 0 0 8px #000; }
.q1 { color: #f0e7d6; } .q2 { color: #6ec1ff; } .q3 { color: #c79bff; } .q4 { color: #ffb347; }
.dollmore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #2b2724; }
.dollhint { text-align: center; margin: 8px 0 0; }
/* 道具說明（遊戲道具說明的樣子） */
.itip { background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px #6e665c; padding: 8px 10px; font-family: "新細明體", PMingLiU, var(--f-body); }
.itip .ih { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.itip .ih img { width: 32px; height: 32px; image-rendering: pixelated; }
.itip .ih b { font-size: 15px; }
.itip .lines { font-size: 13px; display: grid; gap: 1px; }
/* 武器在網頁的效果（2026-11-02）：接在遊戲說明下面，虛線隔開 */
.itip .iweb { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #6e665c; font-size: 13px; display: grid; gap: 1px; }
.itip .iweb .iwt { color: #c4c0b8; }
.itip .iweb .on { color: #f2cf7a; font-weight: 700; }
.itip .iweb .dim2 { color: #9a9080; font-size: 12px; }

/* 背包格子（帳本、收工畫面）：遊戲道具圖示＋數量 */
.inv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
.ivs { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: radial-gradient(circle at 50% 40%, #2a2624, #0b0a0a 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a433c, inset 0 0 8px #000; }
.ivs img { width: 32px; height: 32px; image-rendering: pixelated; }
.ivs i { font-style: normal; font: 700 15px var(--f-display); color: var(--muted); }
.ivs b { position: absolute; right: 3px; bottom: 1px; font: 700 10px Consolas, monospace; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.ivs.empty { cursor: default; opacity: .55; }
.ivs:not(.empty):active { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold), inset 0 0 8px #000; }
.dic { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; image-rendering: pixelated; }
/* 拉桿：凹陷軌道＋金色滑塊（遊戲選項視窗的樣子） */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: none; border: 0; box-shadow: none; padding: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 1px; background: #070606; box-shadow: inset 0 0 0 1px #3d3731, inset 0 2px 2px #000; }
input[type=range]::-moz-range-track { height: 8px; border-radius: 1px; background: #070606; box-shadow: inset 0 0 0 1px #3d3731, inset 0 2px 2px #000; }
input[type=range]::-moz-range-progress { height: 8px; background: linear-gradient(#e8d070, #9a7a20); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: -6px; border: 0; border-radius: 1px;
  background: linear-gradient(180deg, #fbe6a0, #8d6a24); box-shadow: 0 0 0 1px #000, inset 0 1px 0 #fff4c8; }
input[type=range]::-moz-range-thumb { width: 12px; height: 20px; border: 0; border-radius: 1px; background: linear-gradient(180deg, #fbe6a0, #8d6a24); box-shadow: 0 0 0 1px #000, inset 0 1px 0 #fff4c8; }

/* =====================================================================
 * A 版版面（2026-10-15 照示意圖重排：網站/天堂風介面示意*.png）
 * ===================================================================== */
/* 每頁標題牌匾 */
.card.hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-top: 6px; }
.card.hd h2 { margin: 0; font-size: 17px; letter-spacing: .08em; }
.card.hd h2::before { display: none; }
.card.hd small { margin-left: auto; color: var(--muted); font-size: 12px; }
.card.hd > h2::after { content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); width: 64px; height: 12px; pointer-events: none;
  background: linear-gradient(180deg, #5d554c, #2a2522); clip-path: polygon(0 100%, 12% 30%, 30% 30%, 40% 0, 60% 0, 70% 30%, 88% 30%, 100% 100%); filter: drop-shadow(0 1px 0 #000); }
.card.sec h2 { font-size: 14px; }

/* 圓形圖示＋數值（遊戲狀態欄） */
.gpills { display: grid; gap: 5px; } .gpills.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpills.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 2px; border-radius: 12px; min-width: 0;
  background: #0b0a0a; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3d3731; }
.gp .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--f-body); color: #1a1206; box-shadow: 0 0 0 1px #000;
  background: radial-gradient(circle at 35% 30%, #fff2c2, #d9b45a 50%, #6e5420); }
.gp .ic.b { background: radial-gradient(circle at 35% 30%, #d6e9ff, #6b8fc4 50%, #2a3c5c); color: #071222; }
.gp .ic.r { background: radial-gradient(circle at 35% 30%, #ffd2c8, #c45a48 50%, #5a1e14); color: #200; }
.gp .num { margin-left: auto; font: 600 12px Consolas, monospace; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 戰況：牌匾＋經驗條 */
.liveplate .expbar { position: relative; height: 18px; margin-top: 8px; border-radius: 9px; overflow: hidden; background: #0b0a0a; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a5047, inset 0 2px 3px #000; }
.liveplate .expbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 9px; background: linear-gradient(#e8d070, #9a7a20); transition: width .4s; }
.liveplate .expbar em { position: absolute; inset: 0; font: 600 11px/18px Consolas, monospace; text-align: center; font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 1px 0 #000; }
#tab-live .mapwrap { border-radius: 3px; }
/* 戰況：操作列（左狀態欄、右對話框、下面輸入列與快捷格） */
.card.hud { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px; padding: 8px 6px 6px; }
.hud .hstats { display: grid; gap: 4px; align-content: start; }
.hud .gp { height: 22px; padding-right: 6px; }
.hud .gp .ic { width: 18px; height: 18px; }
.hud .gchat { height: 150px; padding: 4px 6px; font-size: 12px; line-height: 1.45; background: rgba(4, 3, 3, .92); box-shadow: inset 0 0 0 1px #3d3731, inset 0 0 8px #000; }
.hud .chatbar { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; gap: 4px; align-items: stretch; }
.hud .chatbar input { min-width: 0; padding: 6px 8px; font-size: 13px; }
.hud .chbtn { min-height: 32px; font-size: 12px; padding: 0 8px; }
.hud .sendbtn { width: 36px; min-height: 32px; }
.hud .fkeys { grid-column: 1 / -1; padding: 0; border: 0; box-shadow: none; background: none; }

/* 選角色：下方資訊卡（簡潔版） */
.selinfo .nm { font: 900 20px var(--f-display); color: var(--gold2); text-shadow: 0 1px 0 #000; }
.selinfo .nm small { font: 400 12px var(--f-body); color: var(--muted); margin-left: 8px; }
.chips2 { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { font-size: 11px; padding: 2px 7px; background: #0f0d0d; box-shadow: inset 0 0 0 1px #4a433c; color: var(--ink); }
.chip.g { color: #9fe49f; box-shadow: inset 0 0 0 1px #3b6b3b; } .chip.r { color: #ff9a8a; box-shadow: inset 0 0 0 1px #6b3b3b; }
.row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.row2 + .row2 { border-top: 1px solid #2b2724; }
.row2 > span:last-child { text-align: right; }
.selacts { grid-template-columns: 1fr 2fr; }
.selhint { text-align: center; margin: 0; }
/* 選角色（2026-10-28 簡化）：掛機時數一張地圖一格，下面只有「進入遊戲」 */
.passgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.passgrid .pass { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #3b342c; border-radius: 3px; min-width: 0; }
.passgrid .pass b { font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: .06em; }
.passgrid .pass span { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passgrid .pass.off span { color: #6f665c; }
.selinfo .entergame { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 12px; height: 48px; padding: 0 0 0 .3em; font-size: 17px; line-height: 1; letter-spacing: .3em; } /* 字置中：左邊補回字距尾巴（2026-10-30 使用者：字歪） */

/* 選地圖：地圖卡＋實景縮圖 */
.maplist { display: grid; gap: 6px; }
.card.mapc { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; align-items: center; padding: 6px; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.card.mapc::before, .card.mapc::after { display: none; }
.mapc .th { height: 64px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #4a433c; }
.mapc b { font: 900 14px var(--f-display); color: var(--ink); }
.mapc .tags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.mapc .tags span { font-size: 10px; padding: 1px 5px; background: #0f0d0d; box-shadow: inset 0 0 0 1px #4a433c; color: var(--muted); }
.mapc .tags .t { color: #9fe49f; box-shadow: inset 0 0 0 1px #3b6b3b; } .mapc .tags .lock { color: #e8a090; box-shadow: inset 0 0 0 1px #6b3b3b; }
.mapc.sel { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(217, 180, 90, .3); }
.mapc:disabled { cursor: default; opacity: .6; }

/* 掉落：地圖 2×2 金屬按鈕、搜尋框＋放大鏡 */
.mtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mtabs .btn { font-size: 12px; padding: 7px 4px; }
.mtabs .btn.on, .seg3 .btn.on, .amts .btn.on { color: var(--gold2); box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .18); }
.search { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 4px; }
.search .sbtn { padding: 0; }

/* 設定：拉桿列、三格切換 */
.opt { display: grid; gap: 2px; padding: 4px 0; }
.opt label { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); }
.opt label b { color: var(--gold2); }
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.seg3 .btn { font-size: 12px; padding: 8px 0; }

/* 下注：畫面中間的對話框、金額 3×2 */
.betsheet h2 { justify-content: center; font-size: 17px; }
.betsheet h2::before { display: none; }
.amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.amts .btn { font: 700 12px Consolas, monospace; padding: 8px 0; letter-spacing: 0; }
.big2 { font-size: 16px; } b.gold, .gold.num { color: var(--gold2); }

/* 收工結算：告別圖鋪滿，收穫視窗疊在上面 */
.loadscr.farewell { justify-content: center; background: #000 center / cover no-repeat; } /* 垂直置中（2026-10-18） */
.farewell .fwbox { width: 100%; max-width: 420px; margin-bottom: 0; background: linear-gradient(180deg, rgba(36, 33, 31, .94), rgba(21, 19, 20, .96)); }
.farewell .fwbox h2 { justify-content: center; font-size: 18px; }
.farewell .fwbox h2::before { display: none; }
.farewell .fwbox .gpills { margin-bottom: 6px; }
.card.hud { grid-template-columns: 116px minmax(0, 1fr); }
#charBox, #setBox, #ledBox, #dropBox { display: grid; gap: 10px; }
/* 角色資料載入中（2026-10-26）：金色轉圈＋字，全部載好才一次淡入 */
.tabload { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 300px; padding: 24px 16px; text-align: center; }
.tabload .tlring { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; border: 3px solid rgba(214, 172, 82, .18); border-top-color: var(--gold);
  box-shadow: 0 0 18px rgba(214, 172, 82, .18); animation: tlspin .9s linear infinite; }
.tabload b { font-family: 'Noto Serif TC', serif; font-size: 17px; letter-spacing: .2em; color: var(--gold); }
.tabload span { font-size: 12px; letter-spacing: .3em; color: var(--muted); }
@keyframes tlspin { to { transform: rotate(360deg); } }
.fadein { animation: tlfade .35s ease-out; }
@keyframes tlfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabload .tlring { animation-duration: 2.4s; } .fadein { animation: none; } }
#charBox .gpills { margin-bottom: 10px; }

/* 王的提示：一行系統訊息（點開看清單） */
.bossbar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; }
.bossbar span { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bossbar b { color: #ffcf7a; }
.bossbar em { flex: none; font-style: normal; font-size: 11px; color: var(--gold2); }
.bossbar:active { filter: brightness(1.15); }
.bosslist { display: grid; gap: 6px; margin: 4px 0 8px; }
.bosslist .bl { display: grid; grid-template-columns: 32px minmax(0, 1fr) 90px 38px; gap: 8px; align-items: center; font-size: 13px; }
.bosslist .bl b { font-weight: 700; color: #ff9a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bosslist .hpbar { height: 6px; }
.bosslist .num { text-align: right; font: 600 12px Consolas, monospace; }
/* 橫式的王清單（2026-10-30 使用者截圖：橫式 24 隻王只看得到一半、看不到「關閉」）：加寬排兩欄，關閉鈕固定在視窗底部 */
body.land .sheet .card.bosssheet { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); margin-bottom: 8px; padding-top: 10px; padding-bottom: 0; }
body.land .sheet .card.bosssheet h2 { margin-top: 0; }
body.land .bosssheet .bosslist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; margin: 2px 0 4px; }
body.land .bosssheet .bosslist .bl { grid-template-columns: 26px minmax(0, 1fr) 64px 34px; font-size: 12px; }
.bosslist .pk-ic { width: 100%; height: 30px; } /* 王的頭像（2026-11-02） */
body.land .bosssheet .bosslist .pk-ic { height: 24px; }
body.land .sheet .card.bosssheet > p.dim { margin: 2px 0; font-size: 12px; }
body.land .sheet .card.bosssheet .acts { position: sticky; bottom: 0; margin: 4px -14px 0; padding: 8px 14px 10px; background: linear-gradient(rgba(14, 12, 10, 0), #0e0c0a 40%); }
body.land .sheet .card.bosssheet .acts .btn { height: 36px; }

/* 告別畫面：手機鋪滿（直式只放大約 1.3 倍）；寬螢幕改高度撐滿、左右留黑，不要放大到糊 */
@media (min-aspect-ratio: 4/3) { .loadscr.farewell { background-size: auto 100%; } }

/* 拉桿填充色（照示意圖）：預設金（音量）、.hp 紅（喝水）、.tp 藍（瞬移）；--f 由程式帶 0～1，填到滑塊中心 */
input[type=range] { --rfill: linear-gradient(#e8d070, #9a7a20); }
input[type=range].hp { --rfill: linear-gradient(#ff6a5a, #8a1810); }
input[type=range].tp { --rfill: linear-gradient(#6a9cff, #1a3ea8); }
input[type=range]::-webkit-slider-runnable-track { background: var(--rfill) 1px 1px / calc(5px + (100% - 12px) * var(--f, 0)) calc(100% - 2px) no-repeat, #070606; }
input[type=range]::-moz-range-progress { background: var(--rfill); }

/* 藥水標價：遊戲金幣圖示＋數字（避免被當成補血量） */
.fk .t.cost { display: flex; align-items: center; justify-content: center; gap: 1px; color: #ffd76a; font: 700 10px Consolas, monospace; }
.fk .t.cost img { width: 12px; height: 12px; image-rendering: pixelated; filter: none; }
.potcost { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px 0 2px; border-radius: 2px; font-style: normal; font-size: 11px; color: #ffd76a;
  background: #0b0a09; box-shadow: inset 0 0 0 1px #4a3d22; white-space: nowrap; }
.potcost img { width: 14px; height: 14px; image-rendering: pixelated; }

/* 狀態欄圖示：遊戲的技能／道具圖示放進小格子（取代圓形字標） */
.gp .ic.im { background: #050404; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #4a433c; border-radius: 3px; overflow: hidden; }
.gp .ic.im img { width: 100%; height: 100%; image-rendering: auto; }
.gp:has(.ic.im) { padding-left: 3px; }
.fk img[src*="sk_boss"] { width: 74%; }   /* 地龍頭像是怪物外觀裁的，留白少一點才跟技能圖示一樣大 */

/* 戰況地圖：手機上左右貼齊螢幕（畫面最大化）；比例固定 4:3（2026-10-23 使用者：像原版天堂 800×600，整頁不用捲就看得到快捷格與分頁） */
#tab-live #map { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 500px) {
  #tab-live .mapwrap { margin-inline: -14px; border-radius: 0; border-inline: 0; border-block: 1px solid #050404;
    box-shadow: 0 -1px 0 #6e5a34, 0 1px 0 #6e5a34; }
}

/* 設定頁勾選框（遊戲選項視窗的方框＋金色勾） */
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chk i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: #070606; box-shadow: inset 0 0 0 1px #5a5047, inset 0 2px 2px #000;
  font: 700 13px/1 var(--f-body); font-style: normal; color: var(--gold2); }
.chk input:checked + i::after { content: "✔"; }
.chk input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 1px; }
.chk:active i { box-shadow: inset 0 0 0 1px var(--gold), inset 0 2px 2px #000; }

/* Android 點地圖會蓋一層藍色點擊高亮、雙擊會選取整頁文字：遊戲畫面一律關掉（對話框、輸入框照常可選取） */
html { -webkit-tap-highlight-color: transparent; }
#tab-live, #tab-arena .arenaview, .tabs, .fdock { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#tab-live input, #tab-live .gchat { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* 補給列停靠：地圖在畫面中間時取代底部分頁列（樣子跟分頁列同一塊鐵板） */
.fdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #2a2624, #121011); box-shadow: inset 0 1px 0 #5a5047, inset 0 2px 0 #000, 0 -4px 12px rgba(0, 0, 0, .5);
  animation: dockIn .16s ease-out; }
.fdock .fkeys { max-width: 460px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
body.fk-docked .tabs { display: none; }
body:not(.fk-docked) .tabs { animation: dockIn .16s ease-out; }
@keyframes dockIn { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fdock, body:not(.fk-docked) .tabs { animation: none; } }
.fkph { background: none; border: 0; box-shadow: none; }   /* 補給列停靠時原位的空格 */

/* 登入頁宣傳：標語、特色條列（遊戲道具圖示）、常見問題 */
.hero .tagline { margin: -4px 0 10px; color: var(--gold2); font-weight: 700; letter-spacing: 1px; }
.feats { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.feats li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 8px;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #3d3731; }
.feats img { grid-row: span 2; width: 32px; height: 32px; image-rendering: pixelated; background: #050404; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #4a433c; }
.feats b { color: var(--gold2); font-size: 14px; }
.feats span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.faq h2 { margin: 0 0 6px; }
.faq details { border-top: 1px solid #2b2724; padding: 8px 0; }
.faq summary { cursor: pointer; color: var(--ink); font-weight: 700; list-style: none; }
.faq summary::before { content: "◆ "; color: var(--gold); font-size: 11px; }
.faq details[open] summary { color: var(--gold2); }
.faq details p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }

/* 讀取角色時的過渡畫面：黑底、中間 Lineage 標誌、下面一行小字 */
.bootscr { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; place-items: center; transition: opacity .4s; }
.bootscr img { width: auto; height: auto; max-width: min(100vw, 800px); max-height: 100vh; max-height: 100dvh; object-fit: contain; } /* 用畫面寬高限制（格子裡的 100% 高度不會生效，手機橫拿時圖會超出、看起來偏下） */
.bootscr p { position: absolute; left: 0; right: 0; bottom: calc(14% + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center;
  font-size: 13px; letter-spacing: 2px; color: #b89a5a; animation: bootPulse 1.6s ease-in-out infinite; }
.bootscr.out { opacity: 0; pointer-events: none; }
@keyframes bootPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .bootscr p { animation: none; } }

/* 點狀態格／道具格跳出的小說明框（貼在格子旁邊，箭頭指著那一格） */
.gp[data-help] { cursor: pointer; }
.gp[data-help]:active { box-shadow: inset 0 1px 2px #000, 0 0 0 1px var(--gold); }
.hpop { position: fixed; z-index: 70; display: grid; gap: 3px; padding: 8px 11px; font-size: 13px; line-height: 1.5; color: var(--ink);
  background: linear-gradient(180deg, #24211f, #141213); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--gold), 0 6px 16px rgba(0, 0, 0, .65);
  pointer-events: auto; animation: hpopIn .12s ease-out; }
.hpop b { color: var(--gold2); font-size: 13.5px; }
.hpop span { color: var(--muted); font-size: 12.5px; }
.hpop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  background: #141213; box-shadow: 1px 1px 0 var(--gold); }
.hpop.below::after { bottom: auto; top: -6px; background: #24211f; box-shadow: -1px -1px 0 var(--gold); }
@keyframes hpopIn { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .hpop { animation: none; } }

/* 戰況地圖右下角：套裝變身鈕（變形術圖示，亮著＝變身中） */
.polybtn { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 52px; padding: 3px 0 0; border: 0; border-radius: 3px; cursor: pointer;
  display: grid; justify-items: center; align-content: start; gap: 1px; touch-action: manipulation;
  background: radial-gradient(circle at 50% 35%, #2a2624, #0b0a0a 75%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4a433c, 0 2px 6px rgba(0, 0, 0, .6); }
.polybtn img { width: 32px; height: 32px; image-rendering: pixelated; opacity: .75; }
.polybtn b { font: 700 10px "Microsoft JhengHei", sans-serif; color: var(--muted); text-shadow: 0 1px 0 #000; }
.polybtn.on { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold2), 0 0 10px rgba(243, 217, 138, .55); }
.polybtn.on img { opacity: 1; }
.polybtn.on b { color: var(--gold2); }
.polybtn:active { transform: translateY(1px); }
.polybtn:disabled { opacity: .6; }
   /* 快滿的地圖：人多 */

/* ---------- 比武擂台：賽報榜單＋近 10 場冠軍＋歷代冠軍頒獎台（2026-10-16 使用者選 A＋C） ---------- */
.arecent .strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.arecent .strip::-webkit-scrollbar { display: none; }
.arecent .ch { flex: none; width: 52px; text-align: center; font-size: 11px; }
.arecent .cp { display: block; width: 44px; height: 44px; margin: 0 auto 2px; object-fit: contain; object-position: 50% 20%; background: #100d0e; border-radius: 50%; box-shadow: inset 0 0 0 1px #4a3f2c; }
.arecent .ch.new .cp { box-shadow: 0 0 0 2px var(--gold); }
.arecent .ch span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arecent .ch em { color: #6d6157; font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; }
.aboard { padding: 8px 8px 4px; }
.aboard .lh { display: grid; grid-template-columns: 70px minmax(0, 1fr) 60px; color: #6d6157; font-size: 11px; padding: 0 4px 4px; }
.aboard .lh span:last-child { text-align: right; }
.arow { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) 60px; gap: 6px; align-items: center; width: 100%; padding: 6px 4px; border: 0; border-top: 1px solid #2c2522;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.arow:disabled { cursor: default; }
.arow.mine { background: #2a2112; }
.arow.sel { box-shadow: inset 0 0 0 1px var(--gold); }
.arow.win { background: linear-gradient(90deg, #4a3810, #2a2112); }
.arow.dead { opacity: .45; }
.arow.dead b { text-decoration: line-through; }
.arow .no { color: #6d6157; font: 700 12px Consolas, monospace; }
.arow .po { width: 40px; height: 40px; object-fit: contain; object-position: 50% 15%; background: #100d0e; border-radius: 3px; }
.arow .mid { min-width: 0; display: grid; gap: 2px; }
.arow .mid b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .my { justify-self: start; font-size: 11px; color: #ffd76a; background: #3a2c10; padding: 0 5px; border-radius: 2px; white-space: nowrap; }
.arow .wrb, .arow .hpb { position: relative; height: 6px; max-width: 150px; background: #100d0e; border-radius: 3px; overflow: hidden; }
.arow .wrb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8f733a, #f3d98a); }
.arow .hpb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a2a1c, #de5a40); }
.arow .sm { font-size: 11px; color: var(--muted); }
.arow .form { display: flex; gap: 2px; }
.arow .form i { width: 7px; height: 7px; border-radius: 50%; background: #2e2724; }
.arow .form i.w { background: #ffd76a; box-shadow: 0 0 4px #ffd76a; }
.arow .od { text-align: right; font: 700 21px Consolas, monospace; color: #ffd76a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.arow .od small { font-size: 11px; color: var(--muted); margin-left: 1px; font-family: "Microsoft JhengHei", sans-serif; }
.apodium .pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; text-align: center; }
.apodium .pp { display: block; width: 60px; height: 60px; margin: 0 auto; object-fit: contain; object-position: 50% 15%; }
.apodium .pd b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apodium .pd span { font-size: 11px; color: var(--muted); }
.apodium .step { margin-top: 4px; font: 700 18px Consolas, monospace; color: #1a1208; border-radius: 2px 2px 0 0; }
.apodium .r1 .step { height: 46px; line-height: 46px; background: linear-gradient(#ffe39a, #b8862a); }
.apodium .r2 .step { height: 32px; line-height: 32px; background: linear-gradient(#e6e6e6, #8a8a8a); }
.apodium .r3 .step { height: 24px; line-height: 24px; background: linear-gradient(#e0a070, #8a5a30); }
.arow .nmr { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dropmob .moblist th, .dropmob .moblist td { padding: 5px 5px; }
.dropmob .moblist td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
/* 戰況狀態欄最上面：等級列（照遊戲狀態欄：金色 Lv 徽章＋等級＋經驗百分比，2026-10-16） */
.hud .hexp { gap: 3px; cursor: pointer; }
.hud .hexp .lvic { display: grid; place-items: center; flex: none; border-radius: 50%; font: italic 900 9px/1 Georgia, "Times New Roman", serif; color: #3a2606; letter-spacing: -.5px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b445 45%, #9a6a12 80%, #5a3a06); box-shadow: 0 0 0 1px #2a1a04, inset 0 -1px 1px rgba(0, 0, 0, .4); }
.hud .hexp .lvn { flex: none; min-width: 20px; padding: 0 4px; border-radius: 3px; background: #050404; box-shadow: inset 0 0 0 1px #3d3731; font: 700 11px/16px Consolas, monospace; color: #f0e7d6; text-align: center; }
.hud .hexp .num { flex: 1; text-align: right; font-size: 10px; }
/* 設定頁：經驗藥水選單（2026-10-17） */
.xpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.xpgrid .btn { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; min-height: 52px; }
.xpgrid .btn b { font: 700 15px Consolas, monospace; color: var(--ink); }
.xpgrid .btn .dim { font-size: 11px; }
.xpgrid .btn .dic { width: 24px; height: 24px; }
.xpgrid .btn.on { box-shadow: inset 0 0 0 2px var(--gold); }
.xpgrid .btn.on b { color: var(--gold); }
.xpgrid .btn:disabled { opacity: .4; }

/* ---------- 戰況：血魔條（照遊戲：金屬長框、左血右魔、中間圓徽章；夾在地圖和操作列中間接成一塊，2026-10-17 使用者選 D） ---------- */
#tab-live .hpmp { position: relative; z-index: 2; height: 30px; margin: -14px 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; padding: 0 6px;
  background: linear-gradient(180deg, #5d554d 0, #2b2623 2px, #1a1615 50%, #0d0b0b 100%);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 #8a7f72, inset 0 -1px 0 #3a332e, 0 3px 6px rgba(0, 0, 0, .7); }
#tab-live .hpmp::before, #tab-live .hpmp::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #3a312a, #8f7a55 20%, #c9b27a 50%, #8f7a55 80%, #3a312a); }
#tab-live .hpmp::before { top: 0; }
#tab-live .hpmp::after { bottom: 0; }
.hpmp .bar { position: relative; height: 18px; border-radius: 3px; background: #0a0808; box-shadow: inset 0 0 0 1px #000, inset 0 2px 4px #000, 0 0 0 1px #4a4038; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.hpmp .bar i { position: absolute; top: 0; bottom: 0; height: auto; transition: width .25s; }
.hpmp .bar i::after { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 6px; background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); }
.hpmp .hp i { left: 0; background: linear-gradient(#ff8070, #d93a2c 45%, #8e1810); }
.hpmp .mp i { left: 0; background: linear-gradient(#86b4ff, #3a6fe0 45%, #163c96); }
.hpmp .bar span { position: relative; z-index: 1; font: 700 11px/18px Consolas, monospace; color: #fff; text-shadow: 0 0 2px #000, 0 1px 0 #000; white-space: nowrap; }
.hpmp .val { flex: 1; min-width: 0; text-align: center; font-size: 12px; overflow: hidden; }
.hpmp .pct { padding: 0 5px; font-size: 10px; color: #ffe9d6; }
.hpmp .tag { flex: none; padding: 0 6px; height: 100%; font: italic 900 11px/18px Georgia, "Times New Roman", serif !important; color: #2a1406 !important; text-shadow: none !important; }
.hpmp .hp .tag { background: linear-gradient(90deg, rgba(255, 170, 60, 0), #ffb14a 30%, #e3861c); }
.hpmp .mp .tag { background: linear-gradient(270deg, rgba(120, 200, 255, 0), #8fd0ff 30%, #4aa2ea); color: #06243f !important; }
.hpmp .med { position: relative; justify-self: center; width: 30px; height: 30px; margin: -6px 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #1b1714 0 42%, transparent 43%), conic-gradient(from 0deg, #8a7650, #e8d49a, #8a7650, #4a3c26, #8a7650, #e8d49a, #8a7650, #4a3c26, #8a7650);
  box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, .8); }
.hpmp .med::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d8, #d9b25a 50%, #6a4d18); box-shadow: 0 0 4px rgba(255, 220, 140, .6); }
@media (max-width: 500px) { #tab-live .hpmp { margin-inline: -14px; } } /* 手機上跟地圖一樣貼齊螢幕 */
@media (max-width: 360px) { .hpmp .pct { display: none; } } /* 很窄的手機：百分比收起來，數值放得下 */
/* 經驗藥水順序號碼（①②③，2026-10-18） */
.xpgrid .btn { position: relative; }
.xpgrid .xpno { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/1 Consolas, monospace; font-style: normal;
  color: #2a1a06; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b445 55%, #9a6a12); box-shadow: 0 0 0 1px #000; }

/* 狀態格：金框圓座＋專屬圖案（2026-10-18 使用者選 A；圖案在 hunt.js GLYPH） */
.gp .ic.ring { width: 26px; height: 26px; margin: 0 1px 0 -3px; border-radius: 50%; color: inherit; box-shadow: 0 0 0 1px #000;
  background: radial-gradient(circle at 50% 50%, #1b1714 0 58%, transparent 60%), conic-gradient(from 0deg, #8a7650, #e8d49a, #8a7650, #4a3c26, #8a7650, #e8d49a, #8a7650, #4a3c26, #8a7650); }
.gp .ic.ring svg { width: 16px; height: 16px; display: block; }
.gp:has(.ic.ring) { padding-left: 2px; }
.hud .gp .ic.ring { width: 24px; height: 24px; margin-left: -3px; }
.hud .gp .ic.ring svg { width: 15px; height: 15px; }

/* 狀態格改成天堂原版的銀灰金屬圈＋圓角深色數值框（2026-10-18 使用者選「甲」；圖案保留顏色） */
.gp .ic.ring { background: radial-gradient(circle at 50% 50%, #141414 0 55%, #2a2a2a 56% 60%, transparent 61%), linear-gradient(180deg, #f2f2f2 0%, #bdbdbd 30%, #6e6e6e 62%, #3a3a3a 100%);
  box-shadow: 0 0 0 1px #000, 0 1px 2px rgba(0, 0, 0, .8); }
.gp:has(.ic.ring), .gp.lvrow, .gp.hexp { border-radius: 8px; background: linear-gradient(180deg, #141313, #070707); box-shadow: inset 0 0 0 1px #3a3633, inset 0 1px 0 #2a2725; }
.gp:has(.ic.ring) .num, .gp.lvrow .num, .gp.hexp .num { color: #eceae6; }
/* 角色資訊第一排：等級經驗（2/3）＋帶來的金幣（1/3，跟下面防禦格同寬） */
.charr1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-bottom: 6px; } /* 等級經驗、金幣各一半（2026-10-18 使用者改 A） */
.gp.lvrow { gap: 4px; }
.gp.lvrow .lvic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: -3px; border-radius: 50%; font: italic 900 10px/1 Georgia, "Times New Roman", serif; color: #3a2606;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b445 45%, #9a6a12 80%, #5a3a06); box-shadow: 0 0 0 1px #2a1a04; }
.gp.lvrow .lvn { flex: none; min-width: 22px; padding: 0 4px; border-radius: 3px; background: #050404; box-shadow: inset 0 0 0 1px #3d3731; font: 700 12px/18px Consolas, monospace; color: #f0e7d6; text-align: center; }
.gp.lvrow .num { flex: 1; min-width: 0; text-align: right; }

/* 角色資訊三排（2026-10-18 使用者選「乙」）：等級經驗進度條／血魔條／防禦＋金幣 */
.charinfo { display: grid; gap: 7px; margin-bottom: 10px; }
.charinfo .gpills { margin-bottom: 0 !important; }
.lvbar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 0; border-radius: 8px; background: linear-gradient(180deg, #141313, #070707); box-shadow: inset 0 0 0 1px #3a3633; cursor: pointer; }
.lvbar .lvic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -2px; border-radius: 50%; font: italic 900 10px/1 Georgia, "Times New Roman", serif; color: #3a2606;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b445 45%, #9a6a12 80%, #5a3a06); box-shadow: 0 0 0 1px #2a1a04; }
.lvbar .lvn { flex: none; min-width: 24px; padding: 0 4px; border-radius: 3px; background: #050404; box-shadow: inset 0 0 0 1px #3d3731; font: 700 13px/20px Consolas, monospace; color: #f0e7d6; text-align: center; }
.lvbar .xb { position: relative; flex: 1; min-width: 0; height: 16px; border-radius: 8px; background: #0a0808; box-shadow: inset 0 0 0 1px #000, inset 0 2px 4px #000, 0 0 0 1px #4a4038; overflow: hidden; }
.lvbar .xb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffe39a, #d9a43a 50%, #8a5e10); border-radius: 0; } /* 尾巴平的（左邊外框圓角會切齊），2026-10-18 */
.lvbar .xb i::after { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 5px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); }
.lvbar .xb em { position: absolute; inset: 0; font: 700 11px/16px Consolas, monospace; font-style: normal; color: #fff; text-align: center; text-shadow: 0 0 2px #000, 0 1px 0 #000; white-space: nowrap; }
/* 血魔條放進卡片（不貼齊螢幕、不壓地圖；元件樣式跟戰況頁共用 .hpmp .bar …） */
.hpmp.incard { position: relative; height: 30px; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; padding: 0 6px; border-radius: 3px;
  background: linear-gradient(180deg, #5d554d 0, #2b2623 2px, #1a1615 50%, #0d0b0b 100%); box-shadow: 0 0 0 1px #000, inset 0 1px 0 #8a7f72, inset 0 -1px 0 #3a332e; }

/* 設定頁浮動儲存鈕（右下角、分頁列上面；捲到原本那顆就收起來，2026-10-18） */
.savefab { position: fixed; z-index: 6; right: max(16px, calc((100vw - 460px) / 2 + 16px)); bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  padding: 11px 20px; border: 0; border-radius: 22px; cursor: pointer; font: 700 15px "Microsoft JhengHei", sans-serif; color: #2a1a06;
  background: linear-gradient(180deg, #f6dc8c, #c79a35 60%, #9a7020); box-shadow: 0 0 0 1px #000, inset 0 1px 0 #fff4c8, 0 4px 14px rgba(0, 0, 0, .7); animation: fabIn .18s ease-out; }
.savefab:active { transform: translateY(1px); }
@keyframes fabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .savefab { animation: none; } }

/* 進入掛機的過渡畫面：跟「讀取角色」那個一樣全黑、圖片不加框（2026-10-18 使用者）；收工畫面（.farewell）不動 */
.loadscr:not(.farewell) { background: #000; padding: 0; gap: 0; justify-content: center; }
/* 圖片照比例放到最大（不超過 800 寬、不超過畫面高）；進度條疊在底圖的 Loading 框內（loading.webp 640×480 的 x247～393、y394～402） */
.loadscr .lpic { position: relative; flex: none; width: min(100%, 800px, calc(100dvh * 4 / 3)); }
.loadscr .lpic img { display: block; width: 100%; height: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.loadscr .lpic .lbar { position: absolute; left: 38.6%; top: 82.1%; width: 22.8%; height: 1.9%; border: 0; border-radius: 0; background: transparent; }
.loadscr .lpic .lbar i { background: linear-gradient(180deg, #f6dd96, #c99236 55%, #7a5414); }
.loadscr .lpic p { position: absolute; left: 0; right: 0; top: 87%; margin: 0; text-align: center; font-size: clamp(11px, 2vw, 14px); letter-spacing: .06em; color: #d8cdb8; text-shadow: 0 1px 2px #000; }

/* 選角：金幣不足（2026-10-19）—— 能力板金額紅字；頭像上的「金幣不足」沿用 .pill.alert 的朱紅 */
.selinfo .num.bad { color: #ff8a7c; font-weight: 700; }

/* 設定頁「畫面效能」：每秒畫面、解析度兩排按鈕＋一鍵設定（2026-10-20） */
.vprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 4px 0; font-size: 13px; }
.vprow .chips { gap: 5px; }
.vprow .chips button { padding: 4px 10px; font-size: 12px; }
.vpbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ===== 登入／綁定頁「原汁原味」（2026-10-20 使用者選丙：大廳底圖＋原版金框放畫面正中間＋置頂標題列）=====
   金框、寶石、下飾物、金色標誌由 工具/網頁掛機素材.py ui 產生（classic_login：原版登入圖 310.img 左上角的框）；大廳圖 login_hall.webp 是使用者給的 */
body.title-page { background: #070606; overflow-x: clip; }
body.title-page::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 4, .25), rgba(5, 4, 4, 0) 28%, rgba(5, 4, 4, .35) 70%, rgba(5, 4, 4, .8)),
    url("../../hunt/assets/ui/login_hall.webp") 50% 30% / cover no-repeat; }
body.title-page .app { position: relative; z-index: 1; gap: 14px; }
/* 置頂標題列：鐵板底色、捲動時固定在最上面（底色用偽元素鋪滿整個螢幕寬） */
.title-page .top { position: sticky; top: 0; z-index: 30; margin-inline: -14px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.title-page .top::before { content: ""; position: absolute; inset: 0 50%; margin-inline: -50vw; z-index: -1;
  background: linear-gradient(180deg, #2a2624, #121011); box-shadow: inset 0 1px 0 #5a5047, inset 0 -1px 0 #000, 0 1px 0 #6e5a34, 0 4px 14px rgba(0, 0, 0, .6); }
/* 金框放在第一屏正中間 */
.cl-center { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; padding-block: 8px 20px; }
/*
 * 登入卡（2026-10-23 使用者選「乙」）：使用者給的龍頭框 login_card.webp（1024×1536）切成三段——
 * 上段 0~199（龍頭）、中段 200~1159（隨內容拉長，只有直的邊框跟底紋）、下段 1160~1535（按鈕槽＋底飾）。
 * 上下兩段照寬度等比例，龍頭和按鈕槽不會變形；按鈕槽在下段的 x 190~834、y 36~168。
 */
.lf { position: relative; isolation: isolate; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7)); }
.lf::before { content: ""; display: block; aspect-ratio: 1024 / 200; background: url("../../hunt/assets/ui/login_card_top.webp") 0 0 / 100% 100% no-repeat; }
.lf .lf-body { padding: 0 11% 6px; background: url("../../hunt/assets/ui/login_card_mid.webp") 0 0 / 100% 100% no-repeat; }
.lf .lf-foot { position: relative; aspect-ratio: 1024 / 376; background: url("../../hunt/assets/ui/login_card_bot.webp") 0 0 / 100% 100% no-repeat; }
.lf .lf-foot .gbtn { position: absolute; left: 19.6%; width: 60.8%; top: 12.4%; height: 30%; min-width: 0; margin: 0; padding: 0; gap: .45em; border: 0; border-radius: 999px;
  font: 900 clamp(17px, 5.4vw, 22px)/1 var(--f-display); letter-spacing: .18em; color: #f4fff2; text-shadow: 0 1px 2px #000, 0 0 8px rgba(120, 255, 150, .35);
  background: radial-gradient(120% 140% at 50% 0%, #2f8a45 0%, #17572a 55%, #0b3317 100%); box-shadow: inset 0 1px 0 rgba(200, 255, 200, .35), inset 0 -2px 6px rgba(0, 0, 0, .6); }
/* LINE 圖示：白色對話泡泡＋綠字（畫在 CSS 裡，不多一張圖） */
.lf .lf-foot .gbtn.line-ic::before { content: ""; flex: none; width: 1.55em; height: 1.4em; margin-right: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 2C9.5 2 1.5 8.6 1.5 16.6c0 7.2 6.4 13.1 15 14.3.6.1 1.4.4 1.6.9.2.4.1 1.1 0 1.6l-.3 1.5c-.1.4-.3 1.7 1.5.9s9.9-5.8 13.5-10c2.5-2.7 3.7-5.5 3.7-9.2C36.5 8.6 30.5 2 20 2z' fill='%23fff'/%3E%3Ctext x='19' y='20.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='9.6' fill='%2306a83b'%3ELINE%3C/text%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px #000); }
.lf .lf-foot .cl-note { position: absolute; left: 0; right: 0; top: 52%; margin: 0; }
.cl-title { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 7.6vw, 31px); letter-spacing: .1em; text-wrap: balance;
  background: linear-gradient(180deg, #fff4cf 0%, #f3cf7a 45%, #b98326 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255, 190, 80, .25)); } /* 金色漸層字（10-23 乙）；text-shadow 要關，不然透明字底下的黑影會透出來 */
.cl-sub { position: relative; margin: 4px 0 6px; text-align: center; color: #e9dcbc; font-size: clamp(12px, 3.5vw, 14px); letter-spacing: .14em; text-shadow: 0 1px 2px #000; }
/* 副標下面一條金線＋中間菱形 */
.cl-sub::after { content: ""; display: block; height: 10px; margin: 9px 4% 0;
  background: linear-gradient(90deg, transparent, #9c7a3c 25%, #e6c47c 50%, #9c7a3c 75%, transparent) center / 100% 1px no-repeat; }
.cl-sub::before { content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #e6c47c; box-shadow: 0 0 6px rgba(255, 200, 100, .7); }
.cl-feats { list-style: none; padding: 0; margin: 0; }
.cl-feats li { display: flex; align-items: center; gap: 12px; padding: 5px 2%; color: #efe4c6; font-size: clamp(13px, 3.9vw, 15px); text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 77, .32) 15%, rgba(201, 162, 77, .32) 85%, transparent) bottom / 100% 1px no-repeat; }
.cl-feats li:last-child { background: none; }
.cl-feats li span { white-space: nowrap; } .cl-feats b { color: #ffd76a; font-weight: 700; } .cl-feats .s { display: none; } /* 2026-11-07：免費字樣金色；橫式才用短版 */
.cl-feats img { flex: none; width: 46px; height: 46px; margin: -3px 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); } /* 圖示自己帶龍框（10-23 使用者給的圖），放大才看得清楚 */
.cl-note { margin: 14px 0 0; text-align: center; font-size: clamp(11px, 3.2vw, 12.5px); color: #9f927a; }
.cl-sub b { color: #f2cf7a; font-weight: 700; } /* 綁定頁：「第一次請用電腦進遊戲綁定」要一眼看到（2026-10-27） */
.lf-body .cl-note a { color: #e6c47c; text-decoration: underline; }
.cl-note a, .cl-note .linkish { color: #d9c89c; }
.cl-main .err { text-align: center; }
/* 發光字按鈕（客戶端「刪除角色」308c 那種：金字發光、黑色鐵板） */
.gbtn { display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 210px; margin: 0 auto; padding: 8px 18px; cursor: pointer; text-decoration: none;
  font-family: var(--f-display); font-weight: 900; font-size: 19px; letter-spacing: .3em; color: #fff3c8;
  text-shadow: 0 0 2px #fff, 0 0 6px #f0b040, 0 0 12px #c07010, 0 1px 0 #000;
  background: linear-gradient(180deg, #2c2520, #120f0d); border: 1px solid #050404; border-radius: 0; box-shadow: inset 0 0 0 1px #5a4a36, 0 2px 6px rgba(0, 0, 0, .7); }
.gbtn.line { color: #eaffea; text-shadow: 0 0 2px #fff, 0 0 7px #38e070, 0 0 14px #0a9a3a, 0 1px 0 #000; }
.gbtn:hover { filter: brightness(1.15); }
.gbtn:active { transform: translateY(1px); filter: brightness(.92); }
.gbtn:disabled { opacity: .6; cursor: wait; }
/* 原版公告框：半透明黑底、細金邊、彩色字 */
.title-page .ann { background: rgba(0, 0, 0, .66); border: 1px solid #6e5a34; padding: 12px 14px; font-size: 14px; line-height: 1.8; color: #f4ecd2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(201, 162, 77, .35), 0 4px 18px rgba(0, 0, 0, .6); }
.title-page .ann h2 { margin: 0 0 4px; font-family: var(--f-display); font-size: 15px; color: #ff8a8a; letter-spacing: .06em; }
.title-page .ann ol { margin: 0; padding-left: 20px; }
.title-page .ann b { color: #ffe27a; }
.title-page .ann .g { margin: 8px 0 0; color: #7dff7d; font-size: 13.5px; }
.title-page .faq details { border-top: 1px solid rgba(201, 162, 77, .22); }
.title-page .faq summary { color: #f4ecd2; }
.title-page .faq details p { color: #cfc3a3; }
/* 綁定頁 */
.cl-steps { margin: 4px 0 10px; padding-left: 20px; color: #ece2c8; font-size: 14px; line-height: 1.75; text-shadow: 0 1px 2px #000; }
.cl-steps b { color: #f0d48a; }
.cl-form label { font-family: var(--f-display); color: #f0d48a; font-size: 15px; letter-spacing: .12em; margin: 6px 0 4px; }
.cl-form input { height: 42px; padding: 0 8px; background: #050404; border: 1px solid #7a6036; border-radius: 0; box-shadow: inset 0 0 0 1px #000;
  color: #f4ecd2; font-size: 20px; letter-spacing: .3em; text-align: center; }
/* 官網註冊（2026-11-09）：兩種方式比較、輸入框下的小提示、機器人陷阱欄位 */
.reg-pick { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.reg-pick li { padding: 8px 10px; border: 1px solid rgba(201, 162, 77, .35); background: rgba(0, 0, 0, .35); color: #cfc3a3; font-size: 13px; line-height: 1.6; }
.reg-pick li.on { border-color: #2f9a4c; box-shadow: inset 0 0 0 1px rgba(60, 200, 100, .25); }
.reg-pick b { display: block; font-family: var(--f-display); font-size: 15px; color: #f0d48a; letter-spacing: .06em; }
.reg-pick li.on b { color: #8ff0a8; }
.reg-pick span { display: block; }
.reg-pick span::before { content: "・"; color: #9c7a3c; }
.reg-form { display: flex; flex-direction: column; }
.reg-form input { font-size: 18px; letter-spacing: .12em; }
.reg-hint { margin: 3px 0 2px; color: #9f927a; font-size: 12px; text-align: center; }
.reg-hint.good { color: #8ff0a8; }
.reg-hint.bad { color: #ff9a8a; }
.reg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.reg-linked b { color: #8ff0a8; }

/* ===== 選地圖（2026-10-22 使用者選「乙」）：兩欄地圖格子＋點了從下面跳出出發視窗 ===== */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt { position: relative; display: block; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: pointer; background: #0b0a0a; color: inherit; font: inherit;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #4a433c; overflow: hidden; }
.mt .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .2s; }
.mt:active .img { transform: scale(1.04); }
.mt.lock .img { filter: grayscale(.85) brightness(.55); }
.mt .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 6px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88)); text-align: left; }
.mt .cap b { display: block; font: 900 13px var(--f-display); color: #f4ecd2; text-shadow: 0 1px 2px #000; line-height: 1.3; }
.mt .cap small { display: block; font-size: 11px; color: #cfc3a3; }
.mt .badge { position: absolute; top: 6px; left: 6px; font-size: 11px; padding: 1px 6px; background: rgba(8, 6, 6, .85); }
.mt .badge.ok { color: #9fe49f; box-shadow: inset 0 0 0 1px #3b6b3b; }
.mt .badge.no { color: #e8a090; box-shadow: inset 0 0 0 1px #6b3b3b; }
.mt:not(.lock):hover { box-shadow: inset 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 12px rgba(217, 180, 90, .4); }
.mhint { text-align: center; margin: 4px 0 0; }
.sheet .card.depart { padding: 0; overflow: hidden auto; }
.depart .big { position: relative; height: 150px; background-size: 260%; background-position: 46% 50%; background-repeat: no-repeat; background-color: #0b0a0a; }
.depart .big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(12, 10, 10, .95)); }
.depart .big h2 { position: absolute; left: 14px; right: 14px; bottom: 6px; z-index: 1; margin: 0; font-size: 19px; }
.depart .bd { padding: 10px 14px 14px; }
.depart .okc { color: #9fe49f; }
.depart .note { margin: 6px 0 0; font-size: 12px; }
.depart .lockt { margin: 4px 0 0; line-height: 1.7; }
.depart .acts .gold { font-size: 16px; font-weight: 900; padding: 12px; }
.depart .acts.one { grid-template-columns: 1fr; }

/*
 * 選角色 乙版（2026-10-22 使用者選「乙 精簡」，原本的樣子備份在 _備份/選角改乙版前_20261022/）：
 * 王座大廳當整頁淡淡的背景、不寫「選擇角色」只留帳號、四拱門滿寬（GPT 圖擦掉 New Character）、下面獅頭面板，①② 是角色分頁。
 * 拱門跟面板要接得天衣無縫（使用者要求），所以從 GPT 原圖（941 寬）切成兩張，比例都跟著寬度走：
 *   cs_top.webp  941×675：原圖 y 440～1115＝四拱門＋地台＋①②＋面板上緣與兩個上角
 *   cs_body.webp 941×305：原圖 y 1115～1420＝面板身體（左右直邊＋獅頭底），接在 cs_top 正下方
 * 面板的字要從上框下面就開始（原圖 y 995），所以面板往上疊 120/941 個寬度；身體圖畫在 ::before，往下讓開同樣距離。
 * margin／padding 的 % 是照「寬度」算的，所以不管手機多寬，接縫都對得準。
 */
body:has(.select)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 6, .5), rgba(7, 6, 6, .9) 60%, #070606), url("../../hunt/assets/ui/cs_throne.webp") center top / cover no-repeat; }
body:has(.select) .app { position: relative; z-index: 1; }
.app:has(.select) .card.hd { background: none; border: 0; box-shadow: none; padding: 4px 2px 0; }
.app:has(.select) .card.hd::before, .app:has(.select) .card.hd::after, .app:has(.select) .card.hd > h2::after { display: none; }
.app:has(.select) .card.hd h2 { display: none; }
.select { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-inline: -14px; }
.select .sel-empty { padding: 12px 14px; }
.select .slotwrap { margin: 0; aspect-ratio: 941 / 675; background-image: url("../../hunt/assets/ui/cs_top.webp?v=3"); box-shadow: none; }
.select .slots { height: 72.89%; }                /* 492／675：只佔拱門那段，下面是地台和 ①② */
.select .slotnav { display: none !important; }    /* 左右箭頭不要（使用者：有 ①② 和手滑就夠） */
/* 直式：登出 LINE、切換測試帳號搬到最上面「帳號」那一行的左邊（2026-10-30 使用者），跟橫式同一種小鈕（橫式在下面 @media 另外放標題列中間） */
#hunt:has(> .select) { position: relative; }
#hunt:has(> .select) > form { margin: 0; }
#hunt:has(> .select) > .testas, #hunt:has(> .select) > form .linkish { position: absolute; z-index: 3; top: 2px; height: 28px; margin: 0; padding: 0 11px; border: 0; border-radius: 14px;
  background: rgba(30, 24, 18, .9); box-shadow: inset 0 0 0 1px #6e5a34; font-size: 0; white-space: nowrap; cursor: pointer; }
#hunt:has(> .select) > form .linkish { left: 0; }
#hunt:has(> .select) > .testas { left: 88px; }
#hunt:has(> .select) > .testas::after, #hunt:has(> .select) > form .linkish::after { font: 700 12px/28px var(--f-body); letter-spacing: .04em; }
#hunt:has(> .select) > .testas::after { content: "測試帳號"; color: #9fe0ff; }
#hunt:has(> .select) > .testas.on::after { content: "測試中・切回"; color: #ffd98a; }
#hunt:has(> .select) > form .linkish::after { content: "登出 LINE"; color: #c9b88f; }
#hunt:has(> .select) > .testas:active, #hunt:has(> .select) > form .linkish:active { background: rgba(110, 90, 52, .5); }
.select .slot { padding: 6% 0 4%; }
/*
 * 選中的角色：拱門頂上的燈往下照（2026-10-23 使用者：光暈再亮一點、從頭上往下照）。
 * 燈在每格寬度的正中間、格子高度約 17%（cs_top 拱門裡那盞小燈），人物腳下約 72%：
 * ::before＝燈到地上的光束（上窄下寬、上亮下淡）＋燈本身的亮點，::after＝照在地上的一圈光
 */
.select .slot[aria-selected="true"] { background: none; }
.select .slot > :not(.pill) { position: relative; z-index: 1; }
.select .slot > .pill { z-index: 1; }
.select .slot[aria-selected="true"]::before, .select .slot[aria-selected="true"]::after { content: ""; position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
/* 光束：窄一點、霧一點（使用者 10-23：太實體）——梯形改成兩側往外淡出的漸層，不用 clip-path 硬邊，再加大模糊 */
.select .slot[aria-selected="true"]::before { left: 14%; right: 14%; top: 16.5%; bottom: 25%;
  background: radial-gradient(ellipse 12% 4% at 50% 1.5%, rgba(255, 236, 190, .8), rgba(255, 214, 140, 0) 100%),
    radial-gradient(ellipse 42% 105% at 50% 0%, rgba(255, 220, 150, .55), rgba(255, 210, 140, .24) 45%, rgba(255, 200, 120, .05) 75%, transparent 100%);
  filter: blur(6px); opacity: .9; }
/* 腳下光圈改在 hunt.js Stage.draw 裡畫在人物畫布上（跟腳同一個座標），各種螢幕寬度都對得準（使用者 10-23：原本太高） */
.select .slot[aria-selected="true"]::after { display: none; }

.select .slot[aria-selected="true"] canvas { filter: drop-shadow(0 0 6px rgba(255, 214, 120, .55)) drop-shadow(0 4px 4px rgba(0, 0, 0, .8)); }
.select .slot:not([aria-selected="true"]) canvas { filter: brightness(.72) drop-shadow(0 4px 4px rgba(0, 0, 0, .8)); }
.select .slot b { color: #f1e7cf; }
.select .slot[aria-selected="true"] b { color: #f6d98a; }
.select .slot span { color: #b9ab8c; }
.select .slot .pill { top: 13%; background: rgba(8, 6, 6, .85); }
/* 人物圖不要被拉長：格子比 132×150 瘦時等比縮小、站在底部 */
.select .slot canvas { max-width: 100%; object-fit: contain; object-position: 50% 100%; }
/* ①②：圓心量自 cs_top（x 439／502、y 530、直徑約 57），全部用 % 跟著圖縮放 */
.seldial { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.seldial button { position: absolute; top: 78.52%; width: 9%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); }
.seldial button[data-pg="0"] { left: 46.65%; } .seldial button[data-pg="1"] { left: 53.35%; }
.seldial button.selarr { width: 8%; } /* 圖上 ①② 兩旁的左右箭頭（cs_top 圓心 x362、587／941） */
.seldial button[data-nav="-1"] { left: 38.47%; } .seldial button[data-nav="1"] { left: 62.38%; }
.seldial button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 67%; height: 67%; transform: translate(-50%, -50%); border-radius: 50%; }
.seldial button.on::before { box-shadow: 0 0 8px 2px rgba(255, 214, 120, .6), inset 0 0 6px rgba(255, 214, 120, .35); }
.seldial button:disabled { cursor: default; }
/* 面板：往上疊進 cs_top 的面板上緣（#hunt 寬＋28 才是滿版寬） */
.card.plaque.selinfo { position: relative; z-index: 0; isolation: isolate; margin: calc((100% + 28px) * -0.12752) -14px 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; padding: 10px calc(5.53% + 10px) 46px; }
.card.plaque.selinfo::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
  width: auto; height: auto; margin-top: 12.752%; transform: none; background: none; box-shadow: none; border-radius: 0;
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url("../../hunt/assets/ui/cs_body.webp") 0 52 104 52 fill / 0 5.53% 42px 5.53% stretch; }
.card.plaque.selinfo::after { display: none; }

/*
 * 戰況地圖選單（2026-10-23 使用者選甲「圓鈕橫排」、放左上）：圓鈕切自原圖右側的鐵圓鈕（lv_rbtn），
 * 平常只有選單鈕；點開往右排：手動／自動、比例、變身、收工（角色 10-23 拿掉，改在角色頁），鈕下小字。右上只放訊號。手動模式時選單鈕三條線變亮金。
 */
#tab-live .mmrow { position: absolute; left: 6px; top: 6px; z-index: 4; display: flex; align-items: flex-start; gap: 6px; }
#tab-live .mmitems { display: none; gap: 8px; }
#tab-live .mapwrap.mm-open .mmitems { display: flex; }
#tab-live .mmi { position: relative; width: 42px; height: 42px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; touch-action: manipulation;
  background: url("../../hunt/assets/ui/lv_rbtn.webp?v=2") center / 100% 100% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); font: 900 12px var(--f-body); color: #f0d696; text-shadow: 0 1px 2px #000; }
#tab-live .mmi > b { font: inherit; color: inherit; }
#tab-live .mmi > em { position: absolute; left: 50%; top: 100%; margin-top: 2px; transform: translateX(-50%); font: 700 10px var(--f-body); font-style: normal; color: #ece2cc; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
#tab-live .mmi:active { transform: translateY(1px); }
#tab-live .mmbtn { display: grid; align-content: center; justify-items: center; gap: 3px; }
#tab-live .mmbtn i { display: block; width: 15px; height: 2px; border-radius: 1px; background: #e9d49a; box-shadow: 0 1px 0 #000; }
#tab-live .mapwrap.mm-open .mmbtn { box-shadow: inset 0 0 0 2px rgba(255, 214, 120, .7), inset 0 0 8px rgba(255, 200, 90, .45), 0 2px 6px rgba(0, 0, 0, .55); }
#tab-live .mapwrap:has(.modebar.on) .mmbtn i { background: #ffd76a; box-shadow: 0 0 4px #ffb73a; }
#tab-live .modebar { position: static; display: block; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
#tab-live .modebar.on .modebtn { box-shadow: inset 0 0 0 2px rgba(255, 214, 120, .75), inset 0 0 10px rgba(255, 200, 90, .55), 0 2px 6px rgba(0, 0, 0, .55); }
#tab-live .arbtn { min-width: 0; height: 42px; border: 0; font-size: 12px; letter-spacing: -.02em; } /* 「最大」兩個字也放得進圓鈕 */
#tab-live .polybtn { position: relative; inset: auto; width: 42px; height: 42px; padding: 0; background: url("../../hunt/assets/ui/lv_rwing.webp?v=4") center / 100% 100% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
#tab-live .polybtn img, #tab-live .polybtn > b { display: none; }
/* 變身中：光暈收在圓鈕裡面（原本往外發光看起來比別顆大、還壓到旁邊的收工，2026-10-23 使用者截圖） */
#tab-live .polybtn.on { box-shadow: inset 0 0 0 2px rgba(255, 214, 120, .75), inset 0 0 10px rgba(255, 200, 90, .55), 0 2px 6px rgba(0, 0, 0, .55); }
#tab-live .polybtn[hidden] { display: none !important; }
#tab-live .mmi.end { color: #ff9a84; }
#tab-live .mmi.gmtpbtn { color: #9fe0ff; } /* 測試傳送（只有測試角色有） */
#tab-live .mmi.farmbtn { color: #b8e0a0; } /* 前往公田 */
#tab-live .mmi.gobtn { color: #ffe08a; } /* 前往村裡的地點 */
#tab-live .mmi.vilhunt { color: #ffb070; } /* 村裡沒在掛機：去掛機（選地圖） */
/* 測試帳號切換（角色清單下方、彈出清單） */
.linkish.testas { display: block; margin: 8px auto 0; color: #9fe0ff; }
.sheet .tlist { display: grid; gap: 8px; margin: 10px 0; }
.sheet .tlist .btn { text-align: left; line-height: 1.5; white-space: normal; height: auto; padding: 8px 12px; }
/* 測試傳送的全圖（2026-10-26）：點一下選位置；放大後可以拖著看 */
.gmsheet { max-width: 720px; }
.gmmap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #050404; -webkit-overflow-scrolling: touch; }
.gmin { position: relative; width: 100%; cursor: crosshair; }
.gmin.z { width: 300%; }
.gmin img { display: block; width: 100%; height: auto; max-width: none; }
.gmin i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; }
.gmme { background: #ff4a3a; box-shadow: 0 0 0 2px #fff, 0 0 8px #ff4a3a; }
.gmpick { background: #ffe68a; box-shadow: 0 0 0 2px #000, 0 0 10px #ffe68a; }
.gmacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gmacts .num { flex: 1 1 140px; font-size: 13px; color: var(--gold); }
/*
 * 頂部重排（2026-10-23 使用者選「全部都做」）：
 * 1. 訊號格搬進公告列「點開看」左邊，改成金色小格（網路差才變黃、紅）；地圖右上角清空
 * 2. 選單鈕縮小成 34 點、平常 72% 透明，點開／手動模式時全亮
 * 3. 手動時選單鈕右邊多小牌「手動 ×N」
 * 4. 沒王時公告列變暗灰；新的王出現時最前面閃一下金光
 */
.netsig.inhead { display: none; }
body.hunting header.top .netsig.inhead { position: absolute; display: flex; right: 4.6%; top: 74%; width: 26px; height: 15%; min-height: 14px; padding: 0; gap: 2px;
  align-items: flex-end; justify-content: center; border: 0; border-radius: 0; background: none; box-shadow: none; z-index: 2; cursor: pointer; }
body.hunting header.top .netsig.inhead i { width: 3px; background: rgba(120, 100, 70, .45); }
body.hunting header.top .netsig.inhead i:nth-child(1) { height: 30%; } body.hunting header.top .netsig.inhead i:nth-child(2) { height: 50%; }
body.hunting header.top .netsig.inhead i:nth-child(3) { height: 75%; } body.hunting header.top .netsig.inhead i:nth-child(4) { height: 100%; }
body.hunting header.top .netsig.inhead[data-lv="4"] i, body.hunting header.top .netsig.inhead[data-lv="3"] i:nth-child(-n+3) { background: #e9c98a; }
body.hunting header.top .netsig.inhead[data-lv="2"] i:nth-child(-n+2) { background: #f0c846; }
body.hunting header.top .netsig.inhead[data-lv="1"] i:nth-child(1) { background: #ec6050; }
body.hunting header.top .lvnotice { right: calc(3.6% + 0px); padding-right: 0; }
/* 公告列（2026-10-23 使用者選乙）：訊號在最右邊；「查看」小按鈕緊跟在公告文字後面（不貼訊號） */
body.hunting header.top button.lvnotice { justify-content: flex-start; right: calc(3.6% + 34px); }
body.hunting header.top button.lvnotice span { flex: 0 1 auto; }
/* 「查看」：使用者改選 1「鐵框金字小牌」，跟頂部聲音、回官網方鈕同一種鐵框材質 */
body.hunting header.top button.lvnotice > b { flex: none; margin-left: 8px; padding: 1px 11px 2px; border: 1px solid #0a0806; border-radius: 2px;
  background: linear-gradient(180deg, #3e362e, #181411); box-shadow: inset 0 0 0 1px #96784a, inset 0 2px 0 rgba(255, 230, 170, .12), 0 1px 3px rgba(0, 0, 0, .7);
  font: 900 11.5px/1.45 var(--f-body); letter-spacing: .12em; color: #ffcf6a; text-shadow: 0 1px 2px #000; }
body.hunting header.top button.lvnotice:active > b { filter: brightness(1.3); }
body.hunting header.top button.lvnotice.quiet > b { color: #8a8070; box-shadow: inset 0 0 0 1px #5a4e40, 0 1px 3px rgba(0, 0, 0, .7); }
body.hunting header.top .lvnotice.quiet span { color: #807868; font-weight: 400; }
body.hunting header.top .lvnotice.flash::before { content: ""; position: absolute; left: -10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 80, .75), rgba(255, 196, 80, 0) 70%); animation: lvFlash 1.6s ease-out 2; }
@keyframes lvFlash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.6); } }
#tab-live .mmbtn { width: 34px; height: 34px; opacity: .72; transition: opacity .2s; }
#tab-live .mapwrap.mm-open .mmbtn, #tab-live .mapwrap:has(.modebar.on) .mmbtn, #tab-live .mmbtn:hover { opacity: 1; }
#tab-live .mmbtn i { width: 13px; }
#tab-live .mmrow { align-items: flex-start; }
#tab-live .mmtag { align-self: center; margin-top: 0; padding: 3px 9px; border-radius: 4px; background: rgba(12, 10, 8, .85); box-shadow: inset 0 0 0 1px #c8a050;
  font: 900 12px var(--f-body); color: #ffcf6a; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
#tab-live .mmtag[hidden], #tab-live .mapwrap.mm-open .mmtag { display: none; }
#tab-live .mmrow .mmtag { height: 22px; line-height: 16px; margin-top: 6px; }


/*
 * 戰況外觀「天堂鐵框龍頭」（2026-10-23 使用者定案）：使用者最喜歡的 GPT 整張畫面
 * （服務端 金庸/網頁掛機介面原圖/戰況畫面_GPT原圖.webp，1024×1536）原封不動切成幾大片 lv_*.webp，字擦掉，
 * 網頁再把即時的數字、文字放回原位（位置全用 % 對應原圖座標，所以任何寬度都對得準）。
 * 切圖腳本留在 Claude scratchpad（cut_135.py、cut_head2.py）；只在掛機中（body.hunting）套用。
 * 頂部只留聲音、回官網兩顆；公告列顯示最新一則系統公告（hunt.js updNotice）。
 */
body.hunting { background: #0b0a09; }

/* ---- 頂部：logo＋4 顆鈕＋公告列，整片一張圖（原圖 y 0~195） ---- */
body.hunting header.top { position: relative; display: block; height: auto; aspect-ratio: 1024 / 195; margin-inline: -14px; padding: 0;
  background: url("../../hunt/assets/ui/lv_head.webp?v=3") center / 100% 100% no-repeat; }
body.hunting header.top .brand small { display: none; }
body.hunting .app:has(#tab-live) { gap: 0; }
body.hunting header.top .brand { position: absolute; left: 0; top: 0; width: 56%; height: 64%; font-size: 0; color: transparent; }
body.hunting header.top .top-r { position: static; }
body.hunting header.top .top-r > * { position: absolute; top: 5.1%; height: 58%; width: 20.5%; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  font: 700 clamp(10px, 2.9vw, 13px) var(--f-body); color: #e9dcc0; text-shadow: 0 1px 2px #000; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1%; cursor: pointer; text-decoration: none; }
body.hunting header.top .sndbtn { left: 57.4%; font-size: 0; }
body.hunting header.top .sndbtn::before, body.hunting header.top .sndbtn svg { display: none; }
body.hunting header.top .sndbtn::after { display: none; }   /* 頂部只放圖示，不寫字（2026-10-23） */
body.hunting header.top a.home { left: 77.9%; font-size: 0; }
/* ---- 登入、綁定、選角色這些還沒進戰況的頁面（2026-10-23 使用者選甲）：同一張頂部圖拿掉公告列（lv_head_top.webp＝lv_head 上半 0~121＋最底的金屬邊 184~195） ---- */
body:not(.hunting) header.top { position: relative; top: auto; display: block; height: auto; aspect-ratio: 1024 / 133; margin-inline: -14px; padding: 0;
  background: url("../../hunt/assets/ui/lv_head_top.webp") center / 100% 100% no-repeat; }
body:not(.hunting) header.top::before { display: none; }
body:not(.hunting) header.top .brand small { display: none; }
body:not(.hunting) header.top .brand { position: absolute; left: 0; top: 0; width: 56%; height: 92%; font-size: 0; color: transparent; text-shadow: none; }
body:not(.hunting) header.top .top-r { position: static; }
body:not(.hunting) header.top .top-r > * { position: absolute; top: 7.5%; height: 82%; width: 20.5%; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  font-size: 0; color: transparent; display: block; cursor: pointer; text-decoration: none; }
body:not(.hunting) header.top .sndbtn { left: 57.4%; }
body:not(.hunting) header.top .sndbtn::before, body:not(.hunting) header.top .sndbtn::after, body:not(.hunting) header.top .sndbtn svg { display: none; }
body:not(.hunting) header.top a.home { left: 77.9%; }
/* ---- 地圖：上下貼齊，選單收起來 ---- */
body.hunting #tab-live { gap: 0; }
body.hunting #tab-live .mapwrap { border: 0; box-shadow: none; margin-top: 0; }

/*
 * ---- 血魔條（2026-10-23 使用者給的新框 212121.png → lv_hpmp.webp，2170×343 原圖等比縮）----
 * 圖層：血條、魔條在下面，框圖用 ::after 蓋在最上面，兩個透明的洞剛好把條切成圓弧兩端。
 * 洞的位置量自原圖：HP x 155～849、MP x 1322～2014、y 164～247；框上緣（龍角、龍頭）約 96/2170 寬，往上疊進地圖。
 * 文字：血條的百分比在左邊、魔力條的百分比在右邊，數值置中。
 */
body.hunting #tab-live .hpmp { position: relative; display: block; height: auto; aspect-ratio: 2170 / 343; margin: calc((100% + 28px) * -0.0691) -14px 0; padding: 0; z-index: 3;
  background: linear-gradient(180deg, transparent 52%, #0f0d0b 52%); box-shadow: none; }
/* 10-23：兩端龍尾外側是透明的，原本上下都露出網頁黑底 → 框多疊進地圖（上半透明處看到地圖），下半墊面板底色（跟操作面板連成一片） */
body.hunting #tab-live .hpmp::before { display: none; }
body.hunting #tab-live .hpmp::after { content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; height: auto;
  background: url("../../hunt/assets/ui/lv_hpmp.webp") center / 100% 100% no-repeat; }
body.hunting #tab-live .hpmp .bar { position: absolute; z-index: 1; top: 47.2%; height: 25.6%; border: 0; border-radius: 0; overflow: hidden;
  background: linear-gradient(180deg, #050303, #1a1210 60%, #0b0706); box-shadow: none; }
body.hunting #tab-live .hpmp .bar.hp { left: 7.0%; width: 32.3%; }
body.hunting #tab-live .hpmp .bar.mp { left: 60.8%; width: 32.2%; }
body.hunting #tab-live .hpmp .bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; }
body.hunting #tab-live .hpmp .bar.hp > i { background: linear-gradient(180deg, #e0574a, #a3201a 45%, #5c0c0a); box-shadow: inset 0 1px 0 rgba(255, 200, 190, .35); }
body.hunting #tab-live .hpmp .bar.mp > i { background: linear-gradient(180deg, #4d8ef0, #1d4fb8 45%, #0c2a6a); box-shadow: inset 0 1px 0 rgba(190, 215, 255, .35); }
body.hunting #tab-live .hpmp .bar .val, body.hunting #tab-live .hpmp .bar .pct { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; font: 700 clamp(10px, 2.8vw, 12.5px) var(--f-body);
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
/* 血條：百分比靠左、數值靠右；魔力條：百分比靠右、數值靠左（兩個字不會疊在一起） */
body.hunting #tab-live .hpmp .bar.hp .pct { left: 7%; right: auto; }
body.hunting #tab-live .hpmp .bar.hp .val { right: 6%; left: auto; }
body.hunting #tab-live .hpmp .bar.mp .pct { right: 7%; left: auto; }
body.hunting #tab-live .hpmp .bar.mp .val { left: 6%; right: auto; }
body.hunting #tab-live .hpmp .bar .tag, body.hunting #tab-live .hpmp .med { display: none; }

/*
 * ---- 操作面板（2026-10-23 改）：上段「狀態 6 項＋對話」高度可伸縮（fitHud 填滿畫面），下段「頻道輸入＋快捷格」固定圖 ----
 * 上段零件都切自原圖：左右邊框條直向重複、狀態列空框（九宮格）＋各自圖示、對話框九宮格（捲軸中間的 › 是真的按鈕：對話加高）
 */
body.hunting .card.hud { position: relative; display: block; margin: 0 -14px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
body.hunting .card.hud::before, body.hunting .card.hud::after { display: none; }
body.hunting #tab-live .hudtop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 96px; row-gap: 4px; /* 對話那列固定 96px：加高時對話框浮起來，這列照樣佔位，整塊不會變矮（10-24 變矮會讓地圖變高、整頁往下跳） */ height: auto; min-height: 0;
  padding: 1.2% 2.9% .6% 4.1%; background: url("../../hunt/assets/ui/lv_hudt.webp") top center / 100% auto no-repeat, url("../../hunt/assets/ui/lv_hudl.webp") left top / 3.9% auto repeat-y,
  url("../../hunt/assets/ui/lv_hudr.webp") right top / 3.9% auto repeat-y, #0f0d0b; }
body.hunting #tab-live .hudbot { position: relative; aspect-ratio: 1024 / 239; background: url("../../hunt/assets/ui/lv_hudb.webp") center / 100% 100% no-repeat; }
/* 狀態：每格一個原圖的空框＋圖示。2026-10-24 使用者選甲：三格改成橫排一列，下面的對話變滿寬 */
body.hunting #tab-live .hstats { position: static; display: grid; grid-template-columns: 1.1fr 1fr 1.08fr; grid-template-rows: 30px; gap: 4px; padding: 0; height: auto; align-content: start; cursor: default; }
body.hunting #tab-live .hstats::after { display: none; }
/* 2026-10-23 使用者定：狀態只顯示等級、身上金幣、剩餘時數三項（本趟時間、擊殺、金幣不顯示），對話欄跟著同高 */
body.hunting #tab-live .hstats .gp:nth-child(n+4) { display: none; }
body.hunting #tab-live .hstats .gp { position: relative; height: auto; min-height: 24px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 2px 0 24px;
  border: solid transparent; border-width: 6px 6px; border-image: url("../../hunt/assets/ui/lv_row.webp") 14 fill / 6px stretch; border-radius: 0; box-shadow: none; background: none; }
body.hunting #tab-live .hstats .gp::before { content: ""; position: absolute; left: -3px; top: 50%; height: 26px; aspect-ratio: 1; transform: translateY(-50%);
  background: center / contain no-repeat; }
body.hunting #tab-live .hstats .gp:nth-child(1)::before { background-image: url("../../hunt/assets/ui/lv_sic_lv.webp"); }
body.hunting #tab-live .hstats .gp:nth-child(2)::before { background-image: url("../../hunt/assets/ui/lv_sic_adena.webp"); } /* 2026-11-01 使用者：金幣改遊戲的金幣道具圖 */
body.hunting #tab-live .hstats .gp:nth-child(3)::before { background-image: url("../../hunt/assets/ui/lv_sic_clock.webp"); }
body.hunting #tab-live .hstats .gp.place::before { background-image: url("../../hunt/assets/ui/lv_sic_pin.webp"); } /* 2026-11-01 改定位圖釘；這格顯示地點（說話之島、免費地圖、妖魔城）：地圖圖示（2026-10-31） */
body.hunting #tab-live .hstats .gp:nth-child(4)::before { background-image: url("../../hunt/assets/ui/lv_st_hourglass.webp"); background-size: auto 78%; }
body.hunting #tab-live .hstats .gp:nth-child(5)::before { background-image: url("../../hunt/assets/ui/lv_st_skull.webp"); background-size: 78% auto; }
body.hunting #tab-live .hstats .gp:nth-child(6)::before { background-image: url("../../hunt/assets/ui/lv_st_bag.webp"); background-size: 76% auto; }
body.hunting .hstats .gp .ic { display: none; }
body.hunting .hstats .gp .num, body.hunting .hstats .gp .lvn { font: 700 clamp(11px, 3.3vw, 14px) var(--f-body); white-space: nowrap; overflow: visible; color: #f3e6c4; text-shadow: 0 1px 2px #000; background: none; box-shadow: none; border: 0; padding: 0; }
body.hunting .hstats .gp.hexp { justify-content: space-between; }
/* 村裡：剩餘時數那格改成「掛機暫停／說話之島」（不顯示人數，2026-10-26），字放在時鐘右邊那塊的正中間 */
body.hunting.invil #tab-live .hstats .gp:nth-child(3) { justify-content: center; }
body.hunting.invil #tab-live .hstats #sLeft { margin-left: 0; }
body.hunting .hstats .gp.hexp .num { font-size: clamp(10px, 2.7vw, 12px); }
/* 窄的手機（iPhone SE、mini 等 389 以下）：三格橫排擠，圖示和字縮一點，數字才不會被圖示蓋到 */
@media (max-width: 389px) {
  body.hunting #tab-live .hstats { grid-template-columns: 1fr 1.05fr 1.05fr; gap: 3px; }
  body.hunting #tab-live .hstats .gp { padding-left: 17px; border-width: 6px 4px; }
  body.hunting #tab-live .hstats .gp::before { left: -4px; height: 21px; }
  body.hunting .hstats .gp .num, body.hunting .hstats .gp .lvn { font-size: 11px; letter-spacing: -.2px; }
  body.hunting .hstats .gp.hexp .num { font-size: 10px; }
}
/* 對話框：九宮格（右邊捲軸是圖），文字可以用手指捲 */
body.hunting #tab-live .gchat { position: relative; z-index: 1; height: 96px; min-height: 0; box-sizing: border-box; /* 固定高度（原本跟左邊三列狀態同高），不被對話內容撐高 */ overflow-y: auto; scrollbar-width: none; padding: 0 2px; margin: 0;
  border: solid transparent; border-width: 12px 18px 12px 5px; border-image: url("../../hunt/assets/ui/lv_chat.webp") 34 46 34 12 fill / 12px 18px 12px 5px stretch; border-radius: 0; box-shadow: none; background: none;
  font-size: clamp(10px, 2.8vw, 12.5px); line-height: 1.45; }
body.hunting #tab-live .gchat::-webkit-scrollbar { display: none; }
body.hunting .gchat p { margin: 0; }
/*
 * 對話加高（10-23 改，參考遊戲的聊天視窗）：整片橫跨蓋住左邊狀態欄、底色不透明，頂上戴一條龍頭飾條
 * （lv_chathead.webp＝新血魔框 212121.png 上緣切下來的，跟血魔框同一套）。--up 由 chatSz() 設在 #tab-live 上：地圖高的 35%／70%。
 * 加高時對話框一定蓋過血魔條，血魔框藏起來，免得兩端龍尾從對話框兩側露出來。
 */
body.hunting #tab-live .gchat.up { position: absolute; z-index: 6; left: 3.3%; right: 2.4%; bottom: 1%; height: calc(97.8% + var(--up, 0px)); min-height: 0; margin: 0;
  border-image: url("../../hunt/assets/ui/lv_chat.webp") 34 46 34 12 / 12px 18px 12px 5px stretch; background: #0a0807; background-clip: padding-box; }
body.hunting #tab-live.chatup .hudtop::before { content: ""; position: absolute; z-index: 7; left: -1px; right: -1px; bottom: calc(98.8% + var(--up, 0px)); aspect-ratio: 1302 / 96;
  transform: translateY(16%); pointer-events: none; background: url("../../hunt/assets/ui/lv_chathead.webp") center / 100% 100% no-repeat; }
body.hunting #tab-live.chatup .hpmp::after, body.hunting #tab-live.chatup .hpmp .bar { visibility: hidden; } /* 底色留著，不然兩側露黑 */
/*
 * 加高時整塊面板一起往上長（2026-10-24 使用者：加高後對話框兩側在血魔條那段露黑）：
 * 面板頂端再往上 --up 那段，補上跟面板一樣的左右邊框條＋深底（z 5：在對話框 6、龍頭飾條 7 底下），
 * 邊框條從底部往上重複，跟下面面板的邊框條接得起來；面板頂上那條橫飾加高時拿掉，不然兩側會有一道接縫。
 */
body.hunting:not(.land) #tab-live.chatup .hudtop { background: url("../../hunt/assets/ui/lv_hudl.webp") left top / 3.9% auto repeat-y, url("../../hunt/assets/ui/lv_hudr.webp") right top / 3.9% auto repeat-y, #0f0d0b; }
body.hunting:not(.land) #tab-live.chatup .hudtop::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; bottom: 100%; height: calc(var(--up, 0px) + 4px); pointer-events: none;
  background: url("../../hunt/assets/ui/lv_hudl.webp") left bottom / 3.9% auto repeat-y, url("../../hunt/assets/ui/lv_hudr.webp") right bottom / 3.9% auto repeat-y, #0f0d0b; }
body.hunting #tab-live .chatsz { position: absolute; z-index: 7; right: 2.9%; top: 50%; width: 30px; height: 44px; margin-top: -22px; padding: 0 0 0 9px; border: 0; background: none; cursor: pointer;
  font: 700 22px/44px var(--f-body); color: #d9c49a; text-shadow: 0 1px 2px #000; }
body.hunting #tab-live .chatsz[data-sz="1"], body.hunting #tab-live .chatsz[data-sz="2"] { color: #ffd76a; }
/* 2026-10-24 使用者：對話是往上加高，箭頭要朝上；加到最高（第 2 段）變朝下＝收回。箭頭用框線畫（跟橫式同一款），顏色跟著按鈕字色 */
body.hunting #tab-live .chatsz { font-size: 0; }
body.hunting #tab-live .chatsz::before { content: ""; position: absolute; left: calc(100% - 9px); top: 50%; width: 9px; height: 9px; margin: -2px 0 0 -5.75px; /* 對準對話框右邊 18px 的捲軸那一欄正中間 */
  border: solid currentColor; border-width: 2.5px 0 0 2.5px; transform: rotate(45deg); filter: drop-shadow(0 1px 1px #000); }
body.hunting #tab-live .chatsz[data-sz="2"]::before { margin-top: -8px; transform: rotate(225deg); }
/*
 * 直式加高鈕（2026-10-24 使用者選「甲 視窗放大圖示」）：不放捲軸上（看起來像捲軸滑塊），改在對話框裡面的右上角、捲軸左邊。
 * 圖示跟電腦視窗一樣：⤢ 放大（第 0、1 段）／⤡ 還原（第 2 段＝收回）；加高中金框發亮。橫式另有自己的圓鈕，不受影響。
 * 位置：平常＝對話框（固定 96px 高、貼著整塊底部）上緣往下 5px；加高＝對話框上緣（1.2% − --up）往下 18px，讓開龍頭飾條。
 *       右邊＝對話框右緣（平常 2.9%、加高 2.4%）往內讓過 18px 捲軸再留 6px。
 */
body.hunting:not(.land) #tab-live .chatsz { top: calc(100% - 93px); right: calc(2.9% + 24px); width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7' fill='none' stroke='%23ffe3a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, linear-gradient(#3a2c1c, #16100a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #a8823a, 0 2px 4px #000; }
body.hunting:not(.land) #tab-live.chatup .chatsz { top: calc(1.2% - var(--up, 0px) + 18px); right: calc(2.4% + 24px); }
body.hunting:not(.land) #tab-live .chatsz[data-sz="2"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4v6H4M14 20v-6h6M10 10L4 4M14 14l6 6' fill='none' stroke='%23ffe3a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, linear-gradient(#3a2c1c, #16100a); }
body.hunting:not(.land) #tab-live .chatsz[data-sz="1"], body.hunting:not(.land) #tab-live .chatsz[data-sz="2"] { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 8px rgba(255, 200, 90, .5), 0 2px 4px #000; }
body.hunting:not(.land) #tab-live .chatsz:active { filter: brightness(1.25); }
body.hunting:not(.land) #tab-live .chatsz::before { display: none; }
body.hunting:not(.land) #tab-live .chatsz::after { content: ""; position: absolute; inset: -8px; } /* 圖示小、手指好按：點擊範圍往外多 8px */
/* 層級（2026-10-24 使用者：按打王會按到加高鈕）：底部固定的分頁列／停靠的補給列一定要壓在戰況頁所有東西上面（對話加高 6、龍頭飾條和加高鈕 7、網路說明 8） */
body.hunting:not(.land) .tabs, body.hunting:not(.land) .fdock { z-index: 12; }
/*
 * 視野「最大」（2026-10-24 使用者）：狀態列＋對話框（.hudtop）和頻道輸入列都收起來，血魔條直接貼著快捷格，剩下的高度全給地圖（hunt.js fitHud）。
 * 下段圖 lv_hudb 1024×239：上面 y 0～70 是頻道列、下面是快捷格 → 只顯示 y 70 以下（169 高），快捷格座標跟著換算（原 top 93、高 123）。
 * 對話加高中切到最大：血魔條要照常顯示（加高時血魔條是藏起來的）。
 */
body.hunting:not(.land) #tab-live.vmax .hudtop, body.hunting:not(.land) #tab-live.vmax .chatbar { display: none; }
body.hunting:not(.land) #tab-live.vmax .hudbot { aspect-ratio: 1024 / 169; background-position: center bottom; background-size: 100% auto; }
body.hunting:not(.land) #tab-live.vmax .card.hud .fkeys { top: 13.6%; height: 72.8%; }
body.hunting:not(.land) #tab-live.vmax.chatup .hpmp::after, body.hunting:not(.land) #tab-live.vmax.chatup .hpmp .bar { visibility: visible; }
/*
 * 網頁村莊（網頁村莊，2026-10-25）：跟戰況同一個畫面，#tab-live.vil 時
 *   拿掉「回村」「換地圖」，換成「頻道」「掛機地圖」「離開村莊」。
 *   2026-10-29 使用者：之後村裡也會放王跟小怪，快捷格、手動／自動、視野、變身跟練功區一樣（原本拿掉、下段圖只留頻道輸入列）；
 *   還沒放怪前按了只提示（hunt.js vilNoMob）
 */
#tab-live:not(.vil) .vilonly, #tab-live.vil .huntonly, #tab-live.vil .mmtag { display: none !important; }
#tab-live .chanbtn > b, #tab-live .vilout > b, #tab-live .vilgo > b { font-size: 12px; letter-spacing: -.02em; }
#tab-live .vilout { color: #9fe0a8; }
/* 沒在掛機、只是在村裡：沒有帳本、收工 */
/* 沒在掛機的村民：沒有收工；帳本照樣有（2026-10-25 使用者：底部不要缺一格，之後村裡的王、寶箱、運鏢收穫也記在帳本） */
body.vilfree #bStop2 { display: none !important; }
/* 選角畫面「前往網頁村莊」：整排、兩行字 */
.selinfo .btn.vilgo { display: grid; justify-items: center; gap: 1px; width: 100%; margin-top: 8px; padding: 7px 10px; line-height: 1.25;
  background: linear-gradient(180deg, #2c3a34, #121a17); box-shadow: inset 0 0 0 1px #5d7f6c, 0 2px 4px rgba(0, 0, 0, .5); color: #d8f2df; }
.selinfo .btn.vilgo b { font-size: 15px; letter-spacing: .08em; }
.selinfo .btn.vilgo small { font-size: 11.5px; color: #a8c8b4; }
.selinfo .btn.vilgo:disabled { filter: grayscale(.8); opacity: .6; }
/* 換頻道 */
.chanlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 8px; }
.chanlist .btn { display: grid; gap: 2px; justify-items: center; padding: 8px 6px; height: auto; line-height: 1.3; }
.chanlist .btn b { font-size: 15px; }
.chanlist .btn span { font-size: 12px; }
.chanlist .btn.on { box-shadow: inset 0 0 0 2px #e2bd62; }
.gchat .ln.town { color: #f8f8f8; } /* 村莊一般頻道：跟掛機一般頻道一樣白字 */
.card.st-note { margin-bottom: 8px; }
/* 頻道＋輸入＋送出（下段圖的座標） */
body.hunting .chatbar { position: absolute; left: 0; right: 0; top: 8.3%; height: 18.1%; display: block; margin: 0; }
body.hunting .chatbar .chsel { position: absolute; left: 4.5%; top: 0; width: 15.8%; height: 100%; }
body.hunting .chatbar .chbtn { width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: #f3e6c4; font-size: clamp(11px, 3.4vw, 15px); }
body.hunting .chatbar #chatIn { position: absolute; left: 22.3%; top: 0; width: 65.6%; height: 100%; padding: 0 1%; border: 0; border-radius: 0; box-shadow: none; background: none; color: #f3e6c4; font-size: clamp(11px, 3.2vw, 14px); }
body.hunting .chatbar .sendbtn { position: absolute; left: 89.6%; top: 0; width: 6.9%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: transparent; }
body.hunting .chatbar .sendbtn svg { display: none; }
/* 快捷格 */
body.hunting .card.hud .fkeys { position: absolute; left: 5.1%; top: 38.9%; width: 90.1%; height: 51.4%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 2.3%; padding: 0; margin: 0; }
body.hunting .fk { aspect-ratio: auto; height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
body.hunting .fk img { width: 62%; }
body.hunting .fk:active { box-shadow: inset 0 0 0 2px #d9b45a, 0 0 8px rgba(217, 180, 90, .5); }
/* 角色頁下面的切換角色／收工結算 */
body.hunting .charcmds { margin-top: 10px; }
body.hunting .charcmds .btn { border-radius: 2px; border: 1px solid #050404; background: linear-gradient(180deg, #2c2824, #151311); box-shadow: inset 0 0 0 1px #4a4038; color: #e9dcc0; }
body.hunting .charcmds .btn.end { background: linear-gradient(180deg, #3a1714, #1a0a09); box-shadow: inset 0 0 0 1px #6a3028; }

/* ---- 底部分頁：原圖的框（一般／金框）＋去背的圖示 ---- */
body.hunting .tabs { background: #0b0a09; box-shadow: 0 -1px 0 #3a332c; }
body.hunting .tabs nav { gap: 1px; padding: 3px 2px 2px; }
body.hunting .tabs button { aspect-ratio: 144 / 158; padding: 6% 0 17% 0; border: 0; border-radius: 0; background: url("../../hunt/assets/ui/lv_tab.webp") center / 100% 100% no-repeat;
  grid-template-rows: 1fr auto; align-content: stretch; gap: 0; color: #d8cbb0; font: 700 clamp(11px, 3.2vw, 14px) var(--f-body); text-shadow: 0 1px 2px #000; }
body.hunting .tabs button[aria-selected="true"] { background-image: url("../../hunt/assets/ui/lv_tab_on.webp"); color: #f6e2a8; }
body.hunting .tabs button i { width: 100%; height: 100%; min-height: 0; box-shadow: none !important; background: none center 70% / auto 62% no-repeat !important; }
body.hunting .tabs [data-tab="live"] i { background-image: url("../../hunt/assets/ui/lv_ic_live.webp") !important; }
body.hunting .tabs [data-tab="char"] i { background-image: url("../../hunt/assets/ui/lv_ic_char.webp") !important; }
body.hunting .tabs [data-tab="led"] i { background-image: url("../../hunt/assets/ui/lv_ic_led.webp") !important; }
body.hunting .tabs [data-tab="drop"] i { background-image: url("../../hunt/assets/ui/lv_ic_drop.webp") !important; }
body.hunting .tabs [data-tab="arena"] i { background-image: url("../../hunt/assets/ui/lv_ic_arena.webp") !important; }
body.hunting .tabs [data-tab="set"] i { background-image: url("../../hunt/assets/ui/lv_ic_set.webp") !important; }


/* 頂部公告列（掛機中才出現） */
.lvnotice { display: none; }
body.hunting header.top .lvnotice { position: absolute; left: 7%; right: 3.6%; top: 72%; height: 19%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer; font: 500 clamp(10px, 3vw, 13px) var(--f-body); color: #e9c98a; text-shadow: 0 1px 2px #000; white-space: nowrap; text-align: left; }
body.hunting header.top .lvnotice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.hunting header.top .lvnotice b { flex: none; font-weight: 500; color: #e9dcc0; }
/* 補給格停靠在畫面最下面時（操作面板捲出畫面）：沒有底圖，自己畫暗色方格 */
body.hunting .fdock .fk { height: auto; aspect-ratio: 1; background: linear-gradient(180deg, #1c1815, #0d0b0a); box-shadow: inset 0 0 0 1px #4a4038, inset 0 0 6px #000; }
body.hunting .fdock { background: #0b0a09; box-shadow: 0 -1px 0 #3a332c; }
/* 其他分頁（角色、帳本…）跟頂部招牌之間留一點空（戰況頁要貼齊，所以整頁 gap 是 0） */
body.hunting #hunt > section:not(#tab-live) { margin-top: 10px; }
/* 電腦上地圖也左右貼齊（跟上下兩片圖一樣寬，原本只有手機貼齊） */
body.hunting #tab-live .mapwrap { margin-inline: -14px; border-radius: 0; }
/* 頻道鈕字置中（手機上原本偏下）；送出鈕圖不變、可以按的範圍放大（原本太小很難按） */
body.hunting #tab-live .chatbar .chbtn { display: flex; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
body.hunting #tab-live .chatbar .sendbtn { left: 87.5%; top: -30%; width: 12.5%; height: 160%; }
body.hunting header.top .lvnotice b { font-weight: 700; }
body.hunting header.top .lvnotice span b { color: #ffcf6a; }

/*
 * 網路說明卡（2026-10-23 使用者：點開常忘記關很醜、要醒目但好看）：
 * 浮在地圖上緣、不推擠版面；黑底金框、左邊一條顏色依訊號（綠順暢／黃不穩／紅很差）；淡入、6 秒自己收起、點一下也收
 */
body.hunting #tab-live { position: relative; }
body.hunting #tab-live > .netnote { position: absolute; z-index: 8; top: 8px; left: 52px; right: 8px; margin: 0; padding: 9px 12px 9px 34px;
  border: 1px solid #a8843f; border-left-width: 4px; border-radius: 4px; background: linear-gradient(180deg, rgba(30, 24, 18, .96), rgba(12, 10, 8, .96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 220, 150, .15); color: #ece2cc; font: 500 13px/1.55 var(--f-body); text-shadow: 0 1px 1px #000;
  cursor: pointer; animation: netIn .25s ease-out; }
body.hunting #tab-live > .netnote[hidden] { display: none; }
body.hunting #tab-live > .netnote::before { content: "!"; position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 900 12px/1 var(--f-body); color: #1a1208; background: #e9c98a; }
body.hunting #tab-live > .netnote[data-lv="4"], body.hunting #tab-live > .netnote[data-lv="3"] { border-left-color: #6fcf7f; }
body.hunting #tab-live > .netnote[data-lv="4"]::before, body.hunting #tab-live > .netnote[data-lv="3"]::before { content: "✓"; background: #6fcf7f; }
body.hunting #tab-live > .netnote[data-lv="2"] { border-left-color: #f0c846; }
body.hunting #tab-live > .netnote[data-lv="2"]::before { background: #f0c846; }
body.hunting #tab-live > .netnote[data-lv="1"] { border-left-color: #ec6050; }
body.hunting #tab-live > .netnote[data-lv="1"]::before { background: #ec6050; color: #fff; }
@keyframes netIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.hunting #tab-live > .netnote { white-space: pre-line; font-size: 12.5px; }
body.hunting #tab-live > .netnote::first-line { font-size: 14.5px; font-weight: 900; color: #ffd98a; }
body.hunting #tab-live > .netnote[data-lv="4"]::first-line, body.hunting #tab-live > .netnote[data-lv="3"]::first-line { color: #9fe8a8; }
body.hunting #tab-live > .netnote[data-lv="1"]::first-line { color: #ff9a88; }

/* 戰報收合（2026-10-23 使用者：讓玩家選擇乾淨的畫面）：戰報右邊一條窄的收合鈕；收起後只剩左下角一個小「戰報 ›」標籤（記在這支手機） */
#tab-live .maplogw { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; align-items: stretch; max-width: calc(100% - 60px); }
/* 10-23 血魔框多疊進地圖 6.91% 寬，左邊龍尾最高到地圖底上方約 4.1% 寬 → 戰報往上墊同樣的量（margin 的 % 是照地圖寬算，任何寬度都對得準） */
body.hunting #tab-live .maplogw { margin-bottom: 4.1%; }
#tab-live .maplogw .maplog { position: static; max-width: none; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#tab-live .maplogw .maplog:empty + .mlx { border-radius: 6px; }
#tab-live .mlx { flex: none; width: 22px; padding: 0; border: 0; border-radius: 0 6px 6px 0; cursor: pointer; font: 900 15px/1 var(--f-body); color: #e9c98a;
  background: rgba(8, 6, 6, .38); box-shadow: inset 1px 0 0 rgba(233, 201, 138, .25); text-shadow: 0 1px 2px #000; }
#tab-live .maplogw.min .mlx { background: rgba(8, 6, 6, .6); }
#tab-live .maplogw.min .maplog { display: none; }
#tab-live .maplogw.min .mlx { width: auto; padding: 4px 9px; border-radius: 6px; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .35); }

/* 選單點開後，三條線換成「收起」符號 ‹（2026-10-23 使用者） */
#tab-live .mapwrap.mm-open .mmbtn i { display: none; }
#tab-live .mapwrap.mm-open .mmbtn::after { content: "‹"; font: 900 24px/1 var(--f-body); color: #ffd98a; text-shadow: 0 1px 2px #000; margin-top: -3px; }
/* 設定頁「畫面效能」收合（2026-10-23）：標題列可點，右邊 ▾ 展開後變 ▴ */
.vpdet > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.vpdet > summary::-webkit-details-marker { display: none; }
.vpdet > summary h2 { margin: 0; }
.vpdet > summary span { font-size: 12px; }
.vpdet > summary::after { content: "▾"; margin-left: auto; color: var(--gold2); font-size: 14px; }
.vpdet[open] > summary::after { content: "▴"; }

/*
 * ---- 重點確認框（2026-10-23 使用者選「乙」：切換手動、付錢打王）----
 * 最重要的數字（倍率／價錢）做成大橫幅；三條最重要的規則做成三格，要特別注意的那格金框（.hot）；其他縮成下面的小字。
 */
.sheet .card.pick { position: relative; padding: 18px 14px 14px; border: 1px solid #000; border-radius: 3px; background: linear-gradient(180deg, #1d1915, #0e0c0a);
  box-shadow: inset 0 0 0 1px #6e5a34, inset 0 0 0 2px #000, inset 0 0 0 3px rgba(201, 162, 77, .25), 0 -6px 30px rgba(0, 0, 0, .8); overflow: visible; }
.sheet .card.pick::before { left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 0; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffe7a8, #a87a2c); box-shadow: 0 0 0 2px #000; } /* 上緣中間一顆金菱形（跟登入卡同一套） */
.sheet .card.pick::after { display: none; }
.sheet .card.pick h2 { justify-content: center; margin: 0; font-size: 19px; letter-spacing: .06em; }
.sheet .card.pick h2::before { display: none; }
.pk-banner { margin: 12px -4px 12px; padding: 10px 10px 9px; text-align: center; border-radius: 3px; line-height: 1.2;
  background: radial-gradient(90% 140% at 50% 0%, #5a3e12, #1a1208 75%); box-shadow: inset 0 0 0 1px #c9a24d, inset 0 0 18px rgba(255, 190, 80, .2); }
.pk-banner small { display: block; font-size: 12.5px; color: #e9d6a8; letter-spacing: .14em; }
.pk-banner b { display: block; margin-top: 3px; font: 900 32px/1.1 var(--f-display); color: #ffd76a; letter-spacing: .04em; text-shadow: 0 0 12px rgba(255, 190, 80, .6), 0 2px 0 #000; }
.pk-banner em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: #cdbf9f; }
.pk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-tiles > div { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; text-align: center; border-radius: 3px;
  background: linear-gradient(180deg, rgba(50, 40, 28, .7), rgba(14, 11, 8, .7)); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .3); }
.pk-tiles b { font-size: 14px; line-height: 1.3; color: #fff1cc; }
.pk-tiles span { font-size: 11.5px; line-height: 1.35; color: #a89a80; }
.pk-tiles > div.hot { background: linear-gradient(180deg, rgba(110, 74, 20, .6), rgba(30, 20, 8, .7)); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .8), 0 0 10px rgba(255, 190, 80, .25); }
.pk-tiles > div.hot b { color: #ffd76a; }
.pk-ic { display: block; width: 42px; height: 42px; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #000); }
.pk-ic.sw { background-image: url("../../hunt/assets/ui/lv_ic_live.webp"); }
.pk-ic.boss { background-image: url("../../hunt/assets/ui/sk_boss.png"); }
.pk-ic.hg { background-image: url("../../hunt/assets/ui/lv_st_hourglass.webp"); }
.pk-ic.coin { background-image: url("../../hunt/assets/ui/lv_sic_adena.webp"); }
.pk-notes { margin: 12px 2px 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.5; color: #cdbf9f; }
.pk-notes li { position: relative; padding-left: 14px; }
.pk-notes li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; transform: rotate(45deg); background: #c9a24d; }
.pk-notes b { color: #fff1cc; }
.sheet .card.pick .err { margin: 10px 0 0; text-align: center; }
.sheet .card.pick .acts { grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; }
.sheet .card.pick .acts .btn { height: 46px; letter-spacing: .2em; }

/*
 * ==== 手機橫拿（2026-10-24 使用者選「戊 天堂M 右手轉盤」）====
 * body.land＝手機橫向而且在戰況分頁（hunt.js landSync）。地圖滿版；左上頭像＋血魔；上面中間王公告；右上分頁圖示＋金幣時數；
 * 左邊戰報；左下一行聊天（點開才有輸入框）；右下「自動」大鈕，內圈三格藥水、外圈絕招／瞬移／打王；最底下經驗條。
 * 按鈕都是原本那幾顆（同一個元素換位置），轉回直式或切到別的分頁就恢復。左右留瀏海的安全距離。
 */
.lpf, .lexp { display: none; }
body.hunting.land { --sl: max(12px, var(--sal, env(safe-area-inset-left, 0px))); --sr: max(12px, var(--sar, env(safe-area-inset-right, 0px))); overflow: hidden; overscroll-behavior: none; }
/* 地圖滿版 */
body.hunting.land #tab-live .mapwrap { position: fixed; inset: 0; z-index: 0; margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; }
body.hunting.land #tab-live #map { display: block; width: 100vw !important; height: 100vh !important; height: 100dvh !important; aspect-ratio: auto !important; }
/* 頂部：只留王公告＋訊號，變成上面中間一顆膠囊 */
body.hunting.land header.top { position: fixed; z-index: 25; top: 6px; left: 50%; transform: translateX(-50%); width: auto; max-width: 46vw; height: 26px; aspect-ratio: auto; margin: 0;
  padding: 0 10px 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 13px; background: rgba(10, 8, 7, .72); box-shadow: inset 0 0 0 1px #6e5a34, 0 2px 6px rgba(0, 0, 0, .5); }
body.hunting.land header.top .brand, body.hunting.land header.top .top-r { display: none; }
body.hunting.land header.top .lvnotice { position: static; left: auto; right: auto; top: auto; height: auto; min-width: 0; padding: 0; font-size: 11.5px; }
body.hunting.land header.top button.lvnotice > b { margin-left: 8px; padding: 0 9px; border-radius: 9px; font-size: 10.5px; line-height: 17px; }
body.hunting.land header.top .netsig.inhead { position: static; flex: none; width: 20px; height: 12px; }
/* 左上：頭像＋等級＋名字＋模式 */
body.hunting.land .lpf { display: block; position: fixed; z-index: 21; left: var(--sl); top: 8px; width: 58px; height: 58px; cursor: pointer; }
body.hunting.land .lpf canvas { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a3026, #120e0b 75%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #9c7a3c, 0 0 0 5px #000, 0 3px 8px #000; image-rendering: pixelated; }
body.hunting.land .lpf b { position: absolute; left: -5px; bottom: -4px; min-width: 24px; height: 18px; padding: 0 4px; border-radius: 9px; text-align: center;
  font: 900 11px/18px var(--f-body); color: #2a1606; background: linear-gradient(#ffe3a0, #b5852f); box-shadow: 0 0 0 1px #000; }
body.hunting.land .lpf .lnm { position: absolute; left: 68px; top: 1px; font: 700 12px/16px var(--f-body); color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
body.hunting.land .lpf .lmd { position: absolute; left: 68px; top: 51px; font: 700 10.5px/14px var(--f-body); color: #9fe39f; text-shadow: 0 1px 2px #000; white-space: nowrap; }
body.hunting.land .lpf .lmd.man { color: #ffd76a; } body.hunting.land .lpf .lmd.dead { color: #ff8a7a; }
/* 血魔：名字下面兩條 */
body.hunting.land #tab-live .hpmp { position: fixed; z-index: 21; left: calc(var(--sl) + 68px); top: 27px; width: 190px; height: auto; aspect-ratio: auto; margin: 0 !important; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 3px; background: none; box-shadow: none; visibility: visible; }
body.hunting.land #tab-live .hpmp::before, body.hunting.land #tab-live .hpmp::after { display: none; }
body.hunting.land #tab-live .hpmp .bar { position: relative; left: auto; top: auto; width: auto; height: 13px; visibility: visible; border-radius: 0; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(156, 122, 60, .85); }
body.hunting.land #tab-live .hpmp .bar .val { left: 0 !important; right: 0 !important; text-align: center; font-size: 9.5px; }
body.hunting.land #tab-live .hpmp .bar .pct { display: none; }
/* 右上：分頁圖示一排（戰況那顆不用），下面金幣、剩餘時數 */
body.hunting.land .tabs { top: 6px; right: var(--sr); left: auto; bottom: auto; z-index: 22; width: auto; padding: 0; background: none; box-shadow: none; border: 0; }
body.hunting.land .tabs nav { display: flex; gap: 6px; max-width: none; margin: 0; padding: 0; }
body.hunting.land .tabs button { display: flex; flex-direction: column; align-items: center; width: 34px; height: 34px; aspect-ratio: auto; padding: 0; overflow: visible; border-radius: 6px;
  background: rgba(12, 10, 8, .72); box-shadow: inset 0 0 0 1px #6e5a34, 0 2px 4px #000; font: 700 9.5px/1 var(--f-body); color: #e9dcc0; }
body.hunting.land .tabs button i { flex: none; width: 34px; height: 34px; margin-bottom: 2px; background-position: center !important; background-size: auto 66% !important; }
body.hunting.land .tabs [data-tab="live"] { display: none; }
body.hunting.land #tab-live .hstats { position: fixed; z-index: 21; top: 56px; right: var(--sr); display: flex; gap: 12px; height: auto; padding: 0; }
body.hunting.land #tab-live .hstats .gp { min-height: 0; height: 18px; padding: 0 0 0 19px; border: 0; border-image: none; background: none; box-shadow: none; }
body.hunting.land #tab-live .hstats .gp::before { left: 0; height: 16px; }
body.hunting.land #tab-live .hstats .gp:nth-child(1), body.hunting.land #tab-live .hstats .gp:nth-child(n+4) { display: none; }
body.hunting.land .hstats .gp .num { font-size: 11.5px; }
/* 左邊戰報（天堂M 任務欄的位置） */
body.hunting.land #tab-live .maplogw { left: var(--sl); top: 86px; bottom: auto; margin: 0; max-width: 230px; }
body.hunting.land #tab-live .maplogw .maplog { background: linear-gradient(90deg, rgba(8, 6, 5, .78), rgba(8, 6, 5, .4)); border-left: 2px solid #9c7a3c; border-radius: 0; }
/* 操作面板拆開：各元件自己定位 */
body.hunting.land .card.hud { position: static; margin: 0; padding: 0; background: none; box-shadow: none; }
body.hunting.land #tab-live .hudtop, body.hunting.land #tab-live .hudbot { display: contents; }
body.hunting.land #tab-live.chatup .hudtop::before { display: none; }
/* 左下：一行聊天（點開展開＋輸入框） */
body.hunting.land #tab-live .gchat, body.hunting.land #tab-live .gchat.up { position: fixed; z-index: 20; left: var(--sl); right: auto; top: auto; bottom: 14px; width: 300px; height: 26px; min-height: 0; margin: 0;
  padding: 4px 12px; border: 0; border-image: none; border-radius: 13px; background: rgba(0, 0, 0, .58); overflow: hidden; font-size: 11.5px; line-height: 18px; cursor: pointer; }
body.hunting.land #tab-live .gchat .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hunting.land:not(.lchat) #tab-live .gchat .ln:not(:last-child) { display: none; } /* 收起時只露最新一行 */
body.hunting.land.lchat #tab-live .gchat, body.hunting.land.lchat #tab-live .gchat.up { bottom: 54px; height: 150px; border-radius: 4px; overflow-y: auto; cursor: auto; background: rgba(6, 5, 4, .86);
  box-shadow: inset 0 0 0 1px #6e5a34; }
body.hunting.land.lchat #tab-live .gchat .ln { white-space: normal; }
body.hunting.land #tab-live .chatsz { position: fixed; z-index: 21; left: calc(var(--sl) + 306px); top: auto; right: auto; bottom: 14px; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%;
  background: rgba(10, 8, 7, .8); box-shadow: inset 0 0 0 1px #6e5a34; font: 700 16px/26px var(--f-body); text-align: center; color: #e9c98a; }
body.hunting.land.lchat #tab-live .chatsz { bottom: 168px; }
body.hunting.land .chatbar { display: none; }
body.hunting.land.lchat .chatbar { position: fixed; z-index: 21; left: var(--sl); right: auto; top: auto; bottom: 14px; width: 300px; height: 34px; display: flex; gap: 6px; }
body.hunting.land.lchat .chatbar .chsel { position: relative; left: auto; top: auto; width: 58px; height: 100%; }
body.hunting.land.lchat .chatbar .chbtn { border-radius: 4px; background: rgba(10, 8, 7, .86); box-shadow: inset 0 0 0 1px #6e5a34; font-size: 12px; }
body.hunting.land.lchat .chatbar .chmenu { bottom: 100%; top: auto; }
body.hunting.land.lchat .chatbar #chatIn { position: static; flex: 1; width: auto; height: 100%; padding: 0 8px; border-radius: 4px; background: rgba(6, 5, 4, .9); box-shadow: inset 0 0 0 1px #6e5a34; font-size: 13px; }
body.hunting.land.lchat .chatbar .sendbtn, body.hunting.land.lchat #tab-live .chatbar .sendbtn { position: static; top: auto; width: 40px; height: 100%; /* 要寫 #tab-live 才壓得過直式的 160% 高（2026-10-24 使用者：送出鈕比輸入框長、沒切齊） */ border-radius: 4px; color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); }
body.hunting.land.lchat .chatbar .sendbtn svg { display: block; margin: auto; }
/* 右下：「自動」大鈕（就是原本的手動／自動切換鈕） */
body.hunting.land #tab-live .mmrow { display: contents; }
body.hunting.land #tab-live #bMM, body.hunting.land #tab-live #bAr, body.hunting.land #tab-live .mmtag { display: none !important; }
body.hunting.land #tab-live .mmitems { display: contents !important; }
body.hunting.land #tab-live #modeBar { position: fixed; z-index: 23; left: auto; top: auto; right: calc(var(--sr) + 14px); bottom: 14px; width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
body.hunting.land #tab-live #bMode { width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 30%, #6a4a1a, #2a1a08 60%, #120a04); box-shadow: 0 0 0 2px #000, 0 0 0 5px #b5852f, 0 0 0 6px #000, 0 0 18px rgba(255, 190, 80, .45), 0 4px 10px #000; opacity: 1; }
body.hunting.land #tab-live #bMode::before { content: "自動"; font: 900 20px/1 var(--f-display); color: #ffd76a; text-shadow: 0 0 8px rgba(255, 190, 80, .7), 0 2px 0 #000; }
body.hunting.land #tab-live #modeBar.on #bMode::before { content: "手動"; }
body.hunting.land #tab-live #bMode > b { display: none; }
body.hunting.land #tab-live #bMode > em { position: static; transform: none; margin: 0; font-size: 10px; color: #e9d6a8; }
/* 變身、收工：聊天右邊兩顆小圓鈕 */
body.hunting.land #tab-live #bPoly, body.hunting.land #tab-live #bMapSw { position: fixed; z-index: 21; bottom: 10px; width: 40px; height: 40px; }
body.hunting.land #tab-live #bPoly { left: calc(var(--sl) + 344px); }
body.hunting.land #tab-live #bMapSw { left: calc(var(--sl) + 392px); }
body.hunting.land #tab-live #bPoly > em { position: static; transform: none; margin: 0; }
body.hunting.land #tab-live #bMapSw > em { display: none; }
body.hunting.land #tab-live #bVil, body.hunting.land #tab-live #bChan { position: fixed; z-index: 21; bottom: 10px; width: 40px; height: 40px; }
body.hunting.land #tab-live #bVil { left: calc(var(--sl) + 440px); }
body.hunting.land #tab-live #bChan { left: calc(var(--sl) + 344px); }
body.hunting.land #tab-live :is(#bVil, #bChan) > em { display: none; }
/* 2026-11-09 使用者：展開聊天時右下角回村／掛機地圖／變身等按鈕不要跟著藏（拿掉）：body.hunting.land.lchat #tab-live :is(#bVil, #bChan) { displ… */
/* 村裡的「前往」「公田」、測試角色的「傳送」（2026-10-26 橫式漏排）：前往接在離開右邊（掛機的回村鈕在村裡不顯示，空出來），公田、傳送排在上面一排 */
body.hunting.land #tab-live :is(#bGoPoi, #bFarm, #bGmTp, #bVilHunt) { position: fixed; z-index: 21; width: 40px; height: 40px; }
body.hunting.land #tab-live #bVilHunt { left: calc(var(--sl) + 440px); bottom: 62px; } /* 掛機 出發：公田、傳送那排的右邊 */
body.hunting.land #tab-live #bGoPoi { left: calc(var(--sl) + 440px); bottom: 10px; }
body.hunting.land #tab-live #bFarm { left: calc(var(--sl) + 344px); bottom: 62px; }
body.hunting.land #tab-live #bGmTp { left: calc(var(--sl) + 392px); bottom: 62px; }
body.hunting.land #tab-live :is(#bGoPoi, #bFarm, #bGmTp, #bVilHunt) > em { display: none; }
/* 2026-11-09 使用者：展開聊天時右下角回村／掛機地圖／變身等按鈕不要跟著藏（拿掉）：body.hunting.land.lchat #tab-live :is(#bGoPoi, #bFarm, #bGmT… */
/* 快捷格：繞著「自動」鈕兩圈——內圈三格藥水（最常按，離拇指最近）、外圈絕招／瞬移／打王 */
body.hunting.land .card.hud .fkeys { position: fixed; z-index: 22; left: auto; top: auto; right: var(--sr); bottom: 0; width: 250px; height: 250px; display: block; margin: 0; padding: 0; pointer-events: none; background: none; }
body.hunting.land .card.hud .fkeys .fk { position: absolute; width: 46px; height: 46px; aspect-ratio: auto; pointer-events: auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a322a, #12100d 70%); box-shadow: 0 0 0 1px #000, 0 0 0 3px #6e5a34, 0 3px 6px #000; }
body.hunting.land .card.hud .fkeys .fk img { width: 64%; }
body.hunting.land .card.hud .fkeys .fk .t { bottom: -3px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(1) { right: 135px; bottom: 35px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(2) { right: 106px; bottom: 106px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(3) { right: 35px; bottom: 135px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(4) { right: 195px; bottom: 63px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(5) { right: 150px; bottom: 150px; }
body.hunting.land .card.hud .fkeys .fk:nth-child(6) { right: 63px; bottom: 195px; }
body.hunting.land .fdock { display: none !important; }
/* 最底下經驗條 */
/* 經驗條（2026-10-24 使用者：整條不要，上面頭像旁有 EXP 百分比就好）：外框留著只為了放那行字（.lexp b 是 fixed 定位） */
body.hunting.land .lexp { display: block; }
body.hunting.land .lexp i { display: none; }
body.hunting.land .lexp b { position: fixed; right: calc(var(--sr) + 254px); bottom: 8px; font: 700 10px var(--f-body); color: #ffd76a; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* 網路說明卡、提示放上面中間 */
body.hunting.land #tab-live .netnote { position: fixed; z-index: 30; top: 38px; left: 50%; transform: translateX(-50%); width: min(380px, 60vw); }

/* ---- 戰況橫向（續，2026-10-24 使用者 iPhone 16 Pro 實測後）---- */
/* 頂部膠囊不用 transform 置中（transform 會讓裡面的「官網」鈕沒辦法固定在畫面上） */
/* 10-24 使用者 iPhone 16 Pro：膠囊左邊壓到血魔條、右邊壓到「官網」→ 只在兩者中間的空間置中（血魔條右緣 sl+258、右上六顆圖示 sr+234，各留 12），字太長用「…」 */
body.hunting.land header.top { left: calc(var(--sl) + 270px); right: calc(var(--sr) + 246px); transform: none; width: fit-content; max-width: calc(100vw - var(--sl) - var(--sr) - 516px); margin-inline: auto; min-width: 0; overflow: hidden; }
body.hunting.land header.top button.lvnotice { flex: 0 1 auto; min-width: 0; overflow: hidden; }
body.hunting.land header.top button.lvnotice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.hunting.land header.top .top-r { display: contents; }
body.hunting.land header.top .sndbtn { display: none; }
/* 右上分頁圖示最左邊多一顆「官網」（點了會先確認，見 pwa.js） */
body.hunting.land header.top a.home { position: fixed; z-index: 22; top: 6px; right: calc(var(--sr) + 200px); left: auto; width: 34px; height: 34px; padding: 0; margin: 0; overflow: visible;
  border-radius: 6px; font-size: 0; color: transparent; display: block;
  background: url("../../hunt/assets/ui/lv_ic_home.webp") center / auto 64% no-repeat, rgba(12, 10, 8, .72); box-shadow: inset 0 0 0 1px #6e5a34, 0 2px 4px #000; }
body.hunting.land header.top a.home::after { content: "官網"; position: absolute; left: 50%; top: 100%; margin-top: 2px; transform: translateX(-50%); font: 700 9.5px/1 var(--f-body); color: #e9dcc0; text-shadow: 0 1px 2px #000; white-space: nowrap; }
/* 經驗百分比：放到左上模式那一行的右邊（原本在下面會壓到收工鈕） */
body.hunting.land .lexp b { position: fixed; top: 59px; left: calc(var(--sl) + 68px); right: auto; bottom: auto; width: 190px; text-align: right; font-size: 10.5px; line-height: 14px; }
/* 聊天展開時，送出鈕旁邊的變身、收工先收起來（不然擠在一起） */
/* 2026-11-09 使用者：展開聊天時右下角回村／掛機地圖／變身等按鈕不要跟著藏（拿掉）：body.hunting.land.lchat #tab-live #bPoly, body.hunting.land.… */
/* 展開鈕：往上的箭頭（展開＝往上加高看更多），展開後變往下（收起） */
body.hunting.land #tab-live .chatsz { font-size: 0; }
body.hunting.land #tab-live .chatsz::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -2px 0 0 -4px;
  border: solid #e9c98a; border-width: 2px 0 0 2px; transform: rotate(45deg); }
body.hunting.land.lchat #tab-live .chatsz::before { margin-top: -7px; transform: rotate(225deg); }

/* ---- 加到手機桌面：下面的提示條＋教學框（pwa.js）---- */
.pwa-bar { position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #2a221a, #120e0b); box-shadow: inset 0 0 0 1px #9c7a3c, 0 6px 20px rgba(0, 0, 0, .7); animation: pwaIn .3s ease-out; }
@keyframes pwaIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pwa-bar img { flex: none; width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px #000; }
.pwa-bar .pw-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.pwa-bar .pw-t b { font: 900 14px var(--f-body); color: #ffd76a; }
.pwa-bar .pw-t small { font-size: 12px; color: #cdbf9f; }
.pwa-bar .pw-go { flex: none; padding: 7px 12px; border-radius: 6px; font: 900 13px var(--f-body); color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); box-shadow: 0 1px 3px #000; }
.pwa-bar .pw-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); color: #a89a80; font: 400 20px/30px var(--f-body); cursor: pointer; }
body.hunting .pwa-bar { display: none; }  /* 掛機畫面不擋（登入、選角、選地圖才出現） */
.pw-sheet { z-index: 60; }
.pw-sheet .card.pick { text-align: left; max-width: 400px; }
.pw-sheet .pw-p { margin: 10px 0 0; line-height: 1.65; color: #e9dcc0; font-size: 14px; }
.pw-sheet .pw-p b { color: #ffd76a; }
.pw-sheet .pw-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: pw; display: grid; gap: 9px; }
.pw-sheet .pw-steps li { counter-increment: pw; position: relative; padding: 8px 10px 8px 40px; border-radius: 6px; font-size: 14px; line-height: 1.55; color: #efe4c6;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .3); }
.pw-sheet .pw-steps li::before { content: counter(pw); position: absolute; left: 9px; top: 8px; width: 22px; height: 22px; border-radius: 50%; text-align: center;
  font: 900 13px/22px var(--f-body); color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); }
.pw-sheet .pw-steps b { color: #ffd76a; }
.pw-sheet .pw-steps small { display: block; margin-top: 2px; font-size: 12px; color: #a89a80; }
.pw-sheet .pw-ic { width: 18px; height: 18px; vertical-align: -3px; margin: 0 2px; color: #8fc4ff; }
.pw-sheet .pw-note { margin: 12px 0 0; padding: 8px 10px; border-left: 2px solid #9c7a3c; background: rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.6; color: #cdbf9f; }
.pw-sheet .pw-note b { color: #fff1cc; }
.pw-sheet .pw-copy { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: #9fe39f; }
.sheet .card.pick .acts.one { grid-template-columns: 1fr; }
.sheet .card.pick .acts a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* 登入頁「第一步：安裝到手機桌面」（pwa.js renderStep）＋開頭的歡迎框（showOnboard） */
.instep { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 9px 10px; border-radius: 6px; text-align: left;
  background: linear-gradient(180deg, rgba(110, 74, 20, .45), rgba(30, 20, 8, .55)); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .7), 0 0 10px rgba(255, 190, 80, .2); }
.instep .no { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--f-display); color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); box-shadow: 0 1px 3px #000; }
.instep .t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.instep .t b { font-size: 14px; color: #ffd76a; }
.instep .t small { font-size: 11.5px; color: #cdbf9f; }
.instep .btn { flex: none; min-height: 0; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 900; }
.instep.ok { background: rgba(20, 60, 30, .45); box-shadow: inset 0 0 0 1px rgba(120, 220, 140, .55); }
.instep.ok .no { color: #0d3316; background: linear-gradient(#b8f0c0, #4fae62); }
.instep.ok .t b { color: #9fe39f; }
.pw-sheet .onb { text-align: center; }
.pw-sheet .onb img { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 14px; box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0, 0, 0, .6); }
.pw-sheet .onb h2 { justify-content: center; margin: 0; font-size: 19px; }
.pw-sheet .onb .onb-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; }
.pw-sheet .onb .onb-list li { position: relative; padding: 7px 10px 7px 30px; border-radius: 6px; font-size: 13.5px; color: #efe4c6; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .3); }
.pw-sheet .onb .onb-list li::before { content: "✓"; position: absolute; left: 10px; top: 7px; font-weight: 900; color: #ffd76a; }
.pw-sheet .onb .onb-list b { color: #ffd76a; }
.pw-sheet .onb ~ .acts .btn { letter-spacing: .04em; white-space: nowrap; }
/* App 登入交接完成頁 */
.card.pick.handoff-done { max-width: 440px; margin: 24px auto; text-align: center; }
/* 交接完成頁（瀏覽器那一頁）：頂部那張圖上畫著喇叭和回首頁，看起來能按、其實不能按，整條拿掉；卡片放在畫面中間偏上 */
body.handoff-only header.top { display: none; }
/* 登入成功（只剩一句話）：整個畫面正中間、大勾勾＋大字，隆重就好 */
body.handoff-only .app > .handoff-done { position: fixed; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: min(400px, calc(100vw - 32px)); }
body.handoff-only .card.pick.hd-ok { padding: 30px 22px 28px; }
.hd-ok .hd-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; color: #2a1a06;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e8b94a 55%, #8a5a14); box-shadow: 0 0 0 2px #5a3e12, 0 0 0 4px #c9a24d, 0 0 26px rgba(255, 200, 90, .55); }
body.handoff-only .card.pick.hd-ok h2::before { display: none; }
.hd-ok .hd-mark svg { width: 38px; height: 38px; }
body.handoff-only .card.pick.hd-ok h2 { justify-content: center; text-align: center; margin: 0; font-size: 28px; letter-spacing: .14em; color: #ffd76a; text-shadow: 0 0 14px rgba(255, 190, 80, .5), 0 2px 0 #000; }
body.handoff-only .card.pick.hd-ok p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: #efe4c6; }
.card.pick.handoff-done .acts.one { display: grid; grid-template-columns: 1fr; margin-top: 14px; }
.card.pick.handoff-done p { margin: 10px 0 0; line-height: 1.7; }
.card.pick.handoff-done p b { color: #ffd76a; }
.card.pick.handoff-done .hd-steps { margin: 12px auto 4px; padding: 0; list-style: none; counter-reset: hd; display: grid; gap: 8px; max-width: 320px; text-align: left; }
.card.pick.handoff-done .hd-steps li { counter-increment: hd; position: relative; padding: 9px 10px 9px 42px; border-radius: 6px; font-size: 15px; line-height: 1.5; color: #efe4c6;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .35); }
.card.pick.handoff-done .hd-steps li::before { content: counter(hd); position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; text-align: center;
  font: 900 14px/24px var(--f-body); color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); }
.card.pick.handoff-done .hd-steps b { color: #ffd76a; }
body:has(.handoff-done) .pwa-bar { display: none; } /* 已經從 App 來登入了，不用再叫他加到桌面 */

/* ---- 桌面 App（加到手機桌面打開）：狀態列是透明的蓋在網頁上，頂部讓出它的高度 ---- */
html.pwa body { padding-top: env(safe-area-inset-top, 0px); }
html.pwa body.hunting.land { padding-top: 0; }

/*
 * ==== 手機橫拿：戰況以外的所有畫面（2026-10-24 使用者選甲「照天堂M 的方向全部做」；直式完全不變）====
 * 條件：橫的、而且高度 500 以下（手機橫拿）。平板、電腦不受影響。
 * 共用：上面標題列（‹ 標題、小分頁、金幣、時數、✕）、右邊直排分頁（使用者 10-24：要放右邊）、一屏放得下、主要按鈕右下。
 */
.lhdr, .lcat, .lhelp, .mdet, .mtabs .msub { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) { /* 2026-11-09：加 min-width 540：手機直拿打字時鍵盤把畫面壓矮，原本會被當成橫拿、版面跑掉（綁定頁說明擠成直排） */
  body { --sl: max(12px, var(--sal, env(safe-area-inset-left, 0px))); --sr: max(12px, var(--sar, env(safe-area-inset-right, 0px))); --rail: calc(74px + var(--sar, env(safe-area-inset-right, 0px))); }
  /* 確認框：畫面矮，改成置中、寬一點扁一點，按鈕不會被切掉 */
  .sheet { align-items: center; }
  .sheet .card { max-width: 600px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin-bottom: 0; }
  .sheet .card.pick { padding: 12px 14px; }
  .pk-banner { margin: 8px 0; padding: 6px 10px; }
  .pk-banner b { font-size: 24px; }
  .pk-tiles > div { display: grid; grid-template-columns: 34px auto; column-gap: 8px; row-gap: 0; justify-content: center; align-items: center; padding: 7px 6px; text-align: left; }
  .pk-ic { grid-row: span 2; width: 34px; height: 34px; }
  .pk-notes { margin-top: 8px; }
  .sheet .card.pick .acts { margin-top: 10px; }
  .sheet .card.pick .acts .btn { height: 40px; }
  .pw-sheet .card.pick { max-width: 560px; }
  /* 王清單（點王公告「查看」）：一隻一格，兩三隻並排；太多隻就在格子裡捲 */
  .bossgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; max-height: 150px; overflow-y: auto; }
  .bossgrid .bg { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-items: center; padding: 7px 8px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(70, 30, 22, .7), rgba(16, 10, 8, .75)); box-shadow: inset 0 0 0 1px rgba(255, 120, 100, .35); }
  .bossgrid .pk-ic { grid-row: span 3; width: 48px; height: 48px; }
  .bossgrid b { font-size: 14px; color: #ff9a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bossgrid .hpbar { height: 6px; }
  .bossgrid .num { font: 600 11.5px Consolas, monospace; color: #cdbf9f; }
  .bossgrid .bg.hurt { box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .7), 0 0 8px rgba(255, 150, 80, .25); }
  .bossgrid .bg.hurt .num { color: #ffd76a; }
  .pw-sheet .pw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-ann { max-height: 60vh; overflow-y: auto; background: none; border: 0; box-shadow: none; padding: 0; }
  /* 加到桌面的提示條：橫式只在登入頁出現，放左下（右邊是登入鈕） */
  .pwa-bar { left: var(--sl); bottom: 58px; transform: none; width: 300px; animation: none; }
  body:not(.title-page) .pwa-bar { display: none; }

  /* ===== 天堂M 共用零件 ===== */
  .lm-bar, body.lpanel .lhdr, #hunt:has(> .select) > .card.hd, #hunt:has(> .mgrid) > .card.hd {
    position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 44px; margin: 0; border: 0; border-radius: 0; display: flex; align-items: center; gap: 10px;
    padding: 0 var(--sr) 0 var(--sl); background: linear-gradient(180deg, #2b231b, #120e0b);
    box-shadow: inset 0 -1px 0 #000, inset 0 -2px 0 rgba(201, 162, 77, .55), 0 3px 10px rgba(0, 0, 0, .6); }

  /* ===== 掛機中的其他分頁（body.lpanel，hunt.js landSync）===== */
  body.lpanel { overflow: hidden; background: linear-gradient(180deg, rgba(8, 6, 5, .82), rgba(8, 6, 5, .94)), url("../../hunt/assets/ui/cs_throne.webp") center / cover fixed, #0b0908; }
  body.lpanel header.top { display: none; }
  body.lpanel .app { max-width: none; }
  body.lpanel #saveFab, body.lpanel .fdock { display: none !important; }
  .lhdr .lb, .lhdr .lx { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
  .lhdr .lb { position: relative; font-size: 0; color: #ffd76a; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #6e5a34; }
  .lhdr .lx { font: 400 22px/1 var(--f-body); color: #e9dcc0; background: radial-gradient(circle at 50% 35%, #4a1c14, #1a0806); box-shadow: inset 0 0 0 1px #9c5a3c, 0 1px 3px #000; }
  .lhdr h1 { margin: 0; flex: none; font: 900 18px/1 var(--f-display); color: #ffd76a; letter-spacing: .12em; text-shadow: 0 2px 0 #000; }
  .lhdr h1::before { display: none; }
  .lhdr .lsub { display: flex; gap: 4px; margin-left: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .lhdr .lsub button, .lcat button { flex: none; padding: 6px 13px; border: 0; border-radius: 14px; background: none; cursor: pointer; font: 700 12.5px/1 var(--f-body); color: #9d907a; }
  .lhdr .lsub button[aria-pressed="true"] { color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); box-shadow: 0 1px 3px #000; }
  .lhdr .sp { flex: 1; }
  .lhdr .lcur { flex: none; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 4px; border-radius: 13px; background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .35); font: 700 12.5px var(--f-body); color: #f3e6c4; white-space: nowrap; }
  .lhdr .lcur img { width: 18px; height: 18px; }
  /* 右邊直排分頁（#tabs 換樣式；「戰況」放最下面寫「回戰況」） */
  body.lpanel .tabs { position: fixed; z-index: 29; top: 44px; bottom: 0; right: 0; left: auto; width: var(--rail); padding: 8px calc(6px + var(--sar, env(safe-area-inset-right, 0px))) 8px 6px; border: 0;
    background: linear-gradient(270deg, #15110d, #0c0a08); box-shadow: inset 1px 0 0 #000, inset 2px 0 0 rgba(201, 162, 77, .25); animation: none; }
  body.lpanel .tabs nav { display: flex; flex-direction: column; gap: 3px; height: 100%; max-width: none; margin: 0; padding: 0; }
  body.lpanel .tabs button { position: relative; flex: 1; max-height: 58px; min-height: 0; width: auto; height: auto; aspect-ratio: auto; padding: 0; border: 0; border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: none; font: 700 11px/1.1 var(--f-body); color: #9d907a; text-shadow: none; }
  body.lpanel .tabs button i { flex: none; width: 34px; height: 26px; background-position: center !important; background-size: contain !important; opacity: .55; }
  body.lpanel .tabs button[aria-selected="true"] { color: #ffd76a; background: linear-gradient(270deg, rgba(201, 140, 40, .35), rgba(201, 140, 40, .08));
    box-shadow: inset -2px 0 0 #ffd76a, inset 0 0 0 1px rgba(255, 215, 106, .35); }
  body.lpanel .tabs button[aria-selected="true"] i { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 90, .6)); }
  body.lpanel .tabs [data-tab="live"] { order: 9; margin-top: auto; flex: none; height: 50px; font-size: 0; }
  body.lpanel .tabs [data-tab="live"]::after { content: "回戰況"; font: 700 11px/1.1 var(--f-body); }
  body.lpanel .tabs [data-tab="live"] i { opacity: .85; }
  /* 內容區：標題列下面、右邊分頁的左邊，自己捲 */
  body.lpanel #hunt > section:not([hidden]) { position: fixed; z-index: 1; top: 44px; bottom: 0; left: 0; right: var(--rail); margin: 0; padding: 10px 12px 12px var(--sl);
    overflow-y: auto; overscroll-behavior: contain; }
  body.lpanel #hunt .card.hd { display: none; }
  body.lpanel #hunt section .card { margin: 0; border: 0; border-radius: 4px; background: linear-gradient(180deg, rgba(34, 27, 21, .92), rgba(14, 11, 9, .92));
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75), 0 4px 12px rgba(0, 0, 0, .5); }
  body.lpanel #hunt section .card::before, body.lpanel #hunt section .card::after { display: none; }
  body.lpanel #hunt section h2 { font-size: 14px; }

  /* 角色：左邊紙娃娃（人物在中間、裝備圍兩側），右邊等級血魔能力＋按鈕 */
  body.lpanel #tab-char:not([hidden]) { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px 10px; align-content: start; }
  body.lpanel #charBox, body.lpanel #charBox > .card { display: contents; }
  body.lpanel #charBox .doll { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); padding: 10px 10px; border-radius: 4px;
    background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(120, 80, 30, .35), transparent 70%), linear-gradient(180deg, rgba(34, 27, 21, .92), rgba(14, 11, 9, .92));
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75); }
  body.lpanel #charBox .doll .me canvas { width: 100px; }
  body.lpanel #charBox .charinfo { grid-column: 2; grid-row: 1; margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .25); }
  body.lpanel #charBox .dollmore { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
  body.lpanel #charBox .dollhint, body.lpanel #charBox > .card > p, body.lpanel #charBox > p { grid-column: 2; margin: 0; }
  body.lpanel #tab-char .charcmds { grid-column: 2; grid-row: 4; margin: 0; }
  body.lpanel #tab-char .charcmds .btn { height: 42px; font-size: 14px; letter-spacing: .1em; }

  /* 帳本（2026-10-30 乙）：本趟＝左邊收穫｜消耗＋淨賺、右邊撿到的道具；最近幾趟紀錄＝整塊 */
  body.lpanel #ledBox { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  body.lpanel #ledBox .lg-cur { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  body.lpanel #ledBox .lg-curh { display: none; } /* 面板上方已經有「帳本」標題 */
  body.lpanel #ledBox .lg-cur .lg-two { grid-column: 1; margin: 0; }
  body.lpanel #ledBox .lg-cur .lg-inv { grid-column: 2; }
  body.lpanel #ledBox .lg-cur .lg-none { grid-column: 1 / -1; }
  body.lpanel #ledBox .lg-hist { grid-column: 1 / -1; }
  body.lpanel #tab-led[data-ls="0"] .lg-hist { display: none; }
  body.lpanel #tab-led[data-ls="1"] .lg-cur { display: none; }
  body.lpanel #tab-led[data-ls="1"] .lg-hist { grid-row: 1; }

  /* 掉落：左邊選地圖（地圖圖片當底）、右邊表格；上面切 共用／怪物／王 */
  body.lpanel #dropBox { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: start; }
  body.lpanel #dropBox .dropmaps { grid-column: 1; grid-row: 1 / span 30; padding: 0; background: none !important; box-shadow: none !important;
    position: sticky; top: 0; align-self: start; } /* 右邊清單往下捲，左邊地圖選單留在原位（2026-10-26 使用者） */
  body.lpanel #dropBox .dropmaps p { margin: 8px 2px 0; font-size: 11.5px; }
  body.lpanel #dropBox .mtabs { grid-template-columns: 1fr; gap: 6px; }
  body.lpanel #dropBox .mtabs .btn { height: 58px; padding: 0 12px; justify-content: flex-start; text-align: left; border-radius: 4px; font: 900 13.5px var(--f-display); color: #e9dcc0; opacity: .75;
    background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .2)), var(--mimg) center / cover; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .6); }
  body.lpanel #dropBox .mtabs .btn { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
  body.lpanel #dropBox .mtabs .msub { display: block; font: 500 11px var(--f-body); color: #b9ab8c; }
  body.lpanel #dropBox .mtabs .btn.on { opacity: 1; color: #ffd76a; box-shadow: inset 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 200, 90, .35); }
  body.lpanel #dropBox > details { grid-column: 2; margin: 0; }
  body.lpanel #dropBox > details > summary { pointer-events: none; }
  body.lpanel #tab-drop[data-ls="0"] #dropBox > details:not(.dp-shared),
  body.lpanel #tab-drop[data-ls="1"] #dropBox > details:not(.dp-mobs),
  body.lpanel #tab-drop[data-ls="2"] #dropBox > details:not(.dp-boss) { display: none; }
  body.lpanel #tab-drop #dropBox::after { grid-column: 2; grid-row: 1; padding: 20px; text-align: center; color: #9d907a; }
  body.lpanel #tab-drop[data-ls="0"] #dropBox:not(:has(.dp-shared)):has(.dropmaps)::after { content: "這張地圖沒有整張地圖的掉落"; }
  body.lpanel #tab-drop[data-ls="1"] #dropBox:not(:has(.dp-mobs)):has(.dropmaps)::after { content: "這張地圖沒有一般怪"; }
  body.lpanel #tab-drop[data-ls="2"] #dropBox:not(:has(.dp-boss)):has(.dropmaps)::after { content: "這張地圖沒有王"; }

  /* 擂台：左邊大畫面一直看得到，右邊依小分頁換：賽況（場次＋高手榜）／我的注單／冠軍榜 */
  body.lpanel #tab-arena:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 10px; overflow: hidden; }
  body.lpanel #tab-arena .arenaview { margin: 0; min-height: 0; border: 0; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(110, 90, 52, .75); }
  body.lpanel #tab-arena .arenaview canvas { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  body.lpanel #arenaBox { min-height: 0; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
  body.lpanel #arenaBox > * { margin: 0; }
  body.lpanel #tab-arena[data-ls="0"] #arenaBox > :is(.arecent, .apodium, .ar-bets) { display: none; }
  body.lpanel #tab-arena[data-ls="1"] #arenaBox > :not(.arenahead, .ar-bets) { display: none; }
  body.lpanel #tab-arena[data-ls="2"] #arenaBox > :not(.arecent, .apodium) { display: none; }
  body.lpanel #tab-arena[data-ls="2"] #arenaBox:not(:has(.arecent, .apodium))::after { content: "還沒有冠軍紀錄"; padding: 20px; text-align: center; color: #9d907a; }

  /* 設定：左邊分類、右邊只顯示那一類；儲存鈕固定右下 */
  body.lpanel #tab-set:not([hidden]) { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: start; }
  body.lpanel #lCat { display: grid; gap: 5px; position: sticky; top: 0; }
  body.lpanel .lcat button { padding: 11px 12px; border-radius: 4px; text-align: left; font-size: 13px; color: #cdbf9f; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .22); }
  body.lpanel .lcat button[aria-pressed="true"] { color: #2a1606; background: linear-gradient(#ffe3a0, #c99437); box-shadow: 0 1px 4px #000; }
  body.lpanel #setBox { min-width: 0; }
  body.lpanel #setBox > .card { margin: 0; }
  body.lpanel #tab-set[data-ls="0"] #setBox > .card:not(.st-pot),
  body.lpanel #tab-set[data-ls="1"] #setBox > .card:not(.st-xp),
  body.lpanel #tab-set[data-ls="2"] #setBox > .card:not(.st-fight),
  body.lpanel #tab-set[data-ls="3"] #setBox > .card:not(.st-vp),
  body.lpanel #tab-set[data-ls="4"] #setBox > .card:not(.st-snd) { display: none; }
  body.lpanel #setBox .st-vp > summary { pointer-events: none; }
  body.lpanel #setBox #saveSet { position: fixed; z-index: 5; left: var(--sl); bottom: 12px; width: 130px; height: 46px; margin: 0; font-size: 15px; letter-spacing: .12em; } /* 左邊分類下面（空著的地方），不蓋到內容 */

  /* ===== 登入頁：背景大圖＋左上 logo＋右邊標語、五個特色、大顆 LINE 鈕；說明收成左下兩顆按鈕 ===== */
  body.title-page { padding: 0; }
  body.title-page::before { background: linear-gradient(90deg, rgba(6, 5, 4, .15), rgba(6, 5, 4, .1) 40%, rgba(6, 5, 4, .88) 72%), url("../../hunt/assets/ui/login_hall.webp") 30% 40% / cover no-repeat; }
  body.title-page .app { display: block; max-width: none; }
  body.title-page header.top { position: fixed; z-index: 20; left: var(--sl); top: 12px; width: 300px; max-width: 300px; margin: 0; }
  body.title-page .app > .ann { display: none; }
  body.title-page:not(.need-bind) .cl-center { position: fixed; z-index: 10; right: var(--sr); top: 0; bottom: 0; width: 360px; min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  body.title-page:not(.need-bind) .lf { filter: none; }
  body.title-page:not(.need-bind) .lf::before { display: none; }
  body.title-page:not(.need-bind) .lf .lf-body { padding: 0; background: none; }
  body.title-page:not(.need-bind) .cl-title { font-size: 30px; }
  body.title-page:not(.need-bind) .cl-feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0 2px; }
  body.title-page:not(.need-bind) .cl-feats li { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; text-align: center; background: none; font-size: 10.5px; line-height: 1.25; }
  body.title-page:not(.need-bind) .cl-feats img { width: 50px; height: 50px; margin: 0; }
  body.title-page:not(.need-bind) .cl-feats .l { display: none; } body.title-page:not(.need-bind) .cl-feats .s { display: inline; }
  body.title-page:not(.need-bind) .lf .lf-body > .cl-note { margin-top: 8px; }
  body.title-page:not(.need-bind) .instep { margin-top: 8px; padding: 6px 8px; }
  body.title-page:not(.need-bind) .instep .t small { display: none; }
  .pw-sheet .onb img { width: 44px; height: 44px; margin-bottom: 4px; }
  .pw-sheet .onb .onb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-sheet .onb .onb-list li { padding: 7px 8px 7px 24px; font-size: 12.5px; }
  .pw-sheet .onb .onb-list li::before { left: 8px; }
  body.title-page:not(.need-bind) .lf .lf-foot { aspect-ratio: auto; background: none; padding-top: 10px; }
  body.title-page:not(.need-bind) .lf .lf-foot .gbtn { position: static; width: 100%; height: 50px; border-radius: 25px;
    box-shadow: inset 0 1px 0 rgba(200, 255, 200, .35), 0 0 0 2px #000, 0 0 0 4px #b5852f, 0 4px 14px #000; }
  body.title-page:not(.need-bind) .lf .lf-foot .cl-note { position: static; margin-top: 8px; }
  body.title-page .lhelp { display: flex; position: fixed; z-index: 20; left: var(--sl); bottom: 14px; gap: 8px; }
  body.title-page .lhelp .btn { height: 34px; padding: 0 14px; font-size: 13px; }
  /* 綁定頁：一塊面板，左邊說明三步驟、右邊填綁定碼和按鈕 */
  body.need-bind .lhelp { display: none; }
  body.need-bind .cl-center { position: fixed; z-index: 10; left: 0; right: 0; top: 60px; bottom: 10px; min-height: 0; padding: 0 var(--sr) 0 var(--sl); display: flex; align-items: center; justify-content: center; }
  body.need-bind .lf { width: min(720px, 100%); max-height: 100%; overflow-y: auto; filter: none; display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 22px; align-items: start; padding: 16px 18px;
    border-radius: 4px; background: linear-gradient(180deg, rgba(34, 27, 21, .94), rgba(14, 11, 9, .94)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75), 0 6px 20px rgba(0, 0, 0, .6); }
  body.need-bind .lf::before { display: none; }
  body.need-bind .lf .lf-body { display: contents; }
  body.need-bind .lf .cl-title, body.need-bind .lf .cl-sub, body.need-bind .lf .cl-steps { grid-column: 1; text-align: left; }
  body.need-bind .lf .cl-title { font-size: 24px; }
  body.need-bind .lf .cl-form { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  body.need-bind .lf .lf-foot { grid-column: 2; grid-row: 4; aspect-ratio: auto; background: none; }
  body.need-bind .lf .lf-foot .gbtn { position: static; width: 100%; height: 46px; border-radius: 23px; }
  body.need-bind .lf .lf-foot .cl-note { position: static; margin-top: 8px; }
  /* 官網註冊（2026-11-09）：選入口那頁左邊兩種方式、右邊按鈕置中；說明、錯誤放左欄 */
  body.reg-page .lf .reg-pick, body.reg-page .lf .lf-body > .err, body.reg-page .lf .lf-body > .cl-note { grid-column: 1; }
  body.reg-page .lf:not(#regCard) .lf-foot { grid-row: 1 / span 3; align-self: center; }
  body.reg-page .reg-form input { height: 30px; font-size: 16px; }
  body.reg-page .reg-form label { margin: 2px 0 2px; font-size: 13px; }
  body.reg-page .reg-hint { margin: 1px 0 0; font-size: 11px; }
  body.reg-page .lf { padding-block: 10px; }
  body.title-page .app > .handoff-done { position: fixed; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: min(520px, 90vw); }

  /* ===== 選角色、選地圖：上面標題列＋右上聲音、官網兩顆圓鈕 ===== */
  body:has(#hunt > .select, #hunt > .mgrid) { padding-top: 44px; padding-bottom: 0; }
  #hunt:has(> .select) > .card.hd, #hunt:has(> .mgrid) > .card.hd { padding-left: calc(var(--sl) + 4px); }
  #hunt:has(> .select) > .card.hd::before, #hunt:has(> .mgrid) > .card.hd::before, #hunt:has(> .select) > .card.hd::after, #hunt:has(> .mgrid) > .card.hd::after { display: none; }
  #hunt:has(> .select) > .card.hd h2, #hunt:has(> .mgrid) > .card.hd h2 { display: block; margin: 0; font: 900 18px/1 var(--f-display); color: #ffd76a; letter-spacing: .12em; text-shadow: 0 2px 0 #000; }
  #hunt:has(> .select) > .card.hd h2::before, #hunt:has(> .mgrid) > .card.hd h2::before, #hunt:has(> .select) > .card.hd h2::after, #hunt:has(> .mgrid) > .card.hd h2::after { display: none; }
  #hunt:has(> .select) > .card.hd small, #hunt:has(> .mgrid) > .card.hd small { margin: 0; font-size: 12px; color: #9d907a; }
  body:has(#hunt > .select, #hunt > .mgrid) header.top { position: fixed; z-index: 31; top: 7px; right: var(--sr); left: auto; width: auto; max-width: none; height: 30px; aspect-ratio: auto; margin: 0; padding: 0;
    display: flex; gap: 6px; background: none; box-shadow: none; }
  body:has(#hunt > .select, #hunt > .mgrid) header.top .brand { display: none; }
  body:has(#hunt > .select, #hunt > .mgrid) header.top .top-r { position: static; display: flex; gap: 6px; }
  body:has(#hunt > .select, #hunt > .mgrid) header.top .top-r > * { position: static; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; font-size: 0; display: block;
    box-shadow: inset 0 0 0 1px #6e5a34; }
  body:has(#hunt > .select, #hunt > .mgrid) header.top a.home { background: url("../../hunt/assets/ui/lv_ic_home.webp") center / 64% auto no-repeat, rgba(30, 24, 18, .9); }
  body:has(#hunt > .select, #hunt > .mgrid) header.top .sndbtn { background: url("../../hunt/assets/ui/lv_ic_snd.webp") center / 64% auto no-repeat, rgba(30, 24, 18, .9); }
  body:has(#hunt > .select, #hunt > .mgrid) header.top .sndbtn.muted { opacity: .45; }
  body:has(#hunt > .select, #hunt > .mgrid) .app { max-width: none; gap: 0; }
  /* 選角色：左邊四拱門、右邊角色資訊面板，按鈕在右下。
     拱門用橫式專用圖 cs_top_land.webp（941×577，2026-10-24 使用者給的）：上面跟 cs_top 一模一樣，下面沒有直式面板的上緣和金角、地台收成一條 */
  #hunt:has(> .select) { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 12px; padding: 8px var(--sr) 10px var(--sl); }
  #hunt > .select { grid-column: 1; grid-row: 1; margin: 0; align-self: start; }
  #hunt > .select .slotwrap { aspect-ratio: 941 / 577; background-image: url("../../hunt/assets/ui/cs_top_land.webp?v=1"); background-size: 100% auto; background-position: center top; }
  #hunt > .select .slots { height: 85.27%; }        /* 492／577 */
  #hunt > .select .seldial button { top: 91.85%; }  /* 530／577（①② 圓心跟 cs_top 同一點） */
  /*
   * 橫式選角 大廳版（2026-10-30 使用者給的整張圖 cs_hall_land.webp 742×343，試看感覺；原圖 網站/選角大廳原圖/）：
   * 從「選擇角色」標題列下面開始鋪、寬度拉滿（高度照比例，最底下的紅地毯多出來的切掉，不變形），拱門區照圖上座標放：四拱門 x30～406、y40～222，①② 圓心 (202,230)、(233,230)。
   * 右邊大廳在角色資訊面板後面（面板稍微透一點）。要換回原本的：把這段刪掉。
   */
  body:has(#hunt > .select)::before { background: url("../../hunt/assets/ui/cs_hall_land.webp?v=2") center 44px / 100% auto no-repeat, #0b0908; } /* 上面 44px 是「選擇角色」標題列（使用者要保留置頂） */
  #hunt > .select { position: fixed; z-index: 1; left: 0; top: 44px; width: 100vw; height: auto; aspect-ratio: 742 / 343; margin: 0; pointer-events: none; } /* 跟背景圖同一塊（標題列下面、寬度拉滿），圖上座標直接用 % */
  #hunt > .select .slotwrap { position: absolute; left: 4.04%; top: 11.66%; width: 50.67%; height: 51.31%; aspect-ratio: auto; margin: 0; background: none; pointer-events: auto; }
  #hunt > .select .slots { height: 100%; }
  #hunt > .select .slot { padding: 3% 0 26px; } /* 等級那行拿掉、名字往上移（2026-10-30 使用者，兩次） */
  #hunt > .select .slot > span { display: none; }
  #hunt > .select .seldial { overflow: visible; }
  #hunt > .select .seldial button { top: 107.95%; width: 6.6%; }  /* (230-40)/176 */
  #hunt > .select .seldial button[data-pg="0"] { left: 45.74%; }
  #hunt > .select .seldial button[data-pg="1"] { left: 53.99%; }
  #hunt > .select .seldial button[data-nav="-1"] { left: 37.77%; } /* 大廳圖的左右箭頭 x172、263 */
  #hunt > .select .seldial button[data-nav="1"] { left: 61.97%; }
  /* 切換測試帳號、登出 LINE：放上面標題列中間（2026-10-30 使用者），做成跟右上角同一種小鈕、字縮短 */
  #hunt:has(> .select) > .testas, #hunt:has(> .select) > form .linkish { position: fixed; z-index: 32; top: 7px; height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 15px;
    background: rgba(30, 24, 18, .9); box-shadow: inset 0 0 0 1px #6e5a34; font-size: 0; white-space: nowrap; cursor: pointer; }
  #hunt:has(> .select) > .testas { left: auto; right: calc(var(--sr) + 168px); transform: none; } /* 10-30 使用者：放中間怪，改靠右（首頁、聲音鈕的左邊） */
  #hunt:has(> .select) > form { margin: 0; }
  #hunt:has(> .select) > form .linkish { left: auto; right: calc(var(--sr) + 76px); width: 84px; padding: 0; }
  #hunt:has(> .select) > .testas::after, #hunt:has(> .select) > form .linkish::after { font: 700 12px/30px var(--f-body); letter-spacing: .04em; }
  #hunt:has(> .select) > .testas::after { content: "測試帳號"; color: #9fe0ff; }
  #hunt:has(> .select) > .testas.on::after { content: "測試中・切回"; color: #ffd98a; }
  #hunt:has(> .select) > form .linkish::after { content: "登出 LINE"; color: #c9b88f; }
  #hunt:has(> .select) > .testas:active, #hunt:has(> .select) > form .linkish:active { background: rgba(110, 90, 52, .5); }
  #hunt:has(> .select) > .selinfo { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 12px 14px; height: calc(100vh - 62px); height: calc(100dvh - 62px); box-sizing: border-box; overflow-y: auto; border: 0; border-radius: 4px;
    display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(34, 27, 21, .94), rgba(14, 11, 9, .94));
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75), 0 4px 14px rgba(0, 0, 0, .6); }
  #hunt:has(> .select) > .selinfo::before { display: none; }
  /* 右邊角色資訊面板改成直式那種古銅面板（2026-10-30 使用者）：cs_panel_land.webp（941×454）＝直式 cs_top 下緣＋cs_body，①② 換成一般金邊、框外透明；
     九宮格：上 80（金邊＋上框角）、左右 60、下 134（下框角＋獅頭），顯示時縮成約 0.36 倍（0.42 內容會放不下） */
  #hunt:has(> .select) > .selinfo { position: relative; z-index: 2; padding: 0 4px; border-radius: 0; box-shadow: none; background: none;
    border-style: solid; border-width: 29px 22px 48px; border-image: url("../../hunt/assets/ui/cs_panel_land.webp?v=2") 80 60 134 60 fill / 29px 22px 48px stretch; }
  /*
   * 右邊面板（2026-10-30 使用者：要等比例縮放、不要大空格、不要擠成一排）：面板高度＝內容高度（最高到畫面底），獅頭緊貼按鈕下面；
   * 放不下時 hunt.js selFit 算比例設 --k，內容整組等比例縮小（排法不變）。捲軸藏起來。
   */
  #hunt:has(> .select) > .selinfo { height: auto; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); align-self: start; gap: 8px; scrollbar-width: none; }
  #hunt:has(> .select) > .selinfo::-webkit-scrollbar { display: none; }
  #hunt:has(> .select) > .selinfo > * { zoom: var(--k, 1); flex-shrink: 0; } /* 不准被 flex 擠扁（按鈕會被壓成一條），放不下由 selFit 等比例縮 */
  #hunt:has(> .select) > .selinfo .passgrid { margin-top: 0; }
  #hunt:has(> .select) > .selinfo .entergame { margin-top: 6px; }
  /* 很扁的螢幕（selFit 加 .cmp）：「進入遊戲」改成右上角的方塊鈕，跨名字＋標籤兩行，下面整排給時數格 */
  #hunt:has(> .select) > .selinfo.cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
  #hunt:has(> .select) > .selinfo.cmp > * { grid-column: 1 / -1; }
  #hunt:has(> .select) > .selinfo.cmp > .nm { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; }
  #hunt:has(> .select) > .selinfo.cmp > .chips2 { grid-column: 1; grid-row: 2; flex-wrap: nowrap; overflow: hidden; }
  #hunt:has(> .select) > .selinfo.cmp > .chips2 > * { flex: none; white-space: nowrap; }
  #hunt:has(> .select) > .selinfo.cmp > .entergame { grid-column: 2; grid-row: 1 / span 2; width: 62px; height: auto; min-width: 0; margin: 0; padding: 6px 0 6px .2em;
    font-size: 16px; line-height: 1.3; letter-spacing: .2em; white-space: normal; word-break: break-all; text-align: center; } /* 字排兩行「進入／遊戲」，按鈕窄、左邊名字標籤才放得下 */
  #hunt:has(> .select) > .selinfo .selacts { margin-top: auto; }
  #hunt:has(> .select) > .selinfo .selacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  #hunt:has(> .select) > .selinfo .selacts .btn { height: 44px; padding: 0 6px; white-space: nowrap; letter-spacing: .06em; } /* 10-24：「角色資料」被擠成兩行 */
  /* 選角色按「角色資料」跳出的視窗：橫式改兩欄（左邊紙娃娃、右邊等級血魔能力），跟掛機中的角色頁同一種排法 */
  .sheet .card:has(> .charinfo) { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 12px; align-content: start; max-width: min(820px, calc(100vw - 24px)); width: 100%; }
  .sheet .card:has(> .charinfo) > * { grid-column: 2; margin-top: 0; }
  .sheet .card:has(> .charinfo) > h2 { margin: 0 0 2px; }
  .sheet .card:has(> .charinfo) > p { margin: 0 0 6px; font-size: 12px; }
  .sheet .card:has(> .charinfo) > .charinfo { margin-bottom: 8px; }
  .sheet .card:has(> .charinfo) > .doll { grid-column: 1; grid-row: 1 / span 8; align-self: start; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); padding: 8px; border-radius: 4px;
    background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(120, 80, 30, .3), transparent 70%), rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .25); }
  .sheet .card:has(> .charinfo) > .doll .me canvas { width: 96px; }
  .sheet .card:has(> .charinfo) > .dollmore { margin: 0 0 6px; padding-top: 0; border-top: 0; }
  .sheet .card:has(> .charinfo) > .acts { margin-top: 4px; grid-template-columns: 1fr; }
  #hunt:has(> .select) > form { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
  /* 選地圖：左邊地圖清單、右邊全景圖＋出發確認（點地圖不跳視窗，hunt.js pickMap） */
  #hunt:has(> .mgrid) { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; padding: 10px var(--sr) 10px var(--sl); height: calc(100vh - 44px); height: calc(100dvh - 44px); box-sizing: border-box; }
  #hunt > .mgrid { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 6px; }
  #hunt > .mgrid .mt { aspect-ratio: auto; height: 62px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .6); }
  #hunt > .mgrid .mt .img { filter: brightness(.6); }
  #hunt > .mgrid .mt .cap { top: 0; padding: 8px 12px; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .1)); }
  #hunt > .mgrid .mt .badge { top: auto; bottom: 7px; left: auto; right: 8px; }
  #hunt > .mgrid .mt.on { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 200, 90, .35); }
  #hunt > .mgrid .mt.on .cap b { color: #ffd76a; }
  #hunt:has(> .mgrid) > .mhint, #hunt:has(> .mgrid) > .err { grid-column: 1; grid-row: 2; margin: 6px 2px 0; font-size: 12px; }
  #hunt:has(> .mgrid) > .cmds { position: fixed; z-index: 32; top: 7px; left: var(--sl); margin: 0; }
  #hunt:has(> .mgrid) > .cmds #mBack { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #6e5a34; }
  /* 返回箭頭用線條畫（2026-10-24 使用者：字型的 ‹ 在圓圈裡偏左下）：轉 45 度後尖端在左、開口在右，框往右挪 3px 箭頭才在正中間 */
  #hunt:has(> .mgrid) > .cmds #mBack { position: relative; }
  #hunt:has(> .mgrid) > .cmds #mBack::before, .lhdr .lb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -1px;
    border: solid #ffd76a; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); }
  #hunt:has(> .mgrid) > .card.hd { padding-left: calc(var(--sl) + 42px); }
  #hunt > .mdet { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; border-radius: 4px; overflow: hidden;
    background: linear-gradient(180deg, rgba(34, 27, 21, .94), rgba(14, 11, 9, .94)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75), 0 4px 14px rgba(0, 0, 0, .6); }
  #hunt > .mdet .mdhint { grid-column: 1 / -1; align-self: center; text-align: center; }
  #hunt > .mdet .big { height: auto; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0b0a0a; }
  #hunt > .mdet .big::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 70%, rgba(14, 11, 9, .95)); }
  #hunt > .mdet .big h2 { display: none; }
  #hunt > .mdet .bd { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; overflow-y: auto; }
  #hunt > .mdet .mdnm { margin: 0 0 4px; font: 900 18px var(--f-display); color: #ffd76a; text-shadow: 0 2px 0 #000; }
  #hunt > .mdet [data-x] { display: none; }
  #hunt > .mdet .acts { position: sticky; bottom: -12px; z-index: 1; display: grid; grid-template-columns: 1fr; margin: auto -14px -12px; padding: 8px 14px 12px; background: linear-gradient(180deg, rgba(14, 11, 9, 0), rgba(14, 11, 9, .96) 30%); } /* 內容再長，「開始掛機」都固定在右下看得到 */
  #hunt > .mdet .note { font-size: 12px; line-height: 1.5; }
  #hunt > .mdet .acts:not(:has(#mGo, #mBackHunt)) { display: none; }
  #hunt > .mdet #mGo { height: 44px; font-size: 15px; letter-spacing: .2em; }
}

/* ---- 網頁村莊點人資料框（2026-10-25 使用者選乙「名片」）：上方門派色條、名字下面名號、標籤、主武器一塊 ---- */
.sheet .card.whocard { padding: 0; overflow: hidden; }
.sheet .card.whocard > .acts { padding: 0 16px 14px; margin-top: 12px; }
.whoc .band { height: 5px; background: linear-gradient(90deg, #4a3f33, #6b5a46, #4a3f33); }
.whoc.f1 .band { background: linear-gradient(90deg, #4f8fc4, #9fd2ff, #4f8fc4); }
.whoc.f2 .band { background: linear-gradient(90deg, #3f9a7e, #93e6cc, #3f9a7e); }
.whoc.f3 .band { background: linear-gradient(90deg, #8a5cc0, #d3a8ff, #8a5cc0); }
.whoc .top { display: flex; gap: 12px; align-items: center; padding: 14px 16px 10px; }
.whoc { text-align: left; }
.whoc .who-r { flex: 1; min-width: 0; }
.whoc .nm { font: 900 20px var(--f-title, serif); color: #fff3d0; line-height: 1.2; overflow-wrap: anywhere; }
.whoc .tt { margin-top: 3px; font-size: 13.5px; }
.whoc .meta { margin-top: 2px; font-size: 12.5px; color: #a8987c; }
.wc-champ { color: #ffd84a; font-weight: 900; text-shadow: 0 0 8px rgba(255, 184, 0, .35); }
.wc-f1 { color: #9fd2ff; font-weight: 700; }
.wc-f2 { color: #93e6cc; font-weight: 700; }
.wc-f3 { color: #d3a8ff; font-weight: 700; }
.whoc .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.wchip, .wfac { font-size: 12.5px; padding: 3px 10px; border-radius: 12px; background: #1d1813; box-shadow: inset 0 0 0 1px #4a3c2c; color: #d8caa8; white-space: nowrap; }
.wchip.c { background: #3a2c0c; box-shadow: inset 0 0 0 1px #c9a032; color: #ffd84a; font-weight: 700; }
.wfac { font-weight: 700; }
.wfac.f1 { background: #16324a; color: #9fd2ff; box-shadow: inset 0 0 0 1px #4f8fc4; }
.wfac.f2 { background: #143a30; color: #93e6cc; box-shadow: inset 0 0 0 1px #3f9a7e; }
.wfac.f3 { background: #33204a; color: #d3a8ff; box-shadow: inset 0 0 0 1px #8a5cc0; }
.whoc .wwp { margin: 0 16px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 8px; background: linear-gradient(90deg, #2a2116, #17120e); box-shadow: inset 0 0 0 1px #6b5330; }
.whoc .wwp img, .whoc .wwp > i { width: 40px; height: 40px; flex: none; border-radius: 6px; background: #0d0b09; box-shadow: inset 0 0 0 1px #8a6a3c, 0 0 14px rgba(255, 216, 74, .2); image-rendering: pixelated; }
.whoc .wwp b { display: block; font-size: 15.5px; color: #f4e3b8; overflow-wrap: anywhere; }
.whoc .wwp b em { font-style: normal; color: #ffd84a; }
.whoc .wwp small { font-size: 12px; color: #a8987c; }
.whoc .wnote { margin: 10px 16px 0; }

/* 手機輸入框字至少 16px（2026-10-26 使用者）：iPhone 輸入框字小於 16px，點下去會自動放大畫面、打完也不會縮回來。
   只改觸控手機（電腦不變）；放最後面，蓋過聊天列依螢幕寬度算的字大小 */
@media (pointer: coarse) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea, select { font-size: 16px !important; }
}

/* 自己剛送出、伺服器還沒送回來的那句（先演給自己看，2026-10-26）：淡一點，正式的回來就換掉 */
.gchat .ln.pend { opacity: .6; }

/* 村裡點人的小選單（2026-10-26）：跳在那個人旁邊，不蓋暗畫面；點別的地方就收起來 */
.pmenu { position: fixed; z-index: 45; min-width: 92px; padding: 5px 6px 6px; border-radius: 6px; background: rgba(14, 11, 10, .94);
  box-shadow: 0 0 0 1px #6b5530, 0 4px 14px rgba(0, 0, 0, .6); animation: tlfade .12s ease-out; pointer-events: auto; }
.pmenu .pm-n { display: block; max-width: 140px; margin: 0 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #f3d98a; }
.pmenu .pm-b { display: flex; gap: 5px; }
.pmenu button { flex: 1; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 4px; border: 1px solid #5a4630; background: linear-gradient(#3a2e24, #241c17);
  color: #f0e7d6; font: 700 13px var(--f-body, sans-serif); cursor: pointer; touch-action: manipulation; }
.pmenu button:active { transform: translateY(1px); }
.pmenu button[hidden] { display: none; }

/* 公田小選單（2026-10-26）：跟點人同一種，多一行小字；作物選單按鈕直排 */
.pmenu .pm-s { display: block; max-width: 200px; margin: -2px 2px 5px; font-size: 11.5px; color: #cdbf9f; line-height: 1.35; }
.pmenu.fmenu { max-width: 290px; }
.pmenu.fmenu .pm-n { max-width: 270px; }
.pmenu.fmenu .pm-s { max-width: 270px; }
.pmenu.fmenu .pm-b { flex-wrap: wrap; }
.pmenu.fmenu button { flex: 1 0 auto; white-space: nowrap; } /* 按鈕字不折行（「幫我挑一塊」曾折成兩行），放不下整顆換行 */
.pmenu.fcrop .pm-b { flex-direction: column; }
.pmenu.fcrop button { min-width: 150px; text-align: left; }
.pmenu button.sure { background: linear-gradient(#e2bd62, #a8802f); color: #241805; border-color: #f0d590; }
/* 公田選單：查到的資訊閃一下金色、查過的按鈕變暗（2026-10-27） */
.pmenu .pm-s.flash { animation: pmflash 1.2s ease-out; border-radius: 4px; }
@keyframes pmflash { 0%, 30% { background: rgba(242, 207, 122, .35); color: #fff4c8; } 100% { background: transparent; } }
.pmenu button.done, .pmenu button:disabled { opacity: .5; cursor: default; }
/* 四龍傳送選單（2026-10-28 使用者選「乙・龍巢橫幅」）：一張龍巢一條，左字右龍、屬性色背景＋大字浮水印；字體照網站（標題宋體、其他黑體） */
.sheet .card.dgsheet { background: radial-gradient(ellipse at 50% 0%, #2a2117 0%, #0d0b08 72%); padding-inline: 14px; padding-block: 14px 16px; }
.dg-head { display: flex; align-items: center; justify-content: space-between; }
.sheet .card.dgsheet .dg-ttl { font-family: var(--f-display); font-weight: 900; font-size: 26px; color: #f2cf7a; letter-spacing: .18em; margin: 0; text-shadow: 0 2px 0 #3a2508, 0 0 14px rgba(242, 207, 122, .35); }
.dg-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #6b5530; background: #171310; color: #cdb88f; font-size: 16px; line-height: 1; cursor: pointer; }
.dg-cost { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid #6b5530; background: rgba(20, 15, 9, .8); font-size: 13px; color: #e8cf96; }
.dg-cost img { width: 15px; height: 15px; }
.dg-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dg-wind { --c1: #9fd8e8; --c2: #1d3640; --c3: #5fb7cf; }
.dg-earth { --c1: #c9c27a; --c2: #2e3218; --c3: #9aa64a; }
.dg-water { --c1: #a9c4ff; --c2: #182540; --c3: #5f86d8; }
.dg-fire { --c1: #ffad8a; --c2: #3e1410; --c3: #e0563a; }
.dg-row { position: relative; display: block; width: 100%; height: 104px; padding: 0; line-height: 1.3; border-radius: 12px; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c3) 50%, #000);
  background: linear-gradient(105deg, #0c0a08 0%, #0c0a08 38%, var(--c2) 62%, color-mix(in srgb, var(--c3) 55%, var(--c2)) 100%); }
.dg-row:active { filter: brightness(1.15); }
.dg-row img { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 50%; max-height: 135%; object-fit: contain; filter: drop-shadow(-6px 4px 12px rgba(0, 0, 0, .8)); pointer-events: none; }
.dg-wm { position: absolute; left: 92px; top: -16px; font-family: var(--f-display); font-weight: 900; font-size: 118px; line-height: 1; color: var(--c3); opacity: .1; pointer-events: none; }
.dg-txt { position: absolute; z-index: 2; left: 14px; top: 13px; width: 196px; }
.dg-el { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 4px; color: var(--c1); background: color-mix(in srgb, var(--c3) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c3) 60%, transparent); }
.dg-nm { display: block; font-family: var(--f-display); font-weight: 900; font-size: 19px; line-height: 1.25; color: #fff3d8; margin: 4px 0 7px; letter-spacing: .05em; }
.dg-bar { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.dg-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c3), var(--c1)); }
.dg-bar i.low { background: linear-gradient(90deg, #e0563a, #ffb07a); }
.dg-sub { display: flex; justify-content: space-between; font-size: 11.5px; color: #cdbfa6; margin-top: 5px; }
.dg-sub .on { color: #ffd9a0; }
.dg-sub .hot { color: #ffd9a0; font-weight: 700; }
.dg-row.dead img { filter: grayscale(1) brightness(.4); }
/* 村莊裡按「掛機」：選地圖蓋在村莊上面一層（2026-10-28），返回只收起這層；地圖詳細視窗（.sheet 30）要在它上面 */
.mapover { position: fixed; inset: 0; z-index: 28; overflow-y: auto; background: var(--lacquer); padding-inline: 14px; padding-block: calc(12px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)); }
.mapover > * { max-width: 560px; margin-inline: auto; }
.mapover .mdet { display: none; }
.mapover .cmds { margin-top: 10px; }
/* ================= 地圖雷達（2026-10-28 使用者選「乙・天堂M 戰術面板」；radar.js） ================= */
.radar { position: absolute; z-index: 6; outline: none; top: 8px; right: 8px; width: var(--rs, 108px); display: flex; flex-direction: column; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; opacity: var(--ra, .9); }
.radar .rwin { position: relative; display: block; width: var(--rs, 108px); height: var(--rs, 108px); overflow: hidden; border-radius: 2px; background-color: #0b0f14; box-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.radar .rwin::after { content: ""; position: absolute; inset: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; } /* 不要黃框角、圓角小（2026-10-28 使用者） */
.radar .rlay { position: absolute; left: 0; top: 0; transition: transform .25s linear; will-change: transform; }
.radar .rlay.jump { transition: none; }
.radar .rimg { position: absolute; left: 0; top: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.radar .rdots { position: absolute; left: 0; top: 0; pointer-events: none; }
.radar .rd { position: absolute; width: 7px; height: 7px; margin: -3.5px; transform: rotate(45deg); background: #f2e2b8; box-shadow: 0 0 0 1.5px #111; }
.radar .rd.t-dragon { background: #ff8a70; } .radar .rd.t-farmer { background: #9fe49f; } .radar .rd.t-myplot { background: #ffd76a; } .radar .rd.t-senior { background: #ffb44a; } /* 退休前輩小蝦米（2026-11-05） */
.radar .rme { position: absolute; left: calc(var(--rs, 108px) / 2); top: calc(var(--rs, 108px) / 2); width: 14px; height: 17px; transform: translate(-50%, -50%); transition: transform .2s linear; overflow: visible; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(255, 60, 40, .55)); }
.radar .rme path { fill: #ff2b1c; stroke: #4a0703; stroke-width: 1.6; stroke-linejoin: round; }
/* 收合：雷達左上角半透明小鈕；收起後右上角一顆半透明地圖小圖示 */
.radar .rfold { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(243, 213, 138, .55); background: rgba(8, 10, 12, .55); cursor: pointer; display: grid; place-items: center; }
.radar .rfold i { width: 8px; height: 2px; border-radius: 1px; background: #f3d58a; }
.rmapic { position: absolute; z-index: 6; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(243, 213, 138, .55); background: rgba(8, 10, 12, .5); box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .05); opacity: var(--ra, .9); }
.rmapic svg { width: 22px; height: 22px; fill: rgba(243, 213, 138, .18); stroke: #f3d58a; stroke-width: 1.6; stroke-linejoin: round; }
body.hunting.land .rmapic { display: none !important; }
/* 雷達收起來飛進地圖選單（2026-10-31）：雷達的框縮小飛過去，到了按鈕閃一下金光 */
.rfly { position: fixed; z-index: 60; display: grid; place-items: center; border-radius: 10px; pointer-events: none; transform-origin: 50% 50%;
  background: rgba(20, 16, 12, .72); box-shadow: 0 0 0 1px rgba(243, 213, 138, .7), 0 0 14px rgba(243, 213, 138, .45);
  transition: transform .55s cubic-bezier(.55, 0, .35, 1), opacity .55s ease-in; }
.rfly svg { width: 46%; height: 46%; fill: rgba(243, 213, 138, .18); stroke: #f3d58a; stroke-width: 1.4; stroke-linejoin: round; }
#tab-live .mmi.mmglow { animation: mmglow 1.2s ease-out; }
@keyframes mmglow { 0% { box-shadow: 0 0 0 0 rgba(255, 220, 130, .95), 0 0 18px 6px rgba(255, 210, 110, .8); } 100% { box-shadow: 0 0 0 10px rgba(255, 220, 130, 0), 0 0 0 0 rgba(255, 210, 110, 0); } }
#tab-live .mmi.radarbtn svg { fill: rgba(243, 213, 138, .14); }
body.hunting.land #tab-live #bRadar { display: none !important; } /* 橫式本來就沒有小雷達（右上地圖鈕直接開整張） */
.radar .rbar { display: none; }
.radar .rhint { display: block; width: 100%; margin-top: 3px; padding: 1px 0; border-radius: 2px; text-align: center; white-space: nowrap; font: 700 10.5px/1.5 var(--f-body); letter-spacing: .08em; color: #f3d58a; background: rgba(8, 10, 12, .62); box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .28); } /* 直式不要文字（2026-10-28 使用者），地圖名＋座標只在橫式那一行 */
.radar .rbar-x { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: max-content; min-width: 100%; margin-top: 4px; padding: 1px 6px; white-space: nowrap; border-radius: 4px; background: rgba(10, 10, 12, .82); border: 1px solid rgba(243, 213, 138, .4); font-size: 10px; line-height: 1.5; }
.radar .rbar b { font: 900 11px var(--f-display); color: #f3d58a; }
.radar .rbar span { color: #9fc7d6; font-variant-numeric: tabular-nums; }
.rchip { position: absolute; z-index: 6; top: 8px; right: 8px; padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(243, 213, 138, .5); background: rgba(10, 10, 12, .82); color: #f3d58a; font: 900 12px var(--f-display); cursor: pointer; }
/* 橫式（使用者選 D）：小雷達藏起來，換成一行指北針＋地圖名＋座標 */
.rmini { display: none; }
body.hunting.land .radar, body.hunting.land .rchip { display: none !important; }
body.hunting.land .rmini { position: fixed; z-index: 21; top: 84px; right: var(--sr, 10px); width: 36px; height: 36px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 6px; border: 1px solid rgba(243, 213, 138, .55); background: rgba(8, 10, 12, .5); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.rmini svg { width: 22px; height: 22px; fill: rgba(243, 213, 138, .18); stroke: #f3d58a; stroke-width: 1.6; stroke-linejoin: round; }
/* 整張地圖 */
.fmap { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; gap: 8px; background: #07090c; color: var(--ink); padding-inline: 12px; padding-block: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); }
.fm-top { display: flex; align-items: center; gap: 8px; }
.fm-top h2 { margin: 0; font: 900 20px var(--f-display); color: #f3d58a; letter-spacing: .14em; }
.fm-x { margin-left: auto; width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(243, 213, 138, .45); background: transparent; color: #e8cf96; font-size: 15px; cursor: pointer; }
.fm-set { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #0d1318; border: 1px solid #1e2830; font-size: 12px; color: #9fb4bf; white-space: nowrap; }
.fm-set b { font: 900 12.5px var(--f-display); color: #f3d58a; letter-spacing: .08em; }
.fm-sg { display: flex; border: 1px solid #2c3a44; border-radius: 5px; overflow: hidden; }
.fm-sg button { padding: 2px 9px; border: 0; background: none; color: #9fb4bf; font: inherit; cursor: pointer; }
.fm-sg button.on { background: linear-gradient(#f3d58a, #c9a24e); color: #1a1204; font-weight: 700; }
.fm-al { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.fm-al input { flex: 1; min-width: 40px; accent-color: #6fe3ff; }
.fm-al em { font-style: normal; width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.fm-on { position: relative; width: 34px; height: 18px; flex: none; cursor: pointer; }
.fm-on input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.fm-on i { position: absolute; inset: 0; border-radius: 9px; background: #2c3a44; transition: background .15s; }
.fm-on i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9fb4bf; transition: left .15s; }
.fm-on input:checked + i { background: linear-gradient(#f3d58a, #c9a24e); } .fm-on input:checked + i::after { left: 18px; background: #1a1204; }
.fm-map { position: relative; flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(243, 213, 138, .45); touch-action: none; cursor: grab; }
.fm-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fm-in img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.fm-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140, 200, 230, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 200, 230, .07) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.fm-pin { position: absolute; width: 0; height: 0; transform: scale(var(--inv, 1)); transform-origin: 0 0; }
.fm-pin .pw { position: absolute; left: -19px; bottom: 0; width: 38px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.fm-pin .fc, .fm-li .fc, .fm-pt { position: relative; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #34404a, #0d1318 75%); }
.fm-pin .fc { width: 38px; height: 38px; border: 2px solid #c9a24e; box-shadow: 0 2px 8px rgba(0, 0, 0, .7); box-sizing: border-box; }
.fc img, .fm-pt img { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); height: 112%; }
.fc span, .fm-pt span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 15px var(--f-display); color: #f3d58a; }
.fm-pin i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #c9a24e; margin-top: -1px; }
.fm-pin.sel .fc { border-color: #6fe3ff; box-shadow: 0 0 0 3px rgba(111, 227, 255, .3), 0 0 14px #6fe3ff; } .fm-pin.sel i { border-top-color: #6fe3ff; }
.fm-me { position: absolute; width: 0; height: 0; transform: scale(var(--inv, 1)); transform-origin: 0 0; pointer-events: none; }
.fm-me::before { content: ""; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #6fe3ff; box-shadow: 0 0 0 3px #06202a, 0 0 0 10px rgba(111, 227, 255, .22), 0 0 16px #6fe3ff; }
.fm-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.fm-zoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(243, 213, 138, .45); background: rgba(10, 12, 16, .85); color: #e8cf96; font-size: 18px; cursor: pointer; }
.fm-side { display: flex; flex-direction: column; gap: 8px; }
.fm-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fm-li { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid #1e2830; background: #0d1318; color: var(--ink); font: inherit; cursor: pointer; }
.fm-li .fc { width: 26px; height: 26px; border: 1.5px solid #c9a24e; box-sizing: border-box; }
.fm-li .fc span { font-size: 12px; }
.fm-li b { font: 900 13px var(--f-display); white-space: nowrap; }
.fm-li small { font-size: 11px; color: #8fb0be; white-space: nowrap; }
.fm-li.sel { border-color: #6fe3ff; background: #0f1a21; }
.fm-card { display: flex; gap: 12px; min-height: 118px; padding: 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(20, 26, 32, .96), rgba(8, 10, 13, .96)); border: 1px solid rgba(243, 213, 138, .45); }
.fm-card:empty { display: none; }
.fm-pt { width: 84px; flex: none; border-radius: 8px; }
.fm-pt img { height: 92%; bottom: 2px; }
.fm-pt span { font-size: 30px; }
.fm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fm-tx b { font: 900 18px var(--f-display); color: #fff3d8; }
.fm-tx small { font-size: 12px; color: #8fb0be; margin-top: 2px; }
.fm-tx em { font-style: normal; font-size: 12px; color: #c8b994; margin-top: 3px; }
.fm-bt { margin-top: auto; display: flex; gap: 8px; padding-top: 6px; }
.fm-bt button { flex: 1; height: 36px; border-radius: 6px; font: 700 14px var(--f-body); letter-spacing: .15em; cursor: pointer; }
.fm-bt .s { border: 1px solid #2c3a44; color: #9fb4bf; background: #0d1318; } .fm-bt .s:disabled { opacity: .4; cursor: default; }
.fm-bt .g { border: 0; color: #1a1204; background: linear-gradient(#f3d58a, #c9a24e); }
/* 練功地圖點到能傳送的圖釘（台灣的船、飛機，2026-11-01）：地圖下方浮一張小卡 */
.fm-pop { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(20, 26, 32, .96), rgba(8, 10, 13, .96)); border: 1px solid rgba(243, 213, 138, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .6); cursor: default; }
.fm-pop .fm-pt { width: 56px; height: 56px; }
.fm-pop .fm-tx b { font-size: 16px; }
.fm-pop .g { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 6px; font: 700 15px var(--f-body); letter-spacing: .15em; color: #1a1204; background: linear-gradient(#f3d58a, #c9a24e); cursor: pointer; }
/* 橫式：左邊地圖、右邊標題／設定／清單／卡片 */
body.land .fmap { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding-left: var(--sl, 12px); padding-right: var(--sr, 12px); }
body.land .fmap .fm-top { grid-column: 2; grid-row: 1; }
body.land .fmap .fm-set { display: none; } /* 橫式不顯示小雷達（只有一行座標），雷達設定只在直式 */
body.land .fmap:not(.npc) { display: flex; } /* 練功地圖、龍巢沒有 NPC 清單：地圖鋪滿 */
body.land .fmap .fm-map { grid-column: 1; grid-row: 1 / span 2; }
body.land .fmap .fm-side { grid-column: 2; grid-row: 2; min-height: 0; }
body.land .fmap .fm-list { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
body.land .fmap .fm-li { border-radius: 8px; padding: 5px 8px; }
body.land .fmap .fm-li b { flex: 1; text-align: left; }
body.land .fmap .fm-card { margin-top: auto; min-height: 0; }
body.land .fmap .fm-pt { width: 64px; }
/* 橫式右欄：清單在剩下的高度裡自己捲，卡片（走過去／傳送）一定整張看得到（2026-10-31 使用者：按鈕被吃掉） */
body.land .fmap .fm-side { display: flex; flex-direction: column; overflow: hidden; }
body.land .fmap .fm-list { flex: 1 1 0; min-height: 56px; }
body.land .fmap .fm-card { flex: none; margin-top: 0; padding: 8px; gap: 8px; }
body.land .fmap .fm-card em { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
body.land .fmap .fm-pt { width: 48px; }
body.land .fmap .fm-bt { padding-top: 4px; }
body.land .fmap .fm-bt button { height: 32px; }

/*
 * 地圖選單按鈕甲款（2026-10-28 使用者選甲「玻璃方鈕＋線條圖示」）：
 *   跟右上地圖圖示（.rmapic）同一套：38 點方鈕、8 點圓角、金框、半透明黑底、金色線條圖示；
 *   鈕下面一行小字（主要那個字 <b>；手動鈕顯示現在的模式 <em>）；開著的功能（手動、變身中）整顆變金色。
 *   圖示是 hunt.js 的 MI_DEFS（SVG symbol 定義一次、各鈕 <use> 引用），不多抓任何圖檔
 */
#tab-live .mmi { width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(243, 213, 138, .55); background: rgba(8, 10, 12, .55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); color: #f3d58a; text-shadow: none; }
#tab-live .mmi .mic { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); pointer-events: none; }
#tab-live .mmi > b { position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%); font: 700 10px/1.2 var(--f-body); letter-spacing: 0;
  color: #ece2cc; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
#tab-live .mmi > em { display: none; margin-top: 3px; line-height: 1.2; }
#tab-live #bMode > b { display: none; }
#tab-live #bMode > em { display: block; }
#tab-live .polybtn { display: grid; place-items: center; align-content: center; gap: 0; }
#tab-live .polybtn > b { display: block; }
#tab-live .mmi:is(.end, .gmtpbtn, .vilhunt, .vilout, .vilgo, .farmbtn, .gobtn) { color: #f3d58a; }
#tab-live .mmi.end { color: #f0a090; border-color: rgba(240, 160, 144, .5); } /* 收工會結算：圖示帶一點紅，免得誤按 */
/* 開著的功能：整顆金色 */
#tab-live .modebar.on .modebtn, #tab-live .polybtn.on { color: #1a1204; background: linear-gradient(#f3d58a, #c9a24e); border-color: #f7e2a8;
  box-shadow: 0 0 10px rgba(243, 213, 138, .5), 0 2px 6px rgba(0, 0, 0, .5); }
#tab-live .modebar.on .modebtn .mic, #tab-live .polybtn.on .mic { filter: none; }
#tab-live .modebar.on .modebtn > em, #tab-live .polybtn.on > b { color: #f3d58a; }
/* 選單鈕：跟地圖圖示一樣大；收著是三條線、打開變「‹」 */
#tab-live .mmbtn { width: 36px; height: 36px; display: grid; opacity: .85; }
#tab-live .mmbtn .mic-back, #tab-live .mapwrap.mm-open .mmbtn .mic-menu { display: none; }
#tab-live .mapwrap.mm-open .mmbtn .mic-back { display: block; }
#tab-live .mapwrap.mm-open .mmbtn { border-color: rgba(243, 213, 138, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
#tab-live .mapwrap.mm-open .mmbtn::after { content: none; }
#tab-live .mapwrap:has(.modebar.on) .mmbtn { color: #ffd76a; border-color: rgba(255, 215, 106, .85); } /* 收著時也看得出手動中 */
#tab-live .mmrow .mmtag { margin-top: 7px; }
/* 窄手機：鈕縮小一點，全部展開（含測試傳送）也不會鑽到右上小雷達底下 */
@media (max-width: 400px) {
  #tab-live .mmi, #tab-live .mmbtn { width: 36px; height: 36px; }
  #tab-live .mmitems { gap: 6px; }
}
@media (max-width: 360px) {
  #tab-live .mmi, #tab-live .mmbtn { width: 34px; height: 34px; }
  #tab-live .mmi .mic { width: 18px; height: 18px; }
  #tab-live .mmitems { gap: 4px; }
  #tab-live .mmrow { gap: 4px; }
}
/* 橫式：位置照舊，鈕裡只放圖示、不放字；右下「自動」大鈕維持原本圓形大鈕 */
body.hunting.land #tab-live .mmi > b, body.hunting.land #tab-live .mmi > em, body.hunting.land #tab-live .polybtn > b { display: none; }
body.hunting.land #tab-live #bMode { width: 88px; height: 88px; border-radius: 50%; border: 0; color: #ffd76a;
  background: radial-gradient(circle at 50% 30%, #6a4a1a, #2a1a08 60%, #120a04); box-shadow: 0 0 0 2px #000, 0 0 0 5px #b5852f, 0 0 0 6px #000, 0 0 18px rgba(255, 190, 80, .45), 0 4px 10px #000; }
body.hunting.land #tab-live #bMode .mic { display: none; }
body.hunting.land #tab-live #bMode > em { display: block; }
/*
 * 橫式功能鈕改乙款（2026-10-28 使用者從五款選乙「接在聊天列右邊的一條」）：
 *   變身、結算、回村（村裡是頻道、掛機、離開；測試角色多傳送）收進一條，跟左邊聊天列同一種半透明、同高、同圓角；
 *   每格「圖示＋字」，格子中間細線分隔；變身中那格金色底。右下「自動」大鈕不動（它是 position: fixed，不受這條影響）
 */
body.hunting.land #tab-live .mmitems { display: flex !important; position: fixed; z-index: 23; /* 「自動」鈕在這條裡面，要比快捷格(22)高 */ left: calc(var(--sl) + 340px); bottom: 13px; height: 28px; align-items: stretch;
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(243, 213, 138, .35); background: rgba(0, 0, 0, .58); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); gap: 0; }
body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt):not([hidden]) { position: static; display: flex; align-items: center; gap: 4px;
  width: auto; height: 100%; margin: 0 0 0 -1px; padding: 0 11px; border: 0; border-left: 1px solid rgba(243, 213, 138, .2); border-radius: 0; background: none; box-shadow: none; opacity: 1;
  color: #f3d58a; transform: none; }
body.hunting.land #tab-live .mmitems > .mmi .mic { width: 16px; height: 16px; }
body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt) > b { display: block; position: static; transform: none; margin: 0;
  font: 700 12px/1 var(--f-body); color: #ece2cc; text-shadow: 0 1px 2px #000; }
body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt) > em { display: none; }
body.hunting.land #tab-live .mmitems > .mmi#bPoly.on:not([hidden]) { background: linear-gradient(rgba(243, 213, 138, .32), rgba(243, 213, 138, .1)); color: #ffe08a; }
body.hunting.land #tab-live .mmitems > #bPoly.on > b { color: #ffe08a; }
body.hunting.land #tab-live .mmitems > .mmi#bMapSw:not([hidden]) { color: #f3d58a; } /* 原本「結算」（紅色怕誤按）換成「地圖」：一般金色（2026-10-29） */
body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt):not([hidden]):active { background: rgba(243, 213, 138, .16); }
body.hunting.land #tab-live #bPoly { order: 1; } body.hunting.land #tab-live #bMapSw { order: 2; } body.hunting.land #tab-live #bVil { order: 3; } body.hunting.land #tab-live #bGmTp { order: 4; }
body.hunting.land #tab-live.vil #bVil { order: -1; } /* 村裡：回村（傳回廣場）排最左，接著掛機地圖、離開（2026-10-29） */
/* 聊天展開時整條收起（跟原本一樣） */
/* 2026-11-09 使用者：展開聊天時右下角回村／掛機地圖／變身等按鈕不要跟著藏（拿掉）：body.hunting.land.lchat #tab-live .mmitems { border-color: t… */
/* 2026-11-09 使用者：展開聊天時右下角回村／掛機地圖／變身等按鈕不要跟著藏（拿掉）：body.hunting.land.lchat #tab-live .mmitems > .mmi:is(#bPoly,… */
/* 比較窄的橫拿手機：格子縮一點，不碰到右邊技能 */
@media (max-width: 700px) {
  body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt):not([hidden]) { padding: 0 8px; gap: 3px; }
  body.hunting.land #tab-live .mmitems > .mmi:is(#bPoly, #bMapSw, #bVil, #bGmTp, #bChan, #bVilHunt) > b { font-size: 11px; }
}
/*
 * 橫式右下「自動」大鈕改丙款（2026-10-28 使用者選丙「黑金＋光圈」，字改 AUTO）：
 *   黑底厚金框；內圈一道金色光弧，自動中會繞圈轉（只轉偽元素，手機自己算，不吃伺服器）；
 *   手動時光弧停下來變暗、字換「手動」，一眼分得出模式
 */
body.hunting.land #tab-live #bMode { position: relative; overflow: visible; color: #ffd76a;
  background: radial-gradient(circle at 50% 35%, #2e2a26, #0e0c0b 70%);
  box-shadow: 0 0 0 2px #000, 0 0 0 6px #3a2e1c, 0 0 0 7px #c9a050, 0 0 0 8px #000, inset 0 2px 0 rgba(255, 255, 255, .08), 0 4px 12px #000; }
body.hunting.land #tab-live #bMode::before { content: "AUTO"; position: relative; z-index: 2; font: 900 20px/1 var(--f-display); letter-spacing: .03em; color: #ffd76a; text-shadow: 0 0 8px rgba(255, 190, 80, .55), 0 2px 0 #000; }
body.hunting.land #tab-live #modeBar.on #bMode::before { content: "手動"; font-size: 20px; letter-spacing: 0; color: #ddd2bb; text-shadow: 0 2px 0 #000; }
body.hunting.land #tab-live #bMode > em { position: relative; z-index: 2; left: auto; top: auto; transform: none; margin-top: 4px; font-size: 10px; color: #d8cdb4; }
body.hunting.land #tab-live #bMode::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(255, 211, 106, 0) 0, rgba(255, 211, 106, .55) 62%, rgba(255, 211, 106, .08) 62%); opacity: .45;
  -webkit-mask: radial-gradient(circle, transparent 34px, #000 35px, #000 38px, transparent 39px); mask: radial-gradient(circle, transparent 34px, #000 35px, #000 38px, transparent 39px);
  animation: autoSpin 6s linear infinite; }
body.hunting.land #tab-live #modeBar.on #bMode::after { background: rgba(200, 190, 170, .18); filter: none; animation: none; opacity: 1; }
@keyframes autoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.hunting.land #tab-live #bMode::after { animation: none; } }

/*
 * 村莊按「掛機」蓋出來的選地圖（.mapover，2026-10-28 使用者：橫拿又變直式）：
 *   比照一般選地圖的橫式版面（上面那段 #hunt:has(> .mgrid) 自動複製改成 .mapover）：左邊地圖清單、右邊全景圖＋出發
 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .mapover { --sl: max(12px, var(--sal, env(safe-area-inset-left, 0px))); --sr: max(12px, var(--sar, env(safe-area-inset-right, 0px))); overflow: hidden; }
  .mapover > * { max-width: none; margin-inline: 0; }
  .mapover > .card.hd { position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 44px; margin: 0; border: 0; border-radius: 0; display: flex; align-items: center; gap: 10px;
    padding: 0 var(--sr) 0 calc(var(--sl) + 42px); background: linear-gradient(180deg, #2b231b, #120e0b);
    box-shadow: inset 0 -1px 0 #000, inset 0 -2px 0 rgba(201, 162, 77, .55), 0 3px 10px rgba(0, 0, 0, .6); }
  .mapover > .card.hd::before, .mapover > .card.hd::after, .mapover > .card.hd h2::before, .mapover > .card.hd h2::after { display: none; }
  .mapover > .card.hd h2 { display: block; margin: 0; font: 900 18px/1 var(--f-display); color: #ffd76a; letter-spacing: .12em; text-shadow: 0 2px 0 #000; }
  .mapover > .card.hd small { margin: 0; font-size: 12px; color: #9d907a; }
  .mapover > .card.hd {
    position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 44px; margin: 0; border: 0; border-radius: 0; display: flex; align-items: center; gap: 10px;
    padding: 0 var(--sr) 0 var(--sl); background: linear-gradient(180deg, #2b231b, #120e0b);
    box-shadow: inset 0 -1px 0 #000, inset 0 -2px 0 rgba(201, 162, 77, .55), 0 3px 10px rgba(0, 0, 0, .6); }
  .mapover > .card.hd { padding-left: calc(var(--sl) + 4px); }
  .mapover > .card.hd::before, .mapover > .card.hd::after { display: none; }
  .mapover > .card.hd h2 { display: block; margin: 0; font: 900 18px/1 var(--f-display); color: #ffd76a; letter-spacing: .12em; text-shadow: 0 2px 0 #000; }
  .mapover > .card.hd h2::before, .mapover > .card.hd h2::after { display: none; }
  .mapover > .card.hd small { margin: 0; font-size: 12px; color: #9d907a; }
  .mapover { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; padding: 10px var(--sr) 10px var(--sl); height: calc(100vh - 44px); height: calc(100dvh - 44px); box-sizing: border-box; }
  .mapover > .mgrid { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 6px; }
  .mapover > .mgrid .mt { aspect-ratio: auto; height: 62px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .6); }
  .mapover > .mgrid .mt .img { filter: brightness(.6); }
  .mapover > .mgrid .mt .cap { top: 0; padding: 8px 12px; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .1)); }
  .mapover > .mgrid .mt .badge { top: auto; bottom: 7px; left: auto; right: 8px; }
  .mapover > .mgrid .mt.on { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 200, 90, .35); }
  .mapover > .mgrid .mt.on .cap b { color: #ffd76a; }
  .mapover > .mhint, .mapover > .err { grid-column: 1; grid-row: 2; margin: 6px 2px 0; font-size: 12px; }
  .mapover > .cmds { position: fixed; z-index: 32; top: 7px; left: var(--sl); margin: 0; }
  .mapover > .cmds #mBack { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #6e5a34; }
  .mapover > .cmds #mBack { position: relative; }
  .mapover > .cmds #mBack::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -1px;
    border: solid #ffd76a; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); }
  .mapover > .card.hd { padding-left: calc(var(--sl) + 42px); }
  .mapover > .mdet { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; border-radius: 4px; overflow: hidden;
    background: linear-gradient(180deg, rgba(34, 27, 21, .94), rgba(14, 11, 9, .94)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(110, 90, 52, .75), 0 4px 14px rgba(0, 0, 0, .6); }
  .mapover > .mdet .mdhint { grid-column: 1 / -1; align-self: center; text-align: center; }
  .mapover > .mdet .big { height: auto; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #0b0a0a; }
  .mapover > .mdet .big::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 70%, rgba(14, 11, 9, .95)); }
  .mapover > .mdet .big h2 { display: none; }
  .mapover > .mdet .bd { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; overflow-y: auto; }
  .mapover > .mdet .mdnm { margin: 0 0 4px; font: 900 18px var(--f-display); color: #ffd76a; text-shadow: 0 2px 0 #000; }
  .mapover > .mdet [data-x] { display: none; }
  .mapover > .mdet .acts { position: sticky; bottom: -12px; z-index: 1; display: grid; grid-template-columns: 1fr; margin: auto -14px -12px; padding: 8px 14px 12px; background: linear-gradient(180deg, rgba(14, 11, 9, 0), rgba(14, 11, 9, .96) 30%); } /* 內容再長，「開始掛機」都固定在右下看得到 */
  .mapover > .mdet .note { font-size: 12px; line-height: 1.5; }
  .mapover > .mdet .acts:not(:has(#mGo, #mBackHunt)) { display: none; }
  .mapover > .mdet #mGo { height: 44px; font-size: 15px; letter-spacing: .2em; }
  .mapover { height: 100vh; height: 100dvh; padding-top: 54px; }
  .mapover > .mgrid { min-height: 0; overflow-y: auto; }
  .mapover > .cmds { top: 7px; }
  .mapover > .card.hd { padding-left: calc(var(--sl) + 42px); }
}
/*
 * 橫式聊天箭頭甲款（2026-10-28 使用者從四款選甲「收進聊天列」）：
 *   收起時箭頭變成聊天列最右邊一格（細線隔開），聊天列加上跟右邊功能條同樣的金邊、同高 28、同底 13，兩條對齊；
 *   聊天展開時箭頭照舊在展開框右上（只改收起狀態）
 */
body.hunting.land:not(.lchat) #tab-live .gchat, body.hunting.land:not(.lchat) #tab-live .gchat.up { bottom: 13px; width: 330px; height: 28px; padding: 4px 40px 4px 12px; border-radius: 14px;
  border: 1px solid rgba(243, 213, 138, .35); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
body.hunting.land:not(.lchat) #tab-live .chatsz { left: calc(var(--sl) + 299px); bottom: 14px; width: 30px; height: 26px; border-radius: 0 13px 13px 0; background: none; box-shadow: none;
  border-left: 1px solid rgba(243, 213, 138, .2); }
body.hunting.land:not(.lchat) #tab-live .chatsz::before { border-color: #f3d58a; }
body.hunting.land:not(.lchat) #tab-live .chatsz:active { background: rgba(243, 213, 138, .16); }
/*
 * 喝水格長按選單（2026-10-28 使用者選甲）：長按右下喝水格跳出，選這一格放哪一種水（hunt.js potPick）
 */
.fk { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.potpick { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 8px 10px 10px; border-radius: 10px;
  background: rgba(10, 8, 6, .95); box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .55), 0 6px 18px rgba(0, 0, 0, .7); }
.potpick h4 { margin: 0 0 7px; font: 900 13px/1.3 var(--f-body); color: #f3d58a; }
.potpick h4 span { margin-left: 6px; font-weight: 700; font-size: 11px; color: #aaa; }
.potpick .ppo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.potpick button { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 5px 0 4px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .18); color: inherit; }
.potpick button > img { width: 32px; height: 32px; image-rendering: pixelated; }
.potpick button i { font: 700 11px var(--f-body); font-style: normal; color: #ece2cc; white-space: nowrap; }
.potpick button s { display: flex; align-items: center; gap: 1px; text-decoration: none; font: 700 10px Consolas, monospace; color: #ffe08a; }
.potpick button s img { width: 11px; height: 11px; image-rendering: pixelated; }
.potpick button.on { background: linear-gradient(rgba(243, 213, 138, .3), rgba(243, 213, 138, .08)); box-shadow: inset 0 0 0 1.5px #ffd36a; }
.potpick button:active { background: rgba(243, 213, 138, .2); }
/*
 * 四龍傳送選單橫式（2026-10-28 使用者：橫式沒做到）：手機橫拿時視窗置中變寬，四張龍巢排成 2×2，一屏看完不用捲；
 * 傳送費搬到標題右邊（跟關閉鈕同一行）
 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .sheet:has(> .card.dgsheet) { align-items: center; }
  .sheet .card.dgsheet { position: relative; max-width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 16px); margin-bottom: 0; padding-block: 10px 12px; }
  .sheet .card.dgsheet .dg-ttl { font-size: 22px; }
  .sheet .card.dgsheet .dg-cost { position: absolute; top: 15px; right: 58px; margin: 0; }
  .sheet .card.dgsheet .dg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .sheet .card.dgsheet .dg-row { height: clamp(84px, calc((100dvh - 108px) / 2), 124px); }
  .sheet .card.dgsheet .dg-txt { width: 52%; }
  .sheet .card.dgsheet .dg-wm { left: 30%; font-size: 100px; }
}

/* 經驗娃娃小圖示（2026-10-28）：直式在地圖右下、橫式在血魔條右邊；點了跳提示（hunt.js #buffs） */
#tab-live .buffs { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 2px; height: 24px; padding: 0 7px 0 3px; border-radius: 12px; background: rgba(8, 6, 5, .62); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .4); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#tab-live .buffs:active { transform: translateY(1px); }
body.hunting #tab-live .buffs { margin-bottom: 4.1%; }
#tab-live .buffs img { width: 20px; height: 20px; }
#tab-live .buffs b { font: 700 11px/1 "Microsoft JhengHei", sans-serif; color: #ffe08a; text-shadow: 0 1px 2px #000; }
body.hunting.land #tab-live .buffs { display: none !important; } /* 橫式改成頭像右下角的徽章 .ldoll（2026-10-30 使用者選乙） */
.ldoll { display: none; }
body.hunting.land .lpf .ldoll:not([hidden]) { display: flex; position: absolute; right: -8px; bottom: -5px; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(#3a2c18, #120d08); box-shadow: inset 0 0 0 1.5px #d6a23c, 0 1px 4px rgba(0, 0, 0, .7); cursor: pointer; }
body.hunting.land .lpf .ldoll img { width: 21px; height: 21px; }
body.hunting.land .lpf .ldoll em { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); padding: 0 4px; border-radius: 6px; background: #3a2608; box-shadow: inset 0 0 0 1px #8a6c34;
  font: 700 9px/12px var(--f-body); font-style: normal; color: #ffe08a; white-space: nowrap; }
body.insg .ldoll { display: none !important; }
.st-xp .xpdoll { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; }

/* 藥水格可以長按換（2026-10-28 使用者選丁三）：右上角淡淡的換位箭頭＋第一次進遊戲的提示泡泡（hunt.js potTip） */
.fk[data-pot]::before { content: ""; position: absolute; right: 6%; top: 5%; z-index: 2; width: 9px; height: 9px; opacity: .42; pointer-events: none; filter: drop-shadow(0 0 1px #000);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h13l-3-3M20 15H7l3 3' fill='none' stroke='%23e9c36a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
body.hunting.land .card.hud .fkeys .fk[data-pot]::before { right: 13%; top: 11%; }
.pottip { position: fixed; z-index: 61; padding: 6px 12px; border-radius: 14px; background: rgba(10, 8, 6, .94); box-shadow: inset 0 0 0 1px #e9c36a, 0 3px 10px #000;
  font: 700 12px/1.3 "Microsoft JhengHei", sans-serif; color: #ffe08a; white-space: nowrap; pointer-events: none; animation: potTipIn .2s ease-out; }
.pottip::after { content: ""; position: absolute; left: var(--tx, 20px); bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: rgba(10, 8, 6, .94); box-shadow: 1px 1px 0 #e9c36a; }
@keyframes potTipIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pottip { animation: none; } }

/* 圖片形狀的圖示（hunt.js MIG）：變身、回村用遊戲卷軸中間的圖案，顏色照 currentColor（2026-10-28 使用者選甲） */
#tab-live .mmi .mic.mig { background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* 沒有套裝變身時點變身鈕的說明卡（hunt.js polyTip，2026-10-28 使用者選甲）：置中、變身卷軸圖案金色圓章 */
.sheet:has(> .card.polytip) { align-items: center; }
.sheet .card.polytip { width: min(330px, 100%); margin-bottom: 0; padding: 20px 20px 16px; text-align: center; }
.polytip .pt-ic { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #3a2c18, #120d08 72%); box-shadow: 0 0 0 1.5px #c9a45a, 0 0 0 3px #000, 0 0 14px rgba(233, 195, 106, .35); }
.polytip .pt-ic i { width: 30px; height: 30px; background: #f3d58a; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.polytip h2 { justify-content: center; margin: 0 0 6px; font-size: 17px; letter-spacing: 1px; }
.polytip h2::before { display: none; }
.polytip .pt-lead { margin: 0 0 8px; font: 700 14px/1.5 "Microsoft JhengHei", sans-serif; color: #ece2cc; }
.polytip .pt-lead b { color: #ffd36a; }
.polytip .pt-sub { margin: 0 0 14px; font: 400 12.5px/1.6 "Microsoft JhengHei", sans-serif; color: #bfb39b; }
.polytip .pt-sub em { font-style: normal; font-weight: 700; color: #8fe08a; }
.polytip .btn { min-width: 120px; }

/* 直拿、橫拿都能玩（hunt.js orientTip，2026-10-28 使用者選甲）：第一次進遊戲跳一次，置中 */
.sheet:has(> .card.orsheet) { align-items: center; }
.sheet .card.orsheet { width: min(340px, 100%); margin-bottom: 0; padding: 18px 18px 16px; text-align: center; }
.orsheet h2 { justify-content: center; margin: 0 0 4px; font-size: 18px; letter-spacing: 1px; }
.orsheet h2::before { display: none; }
.orsheet .or-sub { margin: 0 0 12px; font: 400 12.5px/1.6 "Microsoft JhengHei", sans-serif; color: #bfb39b; }
.orsheet .or-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; }
.orsheet figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.orsheet figure img { display: block; max-width: none; border-radius: 6px; box-shadow: 0 0 0 1.5px #c9a45a, 0 0 0 3px #000, 0 4px 10px rgba(0, 0, 0, .6); }
.orsheet figcaption { display: grid; gap: 1px; font: 700 12.5px/1.3 "Microsoft JhengHei", sans-serif; color: #f3d58a; }
.orsheet figcaption small { font-weight: 400; font-size: 11px; color: #d9ceb6; }
.orsheet .or-mid { display: grid; justify-items: center; gap: 2px; color: #f3d58a; font: 700 10px "Microsoft JhengHei", sans-serif; }
.orsheet .or-note { margin: 0 0 14px; padding: 7px 10px; border-radius: 6px; background: rgba(243, 213, 138, .07); box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .2); font: 400 11.5px/1.55 "Microsoft JhengHei", sans-serif; color: #d9ceb6; text-align: left; }
.orsheet .or-note b { color: #ffd36a; }
.orsheet .btn { min-width: 120px; }
/* 已經橫拿：不用教怎麼轉，卡片壓矮一點才放得下 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .sheet .card.orsheet { padding: 12px 18px; }
  .orsheet .or-sub { margin-bottom: 8px; }
  .orsheet .or-row { margin-bottom: 10px; }
  .orsheet .or-note { display: none; }
}

/* 新手教學（hunt.js tour，2026-10-28 使用者）：亮出一塊、其他調暗、旁邊說明；蓋在所有東西上面（toast 60、提示泡泡 61 之上），整個畫面點不到底下 */
.tour { position: fixed; inset: 0; z-index: 70; }
.tour-dim { position: absolute; inset: 0; }
.tour-dim.solid { background: rgba(4, 3, 2, .74); }
.tour-hole { position: fixed; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(4, 3, 2, .74), 0 0 0 2px #e9c36a, 0 0 16px 3px rgba(233, 195, 106, .55); }
.tour-tip { position: fixed; width: min(300px, calc(100vw - 24px)); padding: 12px 14px 10px; border-radius: 10px; background: linear-gradient(180deg, #221a10, #0e0a07); box-shadow: inset 0 0 0 1px #c9a45a, 0 8px 22px rgba(0, 0, 0, .8); font-family: "Microsoft JhengHei", sans-serif; }
.tour-tip h4 { margin: 0 0 5px; font: 900 15px/1.35 "Microsoft JhengHei", sans-serif; color: #f3d58a; }
.tour-no { display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: 9px; background: linear-gradient(#f0c870, #b88a38); font: 900 11px/16px Consolas, monospace; color: #2a1606; vertical-align: 2px; }
.tour-tip p { margin: 0 0 10px; font: 400 12.5px/1.6 "Microsoft JhengHei", sans-serif; color: #e2d7bf; }
.tour-tip p b { color: #ffd36a; }
.tour-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-skip { padding: 4px 2px; border: 0; background: none; font: 400 12px "Microsoft JhengHei", sans-serif; color: #9a8e78; text-decoration: underline; cursor: pointer; }
.tour-dots { display: flex; gap: 4px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #4a3d28; }
.tour-dots i.on { background: #f3d58a; }
.tour-nx { padding: 6px 16px; border: 0; border-radius: 6px; background: linear-gradient(#f0c870, #b88a38); font: 900 13px "Microsoft JhengHei", sans-serif; color: #2a1606; box-shadow: 0 0 0 1px #000; cursor: pointer; }
.tour-ar { position: absolute; width: 12px; height: 12px; background: #1a140c; transform: rotate(45deg); }
.tour-ar.up { top: -6px; box-shadow: -1px -1px 0 #c9a45a; }
.tour-ar.down { bottom: -6px; background: #0f0b07; box-shadow: 1px 1px 0 #c9a45a; }

/* ================= 妖魔城攻城（2026-10-28；hunt.js setSg／onSgFrame） ================= */
/* 攻城中：王子不能喝水、不能打，藏起喝水格、地圖選單、說話輸入框、王的公告列、經驗娃娃小圖示 */
body.insg #tab-live .fkeys, body.insg #tab-live .mmrow, body.insg #tab-live #buffs, body.insg #tab-live .chatbar, body.insg .lvnotice, body.insg #potTip { display: none !important; }
.sghud { position: absolute; inset: 0; z-index: 5; pointer-events: none; font-family: "Microsoft JhengHei", sans-serif; }
.sghud .sgtop { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 14px; background: rgba(8, 6, 5, .78); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .55); white-space: nowrap; }
.sghud .sgt { font: 900 17px/1.2 Consolas, monospace; color: #ffe08a; letter-spacing: 1px; }
.sghud .sgside { font: 700 12px "Microsoft JhengHei", sans-serif; padding: 1px 8px; border-radius: 9px; }
.sghud .sgside.mine { background: linear-gradient(#f0c870, #b88a38); color: #2a1606; }
.sghud .sgside.foe { background: rgba(180, 50, 40, .85); color: #fff; }
.sghud .sgbars { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); display: flex; gap: 8px; }
.sghud .sgbar { position: relative; width: 104px; height: 15px; border-radius: 3px; background: rgba(8, 6, 5, .75); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .45); overflow: hidden; }
.sghud .sgbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e0b45a, #8f6424); }
.sghud .sgbar.tower i { background: linear-gradient(#d9785a, #8a3a22); }
.sghud .sgbar span { position: relative; display: block; text-align: center; font: 700 10.5px/15px "Microsoft JhengHei", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.sghud .sgcnt { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); display: flex; gap: 10px; font: 700 11.5px "Microsoft JhengHei", sans-serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.sghud .sgcnt .a { color: #b9e6a8; } .sghud .sgcnt .b { color: #ff9b85; }
.sghud .sgcnt b { font-family: Consolas, monospace; }
.sghud .sgcrown { position: absolute; left: 50%; top: 82px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 14px; background: rgba(60, 30, 4, .9); box-shadow: inset 0 0 0 1.5px #ffd36a, 0 0 14px rgba(255, 200, 90, .6); font: 900 13px "Microsoft JhengHei", sans-serif; color: #ffe08a; white-space: nowrap; animation: sgPulse 1s ease-in-out infinite; }
.sghud .sgcrown b { font-family: Consolas, monospace; color: #fff; }
.sghud .sgcrown em { font-style: normal; color: #ff9b85; }
@keyframes sgPulse { 50% { box-shadow: inset 0 0 0 1.5px #ffd36a, 0 0 4px rgba(255, 200, 90, .3); } }
.sghud .sgcmds { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; pointer-events: auto; }
.sghud .sgcmd { min-width: 92px; padding: 9px 10px; border: 0; border-radius: 10px; background: rgba(10, 8, 6, .82); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .55), 0 3px 8px rgba(0, 0, 0, .6); font: 900 13px "Microsoft JhengHei", sans-serif; color: #f3e6c4; cursor: pointer; }
.sghud .sgcmd.on { background: linear-gradient(#f0c870, #b88a38); color: #2a1606; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 200, 90, .6); }
.sghud .sgleave { position: absolute; left: 8px; top: 8px; pointer-events: auto; padding: 5px 10px; border: 0; border-radius: 8px; background: rgba(10, 8, 6, .78); box-shadow: inset 0 0 0 1px rgba(233, 201, 138, .4); font: 700 12px "Microsoft JhengHei", sans-serif; color: #d9ceb6; cursor: pointer; }
.sghud .sgmsg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 32px)); padding: 14px 16px; border-radius: 12px; background: rgba(10, 8, 6, .9); box-shadow: inset 0 0 0 1.5px #c9a45a, 0 8px 22px rgba(0, 0, 0, .7); text-align: center; font: 900 16px/1.5 "Microsoft JhengHei", sans-serif; color: #ffe08a; animation: sgIn .25s ease-out; }
.sghud .sgmsg.bad { color: #ff9b85; box-shadow: inset 0 0 0 1.5px #c45a4a, 0 8px 22px rgba(0, 0, 0, .7); }
@keyframes sgIn { from { opacity: 0; transform: translate(-50%, -40%); } }
.sghud .sgdead { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 6px 14px; border-radius: 12px; background: rgba(60, 10, 8, .88); box-shadow: inset 0 0 0 1px #c45a4a; font: 700 13px "Microsoft JhengHei", sans-serif; color: #fff; white-space: nowrap; }
body.hunting.land .sghud .sgtop { top: 32px; } /* 最上面一排是網路訊號：整組往下 */
body.hunting.land .sghud .sgbars { top: 64px; }
body.hunting.land .sghud .sgcnt { top: 84px; }
body.hunting.land .sghud .sgcrown { top: 104px; }
body.hunting.land .sghud .sgcmds { right: calc(var(--sr, 12px) + 4px); top: 128px; transform: none; gap: 6px; } /* 橫式：從右上地圖鈕（84～120px）下面開始排，4 顆不會頂到地圖鈕（2026-10-29 多了「擊殺公主」） */
body.hunting.land .sghud .sgcmd { min-width: 96px; height: 33px; padding: 0 10px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; line-height: 1; white-space: nowrap; } /* 高度寫死：手機字體調大也不會撐開、壓到下面的「離開戰場」 */
body.hunting.land .sghud .sgleave { height: 28px; line-height: 1; white-space: nowrap; }
body.hunting.land .sghud .sgleave { left: auto; right: calc(var(--sr, 12px) + 4px); top: calc(128px + 4 * 33px + 3 * 6px + 10px); } /* 接在第 4 顆指令鈕下面（一顆約 33px） */
@media (prefers-reduced-motion: reduce) { .sghud .sgcrown, .sghud .sgmsg { animation: none; } }
/* 攻城傳令官選單、結算 */
.sgsheet .sg-rules { margin: 6px 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.7; color: #e2d7bf; }
.sgsheet .sg-rules b { color: #ffd36a; }
.sgsheet .sg-st { margin: 0 0 10px; font-size: 13px; }
.sheet.sgres-wrap { align-items: center; z-index: 65; }
.sheet .card.sgres { width: min(330px, 100%); margin-bottom: 0; text-align: center; }
.sgres h2 { justify-content: center; font-size: 20px; letter-spacing: 2px; }
.sgres h2::before { display: none; }
.sgres.win h2 { color: #ffe08a; } .sgres.lose h2 { color: #ff9b85; }
.sgres .sgres-msg { margin: 4px 0 10px; font-size: 13.5px; color: #e2d7bf; }
.sgres .sgres-st { display: flex; justify-content: center; gap: 12px; margin: 0 0 10px; font-size: 12px; color: #bfb39b; }
.sgres .sgres-st b { margin: 0 2px; font: 900 15px Consolas, monospace; color: #fff; }
.sgres .sgres-gift { margin: 0 0 12px; font-size: 12.5px; color: #b9e6a8; }
.sgres .sgres-gift b { color: #ffe08a; }
body.insg .hpmp .bar.mp { opacity: .3; } /* 王子不用魔力 */
.sghud .sgcmds.off { opacity: .4; pointer-events: none; }

/* ---------- 攻城傳令官對話（2026-10-29 使用者選：宣戰「乙・黑漆金匾＋戰場圖」、規矩「甲・圖解軍令」） ---------- */
.sheet .card.sgdecl, .sheet .card.sgrule { padding: 0; overflow: hidden auto; background: linear-gradient(180deg, #1b1611, #0b0907); border: 1px solid #000; border-radius: 2px;
  box-shadow: inset 0 0 0 1px #5a4520, inset 0 0 0 3px #120e09, inset 0 0 0 4px #3b2d14, 0 4px 18px rgba(0, 0, 0, .7); }
.sheet .card.sgdecl::before, .sheet .card.sgdecl::after, .sheet .card.sgrule::before, .sheet .card.sgrule::after { display: none; }
.sgd-hero { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid #5a4520;
  background: #0b0907 url("../../hunt/assets/ui/sg_hero.webp") center 40% / cover no-repeat; } /* 妖魔城主城樓（地圖裁的，2026-10-29 使用者：換成妖魔城堡的圖） */
.sgd-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(180deg, transparent, #0b0907); }
.sgd-sub { position: absolute; left: 50%; top: 60px; z-index: 1; transform: translateX(-50%); white-space: nowrap; padding: 2px 14px; border-radius: 2px; background: rgba(10, 8, 6, .72);
  font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: #ffe08a; letter-spacing: .22em; text-shadow: 0 1px 2px #000; box-shadow: 0 0 0 1px rgba(138, 106, 44, .6); }
.sgd-hdr { position: absolute; left: 50%; top: 12px; z-index: 1; transform: translateX(-50%); padding: 4px 22px; border: 1px solid #8a6a2c; background: linear-gradient(180deg, #2a1e10, #140e07); white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; font-size: 21px; color: #f2d283; letter-spacing: .3em; text-shadow: 0 2px 0 #000; box-shadow: 0 0 0 3px #0d0905, 0 0 0 4px #5a4520; }
.sgd-seal { position: absolute; right: 14px; top: 58px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(-12deg);
  background: radial-gradient(circle at 40% 35%, #c4312a, #7a120f); color: #ffd9c9; font-family: var(--f-display); font-weight: 900; font-size: 24px; box-shadow: 0 0 0 2px #5c0d0a, 0 3px 8px rgba(0, 0, 0, .7); }
.sgd-body { padding: 10px 18px 12px; font-size: 14.5px; line-height: 1.8; color: #ddd3bd; }
.sgd-who { font-size: 12.5px; color: #b89a5a; letter-spacing: .1em; margin-bottom: 2px; }
.sgd-say { margin: 0 0 8px; }
.sgd-say b { color: #ffd76a; }
.sgd-info { display: flex; gap: 8px; margin: 2px 0 10px; }
.sgd-info span { flex: 1; text-align: center; font-size: 12px; color: #a99f8a; border: 1px solid #33291a; background: #120e0a; padding: 3px 0; border-radius: 2px; }
.sgd-info b { color: #f0cf7c; }
.sgd-lk { display: block; width: 100%; text-align: left; border: 0; background: none; color: #9cc7f2; font: inherit; font-size: 15px; padding: 5px 0 5px 16px; position: relative; cursor: pointer; }
.sgd-lk::before { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: currentColor; transform: rotate(45deg); }
.sgd-lk.war { color: #ffcf66; font-weight: 700; }
.sgd-lk:hover, .sgd-lk:active, .sgd-lk:focus-visible { background: linear-gradient(90deg, rgba(156, 199, 242, .18), transparent); outline: none; }
.sgd-lk:disabled { opacity: .5; }
/* 規矩（圖解軍令） */
.sheet .card.sgrule { padding: 14px 14px 12px; display: grid; gap: 10px; }
.sgr-ttl { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: 20px; color: #f2d283; letter-spacing: .3em; }
.sgr-ttl small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 11.5px; color: #8f8470; letter-spacing: .1em; margin-top: 2px; }
.sgr-me { display: flex; gap: 10px; align-items: center; border: 1px solid #3d3020; background: #120e0a; padding: 8px 10px; border-radius: 2px; }
.sgr-me b { color: #f0cf7c; font-family: var(--f-display); font-size: 16px; }
.sgr-me p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: #c9bfab; }
.sgr-me .no { color: #e07a64; }
.sgr-pr { flex: none; width: 44px; height: 58px; background: radial-gradient(circle at 50% 75%, #3a2b12, transparent 70%); position: relative; }
.sgr-pr::after { content: ""; position: absolute; left: 50%; bottom: 2px; image-rendering: pixelated; }
.sgr-pr.m::after { width: 41px; height: 44px; margin-left: -20px; background: url("../../hunt/assets/sprites/0_4.webp") 0 0 no-repeat; }
.sgr-pr.f::after { width: 16px; height: 42px; margin-left: -8px; background: url("../../hunt/assets/sprites/1_4.webp") 0 0 no-repeat; }
.sgr-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sgr-st { position: relative; border: 1px solid #33291a; background: #100c09; padding: 6px 8px 8px; border-radius: 2px; text-align: center; }
.sgr-st .n { position: absolute; left: 6px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #7a5a20; color: #fff3cf; font: 700 12px/20px var(--f-body); font-style: normal; }
.sgr-st .im { height: 74px; display: flex; align-items: flex-end; justify-content: center; }
.sgr-st b { display: block; font-family: var(--f-display); color: #f0dca8; font-size: 14.5px; margin-top: 3px; }
.sgr-st span { display: block; font-size: 11.5px; color: #9e9480; line-height: 1.45; }
.sgr-gate { width: 83px; height: 74px; background: url("../../hunt/assets/sprites/12129s0.webp") 0 0 / 806px 74px no-repeat; image-rendering: pixelated; } /* 城門 12129（跟戰場同一個門，方向對） */
.sgr-tw { width: 21px; height: 72px; background: url("../../hunt/assets/sprites/9484s0.webp") 0 0 / 512px 72px no-repeat; image-rendering: pixelated; }
.sgr-sw { border: 1px dashed #6a5226; padding: 6px 10px; font-size: 12.5px; line-height: 1.6; color: #d8cdb4; background: rgba(122, 90, 32, .08); }
.sgr-sw b { color: #f0cf7c; }
.sgr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sgr-chips span { font-size: 12px; border: 1px solid #3d3020; padding: 2px 8px; color: #cbbf9f; background: #120e0a; border-radius: 2px; }
.sgr-gift { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cbbf9f; }
.sgr-gift i { width: 30px; height: 30px; border: 1px solid #5a4520; background: linear-gradient(135deg, #6b3a14, #2c1608); display: flex; align-items: center; justify-content: center; font-style: normal; color: #ffd77a; font-weight: 900; }
.sheet .card.sgrule .acts { grid-template-columns: 1fr 1.4fr; margin-top: 2px; }
/* 宣戰確認（遊戲原生確認框：外框 6948 九宮格） */
.sheet .card.sgyn { max-width: 320px; padding: 6px 10px 8px; background: none; box-shadow: none; border: 24px solid transparent; border-image: url("../../hunt/assets/ui/dlg_6948.webp") 34 fill / 24px stretch; border-radius: 0; text-align: center; }
.sheet .card.sgyn::before, .sheet .card.sgyn::after { display: none; }
.sgyn-q { margin: 0 0 4px !important; font-weight: 700; font-size: 15px; color: #e8dfca; }
.sgyn-n { margin: 0 0 12px !important; font-size: 12.5px; line-height: 1.6 !important; color: #a59b86; }
.sgyn-bt { display: flex; gap: 10px; justify-content: center; }
.sgyn-bt button { width: 96px; height: 34px; border: 1px solid #000; border-radius: 2px; background: linear-gradient(180deg, #4a4540, #24211e); box-shadow: inset 0 0 0 1px #6d6659; color: #eee; font: 15px var(--f-body); cursor: pointer; }
.sgyn-bt button.y { background: linear-gradient(180deg, #6b5524, #3a2c10); box-shadow: inset 0 0 0 1px #b08a3c; color: #ffe9b0; font-weight: 700; }
.sghud .sgmsg .sgdecl { display: block; color: #ff8a6e; font-size: 14px; margin-bottom: 4px; }

/* 名片：遊戲稱號（2026-10-29），名字上面一行小字 */
.whoc .gtl { font-size: 12.5px; line-height: 1.3; color: #b8c8ff; letter-spacing: .04em; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 帳本「最近幾趟」（2026-10-29 使用者選「乙・折疊明細」） ---------- */
.lg-hist .lh-it { border-top: 1px solid var(--line); }
.lg-hist .lh-it:first-of-type { border-top: 0; }
.lg-hist .lh-sm { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lg-hist .lh-sm .ar { flex: none; width: 12px; text-align: center; font-size: 11px; color: #7c6f58; transition: transform .15s; }
.lg-hist .lh-it.open .lh-sm .ar { transform: rotate(90deg); color: var(--gold); }
.lg-hist .lh-sm .l { flex: 1; min-width: 0; }
.lg-hist .lh-sm .l b { display: block; font-family: var(--f-display); font-size: 14.5px; color: #f3e6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-hist .lh-sm .l small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-hist .lh-sm .ics { flex: none; display: flex; gap: 2px; align-items: center; }
.lg-hist .lh-sm .ics img { width: 22px; height: 22px; image-rendering: pixelated; background: #0a0806; border: 1px solid #2f271c; border-radius: 2px; }
.lg-hist .lh-sm .ics s { text-decoration: none; font-size: 11px; color: var(--muted); margin-left: 2px; }
.lg-hist .lh-why { flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 2px; border: 1px solid #4b5236; color: #c9d0b0; background: #181c10; white-space: nowrap; }
.lg-hist .lh-why.w1 { color: #f0cf7c; border-color: #6a5226; background: #2a2012; }
.lg-hist .lh-why.w2 { color: #ffb070; border-color: #6a4024; background: #2a170c; }
.lg-hist .lh-why.w3 { color: #8fc0ff; border-color: #2e4a74; background: #0f1a2b; }
.lg-hist .lh-why.w4 { color: #ff9a80; border-color: #73322a; background: #2a100c; }
.lg-hist .lh-bd { display: none; padding: 0 2px 10px; }
.lg-hist .lh-it.open .lh-bd { display: block; }
.lg-hist .lh-bd .sts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.lg-hist .lh-bd .sts b { color: #efe3c6; font-weight: 500; }
.lg-hist .lh-bd .sts b.pos { color: #b9e6a8; }
.lg-hist .lh-bd .sts b.neg { color: #ff9a80; }
.lg-hist .lh-lst { border: 1px solid #2a2218; border-radius: 2px; background: #0c0a07; }
.lg-hist .lh-lst > div { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 13px; border-top: 1px solid #1d1812; }
.lg-hist .lh-lst > div:first-child { border-top: 0; }
.lg-hist .lh-lst > div.more { display: none; }
.lg-hist .lh-it.all .lh-lst > div.more { display: flex; }
.lg-hist .lh-it.all .lh-all { display: none; }
.lg-hist .lh-lst img, .lg-hist .lh-lst i { flex: none; width: 24px; height: 24px; image-rendering: pixelated; }
.lg-hist .lh-lst i { font-style: normal; background: #1a150f; color: #8a7d66; font-size: 12px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.lg-hist .lh-lst span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e4dccb; }
.lg-hist .lh-lst em { flex: none; font-style: normal; color: var(--gold); font-weight: 700; }
.lg-hist .lh-all { display: block; width: 100%; padding: 6px 0; border: 0; border-top: 1px solid #1d1812; background: none; color: #9cc7f2; font: inherit; font-size: 12.5px; cursor: pointer; }
.lg-hist .lh-none { font-size: 12.5px; color: #6f6656; text-align: center; padding: 6px 0; border: 1px dashed #2a2218; border-radius: 2px; }
.lg-hist .lh-note { margin: 8px 0 0; font-size: 11.5px; color: #6f6656; text-align: center; }

/* 最近幾趟：7 天內共幾趟、換頁（2026-10-29） */
.lg-hist h2 .lh-cnt { margin-left: auto; font-family: var(--f-body); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.lg-hist .lh-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 10px; }
.lg-hist .lh-pager .btn { height: 36px; font-size: 13.5px; }
.lg-hist .lh-pager .btn:disabled { opacity: .4; }
.lg-hist .lh-pager span { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* 選地圖：掛機中那張金框（2026-10-29 隨走隨打） */
.mgrid .mt.cur { box-shadow: 0 0 0 2px #f0cf7c, 0 0 14px rgba(240, 207, 124, .55); }
.mgrid .mt.cur .cap small { color: #f0cf7c; }
.mswnote { margin: 8px 0 0; font-size: 12px; text-align: center; }

/* 橫式攻城（2026-10-29 使用者圈的）：拿掉「自動掛機中」、右上金幣／地圖名那列；訊號格搬到右上那列原本的位置，不擠倒數 */
body.land.insg #lMd, body.land.insg .hstats { display: none !important; }
body.hunting.land.insg header.top { left: auto; right: calc(var(--sr, 0px) + 12px); top: 50px; transform: none; margin: 0; max-width: none; }

/* 直式攻城一律「最大」視野（2026-10-29 使用者）：跟 #tab-live.vmax 一樣收起狀態列、對話框，地圖拉到底；不改玩家自己的視野設定 */
body.hunting.insg:not(.land) #tab-live .hudtop, body.hunting.insg:not(.land) #tab-live .chatbar { display: none; }
body.hunting.insg:not(.land) #tab-live .hudbot { display: none; } /* 裡面只有輸入列和快捷格，攻城都不用；留著會剩一排空格子壓在分頁列上 */

/* 測試傳送：地圖左邊中間一顆獨立按鈕（只有測試角色有；2026-10-29 使用者：不要放在地圖選單裡）。攻城時不用 */
#tab-live .gmfloat { position: absolute; z-index: 7; left: calc(var(--sl, 0px) + 8px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 44px; padding: 6px 0 5px; border: 1px solid rgba(159, 224, 255, .55); border-radius: 10px; background: rgba(8, 14, 20, .74); color: #9fe0ff; font: 700 11px/1 var(--f-body); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); cursor: pointer; }
#tab-live .gmfloat .mic { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tab-live .gmfloat:active { background: rgba(159, 224, 255, .2); }
/* 2026-10-30 改成一顆「GM」（線上 GM 選單）：攻城也要用（破門、破塔、直接勝利），只有勝利儀式時收起來 */
#tab-live .gmfloat.gmbtn { padding: 0; height: 40px; justify-content: center; border-color: rgba(255, 170, 120, .7); color: #ffc49a; font: 900 14px/1 var(--f-body); letter-spacing: .04em; }
#tab-live .gmfloat.gmbtn:active { background: rgba(255, 170, 120, .2); }
#tab-live .gmfloat.gmbtn.hid { border-style: dashed; opacity: .6; } /* 隱身中：GM 鈕變虛線、半透明 */
.mapwrap.sgwon #tab-live .gmfloat, .mapwrap.sgwon .gmfloat { display: none; }
.gmmenu { max-width: 420px; }
.gmops { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.gmop { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border: 1px solid rgba(214, 172, 82, .45); border-radius: 10px; background: rgba(0, 0, 0, .4); color: #f0dfb6; cursor: pointer; }
.gmop .mic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gmop b { font-size: 15px; color: var(--gold); }
.gmop span { font-size: 11px; line-height: 1.35; color: #b8a77f; text-align: center; }
.gmop:active { background: rgba(214, 172, 82, .15); }
.gmop:disabled { opacity: .45; cursor: default; }
/* 帳本「查看還沒進遊戲的物品」（2026-10-30，甲・背包格子） */
.lg-bagbtn { display: block; width: 100%; margin: 0 0 8px; }
.bagsheet { max-width: 460px; }
.bag-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.bag-h em { font-style: normal; font-size: 12px; font-weight: 400; color: #9c8a66; }
.bag-sum { display: flex; gap: 6px; margin: 6px 0 8px; }
.bag-sum div { flex: 1; min-width: 0; text-align: center; padding: 6px 0; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .25); }
.bag-sum b { display: block; font-size: 16px; color: var(--gold); }
.bag-sum span { font-size: 11px; color: #9c8a66; }
.bag-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.bag-tabs button { flex: 1; min-width: 0; padding: 7px 0; border: 0; border-radius: 7px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .25); color: #c9b88f; font-size: 12px; cursor: pointer; }
.bag-tabs button.on { background: linear-gradient(#f2c96e, #b0802f); color: #2a1606; font-weight: 700; }
.bag-tabs button:disabled { opacity: .35; cursor: default; }
.bag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; max-height: 44vh; overflow-y: auto; }
.bag-c { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: radial-gradient(#2a2016, #120d08); box-shadow: inset 0 0 0 1px #4a3a22; display: grid; place-items: center; cursor: pointer; }
.bag-c img { width: 70%; height: 70%; image-rendering: pixelated; }
.bag-c i { font-style: normal; font-size: 15px; color: #c9b88f; }
.bag-c b { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.bag-c.t1 { box-shadow: inset 0 0 0 1px #d6ac52; }
.bag-c.t2 { box-shadow: inset 0 0 0 1px #b294ea, 0 0 8px rgba(178, 148, 234, .6); }
.bag-c.sel { outline: 2px solid #ffd98a; }
.bag-c.e { opacity: .5; cursor: default; }
.bag-pop { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .35); font-size: 12px; }
.bag-pop b { font-size: 14px; color: #eadbb8; }
.bag-pop b.t1 { color: #e6c26a; }
.bag-pop b.t2 { color: #d9b0ff; }
.bag-pop p { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 0; color: #d8ccb4; }
.bag-pop p i { font-style: normal; color: var(--gold); }
.bag-note { margin: 8px 0 0; font-size: 11px; }
.bag-none { margin: 12px 0; text-align: center; }
.gctxt { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(214, 172, 82, .5); border-radius: 8px; background: rgba(0, 0, 0, .45); color: #f3e6c8; font-size: 16px; line-height: 1.4; resize: none; }
.gccnt { margin-top: 3px; text-align: right; font-size: 11px; color: #9c8a66; }
/* 網頁GM廣播（2026-10-30）：畫面中間偏上，所有人都看得到；甲 赤金令牌（預設）／乙 鎏金詔書／丙 緊急紅帶，JS 的 CAST_STYLE 換 */
/* 2026-11-01：上緣對齊（JS castPlace 放在選單鈕／狀態列下面），框改扁、最多 3 行（全文在聊天框） */
.gmcast { position: fixed; left: 50%; top: 12%; z-index: 9000; width: min(92vw, 520px); transform: translateX(-50%); cursor: pointer; animation: gcIn .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.gmcast.out { animation: gcOut .7s ease forwards; }
@keyframes gcIn { from { opacity: 0; transform: translate(-50%, -30%) scale(.88); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes gcOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -20%) scale(.96); } }
@keyframes gcShine { from { left: -60%; } to { left: 130%; } }
@keyframes gcPulse { from { box-shadow: 0 0 10px rgba(255, 40, 40, .35); } to { box-shadow: 0 0 28px rgba(255, 40, 40, .8); } }
.gmcast p { margin: 0; font-weight: 900; line-height: 1.4; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gmcast.ga .gc-in { position: relative; overflow: hidden; padding: 21px 14px 9px; border-radius: 10px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #8a1a12 0%, #4a0907 55%, #240302 100%);
  box-shadow: 0 0 0 1px #2a0a04, 0 0 0 3px #d6a23c, 0 0 0 4px #5a3a10, 0 10px 40px rgba(0, 0, 0, .7), 0 0 44px rgba(255, 90, 40, .45); }
.gmcast.ga .gc-in::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 230, 160, .3), transparent); animation: gcShine 2.4s ease-in-out .5s infinite; }
.gmcast.ga .gc-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 3px 14px 4px; border-radius: 0 0 8px 8px; background: linear-gradient(#f5d27a, #b07a22); color: #3a0a04; font: 900 11px/1 var(--f-body); letter-spacing: .3em; white-space: nowrap; }
.gmcast.ga p { color: #fff1cf; font-size: 15px; text-shadow: 0 0 10px rgba(255, 120, 60, .6), 0 2px 2px #000; }
.gmcast.gb .gc-in { position: relative; padding: 14px 30px 16px; border-radius: 4px; text-align: center; background: linear-gradient(#f7e2a6, #e2b968 60%, #c99a45);
  box-shadow: inset 0 0 0 2px #8a5a1a, inset 0 0 0 4px #f7e2a6, inset 0 0 0 5px #8a5a1a, 0 10px 30px rgba(0, 0, 0, .6); }
.gmcast.gb .gc-in::before, .gmcast.gb .gc-in::after { content: ''; position: absolute; top: -7px; bottom: -7px; width: 13px; border-radius: 7px; background: linear-gradient(90deg, #3a1406, #a0522d 50%, #3a1406); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.gmcast.gb .gc-in::before { left: -8px; }
.gmcast.gb .gc-in::after { right: -8px; }
.gmcast.gb .gc-tag { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border: 2px solid #a8160e; border-radius: 3px; color: #a8160e; font: 900 13px/1.2 var(--f-body); letter-spacing: .25em; transform: rotate(-3deg); }
.gmcast.gb p { color: #4a0e06; font-size: 18px; }
.gmcast.gc { width: 100vw; }
.gmcast.gc .gc-in { padding: 12px 16px; text-align: center; border-top: 2px solid #ffcf5a; border-bottom: 2px solid #ffcf5a; animation: gcPulse 1s ease-in-out infinite alternate;
  background: linear-gradient(90deg, rgba(150, 8, 8, .2), rgba(190, 16, 16, .96) 14%, rgba(190, 16, 16, .96) 86%, rgba(150, 8, 8, .2)); }
.gmcast.gc .gc-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 3px; background: #ffcf5a; color: #6a0000; font: 900 12px/1.3 var(--f-body); vertical-align: 2px; }
.gmcast.gc p { display: inline; color: #fff; font-size: 17px; text-shadow: 0 1px 2px #000; }
.gmpl { max-height: 56vh; overflow-y: auto; margin-top: 6px; }
.gmpl section + section { margin-top: 10px; }
.gmpl h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(214, 172, 82, .25); font-size: 14px; color: var(--gold); }
.gmpl h3 em { font-style: normal; font-size: 12px; color: #9c8a66; }
.gmpns { display: flex; flex-wrap: wrap; gap: 6px; }
.gmpn { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border: 1px solid rgba(214, 172, 82, .4); border-radius: 8px; background: rgba(0, 0, 0, .4); color: #f0dfb6; font-size: 14px; cursor: pointer; }
.gmpn em { font-style: normal; font-size: 11px; color: #9c8a66; }
.gmpn:active { background: rgba(214, 172, 82, .15); }
.gmpn:disabled { opacity: .5; cursor: default; }
.gmpn.me { border-style: dashed; }
.gmpn.ing { opacity: .6; }
.gmform { display: flex; gap: 8px; margin: 10px 0 6px; }
.gmform input { flex: 1 1 auto; width: auto; min-width: 0; padding: 9px 10px; border: 1px solid rgba(214, 172, 82, .5); border-radius: 8px; background: rgba(0, 0, 0, .45); color: #f3e6c8; font-size: 16px; }
.gmform select { flex: none; width: 78px; padding: 0 6px; border: 1px solid rgba(214, 172, 82, .5); border-radius: 8px; background: #1a130c; color: #f3e6c8; font-size: 16px; }
.gmform .btn { flex: none; }
.gmchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gmchip { padding: 4px 9px; border: 1px solid rgba(214, 172, 82, .35); border-radius: 14px; background: rgba(0, 0, 0, .35); color: #e8d6ae; font-size: 12px; cursor: pointer; }
.gmchip em { margin-left: 4px; font-style: normal; color: #9c8a66; }
.gmres { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .25); max-height: 42vh; overflow-y: auto; }
.gmres p { margin: 4px 0; font-size: 12px; }
.gmhead b { font-size: 15px; color: var(--gold); }
.gmhead span { font-size: 12px; color: #c9b88f; }
.gmwarn { color: #ffb49a; }
.gmdrops { list-style: none; margin: 4px 0; padding: 0; }
.gmdrops li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(214, 172, 82, .12); font-size: 13px; }
.gmdrops img { width: 24px; height: 24px; image-rendering: pixelated; }
.gmdrops span { flex: 1; min-width: 0; color: #eadbb8; }
.gmdrops em { font-style: normal; color: #9c8a66; }
.gmdrops b { color: var(--gold); font-weight: 700; }

/* ---------- 橫式：攻城傳令官對話、攻城的規矩（2026-10-29 使用者：橫式沒做到，原本直式版面上圖下字，字和按鈕被擠出畫面） ---------- */
body.land .sheet .card.sgdecl { display: grid; grid-template-columns: 44% minmax(0, 1fr); width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); }
body.land .sgd-hero { height: auto; min-height: 200px; border-bottom: 0; border-right: 1px solid #5a4520; background-position: 22% center; }
body.land .sgd-hero::after { display: none; }
body.land .sgd-hdr { top: 12px; padding: 3px 14px; font-size: 17px; letter-spacing: .2em; }
body.land .sgd-sub { top: 54px; font-size: 12.5px; padding: 1px 10px; }
body.land .sgd-seal { top: auto; bottom: 12px; right: 12px; width: 40px; height: 40px; font-size: 21px; }
body.land .sgd-body { padding: 10px 16px 10px; font-size: 13.5px; line-height: 1.65; overflow: auto; }
body.land .sgd-say { margin-bottom: 6px; }
body.land .sgd-info { margin: 0 0 6px; }
body.land .sgd-lk { padding: 4px 0 4px 16px; font-size: 14px; }
body.land .sheet .card.sgrule { width: min(780px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); padding: 10px 14px; gap: 8px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "ttl ttl" "steps me" "steps sw" "steps chips" "steps gift" "steps acts"; align-content: start; }
body.land .sgr-ttl { grid-area: ttl; font-size: 17px; }
body.land .sgr-ttl small { display: inline; margin: 0 0 0 10px; }
body.land .sgr-me { grid-area: me; padding: 6px 8px; }
body.land .sgr-steps { grid-area: steps; align-self: start; gap: 6px; }
body.land .sgr-st { padding: 4px 6px 6px; }
body.land .sgr-st .im { height: 58px; }
body.land .sgr-st .im svg { max-height: 50px; }
body.land .sgr-sw { grid-area: sw; font-size: 12px; padding: 5px 8px; }
body.land .sgr-chips { grid-area: chips; }
body.land .sgr-gift { grid-area: gift; }
body.land .sheet .card.sgrule .acts { grid-area: acts; margin-top: 0; }
body.land .sheet .card.sgrule .acts .btn { height: 38px; }

/* 提示細條（2026-10-29 使用者選「甲的樣式放丁的位置」，hunt.js toast 算位置）：左右漸淡的一條＋上下金線，不擋畫面中間；點得穿 */
.toast { width: min(92vw, 520px); max-width: none; padding: 6px 30px; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; line-height: 1.5; color: #f0e8d6; text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, rgba(12, 10, 10, 0), rgba(12, 10, 10, .84) 20%, rgba(12, 10, 10, .84) 80%, rgba(12, 10, 10, 0)); pointer-events: none; animation: toastIn .18s ease-out; }
.toast::before, .toast::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 172, 82, .85) 24%, rgba(214, 172, 82, .85) 76%, transparent); }
.toast::before { top: 0; }
.toast::after { bottom: 0; opacity: .5; }
.toast.bad { box-shadow: none; color: #ffd6a8; }
.toast .ti { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; font: 700 11px/15px system-ui, sans-serif; font-style: normal; color: transparent; text-shadow: none; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%238a6d33'/%3E%3Crect x='7' y='3.4' width='2' height='6' rx='1' fill='%23fff6e0'/%3E%3Ccircle cx='8' cy='11.9' r='1.15' fill='%23fff6e0'/%3E%3C/svg%3E") center / 15px 15px no-repeat; } /* 驚嘆號用圖畫（字型畫的「!」各家手機基準線不同會跑歪，2026-10-29 使用者） */
.toast.bad .ti { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23a8483a'/%3E%3Crect x='7' y='3.4' width='2' height='6' rx='1' fill='%23fff6e0'/%3E%3Ccircle cx='8' cy='11.9' r='1.15' fill='%23fff6e0'/%3E%3C/svg%3E"); }
body.land .toast { width: min(64vw, 520px); }
@keyframes toastIn { from { opacity: 0; } to { opacity: 1; } }

/* 最近幾趟的攻城獎勵（2026-10-29）：待領取（金）／已領取（綠） */
.lg-hist .lh-rw { flex: none; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 2px; white-space: nowrap; }
.lg-hist .lh-rw.wait { color: #f0cf7c; border: 1px solid #6a5226; background: #2a2012; }
.lg-hist .lh-rw.got { color: #9fd39a; border: 1px solid #2f5a2c; background: #122012; }
.lg-hist .lh-rwnote { margin: 6px 0 0; font-size: 12px; }
.sgres-gift small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; opacity: .8; }

/* 攻城快速測試鈕（2026-10-29，只有測試角色看得到）：左邊中間，紅色虛線框跟軍令分開，免得誤按 */
.sghud .sggm { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; pointer-events: auto; }
.sghud .sggm b { font-size: 11px; color: #ff9a80; text-align: center; text-shadow: 0 1px 2px #000; }
.sghud .sggm button { padding: 6px 10px; border: 1px dashed #c0503a; border-radius: 8px; background: rgba(40, 10, 8, .85); color: #ffd2c8; font: 700 12px/1.2 system-ui, sans-serif; }
.sghud .sggm button:disabled { opacity: .5; }

/* 攻城勝利儀式・王者特寫（2026-10-29 使用者選乙；hunt.js sgVictory）：--px／--py＝王子在地圖上的位置（王子頭頂） */
.sgwin { position: absolute; inset: 0; z-index: 25; pointer-events: none; animation: sgwIn .6s ease-out; }
.sgwin .sgw-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 34% at var(--px, 50%) calc(var(--py, 42%) + 40px), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .84) 100%); }
.sgwin .sgw-beam { position: absolute; left: calc(var(--px, 50%) - 34px); top: 0; width: 68px; height: calc(var(--py, 42%) + 70px); background: linear-gradient(180deg, rgba(255, 226, 140, 0), rgba(255, 226, 140, .36) 55%, rgba(255, 226, 140, .5)); filter: blur(7px); mix-blend-mode: screen; animation: sgwBeam 2.2s ease-in-out infinite alternate; }
.sgwin .sgw-fw { position: absolute; inset: 0; width: 100%; height: 100%; }
.sgwin .sgw-crown { position: absolute; left: calc(var(--px, 50%) - 80px); top: calc(var(--py, 42%) - 178px); width: 160px; height: 120px; animation: sgwCrown .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.sgwin .sgw-txt { position: absolute; left: 0; right: 0; top: min(calc(var(--py, 42%) + 92px), calc(100% - 230px)); text-align: center; color: #f0e4c8; text-shadow: 0 2px 4px #000; animation: sgwUp .7s .35s ease-out both; }
.sgwin .sgw-txt h2::before, .sgwin .sgw-txt h2::after { content: none; display: none; }
.sgwin .sgw-txt h2 { display: block; text-align: center; border: 0; background: none; margin: 0; font: 900 46px/1.1 'Noto Serif TC', serif; letter-spacing: .2em; padding-left: .2em; color: #ffde8c; -webkit-text-stroke: 1px #5a2a00; text-shadow: 0 0 18px rgba(255, 200, 90, .7), 0 3px 6px #000; }
.sgwin .sgw-txt p { margin: 4px 0 10px; font-size: 15px; font-weight: 700; }
.sgwin .sgw-st { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 12px; }
.sgwin .sgw-st span { padding: 3px 10px; border-radius: 6px; background: rgba(12, 10, 8, .82); box-shadow: inset 0 0 0 1px rgba(150, 115, 60, .9); font-size: 12px; }
.sgwin .sgw-st b { color: #ffd98a; }
.sgwin .sgw-gift { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 12px 4px 6px; border-radius: 8px; background: rgba(40, 26, 8, .88); box-shadow: inset 0 0 0 1px #f0c86e; text-align: left; }
.sgwin .sgw-gift img { width: 32px; height: 32px; image-rendering: pixelated; }
.sgwin .sgw-gift b { display: block; font-size: 13px; color: #ffe296; }
.sgwin .sgw-gift small { font-size: 11px; color: #d2c3a5; }
.sgwin .sgw-cd { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 7px 5px 5px; border-radius: 26px; background: rgba(10, 8, 6, .88); box-shadow: inset 0 0 0 1px rgba(150, 115, 60, .9); white-space: nowrap; pointer-events: auto; font-size: 13px; color: #f0e4c8; animation: sgwUpC .6s .6s ease-out both; }
.sgwin .sgw-cd i { position: relative; width: 36px; height: 36px; font-style: normal; }
.sgwin .sgw-cd svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sgwin .sgw-cd circle { fill: none; stroke: #4a3f2c; stroke-width: 3; }
.sgwin .sgw-cd circle.p { stroke: #f0c86e; stroke-dasharray: 94.25; }
.sgwin .sgw-cd i b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #ffe6a0; }
.sgwin .sgw-cd .btn { padding: 6px 12px; font-size: 12px; }
body.land .sgwin .sgw-txt { top: min(calc(var(--py, 42%) + 84px), calc(100% - 140px)); }
body.land .sgwin .sgw-txt h2 { font-size: 32px; }
body.land .sgwin .sgw-txt p { margin: 2px 0 6px; font-size: 13px; }
body.land .sgwin .sgw-gift { position: absolute; right: 14px; top: -6px; margin: 0; }
body.land .sgwin .sgw-cd { left: auto; right: 14px; bottom: 46px; transform: none; animation-name: sgwUp; } /* 橫式：左下是聊天列，倒數放右邊獎勵包下面 */
.sgres-cd { margin: 6px 0 0; font-size: 12px; opacity: .75; }
@keyframes sgwIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgwBeam { from { opacity: .7; } to { opacity: 1; } }
@keyframes sgwCrown { from { transform: translateY(-40px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sgwUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sgwUpC { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.mapwrap.sgwon .sghud .sgcmds, .mapwrap.sgwon .sghud .sggm, .mapwrap.sgwon #sgLeave { display: none; } /* 勝利儀式時軍令、測試鈕、離開戰場收起來 */

/* 說話之島打怪（2026-10-30 使用者）：模式大鈕第一行「話島」、第二行「只能手動」 */
body.hunting.land #tab-live #modeBar.vilfix #bMode::before, body.hunting.land #tab-live #modeBar.on.vilfix #bMode::before { content: "話島"; color: #ddd2bb; }

/* 中了王的法術（2026-10-30 使用者選甲）：直式在地圖右下經驗娃娃上面，橫式在頭像血魔條下面；點了跳說明（hunt.js debuffSync） */
#tab-live .dbf { position: absolute; right: 10px; bottom: 44px; z-index: 3; display: flex; gap: 10px; }
body.hunting #tab-live .dbf { margin-bottom: 4.1%; }
body.hunting.land #tab-live .dbf { right: auto; bottom: auto; left: 280px; top: 36px; margin: 0; z-index: 6; } /* 血魔條右邊、公告列下面（2026-10-30 使用者紅框：原本在頭像下會壓到戰報） */
#tab-live .dbf { gap: 14px 4px; flex-direction: row-reverse; flex-wrap: wrap; align-content: flex-start; } /* 狀態之間靠近一點；跟天堂一樣從右邊開始往左排（2026-10-31 使用者） */
/* 直式：狀態列搬到右上，跟地圖選單同一排；雷達開著就排在雷達下面（radar.js 設 --rdb）；地圖選單（三條橫那排 z-index 4）展開時蓋在狀態上面（2026-10-31 使用者） */
body.hunting:not(.land) #tab-live .dbf { right: 8px; bottom: auto; top: 11px; margin: 0; z-index: 3; }
/* 橫式：貼在「王出現了」公告列正下方、右邊對齊、從右往左排（位置由 hunt.js dbfPlace 量公告列算好寫在 style；這裡是量到之前的預設） */
body.hunting.land #tab-live .dbf { position: fixed; left: auto; right: 34vw; top: 36px; bottom: auto; margin: 0; z-index: 2; } /* 最底層：其他按鈕、面板重疊時都蓋在它上面，永遠擋不到東西（2026-10-31 使用者） */
/* 2026-10-31 使用者：直式狀態在上、雷達在下（雷達照狀態列實際高度往下排，hunt.js debuffSync 設 --dbh） */
body.hunting.rdon:not(.land) #tab-live .dbf { top: 11px; }
body.hunting:not(.land) #tab-live .radar { top: calc(11px + var(--dbh, 0px) + 6px); }
#tab-live .dbf .db { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; cursor: pointer;
  font: 900 12px/1 "Microsoft JhengHei", sans-serif; text-shadow: 0 1px 2px #000; -webkit-tap-highlight-color: transparent; }
#tab-live .dbf .db:has(img) { width: 26px; height: 26px; border-radius: 4px; background: #000 !important; box-shadow: 0 0 0 1px #c9a35a, 0 0 6px rgba(127, 196, 255, .8) !important; }
#tab-live .dbf .db img { width: 26px; height: 26px; border-radius: 4px; display: block; }
#tab-live .dbf .db.slow { background: radial-gradient(circle at 35% 30%, #7fc4ff, #1d4f8c); box-shadow: 0 0 0 1.5px #c9a35a, 0 0 6px #7fc4ff; }
#tab-live .dbf .db.frozen { background: radial-gradient(circle at 35% 30%, #c9f3ff, #3b8fae); box-shadow: 0 0 0 1.5px #c9a35a, 0 0 6px #c9f3ff; }
#tab-live .dbf .db em { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); font: 700 9px/1 "Microsoft JhengHei", sans-serif; font-style: normal;
  background: rgba(0, 0, 0, .8); color: #fff; border-radius: 5px; padding: 1px 3px; white-space: nowrap; }
body.insg #tab-live .dbf { display: none !important; }
body.insg #modeBar { display: none !important; } /* 攻城中自動／手動沒有作用，模式大鈕藏起來（2026-11-04 使用者） */
#tab-live .dbf .db.spd { background: transparent !important; box-shadow: none !important; } /* 三段加速：遊戲狀態圖示本身有框，不另外加框（2026-10-31） */

/* 帳本「還沒進遊戲的物品」橫式（2026-10-30 使用者：橫式沒做到）：左欄總數＋分類＋點到的道具，右邊格子一排 8 格、只有格子捲動，關閉鈕固定在底部 */
body:is(.land, .lpanel) .sheet .card.bagsheet { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); margin-bottom: 8px; padding-top: 10px; padding-bottom: 0; display: flex; flex-direction: column; }
body:is(.land, .lpanel) .bagsheet .bag-h { margin: 0 0 6px; font-size: 15px; }
body:is(.land, .lpanel) .bagsheet #bagBox { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 12px; min-height: 0; flex: 1; }
body:is(.land, .lpanel) .bagsheet .bag-sum { grid-column: 1; grid-row: 1; margin: 0 0 6px; gap: 4px; }
body:is(.land, .lpanel) .bagsheet .bag-sum div { padding: 4px 0; }
body:is(.land, .lpanel) .bagsheet .bag-sum b { font-size: 14px; }
body:is(.land, .lpanel) .bagsheet .bag-sum span { font-size: 10px; }
body:is(.land, .lpanel) .bagsheet .bag-tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 6px; }
body:is(.land, .lpanel) .bagsheet .bag-tabs button { padding: 5px 0; }
body:is(.land, .lpanel) .bagsheet .bag-pop { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0; }
body:is(.land, .lpanel) .bagsheet .bag-grid, body:is(.land, .lpanel) .bagsheet .bag-none { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
body:is(.land, .lpanel) .bagsheet .bag-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; max-height: calc(100dvh - 118px); }
body:is(.land, .lpanel) .bagsheet .bag-note { grid-column: 1; grid-row: 4; margin: 4px 0 0; font-size: 10px; }
body:is(.land, .lpanel) .sheet .card.bagsheet .acts { position: sticky; bottom: 0; margin: 4px -14px 0; padding: 8px 14px 10px; background: linear-gradient(rgba(14, 12, 10, 0), #0e0c0a 40%); }
body:is(.land, .lpanel) .sheet .card.bagsheet .acts .btn { height: 36px; }
body:is(.land, .lpanel) .sheet .card.bagsheet .acts .btn { grid-column: 1 / -1; width: 100%; }

/* 物品欄（2026-10-30 使用者選乙＋三分頁）：綠框「新」＝還沒進遊戲、藍框「箱」＝收穫箱、E＝穿在身上；右上綠字／藍字＝會多幾個 */
.invsheet .bag-c .eq { position: absolute; left: 3px; top: 2px; font: 900 9px/1 sans-serif; color: #7fe07f; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.invsheet .bag-c.nw { box-shadow: inset 0 0 0 1.5px #6fd36f, 0 0 6px rgba(111, 211, 111, .45); }
.invsheet .bag-c.bx { box-shadow: inset 0 0 0 1.5px #6fb7ff, 0 0 6px rgba(111, 183, 255, .45); }
.invsheet .bag-c .nwb { position: absolute; left: 0; top: 0; font: 700 9px/1 sans-serif; color: #0b2a0b; background: #7fe07f; border-radius: 5px 0 6px 0; padding: 2px 3px; }
.invsheet .bag-c .bxb { position: absolute; left: 0; bottom: 0; font: 700 9px/1 sans-serif; color: #06203a; background: #8cc8ff; border-radius: 0 6px 0 5px; padding: 2px 3px; }
.invsheet .bag-c .plus { position: absolute; right: 3px; top: 2px; font: 700 9px/1 sans-serif; color: #7fe07f; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.invsheet .bag-c .plusb { position: absolute; right: 3px; top: 12px; font: 700 9px/1 sans-serif; color: #8cc8ff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.invsheet .bag-sum.s4 div span { font-size: 10px; }
.invsheet .bag-pop p.nw { color: #9fe09f; } .invsheet .bag-pop p.bx { color: #9fd0ff; }
.invsheet .bag-pop p.tot { border-top: 1px solid rgba(214, 172, 82, .25); padding-top: 4px; color: #eadbb8; }
.invsheet .inv-ln { display: grid; gap: 1px; margin-top: 5px; font-size: 11px; color: #bdb09a; }
body:is(.land, .lpanel) .invsheet .bag-h { grid-column: 1 / -1; }
body:is(.land, .lpanel) .invsheet #bagBox { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
body:is(.land, .lpanel) .invsheet .bag-h { grid-row: 1; margin-bottom: 4px; }
body:is(.land, .lpanel) .invsheet .bag-sum { grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:is(.land, .lpanel) .invsheet .bag-tabs { grid-row: 3; }
body:is(.land, .lpanel) .invsheet .bag-pop { grid-row: 4; min-height: 0; max-height: 100%; overflow-y: auto; } /* 說明太長自己捲，不壓到下面（2026-10-30） */
body:is(.land, .lpanel) .invsheet .bag-pop ~ .bag-note { display: none; } /* 選了道具：提示先藏起來，讓說明有地方放 */
body:is(.land, .lpanel) .invsheet .bag-note { grid-row: 5; }
body:is(.land, .lpanel) .invsheet .bag-grid, body:is(.land, .lpanel) .invsheet .bag-none { grid-row: 2 / span 4; }
.invsheet .acts .btn { grid-column: 1 / -1; width: 100%; }

/* 雷達大地圖：練功地圖的樓梯、出口名稱寫在圖釘下面（2026-10-31） */
.fmap .fm-pin .fm-pl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 11px; font-style: normal;
  color: #f3d98a; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 0 #000; pointer-events: none; }

/* 萬用傳送師選單（2026-10-30）：新傲慢之塔一樓一條，右邊王的狀態與人數 */
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tw-head h2 { margin: 0; }
.tw-note { margin: 4px 0 10px; font-size: 12px; }
.tw-list { display: grid; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tw-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 9px 12px; text-align: left; cursor: pointer;
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .35); color: #eadbb8; font: inherit; }
.tw-row:active { filter: brightness(1.15); }
.tw-row b { font-size: 15px; color: var(--gold); }
.tw-sub { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #9c8a66; }
.tw-sub .on { color: #ff9a8a; }
body.land .twsheet .tw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 帳本本趟（2026-10-30 使用者選乙）：左邊綠色收穫、右邊紅色消耗、底下大字淨賺；撿到的道具點了打開物品欄
 * 整塊（標題＋收穫｜消耗＋撿到的道具）包在一個大框 .lg-cur，裡面兩塊是框內小區塊，跟下面最近幾趟紀錄分開 */
.lg-cur { padding: 10px 10px 12px !important; box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .6), 0 0 10px rgba(243, 213, 138, .12) !important; }
.lg-curh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.lg-curh h2 { margin: 0; font-size: 17px; letter-spacing: .08em; color: var(--gold); }
.lg-curh h2::before { display: none; }
.lg-curh small { color: var(--muted); font-size: 12px; }
.lg-cur .lg-two, .lg-cur .lg-inv, .lg-cur .lg-none { border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(214, 172, 82, .28); }
.lg-cur .lg-two { margin-bottom: 8px; }
.lg-cur .lg-inv, .lg-cur .lg-none { padding: 10px 12px; }
.lg-cur .lg-none p { margin: 0; }
.lg-cur + .lg-hist { margin-top: 16px; }
.lg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 !important; overflow: hidden; }
.lg-two > div { min-width: 0; padding: 10px 12px; }
.lg-two > div + div { border-left: 1px solid rgba(214, 172, 82, .2); }
.lg-two h3 { margin: 0 0 6px; font-size: 13px; } .lg-two .g h3 { color: #8fe08f; } .lg-two .r h3 { color: #ff9a8a; }
.lg-two p { display: flex; justify-content: space-between; gap: 6px; margin: 3px 0; font-size: 12px; color: #cdbf9f; }
.lg-two p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-two p b { color: #eadbb8; white-space: nowrap; }
.lg-two p.xp { display: block; margin-top: 6px; font-size: 11px; color: #9c8a66; }
.lg-two .net { grid-column: 1 / -1; display: flex; justify-content: center; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(214, 172, 82, .25); background: rgba(111, 211, 111, .08); }
.lg-two .net b { font-size: 20px; color: #8fe08f; } .lg-two .net span { font-size: 12px; color: #9c8a66; }
.lg-two .net.neg { background: rgba(255, 138, 122, .08); } .lg-two .net.neg b { color: #ff8a7a; }
.lg-inv { cursor: pointer; } .lg-inv:active { filter: brightness(1.1); }
.lg-inv h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 14px; color: var(--gold); }
.lg-inv h3 small { font-size: 12px; color: #f3d58a; font-weight: 400; }
.lg-inv .ics { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lg-inv .lg-ib { display: flex; align-items: center; gap: 10px; } /* 左：撿到的道具；右：物品欄圖示（2026-10-31） */
.lg-inv .lg-ibl { flex: 1; min-width: 0; }
.lg-inv .lg-bagic { flex: none; width: 54px; height: 54px; border-radius: 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.lg-inv .ics img { width: 32px; height: 32px; padding: 2px; border-radius: 5px; background: radial-gradient(#2a2016, #120d08); box-shadow: inset 0 0 0 1px #6fd36f; image-rendering: pixelated; }
.lg-inv .ics s { text-decoration: none; font-size: 12px; color: #9c8a66; margin-left: 2px; }
.lg-inv .lg-invn { margin: 6px 0 0; font-size: 11px; }
.lg-none .lg-bagbtn { display: block; width: 100%; margin-top: 8px; }

/* 前往台灣（2026-10-31）：公告列顯示船班、機位（藍）；飛行中全螢幕飛行畫面；機場櫃台選單 */
body.hunting header.top .lvnotice.tr span, body.hunting header.top .lvnotice.quiet.tr span { color: #cfeaff; font-weight: 700; }
body.hunting header.top .lvnotice.tr span b { color: #8fd8ff; }
.flyscr { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #6fb2e6; display: grid; place-items: center; transition: opacity .6s; }
.flyscr.out { opacity: 0; pointer-events: none; }
.flyscr .fly-sky { position: absolute; inset: -20% -50%; background:
  radial-gradient(ellipse 18% 6% at 20% 30%, rgba(255,255,255,.75), transparent 70%), radial-gradient(ellipse 24% 7% at 70% 62%, rgba(255,255,255,.6), transparent 70%),
  radial-gradient(ellipse 14% 5% at 45% 82%, rgba(255,255,255,.7), transparent 70%), radial-gradient(ellipse 20% 6% at 88% 20%, rgba(255,255,255,.55), transparent 70%),
  linear-gradient(#4f97d6, #a9d6f5); animation: flySky 7s linear infinite; }
@keyframes flySky { from { transform: translateX(0); } to { transform: translateX(-33%); } }
.flyscr .fly-pl { position: relative; width: min(92vw, 820px); max-height: 70vh; object-fit: contain; border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 30, 60, .45); animation: flyBob 3.2s ease-in-out infinite; }
@keyframes flyBob { 50% { transform: translateY(-8px) rotate(-.6deg); } }
.flyscr .fly-cap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 7vh); display: flex; gap: 10px; justify-content: center; align-items: baseline;
  color: #fff; text-shadow: 0 2px 6px rgba(0, 30, 60, .7); font-size: 17px; }
.flyscr .fly-cap b { font-size: 22px; letter-spacing: .04em; }
.flyscr .fly-cap em { font-style: normal; opacity: .9; }
.plsheet .pl-hero img { width: 100%; border-radius: 8px; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.plsheet .pl-rows { margin: 12px 0 4px; display: grid; gap: 6px; }
.plsheet .pl-rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(201, 163, 90, .2); padding-bottom: 5px; }
.plsheet .pl-rows dt { opacity: .75; }
.plsheet .pl-rows dd { margin: 0; font-weight: 700; }
.plsheet .pl-rows dd.bad { color: #ff8a7a; }
.plsheet .pl-note { margin: 8px 0 0; }
.gmpl section h3 { margin: 12px 0 6px; font-size: 14px; }
.gmpl .gmpn em { font-style: normal; opacity: .7; margin-left: 6px; font-size: 12px; }

/* 港口主人（2026-10-31）：船圖去背，墊海水色；你的船票（這一班）綠字 */
.plsheet .sh-hero img { background: radial-gradient(ellipse at 50% 60%, #3f7fae, #1d4a72); object-fit: contain; }
.plsheet .pl-rows dd .ok { color: #8fe08a; }
/* 橫式（2026-10-31 使用者：機場櫃台、測試傳送橫式沒做到）：櫃台圖在左、資料在右；測試傳送全圖照螢幕高度縮 */
body.land .sheet .card.plsheet { width: min(780px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); margin-bottom: 8px; padding: 10px 14px 12px; }
body.land .sheet .card.plsheet #plBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4px 16px; align-items: start; }
body.land .sheet .card.plsheet .pl-hero { grid-row: 1 / span 3; }
body.land .sheet .card.plsheet .pl-hero img { aspect-ratio: auto; max-height: calc(100dvh - 90px); }
body.land .sheet .card.plsheet .pl-rows { margin: 0; gap: 4px; }
body.land .sheet .card.plsheet .pl-note { font-size: 12px; margin: 4px 0 0; }
body.land .sheet .card.plsheet .acts { margin-top: 8px; }
body.land .sheet .card.gmsheet { width: min(900px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); margin-bottom: 8px; padding-top: 10px; padding-bottom: 8px; }
body.land .sheet .card.gmsheet h2 { margin: 0; font-size: 16px; }
body.land .sheet .card.gmsheet > p.dim { margin: 2px 0 4px; font-size: 12px; }
body.land .gmsheet .gmmap { max-height: calc(100dvh - 118px); text-align: center; }
body.land .gmsheet .gmin:not(.z) { display: inline-block; width: auto; vertical-align: top; }
body.land .gmsheet .gmin:not(.z) img { width: auto; max-width: 100%; max-height: calc(100dvh - 122px); }
body.land .gmsheet .gmacts { margin-top: 6px; }
/* 測試傳送全圖（2026-10-31 使用者紅框）：橫式時座標＋放大／關閉／傳送直排在全圖右邊 */
body.land .sheet .card.gmsheet:has(.gmmap) { position: relative; }
body.land .sheet .card.gmsheet:has(.gmmap) .gmmap { margin-right: 150px; }
body.land .sheet .card.gmsheet:has(.gmmap) .gmacts { position: absolute; right: 14px; top: 64px; width: 136px; margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
body.land .sheet .card.gmsheet:has(.gmmap) .gmacts .num { flex: none; text-align: center; font-size: 12px; line-height: 1.4; }
body.land .sheet .card.gmsheet:has(.gmmap) .gmacts .btn { width: 100%; height: 46px; }

/* 船班測試（2026-10-31） */
.gs-now { margin: 8px 0; line-height: 1.7; }
.gs-now b { color: var(--gold); }

/* 機上頭等艙服務（2026-10-31）：兩樣點心一行一樣，圖示＋名稱效果＋價錢鈕 */
.cbsheet .cb-lead { margin: 6px 0 10px; text-align: center; color: #e8d6a8; font-style: italic; }
.cbsheet .cb-list { display: grid; gap: 10px; }
.cbsheet .cb-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid rgba(201, 163, 90, .35); border-radius: 4px; background: linear-gradient(180deg, rgba(60, 40, 22, .55), rgba(20, 14, 10, .55)); }
.cbsheet .cb-item img { width: 36px; height: 36px; image-rendering: pixelated; }
.cbsheet .cb-tx { display: grid; gap: 2px; min-width: 0; }
.cbsheet .cb-tx b { color: #ffd98a; font-size: 15px; }
.cbsheet .cb-tx span { font-size: 13px; opacity: .85; }
.cbsheet .cb-tx em { font-style: normal; font-size: 12px; color: #8fe08a; }
.cbsheet .cb-item .btn { white-space: nowrap; padding: 0 14px; height: 40px; }

/* 船上、機艙裡的倒數牌（2026-10-31）：上方中間、不擋點擊；最後 10 秒變紅閃 */
.trcd { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); transform: translateX(-50%); z-index: 4; pointer-events: none;
  display: flex; align-items: baseline; gap: 10px; padding: 6px 16px 7px; border: 1px solid #0a0806; border-radius: 3px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(40, 32, 24, .92), rgba(14, 11, 9, .92)); box-shadow: inset 0 0 0 1px #96784a, 0 2px 8px rgba(0, 0, 0, .6); }
.trcd span { font-size: 13px; letter-spacing: .08em; color: #e8d6a8; }
.trcd b { font-size: 22px; color: #ffd98a; letter-spacing: .04em; text-shadow: 0 1px 2px #000; min-width: 3.2em; text-align: right; }
.trcd.hot b { color: #ff6a55; animation: trcdHot .5s ease-in-out infinite alternate; }
@keyframes trcdHot { to { opacity: .45; } }
/* 倒數牌位置（2026-11-01 使用者紅框：直式擋在畫面中間、橫式靠右被技能鈕蓋住）：改成小一條，
   直式放在左上選單鈕和右上小圖示中間那一排、橫式放上方正中間 */
.trcd { top: calc(env(safe-area-inset-top, 0px) + 76px); align-items: center; gap: 6px; padding: 2px 9px 3px; }
.trcd span, .trcd b { font-size: 12px; line-height: 1.4; } /* 字統一小小的、不占空間（2026-11-01 使用者：飛機／船都一樣） */
.trcd b { min-width: 2.6em; text-shadow: none; }
body.land .trcd { top: calc(env(safe-area-inset-top, 0px) + 72px); }
/* 到達對話視窗 */
.arsheet .ar-t { margin: 12px 0 6px; }
.arsheet .ar-say { margin: 0 0 4px; line-height: 1.75; color: #eadcb8; }
.arsheet .ar-say b { color: #ffd98a; }
body.land .sheet .card.arsheet { width: min(560px, calc(100vw - 24px)); }
body.land .sheet .card.arsheet .ar-hero img { max-height: calc(100dvh - 230px); }

/* 機上點餐二次確認（2026-10-31） */
.cbsheet .cb-ok { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 4px; text-align: center; }
.cbsheet .cb-ok img { width: 48px; height: 48px; image-rendering: pixelated; }
.cbsheet .cb-ok b { font-size: 17px; color: #ffd98a; }
.cbsheet .cb-ok p { margin: 0; line-height: 1.6; }
.cbsheet .cb-ok em { font-style: normal; color: #ffd98a; font-weight: 700; }
.cbsheet .cb-warn { color: #ff8a7a; font-size: 13px; }

/* 買票二次確認（2026-10-31） */
.plsheet .cb-ok { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 4px; text-align: center; }
.plsheet .cb-ok b { font-size: 16px; color: #ffd98a; }
.plsheet .cb-ok p { margin: 0; line-height: 1.6; }
.plsheet .cb-ok em { font-style: normal; color: #ffd98a; font-weight: 700; }
.plsheet .by-im { width: 220px; max-width: 70%; border-radius: 6px; background: radial-gradient(ellipse at 50% 60%, #3f7fae, #1d4a72); }
body.land .sheet .card.plsheet #plBody:has(.cb-ok) { display: block; }

/* 鹿港天后宮上香（2026-11-02 改隱藏玩法）：點香爐走過去才跳的小視窗（媽祖小像＋字）、上香特效（煙、筊杯、金光）；狀態列圖示走 .db:has(img) 同款方框 */
#tab-live .shrdlg { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); z-index: 7; width: 230px; max-width: 86%; overflow: hidden;
  background: rgba(38, 12, 7, .95); border: 2px solid #c9a35a; border-radius: 4px; box-shadow: 0 3px 14px rgba(0, 0, 0, .7); animation: shrIn .25s ease-out; } /* 丙款廟匾（2026-11-02 使用者選） */
#tab-live .shrdlg .shr-hd { padding: 4px 0 3px; text-align: center; font: 700 14px/1.3 "Microsoft JhengHei", sans-serif; letter-spacing: .35em; text-indent: .35em; color: #ffd98a; background: #8c1d12; border-bottom: 1px solid #c9a35a; }
#tab-live .shrdlg .shr-main { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
#tab-live .shrdlg .shr-face { flex: none; align-self: flex-start; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1.5px #c9a35a, 0 0 8px rgba(255, 200, 90, .35); }
#tab-live .shrdlg .shr-txt { min-width: 0; flex: 1; text-align: left; font-size: 14px; line-height: 1.6; color: #f2e6c8; }
#tab-live .shrdlg p { margin: 0 0 4px; }
#tab-live .shrdlg p:last-child { margin-bottom: 0; }
#tab-live .shrdlg b { color: #ffd98a; }
#tab-live .shrdlg em { font-style: normal; font-weight: 700; color: #ffd98a; }
#tab-live .shrdlg .shr-big { display: block; margin-bottom: 2px; font-size: 15px; }
#tab-live .shrdlg .shr-poem { font-size: 13px; color: #fff0c8; letter-spacing: .03em; }
#tab-live .shrdlg .shr-cd { font-size: 12px; color: #c4ad85; }
#tab-live .shrdlg .shr-bt { display: flex; gap: 8px; padding: 0 12px 10px; }
#tab-live .shrdlg .shr-bt .btn { flex: 1; min-width: 0; padding: 5px 0; font-size: 14px; }
body.land #tab-live .shrdlg { position: fixed; top: 50%; transform: translate(-50%, -50%); z-index: 40; animation-name: shrInC; } /* 橫式：畫面正中間（2026-11-02 使用者紅框） */
@keyframes shrInC { from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes shrIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%); } }
#tab-live .shrfx { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
#tab-live .shrfx .sm { position: absolute; left: -7px; top: -34px; width: 14px; height: 14px; border-radius: 50%; background: rgba(235, 228, 214, .6); filter: blur(3px); opacity: 0; animation: shrSmoke 1.9s ease-out forwards; }
#tab-live .shrfx .s1 { margin-left: -9px; } #tab-live .shrfx .s2 { animation-delay: .15s; } #tab-live .shrfx .s3 { margin-left: 9px; animation-delay: .3s; }
@keyframes shrSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -70px) scale(2.2); } }
#tab-live .shrfx .jb { position: absolute; width: 20px; height: auto; opacity: 0; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); animation: shrDrop .7s cubic-bezier(.5, 0, .7, 1) 1s forwards; }
#tab-live .shrfx .jb.a { left: -24px; top: 14px; --r: -12deg; } #tab-live .shrfx .jb.b { left: -2px; top: 20px; --r: 10deg; animation-delay: 1.08s; } /* 落在香爐前面的地上（2026-11-02 使用者截圖：原本掉在角色腳上） */
@keyframes shrDrop { 0% { opacity: 1; transform: translateY(-80px) rotate(200deg); } 70% { transform: translateY(0) rotate(var(--r)); } 85% { transform: translateY(-6px) rotate(var(--r)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--r)); } }
#tab-live .shrfx .glow { position: absolute; left: -45px; top: -70px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 120, .85), rgba(255, 190, 60, 0) 70%); opacity: 0; }
#tab-live .shrfx.gold .glow { animation: shrGlow 1s ease-out 1.6s forwards; }
@keyframes shrGlow { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
/* 免費地圖、四龍巢太久沒操作而原地下線（2026-11-02）：地圖中間的提示，點擊穿透到地圖（點地面就回來） */
.parknote { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; margin: 0; padding: 10px 16px; max-width: 86%; text-align: center; pointer-events: none;
  font-size: 14px; line-height: 1.6; color: #f2cf7a; background: rgba(10, 8, 6, .82); border: 1px solid rgba(216, 178, 90, .6); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

/* 寄售行情（2026-11-02 使用者選甲・交易所列表；只能看）：入口在掉落分頁最上面、帳本頁下面 */
.cs-entry { display: block; width: 100%; margin: 8px 0; padding: 9px 12px; text-align: left; color: #f2cf7a; background: linear-gradient(180deg, #2a2118, #17120e); border: 1px solid #6a5636; border-radius: 4px; }
.cs-sheet { width: min(96vw, 460px); max-height: 88vh; display: flex; flex-direction: column; }
.cs { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cs-hd { display: flex; align-items: center; gap: 8px; }
.cs-hd h2 { margin: 0; }
.cs-hd small { color: #a8977a; }
.cs-hd .cs-re { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.cs-tabs { display: flex; margin: 8px 0 4px; border-bottom: 1px solid #3a3020; }
.cs-tabs button { flex: 1; padding: 7px 0; background: none; border: 0; border-bottom: 2px solid transparent; color: #a8977a; font: inherit; cursor: pointer; }
.cs-tabs button.on { color: #f2cf7a; border-bottom-color: #c9a35a; }
.cs-fl { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 6px; }
.cs-fl button { padding: 2px 9px; font-size: 12px; color: #c8b998; background: #1b1712; border: 1px solid #4a3d28; border-radius: 3px; cursor: pointer; }
.cs-fl button.on { color: #f2cf7a; border-color: #c9a35a; }
.cs-fl .cs-sort { margin-left: auto; }
.cs-list { overflow-y: auto; min-height: 120px; flex: 1; -webkit-overflow-scrolling: touch; }
.cs-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #2a2218; cursor: pointer; }
.cs-row:active { background: rgba(201, 163, 90, .08); }
.cs-row img, .cs-noic { flex: none; width: 32px; height: 32px; image-rendering: pixelated; background: #241e16; box-shadow: inset 0 0 0 1px #4a3d28; border-radius: 3px; }
.cs-noic { display: block; }
.cs-nm { flex: 1; min-width: 0; }
.cs-nm b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-nm small, .cs-pr small { display: block; color: #8f8068; font-size: 11px; }
.cs-pr { flex: none; text-align: right; color: #f2cf7a; font-weight: 600; white-space: nowrap; }
.cs-msg { padding: 18px 4px; text-align: center; }
.cs-ft { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #3a3020; color: #8f8068; font-size: 12px; text-align: center; }
.cs-mine { margin: 4px 0 8px; padding: 8px 10px; border: 1px solid #4a3d28; border-radius: 4px; background: rgba(0, 0, 0, .3); }
.cs-mine p, .cs-tipp p { display: flex; justify-content: space-between; margin: 2px 0; }
.cs-mine span, .cs-tipp span { color: #a8977a; }
.cs-mine b, .cs-tipp b { color: #f2cf7a; font-weight: 500; }
.cs-tipp { margin: 8px 0 4px; padding: 6px 10px; border: 1px solid #4a3d28; border-radius: 4px; }
.cs-how { margin: 6px 0; color: #c8b998; font-size: 12px; text-align: center; }
.cs-how b { color: #f2cf7a; font-weight: 500; }
/* 網頁購買（2026-11-03）：數量、要付多少、按兩次才買 */
.cs-buy { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid #6b5630; border-radius: 4px; background: rgba(242, 207, 122, .05); }
.cs-q { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cs-q span { color: #a8977a; margin-right: auto; }
.cs-q button { min-width: 34px; height: 32px; border: 1px solid #6b5630; border-radius: 4px; background: #2a2116; color: #f2cf7a; }
.cs-q input { width: 84px; height: 32px; text-align: center; font-size: 16px; border: 1px solid #6b5630; border-radius: 4px; background: #14100a; color: #fff3d6; }
.cs-tot { margin: 2px 0 6px; text-align: center; color: #c8b998; }
.cs-tot b { color: #f2cf7a; font-size: 18px; }
.cs-go { width: 100%; }
.cs-bm { margin: 0 0 6px; text-align: center; font-size: 13px; }
.cs-bm:empty { display: none; }
.cs-bm.ok { color: #9be38c; }
.cs-bm.err { color: #ff9a8a; }
.cs-how.cs-safe { color: #e8b48a; line-height: 1.6; }
.cs-hd .cs-re:disabled { opacity: .55; }
/* 帳本頁寄售行情卡（乙・即時行情卡，2026-11-02） */
.cs-card { cursor: pointer; padding: 10px 14px; }
.cs-card:active { filter: brightness(1.15); }
.cs-ch { display: flex; align-items: center; justify-content: space-between; }
.cs-ch h2 { margin: 0; font-size: 16px; color: #f2cf7a; }
.cs-ch span { color: #f2cf7a; font-size: 13px; }
.cs-cz { display: flex; gap: 8px; margin: 8px 0 6px; }
.cs-cz span { flex: 1; text-align: center; padding: 5px 0; border: 1px solid #4a3d28; border-radius: 3px; background: rgba(0, 0, 0, .3); color: #c8b998; }
.cs-cz b { color: #f2cf7a; font-size: 15px; margin-left: 4px; }
.cs-cl { margin: 0; color: #a8977a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-x { display: none; flex: none; width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1; color: #c8b998; background: #1b1712; border: 1px solid #4a3d28; border-radius: 3px; cursor: pointer; }
/* 橫式（2026-11-02 使用者截圖：清單只剩一小條）：卡片撐滿高度、關閉鈕移到右上角、清單兩欄 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .sheet .card.cs-sheet { width: min(96vw, 760px); max-width: min(96vw, 760px); height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: none; padding: 8px 12px; margin: 0; }
  .cs-sheet > .acts { display: none; }
  .cs-x { display: block; }
  .cs-hd h2 { font-size: 16px; }
  .cs-tabs { margin: 4px 0 2px; }
  .cs-tabs button { padding: 4px 0; }
  .cs-fl { padding: 3px 0 4px; }
  .cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-content: start; min-height: 0; }
  .cs-list .cs-msg, .cs-list .cs-mine, .cs-list .cs-how { grid-column: 1 / -1; }
  .cs-row { padding: 4px 2px; }
  .cs-ft { margin-top: 4px; padding-top: 4px; font-size: 11px; }
  /* 寄售品說明（使用者截圖：關閉鈕被切掉）：左邊道具說明、右邊售價賣家期限，關閉移到右上角 */
  .sheet .card.cs-tipsheet { position: relative; width: min(96vw, 720px); max-width: min(96vw, 720px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px);
    margin: 0; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 12px; align-content: start; }
  .cs-tipsheet .itip { grid-row: 1 / span 3; }
  .cs-tipsheet .cs-tipp { margin: 34px 0 6px; }
  .cs-tipsheet > .acts { display: none; }
  .sheet .card.cs-tipsheet > .cs-tx { display: block; position: absolute; top: 8px; right: 10px; z-index: 1; }
}

/* ===== 交易所入口（2026-11-04 使用者：從雷達下面搬到地圖選單「掛機地圖」右邊；圖示 ui/mkt.png＝GPT 出的錢袋（11-05 使用者選 B，舊的市集攤備份在 金庸/交易所圖示））===== */
#tab-live .mmi.mktmi { color: #f3d58a; }
#tab-live .mmi.mktmi .mkt-ic { display: block; width: 28px; height: 28px; background: url("../../hunt/assets/ui/mkt.png?v=1105") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
#tab-live .mmi .mkt-new { position: absolute; top: -7px; right: -9px; min-width: 18px; padding: 1px 5px; border-radius: 9px; font: 700 10px/14px var(--f-body); font-style: normal;
  color: #fff; background: #d6221e; border: 1px solid #ffdcaa; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); text-align: center; z-index: 1; }
/* 只能手動的地圖（說話之島、免費地圖、四龍）：直式上排的模式鈕不顯示（2026-11-04 使用者：根本不需要顯示）；橫式右下大鈕照舊 */
body:not(.land) #tab-live #modeBar.mo { display: none !important; }

/* ===== 交易所（2026-11-03 使用者選「甲 天堂M式」）：上分頁＋金幣、左分類（直式一排小鈕）、區／搜尋／排序、商品卡（橫式兩欄）每張一顆購買 ===== */
.sheet .card.cs-sheet { height: 88vh; height: 88dvh; }
.csm .cs-hd { gap: 6px; padding-bottom: 6px; border-bottom: 1px solid #5a4728; }
.csm .cs-logo { flex: none; width: 22px; height: 22px; fill: none; stroke: #f3d58a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(243, 213, 138, .45)); }
.csm .cs-logo circle { fill: #f3d58a; stroke: none; }
.csm .cs-hd h2 { font-size: 17px; color: #f3d58a; letter-spacing: .08em; margin-right: 4px; }
.csm .cs-tabs { display: flex; gap: 4px; margin: 0; border: 0; }
.csm .cs-tabs button { flex: none; padding: 3px 11px; border: 1px solid #4a3d28; border-radius: 12px; color: #a8977a; font-size: 12px; }
.csm .cs-tabs button.on { color: #f3d58a; border-color: #c9a35a; background: rgba(140, 104, 46, .45); }
.csm .cs-bal { display: none; align-items: center; gap: 4px; margin-left: auto; color: #ece2cc; font-size: 12px; white-space: nowrap; }
.csm .cs-bal b { font-weight: 700; }
.csm .cs-hd .cs-re { margin-left: auto; padding: 3px 8px; font-size: 11px; }
.csm .cs-bal:not(:empty) + .cs-re { margin-left: 4px; }
.csm .cs-cur { width: 14px; height: 14px; image-rendering: pixelated; vertical-align: -2px; }
.csm .cs-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.csm .cs-cat { display: flex; gap: 5px; padding: 7px 0 3px; overflow-x: auto; scrollbar-width: none; }
.csm .cs-cat:empty { display: none; }
.csm .cs-cat button { flex: none; padding: 3px 11px; border-radius: 12px; border: 1px solid #4a3d28; background: #1b1712; color: #ece2cc; font: 700 12px var(--f-body); cursor: pointer; }
.csm .cs-cat button.on { color: #f3d58a; border-color: #c9a35a; background: rgba(140, 104, 46, .5); }
.csm .cs-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.csm .cs-fl { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 5px 0 6px; }
.csm .cs-fl:empty { display: none; }
.csm .cs-fl [data-z], .csm .cs-fl .cs-sort { flex: none; padding: 4px 9px; border-radius: 4px; border: 1px solid #6a5636; background: #2a2118; color: #f3d58a; font: 700 12px var(--f-body); }
.csm .cs-fl [data-z].on { background: linear-gradient(180deg, #d8b064, #a87e3a); color: #2a1806; border-color: #f3d58a; }
.csm .cs-fl .cs-sort { margin-left: 0; }
.csm .cs-q { flex: 1; min-width: 0; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid #5a4728; background: #0e0b08; color: #ece2cc; font: 16px var(--f-body); }
.csm .cs-q::placeholder { color: #7d6f58; font-size: 12px; }
.csm .cs-list { display: flex; flex-direction: column; gap: 5px; padding-right: 2px; }
.csm .cs-c { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 6px; border: 1px solid #44372a; background: linear-gradient(180deg, #221b14, #18130e); cursor: pointer; }
.csm .cs-c:active { filter: brightness(1.2); }
.csm .cs-ic { position: relative; flex: none; }
.csm .cs-ic img, .csm .cs-ic .cs-noic { width: 38px; height: 38px; }
.csm .cs-ic em { position: absolute; right: 1px; bottom: 0; font: 700 9px/1 var(--f-body); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.csm .cs-nm b { font-weight: 700; font-size: 13px; }
.csm .cs-nm small { margin-top: 2px; }
.csm .cs-pr { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: #f3d58a; }
.csm .cs-pr b { font-size: 13px; }
.csm .cs-pr .cs-cur { position: relative; top: 0; }
.csm .cs-pr { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 3px; max-width: 86px; }
.csm .cs-pr small { width: 100%; text-align: right; }
.csm .cs-bb { flex: none; min-width: 46px; height: 28px; padding: 0 8px; border-radius: 5px; border: 1px solid #f3d58a; cursor: pointer;
  background: linear-gradient(180deg, #e2bb6c, #a87e3a); color: #2a1806; font: 900 13px var(--f-body); }
.csm .cs-bb.off { background: #2a2118; color: #f3d58a; border-color: #6a5636; font-weight: 700; }
.csm .cs-mine, .csm .cs-msg, .csm .cs-how { grid-column: 1 / -1; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .csm .cs-bal { display: inline-flex; }
  .csm .cs-body { flex-direction: row; gap: 10px; padding-top: 6px; }
  .csm .cs-cat { flex-direction: column; width: 84px; flex: none; padding: 0; overflow: visible; }
  .csm .cs-cat button { border-radius: 5px; text-align: left; padding: 6px 10px; font-size: 13px; position: relative; }
  .csm .cs-cat button::after { content: '›'; position: absolute; right: 8px; color: #a8977a; }
  .csm .cs-cat button.on::after { color: #f3d58a; }
  .csm .cs-fl { padding: 0 0 6px; }
  .csm .cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; column-gap: 8px; }
  .csm .cs-c { padding: 5px 6px; }
  .csm .cs-ic img, .csm .cs-ic .cs-noic { width: 34px; height: 34px; }
  .csm.mine .cs-body { padding-top: 0; }
}
/* 名稱太長（倚天屠龍雙刀(Lv1) 被切成「倚天屠…」）：最多兩行 */
.csm .cs-nm b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-size: 12px; word-break: normal; overflow-wrap: anywhere; }
.csm .cs-c { min-height: 52px; }

/* ===== 免費試用（2026-11-04 使用者：橫式角色多時「以後再說」被擠出畫面）：清單自己捲、按鈕固定在下面；橫式三欄 ===== */
.sheet .card.trialsheet { display: flex; flex-direction: column; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
.trialsheet .maps { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.trialsheet .acts { flex: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .sheet .card.trialsheet { width: min(96vw, 760px); max-width: min(96vw, 760px); padding: 10px 14px; }
  .trialsheet h2 { margin: 0 0 4px; font-size: 16px; }
  .trialsheet > p { margin: 0 0 6px; font-size: 13px; }
  .trialsheet .maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
  .trialsheet .mapopt { padding: 6px 8px; margin: 0; }
  .trialsheet .acts { margin-top: 6px; }
}

/* 橫式交易所（2026-11-04 使用者紅框）：不擠在下面那條選單，固定在右上「地圖」鈕左邊，同大小，字寫在下面 */
body.hunting.land #tab-live .mmitems > #mktBtn { position: fixed; z-index: 21; top: 84px; right: calc(var(--sr, 10px) + 46px); left: auto; bottom: auto; width: 36px; height: 36px;
  margin: 0; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(243, 213, 138, .55); background: rgba(8, 10, 12, .5); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
body.hunting.land #tab-live #mktBtn .mkt-ic { width: 30px; height: 30px; }
body.hunting.land #tab-live #mktBtn > b { display: block; position: absolute; left: 50%; top: 100%; margin-top: 2px; transform: translateX(-50%); white-space: nowrap;
  font: 700 10px/1.2 var(--f-body); color: #f3d58a; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

/* 換地圖：點中的那張要有「選中」的感覺（2026-11-04 使用者）：變亮、左邊粗金條、金框發光、字底變金褐、往右推一點；跟「金框＝現在掛的」分得出來 */
.mgrid .mt { position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.mgrid .mt.on { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 16px rgba(255, 200, 90, .65) !important; }
.mgrid .mt.on .img { filter: brightness(1) saturate(1.15) !important; }
.mgrid .mt.on .cap { background: linear-gradient(90deg, rgba(122, 82, 22, .92), rgba(60, 40, 10, .35)) !important; }
.mgrid .mt.on .cap b { color: #ffe08a; }
.mgrid .mt.on::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(#fff0b8, #d9a441); box-shadow: 0 0 8px rgba(255, 210, 110, .8); }

/* ===== 橫式大鈕・手動中（2026-11-04 使用者選乙）：中間白色「手動」、外圈金色虛線弧在轉、上方金色「↻ 點我切自動」；只能手動的地圖不套用 ===== */
#tab-live #bMode > .mq-ring, #tab-live #bMode > .mq-pill { display: none; }
@keyframes mqSpin { to { transform: rotate(360deg); } }
body.hunting.land #tab-live #modeBar.manq #bMode::before { content: "手動"; font-size: 24px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .6); }
body.hunting.land #tab-live #modeBar.manq #bMode > em { display: none; }
body.hunting.land #tab-live #modeBar.manq #bMode > .mq-ring { display: block; position: absolute; z-index: 3; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 3px dashed rgba(255, 214, 110, .1); border-left-color: transparent; border-bottom-color: transparent; animation: mqSpin 5s linear infinite; } /* 調暗調慢（2026-11-04 使用者：手動打怪時眼睛不要一直被吸過去） */
body.hunting.land #tab-live #modeBar.manq #bMode > .mq-pill { display: block; position: absolute; z-index: 4; left: 50%; top: -16px; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font: 900 11px/1.3 var(--f-body); font-style: normal; color: #2a1806; background: linear-gradient(180deg, #f1cd7c, #b6852f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.hunting.land #tab-live #modeBar.manq #bMode > .mq-ring { animation: none; } }

/* ===== 直式模式鈕（2026-11-04 使用者：跟橫式同款圓鈕縮小，放地圖右下；上排模式鈕、「手動 ×4」小牌、右上切回自動都拿掉）=====
 * hunt.js 進場時把 #modeBar 從選單列搬到 .mapwrap（選單收起來也看得到）；經驗娃娃往左讓位 */
body.hunting:not(.land) #tab-live #mmTag { display: none !important; }
body.hunting:not(.land) #tab-live #modeBar { position: absolute; z-index: 4; left: auto; top: auto; right: 10px; bottom: calc(10px + 4.1%); display: block; width: auto; height: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
body.hunting:not(.land) #tab-live .buffs { right: 80px; }
body.hunting:not(.land) #tab-live #bMode { position: relative; overflow: visible; width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; opacity: 1; color: #ffd76a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 35%, #2e2a26, #0e0c0b 70%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #3a2e1c, 0 0 0 5px #c9a050, 0 0 0 6px #000, inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 10px #000; }
body.hunting:not(.land) #tab-live #bMode .mic, body.hunting:not(.land) #tab-live #bMode > b { display: none; }
body.hunting:not(.land) #tab-live #bMode::before { content: "AUTO"; position: relative; z-index: 2; font: 900 15px/1 var(--f-display); letter-spacing: .02em; color: #ffd76a; text-shadow: 0 0 6px rgba(255, 190, 80, .55), 0 2px 0 #000; }
body.hunting:not(.land) #tab-live #modeBar.on #bMode::before { content: "手動"; font-size: 16px; color: #fff; text-shadow: 0 2px 0 #000; }
body.hunting:not(.land) #tab-live #bMode > em { display: block; position: relative; z-index: 2; left: auto; top: auto; transform: none; margin: 2px 0 0; font: 700 8px/1 var(--f-body); font-style: normal; color: #d8cdb4; }
body.hunting:not(.land) #tab-live #modeBar.manq #bMode > em { display: none; }
body.hunting:not(.land) #tab-live #bMode::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(255, 211, 106, 0) 0, rgba(255, 211, 106, .55) 62%, rgba(255, 211, 106, .08) 62%); opacity: .45;
  -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px, #000 25px, transparent 26px); mask: radial-gradient(circle, transparent 22px, #000 23px, #000 25px, transparent 26px);
  animation: autoSpin 6s linear infinite; }
body.hunting:not(.land) #tab-live #modeBar.on #bMode::after { background: rgba(200, 190, 170, .18); animation: none; opacity: 1; }
body.hunting:not(.land) #tab-live #modeBar.manq #bMode > .mq-ring { display: block; position: absolute; z-index: 3; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px dashed rgba(255, 214, 110, .1); border-left-color: transparent; border-bottom-color: transparent; animation: mqSpin 5s linear infinite; }
body.hunting:not(.land) #tab-live #modeBar.manq #bMode > .mq-pill { display: block; position: absolute; z-index: 4; left: 50%; top: -15px; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; font: 900 10px/1.3 var(--f-body); font-style: normal; color: #2a1806; background: linear-gradient(180deg, #f1cd7c, #b6852f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.hunting:not(.land) #tab-live #bMode::after, body.hunting:not(.land) #tab-live #modeBar.manq #bMode > .mq-ring { animation: none; } }

/* ===== 帳本改甲（2026-11-04 使用者）：直式先只看本趟，下面一條「最近幾趟紀錄」，點了整頁換成紀錄；橫式（lpanel）照舊用上面小分頁 ===== */
body:not(.lpanel) #tab-led:not(.lh-on) .lg-hist { display: none; }
body:not(.lpanel) #tab-led.lh-on .lg-cur, body:not(.lpanel) #tab-led.lh-on .lg-histbtn { display: none; }
body.lpanel #tab-led .lg-histbtn, body.lpanel #tab-led .lh-back { display: none; }
#tab-led .lg-histbtn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 13px 14px; border-radius: 8px; cursor: pointer;
  border: 2px solid rgba(150, 116, 60, .9); background: linear-gradient(180deg, #2a2118, #1a140e); color: #f3d58a; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
#tab-led .lg-histbtn:active { filter: brightness(1.2); }
#tab-led .lg-histbtn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #f3d58a; stroke-width: 1.8; stroke-linecap: round; }
#tab-led .lg-histbtn b { font-size: 15px; font-weight: 900; }
#tab-led .lg-histbtn span { margin-left: auto; color: #a8987c; font-size: 12px; }
#tab-led .lh-back { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 6px 12px; border-radius: 6px; border: 1px solid #6a5636; background: #2a2118; color: #f3d58a; font: 700 13px var(--f-body); cursor: pointer; }

/* 省流量（2026-11-04 使用者選乙）：提示窗＋待機畫面，直式橫式都要 */
.card.ecosheet h2 { margin: 0 0 10px; text-align: center; }
.ecotip { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ecotip li { position: relative; padding-left: 20px; line-height: 1.5; color: #ebe1cd; font-size: 14px; }
.ecotip li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #ffd66e; }
.ecotip li b { color: #ffe08a; }
.ecosub { margin: 10px 0 0; font-size: 12px; color: #bea67a; text-align: center; }
.card.ecosheet .acts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ecoscr { position: fixed; inset: 0; z-index: 9000; background: #08080a; color: #e8dcc4; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.eco-in { width: min(340px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 18px; text-align: center; }
.eco-hd h2 { margin: 0; font-size: 28px; color: #ffd66e; letter-spacing: 2px; }
.eco-hd h2::before { display: none; }
#ecoScr .eco-hd h2 { display: block; text-align: center; padding: 0; } /* 共用 h2 是靠左＋菱形，這裡要置中 */
.eco-who { margin: 6px 0 0; font-size: 14px; color: #c8bea8; }
.eco-box { border: 1px solid rgba(214, 172, 92, .45); border-radius: 14px; background: #14100c; padding: 12px 20px; }
.eco-box p { display: flex; justify-content: space-between; margin: 0; padding: 7px 0; font-size: 17px; }
.eco-box p span { color: #aaa08c; }
.eco-box p b { color: #f0e6d2; font-weight: 700; }
.eco-box p.eco-end, .eco-box p.dim { display: block; text-align: center; color: #d8c8a8; }
.eco-end small { color: #9c907a; font-size: 13px; }
.eco-ft p { margin: 0; }
.eco-at { font-size: 12px; color: #7f7664; }
.eco-go { margin-top: 18px !important; font-size: 18px; font-weight: 700; color: #dcbe78; }
.eco-tip { margin-top: 6px !important; font-size: 13px; color: #968c78; }
body.land .card.ecosheet { width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); display: grid; grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-areas: "h h" "t a" "s a"; column-gap: 18px; align-items: center; padding-top: 10px; }
body.land .card.ecosheet h2 { grid-area: h; margin-bottom: 6px; }
body.land .card.ecosheet .ecotip { grid-area: t; gap: 6px; }
body.land .card.ecosheet .ecosub { grid-area: s; margin-top: 6px; text-align: left; }
body.land .card.ecosheet .acts { grid-area: a; margin-top: 0; }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .eco-in { width: min(640px, 100%); display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "hd box" "ft box"; column-gap: 28px; row-gap: 8px; align-items: center; }
  .eco-hd { grid-area: hd; align-self: end; }
  .eco-box { grid-area: box; padding: 6px 18px; }
  .eco-box p { padding: 5px 0; font-size: 16px; }
  .eco-ft { grid-area: ft; align-self: start; }
  .eco-go { margin-top: 12px !important; }
}
/* 省流量鈕（2026-11-04 使用者：直式橫式統一放 AUTO 圓鈕左上角） */
#tab-live #modeBar > #bEco { position: absolute; z-index: 5; left: -8px; top: -8px; width: 30px; height: 30px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid rgba(214, 172, 92, .85); background: radial-gradient(circle at 50% 35%, #3a2c18, #120d07 75%); color: #ffd66e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#tab-live #modeBar > #bEco[hidden] { display: none; }
#tab-live #modeBar > #bEco .mic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
#tab-live #modeBar > #bEco:active { transform: scale(.92); }

/* ===== 天命拉霸（2026-11-04 使用者選甲・天堂原生風；文字不折行，放不下由 fitText 等比例縮小） ===== */
/* 狀態列：還沒拉的「拉霸」（金框閃）、拉到的加成（金框）；照其他狀態的樣子，字標在圖示下方 */
#tab-live .dbf .db.slotpend { box-shadow: 0 0 0 1px #ffd45e, 0 0 8px #ffcf6a !important; animation: slBtn 1.6s ease-in-out infinite alternate; }
#tab-live .dbf .db.slotpend em { color: #ffd45e; font-weight: 900; }
#tab-live .dbf .db.spd.slotb { box-shadow: 0 0 0 1px #d6ac52, 0 0 5px #d6ac5299 !important; border-radius: 4px; }
@keyframes slBtn { from { filter: brightness(1); } to { filter: brightness(1.3); } }

.slotdlg { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(5, 4, 3, .78); }
.slotdlg * { box-sizing: border-box; }
.slotdlg [data-fit] { white-space: nowrap; overflow: hidden; }
.slotdlg .sl-in { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow: auto; padding: 14px 12px 12px; border-radius: 8px;
  background: #0b0906 url(../../hunt/assets/ui/sg_hero.webp) center top / 100% auto no-repeat; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f733a, 0 12px 40px #000c; }
.slotdlg .sl-in::before { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: linear-gradient(180deg, #0b0906aa 0%, #0b0906e6 110px, #0b0906 190px); }
.slotdlg .sl-in > * { position: relative; }
.slotdlg .sl-x { position: absolute; right: 6px; top: 4px; z-index: 2; width: 34px; height: 34px; border: 0; background: none; color: #cdb98e; font-size: 26px; line-height: 1; cursor: pointer; }
.slotdlg .sl-head { text-align: center; margin: 2px 30px 10px; }
.slotdlg .sl-head h2::before, .slotdlg .sl-head h2::after { content: none; display: none; }
.slotdlg .sl-head h2 { display: block; text-align: center; margin: 0; font-family: var(--f-display); font-size: 24px; letter-spacing: .3em; padding-left: .3em; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 12px #000; }
.slotdlg .sl-head p { margin: 2px 0 0; font-size: 12px; color: #cdb98e; text-shadow: 0 1px 2px #000; }
.slotdlg .sl-box { border: 22px solid transparent; border-image: url(../../hunt/assets/ui/dlg_6948.webp) 30 fill stretch; padding: 2px; }
.slotdlg .sl-reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slotdlg .sl-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.slotdlg .sl-lab { width: 100%; text-align: center; font-size: 12px; color: #cdb98e; letter-spacing: .15em; }
.slotdlg .sl-reel { position: relative; overflow: hidden; width: 100%; height: 138px; border-radius: 4px; background: linear-gradient(180deg, #000 0%, #1c1610 30%, #1c1610 70%, #000 100%);
  border: 1px solid #6e5a32; box-shadow: inset 0 0 12px #000, 0 0 0 1px #000; }
.slotdlg .sl-reel::after { content: ""; position: absolute; left: 0; right: 0; top: 33.333%; height: 33.334%; pointer-events: none; z-index: 2;
  border-top: 2px solid #ff4a3a; border-bottom: 2px solid #ff4a3a; box-shadow: 0 0 8px #ff4a3a88, inset 0 0 8px #ff4a3a44; background: linear-gradient(90deg, #ff4a3a10, #ff4a3a22, #ff4a3a10); }
/* 中獎線（2026-11-04 使用者選乙）：紅色發光線貫穿四格、格子之間也連起來；高度由 hunt.js slotLayout 量好寫進 --midy */
.slotdlg .sl-reels { position: relative; }
.slotdlg .sl-reels::before { content: ""; position: absolute; left: -10px; right: -10px; top: var(--midy, 50%); height: 2px; margin-top: -1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff4a3a 6%, #ff4a3a 94%, transparent); box-shadow: 0 0 8px #ff4a3a; }
.slotdlg .sl-reel.won { box-shadow: inset 0 0 12px #000, 0 0 10px 2px #d6ac52aa; }
.slotdlg .sl-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.slotdlg .sl-cell { height: 46px; display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; overflow: hidden;
  font-family: var(--f-display); font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 #000; }
.slotdlg .sl-cell img { width: 26px; height: 26px; flex: none; image-rendering: pixelated; }
.slotdlg .sl-cell .nm { font-size: 12px; color: #e8d6ac; }
.slotdlg .sl-cell small { font-size: .6em; font-weight: 700; }
.slotdlg .t1 { color: #c48a52; } .slotdlg .t2 { color: #d9dde3; } .slotdlg .t3 { color: #ffd45e; } .slotdlg .t4 { color: #d78cff; }
.slotdlg .sl-stop { width: 52px; height: 52px; max-width: 100%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: url(../../hunt/assets/ui/lv_rbtn.webp) center / cover; color: #f3d48a; font-family: var(--f-display); font-weight: 900; font-size: 17px; text-shadow: 0 2px 0 #000; }
.slotdlg .sl-stop:disabled { cursor: default; filter: grayscale(1) brightness(.45); }
.slotdlg .sl-stop.next { animation: slPulse .7s ease-in-out infinite alternate; }
@keyframes slPulse { from { filter: brightness(1); } to { filter: brightness(1.4) drop-shadow(0 0 8px #ffb84a); } }
.slotdlg .sl-go { display: block; width: 100%; margin-top: 10px; height: 48px; padding: 0 10px; border: 0; cursor: pointer; font-family: var(--f-display); font-weight: 900; font-size: 19px; letter-spacing: .06em;
  color: #2a1803; background: linear-gradient(180deg, #f6dc95, #d6ac52 50%, #9a7428); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f733a, 0 6px 12px #000a; }
.slotdlg .sl-go.wide { letter-spacing: .4em; padding-left: calc(10px + .4em); }
.slotdlg .sl-go:disabled { cursor: default; filter: grayscale(.8) brightness(.5); }
.slotdlg .sl-res { margin-top: 10px; border: 22px solid transparent; border-image: url(../../hunt/assets/ui/dlg_6948.webp) 30 fill stretch; text-align: center; min-height: 112px; }
.slotdlg .sl-big { font-family: var(--f-display); font-size: 21px; font-weight: 900; color: var(--gold); letter-spacing: .04em; }
.slotdlg .sl-desc { font-size: 13px; color: #e8d6ac; line-height: 1.7; }
.slotdlg .sl-tier { display: inline-block; margin-top: 6px; padding: 1px 12px; font-family: var(--f-display); font-size: 13px; border: 1px solid currentColor; border-radius: 2px; }
.slotdlg .sl-buffs { margin-top: 8px; border: 22px solid transparent; border-image: url(../../hunt/assets/ui/dlg_6948.webp) 30 fill stretch; }
.slotdlg .sl-buffs h3 { margin: 0 0 4px; font-family: var(--f-display); font-size: 14px; color: var(--gold); }
.slotdlg .sl-brow { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13px; border-top: 1px dashed #ffffff22; }
.slotdlg .sl-brow:first-of-type { border-top: 0; }
.slotdlg .sl-brow img { width: 22px; height: 22px; flex: none; }
.slotdlg .sl-brow span { flex: 1; min-width: 0; }
.slotdlg .sl-brow b { color: var(--gold); }
.slotdlg .sl-brow em { flex: none; font-style: normal; white-space: nowrap; color: #e8d6ac; }
.slotdlg .sl-none { font-size: 12px; color: var(--muted); }
.slotdlg.flash .sl-in { animation: slFlash 1.2s ease-out; }
@keyframes slFlash { 0% { box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f733a, 0 0 60px 20px #ffcf6a99; } 100% { box-shadow: 0 0 0 1px #000, 0 0 0 2px #8f733a, 0 12px 40px #000c; } }
/* 橫式（或很矮的畫面）：轉盤在左、結果與加成在右，一個畫面放得下 */
body.land .slotdlg .sl-in { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px 10px; }
body.land .slotdlg .sl-head { grid-column: 1 / -1; margin: 0 30px; }
body.land .slotdlg .sl-head h2 { font-size: 19px; }
body.land .slotdlg .sl-reel { height: 114px; }
body.land .slotdlg .sl-stop { width: 44px; height: 44px; font-size: 15px; }
body.land .slotdlg .sl-go { height: 40px; font-size: 16px; margin-top: 6px; }
body.land .slotdlg .sl-res { margin-top: 0; min-height: 0; }
/* 狀態列最多兩排，再多收成「+N」（2026-11-04 使用者）；點了列出全部 */
#tab-live .dbf .db.more { width: 26px; height: 26px; border-radius: 4px; background: rgba(0, 0, 0, .75) !important; box-shadow: 0 0 0 1px #c9a35a !important; color: #f3d48a; font-size: 12px; }
.dbfsheet .dbf-all { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.dbfsheet .dbf-row { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; }
.dbfsheet .dbf-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px #c9a35a; color: #fff; font-weight: 900; }
.dbfsheet .dbf-ic img { width: 28px; height: 28px; display: block; }
.dbfsheet .acts.one { grid-template-columns: 1fr; }
/* 攻城規矩的獎勵（2026-11-04 加天命拉霸）：兩行各自不折行，放不下由 fitText 縮小 */
.sgr-gift .sgr-gl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sgr-gift .sgr-gl b, .sgr-gift .sgr-gl small { display: block; white-space: nowrap; overflow: hidden; }
.sgr-gift .sgr-gl b { color: #ffd77a; font-size: 13px; }
.sgr-gift .sgr-gl small { color: #a8998a; font-size: 11.5px; }
/*
 * ================= 退休前輩小蝦米（2026-11-05 使用者；hunt.js seniorMenu） =================
 * 上：頭像＋名字＋關閉（固定）；中：當今武林盟主金匾、選拔／論劍兩格倒數；下：分頁「江湖號令」「江湖榜」（只有這塊捲動）。
 * 派系色：正道綠、中立青、邪道紅、天下金（跟遊戲小蝦米號令頁同色系）。單行字一律不折行，放不下由 fitText 縮小。
 */
.sheet .card.snsheet { --f1: #8fdc7a; --f2: #63cfe6; --f3: #ff7a8e; --fc: #ffd45e;
  display: flex; flex-direction: column; height: min(86vh, 760px); max-height: 86vh; padding: 12px 12px 10px; /* 固定高度：切分頁不會忽高忽低 */
  background: radial-gradient(120% 55% at 50% 0%, #2e2416 0%, #130f0b 58%, #0b0907 100%); }
.sn-f1 { --c: var(--f1); } .sn-f2 { --c: var(--f2); } .sn-f3 { --c: var(--f3); } .sn-fc { --c: var(--fc); }
.sn-head { flex: none; display: flex; align-items: center; gap: 10px; }
.sn-face { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #4a3719, #120d08 72%); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #b8913f, 0 0 0 3.5px #000, 0 3px 10px rgba(0, 0, 0, .6); }
.sn-face img { display: block; height: 52px; margin-bottom: -10px; }
.sn-ttl { flex: 1; min-width: 0; }
.sheet .card.snsheet .sn-ttl h2 { display: block; margin: 0; font: 900 21px/1.2 var(--f-display); color: #f2cf7a; letter-spacing: .14em; white-space: nowrap;
  text-shadow: 0 2px 0 #3a2508, 0 0 12px rgba(242, 207, 122, .3); }
.sn-ttl p { margin: 2px 0 0; font-size: 12px; color: #b7a582; white-space: nowrap; overflow: hidden; }
.sn-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 10px -12px 0; padding: 0 12px 2px; scrollbar-width: thin; scrollbar-color: #6b5530 transparent; }
/* 當今武林盟主：金匾 */
.sn-champ { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; overflow: hidden;
  background: radial-gradient(90% 170% at 0% 50%, rgba(255, 200, 90, .3), transparent 62%), linear-gradient(180deg, #3d2c12, #17110a);
  box-shadow: inset 0 0 0 1px #c9a24d, inset 0 0 0 2px #000, inset 0 0 22px rgba(255, 190, 80, .16); }
.sn-champ::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 235, 180, .12) 50%, transparent 62%); }
.sn-crown { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 110, .28), transparent 70%); }
.sn-crown svg { width: 32px; height: 32px; fill: #ffd76a; stroke: #5e3f0c; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 200, 90, .75)); }
.sn-crown svg path + path { fill: none; stroke: #ffd76a; stroke-width: 1.8; stroke-linecap: round; }
.sn-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-ct small { font-size: 11.5px; letter-spacing: .32em; color: #e3cb92; white-space: nowrap; }
.sn-ct b { font: 900 24px/1.15 var(--f-display); color: #ffe08a; letter-spacing: .06em; white-space: nowrap; overflow: hidden;
  text-shadow: 0 0 12px rgba(255, 190, 80, .55), 0 2px 0 #000; }
.sn-ct b.sn-none { font-size: 19px; color: #a99a7c; text-shadow: 0 2px 0 #000; }
.sn-champ > em { flex: none; font-style: normal; font-size: 11.5px; color: #e3cb92; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(201, 162, 77, .55); background: rgba(0, 0, 0, .4); white-space: nowrap; }
/* 選拔、論劍 */
.sn-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sn-when > div { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 7px 6px 6px; border-radius: 4px; text-align: center;
  background: linear-gradient(180deg, rgba(52, 41, 27, .8), rgba(14, 11, 8, .85)); box-shadow: inset 0 0 0 1px rgba(201, 162, 77, .34); }
.sn-when small { font-size: 11.5px; letter-spacing: .22em; color: #b9a783; white-space: nowrap; }
.sn-when b { max-width: 100%; font: 900 17px/1.3 var(--f-display); color: #fff1cc; white-space: nowrap; overflow: hidden; }
.sn-when em { max-width: 100%; font-style: normal; font-size: 12px; color: #ffd27a; white-space: nowrap; overflow: hidden; }
.sn-when > div.live { box-shadow: inset 0 0 0 1px #ffd76a, 0 0 12px rgba(255, 190, 80, .3); }
.sn-when > div.live em { color: #ff9f7a; font-weight: 700; }
.sn-stale { margin: 6px 0 0; text-align: center; font-size: 11.5px; color: #ff9f7a; }
/* 分頁 */
.sn-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-bottom: 1px solid #5a4422; }
.sn-tabs button { position: relative; padding: 8px 0 7px; border: 0; background: none; cursor: pointer; font: 900 15px var(--f-display); letter-spacing: .22em; color: #8f7d5d; }
.sn-tabs button[aria-selected="true"] { color: #ffd76a; text-shadow: 0 0 10px rgba(255, 190, 80, .45); }
.sn-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ffd76a, transparent); }
.sn-pane { padding-top: 10px; }
/* 你身上的加成 */
.sn-mine { padding: 8px 10px 9px; border-radius: 4px; background: linear-gradient(180deg, rgba(64, 48, 20, .6), rgba(20, 15, 8, .6)); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .45); }
.sn-mwho { margin: 0 0 6px; font-size: 13px; color: #e8d9b5; white-space: nowrap; overflow: hidden; }
.sn-mwho b { margin: 0 2px; color: var(--c); }
.sn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 10px 4px; border-radius: 999px; font-size: 12.5px; color: #f3e6c4;
  background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8a7d66) 75%, transparent); }
.sn-chip b { flex: none; font: 900 14px var(--f-display); color: var(--c); }
.sn-chip i { min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; }
.sn-chip.sn-off { color: #a99a7c; }
/* 四道令 */
.sn-dec { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sn-dec li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, #120e0a), #0f0c09 72%); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sn-dec li.mine { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 0 12px color-mix(in srgb, var(--c) 22%, transparent); }
.sn-tag { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--f-display); color: #140f0a;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .55), transparent 46%), var(--c); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px color-mix(in srgb, var(--c) 45%, #000); }
.sn-dt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.38; }
.sn-dt b { font: 900 16px var(--f-display); color: var(--c); letter-spacing: .06em; white-space: nowrap; }
.sn-dt b.off { font-size: 14px; color: #8a7d66; }
.sn-dt span { font-size: 12.5px; color: #efe3c6; white-space: nowrap; overflow: hidden; }
.sn-dt em { font-style: normal; font-size: 11.5px; color: #9d8e72; white-space: nowrap; overflow: hidden; }
.sn-foot { list-style: none; margin: 10px 2px 2px; padding: 0; display: grid; gap: 1px; font-size: 11.5px; color: #a99a7c; }
.sn-foot li { position: relative; padding-left: 12px; white-space: nowrap; overflow: hidden; }
.sn-foot li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; transform: rotate(45deg); background: #c9a24d; }
/* 江湖榜 */
.sn-ftabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sn-ftabs button { padding: 5px 0; border-radius: 4px; cursor: pointer; font: 900 14px var(--f-display); letter-spacing: .24em;
  color: color-mix(in srgb, var(--c) 72%, #6b6050); background: rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--c) 30%, #2a221a); }
.sn-ftabs button[aria-selected="true"] { color: #140f0a; background: var(--c); border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.sn-term { margin: 8px 2px 6px; font-size: 11.5px; color: #b9a783; white-space: nowrap; overflow: hidden; }
.sn-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sn-rank li { display: grid; grid-template-columns: 22px 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 3px; background: rgba(255, 255, 255, .035); }
.sn-rank li:nth-child(-n+3) { background: linear-gradient(90deg, rgba(255, 200, 90, .13), rgba(255, 255, 255, .02)); }
.sn-rank li.me { background: rgba(255, 215, 106, .14); box-shadow: inset 0 0 0 1px #ffd76a; }
.sn-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--f-body); font-style: normal; color: #d8cbb0; background: #2a231b; box-shadow: inset 0 0 0 1px #4a3c2a; }
.sn-no.n1 { color: #3a2604; background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c14e 55%, #a8751c); box-shadow: 0 0 6px rgba(255, 200, 80, .6); }
.sn-no.n2 { color: #2a2a2a; background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 55%, #7d8590); }
.sn-no.n3 { color: #2e1606; background: radial-gradient(circle at 35% 30%, #ffe0c0, #d08a4e 55%, #8a4f22); }
.sn-tt { width: 50px; padding: 1px 0; text-align: center; border-radius: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sn-tt.t-zm { color: #2a1a02; background: linear-gradient(180deg, #ffe08a, #d9a43a); }
.sn-tt.t-fz { color: #ffb36a; box-shadow: inset 0 0 0 1px #d98a3a; }
.sn-tt.t-zl { color: #8fc0ff; box-shadow: inset 0 0 0 1px #4f7fc0; }
.sn-tt.t-hf { color: #8fdc9a; box-shadow: inset 0 0 0 1px #4f9f5a; }
.sn-rank b { min-width: 0; font-size: 14px; font-weight: 700; color: #f3e6c4; white-space: nowrap; overflow: hidden; }
.sn-rank b small { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; color: #1a1408; background: #ffd76a; vertical-align: 1px; }
.sn-rank em { font-style: normal; font: 700 12.5px Consolas, "Courier New", monospace; color: #e9c98a; }
.sn-empty { margin: 18px 0; text-align: center; font-size: 13px; color: #a99a7c; }
/* 橫式（手機橫拿）：置中、左右兩欄（左：盟主＋時間；右：分頁），各自捲動 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  .sheet:has(> .card.snsheet) { align-items: center; }
  .sheet .card.snsheet { width: min(780px, calc(100vw - 28px)); max-width: none; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); margin-bottom: 0; padding-block: 10px 8px; }
  .sn-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); column-gap: 14px; overflow: hidden; margin-top: 8px; }
  .sn-l, .sn-r { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6b5530 transparent; }
  .sn-l { padding-bottom: 4px; }
  .sn-r .sn-tabs { margin-top: 0; }
}

/* 攻城宣戰金（2026-11-05）：傳令官三格、確認框問句放不下就縮小，不折行 */
.sgd-info span { min-width: 0; white-space: nowrap; overflow: hidden; }
.sgyn-q[data-fit] { white-space: nowrap; overflow: hidden; }

/* 說話之島等級鎖（2026-11-07）：選角頁金框（甲）、地圖頁最上面一張（乙）；文字放不下用 data-fit 縮，不折行 */
.lvlock { margin-top: 10px; padding: 8px 12px; border: 2px solid #d9a441; border-radius: 4px; background: rgba(60, 40, 12, .75); box-shadow: 0 0 10px rgba(217, 164, 65, .3); }
.lvlock b { display: block; font: 900 15px var(--f-display); color: #ffd76a; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
.lvlock small, .mt.isle .cap small { display: block; font-size: 12.5px; color: #cfc3a3; white-space: nowrap; overflow: hidden; }
.lvlock em, .mt.isle em { font-style: normal; color: #ffd76a; }
.lvbar { display: block; height: 8px; margin: 6px 0 4px; background: #241d14; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #4a3c2b; }
.lvbar i { display: block; height: 100%; background: #d9a441; }
.mt.isle { grid-column: 1 / -1; aspect-ratio: auto; height: 104px; box-shadow: inset 0 0 0 2px #d9a441; }
.mt.isle.lock .img { filter: grayscale(.5) brightness(.5); }
.mt.isle .cap b { font-size: 15px; color: #ffd76a; white-space: nowrap; overflow: hidden; }
.mt.isle .lvbar { width: 70%; margin: 4px 0 2px; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px), (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  #hunt > .mgrid .mt.isle { height: 74px; box-shadow: inset 0 0 0 2px #d9a441; }
  #hunt > .mgrid .mt.isle .lvbar { width: 60%; height: 6px; }
}

/* 沒有角色的提示（2026-11-09 使用者：要美化、置中） */
/* 垂直也置中（2026-11-09 使用者：框太靠上）：直接照螢幕正中間放，直拿、橫拿、電腦都一樣；橫拿時選角區塊不吃點擊，這張卡要另外打開 */
.card.plaque.sel-none { position: fixed; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(432px, calc(100vw - 28px)); box-sizing: border-box; margin: 0;
  padding: 22px 16px 18px; text-align: center; pointer-events: auto; }
.sel-none img { display: block; width: 56px; height: 56px; margin: 0 auto 6px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.sel-none h3 { margin: 0 0 10px; font: 900 19px/1.3 var(--f-display); color: #f0d48a; letter-spacing: .08em; white-space: nowrap; }
.sel-none p { margin: 2px 0; color: #d8cba8; font-size: 14px; white-space: nowrap; }
.sel-none p b { color: #ffd76a; }
.sel-none .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

/*
 * 電腦瀏覽器（2026-11-09 使用者：背景鋪滿整個螢幕、內容只有中間一條很醜）：背景圖只畫在中間那一條，跟上面標題列同寬（460＋左右 14），兩旁全黑。
 * 只管寬又高的螢幕；手機直拿本來就滿版，手機橫拿走 landscape 那套（高度 500 以下）不受影響。
 */
@media (min-width: 700px) and (min-height: 501px) {
  html:not(.pcframe), html:not(.pcframe) body { background: #030202; }
  html:not(.pcframe) body.title-page::before, html:not(.pcframe) body:has(.select)::before { left: 50%; right: auto; width: 488px; transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(110, 90, 52, .45), 0 0 80px 30px rgba(0, 0, 0, .9); }
  html:not(.pcframe) .title-page .top::before { inset: 0; margin-inline: 0; } /* 置頂標題列的底色也只到中間這條 */
}

/* 電腦版外框裡（2026-11-09 使用者）：交易所鈕搬到框外右邊（hunt/pc.php）；小地圖跟直式一樣直接展開在右上 */
html.pcframe body.hunting.land #tab-live .mmitems > #mktBtn { display: none !important; }
html.pcframe body.hunting.land .radar:not([hidden]) { display: flex !important; position: fixed; z-index: 21; top: 84px; right: var(--sr, 10px); --rs: 150px !important; }
html.pcframe body.hunting.land .radar:not([hidden]) ~ .rmini { display: none !important; }
/* 電腦版 800×600 框裡的選角畫面（2026-11-09 使用者選甲）：大廳圖下面的地板、紅地毯拉長鋪到框底（cs_hall_pc.webp：上面 250／343 跟原圖一模一樣，拱門、①② 位置不動） */
@media (min-width: 790px) and (max-width: 810px) and (min-height: 590px) and (max-height: 610px) {
  html.pcframe body:has(#hunt > .select)::before { background: url("../../hunt/assets/ui/cs_hall_pc.webp?v=2") center 44px / 100% calc(100vh - 44px) no-repeat, #0b0908; }
}
/* 遊戲畫面中（2026-11-09 使用者：電腦框、手機都一樣）：右上「官網」房子改成「回選角」（出門圖示 lv_ic_exit.png，點了回到選擇角色；官網在框外左邊） */
body.hunting:not(.land) header.top { background-image: url("../../hunt/assets/ui/lv_head_exit.webp?v=1"); } /* 直式：頂部圖本身換成房子改出門的版本（石紋底、金色圖示，2026-11-09 使用者：黑底蓋上去不搭） */
body.hunting.land header.top a.home.home { background: url("../../hunt/assets/ui/lv_ic_exit.png?v=1") center / auto 78% no-repeat, rgba(12, 10, 8, .72); }
body.hunting.land header.top a.home::after { content: "選角"; }

/* ===== 電腦寬螢幕的登入、註冊、綁定頁（2026-11-09 使用者：電腦開要大器；示意 _示意/電腦登入頁）=====
 * 寬版城堡大廳鋪滿＋上方連結列＋左邊大標題與五張特色卡（_view.php hunt_pc_title_extras）＋右邊原本的龍頭框；手機、窄螢幕看不到這些 */
.pcd-bar, .pcd-hero, .pcd-foot { display: none; }
@media (min-width: 1100px) and (min-height: 640px) {
  html:not(.pcframe) body.title-page { padding: 0; overflow: hidden; }
  html:not(.pcframe) body.title-page::before { left: 0; right: 0; width: auto; transform: none; box-shadow: none; background:
    linear-gradient(90deg, rgba(6, 4, 3, .92) 0%, rgba(6, 4, 3, .55) 32%, rgba(6, 4, 3, .15) 55%, rgba(6, 4, 3, .55) 78%, rgba(6, 4, 3, .9) 100%),
    linear-gradient(180deg, rgba(6, 4, 3, .6), transparent 18%, transparent 70%, rgba(6, 4, 3, .95)),
    url("../../hunt/assets/ui/login_hall_wide.webp?v=1") center 40% / cover no-repeat, #070606; }
  body.title-page .app { max-width: none; }
  body.title-page header.top, body.title-page .app > .ann, body.title-page .lhelp, body.title-page .pwa-bar { display: none !important; }
  body.title-page .pcd-bar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw;
    background: linear-gradient(180deg, rgba(10, 7, 4, .85), rgba(10, 7, 4, 0)); }
  .pcd-logo img { display: block; height: 54px; filter: drop-shadow(0 2px 6px #000); }
  .pcd-links { display: flex; align-items: center; gap: 26px; }
  .pcd-links a { color: #e6d3a3; text-decoration: none; font-weight: 700; letter-spacing: .12em; font-size: 15px; text-shadow: 0 1px 3px #000; }
  .pcd-links a:hover { color: #ffe9a8; }
  .pcd-snd { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #8a6a32; cursor: pointer;
    background: url("../../hunt/assets/ui/lv_ic_snd.webp") center / 60% auto no-repeat, rgba(20, 15, 10, .8); }
  body.title-page { --pcdl: calc((100vw - min(92vw, 1380px)) / 2); } /* 整組內容最寬 1380、置中（2026-11-09 使用者：寬螢幕左右分太開） */
  body.title-page .pcd-hero { position: fixed; z-index: 5; left: var(--pcdl); right: calc(var(--pcdl) + 470px + 60px); top: 72px; bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .pcd-kick { padding: 4px 14px; border: 1px solid rgba(201, 162, 77, .6); color: #e6c47c; letter-spacing: .2em; font-size: 14px; background: rgba(0, 0, 0, .35); white-space: nowrap; }
  .pcd-h1 { text-shadow: none; /* 共用 h1 有黑色 text-shadow，會蓋掉漸層金字（2026-11-09 使用者：字變黑） */ margin: 18px 0 6px; white-space: nowrap; font: 900 clamp(40px, 4.4vw, 84px)/1.05 var(--f-display); letter-spacing: .06em;
    background: linear-gradient(180deg, #fff4cf 0%, #f3cf7a 45%, #b98326 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(255, 190, 80, .25)); }
  .pcd-sub { margin: 0 0 34px; white-space: nowrap; font-size: clamp(14px, 1.15vw, 20px); letter-spacing: .14em; color: #e9dcbc; text-shadow: 0 2px 4px #000; }
  .pcd-sub b { color: #ffd76a; }
  .pcd-feats { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 880px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .pcd-feats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 6px 12px;
    background: linear-gradient(180deg, rgba(30, 22, 14, .78), rgba(10, 7, 5, .78)); border: 1px solid rgba(201, 162, 77, .45); box-shadow: inset 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .6); }
  .pcd-feats img { width: clamp(48px, 4.4vw, 72px); height: auto; filter: drop-shadow(0 2px 4px #000); }
  .pcd-feats b { font-size: clamp(12px, 1vw, 15.5px); color: #ffd76a; white-space: nowrap; }
  .pcd-feats span { font-size: clamp(10px, .8vw, 12.5px); color: #c9bb98; white-space: nowrap; }
  body.title-page .pcd-foot { display: block; position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px; text-align: center; font-size: 12.5px; letter-spacing: .1em; color: #8f8268;
    background: linear-gradient(0deg, rgba(6, 4, 3, .9), transparent); }
  /* 右邊龍頭框：放大到 470 寬、上下置中，內容可以捲 */
  body.title-page .cl-center { position: fixed; z-index: 10; right: var(--pcdl); left: auto; top: 72px; bottom: 50px; width: 470px; min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  body.title-page .cl-center .lf { max-height: 100%; overflow-y: auto; scrollbar-width: none; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .85)); }
  body.title-page .cl-center .lf::-webkit-scrollbar { display: none; }
  body.title-page .cl-center .cl-feats { display: none; } /* 五項特色左邊已經有，框裡不重複 */
  body.title-page .pcd-bar { padding: 0 var(--pcdl); }
}
/* 電腦版框裡不顯示捲軸（2026-11-09 使用者：直式時右邊那條很醜）；滾輪照樣能捲 */
html.pcframe, html.pcframe body, html.pcframe * { scrollbar-width: none; }
html.pcframe ::-webkit-scrollbar { display: none; width: 0; height: 0; }