:root{
  /* ===== ธีมหลัก: กระดาษ parchment (หน้าต่าง/หน้าจอ) ===== */
  --bark:#4a3626;
  --panel:#f2e9d0;         /* พื้นหน้าต่างครีมอุ่น */
  --panel-2:#fbf5e7;       /* การ์ด/ปุ่ม/ชิป ผิวสว่างกว่า */
  --panel-border:#d8c4a0;  /* ขอบแทน */
  --ink:#4a3a26;
  --paper:#4a3a26;         /* ตัวอักษรในพาเนล = น้ำตาลเข้ม */
  --muted:#9c855f;         /* อักษรรอง น้ำตาลจาง */
  --gold:#c8862a;          /* แต้มทอง/ส้ม (หัวข้อ/ป้าย/เลือก) */
  --green:#4f8a5b;         /* แท็ก/แต้มเขียว */
  --hud-text:#f4ecd8;      /* อักษร HUD/ปุ่มสัมผัส = สว่างเสมอ (ลอยบนโลกเกมมืด) */

  /* ===== window/slot tokens — ทุกหน้าต่างใช้ค่าเดียว (ขอบเสมอกัน + ช่องเรียงตรง) ===== */
  --win-bg:var(--panel);
  --win-border:2px solid var(--panel-border);
  --win-radius:12px;
  --win-pad:12px 14px;
  --win-shadow:0 6px 20px rgba(0,0,0,.4);
  --win-head-c:var(--gold);
  --ui-scale:1;            /* ขนาด UI จากหน้าตั้งค่า (settings.applyDom เซ็ตค่านี้) */
  --slot:38px;             /* ขนาดช่องไอเทม (ทั้งกล่อง + track ของ grid = ค่าเดียวกันเสมอ) */
  --slot-canvas:32px;      /* = ICON_SIZE ใน ui.js → คมพอดี 1:1 */
  --slot-gap:6px;
  --slot-radius:7px;
  /* accent ฉบับ "หมึก" — โทนเดียวกับ gold/green แต่เข้มพออ่านตัวเล็กบนพื้นกระดาษ (คอนทราสต์ ≥ 4.5:1) */
  --gold-ink:#8a5a12;
  --green-ink:#2f6b3c;
}
/* สัมผัส: ขยายช่องทั้งชุดพร้อมกันด้วยการ override token → grid/cell/canvas ตรงกันอัตโนมัติ */
body.is-touch{ --slot:52px; --slot-canvas:46px; }

/* ===== ตัวเลื่อน (scrollbar) — ธีมเดียวกับหน้าต่าง =====
   ของเดิมเป็นแถบขาวเทาของระบบ ลอยอยู่ข้างพาเนล ดูเหมือนของที่หลุดมาจากคนละเกม
   ⚠⚠ ห้ามใช้ var() ใน ::-webkit-scrollbar-* — Chromium ไม่ส่ง custom property เข้า
       pseudo-element พวกนี้ ค่าจะกลายเป็นว่าง แล้วตกกลับไปเป็นสีเทาเดิม **โดยไม่ error**
       (เจอมาแล้ว: เขียน background:var(--panel-border) → CSSOM อ่านได้ background-color: ว่าง)
       ค่าที่ใช้จึงต้องเป็นเลขจริง ตรงกับ token ข้างบน — แก้ธีมเมื่อไหร่ต้องมาแก้ตรงนี้ด้วย
   หมายเหตุ: กฎที่ซ่อนตัวเลื่อน (menu-tabs / m-rail) อยู่ท้ายไฟล์ จึงยังชนะกฎนี้ตามลำดับ cascade */
/* Firefox: scrollbar-color สืบทอดลงลูก แต่ scrollbar-width **ไม่สืบทอด** ต้องประกาศทุกตัว
   (กฎ .menu-tabs / .m-rail ที่ตั้ง none ยังชนะ เพราะ class เฉพาะเจาะจงกว่า universal) */
