:root {
  --panel: rgba(24, 18, 12, 0.95);
  --panel-2: #3a2c1a;
  --border: #8a6d3b;
  --border-hi: #c9a24a;
  --gold: #e8c766;
  --text: #eadfc8;
  --dim: #a8987a;
  --font: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1b2a; color: var(--text); font-family: var(--font); font-size: 13px; user-select: none; -webkit-user-select: none; }   /* iPhone 只認 -webkit-（長按字會跳出拷貝選單） */
/* 輸入框照樣能打字、選字（iPhone 上面不能選的話，有的版本連打字都不行） */
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; }
/* 數字一律等高（Georgia 預設的數字有高有低，血量、防禦、經驗值排不齊） */
html { font-variant-numeric: lining-nums; }
/* iPhone 從主畫面打開、網頁比螢幕矮一截時（js/screen.js 量，--app-h 螢幕的高）：body 照螢幕的高度，
   position: fixed 的介面改以 body 為準（transform），排到螢幕最下面；body 本身 fixed，不會多出可以捲動的一截 */
html.app-fill body { position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h); transform: translateZ(0); }canvas { display: block; }
button { font-family: var(--font); font-size: 13px; color: var(--text); background: linear-gradient(#5e4a30, #36281a); border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.15); }
button:hover { background: linear-gradient(#745a38, #44321f); color: #fff; border-color: var(--border-hi); }
button.primary { background: linear-gradient(#9a7430, #5c4416); color: #fff3cf; border-color: var(--border-hi); }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.bad { color: #ff8a6b; }
.good { color: #9fe39f; }
.pad { padding: 10px; }
.pad-s { padding: 6px 12px 2px; }

/* 頂端 */
#topbar { position: fixed; top: 8px; right: 10px; display: flex; gap: 8px; align-items: center; }
#topbar > button { white-space: nowrap; flex: none; height: 28px; }   /* 一行寫完，不要被擠成兩行 */
#btn-sound { display: inline-flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; }
#btn-sound svg { display: block; }
#btn-sound.off { color: var(--dim); }
#btn-art { white-space: nowrap; }
/* 攻略・討論：用途和其他按鈕不同，金色凸顯，玩家才會注意到有討論版 */
button.guide-btn { background: linear-gradient(#a87e34, #5c4416); color: #fff3cf; border-color: var(--border-hi); font-weight: bold; }
button.guide-btn:hover { background: linear-gradient(#c49440, #6e521c); color: #fff; }
/* 有新消息（討論版的新文章、攻略的更新）：右上角紅點 */
button.guide-btn { position: relative; overflow: visible; white-space: nowrap; }
button.guide-btn.has-new::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b2e; border: 2px solid #1a120a; box-shadow: 0 0 6px rgba(255, 59, 46, 0.8); animation: guide-ping 2s ease-in-out infinite; }
html.mobile #mmenu button.guide-btn.has-new::after { top: 50%; right: 10px; margin-top: -5px; }   /* 選單裡：紅點在按鈕右邊 */
/* 攻略・討論收在 ☰ 選單裡：有新文章時 ☰ 也亮紅點 */
html.mobile #btn-menu { position: relative; overflow: visible; }
html.mobile #btn-menu.has-new::after { content: ''; position: absolute; top: -4px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b2e; border: 2px solid #1a120a; box-shadow: 0 0 6px rgba(255, 59, 46, 0.8); animation: guide-ping 2s ease-in-out infinite; }
@keyframes guide-ping { 50% { box-shadow: 0 0 0 4px rgba(255, 59, 46, 0.25), 0 0 6px rgba(255, 59, 46, 0.8); } }
#hud-zone { color: var(--gold); font-weight: bold; text-shadow: 0 1px 2px #000, 0 0 6px #000; background: rgba(0, 0, 0, 0.45); padding: 2px 8px; border-radius: 4px; }   /* 底色：雪地上也看得清楚 */
#hud-zone .clock { margin-left: 10px; color: var(--text); font-weight: normal; }
/* 所在的區域：電腦版在右下角、快捷列上面；手機在左上角地名下面 */
#zone-tag { position: fixed; right: 14px; bottom: calc(var(--hudh) + 8px); pointer-events: none; }
#zone-tag b { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); text-shadow: 0 1px 2px #000; }
#zone-tag .safety { color: #8fe08f; border-color: rgba(120, 220, 120, 0.5); }
#zone-tag .normal { color: #e8e0d0; }
#zone-tag .combat { color: #ff7a66; border-color: rgba(255, 110, 90, 0.6); }
#buffs { position: fixed; top: 8px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 55vw; }
/* 狀態圖示：一格一個圖示，下面是剩下的時間；不好的狀態紅框 */
.bicon { position: relative; width: 30px; height: 30px; border: 1px solid #6b5636; border-radius: 3px; background: #120d08; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.bicon img { display: block; width: 100%; height: 100%; }
.bicon b { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 14px; color: var(--gold); }
.bicon span { position: absolute; left: -2px; right: -2px; bottom: -2px; font-size: 10px; line-height: 11px; text-align: center; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; }
.bicon.bad { border-color: #c0483c; }
.bicon.dim img, .bicon.dim b { opacity: 0.15; }

/* 訊息 */
/* 對話框、聊天視窗裡的「討論版」（js/ui.js L.linkBoard）：底線，點了打開討論版；對話框不接觸控的介面也點得到 */
.board-link { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; pointer-events: auto; }
#log { position: fixed; left: 10px; bottom: 124px; width: 430px; max-width: calc(100vw - 20px); height: 150px; overflow-y: auto; padding: 6px 10px; background: linear-gradient(rgba(10, 8, 6, 0.55), rgba(10, 8, 6, 0.7)); border: 1px solid rgba(138, 109, 59, 0.4); border-radius: 4px; line-height: 1.55; text-shadow: 0 1px 1px #000; }
#chat-input { position: fixed; left: 10px; bottom: 94px; width: 430px; max-width: calc(100vw - 20px); padding: 4px 8px; background: rgba(10, 8, 6, 0.85); color: #f0e6d0; border: 1px solid #8a6d3b; border-radius: 4px; font: inherit; z-index: 30; }
#btn-chat { position: fixed; }
html.mobile #btn-chat { left: calc(6px + var(--sl)); bottom: calc(66px + var(--sb)); padding: 2px 10px; font-size: 12px; }
html.mobile #chat-input { left: calc(62px + var(--sl)); bottom: calc(64px + var(--sb)); width: min(380px, calc(100vw - 70px)); }
#chat-size { display: none; }   /* 對話框高度的按鈕：只有電腦的原版介面有（css/classic.css、orig.css） */
#log::-webkit-scrollbar { width: 6px; } #log::-webkit-scrollbar-thumb { background: #5a4630; }

/* 下方狀態列 */
#hud { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(#4a3a26, #241a10 40%, #18120a); border-top: 2px solid var(--border); box-shadow: 0 -2px 0 #1a120a, 0 -6px 16px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 16px; padding: 6px 14px 16px; }
.hud-left { width: 250px; display: flex; flex-direction: column; gap: 4px; }
.bar { position: relative; height: 17px; background: #0e0a06; border: 1px solid #6a5230; border-radius: 9px; overflow: hidden; box-shadow: inset 0 1px 3px #000; }
.bar .fill { position: absolute; inset: 0 auto 0 0; transition: width 0.15s; border-radius: 9px; }
.bar.hp .fill { background: linear-gradient(#f06a5a, #b02a1e 55%, #7a140c); }
.bar.hp .fill.poison { background: linear-gradient(#8ae06a, #3a9a2a 55%, #1a5a12); }
.bar.mp .fill { background: linear-gradient(#6a9af0, #2a50b0 55%, #142a70); }
.bar .lbl { position: absolute; left: 8px; top: 0; font-size: 11px; font-weight: bold; line-height: 17px; text-shadow: 0 1px 1px #000; }
.bar .val { position: absolute; right: 8px; top: 0; font-size: 11px; line-height: 17px; text-shadow: 0 1px 1px #000; }
.hud-info { display: flex; gap: 8px; font-size: 12px; white-space: nowrap; align-items: center; } .hud-info b { color: var(--gold); }
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b0, #e8c547 45%, #9a7a1a); box-shadow: 0 0 0 1px #5a4410; vertical-align: -2px; }
.weight-ico { display: inline-block; width: 11px; height: 11px; background: #8a8f98; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); margin-left: 4px; }
.warn { color: #ff8a6b !important; }
.hud-right { margin-left: auto; display: flex; gap: 6px; }
.exp { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #0e0a06; border-top: 1px solid #3a2c1a; }
.exp .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffe28a, #c9a227 60%, #7a5a10); }
.exp span { position: absolute; right: 8px; top: 0; font-size: 9px; line-height: 10px; text-shadow: 0 1px 1px #000; }

#hotbar { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid #4a3a26; border-radius: 4px; }
.hot { position: relative; width: 44px; height: 44px; background: radial-gradient(#2a2016, #120d08); border: 1px solid #6a5230; border-radius: 3px; cursor: pointer; }
.hot:hover { border-color: var(--border-hi); box-shadow: 0 0 6px rgba(232, 199, 102, 0.4); }
.hot .key { position: absolute; left: 3px; top: 1px; font-size: 10px; color: var(--dim); z-index: 2; text-shadow: 0 1px 1px #000; }
.hot .icon { position: absolute; inset: 3px; width: auto; height: auto; }

/* 圖示 */
.icon { position: relative; width: 38px; height: 38px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); pointer-events: none; }   /* 格子不是正方形（手機的快捷列）時圖示不變形 */
.icon.empty img { filter: grayscale(1) brightness(0.45); }
/* 祝福的圖示偏亮偏黃、詛咒的整個偏紅，字也一樣（uvl3.com 的台版清單） */
.icon.blessed img { filter: brightness(1.12) sepia(0.15); }
.icon.cursed img { filter: grayscale(1) sepia(1) saturate(3.2) hue-rotate(-48deg) brightness(0.72) contrast(1.1); }
.n-bless { color: #f4f2be !important; }
.n-curse { color: #ff3a3a !important; }
.icon .cnt { position: absolute; right: 2px; bottom: 0; font-size: 10px; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.icon .badge { position: absolute; left: 2px; top: 0; font-size: 10px; color: var(--gold); text-shadow: 0 1px 1px #000; }
.icon .ench { position: absolute; right: 2px; top: 0; font-size: 10px; color: #ffffff; text-shadow: 0 1px 1px #000; }   /* 強化值：原版是白色（老闆） */

/* 視窗 */
.win { position: fixed; background: var(--panel); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 0 0 1px #1a120a, 0 8px 24px rgba(0, 0, 0, 0.65); }
.win-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; background: linear-gradient(#5a4426, #34261a); color: var(--gold); font-weight: bold; border-bottom: 1px solid var(--border); border-radius: 5px 5px 0 0; letter-spacing: 2px; text-shadow: 0 1px 1px #000; }
.win-head .close { padding: 0 6px; background: none; border: none; box-shadow: none; }
#win-inv { right: 12px; bottom: 104px; width: 316px; }
#win-wh { right: 320px; bottom: 104px; width: 284px; }
#win-char { right: 320px; bottom: 104px; width: 250px; }
#win-spell { right: 320px; top: 50px; width: 270px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); }
#spell-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#win-party { right: 600px; top: 50px; width: 260px; }
/* 原版介面才有的按鈕（說明、選項、結束）；選項視窗 */
.cl-only { display: none; }
#win-opt { right: 16px; bottom: 214px; width: 196px; }
#win-opt .opt-list button { white-space: nowrap; }
#win-opt .opt-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
#win-trade { left: 16px; top: 50px; width: 300px; }   /* 原版：交易視窗在畫面左邊（客戶端說明 helptra），右邊是背包 */
html:not(.online) .online-only { display: none !important; }
/* 瞬間移動的記憶座標：點一下選取的那列（按兩下傳送、Delete 刪除；js/ui.js openTeleport） */
#tele-body .shop-row.sel { background: rgba(255, 215, 120, 0.14); outline: 1px solid rgba(255, 215, 120, 0.5); }
/* 電腦的快捷列：點一下選取的那格（按兩下、按滾輪才使用；原版介面另有圖，css/orig.css） */
html.pc .hot.sel { outline: 2px solid #ffd594; outline-offset: -2px; }
/* 背包裡按住 Shift 一起選的道具（js/ui.js multi） */
.slot.msel { outline: 2px solid #ffd76a; outline-offset: -2px; }
/* 魔法模式（Ctrl+X，js/main.js）：畫面左下角最後用的魔法 */
#magic-mode { position: fixed; left: 10px; bottom: 220px; z-index: 25; padding: 3px; line-height: 0; background: rgba(0, 0, 0, 0.55); border: 1px solid #c9a227; pointer-events: none; }
#magic-mode.hidden { display: none; }
/* 個人商店（2.21）關著時沒有擺攤的按鈕（js/ui.js 加 no-pshop） */
html.no-pshop #btn-stall, html.no-pshop #btn-stall-m, html.no-pshop [data-same="btn-stall"] { display: none !important; }
html:not(.is-elf) .elf-only { display: none !important; }
/* 詢問視窗：畫面中間，蓋在所有視窗（包括攻略）上面 */
#ask { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); }
#ask.hidden { display: none; }
.ask-box { width: min(340px, calc(100vw - 32px)); padding: 14px; background: var(--panel); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); }
#ask-text { margin: 0 0 10px; line-height: 1.6; white-space: pre-line; }
#ask-input { width: 100%; padding: 7px 10px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 16px; }
#ask-input.hidden, #ask-fields.hidden { display: none; }
#ask-fields label { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#ask-fields span { flex: none; color: var(--gold); }
#ask-fields input { flex: 1; min-width: 0; padding: 7px 10px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 16px; }
.ask-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.ask-picks button { padding: 8px 4px; }
#ask-ok.hidden { display: none; }
.ask-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ask-btns button { padding: 6px 18px; }
/* 擺攤：上面販賣 8 格、收購 8 格（格子下面是單價），宣傳文字＋開始擺攤，下面是背包的格子 */
/*   視窗高度有上限，東西多時背包那塊捲動。背包的東西拖到格子上；手指在背包直接滑是捲動、按住一下才拖 */
#win-stall { right: min(600px, calc(100vw - 368px)); top: 50px; width: 352px; display: flex; flex-direction: column; max-height: calc(100vh - 170px); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#win-stall.hidden { display: none; }
.stall-sec { flex: none; padding: 6px 10px 2px; color: var(--gold); font-size: 12px; }
.stall-grid { flex: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 0 8px; }
.scell { display: flex; flex-direction: column; align-items: center; min-width: 0; touch-action: none; }
.scell:not(.empty) { cursor: grab; }
.scell .slot { width: 100%; aspect-ratio: 1; height: auto; }
.scell.empty .slot { border-style: dashed; opacity: 0.6; }
.scell .pr { max-width: 100%; min-height: 14px; overflow: hidden; font-size: 10px; line-height: 14px; color: #ffe9a0; white-space: nowrap; }
.stall-go-row { flex: none; display: flex; gap: 6px; padding: 8px; }
#stall-title { flex: 1; min-width: 0; padding: 5px 8px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 4px; font: inherit; user-select: text; -webkit-user-select: text; }
#stall-title.hidden { display: none; }
.stall-go-row:has(#stall-title.hidden) { justify-content: center; }
#stall-title.hidden + #stall-go { min-width: 120px; }
#stall-title.need { border-color: #d05a4a; box-shadow: 0 0 6px rgba(208, 90, 74, 0.6); }
#stall-go { flex: none; }
#stall-bag-head { border-top: 1px solid #3a2c1a; margin-top: 4px; }
#stall-bag { flex: 1 1 auto; min-height: 48px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 3px; padding: 2px 8px 8px; align-content: start; }
#stall-bag .slot { width: 40px; height: 40px; cursor: grab; touch-action: pan-y; }
.drag-ghost { position: fixed; z-index: 1200; width: 40px; height: 40px; pointer-events: none; opacity: 0.85; }
#stall-bag .slot.on { opacity: 0.35; }   /* 已經放上去的 */
#win-board { left: 50%; top: 14%; transform: translateX(-50%); width: 360px; max-height: 70vh; overflow-y: auto; }
#win-board .shop-row { cursor: pointer; }
#win-letter { left: 50%; top: 14%; transform: translateX(-50%); width: 360px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; }
#win-letter input, #win-letter textarea { box-sizing: border-box; }
#win-auction { left: 50%; top: 12%; transform: translateX(-50%); width: 400px; max-height: 72vh; overflow-y: auto; }
#win-clanpick { left: 50%; top: 12%; transform: translateX(-50%); width: 320px; max-height: 72vh; overflow-y: auto; }
#win-emblem { left: 50%; top: 12%; transform: translateX(-50%); width: 300px; }
.emblem-box { display: flex; justify-content: center; padding: 10px; }
#emblem-edit { width: 256px; height: 192px; image-rendering: pixelated; border: 1px solid var(--border-hi); cursor: crosshair; touch-action: none; }
.emblem-tools { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; }
#emblem-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; flex: 1; }
#emblem-pal button { height: 20px; min-width: 0; padding: 0; border: 1px solid #000; }
#emblem-pal button.on { outline: 2px solid #ffe08a; outline-offset: 0; }
#emblem-color { width: 40px; height: 44px; padding: 0; border: 1px solid var(--border); background: none; }
#emblem-up { flex: 1; }
#win-trade .grid { min-height: 44px; }
#win-trade .grid > .dim { grid-column: 1 / -1; }
#party-body .bar.mini { height: 8px; margin-top: 3px; }
#win-shop, #win-learn { left: 12px; top: 50px; width: 350px; }
#shop-body, #learn-body { max-height: 460px; overflow-y: auto; }

/* 紙娃娃 */
.doll { display: flex; gap: 6px; padding: 8px 10px 4px; border-bottom: 1px solid #3a2c1a; background: radial-gradient(ellipse at 30% 60%, rgba(120, 90, 50, 0.25), transparent 70%); }
.doll-figure { position: relative; width: 110px; height: 150px; }
#doll-canvas { width: 110px; height: 150px; }
#doll-turn { position: absolute; left: 2px; bottom: 2px; padding: 0 6px; font-size: 12px; }
#doll-slots { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; align-content: start; }
.dslot { width: 44px; height: 44px; background: radial-gradient(#2a2016, #120d08); border: 1px solid #4a3a26; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #5a4a36; }
.dslot[data-uid] { border-color: #8a6d3b; cursor: pointer; }
.dslot .icon { width: 40px; height: 40px; }

.inv-gold { padding: 6px 12px; display: flex; align-items: center; gap: 6px; } .inv-gold b { color: var(--gold); }
.inv-w { margin-left: auto; }
#inv-trash { display: flex; padding: 3px; border: 1px solid #5a4a3a; border-radius: 3px; color: #b8a890; }
#inv-trash.over { color: #ff8a70; border-color: #c05040; background: #3a1a14; }
html.mobile #inv-trash { display: none; }
.grid { display: grid; grid-template-columns: repeat(6, 42px); gap: 3px; padding: 4px 10px 10px; max-height: 260px; overflow-y: auto; overflow-x: hidden; }
.slot { width: 42px; height: 42px; background: radial-gradient(#241a12, #100b06); border: 1px solid #34281a; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover { border-color: var(--border-hi); }
.slot.pick, .dslot.pick { border-color: #7fb2ff; box-shadow: 0 0 6px #7fb2ff; }
.slot.lit { box-shadow: inset 0 0 10px rgba(255, 210, 110, 0.65); }
#drag-gpic { position: fixed; z-index: 40; pointer-events: none; background-repeat: no-repeat; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
#drag-gpic.hidden { display: none; }
#drag-ghost { position: fixed; z-index: 40; width: 36px; height: 36px; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }

.tip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tip-head img { width: 28px; height: 28px; }

#char-body { padding: 10px 12px; }
.char-name { font-size: 15px; font-weight: bold; color: var(--gold); margin-bottom: 8px; }
.char-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-bottom: 10px; }
.char-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; padding: 8px 0; border-top: 1px solid #4a3a26; }
.stat-row { display: flex; justify-content: space-between; gap: 8px; }

.spell-row, .shop-row { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #2e2416; cursor: pointer; }
.spell-row:hover, .shop-row:hover { background: rgba(255, 220, 150, 0.06); }
.shop-row { cursor: default; } .shop-row .grow { flex: 1; } .shop-row .price { color: var(--gold); min-width: 46px; text-align: right; }
.shop-row.poor .price { color: #b55; }
.shop-row.cant b { color: var(--dim); }
.tabs { display: flex; gap: 4px; padding: 6px 8px 0; }
.tab.active { background: linear-gradient(#9a7430, #5c4416); color: #fff3cf; }
.help p { margin: 5px 0; line-height: 1.55; }

#tooltip { position: fixed; z-index: 30; max-width: 260px; padding: 7px 9px; background: rgba(12, 9, 6, 0.96); border: 1px solid var(--border); border-radius: 4px; line-height: 1.55; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
#tooltip b { color: var(--gold); } #tooltip .hint { color: #9fd3ff; }

/* 創角與死亡 */
#login, #select, #create { z-index: 40; }   /* 登入、選角、創角蓋住遊戲畫面上的聊天輸入框等（z-index 30） */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(30, 24, 14, 0.75), rgba(4, 6, 12, 0.92)); }
.panel { width: 360px; max-width: calc(100vw - 32px); padding: 20px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; text-align: center; box-shadow: 0 0 0 1px #1a120a, 0 10px 40px rgba(0, 0, 0, 0.7); }
.panel h1 { margin: 0 0 10px; font-size: 22px; color: var(--gold); letter-spacing: 6px; text-shadow: 0 2px 4px #000; }
.create-panel { width: 470px; }
/* 選角：等待刪除的角色變灰，下面寫還剩多久 */
.slot-col.deleting { position: relative; }
.slot-col.deleting canvas { filter: grayscale(1) brightness(0.65); }
.del-left { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: #ffb0a0; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* 結束視窗（重新開始、離開遊戲、取消）：死掉時取消可以關掉看屍體，點遊戲畫面再打開；背景只稍微變暗，看得到躺在地上的自己 */
#dead { background: rgba(4, 6, 12, 0.35); }
.choice { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; } .choice .gap { width: 14px; }
.choice button.active { background: linear-gradient(#9a7430, #5c4416); color: #fff3cf; border-color: var(--gold); }
.desc { min-height: 36px; margin: 6px 0; line-height: 1.5; }
.hpmp { margin: 4px 0 0; color: var(--gold); }
.create-main { display: flex; gap: 18px; align-items: center; justify-content: center; }
#create-preview { width: 120px; height: 130px; background: radial-gradient(ellipse at 50% 80%, rgba(140, 110, 60, 0.35), transparent 70%); }
#create-die { font-size: 34px; }
#create-die.spin { animation: spin 0.45s ease-out; }
@keyframes spin { from { transform: rotate(-360deg) scale(0.6); } to { transform: rotate(0) scale(1); } }
#create-stats { width: 160px; text-align: left; }
#create-stats .stat-row { padding: 2px 0; white-space: nowrap; }
.create-panel .choice button { white-space: nowrap; }   /* 視窗窄時「王族」不要折成兩行 */
#create-stats .stat-row.main span { color: var(--gold); }
#create-stats .stat-row { align-items: center; } #create-stats .stat-row span { margin-right: auto; }
#create-stats b { color: #fff; min-width: 20px; text-align: center; }
#create-stats .st-btn { width: 22px; height: 18px; padding: 0; font-size: 12px; line-height: 16px; } #create-stats .st-btn:disabled { opacity: 0.35; cursor: default; }
#create-stats .total { border-top: 1px solid #4a3a26; margin-top: 4px; padding-top: 4px; } #create-stats .total b { color: var(--gold); }
#create-name { margin: 8px 0 12px; width: 100%; padding: 6px 8px; font-family: var(--font); font-size: 14px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 3px; text-align: center; }
/* 登入（連線版） */
.login-panel { width: 300px; max-width: calc(100vw - 32px); }
/* 第一次執行的下載畫面（js/preload.js） */
#preload { z-index: 30; align-items: flex-end; justify-content: center; padding-bottom: 12vh; }   /* 手機的 .overlay 靠左排，這裡要置中 */
#preload.boot .first { display: none; }   /* 不是第一次：只有進度條 */
#preload { background: radial-gradient(ellipse at center, #1e180e, #040509) #040509; }   /* 不透明：後面的介面一點都不露出來（原版介面另外換成標誌，css/orig.css） */
.preload-box { width: 320px; max-width: calc(100vw - 32px); text-align: center; color: #f0e6cc; text-shadow: 0 1px 3px #000; }
.preload-box p { margin: 4px 0; }
.preload-track { height: 8px; margin: 10px 0 4px; background: rgba(0, 0, 0, 0.6); border: 1px solid #6a5a3a; }
#preload-bar { width: 0; height: 100%; background: linear-gradient(#e8c766, #a07a2a); transition: width 0.2s; }
.login-guide { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #3a2c1a; text-align: center; color: var(--dim); font-size: 13px; }
.login-guide a { color: var(--gold); font-weight: bold; }
.login-panel input { display: block; margin: 0 0 10px; width: 100%; padding: 7px 8px; font-family: var(--font); font-size: 15px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 3px; }
/* 登入畫面的提醒視窗（密碼錯誤、要不要建立新帳號；js/net.js loginAsk）：仿登入圖左邊公告欄——
   深褐色半透明底、細金框裡再一圈暗金線、楷書的字、金色的字當按鈕（像圖上的「登錄」「離開遊戲」）；蓋在登入圖上，後面壓暗 */
.login-panel { position: relative; }
.login-dlg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); }
.login-dlg.hidden { display: none; }
.login-dlg-box { width: min(270px, 92%); padding: 18px 18px 12px; text-align: center; color: #f4ecd8;
  font-family: "DFKai-SB", "BiauKai", "Kaiti TC", "STKaiti", "KaiTi", serif;
  background: rgba(30, 20, 11, 0.95); border: 1px solid #d2ab5f;
  box-shadow: inset 0 0 0 3px rgba(30, 20, 11, 0.95), inset 0 0 0 4px #7d5626, 0 0 0 1px #2a1a0a, 0 6px 24px rgba(0, 0, 0, 0.85); }
.login-dlg-box p { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-line; text-shadow: 0 1px 2px #000; }
/*   分隔線：兩邊淡掉的金線，中間一顆菱形（公告欄每段之間的花樣） */
.login-dlg-sep { position: relative; height: 9px; margin: 10px 8px 6px; background: linear-gradient(90deg, transparent, #b8893c 30%, #b8893c 70%, transparent) center / 100% 1px no-repeat; }
.login-dlg-sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: #e2c27a; box-shadow: 0 0 0 2px rgba(30, 20, 11, 0.95), 0 0 6px rgba(226, 194, 122, 0.6); }
.login-dlg-btns { display: flex; justify-content: center; gap: 32px; }
#login .login-dlg-btns button, #notice-dlg .login-dlg-btns button { min-width: 0; padding: 2px 8px; font: inherit; font-size: 18px; color: #f2d48a; background: none; border: 0; border-radius: 0; box-shadow: none;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(210, 171, 95, 0.35); cursor: pointer; }
#login .login-dlg-btns button:hover, #login .login-dlg-btns button:focus-visible,
#notice-dlg .login-dlg-btns button:hover, #notice-dlg .login-dlg-btns button:focus-visible { color: #fff4cc; text-shadow: 0 1px 2px #000, 0 0 10px rgba(255, 220, 140, 0.8); outline: none; }
#login .login-dlg-btns button.hidden, #notice-dlg .login-dlg-btns button.hidden { display: none; }
/* 其他畫面的提醒視窗（創角、選角、討論版……；js/ui.js L.notice）：和登入的同一個樣子，蓋住整個畫面（引導 #tut 之上） */
#notice-dlg { position: fixed; z-index: 4000; }
/* 新角色的討論版引導（js/tutorial.js）：整個畫面擋住，要點的地方挖亮一塊、金邊一閃一閃，旁邊的說明跟登入的提醒視窗同一套（深褐、金框） */
.learn-mats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.learn-mats button { padding: 1px 6px; font-size: 12px; }
.g-steps { margin: 6px 0 12px; padding-left: 1.6em; }
.g-steps li { margin: 6px 0; line-height: 1.65; }
#tut { position: fixed; inset: 0; z-index: 3000; touch-action: none; }
#tut.hidden { display: none; }
#tut .tut-hole { position: fixed; border-radius: 6px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.62); outline: 2px solid #f2d48a; outline-offset: 0; animation: tut-pulse 1.2s ease-in-out infinite; }
@keyframes tut-pulse { 50% { outline-color: rgba(242, 212, 138, 0.25); } }
@media (prefers-reduced-motion: reduce) { #tut .tut-hole { animation: none; } }
#tut .tut-tip { position: fixed; max-width: min(300px, calc(100vw - 16px)); padding: 10px 14px; text-align: center; color: #f4ecd8; font-size: 15px; line-height: 1.5;
  background: rgba(30, 20, 11, 0.96); border: 1px solid #d2ab5f; border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(30, 20, 11, 0.96), inset 0 0 0 4px #7d5626, 0 4px 16px rgba(0, 0, 0, 0.8); }
#tut .tut-tip p { margin: 0; text-shadow: 0 1px 2px #000; }
#tut .tut-next { margin-top: 8px; padding: 2px 10px; font: inherit; font-size: 16px; color: #f2d48a; background: none; border: 0; box-shadow: none; text-shadow: 0 1px 2px #000, 0 0 6px rgba(210, 171, 95, 0.4); cursor: pointer; }
#tut .tut-next.hidden { display: none; }
#tut .tut-tip.center { max-width: min(460px, calc(100vw - 16px)); padding: 18px 28px; font-size: 20px; }
#tut .tut-tip.nudge { animation: tut-nudge 0.35s; }
@keyframes tut-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* 選擇角色 */
/* 選擇角色（照原版）：黑色的畫面，上面一排打光的欄位（js/render.js L.drawSelectSlot），下面左邊是角色資料、右邊是按鈕 */
#select { background: #000; }
.select-panel { --sh: min(292px, 52vh); display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 16px); margin: auto; }
#select-slots { display: grid; grid-template-columns: repeat(6, calc(var(--sh) * 132 / 292)); gap: 3px; }
.slot-col { height: var(--sh); cursor: pointer; box-shadow: 0 0 0 1px #141414; }
.slot-col canvas { display: block; width: 100%; height: 100%; }
.select-bottom { display: flex; gap: 14px; align-items: stretch; width: 100%; max-width: 640px; }
#select-info { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 18px; padding: 10px 12px; background: linear-gradient(#0c0c0c, #050505); border: 1px solid #2a2622;
  font: 13px/1 "Times New Roman", "PMingLiU", "MingLiU", serif; text-align: left; }
#select-info.empty { visibility: hidden; }
#select-info > div { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 3px 6px; }
#select-info label { color: #f0d890; text-shadow: 0 0 4px rgba(255, 200, 90, 0.35); white-space: nowrap; line-height: 18px; }
#select-info label::after { content: "　:"; color: #c8c0b0; }
#select-info label.hp { color: #f0b0a8; }
#select-info label.mp { color: #a8c4f0; }
#select-info span { height: 18px; line-height: 18px; padding: 0 6px; background: #1a1a1a; border: 1px solid #2c2c2c; color: #f0ece0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font); font-size: 12px; }
#select-info i { grid-column: 1 / -1; height: 6px; }
.select-bottom .btns { display: flex; flex-direction: column; gap: 6px; margin: 0; width: 120px; }
.select-bottom .btns button { width: 100%; margin: 0; }
.btns button:disabled { opacity: 0.4; cursor: default; }
.btns { display: flex; gap: 10px; justify-content: center; }
.btns button { padding: 6px 18px; font-size: 14px; }

/* 電腦介面的視窗很窄時（手機介面在檔案最後面） */
@media (max-width: 760px) {
  html.pc:not(.cw) #hud { flex-wrap: wrap; height: auto; gap: 6px; padding-bottom: 16px; }
  html.pc:not(.cw) .hud-left { width: 100%; }
  html.pc:not(.cw) .hot { width: 36px; height: 36px; }
  html.pc:not(.cw) #log { bottom: 160px; height: 100px; }
  html.pc:not(.cw) #chat-input { bottom: 132px; }
  html.pc:not(.cw) #win-inv, html.pc:not(.cw) #win-char, html.pc:not(.cw) #win-spell, html.pc:not(.cw) #win-shop, html.pc:not(.cw) #win-learn, html.pc:not(.cw) #win-wh, html.pc:not(.cw) #win-party, html.pc:not(.cw) #win-trade, html.pc:not(.cw) #win-stall { left: 16px; right: 16px; width: auto; top: 50px; bottom: auto; }
}

/* NPC 對話、傳送、變身、地圖 */
#win-npc { left: 50%; top: 18%; transform: translateX(-50%); width: 400px; max-width: calc(100vw - 20px); }
#npc-text { margin: 0; line-height: 1.6; max-height: 56vh; overflow-y: auto; }
#npc-text p { margin: 0 0 8px; }
#npc-text p:last-child { margin-bottom: 0; }
#npc-text .shop-row { padding: 6px 2px; gap: 8px; }
#npc-text .shop-row button { padding: 4px 8px; }
.npc-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
#win-tele, #win-poly, #win-blank { left: 50%; top: 18%; transform: translateX(-50%); width: 340px; }
#win-pet { left: 50%; top: 22%; transform: translateX(-50%); width: 320px; }
#pet-body { line-height: 1.7; }
#pet-body .bar { margin: 2px 0 4px; }
#pet-cmds button.active { background: linear-gradient(#9a7430, #5c4416); color: #fff3cf; border-color: var(--gold); }
#tele-body, #poly-body, #blank-body { max-height: 320px; overflow-y: auto; }
/* 變身清單：依等級分段的名字格子，解除變身固定在最下面 */
#win-poly { width: 400px; }
#poly-body { display: flex; flex-direction: column; overflow: hidden; max-height: min(460px, 70vh); }
.poly-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 10px 8px; }
.poly-lv { color: var(--gold); font-size: 12px; margin: 8px 0 4px; padding-bottom: 2px; border-bottom: 1px solid #3a2c1a; }
.poly-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.poly-pick { padding: 5px 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poly-pick:disabled { opacity: 0.35; cursor: default; }
.poly-pick.now { border-color: var(--gold); color: #fff3cf; }
.poly-off { flex: none; padding: 8px 10px; border-top: 1px solid #3a2c1a; text-align: right; }
.poly-off button { color: #ffb4a0; }
.tele-foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #3a2c1a; }
.tele-foot input { flex: 1; min-width: 0; padding: 4px 6px; font-family: var(--font); color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 3px; }
#win-map { left: 50%; top: 50px; transform: translateX(-50%); }
.map-wrap { padding: 8px; max-width: 90vw; max-height: 72vh; overflow: auto; }
#map-canvas { image-rendering: pixelated; width: min(680px, 86vw); }

/* ───────── 手機介面（html.mobile；電腦介面不受影響）───────── */
/* --hudh：左上角狀態框（HP、MP、經驗值）的高度；視窗開在它下面，不會把它蓋住 */
/* --vt、--vb：瀏覽器的網址列、工具列蓋在網頁上的高度（js/screen.js 量 visualViewport），上下的東西避開它們 */
:root { --st: calc(env(safe-area-inset-top, 0px) + var(--vt, 0px)); --sr: env(safe-area-inset-right, 0px); --sb: calc(env(safe-area-inset-bottom, 0px) + var(--vb, 0px)); --sl: env(safe-area-inset-left, 0px); --hudh: 90px; }
/* 手機的原版介面貼齊螢幕下緣，不為 iPhone 的 Home 橫條留空（使用者 2026-11-01「為什麼不緊貼螢幕下緣」）：橫條只是一條線，畫在介面上 */
html.mobile.classic { --sb: var(--vb, 0px); }
/* 還沒刪掉重加主畫面圖示的 iPhone（舊的 black-translucent 狀態列）直拿時，介面下面那條畫不到的空白只填網頁的底色
   （使用者 2026-11-01 截圖量到 #0d1b2a 深藍）：改成介面最下緣石板的灰，看起來是介面延伸下去。body 自己有底色，別處看不到這個顏色 */
html.mobile.classic { background: #37373a; }
html:not(.mobile) .only-mobile { display: none !important; }
html.mobile .only-pc, html.mobile .kbd, html.mobile .hot .key { display: none !important; }
html.mobile { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 手機：視窗（魔法列表等）捲到頂再往下拉，不會變成瀏覽器的下拉重新整理 */
html.mobile, html.mobile body { overscroll-behavior: none; }
html.mobile * { overscroll-behavior: contain; }
html.mobile body { font-size: 12px; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* iPhone 不理會禁止縮放：連點兩下不放大（manipulation），輸入框的字至少 16px（小於 16px 時 Safari 一點輸入框就放大，而且不會縮回來） */
html.mobile, html.mobile body { touch-action: manipulation; }
html.mobile input, html.mobile textarea, html.mobile select { font-size: 16px !important; }
html.mobile button { touch-action: manipulation; }
html.mobile #game, html.mobile #hotbar, html.mobile #btn-pickup, html.mobile #btn-pk { touch-action: none; }

/* 狀態列拆開放在畫面四周，中間留給遊戲畫面 */
html.mobile #hud { position: fixed; inset: 0; height: auto; padding: 0; display: block; background: none; border: 0; box-shadow: none; pointer-events: none; }
html.mobile #hud > * { pointer-events: auto; }
html.mobile #hud > .hud-left { position: absolute; left: calc(6px + var(--sl)); top: calc(6px + var(--st)); width: 196px; gap: 3px; padding: 5px 7px; background: rgba(14, 10, 6, 0.62); border: 1px solid rgba(138, 109, 59, 0.55); border-radius: 6px; pointer-events: none; }
html.mobile .bar { height: 14px; }
html.mobile .bar .lbl, html.mobile .bar .val { font-size: 10px; line-height: 14px; }
html.mobile .hud-left .exp { position: relative; height: 11px; border: 1px solid #4a3a26; border-radius: 5px; overflow: hidden; }
html.mobile .hud-left .exp span { font-size: 9px; line-height: 10px; }
html.mobile .hud-info { font-size: 11px; gap: 5px; }
html.mobile .hud-right { position: absolute; right: calc(6px + var(--sr)); top: calc(6px + var(--st)); margin: 0; gap: 4px; }
html.mobile .hud-right button { width: 48px; height: 36px; padding: 0; }
/* 橫的：右上角一排（視窗、☰；攻略・討論在 ☰ 選單裡），選單往下開；撿取在右下角 */
html.mobile #mmenu { top: calc(48px + var(--st)); right: calc(6px + var(--sr)); }
html.mobile #btn-pickup { right: calc(14px + var(--sr)); bottom: calc(14px + var(--sb)); }
html.mobile #btn-pk { top: calc(48px + var(--st)); }
/* 地名在狀態框下面（右上角的按鈕一排很長，橫的時候放中間會被蓋住） */
html.mobile #topbar { top: calc(90px + var(--st)); left: calc(8px + var(--sl)); right: auto; pointer-events: none; }
html.mobile #topbar > button { display: none; }
html.mobile #zone-tag { position: static; align-self: flex-start; }
html.mobile #zone-tag b { font-size: 10px; padding: 1px 5px; }
html.mobile #hud-zone { font-size: 11px; text-align: left; white-space: nowrap; }
html.mobile #hud-zone .clock { display: block; margin: 1px 0 0; font-size: 10px; }
html.mobile #buffs { left: calc(6px + var(--sl)); top: calc(124px + var(--st)); max-width: 45vw; pointer-events: none; }
html.mobile .bicon { width: 26px; height: 26px; }
html.mobile #log { left: calc(6px + var(--sl)); bottom: calc(94px + var(--sb)); width: min(330px, 42vw); height: 72px; padding: 3px 6px; font-size: 12.5px; line-height: 1.35; overflow: hidden; pointer-events: none; background: linear-gradient(rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.5)); border: 0; }
html.mobile #hotbar { position: absolute; left: 50%; bottom: calc(10px + var(--sb)); transform: translateX(-50%); padding: 3px; background: rgba(0, 0, 0, 0.4); }
html.mobile .hot { width: 44px; height: 44px; }
html.mobile .hot:active { transform: scale(0.93); }
.hot.assign { border-color: #7fb2ff; box-shadow: 0 0 8px #7fb2ff; }

/* 手機的聊天視窗：快捷列上面，遊戲畫面還看得到；開著時畫面上的三行訊息欄收起來 */
#win-chat { position: fixed; z-index: 25; left: calc(6px + var(--sl)); right: calc(6px + var(--sr)); bottom: calc(100px + var(--sb)); height: 44vh;
  max-height: calc(100% - var(--hudh) - 108px - var(--st) - var(--sb)); min-height: 180px; display: flex; flex-direction: column;
  background: rgba(12, 9, 6, 0.9); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); }
#win-chat.hidden { display: none; }
html.chat-open #log, html.chat-open #chat-input { display: none !important; }
.chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0 6px; border-bottom: 1px solid #3a2c1a; }
.chat-tabs { display: flex; }
.chat-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: 6px 12px; color: var(--dim); font-size: 14px; }
.chat-tabs button.on { color: #fff3cf; border-bottom-color: var(--gold); }
#chat-close { width: 40px; height: 32px; padding: 0; background: none; border: 0; box-shadow: none; font-size: 16px; }
#chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px; font-size: 13px; line-height: 1.5; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#chat-list > div { padding: 1px 0; word-break: break-word; }
#chat-list .c-sys { color: #b8ab92; font-size: 12px; }
#chat-list [data-from] { cursor: pointer; }
#chat-list[data-tab="chat"] .c-sys, #chat-list[data-tab="sys"] .c-chat { display: none; }
#chat-new { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); padding: 3px 12px; border-radius: 12px; font-size: 12px; color: #fff3cf; background: rgba(90, 68, 38, 0.95); }
#chat-new.hidden { display: none; }
.chat-chans { flex: none; display: flex; gap: 4px; padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
.chat-chans::-webkit-scrollbar { display: none; }
.chat-chans button { flex: none; padding: 4px 9px; border-radius: 13px; font-size: 13px; }
.chat-chans button.on { color: #2a1e0a; background: var(--gold); border-color: var(--gold); }
.chat-row { flex: none; display: flex; gap: 6px; padding: 6px; }
.chat-row input { min-width: 0; height: 38px; padding: 0 10px; color: var(--text); background: #120d08; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
#chat-to { flex: 0 0 92px; }
#chat-text { flex: 1; }
#chat-go { flex: none; height: 38px; padding: 0 14px; }
#chat-unread { position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e0402e; color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #1a120a; }
#chat-unread.hidden { display: none; }
@media (orientation: landscape) {
  #win-chat { right: auto; width: min(440px, 52vw); bottom: calc(64px + var(--sb)); height: auto; top: calc(var(--hudh) + 34px + var(--st)); max-height: none; min-height: 0; }
}
/* ☰ 選單：不常用的功能；離開遊戲另外一排、紅字 */
#mmenu { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 6px; background: rgba(16, 12, 8, 0.96); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); }
#mmenu button { height: 42px; padding: 0 14px; text-align: left; font-size: 14px; }
#mmenu button.hidden { display: none; }
#mmenu .mm-leave { margin-top: 6px; color: #ffb0a0; border-color: #7a3a2a; }
#btn-pk-m.on { color: #fff; background: linear-gradient(#a8402e, #6a1e12); border-color: #ff9a80; }
#btn-menu.open { border-color: var(--gold); color: var(--gold); }
/* 撿取：附近有東西時才出現，顯示最近那個東西的圖 */
#btn-pickup { position: fixed; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 6px; border-radius: 22px; font-size: 14px; font-weight: bold; touch-action: none;
  background: linear-gradient(#5a4628, #33261a); border-color: var(--border-hi); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); animation: pick-in 0.18s ease-out; }
#btn-pickup img { width: 32px; height: 32px; }
#btn-pickup:active { transform: scale(0.94); }
@keyframes pick-in { from { opacity: 0; transform: translateY(6px); } }
/* 強制攻擊開著時：上方一個紅色的提醒，點了就關掉 */
#btn-pk { position: fixed; right: calc(6px + var(--sr)); height: 30px; padding: 0 14px; border-radius: 15px; font-size: 13px; font-weight: bold; color: #fff; background: linear-gradient(#b8442e, #6a1e12); border-color: #ff9a80; box-shadow: 0 0 10px rgba(255, 90, 60, 0.7); }
/* 選目標、選物品的提示：小小一條，不擋畫面 */
#mode-bar { position: fixed; left: 50%; top: calc(46px + var(--st)); transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 16px); padding: 2px 3px 2px 10px; font-size: 12px; color: #ffe066; white-space: nowrap; background: rgba(12, 9, 6, 0.72); border: 1px solid rgba(201, 162, 74, 0.5); border-radius: 14px; }
#mode-text { overflow: hidden; text-overflow: ellipsis; }
#mode-bar button { flex: none; padding: 1px 9px; border-radius: 11px; font-size: 12px; }

/* 視窗：左邊放角色、魔法、商店、倉庫，右邊放背包，其他置中 */
html.mobile .win { display: flex; flex-direction: column; max-height: calc(100% - var(--hudh) - 6px - var(--st) - var(--sb)); }
html.mobile .win-head { flex: none; padding: 3px 4px 3px 12px; }
html.mobile .win-head .close { width: 38px; height: 30px; font-size: 16px; }
html.mobile #char-body, html.mobile #spell-list, html.mobile #shop-body, html.mobile #learn-body, html.mobile #wh-grid, html.mobile #tele-body, html.mobile #poly-body, html.mobile #blank-body, html.mobile .help, html.mobile .map-wrap, html.mobile #npc-text { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
html.mobile #win-poly #poly-body { overflow: hidden; }
html.mobile #win-char, html.mobile #win-spell, html.mobile #win-shop, html.mobile #win-learn, html.mobile #win-wh, html.mobile #win-party, html.mobile #win-trade, html.mobile #win-stall { left: calc(6px + var(--sl)); right: auto; top: calc(var(--hudh) + var(--st)); bottom: auto; width: min(420px, calc(40vw - 9px)); transform: none; }
html.mobile #win-npc, html.mobile #win-tele, html.mobile #win-poly, html.mobile #win-blank, html.mobile #win-map, html.mobile #win-pet, html.mobile #win-board, html.mobile #win-letter, html.mobile #win-auction, html.mobile #win-emblem, html.mobile #win-clanpick { left: 50%; right: auto; top: calc(var(--hudh) + var(--st)); bottom: auto; transform: translateX(-50%); width: min(480px, calc(100vw - 12px)); }
html.mobile .map-wrap { max-width: none; }
html.mobile #map-canvas { width: 100%; }
html.mobile #tooltip { max-width: 240px; font-size: 11px; }
html.mobile .spell-row .hotset { margin-left: auto; padding: 5px 10px; }

/* 背包：橫向時紙娃娃在左、物品在右，下方是選取物品的說明與按鈕 */
html.mobile #win-inv { left: auto; right: calc(6px + var(--sr)); top: calc(6px + var(--st)); bottom: calc(6px + var(--sb)); width: min(560px, calc(60vw - 9px)); max-height: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "head head" "doll grid" "gold grid" "detail detail"; }
html.mobile #win-inv > .win-head { grid-area: head; }
html.mobile #win-inv > .doll { grid-area: doll; padding: 6px 8px 2px; border-bottom: 0; }
html.mobile #win-inv > .inv-gold { grid-area: gold; align-self: start; padding: 4px 10px; }
html.mobile #inv-grid { grid-area: grid; min-height: 0; max-height: none; align-content: start; grid-template-columns: repeat(auto-fill, 44px); padding: 6px 8px; border-left: 1px solid #3a2c1a; }
html.mobile #win-inv > .detail { grid-area: detail; }
html.mobile .doll-figure, html.mobile #doll-canvas { width: 88px; height: 120px; }
html.mobile #doll-slots { grid-template-columns: repeat(3, 40px); gap: 3px; }
html.mobile .dslot { width: 40px; height: 40px; }
html.mobile .dslot .icon { width: 36px; height: 36px; }
html.mobile .slot { width: 44px; height: 44px; }
html.mobile .slot.sel, html.mobile .dslot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(232, 199, 102, 0.55); }
html.mobile #wh-grid { grid-template-columns: repeat(auto-fill, 44px); }
html.mobile .win > .detail { flex: none; }
.detail { display: flex; gap: 8px; padding: 6px 8px 8px 10px; border-top: 1px solid #3a2c1a; min-height: 64px; }
.detail:empty { display: none; }   /* 沒選物品時不顯示 */
.detail .info { flex: 1; min-width: 0; max-height: 100px; overflow-y: auto; font-size: 11px; line-height: 1.45; }
.detail .info b { color: var(--gold); }
.detail .info .tip-head img { width: 24px; height: 24px; }
.detail .acts { display: grid; grid-template-columns: repeat(2, minmax(68px, auto)); gap: 4px; align-content: start; }
.detail .acts button { padding: 6px 8px; }
.detail .acts .danger { color: #ffb0a0; }

/* 手機的畫面（js/screen.js）：網址列擋住時的提醒、全螢幕、還原縮放 */
#screen-tip { position: fixed; left: 50%; top: calc(50px + var(--st)); transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 16px); padding: 4px 4px 4px 12px; color: var(--gold); background: rgba(12, 9, 6, 0.94); border: 1px solid var(--border-hi); border-radius: 16px; }
#screen-tip.hidden, #screen-tip button.hidden, #btn-full.hidden, #btn-unzoom.hidden { display: none; }
#btn-unzoom { position: fixed; left: 8px; top: 8px; z-index: 70; padding: 8px 16px; font-size: 16px; border-radius: 18px; }
#screen-tip button { flex: none; padding: 2px 10px; border-radius: 12px; }
#turn-tip { position: fixed; left: 50%; top: calc(8px + var(--st)); transform: translateX(-50%); z-index: 55; display: none; align-items: center; gap: 6px; padding: 3px 3px 3px 12px; font-size: 13px; color: var(--gold); background: rgba(12, 9, 6, 0.94); border: 1px solid var(--border-hi); border-radius: 16px; }
#turn-tip button { flex: none; padding: 2px 10px; border-radius: 12px; }
html.mobile #turn-tip:not(.hidden) { display: flex; }

/* 創角、死亡畫面：放不下時可以捲動 */
html.mobile .overlay { align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: calc(8px + var(--st)) calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl)); }
html.mobile .overlay > .panel { margin: auto; max-width: 100%; }

@media (orientation: landscape) {
  html.mobile .create-panel { width: 760px; padding: 12px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; grid-template-areas: "main h1" "main choice" "main desc" "hpmp bonus" "hpmp name" "hpmp btns"; }
  html.mobile .create-panel h1 { grid-area: h1; margin: 0; font-size: 19px; }
  html.mobile .create-panel .choice { grid-area: choice; margin: 4px 0; flex-wrap: wrap; }
  html.mobile #create-desc { grid-area: desc; min-height: 0; margin: 2px 0; }
  html.mobile .create-main { grid-area: main; }
  html.mobile #create-hpmp { grid-area: hpmp; align-self: start; }
  html.mobile #create-bonus { grid-area: bonus; margin: 4px 0; }
  html.mobile #create-name { grid-area: name; margin: 4px 0; }
  html.mobile .create-panel .btns { grid-area: btns; }
  /* 手機橫向的選擇角色：左邊三欄兩排的角色欄位，右邊角色資料與按鈕 */
  html.mobile .select-panel { --sh: 44vh; flex-direction: row; align-items: center; gap: 12px; }
  html.mobile #select-slots { grid-template-columns: repeat(3, calc(var(--sh) * 132 / 292)); }
  html.mobile .select-bottom { flex-direction: column; width: 330px; }
  html.mobile .select-bottom .btns { flex-direction: row; width: auto; }
}

/* 直向：上面狀態，下面快捷列與按鈕；背包在下半部，其他視窗在上半部 */
@media (orientation: portrait) {
  /* 視窗按鈕排在最下面一排（拇指點得到）；攻略・討論在 ☰ 選單裡 */
  html.mobile .hud-right { top: auto; left: calc(6px + var(--sl)); bottom: calc(6px + var(--sb)); display: flex; gap: 4px; }
  html.mobile .hud-right button { flex: 1; height: 40px; font-size: 14px; }
  html.mobile .hud-right #btn-menu { flex: 0 0 52px; font-size: 18px; }
  html.mobile #mmenu { top: auto; right: calc(6px + var(--sr)); bottom: calc(52px + var(--sb)); }
  html.mobile #btn-pickup { right: calc(10px + var(--sr)); bottom: calc(164px + var(--sb)); }
  html.mobile #btn-pk { top: calc(48px + var(--st)); }
  html.mobile #buffs { max-width: calc(100vw - 16px); }
  /* 底部由下往上：視窗按鈕 → 快捷列 → 訊息欄（左邊留給聊天按鈕），中間不留空 */
  html.mobile #log { left: calc(56px + var(--sl)); right: calc(6px + var(--sr)); width: auto; bottom: calc(100px + var(--sb)); height: calc(4.05em + 6px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px); mask-image: linear-gradient(to bottom, transparent 0, #000 9px); }   /* 三行；頂端淡出，舊的那行露出一點也看不到 */
  html.mobile #btn-chat { bottom: calc(100px + var(--sb)); }
  html.mobile #chat-input { bottom: calc(100px + var(--sb)); }
  html.mobile #hotbar { bottom: calc(52px + var(--sb)); gap: 3px; }
  html.mobile .hot { width: 40px; height: 40px; }
  html.mobile #mode-bar { top: auto; bottom: calc(170px + var(--sb)); }   /* 選目標的提示在拇指附近 */
  html.mobile #win-inv { left: calc(6px + var(--sl)); width: auto; top: auto; bottom: calc(52px + var(--sb)); height: 56%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "head" "doll" "gold" "grid" "detail"; }
  html.mobile #win-inv > .doll { justify-content: center; }
  html.mobile #doll-slots { flex: 1; max-width: 255px; grid-template-columns: repeat(auto-fill, 40px); align-content: center; }
  html.mobile #inv-grid { border-left: 0; border-top: 1px solid #3a2c1a; }
  html.mobile #win-char, html.mobile #win-spell, html.mobile #win-shop, html.mobile #win-learn, html.mobile #win-wh, html.mobile #win-party, html.mobile #win-trade, html.mobile #win-stall { right: calc(6px + var(--sr)); width: auto; max-height: calc(42% - 12px - var(--hudh) - var(--st)); }
  /* 魔法列表：最多佔畫面 70%（不蓋到最下面的視窗按鈕） */
  html.mobile #win-spell { max-height: min(70%, calc(100% - 64px - var(--hudh) - var(--st) - var(--sb))); }
  /* 擺攤：自己一個視窗（不開背包），從狀態框下面到視窗按鈕上面 */
  html.mobile #win-stall { max-height: calc(100% - 64px - var(--hudh) - var(--st) - var(--sb)); }
  html.mobile .create-panel { padding: 14px 12px; }
  html.mobile .create-main { gap: 8px; }
  html.mobile #create-preview { width: 96px; height: 104px; }
  html.mobile #create-stats { width: 148px; }
  html.mobile #create-die { font-size: 26px; }
  html.mobile .select-panel { --sh: min(calc((100vw - 24px) / 3 * 292 / 132), 30vh); }
  html.mobile #select-slots { grid-template-columns: repeat(3, calc(var(--sh) * 132 / 292)); }
  html.mobile .select-bottom { flex-direction: column; }
  html.mobile .select-bottom .btns { flex-direction: row; width: auto; }
}
/* 原版介面（電腦）才有的：左邊五列狀態、青銅龍框、對話框捲軸（css/classic.css） */
.cl-stat, .cl-frame, .cl-scroll { display: none; }