/* ============ daomu.css — 《盜墓倖存者》的民國恐怖外觀 ============
 * 疊在 style.css 之上，只覆蓋配色與外框：舊木與黃銅框、泛黃的字、血紅漆的按鈕；版面結構在 style.css。
 */
:root {
  --ink: #e6d9bf;            /* 泛黃紙色的字 */
  --muted: #a3927a;
  --box1: #251b15;           /* 舊木、皮革 */
  --box2: #110c09;
  --edge: #8c6c45;           /* 黃銅 */
  --edge-in: #3b2a1c;
  --edge-out: #040202;
  --gold: #d9b56a;           /* 舊金 */
  --gold2: #9e7636;
  --red: #c0281c;            /* 血 */
  --green: #8fae6a;
  --shadow: #000000;
  --r1: #9a9488; --r2: #8fae6a; --r3: #6f9ec0; --r4: #b07ac8; --r5: #d9b56a;
  --serif: 'Noto Serif TC', 'Source Han Serif TC', 'PMingLiU', 'MingLiU', 'Songti TC', serif;
}
/* 簡中：換成簡體字型（繁體字型多半缺簡體字，會一個字一個字退回別的字型，看起來大小粗細不一） */
:root:lang(zh-Hans) {
  --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --font: 'Pixelify', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
}

body { background: #050303; }

/* 面板：深色舊木，黃銅細框，四周壓暗 */
.box {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(120, 80, 40, .10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 240, 210, .015) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--box1), var(--box2));
  border: 2px solid var(--edge);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--edge-out), inset 0 0 0 1px rgba(217, 181, 106, .22), inset 0 0 46px rgba(0, 0, 0, .75), 0 20px 60px rgba(0, 0, 0, .8);
  text-shadow: 1px 1px 0 #000;
}
/* 右下角一方朱紅印（印裡一個「斗」字，微微歪著蓋） */
.box::after {
  content: '斗'; position: absolute; right: 10px; bottom: 10px; width: 17px; height: 17px;
  font: 700 12px/17px var(--serif); text-align: center; text-shadow: none;
  color: rgba(244, 226, 200, .82); background: rgba(150, 26, 18, .62);
  border: 1px solid rgba(110, 14, 8, .8); border-radius: 2px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244, 226, 200, .18); transform: rotate(-5deg);
}
.box h1, .box h2 { font-family: var(--serif); letter-spacing: 3px; }

.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(40, 10, 6, .45), rgba(2, 1, 1, .9)); }

