/* ============================================================
   Dragon Nest Private Server — Epic Gaming Theme (มืด/สว่าง)
   ============================================================
   โหมดสีคุมด้วย <html data-theme="dark|light"> (ตั้งจากปุ่ม 🌙/☀️ บนแถบเมนู)
   ค่าเริ่มต้นตามเครื่องผู้ใช้ (prefers-color-scheme) แล้วจำไว้ใน localStorage

   กติกาการใช้ตัวแปรสี — สำคัญตอนเขียน CSS เพิ่ม:
   · --gold/--gold2/--ember  = สีที่ใช้กับ "ข้อความ/ขอบ" (โหมดสว่างจะเข้มลงให้อ่านออก)
   · --brand-*               = สีแบรนด์สำหรับ "พื้น/ปุ่ม/gradient" (คงสดทั้ง 2 โหมด)
   · rgba(var(--w),.06)      = สีซ้อนโปร่งบนพื้น (hover) — มืด=ขาว, สว่าง=เข้ม
   · rgba(var(--b),.4)       = เงา
   · --hi                    = ข้อความเน้นสุด (แทน #fff เดิม)
   ============================================================ */
:root{
  color-scheme:dark;   /* ให้ scrollbar/ตัวเลือกวันที่ของเบราว์เซอร์เข้าธีม */
  --bg:#0a0b12; --bg2:#12131f; --panel:#161826; --panel2:#1d2030;
  --line:#2a2d42; --line2:#3a3e5c;
  --gold:#f0b429; --gold2:#ffd76a; --ember:#ff7a2f; --crimson:#e23b4e;
  --txt:#e8e9f2; --muted:#9aa0bd; --muted2:#6b7096;
  --ok:#39d98a; --warn:#ffcc44; --danger:#ff5a6a;
  --radius:14px; --shadow:0 12px 40px rgba(0,0,0,.55);
  --glow:0 0 24px rgba(240,180,41,.35);

  /* ---- โทเคนธีม ---- */
  --w:255,255,255;          /* พื้นซ้อนโปร่ง */
  --b:0,0,0;                /* เงา */
  --hi:#fff;                /* ข้อความเน้นสุด */
  --inp:#0e0f18;            /* พื้นช่องกรอก/เลือก/กล่องข้อมูล */
  --cell-bg:#0d0e16;        /* ช่องไอเทมว่าง */
  --nav-bg:rgba(10,11,18,.82);
  --foot-bg:rgba(8,9,14,.7);
  --tip-bg:rgba(10,11,17,.98);
  --hero-ov1:rgba(10,11,18,.35); --hero-ov2:rgba(10,11,18,.9);
  --band:rgba(0,0,0,.2);    /* แถบคั่นเซกชัน (มืด=เข้มกว่าพื้น · สว่าง=ขาวกว่าพื้น) */
  --body-fx1:rgba(255,122,47,.16); --body-fx2:rgba(226,59,78,.13); --body-fx3:rgba(240,180,41,.08);
  /* สีแบรนด์คงที่ (พื้น/ปุ่ม/gradient) */
  --brand-gold:#f0b429; --brand-gold2:#ffd76a; --brand-ember:#ff7a2f; --on-brand:#1a1205;
  /* สีสถานะโทนอ่อน (เดิมฮาร์ดโค้ด) */
  --ok2:#7cf0b6; --bad2:#ff9aa4; --warn2:#ffe08a; --stat-v:#8ee9a3;
  --pink:#f472b6; --ember2:#ffb27a; --silver:#cfd6e6; --bronze:#e0a672;
  /* ป้ายเจ้าของเซิร์ฟ (ข้อความไล่เฉดทอง) */
  --owner-grad:linear-gradient(120deg,#fff3c4 0%,#ffd76a 25%,#f0b429 50%,#ffe9a8 65%,#f0b429 80%,#ff7a2f 100%);
  --owner-shadow:0 0 10px rgba(255,200,80,.4);
  /* หน้าต่าง/แท็บสไตล์ในเกม */
  --win-bg:linear-gradient(180deg,#15151c,#0c0c11);
  --win-title:#e8d5a0;
  --tab-bg:linear-gradient(180deg,#20202a,#14141b);
  --tab-on-bg:linear-gradient(180deg,#3a3222,#221d13);
  --tab-on-txt:#f0d99a;
  --tab-sub-bg:linear-gradient(180deg,#1d1d26,#131319);
  --ui-filter:brightness(.7) sepia(.4) hue-rotate(-14deg) saturate(1.5);
  --ui-filter-on:brightness(.95) sepia(.4) hue-rotate(-14deg) saturate(1.6);
  --bag-filter:brightness(.62) sepia(.38) hue-rotate(-14deg) saturate(1.45);
  --doll-bg:rgba(0,0,0,.25);   /* พื้นกรอบรูปตัวละคร */
  --cap-txt:#e6d6a8;           /* ชื่อช่องสวมใส่ (ทับบนรูปช่อง) */
  --cap-bg:linear-gradient(transparent,rgba(0,0,0,.82) 55%);
  /* เลขจำนวน/ค่าตีบวกบนรูปไอเทม — ตัวสว่างขอบดำในโหมดมืด, ตัวเข้มขอบขาวในโหมดสว่าง */
  --cnt-txt:#fff; --cnt-ench:#7cf0b6;
  --cnt-shadow:0 1px 2px #000,0 0 3px #000;
}

/* ---------- โหมดสว่าง ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f3efe6; --bg2:#fbf8f1; --panel:#ffffff; --panel2:#f8f3e9;
  --line:#e2dac8; --line2:#cdc2a6;
  --gold:#a8760f; --gold2:#87560f; --ember:#c2410c; --crimson:#b4213c;
  --txt:#241f2e; --muted:#5d5870; --muted2:#7f7991;
  --ok:#0f8f55; --warn:#8a6200; --danger:#c0392b;
  --shadow:0 10px 30px rgba(120,100,60,.16);
  --glow:0 0 18px rgba(240,180,41,.4);

  --w:36,28,64; --b:40,32,18;
  --hi:#16121f;
  --inp:#fffdf7;
  --cell-bg:#ece5d6;
  --nav-bg:rgba(251,248,241,.9);
  --foot-bg:rgba(240,234,222,.9);
  --tip-bg:rgba(255,253,247,.99);
  --hero-ov1:rgba(248,244,235,.5); --hero-ov2:rgba(248,244,235,.93);
  --band:rgba(255,255,255,.6);
  --body-fx1:rgba(255,122,47,.12); --body-fx2:rgba(226,59,78,.08); --body-fx3:rgba(240,180,41,.14);

  --ok2:#0b8a52; --bad2:#bf2c3c; --warn2:#8a6200; --stat-v:#0c7a4c;
  --pink:#be185d; --ember2:#c2410c; --silver:#6b7280; --bronze:#9a5b2a;
  --owner-grad:linear-gradient(120deg,#a8760f 0%,#8a5a0c 25%,#6f4506 50%,#b4820f 65%,#8a5a0c 80%,#a8330a 100%);
  --owner-shadow:none;

  --win-bg:linear-gradient(180deg,#fffdf6,#f2ebdc);
  --win-title:#6b4a08;
  --tab-bg:linear-gradient(180deg,#fdfaf2,#efe7d6);
  --tab-on-bg:linear-gradient(180deg,#f8e7bd,#e9d49c);
  --tab-on-txt:#5e400a;
  --tab-sub-bg:linear-gradient(180deg,#fbf7ee,#f0e9da);
  /* พื้นผิว UI ของเกมเป็นรูปโทนเข้ม ดันด้วย brightness อย่างเดียวได้แค่เทาหม่น
     จึงกลับค่าสี (invert) แล้วย้อมครีมด้วย sepia ให้เข้ากับพื้นสว่าง */
  --ui-filter:invert(.88) sepia(.45) hue-rotate(-12deg) saturate(1.1) brightness(1.05);
  --ui-filter-on:invert(.85) sepia(.5) hue-rotate(-12deg) saturate(1.4) brightness(1.08);
  --bag-filter:invert(.88) sepia(.45) hue-rotate(-12deg) saturate(1.1) brightness(1.05);
  --doll-bg:rgba(255,255,255,.5);
  --cap-txt:#4a3512;
  --cap-bg:linear-gradient(transparent,rgba(255,250,238,.92) 55%);
  --cnt-txt:#1a1206; --cnt-ench:#07603a;
  --cnt-shadow:0 1px 2px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.75);
}
/* สีอาชีพ/สีระดับไอเทมมาจาก inline style ที่ PHP ใส่ให้ (class_color / item_rank_color)
   โทนพวกนี้สว่าง เลยจางบนพื้นสีอ่อน — ดึงให้เข้มด้วย filter แทนการแก้สีในโค้ด PHP */
html[data-theme="light"] .rank-table .nm .job,
html[data-theme="light"] .char .cc,
html[data-theme="light"] .itdb-name[style],
html[data-theme="light"] .cd-v[style*="color"]{filter:brightness(.62) saturate(1.4)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Kanit','Segoe UI',system-ui,sans-serif;
  color:var(--txt); background:var(--bg); line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
  background-image:
    radial-gradient(900px 500px at 78% -8%, var(--body-fx1), transparent 60%),
    radial-gradient(760px 520px at 12% 0%, var(--body-fx2), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, var(--body-fx3), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--gold2);text-decoration:none;transition:.15s}
a:hover{color:var(--hi)}
h1,h2,h3{font-family:'Cinzel','Kanit',serif;letter-spacing:.5px;line-height:1.2;margin:0 0 .4em}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- top nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;
  font-weight:800;font-size:1.25rem;color:var(--hi);text-shadow:var(--glow)}
.brand .dragon{font-size:1.5rem;filter:drop-shadow(0 0 8px var(--ember))}
.brand .dragon-logo{height:50px;width:auto;display:block;filter:drop-shadow(0 0 6px var(--ember))}
.brand b{background:linear-gradient(90deg,var(--gold2),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* เมนูเริ่มถัดจากโลโก้ (เดิม margin-left:auto ดันไปกองขวาหมด เหลือช่องว่างกลางเป็นรู
   พอมีเมนูเยอะ+ป้ายยศ เลยแน่นจนอ่านยาก) ส่วนกล่องผู้ใช้ค่อยดันไปขวาสุดแทน */
.nav-links{display:flex;gap:4px;margin-left:14px;flex:1 1 auto;align-items:center;flex-wrap:wrap}
.nav-links a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:500}
.nav-links a:hover{color:var(--hi);background:rgba(var(--w),.06)}
.nav-links a.active{color:var(--gold2);background:rgba(240,180,41,.1)}
.nav-user{display:flex;align-items:center;gap:10px;margin-left:auto;
  padding-left:14px;border-left:1px solid var(--line)}
/* ชื่อ + ยศ เรียงบรรทัดเดียว: ไอดีอยู่หน้า ป้ายยศต่อท้าย
   (ชื่อยาว ๆ ตัดด้วย ... กันดันเมนูจนล้น) */
.nav-user .who{display:flex;align-items:center;gap:7px;min-width:0;
  line-height:1.25;font-size:.85rem;color:var(--muted)}
.nav-user .who b{color:var(--gold2);font-size:.95rem;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ป้ายยศต่อท้ายชื่อ (ระบบยศใช้ตารางร่วมกับ /itemdb — ตั้งยศที่ /itemdb/roles) */
.role-tag{flex:none;padding:1px 8px;border-radius:999px;font-size:.7rem;
  background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.35);color:var(--gold2)}

/* ป้ายเจ้าของเซิร์ฟเวอร์ — ทองไล่เฉด + แถบแสงวิ่ง (ชุดเดียวกับ /itemdb) */
.role-tag-owner{
  position:relative;overflow:hidden;
  padding:1px 8px 1px 6px;font-weight:700;letter-spacing:0;font-size:.65rem;white-space:nowrap;
  color:transparent;background:var(--owner-grad);
  -webkit-background-clip:text;background-clip:text;
  border:1px solid rgba(255,215,106,.55);
  box-shadow:0 0 6px rgba(240,180,41,.3), inset 0 0 8px rgba(240,180,41,.12);
  text-shadow:var(--owner-shadow);
}
.role-tag-owner::before{content:'👑';margin-right:3px;font-size:.85em;-webkit-text-fill-color:initial;color:initial}
.role-tag-owner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(var(--w),.5) 50%,transparent 60%);
  transform:translateX(-120%);animation:roleShine 4.5s ease-in-out infinite;
}
@keyframes roleShine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion: reduce){ .role-tag-owner::after{animation:none;display:none} }

