/* 原版介面（本機原版測試）：assets/local/ui-local.js 在 <html> 加上 orig，assets/local/ui/ui.css 定義 --ui-* 圖（電腦 PNG、手機縮小的 WebP）。
   這裡只有版面：位置、大小照原版圖的像素（背景一律指定原尺寸，手機的小圖放大回來）。沒有本機原版圖時整份不作用 */

/* ── 字：電腦的原版介面，遊戲裡的視窗、主介面、對話框、說明、詢問一律是細明體的點陣字（老闆 11-04 的原版截圖；之前是微軟正黑體）。
   12、13 像素有點陣字；--font 也改掉，裡面用 var(--font) 的按鈕跟著變。登入前的討論版、說明書不是原版的畫面，不動 ── */
html.orig.pc :is(.win, #hud, #log, #chat-input, #tooltip, #ask, #mode-bar) { --font: "MingLiU", "PMingLiU", serif; font-family: var(--font); }
html.orig.pc.classic:not(.o-prev) #log { font-size: var(--lf, 12px); line-height: var(--ll, 13px); text-shadow: none; }
/* 一行放不下：第二行起往右縮（巴哈「天堂追憶錄」同介面的截圖，約 10 像素）；大喊前面的箭頭是客戶端圖 605～612 */
html.orig.pc.classic:not(.o-prev) #log > div { padding-left: 0.85em; text-indent: -0.85em; }
html.orig.pc.classic:not(.o-prev) #log .sh-ar { display: inline-block; width: var(--lf, 12px); height: var(--lf, 12px); margin-right: 2px; vertical-align: top; text-indent: 0; font-size: 0; background: var(--i) 0 0 / 100% 100% no-repeat; }   /* 貼著這一行的上緣：照基線排會比名字低、那行也變高（老闆 11-06） */
/* ── 一般視窗：原版的石框（562：內框 13,17～210,317，右邊骨頭捲軸，右上角 Close）──
   border-image 用百分比切，手機的縮小圖也對得上 */
html.orig .win {
  border-style: solid !important; border-width: 17px 47px 20px 13px !important;
  border-image: var(--ui-frame) 5.06% 18.29% 5.95% 5.06% fill / 17px 47px 20px 13px stretch !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
}
html.orig .win-head { position: absolute !important; left: 0; right: 0; top: 0; height: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible; }
html.orig .win-head > :not(.close) { display: none !important; }
html.orig .win-head { font-size: 0 !important; color: transparent !important; }   /* 標題（原版的視窗沒有標題） */
html.orig .win-head:not(:has(.close)) { display: none !important; }
/* 關閉：原版圖（532 左上角那塊）的頁籤；一般視窗在框的右上角 */
/*   z-index：疊在視窗內容上面（角色視窗整片的裝備格、石框的外框會蓋住關閉，點不到；手機只能點它關） */
/*   字：台版的頁籤寫「關閉」（使用者 11-04 的原版截圖，交易、背包、對話視窗都是），這台的客戶端只有英文 Close 的圖：
       用去掉字的那張（close-blank，lin-tools 從 close 擦掉的），字用 11 像素的細明體點陣字寫上去 */
html.orig .win .close {
  position: absolute !important; top: -12px; right: -41px; width: 28px !important; height: 15px !important; padding: 0 !important; margin: 0 !important; z-index: 10;
  background: var(--ui-close-blank, var(--ui-close)) 0 0 / 28px 15px no-repeat !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; color: transparent !important; cursor: pointer;
}
html.orig .win .close::after { content: '關閉'; position: absolute; left: 0; right: 0; top: 2px; text-align: center; font: 11px/11px "MingLiU", "PMingLiU", serif; color: #e6e6e6; letter-spacing: 0; }
html.orig .win .close:hover { filter: brightness(1.35); }
/*   手機：圖只有 28 × 15，手指點不準；看得到的大小不變，點得到的範圍往外多 12 像素 */
html.orig.mobile .win .close::before { content: ""; position: absolute; inset: -12px; }
/*   手機的設定選單貼著畫面右邊，預設的位置（-41px）會跑到畫面外 */
html.orig.mobile #win-opt .close { top: 0; right: 0; }
/*   拍賣佈告欄、選血盟成員：整個視窗捲動時 Close（在框上）被裁掉點不到；改成裡面的清單捲動 */
html.orig #win-auction, html.orig #win-clanpick { overflow: visible !important; max-height: none !important; }
html.orig #auction-body, html.orig #clanpick-body { max-height: 66vh; overflow-y: auto; }

/* ── 自己有原版底圖的視窗：固定大小、不用石框 ── */
html.orig #win-inv, html.orig #win-char, html.orig #win-spell, html.orig #win-trade, html.orig #win-shop, html.orig #win-npc {
  border: 0 !important; border-image: none !important; overflow: visible !important; max-height: none !important; display: block !important; grid-template-columns: none !important;
}
html.orig #win-inv:not(.hidden), html.orig #win-char:not(.hidden), html.orig #win-spell:not(.hidden), html.orig #win-trade:not(.hidden), html.orig #win-shop:not(.hidden), html.orig #win-npc:not(.hidden) { display: block !important; }
html.orig #win-inv.hidden, html.orig #win-char.hidden, html.orig #win-spell.hidden, html.orig #win-trade.hidden, html.orig #win-shop.hidden, html.orig #win-npc.hidden { display: none !important; }

/* 自己有底圖的視窗：Close 照原版圖的位置（563、549 右上角 225～250；475 右上角 193～218） */
html.orig #win-char .close, html.orig #win-shop .close { top: 6px; right: 7px; left: auto; }
html.orig #win-trade .close { top: 5px; right: 5px; left: auto; }
/* 電腦：視窗貼著畫面上緣（老闆給的原版截圖：升級點屬性、偷窺內容這種對話頁、交易、角色視窗在左上角，背包在右上角）。
   NPC 對話和用同一個框的頁（隊伍、寵物、記憶座標、變身清單）、交易、角色、NPC 開的商店、學魔法、倉庫在左上角；
   背包在右上角，魔法接在背包左邊（截圖裡沒有） */
html.orig.pc #win-npc, html.orig.pc #win-party, html.orig.pc #win-pet, html.orig.pc #win-tele, html.orig.pc #win-poly, html.orig.pc #win-char,
html.orig.pc #win-trade, html.orig.pc #win-shop, html.orig.pc #win-learn, html.orig.pc #win-wh { left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; }
html.orig.pc #win-inv { right: 0 !important; left: auto !important; top: 0 !important; bottom: auto !important; }
html.orig.pc #win-spell { right: 223px !important; left: auto !important; top: 0 !important; bottom: auto !important; }

/* 手機：原版的視窗放在畫面上面置中（底下是 HUD、快捷列）；背包點選物品後的動作按鈕接在視窗下面 */
html.orig.mobile #win-inv, html.orig.mobile #win-char, html.orig.mobile #win-spell, html.orig.mobile #win-trade, html.orig.mobile #win-shop, html.orig.mobile #win-npc {
  left: 50% !important; right: auto !important; top: calc(6px + var(--st, 0px)) !important; bottom: auto !important; transform: translateX(-50%) !important;
}
html.orig.mobile #win-inv .detail { display: block !important; position: absolute; left: 0; top: 340px; width: 223px; max-height: none; background: rgba(12, 10, 8, 0.92); border: 1px solid #5a4a30; }
html.orig.mobile #win-inv .detail:empty { display: none !important; }
/*   交易、倉庫要同時點背包：左右並排（原版 helptra：交易在左、背包在右），不然背包被蓋住，放不了東西 */
html.orig.mobile:has(#win-trade:not(.hidden)) #win-trade, html.orig.mobile:has(#win-wh:not(.hidden)) #win-wh {
  left: calc(50% - 2px) !important; right: auto !important; top: calc(6px + var(--st, 0px)) !important; bottom: auto !important; transform: translateX(-100%) scale(var(--dual-k, 1)) !important; transform-origin: top right;
}
html.orig.mobile:has(#win-trade:not(.hidden)) #win-inv, html.orig.mobile:has(#win-wh:not(.hidden)) #win-inv { left: calc(50% + 2px) !important; transform: scale(var(--dual-k, 1)) !important; transform-origin: top left; }

/* 背包（532：4 欄 × 8 列、一格 36，從 45,21 開始；Close 在左上角） */
html.orig #win-inv { width: 223px !important; height: 336px !important; background: var(--ui-inv) 0 0 / 223px 336px no-repeat !important; }
html.orig #win-inv .close { top: 3px; left: 4px; right: auto; }
html.orig #win-inv .doll, html.orig #win-inv .inv-gold { display: none !important; }
html.orig.pc #win-inv .detail { display: none !important; }
html.orig #inv-grid {
  position: absolute; left: 45px; top: 21px; width: 144px; height: 288px; padding: 0 !important; margin: 0 !important;
  display: grid !important; grid-template-columns: repeat(4, 36px) !important; grid-auto-rows: 36px; gap: 0 !important;
  overflow-y: auto; scrollbar-width: none; background: none !important; border: 0 !important; align-content: start;
}
html.orig #inv-grid::-webkit-scrollbar { display: none; }
/* 格子畫在底圖上：捲動停在整列上（手指拖動；滾輪一次一列見 js/ui.js origSetup），道具才會對齊底圖的格子 */
html.orig #inv-grid, html.orig #wh-grid, html.orig #trade-theirs, html.orig #trade-mine, html.orig #shop-body { scroll-snap-type: y mandatory; }
html.orig #inv-grid, html.orig #wh-grid { max-height: none !important; }   /* 剛好 8 列（style.css 的 260 會讓最後一列停在半格） */
html.orig #inv-grid > *, html.orig #wh-grid > *, html.orig #trade-theirs > *, html.orig #trade-mine > *, html.orig #shop-body > * { scroll-snap-align: start; }
html.orig #inv-grid .slot, html.orig #trade-theirs .slot, html.orig #trade-mine .slot {
  width: 36px !important; height: 36px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html.orig #inv-grid .slot:hover, html.orig #trade-theirs .slot:hover, html.orig #trade-mine .slot:hover { background: rgba(255, 230, 160, 0.12) !important; }
html.orig #inv-grid .slot.sel { box-shadow: inset 0 0 0 1px #e8c766 !important; }
/* 背包的圖示上不寫數量（原版：滑鼠移過去才看到「金幣(1,111,333)」）；手機沒有滑鼠，照舊寫 */
html.orig.pc #inv-grid .cnt { display: none; }

/* 角色（563）：欄位照原版的格子（js/ui.js refreshChar 的 .oc-*），裝備格在剪影上 */
html.orig #win-char { width: 257px !important; height: 336px !important; background: var(--ui-char) 0 0 / 257px 336px no-repeat !important; }
html.orig #char-body { position: absolute; inset: 0; padding: 0 !important; }
html.orig .oc { position: absolute; height: 13px; line-height: 13px; font-size: 10px; color: #f0e6cc; text-align: center; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px #000; }
html.orig .oc.l { text-align: left; padding-left: 3px; }
html.orig #win-char #doll-slots { position: absolute; inset: 0; display: block !important; padding: 0 !important; }
html.orig #win-char .dslot {
  position: absolute; width: 33px !important; height: 33px !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center;
}
html.orig #win-char .dslot > span { display: none; }
html.orig #win-char .dslot .icon { width: 32px; height: 32px; }
html.orig #win-char .dslot:hover { background: rgba(255, 230, 160, 0.12) !important; }
/* 頭盔 項鍊 斗篷 內衣 盔甲 武器 盾牌 手套 腰帶 靴子 戒指 耳環（js/ui.js DOLL_SLOTS 的順序） */
html.orig #win-char .dslot:nth-child(1) { left: 137px; top: 55px; }
html.orig #win-char .dslot:nth-child(2) { left: 146px; top: 95px; }
html.orig #win-char .dslot:nth-child(3) { left: 183px; top: 95px; }
html.orig #win-char .dslot:nth-child(4) { left: 109px; top: 95px; }
html.orig #win-char .dslot:nth-child(5) { left: 160px; top: 131px; }
html.orig #win-char .dslot:nth-child(6) { left: 76px; top: 132px; }
html.orig #win-char .dslot:nth-child(7) { left: 199px; top: 143px; }
html.orig #win-char .dslot:nth-child(8) { left: 79px; top: 167px; }
html.orig #win-char .dslot:nth-child(9) { left: 114px; top: 153px; }
html.orig #win-char .dslot:nth-child(10) { left: 195px; top: 265px; }
html.orig #win-char .dslot:nth-child(11) { left: 193px; top: 180px; }
html.orig #win-char .dslot:nth-child(12) { left: 173px; top: 33px; }

/* 魔法（使用者挑的 5194，依舊天堂的 Sprite14：239 × 317，7 列，一列 36，從 37 開始；左邊方形的圖示槽 18～50、名稱欄 53～212；
   右上角圖上有 X：Close 疊在 X 上（透明）） */
html.orig #win-spell { width: 239px !important; height: 317px !important; background: var(--ui-spell) 0 0 / 239px 317px no-repeat !important; }
html.orig #win-spell .close { top: 11px; right: 4px; left: auto; width: 16px !important; height: 15px !important; background: none !important; }
html.orig #spell-list { position: absolute; left: 18px; top: 37px; width: 194px; height: 252px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; }
html.orig #spell-list::-webkit-scrollbar { display: none; }
html.orig #spell-list .spell-row { height: 36px; padding: 0 !important; margin: 0 !important; gap: 0 !important; border: 0 !important; background: none !important; display: flex; align-items: flex-start; cursor: pointer; scroll-snap-align: start; }
html.orig #spell-list { scroll-snap-type: y mandatory; }
html.orig #spell-list .spell-row .icon { width: 32px; height: 32px; flex: none; margin: 1px 0 0 0 !important; background: none !important; border: 0 !important; }
html.orig #spell-list .spell-row > div:not(.icon) { flex: 1; min-width: 0; height: 33px; padding: 3px 0 0 9px; font-size: 12px; line-height: 14px; color: #f0ead8; text-shadow: 0 1px 1px #000; overflow: hidden; }
html.orig #spell-list .spell-row b { color: #fff4d8 !important; }
html.orig #spell-list .spell-row .dim { color: #d8ccb0 !important; font-size: 10px; }
html.orig #spell-list .spell-row:hover { background: rgba(255, 255, 255, 0.12) !important; }
html.orig #spell-list .hotset { display: none; }
/* 電腦：老闆 11-04「魔法視窗應該也不是這個……跟背包不是同一種類型視窗」→ 原版的魔法視窗是 538（台版中文是 538h，2001 年的客戶端也是 538）：
   跟背包（532）同一種視窗，左上角的頁籤，4 × 8 格放魔法圖示（每格 34，x 52～189、y 19～291），右邊捲軸，
   下面「魔功：□（x 76～105）　魔防：□（x 159～200）%」，y 306～319。沒學魔法就是空的格子 */