html{ scrollbar-color:#3f5330 transparent; }
:root[data-theme="light"]{ scrollbar-color:#d8c4a0 transparent; }
*{ scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
/* ขอบโปร่ง 2px รอบหัวจับ = ระยะห่างจากขอบพาเนล โดยไม่ต้องเบียดพื้นที่เนื้อหา */
::-webkit-scrollbar-thumb{
  background-color:#3f5330;          /* = --panel-border ของธีมมืด (ธีมเริ่มต้น) */
  border-radius:6px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background-color:#e8c873; }   /* = --gold ธีมมืด */
::-webkit-scrollbar-thumb:active{ background-color:#c9a84a; }
/* ⚠ เกมมีสองธีม (settings ตั้ง data-theme บน :root) และ var() ใช้ในนี้ไม่ได้
   → ต้องเขียนค่าซ้ำต่อธีมเอง · เคยพลาดมาแล้ว: ก๊อปสีจาก :root ตัวบนสุด (พาเลตต์กระดาษ)
     มาใส่ทั้งที่ธีมเริ่มต้นคือสีเขียวเข้ม = หัวจับเบจโผล่บนพาเนลเขียว ผิดเป้าหมายทั้งงาน */
:root[data-theme="light"] ::-webkit-scrollbar-thumb{ background-color:#d8c4a0; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background-color:#c8862a; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:active{ background-color:#8a5a12; }
::-webkit-scrollbar-corner{ background:transparent; }
/* ปุ่มลูกศร ▲▼ หัวท้าย: กล่องสี่เหลี่ยมของระบบที่เข้ากับอะไรไม่ได้เลย — ตัดทิ้ง */
::-webkit-scrollbar-button{ display:none; width:0; height:0; }
body.is-touch ::-webkit-scrollbar{ width:6px; height:6px; }   /* นิ้วลากอยู่แล้ว ไม่ต้องกว้าง */

/* กล่อง log พื้นมืด (rgba(8,12,8,.72)) — หัวจับสีแทนจะจมหายไปกับพื้น ใช้สีอักษร HUD หรี่ๆ แทน */
.log-body{ scrollbar-color:rgba(244,236,216,.34) transparent; }
.log-body::-webkit-scrollbar{ width:8px; }
.log-body::-webkit-scrollbar-thumb{ background-color:rgba(244,236,216,.34); }
.log-body::-webkit-scrollbar-thumb:hover{ background-color:rgba(244,236,216,.62); }

/* หน้าต่างลากย้ายได้ (PC) — จับพื้นที่ว่าง/หัวข้อลาก; มือถือปิดฟีเจอร์นี้ (เต็มจอ) */
body:not(.is-touch) .win-movable{ cursor:default; }
body:not(.is-touch) .win-dragging{ cursor:grabbing; user-select:none; box-shadow:0 12px 34px rgba(0,0,0,.55); }

/* ===== ลากไอเทม (DnD) — PC: กดลาก · มือถือ: กดค้างแล้วลาก ===== */
body:not(.is-touch) .inv-cell:not(.is-empty){ cursor:grab; }
.dnd-ghost{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none; transform:translate(-50%,-50%) scale(1.08); filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); opacity:.92; }
.dnd-ghost canvas{ width:44px; height:44px; image-rendering:pixelated; }
.dnd-ghost.touch{ transform:translate(-50%,-155%) scale(1.3); opacity:.96; }   /* ยกเหนือนิ้ว + ใหญ่ให้เห็นชัด */
body.dnd-active{ cursor:grabbing; }
body.dnd-active .inv-cell{ cursor:grabbing; }
/* ระหว่างลากบนสัมผัส: ตัด scroll ของพาเนล/เมนู ไม่ให้สู้กับการลาก */
body.dnd-active.is-touch, body.dnd-active.is-touch .inv-panel, body.dnd-active.is-touch .equip-panel,
body.dnd-active.is-touch .refine-panel, body.dnd-active.is-touch .menu-shell, body.dnd-active.is-touch .inv-cell{ touch-action:none; }
.inv-cell.dnd-press{ transform:scale(.88); transition:transform .1s ease; box-shadow:inset 0 0 0 2px var(--gold) !important; }
.dnd-source{ opacity:.35; }
.dnd-ok{ box-shadow:inset 0 0 0 2px var(--green), 0 0 0 1px var(--green) !important; }
/* เป้าที่รับของชิ้นนี้ไม่ได้: หรี่ลงชัดๆ — มองแวบเดียวรู้ว่าปล่อยได้ที่ไหน */
.dnd-no{ opacity:.45; filter:saturate(.4); }
/* เป้าระดับทั้งพาเนล (ร้าน/ประมูล): ขอบเขียวหนาเห็นแต่ไกล */
.shop-panel.dnd-ok, .ah-panel.dnd-ok{ outline:2px dashed var(--green); outline-offset:-4px; }
.shop-panel.dnd-over, .ah-panel.dnd-over{ outline:3px solid var(--green); background:rgba(79,138,91,.12) !important; }

/* ===== เมนูคลิกขวาของช่องกระเป๋า (PC) ===== */
.ctx-menu{
  position:fixed; z-index:9500; min-width:150px;
  display:flex; flex-direction:column; padding:4px;
  background:var(--win-bg); border:var(--win-border); border-radius:9px;
  box-shadow:var(--win-shadow);
}
.ctx-item{
  text-align:left; padding:7px 11px; border:0; border-radius:6px; cursor:pointer;
  background:none; color:var(--paper); font-family:inherit; font-size:12.5px;
}
.ctx-item:hover{ background:var(--panel-2); color:var(--gold-ink); }
.ctx-item.is-danger{ color:#a33d2d; }
.ctx-item.is-danger:hover{ background:rgba(163,61,45,.12); }
.dnd-over{ box-shadow:inset 0 0 0 3px var(--gold), 0 0 8px var(--gold) !important; background:rgba(200,134,42,.18) !important; }
/* ตัวเลือก dark (ปุ่มในตั้งค่า) — พาเนลเขียวเข้มแบบเดิม */
:root[data-theme="dark"]{
  --panel:#22331c; --panel-2:#2c4022; --panel-border:#3f5330;
  --ink:#eef4df; --paper:#eef4df; --muted:#a9bd93; --gold:#e8c873; --green:#7fd18a;
  --gold-ink:#e8c873; --green-ink:#7fd18a;   /* ธีมมืด: สีสดใสอ่านออกอยู่แล้ว */
}
:root[data-theme="light"]{
  --panel:#f2e9d0; --panel-2:#fbf5e7; --panel-border:#d8c4a0;
  --ink:#4a3a26; --paper:#4a3a26; --muted:#9c855f; --gold:#c8862a; --green:#4f8a5b;
  --gold-ink:#8a5a12; --green-ink:#2f6b3c;
}

*{box-sizing:border-box}
body{margin:0}
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:1.5rem 0;
  font-family:'Trebuchet MS',system-ui,sans-serif;
}
.title{
  color:var(--paper);
  font-size:20px;
  font-weight:700;
  letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
/* จอเกมเต็มเบราว์เซอร์ — แคนวาสขนาดคำนวณจากหน้าต่าง (main.applyViewport) วางกลาง พื้นรอบมืด */
.stage{ position:fixed; inset:0; z-index:1; }
.frame{
  position:absolute; inset:0;
  background:#08110a;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* player frame (มุมซ้ายบน): level badge + HP/SP/EXP bars */
/* กองมุมซ้ายบน: (การ์ดผู้เล่น + เงิน) แถวบน · ปุ่มบอทแถวล่าง
   เรียงด้วย flex ไม่ตั้งพิกัดทีละอัน → ไม่มีทางทับกันไม่ว่าการ์ดจะสูงแค่ไหน */
.hud-topleft{
  position:absolute; top:12px; left:12px; z-index:6;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  pointer-events:none;                  /* กองนี้เป็น HUD — คลิกทะลุไปโลกได้ */
}
.hud-topleft > *{ pointer-events:auto; }
.hud-toprow{ display:flex; align-items:flex-start; gap:10px; }
.currency{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:240px; }

/* ══ การ์ดผู้เล่นมุมซ้ายบน ══════════════════════════════════════════════
   ชั้นความลึก 3 ชั้น (แทนกล่องดำแบนๆ ของเดิม):
     1) เงาตกพื้น + ขอบทองบาง = การ์ดลอยเหนือโลก
     2) ไล่เฉดในตัวการ์ด (สว่างบน → มืดล่าง) = ผิวโค้งรับแสงบน
     3) เส้นไฮไลต์ 1px ด้านในขอบบน = ขอบโลหะ
   ⚠ ห้ามใส่ backdrop-filter — HUD ทับ canvas เกม เบลอทุกเฟรม = กิน GPU ฟรีๆ */
.playerframe{
  display:flex; align-items:stretch; gap:10px;
  padding:8px 12px 8px 8px;
  border:1px solid rgba(200,134,42,.55);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(58,52,38,.82), rgba(18,20,14,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,231,176,.20),      /* ไฮไลต์ขอบบน */
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 4px 14px rgba(0,0,0,.45);
}
/* กรอบรูปตัวละคร — ขอบทองสองชั้น + พื้นหลังฉากเวทีให้ตัวไม่ลอยกลางอากาศ */
.pf-portrait{
  position:relative; flex:0 0 auto; align-self:center;
  padding:2px; border-radius:9px;
  background:linear-gradient(180deg, #e0ac52, #8a5a12);   /* ขอบทองไล่เฉด = ขอบโลหะ ไม่ใช่เส้นแบน */
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
/* พื้นเวที: ฟ้าจางด้านบน → พื้นหญ้าเข้มด้านล่าง + เงาใต้เท้า */
.portrait{
  display:block; width:66px; height:108px; image-rendering:pixelated;
  border-radius:7px;
  background:
    radial-gradient(ellipse 60% 10% at 50% 88%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(120,150,96,.34), rgba(38,46,30,.92));
}
/* แสงสะท้อนแนวเฉียงบนกระจกกรอบรูป — ชิ้นเดียวที่ทำให้กรอบดู "มีผิว" */
.pf-portrait::after{
  content:""; position:absolute; inset:2px; border-radius:7px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0 28%, rgba(255,255,255,0) 46%);
}
.pf-col{ display:flex; flex-direction:column; justify-content:center; gap:5px; }
.pf-idrow{ display:flex; align-items:center; gap:8px; }
.charname{
  font-weight:700; color:var(--hud-text); font-size:15px; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5);
}
.charjob{
  font-size:10px; color:#e6bc6a; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.levelbadge{
  min-width:44px;
  padding:3px 8px;
  border:1px solid #e0ac52;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(224,172,82,.30), rgba(90,58,14,.55));
  box-shadow:inset 0 1px 0 rgba(255,231,176,.35), 0 1px 3px rgba(0,0,0,.5);
  color:#ffd98a;
  font-size:12px;
  font-weight:700;
  text-align:center;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.bars{ display:flex; flex-direction:column; gap:4px; }
/* รางหลอด = ร่องจม (เงาในขอบบน) · ตัวหลอดเป็นแท่งไล่เฉด + ไฮไลต์ผิวบน = ดูเป็นของแข็ง */
.statbar{
  position:relative;
  width:186px;
  border:1px solid rgba(0,0,0,.65);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.38));
  box-shadow:inset 0 2px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.hpbar{ height:15px; }
.spbar,.mpbar{ height:12px; }
.expbar{ height:10px; }   /* ⚠ ต้องสูงกว่าฟอนต์ #exptext เสมอ ไม่งั้นตัวเลขโดนตัดบน-ล่าง */
/* ผิวมันบนหลอด — ทับทุกหลอดด้วยกฎเดียว ไม่ต้องเขียนซ้ำ 4 รอบ */
.statbar::after{
  content:""; position:absolute; left:0; right:0; top:0; height:45%;
  border-radius:999px 999px 60% 60% / 999px 999px 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
#hpfill,#spfill,#mpfill,#expfill{
  position:absolute; inset:0; transition:width .12s linear; border-radius:999px;
}
#hpfill{ width:100%; background:linear-gradient(180deg,#8ff08a,#39a63f); box-shadow:0 0 8px rgba(95,209,95,.45); }
#spfill{ width:100%; background:linear-gradient(180deg,#ffd873,#c8901f); box-shadow:0 0 8px rgba(224,184,74,.4); }
#mpfill{ width:100%; background:linear-gradient(180deg,#8ed3ff,#2b74c0); box-shadow:0 0 8px rgba(74,166,232,.42); }
#expfill{ width:0%; background:linear-gradient(180deg,#ffe9a0,#d9a022); }
.statbar span{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7);
}
/* ⚠ ตัวหนังสือต้องเตี้ยกว่าหลอดเสมอ — #mptext เคยไม่มีกฎเลย เลยกินขนาดพื้นฐาน 14px
   ล้นหลอด 12px จนตัวอักษรถูกตัดครึ่ง (ผู้ใช้เห็นเป็น "MP 5/5 /") */
#hptext{ font-size:11px; }
#sptext,#mptext{ font-size:9px; }
#exptext{ font-size:8px; letter-spacing:.3px; }

/* เงิน/เพชร/จดหมาย — ตำแหน่งมาจาก .currency (flex) ห้ามตั้ง position เองอีก
   ⚠ ของเดิมทั้งสามอันตั้ง top:12px right:12px เหมือนกันเป๊ะ = ซ้อนทับกันสามชั้น
     และไปทับมินิแมพมุมขวาบนด้วย */
.goldbadge{
  padding:6px 10px;
  border:2px solid var(--gold);
  border-radius:10px;
  background:rgba(0,0,0,.35);
  color:var(--gold);
  font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* หน้าจอตาย (overlay เต็มเฟรม) */
.death-screen{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 45%, rgba(90,10,10,.55), rgba(4,4,6,.86));
}
.death-box{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.death-title{ font-size:34px; font-weight:800; color:#e05a5a; letter-spacing:2px; text-shadow:0 3px 10px rgba(0,0,0,.7); }
.death-sub{ font-size:15px; color:#f0e6d6; }
.death-sub span{ font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.death-btn{
  margin-top:6px; padding:10px 22px; border-radius:10px;
  border:2px solid #e05a5a; background:rgba(120,30,30,.6); color:#fff;
  font-size:15px; font-weight:700; cursor:pointer;
}
.death-btn:hover{ background:rgba(160,40,40,.75); }

/* ปุ่มช่วยเหลือ (มุมล่างขวา) + popup คำแนะนำปุ่ม */
.help-btn{
  position:absolute; bottom:12px; right:12px; z-index:7;
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--panel-border);
  background:rgba(0,0,0,.5); color:var(--hud-text);
  font-size:16px; font-weight:700; cursor:pointer;
}
.help-btn:hover{ border-color:var(--gold); color:var(--gold); }
/* มือถือ: ซ่อนทั้งปุ่มและ popup — เนื้อหาเป็นคีย์บอร์ดล้วน (ไร้ความหมายบนสัมผัส) และตำแหน่ง
   มุมล่างขวาทับปุ่มโจมตี/พุ่ง; คำแนะนำปุ่มสัมผัสอยู่ใน ☰ → ตั้งค่า แทน */
body.is-touch .help-btn,
body.is-touch .hint{ display:none !important; }

/* แถบเมนูล่าง (เดสก์ท็อป) — คลิกเปิดหน้าต่าง; มือถือซ่อน (ใช้ ☰) */
.menu-bar{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:7;
  display:flex; gap:6px; padding:4px;
  background:rgba(0,0,0,.42); border:2px solid var(--panel-border); border-radius:12px;
}
.menu-bar button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:54px; padding:5px 8px; border:none; border-radius:8px;
  background:transparent; color:var(--hud-text); font-size:11px; font-weight:700; cursor:pointer;
}
.menu-bar button span{ font-size:18px; line-height:1; }
.menu-bar button:hover{ background:rgba(255,255,255,.12); color:var(--gold); }
/* ── ไอคอนรูปจริง (elements/Icon ผ่าน src/icons.js) ──
   ⚠ image-rendering:pixelated ขาดไม่ได้ — ต้นฉบับ 38×38 px art ขยายแบบเรียบแล้วจะเบลอเป็นวุ้น
   ตัวรูปมีกรอบ/พื้นหลังมาในตัว จึงไม่ต้องมีกรอบปุ่มซ้อนอีกชั้น (ดู .menu-bar button:has(.mi)) */
.mi{
  display:block; background-repeat:no-repeat; background-position:center; background-size:contain;
  image-rendering:crisp-edges; image-rendering:pixelated;   /* pixelated ต้องอยู่ท้าย = ตัวที่ชนะ · crisp-edges เป็นตัวสำรองเบราว์เซอร์เก่า */
}
.menu-bar button span.mi{ width:34px; height:34px; }
.menu-bar button:hover span.mi{ filter:brightness(1.25); }
body.is-touch .menu-bar button span.mi{ width:26px; height:26px; }
/* มือถือใช้แถบเดียวกับ PC — แต่ต้องหลบโซนนิ้วโป้ง
   จอ landscape: จอย 20..140 ซ้าย · ปุ่มโจมตี ~130px ขวา · skillbar ลอยเหนือปุ่มขวา
   จึงบีบแถบให้อยู่ "ช่องกลางล่าง" แล้วจัดเป็นตาราง 6 คอลัมน์ 2 แถว — เห็นครบ 12 ปุ่มโดยไม่ต้องเลื่อน */
body.is-touch .menu-bar{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; padding:3px;
  left:50%; right:auto; transform:translateX(-50%); bottom:6px;
  width:calc(100vw - 320px); min-width:240px; max-width:420px;
  background:rgba(0,0,0,.55); border-radius:10px; z-index:20;
}
body.is-touch .menu-bar button{
  min-width:0; padding:3px 2px; font-size:9px; gap:1px; border-radius:6px;
}
body.is-touch .menu-bar button span{ font-size:14px; }
/* จอเตี้ยมาก (<340px) เหลือที่ไม่พอ 2 แถว → แถวเดียวเลื่อนแนวนอนแทน */
@media (max-height:339px){
  body.is-touch .menu-bar{
    display:flex; overflow-x:auto; scrollbar-width:none;
    justify-content:flex-start; max-width:none; width:calc(100vw - 320px);
  }
  body.is-touch .menu-bar::-webkit-scrollbar{ display:none; }
  body.is-touch .menu-bar button{ flex:0 0 auto; min-width:46px; }
}
/* เมนูเต็มจอเปิดอยู่ = ซ่อนแถบ (แถบแท็บของเมนูทำหน้าที่แทน) */
body.menu-open .menu-bar{ display:none; }
/* 8 ปุ่มกว้าง ~488px — บนหน้าต่างแคบจะชนปุ่ม ? มุมขวาล่าง จึงบีบปุ่มลง (ยังกดง่ายด้วยเมาส์) */
@media (max-width:760px){
  .menu-bar{ gap:3px; padding:3px; }
  .menu-bar button{ min-width:44px; padding:4px 5px; font-size:10px; }
  .menu-bar button span{ font-size:16px; }
}
/* status panel (overlay ซ้าย ใต้ player frame) */
.status-panel{
  position:absolute;
  top:74px;
  left:12px;
  max-height:calc(100% - 92px);
  overflow-y:auto;
  width:230px;
  padding:var(--win-pad);
  background:var(--win-bg);
  border:var(--win-border);
  border-radius:var(--win-radius);
  color:var(--paper);
  font-size:13px;
  box-shadow:var(--win-shadow);
  z-index:5;
}
.sp-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sp-title{ font-size:15px; font-weight:700; color:var(--gold); }
.sp-points{ font-size:12px; color:var(--muted); }
.sp-stats{ display:flex; flex-direction:column; gap:5px; }
.sp-stat-row{ display:flex; align-items:center; gap:8px; }
.sp-stat-name{ flex:1; display:flex; flex-direction:column; line-height:1.15; }
.sp-stat-label{ font-weight:700; }
.sp-stat-desc{ font-size:10px; color:var(--muted); }
.sp-stat-value{ min-width:22px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.sp-plus{
  width:22px; height:22px;
  border:1px solid var(--panel-border);
  border-radius:6px;
  background:#37592b;
  color:#fff; font-size:15px; font-weight:700; line-height:1;
  cursor:pointer;
}
.sp-plus:hover:not(.is-disabled){ background:#4a7a3a; }
.sp-plus.is-disabled{ opacity:.35; cursor:default; }
.sp-divider{ height:1px; background:var(--panel-border); margin:10px 0; opacity:.6; }
.sp-derived{ display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
.sp-derived-cell{ display:flex; justify-content:space-between; }
.sp-derived-label{ color:var(--muted); }
.sp-derived-value{ font-weight:700; font-variant-numeric:tabular-nums; }
/* สถิติดวล — แถวเดี่ยวใต้ค่า derived (คั่นเส้นเพราะเป็นคนละหมวด: ประวัติ ไม่ใช่ค่าพลัง) */
.sp-duel{ display:flex; justify-content:space-between; align-items:center;
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--panel-border); font-size:12px; }
.sp-duel-rec{ font-variant-numeric:tabular-nums; color:var(--muted); }
.sp-duel-rec.win{ color:var(--green-ink); font-weight:700; }
.sp-duel-rec.lose{ color:#a33; }
.sp-hint{ margin-top:10px; font-size:11px; color:var(--muted); text-align:center; }

/* equipment panel (กลางจอ: กระดานตุ๊กตา + พรีวิว + สเตตัส) — เปิดด้วย P */
.equip-panel{
  position:absolute;
  top:54px; left:50%; transform:translateX(-50%);
  width:272px;
  max-height:calc(100% - 72px);
  overflow-y:auto;
  padding:var(--win-pad);
  background:var(--win-bg);
  border:var(--win-border);
  border-radius:var(--win-radius);
  color:var(--paper); font-size:13px;
  box-shadow:var(--win-shadow);
  z-index:6;
}
.eq-doll{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  grid-template-areas:
    ".    helm .   "
    "wep1 prev top "
    "wep2 prev bot "
    "shld prev cape"
    "tool prev ear "
    "neck prev .   ";
  gap:8px;
  align-items:start;
  justify-items:center;
  margin-top:4px;
}
.eq-slot{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.eq-slot-label{ font-size:10px; color:var(--muted); white-space:nowrap; }
.eq-preview{ display:flex; align-items:center; justify-content:center; align-self:stretch; }
.eq-preview-canvas{
  width:116px; height:162px;
  image-rendering:pixelated;
  background:radial-gradient(ellipse at 50% 64%, rgba(90,120,66,.4), rgba(0,0,0,.28));
  border:1px solid var(--panel-border); border-radius:8px;
}
.eq-stat-title{
  margin:12px 0 6px; padding-top:9px;
  font-weight:700; color:var(--gold); text-align:center; font-size:13px;
  border-top:1px solid var(--panel-border);
}
.eq-stats{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.eq-stat-col{ display:flex; flex-direction:column; gap:3px; }
.eq-stat-row{ display:flex; justify-content:space-between; align-items:baseline; }
.eq-stat-k{ color:var(--muted); }
.eq-stat-v{ font-weight:700; font-variant-numeric:tabular-nums; }
.eq-power{ display:flex; justify-content:space-between; align-items:center; margin:2px 0 6px; padding:6px 10px; background:var(--panel-2); border:1px solid var(--panel-border); border-radius:8px; }
.eq-power-k{ font-weight:700; color:var(--gold); }
.eq-power-v{ font-weight:700; font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
.eq-line{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:4px 0; font-size:12px; }
.eq-line-k{ color:var(--muted); white-space:nowrap; }
.eq-line-v{ font-weight:700; text-align:right; }

/* ===== มือถือ / สัมผัส ===== */
/* กัน pull-to-refresh + ไฮไลต์แตะ + เลือกข้อความ (แต่ให้พาเนลยัง scroll ได้ = ไม่ตั้ง touch-action ที่ body) */
html, body{ overscroll-behavior:none; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
#game{ touch-action:none; }

/* ปุ่มควบคุมสัมผัส — อยู่ใน DOM เสมอ ซ่อนไว้จนกว่า body.is-touch */
.touch-controls{ display:none; }
body.is-touch .touch-controls{ display:block; }
.touch-controls, .touch-controls *{ touch-action:none; -webkit-user-select:none; user-select:none; }

/* จอยสติ๊ก (ล่างซ้าย) */
.tc-joy{
  position:absolute; left:20px; bottom:20px; z-index:20;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), rgba(0,0,0,.30));
  border:2px solid rgba(255,255,255,.28);
  touch-action:none;
}
.tc-knob{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:rgba(232,200,115,.85);
  border:2px solid rgba(0,0,0,.35); box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* กลุ่มปุ่ม action (ล่างขวา) */
.tc-right{ position:absolute; right:18px; bottom:18px; z-index:20; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
/* (.tc-skills / .tc-skill ถอดออกแล้ว — สกิลใช้ .skillbar อันเดียวทั้ง PC/มือถือ) */
.tc-main{ display:flex; align-items:flex-end; gap:12px; }
.tc-btn{
  border:2px solid rgba(255,255,255,.28); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.tc-atk{ width:88px; height:88px; border-radius:50%; background:rgba(200,70,70,.78); font-size:20px; }
.tc-press{ filter:brightness(1.25); transform:scale(.94); }

/* มุมขวาบน: คุย + เมนู (หลบ gold badge ที่ z-index 6) */
.tc-top{ position:absolute; right:12px; top:52px; z-index:20; display:flex; gap:8px; }
.tc-top-btn{
  min-width:52px; height:44px; padding:0 12px; border-radius:12px;
  border:2px solid rgba(255,255,255,.28); background:rgba(30,40,26,.72);
  color:var(--hud-text); font-size:15px; font-weight:700;
}
.tc-menu{ font-size:20px; }

/* overlay ขอหมุนจอ — เฉพาะสัมผัส + portrait */
.rotate-hint{ display:none; }
body.is-touch .rotate-hint{ display:none; }
@media (orientation:portrait){
  body.is-touch .rotate-hint{
    display:flex; position:fixed; inset:0; z-index:100;
    align-items:center; justify-content:center;
    background:#08110a; color:var(--hud-text); text-align:center;
  }
}
.rotate-inner{ font-size:20px; line-height:1.8; font-weight:700; }

/* ===== เมนูเต็มจอ (มือถือ): ☰ เปิด → แท็บ ตัวละคร/กระเป๋า/สกิล/ตั้งค่า ===== */
.menu-shell{ position:fixed; inset:0; background:rgba(4,8,4,.72); z-index:35; display:none; }
.menu-tabs{ position:fixed; left:0; right:0; bottom:0; height:56px; z-index:46; display:none;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.menu-tabs::-webkit-scrollbar{ display:none; }
/* 9 แท็บบนจอแคบ: กันบีบจนอ่านไม่ออก — ให้กว้างขั้นต่ำแล้วเลื่อนเอา */
.menu-tab{ min-width:74px; white-space:nowrap; }
.menu-tab{ flex:1; border:none; border-top:2px solid var(--panel-border); background:var(--panel); color:var(--muted); font-size:14px; font-weight:700; }
.menu-tab.is-active{ color:var(--gold); background:var(--panel-2); }
.menu-close{ flex:0 0 56px; color:#f0a0a0; font-size:18px; }
/* ปุ่มควบคุมสัมผัสซ่อนตอนเมนูเปิด (กันทับ) */
body.menu-open .touch-controls{ display:none; }
/* พาเนลในเมนู = แผ่นเต็มจอเหนือแถบแท็บ */
body.menu-open .status-panel,
body.menu-open .inv-panel,
body.menu-open .equip-panel,
body.menu-open .skill-panel,
body.menu-open .quest-panel,
body.menu-open .ah-panel,
body.menu-open .fashion-panel,
body.menu-open .bot-panel,
body.menu-open .settings-panel{
  position:fixed; left:0; top:0; right:0; bottom:56px; transform:none;
  width:100%; max-width:100%; max-height:none; height:auto;
  border-radius:0; border:none; z-index:40; overflow-y:auto; padding:16px;
}
body.menu-open .inv-panel, body.menu-open .skill-panel{ display:flex; flex-direction:column; align-items:center; }
/* สมุดเควสบนมือถือ: จำกัดความกว้างคอลัมน์ ไม่ให้การ์ดยืดเต็มจอกว้างจนอ่านยาก */
body.menu-open .quest-list{ max-width:520px; margin:0 auto; }
body.menu-open .quest-x{ display:none; }   /* ปิดด้วยแท็บ ✕ ของเมนูอยู่แล้ว */
/* ป้าย "ครบแล้ว" ในสมุดเควส (กดรับที่นี่ไม่ได้) */
.quest-ready-note{ margin-top:4px; font-size:11px; font-weight:700; color:#8fe0a0; }
body.menu-open .eq-doll, body.menu-open .eq-stats{ max-width:380px; margin-left:auto; margin-right:auto; }
/* split-screen (แท็บ อุปกรณ์): ซ้าย = สวมใส่ 42% / ขวา = กระเป๋า 58% */
body.menu-open.split-gear .equip-panel{ left:0; right:auto; width:42%; border-right:2px solid var(--panel-border); }
body.menu-open.split-gear .inv-panel{ left:42%; right:0; width:58%; }

/* หน้าตั้งค่า */
.settings-panel{
  position:absolute; top:54px; left:50%; transform:translateX(-50%);
  width:272px; padding:var(--win-pad);
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  color:var(--paper); box-shadow:var(--win-shadow); z-index:6;
}
/* หน้าตั้งค่ายาวขึ้นมาก (ภาพ/ควบคุม/หน้าต่าง) — ต้องเลื่อนได้ ไม่งั้นล้นจอเตี้ย */
.settings-panel{ max-height:calc(100% - 72px); overflow-y:auto; }
/* 3 ปุ่ม (สูง/กลาง/ต่ำ) + ป้ายกำกับ กว้างเกินแผง 272px -> ให้ตกบรรทัดเองแทนบีบปุ่มจนกดยาก */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0; flex-wrap:wrap; }
.set-label{ color:var(--muted); font-weight:700; }
.set-btns{ display:flex; gap:6px; flex:1 1 auto; justify-content:flex-end; }
.set-btn{ min-width:52px; height:44px; padding:0 10px; border-radius:10px; border:2px solid var(--panel-border); background:var(--panel-2); color:var(--paper); font-weight:700; cursor:pointer; }
.set-btn.is-active{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
/* หัวข้อกลุ่ม — แบ่งหมวดให้กวาดตาเจอเร็ว แทนที่จะเป็นแถวยาวเรียงกันรวด */
.set-group{
  margin:14px 0 6px; padding-bottom:3px;
  font-size:12px; font-weight:700; color:var(--gold);
  border-bottom:1px solid var(--panel-border);
}
.set-group:first-of-type{ margin-top:8px; }
.set-sub{ margin:-4px 0 8px; font-size:11px; color:var(--dim, #6d6a78); line-height:1.5; }
.set-hint{ font-size:12px; color:var(--muted); line-height:1.8; }

/* ===== touch: ช่องใหญ่ 48px + แถบ action/เทียบสเตตัส + quick-equip filter ===== */
body.is-touch .inv-grid{ justify-content:center; }   /* ขนาดช่องมาจาก --slot ที่ override ใน body.is-touch แล้ว */
body.is-touch .inv-equip-grid{ gap:var(--slot-gap); justify-content:center; }
body.is-touch .inv-tooltip{ display:none !important; }   /* ไม่ใช้ hover tooltip บนสัมผัส */
body.is-touch .inv-dim{ opacity:.28; }
body.is-touch .inv-match{ box-shadow:inset 0 0 0 3px var(--gold) !important; }


/* โต๊ะหลอมไอเทม (ใต้กริดกระเป๋า) */
.fusion-box{ margin-top:12px; padding:10px 12px; border:2px solid var(--panel-border); border-radius:10px; background:var(--panel-2); }
.fusion-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.fusion-title{ font-weight:700; color:var(--gold); }
.fusion-sub{ font-size:11px; color:var(--muted); }
.fusion-main{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fusion-slots{ display:grid; grid-template-columns:repeat(5, var(--slot)); gap:var(--slot-gap); }
.fusion-arrow{ font-size:22px; color:var(--muted); font-weight:700; }
.fusion-res{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.fusion-res-label{ font-size:11px; color:var(--muted); white-space:nowrap; }
.fusion-res-cell{ box-shadow:inset 0 0 0 2px var(--gold) !important; }
.fusion-btns{ display:flex; gap:8px; margin-top:10px; }
.fusion-auto{ flex:0 0 auto; height:44px; padding:0 14px; border-radius:10px; border:2px solid var(--panel-border); background:#6a4a2a; color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.fusion-auto:hover{ filter:brightness(1.12); }
.fusion-btn{ flex:1; height:44px; border-radius:10px; border:2px solid var(--panel-border); background:#37592b; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
.fusion-btn:disabled{ opacity:.45; cursor:default; }
.fusion-btn.is-ready{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
.fusion-msg{ margin-top:6px; font-size:12px; color:var(--gold); text-align:center; min-height:16px; }
.inv-infusion{ box-shadow:inset 0 0 0 3px #c8862a !important; opacity:.5; }

/* ═══ WORKBENCH (โต๊ะช่างฝีมือ): แท็บ ตีอาวุธ / หลอม / แยกชิ้นส่วน ═══ */
.wb-tabs{ display:flex; gap:0; border-bottom:2px solid var(--panel-border); border-radius:8px 8px 0 0; overflow:hidden; }
.wb-tab{ flex:1; padding:9px 4px; border:0; background:transparent; color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; border-bottom:3px solid transparent; transition:background .12s,color .12s; }
.wb-tab:hover{ background:rgba(200,134,42,.10); }
.wb-tab.is-active{ color:var(--gold); background:rgba(200,134,42,.14); border-bottom-color:var(--gold); }
.wb-panel{ position:relative; padding:11px 12px; }
/* โต๊ะหลอมเดิม ฝังในแท็บ → ไม่ต้องมีกรอบซ้อน */
.wb-fuse .fusion-box{ margin-top:0; padding:0; border:0; background:transparent; }

/* --- แท็บ ตีอาวุธ (craft) --- */
.craft-main{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.craft-grid{ display:grid; grid-template-columns:repeat(5, var(--slot)); grid-auto-rows:var(--slot); gap:var(--slot-gap); }
.craft-cell{ position:relative; width:var(--slot); height:var(--slot); border-radius:var(--slot-radius); background:#e7dcc0; box-shadow:inset 0 0 0 2px var(--panel-border); display:flex; align-items:center; justify-content:center; }
.craft-cell .inv-cell-canvas{ width:var(--slot-canvas); height:var(--slot-canvas); image-rendering:pixelated; }
.craft-cell.is-empty{ background:repeating-linear-gradient(45deg,#e7dcc0,#e7dcc0 4px,#e0d3b2 4px,#e0d3b2 8px); box-shadow:inset 0 0 0 1px var(--panel-border); }
.craft-cell.mat-ok{ box-shadow:inset 0 0 0 2px var(--green); }
.craft-cell.mat-short{ box-shadow:inset 0 0 0 2px #b0503a; }
.craft-cell-badge{ position:absolute; right:1px; bottom:0; font-size:10px; font-weight:700; line-height:1.1; padding:0 2px; border-radius:4px; background:rgba(42,36,24,.82); color:#fff; }
.craft-cell.mat-ok .craft-cell-badge{ background:var(--green); }
.craft-cell.mat-short .craft-cell-badge{ background:#b0503a; }
.craft-arrow{ font-size:22px; color:var(--muted); font-weight:700; }
/* ผืนวาด VFX ของช่องผลลัพธ์งานคราฟ (src/craftfx.js)
   ยื่นออกนอกช่องเพื่อให้สะเก็ดกระเด็นพ้นขอบได้ · ห้ามรับ pointer ไม่งั้นบังการลากวาง */
.craftfx-layer{ position:absolute; pointer-events:none; z-index:6; image-rendering:pixelated; }

.craft-out{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.craft-out-label{ font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.5px; }
.craft-out-cell{ box-shadow:inset 0 0 0 2px var(--gold) !important; cursor:pointer; }
.craft-out-cell:hover{ filter:brightness(1.06); }
.craft-info{ margin-top:9px; font-size:12px; color:var(--paper); text-align:center; min-height:16px; }
.craft-info .ci-ok{ color:var(--green); font-weight:700; }
.craft-info .ci-bad{ color:#b0503a; font-weight:700; }
.craft-info .ci-was{ color:var(--muted); opacity:.7; }   /* ราคาก่อนหักส่วนลดหมุด */
.craft-btns{ display:flex; gap:8px; margin-top:9px; }
.craft-pick{ flex:0 0 auto; height:42px; padding:0 12px; border-radius:10px; border:2px solid var(--panel-border); background:#6a4a2a; color:#fff; font-weight:700; font-size:13px; cursor:pointer; }
.craft-pick:hover{ filter:brightness(1.12); }
.craft-btn{ flex:1; height:42px; border-radius:10px; border:2px solid var(--panel-border); background:#37592b; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
.craft-btn:disabled{ opacity:.5; cursor:default; }
.craft-btn.is-ready{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
.craft-msg{ margin-top:6px; font-size:12px; color:var(--gold); text-align:center; min-height:16px; }
/* คลังวัตถุดิบ */
.mat-strip-label{ margin-top:10px; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.5px; }
/* ⚠ ต้องเป็น block — เดิมเป็น flex ทำให้ .mat-grid ข้างในกลายเป็น flex item ที่หดตามเนื้อหา
   auto-fill เลยคำนวณความกว้างได้แค่ช่องเดียว = ของเรียงลงมาเป็นแถวเดียว เหลือที่ว่างข้างๆ ทั้งแถบ */
.mat-strip{ margin-top:5px; }
.mat-chip{ display:flex; align-items:center; gap:2px; padding:2px 5px 2px 2px; border-radius:8px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--panel-border); }
.mat-chip-icon{ width:24px; height:24px; image-rendering:pixelated; }
.mat-chip-n{ font-size:12px; font-weight:700; color:var(--paper); }
.mat-empty{ font-size:11px; color:var(--muted); font-style:italic; }
/* คลังวัตถุดิบ: แท็บหมวด + ตารางช่องสแตก (ของจะมีเป็นร้อยชนิด แถบชิปแบนๆ เอาไม่อยู่) */
.matcat-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.matcat-tab{ font:inherit; font-size:10px; font-weight:700; padding:3px 7px; border-radius:7px; cursor:pointer;
  color:var(--muted); background:var(--panel); border:1px solid var(--panel-border); }
.matcat-tab:hover{ color:var(--paper); }
.matcat-tab.is-active{ color:var(--paper); background:var(--panel-2, var(--panel)); border-width:2px; padding:2px 6px; }
.mat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:4px;
  max-height:132px; overflow-y:auto; }
.mat-cell{ position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:7px; background:var(--panel); border:1px solid var(--panel-border); }
.mat-cell-icon{ width:30px; height:30px; image-rendering:pixelated; }
.mat-cell-n{ position:absolute; right:2px; bottom:1px; font-size:10px; font-weight:700; color:var(--paper);
  text-shadow:0 1px 2px #000, 0 0 3px #000; font-variant-numeric:tabular-nums; }
/* recipe picker (overlay) */
.recipe-picker{ position:absolute; left:12px; right:12px; margin-top:8px; max-height:230px; overflow-y:auto; padding:8px; border:2px solid var(--gold); border-radius:10px; background:var(--panel); box-shadow:var(--win-shadow); z-index:12; }
.rp-title{ font-size:12px; font-weight:700; color:var(--gold); margin-bottom:6px; }
.rp-empty{ font-size:12px; color:var(--muted); font-style:italic; padding:6px 2px; }
/* ── แท็บรีโรลพร (ในโต๊ะช่าง) ── */
.rr-hint{ font-size:10px; color:var(--muted); margin-bottom:7px; line-height:1.4; }
.rr-empty{ font-size:12px; color:var(--muted); font-style:italic; padding:14px 0; text-align:center; }
.rr-item{ display:flex; align-items:center; gap:8px; padding:6px; margin-bottom:6px;
  background:rgba(0,0,0,.26); border:1px solid rgba(200,134,42,.3); border-radius:8px; }
.rr-icon{ width:34px; height:34px; image-rendering:pixelated; flex:0 0 auto; }
.rr-name{ font-size:13px; font-weight:700; color:var(--paper); }
.rr-warn{ font-size:11px; color:#e0a860; padding:6px 2px; }
.rr-affixes{ margin-bottom:7px; }
.rr-affix{ font-size:11px; color:#b48ae0; line-height:1.5; }
.rr-cost{ font-size:11px; color:var(--paper); opacity:.9; }
.rr-cost.is-short{ color:#ff8f7a; }
.rr-btn{ display:block; width:100%; margin-top:8px; padding:7px; font-size:12px; font-weight:700;
  color:#1b1712; background:var(--gold); border:none; border-radius:7px; cursor:pointer; }
.rr-btn:disabled{ background:rgba(120,110,95,.4); color:var(--muted); cursor:default; }

/* ── กระดานรับซื้อของสมาคม (อยู่ในหน้าต่างสมาคม) ── */
.gd-sec{ font-size:12px; font-weight:700; color:var(--gold); margin:10px 0 2px;
  padding-bottom:3px; border-bottom:1px solid rgba(200,134,42,.3); }
.gd-jobhead{ font-size:10px; color:var(--muted); margin-bottom:5px; }
.gd-jobs{ display:flex; flex-direction:column; gap:4px; }
.gd-job{ display:flex; align-items:center; gap:7px; padding:5px 6px;
  background:rgba(0,0,0,.24); border:1px solid rgba(200,134,42,.16); border-radius:8px; }
.gd-job.is-ok{ background:rgba(79,138,91,.15); border-color:rgba(111,190,126,.5); }
.gd-job-icon{ width:28px; height:28px; image-rendering:pixelated; flex:0 0 auto; }
.gd-job-info{ flex:1; min-width:0; }
.gd-job-name{ font-size:12px; font-weight:700; color:var(--paper); }
.gd-job-have{ font-size:10px; color:var(--muted); }
.gd-job-pay{ font-size:10px; color:#9fe0a8; }
.gd-job-btn{ flex:0 0 auto; padding:5px 12px; font-size:11px; font-weight:700; color:#1b1712;
  background:var(--gold); border:none; border-radius:6px; cursor:pointer; }
.gd-job-btn:disabled{ background:rgba(120,110,95,.4); color:var(--muted); cursor:default; }

/* ── สมุดสะสม: ปลา / การ์ด / ฉายา ── */
.col-panel{ position:absolute; left:50%; top:8%; transform:translateX(-50%); width:392px; max-height:78vh; display:flex; flex-direction:column;
  padding:10px; border:2px solid var(--gold); border-radius:12px; background:var(--panel); box-shadow:var(--win-shadow); z-index:14; }
.col-tabs{ display:flex; gap:4px; margin:6px 0 4px; }
.col-tab{ flex:1; padding:5px 4px; font-size:12px; font-weight:700; color:var(--muted);
  background:rgba(0,0,0,.25); border:1px solid rgba(200,134,42,.3); border-radius:7px; cursor:pointer; }
.col-tab.is-on{ color:var(--paper); background:rgba(200,134,42,.22); border-color:var(--gold); }
.col-body{ flex:1; overflow-y:auto; padding-right:2px; }
.col-zones{ display:flex; flex-wrap:wrap; gap:3px; margin-bottom:6px; }
.col-zone{ padding:3px 6px; font-size:10px; color:var(--muted); background:rgba(0,0,0,.22);
  border:1px solid rgba(200,134,42,.22); border-radius:6px; cursor:pointer; }
.col-zone.is-on{ color:var(--paper); border-color:var(--gold); background:rgba(200,134,42,.2); }
.col-zone.is-done{ color:#8fe07a; }
.col-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:4px; }
.col-cell{ position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.34); border:1px solid rgba(200,134,42,.2); border-radius:6px; }
.col-cell.is-got{ background:rgba(200,134,42,.12); border-color:rgba(200,134,42,.5); }
.col-icon{ width:32px; height:32px; image-rendering:pixelated; }
.col-unknown{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#3a352c; }
.col-cur{ font-size:12px; font-weight:700; color:var(--gold); margin-bottom:5px; }
.col-group{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.4px; margin:9px 0 3px;
  padding-bottom:2px; border-bottom:1px solid rgba(200,134,42,.26); }
.col-title{ display:flex; align-items:center; gap:8px; padding:6px; margin-bottom:4px;
  background:rgba(0,0,0,.22); border:1px solid rgba(200,134,42,.16); border-radius:8px; opacity:.62; }
.col-title.is-on{ opacity:1; border-color:rgba(200,134,42,.45); }
.col-title.is-eq{ background:rgba(79,138,91,.18); border-color:#6fbe7e; }
.col-title-info{ flex:1; min-width:0; }
.col-title-name{ font-size:12px; font-weight:700; color:var(--paper); }
.col-title-desc{ font-size:10px; color:var(--muted); }
.col-title-stats{ font-size:10px; color:#9fe0a8; margin-top:1px; }
.col-title-prog{ font-size:10px; color:#e0a860; margin-top:1px; }
.col-btn{ flex:0 0 auto; padding:4px 10px; font-size:11px; font-weight:700; color:#1b1712;
  background:var(--gold); border:none; border-radius:6px; cursor:pointer; }
.col-btn.col-off{ display:block; margin:0 0 6px; background:rgba(0,0,0,.3); color:var(--muted); border:1px solid rgba(200,134,42,.3); }
.col-eqmark{ flex:0 0 auto; font-size:10px; font-weight:700; color:#8fe07a; }

/* สารานุกรมไอเทมในทูลทิป — คำบรรยาย + ที่มา + ใช้ทำอะไร */
.tt-lore{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(200,134,42,.22); font-size:11px; line-height:1.45; color:#c9bda4; font-style:italic; }
.tt-dex{ margin-top:5px; }
.tt-dex-h{ display:block; font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--gold); margin-bottom:1px; }
.tt-dex-l{ font-size:11px; line-height:1.4; color:var(--paper); opacity:.88; padding-left:2px; }
.rp-head{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.4px; margin:8px 0 3px; padding-bottom:2px; border-bottom:1px solid rgba(200,134,42,.28); }
.rp-head:first-of-type{ margin-top:2px; }
.rp-row{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:8px; cursor:pointer; }
.rp-row:hover{ background:rgba(200,134,42,.14); }
.rp-row.is-ok{ background:rgba(79,138,91,.14); }
.rp-icon{ width:30px; height:30px; image-rendering:pixelated; flex:0 0 auto; }
.rp-info{ flex:1; min-width:0; }
.rp-name{ font-size:13px; font-weight:700; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-sub{ font-size:10px; color:var(--muted); }
.rp-ok{ color:var(--green); font-weight:700; font-size:16px; }

/* --- แท็บ แยกชิ้นส่วน (salvage) --- */
.salvage-hint{ font-size:12px; color:var(--muted); text-align:center; margin-bottom:10px; }
.salvage-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:110px; border:2px dashed var(--panel-border); border-radius:12px; background:repeating-linear-gradient(45deg,#efe6cd,#efe6cd 6px,#e7dcc0 6px,#e7dcc0 12px); transition:border-color .12s,background .12s; }
.salvage-drop.dnd-ok{ border-color:var(--green); background:rgba(79,138,91,.12); }
.salvage-drop.dnd-over{ border-color:var(--gold); background:rgba(200,134,42,.16); }
.salvage-drop-icon{ font-size:32px; opacity:.8; }
.salvage-drop-label{ font-size:12px; color:var(--muted); font-weight:700; }
.salvage-msg{ margin-top:8px; font-size:12px; color:var(--gold); text-align:center; min-height:16px; }

/* ═══ แท็บหลักในพาเนลสกิล + แผงไลฟ์สกิล ═══ */
.skill-maintabs{ display:flex; gap:6px; margin-bottom:10px; }
.skill-maintab{ flex:1; padding:8px 4px; border:2px solid var(--panel-border); border-radius:9px; background:var(--panel-2); color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; }
.skill-maintab:hover{ filter:brightness(1.05); }
.skill-maintab.is-active{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
.life-body{ display:flex; flex-direction:column; gap:10px; }
.life-row{ display:flex; align-items:center; gap:11px; padding:10px 11px; border:2px solid var(--panel-border); border-radius:11px; background:var(--panel-2); }
.life-icon{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:26px; border:2px solid; border-radius:10px; background:var(--panel); }
/* ช่องที่ได้รูปจริง (.has-img จาก applyLifeIcon) — รูปมีกรอบ/พื้นมาในตัวแล้ว
   ⚠ ต้องถอดกรอบ 2px ออกจริงๆ (ไม่ใช่แค่ทำใส) ไม่งั้นกล่องเนื้อหาเหลือ 42px = รูปไม่ชนขอบ
   ⚠ background-size ต้อง 100% ทับ contain ของ .mi ไม่งั้นรูปเว้นขอบตามอัตราส่วน */
.life-icon.has-img{
  border:0; background-color:transparent; width:52px; height:52px;
  background-size:100% 100%;
}
.life-main{ flex:1; min-width:0; }
.life-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.life-name{ font-size:15px; font-weight:700; color:var(--paper); }
.life-lv{ font-size:14px; font-weight:800; }
.life-bar{ position:relative; height:16px; margin:6px 0 5px; border-radius:8px; background:#e0d3b2; box-shadow:inset 0 0 0 1px var(--panel-border); overflow:hidden; }
.life-bar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:8px 0 0 8px; transition:width .3s; }
.life-bar-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#3a2e18; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.life-desc{ font-size:11px; color:var(--muted); line-height:1.35; }
/* หมุดทุก 10 เลเวล: โบนัสที่ได้อยู่ + อันถัดไปที่ต้องรอ (99 เลเวลต้องมีอะไรให้เล็ง) */
.life-perk{ font-size:10.5px; color:var(--gold, #e8c873); line-height:1.35; margin-top:3px; }
.life-next{ font-size:10px; color:var(--muted); font-style:italic; line-height:1.3; margin-top:2px; }
.life-row.is-soon{ opacity:.5; }
.life-soon{ flex:0 0 auto; font-size:10px; font-weight:700; color:var(--muted); padding:3px 7px;
  border:1px dashed var(--panel-border); border-radius:7px; white-space:nowrap; }

/* บอร์ดเควส (dialog) */
.quest-panel{ position:absolute; top:54px; left:50%; transform:translateX(-50%); width:340px; max-height:calc(100% - 72px); overflow-y:auto; padding:var(--win-pad); background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius); color:var(--paper); z-index:8; box-shadow:var(--win-shadow); }
.quest-x{ border:none; background:transparent; color:var(--muted); font-size:16px; font-weight:700; cursor:pointer; }
.quest-list{ display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.quest-sec{ font-size:12px; font-weight:700; color:var(--gold); margin-top:4px; }
.quest-empty{ font-size:12px; color:var(--muted); padding:4px 0; }
.quest-sec.is-story{ color:#c8a8e8; }
/* เช็กลิสต์เป้าหมาย (เควสที่มีหลายข้อ) */
.quest-objs{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.quest-obj{ display:flex; align-items:baseline; gap:6px; font-size:12px; color:var(--paper); }
.quest-obj.is-done{ color:var(--muted); text-decoration:line-through; }
.quest-obj-tick{ color:#8fe0a0; font-weight:700; }
.quest-obj.is-done .quest-obj-tick{ color:var(--muted); }
.quest-card{ padding:8px 10px; border:1px solid var(--panel-border); border-radius:8px; background:var(--panel-2); }
.quest-card.is-ready{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.quest-name{ font-weight:700; }
.quest-desc{ font-size:11px; color:var(--muted); margin-top:1px; }
.quest-reward{ font-size:11px; color:#3f7a4e; margin-top:2px; font-weight:700; }
.quest-prog{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.quest-bar{ flex:1; height:8px; border-radius:5px; background:rgba(0,0,0,.14); overflow:hidden; }
.quest-bar-fill{ height:100%; background:var(--gold); transition:width .2s; }
.quest-count{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.quest-btn{ margin-top:7px; width:100%; height:38px; border-radius:8px; border:none; background:var(--gold); color:#2a2410; font-weight:700; cursor:pointer; }
.quest-accept{ background:#37592b; color:#fff; }
.quest-btn:hover{ filter:brightness(1.08); }

/* ตัวติดตามเควส (มุมขวา ใต้เงิน) */
.quest-tracker{ position:absolute; top:78px; right:12px; z-index:6; min-width:150px; max-width:230px; padding:6px 10px; background:rgba(0,0,0,.42); border:2px solid var(--panel-border); border-radius:10px; }
.qt-title{ font-size:11px; font-weight:700; color:var(--gold); margin-bottom:3px; }
.qt-row{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--hud-text); }
.qt-row.is-ready .qt-count{ color:#7fd18a; font-weight:700; }
.qt-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qt-count{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* inventory panel (ขวา ใต้เงิน) */
.inv-panel{
  position:absolute;
  top:54px;
  right:12px;
  /* ⚠ ต้องกว้างพอสำหรับ 5 ช่อง + ช่องไฟ + รางตัวเลื่อน 10px + padding ของ .inv-grid
     ไม่งั้นตารางล้นแนวนอน (overflow-x:hidden แค่ซ่อนแถบ ไม่ได้ทำให้ของพอดี) */
  width:268px;
  max-height:calc(100% - 72px);
  overflow-y:auto;
  padding:var(--win-pad);
  background:var(--win-bg);
  border:var(--win-border);
  border-radius:var(--win-radius);
  color:var(--paper);
  font-size:13px;
  box-shadow:var(--win-shadow);
  z-index:5;
}
.inv-section-label{ font-size:11px; color:var(--muted); margin:4px 0 4px; }

/* refine panel (ตีบวก ⚒) — วางมุมขวาเหมือน inventory */
.refine-panel{
  position:absolute; top:54px; right:272px; width:306px;   /* ตั้งต้นซ้ายของกระเป๋า → เปิดคู่กันไม่ทับ (ลากย้ายได้) */
  max-height:calc(100% - 72px); overflow-y:auto;
  padding:var(--win-pad); background:var(--win-bg);
  border:var(--win-border); border-radius:var(--win-radius);
  color:var(--paper); font-size:13px; box-shadow:var(--win-shadow); z-index:6;
}
/* โต๊ะช่าง 4 แท็บในหน้าต่างตีบวก — ตัวหนังสือเล็กลงให้ครบ 4 อันในแถวเดียว */
.refine-panel .wb-tabs{ margin:2px 0 9px; border:2px solid var(--panel-border); border-radius:9px; overflow:hidden; }
.refine-panel .wb-tab{ font-size:11px; padding:8px 2px; line-height:1.2; }
.refine-panel .wb-panel{ padding:0; }
.refine-drop{ margin-top:8px; padding:12px 10px; border:2px dashed var(--panel-border); border-radius:10px; background:rgba(200,134,42,.06); text-align:center; }
.refine-drop-label{ font-size:12px; color:var(--muted); font-weight:700; }
.refine-rows{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.refine-row{ padding:8px 9px; background:var(--panel-2); border:1px solid var(--panel-border); border-radius:8px; }
.refine-head{ display:flex; align-items:baseline; gap:8px; }
.refine-slot{ font-size:10px; color:var(--muted); min-width:52px; }
.refine-name{ font-weight:700; font-size:12.5px; }
.refine-name.refine-empty{ color:var(--muted); font-weight:400; }
.refine-info{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.refine-gain{ font-size:11px; color:#8fdc8a; flex:1 1 auto; }
.refine-meta{ font-size:11px; color:var(--gold); font-variant-numeric:tabular-nums; }
.refine-max{ font-size:11px; color:var(--muted); }
.refine-btn{
  font-size:11px; padding:4px 10px; border-radius:6px; cursor:pointer;
  background:var(--gold); color:#241a08; border:none; font-weight:700;
}
.refine-btn.is-disabled{ background:rgba(120,120,120,.35); color:var(--muted); cursor:default; }
.refine-sockets{ display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.refine-pips{ display:inline-flex; gap:2px; font-size:13px; }
.refine-pip{ color:var(--muted); }
.refine-pip.is-filled{ color:#b06ae8; }
.refine-cardsel{ font-size:11px; padding:2px 4px; border-radius:5px; background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); max-width:120px; }
.refine-cardbtn{ background:#7a5ad0; color:#fff; }
.tt-sockets{ margin-top:4px; padding-top:4px; border-top:1px dashed rgba(255,255,255,.15); }
.tt-socket{ font-size:11px; color:#c9a0e8; line-height:1.35; }
.tt-socket.tt-socket-empty{ color:var(--muted); }
/* ชุดเกราะใน tooltip: หัวเซต + ชิ้นที่มี/สวม + โบนัส 2/4 ชิ้น (จางถ้ายังไม่ครบ) */
.tt-set{ margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.18); }
.tt-set-head{ font-size:11px; font-weight:bold; }
.tt-set-prog{ color:var(--muted); font-weight:normal; }
.tt-set-pieces{ display:flex; flex-wrap:wrap; gap:2px 7px; margin:2px 0 3px; }
.tt-set-piece{ font-size:10px; color:var(--muted); }
.tt-set-piece.is-owned{ color:#cfd6e4; }
.tt-set-piece.is-worn{ color:#ffd479; }
.tt-set-bonus{ font-size:11px; line-height:1.35; color:var(--muted); opacity:.65; }
.tt-set-bonus.is-on{ color:#ffcf6b; opacity:1; }

/* ช่องไอคอนเดี่ยว (ใช้ทั้งแถวสวมอยู่ + grid กระเป๋า) */
.inv-cell{
  position:relative;                 /* ยึดป้ายจำนวน (.inv-qty) มุมขวาล่าง */
  width:var(--slot); height:var(--slot);
  border:1px solid var(--panel-border);
  border-radius:var(--slot-radius);
  background:rgba(74,58,38,.10);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.inv-cell:hover{ border-color:var(--gold); }
.inv-cell.is-empty{ border-style:dashed; opacity:.5; cursor:default; }
.inv-cell.is-empty:hover{ border-color:var(--panel-border); }
.inv-cell-canvas{ width:var(--slot-canvas); height:var(--slot-canvas); border:none; border-radius:0; cursor:inherit; image-rendering:pixelated; }

.inv-equip-grid{ display:flex; gap:var(--slot-gap); flex-wrap:wrap; }

.inv-tabs{ display:flex; gap:4px; margin:8px 0 6px; }
.inv-tab{
  flex:1;
  height:26px;
  border:1px solid var(--panel-border);
  border-radius:6px;
  background:#3a3f33;
  color:#fff; font-size:12px; font-weight:700;
  cursor:pointer;
}
.inv-tab:hover{ filter:brightness(1.2); }
.inv-tab.is-active{ background:#37592b; border-color:var(--gold); color:var(--gold); }
.inv-tab.is-locked{ opacity:.55; }

/* ตาราง 5 คอลัมน์ × 10 แถว (50 ช่อง) — โชว์ ~6 แถวแล้วเลื่อนเอา ไม่งั้นหน้าต่างยาวเกินจอ
   ⚠ ต้องมี padding-right เผื่อรางตัวเลื่อน 10px ไม่งั้นแถบไปทับขอบช่องคอลัมน์สุดท้าย
   ⚠ overscroll-behavior:contain — เลื่อนจนสุดตารางแล้วห้ามลามไปเลื่อนตัวหน้าต่างต่อ */
.inv-grid{
  display:grid; grid-template-columns:repeat(5, var(--slot)); gap:var(--slot-gap);
  justify-content:start;
  max-height:calc(var(--slot) * 6 + var(--slot-gap) * 5);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:8px;
}

.inv-lock-msg{
  font-size:11px; color:var(--muted); text-align:center;
  padding:14px 8px; border:1px dashed var(--panel-border); border-radius:8px;
}

/* tooltip ลอยตามเมาส์ — position:fixed (ผูก body กัน .inv-panel overflow ตัด) */
.inv-tooltip{
  position:fixed;
  z-index:50;
  max-width:190px;
  padding:8px 10px;
  background:rgba(15,20,12,.97);
  border:2px solid var(--panel-border);
  border-radius:8px;
  color:var(--hud-text);
  font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  pointer-events:none;
}
.tt-name{ font-weight:700; color:var(--gold); margin-bottom:2px; }
.tt-meta{ font-size:10px; color:var(--muted); margin-bottom:4px; }
.tt-stats{ font-size:11px; color:var(--gold); }
.tt-affixes{ margin-top:4px; padding-top:4px; border-top:1px dashed rgba(255,255,255,.15); }
.tt-affix{ font-size:11px; color:#8fdc8a; line-height:1.35; }

/* shop panel (พ่อค้า: ซื้อ/ขาย) — โมดัลลอยกลางจอ ไม่ใช่พาเนลมุมเหมือน status/inventory */
.shop-panel{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:260px;
  max-height:calc(100% - 40px);
  overflow-y:auto;
  padding:var(--win-pad);
  background:var(--win-bg);
  border:var(--win-border);
  border-radius:var(--win-radius);
  color:var(--paper);
  font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  z-index:10;
}
.shop-grid.inv-grid .inv-cell{
  flex-direction:column;
  justify-content:flex-end;
  height:48px;
  padding-bottom:2px;
  gap:1px;
}
.cell-price{ font-size:9px; font-weight:700; color:var(--gold); line-height:1; }
.cell-name{ display:none; }   /* ชื่อไอเทมในช่องร้าน — โชว์เฉพาะมือถือ (mobile.css) · PC ใช้ tooltip */
.inv-cell.cant-afford{ opacity:.4; }
.inv-cell.cant-afford:hover{ border-color:var(--panel-border); }

/* ===== skill bar (HUD ล่างกลาง เหนือ .hint) ===== */
.skillbar{
  position:absolute; bottom:74px; left:50%; transform:translateX(-50%);
  z-index:6;
  display:flex; align-items:center; gap:5px;
  padding:4px 8px;
  background:rgba(0,0,0,.35); border-radius:10px;
}
/* มือถือ: ย้ายไปชิดขวาเหนือปุ่มโจมตี/พุ่ง — เป็นแถบสกิลอันเดียวที่กดได้ (เมื่อก่อนมี
   .tc-skills เลข 1-5 ซ้อนอีกอัน) วางในระยะนิ้วโป้งขวา ไม่ทับ .tc-main (สูง 88 + bottom 18) */
body.is-touch .skillbar{
  left:auto; right:18px; transform:none; bottom:114px;
  background:rgba(0,0,0,.28); padding:4px 6px; gap:8px;
  z-index:20;   /* ระดับเดียวกับปุ่มสัมผัส — เป็นตัวควบคุมจริงแล้ว ไม่ใช่แค่ HUD */
}
/* เมนูเต็มจอเปิดอยู่ = ซ่อนตัวควบคุมทั้งหมด (แพทเทิร์นเดียวกับ .touch-controls) */
body.menu-open .skillbar{ display:none; }
/* มือถือ: ตัดตัวเลข SP ออกจากแถบ — ซ้ำกับหลอด SP ใน player frame อยู่แล้ว และช่องสกิลจะจาง
   เองเมื่อ SP ไม่พอ (.nosp) · คืนความกว้าง ~60px ให้จอแคบ */
body.is-touch .skillbar-sp{ display:none; }
/* จอแคบมาก (landscape เครื่องเล็ก เช่น 568x320): ย่อช่องกันชนจอยสติ๊กฝั่งซ้าย */
@media (max-width:700px){
  body.is-touch .skillbar{ gap:6px; padding:3px 5px; }
  body.is-touch .skillslot,
  body.is-touch .quickslot{ width:42px; height:42px; }
}
.skillslot{
  position:relative; overflow:hidden;
  width:44px; height:44px;
  border:2px solid var(--panel-border); border-radius:8px;
  background:var(--panel);
  display:flex; flex-direction:column; justify-content:flex-end;
  cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:none;
}
/* มือถือ: ช่องใหญ่ขึ้นให้กดพลาดยาก (เท่าปุ่มสกิลเดิมที่ถอดออก) */
body.is-touch .skillslot{ width:48px; height:48px; }
.skillslot.is-press{ filter:brightness(1.3); transform:scale(.93); }
.skillslot.nosp{ opacity:.5; }
.slot-icon{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; z-index:0; }
.slot-cd{ position:absolute; left:0; bottom:0; width:100%; height:0%; background:rgba(0,0,0,.6); transition:height .05s linear; z-index:1; }
.slot-key{ position:absolute; top:1px; left:3px; font-size:10px; font-weight:700; color:var(--gold); text-shadow:0 1px 1px #000; z-index:2; }
.skillbar-sp{ margin-left:6px; font-size:12px; font-weight:700; color:#8fd0ff; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ปุ่มโหมดผูกมิตร (บัฟใส่มอน) — อยู่ท้ายแถบสกิล ติดสว่างตอนเปิด */
.friend-toggle{ display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; opacity:.55; }
.friend-toggle.is-on{ opacity:1; border-color:#6ad06a; box-shadow:0 0 0 2px rgba(106,208,106,.35) inset, 0 0 10px rgba(106,208,106,.45); }

/* ===== target frame (กรอบเป้าหมาย) — บนกลางจอ ระหว่างกรอบผู้เล่น(ซ้าย)กับทอง(ขวา) ===== */
.targetframe{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6;
  min-width:150px; max-width:240px;
  padding:5px 8px 6px;
  background:rgba(0,0,0,.42); border:2px solid var(--panel-border); border-radius:10px;
  pointer-events:auto;
}
.tf-idrow{ display:flex; align-items:baseline; gap:6px; margin-bottom:3px; }
.tf-name{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;   /* ชื่อบอสยาว -> ตัด ... ไม่ดันกรอบ */
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.tf-name.is-boss{ font-size:14px; }
.tf-close{
  flex:none; width:18px; height:18px; padding:0; border:none; border-radius:4px;
  background:transparent; color:var(--muted); font-size:11px; line-height:1; cursor:pointer;
}
.tf-close:hover{ color:#f0a0a0; }
.tf-sub{ flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.tf-hpbar{ position:relative; height:9px; border-radius:4px; overflow:hidden; background:rgba(0,0,0,.55); }
.tf-hpfill{ height:100%; background:linear-gradient(180deg,#e05a4a,#a02c22); transition:width .12s linear; }
.tf-hptext{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px #000;
}
/* มือถือ: บนกลางจอไม่ว่าง (ตรงกลางแคบเพราะกรอบผู้เล่น+ทอง+ปุ่มคุย/☰ กินหัวจอ) และล่างซ้าย
   เป็นจอยสติ๊ก -> วางใต้กรอบผู้เล่นพอดี ซึ่งเป็นช่องว่างจริงช่องเดียวที่เหลือ */
body.is-touch .targetframe{ left:12px; top:120px; bottom:auto; transform:none; max-width:210px; }
/* จอแคบมาก (ทั้ง PC ย่อหน้าต่าง และมือถือจอเล็ก): กลางจอบนไม่พอเพราะกรอบผู้เล่นกว้าง ~258px
   -> ย้ายลงใต้กรอบผู้เล่น + บีบให้เตี้ยลอดช่องระหว่างกรอบผู้เล่นกับแถบสกิล (~36px) */
@media (max-width:700px){
  /* ช่องว่างระหว่างกรอบผู้เล่น (จบ y116) กับแถบสกิล (เริ่ม ~y150) มีแค่ ~34px
     -> กรอบต้องสูงไม่เกิน ~29px จึงมีระยะหายใจทั้งบนและล่าง */
  .targetframe{ left:12px; top:118px; bottom:auto; transform:none; min-width:120px; max-width:180px; padding:2px 6px; }
  /* ปุ่ม ✕ 18px เป็นตัวกำหนดความสูงแถว — ย่อด้วย ไม่งั้นบีบ font เปล่าประโยชน์ */
  .tf-idrow{ margin-bottom:1px; line-height:1.1; align-items:center; }
  .tf-close{ width:13px; height:13px; font-size:10px; }
  .tf-name{ font-size:11.5px; }
  .tf-sub{ font-size:9px; }
  .tf-hpbar{ height:6px; }
  .tf-hptext{ font-size:8px; }
}
body.menu-open .targetframe{ display:none !important; }

/* ===== system log (บันทึกข้อความ) — เดสก์ท็อปมุมซ้ายล่าง · มือถือเป็นแท็บในเมนู ☰ ===== */
.log-panel{
  /* bottom:132 = เหนือทั้ง .menu-bar (bottom12+h55) และ .skillbar (bottom74+h52) — อยู่คนละแถบ y
     จึงไม่ชนกันแม้หน้าต่างแคบ (แถบสกิลจัดกลางจอ ยิ่งแคบยิ่งกินพื้นที่ซ้าย) · ลากย้ายได้ */
  position:absolute; left:12px; bottom:132px; z-index:6;
  width:328px; display:flex; flex-direction:column;
  background:rgba(8,12,8,.72);
  border:2px solid var(--panel-border); border-radius:10px;
  overflow:hidden;
}
.log-head{
  display:flex; align-items:center; gap:4px;
  padding:3px 4px 3px 5px;
  background:rgba(0,0,0,.35); border-bottom:1px solid var(--panel-border);
}
.log-tabs{ display:flex; gap:2px; flex:1; min-width:0; }
.log-tab{
  padding:2px 7px; border:none; border-radius:6px;
  background:transparent; color:var(--muted);
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.log-tab:hover{ color:var(--hud-text); }
.log-tab.is-active{ background:var(--panel-2); color:var(--gold); }
.log-badge{
  display:none; min-width:16px; padding:0 4px; border-radius:8px;
  background:#c04a3a; color:#fff; font-size:10px; font-weight:700; text-align:center;
}
.log-badge.is-on{ display:block; }
.log-toggle{
  flex:none; width:22px; height:20px; border:none; border-radius:5px;
  background:transparent; color:var(--muted); font-size:12px; cursor:pointer;
}
.log-toggle:hover{ color:var(--gold); }
.log-body{
  height:118px; overflow-y:auto; overscroll-behavior:contain;
  padding:3px 6px; font-size:11.5px; line-height:1.45;
}
.log-panel.is-collapsed .log-body{ display:none; }
/* หน้าต่างเตี้ย (PC ย่อจอ): ลดความสูง log ไม่ให้ชนกรอบผู้เล่นมุมซ้ายบน */
@media (max-height:560px){ .log-body{ height:76px; } }
/* เตี้ยมาก: ที่ว่างระหว่างกรอบเป้าหมาย(จบ ~y152) กับแถบล่างเหลือน้อย — ย่อจนพอดี */
@media (max-height:420px){ .log-body{ height:40px; } .log-tab{ padding:1px 6px; font-size:10px; } }
.log-panel.is-collapsed .log-toggle{ transform:rotate(180deg); }
.log-row{ display:flex; gap:5px; align-items:baseline; }
.log-ts{ flex:none; color:var(--dim, #5d566d); font-size:10px; font-variant-numeric:tabular-nums; opacity:.65; }
.log-msg{ min-width:0; overflow-wrap:break-word; color:var(--hud-text); }
/* มือถือ: ไม่มีที่ว่างมุมซ้ายล่าง (จอยสติ๊ก) — โผล่เฉพาะตอนเปิดแท็บ "บันทึก" ในเมนู ☰ */
body.is-touch .log-panel{ display:none; }
body.is-touch.menu-open.log-open .log-panel{
  display:flex; left:12px; right:12px; top:12px; bottom:68px;
  width:auto; z-index:40;
}
body.is-touch.menu-open.log-open .log-body{ height:auto; flex:1; font-size:13px; }
body.is-touch.menu-open.log-open .log-tab{ padding:6px 12px; font-size:13px; }
body.is-touch.menu-open.log-open .log-toggle{ display:none; }

/* ===== ยาลัดมือ (Q/R) — ต่อท้ายแถบสกิลเดียวกัน ===== */
.qs-divider{ width:2px; align-self:stretch; margin:2px 3px; background:var(--panel-border); border-radius:1px; }
.quickslot{
  position:relative; overflow:hidden;
  width:44px; height:44px;
  border:2px solid var(--panel-border); border-radius:50%;   /* กลม = แยกจากสกิล (เหลี่ยม) ด้วยรูปทรง ไม่ใช่แค่สี */
  background:var(--panel);
  cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:none;
}
body.is-touch .quickslot{ width:48px; height:48px; }
.quickslot .slot-icon{ width:32px; height:32px; }
.quickslot.is-press{ filter:brightness(1.3); transform:scale(.93); }
.quickslot.is-empty{ border-style:dashed; background:rgba(0,0,0,.35); }
.quickslot.is-empty .slot-icon{ display:none; }
.quickslot.is-out{ opacity:.42; }                            /* ผูกไว้แต่ยาหมด */
.qs-plus{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:var(--muted);
}
.quickslot.is-empty .qs-plus{ display:flex; }
.qs-count{
  position:absolute; right:2px; bottom:1px; z-index:2;
  font-size:11px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px #000, 0 0 3px #000;
}
.quickslot .slot-key{ color:#8fe0a0; }

/* ===== skill tree panel (K) — ซ้าย ใต้ player frame (สลับกับ status) ===== */
.skill-panel{
  position:absolute; top:74px; left:12px;
  width:280px; max-height:calc(100% - 92px); overflow-y:auto;
  padding:12px 14px;
  background:var(--panel);
  border:2px solid var(--panel-border); border-radius:12px;
  color:var(--paper); font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.4); z-index:7;
}
.skill-tier-label{ font-size:12px; font-weight:700; color:var(--gold); margin:8px 0 4px; border-bottom:1px solid var(--panel-border); padding-bottom:2px; }
.skill-row{ display:flex; align-items:center; gap:6px; padding:3px 0; flex-wrap:wrap; }
.skill-row.is-locked{ opacity:.45; }
.skill-icon{ width:28px; height:28px; flex:none; }
.skill-info{ flex:1; min-width:0; line-height:1.15; }
.skill-name{ font-weight:700; font-size:12px; }
.skill-desc{ font-size:10px; color:var(--muted); }
.skill-up{
  width:22px; height:22px; flex:none;
  border:1px solid var(--panel-border); border-radius:6px;
  background:#37592b; color:#fff; font-size:15px; font-weight:700; line-height:1; cursor:pointer;
}
.skill-up:hover:not(.is-disabled){ background:#4a7a3a; }
.skill-up.is-disabled{ opacity:.3; cursor:default; }
.skill-assign{ display:flex; gap:2px; width:100%; padding-left:16px; }
.assign-btn{
  width:18px; height:16px;
  border:1px solid var(--panel-border); border-radius:4px;
  background:#2a2f25; color:var(--muted); font-size:9px; font-weight:700; cursor:pointer;
}
.assign-btn.is-bound{ background:#37592b; color:var(--gold); border-color:var(--gold); }

/* ===== job dialog (ปรมาจารย์อาชีพ) — โมดัลกลางจอ ===== */
.job-dialog{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:300px; max-height:calc(100% - 40px); overflow-y:auto;
  padding:12px 14px;
  background:var(--panel);
  border:2px solid #8fb0ff; border-radius:14px;
  color:var(--paper); font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:11;
}
.job-intro{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.job-grid{ display:flex; flex-direction:column; gap:5px; }
.job-choice{
  text-align:left; padding:6px 8px;
  border:2px solid var(--panel-border); border-radius:8px;
  background:var(--panel-2); color:var(--paper); cursor:pointer;
}
.job-choice:hover:not(.is-locked){ background:rgba(0,0,0,.08); }
.job-choice.is-locked{ opacity:.4; cursor:default; }
.job-choice-name{ font-weight:700; font-size:13px; }
.job-choice-desc{ font-size:10px; color:var(--muted); }
.job-cur{ font-weight:700; margin-bottom:6px; }
.job-next{ color:var(--gold); margin-bottom:8px; }
.job-locked{ color:var(--muted); font-size:12px; }

/* ===== ศิลาวาร์ป ===== */
.warp-dialog{ border-color:#7fe0e6; }
.job-choice.is-current{ border-color:#7fe0e6; opacity:.65; cursor:default; }
.warp-dungeon-btn{
  margin-bottom:8px; border-color:#8a5fd6;
  background:linear-gradient(135deg,#3a2a5e,#5a3fa0);
  color:#f0e6ff; box-shadow:0 0 8px rgba(138,95,214,.35) inset;
}
.warp-dungeon-btn:hover:not(.is-locked){ background:linear-gradient(135deg,#472f74,#6d4dc0); }
.warp-dungeon-btn .job-choice-desc{ color:#c9b6ef; }

/* ===== ป้ายชื่อโซน (โผล่ตอนเข้าโซนใหม่) ===== */
.zone-toast{
  position:absolute; top:64px; left:50%; transform:translate(-50%,-8px);
  padding:6px 18px; border-radius:20px;
  background:rgba(10,16,10,.78); border:1px solid rgba(150,220,180,.5);
  color:#eafff0; font-size:16px; font-weight:700; letter-spacing:.5px;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  opacity:0; pointer-events:none; z-index:12;
  transition:opacity .5s ease, transform .5s ease;
}
.zone-toast.show{ opacity:1; transform:translate(-50%,0); }
canvas{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:6px;
  border:2px solid rgba(0,0,0,.35);
  cursor:default;
}
/* จอเกมกว้าง 1280px (VIEWW * ART * SCALE) — ย่อตามจอถ้าไม่พอ กันหน้าเลื่อนแนวนอน
   image-rendering:pixelated ข้างบนยังทำให้คมอยู่แม้ย่อแบบไม่ลงตัว */
#game{ image-rendering:pixelated; image-rendering:crisp-edges; }
/* popup คำแนะนำปุ่ม (โผล่เหนือปุ่ม ? มุมล่างขวา) */
.hint{
  position:absolute; bottom:48px; right:12px; z-index:7;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding:8px 10px;
  background:rgba(15,20,12,.95);
  border:2px solid var(--panel-border); border-radius:10px;
  color:var(--hud-text); font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.hint b{color:var(--gold)}
.badge{
  padding:2px 8px;
  border:1px solid var(--panel-border);
  border-radius:6px;
  background:rgba(0,0,0,.25);
  white-space:nowrap;
}

/* ===== pre-game screens (character select + create) ===== */
#screens{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:1.5rem 0;
  font-family:'Trebuchet MS',system-ui,sans-serif;
}
.screen{
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:min(760px, 94vw);
  background:var(--panel);
  border:3px solid var(--panel-border);
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.screen-title{ margin:0; color:var(--paper); font-size:28px; font-weight:700; letter-spacing:.5px; }
.screen-sub{ color:var(--muted); font-size:14px; margin-bottom:6px; }

/* character select */
.slot-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; width:100%; }
.slot-card{
  width:200px; min-height:220px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px;
  background:var(--panel-2);
  border:2px solid var(--panel-border);
  border-radius:12px;
}
.slot-card.is-empty{ justify-content:center; cursor:pointer; border-style:dashed; }
.slot-card.is-empty:hover{ background:rgba(0,0,0,.06); border-color:var(--gold); }
.slot-plus{ font-size:44px; color:var(--muted); line-height:1; }
.slot-empty-label{ color:var(--muted); font-size:13px; }
.slot-preview{
  width:96px; height:116px; image-rendering:pixelated;
  background:rgba(0,0,0,.25); border-radius:8px;
}
.slot-name{ color:var(--paper); font-weight:700; font-size:16px; }
.slot-meta{ color:var(--gold); font-size:12px; }
.slot-btns{ display:flex; gap:8px; margin-top:auto; }

/* buttons */
.btn{
  border:1px solid var(--panel-border); border-radius:8px;
  padding:6px 14px; font-size:13px; font-weight:700; color:#fff; cursor:pointer;
  background:#3a3f33;
}
.btn:hover{ filter:brightness(1.18); }
.btn-play, .btn-create{ background:#37592b; }
.btn-del, .btn-cancel{ background:#5a2f2f; }
.btn-turn{ background:#3a4a5a; margin-top:8px; }

/* create screen */
.create-body{ display:flex; gap:20px; width:100%; flex-wrap:wrap; justify-content:center; }
.create-left{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px; }
.create-right{ display:flex; flex-direction:column; align-items:center; }
.preview-canvas{
  width:160px; height:192px; image-rendering:pixelated;
  background:rgba(0,0,0,.28); border:2px solid var(--panel-border); border-radius:10px;
}
.field-label{ color:var(--muted); font-size:12px; margin-top:4px; }
.race-row{ display:flex; gap:6px; flex-wrap:wrap; }
.race-btn{
  border:1px solid var(--panel-border); border-radius:8px; background:var(--panel-2);
  color:var(--paper); font-size:13px; font-weight:700; padding:6px 10px; cursor:pointer;
}
.race-btn.is-sel{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
.race-stats{ background:var(--panel-2); border-radius:8px; padding:8px 10px; }
.race-desc{ color:var(--paper); font-size:12px; }
.race-statline{ color:var(--gold); font-size:12px; font-weight:700; margin-top:3px; letter-spacing:.3px; }
.swatch-row, .label-row{ display:flex; gap:6px; flex-wrap:wrap; }
.swatch{
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  border:2px solid rgba(0,0,0,.4);
}
.swatch.is-sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.chip{
  border:1px solid var(--panel-border); border-radius:6px; background:var(--panel-2);
  color:var(--paper); font-size:12px; padding:4px 10px; cursor:pointer;
}
.chip.is-sel{ background:var(--gold); color:#2a2410; border-color:var(--gold); }
.name-input{
  padding:8px 10px; border-radius:8px; border:1px solid var(--panel-border);
  background:var(--panel-2); color:var(--paper); font-size:14px; font-family:inherit;
}
.name-input.invalid{ border-color:#e05050; }
.create-actions{ display:flex; gap:12px; margin-top:8px; }

/* ===== หน้าจอโหลด (เข้าเกม/เปลี่ยนโซน/ดันเจี้ยน) ===== */
/* เต็มจอ ทับทุกอย่าง — งานสร้างโซนบล็อกเธรดหลัก 300-600ms ระหว่างนั้นต้องมีอะไรให้ดู */
.loadscreen{
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:#0d1a14;
  opacity:1; transition:opacity .3s ease;
}
.loadscreen.is-out{ opacity:0; pointer-events:none; }
.loadscreen-scene{
  width:min(92vw,860px); height:auto; aspect-ratio:640/220;
  image-rendering:pixelated;
  border-bottom:3px solid #0a130d;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.loadscreen-box{
  width:min(92vw,860px); box-sizing:border-box;
  padding:16px 20px 18px;
  background:linear-gradient(180deg,#1a2e1e,#122117);
  border:2px solid #2b4a32; border-top:none; border-radius:0 0 8px 8px;
  display:flex; flex-direction:column; gap:9px;
}
.loadscreen-zone{ color:#eaffd0; font-size:19px; font-weight:700; letter-spacing:.4px; text-shadow:0 2px 0 #0a130d; }
.loadscreen-bar{
  height:14px; background:#0a130d; border:2px solid #2b4a32; border-radius:3px;
  overflow:hidden; position:relative;
}
.loadscreen-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,#7fd15f 0 6px,#5fb347 6px 12px);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.18);
  transition:width .1s linear;
}
.loadscreen-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.loadscreen-step{ color:#9fc98a; font-size:13px; }
.loadscreen-pct{ color:#eaffd0; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.loadscreen-tip{
  color:#c8d8b0; font-size:12.5px; line-height:1.5;
  border-top:1px dashed #2b4a32; padding-top:8px; min-height:2.6em;
}
@media (max-width:700px){
  .loadscreen-zone{ font-size:16px; }
  .loadscreen-tip{ font-size:11.5px; }
  .loadscreen-box{ padding:12px 14px 14px; }
}

/* ===== หน้าต่างแฟชั่น (F) ===== */
.fashion-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(94vw,560px); max-height:86vh; overflow:auto; z-index:60;
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  box-shadow:var(--win-shadow); padding:12px 14px 14px; color:var(--paper);
}
.fa-top{ display:flex; gap:14px; align-items:flex-start; margin-bottom:10px; }
.fa-prev{ display:flex; flex-direction:column; gap:6px; align-items:center;
  background:rgba(0,0,0,.14); border:1px solid var(--panel-border); border-radius:8px; padding:8px; }
.fa-dirs{ display:flex; gap:4px; }
.fa-dir{ font:inherit; font-size:11px; padding:2px 8px; border-radius:6px; cursor:pointer;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.fa-dir[aria-pressed="true"]{ background:var(--gold); color:#2a1c08; font-weight:700; }
.fa-slots{ flex:1; display:flex; flex-direction:column; gap:6px; }
.fa-slot{ display:flex; align-items:center; gap:8px; background:var(--panel-2);
  border:1px solid var(--panel-border); border-radius:8px; padding:6px 8px; }
.fa-slot-k{ min-width:38px; font-size:12px; color:var(--muted); }
.fa-slot-v{ flex:1; font-size:13px; font-weight:600; }
.fa-eye,.fa-off{ font:inherit; font-size:11px; padding:2px 7px; border-radius:6px; cursor:pointer;
  background:var(--panel); color:var(--paper); border:1px solid var(--panel-border); }
.fa-eye[aria-pressed="false"]{ opacity:.45; }
.fa-off:disabled{ opacity:.35; cursor:default; }
.fa-show{ font:inherit; font-size:13px; font-weight:700; padding:7px 10px; border-radius:8px; cursor:pointer;
  background:var(--green); color:#f4ecd8; border:1px solid rgba(0,0,0,.25); }
.fa-show[aria-pressed="false"]{ background:var(--muted); }
.fa-tabs{ display:flex; gap:6px; margin:4px 0 8px; }
.fa-tab{ font:inherit; font-size:12.5px; padding:5px 12px; border-radius:8px 8px 0 0; cursor:pointer;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); border-bottom:none; }
.fa-tab[aria-pressed="true"]{ background:var(--gold); color:#2a1c08; font-weight:700; }
.fa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.fa-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; cursor:pointer;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); border-radius:8px; font:inherit; }
.fa-cell:hover{ border-color:var(--gold); }
.fa-cell.is-on{ border-color:var(--green); box-shadow:inset 0 0 0 2px rgba(79,138,91,.4); }
.fa-cell.is-owned{ opacity:.9; }
.fa-cell-cv{ image-rendering:pixelated; }
.fa-cell-n{ font-size:11px; text-align:center; line-height:1.25; }
.fa-cell-s{ display:flex; gap:6px; font-size:10px; color:var(--muted); }
.fa-price{ color:var(--gold); font-weight:700; }
.fa-empty{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:12.5px; padding:18px 8px; }
@media (max-width:700px){
  .fa-top{ flex-direction:column; align-items:stretch; }
  .fa-prev{ align-self:center; }
}

/* ===== บอทล่าอัตโนมัติ ===== */
/* ป้ายบอท = ปุ่มเปิด/ปิดบนหน้าจอเล่น (อยู่ตลอด สลับหน้าตาตามสถานะ) */
/* ปุ่มบอท: เป็นลูกของ .hud-topleft แล้ว จึงไหลลงมาใต้การ์ดผู้เล่นเอง
   (ของเดิมตั้ง top:96px ตายตัว = ทับแถบ EXP ของการ์ดพอดี) */
.bot-badge{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px 5px 10px; border-radius:999px;
  background:rgba(24,40,28,.88); border:2px solid var(--green);
  color:var(--hud-text); font-size:12.5px; font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
/* ปิดอยู่: หรี่ลงให้ไม่แย่งสายตาระหว่างเล่น แต่ยังกดถึงตลอด */
.bot-badge.off{
  padding:0; border-color:rgba(140,170,145,.5); background:rgba(18,24,20,.72);
}
.bot-badge.off .bot-badge-run{ display:none; }
.bot-badge.on .bot-badge-start{ display:none; }
.bot-badge-run{ display:flex; align-items:center; gap:8px; }
.bot-badge-start{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:5px 12px; border-radius:999px; border:none;
  background:transparent; color:#cfe3d2;
}
.bot-badge-start:hover{ background:rgba(120,200,140,.18); color:#fff; }
.bot-badge-why{ font-weight:400; color:#bfe0c4; font-size:11.5px; }
.bot-badge-stop{
  font:inherit; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; cursor:pointer;
  background:var(--gold); color:#2a1c08; border:none;
}
.bot-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(94vw,420px); max-height:86vh; overflow:auto; z-index:60;
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  box-shadow:var(--win-shadow); padding:12px 14px 14px; color:var(--paper);
}
.bot-note{ font-size:11.5px; color:var(--muted); line-height:1.45; margin-bottom:8px; }
.bot-toggle{
  width:100%; font:inherit; font-size:14px; font-weight:700; padding:9px; margin-bottom:10px;
  border-radius:8px; cursor:pointer; background:var(--green); color:#f4ecd8; border:1px solid rgba(0,0,0,.25);
}
.bot-toggle[aria-pressed="true"]{ background:#b8563a; }
.bot-sub{ font-size:12px; font-weight:700; color:var(--gold); margin:10px 0 4px; }
/* ป้ายจำนวนของกอง (มุมขวาล่างช่องกระเป๋า) — เงาดำรอบตัวอักษรให้อ่านออกทุกพื้นหลังไอคอน */
.inv-qty{
  position:absolute; right:2px; bottom:1px; pointer-events:none;
  font-size:11px; font-weight:800; color:#fff; line-height:1;
  text-shadow:0 0 3px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  font-variant-numeric:tabular-nums;
}
/* แถบเลือกจำนวนซื้อ/ขายในร้าน */
/* ── ร้านค้า: แท็บประเภทสินค้า + ตารางเลื่อนได้ ── */
.shop-tabs{ flex-wrap:wrap; margin:6px 0 6px; }
.shop-tab{ flex:1 1 auto; min-width:52px; padding:0 8px; }
/* ตารางเลื่อนเองในกรอบ ไม่ให้ทั้งหน้าต่างยืดยาวจนแท็บหลุดจอ */
.shop-scroll{
  max-height:180px; overflow-y:auto; overflow-x:hidden;
  padding:4px; margin-bottom:6px;
  border:1px solid var(--panel-border); border-radius:8px;
  background:rgba(0,0,0,.18);
}

/* ── popup ระบุจำนวน (ซื้อ/ขาย) ── */
/* อยู่ระดับ body เหมือนเมนูคลิกขวา จึงลอยเหนือทุกหน้าต่างเสมอ */
.qtydlg-back{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
}
.qtydlg{
  min-width:210px; padding:14px 16px 12px;
  background:var(--win-bg); border:var(--win-border); border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  color:var(--paper); text-align:center;
}
.qtydlg-title{ font-size:13px; font-weight:800; color:var(--hud-text); margin-bottom:10px; }
.qtydlg-row{ display:flex; align-items:center; justify-content:center; gap:10px; }
.qtydlg-pm{
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--panel-border); background:rgba(255,255,255,.08);
  color:var(--hud-text); font-size:19px; font-weight:800; line-height:1;
}
.qtydlg-pm:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.qtydlg-pm:disabled{ opacity:.35; cursor:default; }
.qtydlg-num{
  width:82px; height:34px; text-align:center; border-radius:9px;
  border:1px solid var(--panel-border); background:rgba(0,0,0,.35);
  color:var(--gold); font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;
}
.qtydlg-num:disabled{ opacity:.6; }
.qtydlg-total{ font-size:11.5px; color:var(--gold); margin:8px 0 10px; min-height:14px; }
.qtydlg-btns{ display:flex; gap:8px; }
.qtydlg-ok, .qtydlg-cancel{
  flex:1; height:32px; border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:800;
  border:1px solid var(--panel-border);
}
.qtydlg-ok{ background:#37592b; border-color:var(--gold); color:var(--gold); }
.qtydlg-cancel{ background:rgba(255,255,255,.08); color:var(--hud-text); }
.qtydlg-ok:hover{ filter:brightness(1.2); }
.qtydlg-cancel:hover{ border-color:#b6472f; color:#e2694c; }

/* นิ้วต้องกดโดน — ปุ่มบนจอสัมผัสใหญ่กว่าเมาส์ */
body.is-touch .qtydlg{ min-width:250px; }
body.is-touch .qtydlg-pm{ width:44px; height:44px; font-size:23px; }
body.is-touch .qtydlg-num{ width:96px; height:44px; font-size:18px; }
body.is-touch .qtydlg-ok, body.is-touch .qtydlg-cancel{ height:42px; font-size:14px; }
body.is-touch .shop-scroll{ max-height:44vh; }
body.is-touch .shop-tab{ height:34px; font-size:13px; }
.tt-use{ font-size:11px; color:#9fe0a8; margin:3px 0 4px; line-height:1.5; }
.tt-qty{ font-size:11px; color:var(--gold); margin:2px 0 4px; }
.tt-maker{ font-size:11px; color:#8fd0a8; margin:2px 0 4px; }
/* ทูลทิปตำราสูตร — บรรทัดข้อมูล + ป้ายสถานะ "เรียนแล้ว/ยังไม่เรียน" */
.tt-line{ font-size:11px; color:var(--paper); margin:2px 0; }
.tt-known{ font-size:11px; font-weight:700; color:var(--green-ink); margin:3px 0 1px; }
.tt-learn{ font-size:11px; font-weight:700; color:var(--gold-ink); margin:3px 0 1px; }
.bot-hint{ font-size:10px; color:var(--hud-dim, #9aa); margin:2px 0 0; line-height:1.4; }
.bot-row{ display:flex; align-items:center; gap:8px; margin:5px 0; }
.bot-k{ min-width:118px; font-size:12px; color:var(--muted); }
.bot-ctl{ flex:1; display:flex; align-items:center; gap:6px; }
.bot-ctl input[type=range]{ flex:1; }
.bot-ctl select{ font:inherit; font-size:12px; padding:2px 6px; border-radius:6px;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.bot-v{ min-width:56px; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.bot-dash{ color:var(--muted); }
.bot-chips{ flex:1; display:flex; flex-wrap:wrap; gap:4px; }
.bot-chip{ font:inherit; font-size:11.5px; padding:3px 9px; border-radius:999px; cursor:pointer;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.bot-chip[aria-pressed="true"]{ background:var(--green); color:#f4ecd8; border-color:transparent; font-weight:700; }
@media (max-width:700px){
  .bot-badge{ top:auto; bottom:150px; left:8px; }
  .bot-k{ min-width:92px; font-size:11.5px; }
}

/* ===== กระดานประมูล ===== */
.ah-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(96vw,720px); max-height:88vh; overflow:auto; z-index:60;
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  box-shadow:var(--win-shadow); padding:12px 14px 14px; color:var(--paper);
}
.ah-tabs{ display:flex; gap:5px; margin:2px 0 8px; flex-wrap:wrap; }
.ah-tab{ position:relative; font:inherit; font-size:12.5px; padding:5px 12px; border-radius:8px 8px 0 0;
  cursor:pointer; background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); border-bottom:none; }
.ah-tab[aria-pressed="true"]{ background:var(--gold); color:#2a1c08; font-weight:700; }
.ah-badge{ display:inline-block; margin-left:5px; min-width:16px; padding:0 4px; border-radius:999px;
  background:#c8342a; color:#fff; font-size:10px; font-weight:700; text-align:center; }
.ah-body{ min-height:180px; }
.ah-filter{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.ah-filter select,.ah-filter input{ font:inherit; font-size:12px; padding:3px 6px; border-radius:6px;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.ah-filter input{ flex:1; min-width:110px; }
.ah-tier{ display:flex; align-items:center; gap:3px; }
.ah-list{ display:flex; flex-direction:column; gap:4px; }
.ah-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--panel-border); }
.ah-icon{ image-rendering:pixelated; flex:none; }
.ah-mid{ flex:1; min-width:0; }
.ah-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ah-meta{ display:flex; gap:8px; font-size:10.5px; color:var(--muted); flex-wrap:wrap; }
.ah-score{ color:var(--gold); font-weight:700; }
.ah-price{ text-align:right; font-size:11.5px; min-width:112px; }
.ah-bid{ color:var(--muted); }
.ah-buyout{ font-weight:700; font-variant-numeric:tabular-nums; }
.ah-diff{ margin-left:5px; font-size:10px; padding:0 4px; border-radius:4px; background:rgba(0,0,0,.15); }
.ah-diff.good{ background:#2f6b38; color:#d8ffd8; }
.ah-diff.bad{ background:#7a2a22; color:#ffd8d0; }
.ah-act{ display:flex; gap:4px; flex:none; }
.ah-btn{ font:inherit; font-size:11.5px; padding:4px 9px; border-radius:6px; cursor:pointer;
  background:var(--panel); color:var(--paper); border:1px solid var(--panel-border); }
.ah-btn.primary{ background:var(--green); color:#f4ecd8; border-color:transparent; font-weight:700; }
.ah-btn.ghost{ background:transparent; }
.ah-btn.wide{ width:100%; margin-top:8px; padding:8px; font-size:13px; }
.ah-btn:disabled{ opacity:.4; cursor:default; }
.ah-empty,.ah-note{ text-align:center; color:var(--muted); font-size:12px; padding:14px 8px; }
.ah-sub{ font-size:12px; font-weight:700; color:var(--gold); margin:10px 0 4px; }
.ah-sell{ display:flex; flex-direction:column; gap:8px; }
.ah-invgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:5px; max-height:210px; overflow:auto; }
.ah-invcell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 3px; cursor:pointer;
  font:inherit; background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); border-radius:7px; }
.ah-invcell.is-on{ border-color:var(--green); box-shadow:inset 0 0 0 2px rgba(79,138,91,.35); }
.ah-invn{ font-size:10px; text-align:center; line-height:1.2; }
.ah-invp{ font-size:9.5px; color:var(--muted); }
.ah-form{ background:rgba(0,0,0,.1); border:1px solid var(--panel-border); border-radius:8px; padding:8px 10px; }
.ah-form-t{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
.ah-frow{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.ah-fk{ min-width:104px; font-size:12px; color:var(--muted); }
.ah-frow input{ flex:1; font:inherit; font-size:12px; padding:3px 6px; border-radius:6px;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.ah-chips{ display:flex; gap:4px; flex-wrap:wrap; }
.ah-chip{ font:inherit; font-size:11px; padding:3px 9px; border-radius:999px; cursor:pointer;
  background:var(--panel-2); color:var(--paper); border:1px solid var(--panel-border); }
.ah-chip[aria-pressed="true"]{ background:var(--green); color:#f4ecd8; border-color:transparent; font-weight:700; }
.ah-fee{ font-size:11px; color:var(--muted); margin-top:6px; line-height:1.45; }
.ah-hist{ display:flex; flex-direction:column; gap:2px; }
.ah-histrow{ display:flex; justify-content:space-between; font-size:11.5px; padding:3px 6px;
  background:var(--panel-2); border-radius:6px; }
.ah-histr{ color:var(--muted); }
.ah-mailrow{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px;
  background:var(--panel-2); border:1px solid var(--panel-border); }
.ah-mailt{ flex:1; font-size:11.5px; }
.ah-mailg{ color:var(--gold); font-weight:700; font-size:12px; }
.ah-goldicon{ width:28px; text-align:center; font-size:18px; }
.ah-charthead{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ah-charthead > div:nth-child(2){ flex:1; }
.ah-chart{ width:100%; height:auto; image-rendering:auto; border-radius:8px; border:1px solid var(--panel-border); }
.ah-chartstat{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; margin-top:6px; color:var(--muted); }
.ah-chartstat .good{ color:#5fd15f; font-weight:700; }
.ah-chartstat .bad{ color:#e05a4a; font-weight:700; }
@media (max-width:700px){
  .ah-row{ flex-wrap:wrap; }
  .ah-price{ min-width:0; text-align:left; }
  .ah-fk{ min-width:88px; font-size:11.5px; }
}
.mailbadge{ background:rgba(120,60,30,.85); }
body.menu-open .ah-body, body.menu-open .fa-grid, body.menu-open .bot-panel > *{ max-width:640px; margin-left:auto; margin-right:auto; }
body.menu-open .ah-panel .sp-hint, body.menu-open .fashion-panel .sp-hint{ display:none; }  /* บอก "กด G/F ปิด" ไม่มีความหมายบนมือถือ */

/* ── โต๊ะตีบวก 4 ช่อง (บน: ของ · ล่าง: กันแตก | หิน | เพิ่มโอกาส) ── */
.rf-top{ display:flex; justify-content:center; margin:6px 0 8px; }
.rf-bottom{ display:flex; justify-content:center; gap:10px; margin-bottom:8px; }
.rf-slot{
  position:relative; width:104px; min-height:104px; padding:6px 4px;
  border:2px solid var(--panel-border); border-radius:10px;
  background:rgba(0,0,0,.22); cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:3px;
}
.rf-slot.rf-gear{ width:132px; min-height:120px; border-color:var(--gold); }
.rf-slot:hover{ border-color:var(--gold); }
.rf-slot.is-empty{ border-style:dashed; opacity:.75; }
.rf-icon{ width:36px; height:36px; image-rendering:pixelated; }
.rf-name{ font-size:11px; font-weight:700; color:var(--hud-text); line-height:1.25; }
.rf-sub{ font-size:9px; color:#9aa4ae; line-height:1.2; }
.rf-summary{ font-size:12px; color:var(--gold); text-align:center; margin:2px 0 4px; line-height:1.5; }
.rf-warn{ font-size:11px; color:#9fe0a8; text-align:center; margin-bottom:6px; min-height:14px; }
.rf-warn.is-danger{ color:#ff7a6a; font-weight:800; }
.rf-go{
  display:block; width:180px; margin:0 auto 6px; padding:9px 0; border-radius:9px;
  border:2px solid var(--gold); background:rgba(120,90,20,.5);
  color:#fff; font-size:14px; font-weight:800; cursor:pointer;
}
.rf-go:hover:not(:disabled){ background:rgba(170,130,30,.65); }
.rf-go:disabled{ opacity:.45; cursor:default; border-color:var(--panel-border); }
.rf-sockets{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.rf-sock-label{ font-size:11px; color:#9aa4ae; }
/* รายการเลือกของจากกระเป๋า (มือถือ/คลิกช่องว่าง) */
.rf-picker{
  position:absolute; left:50%; top:100%; transform:translateX(-50%); z-index:40;
  min-width:170px; max-height:190px; overflow-y:auto; padding:4px;
  background:rgba(18,14,10,.97); border:2px solid var(--gold); border-radius:9px;
  display:flex; flex-direction:column; gap:2px;
}
.rf-pick-item{
  padding:6px 8px; border:none; border-radius:5px; background:transparent;
  color:var(--hud-text); font-size:11px; text-align:left; cursor:pointer; white-space:nowrap;
}
.rf-pick-item:hover{ background:rgba(255,255,255,.14); color:var(--gold); }
body.is-touch .rf-slot{ width:92px; min-height:96px; }
body.is-touch .rf-slot.rf-gear{ width:120px; }
body.is-touch .rf-pick-item{ padding:9px 10px; font-size:12px; }

/* ── popup การ์ดมอนสเตอร์ (hover บน PC / แตะค้างบนมือถือ) ── */
.card-pop{
  position:fixed; z-index:200; pointer-events:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.75));
}
.card-pop.is-center{ left:50%; top:50%; transform:translate(-50%,-50%); }
.card-pop-cv{ display:block; width:216px; height:300px; image-rendering:pixelated; border-radius:12px; }
body.is-touch .card-pop-cv{ width:260px; height:360px; }

/* ── ปุ่ม ✕ ปิดหน้าต่าง ── */
.sp-header{ position:relative; }
.log-head{ display:flex; align-items:center; }
.panel-x{
  margin-left:auto; flex:0 0 auto;
  width:24px; height:24px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font:inherit; font-size:13px; line-height:1;
  background:transparent; color:var(--muted);
  border:1px solid transparent; border-radius:6px;
}
.panel-x:hover{ background:#b6472f; color:#fff; border-color:#e2694c; }
.panel-x:active{ transform:scale(.92); }
.panel-x:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
/* นิ้วแตะง่ายขึ้นบนสัมผัส */
body.is-touch .panel-x{ width:32px; height:32px; font-size:16px; }
/* มือถือ: เมนูเต็มจอมี ✕ ของตัวเองอยู่แล้ว — ซ่อนของหน้าต่าง กันกากบาท 2 ปุ่มชนกัน */
body.menu-open .panel-x{ display:none; }

/* ── ตั้งปุ่มเอง ── */
.key-row .set-btns{ gap:4px; align-items:center; }
.key-btn{
  font:inherit; font-size:11px; font-weight:700; min-width:62px; padding:4px 8px; cursor:pointer;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--panel-border); border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.key-btn:hover{ border-color:var(--gold); }
.key-btn.is-unset{ color:var(--muted); font-weight:400; }
.key-btn.is-listening{ background:var(--gold); color:var(--panel); border-color:var(--gold); }
.key-clear{
  font:inherit; font-size:11px; line-height:1; padding:4px 7px; cursor:pointer;
  background:transparent; color:var(--muted); border:1px solid var(--panel-border); border-radius:6px;
}
.key-clear:hover{ color:#e8776a; border-color:#e8776a; }
.key-reset{ width:100%; }
.set-toast{
  display:none; margin-top:8px; padding:7px 10px; border-radius:7px; font-size:11px;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--gold);
}

/* ── ปรับขนาด UI ──
   ขยายเฉพาะชั้น UI — แคนวาสโลกเกม (#game) ต้องไม่โดน ไม่งั้นพิกเซลเลอะ
   ใช้ zoom แทน transform เพราะ zoom ขยายทั้ง layout และ hit-test ให้ตรงกัน (transform ทำให้กดพลาด) */
.frame > *:not(#game){ zoom:var(--ui-scale); }
.inv-tooltip, .card-pop, .dnd-ghost{ zoom:var(--ui-scale); }
/* หน้าจอเล็ก: กันหน้าต่างล้นจอตอนขยายสุด */
@media (max-height:620px){ .frame > *:not(#game){ zoom:min(var(--ui-scale), 1.15); } }

/* ── เป้าหมายถัดไป (HUD) ── */
.goal-chip{
  position:absolute; left:50%; transform:translateX(-50%); bottom:64px; z-index:7;
  display:flex; align-items:center; gap:7px; max-width:min(92vw,460px);
  font:inherit; font-size:12px; font-weight:700; text-align:left;
  padding:7px 14px; border-radius:999px; cursor:pointer;
  background:rgba(20,26,18,.88); color:var(--hud-text);
  border:1.5px solid rgba(255,255,255,.16);
  box-shadow:0 3px 12px rgba(0,0,0,.45);
  animation:goalIn .28s ease;
}
.goal-chip:hover{ border-color:var(--gold); }
.goal-chip #goalicon{ font-size:14px; line-height:1; flex:0 0 auto; }
.goal-chip #goaltext{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-chip.tone-good{ border-color:rgba(94,226,122,.55); }
.goal-chip.tone-good #goalicon{ color:#5ee27a; }
.goal-chip.tone-warn{ border-color:rgba(232,162,76,.6); }
.goal-chip.tone-warn #goalicon{ color:#e8a24c; }
.goal-chip.tone-bad{ border-color:rgba(232,119,106,.6); }
.goal-chip.tone-bad #goalicon{ color:#e8776a; }
@keyframes goalIn{ from{ opacity:0; transform:translateX(-50%) translateY(6px); } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .goal-chip{ animation:none; } }
body.menu-open .goal-chip{ display:none !important; }

/* ── ป้ายค่าธรรมเนียมบริการ (หน้า NPC vs ทางลัด) ── */
.svc-fee{ display:block; font-size:10px; margin-top:4px; line-height:1.5; }
.svc-near{ color:var(--green-ink); }
.svc-remote{ color:var(--gold-ink); }

/* ── จัดกระเป๋า: ปุ่มเรียง · ล็อคไอเทม · ขายของขยะ ── */
.bag-sort{
  margin-left:auto; font:inherit; font-size:10px; font-weight:700; cursor:pointer;
  padding:3px 9px; border-radius:6px;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--panel-border);
}
.bag-sort:hover{ background:var(--gold); color:var(--panel); border-color:var(--gold); }
/* ปุ่มแผงลอยก้นกระเป๋า (ย้ายมาจากแถบเมนู) — เต็มความกว้าง แตะง่ายบนมือถือ */
.bag-vend{
  display:block; width:100%; margin-top:10px; font:inherit; font-size:12px; font-weight:700;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--panel-border);
}
.bag-vend:hover{ background:var(--gold); color:var(--panel); border-color:var(--gold); }
.cell-lock{
  position:absolute; top:-2px; left:-1px; z-index:3; pointer-events:none;
  font-size:10px; line-height:1; color:#ffd479; text-shadow:0 0 3px #000;
}
.inv-cell.is-locked-item{ border-color:#c8a24c; }
/* ระดับตีบวก +N — มุมซ้ายล่าง (มุมที่เหลืออยู่: ล็อค=บนซ้าย ▲=บนขวา จำนวน=ล่างขวา) */
.cell-refine{
  position:absolute; left:2px; bottom:1px; z-index:3; pointer-events:none;
  font-size:11px; font-weight:800; line-height:1; color:#9fe0ff;
  text-shadow:0 0 3px #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  font-variant-numeric:tabular-nums;
}
.cell-refine.is-warm{ color:#ffd479; }                       /* +5 ขึ้นไป = พลาดแล้วตกระดับ */
.cell-refine.is-hot{ color:#ff8f5c; text-shadow:0 0 5px #d24a1e, 0 0 3px #000, 1px 1px 0 #000; }  /* +11 ขึ้นไป = พลาดแล้วแตก */
.shop-junk{
  display:block; width:100%; margin:6px 0 2px; padding:7px 0; cursor:pointer;
  font:inherit; font-size:11px; font-weight:700; border-radius:7px;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--panel-border);
}
.shop-junk:hover{ background:var(--gold); color:var(--panel); border-color:var(--gold); }
.shop-junk.is-confirm{ background:#b6472f; color:#fff; border-color:#e2694c; }

/* ── ตัวช่วยตัดสินใจ: ป้าย ▲ ของดีกว่า + บล็อกเทียบใน tooltip ── */
.cell-up{
  position:absolute; top:-3px; right:-2px; z-index:3; pointer-events:none;
  font-size:11px; line-height:1; font-weight:900; color:#5ee27a;
  text-shadow:0 0 3px #000, 0 1px 0 #04240c;
}
.tt-cmp{
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--panel-border);
  font-size:11px; line-height:1.55;
}
.tt-cmp b.up{ color:#5ee27a; }
.tt-cmp b.down{ color:#e8776a; }
.tt-cmp b.same{ color:var(--muted); }
.tt-cmp-lock{ color:#e8776a; }
.tt-cmp-cur{ color:var(--muted); font-size:10px; margin-top:1px; }
.tt-cmp-rows{ margin-top:3px; display:flex; flex-wrap:wrap; gap:3px 8px; }
.tt-d{ font-variant-numeric:tabular-nums; }
.tt-d.up{ color:#5ee27a; }
.tt-d.down{ color:#e8776a; }

/* ── สมาคมนักล่า: ใบอนุญาต + คะแนน + สอบ ── */
.guild-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:12;
  width:340px; max-height:86vh; overflow-y:auto; padding:var(--win-pad);
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  color:var(--paper); box-shadow:var(--win-shadow);
}
.guild-lic{ display:flex; justify-content:center; margin:6px 0 8px; }
.guild-lic-cv{ width:300px; height:180px; image-rendering:pixelated; border-radius:10px; }
.guild-score{ font-size:11px; color:var(--gold-ink); text-align:center; margin-bottom:6px; line-height:1.5; }
.guild-need{ font-size:11px; color:var(--paper); text-align:center; margin-bottom:8px; line-height:1.6; }
.guild-exam{
  display:block; width:100%; padding:10px 0; margin-bottom:8px; border-radius:9px; cursor:pointer;
  border:2px solid var(--gold); background:var(--panel-2); color:var(--gold); font-size:13px; font-weight:800;
}
.guild-exam:hover:not(:disabled){ background:var(--gold); color:var(--panel); }
.guild-exam:disabled{ opacity:.45; cursor:default; border-color:var(--panel-border); }
.guild-perks{ font-size:10px; color:var(--green-ink); line-height:1.6; }
/* เดิมพันแรงก์ + สัญญาปลอมตัว */
.guild-stake{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--gold-ink);
  margin:4px 0 2px; cursor:pointer; user-select:none; }
.guild-stake input{ accent-color:var(--gold); cursor:pointer; }
.guild-under{ font-size:10px; color:var(--paper); line-height:1.6; margin-top:6px;
  border-top:1px solid var(--panel-border); padding-top:6px; }
.guild-under-row{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.guild-uc-btn{ font:inherit; font-size:10px; padding:3px 7px; cursor:pointer;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--panel-border); border-radius:4px; }
.guild-uc-btn:hover{ background:var(--gold); color:var(--panel); border-color:var(--gold); }
.guild-uc-on{ color:var(--gold-ink); font-weight:700; }
/* ช่องของในร้านที่แรงก์ยังไม่ปลด */
.shop-cell.rank-locked{ opacity:0.42; filter:grayscale(0.7); cursor:not-allowed; }
.shop-cell.rank-locked .cell-price{ color:#e8a24c; }
.rank-locked{ opacity:0.42; filter:grayscale(0.7); cursor:not-allowed; }
.rank-locked .cell-price{ color:#e8a24c; }
body.is-touch .guild-panel{ width:min(94vw,360px); }
body.is-touch .guild-lic-cv{ width:min(88vw,320px); height:auto; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.screen-login{ width:min(440px, 94vw); }
.login-box{ display:flex; flex-direction:column; gap:12px; width:100%; }
.login-field{ display:flex; flex-direction:column; gap:4px; }
.login-label{ color:var(--muted); font-size:12px; font-weight:700; }
.login-input{
  padding:9px 11px; font-size:15px; font-family:inherit;
  color:var(--paper); background:rgba(0,0,0,.28);
  border:2px solid var(--panel-border); border-radius:8px; outline:none;
}
.login-input:focus{ border-color:var(--gold); }
.login-msg{ min-height:18px; font-size:13px; color:var(--muted); text-align:center; }
.login-msg.is-err{ color:#ff9d8a; }
.login-btns{ display:flex; gap:10px; }
.login-btns .btn{ flex:1; padding:10px; font-size:14px; }
.login-btns .btn:disabled{ opacity:.5; cursor:default; filter:none; }
.btn-primary{ background:#37592b; }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-ghost:hover{ color:var(--paper); }
.login-guest{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border-top:1px solid var(--panel-border); padding-top:12px; margin-top:2px;
}
.login-guest .btn{ padding:8px 18px; }
.login-hint{ color:var(--muted); font-size:11px; line-height:1.5; text-align:center; }
.login-server{ display:flex; align-items:center; gap:8px; }
.login-server-input{
  flex:1; padding:4px 8px; font-size:11px; font-family:inherit;
  color:var(--muted); background:rgba(0,0,0,.2);
  border:1px solid var(--panel-border); border-radius:6px; outline:none;
}

/* แถบบอกว่าเล่นในฐานะใคร (หน้าเลือกตัวละคร) */
.acct-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding-bottom:8px; border-bottom:1px solid var(--panel-border);
}
.acct-who{ color:var(--gold); font-size:13px; font-weight:700; }
.acct-who.is-guest{ color:var(--muted); }
.acct-out{ font-size:11px; padding:4px 10px; }

/* ---------- สังคม: แชท / ปาร์ตี้ / เทรด ---------- */
.chat-box{
  position:absolute; left:8px; bottom:8px; width:min(300px, 40vw);
  display:flex; flex-direction:column; gap:4px; z-index:7; pointer-events:auto;
}
.chat-log{
  max-height:120px; overflow-y:auto; font-size:12px; line-height:1.5;
  background:rgba(0,0,0,.42); border-radius:8px; padding:6px 8px;
  color:var(--paper); text-shadow:0 1px 2px #000;
}
.chat-line{ word-break:break-word; }
.chat-who{ font-weight:700; }
.chat-row{ display:flex; gap:4px; }
.chat-input{
  flex:1; min-width:0; padding:5px 8px; font-size:12px; font-family:inherit;
  color:var(--paper); background:rgba(0,0,0,.5);
  border:1px solid var(--panel-border); border-radius:6px; outline:none;
}
.chat-input:focus{ border-color:var(--gold); background:rgba(0,0,0,.72); }
.chat-send{ padding:4px 10px; font-size:12px; }

/* ── แถบดวล: นาฬิกา + เลือดคู่ต่อสู้ + เตือนออกนอกวง ──
   อยู่กลางบน เพราะระหว่างดวลต้องเหลือบดูได้โดยไม่ละสายตาจากตัวละคร */
.duel-bar{
  position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:12;
  display:none; flex-direction:column; align-items:center; gap:3px;
  padding:6px 14px; min-width:190px;
  background:rgba(24,10,10,.82); border:2px solid rgba(232,120,90,.7); border-radius:10px;
}
.duel-phase{ font-size:13px; font-weight:700; color:#ffd479; letter-spacing:.5px; }
.duel-foe{ display:flex; align-items:center; gap:6px; width:100%; }
.duel-foe-name{ font-size:10px; color:var(--hud-text); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duel-hp{ flex:1; height:7px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:4px; overflow:hidden; }
.duel-hp-fill{ height:100%; background:linear-gradient(180deg,#ff7a6a,#c0392b); transition:width .12s linear; }
.duel-warn{ font-size:10px; color:#ffb4a0; }
.duel-bar.is-out{ border-color:#ff6a5a; animation:duelOut .5s steps(2) infinite; }
@keyframes duelOut{ 50%{ background:rgba(80,16,16,.9); } }
@media (prefers-reduced-motion:reduce){ .duel-bar.is-out{ animation:none; } }
body.is-touch .duel-bar{ top:6px; padding:5px 12px; min-width:170px; }

/* ── รายชื่อเพื่อน ── */
/* คำขอเป็นเพื่อนที่ค้างอยู่ — จุดแดงมุมบนขวาของปุ่ม "เพื่อน" ในแถบเมนูล่าง
   (เดิมเป็นปุ่มลอยข้างกล่องแชท เอาออกแล้วเพราะทางเข้าซ้ำกับแถบเมนู) */
#menubar button.has-req{ position:relative; }
#menubar button.has-req::after{
  content:attr(data-req);
  position:absolute; top:1px; right:3px; min-width:14px; height:14px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; background:#d8483c; color:#fff;
  font-size:9px; font-weight:700; line-height:1; box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.friend-box{
  position:absolute; left:8px; bottom:180px; width:210px; max-height:44vh; z-index:9;
  display:flex; flex-direction:column;
  background:var(--win-bg); border:var(--win-border); border-radius:10px; box-shadow:var(--win-shadow);
}
.friend-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-bottom:1px solid var(--panel-border); }
.friend-title{ font-size:12px; font-weight:700; color:var(--gold); }
.friend-body{ overflow-y:auto; padding:4px; display:flex; flex-direction:column; gap:1px; }
.friend-sec{ font-size:9px; color:var(--muted); padding:5px 4px 2px; text-transform:none; }
.friend-row{ display:flex; align-items:center; gap:5px; padding:3px 4px; border-radius:6px; }
.friend-row:hover{ background:rgba(255,255,255,.07); }
.friend-dot{ width:6px; height:6px; border-radius:50%; background:#5a6474; flex:0 0 auto; }
.friend-dot.is-on{ background:#5ee27a; box-shadow:0 0 5px rgba(94,226,122,.8); }
.friend-mid{ flex:1; min-width:0; }
.friend-name{ font-size:11px; font-weight:700; color:var(--hud-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.friend-sub{ font-size:9px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.friend-acts{ display:flex; gap:2px; flex:0 0 auto; }
.friend-btn{ border:none; background:transparent; color:var(--muted); font-size:11px; padding:3px 4px; border-radius:5px; cursor:pointer; }
.friend-btn:hover{ background:rgba(255,255,255,.14); color:var(--gold); }
.friend-empty{ font-size:10px; color:var(--muted); padding:10px 6px; line-height:1.5; }
/* กำลังกระซิบอยู่ = ช่องพิมพ์เปลี่ยนสี ไม่งั้นเผลอพิมพ์ความลับลงห้องรวม */
.chat-input.is-whisper{ border-color:rgba(201,160,255,.75); color:#e6d8ff; }
body.is-touch .friend-box{ width:230px; max-height:52vh; }
body.is-touch .friend-row{ padding:7px 4px; }
body.is-touch .friend-btn{ font-size:14px; padding:6px 7px; }

/* ── การ์ดผู้เล่น: แตะที่ตัวคนแล้วเลือกว่าจะทำอะไร ──
   ลอยเหนือทุกอย่างในจอเกม (z สูงกว่าแถบเมนู) แต่ยังต่ำกว่าหน้าต่างเต็มจอ */
.pmenu{
  position:fixed; z-index:60; min-width:148px;
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--win-bg); border:var(--win-border); border-radius:10px; box-shadow:var(--win-shadow);
}
.pmenu-head{ display:flex; flex-direction:column; gap:1px; padding:2px 4px 6px; border-bottom:1px solid var(--panel-border); margin-bottom:3px; }
.pmenu-name{ font-size:13px; font-weight:700; color:var(--gold); }
.pmenu-job{ font-size:10px; color:var(--muted); }
.pmenu-btn{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 8px; border:none; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--hud-text); font-size:12px; font-weight:700; text-align:left;
}
.pmenu-btn:hover{ background:rgba(255,255,255,.12); color:var(--gold); }
.pmenu-ic{ font-size:15px; line-height:1; width:18px; text-align:center; }
.pmenu-label{ flex:1; }
/* กดไม่ได้ตอนนี้ = หรี่ + ต่อท้ายด้วยเหตุผล (ไม่ใช่กดแล้วเงียบ) */
.pmenu-btn.is-off{ opacity:.45; cursor:default; }
.pmenu-btn.is-off:hover{ background:transparent; color:var(--hud-text); }
.pmenu-why{ font-size:9px; color:var(--muted); font-weight:400; }
/* มือถือ: ปุ่มสูงพอสำหรับนิ้ว + ตัวอักษรใหญ่ขึ้น */
body.is-touch .pmenu{ min-width:170px; padding:7px; }
body.is-touch .pmenu-btn{ padding:14px 9px; font-size:13px; }   /* สูง ~45px = ขนาดที่นิ้วกดไม่พลาด */
body.is-touch .pmenu-ic{ font-size:17px; width:20px; }

/* ── กล่องถามกลางจอ: คำเชิญปาร์ตี้ / คำขอเป็นเพื่อน ──
   เล็กพอที่จะไม่บังการเล่น แต่อยู่กลางจอให้เห็นแน่ๆ (เดิมเป็นแค่บรรทัดในแชทที่ไม่มีใครทัน) */
.ask-pop{
  position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); z-index:70;
  min-width:230px; max-width:min(320px, 82vw);
  display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  background:var(--win-bg); border:var(--win-border); border-radius:12px; box-shadow:var(--win-shadow);
  animation:askIn .16s ease-out;
}
@keyframes askIn{ from{ opacity:0; transform:translate(-50%,-46%) scale(.94); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion:reduce){ .ask-pop{ animation:none; } }
.ask-head{ display:flex; align-items:center; gap:8px; }
.ask-ic{ font-size:18px; line-height:1; }
.ask-ic.mi{ width:30px; height:30px; }
.ask-title{ font-size:13px; font-weight:700; color:var(--gold); }
.ask-text{ font-size:12px; color:var(--hud-text); line-height:1.5; }
.ask-row{ display:flex; gap:8px; margin-top:2px; }
.ask-row .btn{ flex:1; padding:8px 10px; font-size:12px; }
.ask-yes{ background:linear-gradient(180deg,#3f7a4a,#2c5a37); border-color:rgba(120,220,140,.5); color:#eafff0; }
body.is-touch .ask-pop{ min-width:250px; padding:14px 16px; }
body.is-touch .ask-row .btn{ padding:13px 10px; font-size:13px; }

/* กล่องปาร์ตี้อยู่ "ใต้มินิแมพ" (มุมขวาบน) — แมพสูงราว 25% ของจอเกม */
.party-box{
  position:absolute; right:12px; top:27%; width:158px;
  display:none; flex-direction:column; gap:4px; z-index:7;
  background:var(--win-bg); border:var(--win-border); border-radius:10px; padding:7px 8px;
  box-shadow:var(--win-shadow);
}
.party-head{ display:flex; align-items:center; justify-content:space-between; }
.party-title{ font-size:12px; font-weight:700; color:var(--gold); }
.party-leave{ font-size:10px; padding:2px 7px; }
.party-ic{ font-size:14px; line-height:1; }
.party-ic.mi{ width:22px; height:22px; }
/* หัวกล่องมี 3 ชิ้น (ไอคอน · ชื่อ · ปุ่มออก) — ไอคอนกับชื่อต้องติดกัน ปุ่มออกไปชิดขวา
   ไม่งั้น space-between เดิมจะดันทั้งสามชิ้นกระจายคนละมุม */
.party-head{ gap:6px; justify-content:flex-start; }
.party-leave{ margin-left:auto; }
.party-list{ display:flex; flex-direction:column; gap:5px; }
.party-row{ display:flex; flex-direction:column; gap:2px; }
.party-name{ font-size:11px; color:var(--paper); }
.party-name.is-me{ color:var(--gold); font-weight:700; }
.party-hp{ height:5px; background:rgba(0,0,0,.5); border-radius:3px; overflow:hidden; }
.party-hp-fill{ height:100%; background:#5fbf5f; transition:width .2s linear; }
.party-hp-fill.is-low{ background:#c94b4b; }

/* ===== บทสนทนา (เควสเนื้อเรื่อง) — แถบล่างจอแบบเกม RPG ===== */
.dlg-box{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
  width:min(560px, 94vw); max-height:46%;
  display:flex; flex-direction:column; gap:6px; z-index:11;
  padding:var(--win-pad); background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
.dlg-head{ display:flex; align-items:center; justify-content:space-between; }
.dlg-name{ font-size:14px; font-weight:700; color:var(--gold); }
.dlg-x{ background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:0 4px; }
/* ⚠ flex:1 + overflow-y ต้องอยู่ที่ body — ไม่งั้นชื่อคนพูดเลื่อนหายไปพร้อมข้อความ */
.dlg-body{ flex:1; min-height:52px; overflow-y:auto; cursor:pointer; display:flex; flex-direction:column; gap:8px; }
.dlg-line{ font-size:14px; line-height:1.65; }
.dlg-dots{ display:flex; gap:4px; }
.dlg-dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); }
.dlg-dot.is-on{ background:var(--gold); }
.dlg-btns{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.dlg-choice{ border-color:var(--gold); }
@media (max-width:720px){ .dlg-box{ bottom:auto; top:8px; max-height:52%; } }

/* ===== สมุดบันทึก: เศษเนื้อเรื่องจากดันเจี้ยน ===== */
.lore-list{ display:flex; flex-direction:column; gap:7px; }
.lore-item{
  padding:7px 9px; border-radius:4px; background:rgba(232,226,208,.07);
  border:1px solid rgba(232,226,208,.14); border-left:3px solid var(--gold);
}
.lore-item.is-locked{ border-left-color:rgba(232,226,208,.18); opacity:.55; }
.lore-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:3px; }
.lore-kind{ font-size:10px; letter-spacing:.06em; color:var(--muted); }
.lore-depth{ font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lore-title{ font-size:13px; font-weight:700; color:var(--gold); margin-bottom:2px; }
.lore-item.is-locked .lore-title{ color:var(--muted); }
.lore-line{ font-size:12px; line-height:1.62; color:rgba(232,226,208,.82); }

/* ===== กระดานข่าวนครหลวง — อ่านอย่างเดียว ใบประกาศเรียงกันบนกระดาน ===== */
.nt-box{
  position:absolute; top:54px; left:50%; transform:translateX(-50%);
  width:min(480px, 94vw); max-height:calc(100% - 96px);
  display:flex; flex-direction:column; gap:8px; z-index:11;
  padding:var(--win-pad); background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
.nt-head{ display:flex; align-items:center; justify-content:space-between; }
.nt-title{ font-size:15px; font-weight:700; color:var(--gold); }
.nt-x{ background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:0 4px; }
/* ⚠ flex:1 + overflow-y ที่ body ไม่ใช่กล่องนอก — ไม่งั้นหัวหน้าต่างเลื่อนหายไปด้วย */
.nt-body{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.nt-empty{ font-size:12px; color:var(--muted); }
.nt-paper{
  padding:7px 9px; border-radius:4px; background:rgba(232,226,208,.07);
  border:1px solid rgba(232,226,208,.14); border-left:3px solid rgba(232,226,208,.22);
}
.nt-paper.is-pin{ border-left-color:var(--gold); background:rgba(232,226,208,.11); }
.nt-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:3px; }
.nt-cat{ font-size:10px; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.nt-name{ font-size:13px; font-weight:700; color:var(--paper); }
.nt-paper.is-pin .nt-name{ color:var(--gold); }
.nt-line{ font-size:12px; line-height:1.62; color:rgba(232,226,208,.82); }

/* ===== แผงลอย (ร้านค้าส่วนตัว) — โครงเดียวกับหน้าต่างเทรด ===== */
.vend-box{
  position:absolute; top:54px; left:50%; transform:translateX(-50%);
  width:min(460px, 94vw); max-height:calc(100% - 72px);
  display:flex; flex-direction:column; gap:8px; z-index:9;
  padding:var(--win-pad); background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
.vend-head{ display:flex; align-items:center; justify-content:space-between; }
.vend-title{ font-size:15px; font-weight:700; color:var(--gold); }
/* ⚠ ต้องมี flex:1 + overflow-y:auto ที่ตัว body ไม่ใช่ที่กล่องนอก — ไม่งั้นหัวหน้าต่างเลื่อนหายไปด้วย */
.vend-body{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
.vend-row{ display:flex; align-items:center; gap:6px; }
.vend-label{ font-size:11px; color:var(--muted); font-weight:700; }
.vend-name{ flex:1; min-width:0; }
.vend-note{ font-size:12px; color:var(--muted); }
.vend-grid{ display:flex; flex-direction:column; gap:4px; }
.vend-item{
  display:flex; align-items:center; gap:6px;
  padding:4px 6px; background:rgba(0,0,0,.25); border-radius:6px; font-size:12px;
}
.vend-iname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vend-iqty{ color:var(--muted); font-variant-numeric:tabular-nums; }
.vend-iprice{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.vend-price, .vend-qty{ width:72px; }
.vend-qty{ width:56px; }
.vend-msg{ font-size:12px; min-height:15px; color:var(--muted); }
.vend-msg.is-err{ color:#ff9d8a; }

.trade-box{
  position:absolute; top:54px; left:50%; transform:translateX(-50%);
  width:min(380px, 94vw); max-height:calc(100% - 72px); overflow-y:auto;
  display:flex; flex-direction:column; gap:8px; z-index:9;
  padding:var(--win-pad); background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
.trade-head{ display:flex; align-items:center; justify-content:space-between; }
.trade-title{ font-size:15px; font-weight:700; color:var(--gold); }
.trade-cols{ display:flex; gap:10px; }
.trade-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.trade-label{ font-size:11px; color:var(--muted); font-weight:700; }
.trade-slots{
  display:flex; flex-direction:column; gap:3px; min-height:96px;
  background:rgba(0,0,0,.24); border-radius:8px; padding:5px;
}
.trade-cell{
  font-size:11px; padding:4px 6px; border-radius:5px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid transparent;
}
.trade-cell:hover{ background:rgba(255,255,255,.13); }
.trade-cell.is-on{ border-color:var(--gold); background:rgba(244,211,90,.16); }
.trade-cell.is-them, .trade-cell.is-gold{ cursor:default; }
.trade-cell.is-gold{ color:var(--gold); font-weight:700; }
.trade-gold-row{ display:flex; align-items:center; gap:5px; }
.trade-gold{
  flex:1; min-width:0; padding:3px 6px; font-size:12px; font-family:inherit;
  color:var(--paper); background:rgba(0,0,0,.32);
  border:1px solid var(--panel-border); border-radius:6px; outline:none;
}
.trade-msg{ min-height:16px; font-size:11px; color:var(--muted); text-align:center; }
.trade-msg.is-err{ color:#ff9d8a; }
.trade-btns{ display:flex; gap:8px; }
.trade-btns .btn{ flex:1; padding:7px; font-size:13px; }

/* ═════ หน้าต่างแชท+บันทึกรวม (chatwin) — แทน .chat-box + .log-panel ที่เคยแยกกัน ═════ */
.chatwin{
  position:absolute; left:12px; bottom:132px; z-index:6;
  width:392px; display:flex; flex-direction:column;
  background:rgba(8,12,8,.82); border:2px solid var(--panel-border);
  border-radius:10px; overflow:hidden; box-shadow:var(--win-shadow);
}
.chatwin-head{ display:flex; align-items:stretch; gap:0; background:rgba(0,0,0,.3); }
.chatwin-tabs{ display:flex; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.chatwin-tabs::-webkit-scrollbar{ display:none; }
.chatwin-tab{
  position:relative; font:inherit; font-size:11.5px; font-weight:700; white-space:nowrap;
  padding:6px 10px; border:none; background:transparent; color:var(--muted); cursor:pointer;
}
.chatwin-tab:hover{ color:var(--hud-text); }
.chatwin-tab.is-active{ background:rgba(255,255,255,.09); color:var(--gold); }
/* แท็บที่ยังไม่มีระบบรองรับ — เทาไว้แต่กดได้ (กดแล้วบอกเหตุผล ไม่ใช่เงียบ) */
.chatwin-tab.is-locked{ color:rgba(255,255,255,.26); font-weight:400; }
.chatwin-dot{ display:none; margin-left:5px; padding:0 4px; border-radius:8px;
  background:var(--gold); color:#2a1c08; font-size:9.5px; font-weight:700; }
.chatwin-dot.is-on{ display:inline-block; }
.chatwin-toggle{ font:inherit; font-size:13px; padding:0 10px; border:none; cursor:pointer;
  background:transparent; color:var(--muted); }
.chatwin-toggle:hover{ color:var(--hud-text); }
.chatwin-body{
  height:150px; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 7px; font-size:11.5px; line-height:1.45;
}
.chatwin-line{ display:flex; gap:5px; align-items:baseline; }
.chatwin-ts{ flex:0 0 auto; color:rgba(255,255,255,.28); font-size:10px; font-variant-numeric:tabular-nums; }
.chatwin-who{ flex:0 0 auto; font-weight:700; color:#9fd0ff; }
.chatwin-text{ min-width:0; overflow-wrap:break-word; color:var(--hud-text); }
.chatwin-row{ display:flex; gap:5px; align-items:center; padding:5px 6px; background:rgba(0,0,0,.28); }
/* ชิปบอก "พิมพ์แล้วไปไหน" — แยกจากแท็บที่กำลังดู (ดู system อยู่ก็ยังพิมพ์คุยได้) */
.chatwin-chip{ flex:0 0 auto; padding:3px 7px; border-radius:6px; font-size:10.5px; font-weight:700;
  background:rgba(255,255,255,.1); color:var(--muted); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.chatwin-chip.is-party{ background:rgba(143,224,160,.2); color:#8fe0a0; }
.chatwin-chip.is-whisper{ background:rgba(224,168,255,.2); color:#e0a8ff; }
.chatwin-input{ flex:1; min-width:0; font:inherit; font-size:12px; padding:4px 7px;
  border:1px solid rgba(255,255,255,.16); border-radius:6px;
  background:rgba(0,0,0,.35); color:var(--hud-text); }
.chatwin-input:focus{ outline:none; border-color:var(--gold); }
.chatwin-send{ flex:0 0 auto; font:inherit; font-size:11.5px; font-weight:700; padding:4px 11px;
  border:none; border-radius:6px; background:var(--gold); color:#2a1c08; cursor:pointer; }
/* ย่อ: เหลือแค่แถบแท็บ — ยังเห็นตัวนับข้อความใหม่ต่อแท็บอยู่ */
.chatwin.is-collapsed .chatwin-body,
.chatwin.is-collapsed .chatwin-row{ display:none; }
.chatwin-body{ scrollbar-color:rgba(244,236,216,.34) transparent; }
.chatwin-body::-webkit-scrollbar{ width:8px; }
.chatwin-body::-webkit-scrollbar-thumb{ background-color:rgba(244,236,216,.34); }
/* แท็บอัปเดตมีของใหม่ที่ยังไม่ได้อ่าน — จุดแดงมุมบนขวา */
.chatwin-tab.has-new::after{
  content:""; position:absolute; top:4px; right:4px; width:6px; height:6px;
  border-radius:50%; background:#e05a5a;
}
.chatwin-chip.is-world{ background:rgba(255,196,107,.2); color:#ffc46b; }

/* ══════════ ตอนจบ ══════════ */
/* กว้างกว่าหน้าต่างอื่นและอยู่กลางจอ — หน้านี้อ่านอย่างเดียว ไม่ต้องเห็นเกมข้างหลัง */
.end-box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px, 94vw); max-height:calc(100% - 80px);
  display:flex; flex-direction:column; gap:10px; z-index:14;
  padding:18px 20px; background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
.end-head{ display:flex; align-items:center; justify-content:center; }
.end-title{ font-size:17px; font-weight:700; color:var(--gold); letter-spacing:.04em; }
/* flex:1 + overflow ที่ body เหมือนหน้าต่างอื่น — หัวต้องไม่เลื่อนตาม */
.end-body{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.end-lead{ font-size:12px; color:var(--muted); text-align:center; margin-bottom:2px; }
.end-pick{
  display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:5px; color:var(--paper);
  background:rgba(232,226,208,.07); border:1px solid rgba(232,226,208,.16);
  border-left:3px solid rgba(232,226,208,.28); font:inherit;
}
.end-pick:hover{ background:rgba(232,226,208,.13); border-left-color:var(--gold); }
.end-pick-name{ font-size:14px; font-weight:700; color:var(--gold); }
.end-pick-desc{ font-size:12px; line-height:1.55; color:rgba(232,226,208,.78); }
.end-line{ font-size:13px; line-height:1.85; color:rgba(232,226,208,.88); }
.end-fin{ font-size:12px; color:var(--muted); text-align:center; margin-top:8px; letter-spacing:.1em; }
.end-close{ align-self:center; margin-top:6px; }

/* ══════════ ครัว & โต๊ะแปรธาตุ ══════════ */
/* ตัวหน้าต่างเท่านั้น — ข้างในใช้คลาสชุดเดียวกับแท็บตีอาวุธ (wb-craft, craft-, mat-) */
/* อย่าเขียนชื่อคลาสแบบมีดอกจันติดสแลชในคอมเมนต์ CSS — มันปิดคอมเมนต์กลางคัน */
/* แล้วข้อความที่เหลือจะกลืนกฎถัดไปทั้งบล็อก (เคยทำให้ .kitchen-box หายทั้งอัน) */
/* จึงได้ layout เหมือนกันเป๊ะโดยไม่ต้องเขียน CSS ซ้ำ */
.kitchen-box{
  position:absolute; top:64px; left:50%; transform:translateX(-50%);
  width:min(430px, 94vw); max-height:calc(100% - 120px);
  display:flex; flex-direction:column; gap:8px; z-index:12;
  padding:var(--win-pad); background:var(--win-bg); border:var(--win-border);
  border-radius:var(--win-radius); box-shadow:var(--win-shadow); color:var(--paper);
}
/* flex:1 + overflow ที่ body — หัวหน้าต่างต้องไม่เลื่อนตาม (กับดักเดิมของทุกหน้าต่าง) */
.kitchen-body{ flex:1; min-height:0; overflow-y:auto; display:block; }

/* ── พื้นหลังป่ามีชีวิตของหน้าก่อนเข้าเกม (src/livebg.js) ──
   ⚠ วาดที่ความละเอียดพิกเซลอาร์ตแล้วให้ CSS ขยาย — pixelated เท่านั้น
      ปล่อยให้เบราว์เซอร์ smooth คือภาพเบลอทั้งจอ ผิดกับทั้งเกมที่คมทุกพิกเซล */
#livebg{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  image-rendering:pixelated;
  pointer-events:none;          /* พื้นหลังล้วน ห้ามกินคลิกของฟอร์มล็อกอิน */
  background:#101a10;           /* กันจอขาวแวบตอนเฟรมแรกยังไม่วาด */
}
/* กล่องหน้าจอต้องลอยเหนือพื้นหลัง + ทึบขึ้นหน่อยเพราะป่ามีลายเยอะ */
#screens{ position:relative; z-index:1; }
.screen{ background:rgba(24,38,22,.93); backdrop-filter:blur(2px); }

/* ── หน้าสมัครสมาชิก ── */
.screen-register{ width:min(460px, 94vw); }
/* ปุ่ม Google: ตอนนี้ยังเป็นทางที่ยังไม่เปิด — หน้าตาจึงต้องไม่ชวนให้คิดว่าเป็นทางหลัก */
.btn-google{
  background:rgba(255,255,255,.06);
  border-color:var(--panel-border);
  color:var(--muted);
}
.btn-google:hover{ color:var(--paper); border-color:var(--gold); }

/* ══════════ หน้าต่างกิลด์ ══════════ */
/* กว้างกว่าหน้าต่างเพื่อนเพราะมีตาราง 3 แท็บ + คลังของ */
.guild-box{
  position:absolute; left:50%; top:54px; transform:translateX(-50%);
  width:340px; max-height:calc(100% - 120px); z-index:10;
  display:flex; flex-direction:column;
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  box-shadow:var(--win-shadow); color:var(--paper);
}
.guild-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-bottom:1px solid var(--panel-border); }
.guild-title{ font-size:13px; font-weight:700; color:var(--gold); }
.guild-tabs{ display:flex; gap:2px; padding:4px 6px 0; }
.guild-tab{
  flex:1; padding:5px 4px; font-size:11px; cursor:pointer;
  background:rgba(0,0,0,.25); color:var(--muted);
  border:1px solid var(--panel-border); border-bottom:0; border-radius:6px 6px 0 0;
}
.guild-tab.is-on{ background:rgba(255,255,255,.09); color:var(--gold); font-weight:700; }
.guild-body{ overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }

.guild-sec{ font-size:10px; color:var(--muted); padding:7px 2px 2px; }
.guild-empty{ font-size:11px; color:var(--muted); padding:10px 4px; text-align:center; }
.guild-note{ font-size:10px; color:var(--muted); padding:2px 4px 6px; }
.guild-note.is-bad{ color:#e08a8a; }

.guild-banner{ padding:6px 8px; background:rgba(0,0,0,.28); border-radius:8px; margin-bottom:2px; }
.guild-gname{ font-size:14px; font-weight:700; color:var(--gold); }
.guild-glv{ font-size:11px; color:var(--paper); }
.guild-sub{ font-size:10px; color:var(--muted); }
.guild-xp{ height:6px; margin:4px 0 2px; background:rgba(0,0,0,.5); border-radius:999px; overflow:hidden; }
.guild-xp-fill{ height:100%; background:linear-gradient(90deg,#c9a05a,#ffd08a); }
.guild-notice{ font-size:11px; padding:5px 7px; background:rgba(201,160,90,.13); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; margin:3px 0; }

.guild-row{ display:flex; align-items:center; gap:6px; padding:4px 5px; border-radius:6px; }
.guild-row:hover{ background:rgba(255,255,255,.06); }
.guild-dot{ width:6px; height:6px; border-radius:50%; background:#5a6474; flex:0 0 auto; }
.guild-dot.is-on{ background:#5ee27a; box-shadow:0 0 5px rgba(94,226,122,.8); }
.guild-mid{ flex:1 1 auto; min-width:0; }
.guild-name{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guild-acts{ display:flex; gap:3px; flex:0 0 auto; }
.guild-btn{
  padding:3px 7px; font-size:10px; cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.09); color:var(--paper);
  border:1px solid var(--panel-border); border-radius:5px;
}
.guild-btn:hover{ background:rgba(255,255,255,.17); }
.guild-btn.is-go{ background:rgba(94,226,122,.18); border-color:#5ee27a; color:#bff5cb; }
.guild-btn.is-bad{ background:rgba(224,138,138,.15); border-color:#e08a8a; color:#f0c4c4; }
.guild-btn:disabled{ opacity:.4; cursor:default; }

.guild-form{ display:flex; gap:4px; padding:3px 2px; }
.guild-input{
  flex:1 1 auto; min-width:0; padding:4px 6px; font-size:11px;
  background:rgba(0,0,0,.4); color:var(--paper);
  border:1px solid var(--panel-border); border-radius:5px; font-family:inherit;
}
.guild-buffs{ display:flex; flex-wrap:wrap; gap:4px; padding:2px; }
.guild-buff{ font-size:10px; padding:3px 7px; background:rgba(94,226,122,.14); border:1px solid rgba(94,226,122,.4); border-radius:999px; color:#bff5cb; }
.guild-bag{ display:flex; flex-wrap:wrap; gap:3px; padding:2px; }
.guild-bagitem{
  padding:3px 6px; font-size:10px; cursor:pointer; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(255,255,255,.07); color:var(--paper);
  border:1px solid var(--panel-border); border-radius:5px;
}
.guild-bagitem:hover{ background:rgba(255,255,255,.16); }
.guild-bagitem:disabled{ opacity:.35; cursor:default; }
.guild-log{ max-height:130px; overflow-y:auto; background:rgba(0,0,0,.25); border-radius:6px; padding:4px; }
.guild-logrow{ font-size:10px; color:var(--muted); padding:1px 2px; }

/* มือถือ: หน้าต่างเต็มความกว้าง */
body.is-mobile .guild-box{ width:calc(100% - 16px); max-height:calc(100% - 90px); }

/* ══════════ หน้าต่างภารกิจรายวัน ══════════ */
.daily-box{
  position:absolute; left:50%; top:54px; transform:translateX(-50%);
  width:330px; max-height:calc(100% - 120px); z-index:10;
  display:flex; flex-direction:column;
  background:var(--win-bg); border:var(--win-border); border-radius:var(--win-radius);
  box-shadow:var(--win-shadow); color:var(--paper);
}
.daily-head{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--panel-border); }
.daily-title{ font-size:13px; font-weight:700; color:var(--gold); flex:1 1 auto; }
.daily-clock{ font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.daily-tabs{ display:flex; gap:2px; padding:4px 6px 0; }
.daily-tab{
  flex:1; position:relative; padding:5px 4px; font-size:11px; cursor:pointer;
  background:rgba(0,0,0,.25); color:var(--muted);
  border:1px solid var(--panel-border); border-bottom:0; border-radius:6px 6px 0 0;
}
.daily-tab.is-on{ background:rgba(255,255,255,.09); color:var(--gold); font-weight:700; }
.daily-pip{
  position:absolute; top:-4px; right:-2px; min-width:14px; padding:0 3px;
  font-size:9px; line-height:14px; border-radius:999px;
  background:#e05a5a; color:#fff; font-weight:700;
}
.daily-body{ overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:4px; }
.daily-sec{ font-size:10px; color:var(--muted); padding:7px 2px 2px; }
.daily-empty{ font-size:11px; color:var(--muted); padding:12px 4px; text-align:center; }

.daily-q{ padding:6px 8px; background:rgba(0,0,0,.26); border-radius:8px; border-left:3px solid var(--panel-border); }
.daily-q.is-ready{ border-left-color:#5ee27a; background:rgba(94,226,122,.1); }
.daily-q.is-done{ opacity:.5; }
.daily-qtop{ display:flex; justify-content:space-between; gap:6px; align-items:baseline; }
.daily-qtext{ font-size:12px; }
.daily-qrw{ font-size:9px; color:var(--gold); white-space:nowrap; }
.daily-bar{ height:5px; margin:4px 0 3px; background:rgba(0,0,0,.5); border-radius:999px; overflow:hidden; }
.daily-bar-fill{ height:100%; background:linear-gradient(90deg,#c9a05a,#ffd08a); }
.daily-qbot{ display:flex; justify-content:space-between; align-items:center; }
.daily-count{ font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.daily-tag{ font-size:9px; color:#5ee27a; }
.daily-btn{
  padding:3px 9px; font-size:10px; cursor:pointer;
  background:rgba(255,255,255,.09); color:var(--paper);
  border:1px solid var(--panel-border); border-radius:5px;
}
.daily-btn.is-go{ background:rgba(94,226,122,.2); border-color:#5ee27a; color:#bff5cb; font-weight:700; }
.daily-btn:hover{ filter:brightness(1.25); }

.daily-banner{ padding:7px 9px; background:rgba(0,0,0,.28); border-radius:8px; }
.daily-streak{ font-size:15px; font-weight:700; color:var(--gold); }
.daily-sub{ font-size:10px; color:var(--muted); }
.daily-claimbox{ display:flex; align-items:center; gap:8px; padding:7px 9px; background:rgba(94,226,122,.12); border:1px solid rgba(94,226,122,.4); border-radius:8px; }
.daily-claimbox .daily-qtext{ flex:1 1 auto; }

.daily-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:2px; }
.daily-cell{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border:1px solid var(--panel-border); border-radius:5px;
}
.daily-cell.is-big{ background:rgba(201,160,90,.18); border-color:var(--gold); }
.daily-cell.is-past{ opacity:.4; }
.daily-cell.is-now{ box-shadow:0 0 0 2px #5ee27a inset; }
.daily-day{ font-size:9px; color:var(--muted); font-variant-numeric:tabular-nums; }
.daily-gift{ font-size:13px; line-height:1; }

body.is-mobile .daily-box{ width:calc(100% - 16px); max-height:calc(100% - 90px); }