/* ---------- เมนูเครื่องมือในแดชบอร์ดแอดมิน ---------- */
.adm-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.adm-tool{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(var(--w),.05),rgba(var(--w),.02));
  border:1px solid var(--line);transition:.15s}
.adm-tool:hover{border-color:rgba(240,180,41,.45);background:rgba(240,180,41,.07);text-decoration:none}
.adm-tool-ic{font-size:1.6rem;flex:none}
.adm-tool b{display:block;color:var(--txt)}
.adm-tool .muted{display:block;font-size:.82rem;margin-top:2px}

/* ---------- wallet bar (Point/Cash/DNP/Gold) ---------- */
.wallet-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.wallet-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
  background:rgba(var(--w),.03);border:1px solid var(--line2);font-size:.82rem;color:var(--muted);white-space:nowrap}
.wallet-chip .ic{font-size:.95rem}
.wallet-chip .k{opacity:.8}
.wallet-chip b{font-family:'Cinzel';font-weight:700;letter-spacing:.2px}
.wallet-chip.point{border-color:rgba(240,180,41,.35)} .wallet-chip.point b{color:var(--gold2)}
.wallet-chip.cash{border-color:rgba(57,217,138,.3)} .wallet-chip.cash b{color:var(--ok2)}
.wallet-chip.dnp{border-color:rgba(236,72,153,.3)} .wallet-chip.dnp b{color:var(--pink)}
.wallet-chip.gold{border-color:rgba(255,122,47,.3)} .wallet-chip.gold b{color:var(--ember)}
.wallet-link{font-size:.82rem;color:var(--gold2);font-weight:600;padding:5px 10px;border-radius:20px;border:1px solid rgba(240,180,41,.3)}
.wallet-link:hover{background:rgba(240,180,41,.1);color:var(--hi)}