#spell-sp, #spell-mr { display: none; }
html.orig.pc #win-spell { width: 223px !important; height: 336px !important; background: var(--ui-magic, var(--ui-spell)) 0 0 / 223px 336px no-repeat !important; }
html.orig.pc #win-spell .close { top: 3px; left: 4px; right: auto; width: 28px !important; height: 15px !important; background: var(--ui-close-blank, var(--ui-close)) 0 0 / 28px 15px no-repeat !important; }
html.orig.pc #spell-list { left: 52px; top: 19px; width: 136px; height: 272px; display: grid; grid-template-columns: repeat(4, 34px); grid-auto-rows: 34px; align-content: start; }
html.orig.pc #spell-list .spell-cell { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; scroll-snap-align: start; }
html.orig.pc #spell-list .spell-cell .icon { width: 32px; height: 32px; margin: 0 !important; background: none !important; border: 0 !important; }
html.orig.pc #spell-list .spell-cell:hover { background: rgba(255, 230, 160, 0.12); }
html.orig.pc #spell-sp, html.orig.pc #spell-mr { display: block; position: absolute; top: 306px; height: 13px; font: 12px/13px "MingLiU", "PMingLiU", serif; color: #fff; text-align: center; white-space: nowrap; }
html.orig.pc #spell-sp { left: 76px; width: 29px; }
/*   圖上寫的是「魔功」，老闆 11-04：是「魔攻」。蓋掉那兩個字重寫（底用同一張圖下面沒有字的地方，白字深藍邊照原圖） */
html.orig.pc #win-spell::before { content: '魔攻'; position: absolute; left: 45px; top: 305px; width: 28px; height: 14px; background: var(--ui-magic, var(--ui-spell)) -45px -321px / 223px 336px no-repeat; font: bold 12px/14px "MingLiU", "PMingLiU", serif; color: #ececec; text-shadow: 1px 0 #081839, -1px 0 #081839, 0 1px #081839, 0 -1px #081839; pointer-events: none; z-index: 1; }
html.orig.pc #spell-mr { left: 159px; width: 41px; }
/*   手機還是原本那張（右上角圖上有 X），頁籤的「關閉」字不寫在 X 上 */
html.orig.mobile #win-spell .close::after { content: none; }
/* 空的魔法卷軸：原版是在魔法視窗（同一張 5194）裡點要寫進去的魔法；卷軸等級不夠的魔法灰掉 */
html.orig #win-blank { width: 239px !important; height: 317px !important; max-height: none !important; border: 0 !important; border-image: none !important; overflow: visible !important; background: var(--ui-spell) 0 0 / 239px 317px no-repeat !important; }
html.orig #win-blank .close { top: 11px; right: 4px; left: auto; width: 16px !important; height: 15px !important; background: none !important; }
html.orig #blank-body { position: absolute; left: 18px; top: 37px; width: 194px; height: 252px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; scroll-snap-type: y mandatory; }
html.orig #blank-body::-webkit-scrollbar { display: none; }
html.orig #blank-body > .pad-s, html.orig #blank-body .shop-row button { display: none !important; }
html.orig #blank-body .shop-row { height: 36px; padding: 0 !important; margin: 0 !important; gap: 0 !important; border: 0 !important; background: none !important; display: flex; align-items: flex-start; cursor: pointer; scroll-snap-align: start; }
html.orig #blank-body .shop-row .icon { width: 32px; height: 32px; flex: none; margin: 1px 0 0 0 !important; background: none !important; border: 0 !important; }
html.orig #blank-body .shop-row > .grow { flex: 1; min-width: 0; height: 33px; padding: 3px 0 0 9px; font-size: 12px; line-height: 14px; color: #f0ead8; text-shadow: 0 1px 1px #000; overflow: hidden; }
html.orig #blank-body .shop-row b { color: #fff4d8 !important; }
html.orig #blank-body .shop-row .dim { color: #d8ccb0 !important; font-size: 10px; }
html.orig #blank-body .shop-row.cant { opacity: 0.45; cursor: default; }
html.orig #blank-body .shop-row:not(.cant):hover { background: rgba(255, 255, 255, 0.12) !important; }
/* 手機沒有數字鍵：每列右邊一顆「快捷」，點了再點快捷列的格子 */
html.orig.mobile #spell-list .hotset { display: block; flex: none; width: 38px; height: 24px; margin: 0 4px 0 2px; padding: 0; font-size: 11px; line-height: 22px; color: #2a1a08 !important; text-shadow: none;
  background: linear-gradient(#f4e8c0, #dcc890 55%, #b89a5a) !important; border: 1px solid #5a4020 !important; border-radius: 3px; box-shadow: none !important; }

/* 道具圖示上不寫強化值：原版只有滑鼠移過去的名字寫「+1 短劍」（老闆看網路上的原版畫面） */
html.orig .icon .ench { display: none; }
/* 裝備中的東西：圖示左上角一個藝術字體的 E（老闆） */
html.orig .icon .badge { left: 2px; top: -1px; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 900; font-size: 13px; line-height: 1; color: #f2e6c4;
  text-shadow: -1px 0 #1a1208, 1px 0 #1a1208, 0 -1px #1a1208, 0 1px #1a1208, 1px 1px 1px #000; }
/* 道具說明：原版是半透明的黑底白字（客戶端照道具資料用字串表的字排），沒有圖示、沒有金色的名字 */
html.orig #tooltip { background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(220, 210, 190, 0.3); border-radius: 0; box-shadow: none; color: #fff; font-size: 12px; line-height: 1.45; padding: 4px 8px; }
html.orig #tooltip b { color: #fff; font-weight: normal; }
html.orig #tooltip .tip-head { margin-bottom: 1px; }
/* 背包、角色視窗點一下道具的詳細資料（js/ui.js showDesc）：原版截圖是半透明黑底、1px 淺灰框，明體白字，窄框自動換行；詛咒的是紅字（老闆 11-04） */
html.orig #tooltip.desc { max-width: 156px; padding: 1px 3px 2px; background: rgba(0, 0, 0, 0.62); border: 1px solid #b8b8b8;
  font: 12px/15px "PMingLiU", "MingLiU", "Noto Serif TC", serif; color: #fff; text-shadow: 1px 1px 0 #000; }
html.orig #tooltip.desc .tip-head { display: block; margin: 0; }
html.orig #tooltip.desc.cursed, html.orig #tooltip.desc.cursed b { color: #ff3a3a; }
html.orig #tooltip.desc.blessed, html.orig #tooltip.desc.blessed b { color: #f4f2be; }
/* 滑鼠停在道具上：只有名字，白字黑邊、沒有框（js/ui.js showName；原版截圖「+9 力量魔法杖 (揮舞)」） */
#name-tip { position: fixed; z-index: 30; pointer-events: none; white-space: nowrap; color: #fff;
  font: 12px/14px "PMingLiU", "MingLiU", "Noto Serif TC", serif; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 1px 1px 0 #000; }
#name-tip.cursed { color: #ff3a3a; }
#name-tip.blessed { color: #f4f2be; }

/* 交易（475：上面對方、下面自己，各 4 × 3 格（35 × 34），名字條在格子上面） */
html.orig #win-trade { width: 223px !important; height: 336px !important; background: var(--ui-trade) 0 0 / 223px 336px no-repeat !important; }
html.orig #win-trade > .pad-s { display: none !important; }
html.orig #trade-theirs, html.orig #trade-mine { position: absolute; left: 26px; width: 140px; height: 104px; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, 35px) !important; grid-auto-rows: 34px; gap: 0 !important; overflow-y: auto; scrollbar-width: none; background: none !important; border: 0 !important; align-content: start; }
/* 上段是自己給對方的、下段是對方給自己的（客戶端說明 helptra、L1J S_TradeAddItem 0 上段／1 下段） */
html.orig #trade-mine { top: 33px; }
html.orig #trade-theirs { top: 184px; }
html.orig #win-trade .ot-name { position: absolute; left: 34px; width: 96px; height: 14px; line-height: 14px; font-size: 11px; color: #f0e6cc; overflow: hidden; white-space: nowrap; }
html.orig #win-trade .ot-name.mine { top: 9px; }
html.orig #win-trade .ot-name.theirs { top: 162px; }
html.orig #win-trade .tele-foot { position: absolute; left: 62px; top: 309px; width: 72px; height: 17px; padding: 0 !important; margin: 0 !important; display: flex; gap: 2px; }
html.orig #win-trade .tele-foot input { flex: 1; min-width: 0; height: 17px; padding: 0 3px; font-size: 11px; background: transparent; border: 0; color: #f0e6cc; }
html.orig #win-trade .tele-foot button { height: 17px; padding: 0 4px; font-size: 10px; }
html.orig #win-trade .npc-opts { display: contents; }   /* 裡面的確定、取消自己定位在視窗的最下面那條；這層不能再加位移 */
/* 交易的確定、取消：原版是最下面那條、輸入框右邊的小字 O.K.（316）、Cancel（318），台版也沒有中文的（老闆給的 1.82c 交易畫面） */
html.orig #win-trade #trade-ok, html.orig #win-trade #trade-cancel { position: absolute; top: 311px; height: 15px !important; }
html.orig #win-trade #trade-ok { left: 140px; width: 27px !important; background: var(--ui-npc-ok) 0 0 / 27px 15px no-repeat !important; }
html.orig #win-trade #trade-ok:hover { background-image: var(--ui-npc-ok-h) !important; }
html.orig #win-trade #trade-cancel { left: 172px; width: 45px !important; background: var(--ui-tcancel) 0 0 / 45px 15px no-repeat !important; }
html.orig #win-trade #trade-cancel:hover { background-image: var(--ui-tcancel-h) !important; }

/* 倉庫：和背包同一張（532），4 × 8 格 */
html.orig #win-wh, html.orig #win-learn, html.orig #win-board, html.orig #win-map.o-map { border: 0 !important; border-image: none !important; overflow: visible !important; max-height: none !important; }
html.orig #win-wh:not(.hidden), html.orig #win-learn:not(.hidden), html.orig #win-board:not(.hidden), html.orig #win-map.o-map:not(.hidden) { display: block !important; }
html.orig #win-wh { width: 223px !important; height: 336px !important; background: var(--ui-inv) 0 0 / 223px 336px no-repeat !important; }
html.orig #win-wh .close { top: 3px; left: 4px; right: auto; }
html.orig #win-wh > .dim { display: none !important; }
html.orig #wh-grid { position: absolute; left: 45px; top: 21px; width: 144px; height: 288px; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(4, 36px) !important; grid-auto-rows: 36px; gap: 0 !important; overflow-y: auto; scrollbar-width: none; background: none !important; border: 0 !important; align-content: start; }
html.orig #wh-grid::-webkit-scrollbar { display: none; }
html.orig #wh-grid .slot { width: 36px !important; height: 36px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.orig #wh-grid .slot:hover { background: rgba(255, 230, 160, 0.12) !important; }
html.orig.pc #win-wh .detail { display: none !important; }
html.orig.mobile #win-wh .detail { display: block !important; position: absolute; left: 0; top: 340px; width: 223px; background: rgba(12, 10, 8, 0.92); border: 1px solid #5a4a30; }
html.orig.mobile #win-wh .detail:empty { display: none !important; }

/* 學習魔法：和商店同一張購買清單（549）——S_SkillBuy 送的是可以學的魔法和單價，客戶端照購買的樣子選、算 Total、按 OK（C_SkillBuyOK）。
   528 那張（下面有 F5～F8 快捷格）是魔法視窗，不是學魔法的 */
html.orig #win-learn { width: 257px !important; height: 336px !important; background: var(--ui-shop) 0 0 / 257px 336px no-repeat !important; }
html.orig #win-learn .close { top: 6px; right: 7px; left: auto; }
html.orig #learn-body { position: absolute; left: 14px; top: 10px; width: 197px; height: 297px; max-height: none !important; overflow-y: auto; scrollbar-width: none; padding: 0 !important; }
html.orig #learn-body::-webkit-scrollbar { display: none; }
html.orig #learn-body .shop-row { height: 37.3px; padding: 0 4px 0 0 !important; margin: 0 !important; gap: 4px !important; border: 0 !important; background: none !important; display: flex; align-items: center; cursor: pointer; }
html.orig #learn-body .shop-row .icon { width: 35px; height: 35px; flex: none; margin: 0 !important; background: none !important; border: 0 !important; }
html.orig #learn-body .shop-row .grow { flex: 1; font-size: 11px; line-height: 13px; overflow: hidden; color: #f0e6cc; }
html.orig #learn-body .shop-row .price { font-size: 11px; color: #f0d27a; }
html.orig #learn-body .shop-row.on { background: rgba(240, 200, 110, 0.16) !important; box-shadow: inset 0 0 0 1px rgba(232, 199, 102, 0.55) !important; }
/* 何侖的學習魔法：每個魔法下面列四種材料，列高跟著內容 */
html.orig #learn-body .shop-row.learn-mat { height: auto; min-height: 37.3px; align-items: flex-start; padding: 2px 0 6px 0 !important; cursor: default; }
html.orig #learn-body .shop-row.learn-mat .grow { overflow: visible; min-width: 0; }
html.orig #learn-body .learn-mats { gap: 2px; margin-top: 2px; }
html.orig #learn-body .learn-mats button { height: auto; min-height: 0; padding: 1px 4px; font-size: 11px; line-height: 13px; color: #f0d27a; background: rgba(0, 0, 0, 0.35); border: 1px solid #6b5a3a; border-radius: 0; white-space: nowrap; cursor: pointer; }
html.orig #learn-body .learn-mats button:hover:not(:disabled) { border-color: #e8c766; color: #fff4d8; }
html.orig #learn-body .learn-mats button:disabled { color: #8a8070; border-color: #3e3424; cursor: default; }
#o-learn-total, #o-learn-ok { display: none; }
html.orig #o-learn-total { display: block; position: absolute; left: 48px; top: 315px; width: 138px; height: 14px; line-height: 14px; font-size: 11px; color: #f0d27a; overflow: hidden; }
html.orig #o-learn-total.poor { color: #e07060; }
html.orig #o-learn-ok { display: block; position: absolute; left: 193px; top: 310px; }

/* 佈告欄、拍賣（670 有線的羊皮紙：字在 20,30～215,315） */
html.orig #win-board { width: 238px !important; height: 343px !important; background: var(--ui-board) 0 0 / 238px 343px no-repeat !important; }
html.orig #win-board .close { top: 12px; right: 14px; filter: drop-shadow(0 0 1px #000); }
html.orig #board-body { position: absolute; left: 20px; top: 32px; width: 196px; height: 282px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; color: #2b2116 !important; font-size: 12px; }
html.orig #board-body::-webkit-scrollbar { display: none; }
html.orig #board-body * { color: #2b2116 !important; text-shadow: none !important; background-color: transparent !important; border-color: rgba(60, 40, 20, 0.35) !important; }
html.orig #board-body button { text-decoration: underline; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 3px !important; color: #5a2a10 !important; }
html.orig #board-body input, html.orig #board-body textarea { border: 1px solid rgba(60, 40, 20, 0.4) !important; }

/* 地圖：那個地方的原版羊皮紙地圖（js/ui.js openMap 設 --om） */
html.orig #win-map.o-map { width: 257px !important; height: 336px !important; background: var(--om) 0 0 / 100% 100% no-repeat !important; }
html.orig #win-map.o-map .map-wrap { display: none !important; }
html.orig #win-map.o-map .close { top: 6px; right: 7px; }

/* 手機：這些視窗也放在上面置中 */
html.orig.mobile #win-wh, html.orig.mobile #win-learn, html.orig.mobile #win-board, html.orig.mobile #win-map.o-map {
  left: 50% !important; right: auto !important; top: calc(6px + var(--st, 0px)) !important; bottom: auto !important; transform: translateX(-50%) !important;
}

/* 原版的 OK、CANCEL 按鈕（字是圖） */
html.orig .o-ok, html.orig .o-cancel { width: 40px !important; height: 23px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; color: transparent !important; background: var(--ui-ok) 0 0 / 40px 23px no-repeat !important; cursor: pointer; }
html.orig .o-ok:hover { background-image: var(--ui-ok-h) !important; }
html.orig .o-cancel { width: 91px !important; height: 24px !important; background: var(--ui-cancel) 0 0 / 91px 24px no-repeat !important; }   /* 台版是中文的「取消」（48c） */
html.orig .o-cancel:hover { background-image: var(--ui-cancel-h) !important; }

/* 商店（549：一列 37，圖示 14～49、名稱 51～210，8 列從 10 開始；下面 Total） */
html.orig #win-shop { width: 257px !important; height: 336px !important; background: var(--ui-shop) 0 0 / 257px 336px no-repeat !important; }
html.orig #win-shop .close { top: 6px; right: 7px; }
html.orig #win-shop .tabs { position: absolute; left: 60px; top: 313px; display: flex; gap: 4px; padding: 0 !important; border: 0 !important; }
html.orig #win-shop .tabs .tab { height: 16px; padding: 0 8px; font-size: 11px; line-height: 16px; }
html.orig #shop-body { position: absolute; left: 14px; top: 10px; width: 197px; height: 297px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; }
html.orig #shop-body::-webkit-scrollbar { display: none; }
html.orig #shop-body .shop-row { height: 37.3px; padding: 0 4px 0 0 !important; margin: 0 !important; gap: 4px !important; border: 0 !important; background: none !important; display: flex; align-items: center; }
html.orig #shop-body .shop-row .icon { width: 35px; height: 35px; flex: none; margin: 0 !important; background: none !important; border: 0 !important; }
html.orig #shop-body .shop-row .grow { font-size: 11px; line-height: 13px; overflow: hidden; }
html.orig #shop-body .shop-row .price { font-size: 11px; color: #f0d27a; }
html.orig #shop-body .shop-row button { height: 18px; padding: 0 5px; font-size: 11px; }
html.orig #shop-body > .pad { display: none; }
/* 商人的商店：點選的列亮起來、右邊打數量；下面 Total 的總價、右下角 OK（底圖分隔線右邊那格） */
#o-shop-total, #o-shop-ok { display: none; }
html.orig #win-shop.o-npcshop #o-shop-total { display: block; position: absolute; left: 48px; top: 315px; width: 138px; height: 14px; line-height: 14px; font-size: 11px; color: #f0d27a; overflow: hidden; }
html.orig #win-shop.o-npcshop #o-shop-total.poor { color: #e07060; }
html.orig #win-shop.o-npcshop #o-shop-ok { display: block; position: absolute; left: 193px; top: 310px; }
html.orig #win-shop.o-npcshop .shop-row { cursor: pointer; }
html.orig #win-shop.o-npcshop .shop-row .grow { flex: 1; }
html.orig #win-shop.o-npcshop .shop-row.on { background: rgba(240, 200, 110, 0.16) !important; box-shadow: inset 0 0 0 1px rgba(232, 199, 102, 0.55) !important; }
html.orig #win-shop.o-npcshop .shop-row.cant b { color: #8a8070; }
html.orig #win-shop.o-npcshop .o-n { width: 42px; height: 16px; padding: 0 2px; flex: none; font-size: 11px; text-align: right; color: #f0e6cc; background: #120f0b; border: 1px solid #6a5838; border-radius: 0; }

/* 領回寵物（S_PetList，和倉庫領出同一種清單；老闆 11-04 的原版截圖）：商店的底圖，一列是圖示、「項圈 [Lv.24 名字]」，名字下面右邊 ▼ 0 ▲；
   下面 Total 是要付的錢／身上的金幣，右邊 O.K.、Cancel。截圖右上角的 數量/100 這張底圖沒有地方放，不放 */
#o-pet-ok, #o-pet-cancel { display: none; }
html.orig #win-shop.o-petlist #o-shop-ok { display: none; }
html.orig #win-shop.o-petlist .shop-row .grow { position: relative; height: 35px; overflow: visible; font: 12px/18px "MingLiU", "PMingLiU", serif; }
html.orig #win-shop.o-petlist .shop-row .grow b { font-weight: normal; color: #d4d4c8; white-space: nowrap; }
html.orig #win-shop.o-petlist .pet-step { position: absolute; right: 2px; bottom: 2px; display: flex; align-items: center; gap: 5px; font: 11px/12px "MingLiU", "PMingLiU", serif; color: #fff; }
html.orig #win-shop.o-petlist .pet-step i { display: block; width: 12px; height: 12px; cursor: pointer; background: 0 0 / 12px 12px no-repeat; }
html.orig #win-shop.o-petlist .pet-step .up { background-image: var(--ui-arr-up); }
html.orig #win-shop.o-petlist .pet-step .up:hover { background-image: var(--ui-arr-up-on); }
html.orig #win-shop.o-petlist .pet-step .dn { background-image: var(--ui-arr-dn); }
html.orig #win-shop.o-petlist .pet-step .dn:hover { background-image: var(--ui-arr-dn-on); }
html.orig #win-shop.o-petlist #o-shop-total { font: 11px/14px "MingLiU", "PMingLiU", serif; color: #fff; }
/*   底圖下面那條：Total 的深色欄到 x 190，斜線隔開，右邊小格 195～235。O.K. 是原版的圖 560（亮的 561），貼在深色欄右端；Cancel 是 558（亮的 559），在小格裡（老闆 11-04 的原版截圖）。
     電腦的商人商店是同一種視窗，一樣用這兩個 */
html.orig.pc #win-shop.o-npcshop #o-shop-total { width: 112px; }
html.orig.pc #win-shop.o-npcshop :is(#o-pet-ok, #o-shop-ok, #o-pet-cancel) { position: absolute; top: 315px; height: 14px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; color: transparent !important; cursor: pointer; }
html.orig.pc #win-shop.o-npcshop :is(#o-pet-ok, #o-shop-ok) { left: 164px; width: 24px !important; background: var(--ui-list-ok) 0 0 / 24px 14px no-repeat !important; }
html.orig.pc #win-shop.o-npcshop :is(#o-pet-ok, #o-shop-ok):hover { background-image: var(--ui-list-ok-h) !important; }
html.orig.pc #win-shop.o-npcshop #o-pet-cancel { display: block; left: 198px; width: 35px !important; background: var(--ui-list-cancel) 0 0 / 35px 14px no-repeat !important; }
html.orig.pc #win-shop.o-npcshop #o-pet-cancel:hover { background-image: var(--ui-list-cancel-h) !important; }
html.orig.pc #win-shop.o-petlist #o-pet-ok { display: block; }

/* NPC 對話（656 羊皮紙：字在 20,40～215,290） */
/* NPC 對話：原版的石框（frame，257 × 336：內框 13,17～210,317，右邊的骨頭捲軸、右上角 Close 是圖上的；原版的 NPC 對話就是這個框）。
   第一行「名字:」，下面對話，再下面選項（底線） */
html.orig #win-npc { width: 257px !important; height: 336px !important; max-width: none !important; background: var(--ui-frame) 0 0 / 257px 336px no-repeat !important; }
html.orig #win-npc .close { top: 5px; right: 6px; left: auto; }
html.orig #win-npc .win-head > #npc-title { display: block !important; position: absolute; left: 20px; top: 22px; font-size: 12px !important; line-height: 17px; color: #f4f0e6 !important; text-shadow: 0 1px 1px #000; }
html.orig #win-npc #npc-title::after { content: ':'; }
html.orig #npc-text { position: absolute; left: 20px; top: 42px; width: 184px; height: 192px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; color: #e8e4d8 !important; font-size: 12px; line-height: 17px; text-shadow: 0 1px 1px #000; }
html.orig #npc-text::-webkit-scrollbar { display: none; }
html.orig #npc-text .dim { color: #a8a090 !important; }
html.orig #win-npc .npc-opts { position: absolute; left: 20px; top: 240px; width: 184px; height: 72px; overflow-y: auto; scrollbar-width: none; padding: 0 !important; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px !important; }
html.orig #win-npc .npc-opts button { flex: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #f0d070 !important; font-size: 12px; text-align: left; text-decoration: underline; text-shadow: 0 1px 1px #000 !important; }
html.orig #win-npc .npc-opts button:hover { color: #fff !important; }
/*   選項很多（羅德尼賣狗）：對話縮短，選項往上長；不然折成框外看不見的第二欄 */
html.orig #win-npc:has(#npc-opts > button:nth-child(7)) #npc-text { height: 62px; }
html.orig #win-npc:has(#npc-opts > button:nth-child(7)) .npc-opts { top: 110px; height: 202px; }
/* 原版的對話頁（js/ui.js origNpcHtml）：名字在原文的第一行；字淺灰、原文指定的顏色照用；連結底線；沒有下面的按鈕時對話一直排到框底 */
html.orig #win-npc.o-html .win-head > #npc-title { display: none !important; }
html.orig #win-npc.o-html #npc-text { top: 22px; height: 212px; color: #b8b8c0 !important; }
html.orig #win-npc.o-html:has(#npc-opts:empty) #npc-text { height: 290px; }
/*   空的按鈕列不能蓋在對話上：不然頁底的連結點不到 */
html.orig #win-npc .npc-opts:empty { display: none; }
/* 對話視窗裡的清單（修理武器、領回寵物）：窄框裡圖示、名字、價錢、按鈕排一列，按鈕像連結 */
html.orig #npc-text .shop-row { gap: 4px; padding: 2px 0; }
html.orig #npc-text .shop-row .icon { width: 32px; height: 32px; flex: none; }
html.orig #npc-text .shop-row .grow { min-width: 0; font-size: 11px; line-height: 14px; }
html.orig #npc-text .shop-row .price { min-width: 0; color: #f0d070; }
html.orig #npc-text .shop-row button { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #f0d070 !important; font-size: 12px; text-decoration: underline; text-shadow: 0 1px 1px #000 !important; }
html.orig #npc-text .shop-row button:hover { color: #fff !important; }
html.orig #npc-text .shop-row button:disabled { color: #8a8070 !important; text-decoration: none; }
html.orig #win-npc.o-html #npc-text p { margin: 0; }
/*   原版頁的連結：淡黃色、沒有底線（老闆 11-04 的原版截圖：漢斯的「保管動物」「競技場」量起來約 #f8f8b8；內文淺灰約 #b8b8c0） */
html.orig #win-npc .o-link { color: #f8f8b8; text-decoration: none; cursor: pointer; }
html.orig #win-npc .o-link:hover { color: #fff; }
html.orig #win-npc .o-dead { color: #8a8678; }
html.orig #win-npc .o-img { display: inline-block; vertical-align: middle; margin: 2px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--i) 0 0 / 100% 100% no-repeat; cursor: pointer; }
html.orig #win-npc .o-img:hover { background-image: var(--ih); }

/* 隊伍、寵物、瞬間移動（記憶座標）、變身清單：原版都是 NPC 對話的頁（L1J S_Party「party」、寵物「anicom」、S_ShowPolyList「monlist」），
   和 NPC 對話用同一個石框（frame，257 × 336；內框 20～204、Close 在右上角）：淺灰的字，能點的是金黃色底線，等級不到的灰掉；下面一排是選項 */
html.orig #win-party, html.orig #win-pet, html.orig #win-tele, html.orig #win-poly {
  width: 257px !important; height: 336px !important; max-width: none !important; max-height: none !important; overflow: visible !important;
  border: 0 !important; border-image: none !important; background: var(--ui-frame) 0 0 / 257px 336px no-repeat !important; display: block !important;
}
html.orig #win-party.hidden, html.orig #win-pet.hidden, html.orig #win-tele.hidden, html.orig #win-poly.hidden { display: none !important; }
html.orig.mobile #win-party, html.orig.mobile #win-pet, html.orig.mobile #win-tele, html.orig.mobile #win-poly {
  left: 50% !important; right: auto !important; top: calc(6px + var(--st, 0px)) !important; bottom: auto !important; transform: translateX(-50%) !important;
}
html.orig #win-party .close, html.orig #win-pet .close, html.orig #win-tele .close, html.orig #win-poly .close { top: 5px; right: 6px; left: auto; }
html.orig #party-body, html.orig #pet-body, html.orig #tele-body, html.orig #poly-body {
  position: absolute; left: 20px; top: 22px; width: 184px; height: 212px; margin: 0 !important; padding: 0 !important; overflow-y: auto; scrollbar-width: none;
  background: none !important; border: 0 !important; color: #d0ccc0 !important; font-size: 12px; line-height: 17px; text-shadow: 0 1px 1px #000;
}
html.orig #poly-body { height: 290px; max-height: none !important; }   /* 變身清單沒有下面的選項：整個框都是清單（解除變身在最下面） */
html.orig #poly-body .poly-list { padding: 0 !important; scrollbar-width: none; }
html.orig #poly-body .poly-list::-webkit-scrollbar { display: none; }
html.orig #poly-body .poly-lv { margin: 6px 0 2px !important; font-size: 12px; }
html.orig #poly-body .poly-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 6px !important; }
html.orig #poly-body .poly-pick { padding: 1px 0 !important; font-size: 12px; text-align: left; }
html.orig #party-body::-webkit-scrollbar, html.orig #pet-body::-webkit-scrollbar, html.orig #tele-body::-webkit-scrollbar, html.orig #poly-body::-webkit-scrollbar { display: none; }
html.orig :is(#party-body, #pet-body, #tele-body, #poly-body) * { color: #d0ccc0 !important; text-shadow: 0 1px 1px #000 !important; background-color: transparent !important; border-color: rgba(220, 210, 190, 0.18) !important; box-shadow: none !important; }
html.orig :is(#party-body, #pet-body, #tele-body, #poly-body) button { color: #f0d070 !important; background: none !important; border: 0 !important; padding: 1px 2px !important; text-decoration: underline; }
/* 瞬間移動（電腦）：照說明頁 helpmag11、helpmgc11，視窗只列記憶過的場所名稱，點兩下過去、選了按 Delete 刪掉；記憶用 /bookmark */
html.orig.pc #tele-body > .pad-s, html.orig.pc #tele-body .shop-row .dim, html.orig.pc #tele-body .shop-row button, html.orig.pc #win-tele .tele-foot { display: none !important; }
html:not(.orig.pc) .tele-rnd { display: none !important; }
html.orig :is(#party-body, #pet-body, #tele-body, #poly-body) button:hover { color: #fff !important; }
html.orig :is(#party-body, #pet-body, #tele-body, #poly-body) :disabled, html.orig :is(#party-body, #pet-body, #tele-body, #poly-body) .dim { color: #8a8678 !important; text-decoration: none; }
html.orig #win-party .npc-opts, html.orig #win-pet .npc-opts, html.orig #win-tele .tele-foot {
  position: absolute; left: 20px; top: 240px; width: 184px; height: 72px; overflow-y: auto; scrollbar-width: none; margin: 0 !important; padding: 0 !important;
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 2px 8px !important; background: none !important; border: 0 !important;
}
html.orig :is(#win-party .npc-opts, #win-pet .npc-opts, #win-tele .tele-foot) button { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #f0d070 !important; font-size: 12px; text-decoration: underline; text-shadow: 0 1px 1px #000 !important; }
html.orig :is(#win-party .npc-opts, #win-pet .npc-opts, #win-tele .tele-foot) button:hover { color: #fff !important; }
/* 電腦的寵物視窗（老闆 11-04 的截圖）：台版圖 1171c（寵物，179 × 275）、1196c（召喚獸），不是對話的石框。
   值寫在圖上的字後面（名字、等級 66、經驗值 118、目前狀態、飽食度 61、防禦 128）；體力、魔力條 1172c、1173c 照比例在 54,57／54,72；
   善惡 1174c～1176c 在 22,87；命令的格子 34 × 34：寵物 4 × 2 從 19,190，召喚獸 3 × 2 從 37,169（圖示 32 × 32，滑鼠移上去換亮的那張）；
   關閉是 1177（亮的 1178） */
/*   1.82（亞丁開放前）的寵物選單是對話視窗的 anicom 頁（js/ui.js openPetPage），這個視窗是亞丁開放後才用。
     寵物裝備跟著亞丁開放（.o-equip，整張圖）；沒有裝備時拿掉「裝備、防禦」那一列和 4 格（圖的 127～176），上下兩段接起來，高 225 */
html.orig.pc #win-pet { width: 179px !important; height: 225px !important; background: var(--ui-petwin-top) 0 0 / 179px 127px no-repeat, var(--ui-petwin-bot) 0 127px / 179px 98px no-repeat !important; }
html.orig.pc #win-pet.o-equip { height: 275px !important; background: var(--ui-petwin) 0 0 / 179px 275px no-repeat !important; }
html.orig.pc #win-pet.o-sum { height: 275px !important; background: var(--ui-sumwin) 0 0 / 179px 275px no-repeat !important; }
html.orig.pc #win-pet .close { top: 6px; right: 6px; width: 13px !important; height: 13px !important; background: var(--ui-pet-x) 0 0 / 13px 13px no-repeat !important; }
html.orig.pc #win-pet .close::after { content: none; }
html.orig.pc #win-pet .close:hover { filter: none; background-image: var(--ui-pet-x-h) !important; }
html.orig.pc #pet-body, html.orig.pc #win-pet .npc-opts { position: absolute; inset: 0; width: auto; height: auto; overflow: visible; display: block; }
html.orig.pc #win-pet .npc-opts { pointer-events: none; }
html.orig.pc #win-pet .npc-opts button { pointer-events: auto; }
/*   字照老闆的截圖：值是 12 像素的細明體、淺灰（約 #d0d0c4）、沒有陰影；體力、魔力條上的數字是小的粗體白字 */
html.orig.pc #pet-body .pv { position: absolute; height: 13px; font: 12px/13px "MingLiU", "PMingLiU", serif !important; color: #d4d4c8 !important; text-shadow: none !important; white-space: nowrap; }
html.orig.pc #pet-body .pv.rename { cursor: pointer; }
html.orig.pc #pet-body .pbar { position: absolute; left: 54px; width: 96px; height: 14px; }
html.orig.pc #pet-body .pbar i { position: absolute; left: 0; top: 0; bottom: 0; background-repeat: no-repeat !important; background-position: 0 0 !important; background-size: 96px 14px !important; }
html.orig.pc #pet-body .pbar.hp i { background-image: var(--ui-pet-hp) !important; }
html.orig.pc #pet-body .pbar.mp { height: 13px; }
html.orig.pc #pet-body .pbar.mp i { background-image: var(--ui-pet-mp) !important; background-size: 96px 13px !important; }
html.orig.pc #pet-body .pbar span { position: absolute; left: 26px; top: 0; font: bold 9px/14px Tahoma, Verdana, sans-serif !important; color: #fff !important; text-shadow: none !important; letter-spacing: 0; }
html.orig.pc #pet-body .pal { position: absolute; left: 22px; top: 87px; width: 29px; height: 13px; background: var(--i) 0 0 no-repeat !important; }
html.orig.pc #win-pet .npc-opts button.pcmd { position: absolute; width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important; background: var(--i) 0 0 / 32px 32px no-repeat !important; font-size: 0 !important; text-decoration: none; }
html.orig.pc #win-pet .npc-opts button.pcmd:hover { background-image: var(--ih) !important; }
/*   裝備的 4 格（亞丁開放後）：牠身上的寵物裝備，穿著的格子亮一圈 */
html.orig.pc #pet-body button.pitem { position: absolute; width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0; text-decoration: none; cursor: pointer; }
html.orig.pc #pet-body button.pitem img { display: block; width: 32px; height: 32px; }
html.orig.pc #pet-body button.pitem.on { box-shadow: inset 0 0 0 1px #e8c860 !important; }
html.orig #win-tele .tele-foot input { width: 100px; height: 16px; padding: 0 3px; font-size: 11px; color: #f0ead8; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(220, 210, 190, 0.3); border-radius: 0; }
/* ── 選擇角色（310 的背景、104 的資料欄、原版的欄位動畫在 js/ui.js drawSelectOrig）── */
html.orig.pc #select { background: #000 var(--ui-login-bg) center / auto 100% no-repeat !important; }
/* ── 創造角色（310：640 × 480，左邊捲軸寫職業說明，下面的紅緞帶封印是「開始冒險」；--ck 由 js/ui.js 照畫面算）── */
html.orig #create { background: #000 !important; }
html.orig #create .create-panel {
  position: relative; flex: none; width: 640px !important; height: 480px !important; max-width: none !important; padding: 0 !important; margin: 0 !important;
  background: var(--ui-select-bg) 0 0 / 640px 480px no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: scale(var(--ck, 1)); transform-origin: center;
}
/* 排法照原版 1.63 台版的截圖（老闆提供）：左邊捲軸是職業說明；中間角色，左右兩排職業圖示（王族、騎士在左，妖精、法師在右），
   下面左 ♂ 右 ♀；再下面中文的能力值、骰子、角色命名，右下「確認」「取消」是字 */
html.orig #create h1, html.orig #create .gap, html.orig #btn-roll { display: none !important; }
html.orig #create .create-main, html.orig #create .btns { display: contents !important; }
html.orig #create-desc, html.orig #create-bonus, html.orig #create-hpmp { position: absolute; left: 40px; width: 210px; margin: 0 !important; color: #2b2116 !important; text-shadow: none !important; font-size: 13px; line-height: 17.4px; text-align: left; }
html.orig #create-desc { top: 52px; }
/* 原版的職業說明（js/ui.js；Text.pak 的原文）：照原本的分行、每行置中，捲軸裝不下的部分用滾輪往下看 */
html.orig #create.o-text #create-bonus, html.orig #create.o-text #create-hpmp { display: none; }
html.orig #create.o-text #create-desc { height: 312.5px; overflow-y: auto; scrollbar-width: none; font-family: var(--o-serif); font-weight: 500; font-size: 11px; line-height: 12.5px; }   /* 字的大小、行距照經典版的捲軸 */
html.orig #create.o-text #create-desc::-webkit-scrollbar { display: none; }
html.orig #create.o-text .o-desc { white-space: pre; text-align: center; }
html.orig #create-bonus { top: 236px; font-size: 12px; color: #5a4430 !important; }
html.orig #create-hpmp { top: 318px; font-weight: bold; }
/* 職業：原版的四個圖示（暗的、選到亮的），照原圖大小排在角色左右；深色底透出背景 */
html.orig #create .choice { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0 !important; display: block !important; }
html.orig #create [data-cls], html.orig #create [data-gender] { position: absolute; padding: 0 !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; background: center / contain no-repeat !important; mix-blend-mode: lighten; }
html.orig #create [data-cls="royal"] { left: 329px; top: 34px; width: 66px !important; height: 62px !important; }
html.orig #create [data-cls="knight"] { left: 324px; top: 97px; width: 76px !important; height: 59px !important; }
html.orig #create [data-cls="elf"] { left: 530px; top: 32px; width: 91px !important; height: 65px !important; }
html.orig #create [data-cls="mage"] { left: 542px; top: 96px; width: 61px !important; height: 61px !important; }
/* 性別：原版 304～307（♀、♂ 各有暗的、亮的），左 ♂ 右 ♀ */
html.orig #create [data-gender] { width: 30px !important; height: 44px !important; }
html.orig #create [data-gender="male"] { left: 355px; top: 248px; background-image: var(--ui-sex-m) !important; }
html.orig #create [data-gender="male"].active, html.orig #create [data-gender="male"]:hover { background-image: var(--ui-sex-m-on) !important; }
html.orig #create [data-gender="female"] { left: 545px; top: 245px; background-image: var(--ui-sex-f) !important; }
html.orig #create [data-gender="female"].active, html.orig #create [data-gender="female"]:hover { background-image: var(--ui-sex-f-on) !important; }
html.orig #create [data-cls="royal"] { background-image: var(--ui-cls-royal) !important; }
html.orig #create [data-cls="royal"].active, html.orig #create [data-cls="royal"]:hover { background-image: var(--ui-cls-royal-on) !important; }
html.orig #create [data-cls="knight"] { background-image: var(--ui-cls-knight) !important; }
html.orig #create [data-cls="knight"].active, html.orig #create [data-cls="knight"]:hover { background-image: var(--ui-cls-knight-on) !important; }
html.orig #create [data-cls="elf"] { background-image: var(--ui-cls-elf) !important; }
html.orig #create [data-cls="elf"].active, html.orig #create [data-cls="elf"]:hover { background-image: var(--ui-cls-elf-on) !important; }
html.orig #create [data-cls="mage"] { background-image: var(--ui-cls-mage) !important; }
html.orig #create [data-cls="mage"].active, html.orig #create [data-cls="mage"]:hover { background-image: var(--ui-cls-mage-on) !important; }
/* 角色（原版的出場動畫，置中在兩排圖示之間） */
html.orig #create-preview { position: absolute; left: 404px; top: 0; width: 132px !important; height: 292px !important; }
/* 能力值（中文，js/ui.js 照截圖的位置排）：左邊力量、敏捷、體質，右邊精神、魅力、智力；中間是骰子。
   經典版的分配：每項旁邊 ▼▲（原版 455～458 的小箭頭，按下變亮），骰子上面「剩餘點數」和框 */
html.orig #create { --o-serif: "Noto Serif TC", "PMingLiU", "MingLiU", "Songti TC", serif; }   /* 思源宋體（index.html 從 Google Fonts 載入），連不上就用明體 */
html.orig #create-stats { position: absolute; left: 330px; top: 314px; width: 290px; height: 50px; padding: 0 !important; display: block !important; background: none; }
html.orig .o-lbl { position: absolute; white-space: nowrap; font: 900 13px/15px var(--o-serif); color: #f3e4b8; text-shadow: 0 0 3px rgba(230, 170, 70, 0.9), 0 0 1px #000, 0 1px 1px #000; }
html.orig .o-st { font-size: 11px; }   /* 能力值的名稱：照經典版的大小 */
html.orig .o-val { position: absolute; white-space: nowrap; font: 900 11px/15px "Playfair Display", var(--o-serif); font-variant-numeric: lining-nums; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }   /* 數字：Playfair Display 粗體（Google Fonts；圓潤、像經典版的數字） */
html.orig .o-arr { position: absolute; width: 7px !important; height: 7px !important; min-width: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer;
  background: #5a5a78 var(--ui-arr-up) 0 0 / 7px 7px no-repeat !important; }
html.orig .o-arr.dn { background-image: var(--ui-arr-dn) !important; }
html.orig .o-arr.up:hover, html.orig .o-arr.up:active { background-image: var(--ui-arr-up-on) !important; }
html.orig .o-arr.dn:hover, html.orig .o-arr.dn:active { background-image: var(--ui-arr-dn-on) !important; }
html.orig .o-left-lbl { top: -30px; width: 60px; line-height: 12px; text-align: center; }
html.orig .o-left { position: absolute; top: 0; width: 21px; height: 14px; border: 1px solid #77736a; background: rgba(0, 0, 0, 0.7); font: 900 11px/12px "Playfair Display", var(--o-serif); font-variant-numeric: lining-nums; text-align: center; color: #fff; }   /* 數字置中（靠右看起來框是歪的） */
/* 骰子：原圖 41 × 80 的下半部（上半部是空的，不擋到「剩餘點數」） */
html.orig #create-die { position: absolute; left: 448px; top: 328px; width: 41px; height: 40px; font-size: 0 !important; cursor: pointer; background: var(--ui-dice) 0 -40px / 164px 80px no-repeat; }
html.orig #create-die:hover { filter: brightness(1.25); }
html.orig #create-die.spin { animation: o-dice 0.4s steps(4) 1; }
@keyframes o-dice { from { background-position: 0 -40px; } to { background-position: -164px -40px; } }
/* 角色命名：「角色命名 :」是字（js/ui.js 加的 #o-name-label），框是深灰底。
   框裡的字：思源宋體的行高（上 12.7、下 3.1）比框高，字會偏下；下面墊 1.3 像素，字的上下剛好置中 */
html.orig #o-name-label { left: 374px; top: 380px; letter-spacing: 2px; font-size: 11px; }   /* 字和能力值的名稱一樣大 */
html.orig #o-name-colon { left: 440px; top: 380px; font-size: 11px; }
html.orig #create-name { position: absolute; left: 457px; top: 380px; width: 111px !important; height: 15px !important; padding: 0 3px 1.3px !important; margin: 0 !important; font-family: var(--o-serif) !important; font-size: 11px !important; font-weight: 900; background: rgba(36, 34, 32, 0.9) !important; border: 1px solid #4a4640 !important; border-radius: 0 !important; color: #f4ecd8 !important; }
html.orig #create-name::placeholder { color: transparent; }
/* 確認、取消：右下兩行字（兩個字中間隔開，和能力值的名稱一樣大），置中在命名框下面 */
html.orig #btn-start, html.orig #btn-create-back { position: absolute; left: 493px; width: 64px !important; height: 16px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important;
  font: 900 11px/16px var(--o-serif) !important; letter-spacing: 17px; text-align: left; color: #efe3c0 !important; text-shadow: 0 0 3px rgba(240, 190, 90, 0.85), 0 0 1px #000; cursor: pointer; }
html.orig #btn-start { top: 415px; }
html.orig #btn-create-back { top: 434px; }
html.orig #btn-start:hover, html.orig #btn-create-back:hover { color: #fff !important; text-shadow: 0 0 5px rgba(255, 210, 120, 1), 0 0 1px #000; }
html.orig #select-info { position: relative; flex: none !important; display: block !important; width: 440px; height: 185px; padding: 0 !important; background: var(--ui-select-info) 0 0 / 440px 185px no-repeat !important; border: 0 !important; }
html.orig #select-info .oc { height: 15px; line-height: 15px; font-size: 12px; color: #f4ecd8; }
html.orig.pc .select-bottom { max-width: 600px !important; }
/* 台版的選角畫面（select-tw-1、-2：640 × 483，上面一頁 4 個拱門，下面角色資料；第 2 頁後兩格是封住的木板）。
   整張照畫面放大置中（js/ui.js selectTwSetup 算 --sk、--sx、--sy）；欄位的動畫疊在拱門上（lighten：黑底透出拱門） */
html.orig #select.tw { display: block !important; padding: 0 !important; --o-serif: "Noto Serif TC", "PMingLiU", "MingLiU", "Songti TC", serif; }
html.orig #select.tw.hidden { display: none !important; }
/*   畫面比圖寬或高時多出來的地方（手機直拿上下、橫拿左右）不留黑的（老闆：黑底很醜；墊登入畫面那張圖）：
     select-back 是登入圖（login-tw-p）中間大樹那段（上面的公告、下面的帳號密碼框不要），鋪滿整個畫面；
     蓋 75% 的黑，圖只剩 25%（老闆：60% 不夠暗），選角的圖跳出來 */
html.orig #select.tw { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), var(--ui-select-back) center / cover no-repeat #000 !important; }
html.orig #select.tw .select-panel { box-shadow: 0 0 22px 6px rgba(0, 0, 0, 0.65); }   /* 圖的邊緣淡淡地陷進背景，不是硬切一條 */
html.orig #select.tw .select-panel { position: absolute; left: 0; top: 0; margin: 0; width: 640px; height: 483px; max-width: none; display: block; gap: 0;
  transform-origin: 0 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(var(--sk, 1)); background: var(--ui-select-tw-1) -1px 0 / 642px 489px no-repeat; }
/*   圖檔最左一欄、最下面 12 列（1072～1083）是白的（截圖留下的邊）：圖放大一點點，往左移 1、下面多出 6，白邊落在框外，
     框底下是圖上原本的黑邊（老闆：有一條白色底線）。資料欄的字（js/ui.js infoTw）照同樣的比例放 */
html.orig #select.tw[data-page="2"] .select-panel { background-image: var(--ui-select-tw-2); }
/*   圖上的「盟」「禦」放大後糊掉了（老闆 11-04「盟字很怪」）：用同一張圖旁邊沒有字的地方蓋掉，重寫一個（字的樣式同建立角色的 .o-lbl） */
html.orig #select.tw .select-panel { --sel-art: var(--ui-select-tw-1); }
html.orig #select.tw[data-page="2"] .select-panel { --sel-art: var(--ui-select-tw-2); }
html.orig #select.tw .select-panel::before, html.orig #select.tw .select-panel::after { position: absolute; left: 143px; width: 18px; height: 17px; text-align: center; font: 900 14px/17px var(--o-serif); color: #f6e6c2; text-shadow: 0 0 3px rgba(230, 170, 70, 0.9), 0 0 1px #000, 0 1px 1px #000; pointer-events: none; background: var(--sel-art) no-repeat; background-size: 642px 489px; }
html.orig #select.tw .select-panel::before { content: '盟'; top: 330px; background-position: -121px -330px; }
html.orig #select.tw .select-panel::after { content: '禦'; top: 444px; background-position: -121px -444px; }
html.orig #select.tw #select-slots { display: block; position: absolute; left: 0; top: 0; width: 640px; height: 270px; }
html.orig #select.tw .slot-col { position: absolute; top: 27px; width: 131px; height: 234px; box-shadow: none; }
html.orig #select.tw .slot-col:nth-child(2) { left: 176px; }
html.orig #select.tw .slot-col:nth-child(1) { left: 20px; }
html.orig #select.tw .slot-col:nth-child(3) { left: 332px; }
html.orig #select.tw .slot-col:nth-child(4) { left: 488px; }
html.orig #select.tw .slot-col.locked { cursor: default; }
html.orig #select.tw .slot-col canvas { mix-blend-mode: lighten; }
html.orig #select.tw .select-bottom { display: block; position: static; width: auto; max-width: none !important; }
/* 右下角三行字（老闆給的圖）：確定（進遊戲；空欄位是建立角色）、取消（登出，回登入畫面）、刪除角色；字照圖上的能力值名稱的樣式，
   按的範圍比字大一點（手機縮小後才按得到）；其他按鈕不顯示 */
html.orig #select.tw .select-bottom .btns { display: block !important; position: static; }
html.orig #select.tw .select-bottom .btns > button { display: none !important; }
html.orig #select.tw #btn-login, html.orig #select.tw #btn-signout:not(.hidden), html.orig #select.tw #btn-delete { display: block !important; position: absolute; left: 532px; width: 74px !important; height: 26px !important;
  padding: 0 0 0 6px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; font-size: 0 !important; text-align: left; cursor: pointer; }
html.orig #select.tw #btn-login { top: 374px; }
html.orig #select.tw #btn-signout { top: 402px; }
html.orig #select.tw #btn-delete { top: 429px; }
html.orig #select.tw #btn-login::after, html.orig #select.tw #btn-signout::after, html.orig #select.tw #btn-delete::after { font: 900 13px/26px var(--o-serif); color: #f3e4b8; text-shadow: 0 0 3px rgba(230, 170, 70, 0.9), 0 0 1px #000, 0 1px 1px #000; white-space: nowrap; }
html.orig #select.tw #btn-login::after { content: '確定'; letter-spacing: 27px; }
html.orig #select.tw #btn-signout::after { content: '取消'; letter-spacing: 27px; }
html.orig #select.tw #btn-delete::after { content: '刪除角色'; letter-spacing: 1.5px; }
html.orig #select.tw .btns > button:hover::after { color: #fff; text-shadow: 0 0 5px rgba(255, 210, 120, 1), 0 0 1px #000; }
html.orig #select.tw #btn-delete:disabled { cursor: default; }
html.orig #select.tw #btn-delete:disabled::after { opacity: 0.45; }
html.orig #select.tw #select-info { position: absolute; left: 0; top: 0; width: 640px; height: 483px; background: none !important; pointer-events: none; }
html.orig #select.tw #select-info .oc { font-size: 11px; color: #f4ecd8; }
html.orig #select.tw .sel-pg { position: absolute; top: 274px; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; }
html.orig #select.tw #sel-pg1 { left: 294px; }
html.orig #select.tw #sel-pg2 { left: 325px; }
html.orig #select.tw .sel-pg:hover { background: rgba(255, 228, 160, 0.12); }
html.orig #select.tw[data-page="1"] #sel-pg1, html.orig #select.tw[data-page="2"] #sel-pg2 { box-shadow: 0 0 8px 2px rgba(255, 210, 120, 0.55); }
html.orig #select:not(.tw) .sel-pg { display: none; }

/* 手機直式的創角：360 × 510，排法跟電腦一樣（角色在中間、左右兩排職業圖示、下面 ♂ ♀），能力值、命名、確認取消照電腦的相對位置往左移 305，
   沒有捲軸：最下面一行原文的句子 */
html.orig.mobile #create { align-items: center !important; justify-content: center !important; padding: 0 !important; overflow: hidden !important; }
html.orig.mobile #create .create-panel { width: 360px !important; height: 580px !important; background: radial-gradient(ellipse at 50% 22%, #2a2218, #000 70%) !important; }
html.orig.mobile #create-preview { left: 114px; top: 0; }
html.orig.mobile #create [data-cls="royal"] { left: 27px; top: 34px; }
html.orig.mobile #create [data-cls="knight"] { left: 22px; top: 97px; }
html.orig.mobile #create [data-cls="elf"] { left: 249px; top: 32px; }
html.orig.mobile #create [data-cls="mage"] { left: 263px; top: 96px; }
html.orig.mobile #create [data-gender="male"] { left: 60px; top: 248px; }
html.orig.mobile #create [data-gender="female"] { left: 270px; top: 245px; }
/*   能力值（js/ui.js 手機那一段）：一項一行 32 高，「力量 ▼ 16 ▲」；箭頭畫 18 × 18（原圖 7 × 7 放大、不糊），按的範圍 28 × 28。
     字比電腦大（手機縮小後才看得清楚）：名稱 14、數字 15 */
html.orig.mobile #create-stats { left: 0; top: 330px; width: 360px; height: 92px; }
html.orig.mobile #create-stats .o-st { font-size: 14px; line-height: 28px; }
html.orig.mobile #create-stats .o-val { width: 28px; font-size: 15px; line-height: 28px; text-align: center; }
html.orig.mobile .o-arr { width: 28px !important; height: 28px !important; background: none !important; outline: none !important; }
/*   手機點過以後會一直算「滑鼠移過去」：電腦版亮起來的箭頭圖會鋪滿整個按的範圍（老闆：選取框超醜），手機不用 */
html.orig.mobile .o-arr.up:hover, html.orig.mobile .o-arr.dn:hover, html.orig.mobile .o-arr.up:active, html.orig.mobile .o-arr.dn:active { background: none !important; }
/*   箭頭：原版 7 × 7 的圖放大會一格一格的；畫成網頁按鈕又太現代（老闆：要復古、石頭材質）——跟手機下面那排「?」、人物、＋ 按鈕
     （css/classic/hud/right.png）同一套：砂岩色的石板（斜光的漸層＋石頭的雜點 --stone）、暗色的外框和亮的內緣，三角是刻進去的
     （深褐色、下緣一道亮邊）；按下去石板變暗、三角往下沉；加不了、減不了的褪色（js/ui.js 的 .off） */
html.orig.mobile .o-arr { --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M6 2.1 10.6 9.1H1.4Z' fill='%23f6e8c4' opacity='.75'/%3E%3Cpath d='M6 1.2 10.4 8.3H1.6Z' fill='%23382010'/%3E%3C/svg%3E"); }
html.orig.mobile .o-arr.dn { --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.4 2.5H10.6L6 9.5Z' fill='%23f6e8c4' opacity='.75'/%3E%3Cpath d='M1.6 1.7H10.4L6 8.8Z' fill='%23382010'/%3E%3C/svg%3E"); }
html.orig.mobile .o-arr::before { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #22170c; border-radius: 3px;
  background: var(--tri) 50% 50% / 12px 10px no-repeat, var(--stone) 0 0 / 60px 60px, linear-gradient(150deg, #e4d3a8, #c4aa76 45%, #8e7144);
  box-shadow: inset 1px 1px 0 rgba(255, 246, 220, 0.65), inset -1px -1px 0 rgba(70, 42, 14, 0.7), inset 0 0 4px rgba(90, 58, 24, 0.45), 0 1px 3px rgba(0, 0, 0, 0.85); }
html.orig.mobile .o-arr:active::before { background: var(--tri) 50% 62% / 12px 10px no-repeat, var(--stone) 0 0 / 60px 60px, linear-gradient(150deg, #c2ad80, #a18758 45%, #6f5732);
  box-shadow: inset 1px 1px 2px rgba(50, 30, 8, 0.7), inset -1px -1px 0 rgba(255, 240, 210, 0.35), 0 0 1px #000; }
html.orig.mobile .o-arr.off::before { opacity: 0.45; filter: saturate(0.4) brightness(0.8); }
/*   中間：「剩餘點數」、點數的框、骰子（骰子是 #create-panel 的座標） */
html.orig.mobile #create-stats .o-left-lbl { left: 150px; top: -34px; font-size: 12px; line-height: 14px; }
html.orig.mobile #create-stats .o-left { left: 165px; top: 0; width: 30px; height: 22px; font-size: 15px; line-height: 20px; }
html.orig.mobile #create-die { left: 159.5px; top: 362px; }
/*   命名、確認、取消：字放大，按的範圍也放大 */
html.orig.mobile #o-name-label { left: 58px; top: 440px; font-size: 14px; line-height: 24px; }
html.orig.mobile #o-name-colon { left: 138px; top: 440px; font-size: 14px; line-height: 24px; }
html.orig.mobile #create-name { left: 154px; top: 440px; width: 150px !important; height: 24px !important; font-size: 14px !important; }
html.orig.mobile #btn-start, html.orig.mobile #btn-create-back { left: 128px; width: 104px !important; height: 30px !important; font-size: 15px !important; line-height: 30px !important; letter-spacing: 20px; white-space: nowrap; text-align: center; padding: 0 0 0 20px !important; }
html.orig.mobile #btn-start { top: 482px; }
html.orig.mobile #btn-create-back { top: 512px; }
html.orig.mobile #create-desc, html.orig.mobile #create-bonus, html.orig.mobile #create-hpmp { left: 22px; width: 316px; color: #e8dcc0 !important; }
html.orig.mobile #create-desc { top: 472px; }
html.orig.mobile #create-bonus { top: 514px; color: #b8a888 !important; }
html.orig.mobile #create-hpmp { top: 552px; }
/* 手機沒有捲軸：確認、取消下面一行原文的句子（js/ui.js，text-local.js 的 classSlogan） */
html.orig.mobile #create.o-text #create-desc { top: 554px; height: auto; overflow: visible; }
/*   字跟能力值的名稱、確認取消同一套（粗的宋體、淡金色、金色的光暈；老闆：細的那種字挺醜），小一點、字距開一點 */
html.orig.mobile .o-slogan { text-align: center; white-space: nowrap; font: 900 13px/18px var(--o-serif); letter-spacing: 1.5px; color: #e9dcb8;
  text-shadow: 0 0 3px rgba(230, 170, 70, 0.75), 0 0 1px #000, 0 1px 1px #000; }
/* 手機橫式的創角：640 × 360（直式整張縮小的話字和按鈕太小、還會重疊）——左半邊角色、職業、性別（直式的排法），
   右半邊能力值（js/ui.js 同一套，整塊往右移）、命名、確認取消、最下面一句原文 */
@media (orientation: landscape) {
  html.orig.mobile #create .create-panel { width: 640px !important; height: 360px !important; display: block !important; }   /* 手機橫的一般版是格線排法（css/style.css）：格線裡的絕對位置會照格子算，跑出畫面 */
  html.orig.mobile #create-preview { left: 104px; }
  html.orig.mobile #create [data-cls="royal"] { left: 17px; }
  html.orig.mobile #create [data-cls="knight"] { left: 12px; }
  html.orig.mobile #create [data-cls="elf"] { left: 239px; }
  html.orig.mobile #create [data-cls="mage"] { left: 253px; }
  html.orig.mobile #create [data-gender="male"] { left: 50px; }
  html.orig.mobile #create [data-gender="female"] { left: 260px; }
  html.orig.mobile #create-stats { left: 292px; top: 70px; }   /* 用到的範圍是 #create-stats 裡的 38～322：畫面上 330～614 */
  html.orig.mobile #create-die { left: 451.5px; top: 102px; }
  html.orig.mobile #o-name-label { left: 345px; top: 190px; }
  html.orig.mobile #o-name-colon { left: 425px; top: 190px; }
  html.orig.mobile #create-name { left: 441px; top: 190px; }
  html.orig.mobile #btn-start, html.orig.mobile #btn-create-back { left: 420px; }
  html.orig.mobile #btn-start { top: 236px; }
  html.orig.mobile #btn-create-back { top: 268px; }
  html.orig.mobile #create.o-text #create-desc { left: 330px; top: 314px; width: 284px; }
}

/* ── 登入（105 的背景、59 的帳號密碼框）── */
html.orig.pc #login { background: #000 var(--ui-arena) center / auto 100% no-repeat !important; }
html.orig #login .login-panel { background: none !important; border: 0 !important; box-shadow: none !important; width: 207px !important; padding: 0 !important; position: relative; }
html.orig #login h1 { display: none; }
html.orig #login .login-panel::before { content: ""; display: block; width: 207px; height: 53px; background: var(--ui-login-box) 0 0 / 207px 53px no-repeat; }
html.orig #login-name, html.orig #login-pass { position: absolute; left: 93px; width: 112px !important; height: 15px !important; margin: 0 !important; padding: 0 3px !important; font-size: 12px !important; background: transparent !important; border: 0 !important; color: #f4ecd8 !important; }
html.orig #login-name { top: 2px; }
html.orig #login-pass { top: 36px; }
html.orig #login-name::placeholder, html.orig #login-pass::placeholder { color: transparent; }
/* 點進輸入框：不要瀏覽器的外框（原版沒有），只有游標 */
html.orig input:focus, html.orig input:focus-visible, html.orig textarea:focus, html.orig textarea:focus-visible { outline: none !important; }
html.orig #login .login-guide { margin-top: 6px !important; text-align: center; text-shadow: 0 1px 2px #000; }
html.orig #login .btns { margin-top: 8px !important; display: flex !important; flex-direction: column; align-items: center; gap: 4px !important; }
html.orig #btn-signin { width: 112px !important; height: 19px !important; padding: 0 !important; font-size: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--ui-btn-ok) 0 0 / 112px 19px no-repeat !important; }
html.orig #btn-signin:hover { background-image: var(--ui-btn-ok-h) !important; }
/* 電腦：台版的登入畫面（login-tw，548×409：左邊公告、右下遊戲帳號、密碼，下面「登錄」「離開遊戲」都畫在圖上）。
   整張照畫面大小放大（--lk，js/ui.js），框和按鈕疊在圖上原本的位置 */
/* 手機（直的）：直式的台版登入圖（login-tw-p，360×640：上面公告、下面遊戲帳號、密碼、「登錄」「離開遊戲」），蓋滿畫面（js/ui.js fitLogin） */
html.orig #login { background: #000 !important; display: block; }
html.orig #login.hidden { display: none !important; }
html.orig #login .login-panel { position: absolute !important; left: 0; top: 0; margin: 0 !important; width: 548px !important; max-width: none !important; height: 409px; max-height: none !important; transform-origin: 0 0; transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--lk, 1)); background: var(--ui-login-tw) 0 0 / 548px 409px no-repeat !important; }
html.orig #login .login-panel::before, html.orig #login .login-guide { display: none; }
html.orig #login-name, html.orig #login-pass { left: 433px; width: 88px !important; height: 12px !important; padding: 0 2px !important; font-size: 9px !important; line-height: 12px; }
html.orig #login-name { top: 264px; }
html.orig #login-pass { top: 283px; }
html.orig #login .btns { display: block !important; margin: 0 !important; }
/*   提醒視窗：登入圖是 548×409 再整張放大，字照圖上公告欄的大小（標題約 14、內文約 10） */
html.orig #login .login-dlg-box { width: 210px; padding: 12px 12px 8px; }
html.orig #login .login-dlg-box p { font-size: 11px; }
html.orig #login .login-dlg-sep { height: 7px; margin: 7px 6px 4px; }
html.orig #login .login-dlg-sep::after { width: 4px; height: 4px; }
html.orig #login .login-dlg-btns { gap: 22px; }
html.orig #login .login-dlg-btns button { padding: 1px 6px !important; font-size: 13px !important; }

/* ── 遊戲畫面下面的主介面（電腦，原版介面 html.classic 的排法上換成原版的圖）──
   原版的 406（平常，125 高）、431（對話框往上高 24 像素，html.o-chatx；對話框右下角的 ▲▼ 切換，js/main.js）切成幾塊：
   左欄（112 寬）、右欄（145 寬）整塊；上緣：兩端的龍、龍頭固定大小，中間鋪一條直欄；對話框（border-image）左右拉長，右邊一條捲軸。
   #hud 用 zoom 放大 --hk 倍，裡面的座標都是原圖的像素；#log、#chat-input 在 #hud 外面，自己乘 --hk。
   html.o-prev（上面那顆「主介面：上一版」，js/render.js）：不套這段，回到 css/classic.css 那套圖，用來比較 */
/* （原版的圖：任何寬度都用；--hk 由 js/main.js 照視窗大小算） */
  html.orig.pc.classic:not(.o-prev) { --hk: 1.5; --hh: 125px; }
  html.orig.pc.classic:not(.o-prev).o-chatx { --hh: 149px; }
  html.orig.pc.classic:not(.o-prev) #hud { zoom: var(--hk); height: var(--hh); background: none; box-shadow: none; }
  /* 對話框：原圖 112～480、上緣 40 以下；左右各 6 像素不拉 */
  html.orig.pc.classic:not(.o-prev) #hud::before { left: 112px; right: 160px; top: 40px; bottom: 0; background: none; box-shadow: none;
    border-style: solid; border-width: 0 6px; border-image: var(--ui-hud-c-n) 0 6 fill / 0 6px stretch; }
  html.orig.pc.classic:not(.o-prev).o-chatx #hud::before { border-image-source: var(--ui-hud-c-x); }
  html.orig.pc.classic:not(.o-prev) .cl-scroll { display: block; right: 145px; top: 40px; bottom: 0; width: 15px; background: var(--ui-hud-s-n) 0 0 / 100% 100% no-repeat; }
  html.orig.pc.classic:not(.o-prev).o-chatx .cl-scroll { background-image: var(--ui-hud-s-x); }
  html.orig.pc.classic:not(.o-prev) #chat-size { display: block; position: absolute; right: 147px; bottom: 1px; width: 13px; height: 14px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; z-index: 6; }
  html.orig.pc.classic:not(.o-prev) #chat-size:hover { background: rgba(255, 255, 255, 0.18); }
  /* 上緣（原圖 406 的 x 112～495）：全部從使用者 2026-10-31 給的原版畫面（66.webp，主介面放大 2.241 倍）切下來，透明的地方照 406 的形狀
     （scratchpad lin-tools/hd-mask.js、hd-band.js、hd-head.js）：兩端的龍（hd-dl、hd-dr）、龍頭（hd-head）、龍旁與龍頭旁的扭繩（hd-wl、hd-wr、hd-hl、hd-hr）、
     中間直的細金桿連空條與暗邊（hd-band、hd-bandr）。畫面比 640 寬時直的那段拉長，龍頭兩邊一樣長。
     框（.cl-frame）不自成一層：金桿那條在條的後面，龍、龍頭在條的前面 */
  /*   兩端的龍圖和對話框之間差不到 1.2 像素，地圖會從縫透出來變成一條淡色的邊（老闆 11-04）：把下面的縫墊深色。
       左右欄那邊不墊：深色直線比龍圖高一截，看起來像一個方框（老闆 11-06），改成龍圖往外拉一點疊在欄上（.cl-end） */
  html.orig.pc.classic:not(.o-prev) .cl-frame { left: 112px; right: 145px; top: 0; height: 40px; z-index: auto;
    background: linear-gradient(#1e1e22, #1e1e22) 0 100% / 30px 1.2px no-repeat, linear-gradient(#0f0f10, #0f0f10) 100% 100% / 30px 1.2px no-repeat; }
  /*   位置都照那張畫面（放大 2.241 倍）的排法換算：畫面 y 763.4 = 主介面第 0 列，條下面的暗邊剛好接到對話框（第 44 列）；x 照條的兩端（140、466） */
  /*   直的一段（畫面 y 803～861：細金桿、空條、暗邊）：左右各切一整段（hd-band 是龍頭左邊那段、hd-bandr 右邊那段），640 寬時剛好在原處；更寬時左邊那段一直鋪 */
  html.orig.pc.classic:not(.o-prev) .cl-rail { display: block; left: 28px; right: 28.8px; top: 17.67px; height: 26.33px; z-index: 1;
    background: var(--ui-hd-bandr) right 40.59px top 0 / 59.35px 100% no-repeat, var(--ui-hd-band) 41.97px 0 / 65.6px 100% repeat-x !important; }
  /*   扭繩：龍旁邊的兩段（::before 左、::after 右）跟著龍；龍頭旁邊的兩段（.cl-frame 的 ::before、::after）跟著龍頭。都切到條的上緣（畫面 y 811）為止 */
  html.orig.pc.classic:not(.o-prev) .cl-rail::before, html.orig.pc.classic:not(.o-prev) .cl-rail::after,
  html.orig.pc.classic:not(.o-prev) .cl-frame::before, html.orig.pc.classic:not(.o-prev) .cl-frame::after { content: ''; display: block; position: absolute; width: 43.28px; height: 22.31px; background: 0 0 / 100% 100% no-repeat; }
  html.orig.pc.classic:not(.o-prev) .cl-rail::before { left: 0; top: -17.4px; background-image: var(--ui-hd-wl); }
  html.orig.pc.classic:not(.o-prev) .cl-rail::after { right: -1.36px; top: -17.4px; background-image: var(--ui-hd-wr); }
  html.orig.pc.classic:not(.o-prev) .cl-frame::before { left: calc(50% - 57.27px); top: 0.27px; width: 31.24px; z-index: 2; background-image: var(--ui-hd-hl); }
  html.orig.pc.classic:not(.o-prev) .cl-frame::after { left: calc(50% + 32.87px); top: 0.27px; width: 31.24px; z-index: 2; background-image: var(--ui-hd-hr); }
  html.orig.pc.classic:not(.o-prev) .cl-end { left: -0.3px; top: -1.07px; width: 28.77px; height: 40.16px; z-index: 3; background: var(--ui-hd-dl) 0 0 / 100% 100% no-repeat; }
  html.orig.pc.classic:not(.o-prev) .cl-end.r { left: auto; right: -0.3px; width: 28.63px; z-index: 3; background: var(--ui-hd-dr) 0 0 / 100% 100% no-repeat; transform: none; }
  /*   龍頭：使用者自己切給的原版畫面（2026-10-31，畫面放大 2.241 倍）上的龍頭（hd-head，角旁邊的地圖去掉了），640 寬時在 x 275～338 */
  html.orig.pc.classic:not(.o-prev) .cl-head { left: calc(50% - 28.5px); top: -6.87px; width: 62.47px; height: 51.32px; transform: none; z-index: 3; background: var(--ui-hd-head) 0 0 / 100% 100% no-repeat; }
  /* 體力、魔力：繩子下緣到對話框（y 17～39，在框的後面）；左邊從龍的後面到龍頭的左柱，右邊從右柱到右邊的龍的後面。
     沒滿的地方是原版的黑槽色；字在框的上面 */
  /*   條：同一張原版畫面上切下來的一條（滿血、滿魔的紅管、藍管，hd-hp、hd-mp），從直金桿下緣（y 28）開始 18.3 高，下面接那張畫面的暗邊（hd-under）；
       沒滿的地方是暗色 */
  html.orig.pc.classic:not(.o-prev) .bar { top: 21.24px; height: 18.3px; border: none; border-radius: 0; background: none; box-shadow: none; z-index: auto; }
  /*   黑槽的範圍（406）：體力 x 140～281（左龍的柱子 134～139、龍頭左柱 282～285），魔力 x 331～467（龍頭右柱 327～330、右龍的柱子 468～473）。
       龍頭在 640 寬時 x 270（畫面放大時在 50% − 50），所以體力右緣 = 50% − 38、魔力左緣 = 50% + 11 */
  html.orig.pc.classic:not(.o-prev) .bar.hp { left: 140px; right: calc(50% + 38px); }
  html.orig.pc.classic:not(.o-prev) .bar.mp { left: calc(50% + 11px); right: 172px; background: none; }
  html.orig.pc.classic:not(.o-prev) .bar .fill { border-radius: 0; box-shadow: none; z-index: 2; }
  /* 照使用者 2026-10-31 的原版圖（65.png）逐行取色：上緣一條直的暗線、上面四分之一一道亮光、中間深色、下面七成處一道反光、底下暗掉；
     條從直金桿下緣（y 28）開始，上緣是直的（中文：「上面邊緣糊掉了 要像這樣」）。字是白字黑邊，貼近龍頭 */
  /*   空掉的部分是灰色的玻璃管（原版截圖：上緣一道亮光、中間暗、下半一道反光，跟血條同一個形狀；hd-empty 照截圖量的每一列） */
  /*   金桿那條（.cl-rail，z 1）在條的後面、裡面空條的地方是暗的：玻璃要蓋在它上面、血魔（.fill，z 2）下面 */
  html.orig.pc.classic:not(.o-prev) .bar.hp::before, html.orig.pc.classic:not(.o-prev) .bar.mp::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--ui-hd-empty, none) 0 0 / 1px 100% repeat-x; }
  html.orig.pc.classic:not(.o-prev) .bar.hp .fill { background: var(--ui-hd-hp) 0 0 / 1px 100% repeat-x; }
  html.orig.pc.classic:not(.o-prev) .bar.mp .fill { background: var(--ui-hd-mp) 0 0 / 1px 100% repeat-x; }
  html.orig.pc.classic:not(.o-prev) .bar .val { z-index: 4; padding-top: 1.2px; font: var(--hb, 12px)/18.3px "MingLiU", "PMingLiU", "Noto Serif TC", serif; letter-spacing: 0; color: #fff; white-space: nowrap;   /* 視窗窄時條也窄：換行的話數字掉到第二行被裁掉，只剩「體」「魔」 */
    text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }   /* 原版的字：12px 細明體的點陣字（--hb，js/main.js），白字黑邊；不能拉高，一縮放就不是點陣字 */
  /*   字貼著龍頭（使用者 11-04 的原版截圖：「體力:1197/1197」的尾巴離龍頭左柱幾個像素、「魔力:86/86」緊接在右柱後面）；在彩色的管子裡上下置中。
       條窄的時候（視窗比 4:3 窄）字往邊上靠，「體力:1000/1000」也放得下 */
  /*   字的顏色不是白的（使用者 11-04）：兩張原版截圖量出來體力是淡粉紅（255,197,199）、魔力是淡藍（203,207,255），同一張的白色聊天字量起來是純白，
       不是壓縮造成的；取 RGB555 的值 */
  html.orig.pc.classic:not(.o-prev) .bar.hp .val { text-align: right; padding-right: clamp(0px, calc(100% - 84px), 6px); color: #ffc8c8; }
  html.orig.pc.classic:not(.o-prev) .bar.mp .val { text-align: left; padding-left: clamp(0px, calc(100% - 84px), 3px); color: #c8d0ff; }
  /* 左欄：原圖的框裡放等級與經驗值、防禦｜魔防、負重、飽食度、時間（離下緣的距離兩張圖一樣） */
  html.orig.pc.classic:not(.o-prev) .cl-stat { left: 0; top: auto; bottom: 0; width: 112px; height: calc(var(--hh) - 21px); background: var(--ui-hud-l-n) 0 0 / 100% 100% no-repeat; }
  html.orig.pc.classic:not(.o-prev).o-chatx .cl-stat { background-image: var(--ui-hud-l-x); }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row { top: auto; }
  /*   字：細明體的點陣字（使用者 11-04 給的原版截圖：12 像素的細明體，白字、沒有糊的陰影）。大小 --hf 由 js/main.js 算：螢幕上剛好是有點陣字的
       12、13、15、16 像素（10px 再被 #hud 放大成 14.7 這種大小時是糊的外框字）；陰影是不糊的 1 像素，橘色的經驗值條上也看得清楚。
       每格的字框就是原圖格子的內緣（等級 6～22、防禦 31～43、負重 51～62、飽食 70～81、時間 89～100），細明體的字身剛好在框的正中間 */
  html.orig.pc.classic:not(.o-prev) .cl-stat :is(.cl-lv, .cl-acmr > span, .cl-bar, #cl-time) { color: #fff; text-shadow: 0.6px 0.6px 0 rgba(0, 0, 0, 0.7); }   /* 白字、一點點影子：#hud 放大了，四邊黑邊看起來太深（老闆 11-06） */
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-lv { left: 5px; bottom: 81px; width: 102px; height: 17px; padding: 0 3px; font: var(--hf, 10px)/17px "MingLiU", "PMingLiU", serif; }
  /*   等級那格：經驗值的橘色條，從格子左緣（原圖 x 0）照百分比往右長（原版截圖：「等級:47 44.79%」的格子左邊四成五是橘的）；字在條的上面 */
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-lv::before { content: ''; position: absolute; left: -5px; top: 0; bottom: 0; width: calc(110px * var(--exp, 0) / 100); background: var(--ui-hud-bar-o) 0 0 / 110px 100% no-repeat; }
  /*   字往下的量（11-04 使用者：「要垂直置中」）：量螢幕上的像素，點陣字的筆畫在框裡上下各留一樣多（視窗 800 × 600、800 × 700，字 12、15、16 像素都量過，差不到 1 像素） */
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-lv > span { position: relative; top: 1.7px; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-acmr { left: 0; bottom: 61.5px; width: 112px; height: 10px; }
  html.orig.pc.classic:not(.o-prev) .cl-acmr > span { top: -0.4px; height: 13px; font: var(--hf, 10px)/13px "MingLiU", "PMingLiU", serif; }
  html.orig.pc.classic:not(.o-prev) #cl-ac { left: 21px; width: 25px; padding: 0; text-align: center; }   /* 原圖的格子 21～46、69～109 */
  html.orig.pc.classic:not(.o-prev) #cl-mr { left: 69px; width: 40px; padding: 0; text-align: center; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(3), html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(4), html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(5) { left: 21px; width: 86px; height: 10px; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(3) { bottom: 42px; } html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(4) { bottom: 23px; } html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:nth-child(5) { bottom: 4px; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar { height: 10px; font: var(--hf, 10px)/12px "MingLiU", "PMingLiU", serif; }
  /* 上一版那套圖（css/classic.css 的 left2.png）才有的：善惡值一列、橘色方塊的條、晚上的星空和月亮圖示；原版的圖不用 */
  html.orig.pc.classic:not(.o-prev) .cl-law { display: none; }
  html.orig.pc.classic:not(.o-prev) .cl-stat #cl-sunico.ci-moon { display: block; position: absolute; left: -19px; top: -2.5px; width: 16px; height: 15px; border: 0; border-radius: 0; box-shadow: none; background: var(--ui-hud-moon-i) 0 0 / 16px 15px no-repeat; }
  html.orig.pc.classic:not(.o-prev) #cl-lv { width: auto; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar .fill { top: 1px; bottom: 1px; left: 0; max-width: 100%; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar > span { top: 0.8px; bottom: auto; height: 12px; padding-right: 3px; font-size: var(--hf, 10px); line-height: 12px; }
  /* 照 1.82c 台版（使用者給的截圖）：體力、魔力的字；負重、飽食度是原版的橘色條（705，過重是紅的 713）；
     第二列右邊的圓圈是善惡值的圖示（710 混沌、711 中立、712 正義），後面寫善惡值；
     時間那條白天是山（39）、晚上是星空（40），中間寫遊戲時間，太陽、月亮是原版的小圖（37、38）；左邊的圖示晚上換月亮（17） */
  html.orig.pc.classic:not(.o-prev) .bar.hp .val::before { content: '體力:'; }
  html.orig.pc.classic:not(.o-prev) .bar.mp .val::before { content: '魔力:'; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar .fill { top: 0; bottom: 0; border-radius: 0; box-shadow: none; background: var(--ui-hud-bar-o) 0 0 / 86px 10px no-repeat !important; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar .fill.warn { background-image: var(--ui-hud-bar-r) !important; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .ci-mr { display: block; position: absolute; left: 47px; top: -3.5px; width: 16px; height: 17px; border: 0; border-radius: 0; box-shadow: none; background: var(--ui-hud-al-n) 0 0 / 16px 17px no-repeat; }
  html.orig.pc.classic:not(.o-prev) .cl-acmr.al-l .ci-mr { background-image: var(--ui-hud-al-l); }
  html.orig.pc.classic:not(.o-prev) .cl-acmr.al-c .ci-mr { background-image: var(--ui-hud-al-c); }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-sky { opacity: 1; background: var(--ui-hud-day) 3px 1px / 80px 8px no-repeat; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-sky.night { background: var(--ui-hud-night) 3px 1px / 80px 8px no-repeat; }
  html.orig.pc.classic:not(.o-prev) #cl-sun { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 0; box-shadow: none; background: var(--ui-hud-sun) 0 0 / 8px 8px no-repeat; z-index: 1; }
  html.orig.pc.classic:not(.o-prev) #cl-sun.moon { background-image: var(--ui-hud-moon); filter: none; }
  html.orig.pc.classic:not(.o-prev) #cl-time { position: absolute; left: 0; right: 0; top: -0.7px; z-index: 2; text-align: center; font: var(--hf, 10px)/12px "MingLiU", "PMingLiU", serif; color: #fff; }
  /*   負重、飽食度的條和時間的天空上平常沒有字（老闆 11-04 的兩張原版截圖：只有條和太陽、月亮）；滑鼠移過去才顯示（老闆 11-04）。手機一直顯示 */
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-bar > span, html.orig.pc.classic:not(.o-prev) #cl-time { display: none; }
  html.orig.pc.classic:not(.o-prev) .cl-stat .cl-row:hover .cl-bar > span { display: block; }
  /* 右欄：快捷格（原圖 500～636 × 29～96，F5～F12 是圖上的字）、下面 7 個按鈕（圖上的，按鈕本身透明） */
  html.orig.pc.classic:not(.o-prev) #hud::after { right: 0; top: auto; bottom: 0; width: 145px; height: calc(var(--hh) - 21px); background: var(--ui-hud-r-n) 0 0 / 100% 100% no-repeat; }
  html.orig.pc.classic:not(.o-prev).o-chatx #hud::after { background-image: var(--ui-hud-r-x); }
  html.orig.pc.classic:not(.o-prev) #hotbar { left: auto; right: 4px; top: auto; bottom: 29px; width: 136px; height: 67px; gap: 0; grid-template-rows: 33.5px 33.5px; }
  html.orig.pc.classic:not(.o-prev) .hot { height: 33.5px; }
  html.orig.pc.classic:not(.o-prev) .hot .key { display: none; }
  /* 道具數量：原版快捷格不顯示（老闆給的原版截圖：紅色藥水、卷軸都只有圖示） */
  html.orig.pc.classic:not(.o-prev) .hot .cnt { display: none; }
  /* 圖示塞滿格子（原版 32 × 32 的圖貼齊金框，使用者 2026-10-31 的截圖）；選到的格子是原版的選取框（696：淡銅色的框、深褐的底） */
  html.orig.pc.classic:not(.o-prev) .hot { border: 0; background: none; }
  /*   點到的格子才有選取框（使用者 2026-10-31）：原版 696 的底，外框的淡金色線（#ffd594）粗 2 像素、蓋在圖示上面 */
  html.orig.pc.classic:not(.o-prev) .hot.sel, html.orig.pc.classic:not(.o-prev) .hot.assign { background: var(--ui-hot-sel) 0 0 / 100% 100% no-repeat; animation: none; }
  html.orig.pc.classic:not(.o-prev) .hot.sel::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid #ffd594; pointer-events: none; }
  /* 對話框捲軸的拖曳鈕（471，銀色的夾塊，使用者 2026-10-31 的原版畫面）：在兩顆圓鈕中間（406 的上圓鈕 y 47～60、下圓鈕 92～104，431 的下圓鈕再低 24），
     --t 是捲動的位置（0 最上、1 最下：貼著下圓鈕） */
  html.orig.pc.classic:not(.o-prev) #log-thumb { display: block; position: absolute; right: 146px; width: 14px; height: 9px; z-index: 6;
    top: calc(60px + var(--t, 1) * (var(--hh) - 102px)); background: var(--ui-scroll-thumb) 0 0 / 100% 100% no-repeat; cursor: pointer; touch-action: none; }
  /*   對話紀錄自己的捲軸（瀏覽器的細棕條）不顯示：有原版的捲軸 */
  html.orig.pc.classic:not(.o-prev) #log { scrollbar-width: none; }
  html.orig.pc.classic:not(.o-prev) #log::-webkit-scrollbar { display: none; }
  /*   兩顆圓鈕：按一下往上、往下捲一行 */
  html.orig.pc.classic:not(.o-prev) #log-up, html.orig.pc.classic:not(.o-prev) #log-dn { display: block; position: absolute; right: 145px; width: 15px; height: 13px; z-index: 6; cursor: pointer; }
  html.orig.pc.classic:not(.o-prev) #log-up { top: 47px; }
  html.orig.pc.classic:not(.o-prev) #log-dn { bottom: 21px; }
  html.orig.pc.classic:not(.o-prev) .hot .icon { inset: 1px; }
  html.orig.pc.classic:not(.o-prev) .hot .icon img { object-fit: fill; }
  html.orig.pc.classic:not(.o-prev) .hud-right { left: auto; right: 0; top: auto; bottom: 1px; width: 145px; height: 21px; gap: 0; }
  html.orig.pc.classic:not(.o-prev) .hud-right button[title] { height: 21px; }
  /* 對話：文字在對話框的石板上（y 44～107），輸入在下面那條（y 111～122） */
  html.orig.pc.classic:not(.o-prev) #log { left: calc(116px * var(--hk)); right: calc(162px * var(--hk)); top: calc(100vh - (var(--hh) - 45px) * var(--hk)); bottom: auto; height: calc((var(--hh) - 63px) * var(--hk)); padding: 2px 4px 0 6px; }   /* 從條下面的暗邊（到 y 44）以下開始；字貼著左上（老闆 11-06 的原版畫面），放不下一整行的空位留在下面 */
  html.orig.pc.classic:not(.o-prev) #chat-input { left: calc(115px * var(--hk)); right: calc(162px * var(--hk)); bottom: calc(3px * var(--hk)); height: calc(11px * var(--hk)); padding: 0 4px; font-size: min(var(--lf, 12px), calc(11px * var(--hk))); line-height: calc(11px * var(--hk)); }
  /* 視窗不要壓到主介面 */
  html.orig.pc.classic:not(.o-prev) #win-inv, html.orig.pc.classic:not(.o-prev) #win-wh, html.orig.pc.classic:not(.o-prev) #win-char { bottom: calc(var(--hh) * var(--hk) + 10px); }
  html.orig.pc.classic:not(.o-prev) #win-spell { max-height: calc(100vh - var(--hh) * var(--hk) - 60px); }
  /* 安全／一般／戰鬥區域：原版在主介面右上角、快捷格那塊的上面，淡藍色的明體字 */
  html.orig.pc.classic:not(.o-prev) #zone-tag { right: calc(6px * var(--hk)); bottom: calc((var(--hh) - 21px) * var(--hk) + 2px); }
  html.orig.pc.classic:not(.o-prev) #zone-tag b { font-size: calc(14px * var(--hk)); font-weight: normal; letter-spacing: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); }
  html.orig.pc.classic:not(.o-prev) #zone-tag .safety { color: #a8c8ee; }
  /* 對話列最前面的「中」（紫色小方塊、白字），輸入的字接在後面 */
  /*   「中」是使用者原版截圖上的圖（assets/local/ui/pc/ime-zh.png）；切到「英」時沒有圖，用字 */
  html.orig.pc.classic:not(.o-prev) #ime { display: block; position: fixed; left: calc(117px * var(--hk)); bottom: calc(3px * var(--hk)); width: calc(12px * var(--hk)); height: calc(10px * var(--hk)); padding: 0; z-index: 31;
    border: 0; border-radius: 0; box-shadow: none; background: var(--ui-ime-zh) 0 0 / 100% 100% no-repeat; color: transparent;
    font: calc(9px * var(--hk)) / calc(10px * var(--hk)) "PMingLiU", "MingLiU", "Noto Serif TC", serif; text-align: center; cursor: pointer; }
  html.orig.pc.classic:not(.o-prev) #ime.en { background: linear-gradient(#9a5ac4, #6a3290); color: #fff; }
  html.orig.pc.classic:not(.o-prev) #chat-input { left: calc(129px * var(--hk)); }

html.orig #btn-signin { position: absolute; left: 457px; top: 314px; width: 34px !important; height: 18px !important; background: none !important; }
html.orig #btn-signin:hover { background: rgba(255, 228, 160, 0.14) !important; }
@media (orientation: portrait) {
  html.orig.mobile #login .login-panel { width: 360px !important; height: 640px; background: var(--ui-login-tw-p) 0 0 / 360px 640px no-repeat !important; }
  html.orig.mobile #login-name, html.orig.mobile #login-pass { left: 152px; width: 127px !important; height: 16px !important; font-size: 11px !important; line-height: 16px; }
  html.orig.mobile #login-name { top: 470px; }
  html.orig.mobile #login-pass { top: 493px; }
  html.orig.mobile #btn-signin { left: 140px; top: 540px; width: 80px !important; height: 26px !important; }
  /*   提醒視窗：直式登入圖 360 寬，字放大到跟公告欄一樣好讀 */
  html.orig.mobile #login .login-dlg-box { width: 280px; padding: 16px 14px 10px; }
  html.orig.mobile #login .login-dlg-box p { font-size: 15px; }
  html.orig.mobile #login .login-dlg-sep { height: 9px; margin: 9px 8px 6px; }
  html.orig.mobile #login .login-dlg-sep::after { width: 6px; height: 6px; }
  html.orig.mobile #login .login-dlg-btns { gap: 30px; }
  html.orig.mobile #login .login-dlg-btns button { padding: 3px 8px !important; font-size: 18px !important; }
}

/* 第一次執行的下載畫面（js/preload.js）：原版的開頭圖 */
html.orig #preload { background: #000 var(--ui-logo-lin) center / auto 100% no-repeat !important; }
html.orig.mobile #preload { background-size: 100% auto !important; }

/* 結束視窗：原版的小石框（50，171 × 104，內框正好放三個 24 高的鈕）加重新開始（44c）、離開遊戲（46c）、取消（48c），圖編號相連、大小都是 91 × 24；
   字串表也有「戰鬥中，無法重新開始」「戰鬥中無法離開遊戲」兩句。死亡（C_Restart）和活著按 Ctrl+Q、Alt+X（C_ChangeChar）共用，沒有別的字 */
html.orig #dead { background: none; }
html.orig #dead .panel {
  width: 171px; height: 104px; box-sizing: border-box; padding: 15px 0 0 !important; max-width: none;
  background: var(--ui-askbox) 0 0 / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}
html.orig.mobile #dead .panel { zoom: 1.6; }
html.orig #dead .btns { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; }
html.orig #dead .btns button { width: 91px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--ui-restart) 0 0 / 91px 24px no-repeat !important; }
html.orig #btn-respawn:hover { background-image: var(--ui-restart-h) !important; }
html.orig #dead #btn-quit { background-image: var(--ui-quit) !important; }
html.orig #dead #btn-quit:hover { background-image: var(--ui-quit-h) !important; }
html.orig #dead #btn-dead-close { background-image: var(--ui-cancel) !important; }
html.orig #dead #btn-dead-close:hover { background-image: var(--ui-cancel-h) !important; }

/* 詢問視窗（50 的小石框） */
html.orig #ask .ask-box {
  border-style: solid; border-width: 14px 16px 16px 14px; border-image: var(--ui-askbox) 13.46% 9.36% 15.38% 8.19% fill / 14px 16px 16px 14px stretch;
  background: none !important; border-radius: 0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important; padding: 4px 6px !important;
}
html.orig #ask .ask-btns button { box-shadow: none; }

/* 狀態圖示：原版是畫面最右邊由上往下一直排（使用者給的 1.82c 畫面），沒有剩下的時間（滑鼠停著看）；排滿了往左再開一排。
   原版的狀態圖示（.st，深色底的方框）是加亮疊在畫面上：深色的底透出後面的畫面。沒有原版狀態圖的用魔法圖示（自己有石框），不再加框、圓角 */
html.orig #buffs { left: auto !important; right: calc(4px + var(--sr, 0px)); top: calc(4px + var(--st, 0px)); max-width: none; max-height: 60vh; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: flex-start; gap: 2px; }
html.orig.mobile.classic #buffs { max-width: none; justify-content: flex-start; }
html.orig.pc #buffs { top: 40px; }   /* 電腦：右上角那排按鈕（#topbar）底下 */
html.orig .bicon, html.orig .bicon.bad { width: 32px; height: 32px; border: 0; border-radius: 0; box-shadow: none; }
html.orig .bicon span { display: none; }
html.orig .bicon.st { background: none; }
html.orig .bicon.st img { filter: none; }
/* 加亮要加在整排上：#buffs 固定在畫面上自成一層，只加在圖上的話是跟這一層透明的底混，深色的底不會透出遊戲畫面（老闆：要像原版一樣是透明的） */
html.orig #buffs { mix-blend-mode: screen; }
html.orig.mobile .bicon, html.orig.mobile .bicon.bad { width: 28px; height: 28px; }
html.orig.mobile.classic #btn-pk { top: calc(4px + var(--st)); right: calc(40px + var(--sr)); }   /* PK 鈕：在狀態圖示那一排的左邊 */

/* ── 只留原版（2026-10-31，老闆：「把你做的都先拿掉 只留原版的」）──
   有原版的圖時，自己加的都不顯示：上面那排（地名座標時間、攻略・討論、聲音、畫風、介面、選擇角色）只留安全／一般／戰鬥區域；
   選項視窗裡的畫風、介面；手機選單的介面；登入畫面的攻略連結。沒有原版的圖時照舊。
   攻略・討論留在選項（電腦的選項視窗、手機的選項鈕選單）：老闆要「討論版可以放在設定裡面」（2026-10-31） */
#ime, #log-thumb, #log-up, #log-dn { display: none; }
html.orig #topbar > :not(#zone-tag) { display: none !important; }
html.orig #btn-art-o, html.orig #win-opt [data-same="btn-skin"], html.orig #btn-skin-m, html.orig .login-guide { display: none !important; }

/* 設定（齒輪；電腦的選項視窗、手機的選單）：原版的選項視窗是主程式自己畫的，客戶端裡沒有它的圖（老闆 11-04：現在的樣子很突兀）。
   用原版的對話框（askbox：石紋底、金色繩框）撐開當框，選項是一行行的字，像原版的選單，不用自己畫的大按鈕；離開遊戲另外一行、紅字 */
html.orig #win-opt, html.orig #mmenu {
  background: none !important; border: 12px solid transparent !important; border-radius: 0 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  border-image: var(--ui-askbox) 12 fill stretch !important; padding: 2px 4px !important; gap: 0 !important; min-width: 168px;
}
html.orig #win-opt .win-head { background: none !important; border: 0 !important; padding: 0 6px 4px !important; color: #d8c8a0; font-size: 13px; }
html.orig #win-opt .opt-list { gap: 0 !important; padding: 0 !important; }
html.orig #win-opt .opt-list button, html.orig #mmenu button {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; min-height: 0 !important;
  padding: 8px 10px !important; text-align: left; font-size: 15px; color: #e8dcc0 !important; text-shadow: 0 1px 0 #000;
}
html.orig #win-opt .opt-list button:hover, html.orig #mmenu button:hover, html.orig #mmenu button:active { color: #ffe08a !important; background: rgba(255, 220, 140, 0.08) !important; }
html.orig #win-opt .opt-list button.guide-btn, html.orig #win-opt .opt-list [data-same="btn-guide"], html.orig #mmenu button.guide-btn { color: #f0c95a !important; }
html.orig #mmenu .mm-leave { margin-top: 4px; border-top: 1px solid rgba(200, 170, 110, 0.35) !important; color: #ff9a86 !important; }
html.orig #mmenu button + button:not(.mm-leave), html.orig #win-opt .opt-list button + button { border-top: 1px solid rgba(0, 0, 0, 0.35) !important; }