/* ── สกินไม้-ทอง (ทดลอง) ────────────────────────────────────────────────
   เปิดด้วย  ?skin=wood   ปิดด้วย  ?skin=classic  (จำค่าไว้ใน localStorage)
   ทุกกฎในไฟล์นี้อยู่ใต้ html[data-skin="wood"] body เสมอ — ปิดสกินแล้วต้องกลับไปเหมือนเดิมเป๊ะ
   ไฟล์นี้ต่อท้าย style.css ไม่แก้ style.css เพื่อไม่ชนกับงานของ session อื่น

   กรอบ window-frame-v2.png 512x512 ลายมุม 53px ทุกด้าน (ไม้+มุมทอง พื้นในทึบ)
   ของเดิม window-frame.png 1185x1164 ลาย 136px เป็นกรอบทองบาง พื้นในโปร่ง จนเห็นฉาก 3D
   แลบตามขอบ — ถ้าจะย้อนกลับ เปลี่ยนชื่อไฟล์กับเลข slice ทั้งสามจุดพร้อมกัน
   ⚠️ border-width ต้องเท่ากันทั้ง 4 ด้าน ไม่งั้นลายมุมโดนบีบคนละอัตราจนเบี้ยว
   หลอด bar-frame.png 1429x145 หัวท้าย 110px — หัวท้ายผูกกับ "ความสูง" เป็น px
   ห้ามใช้ % ของความยาว ไม่งั้นหลอดยาวลายอ้วน หลอดสั้นลายแบน            */
html[data-skin="wood"] body{
  --fr:20px;                 /* ความหนากรอบหน้าต่าง — ต้องสูงพอให้ชื่อเรื่องอยู่ในไม้ได้ */
  --bh:14px;                 /* ความสูงหลอด */
  --wood-ink:#4a3a24;
  --wood-cap:#5b4524;
  --parch:#fbf1dc;
  --parch-2:#f4e8cc;
  --line-w:#cbb076;
  --gold:#E3B85C;
}

/* ── หน้าต่าง ──────────────────────────────────────────────────────────
   ⚠️ box-sizing:content-box ไม่ใช่ของเล่น — style.css ตั้ง width ของหน้าต่าง
   ไว้ตอนที่ขอบหนา 1px (เช่น Status 300px) พอสกินใส่ขอบ 20px รอบด้าน
   แบบ border-box เนื้อหาเหลือ 260px ตารางสเตตัสเลยโดนตัดค่าขวามือหายไป
   ให้ width หมายถึง "เนื้อหา" เหมือนเดิม แล้วกรอบไม้ไปอยู่ข้างนอก          */