/* ---------- ปุ่มสลับโหมดสว่าง/มืด (อยู่ท้ายแถบเมนู) ----------
   ไอคอนโชว์ "โหมดที่จะสลับไป": อยู่โหมดมืดเห็น ☀️ · อยู่โหมดสว่างเห็น 🌙 */
.theme-tgl{flex:none;width:38px;height:38px;margin-left:10px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.05rem;line-height:1;cursor:pointer;border-radius:11px;
  background:rgba(var(--w),.05);border:1px solid var(--line2);color:var(--txt);
  transition:background .18s,border-color .18s,transform .18s}
.theme-tgl:hover{background:rgba(240,180,41,.12);border-color:var(--gold);transform:rotate(-12deg) scale(1.08)}
.theme-tgl:active{transform:scale(.94)}
.theme-tgl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-tgl .t-ic{pointer-events:none}
.theme-tgl .t-moon{display:none}
html[data-theme="light"] .theme-tgl .t-sun{display:none}
html[data-theme="light"] .theme-tgl .t-moon{display:inline}
/* ใส่ transition เฉพาะจังหวะกดสลับ (ถอดออกทันที) ไม่ให้หน่วงตอนโหลดหน้า */
html.theme-anim,html.theme-anim *{
  transition:background-color .25s ease,background-image .25s ease,border-color .25s ease,color .2s ease!important}
@media (prefers-reduced-motion: reduce){
  .theme-tgl:hover{transform:none}
  html.theme-anim,html.theme-anim *{transition:none!important}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:12px;font-family:'Kanit';font-weight:600;
  font-size:1rem;cursor:pointer;border:1px solid transparent;transition:.18s;
  text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--brand-gold),var(--brand-ember));
  color:var(--on-brand);box-shadow:0 8px 26px rgba(255,122,47,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,122,47,.5);color:var(--on-brand)}
.btn-ghost{background:rgba(var(--w),.04);border-color:var(--line2);color:var(--txt)}
.btn-ghost:hover{background:rgba(var(--w),.09);border-color:var(--gold);color:var(--hi)}
.btn-danger{background:rgba(226,59,78,.12);border-color:rgba(226,59,78,.5);color:var(--bad2)}
.btn-danger:hover{background:rgba(226,59,78,.22);color:var(--hi)}
.btn-block{width:100%}
.btn-lg{padding:14px 30px;font-size:1.08rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:96px 0 84px;text-align:center;
  background:
    linear-gradient(180deg,var(--hero-ov1),var(--hero-ov2)),
    url('hero.jpg') center/cover no-repeat, var(--bg2);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 50% -10%,rgba(240,180,41,.22),transparent 70%)}
.hero .kicker{display:inline-block;letter-spacing:3px;text-transform:uppercase;
  font-size:.8rem;color:var(--gold2);border:1px solid rgba(240,180,41,.35);
  padding:5px 16px;border-radius:20px;margin-bottom:22px;background:rgba(240,180,41,.06)}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:0 0 14px;
  text-shadow:0 4px 30px rgba(255,122,47,.4)}
.hero h1 span{background:linear-gradient(90deg,var(--gold2),var(--ember) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto 30px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- sections ---------- */
section.block{padding:56px 0}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head h2{font-size:2rem;color:var(--hi)}
.sec-head .bar{width:64px;height:3px;margin:14px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-ember))}
.sec-head p{color:var(--muted);margin-top:10px}

/* ---------- grid + cards ---------- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow);transition:.2s}
.card:hover{border-color:var(--line2);transform:translateY(-3px)}
.card .ico{font-size:2.2rem;margin-bottom:12px;display:block;
  filter:drop-shadow(0 0 10px rgba(255,122,47,.5))}
.card h3{color:var(--gold2);font-size:1.2rem}
.card p{color:var(--muted);margin:8px 0 0;font-size:.96rem}

/* ---------- news list ---------- */
.news{display:flex;flex-direction:column;gap:12px}
.news-item{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:.18s}
.news-item:hover{border-color:var(--gold);background:var(--panel2)}
.news-item .tag{flex-shrink:0;font-size:.78rem;font-weight:600;padding:4px 12px;
  border-radius:20px;background:rgba(240,180,41,.14);color:var(--gold2)}
.news-item .date{color:var(--muted2);font-size:.85rem;flex-shrink:0;min-width:92px}
.news-item .t{color:var(--txt);font-weight:500}

/* ---------- download ---------- */
.dl-card{display:flex;align-items:center;gap:22px;padding:24px 28px}
.dl-card .ico{font-size:3rem;margin:0;flex-shrink:0}
.dl-card .info{flex:1}
.dl-card .info h3{margin:0 0 4px}
.dl-card .info .size{color:var(--muted2);font-size:.85rem}
.dl-card .info p{margin:6px 0 0}
.dl-soon{opacity:.6;pointer-events:none}

/* ---------- forms / auth ---------- */
.auth-wrap{max-width:440px;margin:56px auto;padding:0 20px}
.panel{background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.panel h2{text-align:center;color:var(--hi);margin-bottom:6px}
.panel .sub{text-align:center;color:var(--muted);margin-bottom:26px;font-size:.95rem}
.field{margin-bottom:18px}
.field label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:7px;font-weight:500}
.field input{width:100%;padding:12px 14px;border-radius:11px;font-family:'Kanit';
  font-size:1rem;color:var(--txt);background:var(--inp);border:1px solid var(--line2);transition:.15s}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,180,41,.15)}
.field select{width:100%;padding:12px 14px;border-radius:11px;font-family:'Kanit';font-size:1rem;
  color:var(--txt);background:var(--inp);border:1px solid var(--line2);transition:.15s;cursor:pointer}
.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,180,41,.15)}
.field select option{background:var(--inp)}
.field .hint{font-size:.8rem;color:var(--muted2);margin-top:5px}
.form-foot{text-align:center;margin-top:20px;color:var(--muted);font-size:.92rem}
.remember{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--muted);
  font-size:.95rem;cursor:pointer;user-select:none}
.remember input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}

/* ---------- alerts ---------- */
.alert{padding:13px 18px;border-radius:11px;margin-bottom:20px;font-size:.95rem;
  border:1px solid;line-height:1.6}
.alert-err{background:rgba(255,90,106,.1);border-color:rgba(255,90,106,.4);color:var(--bad2)}
.alert-ok{background:rgba(57,217,138,.1);border-color:rgba(57,217,138,.4);color:var(--ok2)}
.alert-warn{background:rgba(255,204,68,.1);border-color:rgba(255,204,68,.4);color:var(--warn2)}

/* ---------- dashboard ---------- */
.dash-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.dash-head .avatar{width:66px;height:66px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  background:linear-gradient(135deg,var(--brand-gold),var(--brand-ember));color:var(--on-brand);box-shadow:var(--glow)}
/* แบบใส่โลโก้ DN แทนอิโมจิ — พื้นเป็นโทนการ์ด ไม่ใช่ทอง ไม่งั้นมังกรทองจะกลืนไปกับพื้น */
.dash-head .avatar.avatar-logo{padding:5px;box-shadow:none;
  background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line2)}
