/* 紙上戰記介面層。色票跟定案圖：炭黑、舊骨白、深酒紅、黑鐵。全部霧面，不做亮面按鈕。 */
:root {
  --char: #151311; --ink: #1d1a18; --panel: #26211e; --iron: #4a423b; --iron2: #0c0a09;
  --bone: #e6dcc8; --bone2: #b9ad97; --wine: #8c1f28; --wine2: #4d1c20; --gold: #c9a24a; --blood: #c43b3b;
  --q-common: #cfc6b4; --q-magic: #6db06f; --q-rare: #6fa0d0; --q-epic: #a57ad6; --q-legendary: #e0b64a; --q-mythic: #e0564a;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --serif: 'Noto Serif TC', 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU', serif;
  --sans: 'Noto Sans TC', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}
#ui-root { position: fixed; inset: 0; overflow: hidden; color: var(--bone); font: 400 14px/1.5 var(--sans); pointer-events: none; -webkit-tap-highlight-color: transparent; }
#ui-root * { box-sizing: border-box; }
#ui-root [hidden] { display: none !important; }
:where(#ui-root button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
#ui-root button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }


/* 搖桿 */
#ui-touch { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.sheet-open #ui-touch, .dead #ui-touch { pointer-events: none; }
#ui-stick { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: .92; }
#ui-stick img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#ui-stick .thumb { left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); }

/* HUD：依定案圖，換算到 390 寬。右上四格放大到 44px。 */
#ui-hud button, #ui-hud .hud-tile { position: absolute; }
#hud-avatar { left: 8px; top: calc(16px + var(--safe-t)); width: 56px; height: 56px; background: url(../../assets/ui/tile_base.png) center / 100% 100% no-repeat; }
#hud-avatar img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); display: block; object-fit: cover; clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); }
#hud-hp { left: 60px; top: calc(32px + var(--safe-t)); width: 112px; height: 24px; box-sizing: border-box; background: var(--iron2); background-clip: padding-box; border: 5px solid transparent; border-image: url(../../assets/ui/tile_base.png) 14 stretch; }
#hud-hp .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#c4343f 0 30%, #9a1f2a 30% 72%, #6e141d 72%); }
#hud-hp .txt { position: absolute; inset: 0; font-size: 10px; line-height: 14px; font-weight: 700; text-align: center; color: var(--bone); text-shadow: 0 1px 1px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hud-map { right: 10px; top: calc(12px + var(--safe-t)); width: 92px; height: 72px; }
#hud-map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud-map canvas { position: absolute; left: 9%; top: 10%; width: 82%; height: 80%; display: block; }
.hud-tile { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hud-tile img { width: 44px; display: block; }
#hud-gold { right: 58px; top: calc(88px + var(--safe-t)); }
#hud-gems { right: 10px; top: calc(88px + var(--safe-t)); }
#hud-gold img, #hud-gems img { width: 40px; margin-top: -2px; }
#hud-gold span, #hud-gems span { font-size: 11px; line-height: 12px; font-weight: 700; color: var(--bone); text-shadow: 0 1px 1px #000, 0 0 2px #000; margin-top: -1px; font-variant-numeric: tabular-nums; }
#hud-bag { right: 58px; top: calc(136px + var(--safe-t)); }
#hud-recall { right: 10px; top: calc(136px + var(--safe-t)); }
#hud-potion { left: 12px; bottom: calc(12px + var(--safe-b)); width: 72px; height: 72px; }
#hud-potion img { width: 100%; display: block; }
#hud-potion .n { position: absolute; right: 6px; bottom: 3px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#hud-skills { position: absolute; right: 10px; bottom: calc(14px + var(--safe-b)); display: flex; gap: 2px; }
#ui-hud .hud-skill { position: relative; width: 48px; height: 48px; }
.sk-face { position: absolute; inset: 0; background: var(--wine2) center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.sk-face[style*='url'] { background-color: transparent; }
.sk-face:empty { border: 0; }
.sk-face:not(:empty) { border: 3px solid #a3978a; outline: 1px solid #000; }
.cd { position: absolute; inset: 4px; pointer-events: none; background: conic-gradient(rgba(10, 8, 7, .72) calc(var(--cd, 0) * 360deg), transparent 0); }
#hud-potion .cd { inset: 8px; border-radius: 4px; }
.hud-skill.passive .sk-face { filter: drop-shadow(0 0 3px rgba(224, 182, 74, .7)); }

/* 臨時顯示 */
#ui-card { position: absolute; left: 50%; top: calc(72px + var(--safe-t)); width: 176px; height: 48px; margin-left: -88px; padding: 2px 6px; display: flex; align-items: center; gap: 6px; text-align: left; color: #2b2320; background: #d6c7ad; border: 2px solid var(--qc, var(--gold)); animation: card-in .28s steps(5) both; }
.ci { flex: none; width: 30px; height: 30px; }
.ci img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ui-card .t { font-size: 12.5px; line-height: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui-card small { font-size: 10.5px; line-height: 13px; color: #4a3c2c; white-space: nowrap; }
#ui-card.q-legendary .t, #ui-card.q-mythic .t { color: #8c1f28; }
#ui-card.q-mythic { animation: card-in .28s steps(5) both, card-shake .5s steps(6) .28s 2; }
@keyframes card-in { from { transform: translateY(-14px) rotate(-3deg) scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes card-shake { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.kit #ui-card { border: 8px solid transparent; border-image: var(--plate-q) 34 stretch; background: var(--paper-parchment) center / 110px; background-clip: padding-box; padding: 0 2px; }
#ui-pickups { position: absolute; left: 10px; top: calc(130px + var(--safe-t)); display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
#ui-pickups span { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--qc, var(--bone)); text-shadow: 0 1px 2px #000, 0 0 2px #000; animation: pickup 2.4s linear both; }
@keyframes pickup { 0% { opacity: 0; transform: translateX(-8px); } 8% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
#ui-cast { position: absolute; left: 50%; top: 58%; width: 150px; height: 20px; margin-left: -75px; background: var(--iron2); border: 1px solid var(--bone); text-align: center; }
#ui-cast .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--wine); }
#ui-cast b { position: relative; font-size: 12px; line-height: 18px; display: block; }
.sheet-open #ui-toast, .dead #ui-toast { top: auto; bottom: calc(140px + var(--safe-b)); }
#ui-toast { position: absolute; left: 50%; top: calc(182px + var(--safe-t)); transform: translateX(-50%); max-width: 80%; padding: 6px 12px; background: rgba(21, 19, 17, .92); border: 1px solid var(--bone2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 40; }

/* 子介面：黑鐵框、炭紙底 */
#ui-sheet { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 480px; transform: translateX(-50%); display: flex; flex-direction: column; pointer-events: auto; z-index: 30; color: var(--bone);
  background: linear-gradient(rgba(21, 19, 17, .55), rgba(21, 19, 17, .55)), url(../../assets/ui/paper.jpg) center / 300px; border-top: 3px solid #a3978a; box-shadow: 0 -2px 0 #000, inset 0 2px 0 #000, inset 0 3px 0 var(--iron); }
#ui-sheet.half { height: 60%; }
#ui-sheet.full { height: calc(100% - 76px - var(--safe-t)); }
#ui-sheet.low { animation: lowhp 1s steps(2) infinite; }
@keyframes lowhp { 50% { border-top-color: var(--blood); box-shadow: 0 -4px 10px var(--blood), inset 0 2px 0 #000; } }
#ui-sheet::before, #ui-sheet::after { content: ''; position: absolute; top: -6px; width: 9px; height: 9px; background: #a3978a; transform: rotate(45deg); box-shadow: 0 0 0 1px #000; }
#ui-sheet::before { left: 8px; } #ui-sheet::after { right: 8px; }
#ui-sheet header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 16px 2px; gap: 8px; }
#ui-sheet h2 { margin: 0; font: 700 18px/1.3 var(--serif); }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 2px 16px 12px; overscroll-behavior: contain; }
.sheet-body h4, .sheet-body + h4 { margin: 14px 0 6px; font: 700 14px/1.4 var(--serif); color: var(--bone2); }
.sheet-body p { margin: 6px 0; }
#ui-sheet footer { padding: 8px 16px calc(10px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--iron); background: rgba(12, 10, 9, .55); }
.foot-extra { display: flex; flex-direction: column; gap: 8px; }
.foot-extra:empty { display: none; }

.btn { min-height: 48px; width: 100%; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700 !important; background: #2b2320 !important; border: 2px solid #8d8171 !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; }
.btn small { font-weight: 400; font-size: 11px; line-height: 13px; color: var(--bone2); }
.btn.primary { background: var(--wine2) !important; border-color: var(--bone) !important; }
.btn.gold { background: #2c2412 !important; border-color: var(--gold) !important; color: #ecd9a6 !important; }
.btn.back { background: #1d1a18 !important; }
.btn.sel { border-color: var(--bone) !important; background: var(--wine2) !important; }
.btn.mini { min-height: 44px; min-width: 64px; width: auto; }
.btn:active:not(:disabled) { transform: translateY(1px); background: #171311 !important; }
.btn:disabled { opacity: .55; }
.btn-row { display: flex; gap: 8px; }
.btn-row > * { flex: 1; min-width: 0; }
.tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 2px solid var(--iron); overflow-x: auto; }
.tab { flex: 1 0 auto; min-height: 44px; padding: 0 10px; color: var(--bone2) !important; font-size: 14px; white-space: nowrap; }
.tab.on { color: var(--bone) !important; font-weight: 700; background: var(--wine2) !important; box-shadow: inset 0 -2px 0 var(--bone); }
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cell { aspect-ratio: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; background: var(--panel) !important; border: 2px solid var(--qc, var(--iron)) !important; box-shadow: 0 0 0 1px #000; font: 700 17px var(--serif) !important; color: var(--qc, var(--bone)) !important; }
.cell.empty { border-color: #322c27 !important; background: rgba(12, 10, 9, .4) !important; box-shadow: none; }
.q-common { --qc: var(--q-common); } .q-magic { --qc: var(--q-magic); } .q-rare { --qc: var(--q-rare); } .q-epic { --qc: var(--q-epic); } .q-legendary { --qc: var(--q-legendary); } .q-mythic { --qc: var(--q-mythic); }
.q-text { color: var(--qc, var(--bone)); font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 2px; text-align: left; border-bottom: 1px solid #38312b; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-weight: 500; }
.row-main small { color: var(--bone2); font-size: 12px; line-height: 16px; }
.row-side { flex: none; color: var(--bone2); font-size: 13px; font-variant-numeric: tabular-nums; }
button.row .row-side::after { content: ' ›'; }
.kv { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted #38312b; padding: 3px 0; margin: 2px 0 !important; }
.kv span { color: var(--bone2); } .kv b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.kv i { font-style: normal; }
.muted { color: var(--bone2); font-size: 13px; }
.note { color: var(--bone2); font-size: 13px; padding: 6px 8px; background: rgba(12, 10, 9, .45); border-left: 2px solid var(--wine); }
.aff { font-size: 13px; }
.up { color: var(--q-magic); } .down { color: var(--blood); }
.diff { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 700; }
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cmp-col { padding: 8px 10px; background: rgba(12, 10, 9, .45); border: 1px solid var(--iron); min-width: 0; }
.cmp-col h4 { margin: 0 0 4px !important; }
.hero-card { display: flex; gap: 12px; align-items: center; }
.hero-card img { flex: none; }
.hero-card p { margin: 1px 0; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.stat { min-height: 66px; padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel) !important; border: 1px solid var(--iron) !important; }
.stat span { font-size: 12px; color: var(--bone2); } .stat b { font-size: 15px; } .stat small { font-size: 10px; line-height: 12px; color: var(--bone2); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slot { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--wine2) !important; border: 2px solid #8d8171 !important; }
.slot.sel { border-color: var(--gold) !important; }
.slot small { font-size: 11px; color: var(--bone2); }
.fac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fac-btn { min-height: 84px; font: 700 16px var(--serif) !important; background: var(--wine2) !important; border: 2px solid #a3978a !important; box-shadow: 0 0 0 1px #000; }

.field { display: block; margin: 8px 0; font-size: 13px; color: var(--bone2); }
.field input { display: block; width: 100%; height: 48px; margin-top: 4px; padding: 0 10px; font: 700 16px var(--sans); color: var(--bone); background: var(--iron2); border: 2px solid #8d8171; border-radius: 0; user-select: text; -webkit-user-select: text; pointer-events: auto; touch-action: manipulation; }

/* 確認框 */
#ui-dialog { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px calc(24px + var(--safe-b)); background: rgba(8, 6, 5, .5); pointer-events: auto; }
.dlg { width: 100%; max-width: 448px; padding: 14px 16px; background: var(--ink); border: 2px solid #a3978a; box-shadow: 0 0 0 2px #000; }
.dlg h3 { margin: 0 0 6px; font: 700 17px var(--serif); }
.dlg p { margin: 0 0 12px; color: var(--bone2); }

/* 死亡 */
.dead #ui-hud { opacity: .25; pointer-events: none; }
.dead #ui-hud * { pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) { #ui-sheet.low { animation: none; border-top-color: var(--blood); } #ui-card, #ui-card.q-mythic { animation: none; } }

/* 正式素材：kit.js 載入後才生效，載入失敗時維持上面的外觀。 */
.kit #ui-sheet { background: linear-gradient(rgba(12, 10, 9, .35), rgba(12, 10, 9, .35)), var(--paper-char) center / 240px; }
.kit #ui-sheet h2 { display: flex; align-items: center; justify-content: center; min-width: 150px; max-width: 78%; min-height: 44px; padding: 0 38px 2px; font-size: 16px; color: #2b2320; background: var(--banner) center / 100% 100% no-repeat; white-space: nowrap; overflow: hidden; }
.plate { display: flex; align-items: center; justify-content: center; min-width: 84px; min-height: 36px; padding: 2px 10px; font-weight: 700; color: var(--bone); font-variant-numeric: tabular-nums; }
.kit .plate { color: #2b2320; border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-parchment) center / 120px; background-clip: padding-box; padding: 0 6px; min-height: 40px; }

.kit .btn { border: 11px solid transparent !important; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-parchment) center / 140px !important; background-clip: padding-box !important; box-shadow: none; color: #2b2320 !important; padding: 0 6px; min-height: 52px; }
.kit .btn small { color: #4a3c2c; }
.kit .btn.primary, .kit .btn.sel { background-image: var(--paper-wine) !important; color: var(--bone) !important; }
.kit .btn.primary small { color: var(--bone2); }
.kit .btn.back { background-image: var(--paper-wine) !important; color: var(--bone) !important; }
.kit .btn.gold { background-image: var(--paper-char) !important; color: #ecd9a6 !important; }
.kit .btn:active:not(:disabled) { filter: brightness(.8); }
.kit .btn:disabled { opacity: 1; filter: grayscale(.6) brightness(.55); }
.kit .btn.mini { min-height: 44px; }
.kit .tabs { border: 0; gap: 4px; }
.kit .tab { min-height: 46px; flex: 1 1 0; min-width: 62px; padding: 0 4px; border: 9px solid transparent !important; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-parchment) center / 120px !important; background-clip: padding-box !important; color: #2b2320 !important; box-shadow: none; font-weight: 500; }
.kit .tab.on { background-image: var(--paper-wine) !important; color: var(--bone) !important; font-weight: 700; }

.grid { grid-auto-flow: dense; container-type: inline-size; }
.cell { position: relative; overflow: hidden; aspect-ratio: auto; height: calc((100cqw - 24px) / 5); padding: 0; }
.cell.span-2 { grid-column: span 2; }
.cell.span-5 { grid-column: span 5; }
.cell img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.cell .wing { inset: 12% 10%; width: 80%; height: 76%; object-fit: fill; opacity: .95; }
.kit .cell { border: 7px solid transparent !important; border-image: var(--frame-slot) 30 stretch !important; background: var(--slot-fill, var(--paper-char)) center / 120px !important; background-clip: padding-box !important; box-shadow: none; }
.kit .cell::after { content: ''; position: absolute; inset: -2px; pointer-events: none; border: 5px solid transparent; border-image: var(--ring) 22 stretch; }
.kit .cell.empty { background: rgba(12, 10, 9, .5) !important; background-clip: padding-box !important; opacity: .55; }
.kit .cell.empty::after { display: none; }

.cmp-k { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 4px; align-items: center; }
.cmp-k.single { grid-template-columns: minmax(0, 220px); justify-content: center; }
.cmp-card { min-width: 0; padding: 6px; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.cmp-card.empty { align-self: stretch; text-align: center; }
.kit .cmp-card { border: 10px solid transparent; border-image: var(--card-frame) 34 stretch; background: var(--paper-wine) center / 140px; background-clip: padding-box; padding: 2px 4px 4px; }
.kit .cmp-card.empty { background-image: var(--paper-char); }
.sheet-body p.cmp-label { margin: 0; font-size: 11px; line-height: 15px; text-align: center; color: var(--bone2); }
.cmp-icon { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; }
.cmp-icon img { height: 100%; max-width: 100%; object-fit: contain; position: relative; }
.cmp-icon .rays { position: absolute; left: 4px; top: -2px; height: 26px; transform: rotate(-30deg); }
.sheet-body p.cmp-name { margin: 2px 0 3px; padding: 2px 4px; font-size: 12.5px; line-height: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--qc, var(--bone)); background: rgba(12, 10, 9, .55); }
.sheet-body p.cmp-stat { margin: 2px 0 0; min-height: 21px; padding: 1px 6px; font-size: 12px; line-height: 19px; color: var(--bone); background: rgba(12, 10, 9, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit .sheet-body p.cmp-stat { color: #2b2320; background: var(--paper-parchment) center / 120px; font-weight: 500; }
.cmp-arrow { width: 18px; font-size: 20px; text-align: center; }
.sheet-body p.cmp-diff { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 8px 0 0; min-height: 34px; padding: 6px 8px; font-weight: 700; font-size: 13px; background: rgba(12, 10, 9, .55); border: 1px solid var(--iron); }
.cmp-diff span { display: inline-flex; align-items: center; gap: 4px; }
.cmp-diff img { width: 13px; height: 15px; object-fit: contain; }
.cmp-diff .up { color: #b9e0ab; } .cmp-diff .down { color: #e8938c; }

/* 角色與身體 */
.icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.kit .icon-btn { border: 8px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-wine) center / 100px; background-clip: padding-box; }
.icon-btn img { width: 26px; height: 26px; }
.doll { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 6px; align-items: center; }
.doll-col { display: grid; gap: 4px; }
.doll-col .cell { width: 54px; height: 54px; }
.cell.empty.show { display: block; opacity: 1; background: rgba(12, 10, 9, .6); border: 2px solid var(--iron); }
.kit .cell.empty.show { opacity: .85; border: 7px solid transparent !important; border-image: var(--frame-slot) 30 stretch !important; }
.doll-hero { height: 170px; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.doll-hero img { max-width: 100%; max-height: 100%; }
.name-plate { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 6px 0; padding: 2px 8px; text-align: left; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .name-plate { color: #2b2320; border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-parchment) center / 120px; background-clip: padding-box; padding: 0 6px; }
.name-plate img { width: 26px; height: 30px; object-fit: contain; flex: none; filter: brightness(.6); }
.name-plate span { display: flex; flex-direction: column; min-width: 0; line-height: 16px; }
.name-plate small { font-size: 11px; }
.kit .name-plate .q-text { color: #2b2320; }
.stats { margin-bottom: 6px; }
.stat { position: relative; min-height: 72px; gap: 0; }
.kit .stat { border: 7px solid transparent !important; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-wine) center / 90px !important; background-clip: padding-box !important; color: var(--bone); padding: 0; }
.stat img { width: 22px; height: 22px; object-fit: contain; }
.stat b { font-size: 13px; line-height: 16px; }
.strip-row { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 8px; margin: 4px 0 !important; font-size: 13px; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .strip-row { color: #2b2320; background: var(--paper-parchment) center / 120px; border-color: #6f6558; font-weight: 500; }
.strip-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-row img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.strip-row.warn { font-size: 12.5px; }
.cmp-stat.has-icon { display: flex; align-items: center; gap: 4px; }
.cmp-stat.has-icon img { width: 15px; height: 15px; object-fit: contain; filter: brightness(.45); }
.cmp-stat.has-icon span { flex: 1; }
.cmp-stat i { font-style: normal; font-weight: 700; font-size: 11.5px; }
.cmp-stat .up { color: #2f6a31; } .cmp-stat .down { color: #8c1f28; }

/* 其他畫面的圖示 */
.row-icon { flex: none; width: 32px; height: 32px; object-fit: contain; display: block; position: relative; }
.row-icon img { width: 100%; height: 100%; object-fit: contain; }
.slot-icon { width: 30px; height: 30px; object-fit: contain; }
.big-icon { display: flex; justify-content: center; }
.big-icon img { width: 56px; height: 56px; object-fit: contain; }
.with-icon { display: flex; align-items: center; gap: 6px; }
.with-icon img { width: 26px; height: 26px; object-fit: contain; }
.fac-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.fac-btn img { width: 44px; height: 44px; object-fit: contain; }
.kit .fac-btn { border: 10px solid transparent !important; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-wine) center / 120px !important; background-clip: padding-box !important; box-shadow: none; color: var(--bone) !important; font-size: 14px !important; }
.kit .slot { border: 9px solid transparent !important; border-image: var(--frame-plate) 34 stretch !important; background: var(--paper-wine) center / 100px !important; background-clip: padding-box !important; padding: 0; font-size: 12px; }
.slot b { font-size: 12px; line-height: 15px; }

/* 倉庫與裝備頁 */
.zone-label { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 2px !important; font-size: 13px; }
.zone-label span { font-size: 11.5px; color: var(--bone2); }
.pane { max-height: 104px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.grid.compact .cell { height: 46px; }
.grid.compact .cell.span-5 { grid-column: span 5; }
.kit .grid.compact .cell { border-width: 5px !important; }
.cell.off img { filter: grayscale(1) brightness(.6); }
.cell.off::before { content: '不生效'; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; font: 700 9px/12px var(--sans); text-align: center; color: var(--bone); background: rgba(12, 10, 9, .75); }
.page-card { padding: 8px 10px; margin-bottom: 8px; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .page-card { border: 10px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 160px; background-clip: padding-box; padding: 2px 4px 4px; }
.kit .page-card.on { background-image: var(--paper-wine); }
.sheet-body p.page-head { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 13px; }
.page-head span { color: var(--bone2); font-size: 12px; }
.page-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.page-row small { margin-left: auto; font-size: 11.5px; color: var(--bone2); }
.mini { position: relative; flex: none; width: 34px; height: 34px; padding: 3px; background: var(--slot-fill, rgba(12, 10, 9, .6)); border: 1px solid var(--qc, var(--iron)); }
.mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini.empty { opacity: .6; }
.mini.gone { border: 1px dashed var(--blood); opacity: 1; }
.kit button.plate, button.plate { min-height: 44px; }

/* 鐵匠 */
.dur-row { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 2px; border-bottom: 1px solid #38312b; }
.dur-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dur-main b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dur-bar { display: block; height: 7px; background: var(--iron2); border: 1px solid #6f6558; }
.dur-bar i { display: block; height: 100%; background: #8d8171; }
.dur-bar.low i { background: var(--blood); }
.dur-side { flex: none; width: 66px; display: flex; flex-direction: column; text-align: right; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
.dur-side small { font-size: 11px; color: var(--bone2); }
.pick-plate { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 58px; margin-bottom: 6px; padding: 4px 8px; text-align: left; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .pick-plate { border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 140px; background-clip: padding-box; padding: 0 6px; }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 17px; }
.pick-main small { font-size: 11.5px; color: var(--bone2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-main b { font-weight: 700; font-size: 14px; }
.sheet-body p.rate-line { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0; padding: 2px 8px; background: rgba(12, 10, 9, .5); }
.rate-line b { font: 900 22px/1.3 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; }

/* 廣播演出：上半部、不接收點擊、逐格換幀 */
#ui-fanfare { --ff-top: calc(48px + var(--safe-t)); position: absolute; left: 0; right: 0; top: 0; height: calc(230px + var(--ff-top)); overflow: hidden; z-index: 45; pointer-events: none; }
#ui-fanfare canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-icon { position: absolute; left: 50%; top: calc(22px + var(--ff-top)); width: 80px; height: 80px; transform-origin: center; }
.ff-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 #000); }
#ui-fanfare.glow-a .ff-icon img { filter: drop-shadow(0 0 5px var(--ff-glow)) drop-shadow(0 0 2px #fff4d8) drop-shadow(0 2px 0 #000); }
.ff-ribbon { position: absolute; left: 50%; top: calc(126px + var(--ff-top)); width: min(250px, 66%); margin-left: calc(min(250px, 66%) / -2); display: flex; flex-direction: column; align-items: center; text-align: center; color: #2b2320; }
.ff-ribbon b { display: block; font: 900 21px/1.15 var(--serif); }
.ff-ribbon span { display: block; max-width: 100%; font-size: 12.5px; line-height: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui-fanfare:not(.own) .ff-icon { width: 58px; height: 58px; top: calc(34px + var(--ff-top)); }
#ui-fanfare:not(.own) .ff-ribbon b { font-size: 17px; }
#ui-flash { position: absolute; inset: 0; z-index: 44; pointer-events: none; opacity: 0; border: 7px solid var(--gold); }

.head-action { display: flex; gap: 6px; }


/* 本區地圖 */
#ui-root canvas.zone-map { position: static; inset: auto; display: block; width: 100%; height: 190px; margin-bottom: 4px; background: #100d0b; }
.legend-row { display: flex; gap: 14px; margin: 2px 0 6px !important; font-size: 12px; color: var(--bone2); }
.legend-row span { display: inline-flex; align-items: center; gap: 4px; }
.lg { width: 9px; height: 9px; display: inline-block; }
.lg.me { border-radius: 50%; background: #efe4cf; }
.lg.tp { background: #e0b64a; transform: rotate(45deg); }
.lg.cp { background: #d94f45; }

/* 拍賣行 */
.gem-i { width: 18px; height: 18px; object-fit: contain; flex: none; }
.plate.gems { gap: 4px; min-height: 44px; }
.plate.gems .gem-i { filter: brightness(.45); }
.chips .tabs { margin-bottom: 4px; }
.kit .chips .tab { min-height: 44px; min-width: 0; font-size: 13px; }
.sort-row { display: flex; gap: 6px; margin: 2px 0 6px; }
.sort-row .btn { flex: 1; min-width: 0; min-height: 44px; flex-direction: row; gap: 4px; font-size: 13px; }
.sort-row .btn img { width: 13px; height: 15px; object-fit: contain; }
.goods { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 62px; padding: 4px 0; text-align: left; border-bottom: 1px solid #38312b; }
.goods.off { opacity: .6; }
.goods .row-main b { font-size: 13.5px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goods .row-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-mini { position: relative; flex: none; width: 52px; height: 52px; padding: 7px; background: var(--slot-fill, var(--panel)); border: 2px solid var(--qc, var(--iron)); }
.kit .cell-mini { border: 7px solid transparent; border-image: var(--ring) 22 stretch; background: var(--slot-fill) center / 100px; background-clip: padding-box; padding: 2px; }
.cell-mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.price-plate { flex: none; display: flex; align-items: center; gap: 3px; min-width: 76px; height: 36px; padding: 0 6px; justify-content: flex-end; font-size: 13px; font-weight: 700; color: var(--bone); font-variant-numeric: tabular-nums; border: 1px solid var(--iron); }
.kit .price-plate { color: #2b2320; border: 7px solid transparent; border-image: var(--plate-q) 34 stretch; background: var(--paper-parchment) center / 110px; background-clip: padding-box; padding: 0 3px; }
.kit .price-plate .gem-i { width: 14px; height: 14px; filter: brightness(.45); }
.deal-card { width: 190px; margin: 2px auto 6px; padding: 4px; text-align: center; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .deal-card { border: 10px solid transparent; border-image: var(--card-frame) 34 stretch; background: var(--paper-wine) center / 140px; background-clip: padding-box; padding: 2px 6px 4px; }
.deal-icon { position: relative; height: 76px; display: flex; justify-content: center; }
.deal-icon img { height: 100%; max-width: 100%; object-fit: contain; position: relative; }
.deal-icon .rays { position: absolute; left: 12px; top: 0; height: 30px; transform: rotate(-30deg); }
.sheet-body p.deal-name { margin: 2px 0 0; padding: 2px 4px; font-size: 13px; line-height: 18px; color: var(--qc, var(--bone)); background: rgba(12, 10, 9, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body p.deal-stat { width: min(280px, 88%); margin: 3px auto; padding: 2px 8px; font-size: 13px; line-height: 20px; text-align: center; font-weight: 500; color: var(--bone); background: rgba(12, 10, 9, .4); }
.kit .sheet-body p.deal-stat { color: #2b2320; background: var(--paper-parchment) center / 120px; }
.price-input { display: flex; align-items: center; gap: 8px; height: 50px; margin: 8px 0 6px; padding: 0 10px; background: var(--iron2); border: 2px solid #8d8171; }
.kit .price-input { border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 120px; background-clip: padding-box; padding: 0 4px; }
.price-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; font: 700 18px var(--sans); color: var(--bone); background: none; user-select: text; -webkit-user-select: text; pointer-events: auto; touch-action: manipulation; }
.deal-box { margin: 6px 0; padding: 4px 8px; background: rgba(12, 10, 9, .5); border: 1px solid var(--iron); }
.kit .deal-box { border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 160px; background-clip: padding-box; padding: 0 6px; }
.sheet-body .deal-box p { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0; font-size: 13.5px; border-bottom: 1px solid #38312b; }
.sheet-body .deal-box p:last-child { border-bottom: 0; }
.deal-box img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.deal-box span { flex: 1; color: var(--bone2); }
.deal-box b { font-variant-numeric: tabular-nums; }
.kit .strip-row.warn.dark { color: var(--bone); background: var(--paper-wine) center / 120px; }

/* 右上和設定鍵共用定案圖的空框 */
.hud-tile .ico { position: absolute; left: 22%; top: 20%; width: 56%; height: 60%; object-fit: contain; }
#hud-stats { left: 8px; top: calc(78px + var(--safe-t)); }
.sk-face.drawn { background-size: 66% 66%, 100% 100%; background-position: center; background-repeat: no-repeat; background-color: transparent; }

/* 設定 */
.switch-row { min-height: 52px; }
.switch { flex: none; position: relative; width: 50px; height: 26px; background: var(--iron2); border: 2px solid #8d8171; }
.switch i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #8d8171; }
.switch.on { background: var(--wine2); border-color: var(--bone); }
.switch.on i { left: 26px; background: var(--bone); }
.slider-row { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 14px; }
.slider-row span { flex: none; width: 36px; }
.slider-row b { flex: none; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.slider-row input { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--wine); touch-action: pan-x; pointer-events: auto; }
#hud-gold img { background: url(../../assets/ui/tile_base.png) center / 100% 100% no-repeat; }

/* 商城 */
.pips { display: flex; gap: 3px; margin-top: 3px; }
.pips i { width: 14px; height: 6px; background: var(--iron2); border: 1px solid #6f6558; }
.pips i.on { background: var(--gold); border-color: var(--gold); }
.goods > .row-side { flex: none; font-size: 13px; color: var(--bone2); }
.charge-block { padding: 6px 0 8px; border-bottom: 1px solid #38312b; }
.charge-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.charge-head .row-main b { font-weight: 700; }
.charge-head .row-main small { white-space: normal; }
.own { flex: none; font-size: 13px; font-weight: 700; color: var(--gold); }
.bundle-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
.bundle { min-height: 72px; padding: 2px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--iron); }
.kit .bundle { border: 6px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-parchment) center / 90px; background-clip: padding-box; color: #2b2320; padding: 0; }
.kit .bundle.on { background-image: var(--paper-wine); color: var(--bone); }
.bundle b { font-size: 13px; line-height: 16px; }
.bundle span { display: flex; align-items: center; gap: 1px; font-size: 12px; line-height: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bundle .gem-i { width: 11px; height: 11px; filter: brightness(.45); }
.bundle.on .gem-i { filter: none; }
.bundle small { font-size: 10px; line-height: 12px; }
.look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.look { position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--iron); }
.kit .look { border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 130px; background-clip: padding-box; }
.look img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(.5) brightness(.8); }
.look b { font-size: 13.5px; }
.look small { font-size: 11px; color: var(--bone2); }
.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tier { position: relative; min-height: 118px; padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--panel); border: 1px solid var(--iron); }
.kit .tier { border: 9px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-wine) center / 130px; background-clip: padding-box; padding: 0; color: var(--bone); }
.tier img { width: 34px; height: 30px; object-fit: contain; }
.tier b { font: 900 19px/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.tier small { font-size: 11px; line-height: 14px; color: var(--bone2); }
.tier > span { margin-top: 2px; padding: 0 10px; font-size: 13px; line-height: 19px; font-weight: 700; color: #2b2320; background: #d6c7ad; }
.kit .tier > span { background: var(--paper-parchment) center / 90px; }
.first { position: absolute; left: -1px; top: -1px; padding: 0 5px; font: 700 10.5px/16px var(--sans); color: #2b2320; background: var(--gold); }
.price-input em { flex: none; font-style: normal; font-weight: 700; color: var(--bone2); }
.sort-row .btn { padding: 0 2px; }

/* 屍體倒數與方向 */
#hud-corpse { left: 58px; top: calc(80px + var(--safe-t)); width: 112px; height: 44px; display: flex; align-items: center; gap: 4px; text-align: left; padding: 0 6px; color: #f6d9d4; background: #2a1212; border: 2px solid var(--blood); box-shadow: 0 0 0 1px #000; }
#hud-corpse .ci { flex: none; width: 24px; height: 26px; object-fit: contain; }
#hud-corpse span { min-width: 0; display: flex; flex-direction: column; }
#hud-corpse b { font-size: 14px; line-height: 17px; font-variant-numeric: tabular-nums; }
#hud-corpse small { font-size: 11px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui-arrow { position: absolute; left: 0; top: 0; line-height: 0; filter: drop-shadow(0 2px 0 #000); }

/* 死亡畫面：世界照常運行，只蓋一層酒紅 */
#ui-death { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(70px + var(--safe-t)) 14px calc(12px + var(--safe-b)); background: rgba(58, 8, 14, .58); pointer-events: auto; text-align: center; }
.dead-top { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dead-banner { width: 92%; filter: drop-shadow(0 0 1px var(--bone)) drop-shadow(0 3px 0 #000); }
.dead-banner h2 { margin: 0; padding: 16px 0 18px; font: 900 30px/1.1 var(--serif); letter-spacing: .08em; color: var(--bone); background: #15110f; background-image: var(--paper-char); clip-path: polygon(0 26%, 5% 14%, 9% 24%, 15% 8%, 22% 18%, 30% 4%, 38% 15%, 47% 2%, 56% 14%, 64% 5%, 72% 17%, 80% 7%, 87% 20%, 93% 11%, 100% 28%, 96% 50%, 100% 76%, 92% 70%, 88% 92%, 79% 78%, 70% 96%, 60% 80%, 50% 98%, 41% 80%, 31% 94%, 22% 78%, 13% 90%, 8% 72%, 0 78%, 4% 52%); }
.dead-count { display: flex; align-items: center; gap: 8px; width: 74%; min-height: 76px; padding: 0 10px; background: #d6c7ad; border: 2px solid #8d8171; }
.kit .dead-count { border: 11px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-parchment) center / 140px; background-clip: padding-box; padding: 0 4px; }
.dead-count img { flex: none; width: 40px; height: 54px; object-fit: contain; }
.dead-count .left { flex: 1; margin: 0; font: 900 46px/1 var(--serif); color: #8c1f28; font-variant-numeric: tabular-nums; }
.dead-strip { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 12px 2px 6px; max-width: 86%; font-size: 12.5px; font-weight: 500; color: #2b2320; background: #d6c7ad; }
.kit .dead-strip { background: var(--paper-parchment) center / 120px; }
.dead-strip img { flex: none; width: 24px; height: 26px; object-fit: contain; filter: brightness(.7); }
.dead-strip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dead-panel { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--ink); border: 2px solid #8d8171; }
.kit .dead-panel { border: 12px solid transparent; border-image: var(--frame-plate) 34 stretch; background: var(--paper-char) center / 180px; background-clip: padding-box; padding: 2px; }
.dead-items { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 52px; }
.dead-items i { font-style: normal; font-weight: 700; color: var(--bone2); }
.dead-items small { color: var(--bone2); }
.revive { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; width: 100%; text-align: left; color: #2b2320 !important; background: #d6c7ad !important; border: 2px solid var(--gold) !important; }
.kit .revive { border: 11px solid transparent !important; border-image: var(--plate-q) 34 stretch !important; background: var(--paper-parchment) center / 140px !important; background-clip: padding-box !important; padding: 0 !important; }
.revive img { width: 34px; height: 34px; object-fit: contain; }
.revive span { display: flex; flex-direction: column; }
.revive b { font: 900 19px/1.2 var(--serif); }
.revive small { font-size: 12px; line-height: 15px; color: #4a3c2c; }
.dead-gems { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dead-gems img { width: 16px; height: 16px; object-fit: contain; }
.dead-panel .btn { min-height: 54px; }
@media (max-height: 700px) {
  #ui-death { padding-top: calc(62px + var(--safe-t)); }
  .dead-banner h2 { padding: 9px 0 11px; font-size: 24px; }
  .dead-count { min-height: 60px; }
  .dead-count .left { font-size: 36px; }
  .dead-panel { gap: 3px; }
  .revive { min-height: 56px; }
  .dead-panel .btn { min-height: 48px; }
}

/* 能力 */
.num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 4px 0 6px; }
.sheet-body .num-grid p { display: grid; grid-template-columns: 1fr auto; align-items: baseline; margin: 0; padding: 3px 0; border-bottom: 1px dotted #38312b; }
.num-grid span { font-size: 12.5px; color: var(--bone2); }
.num-grid b { font-size: 15px; font-variant-numeric: tabular-nums; }
.num-grid small { grid-column: 1 / -1; text-align: right; font-size: 10.5px; line-height: 12px; color: var(--bone2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body > .tabs + .tabs { margin-top: -4px; }
.kit .sheet-body > .tabs + .tabs .tab { min-height: 44px; min-width: 0; font-size: 13px; }

/* 世界地圖：比畫面大，可拖曳 */
.wm-scroll { height: calc(100dvh - 76px - var(--safe-t) - 48px - 60px - 44px - 130px - var(--safe-b)); min-height: 220px; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 2px solid #6f6558; background: #100d0b; }
.wm { position: relative; width: 640px; height: 640px; }
.wm-bg { position: absolute; inset: 0; background: #2a1d12 center / 100% 100% no-repeat; }
.wm-node { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; background: #1d1a18 !important; border: 3px solid #e6dcc8 !important; box-shadow: 0 0 0 2px #000, 0 2px 0 3px rgba(0, 0, 0, .5); }
.wm-node > img { width: 76%; height: 76%; object-fit: contain; }
.wm-node.shut { border-color: #6f6558 !important; }
.wm-node.shut > img { opacity: .75; }
.wm-node.town { width: 66px; height: 66px; margin: -33px 0 0 -33px; border-width: 4px !important; }
.wm-node.here { border-color: var(--gold) !important; }
.wm-node.picked { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--gold); }
.wm-pin { position: absolute; left: 50%; bottom: 74%; width: 26px; height: 32px; transform: translateX(-50%); pointer-events: none; }
.wm-pin img { width: 100%; height: 100%; object-fit: contain; }
.wm-cross { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; pointer-events: none; background: #1d1a18; border: 2px solid var(--blood); }
.wm-cross::before, .wm-cross::after { content: ''; position: absolute; left: 6px; top: 1px; width: 3px; height: 13px; background: #d94f45; }
.wm-cross::before { transform: rotate(45deg); } .wm-cross::after { transform: rotate(-45deg); }
.wm-info { margin-bottom: 0 !important; }

/* NPC 互動 */
#hud-talk { position: absolute; right: 10px; bottom: calc(76px + var(--safe-b)); width: 60px; height: 72px; display: flex; flex-direction: column; align-items: center; color: var(--bone); background: none; pointer-events: auto; }
#hud-talk[hidden], .sheet-open #hud-talk { display: none; }
#hud-talk img:first-child { width: 60px; height: 56px; display: block; }
#hud-talk .ico { position: absolute; left: 11px; top: 8px; width: 38px; height: 40px; object-fit: contain; object-position: top; }
#hud-talk b { font-size: 11px; line-height: 14px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.npc-talk { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 4px; }
.npc-art { height: 164px; padding-top: 6px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #3a1418; border: 2px solid #a3978a; outline: 1px solid #000; }
.npc-art img { height: 100%; max-width: 100%; object-fit: contain; object-position: bottom; }
.sheet-body p.npc-line { margin: 0; padding: 12px; min-height: 164px; font: 500 17px/1.6 var(--serif); background: rgba(21, 17, 15, .7); border-left: 3px solid var(--wine2); }
.npc-line .rest { visibility: hidden; }
.npc-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
@media (max-height: 700px) {
  .npc-talk { grid-template-columns: 88px minmax(0, 1fr); }
  .npc-art { height: 112px; }
  .sheet-body p.npc-line { min-height: 112px; padding: 8px 10px; font-size: 15px; }
  .npc-options { flex-direction: row; }
  .npc-options .btn { flex: 1; min-width: 0; padding-inline: 2px; }
}

/* 標題、登入、創角 */
#ui-gate { position: absolute; inset: 0; z-index: 60; pointer-events: auto; background: var(--char); background-image: var(--paper-char); }
.gate-home { position: relative; height: 100%; padding: calc(40px + var(--safe-t)) 28px calc(30px + var(--safe-b)); display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: #14100d url('../../assets/ui/title.webp') 70% bottom / cover no-repeat; }
.gate-frame { position: absolute; inset: 0; pointer-events: none; background: url('../../assets/ui/gate/edge_h.png') left top / auto 12px repeat-x, url('../../assets/ui/gate/edge_h.png') left bottom / auto 12px repeat-x, url('../../assets/ui/gate/edge_v.png') left top / 12px auto repeat-y, url('../../assets/ui/gate/edge_v.png') right top / 12px auto repeat-y; }
.gate-frame img { position: absolute; width: 58px; height: 58px; }
.gate-frame .tl { left: 0; top: 0; }
.gate-frame .tr { right: 0; top: 0; transform: scaleX(-1); }
.gate-frame .bl { left: 0; bottom: 0; transform: scaleY(-1); }
.gate-frame .br { right: 0; bottom: 0; transform: scale(-1); }
.gate-logo { width: 100%; max-width: 340px; margin: 0; }
.gate-logo img { display: block; width: 100%; height: auto; }
.gate-actions { position: relative; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.gate-actions small { text-align: center; color: var(--bone2); font-size: 12px; }
.gate-who { margin: 0; text-align: center; font: 700 20px var(--serif); text-shadow: 0 2px 0 #000, 0 0 6px #000; }
#ui-root .gate-btn { min-height: 56px; padding: 0; color: var(--bone); font: 700 18px var(--serif); letter-spacing: .08em; background: none !important; border-style: solid; border-width: 15px 28px; border-color: transparent; border-image: url('../../assets/ui/gate/btn_dark.png') 41 80 fill / 15px 28px round stretch; }
#ui-root .gate-btn.primary { border-image-source: url('../../assets/ui/gate/btn_wine.png'); }
.gate-create { height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; }
.gate-stage { position: relative; flex: 1; min-height: 0; background: #1c0609 url('../../assets/ui/stage.webp') center top / cover no-repeat; }
.gate-stage h2 { position: absolute; left: 16px; top: calc(14px + var(--safe-t)); margin: 0; font: 700 20px var(--serif); text-shadow: 0 2px 0 #000, 0 0 6px #000; z-index: 1; }
.gate-hero { position: absolute !important; inset: var(--safe-t) 0 0; width: 100%; height: calc(100% - var(--safe-t)); }
.gate-turn { position: absolute !important; right: 14px; bottom: 10px; width: 76px; }
.gate-panel { position: relative; flex: none; padding: 14px 16px calc(12px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; background: #d6c7ad; border-top: 2px solid #000; }
.kit .gate-panel, .kit .gate-picker { background-image: var(--paper-parchment); }
.gate-panel::before { content: ''; position: absolute; left: 12px; right: 12px; top: -9px; height: 16px; z-index: 2; background: url('../../assets/ui/gate/rule.png') center / 100% 100% no-repeat; }
.gate-name { display: flex; gap: 8px; }
.gate-name input { flex: 1; min-width: 0; min-height: 46px; padding: 0 4px; font: 700 17px var(--serif); color: var(--bone); background: none; border-style: solid; border-width: 9px 10px; border-color: transparent; border-image: url('../../assets/ui/gate/input_dark.png') 24 fill / 9px 10px stretch; border-radius: 0; outline: 0; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.gate-name .gate-chip { flex: none; width: 76px; }
.gate-error { min-height: 18px; margin: -4px 0 -2px; font-size: 13px; line-height: 18px; color: #7d1420; font-weight: 700; }
.gate-row { display: flex; align-items: center; gap: 8px; }
.gate-row > b { flex: none; width: 34px; font: 700 14px var(--serif); color: #2a1e18; }
.gate-chips { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
#ui-root .gate-chip { min-height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--bone); font: 700 14px var(--serif); background: none !important; border-style: solid; border-width: 10px 11px; border-color: transparent; border-image: url('../../assets/ui/gate/tab_dark.png') 26 28 fill / 10px 11px stretch; }
#ui-root .gate-chip[aria-pressed='true'] { border-image-source: url('../../assets/ui/gate/tab_wine.png'); }
#ui-root .gate-chips.six .gate-chip { font-size: 13px; white-space: nowrap; border-width: 6px; border-image: url('../../assets/ui/gate/square_dark.png') 34 fill / 6px stretch; }
#ui-root .gate-chips.six .gate-chip[aria-pressed='true'] { border-image-source: url('../../assets/ui/gate/square_wine.png'); }
.gate-chip img { height: 20px; width: auto; }
.gate-dot { flex: none; width: 14px; height: 14px; border: 2px solid var(--bone2); }
.gate-picker { position: absolute; inset: 0; z-index: 1; padding: 10px 16px calc(12px + var(--safe-b)); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: var(--panel); }
.gate-tune { flex: 1; min-height: 0; display: flex; align-items: center; gap: 2px; }
.gate-ring { position: relative; flex: none; width: 128px; height: 128px; margin: 22px; border-radius: 50%; touch-action: none; pointer-events: auto; cursor: pointer; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.gate-ring::after { content: ''; position: absolute; inset: -22px; pointer-events: none; background: url('../../assets/ui/gate/ring.png') center / 100% 100% no-repeat; }
.gate-ring::before { content: ''; position: absolute; inset: 26px; border-radius: 50%; background: #1a1614; }
.gate-now { position: absolute; inset: 34px; border-radius: 50%; background: var(--now, transparent); }
.gate-thumb { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border: 3px solid #fff; outline: 2px solid #000; border-radius: 50%; background: var(--hue); z-index: 1; transform: rotate(var(--angle, 0deg)) translateY(-50px); }
.gate-sliders { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gate-sliders label { display: flex; align-items: center; gap: 8px; font: 700 14px var(--serif); color: #2a1e18; }
.gate-sliders input { flex: 1; min-width: 0; height: 44px; margin: 0; pointer-events: auto; touch-action: none; appearance: none; -webkit-appearance: none; background: transparent; }
.gate-sliders input::-webkit-slider-runnable-track { height: 18px; box-sizing: border-box; border: 5px solid transparent; border-image: url('../../assets/ui/gate/track.png') 16 / 5px stretch; background-clip: padding-box; }
.gate-sliders input::-moz-range-track { height: 18px; box-sizing: border-box; border: 5px solid transparent; border-image: url('../../assets/ui/gate/track.png') 16 / 5px stretch; background-clip: padding-box; }
.gate-sliders [data-tune=s]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--muted), var(--full)); }
.gate-sliders [data-tune=v]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #000, var(--bright)); }
.gate-sliders [data-tune=s]::-moz-range-track { background: linear-gradient(90deg, var(--muted), var(--full)); }
.gate-sliders [data-tune=v]::-moz-range-track { background: linear-gradient(90deg, #000, var(--bright)); }
.gate-sliders input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 32px; margin-top: -12px; border: 0; background: url('../../assets/ui/gate/knob.png') center / 100% 100% no-repeat; }
.gate-sliders input::-moz-range-thumb { width: 20px; height: 32px; border: 0; border-radius: 0; background: url('../../assets/ui/gate/knob.png') center / 100% 100% no-repeat; }
#ui-tear { position: absolute; inset: 0; z-index: 61; overflow: hidden; pointer-events: none; }
#ui-tear * { pointer-events: none !important; }
.tear-side { position: absolute; inset: 0; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .65)); }
.tear-side.left { transform-origin: 0 100%; }
.tear-side.right { transform-origin: 100% 100%; }
.tear-edge { position: absolute; inset: 0; background: var(--bone); }
.tear-paper { position: absolute; inset: 0; background: var(--char); background-image: var(--paper-char); }
.tear-scrap { position: absolute; left: 0; top: 0; background: var(--bone); clip-path: polygon(0 20%, 70% 0, 100% 60%, 35% 100%); }
.gate-panel .gate-btn { margin-top: 2px; }
.gate-picker > .gate-chips { flex: none; }