html[data-skin="wood"] body .rwin,
html[data-skin="wood"] body .win{
  position:relative;box-sizing:content-box;
  /* พื้นกระดาษอยู่ที่ตัวหน้าต่างเอง ไม่ใช่ที่ลูก ๆ — ไม่งั้น padding รอบลูก
     จะโปร่งจนเห็นฉาก 3D แลบออกมาตามขอบใน (เจอที่กล่องปาร์ตี้ข้างจอ) */
  background:var(--parch);background-clip:padding-box;
  border:var(--fr) solid transparent;border-radius:0;box-shadow:none;
  border-image:url('assets/ui/window-frame-v2.png') 53 fill stretch;
}
html[data-skin="wood"] body .win{
  position:fixed;
  /* ต้นไม้สกิลของบางอาชีพยาวเกินจอ — จำกัดความสูงแล้วให้เนื้อหาเลื่อน
     ส่วนหัวเรื่องกับแถบล่าง (Skill Point) ต้องอยู่กับที่ ไม่เลื่อนตามไปด้วย */
  max-height:min(calc(100vh - 180px), 430px);
}
html[data-skin="wood"] body .win > .body{
  flex:1 1 auto;min-height:0;          /* ไม่งั้นเนื้อหาดันหน้าต่างให้สูงแทนที่จะเลื่อน */
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
html[data-skin="wood"] body .win > .body::-webkit-scrollbar{width:9px}
html[data-skin="wood"] body .win > .body::-webkit-scrollbar-thumb{background:#c8ab6d;border-radius:5px;border:2px solid var(--parch)}
html[data-skin="wood"] body .win > .body::-webkit-scrollbar-track{background:var(--parch-2)}

/* ไส้หน้าต่าง: กระดาษทึบ ไม่งั้นตัวหนังสืออ่านไม่ออกเพราะฉากหลังเป็นเกม 3D
   padding:0 เพื่อให้ตาราง/รายการข้างในแนบขอบกรอบพอดี ไม่มีร่องกระดาษคั่น */
html[data-skin="wood"] body .win > .body{background:var(--parch);padding:0}
html[data-skin="wood"] body .win > .foot{
  background:var(--parch-2);border-top:1px solid var(--line-w);border-radius:0;padding:4px 8px;
}

/* แถบชื่อ = ขอบบนของกรอบ ดันขึ้นไปทับขอบบนแทนที่จะกินที่ในเนื้อหา
   left/right:0 (ไม่ใช่ -var(--fr)) เพื่อไม่ให้ตัวหนังสือไปนั่งบนลายมุม */
html[data-skin="wood"] body .rwin > header,
html[data-skin="wood"] body .win > header{
  position:absolute;top:calc(-1*var(--fr));left:0;right:0;
  height:var(--fr);line-height:var(--fr);padding:0;
  background:none;border:0;border-radius:0;overflow:hidden;
  color:var(--wood-cap);text-shadow:0 1px 0 #ffffff66;
  font-size:11px;font-weight:700;letter-spacing:.01em;
}
html[data-skin="wood"] body .rwin > header > span,
html[data-skin="wood"] body .win > header > span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
html[data-skin="wood"] body .win > header button{
  width:15px;height:15px;line-height:1;flex:none;margin-right:-2px;
  border:1px solid #a07a2e;border-radius:4px;
  background:linear-gradient(#fff6e2,#e6cd93);color:#6b4f19;font-size:10px;
}
html[data-skin="wood"] body .win > header button:hover{background:linear-gradient(#fff,#f0dcaa)}

/* เปิด/ปิดให้เนียน — ปิดต้องพึ่ง ui-skin.js เพราะ ui.js สั่ง hidden=true ตรง ๆ
   ซึ่งเป็นการซ่อนทันที ไม่มีจังหวะให้ CSS เล่นอนิเมชันออก */
@keyframes winIn{from{opacity:0;transform:scale(.96) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes winOut{to{opacity:0;transform:scale(.97) translateY(-4px)}}
html[data-skin="wood"] body .win:not([hidden]){animation:winIn .13s cubic-bezier(.2,.9,.3,1)}
/* [hidden] ใน style.css เป็น display:none !important — ระหว่างเล่นอนิเมชันปิด
   หน้าต่างยัง hidden อยู่จริง ๆ (ตั้งใจ ดูเหตุผลใน ui-skin.js) จึงต้องบังคับ
   ให้แสดงกลับมาด้วยกฎที่แรงกว่า */
html[data-skin="wood"] body .win.closing[hidden],html[data-skin="wood"] body .win.closing{
  display:flex !important;animation:winOut .11s ease-in forwards;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="wood"] body .win:not([hidden]),html[data-skin="wood"] body .win.closing{animation:none}
}

/* ── กล่องเนื้อหาในหน้าต่าง: แนบกรอบพอดี ไม่มีเส้นขอบซ้อนกรอบไม้ ───────── */
html[data-skin="wood"] body .st-grid,
html[data-skin="wood"] body .sk-list,
html[data-skin="wood"] body .inv .grid,
html[data-skin="wood"] body .npc-text{border:0;border-radius:0;background:var(--parch)}
html[data-skin="wood"] body .st-col + .st-col{border-left:1px solid var(--line-w)}
html[data-skin="wood"] body .st-grid{grid-template-columns:1fr 1.2fr 1fr}
html[data-skin="wood"] body .st-col{padding:3px 5px}
html[data-skin="wood"] body .st-row{height:20px;font-size:11px}
/* ค่าจริงในเกมยาวกว่าที่ดีไซน์เผื่อไว้ ("101 + 30", "150 ~ 238") ถ้าปล่อยให้
   ตกบรรทัด แถวจะสูงไม่เท่ากันทั้งตาราง ดูเหมือนตัวหนังสือหลุดออกมาลอย */
html[data-skin="wood"] body .st-row .v{white-space:nowrap}
html[data-skin="wood"] body .st-row b{white-space:nowrap}
html[data-skin="wood"] body .st-row .up{
  width:16px;height:14px;border-color:#a07a2e;color:#6b4f19;
  background:linear-gradient(#fff6e2,#e6cd93);
}
html[data-skin="wood"] body .detail{margin:0;border:0;border-top:1px solid var(--line-w);background:var(--parch-2);padding:6px 8px}
html[data-skin="wood"] body .npc-text{border-bottom:1px solid var(--line-w);margin:0;padding:8px 10px}
html[data-skin="wood"] body .shop-row,html[data-skin="wood"] body .pt-row{
  background:var(--parch);border-bottom:1px solid var(--line-w);padding:4px 8px;
}
html[data-skin="wood"] body .shop-row:hover{background:var(--parch-2)}
html[data-skin="wood"] body .sk-row{padding:4px 8px;border-bottom:1px solid var(--line-w);grid-template-columns:32px 1fr auto}
html[data-skin="wood"] body .sk-row:hover{background:var(--parch-2)}
html[data-skin="wood"] body .sk-head{
  margin:0;padding:4px 8px;border-bottom:1px solid var(--line-w);
  background:var(--parch-2);color:#7a5a16;
}
/* ร่องกระดาษรอบตารางของ/ช่องอุปกรณ์ ทำให้ดูเหมือนใส่ของผิดขนาดในกรอบ */
html[data-skin="wood"] body .inv{padding:0;gap:0}
html[data-skin="wood"] body .vtabs{padding:4px 0 4px 4px}
html[data-skin="wood"] body .inv .grid{background:var(--parch-2);padding:5px;border:0;border-left:1px solid var(--line-w)}
html[data-skin="wood"] body .win input{border:1px solid var(--line-w);background:#fffdf6;border-radius:4px;padding:4px 7px}
html[data-skin="wood"] body .win input:focus{outline:2px solid #C4903A66;outline-offset:-1px}
html[data-skin="wood"] body .vtabs button{border-color:#a88433;background:linear-gradient(90deg,#fdf3dd,#e7cf9a);color:#5a4218}
html[data-skin="wood"] body .vtabs button.on{background:linear-gradient(90deg,#E8C578,#C4903A);color:#3a2a0c;border-color:#8d6a22}
html[data-skin="wood"] body .inv .grid{justify-content:space-evenly}
/* minmax(0,…) ไม่ใช่ 1fr — ช่องหมวกประจำอาชีพมีปุ่มอยู่ในช่อง ความกว้าง
   ขั้นต่ำของมันเลยดันคอลัมน์จนล้นกรอบไปทางขวา 7px */
html[data-skin="wood"] body .eqw{padding:5px;gap:4px;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}
html[data-skin="wood"] body .eqslot > span{min-width:0;overflow:hidden}
html[data-skin="wood"] body .eqslot{background:var(--parch-2);border-color:var(--line-w);min-height:34px;padding:2px 4px}
html[data-skin="wood"] body .eqslot.empty{background:#00000008;border-color:#00000024}
/* ช่องหมวกประจำอาชีพ: หน้าตาเดียวกับช่องว่างอื่นเสมอ ต่างแค่สถานะกับปุ่ม
   ตอน "ใส่อยู่" ให้ดูเป็นช่องที่มีของ ไม่ใช่ช่องว่าง */
html[data-skin="wood"] body .eqslot.classhat{position:relative;padding-right:42px;font-size:10px;line-height:1.25}
html[data-skin="wood"] body .eqslot.classhat.worn{background:var(--parch-2);border-style:solid;border-color:var(--line-w)}
html[data-skin="wood"] body .eqslot.classhat.worn .ic{opacity:.85}
html[data-skin="wood"] body .eqslot.classhat .rbtn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  min-height:20px;padding:1px 9px;font-size:10px;
}
html[data-skin="wood"] body .eqcol.r .eqslot.classhat{padding-right:4px;padding-left:44px}
html[data-skin="wood"] body .eqcol.r .eqslot.classhat .rbtn{right:auto;left:4px}
html[data-skin="wood"] body .preview{border-color:var(--line-w);background:radial-gradient(circle at 50% 70%,#fffaf0 0,#ead7ae 75%)}

/* ── หลอด ─────────────────────────────────────────────────── */
/* ⚠️ ui.js ตั้งความยาวไส้หลอดเป็น "เปอร์เซ็นต์" ถ้าไส้เป็น absolute แล้วเลื่อน
   ซ้ายมาให้ตรงร่อง เปอร์เซ็นต์นั้นจะคิดจากความกว้าง "ทั้งหลอด" ไม่ใช่ความกว้าง
   ของร่อง — พอเต็ม 100% ไส้เลยยาวล้นออกไปทับลายทองหัวท้าย (วัดได้ 6px)
   ทางแก้: ดันขอบร่องด้วย padding ของตัวหลอดเอง แล้วให้ไส้เป็นลูกปกติ
   เปอร์เซ็นต์จะคิดจากช่องในซึ่งก็คือร่องพอดีทุกค่า ไม่ใช่แค่ตอนเต็ม */
html[data-skin="wood"] body .rbar{
  height:var(--bh);background:none;border:0;border-radius:0;overflow:visible;
  box-sizing:border-box;
  padding:calc(var(--bh)*.145) calc(var(--bh)*.52);
}
html[data-skin="wood"] body .bi-lv .rbar,
html[data-skin="wood"] body #party-hud .rbar{--bh:12px;height:var(--bh)}
html[data-skin="wood"] body #party-hud .rbar.sp{--bh:10px;height:var(--bh)}
/* ร่องใน = ที่ที่ไส้สีวิ่ง, ::after = กรอบทองทับข้างบน */
/* ⚠️ ลำดับการทับต้องกำหนดให้ครบทั้งสี่ชั้น ใส่ z-index ให้ไส้อย่างเดียวแล้ว
   ไส้จะขึ้นไปทับทั้งลายทองและตัวเลขที่วางอยู่บนหลอด — เลข "12,345 / 12,345"
   หายไปหลังแถบสีแดง เหลือโผล่มาแค่ "45" ตรงปลายที่พ้นไส้ */
html[data-skin="wood"] body .rbar::before{
  content:'';position:absolute;z-index:0;
  top:calc(var(--bh)*.145);bottom:calc(var(--bh)*.145);
  left:calc(var(--bh)*.52);right:calc(var(--bh)*.52);
  border-radius:99px;background:#0000002e;
}
html[data-skin="wood"] body .rbar i{
  position:relative;z-index:1;inset:auto;display:block;height:100%;
  border-radius:99px;box-shadow:inset 0 1px 0 #ffffff59;
}
html[data-skin="wood"] body .rbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  border:0 solid transparent;
  border-left-width:calc(var(--bh)*110/145);border-right-width:calc(var(--bh)*110/145);
  border-image:url('assets/ui/bar-frame.png') 0 110 fill stretch;
}
html[data-skin="wood"] body .rbar.hp i     {background:linear-gradient(#E96062,#B5282A)}
html[data-skin="wood"] body .rbar.hp.low i {background:linear-gradient(#F09A54,#C2451C)}
html[data-skin="wood"] body .rbar.sp i     {background:linear-gradient(#5C97C5,#2C6698)}
html[data-skin="wood"] body .rbar.exp i    {background:linear-gradient(#F2C86F,#E1AA3B)}
html[data-skin="wood"] body .rbar.jexp i   {background:linear-gradient(#A0CD76,#78B056)}
/* หลอดบนหัวตัวละครในฉาก อยู่นอกหน้าต่าง ใช้ของเดิม อ่านง่ายกว่าตอนตัวเล็ก */

/* ── ปุ่ม ─────────────────────────────────────────────────── */
html[data-skin="wood"] body .rbtn,
html[data-skin="wood"] body .actions button,
html[data-skin="wood"] body .btn,
html[data-skin="wood"] body .chip{
  border:1px solid #a88433;border-radius:9px;color:#4a3714;
  background:linear-gradient(#fdf3dd,#e7cf9a);
}
html[data-skin="wood"] body .rbtn:hover,html[data-skin="wood"] body .actions button:hover,html[data-skin="wood"] body .btn:hover
  {background:linear-gradient(#fffaf0,#efdfb4)}
html[data-skin="wood"] body .chip.on,
html[data-skin="wood"] body .primary,
html[data-skin="wood"] body .actions button.main,
html[data-skin="wood"] body .btn.main{
  background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;border-color:#8d6a22;font-weight:700;
}
html[data-skin="wood"] body .rbtn.attn,html[data-skin="wood"] body #menu button.attn
  {border-color:#b5401f;box-shadow:0 0 0 1px #e8743d}

/* ── ช่องไอเท็ม / ช่องลัด ─────────────────────────────────── */
html[data-skin="wood"] body .slot{
  background:linear-gradient(#fdf5e3,#ead7ae);border:1px solid #bc9a55;border-radius:5px;
}
html[data-skin="wood"] body .slot.armed{box-shadow:0 0 0 2px #C4903A}
html[data-skin="wood"] body .grid{background:#fdf7e8;border:1px solid #cbb076}
html[data-skin="wood"] body .grid .slot.sel{box-shadow:0 0 0 2px #C4903A}
html[data-skin="wood"] body #hotbar .hb-page{background:#a5812f}
html[data-skin="wood"] body #hotbar .hb-page:hover{background:#c49b47}

/* ── กล่องเล็กอื่น ๆ ที่เป็นพื้นขาวในธีมเดิม ───────────────── */
html[data-skin="wood"] body .sk-head{color:#7a5a16;border-bottom-color:#d8c49a}

/* ── แชท ─────────────────────────────────────────────────── */
html[data-skin="wood"] body .chat-bar{background:linear-gradient(#f8eed6,#e3d2a8);border-top:1px solid #bc9a55}
html[data-skin="wood"] body .chat-tabs button{border-color:#a88433;background:linear-gradient(#fdf3dd,#e7cf9a);color:#5a4218}
html[data-skin="wood"] body .chat-tabs button.on{background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;border-color:#8d6a22}
html[data-skin="wood"] body #chat-mode{border-color:#a88433;background:linear-gradient(#fdf3dd,#e7cf9a);color:#5a4218}
html[data-skin="wood"] body #chat-new{background:#C4903A;border-color:#8d6a22}
/* สีช่องแชทต้องถูกประกาศซ้ำในสกินไม้ — กฎ #chat-mode ของสกินข้างบนมี specificity สูงกว่ากฎ
   [data-ch] ใน style.css ไม่งั้นปุ่มจะเป็นสีกระดาษเหมือนกันหมดจนแยกช่องไม่ออก */
html[data-skin="wood"] body #chat-mode[data-ch="party"]{background:linear-gradient(#a8d9b4,#4f9a68);color:#173d24;border-color:#3f7c52}
html[data-skin="wood"] body #chat-mode[data-ch="world"]{background:linear-gradient(#f2c46a,#c2841f);color:#40280a;border-color:#8d6a22}
html[data-skin="wood"] body #chat-mode[data-ch="pm"]{background:linear-gradient(#d9aee8,#a05dbb);color:#fff;border-color:#7e3f98}
html[data-skin="wood"] body #chat-ch,html[data-skin="wood"] body .ctx{
  background:linear-gradient(#fdf6e4,#efdcb4);border-color:#a88433;box-shadow:0 8px 22px #2a1b0066}
html[data-skin="wood"] body #chat-ch button,html[data-skin="wood"] body .ctx button{color:#5a4218}
html[data-skin="wood"] body #chat-ch button:hover,html[data-skin="wood"] body .ctx button:hover{background:#e7d3a4}
html[data-skin="wood"] body #chat-ch button.on{background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c}
html[data-skin="wood"] body .ctx>b{color:#7a5a1c;border-bottom-color:#c9ab72}
html[data-skin="wood"] body .soc-tabs button,html[data-skin="wood"] body .soc-act button{
  border-color:#a88433;background:linear-gradient(#fdf3dd,#e7cf9a);color:#5a4218}
html[data-skin="wood"] body .soc-tabs button.on{background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;border-color:#8d6a22}
html[data-skin="wood"] body .soc-row{border-bottom-color:#c9ab72}

/* ── หน้าล็อกอิน ──────────────────────────────────────────── */
html[data-skin="wood"] body #login.overlay{
  background:#2c3f4d url('assets/ui/login-bg.jpg') center/cover no-repeat;
}
html[data-skin="wood"] body .login-card{
  background:transparent;border:26px solid transparent;border-radius:0;box-shadow:none;
  border-image:url('assets/ui/window-frame-v2.png') 53 fill stretch;
  padding:0;gap:0;
}
html[data-skin="wood"] body .login-card > *{background:var(--parch);padding-left:14px;padding-right:14px}
html[data-skin="wood"] body .login-card > .brand{padding-top:12px;color:#6b4f19;font-family:Georgia,serif}
html[data-skin="wood"] body .login-card > .hint{padding-bottom:12px}
/* แถบความคืบหน้าตอนโหลดโมเดล (element สร้างโดย main.js)
   สีเดียวกับหลอด EXP เพื่อให้รู้สึกว่าเป็นของเกมเดียวกัน ไม่ใช่ progress bar เบราว์เซอร์ */
html[data-skin="wood"] body #l-load{
  display:grid;gap:5px;padding:2px 0 4px;font-size:12px;color:#5c4d33;
}
html[data-skin="wood"] body #l-load[hidden]{display:none}
html[data-skin="wood"] body #l-load::after{
  content:'';height:10px;border-radius:99px;background:#00000026;
  box-shadow:inset 0 1px 2px #00000026;grid-area:2/1;
}
html[data-skin="wood"] body #l-load i{
  height:10px;border-radius:99px;grid-area:2/1;z-index:1;width:0;
  background:linear-gradient(#F2C86F,#E1AA3B);
  box-shadow:inset 0 1px 0 #ffffff66;transition:width .25s ease-out;
}
html[data-skin="wood"] body .login-card input{border-color:#bc9a55;background:#fffdf6}
html[data-skin="wood"] body .slot-card{background:#fdf7e8;border-color:#cbb076}
html[data-skin="wood"] body .slot-card.empty:hover{background:#f5e9cd}
html[data-skin="wood"] body .link{color:#8a6412}


/* ── Basic Info ────────────────────────────────────────────────────────
   ของเดิมวางเลขไว้ "ใต้หลอด" คนละบรรทัด กินความสูงเปล่า ๆ และตอนเลขยาว
   (12,345 / 12,345) ดูเหมือนตัวหนังสือหลุดออกมาลอย — ย้ายไปวางทับบนหลอด
   แบบเกมออนไลน์ทั่วไป อ่านง่ายกว่าและประหยัดที่ */
html[data-skin="wood"] body #basic{z-index:12}
/* ⚠️ minmax(0,1fr) ไม่ใช่ 1fr — ช่อง grid ปริยายกว้างอย่างน้อยเท่าเนื้อหา
   แถว Gold เคยตั้ง nowrap ไว้ไม่ให้ ":" ตกบรรทัด ผลคือทั้งคอลัมน์ถูกดัน
   จนปุ่ม status/items/equip ทางขวาหลุดออกนอกกรอบไปเลย */
html[data-skin="wood"] body .bi{padding:6px 8px 7px;gap:7px;grid-template-columns:minmax(0,1fr) 62px}
/* หลอดทั้งสี่ (HP/SP/Base/Job) เคยเป็น grid คนละอันที่ป้ายหน้าหลอดกว้างไม่เท่ากัน
   หลอดจึงเริ่มคนละจุดจบคนละจุด — HP/SP ยาวเลยหัวท้ายหลอด EXP ออกไปเห็นชัด
   ตรึงความกว้างป้ายด้วยตัวแปรตัวเดียว ทุกแถวจึงได้หลอดกว้างเท่ากันเป๊ะ
   ส่วนตัวเลขวางทับบนหลอด ไม่กินคอลัมน์ที่สาม หลอดจะได้ยาวพอให้อ่านออก */
html[data-skin="wood"] body .bi-main{min-width:0;--bi-label:58px}
html[data-skin="wood"] body .bi-bar,html[data-skin="wood"] body .bi-lv{
  position:relative;display:grid;align-items:center;
  grid-template-columns:var(--bi-label) minmax(0,1fr);column-gap:6px;
}
html[data-skin="wood"] body .bi-bar{margin-bottom:4px}
html[data-skin="wood"] body .bi-lv{margin-top:0;margin-bottom:4px}
html[data-skin="wood"] body .bi-bar label,html[data-skin="wood"] body .bi-lv > span:first-child{
  grid-column:1;font-size:11px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
html[data-skin="wood"] body .bi-bar .rbar,html[data-skin="wood"] body .bi-lv .rbar{grid-column:2;grid-row:1}
html[data-skin="wood"] body .bi-bar span,html[data-skin="wood"] body .bi-lv em{
  position:absolute;z-index:3;right:calc(var(--bh)*.9);top:0;height:100%;
  display:flex;align-items:center;grid-column:auto;
  font-size:10px;font-style:normal;font-weight:700;
  color:#2e2413;text-shadow:0 1px 0 #ffffffcc,0 0 3px #ffffff99;
}
html[data-skin="wood"] body .bi-name{margin-bottom:4px}
html[data-skin="wood"] body .bi-bar span,html[data-skin="wood"] body .bi-lv em{
  grid-column:auto;justify-self:end;text-align:right;white-space:nowrap;
  font-size:10px;font-style:normal;color:#5c4d33;
}
html[data-skin="wood"] body .bi-zeny{
  margin-top:6px;padding-top:5px;border-top:1px solid var(--line-w);
  flex-wrap:wrap;gap:4px 6px;
}
/* เหรียญทองนำหน้ายอดเงิน — เดิม "Gold :" เป็นตัวหนังสือเปล่า ๆ */
html[data-skin="wood"] body .bi-zeny::before{
  content:'';width:15px;height:15px;flex:none;
  background:url('assets/ui/pickup/coin.png') center/contain no-repeat;
}
html[data-skin="wood"] body .bi-zeny{align-items:center}
html[data-skin="wood"] body .bi-zeny b{white-space:nowrap}
html[data-skin="wood"] body .bi-zeny .snd{gap:3px;margin-left:auto}
html[data-skin="wood"] body .bi-zeny .snd .rbtn{padding:0 6px;min-height:16px;font-size:10px}
html[data-skin="wood"] body .fps{white-space:nowrap}
html[data-skin="wood"] body .bi-btns{gap:3px}
html[data-skin="wood"] body .bi-btns .rbtn{min-height:19px}

/* ── ช่องลัด ───────────────────────────────────────────────────────────
   เดิมมี padding ของตัวเองซ้อนกับขอบกรอบ ทำให้ช่องขวาสุดล้นออกนอกกรอบไม้ */
html[data-skin="wood"] body #hotbar{padding:0;gap:3px;align-items:center}
html[data-skin="wood"] body #hotbar .hb-page{height:34px;width:18px;border-radius:5px;background:#6b4f19;color:#ffe6ac}
html[data-skin="wood"] body #hotbar .hb-page:hover{background:#8d6a22}
html[data-skin="wood"] body .slot .key{color:#8a7448;text-shadow:0 1px 0 #ffffffaa}
html[data-skin="wood"] body .slot .qty{color:#2e2413;text-shadow:0 1px 0 #fff,0 0 3px #fff}

/* ── มินิแมพ ─── canvas ต้องเต็มช่องกรอบพอดี ไม่เหลือขอบกระดาษรอบ ── */
html[data-skin="wood"] body #mapbox{width:144px}
html[data-skin="wood"] body #minimap{display:block;border:0;width:144px;height:144px}
html[data-skin="wood"] body #mapbox > header{font-size:10px}

/* ── ปาร์ตี้ข้างจอ ─── หลอดสูงขึ้นตามสกิน แถวเลยยาวเกินกรอบ ── */
html[data-skin="wood"] body #party-hud{width:150px;padding:5px 7px;font-size:11px}
html[data-skin="wood"] body #party-hud .pm{margin:2px 0;padding:3px 4px;border-radius:5px}
html[data-skin="wood"] body #party-hud .pm:hover{background:var(--parch-2)}
html[data-skin="wood"] body #party-hud .pm.on{background:#efe0b6;box-shadow:inset 0 0 0 1px #C4903A}
/* คนออฟไลน์ยังอยู่ในรายชื่อ แค่จางลงและกดเลือกเป้าไม่ได้ */
html[data-skin="wood"] body #party-hud .pt-count{float:right;font-size:10px;opacity:.7}
html[data-skin="wood"] body #party-hud .pm.off{opacity:.45;cursor:default}
html[data-skin="wood"] body #party-hud .pm.off:hover{background:none}
html[data-skin="wood"] body .pt-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 8px;border-bottom:1px solid var(--line-w);background:var(--parch-2);
}
html[data-skin="wood"] body .pt-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
html[data-skin="wood"] body .pt-row .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  background:#4caf50;box-shadow:0 0 0 2px #4caf5033;
}
html[data-skin="wood"] body .pt-row.off{opacity:.6}
html[data-skin="wood"] body .pt-row.off .dot{background:#a09585;box-shadow:none}
html[data-skin="wood"] body #party-hud .rbar{--bh:9px}
html[data-skin="wood"] body #party-hud .rbar.sp{--bh:7px;margin-top:2px}

/* ── เป้าหมาย ─────────────────────────────────────────────────────────── */
html[data-skin="wood"] body #target{padding:5px 10px 7px;min-width:190px}
html[data-skin="wood"] body #target .rbar{--bh:12px;margin-top:4px}

/* ── แชท ──────────────────────────────────────────────────────────────
   ปุ่ม ⇕ เดิมลอยอยู่กลางจอเพราะแถบแท็บกว้าง 560px แต่มีแท็บแค่ 4 อัน */
html[data-skin="wood"] body .chat-tabs{width:auto;max-width:min(560px,100vw);gap:3px}
html[data-skin="wood"] body .chat-tabs .grow{flex:none;width:10px}
html[data-skin="wood"] body #chat-log{
  background:#1b2230d9;border:1px solid #00000033;border-bottom:0;border-radius:6px 6px 0 0;
}
html[data-skin="wood"] body .chat-bar{border-top:1px solid #bc9a55}



/* ── มือถือ ─────────────────────────────────────────────────────────────
   เบรกพอยต์ไม่ได้ดูแค่ความกว้าง: มือถือหมุนจอเป็นแนวนอนจะกว้าง 844px
   ซึ่งเกิน 760 แล้วได้เลย์เอาต์คอมพิวเตอร์บนจอสูง 390px — เละกว่าเดิม
   จึงเติมเงื่อนไข "จอเตี้ย + นิ้วแตะ" เข้าไปด้วย

   ขอบล่างซ้อนกันเป็นชั้น ความสูงแต่ละชั้นประกาศไว้ที่เดียวข้างล่างนี้
   ทุกอย่างที่ต้องลอยเหนือชั้นล่างอ้างตัวแปรพวกนี้ ไม่ใส่เลขตายตัวซ้ำ ๆ
   (เคยใส่เลขตายตัวแล้วขยับชั้นเดียว อีกสองชั้นทับกันทันที)
       ล่างสุด  เมนู 7 ปุ่ม
       ถัดขึ้น  แถบพิมพ์แชท (กล่องข้อความยุบไว้ กดปุ่ม ⇕ ค่อยกาง)
       ถัดขึ้น  ช่องลัดแถวเดียวเลื่อนแนวนอน
       ถัดขึ้น  จอยสติ๊ก (ซ้าย) + ปุ่มสกิล (ขวา) ลอยอยู่บนฉาก           */
@media (max-width:760px), (pointer:coarse){
  /* ── ชั้นที่ 1: เมนู ──────────────────────────────────────────────── */
  html[data-skin="wood"] body #menu{background:linear-gradient(#f8eed6,#e3d2a8); border-top:2px solid #a88433}
  html[data-skin="wood"] body #menu button{background:linear-gradient(#fdf3dd,#e7cf9a); color:#4a3714}
  html[data-skin="wood"] body #menu small{color:#6b5423}
  html[data-skin="wood"] body #menu button.attn{border-color:#b5401f; box-shadow:0 0 0 2px #e8743d55}
  /* ฉากหลังมืดหลังแผ่นสไลด์ — แตะแล้วปิด (element สร้างโดย ui-skin.js)
     บนจอสัมผัสไม่มีปุ่ม Esc และปุ่ม x ก็เล็ก "แตะข้างนอกเพื่อปิด" คือท่าที่
     คนคาดหวังจากแผ่นที่สไลด์ขึ้นมา ถ้าไม่มีจะรู้สึกว่าปิดไม่ได้ */
  html[data-skin="wood"] body #sheet-scrim{background:#0f1319}
  /* ── หน้าต่าง = แผ่นสไลด์ขึ้นจากขอบล่าง ปัดหัวลง = ปิด ─────────────
     (ลากหน้าต่างลอยบนจอสัมผัสคือเอานิ้วไปบังของที่จะดู)                */
  html[data-skin="wood"] body .win{border-image-slice:53}
  html[data-skin="wood"] body .win > header{background:linear-gradient(#f4e8cc,#e7d3a4)}
  html[data-skin="wood"] body .win > header::before{background:#0000002e}
}

/* ── มือถือแนวนอน: สูงแค่ ~390px ต้องบีบทุกชั้นให้เตี้ยลง ────────────── */

/* ── ขนาดเฉพาะของสกินบนมือถือ ──────────────────────────────────────────
   ⚠️ ต้องอยู่ที่นี่ ไม่ใช่ใน ui-mobile.css เพราะ html[data-skin="wood"] body{--fr:20px}
   มีความจำเพาะสูงกว่า body{--fr:13px} เสมอ ไม่ว่าไฟล์ไหนโหลดทีหลัง
   ผลคือกรอบไม้ยังหนา 20px บนจอมือถือ ทุกอย่างเลยบวมจนทับกันหมด        */
@media (max-width:760px), (pointer:coarse){
  html[data-skin="wood"] body{--fr:13px;--bh:13px}
  /* ขนาดที่สกินตั้งไว้สำหรับจอคอม ต้องมีคู่ของมันในโหมดมือถือด้วย
     ไม่งั้นกฎกลางใน ui-mobile.css แพ้ความจำเพาะแล้วมินิแมพยังกว้าง 144px */
  /* 22 ก.ย.: กว้างขึ้นจาก 96 → 132 ตามภาพต้นแบบ · ที่ 96px ชื่อโซนบนแถบล่างถูกตัดเหลือ "กรีนเวล…" */
  html[data-skin="wood"] body #mapbox,html[data-skin="wood"] body #minimap{width:132px}
  html[data-skin="wood"] body #minimap{height:132px}
  html[data-skin="wood"] body #party-hud{width:126px}
}
@media (max-height:540px) and (pointer:coarse), (max-width:900px) and (max-height:460px){
  /* กรอบไม้ทำให้ช่องลัดกับแถบเมนูสูงกว่างบที่ ui-mobile.css ตั้งไว้ราว 12px
     ทุกชั้นเลยเหลื่อมกัน 2px — ตั้งงบของสกินเองให้ตรงกับความสูงจริง */
  html[data-skin="wood"] body{--h-hot:74px;--h-menu:56px}
  /* แผงข้อมูลตัวละครบนกรอบไม้สูงกว่าเดิม จอยสติ๊กจึงชนก้นแผง — บีบแผงให้เตี้ยลง */
  html[data-skin="wood"] body #basic{width:min(42vw,180px)}
  html[data-skin="wood"] body .bi-lv{display:none}
  html[data-skin="wood"] body #mapbox,html[data-skin="wood"] body #minimap{width:104px}
  html[data-skin="wood"] body #minimap{height:104px}
  html[data-skin="wood"] body #party-hud{width:112px}
}
html[data-skin="wood"] body .gear-tabs button{border-color:#a88433;background:linear-gradient(#fdf3dd,#e7cf9a);color:#5a4218}
html[data-skin="wood"] body .gear-tabs button.on{background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;border-color:#8d6a22}
html[data-skin="wood"] body .st-row .up{width:24px;height:20px;font-size:14px;display:grid;place-items:center;line-height:1}

/* จอคอม: ลดความหนากรอบของ "วิดเจ็ตที่อยู่บนจอตลอด" ลงราว 35%
   ตามรีวิวที่ว่าทองควรเป็นแค่จุดเน้น ไม่ใช่กรอบล้อมทุกอย่าง
   หน้าต่างหลัก (.win) ยังใช้กรอบเต็มเหมือนเดิม เพื่อให้ลำดับความสำคัญต่างกันชัด */
html[data-skin="wood"]:not(.touch-ui) body #basic,
html[data-skin="wood"]:not(.touch-ui) body #mapbox,
html[data-skin="wood"]:not(.touch-ui) body #party-hud,
html[data-skin="wood"]:not(.touch-ui) body #hotbar,
html[data-skin="wood"]:not(.touch-ui) body #target{--fr:13px}
/* แถบเมนูมุมขวาล่าง (จอคอม) ให้เข้าชุดกับสกินไม้ */
html[data-skin="wood"]:not(.touch-ui) body #menu button{
  border-color:#a88433; background:linear-gradient(#fdf3dd,#e7cf9a); color:#4a3714;
  box-shadow:0 2px 5px #0003;
}
html[data-skin="wood"]:not(.touch-ui) body #menu button small{color:#6b5423}
html[data-skin="wood"]:not(.touch-ui) body #menu button.on,
html[data-skin="wood"]:not(.touch-ui) body #menu button:active{background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c}

/* จอตั้ง (มือถือ) ใช้ภาพพื้นหลังที่วาดมาเป็นแนวตั้งโดยเฉพาะ — ภาพแนวนอนเดิมถูกครอปจนเหลือแต่ทราย */
@media (max-width:760px), (pointer:coarse){
  html[data-skin="wood"] body #login.overlay{
    background:#2c3f4d url('assets/ui/login-bg-portrait.jpg') center/cover no-repeat;
  }
}

/* จอโหลดใช้ภาพวาดของตัวเอง — สกินไม้ไม่ต้องทับสีแถบ (กฎเดิมเล็งที่ #l-load ตรง ๆ) */
html[data-skin="wood"] body #loadscreen #l-load { color: #f6ecd6; padding: 0; }

/* ── ปุ่มหลัก: ใช้ภาพปุ่มจากชุดกรอบไม้ (ปกติ / กด / ปิดใช้งาน) ──────────
   ใช้เฉพาะปุ่มใหญ่บนหน้า login — ปุ่มในเกมสูงราว 28px ถ้าย่อลายนี้ลงไป
   เพชรหัวท้ายจะเหลือไม่ถึง 2px กลายเป็นรอยเปื้อน ไม่ใช่ลาย
   ภาพสูง 160px หัวท้าย 58px → border-width ต้องกว้างพอให้หัวท้ายไม่โดนบีบ */
html[data-skin="wood"] body .login-card .primary.wide{
  background:none;border:14px solid transparent;border-width:16px 20px;border-radius:0;
  border-image:url('assets/ui/frames/btn.png') 72 58 fill stretch;
  color:#4a3512;text-shadow:0 1px 0 #ffffff99;padding:0 6px;min-height:46px;
}
html[data-skin="wood"] body .login-card .primary.wide:hover{filter:brightness(1.05)}
html[data-skin="wood"] body .login-card .primary.wide:active{
  border-image-source:url('assets/ui/frames/btn-down.png');color:#3d2c0e;
}
html[data-skin="wood"] body .login-card .primary.wide:disabled{
  border-image-source:url('assets/ui/frames/btn-off.png');color:#79736a;text-shadow:none;
}

/* ── หน้า login รอบปรับใหญ่ (21 ก.ย.) ────────────────────────────────
   กรอบบางลงจาก 26 → 20px: ลายมุมเดิมกินสายตามากกว่าโลโก้กับปุ่มที่อยู่ข้างใน */
html[data-skin="wood"] body .login-card{border-width:20px}
/* โฟกัสเป็น teal ต้องประกาศในสกินด้วย — กฎสีขอบของสกินจำเพาะสูงกว่ากฎ :focus ใน style.css
   ไม่งั้นคลิกช่องกรอกแล้วขอบยังเป็นสีทองเหมือนเดิม แยกไม่ออกว่าเคอร์เซอร์อยู่ช่องไหน */
html[data-skin="wood"] body .login-card input:focus{
  border-color:#2f6f73;box-shadow:0 0 0 3px #2f6f7338;
}
/* ตัวเลือกที่เลือกอยู่ต้องอ่านออกจากมุมตา — ของเดิมชิปทุกอันเป็นครีมใกล้กันหมด */
html[data-skin="wood"] body .login-card .chip.on{
  background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;
  border-color:#2f6f73;box-shadow:0 0 0 2px #2f6f7333;
}
html[data-skin="wood"] body .login-card .swatches button.on{box-shadow:0 0 0 3px #2f6f73}
html[data-skin="wood"] body .cprev{
  background:linear-gradient(#fdf7e8,#efe0bd);border-color:#cbb076;border-radius:8px;
}
html[data-skin="wood"] body .pf{background:linear-gradient(#fdf7e8,#efe0bd);box-shadow:inset 0 0 0 1px #cbb076}
html[data-skin="wood"] body #l-boot .spin{border-top-color:#a87825}
html[data-skin="wood"] body .alt{color:#7a6540}
html[data-skin="wood"] body .link{color:#8a5f18}
/* การ์ดสว่างพอ ๆ กับพื้นทรายด้านหลัง — เงาทำให้มันลอยขึ้นมาจากภาพ
   ใช้ filter ไม่ใช่ box-shadow เพราะขอบการ์ดเป็น border-image ที่มุมโปร่ง */
html[data-skin="wood"] body .login-card{filter:drop-shadow(0 10px 22px #00000047)}
html[data-skin="wood"] body .login-card .primary.full{
  background:linear-gradient(#E8C578,#C4903A);color:#3a2a0c;border:1px solid #8d6a22;border-radius:10px;min-height:46px;
}