.dash-head .avatar.avatar-logo img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 6px var(--ember))}
.dash-head h1{margin:0;font-size:1.8rem}
.dash-head .muted{color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.stat .k{color:var(--muted);font-size:.85rem}
.stat .v{font-size:1.5rem;font-weight:700;color:var(--gold2);margin-top:4px;font-family:'Cinzel'}
.stat .v.small{font-size:1.05rem;font-family:'Kanit';word-break:break-all}
.badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.82rem;font-weight:600}
.badge-ok{background:rgba(57,217,138,.16);color:var(--ok2)}
.badge-ban{background:rgba(255,90,106,.16);color:var(--bad2)}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.char{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px;display:flex;align-items:center;gap:12px;transition:.18s;
  text-decoration:none;color:inherit;cursor:pointer}
.char:hover{border-color:var(--gold);transform:translateY(-2px)}
.char .ci{font-size:1.5rem;width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.char .ci img{width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 0 3px rgba(var(--b),.6))}
.char .cn{font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char .cc{font-size:.82rem;font-weight:500}
/* ---------- ดาวปักหมุดตัวละคร (ตัวที่ติดดาวถูกเรียงขึ้นก่อนเสมอ) ---------- */
/* เว้นที่ทางขวาให้ดาว ไม่งั้นชื่อตัวละครยาว ๆ จะวิ่งไปชนดาว */
.char{position:relative;padding-right:32px}
.char-star{position:absolute;top:3px;right:3px;width:28px;height:28px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:1.08rem;cursor:pointer;
  border:none;border-radius:8px;background:transparent;color:var(--line2);
  opacity:0;transition:opacity .15s,color .15s,transform .15s}
.char:hover .char-star,.char-star:focus-visible{opacity:1}
.char-star:hover{color:var(--gold);transform:scale(1.15)}
.char-star:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.char.fav .char-star{opacity:1;color:var(--gold);text-shadow:0 0 8px rgba(240,180,41,.45)}
.char.fav{border-color:rgba(240,180,41,.45)}
.char-star.busy{opacity:1;color:var(--muted2);pointer-events:none}
@media (hover:none){ .char-star{opacity:1;color:var(--line2)} }
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}

/* ---------- character detail ---------- */
.cd-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.cd-k{color:var(--muted);font-size:.95rem}
.cd-v{color:var(--txt);font-weight:600}
.cd-block{padding:16px 0;border-bottom:1px solid var(--line)}
.cd-block .cd-k{display:block;margin-bottom:12px}
.cd-tags{display:flex;gap:8px;flex-wrap:wrap}
.cd-tag{padding:6px 14px;border-radius:20px;background:rgba(255,122,47,.12);
  border:1px solid rgba(255,122,47,.35);color:var(--ember);font-weight:600;font-size:.9rem}
.cd-none{color:var(--muted2);font-size:.92rem}
.cd-seals{margin:0;padding-left:20px;color:var(--txt)}
.cd-seals li{margin:6px 0}

/* ---------- account zone: left sidebar + content ---------- */
.acct-wrap{max-width:1040px;margin:40px auto;padding:0 20px;
  display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.acct-nav{background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:12px;
  position:sticky;top:20px;display:flex;flex-direction:column;gap:4px}
.acct-nav .lbl{font-size:.72rem;color:var(--muted);padding:8px 12px 6px;
  text-transform:uppercase;letter-spacing:1.5px}
.acct-nav a{padding:11px 14px;border-radius:10px;color:var(--txt);font-weight:500;
  display:flex;align-items:center;gap:10px;transition:.15s;font-size:.98rem}
.acct-nav a:hover{background:rgba(var(--w),.05);color:var(--hi)}
.acct-nav a.on{background:rgba(240,180,41,.12);color:var(--gold2);font-weight:600}
.acct-nav a.danger{color:var(--bad2);margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.acct-nav a.danger:hover{background:rgba(226,59,78,.12)}
.acct-main{min-width:0}
.acct-main .panel{padding:28px}
.acct-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;justify-content:center}
.pg-btn{min-width:38px;padding:8px 13px;border-radius:9px;cursor:pointer;font-family:'Kanit';
  font-weight:600;font-size:.95rem;background:rgba(var(--w),.04);
  border:1px solid var(--line2);color:var(--muted);transition:.15s}
.pg-btn:hover{color:var(--hi);background:rgba(var(--w),.08)}
.pg-btn.on{background:rgba(240,180,41,.14);border-color:var(--gold);color:var(--gold2)}
@media(max-width:820px){
  .acct-wrap{grid-template-columns:1fr;margin:24px auto}
  .acct-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .acct-nav .lbl{display:none}
  .acct-nav a{flex:1 1 auto;justify-content:center}
  .acct-nav a.danger{border-top:none;margin-top:0;padding-top:11px}
}

/* ---------- ranking tabs ---------- */
.rank-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.rank-tab{padding:12px 24px;border-radius:12px;cursor:pointer;font-family:'Kanit';
  font-weight:600;font-size:1rem;background:rgba(var(--w),.04);
  border:1px solid var(--line2);color:var(--muted);transition:.15s}
.rank-tab:hover{color:var(--hi);background:rgba(var(--w),.08)}
.rank-tab.on{background:rgba(240,180,41,.12);border-color:var(--gold);color:var(--gold2)}
.tab-pane{display:none}
.tab-pane.on{display:block}

/* ---------- online + ranking ---------- */
.online-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);display:inline-block;
  box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:pulse 2s infinite}
.online-dot.sm{width:8px;height:8px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.5)}70%{box-shadow:0 0 0 8px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
.online-count{font-family:'Cinzel';font-weight:800;font-size:1.4rem;color:var(--ok)}
.online-panel{padding:34px 24px}
.online-hero{display:flex;align-items:center;justify-content:center;gap:16px}
.online-dot.big{width:18px;height:18px}
.online-num{font-family:'Cinzel';font-weight:800;font-size:clamp(3rem,9vw,5rem);line-height:1;
  background:linear-gradient(180deg,var(--ok2),var(--ok));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(57,217,138,.3)}
.online-label{margin-top:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-size:.85rem}
.online-grid{display:flex;flex-wrap:wrap;gap:10px}
.online-chip{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;
  background:rgba(57,217,138,.08);border:1px solid rgba(57,217,138,.25);color:var(--txt);font-size:.92rem}

.rank-table{width:100%;border-collapse:collapse;min-width:560px}
.rank-table th{text-align:left;color:var(--muted);font-weight:500;font-size:.82rem;
  padding:8px 10px;border-bottom:1px solid var(--line)}
.rank-table td{padding:9px 10px;border-bottom:1px solid rgba(var(--w),.04);vertical-align:middle}
.rank-table .rk{font-family:'Cinzel';font-weight:800;font-size:1.1rem;color:var(--muted);width:44px;text-align:center}
.rank-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:rgba(var(--w),.03);overflow:hidden}
.rank-ico img{width:32px;height:32px;object-fit:contain}
.rank-table .nm{font-weight:600;color:var(--txt)}
.rank-table .nm .job{display:block;font-size:.78rem;font-weight:500;margin-top:1px}
.lvl{background:rgba(240,180,41,.14);color:var(--gold2);padding:2px 9px;border-radius:8px;font-size:.85rem;font-weight:600;white-space:nowrap}
.pvplv{white-space:nowrap}
.pvp-badge{width:30px;height:30px;border-radius:7px;vertical-align:middle;margin-right:6px;
  box-shadow:0 2px 6px rgba(var(--b),.4)}
