/* 原版介面（html.classic）：照 1.82 主程式的介面圖重畫——深灰的石紋、青銅與金色的邊，下方主介面中間上面一隻青銅石像鬼。
   用程式畫（SVG 雜訊與漸層），不用原圖。按上方（手機在 ☰ 選單）的「介面」切換，記在瀏覽器裡。
   材質電腦、手機都換；電腦另外照原版重排下方主介面：左邊狀態、中間對話、右邊快捷格與按鈕 */
html.classic {
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 0 0.64 0 0 0 0.5 -0.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stone-dk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.54 0 0 0 0 0.52 0 0 0 0.3 -0.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cl-stone: #3c3c40;
  --cl-dark: #222226;
  --cl-bronze: #9a7a44;
  --cl-gold: #d8b868;
  --cl-text: #e8e2d0;
}
/* ── 材質（電腦、手機都換）── */
html.pc.classic #hud { background: var(--stone), linear-gradient(#4a4a4e, #333336 45%, #262628); border-top: 3px solid var(--cl-bronze); box-shadow: 0 -1px 0 #1a1a1c, inset 0 1px 0 rgba(255, 240, 200, 0.18), 0 -6px 16px rgba(0, 0, 0, 0.55); }
/* 視窗：照原版的交易、倉庫視窗——外圈一道灰綠色的石框，裡面是深色的石板（不是淺灰），石框內緣一條金線 */
html.classic .win { background: var(--stone-dk) padding-box, linear-gradient(#2c302e, #1d201f) padding-box, var(--stone) border-box, linear-gradient(#7c827c, #555b57) border-box;
  border: 5px solid transparent; box-shadow: 0 0 0 1px #0a0b0a, inset 0 0 0 1px #b8954a, inset 0 0 0 2px #0c0d0c, 0 8px 24px rgba(0, 0, 0, 0.7); color: var(--cl-text); }
html.classic .win-head { background: var(--stone-dk), linear-gradient(#3c413e, #232725); color: var(--cl-gold); border-bottom: 1px solid #8a7038; text-shadow: 0 1px 1px #000; }
html.classic .panel { background: var(--stone-dk) padding-box, linear-gradient(#2c302e, #1d201f) padding-box, var(--stone) border-box, linear-gradient(#7c827c, #555b57) border-box;
  border: 5px solid transparent; box-shadow: 0 0 0 1px #0a0b0a, inset 0 0 0 1px #b8954a, inset 0 0 0 2px #0c0d0c, 0 8px 24px rgba(0, 0, 0, 0.7); color: var(--cl-text); }
html.classic button { background: var(--stone-dk), linear-gradient(#4a504c, #2c302e); border-color: #7a6a4a; color: var(--cl-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.45); }
html.classic button:hover { background: var(--stone-dk), linear-gradient(#5a605c, #383c3a); border-color: var(--cl-gold); color: #fff; }
html.classic button.primary, html.classic button.guide-btn { background: linear-gradient(#b08a3e, #6a4c18); border-color: var(--cl-gold); color: #fff6d8; }
html.classic .win-head .close { background: none; border: none; box-shadow: none; }
html.classic .bar { background: #0c0c0e; border: 1px solid var(--cl-bronze); border-radius: 2px; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #1a1a1c; }
html.classic .bar .fill { border-radius: 1px; }
/* 原版：體力在中間圖案的左邊，從左邊（外側）往中間扣；魔力在右邊，從右邊往中間扣 */
html.classic .bar.hp .fill { left: auto; right: 0; }
html.classic .hot { background: var(--stone), radial-gradient(#3a3a3e, #161618); border: 1px solid #6a6050; border-radius: 2px; box-shadow: inset 0 0 6px #000; }
html.classic .hot:hover { border-color: var(--cl-gold); }
html.classic #hotbar { background: rgba(0, 0, 0, 0.35); border: 1px solid #4a4640; border-radius: 2px; }
html.classic .exp { background: #0c0c0e; border-top: 1px solid #4a4640; }
html.classic #log, html.classic #chat-input { background: rgba(18, 18, 20, 0.78); border-color: #6a6050; border-radius: 2px; }
html.classic #mmenu, html.classic #win-chat { background: var(--stone), linear-gradient(#3e3e42, #26262a); border-color: var(--cl-bronze); }
html.classic .grid .slot, html.classic .icon { border-radius: 2px; }
/* 安全／一般／戰鬥區域（台版：狀態列上方右邊，沒有底框的明體字、黑邊；顏色照原版英文字圖 691、693、695 的色系） */
html.classic #zone-tag b { padding: 0; background: none; border: 0; border-radius: 0; font: bold 15px/1.1 "PMingLiU", "MingLiU", "Noto Serif TC", "Songti TC", serif; letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 3px #000; }
html.classic #zone-tag .safety { color: #d2daf6; }
html.classic #zone-tag .normal { color: #e8e4dc; }
html.classic #zone-tag .combat { color: #ffae6a; }
/* 圖示（電腦、手機共用）：狀態列的圓形圖示座、下面那排按鈕 */
html.classic .ci-ac { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8 L1 5 L1.5 10 L5 12 M15 8 L19 5 L18.5 10 L15 12' fill='%23c8ccd4' stroke='%23484c54' stroke-width='0.7'/%3E%3Cpath d='M10 2.5 L15 5 V10.5 Q15 15 10 17.5 Q5 15 5 10.5 V5 Z' fill='%23e4e8f0' stroke='%23484c54'/%3E%3Cpath d='M10 4.5 V15.5 M7 8 H13' stroke='%238a90a0' stroke-width='1.2'/%3E%3C/svg%3E"); }
html.classic .ci-mr { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 10 m0 -1.5 a1.5 1.5 0 1 1 -1.5 1.5 a3.5 3.5 0 1 1 3.5 3.5 a5.5 5.5 0 1 1 5.5 -5.5' stroke='%2370e080' stroke-width='1.8'/%3E%3Cpath d='M15 4 l1.5 -1.5 M4 15 l-1.5 1.5' stroke='%23c8ffd0' stroke-width='1.2'/%3E%3C/svg%3E"); }
html.classic .ci-wt { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 6 Q6 3 10 3 Q14 3 13 6 L16.5 16 Q16.5 18 14 18 H6 Q3.5 18 3.5 16 Z' fill='%23c03a28' stroke='%235a1008'/%3E%3Cpath d='M7 6.5 H13' stroke='%23e8c060' stroke-width='1.4'/%3E%3Cpath d='M6 10 Q7 15 9 16' stroke='%23ff9a80' stroke-width='1' fill='none' opacity='0.7'/%3E%3C/svg%3E"); }
html.classic .ci-food { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 12 Q2 6 9 5 Q16 4 17 10 Q18 15 11 16 Q4 17 3 12 Z' fill='%23b0743a' stroke='%234a2a10'/%3E%3Cpath d='M6 9 Q9 7 14 8 M5 12 Q9 10 15 11' stroke='%23e8b878' stroke-width='1' fill='none'/%3E%3C/svg%3E"); }
html.classic .ci-sun { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg stroke='%23ffc830' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 1.5 V4 M10 16 V18.5 M1.5 10 H4 M16 10 H18.5 M4 4 L5.8 5.8 M14.2 14.2 L16 16 M16 4 L14.2 5.8 M5.8 14.2 L4 16'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='4.5' fill='%23ffe070' stroke='%23e08a10'/%3E%3C/svg%3E"); }
html.classic .ci-moon { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13 3 A7.5 7.5 0 1 0 17 14 A6 6 0 1 1 13 3 Z' fill='%23e8ecf8' stroke='%238a90a8'/%3E%3C/svg%3E"); }
html.classic .hud-right button[data-win="win-inv"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 6 Q6 3 10 3 Q14 3 13 6 L16.5 16 Q16.5 18 14 18 H6 Q3.5 18 3.5 16 Z' fill='%238a3418' stroke='%233a1006'/%3E%3Cpath d='M7 6.5 H13' stroke='%23e8b040' stroke-width='1.4'/%3E%3C/svg%3E"); }
html.classic .hud-right button[data-win="win-char"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4.5' r='2.8' fill='%23483a8a'/%3E%3Cpath d='M5 19 L6 9 Q10 7 14 9 L15 19 H12 L11 13 H9 L8 19 Z M5 9 L3 15 L4.5 15.5 L6.5 10 M15 9 L17 15 L15.5 15.5 L13.5 10' fill='%23483a8a'/%3E%3C/svg%3E"); }
html.classic .hud-right button[data-win="win-spell"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 1.5 H12 V6 H17 V10 H12 V18.5 H8 V10 H3 V6 H8 Z' fill='%23386a3a' stroke='%231a3a1a' stroke-width='0.8'/%3E%3C/svg%3E"); }
html.classic .hud-right button[data-win="win-party"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='6.5' cy='5.5' r='2.5' fill='%232a4a3a'/%3E%3Ccircle cx='13.5' cy='5.5' r='2.5' fill='%232a4a3a'/%3E%3Cpath d='M1.5 17 Q1.5 9.5 6.5 9.5 Q10 9.5 10 13 Q10 9.5 13.5 9.5 Q18.5 9.5 18.5 17 Z' fill='%232a4a3a'/%3E%3C/svg%3E"); }
html.classic .hud-right #btn-trade { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a3a14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7 H16 M12.5 3.5 L16 7 L12.5 10.5 M17 13 H4 M7.5 9.5 L4 13 L7.5 16.5'/%3E%3C/svg%3E"); }
/* 說明：墨綠色的問號；選項：紅褐色的齒輪；結束：紫紅色的漩渦 */
html.classic .hud-right #btn-help { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 7 Q6 2.5 10.5 2.5 Q15 2.5 15 6.5 Q15 9 12 10.5 Q10.5 11.5 10.5 13.5' fill='none' stroke='%232a4a2a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='10.5' cy='17' r='1.9' fill='%232a4a2a'/%3E%3C/svg%3E"); }
html.classic .hud-right [data-win="win-opt"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%238a2a14'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M8.6 1 H11.4 L12 4.5 H8 Z M8.6 19 H11.4 L12 15.5 H8 Z M1 8.6 V11.4 L4.5 12 V8 Z M19 8.6 V11.4 L15.5 12 V8 Z M3.6 5.6 L5.6 3.6 L8 6.3 L6.3 8 Z M16.4 14.4 L14.4 16.4 L12 13.7 L13.7 12 Z M14.4 3.6 L16.4 5.6 L13.7 8 L12 6.3 Z M5.6 16.4 L3.6 14.4 L6.3 12 L8 13.7 Z'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='2.6' fill='%23e8d8a8'/%3E%3C/svg%3E"); }
html.classic .hud-right #btn-exit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236a2058' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 10 m0 -1.6 a1.6 1.6 0 1 1 -1.6 1.6 a3.6 3.6 0 1 1 3.6 3.6 a5.6 5.6 0 1 1 5.6 -5.6'/%3E%3Cpath d='M15.5 15.5 L18 18'/%3E%3C/svg%3E"); }
html.classic .hud-right #btn-stall { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 8 L5 3 H15 L18 8 Z' fill='%236a2a14'/%3E%3Cpath d='M4 8 V17 M16 8 V17' stroke='%236a2a14' stroke-width='1.6'/%3E%3Cpath d='M6 12 H14 V14 H6 Z' fill='%236a2a14'/%3E%3C/svg%3E"); }

/* 原版介面那套圖的左欄（left2.png，電腦、手機直拿）：善惡值一列（其他排法沒有）、晚上的時間列 */
.cl-law { display: none; }
.cl-law > span { position: relative; }
.cl-law.neutral::before, .cl-law.chaotic::before { content: ''; position: absolute; inset: 0; border-radius: 2px; mix-blend-mode: color; pointer-events: none; }
.cl-law.neutral::before { background: #8a8a8a; }
.cl-law.chaotic::before { background: #c02424; }
html.classic {
  --cl-night: linear-gradient(90deg, #0a0f2e, #141a46 55%, #3a3c78 82%, #a8a4d8);
  --cl-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cg fill='%23fff'%3E%3Cpath d='M6 2 L6.8 5.2 L10 6 L6.8 6.8 L6 10 L5.2 6.8 L2 6 L5.2 5.2Z'/%3E%3Ccircle cx='19' cy='9.5' r='.8'/%3E%3Ccircle cx='27' cy='3.5' r='.7'/%3E%3Cpath d='M38 5 L38.6 7.4 L41 8 L38.6 8.6 L38 11 L37.4 8.6 L35 8 L37.4 7.4Z'/%3E%3Ccircle cx='45' cy='3' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  --cl-crescent: radial-gradient(circle at 74% 30%, transparent 0 42%, #ffe48a 46%);
  --cl-moonico: radial-gradient(circle at 63% 36%, #10132a 0 28%, transparent 30%), radial-gradient(circle at 50% 50%, #eef0f6 0 36%, transparent 38%), radial-gradient(#262a40, #0a0b14 72%);
}

/* ── 手機：照原版的元素，排成手機拿得順的位置（直、橫都一樣的東西）──
   最下面一排：左邊狀態兩列（left2.png 的小圖示加數字），右邊原版那排按鈕（right.png）一顆接一顆；快捷列是金框；
   體力、魔力在青銅龍框裡。直的、橫的各自排位置（下面兩段）。
   --k：按鈕圖縮幾倍（原圖一顆 50.4 × 63），--bw、--bh：按鈕的寬、高（狀態兩列一樣高） */
html.mobile.classic { --k: 0.6667; --bw: calc(50.4px * var(--k)); --bh: calc(63px * var(--k)); --hb-w: 361px; --hb-b: 104px; }   /* --hb-w、--hb-b：龍框的寬、離底部的距離（橫的） */
html.mobile.classic .hud-left { display: contents; }
html.mobile.classic .hud-info, html.mobile.classic .exp { display: none; }
/* 狀態兩列：第一列 等級經驗、AC MR；第二列 負重、飽食、善惡、時間（天空條撐滿剩下的寬）。
   left2.png 的圓圖示縮成 18 像素（圖上 46 像素，0.3913 倍）；位置在直的、橫的兩段 */
html.mobile.classic .cl-stat { position: absolute; display: grid; grid-template-columns: minmax(43px, 1fr) minmax(43px, 1fr) minmax(55px, 1.3fr) minmax(28px, 1fr); grid-template-rows: 1fr 1fr; gap: 2px;
  top: auto; height: var(--bh); padding: 0; background: none; border: 0; box-shadow: none; pointer-events: none; }
html.mobile.classic .cl-row { display: flex; align-items: center; min-width: 0; gap: 1px; overflow: hidden; }
html.mobile.classic .cl-row > span, html.mobile.classic .cl-bar { position: relative; height: 18px; border-radius: 3px; background: linear-gradient(#1a1a1c, #0c0c0e); border: 1px solid #8a6a3a;
  box-shadow: inset 0 1px 2px #000; font: bold 10px/16px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 1px #000; }
html.mobile.classic .ci { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px #000; background: url("classic/hud/left2.webp") 0 0 / 126.4px 103.3px no-repeat; }
html.mobile.classic .ci-ac { background-position: -8.6px -30.1px; }
html.mobile.classic .ci-mr { background-position: -66.1px -30.1px; }
html.mobile.classic .ci-wt { background-position: -8.6px -49.7px; }
html.mobile.classic .ci-food { background-position: -66.1px -49.7px; }
html.mobile.classic #cl-sunico { background-position: -8.6px -86.5px; }
html.mobile.classic #cl-sunico.ci-moon { background: var(--cl-moonico); }
html.mobile.classic .cl-lv { grid-area: 1 / 1 / 2 / 3; justify-content: space-between; align-self: center; height: 18px; gap: 2px; padding: 0 3px; border-radius: 3px; background: linear-gradient(#1a1a1c, #0c0c0e);
  border: 1px solid #8a6a3a; font: bold 10px/16px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 1px #000; }
html.mobile.classic .cl-lv > span { all: unset; }
html.mobile.classic .cl-lv > span:first-child { color: #ffc070; }
html.mobile.classic .cl-acmr { grid-area: 1 / 3 / 2 / 5; }
html.mobile.classic .cl-acmr > span { flex: 1 1 0; min-width: 0; padding: 0 2px; text-align: right; }   /* AC、MR 一樣長 */
html.mobile.classic .cl-stat .cl-row:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
html.mobile.classic .cl-stat .cl-row:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
html.mobile.classic .cl-bar { flex: 1; min-width: 0; overflow: hidden; }
html.mobile.classic .cl-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: linear-gradient(#c87a3c, #8a4614 55%, #5a2a08); }
html.mobile.classic #cl-wt.warn { background: linear-gradient(#b05040, #6a2018); }
html.mobile.classic .cl-bar > span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 16px; }
/* 善惡：原版那一列的握手圖示當底圖，藍底（混沌紅、中立灰：.cl-law::before） */
html.mobile.classic .cl-law { grid-area: 2 / 3 / 3 / 4; position: relative; display: flex; justify-content: flex-end; align-self: center; height: 18px; padding: 0 3px 0 21px; border: 1px solid #8a6a3a; border-radius: 3px;
  font: bold 10px/16px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 1px #000;
  background: url("classic/hud/left2.webp") -8.6px -69.3px / 126.4px 103.3px no-repeat, linear-gradient(#24487c, #10284c); }
html.mobile.classic .cl-law > span { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; }
html.mobile.classic #cl-law-w { display: none; }
html.mobile.classic .cl-stat .cl-row:nth-child(5) { grid-area: 2 / 4 / 3 / 5; }
html.mobile.classic .cl-sky { height: 12px; border-radius: 2px; background: linear-gradient(90deg, #10142a, #3a3050 20%, #c87a4a 25%, #6a9ac8 33%, #8ab8e0 50%, #6a9ac8 67%, #c87a4a 75%, #3a3050 80%, #10142a); }
html.mobile.classic .cl-sky.night { background: var(--cl-stars) 0 0 / auto 100% repeat-x, var(--cl-night); }
html.mobile.classic #cl-sun { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(#fffbe0, #ffd040 50%, #e08010); box-shadow: 0 0 5px #ffd040; }
html.mobile.classic #cl-sun.moon { background: var(--cl-crescent); box-shadow: none; filter: drop-shadow(0 0 2px #ffe48a); }
/* 400 寬以下（直拿的 iPhone 一般尺寸）：圖示 16 像素（0.3478 倍），數字擠一點（100%、三位數的 MR 才放得下） */
@media (max-width: 400px) {
  html.mobile.classic .cl-bar > span { letter-spacing: -0.5px; }
  html.mobile.classic .cl-acmr > span { padding: 0 1px; letter-spacing: -0.5px; }
  html.mobile.classic .ci { width: 16px; height: 16px; background-size: 112.3px 91.8px; }
  html.mobile.classic .ci-ac { background-position: -7.6px -26.8px; }
  html.mobile.classic .ci-mr { background-position: -58.8px -26.8px; }
  html.mobile.classic .ci-wt { background-position: -7.6px -44.2px; }
  html.mobile.classic .ci-food { background-position: -58.8px -44.2px; }
  html.mobile.classic #cl-sunico { background-position: -7.6px -76.9px; }
  html.mobile.classic .cl-law { padding-left: 18px; background: url("classic/hud/left2.webp") -7.6px -61.6px / 112.3px 91.8px no-repeat, linear-gradient(#24487c, #10284c); }
}
/* 窄的手機（360 寬）：按鈕小一點（38 高），字 9 像素，時間條讓出寬度 */
@media (max-width: 380px) {
  html.mobile.classic { --k: 0.6032; }
  html.mobile.classic .cl-stat { grid-template-columns: minmax(42px, 1fr) minmax(42px, 1fr) minmax(49px, 1.3fr) minmax(20px, 1fr); }
  html.mobile.classic .cl-row > span, html.mobile.classic .cl-bar, html.mobile.classic .cl-lv, html.mobile.classic .cl-law { height: 16px; font-size: 9px; line-height: 14px; }
}

/* 按鈕：原版那排的圖（right.png 下緣，一顆 50.4 × 63，縮成 --k 倍），一顆接一顆；⚙ 開 ☰ 選單，結束在選單裡 */
html.mobile.classic .hud-right { position: absolute; top: auto; left: auto; width: calc(6 * var(--bw)); height: var(--bh); display: flex; gap: 0; margin: 0; padding: 0; }
html.mobile.classic .hud-right button[title], html.mobile.classic .hud-right #btn-menu { flex: none; width: var(--bw); height: var(--bh); padding: 0; font-size: 0; color: transparent; border: 0; border-radius: 3px; box-shadow: none; text-shadow: none;
  background: url("classic/hud/right.webp") calc((-10px - 56.03px * var(--i)) * var(--k)) calc(-264.1px * var(--k)) / calc(418px * var(--k)) calc(339px * var(--k)) no-repeat; }
html.mobile.classic .hud-right button[title] .kbd { display: none; }
html.mobile.classic .hud-right button:active { filter: brightness(0.8); }
html.mobile.classic #btn-menu.open { filter: brightness(0.8); box-shadow: inset 0 0 0 2px var(--cl-gold); }
html.mobile.classic #btn-help { display: block; order: 1; --i: 0; }
html.mobile.classic .hud-right [data-win="win-char"] { order: 2; --i: 1; }
html.mobile.classic .hud-right [data-win="win-spell"] { order: 3; --i: 2; }
html.mobile.classic .hud-right [data-win="win-inv"] { order: 4; --i: 3; }
html.mobile.classic .hud-right [data-win="win-party"] { order: 5; --i: 4; }
html.mobile.classic .hud-right #btn-menu { order: 6; --i: 5; }

/* 快捷列：金色的框，8 格一排 */
html.mobile.classic #hotbar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 2px; background: #0a0a0c; border: 2px solid #c8a050; border-radius: 2px; box-shadow: inset 0 0 0 1px #4a3410, 0 0 0 1px #000, 0 0 0 3px #6a4a18; }
html.mobile.classic .hot { width: auto; height: 42px; background: radial-gradient(#26262a, #0e0e10); border: 1px solid #6a5028; border-radius: 0; box-shadow: inset 0 0 6px #000; }
/* 設定快捷：格子亮起來（金色，一閃一閃），點一格放進去 */
html.mobile.classic .hot.assign { border-color: #ffe08a; animation: hot-assign 0.9s ease-in-out infinite alternate; }
@keyframes hot-assign { from { box-shadow: inset 0 0 6px rgba(255, 216, 96, 0.35), 0 0 2px rgba(255, 216, 96, 0.4); } to { box-shadow: inset 0 0 12px rgba(255, 216, 96, 0.85), 0 0 6px #ffd860; } }
/* 地名：只顯示安全／一般／戰鬥區域；地點、座標不顯示（原版沒有） */
html.mobile.classic #zone-tag { align-self: flex-end; }
html.mobile.classic #zone-tag b { font-size: 14px; padding: 0; }
html.mobile.classic #hud-zone { display: none; }
/* 狀態圖示（buff）：畫面最右上，靠右排 */
html.mobile.classic #buffs { left: auto; right: calc(4px + var(--sr)); top: calc(4px + var(--st)); max-width: calc(100vw - 180px); justify-content: flex-end; }
html.mobile.classic #btn-pk { top: calc(70px + var(--st)); }   /* PK 鈕：讓開右上的狀態圖示（排到兩列也不擋） */

/* 對話框一行整 17 像素（字 12.5，老闆：手機的字大一點）：框的高照整行算（js/main.js L.fitLog），捲到最下面時最上面那行不會只露出半行 */
html.mobile.classic #log { line-height: 17px; }
/* ── 手機橫拿：照電腦版的排法，貼著最下面、矮一點 ──
   左欄：狀態兩列、下面按鈕；中間：對話框（base.png，border-image 拉長時捲軸和輸入列不變形），上面青銅龍框裝體力、魔力；右欄：快捷鍵 4 × 2。
   對話框三段高度（右下角圖上的 ▼，js/main.js #chat-size）：中間往上長（--cx），龍框跟著往上，左右兩欄不動。
   --cl、--cr：中間離左右的距離（左右兩欄一樣寬，中間才置中）；--lp：下面石板的高 */
@media (orientation: landscape) {
  html.mobile.classic { --cx: 0px; --cl: calc(var(--sl) + 8px + 6 * var(--bw)); --cr: calc(var(--sr) + 8px + 6 * var(--bw)); --lp: calc(94px + var(--sb)); --hudh: calc(110px + var(--cx)); }
  html.mobile.classic.chat-2 { --cx: min(100px, calc(50vh - 110px)); }   /* 矮的手機（375 高）少長一點，地圖還看得到 */
  html.mobile.classic.chat-3 { --cx: min(200px, calc(100vh - 210px)); }
  /* 下面的石板（整排，點到不會變成點地面）、中間的對話框 */
  html.mobile.classic #hud::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lp); pointer-events: auto;
    background: var(--stone), linear-gradient(#3a3a3e, #26262a 45%, #1a1a1d); border-top: 2px solid #9a7a44; box-shadow: 0 -1px 0 #000, 0 -4px 10px rgba(0, 0, 0, 0.5); }
  html.mobile.classic #hud::after { content: ''; position: absolute; left: var(--cl); right: var(--cr); bottom: var(--sb); height: calc(66px + var(--cx)); box-sizing: border-box; pointer-events: auto;
    border-style: solid; border-width: 20.5px 19.2px 34px 22.4px; border-image: url("classic/hud/base.webp") 64 60 106 70 fill / 20.5px 19.2px 34px 22.4px stretch round; }
  /* 左欄：狀態兩列在上、按鈕在下 */
  html.mobile.classic .cl-stat { left: calc(4px + var(--sl)); right: auto; bottom: calc(var(--sb) + 48px); width: calc(6 * var(--bw)); z-index: 1; }
  html.mobile.classic .hud-right { left: calc(4px + var(--sl)); right: auto; bottom: calc(var(--sb) + 3px); z-index: 1; }
  /* 右欄：快捷鍵 4 × 2（1～4 上排、5～8 下排，和電腦一樣） */
  html.mobile.classic #hotbar { left: auto; right: calc(4px + var(--sr)); bottom: calc(var(--sb) + 2px); width: calc(6 * var(--bw)); transform: none; grid-template-columns: repeat(4, 1fr); z-index: 1; }
  html.mobile.classic .hot { height: 40px; }
  /* 青銅龍框：對話框正上面（電腦版同一套圖，縮成 40 高），兩端的龍、龍頭 */
  html.mobile.classic .cl-frame { display: block; position: absolute; left: var(--cl); right: var(--cr); width: auto; transform: none; bottom: calc(var(--sb) + 64px + var(--cx)); height: 40px; border: 0; box-shadow: none; pointer-events: none; z-index: 1;
    background: url("classic/hud/col-l.png") 0 0 / 1px 100% repeat-x; }
  html.mobile.classic .cl-frame i { position: absolute; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
  html.mobile.classic .cl-rail { left: 50%; right: 0; top: 0; height: 100%; background: url("classic/hud/col-r.png") 0 0 / 1px 100% repeat-x !important; }
  html.mobile.classic .cl-end, html.mobile.classic .cl-end.r { left: -9px; right: auto; top: 0; width: 55px; height: 40px; transform: none; background-image: url("classic/hud/lend.webp"); z-index: 3; }
  html.mobile.classic .cl-end.r { left: auto; right: -9px; background-image: url("classic/hud/rend.webp"); }
  html.mobile.classic .cl-head { left: 50%; top: 0; width: 67px; height: 48px; transform: translateX(-50%); background-image: url("classic/hud/head.webp"); z-index: 3; }
  html.mobile.classic .bar { position: absolute; bottom: calc(var(--sb) + 66px + var(--cx)); height: 13px; border: 0; border-radius: 3px; background: linear-gradient(#1a1012, #0c0809); box-shadow: inset 0 2px 4px #000; z-index: 2; pointer-events: none; }
  html.mobile.classic .bar.hp { left: calc(var(--cl) + 20px); right: calc(50% + 24px); }
  html.mobile.classic .bar.mp { left: calc(50% + 24px); right: calc(var(--cr) + 20px); background: linear-gradient(#0e1018, #08090e); }
  html.mobile.classic .bar .fill { border-radius: 3px; }
  html.mobile.classic .bar.hp .fill { background: linear-gradient(#f0606a, #b8141e 40%, #6a0408); box-shadow: inset 0 2px 0 rgba(255, 200, 200, 0.45); }
  html.mobile.classic .bar.mp .fill { background: linear-gradient(#70a8f8, #1e56c0 40%, #0a2468); box-shadow: inset 0 2px 0 rgba(200, 220, 255, 0.45); }
  html.mobile.classic .bar .lbl { display: none; }
  html.mobile.classic .bar .val { left: 0; right: 0; text-align: center; font: 11px/13px Georgia, "Times New Roman", serif; color: #f8f0e4; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
  html.mobile.classic .bar.hp .val::before { content: 'HP:'; }
  html.mobile.classic .bar.mp .val::before { content: 'MP:'; }
  /* 對話框：文字在圖上的黑板裡（右邊是圖上的捲軸）；下面那條（圖上的輸入列）點了開聊天視窗；右下角的 ▼ 換高度 */
  html.mobile.classic #log { z-index: 2; left: calc(var(--cl) + 9px); right: calc(var(--cr) + 21px); width: auto; bottom: calc(var(--sb) + 23px); height: calc(38px + var(--cx)); padding: 2px 4px;
    background: none; border: 0; -webkit-mask-image: none; mask-image: none; color: #f4f0e4;
    pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }   /* 手指上下滑看之前的訊息 */
  html.mobile.classic #log::-webkit-scrollbar { display: none; }
  html.mobile.classic #btn-chat { z-index: 2; left: var(--cl); right: calc(var(--cr) + 26px); bottom: var(--sb); height: 21px; padding: 0; font-size: 0; color: transparent; background: none; border: 0; box-shadow: none; }
  html.mobile.classic #chat-input { bottom: var(--sb); }
  html.mobile.classic #chat-unread { top: -4px; right: auto; left: 20px; }
  html.mobile.classic #chat-size { display: block; position: absolute; z-index: 3; right: var(--cr); bottom: var(--sb); width: 26px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html.mobile.classic #chat-size:active { background: rgba(255, 240, 200, 0.18); }
  /* 地名在快捷鍵上面靠右 */
  html.mobile.classic #topbar { top: auto; left: auto; right: calc(8px + var(--sr)); bottom: calc(var(--lp) + 4px); align-items: flex-end; }
  /* 其他東西讓開下面那一塊：選單在按鈕上面（左邊） */
  html.mobile.classic #mmenu { top: auto; left: calc(4px + var(--sl)); right: auto; bottom: calc(var(--lp) + 4px); }
  html.mobile.classic #btn-pickup { right: calc(14px + var(--sr)); bottom: calc(var(--lp) + 40px); }
  html.mobile.classic #mode-bar { bottom: calc(var(--lp) + 50px + var(--cx)); }
  html.mobile.classic .win { z-index: 5; }
}
/* ── 手機直拿：用電腦版同一套原版介面圖（css/classic/hud/）排成直的 ──
   最下面一排：左邊是狀態兩列（地圖上面不擋），右邊是按鈕 →
   快捷列 8 格 → 對話框（base.png，點下面那條開聊天）→ 青銅龍框（兩端的龍、龍頭），框裡是體力、魔力。
   --pb：最下面離畫面底；--cb：對話框離畫面底；--ch：對話框的高 */
@media (orientation: portrait) {
  html.mobile.classic { --f: 0.766; --hudh: 136px; --pb: calc(4px + var(--sb)); --cb: calc(var(--pb) + var(--bh) + 54px); --ch: 84px; }
  /* 下面整塊的底：對話框的圖在上，石板在下；點到底板不會變成點地面 */
  html.mobile.classic #hud::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cb) + var(--ch)); pointer-events: auto;
    background: url("classic/hud/base.webp") top / 100% var(--ch) no-repeat, var(--stone), linear-gradient(#2c2c30, #1a1a1d); }
  /* 狀態兩列：左下，按鈕左邊 */
  html.mobile.classic .cl-stat { left: calc(4px + var(--sl)); right: calc(7px + var(--sr) + 6 * var(--bw)); bottom: var(--pb); width: auto; }
  html.mobile.classic .hud-right { right: calc(4px + var(--sr)); bottom: var(--pb); }
  /* 青銅龍框上面靠右：安全／一般／戰鬥區域（魔力上面） */
  html.mobile.classic #topbar { top: auto; bottom: calc(var(--cb) + var(--ch) + 50px); left: calc(8px + var(--sl)); right: calc(8px + var(--sr)); justify-content: flex-end; align-items: flex-end; }

  /* 青銅龍框：電腦版的圖縮成 0.62 倍，貼在對話框上緣；兩端的龍、龍頭凸出去 */
  html.mobile.classic .cl-frame { display: block; position: absolute; left: 0; right: 0; width: auto; transform: none; bottom: calc(var(--cb) + var(--ch) - 2px); height: 52px; border: 0; box-shadow: none; pointer-events: none;
    background: url("classic/hud/col-l.png") 0 0 / 1px 100% repeat-x; }
  html.mobile.classic .cl-frame i { position: absolute; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
  html.mobile.classic .cl-rail { left: 50%; right: 0; top: 0; height: 100%; background: url("classic/hud/col-r.png") 0 0 / 1px 100% repeat-x !important; }
  html.mobile.classic .cl-end, html.mobile.classic .cl-end.r { left: -12px; right: auto; top: 0; width: 71px; height: 52px; transform: none; background-image: url("classic/hud/lend.webp"); z-index: 3; }
  html.mobile.classic .cl-end.r { left: auto; right: -12px; background-image: url("classic/hud/rend.webp"); }
  html.mobile.classic .cl-head { left: 50%; top: 0; width: 87px; height: 62px; transform: translateX(-50%); background-image: url("classic/hud/head.webp"); z-index: 3; }
  html.mobile.classic .bar { position: absolute; bottom: calc(var(--cb) + var(--ch) + 1px); height: 16px; border: 0; border-radius: 3px; background: linear-gradient(#1a1012, #0c0809); box-shadow: inset 0 2px 4px #000; z-index: 2; pointer-events: none; }
  html.mobile.classic .bar.hp { left: 25px; right: calc(50% + 29px); }
  html.mobile.classic .bar.mp { left: calc(50% + 29px); right: 25px; background: linear-gradient(#0e1018, #08090e); }
  html.mobile.classic .bar .fill { border-radius: 3px; }
  html.mobile.classic .bar.hp .fill { background: linear-gradient(#f0606a, #b8141e 40%, #6a0408); box-shadow: inset 0 2px 0 rgba(255, 200, 200, 0.45); }
  html.mobile.classic .bar.mp .fill { background: linear-gradient(#70a8f8, #1e56c0 40%, #0a2468); box-shadow: inset 0 2px 0 rgba(200, 220, 255, 0.45); }
  html.mobile.classic .bar .lbl { display: none; }
  html.mobile.classic .bar .val { left: 0; right: 0; text-align: center; font: 11px/16px Georgia, "Times New Roman", serif; color: #f8f0e4; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
  html.mobile.classic .bar.hp .val::before { content: 'HP:'; }
  html.mobile.classic .bar.mp .val::before { content: 'MP:'; }

  /* 對話框：文字在圖上的黑板裡（右邊是圖上的捲軸）；下面那條（圖上的輸入列）點了開聊天視窗 */
  html.mobile.classic #log { z-index: 2; left: calc(8px + var(--sl)); right: calc(24px + var(--sr)); width: auto; bottom: calc(var(--cb) + 23px); height: 55px; padding: 2px 4px;
    background: none; border: 0; -webkit-mask-image: none; mask-image: none; color: #f4f0e4; }
  html.mobile.classic #btn-chat { z-index: 2; left: 0; right: 22px; bottom: calc(var(--cb) + 2px); height: 20px; padding: 0; font-size: 0; color: transparent; background: none; border: 0; box-shadow: none; }
  html.mobile.classic #chat-input { bottom: calc(var(--cb) + 2px); }
  html.mobile.classic #chat-unread { top: -4px; right: auto; left: 20px; }
  html.mobile.classic .win { z-index: 5; }   /* 視窗蓋在對話框的字上面 */

  /* 快捷列：8 格一排（下面是狀態兩列、按鈕） */
  html.mobile.classic #hotbar { left: calc(4px + var(--sl)); right: calc(4px + var(--sr)); bottom: calc(var(--pb) + var(--bh) + 4px); transform: none; }

  /* 其他東西讓開下面那一塊 */
  html.mobile.classic #mmenu { bottom: calc(var(--pb) + var(--bh) + 6px); }
  html.mobile.classic #btn-pickup { bottom: calc(var(--cb) + var(--ch) + 56px); }
  html.mobile.classic #mode-bar { bottom: calc(var(--cb) + var(--ch) + 60px); }
  html.mobile.classic #win-inv { bottom: calc(var(--pb) + var(--bh) + 6px); }
  html.mobile.classic #win-chat { bottom: calc(var(--cb) + 2px); }
}
/* ── 電腦：照原版 1.82 主程式的主介面重排（原版 640 寬，這裡放大約 1.5 倍；中間的對話框隨畫面拉寬）──
   左：五列狀態（等級與經驗值｜防禦、魔法防禦｜負重｜飽食度｜時間），每列左邊一個圓形的圖示座
   中：對話框，上緣是青銅龍框（兩股銅索的橫桿、兩端抬頭的小龍、中間的龍頭），龍框下一條黑槽放體力（紅）、魔力（藍），右邊一條捲軸
   右：快捷格 4×2（金色的框），下面一排米黃色小方塊的按鈕 */
/* 電腦的原版主介面：html.cw（js/main.js：視窗 761 寬以上，或原版的圖時任何寬度） */
  html.pc.classic.cw { --cl-l: 172px; --cl-r: 226px; }
  html.pc.classic.cw #hud { height: 156px; padding: 0; display: block; overflow: visible; border-top: none; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.6);
    background: var(--stone), linear-gradient(#2c2c30, #1a1a1d); }
  /* 對話框的石板：比兩邊亮一點的灰石，四邊一道青銅的細框 */
  html.pc.classic.cw #hud::before { content: ''; position: absolute; left: var(--cl-l); right: var(--cl-r); top: 0; bottom: 0; pointer-events: none;
    background: var(--stone), linear-gradient(#56565a, #444448 60%, #3a3a3e); box-shadow: inset 0 0 0 1px #7a6440, inset 0 0 0 2px #1a1a1c, inset 0 0 14px rgba(0, 0, 0, 0.55); }
  html.pc.classic.cw .hud-left { display: contents; }
  html.pc.classic.cw .hud-info, html.pc.classic.cw .exp { display: none; }

  /* ── 青銅龍框 ── */
  html.pc.classic.cw .cl-frame { display: block; position: absolute; left: calc(var(--cl-l) - 8px); right: calc(var(--cl-r) - 8px); top: -40px; height: 40px; pointer-events: none;
    background: linear-gradient(#18181a, #0a0a0c); box-shadow: inset 0 -1px 0 #7a6440, inset 0 -2px 0 #1a1a1c; border-left: 2px solid #4a3a22; border-right: 2px solid #4a3a22; }
  html.pc.classic.cw .cl-frame i { position: absolute; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
  /* 龍頭、兩端的龍、金色橫桿：使用者給的圖切下來的。比例照原圖的血條：原圖血條約 84px 高、我們 20px → 縮成 0.24 倍；
     橫桿就是血條的上框，龍頭兩根金柱的距離對上體力、魔力中間的空隙 */
  /* 照原圖的相對位置：橫桿就是介面的上框，血條嵌在對話框裡最上面一條；只有龍頭、兩端的龍凸出介面上緣 */
  html.pc.classic.cw .cl-frame { top: 0; height: 26px; }
  html.pc.classic.cw .cl-rail { left: 30px; right: 30px; top: 0; height: 6px; background: url("classic/rail.png") 0 0 / 4px 6px repeat-x !important; }
  /* 兩端的小龍整隻在對話框的範圍裡（再往外會被左右兩欄蓋住），血條從牠的金柱後面開始 */
  html.pc.classic.cw .cl-end { left: 8px; top: -18px; width: 103px; height: 42px; background-image: url("classic/dragon-end.png"); z-index: 3; }
  html.pc.classic.cw .cl-end.r { left: auto; right: 8px; transform: scaleX(-1); }
  html.pc.classic.cw .cl-head { left: 50%; top: -19px; width: 91px; height: 53px; transform: translateX(-50%); background-image: url("classic/dragon-head.png"); }

  /* 體力、魔力：龍框下面的黑槽，左紅右藍，龍頭在中間 */
  html.pc.classic.cw .bar { position: absolute; top: 6px; height: 20px; border-radius: 2px; border: 1px solid #5a4a30; background: #08080a; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #000; z-index: 2; }
  /* 從對話框的正中間（左右兩欄寬度不同，不是畫面的正中間）往兩邊分，紅藍一樣長 */
  html.pc.classic.cw .bar.hp { left: calc(var(--cl-l) + 26px); right: calc(50% + (var(--cl-r) - var(--cl-l)) / 2 + 31px); }
  html.pc.classic.cw .bar.mp { left: calc(50% + (var(--cl-l) - var(--cl-r)) / 2 + 31px); right: calc(var(--cl-r) + 26px); }
  html.pc.classic.cw .bar .fill { border-radius: 1px; }
  html.pc.classic.cw .bar.hp .fill { background: linear-gradient(#c8463a, #8a1c14 55%, #5a0c08); }
  html.pc.classic.cw .bar.mp .fill { background: linear-gradient(#7a86b0, #4a5482 55%, #2c3256); }
  html.pc.classic.cw .bar .lbl { display: none; }
  html.pc.classic.cw .bar .val { left: 0; right: 0; text-align: center; font: 12px/20px "Lucida Console", Consolas, monospace; letter-spacing: 0.5px; color: #f4ecd8; }
  html.pc.classic.cw .bar.hp .val::before { content: 'HP:'; }
  html.pc.classic.cw .bar.mp .val::before { content: 'MP:'; }
  html.pc.classic.cw .cl-frame ~ .hud-right, html.pc.classic.cw .cl-head { z-index: 3; }

  /* ── 左邊的五列狀態 ── */
  html.pc.classic.cw .cl-stat { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 4px; top: 5px; width: calc(var(--cl-l) - 10px); }
  html.pc.classic.cw .cl-row { display: flex; align-items: center; gap: 3px; height: 26px; }
  html.pc.classic.cw .cl-row > span, html.pc.classic.cw .cl-bar { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(#1a1a1c, #0c0c0e); border: 1px solid #8a6a3a;
    box-shadow: inset 0 1px 3px #000, 0 0 0 1px #000, inset 0 -1px 0 rgba(255, 230, 180, 0.08); font: 12px/22px "Lucida Console", Consolas, monospace; color: #f0e8d4; text-shadow: 0 1px 1px #000; }
  html.pc.classic.cw .cl-lv { justify-content: space-between; height: 26px; padding: 0 10px; border-radius: 13px; background: linear-gradient(#1a1a1c, #0c0c0e); border: 1px solid #8a6a3a; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #000;
    font: 12px/24px "Lucida Console", Consolas, monospace; color: #f0e8d4; }
  html.pc.classic.cw .cl-lv > span { all: unset; }
  html.pc.classic.cw .cl-acmr > span { flex: 1; text-align: right; padding: 0 8px; }
  html.pc.classic.cw .cl-bar { flex: 1; overflow: hidden; }
  html.pc.classic.cw .cl-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: linear-gradient(#7a6a48, #4a3e28); transition: width 0.3s; }
  html.pc.classic.cw #cl-wt.warn { background: linear-gradient(#b05040, #6a2018); }
  html.pc.classic.cw #cl-food { background: linear-gradient(#8a7a3a, #54461c); }
  html.pc.classic.cw .cl-bar > span { position: absolute; inset: 0; text-align: center; font-size: 11px; }
  /* 時間：天色從夜、清晨、白天到傍晚，太陽（夜裡是月亮）從左走到右 */
  html.pc.classic.cw .cl-sky { background: linear-gradient(90deg, #10142a, #3a3050 20%, #c87a4a 25%, #6a9ac8 33%, #8ab8e0 50%, #6a9ac8 67%, #c87a4a 75%, #3a3050 80%, #10142a); }
  html.pc.classic.cw #cl-sun { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(#fffbe0, #ffd040 50%, #e08010); box-shadow: 0 0 6px #ffd040; }
  html.pc.classic.cw #cl-sun.moon { background: radial-gradient(circle at 35% 40%, #fffef0, #d8dce8 60%, #8a90a8); box-shadow: 0 0 5px #c8d0f0; }
  /* 圓形的圖示座 */
  html.pc.classic.cw .ci { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #8a6a3a; box-shadow: 0 0 0 1px #000, inset 0 1px 3px #000;
    background: var(--g) center / 18px 18px no-repeat, radial-gradient(#3a3a3e, #121214); }

  /* ── 對話框：文字直接在石板上，右邊一條銀色的捲軸 ── */
  html.pc.classic.cw #log { left: calc(var(--cl-l) + 8px); right: calc(var(--cl-r) + 28px); width: auto; max-width: none; bottom: 34px; height: 90px; z-index: 5;
    background: none; border: none; box-shadow: none; color: #f4f0e4; }
  html.pc.classic.cw #chat-input { left: calc(var(--cl-l) + 6px); right: calc(var(--cl-r) + 6px); width: auto; max-width: none; bottom: 6px; z-index: 30; height: 24px;
    background: #0e0e10; border: 1px solid #5a4a30; border-radius: 2px; box-shadow: inset 0 1px 3px #000; }
  html.pc.classic.cw .cl-scroll { display: block; position: absolute; right: calc(var(--cl-r) + 6px); top: 32px; bottom: 36px; width: 14px; pointer-events: none;
    background: radial-gradient(circle at 50% 7px, #e8ecf0 0 3px, #8a8e96 4px, #3a3c42 6px, transparent 7px), radial-gradient(circle at 50% calc(100% - 7px), #e8ecf0 0 3px, #8a8e96 4px, #3a3c42 6px, transparent 7px),
      linear-gradient(90deg, transparent 4px, #4a4c52 4px, #c8ccd4 6px, #6a6c74 9px, transparent 10px) center / 100% calc(100% - 26px) no-repeat; }

  /* ── 右邊：快捷格 4×2，金色的框；下面一排米黃色小方塊的按鈕 ── */
  html.pc.classic.cw #hotbar { position: absolute; right: 4px; top: 4px; width: calc(var(--cl-r) - 8px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 5px;
    background: #0a0a0c; border: 2px solid #c8a050; border-radius: 2px; box-shadow: inset 0 0 0 1px #4a3410, 0 0 0 1px #000, inset 0 0 0 3px #1a1206, 0 0 0 3px #6a4a18; }
  html.pc.classic.cw .hot { width: auto; height: 50px; background: radial-gradient(#26262a, #0e0e10); border: 1px solid #6a5028; border-radius: 0; box-shadow: inset 0 0 6px #000; }
  html.pc.classic.cw .hot .key { inset: 0; left: 0; top: 0; display: flex; align-items: center; justify-content: center; font: bold 20px/1 Georgia, serif; color: rgba(140, 140, 150, 0.22); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); z-index: 0; }
  html.pc.classic.cw .hot .icon { z-index: 1; }
  html.pc.classic.cw .hud-right { position: absolute; right: 4px; bottom: 4px; width: calc(var(--cl-r) - 8px); margin: 0; display: flex; gap: 2px; justify-content: space-between; }
  html.pc.classic.cw .hud-right .kbd { display: none; }
  html.pc.classic.cw .hud-right button[title] { flex: 1; height: 28px; padding: 0; font-size: 0; color: transparent; border: 1px solid #3a2a10; border-radius: 1px;
    background: var(--ico) center / 22px 22px no-repeat, linear-gradient(#f4e8c0, #dcc890 55%, #b89a5a); box-shadow: inset 0 1px 0 rgba(255, 252, 236, 0.8), inset 0 -1px 0 rgba(90, 64, 20, 0.6), 0 0 0 1px #000; }
  html.pc.classic.cw .hud-right button[title]:hover { filter: brightness(1.12); border-color: #fff0c0; }
  /* 原版那排 7 個的順序：說明、角色、魔法、背包、隊伍、選項、結束；交易、擺攤收在選項裡 */
  html.pc.classic.cw .hud-right .cl-only { display: block; }
  html.pc.classic.cw .hud-right #btn-trade, html.pc.classic.cw .hud-right #btn-stall { display: none; }
  html.pc.classic.cw #btn-help { order: 1; } html.pc.classic.cw .hud-right [data-win="win-char"] { order: 2; } html.pc.classic.cw .hud-right [data-win="win-spell"] { order: 3; }
  html.pc.classic.cw .hud-right [data-win="win-inv"] { order: 4; } html.pc.classic.cw .hud-right [data-win="win-party"] { order: 5; } html.pc.classic.cw .hud-right [data-win="win-opt"] { order: 6; } html.pc.classic.cw #btn-exit { order: 7; }
  html.pc.classic.cw .hot .key { font-size: 17px; }
  /* 圖示：照原版那排按鈕的剪影顏色（人物藍紫、魔法綠十字、背包紅褐、血盟兩人墨綠） */

  /* 視窗不要壓到主介面（加上龍框的高度） */
  html.pc.classic.cw #win-inv, html.pc.classic.cw #win-wh, html.pc.classic.cw #win-char { bottom: 214px; }
  html.pc.classic.cw #win-spell { max-height: calc(100vh - 274px); }

  /* ══ 使用者給的整套介面圖（css/classic/hud/，原圖 2000 寬，這裡縮成一半）══
     左欄、右欄是整張圖；中間：對話框底圖可以左右拉長（border-image），兩端的龍、龍頭固定大小，中間用一條直欄鋪滿；
     圖上原本寫死的字、條、F6～F12 都清掉了，上面疊遊戲的即時資料。座標都是「原圖座標 ÷ 2」 */
  html.pc.classic.cw { --cl-l: 209px; --cl-r: 209px; }
  html.pc.classic.cw #hud { height: 170px; background: none; box-shadow: none; }
  html.pc.classic.cw #hud::before { left: var(--cl-l); right: var(--cl-r); top: 38.5px; bottom: 0; background: none; box-shadow: none;
    border-style: solid; border-width: 32px 30px 53px 35px; border-image: url("classic/hud/base.png") 64 60 106 70 fill / 32px 30px 53px 35px stretch round; }
  /*   上面 64（捲軸的 ▲）、下面 106（捲軸的 ▼、輸入列和兩端的按鈕）不拉長；對話框變高時只有中間的石板和捲軸槽往上接 */
  /* 左欄（使用者 2026-10-30 給的圖，left2.png，原圖 323 × 264 縮成 0.647 倍）：
     LV 在橘色框裡、經驗值靠右｜防禦｜魔防｜負重｜飽食度｜善惡值（藍條）｜時間（白天的風景，晚上換星空、月亮）；圖示是圖上的，數字疊在框裡 */
  html.pc.classic.cw .cl-stat { display: block; left: 0; top: 0; width: 209px; height: 170px; background: url("classic/hud/left2.png") 0 0 / 209px 170.8px no-repeat; z-index: 1; }
  html.pc.classic.cw .cl-stat .ci { display: none; }
  html.pc.classic.cw .cl-stat .cl-row { position: absolute; height: auto; gap: 0; }
  html.pc.classic.cw .cl-stat .cl-lv { left: 17.5px; top: 20px; width: 174px; height: 20px; padding: 0; background: none; border: none; box-shadow: none; font: bold 13px/20px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 2px #000; }
  html.pc.classic.cw #cl-lv { display: inline-block; width: 40px; text-align: center; }
  html.pc.classic.cw .cl-stat .cl-acmr { left: 0; top: 56px; width: 209px; height: 18px; }
  html.pc.classic.cw .cl-acmr > span { position: absolute; top: 0; height: 18px; padding: 0 6px 0 0; background: none; border: none; box-shadow: none; text-align: right; font: bold 12px/18px Georgia, "Times New Roman", serif; color: #fff; }
  html.pc.classic.cw #cl-ac { left: 48.5px; width: 53px; } html.pc.classic.cw #cl-mr { left: 143.6px; width: 53.7px; text-align: right; padding: 0 6px 0 0; }
  html.pc.classic.cw .cl-stat .cl-row:nth-child(3), html.pc.classic.cw .cl-stat .cl-row:nth-child(4) { top: 88.6px; height: 18px; }
  html.pc.classic.cw .cl-stat .cl-row:nth-child(3) { left: 48.5px; width: 53px; } html.pc.classic.cw .cl-stat .cl-row:nth-child(4) { left: 142.3px; width: 55px; }
  html.pc.classic.cw .cl-stat .cl-row:nth-child(5) { left: 49.2px; top: 149.5px; width: 147.5px; height: 13px; }
  html.pc.classic.cw .cl-stat .cl-bar { height: 100%; border: none; border-radius: 2px; background: none; box-shadow: none; font: bold 12px/18px Georgia, "Times New Roman", serif; color: #fff; }
  html.pc.classic.cw .cl-stat .cl-bar .fill { top: 2px; bottom: 2px; left: 2px; max-width: calc(100% - 4px); border-radius: 2px; background: linear-gradient(#f6a85a, #dc742c 45%, #a04a10); box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.6); }
  html.pc.classic.cw .cl-stat #cl-food { background: linear-gradient(#f6a85a, #dc742c 45%, #a04a10); }
  html.pc.classic.cw .cl-stat .cl-bar > span { left: 0; right: 0; padding-right: 6px; text-align: right; font-size: 12px; }
  html.pc.classic.cw .cl-stat .cl-sky { background: none; border-radius: 2px; }
  /* 善惡值：圖上的藍條；中立蓋成灰、混沌蓋成紅（只換顏色，亮暗照圖） */
  html.pc.classic.cw .cl-stat .cl-law { display: flex; justify-content: space-between; left: 49.2px; top: 121.6px; width: 148px; height: 17.5px; padding: 0 6px; font: bold 13px/17.5px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 1px 2px #000; }
  html.pc.classic.cw .cl-stat .cl-law > span { height: auto; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; }
  /* 晚上（js/ui.js 的 .night）：時間列蓋上星空、彎月往右走，圖示換成月亮 */
  html.pc.classic.cw .cl-stat .cl-sky.night { background: var(--cl-stars) 0 0 / auto 100% repeat-x, var(--cl-night); }
  html.pc.classic.cw .cl-stat #cl-sun.moon { background: var(--cl-crescent); box-shadow: none; filter: drop-shadow(0 0 3px #ffe48a); }
  html.pc.classic.cw .cl-stat #cl-sunico.ci-moon { display: block; position: absolute; left: -30px; top: -3px; width: 22px; height: 22px; border: none; box-shadow: none; background: var(--cl-moonico); }
  /* 中間上面：兩端的龍、龍頭，中間鋪一條直欄（左半、右半各一條） */
  html.pc.classic.cw .cl-frame { left: var(--cl-l); right: var(--cl-r); top: -44px; height: 83px; background: url("classic/hud/col-l.png") 0 0 / 1px 83px repeat-x; border: none; box-shadow: none; }
  html.pc.classic.cw .cl-rail { left: 50%; right: 0; top: 0; height: 83px; background: url("classic/hud/col-r.png") 0 0 / 1px 83px repeat-x !important; }
  html.pc.classic.cw .cl-end { left: -19px; top: 0; width: 115px; height: 83px; background-image: url("classic/hud/lend.png"); z-index: 3; }
  html.pc.classic.cw .cl-end.r { left: auto; right: -19px; transform: none; background-image: url("classic/hud/rend.png"); }
  /* 龍頭：照使用者改的圖（2026-10-30）縮成原來的 68%，對準體力魔力條的高度 */
  html.pc.classic.cw .cl-head { top: 18px; width: 95px; height: 68px; background-image: url("classic/hud/head.png"); }
  /* 體力、魔力：圖上那兩條槽的位置，龍頭兩根柱子中間空出來；條的高度照使用者改的圖少兩成 */
  html.pc.classic.cw .bar { top: 11px; height: 20px; border: none; border-radius: 3px; background: linear-gradient(#1a1012, #0c0809); box-shadow: inset 0 2px 4px #000; }
  html.pc.classic.cw .bar.hp { left: calc(var(--cl-l) + 41px); right: calc(50% + 37px); }
  html.pc.classic.cw .bar.mp { left: calc(50% + 37px); right: calc(var(--cl-r) + 41px); background: linear-gradient(#0e1018, #08090e); }
  html.pc.classic.cw .bar .fill { border-radius: 3px; }
  html.pc.classic.cw .bar.hp .fill { background: linear-gradient(#f0606a, #b8141e 40%, #6a0408); box-shadow: inset 0 2px 0 rgba(255, 200, 200, 0.45); }
  html.pc.classic.cw .bar.mp .fill { background: linear-gradient(#70a8f8, #1e56c0 40%, #0a2468); box-shadow: inset 0 2px 0 rgba(200, 220, 255, 0.45); }
  html.pc.classic.cw .bar .val { font: 13px/20px Georgia, "Times New Roman", serif; letter-spacing: 0; color: #f8f0e4; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
  /* 對話框、輸入列：圖上的位置（右邊的捲軸箭頭是圖上的） */
  html.pc.classic.cw #log { left: calc(var(--cl-l) + 8px); right: calc(var(--cl-r) + 31px); bottom: 38px; height: 82px; }
  html.pc.classic.cw #chat-input { left: calc(var(--cl-l) + 38px); right: calc(var(--cl-r) + 31px); bottom: 10px; height: 18px; background: transparent; border: none; box-shadow: none; }
  html.pc.classic.cw .cl-scroll { display: none; }
  /* 右欄：快捷格 4×2、下面 7 個按鈕（按鈕的圖示是圖上的，按鈕本身透明） */
  html.pc.classic.cw #hud::after { content: ''; position: absolute; right: 0; top: 0; width: 209px; height: 169.5px; background: url("classic/hud/right.png") 0 0 / 209px 169.5px no-repeat; pointer-events: none; }
  html.pc.classic.cw #hotbar { right: auto; left: calc(100% - 200px); top: 22px; width: 187px; height: 97px; padding: 0; gap: 4px 3.5px; grid-template-rows: 46.5px 46.5px; background: none; border: none; box-shadow: none; z-index: 2; }
  html.pc.classic.cw .hot { height: 46.5px; background: none; border: 1px solid transparent; box-shadow: none; }
  html.pc.classic.cw .hot:hover { border-color: rgba(220, 190, 130, 0.6); }
  html.pc.classic.cw .hot .key { font: 18px/1 Georgia, "Times New Roman", serif; color: rgba(150, 150, 156, 0.45); text-shadow: 0 1px 0 #000; }
  html.pc.classic.cw .hud-right { right: auto; left: calc(100% - 204px); top: 132px; bottom: auto; width: 193.5px; height: 31.5px; gap: 2.6px; z-index: 2; }
  html.pc.classic.cw .hud-right button[title] { height: 31.5px; background: none; border: 1px solid transparent; box-shadow: none; }
  html.pc.classic.cw .hud-right button[title]:hover { filter: none; border-color: rgba(255, 230, 170, 0.8); background: rgba(255, 240, 200, 0.12); }
  /* 對話框三段高度（輸入列右邊圖上的 ▼，js/main.js 的 #chat-size）：中間的對話框往上長，龍框、體力魔力跟著往上，左右兩欄不動 */
  html.pc.classic.cw { --cx: 0px; }
  html.pc.classic.cw.chat-2 { --cx: 64px; }
  html.pc.classic.cw.chat-3 { --cx: 160px; }
  html.pc.classic.cw #hud { height: calc(170px + var(--cx)); }
  html.pc.classic.cw .cl-stat, html.pc.classic.cw #hud::after { top: auto; bottom: 0; }
  html.pc.classic.cw #hotbar { top: calc(22px + var(--cx)); }
  html.pc.classic.cw .hud-right { top: calc(132px + var(--cx)); }
  html.pc.classic.cw #log { height: calc(82px + var(--cx)); }
  html.pc.classic.cw #win-inv, html.pc.classic.cw #win-wh, html.pc.classic.cw #win-char { bottom: calc(214px + var(--cx)); }
  html.pc.classic.cw #win-spell { max-height: calc(100vh - 274px - var(--cx)); }
  html.pc.classic.cw #chat-size { display: block; position: absolute; right: calc(var(--cl-r) + 6px); bottom: 10px; width: 20px; height: 18.5px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; z-index: 6; }
  html.pc.classic.cw #chat-size:hover { background: rgba(255, 240, 200, 0.15); }


/* 手機的寵物視窗：體力、魔力條跟著內容排（不套主介面那兩條的位置） */
html.mobile.classic #pet-body .bar { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: 16px; margin: 3px 0; }