/* 按鈕：舊木；主要按鈕是血紅漆 */
.btn {
  border: 2px solid #6b5132;
  border-radius: 3px;
  background: linear-gradient(180deg, #3b2a1e, #1f150e);
  box-shadow: 0 0 0 2px var(--edge-out), 0 3px 0 var(--edge-out);
  color: var(--ink);
  text-shadow: 1px 1px 0 #000;
}
.btn.gold {
  background: linear-gradient(180deg, #8a1a12, #4e0b07);
  color: #f2dcc0; text-shadow: 1px 1px 0 #000;
  border-color: #c49a5a;
}
.btn.ghost { border-color: rgba(196, 154, 90, .4); }
.btn.danger { background: linear-gradient(180deg, #5a0c08, #2a0504); border-color: #a33; }

/* 標題：宋體、褪色的米白字、底下暈開一層血色 */
.logo .t1 {
  font-family: var(--serif); font-weight: 900; color: #d6c3a0; letter-spacing: 8px;
  text-shadow: 0 0 2px #000, 2px 2px 0 #2a0503, 0 0 22px rgba(150, 12, 8, .65);
}
.logo .t2 { color: #8f7f66; letter-spacing: 5px; font-family: var(--serif); }
/* 只在夠高的螢幕放大標題；手機橫放（矮螢幕）沿用 style.css 的 28px，才不會壓到頂部列 */
@media (min-height: 521px), (orientation: portrait) { .menu-left .logo .t1 { font-size: clamp(38px, 6.2vw, 68px); } }

/* 主選單 */
.menu-item { color: var(--ink); font-family: var(--serif); letter-spacing: 2px; }
.menu-item small { font-family: var(--font); letter-spacing: 0; }
.menu-item.play { color: #d84436; text-shadow: 1px 1px 0 #000, 0 0 12px rgba(200, 30, 20, .5); }
.menu-item:hover, .menu-item:focus-visible { background: rgba(140, 20, 12, .18); }

/* 夥伴卡：立繪像一張泛黃的老照片，四角壓暗 */
.partner-card .portrait {
  display: block; margin: 0 auto 8px; width: min(240px, 30vw); aspect-ratio: 3 / 4; object-fit: cover;
  border: 3px solid #2a1d12; outline: 2px solid #8c6c45; outline-offset: 1px;
  box-shadow: 0 0 0 6px #120c08, 0 14px 40px rgba(0, 0, 0, .85);
  filter: sepia(.18) contrast(1.06) brightness(.92);
  image-rendering: auto;
}
.partner-card .nm { font-family: var(--serif); letter-spacing: 4px; color: #e8d6b4; }
/* 手機橫放：立繪改用高度決定大小，名字才看得到 */
@media (max-height: 520px) {
  .partner-card .portrait {
    width: auto; height: min(42vh, 170px); margin-bottom: 2px;
    box-shadow: 0 0 0 4px #120c08, 0 8px 22px rgba(0, 0, 0, .85);
  }
  .logo .t1 { letter-spacing: 4px; }
}
@media (max-height: 400px) {
  .partner-card .portrait { height: min(38vh, 140px); }
}

/* 頂部列 */
.pill { background: rgba(20, 14, 10, .85); border-color: #6b5132; }

/* 開場警告 */
.warn-18 {
  border: 1px solid rgba(192, 40, 28, .55); background: rgba(60, 6, 4, .35);
  padding: 10px 14px; margin: 6px 0 12px; border-radius: 3px; font-size: 15px;
}
.warn-18 p { margin: 4px 0; text-wrap: pretty; }
.warn-18 b { color: #e0a090; }

/* 明器、合擊的卡：深色舊木 */
.cards > * {
  background: linear-gradient(180deg, #2a1f16, #17100b) !important;
  border-color: #7a5a36 !important;
}

/* 升級三選一：一張張黃符紙，朱砂雙框、紅字標題；進化卡是金色符紙（企劃書 17） */
#cards .card {
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 10, .05) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 12% 20%, rgba(255, 244, 200, .45), transparent 55%),
    radial-gradient(ellipse at 92% 85%, rgba(120, 70, 20, .22), transparent 50%),
    linear-gradient(180deg, #dcbf6e, #c49b48) !important;
  border: 2px solid #8a1a10 !important; border-radius: 2px;
  box-shadow: inset 0 0 0 3px #d9ba66, inset 0 0 0 4px rgba(138, 26, 16, .7), 0 4px 12px rgba(0, 0, 0, .65);
  color: #3a1a0a; text-shadow: none;
}
#cards .card:hover { transform: translateX(4px) rotate(-.4deg); filter: brightness(1.07); border-color: #8a1a10 !important; }
#cards .card .nm { color: #8a1a10; font-family: var(--serif); font-size: 19px; letter-spacing: 1px; }
#cards .card .ds { color: #3d2711; }
/* 招式連動（2026-10-16，systems/synergy.js）：升級卡上「搭配：…」那一行，朱砂小字 */
#cards .card .combo-hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #8a1a10; letter-spacing: .5px; }
#cards .card .key { color: #8a1a10; border-color: rgba(138, 26, 16, .55); }
#cards .card .ico { background: rgba(90, 30, 10, .14) !important; border: 1px solid rgba(138, 26, 16, .45); border-radius: 50%; }
#cards .card .tag-chip { box-shadow: 0 0 0 1px rgba(60, 20, 8, .35); }
#cards .card.evo {
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 0, .06) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 12% 20%, rgba(255, 250, 210, .6), transparent 55%),
    linear-gradient(180deg, #f0d276, #c99a2e) !important;
  box-shadow: inset 0 0 0 3px #ecca6a, inset 0 0 0 4px rgba(138, 26, 16, .85), 0 0 18px rgba(240, 200, 90, .35), 0 4px 12px rgba(0, 0, 0, .65);
}
#cards .card.evo .nm { color: #7a0e06; }
#cards.done .card.picked { border-color: #8a1a10 !important; }

/* 結算：泛黃報紙上的尋人啟事（企劃書 17） */
.box.paper {
  background:
    radial-gradient(ellipse at 14% 8%, rgba(120, 80, 30, .2), transparent 40%),
    radial-gradient(ellipse at 88% 92%, rgba(90, 50, 20, .24), transparent 45%),
    repeating-linear-gradient(0deg, rgba(60, 40, 20, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e4d6b3, #cdb98b);
  color: #2b2116; text-shadow: none;
  border: 1px solid #6b5132;
  box-shadow: 0 0 0 2px #24180e, inset 0 0 50px rgba(90, 60, 20, .28), 0 20px 60px rgba(0, 0, 0, .85);
}
.paper .paper-head {
  display: flex; justify-content: space-between; font: 700 12px var(--serif); letter-spacing: 3px; color: #5a4630;
  border-bottom: 3px double #3a2c1c; padding-bottom: 4px; margin-bottom: 4px;
}
.paper h2 { color: #1c130b; font-size: 30px; letter-spacing: 12px; margin: 2px 0 8px; text-shadow: none; }
.paper .notice { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(58, 44, 28, .5); }
.paper .notice:empty { display: none; }
.paper .notice .photo {
  flex: 0 0 92px; width: 92px; height: 122px; object-fit: cover; object-position: 50% 12%;
  filter: sepia(.8) grayscale(.35) contrast(1.15) brightness(.92);
  border: 4px solid #efe4c8; box-shadow: 0 0 0 1px #6b5132, 3px 4px 0 rgba(0, 0, 0, .22); transform: rotate(-1.5deg);
}
.paper .notice p { margin: 0; font: 15px/1.65 var(--serif); color: #2b2116; text-align: justify; }
.paper .stats > div { background: transparent; border: 1px solid rgba(58, 44, 28, .35); border-radius: 0; }
.paper .stats > div > span:first-child, .paper .caught > span { color: #6b5638; }
.paper .stats b { color: #1c130b; }
.paper .stats .brk { font-size: 12px; color: #6b5638; }
.paper .gold:not(.btn) { color: #8a1a10 !important; }
/* 成就這類小提示框不蓋印（會壓到字） */
.box.ach-pop::after { content: none; }
.paper .caught-row small { color: #5a2a18; }
.paper .support-ask p { color: #2b2116; }
@media (max-height: 520px) {
  .paper h2 { font-size: 22px; letter-spacing: 8px; margin-bottom: 4px; }
  .paper .paper-head { margin-bottom: 2px; }
  .paper .notice { padding-bottom: 6px; }
  .paper .notice .photo { flex-basis: 62px; width: 62px; height: 82px; }
  .paper .notice p { font-size: 13px; line-height: 1.5; }
  /* 手機橫放：時間、等級、擊倒、頭目排成一列，省下兩格的高度 */
  .paper .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; }
  .paper .stats > div { padding: 5px 6px; }
  .paper .stats b { font-size: 18px; }
}


/* ---------- 結算的兩版（2026-10-16，設計提案第 9 項；run-ui.js）：頭版是啟事，二版是斗中日誌 ----------
   框是一欄 flex：報頭、標題、能捲的內文（#over-scroll）、按鈕列。按鈕列在內文外面，不會蓋住任何一行
   （QA 2026-10-16：以前「回鬼市」釘在框底，蓋住最後的能力、撐出新紀錄，也看不出還能往下捲）。
   內文還沒捲到底：底下淡出，按鈕列上方浮出「往下捲還有」（點了往下捲）。
   夠寬的畫面（≥700）報紙加寬成兩欄：頭版左邊啟事＋批語、右邊數字；二版左右是各招出力｜最後三下，時間軸、目標跨兩欄。
   電腦 1280×720 這類矮寬螢幕頭版一頁放得下；手機直拿一欄往下捲。 */
#scr-over #over-box { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; width: min(540px, 100%); }
#over-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#over-scroll.more {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
  mask-image: linear-gradient(180deg, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
}
#scr-over .over-btns {
  flex: 0 0 auto; position: relative; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 10px 0 18px; border-top: 1px solid rgba(58, 44, 28, .35);
}
#scr-over .over-more {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 1;
  padding: 1px 10px; font: 700 12px/18px var(--serif); letter-spacing: 1px; color: #f3e3c0; background: rgba(58, 44, 28, .88);
  border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
#scr-over .over-more.hidden { display: none; }
#btn-journal, #btn-rerun { font-family: var(--serif); letter-spacing: 1px; }
@media (min-width: 700px) {
  #scr-over #over-box { width: min(880px, 100%); }
  #over-p1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: start; }
  #over-p1 > #over-notice { grid-column: 1; grid-row: 1; }
  #over-p1 > #over-advice { grid-column: 1; grid-row: 2; }
  #over-p1 > #over-extra { grid-column: 1; grid-row: 3; }
  #over-p1 > #over-stats { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #over-p1 > #over-stats > div { padding: 6px 8px; }
}
/* 凶相、新紀錄、贊助的提示（#over-extra）：沒有就不佔位置 */
#over-extra { grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; }
#over-extra:empty, #over-extra:not(:has(> *)) { display: none; }
/* 頭版：柳半仙的批語（照這一局挑一句，systems/journal.js 的 advice），像報上一小格加框的短評 */
.paper .advice { text-align: left; margin: 8px 0 0; padding: 6px 10px; border: 1px solid rgba(138, 26, 16, .45); background: rgba(138, 26, 16, .05); }
.paper .advice.hidden { display: none; }
.paper .advice p { margin: 0; font: 14px/1.6 var(--serif); color: #2b2116; }
.paper .advice .seal { display: inline-block; margin-right: 7px; padding: 0 5px; font: 700 12px/18px var(--serif); letter-spacing: 1px; color: #f3e3c0;
  background: #8a1a10; border-radius: 2px; vertical-align: 1px; }
/* 二版：斗中日誌 */
.journal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 18px; text-align: left; margin: 2px 0 4px; color: #2b2116; }
.journal.hidden { display: none; }
.journal h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 5px; padding-bottom: 2px;
  font: 700 14px var(--serif); letter-spacing: 2px; color: #3a2c1c; border-bottom: 1px solid rgba(58, 44, 28, .55); }
.journal h4 small { font: 400 11px var(--font); letter-spacing: 0; color: #6b5638; }
.journal .none { font-size: 12px; color: #6b5638; margin: 0; }
/* 各招出力 */
.jr-mv .row { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.8em; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; }
.jr-mv .nm { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.jr-mv .nm img { flex: 0 0 auto; }
.jr-mv .nm b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #1c130b; }
.jr-mv .nm small { flex: 0 0 auto; font-size: 11px; color: #6b5638; }
.jr-mv .bar { position: relative; height: 10px; background: rgba(58, 44, 28, .1); border: 1px solid rgba(58, 44, 28, .4); }
.jr-mv .bar i { position: absolute; left: 0; top: 0; bottom: 0; box-shadow: inset 0 0 0 1px rgba(28, 19, 11, .35); }
.jr-mv .pct { text-align: right; font-weight: 700; color: #1c130b; }
.jr-mv .row .none { font-size: 11px; }
/* 倒下前最後三下 */
.jr-hits ol { list-style: none; margin: 0; padding: 0; }
.jr-hits li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr) auto 3.6em; align-items: baseline; gap: 6px; padding: 3px 0; font-size: 13px;
  border-bottom: 1px dotted rgba(58, 44, 28, .35); }
.jr-hits .t { color: #6b5638; font-size: 12px; }
.jr-hits .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-hits .who b { color: #1c130b; }
.jr-hits .who em { font-style: normal; font-size: 10px; margin-left: 4px; padding: 0 4px; border: 1px solid rgba(58, 44, 28, .45); color: #5a4630; }
.jr-hits .d { color: #8a1a10; font-weight: 700; text-align: right; }
.jr-hits .hp { color: #6b5638; font-size: 12px; text-align: right; }
.jr-hits li.fatal .who b, .jr-hits li.fatal .d { color: #8a1a10; }
.jr-hits li.fatal em:last-child { color: #f3e3c0; background: #8a1a10; border-color: #8a1a10; }
/* 時間軸 */
.jr-tl .tl { display: grid; gap: 3px; }
.jr-tl .lane { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: center; gap: 6px; }
.jr-tl .ln { font: 700 11px/1 var(--serif); color: #5a4630; letter-spacing: 1px; }
.jr-tl .tr { position: relative; height: 13px; background: rgba(58, 44, 28, .08); }
.jr-tl .sep { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed rgba(58, 44, 28, .45); }
.jr-tl .bar { position: absolute; top: 2px; bottom: 2px; min-width: 3px; box-shadow: inset 0 0 0 1px rgba(28, 19, 11, .3); }
.jr-tl .bar.boss { background: #8a1a10; }
.jr-tl .bar.boss.alive { background: repeating-linear-gradient(90deg, #8a1a10 0 3px, rgba(138, 26, 16, .35) 3px 6px); }
.jr-tl .bar.rift { background: #5e4a86; }
.jr-tl .bar.horde { background: #4a1410; }
.jr-tl .bar.ev { background: #9e7636; }
.jr-tl .pt { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 700 10px/12px var(--serif); font-style: normal; padding: 0 2px;
  color: #f3e3c0; background: #3a2c1c; border-radius: 2px; white-space: nowrap; }
.jr-tl .pt.won { background: #3f6a3a; }
.jr-tl .pt.lost, .jr-tl .pt.boss { background: #8a1a10; }
.jr-tl .pt.thief { background: #9e7636; }
.jr-tl .axis .tr { height: 13px; background: none; }
.jr-tl .axis .tr span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; line-height: 13px; color: #6b5638; white-space: nowrap; }
.jr-tl .axis .tr span:first-child { transform: none; }
.jr-tl .axis .tr span.end { transform: translateX(-100%); font-weight: 700; color: #3a2c1c; }
.jr-tl .tl-layers { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 5px 0 0; font-size: 11px; color: #5a4630; }
.jr-tl .tl-layers b { display: inline-block; min-width: 13px; margin-right: 3px; text-align: center; color: #f3e3c0; background: #5a4630; font-size: 10px; border-radius: 2px; }
/* 離下一步還差 */
.jr-goals .goal { padding: 3px 0 5px; }
.jr-goals .gt { font-size: 13px; color: #1c130b; }
.jr-goals .gb { height: 6px; margin: 3px 0 2px; background: rgba(58, 44, 28, .12); border: 1px solid rgba(58, 44, 28, .35); position: relative; }
.jr-goals .gb i { position: absolute; left: 0; top: 0; bottom: 0; background: #9e7636; }
.jr-goals .goal.done .gb i { background: #3f6a3a; }
.jr-goals .goal.done .gs { color: #3f6a3a; font-weight: 700; }
.jr-goals .gs { font-size: 11px; color: #6b5638; }
@media (min-width: 700px) {
  .journal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .journal .jr-tl, .journal .jr-goals { grid-column: 1 / -1; }
  .jr-goals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .jr-goals h4 { grid-column: 1 / -1; }
}
/* 手機直拿：報紙四周的留白收一點；招式名字比長條要緊（長條短一點沒關係，名字不要被截掉） */
@media (max-width: 480px) {
  #scr-over { padding: 10px 8px; }
  #scr-over #over-box { padding: 14px 12px 0; }
  #scr-over .over-btns { gap: 6px; padding-bottom: 12px; }
  #scr-over #over-box::after { display: none; }   /* 右下角的朱印會壓到「回鬼市」：窄的時候不蓋 */
  #scr-over .over-btns .btn { padding: 8px 11px; font-size: 16px; }
  /* 多了「分享戰績」（2026-10-16）：四顆按鈕排成 2×2；搭夥時沒有「再下一斗」，「回鬼市」佔滿第二列 */
  #scr-over .over-btns { display: grid; grid-template-columns: 1fr 1fr; }
  #scr-over .over-btns #btn-rerun.hidden + #btn-again { grid-column: 1 / -1; }
  .jr-mv .row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 2.6em; gap: 5px; }
  .jr-mv .nm small { font-size: 10px; }
}
@media (max-height: 520px) {
  .paper .advice { margin-top: 6px; padding: 3px 8px; }
  .paper .advice p { font-size: 13px; line-height: 1.5; }
}

/* 設定 → 操作：鍵位（每個動作一顆按鈕，上面小字是動作、下面是現在的鍵；正在等新鍵的那顆是金色） */
.key-grid { display: grid; gap: 8px; margin: 4px 0; }
.key-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: 8px; }
.key-row > b { font-size: 14px; }
.key-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.key-btn { min-width: 64px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 4px 10px; }
.key-btn small { font-size: 10px; color: var(--muted); font-weight: 400; }
.key-btn.gold small { color: #5a3a10; }
/* 手把的游標（gamepad.js）：金框 */
.pad-focus { outline: 3px solid var(--gold) !important; outline-offset: 2px; }
.paper .pad-focus { outline-color: #8a1a10 !important; }   /* 泛黃的報紙上金框看不清楚，改朱紅 */
#cards .card.pad-focus { transform: translateX(4px) rotate(-.4deg); filter: brightness(1.07); }

/* 名冊與本事長進的人物展示框：燭光照著的深木（原作是深藍底、藍框） */
.stage {
  background:
    radial-gradient(ellipse at 50% 88%, rgba(240, 170, 90, .16), transparent 60%),
    linear-gradient(180deg, rgba(38, 27, 19, .94), rgba(14, 10, 8, .96));
  box-shadow: 0 0 0 3px #120c08, 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 230, 190, .05);
}
.stage.shiny { box-shadow: 0 0 0 3px #120c08, 0 0 22px rgba(154, 230, 255, .4), inset 0 0 0 2px rgba(255, 255, 255, .06); }

/* 輸入框、下拉選單：深木底、黃銅框（原作是亮藍底） */
.field { background: #1c140e; color: var(--ink); border-color: #6b5132; }
.field:focus { border-color: #c49a5a; }
select.field option { background: #1c140e; color: var(--ink); }
.news-tag.new { background: var(--green); } .news-tag.chg { background: var(--r3); } .news-tag.fix { background: #c8903a; }
.sync { box-shadow: 0 0 0 2px #120c08; }

/* 提示框與捲軸：深木黃銅（原作是深藍底、白捲軸） */
.toast { background: rgba(28, 20, 14, .96); border-color: #8c6c45; border-radius: 3px; color: var(--ink); }
/* 局內點明器格、合擊圖示跳出的說明：放在招式欄上面（招式欄的高度跟著介面大小 --hud-k，同局內聊天紀錄的算法） */
.toast.above { bottom: calc(96px * var(--hud-k, 1) + min(28px, env(safe-area-inset-bottom, 0px)) + 8px); width: max-content; max-width: calc(100vw - 24px); text-align: center; }
::-webkit-scrollbar-thumb { background: rgba(196, 154, 90, .35); }

/* 開場「點一下開始」與載入畫面的標題：跟主選單同樣的宋體、褪色米白、血色暈光（原作是橘色粗黑體） */
.boot-in h1 {
  font-family: var(--serif); font-weight: 900; color: #d6c3a0; letter-spacing: 10px;
  text-shadow: 0 0 2px #000, 3px 3px 0 #2a0503, 0 0 26px rgba(150, 12, 8, .7);
}
.tapstart .boot-in p { color: #b8a888; }
.tap-blink { color: #e6d9bf !important; }

/* 手機橫放時，選人畫面的八個人排成一排（原本一排七個，第八個的名字被切掉） */
@media (max-height: 520px) {
  #starter-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  #starter-grid .cell b { font-size: 12px; letter-spacing: -0.5px; }
}

/* 求籤的按鈕釘在框底：手機橫放時看板比螢幕高，原本要在框裡往下捲才找得到（結算報紙的按鈕列見上面「結算的兩版」） */
@media (max-height: 520px) { #scr-over .over-btns { padding: 6px 0 8px; } }
#scr-gacha .pull-row {
  position: sticky; bottom: -1px; z-index: 2; padding: 8px 0 6px;
  background: linear-gradient(180deg, rgba(22, 16, 11, 0), rgba(22, 16, 11, .97) 30%);
}
@media (max-height: 520px) {
  #scr-gacha .banner .feat { height: 110px; }
  #scr-gacha .pull-row { margin-top: 6px !important; }
}

/* 名冊詳細頁：身分、一句話；已收的人用立繪當展示框背景 */
.dex-title { color: var(--gold); font: 700 14px/1.4 var(--serif); letter-spacing: 2px; margin-top: 2px; }
.dex-line { color: var(--muted); font: 13px/1.6 var(--serif); margin: 4px 6px 2px; }
#dex-big.has-portrait { background-size: cover; background-position: 50% 14%; }

/* 設定的雲端帳號表單 */
.acct-form { display: grid; gap: 8px; margin: 6px 0 4px; }
.acct-form .field { width: 100%; }

/* 下斗地點（regions.js）：主選單、房間共用的一排按鈕＋說明 */
.region-pick { margin: 0 0 8px; }
.menu-list .region-pick { grid-column: 1 / -1; margin: -2px 12px 6px 54px; }
.region-pick .rp-head { font: 700 13px/1.2 var(--serif); letter-spacing: 2px; color: var(--muted); margin-bottom: 4px; }
.region-pick .rp-seg { margin: 0 0 4px; width: auto; justify-content: stretch; }
/* 寬度照字數分（flex-basis auto）：以前四格一樣寬，「黑水城」加鎖頭放不下，電腦版主選單的鎖頭被切成一條細線 */
.region-pick .rp-seg button { flex: 1 1 auto; min-width: 0; gap: 0; justify-content: center; font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 3px; }
.region-pick .rp-seg button.on { background: rgba(140, 20, 12, .32); color: #f0d9b0; }
/* 五個以上的區域（2026-10-16 長沙起）：兩列，每列最多 4 顆（照字數分寬度，第二列的按鈕拉滿） */
.region-pick .rp-seg.rp-two { flex-wrap: wrap; row-gap: 3px; }
.region-pick .rp-seg.rp-two button { flex: 1 1 calc(25% - 4px); }
/* 九個以上（2026-10-18 巴蜀起）：三列，每列 3 顆（手機直拿也放得下；第十個區域以後再改成捲動） */
.region-pick .rp-seg.rp-three { flex-wrap: wrap; row-gap: 3px; }
.region-pick .rp-seg.rp-three button { flex: 1 1 calc(33.33% - 4px); }
.region-pick .rp-seg button.locked { color: #77706a; background: rgba(0, 0, 0, .35); }
.region-pick .rp-seg button.locked::after { content: ''; display: inline-block; width: 7px; height: 6px; margin-left: 4px; border: 1px solid currentColor; border-radius: 1px; vertical-align: 1px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.region-pick .rp-hint { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }
@media (max-height: 660px) {
  .menu-list .region-pick { margin: 0 6px 4px 10px; }
  .region-pick .rp-head { display: none; }
  .region-pick .rp-hint { display: none; }
  .region-pick .rp-seg button { padding: 3px 6px; font-size: 13px; }
}

/* 本事長進：第七輪多開的高階等級（格子帶紅邊、按鈕標「高階」） */
.upg-item .pips i.hi { box-shadow: inset 0 0 0 1px #b0382a; }
.upg-item .pips i.hi.on { background: #c8503a; }
.upg-item .hi-tag { color: #ffb08a; font-size: 11px; margin-right: 2px; }
/* 2026-10-17 上限翻倍多出來的「極階」：格子帶紫邊 */
.upg-item .pips i.top { box-shadow: inset 0 0 0 1px #8a5ad0; }
.upg-item .pips i.top.on { background: #a874e8; }
/* 15 級的格子：縮小並允許換行，按鈕才不會擠到隔壁 */
.upg-item { min-width: 0; }
.upg-item > div:nth-child(2) { min-width: 0; }
.upg-item .pips { flex-wrap: wrap; gap: 2px; max-width: 100%; }
.upg-item .pips i { width: 9px; flex: 0 0 9px; }
/* 本事長進：分兩組（這個人自己的、全帳號共用的六項，2026-10-16），共用的那幾項左邊一道金線、名字旁標「全帳號」 */
.upg-sec { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 2px -2px; }
.upg-sec b { color: var(--gold); font: 700 14px/1.3 var(--serif); letter-spacing: 2px; }
.upg-sec span { color: var(--muted); font-size: 12px; }
.upg-item.acct { box-shadow: inset 3px 0 0 var(--gold2); }
.upg-item .acct-tag { display: inline-block; padding: 0 5px; border: 1px solid var(--gold2); border-radius: 2px; color: var(--gold); font-size: 11px; line-height: 16px; vertical-align: 1px; white-space: nowrap; }
.upg-item.two .upg-btns { flex-direction: column; align-items: stretch; }

/* ---------- 招式譜 ---------- */
#scr-moves .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.mv-tools { gap: 8px; margin-top: 6px; flex-wrap: wrap; }
#mv-types .chip small { opacity: .7; margin-left: 2px; font-size: 11px; }
#mv-types .chip.empty { opacity: .45; }
.mv-tools .field { width: auto; min-width: 140px; }
.mv-tools #mv-q { flex: 1; min-width: 160px; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 62vh; overflow-y: auto; padding-right: 4px; align-content: start; }
.mv-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: rgba(0,0,0,.28); border: 1px solid rgba(232,200,140,.14); border-radius: 6px; color: var(--ink, #e8dcc0); font-size: 12px; cursor: pointer; }
.mv-cell:hover { border-color: rgba(232,200,140,.45); }
.mv-cell.on { border-color: var(--gold, #d9b56a); background: rgba(217,181,106,.14); }
.mv-cell.own span { color: var(--gold, #d9b56a); }
.mv-detail { max-height: 66vh; overflow-y: auto; }
.mv-head { display: flex; gap: 12px; align-items: center; }
.mv-head h3 { margin: 0 0 4px; }
.mv-badge { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 10px; font-size: 12px; border: 1px solid var(--c, rgba(232,200,140,.4)); color: var(--c, #e8dcc0); }
.mv-badge.gold { color: var(--gold, #d9b56a); border-color: var(--gold, #d9b56a); }
.mv-desc { margin: 10px 0; line-height: 1.6; }
.mv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.mv-stats div { background: rgba(0,0,0,.25); border-radius: 5px; padding: 4px 8px; display: flex; flex-direction: column; }
.mv-stats span { font-size: 11px; color: var(--muted, #a8987c); }
.mv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mv-tags span { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: rgba(176,56,42,.22); border: 1px solid rgba(176,56,42,.55); cursor: help; }
.mv-detail h4 { margin: 14px 0 6px; }
.mv-ups { margin: 0; padding-left: 0; list-style: none; font-size: 13px; line-height: 1.7; }
.mv-ups b { color: var(--gold, #d9b56a); margin-right: 6px; }
.mv-evo { font-size: 13px; color: #f0c890; }
.mv-who { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-person { display: flex; flex-direction: column; align-items: center; width: 58px; padding: 3px 0; background: rgba(0,0,0,.25); border: 1px solid rgba(232,200,140,.14); border-radius: 6px; color: inherit; font-size: 11px; cursor: pointer; }
.mv-person.locked { opacity: .45; }
@media (max-width: 900px) {
  #scr-moves .split { grid-template-columns: 1fr; }
  .mv-grid { max-height: 40vh; }
  .mv-detail { max-height: none; }
}

/* ---------- 公開房間、房間大廳的準備與聊天、下斗中的聊天（第三期：social-ui.js、chat-ui.js） ---------- */
@media (min-height: 521px), (orientation: portrait) { #scr-rooms { padding-top: 66px; } }
.lobby-title { font: 400 15px/1.2 var(--font); letter-spacing: 0; color: var(--gold); }
.lobby-pub { gap: 10px; margin: -6px 0 10px; }
.lobby-pub .seg { margin: 0; }
.lobby-pub .seg button { padding: 5px 14px; }
.lobby-pub .seg button.on { background: rgba(140, 20, 12, .32); color: #f0d9b0; }
.lobby-pub form { gap: 8px; min-width: 220px; }
.lobby-pub .field { padding: 5px 10px; font-size: 15px; min-width: 0; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; }
.lobby-grid .lobby-members { margin-top: 0; }
/* 隊員卡照左欄的寬度排（一張至少 138px：畫布 120 加邊框）：以前固定四欄，平板直拿（768）、900～1000 寬的視窗左欄不夠寬，
   第三、四張卡伸到右邊、被聊天框蓋住。手機（≤760）照舊兩欄（style.css） */
@media (min-width: 761px) { .lobby-grid .lobby-members { grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr)); } }
.lob-card .rdy { font-size: 12px; color: #c98a7a; }
.lob-card .rdy.on { color: var(--green); }
.lob-card .rdy.host { color: var(--gold); }
.lob-card .conn:empty { display: none; }
.lob-card .lob-kick { margin-top: 4px; padding: 2px 10px; font-size: 12px; }
.chat-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chat-head { font: 700 13px/1.2 var(--serif); letter-spacing: 2px; color: var(--muted); }
.chat-log {
  height: clamp(140px, 42vh, 340px); overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(0, 0, 0, .32); border: 1px solid rgba(196, 154, 90, .28); border-radius: 3px;
  font-size: 14px; line-height: 1.45; user-select: text; -webkit-user-select: text;
}
.chat-line { overflow-wrap: anywhere; }
.chat-line .who { font-weight: 700; }
.chat-line.sys { color: var(--muted); font-size: 12px; }
.chat-line.sys b { color: var(--ink); font-weight: 400; }
.chat-empty { margin: 0; color: var(--muted); font-size: 13px; }
.chat-form { display: flex; gap: 6px; }
.chat-form .field { flex: 1; min-width: 0; padding: 6px 10px; font-size: 15px; }
.chat-form .field, .chat-run-form .field, .lobby-pub .field, .rooms-new .field { user-select: text; -webkit-user-select: text; }
@media (max-width: 640px) { .lobby-grid { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  .lobby-pub { margin: 0 0 6px; }
  .lob-card { min-height: 0; padding: 4px 4px 6px; }
  .lob-card canvas { width: 80px; height: 64px; }
  .lob-card b { font-size: 14px; }
  .lobby-grid { gap: 10px; }
}

/* 公開房間列表 */
.rooms-new { gap: 8px; margin: 0 0 2px; }
.rooms-new .field { min-width: 180px; }
.rooms-region { margin: 4px 0 2px; }
.rooms-in { margin: 0 0 6px; padding: 8px 12px; border: 1px solid rgba(217, 181, 106, .45); background: rgba(217, 181, 106, .08); border-radius: 3px; }
#rooms-msg { margin: 4px 0 6px; min-height: 1em; }
#rooms-msg.bad { color: #ffb0b8; }
.rooms-list { max-height: 46vh; }
.room-row .rm-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.room-row .rm-main b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .rm-main small { color: var(--muted); font-size: 12px; }
.room-row .rm-n { font-weight: 700; min-width: 36px; text-align: right; }
.room-row .st { min-width: 58px; text-align: center; }
.room-row.off { opacity: .55; }
.room-row.mine { border-color: rgba(217, 181, 106, .7); }
.rooms-empty { margin: 6px 0; }

/* 下斗中的聊天：左下角疊最近幾句（招式列上面），10 秒後淡掉；手機的「聊」在暫停鍵下面 */
.chat-run {
  position: fixed; z-index: 30; pointer-events: none;
  /* 介面放大時（--hud-k，hud.js 設的）招式欄變高，聊天跟著往上讓 */
  left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(96px * var(--hud-k, 1) + min(28px, env(safe-area-inset-bottom, 0px)));
  width: min(400px, 48vw); display: flex; flex-direction: column; gap: 6px;
}
.chat-run-log { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.chat-run-log .chat-line {
  max-width: 100%; padding: 2px 8px; border-radius: 3px; background: rgba(12, 8, 6, .66);
  font-size: 13px; line-height: 1.4; text-shadow: 1px 1px 0 #000; transition: opacity .9s;
}
.chat-run-log .chat-line.old { opacity: 0; }
.chat-run:not(.open) .chat-run-log .chat-line:nth-last-child(n+6) { display: none; }
.chat-run.open .chat-run-log .chat-line { opacity: 1; transition: none; }
.chat-run-form { display: flex; gap: 6px; pointer-events: auto; }
.chat-run-form .field { flex: 1; min-width: 0; padding: 6px 10px; font-size: 15px; background: rgba(28, 20, 14, .95); }
.chat-run.top .chat-run-form {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  width: min(560px, calc(100vw - 150px));
}
.chat-run-btn {
  position: fixed; z-index: 30; width: calc(40px * var(--hud-k, 1)); height: calc(40px * var(--hud-k, 1)); padding: 0; font-size: calc(17px * var(--hud-k, 1)); line-height: 1;
  right: calc(12px * var(--hud-k, 1) + min(44px, env(safe-area-inset-right, 0px))); top: calc(60px * var(--hud-k, 1) + min(20px, env(safe-area-inset-top, 0px)));
  background: rgba(22, 14, 10, .7); border-color: rgba(244, 248, 255, .8);
}
/* 直拿：暫停鍵整個讓出狀態列（hud.js），「聊」跟著 */
@media (orientation: portrait) { .chat-run-btn { top: calc(60px * var(--hud-k, 1) + env(safe-area-inset-top, 0px)); } }
/* 主選單：雲端帳號多了「好友」「公開房間」，單欄放不下（設定被擠出框外）的高度改成兩欄，跟矮螢幕的排法一樣。
   只給選單在右邊一欄的寬畫面（min-width 761，跟 style.css 上下排的條件互補）：直拿的手機（375×812 這種）以前也套到，
   登入江湖帳號後主選單被壓成 52vw 寬、擠在左邊，字一個一個直排（QA 2026-10-15b） */
@media (min-width: 761px) and (min-height: 661px) and (max-height: 980px) {
  #scr-menu.social .menu-right { width: min(500px, 52vw); }
  #scr-menu.social .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  #scr-menu.social .menu-item.play { grid-column: span 2; }
  #scr-menu.social .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 江湖榜規則（2026-10-15） */
.rk-rules { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.rk-rules summary { cursor: pointer; color: var(--gold); font-family: var(--serif); letter-spacing: 1px; }
.rk-rules ul { margin: 6px 0 0 18px; padding: 0; }
.rk-rules li { margin: 2px 0; }

/* 求籤動畫跳過（2026-10-15） */
.pull-bar { display: flex; align-items: center; gap: 14px; margin-top: -8px; }
.pull-bar.hidden { display: none; }
.pull-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.pull-auto input { accent-color: var(--gold); }

/* ---------------- 管理員（2026-10-15，js/ui/admin-ui.js） ---------------- */
.adm h3 { margin: 16px 0 4px; }
.adm-check { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 14px; }
.adm-users { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.adm-user { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid rgba(200,160,90,.3); border-radius: 6px; background: rgba(0,0,0,.25); }
.adm-user .grow { flex: 1 1 220px; min-width: 0; }
.adm-acts { gap: 6px; flex-wrap: wrap; }
.adm-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 12px; background: #3a5a2a; color: #e8f5d8; }
.adm-tag.bad { background: #6a1a14; color: #ffd8d0; }
.adm-add { flex-basis: 100%; }
.adm-add .row.wrap { flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.adm-add label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
.adm-add .field { width: 96px; }
.adm-log { margin-top: 8px; max-height: 260px; overflow-y: auto; font-size: 13px; }
.adm-logrow { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.adm-logrow small { opacity: .7; margin: 0 4px; }
.rk-row .adm-del { margin-left: 6px; padding: 2px 8px; font-size: 12px; }
/* 沒有開局收據的成績（防作弊 P0 的過渡期，2026-10-18） */
.rk-row .rk-unv { margin-left: 6px; padding: 0 4px; border: 1px solid rgba(200,160,90,.4); border-radius: 3px; font-size: 11px; font-style: normal; font-weight: 400; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.adm-flag-lines { margin-top: 2px; font-size: 13px; line-height: 1.5; }
.adm-flag-lines small { opacity: .7; }

/* ---------------- 暫停畫面「這一局」：招式、明器、已選能力（2026-10-15，run-ui.js buildHtml） ----------------
 * 暫停框整個塞在畫面裡：「這一局」自己捲，聲音和繼續、設定、收手一定看得到。
 * 手機橫拿（矮）：左邊這一局、右邊標題以外的聲音與按鈕。 */
#scr-pause .box { display: flex; flex-direction: column; }
.pause-build { flex: 0 1 auto; min-height: 72px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 0 14px; text-align: left; margin: 2px 0 10px; padding-right: 4px; }
.pause-build:empty { display: none; }
.pause-build h4 { margin: 6px 0 4px; font: 700 14px/1.2 var(--serif); letter-spacing: 2px; color: var(--gold); }
.pause-build h4 small { font: 400 11px var(--font); letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.pause-build .note { margin: 4px 0; font-size: 12px; }
.pb-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 6px; margin-bottom: 4px; border-radius: 3px; background: rgba(0, 0, 0, .28); font-size: 14px; }
.pb-row.on { box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .65); }
.pb-row.bond { box-shadow: inset 0 0 0 1px #ff8ad8; }
.pb-tag { font-size: 11px; color: #ff8ad8; }
.pb-mv { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.pb-mv .lv { color: var(--ink); font-size: 12px; }
.pb-mv small, .pb-desc { color: var(--muted); font-size: 11px; }
.pb-mv small.ok { color: #e8c060; }
.pb-st { display: grid; grid-template-columns: 24px auto auto minmax(0, 1fr); align-items: center; gap: 0 6px; padding: 1px 6px; margin-bottom: 3px; border-radius: 3px; background: rgba(0, 0, 0, .22); font-size: 14px; }
.pb-st .n { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pb-st .n small { font-weight: 400; color: var(--muted); font-size: 11px; }
.pb-st.full .n { color: #e8c060; }
.pb-st .sum { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 窄（手機直拿）：一欄 */
@media (max-width: 560px) { .pause-build { grid-template-columns: minmax(0, 1fr); } }
/* 矮又夠寬（手機橫拿）：左這一局、右聲音與按鈕 */
@media (max-height: 520px) and (min-width: 600px) {
  #scr-pause .box { display: grid; width: min(900px, 100%) !important; height: 100%;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  #scr-pause .box > h2, #scr-pause .box > .sub, #scr-pause .box > #pause-coop { grid-column: 1 / -1; }
  #scr-pause .pause-build { grid-column: 1; grid-row: 3 / span 2; align-self: stretch; max-height: none; margin: 0; }
  #scr-pause #pause-sound { grid-column: 2; grid-row: 3; margin: 6px 0; }
  #scr-pause .box > .row { grid-column: 2; grid-row: 4; }
  #scr-pause .box > .row .btn { flex: 1 1 auto; }
}

/* ================= 手機直拿（2026-10-15 起直拿也能玩：以前直拿只顯示「請把手機橫過來」，這些畫面沒排過） ================= */
/* 2026-10-15：直拿一律套這一段（以前只看高度 ≥521，直拿時畫面變矮就退回橫拿的排法，主選單擠成左右兩欄） */
@media (max-width: 560px) and (min-height: 521px), (max-width: 560px) and (orientation: portrait) {
  /* 頂部列排成一行：拜帖、全螢幕收起來（求籤畫面、設定裡都有），名字太長就截掉（以前會被擠成直排） */
  .topbar { top: calc(6px + env(safe-area-inset-top, 0px)); right: 6px; left: 6px; justify-content: flex-end; gap: 5px; }
  .pill { padding: 2px 8px; font-size: 13px; gap: 5px; }
  /* 全畫面鈕留著（2026-10-16，Randal 用 iPhone：橫拿玩之前要先按它把網址列收起來）；名字框縮窄一點讓位 */
  #tickets-pill { display: none !important; }
  #user-pill { display: block; max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 名字前的皇冠（訪客是人像）收起來、雲端狀態的點靠近一點：以前連預設的「無名氏」三個字都放不下，375 寬只剩「無…」、360 寬只剩「…」（QA 2026-10-19） */
  #user-pill > img { display: none; }
  #user-pill .sync { margin-left: 4px; }
  #user-pill { padding: 2px 7px; }
  /* 聲音鈕跟旁邊三顆一樣寬（#btn-sound 的 padding 比 .topbar .btn.small 優先，直拿時比別顆寬 6px） */
  .topbar #btn-sound { padding: 2px 6px; }
  .topbar .btn.small { padding: 2px 6px; }
  .credits-line { display: none !important; }
  /* 主選單：標題讓出頂部列，立繪小一點，選單兩欄 */
  .menu-left { padding: calc(52px + env(safe-area-inset-top, 0px)) 12px 4px; flex: 0 0 auto; }
  .menu-left .logo { margin-bottom: 4px; }
  .menu-left .logo .t1 { font-size: 30px; letter-spacing: 6px; }
  .logo .t2 { font-size: 11px; letter-spacing: 3px; }
  #menu-partner { height: min(24vh, 180px); width: auto; }
  .partner-card { margin-top: 2px; }
  .partner-card .portrait { width: auto; height: min(28vh, 220px); margin-bottom: 4px; }
  .partner-card .nm { font-size: 20px; }
  /* 選單不要在框裡自己捲（以前直拿時下斗以下的選項被藏在框裡），整個主選單一起捲 */
  .menu-right { padding: 6px 10px 12px; gap: 8px; flex: 0 0 auto; overflow: visible; }
  .menu-right .box { max-height: none; overflow: visible; }
  .menu-right > :first-child { margin-top: 0; }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .menu-item { font-size: 17px; padding: 6px 6px; grid-template-columns: 26px 1fr; column-gap: 6px; }
  .menu-item::before { display: none; }
  .menu-item small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-item.play { grid-column: span 2; font-size: 26px; }
  .mi-ico img { width: 22px; height: 22px; }
  .menu-list .region-pick { grid-column: 1 / -1; margin: 0 4px 6px; }
  /* 名冊：一排三個 */
  #scr-dex .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #scr-dex .cell canvas { width: 69px; height: 60px; }
  #scr-dex .cell b { font-size: 12px; }
  /* 選人：一排四個，說明自己一行 */
  #starter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #starter-grid .cell canvas { width: 69px; height: 60px; }
  #starter-grid .cell b { font-size: 12px; letter-spacing: -0.5px; }
  #scr-starters .row.between { flex-wrap: wrap; }
  #starter-info { flex: 1 1 100%; order: -1; text-align: center; }
  /* 本事長進：選人的下拉選單不要撐出畫面 */
  .upg-head { gap: 10px; }
  .upg-head .stage { width: 90px; height: 72px; flex-basis: 90px; }
  .upg-head .grow { min-width: 0; }
  #upg-mon { min-width: 0 !important; width: 100% !important; }
  /* 一欄的版面不要被裡面的內容撐寬（求籤的看板、按鈕原本會超出畫面右邊） */
  .split { grid-template-columns: minmax(0, 1fr); }
  #scr-gacha .pull-row .btn { flex: 1 1 130px; padding: 8px 8px; font-size: 15px; }
  /* 好友、房間的邀請、公開房間、江湖榜（QA 2026-10-15b：這幾個畫面直拿時沒排過；以前按鈕的字被擠成直排、房間名字只剩一個字）
     好友：名字、狀態一行，按鈕一律換到下一行靠右（.grow 撐滿一整行當換行）；狀態太長就截掉 */
  .fr-row { flex-wrap: wrap; row-gap: 0; }
  .fr-row .btn { white-space: nowrap; }
  .fr-row > b { min-width: 0; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-row > .st { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-row > .grow { flex: 1 0 100%; height: 0; }
  .fr-row:not(.room-row) > .btn { margin-top: 6px; }
  .fr-row:not(.room-row) > .btn:first-of-type { margin-left: auto; }
  /* 公開房間：房名一行，人數、狀態、加入在下一行靠右 */
  .room-row { row-gap: 6px; }
  .room-row .rm-main { flex: 1 1 calc(100% - 30px); }
  .room-row > .st { flex: 0 0 auto; }
  .room-row .rm-n { margin-left: auto; }
  /* 江湖榜：名字與等級、擊倒移到第二行（搭夥三個人的圖示加上時間，以前把名字擠沒了、時間被切掉） */
  .rk-row { grid-template-columns: 34px auto minmax(0, 1fr) auto; row-gap: 0; }
  .rk-row .pos { grid-row: span 2; }
  .rk-row .time { grid-column: 4; grid-row: 1; font-size: 18px; }
  .rk-row .who { grid-column: 2 / -1; grid-row: 2; }
}

/* 介面大小（--hud-k，hud.js 畫 HUD 時設的）：大螢幕上，升級、明器、合擊的選卡也跟著放大縮小。
   手機不放大（畫面本來就塞得剛好，zoom 以後會超出去） */
@media (min-width: 900px) and (min-height: 700px) {
  #scr-levelup .box, #scr-item .box, #scr-bond .box { zoom: var(--hud-k, 1); }
}

/* ---------------- 新手提示（js/systems/tips.js）：燈兒在畫面角落講一句 ----------------
   位置由 tips.js 照 HUD 的排版算（不蓋招式欄、頂端資訊，也不碰下半部的搖桿）；整個提示不接點擊，點得到底下的東西。
   跟著介面大小（--hud-k）縮放。.side：手機橫拿的選卡畫面兩邊只剩窄窄一條時，排成直的 */
.dm-tip {
  position: fixed; left: 0; top: 0; z-index: 22; pointer-events: none; box-sizing: border-box;
  display: flex; align-items: center; gap: calc(8px * var(--hud-k, 1));
  padding: calc(5px * var(--hud-k, 1)) calc(12px * var(--hud-k, 1)) calc(5px * var(--hud-k, 1)) calc(6px * var(--hud-k, 1));
  border: 1px solid rgba(217, 181, 106, .42); border-radius: 8px;
  background: linear-gradient(90deg, rgba(16, 10, 6, .9), rgba(16, 10, 6, .76));
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  color: #f4e6c6; font-size: calc(13px * var(--hud-k, 1)); font-weight: 700; line-height: 1.45;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s;
}
.dm-tip.on { opacity: 1; transform: none; }
.dm-tip.on.dim { opacity: .3; }   /* 底下有盜洞的紫色箭頭 */
.dm-tip-face { flex: none; width: calc(32px * var(--hud-k, 1)); height: calc(44px * var(--hud-k, 1)); image-rendering: pixelated; }
.dm-tip-txt { min-width: 0; }
.dm-tip-who { display: block; color: #ffcb3d; font-family: var(--serif); font-size: calc(11px * var(--hud-k, 1)); line-height: 1.3; letter-spacing: 2px; }
.dm-tip-say { display: block; word-break: keep-all; overflow-wrap: anywhere; }   /* 照標點換行，詞不拆開；一句太長才隨處斷 */
.dm-tip.side { flex-direction: column; gap: 2px; padding: 6px 6px 8px; text-align: center; font-size: 12px; }

/* ---------------- 鬼市有人說話（js/ui/npc.js）：求籤、委託、江湖榜、本事長進的標題列中間，主選單「下斗地點」下面 ----------------
   窄的畫面（直拿）換到標題下面一整行；主選單那一句小一點 */
.npc-head { flex-wrap: wrap; row-gap: 6px; }
.npc-head > h2 { flex: none; }
.npc-say { display: flex; align-items: center; gap: 8px; min-width: 0; }
.npc-head > .npc-say { flex: 1 1 240px; margin: 0 14px; }
.npc-face { flex: none; display: grid; place-items: center; width: 36px; height: 44px; }
.npc-face canvas { width: 36px; height: 44px; image-rendering: pixelated; }
.npc-seal {
  display: grid; place-items: center; width: 30px; height: 30px; box-sizing: border-box;
  border: 2px solid #a8321e; border-radius: 3px; background: rgba(140, 30, 14, .16);
  color: #d0482c; font: 700 18px/1 var(--serif); text-shadow: none;
}
.npc-txt { margin: 0; min-width: 0; font-size: 14px; line-height: 1.5; text-shadow: 1px 1px 0 #000; }
.npc-who { display: block; color: var(--gold); font: 700 12px/1.3 var(--serif); letter-spacing: 2px; }
.npc-line { color: #e9dcc0; word-break: keep-all; overflow-wrap: anywhere; }
.menu-list .npc-menu { grid-column: 1 / -1; margin: -2px 12px 8px 54px; }
.npc-menu .npc-txt { font-size: 13px; }
@media (max-height: 780px) {
  .npc-menu .npc-face, .npc-menu .npc-face canvas { width: 27px; height: 33px; }
  .npc-menu .npc-who { display: inline; margin-right: 6px; }
}
@media (max-height: 660px) {
  .menu-list .npc-menu { margin: -2px 6px 4px 10px; }
}
@media (max-width: 600px) {
  .npc-head > .npc-say { order: 3; flex: 1 1 100%; margin: 0; }
  .menu-list .npc-menu { margin: -2px 4px 8px; }
}
/* 電腦的寬畫面：選單框本來就快放不下（1280×720 再多一句就要捲），燈兒改站在左邊、出戰的人下面。
   左邊那一欄（標題＋立繪）要 700 高才擺得下；再矮的照樣放在「下斗地點」下面（那時說明收起來了，選單框有空） */
.npc-side { display: none; }
@media (min-width: 761px) and (min-height: 700px) {
  .menu-list .npc-menu { display: none; }
  .npc-side {
    display: flex; max-width: min(380px, 100%); margin: 12px auto 0; padding: 6px 14px 6px 6px;
    background: rgba(12, 8, 5, .62); border: 1px solid rgba(140, 108, 69, .45); border-radius: 6px;
  }
}

/* ---------- 分享戰績（js/ui/share-card.js，2026-10-16）：戰績圖預覽＋分享、存檔、複製；蓋在結算報紙上 ---------- */
#scr-share { z-index: 58; }
#scr-share .share-box { width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
#scr-share .share-head h2 { margin: 0; }
#scr-share .share-pic { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; }
#scr-share .share-pic img {
  display: block; max-width: 100%; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px);
  aspect-ratio: 4 / 5; object-fit: contain; box-shadow: 0 0 0 1px #6b5132, 0 8px 26px rgba(0, 0, 0, .7);
}
#scr-share .share-pic img:not([src]) { width: min(300px, 64vw); background: linear-gradient(180deg, #e4d6b3, #cdb98b); opacity: .35; color: transparent; font-size: 0; }
#scr-share #share-msg { margin: 0; text-align: center; min-height: 1.3em; font-size: 14px; }
#scr-share .share-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#scr-share .share-btns .btn { font-family: var(--serif); letter-spacing: 1px; }
/* 手機橫拿（矮）：圖放左邊、按鈕直排在右邊 */
@media (max-height: 520px) and (orientation: landscape) {
  #scr-share { padding: 8px 12px; }
  #scr-share .share-box { width: auto; max-width: 100%; display: grid; grid-template-columns: auto minmax(150px, 220px); grid-template-rows: auto 1fr; gap: 6px 14px; padding: 10px 14px 12px; }
  #scr-share .share-head { grid-column: 1 / -1; }
  #scr-share .share-pic img { max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); }
  #scr-share .share-side { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
  #scr-share .share-btns { flex-direction: column; align-items: stretch; }
}

/* 搭夥卡住（2026-10-16）：倒數、「結束這一局（記成績）」；蓋在選卡、合擊畫面（z-index 20）上面，設定（60）下面 */
.coop-stuck {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 30;
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  max-width: calc(100vw - 24px); padding: 6px 12px; font-size: 13px; color: var(--ink);
  background: rgba(28, 20, 14, .94); border: 1px solid #8c6c45; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}
.coop-stuck.hidden, .coop-stuck .hidden { display: none; }
.coop-stuck .btn { white-space: nowrap; }
#coop-stuck-msg:empty { display: none; }
/* 直拿（窄）：上面是 HUD 和燈兒的提示，改放在招式格上面 */
@media (max-width: 600px) {
  .coop-stuck { top: auto; bottom: calc(112px * var(--hud-k, 1) + env(safe-area-inset-bottom, 0px)); font-size: 12px; padding: 5px 10px; gap: 8px; }
}

/* ---------------- 今日一斗（js/ui/daily-ui.js）：主選單的卡片、開打前的說明、江湖榜分頁 ----------------
   卡片：一方朱印「今日一斗」、借來的人、地點與本週凶日、右邊是你今天打過沒有。
   放在「下斗地點」下面；電腦的寬畫面跟燈兒一樣改放左邊、出戰的人下面（選單框在 1280×720 本來就快放不下）。 */
.daily-card {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px;
  width: 100%; box-sizing: border-box; margin: 0; padding: 5px 10px 5px 7px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); text-shadow: 1px 1px 0 #000;
  background: linear-gradient(90deg, rgba(92, 18, 10, .5), rgba(16, 10, 6, .62) 70%);
  border: 1px solid rgba(196, 154, 90, .5); border-radius: 5px;
}
.daily-card.hidden { display: none; }
.daily-card:hover, .daily-card:focus-visible { border-color: var(--gold); background: linear-gradient(90deg, rgba(120, 24, 14, .62), rgba(30, 16, 8, .72) 70%); outline: none; }
.menu-list .daily-card { grid-column: 1 / -1; margin: 0 0 6px; }
.dc-seal {
  display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; padding-top: 1px;
  border: 2px solid #a8321e; border-radius: 3px; background: rgba(140, 30, 14, .18);
  color: #d0482c; font: 700 12px/1.1 var(--serif); letter-spacing: 1px; text-shadow: none; transform: rotate(-3deg);
}
.dc-face canvas { display: block; width: 40px; height: 36px; image-rendering: pixelated; }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-l1 { font: 700 15px/1.3 var(--serif); color: #f0d9b0; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-l2 { font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tag { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid rgba(163, 146, 122, .6); border-radius: 2px;
  font: 400 11px/1.35 var(--font); color: var(--muted); letter-spacing: 0; vertical-align: 1px; }
.dc-st { text-align: right; font: 700 14px/1.25 var(--serif); color: #e9dcc0; white-space: nowrap; }
.dc-st.first { color: var(--gold); }
.dc-st small { display: block; font: 400 11px/1.3 var(--font); color: var(--muted); }
.daily-card.side { display: none; }
@media (min-width: 761px) and (min-height: 700px) {
  .menu-list .daily-card { display: none; }
  .daily-card.side:not(.hidden) { display: grid; max-width: min(380px, 100%); margin: 10px auto 0; }
}
/* 手機直拿：字小一點、不留字距（借用的標籤才不會被截掉） */
@media (max-width: 560px) {
  .daily-card { column-gap: 7px; padding: 5px 8px 5px 6px; }
  .dc-l1 { font-size: 14px; letter-spacing: 0; }
}
/* 手機橫拿（矮）：排成一行，凶日接在後面（省掉「本週凶日：」幾個字） */
@media (max-height: 520px) and (orientation: landscape) {
  .daily-card { padding: 3px 8px 3px 5px; column-gap: 7px; }
  .dc-seal { width: 26px; height: 26px; font-size: 9px; }
  .dc-face canvas { width: 30px; height: 27px; }
  .dc-main { flex-direction: row; align-items: baseline; gap: 8px; }
  .dc-l1 { font-size: 13px; letter-spacing: 0; flex: 0 1 auto; }
  .dc-l2 { flex: 0 0 auto; color: #e8664a; }
  .dc-ol { display: none; }
  .dc-st { font-size: 12px; }
  .dc-st small { font-size: 10px; }
}

/* 開打前的說明（scr-daily）：跟江湖榜一樣讓出頂部列 */
@media (min-height: 521px), (orientation: portrait) { #scr-daily { padding-top: 66px; } }
/* 框是一欄：標題、能捲的內容、按鈕列（按鈕列一直看得到，矮的畫面也不用捲到底才找得到「開始」） */
.daily-box { width: min(760px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.daily-box > .row.between { flex: 0 0 auto; }
#dl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.dl-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px 18px; margin-top: 8px; }
.dl-who { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.dl-pic { display: grid; place-items: center; width: 100%; }
.dl-portrait { display: block; width: 100%; max-width: 190px; max-height: 250px; object-fit: contain; border: 2px solid #4a3622; box-shadow: 0 0 0 2px #000; }
.dl-portrait.hidden, .dl-sprite.hidden { display: none; }
.dl-sprite { width: 120px; height: 110px; image-rendering: pixelated; }
.dl-name { margin-top: 4px; font: 700 20px/1.3 var(--serif); color: #f0d9b0; letter-spacing: 2px; }
.dl-title { color: var(--muted); font-size: 12px; }
.dl-chips { margin-top: 2px; }
.dl-who .dc-tag { margin: 4px 0 0; white-space: normal; }
.dl-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.dl-row > span { color: var(--gold); font: 700 13px/1.5 var(--serif); letter-spacing: 1px; }
.dl-row b { display: block; font: 700 16px/1.4 var(--serif); color: #f0d9b0; }
.dl-row small { display: block; font-size: 13px; line-height: 1.5; color: #cdbd9f; }
.dl-omen { padding: 6px 8px; margin: 0 -8px; border: 1px solid rgba(168, 50, 30, .55); border-radius: 4px; background: rgba(120, 20, 12, .2); }
.dl-omen b { color: #e8664a; }
.dl-status { margin: 2px 0 0; padding: 6px 10px; border-left: 3px solid var(--edge); background: rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.55; }
.dl-status.first { border-left-color: var(--gold); color: #f0d9b0; }
.dl-rules { margin-top: 12px; }
.dl-next { margin: 8px 0 0; font-size: 13px; }
.dl-btns { flex: 0 0 auto; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(140, 108, 69, .35); }
.dl-btns .btn { flex: 1 1 200px; }
.dl-rk-head { margin: 0 0 6px; font-size: 13px; }
/* 結算報紙：這一局是今日一斗的第一次還是練習（run-ui.js），跟柳半仙的批語一樣是報上一小格
   （#over-extra 也是 .stats：用 id 蓋過 .paper .stats > div 的框線、第一個 span 的小標題樣式） */
#over-extra .daily-note { margin: 0; padding: 6px 10px; border: 1px dashed rgba(58, 44, 28, .55); background: rgba(58, 44, 28, .05);
  font: 13px/1.6 var(--serif); color: #2b2116; text-align: left; text-shadow: none; }
#over-extra .daily-note .seal { display: inline-block; margin-right: 7px; padding: 0 5px; font: 700 12px/18px var(--serif); letter-spacing: 1px;
  color: #f3e3c0; background: #8a1a10; border-radius: 2px; vertical-align: 1px; text-transform: none; }
/* 手機直拿：人在上面、說明在下面 */
@media (max-width: 560px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-who { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto auto; text-align: left; align-items: center; column-gap: 12px; }
  .dl-pic { grid-row: 1 / span 4; }
  .dl-portrait { max-height: 128px; }
  .dl-sprite { width: 96px; height: 88px; }
  .dl-name { margin: 0; font-size: 18px; }
  .dl-chips, .dl-who .dc-tag { justify-self: start; }
  .dl-row { grid-template-columns: 58px minmax(0, 1fr); }
}
/* 手機橫拿：立繪小一點，按鈕不要被擠到外面 */
@media (max-height: 520px) and (orientation: landscape) {
  .daily-box h2 { font-size: 20px; }
  .dl-grid { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; margin-top: 4px; }
  .dl-portrait { max-height: 150px; }
  .dl-name { font-size: 16px; }
  .dl-info { gap: 5px; }
  .dl-row small { font-size: 12px; line-height: 1.4; }
  .dl-btns { margin-top: 8px; }
  .dl-btns .btn { padding: 6px 12px; font-size: 15px; }
}

/* ---------------- 邪祟錄與人物小傳（2026-10-16，ui/codex-ui.js）----------------
   名冊詳細頁底下的「小傳」三段、邪祟錄那一頁的段落；格子上的「新」、分頁上的紅點、三顆進度點。
   字照名冊的 .dex-line 用宋體，比說明字大一號，手機橫拿（名冊的詳細頁一律 12px）另外放大到 13px */
.cx-bio { margin-top: 12px; padding-top: 9px; border-top: 1px dashed rgba(140, 108, 69, .55); text-align: left; }
.cx-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cx-h b { color: var(--gold); font: 700 15px/1.3 var(--serif); letter-spacing: 4px; }
.cx-h small { color: var(--muted); font-size: 12px; }
.cx-p { margin: 0 0 9px; }
.cx-p > b {
  display: inline-block; padding: 0 7px; border: 1px solid rgba(168, 50, 30, .55); border-radius: 3px;
  background: rgba(140, 30, 14, .22); color: #e2b98a; font: 700 12px/1.6 var(--serif); letter-spacing: 1px;
}
.cx-p p { margin: 4px 0 0; color: var(--ink); font: 14px/1.75 var(--serif); text-align: justify; word-break: normal; overflow-wrap: anywhere; }
.cx-p.lock > b { border-color: rgba(140, 108, 69, .4); background: rgba(0, 0, 0, .25); color: var(--muted); }
.cx-p.lock p.cx-cond { color: var(--muted); font: 12px/1.6 var(--serif); }
.cx-done { margin: 2px 0 0; color: var(--gold); font: 700 12px/1.5 var(--serif); text-align: center; }
.cx-done.dim { color: var(--muted); font-weight: 400; }
.cx-meta { color: var(--muted); font-size: 13px; }
.cx-tags { margin: 6px 0 2px; }
.cx-tags .cx-cat { background: transparent; box-shadow: inset 0 0 0 1px rgba(214, 195, 160, .45); color: #d6c3a0; }
.cx-where, .cx-count { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cx-count { color: #cdb894; }
/* 格子：「新」放在右下角（右上角是出戰中、凶相的記號）；邪祟錄的格子底下三顆進度點 */
.cell .cx-new {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 3px; border-radius: 3px;
  background: #a8321e; color: #f4e6c8; font: 700 11px/1.2 var(--serif); text-shadow: none; pointer-events: none;
}
.cx-pips { display: flex; justify-content: center; gap: 4px; margin-top: 3px; }
.cx-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(214, 195, 160, .2); }
.cx-pips i.on { background: var(--gold); box-shadow: 0 0 3px rgba(217, 181, 106, .6); }
/* 分頁：有沒看過的段落，右上角一點紅 */
.gen-tab { position: relative; }
.gen-tab .cx-dot {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #d0482c; box-shadow: 0 0 4px rgba(208, 72, 44, .8);
}
@media (max-height: 520px) and (orientation: landscape) {
  #dex-detail .cx-p p { font-size: 13px !important; line-height: 1.65; margin: 3px 0 0 !important; }
  #dex-detail .cx-p p.cx-cond, #dex-detail .cx-where, #dex-detail .cx-count { font-size: 12px !important; }
  #dex-detail .cx-bio { margin-top: 8px; padding-top: 6px; }
  #dex-detail .cx-p { margin-bottom: 6px; }
}
@media (max-width: 560px) and (min-height: 521px), (max-width: 560px) and (orientation: portrait) {
  .cx-p p { font-size: 15px; line-height: 1.75; }
}
/* ---------------- 委託畫面的分頁改成按鈕（2026-10-16：手把的游標、鍵盤 Tab 才點得到），多一個「故事」分頁 ---------------- */
button.tab { font: inherit; color: inherit; }
@media (max-width: 460px) { #goals-tabs { gap: 4px; } #goals-tabs .tab { padding: 7px 2px; font-size: 14px; } }

/* ---------------- 故事委託（js/systems/story.js、goals-ui.js 的 story）：一張張紅紙條 ---------------- */
.st-top { margin: 0 0 4px; }
.story {
  margin-bottom: 10px; padding: 10px 12px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(60, 14, 8, .42), rgba(24, 8, 5, .5));
  border: 1px solid rgba(168, 50, 30, .55); border-left: 4px solid #a8321e;
}
.story.ready { border-color: var(--gold); border-left-color: var(--gold); background: linear-gradient(180deg, rgba(90, 60, 10, .4), rgba(30, 18, 5, .5)); }
.story.claimed { opacity: .62; }
.story.locked { opacity: .55; border-left-color: #5a4a3a; border-color: rgba(120, 100, 80, .4); }
.st-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-name { font-family: var(--serif); font-size: 18px; letter-spacing: 2px; color: #f0dcc0; }
.st-place { font-size: 12px; color: #e0b070; border: 1px solid rgba(224, 176, 112, .5); border-radius: 3px; padding: 0 6px; }
.st-dots { margin-left: auto; display: flex; gap: 4px; }
.st-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #c8a060; }
.st-dots i.on { background: #e0b048; }
.st-intro { margin: 6px 0 4px; font-family: var(--serif); font-size: 14px; color: #e9dcc0; line-height: 1.55; }
.st-lock { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.st-steps { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.st-steps li { display: flex; gap: 8px; align-items: flex-start; }
.st-steps li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-steps b { font-size: 15px; }
.st-steps small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.st-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 700 13px/1 var(--serif); border: 1px solid rgba(232, 220, 192, .4); color: #e8dcc0; }
.st-steps li.ok .st-mark { background: rgba(95, 224, 138, .18); border-color: #5fe08a; color: #7dffb0; }
.st-steps li.ok b { color: #b8c8b0; }
.st-steps li.now .st-mark { background: #a8321e; border-color: #e0704a; color: #fff; }
.st-steps li.later { opacity: .5; }
.st-steps .bar { height: 6px; background: rgba(0, 0, 0, .4); border-radius: 5px; overflow: hidden; margin: 4px 0 1px; }
.st-steps .bar i { display: block; height: 100%; background: var(--gold); }
.st-steps .st-prog { color: #e0c88a; }
.st-steps .st-need { color: #ff9a8a; }
.st-rw { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px;
  padding-top: 6px; border-top: 1px dashed rgba(232, 220, 192, .2); }
.st-rw .m-rw { color: #e8d6b4; }

/* ---------------- 立繪框（故事委託的獎勵；主選單的 #menu-portrait、個人檔案的預覽） ----------------
   原本的框是 border 舊木＋outline 黃銅＋一圈黑；每一種框換掉這三層的顏色（有的 border 用漸層、碎瓷花紋） */
.frame-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.frame-prev { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid #2a1d12; outline: 2px solid #8c6c45; outline-offset: 1px;
  box-shadow: 0 0 0 5px #120c08, 0 6px 16px rgba(0, 0, 0, .7); filter: sepia(.18) contrast(1.06) brightness(.92); }
.dm-frame { border-style: solid; outline-style: solid; }
.dm-frame[data-frame="jiuyou"]   { border-image: linear-gradient(135deg, #7a8a52, #c8a450 45%, #4a5636) 1; outline-color: #c8a858; box-shadow: 0 0 0 6px #141a10, 0 0 0 7px #6a7a40, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="heishui"]  { border-image: linear-gradient(180deg, #34464a, #0c1214) 1; outline-color: #4aa0a0; box-shadow: 0 0 0 6px #050808, 0 0 0 7px #1e4a4c, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="xiangxi"]  { border-image: linear-gradient(135deg, #f0f0f6, #8a8c9a 30%, #dcdfe8 55%, #6a6c78) 1; outline-color: #4a50a0; box-shadow: 0 0 0 6px #10122a, 0 0 0 7px #8a8caa, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="taiwan"]   { border-image: repeating-linear-gradient(45deg, #c8402c 0 5px, #2c8a5a 5px 10px, #2c5ac8 10px 15px, #e8b83c 15px 20px) 3; outline-color: #e8b83c; box-shadow: 0 0 0 6px #2a1008, 0 0 0 7px #c8402c, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="beiping"]  { border-image: linear-gradient(180deg, #3a342e, #0e0c0a) 1; outline-color: #e0702a; box-shadow: 0 0 0 6px #08070a, 0 0 0 7px #a8c4d8, 0 14px 40px rgba(0, 0, 0, .85); }
/* 長沙・閉眼坡的故事委託（2026-10-16）：黑漆、朱色的眼眶、赭黃的眼仁 */
.dm-frame[data-frame="qimu"]     { border-image: linear-gradient(180deg, #261a14, #0e0a08) 1; outline-color: #b8452a; box-shadow: 0 0 0 6px #0e0a08, 0 0 0 7px #c8a050, 0 14px 40px rgba(0, 0, 0, .85); }
/* 歸燕（南洋・歸燕洞的故事委託）：深色坤甸木的船舷、一圈燕窩的灰白，外面一道黑水的藍綠光 */
/* 暹羅・倒流湖（2026-10-18）：黃褐的湖水色邊框，四角各一顆小石錨（灰黑的扁圓），上下兩邊一串年結（麻繩色的點） */
.dm-frame[data-frame="daoliu"]   { border-image: linear-gradient(180deg, #7a6440, #3e3420) 1; outline-color: #a88e64; box-shadow: 0 0 0 6px #22221e, 0 0 0 7px #8a7450, 0 14px 40px rgba(0, 0, 0, .85);
                                   background-image: radial-gradient(circle at 6px 6px, #4a4842 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 6px) 6px, #4a4842 0 4px, transparent 5px),
                                                     radial-gradient(circle at 6px calc(100% - 6px), #4a4842 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #4a4842 0 4px, transparent 5px),
                                                     repeating-linear-gradient(90deg, #a88e64 0 3px, transparent 3px 14px); background-size: auto, auto, auto, auto, 100% 2px; background-repeat: no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 1px; }
/* 千丈（巴蜀・吊棺峽的故事委託，2026-10-18）：紫紅砂岩色的邊框，上邊一根篾索（竹黃一節亮一節暗），四角各一個小滑輪（杉木色的圓） */
.dm-frame[data-frame="qianzhang"] { border-image: linear-gradient(180deg, #8a4a44, #4e2826) 1; outline-color: #a8946a; box-shadow: 0 0 0 6px #1a1210, 0 0 0 7px #7a3e3a, 0 14px 40px rgba(0, 0, 0, .85);
                                    background-image: radial-gradient(circle at 6px 6px, #5a4030 0 4px, #a8946a 4px 5px, transparent 6px), radial-gradient(circle at calc(100% - 6px) 6px, #5a4030 0 4px, #a8946a 4px 5px, transparent 6px),
                                                      radial-gradient(circle at 6px calc(100% - 6px), #5a4030 0 4px, #a8946a 4px 5px, transparent 6px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #5a4030 0 4px, #a8946a 4px 5px, transparent 6px),
                                                      repeating-linear-gradient(90deg, #a8946a 0 6px, #8a7a50 6px 12px); background-size: auto, auto, auto, auto, 100% 3px; background-repeat: no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 1px; }
.dm-frame[data-frame="guiyan"]   { border-image: linear-gradient(180deg, #4e3722, #1a120a) 1; outline-color: #e8e2d0; box-shadow: 0 0 0 6px #0b0f10, 0 0 0 7px #6a8a98, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="luoyang"]  { border-image: linear-gradient(180deg, #f2dca8, #c8963c) 1; outline-color: #c0301e; box-shadow: 0 0 0 6px #2a0c06, 0 0 0 7px #e8c070, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="changsha"] { border-image: linear-gradient(135deg, #b0261e, #5a0e0c) 1; outline-color: #e0b048; box-shadow: 0 0 0 6px #160404, 0 0 0 7px #8a1a12, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="tianqiao"] { border-image: linear-gradient(135deg, #5a7a9a, #2a3a4a) 1; outline-color: #d8b058; box-shadow: 0 0 0 6px #0a1018, 0 0 0 7px #48607a, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="neon"]     { border-image: linear-gradient(90deg, #ff5aa8, #b06aff 50%, #5ae0ff) 1; outline-color: #ffe0f0; box-shadow: 0 0 0 6px #12081a, 0 0 0 7px #ff5aa8, 0 0 22px rgba(255, 90, 168, .45), 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="gear"]     { border-image: repeating-linear-gradient(90deg, #8a5a2c 0 8px, #c8963c 8px 10px) 3; outline-color: #c8a048; box-shadow: 0 0 0 6px #1a1008, 0 0 0 7px #8a6a3c, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="qipi"]     { border-image: repeating-linear-gradient(45deg, #c8281c 0 6px, #f2ecd8 6px 12px, #2c4a8a 12px 18px, #f2ecd8 18px 24px) 3; outline-color: #f2ecd8; box-shadow: 0 0 0 6px #0e1220, 0 0 0 7px #c8281c, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="tuoling"]  { border-image: linear-gradient(180deg, #d8b878, #8a6a3c 55%, #4a3620) 1; outline-color: #c8a048; box-shadow: 0 0 0 6px #1a1208, 0 0 0 7px #b08a52, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="fuzhi"]    { border-image: linear-gradient(135deg, #ecd290, #cfb066 50%, #977a3c) 1; outline-color: #b8402c; box-shadow: 0 0 0 6px #1c1408, 0 0 0 7px #cfb066, 0 14px 40px rgba(0, 0, 0, .85); }
.dm-frame[data-frame="temple"]   { border-image: linear-gradient(135deg, #c8281c, #e8b830 50%, #c8281c) 1; outline-color: #f0d070; box-shadow: 0 0 0 6px #2a0804, 0 0 0 7px #c8281c, 0 14px 40px rgba(0, 0, 0, .85); }
/* 蓋碗（巴蜀籤的故事委託，2026-10-19）：白瓷蓋碗的邊、一道青花藍，外面一圈沱茶的褐色 */
.dm-frame[data-frame="gaiwan"]   { border-image: linear-gradient(180deg, #f2ede0, #c8c0ae 60%, #9a927e) 1; outline-color: #2c4a7a; box-shadow: 0 0 0 6px #1a120a, 0 0 0 7px #7a5432, 0 14px 40px rgba(0, 0, 0, .85); }

/* 個人檔案最上面（2026-10-18）：出戰那個人的立繪＋他掛的立繪框（goals-ui.js 的 ProfileUI.portrait）；框是畫在 .prof-pic 這一層，
   沒有立繪的人換成像素小人也一樣有框。底色、底框跟 .frame-prev 一樣（原本的框） */
.prof-top { display: flex; align-items: center; gap: 18px; margin: -6px 0 6px; }
.prof-top .prof-head { margin-top: 0; }
.prof-pic { flex: 0 0 auto; width: 104px; aspect-ratio: 3 / 4; overflow: hidden; background: #0e0a07; margin: 8px;
  border: 3px solid #2a1d12; outline: 2px solid #8c6c45; outline-offset: 1px; box-shadow: 0 0 0 5px #120c08, 0 6px 16px rgba(0, 0, 0, .7); }
.prof-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) contrast(1.06) brightness(.92); }
.prof-pic.sprite { display: flex; align-items: center; justify-content: center; }
.prof-pic.sprite canvas { width: 100%; height: auto; }
.prof-id { min-width: 0; }
.prof-who { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.prof-who b { color: #f0e2c4; }
.prof-who span { font-size: 13px; }
.prof-fav-h { margin: 6px 0 2px; font-size: 15px; }
@media (max-width: 520px), (max-height: 520px) {
  .prof-top { gap: 14px; }
  .prof-pic { width: 78px; margin: 7px; }
}

/* 江湖榜每一列的小頭像（2026-10-18）：立繪裁出來的臉（assets/portraits/face/，tools/art/make_faces.py），凶相是淡藍的邊；
   沒有立繪的人照舊畫像素小人（ranking-ui.js 的 face） */
.rk-row .mons { gap: 3px; align-items: center; }
.rk-face { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: #120c08;
  border: 2px solid rgba(140, 108, 69, .8); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.rk-face.shiny { border-color: #9ae6ff; box-shadow: 0 0 6px rgba(154, 230, 255, .45); }
.rk-row.top1 .rk-face:not(.shiny) { border-color: var(--gold); }
@media (max-width: 520px) { .rk-face { width: 34px; height: 34px; } }
/* 頭像旁的名字（凶相多一個凶相圖標）；搭夥四個人時名字縮小，手機上疊在頭像下面 */
.rk-row .mons { gap: 6px; }
.rk-mon { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.rk-mname { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #cdbb9a; white-space: nowrap; min-width: 5.5em; }
.rk-mname .ico { flex: 0 0 auto; }
@media (max-width: 720px) {
  .rk-mon { flex-direction: column; gap: 1px; }
  .rk-mname { font-size: 10px; min-width: 0; max-width: 44px; overflow: hidden; text-overflow: ellipsis; }
}

/* 籤筒的看板（2026-10-18）：右邊是這座籤筒上上籤那個人的立繪（gacha-ui.js），往左淡進底色，字和小人疊在前面 */
.banner .banner-art { position: absolute; top: 0; right: 0; height: 100%; width: 58%; object-fit: cover; object-position: 50% 12%;
  pointer-events: none; opacity: .9; filter: sepia(.12) contrast(1.05) brightness(.88);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.banner > :not(.banner-art) { position: relative; }
.banner #banner-title, .banner #banner-desc, .banner #gacha-owned { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8); }
.banner #banner-desc { max-width: 62%; }
@media (max-width: 520px) {
  .banner .banner-art { width: 70%; opacity: .6; }
  .banner #banner-desc { max-width: none; }
}

/* ---------------- 借路（systems/events.js）：跟明器、合擊的卡同一個樣子；錢不夠時「給錢」那張是灰的 ---------------- */
.cards .card.off { opacity: .45; cursor: default; }
@media (min-width: 900px) and (min-height: 700px) { #scr-toll .box { zoom: var(--hud-k, 1); } }

/* 介面大小（2026-10-17，玩家：「電腦版裡有些介面字可以大一點更好」）：電腦夠大的視窗上，選單畫面跟著設定的介面大小 zoom。
   :root.ui-zoom 與 --ui-k 由 ui.js 的 applyUiScale 設；100% 沒有這個 class，版面跟改版前完全一樣。
   局內的升級、合擊、明器、過路錢選卡照舊跟 --hud-k（上面）走，這裡不再放大一次。 */
:root.ui-zoom .scr:not(#scr-levelup):not(#scr-bond):not(#scr-item):not(#scr-toll),
:root.ui-zoom #topbar, :root.ui-zoom #sound-panel, :root.ui-zoom #credits-line, :root.ui-zoom #invite-pop, :root.ui-zoom #pull-fx { zoom: var(--ui-k, 1); }
/* 主選單（放大時）：左邊一欄的標題讓出頂部列，立繪照放大後還剩的高度縮小（100vh ÷ --ui-k ＝ 放大後的畫面高度）；
   放大後不到 900 高（ui-short）時選單改兩欄，跟矮螢幕（style.css 的 max-height 660）一樣，設定、江湖榜才不會被擠到框外 */
:root.ui-zoom .menu-left { padding-top: 60px; padding-bottom: 16px; }
:root.ui-zoom .partner-card .portrait { width: auto; height: clamp(140px, calc(100vh / var(--ui-k, 1) - 400px), calc(min(240px, 30vw) * 4 / 3)); }
:root.ui-zoom.ui-short .menu-right { width: min(500px, 52vw); }
:root.ui-zoom.ui-short .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
:root.ui-zoom.ui-short .menu-item.play { grid-column: span 2; }
:root.ui-zoom.ui-short .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 放大時 vh 也會跟著乘上 zoom（62vh 在 120% 看起來是 74%），照畫面高度定的框和清單都除回 --ui-k，才不會超出畫面 */
:root.ui-zoom .grid { max-height: calc(56vh / var(--ui-k, 1)); }
:root.ui-zoom .fr-list { max-height: calc(52vh / var(--ui-k, 1)); }
:root.ui-zoom .rk-list, :root.ui-zoom .rooms-list { max-height: calc(46vh / var(--ui-k, 1)); }
:root.ui-zoom #slot { width: min(528px, 92vw, calc(66vh / var(--ui-k, 1))); }
:root.ui-zoom .goals-body, :root.ui-zoom .mv-grid { max-height: calc(62vh / var(--ui-k, 1)); }
:root.ui-zoom .mv-detail { max-height: calc(66vh / var(--ui-k, 1)); }
:root.ui-zoom .profile-box { max-height: calc(90vh / var(--ui-k, 1)); }
:root.ui-zoom .chat-log { height: clamp(140px, calc(42vh / var(--ui-k, 1)), 340px); }
:root.ui-zoom .box.settings { max-height: calc(100vh / var(--ui-k, 1) - 24px); max-height: calc(100dvh / var(--ui-k, 1) - 24px); }
:root.ui-zoom .box.news-box { max-height: calc(100vh / var(--ui-k, 1) - 90px); max-height: calc(100dvh / var(--ui-k, 1) - 90px); }
:root.ui-zoom #scr-share .share-pic img { max-height: calc(100vh / var(--ui-k, 1) - 210px); max-height: calc(100dvh / var(--ui-k, 1) - 210px); }

/* 手機橫拿的升級三選一：卡片放寬、上下縮緊，三張卡和「換牌」一起放得進畫面（以前 812×375 第三張卡只露出一半、換牌要往下捲：QA 2026-10-19） */
@media (max-height: 520px) and (orientation: landscape) {
  #scr-levelup .cards { width: min(720px, 100%); gap: 6px; }
  #scr-levelup .card { padding: 6px 12px; gap: 10px; }
  #scr-levelup .card .ico { flex-basis: 40px; height: 40px; }
  #scr-levelup .card .ds { font-size: 13px; line-height: 1.4; }
  #scr-levelup h2 { margin: 0; }
  #scr-levelup .sub { margin: 0 0 6px; }
  #scr-levelup #lvl-reroll { margin-top: 6px !important; }
}

/* 標題列（標題＋返回）在窄畫面放不下換行時，返回仍靠右，和委託、本事長進、求籤那些畫面一樣（以前名冊、招式譜直拿時「返回」掉到標題下面靠左：QA 2026-10-19）
   只套兩個子元素的標題列：space-between 本來就把第二個放右邊，沒換行時位置不變 */
.box > .row.between > :last-child:nth-child(2) { margin-left: auto; }

/* 觸控裝置（手指點，pointer: coarse）：小按鈕、篩選標籤、分頁、下斗地點這些按鈕至少 40px 高，手指點得到（以前約 29～33px：QA 2026-10-19）；
   滑鼠的電腦不變。.gen-tab 是直排的 flex，加高後字要置中 */
@media (pointer: coarse) {
  .btn.small, .chip, .tab, .gen-tab, .seg button { min-height: 40px; }
  .gen-tab { justify-content: center; }
}

/* 江湖榜的地點：手機橫拿（矮螢幕）時九個標籤改成下拉選單（ranking-ui.js 的 .rk-region-sel），榜單不會被擠到畫面下面（QA 2026-10-19）；
   其他尺寸照舊用標籤。選單跟「依盜墓者篩選」同樣式 */
.rk-region-sel { display: none; }
@media (max-height: 520px) and (orientation: landscape) {
  #rk-region .chip { display: none; }
  #rk-region .rk-region-sel { display: block; width: 220px; padding: 6px 10px; font-size: 15px; }
}