.rank-table .win{color:var(--ok);font-weight:600}
.rank-table .lose{color:var(--muted)}
.wr-bar{width:80px;height:6px;border-radius:4px;background:rgba(var(--w),.08);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px}
.wr-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-gold),var(--brand-ember))}
.rank-top td{background:rgba(240,180,41,.05)}
.rank-1 td{background:rgba(255,215,80,.1)} .rank-1 .rk{color:var(--gold2)}
.rank-2 .rk{color:var(--silver)} .rank-3 .rk{color:var(--bronze)}

/* ---------- footer ---------- */
footer.foot{margin-top:auto;border-top:1px solid var(--line);
  background:var(--foot-bg);padding:30px 0;text-align:center;color:var(--muted2)}
footer.foot .brand{justify-content:center;font-size:1.05rem;margin-bottom:8px}
footer.foot a{color:var(--muted)}
footer.foot .links{display:flex;gap:18px;justify-content:center;margin:10px 0;flex-wrap:wrap}

/* ---------- admin ---------- */
.nav-links a.admin-link{color:var(--ember);border:1px solid rgba(255,122,47,.35)}
.nav-links a.admin-link.active{background:rgba(255,122,47,.14);color:var(--ember2)}
a.lnk{color:var(--gold2)} a.lnk:hover{color:var(--hi);text-decoration:underline}
.chk{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;cursor:pointer;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--gold)}
.adm-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adm-search{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.adm-search input{flex:1;min-width:200px;padding:11px 14px;border-radius:10px;color:var(--txt);
  background:var(--inp);border:1px solid var(--line2);font-size:1rem}
.adm-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,180,41,.15)}
/* กราฟแท่งรายวัน */
.adm-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 2px 0;
  border-bottom:1px solid var(--line);overflow-x:auto}
.adm-bar-wrap{flex:1;min-width:26px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.adm-bar-val{font-size:.62rem;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.adm-bar{width:60%;max-width:26px;min-height:2px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--brand-gold2),var(--brand-ember))}
.adm-bar-wrap:hover .adm-bar{background:linear-gradient(180deg,var(--brand-gold2),var(--brand-gold))}
.adm-bar-lbl{font-size:.62rem;color:var(--muted2);margin-top:5px;white-space:nowrap}
@media(max-width:720px){.adm-cols{grid-template-columns:1fr}}
/* ตารางรายชื่อผู้เล่น — พอดีจอ, คลิกทั้งแถวได้ */
.adm-tablewrap{overflow-x:auto}
.rank-table.adm-players{min-width:0;width:100%}
.adm-players tbody tr{cursor:pointer;transition:.12s}
.adm-players tbody tr:hover td{background:rgba(240,180,41,.06)}
.pl-name{font-weight:700;color:var(--txt)}
.pl-sub{font-size:.76rem;color:var(--muted2);margin-top:1px;word-break:break-all}
@media(max-width:520px){.adm-players .col-char{display:none}}

/* ---------- inventory ---------- */
.inv-panel{margin-top:18px}
.inv-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.inv-tab{padding:8px 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(var(--w),.03);
  color:var(--muted);font-family:'Kanit';font-weight:500;cursor:pointer;font-size:.95rem;transition:.15s}
.inv-tab:hover{color:var(--hi);border-color:var(--gold)}
.inv-tab.on{background:rgba(240,180,41,.14);color:var(--gold2);border-color:var(--gold)}
.inv-tab .tcnt{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:20px;
  background:rgba(var(--b),.35);font-size:.78rem}
.inv-pane{display:none}
.inv-pane.on{display:block}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.inv-cell{position:relative;aspect-ratio:1;border-radius:9px;
  background-color:var(--cell-bg);display:flex;align-items:center;justify-content:center}
.inv-cell img{width:76%;height:76%;object-fit:contain;position:relative;z-index:1}
.inv-q{color:var(--muted2);font-size:1.2rem;font-weight:700}
/* เลขจำนวน/ค่าตีบวกอยู่บน "รูปไอเทม" — สลับขั้วตามธีมพร้อมขอบเงา จะได้อ่านออกทุกพื้นหลัง */
.inv-cnt{position:absolute;right:3px;bottom:1px;font-size:.72rem;font-weight:700;color:var(--cnt-txt);
  text-shadow:var(--cnt-shadow);line-height:1;z-index:2}
.inv-ench{position:absolute;left:3px;top:1px;font-size:.7rem;font-weight:700;color:var(--cnt-ench);text-shadow:var(--cnt-shadow);z-index:2}
@media(max-width:520px){.inv-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}}
/* ช่องใบหน้า/ทรงผม (สวมใส่) */
.inv-cell.inv-fh{flex-direction:column;gap:0;background:radial-gradient(circle at 50% 35%,var(--panel2),var(--inp))}
.fh-emoji{font-size:1.35rem;line-height:1}
.fh-txt{font-size:.6rem;color:var(--gold2);margin-top:1px;font-weight:600;white-space:nowrap}

/* ---------- market ---------- */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:8px}
.mk-card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.15s}
.mk-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.mk-card .inv-cell{width:60px;height:60px;flex:none}
.mk-info{width:100%;text-align:center;min-width:0}
.mk-name{font-weight:600;color:var(--txt);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-ench{color:var(--ok2);font-weight:700}
.mk-seller{font-size:.76rem;color:var(--muted2);margin:2px 0}
.mk-price{color:var(--gold2);font-weight:700;font-size:1.02rem}
.mk-buyform{width:100%;margin:0}
.mk-line{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.mk-line .inv-cell{width:48px;height:48px;flex:none}
.mk-line .mk-info{flex:1;text-align:left}
.mk-line .mk-name{white-space:normal}
.mk-line form{margin:0}
.mk-sellbox{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.mk-sellbox .inv-cell{width:56px;height:56px;flex:none}
[data-item]{cursor:pointer}

/* ---------- item tooltip (hover) ---------- */
.item-tip{position:absolute;z-index:9999;max-width:300px;background:var(--tip-bg);
  border:1px solid var(--gold);border-radius:11px;padding:11px 13px;
  box-shadow:0 10px 30px rgba(var(--b),.7);pointer-events:none;font-size:.85rem;line-height:1.55}
.item-tip .it-name{font-weight:700;font-size:.98rem;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.item-tip .it-cash{font-size:.68rem;background:rgba(240,180,41,.2);color:var(--gold2);padding:1px 6px;border-radius:6px;vertical-align:middle}
.item-tip .it-desc{color:var(--muted);white-space:normal;word-break:break-word}
.item-tip .it-meta{font-size:.8rem;color:var(--muted)}
.item-tip .it-bound{font-size:.8rem;color:var(--gold);margin-bottom:5px}
.item-tip .it-storage{font-size:.8rem;margin:5px 0}
.item-tip .it-can{color:var(--gold)}
.item-tip .it-cannot{color:var(--danger)}
.item-tip .it-more{margin-top:4px}
.item-tip .it-rarity{font-size:.8rem;color:var(--muted);margin:5px 0}
.item-tip .it-seal{font-size:.8rem;color:var(--muted);margin-bottom:5px}
.item-tip .it-price{font-size:.8rem;color:var(--gold2);margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.item-tip .it-stats{margin:6px 0;padding:6px 0;border-top:1px solid var(--line)}
.item-tip .it-stat{display:flex;justify-content:space-between;gap:14px;font-size:.8rem;color:var(--muted)}
.item-tip .it-stat b{color:var(--stat-v);font-weight:600}
.gdb-statlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 22px;background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.gdb-statline{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed rgba(var(--w),.05)}
.gdb-statline .k{color:var(--muted)}
.gdb-statline .v{color:var(--stat-v);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- item database (items.php) ---------- */
.itdb-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.itdb-search{flex:1;min-width:220px;padding:11px 15px;border-radius:10px;background:var(--inp);
  border:1px solid var(--line2);color:var(--txt);font-size:1rem}
.itdb-search:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,180,41,.15)}
.itdb-lv{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.9rem}
.itdb-lv input{width:66px;padding:9px 8px;border-radius:8px;background:var(--inp);border:1px solid var(--line2);color:var(--txt);text-align:center}
.itdb-ranks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.itdb-rlabel{font-size:.8rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.itdb-rk{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line2);background:rgba(var(--w),.03);color:var(--muted);font-size:.85rem;font-weight:500;transition:.15s;user-select:none}
.itdb-rk .dot{width:11px;height:11px;border-radius:50%}
.itdb-rk:hover{color:var(--hi);border-color:var(--rc)}
.itdb-rk.on{color:var(--hi);border-color:var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent);box-shadow:0 0 10px -2px var(--rc)}
.itdb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.itdb-cell{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);transition:.15s}
.itdb-cell:hover{border-color:var(--gold);background:var(--panel2)}
.itdb-cell .inv-cell{width:46px;height:46px;flex:none}
.itdb-info{min-width:0}
.itdb-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itdb-meta{font-size:.76rem;color:var(--muted2);margin-top:2px}
.itdb-code{font-size:.74rem;color:var(--muted2);margin-top:3px;font-family:monospace}
.itdb-code b{color:var(--gold2)}
.itdb-src{font-size:.68rem;color:var(--muted2);opacity:.6;margin-top:1px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- SweetAlert2 ----------
   สีมาจากตัวแปรธีม (เดิมส่ง background/color จาก app.js ทำให้ค้างสีเดิมตอนสลับโหมด) */
.swal2-popup{font-family:'Kanit',sans-serif!important;border:1px solid var(--line)!important;border-radius:16px!important;
  background:var(--panel)!important;color:var(--txt)!important}
.swal2-popup .swal2-input,.swal2-popup .swal2-select,.swal2-popup .swal2-textarea{
  background:var(--inp)!important;color:var(--txt)!important;border:1px solid var(--line2)!important}
.swal2-popup.dn-swal{box-shadow:var(--shadow)!important}
.swal2-title{color:var(--txt)!important;font-family:'Cinzel','Kanit',serif!important}
.swal2-html-container,.swal2-content{color:var(--muted)!important}
.swal2-actions .swal2-confirm{background:linear-gradient(135deg,var(--brand-gold),var(--brand-ember))!important;
  color:var(--on-brand)!important;font-family:'Kanit'!important;font-weight:600!important;box-shadow:0 8px 22px rgba(255,122,47,.3)!important}
.swal2-actions .swal2-cancel{background:var(--panel2)!important;color:var(--txt)!important;border:1px solid var(--line2)!important}

/* ---------- ป้ายแต่งงาน (character.php) ---------- */
.married-banner{text-align:center;padding:28px 20px;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(255,122,47,.12),rgba(240,180,41,.10) 50%,rgba(226,59,78,.10));
  border:1px solid rgba(240,180,41,.4);box-shadow:0 0 40px -10px rgba(255,122,47,.3)}
.married-banner .mb-couple-row{display:flex;align-items:center;justify-content:center;gap:16px}
.married-banner .mb-classicon{width:64px;height:64px;object-fit:contain;border-radius:50%;
  background:rgba(var(--w),.05);border:2px solid rgba(240,180,41,.5);padding:8px;
  box-shadow:0 0 18px -4px rgba(255,215,106,.5)}
.married-banner .mb-classicon-fallback{display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.married-banner .mb-ring{width:44px;height:44px;flex:none;filter:drop-shadow(0 0 10px rgba(255,215,106,.6))}
@media(max-width:480px){
  .married-banner .mb-classicon{width:48px;height:48px}
  .married-banner .mb-ring{width:34px;height:34px}
}
.married-banner .mb-title{font-family:'Cinzel','Kanit',serif;font-size:1.6rem;font-weight:700;
  margin-top:6px;background:linear-gradient(90deg,var(--gold2),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.married-banner .mb-sub{font-size:1.08rem;color:var(--txt);margin-top:6px}
.married-banner .mb-sub b{color:var(--gold2)}
.married-banner .mb-meta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:12px;font-size:.85rem;color:var(--muted)}
.dn-swal-toast{border:1px solid var(--line2)!important;border-radius:12px!important}
.dn-swal-toast .swal2-title{font-size:.95rem!important;font-family:'Kanit'!important}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr}
  .nav-in{height:auto;flex-wrap:wrap;padding:12px 0;gap:12px}
  .nav-links{width:100%;margin-left:0}
}

/* ==================== GameDB (ฐานข้อมูลไอเทม Arena+Sea) ==================== */
.gdb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.gdb-tab{padding:7px 20px;border-radius:9px;border:1px solid var(--line2);color:var(--muted);
  font-weight:600;font-size:.92rem;transition:.15s;text-decoration:none}
.gdb-tab:hover{color:var(--hi);border-color:var(--tc)}
.gdb-tab.on{color:#08101c;background:var(--tc);border-color:var(--tc);box-shadow:0 6px 18px -6px var(--tc)}
.gdb-check{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.86rem;cursor:pointer;white-space:nowrap}
.gdb-check input{accent-color:var(--gold)}
.gdb-select{padding:8px 12px;border-radius:8px;background:var(--inp);border:1px solid var(--line2);
  color:var(--txt);font-family:'Kanit';font-size:.86rem;cursor:pointer}
.gdb-sep{width:1px;height:22px;background:var(--line2);margin:0 4px}
.gdb-count{margin:16px 2px 12px;font-size:.92rem;color:var(--muted)}
.gdb-badge{display:inline-block;padding:1px 8px;border-radius:6px;font-size:.68rem;font-weight:700;
  letter-spacing:.4px;color:var(--bc);border:1px solid color-mix(in srgb,var(--bc) 55%,transparent);
  background:color-mix(in srgb,var(--bc) 14%,transparent);vertical-align:middle}
.gdb-badge-lg{font-size:.82rem;padding:3px 12px;margin-top:8px}
a.itdb-cell{text-decoration:none;color:inherit}
.gdb-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}

/* ----- หน้ารายละเอียด ----- */
.gdb-detail{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:var(--radius);padding:26px}
.gdb-detail-icon{display:flex;flex-direction:column;align-items:center;gap:0}
.gdb-detail-icon .inv-cell{width:120px;height:120px;flex:none}
.gdb-detail-body{min-width:0}
.gdb-tagrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 18px}
.gdb-rank{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  border:1px solid var(--rc);color:var(--hi);font-size:.85rem;background:color-mix(in srgb,var(--rc) 15%,transparent)}
.gdb-rank .dot{width:10px;height:10px;border-radius:50%}
.gdb-gs{padding:4px 12px;border-radius:20px;border:1px solid var(--line2);color:var(--gold2);font-size:.85rem}
.gdb-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 22px;margin-bottom:6px}
.gdb-stat{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.gdb-stat .k{color:var(--muted);font-size:.85rem}
.gdb-stat .v{color:var(--txt);font-size:.9rem;font-weight:500;text-align:right;word-break:break-word}
.gdb-desc-title{margin:20px 0 8px;color:var(--gold2);font-weight:600;font-size:.95rem}
.gdb-desc{background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  color:var(--muted);line-height:1.65;white-space:normal;word-break:break-word}
.gdb-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ----- หน้าเทียบ ----- */
.gdb-cmp{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.gdb-cmp-head,.gdb-cmp-row{display:grid;grid-template-columns:180px 1fr 1fr}
.gdb-cmp-head{padding:18px;border-bottom:1px solid var(--line2);align-items:end}
.gdb-cmp-col{padding:11px 16px;font-size:.9rem;color:var(--txt);word-break:break-word}
.gdb-cmp-head .gdb-cmp-col{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:1.05rem}
.gdb-cmp-head .inv-cell{width:56px;height:56px}
.gdb-cmp-label{padding:11px 16px;color:var(--muted);font-size:.85rem;background:rgba(var(--b),.15)}
.gdb-cmp-row{border-bottom:1px solid var(--line)}
.gdb-cmp-row:last-child{border-bottom:none}
.gdb-cmp-row.diff{background:rgba(255,122,47,.09)}
.gdb-cmp-row.diff .gdb-cmp-col{color:var(--ember);font-weight:600}
@media(max-width:720px){
  .gdb-detail{grid-template-columns:1fr;justify-items:center;text-align:center}
  .gdb-detail-body{width:100%}
  .gdb-tagrow,.gdb-actions{justify-content:center}
  .gdb-stat{text-align:left}
  .gdb-cmp-head,.gdb-cmp-row{grid-template-columns:110px 1fr 1fr;font-size:.82rem}
  .gdb-cmp-label{font-size:.78rem}
}

/* ---------- แผงสวมใส่ (paper doll) + ตารางกระเป๋าแบบเกม  [2026-08-11] ----------
   พิกัดช่องมาจาก charstatus.ui ของไคลเอนต์ · รูปช่อง/ตารางมาจาก inventoryitembase.dds */
/* อยู่ในกรอบหน้าต่างอยู่แล้ว จึงไม่ต้องมีกรอบของตัวเองอีก */
.doll{position:relative;width:100%;max-width:480px;aspect-ratio:376/506;margin:0 auto;
  background:radial-gradient(115% 80% at 30% 16%,rgba(240,180,41,.06),transparent 60%)}
/* พื้นที่รูปตัวละคร (ฝั่งซ้ายของหน้าต่างเกม) */
.doll-avatar{position:absolute;left:3.7%;top:2.8%;width:61.2%;height:64.4%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border-radius:10px;border:1px solid rgba(150,132,88,.16);
  background:radial-gradient(70% 55% at 50% 42%,rgba(var(--w),.035),transparent 70%),var(--doll-bg);
  text-align:center;padding:8px}
.doll-avatar img{width:38%;max-width:96px;opacity:.9;filter:drop-shadow(0 8px 18px rgba(var(--b),.7))}
.doll-avatar-fallback{font-size:3rem;line-height:1;opacity:.85}
.doll-avatar b{color:var(--gold2);font-size:.98rem;word-break:break-word}
/* ช่องสวมใส่ */
.doll-slot{position:absolute;border-radius:8px;overflow:hidden}
.doll-slot::before{content:'';position:absolute;inset:0;z-index:0;
  background:url(ui/slot.png) center/100% 100% no-repeat;
  filter:var(--ui-filter)}
.doll-slot.on::before{filter:var(--ui-filter-on)}
.doll-slot .inv-cell{position:relative;z-index:1;width:100%;height:100%;aspect-ratio:auto;
  border-radius:8px;background-color:transparent}
.doll-empty{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:2px;text-align:center;font-size:.62rem;line-height:1.15;color:var(--muted2);opacity:.75}
.doll-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  font-size:.6rem;line-height:1.3;padding:1px 2px;text-align:center;color:var(--cap-txt);
  background:var(--cap-bg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ช่องใบหน้า/ทรงผมมีชื่อกำกับจาก .doll-cap อยู่แล้ว ไม่ต้องโชว์ข้อความในตัวการ์ดซ้ำอีก */
.doll-slot .fh-txt{display:none}
.doll-slot .fh-emoji{font-size:1.6rem}
.doll-cap-static{font-size:.68rem;color:var(--muted2);text-align:center;margin-top:3px}

/* ตารางกระเป๋า 5x6 บนรูปตารางของเกมจริง */
.bag{position:relative;width:100%;max-width:380px;aspect-ratio:327/374;margin:0 auto}
.bag::before{content:'';position:absolute;inset:0;
  background:url(ui/invenbase.png) center/100% 100% no-repeat;
  filter:var(--bag-filter)}
.bag-slot{position:absolute;z-index:1;border-radius:5px}
.bag-slot .inv-cell{width:100%;height:100%;aspect-ratio:auto;border-radius:5px;background-color:transparent}
/* ยกของแบบในเกม: กดครั้งเดียวของลอยติดเมาส์ แล้วกดวาง */
.bag-slot.can-drop{box-shadow:inset 0 0 0 1px rgba(226,200,132,.35)}
.bag-slot.can-drop:hover{box-shadow:inset 0 0 0 2px #e2c884, 0 0 12px rgba(226,200,132,.5);
  background:rgba(226,200,132,.14)}
.inv-cell.carried{opacity:.25}
.carry-ghost{position:fixed;z-index:9999;width:54px;height:54px;margin:-27px 0 0 -27px;
  pointer-events:none;border-radius:6px;opacity:.95;
  filter:drop-shadow(0 6px 14px rgba(var(--b),.75));
  background-size:100% 100%;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center}
.carry-ghost img{width:76%;height:76%;object-fit:contain}
body.carrying{cursor:crosshair}
body.carrying .inv-cell{pointer-events:none}   /* ให้คลิกโดนช่อง ไม่ใช่ตัวไอเทม */

/* ถังขยะ (โผล่เฉพาะตอนถือของอยู่) */
.bag-trash{display:none;margin-top:12px;padding:12px;text-align:center;border-radius:9px;
  border:1px dashed rgba(200,90,80,.6);background:rgba(160,50,40,.12);
  color:var(--bad2);font-size:.86rem;cursor:pointer}
.bag-trash:hover{background:rgba(160,50,40,.25);border-color:#c0392b;color:var(--hi)}
body.carrying .bag-trash{display:block}

/* ปุ่มเรียงไอเทม (มุมล่างขวาเหมือนในเกม) */
.bag-tools{display:flex;justify-content:flex-end;margin-top:10px}
.btn-sortbag{padding:6px 16px;border-radius:7px;cursor:pointer;font-family:'Kanit';font-size:.84rem;
  border:1px solid rgba(150,132,88,.42);background:var(--tab-bg);
  color:var(--win-title);transition:.15s}
.btn-sortbag:hover{color:var(--hi);border-color:var(--gold);
  background:var(--tab-on-bg)}

/* ---------- หน้าต่างแบบในเกม (กรอบใช้พื้นผิวจริงจาก dialogframe_re02.dds) ---------- */
.dnwin{margin-top:22px;border:16px solid transparent;border-image:url(ui/frame.png) 16 stretch;
  background:var(--win-bg);background-clip:padding-box}
.dnwin-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:2px 4px 12px;
  border-bottom:1px solid rgba(180,160,110,.22);margin-bottom:14px}
.dnwin-title{font-family:'Cinzel','Kanit',serif;font-size:1.12rem;font-weight:700;color:var(--win-title);
  letter-spacing:.4px;text-shadow:0 1px 3px rgba(var(--b),.55)}
.dnwin-sub{font-size:.88rem;color:var(--muted)}
.dnwin-body{display:flex;gap:14px;align-items:flex-start}
.dnwin-left  .dnwin-tabs{order:0}
.dnwin-left  .dnwin-stage{order:1}
.dnwin-right .dnwin-tabs{order:1}
.dnwin-right .dnwin-stage{order:0}
.dnwin-stage{flex:1;min-width:0}
.dnwin-foot{margin-top:14px;padding-top:10px;border-top:1px solid rgba(180,160,110,.22);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dnwin-gold{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:20px;
  border:1px solid rgba(150,132,88,.32);background:rgba(var(--b),.3);
  color:var(--gold2);font-weight:600;font-size:.86rem}
.dnwin-foot .dnwin-hint{margin-left:auto}
.dnwin-hint,.dnwin-note{font-size:.8rem;color:var(--muted2)}
.dnwin-note{margin-top:10px;text-align:center}
.dnwin-empty{padding:34px 10px;text-align:center;color:var(--muted);font-size:.95rem}
.dnwin-empty span{font-size:.82rem;color:var(--muted2)}

/* แท็บแนวตั้งข้างหน้าต่าง */
.dnwin-tabs{display:flex;flex-direction:column;gap:4px;flex:0 0 140px;width:140px}
.dntab{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;cursor:pointer;
  border:1px solid rgba(150,132,88,.3);background:var(--tab-bg);
  color:var(--muted);font-family:'Kanit';font-size:.82rem;text-align:left;transition:.15s}
.dnwin-left  .dntab{border-radius:8px 0 0 8px;border-right-color:transparent}
.dnwin-right .dntab{border-radius:0 8px 8px 0;border-left-color:transparent}
.dntab:hover{color:var(--hi);border-color:var(--gold)}
.dntab.on{color:var(--tab-on-txt);border-color:rgba(214,183,110,.85);
  background:var(--tab-on-bg);box-shadow:inset 0 0 12px rgba(240,180,41,.14)}
.dntab .ic{font-size:1rem;line-height:1}
.dntab .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dntab .n{font-size:.7rem;padding:1px 6px;border-radius:20px;background:rgba(var(--b),.45);color:var(--win-title)}

/* แท็บย่อยด้านบน (ช่องแคส: ชุดแต่งกาย / ของใช้ / อื่น ๆ) */
.sub-tabs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:14px;
  border-bottom:1px solid rgba(180,160,110,.3)}
.sub-tab{padding:7px 16px;border-radius:7px 7px 0 0;cursor:pointer;
  border:1px solid rgba(150,132,88,.28);border-bottom:none;margin-bottom:-1px;
  background:var(--tab-sub-bg);
  color:var(--muted);font-family:'Kanit';font-size:.85rem;transition:.15s}
.sub-tab:hover{color:var(--hi)}
.sub-tab.on{color:var(--tab-on-txt);border-color:rgba(214,183,110,.8);
  background:var(--tab-on-bg)}
.sub-tab .tcnt{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:20px;
  background:rgba(var(--b),.45);font-size:.72rem}
.sub-pane{display:none}
.sub-pane.on{display:block}

/* แถบเลขหน้าแบบในเกม  « ‹ 1 2 3 4 5 › » */
.dnpager{display:flex;gap:3px;align-items:center;justify-content:center;margin-top:14px}
.pg-nav,.pg-num{min-width:26px;height:26px;padding:0 6px;cursor:pointer;
  border:1px solid rgba(150,132,88,.28);border-radius:5px;background:rgba(var(--w),.03);
  color:var(--muted);font-family:'Kanit';font-size:.84rem;line-height:1;transition:.12s}
.pg-nav{color:var(--muted);font-size:1rem}
.pg-nav:hover,.pg-num:hover{color:var(--hi);border-color:var(--gold)}
.pg-num.has{color:var(--win-title)}
.pg-num.on{color:#1a1408;font-weight:700;background:linear-gradient(180deg,#e2c884,#b3934f);
  border-color:#e6d2a0}
.bag-page{display:none}
.bag-page.on{display:block}

/* รายการของแบบไม่มีช่องตายตัว (เพ็ท/สัตว์ขี่/ทาลิสแมน/ตรา) */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px}
.slotgrid-item{min-width:0}
.slotgrid-cell{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden}
.slotgrid-cell::before{content:'';position:absolute;inset:0;z-index:0;
  background:url(ui/slot.png) center/100% 100% no-repeat;
  filter:var(--ui-filter)}
.slotgrid-cell .inv-cell{position:relative;z-index:1;width:100%;height:100%;aspect-ratio:auto;
  border-radius:8px;background-color:transparent}
.slotgrid-cap{font-size:.66rem;color:var(--muted2);text-align:center;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:640px){
  /* จอแคบ: แท็บย้ายมาอยู่บน เรียงแนวนอนแทน */
  .dnwin-body{flex-direction:column}
  .dnwin-left .dnwin-tabs,.dnwin-right .dnwin-tabs{order:0;flex-direction:row;flex-wrap:wrap;
    width:100%;flex-basis:auto;gap:4px}
  .dnwin-left .dnwin-stage,.dnwin-right .dnwin-stage{order:1;width:100%}
  .dntab{width:auto;border-radius:8px !important;border-color:rgba(150,132,88,.3) !important}
  .dntab .tx{flex:none}
}
@media(max-width:520px){
  .doll-empty{font-size:.55rem}
  .doll-cap{font-size:.54rem}
  .slotgrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
  .dnwin{border-width:12px;border-image-width:12px}
}