/* โทนมืดอย่างเดียวตามที่เจ้าของกำหนด ไม่มีโหมดสว่าง */
:root{
  color-scheme:dark;
  --bg:#0a0d12; --panel:#12171f; --panel2:#181f29; --line:#232c39;
  --txt:#e6edf3; --dim:#8b949e;
  --acc:#f0883e; --acc2:#58a6ff; --ok:#3fb950;
  --r:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Segoe UI",-apple-system,"Noto Sans Thai","Sarabun",system-ui,sans-serif;
  line-height:1.55; -webkit-text-size-adjust:100%;
}
body.dash{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(240,136,62,.10), transparent 62%),
    radial-gradient(760px 480px at 88% 4%, rgba(88,166,255,.09), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
.wrap{width:min(1180px,94vw); margin-inline:auto}
a{color:var(--acc2); text-decoration:none} a:hover{text-decoration:underline}

/* header */
.top{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.top .wrap{display:flex; align-items:center; gap:24px; height:58px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--txt); font-size:18px}
.logo{
  background:var(--acc); color:#111; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; font-weight:800; font-size:14px; letter-spacing:.5px;
}
.top nav{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.top nav a{padding:7px 13px; border-radius:8px; color:var(--dim); font-size:15px}
.top nav a:hover{background:var(--bg); text-decoration:none}
.top nav a.active{background:var(--bg); color:var(--txt); font-weight:600}

/* hero */
.hero{padding:26px 0 14px}
.hero h1{margin:0 0 6px; font-size:clamp(21px,3.4vw,29px)}
.hero p{margin:0; color:var(--dim)}
.hero strong{color:var(--acc); font-weight:600}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0 16px}
#q{
  flex:1 1 300px; min-width:0; padding:11px 14px; font-size:15px; font-family:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); color:var(--txt);
}
#q:focus{outline:2px solid var(--acc2); outline-offset:-1px}
.cats{display:flex; gap:7px; flex-wrap:wrap}
.cats button{
  padding:8px 14px; font-size:14px; font-family:inherit; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:99px; color:var(--dim);
}
.cats button:hover{border-color:var(--acc2); color:var(--txt)}
.cats button.on{background:var(--acc); border-color:var(--acc); color:#111; font-weight:600}

/* table */
.tablebox{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:820px; font-size:14.5px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{
  background:var(--panel); position:sticky; top:58px; z-index:5; cursor:pointer;
  font-size:13px; color:var(--dim); font-weight:600; user-select:none;
}
th small{font-weight:400; opacity:.7; font-size:11px}
th:hover{color:var(--txt)}
th.sorted{color:var(--acc)}
th.sorted::after{content:" ▾"} th.sorted.asc::after{content:" ▴"}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:rgba(127,127,127,.07)}
.wname{font-weight:600; white-space:normal; min-width:280px}
.item{display:flex; align-items:center; gap:11px}
.ico{
  width:76px; height:38px; object-fit:contain; flex:none;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:2px;
}
/* ของที่ยังไม่มีไอคอนในเกม แสดงกรอบว่างพร้อมข้อความสั้น ๆ แทนลายทาง */
.ico.noico{
  display:grid; place-items:center; font-size:9.5px; color:var(--dim);
  letter-spacing:.3px; background:var(--bg);
}
.ico.noico::after{content:"ไม่มีรูป"}
.tag{
  display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px;
  background:var(--bg); border:1px solid var(--line); color:var(--dim);
}
.bar{position:relative}
.bar i{
  position:absolute; left:0; top:50%; transform:translateY(-50%); height:60%;
  background:linear-gradient(90deg,var(--acc),transparent); opacity:.16; border-radius:3px;
}
.bar span{position:relative}
.more{padding:14px; margin:0; color:var(--dim); text-align:center; font-size:14px}

/* footer */
.foot{padding:30px 0 40px; color:var(--dim); font-size:13.5px; text-align:center}
.foot p{margin:5px 0}

/* about page */
.prose{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 26px; margin:18px 0}
.prose h2{margin-top:22px; font-size:19px} .prose h2:first-child{margin-top:0}
.prose li{margin:5px 0}

@media(max-width:640px){
  .top .wrap{height:auto; padding:10px 0; flex-wrap:wrap; gap:10px}
  th{top:0}
}

/* ---------- แถวคลิกได้ + ป้าย 3D ---------- */
tr.clickable{cursor:pointer}
tr.clickable:focus-visible{outline:2px solid var(--acc2); outline-offset:-2px}
.tag3d{
  margin-left:8px; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  padding:1px 6px; border-radius:4px; background:var(--acc); color:#111; vertical-align:middle;
}

/* ---------- แผงรายละเอียดอาวุธ ---------- */
.detail{
  width:min(920px,94vw); max-height:92vh; padding:0; border:1px solid var(--line);
  border-radius:14px; background:var(--panel); color:var(--txt); overflow:visible;
}
.detail::backdrop{background:rgba(0,0,0,.62)}
#dbody{padding:22px 24px 24px; overflow:auto; max-height:92vh}
.dclose{
  position:absolute; top:10px; right:12px; z-index:2; width:34px; height:34px;
  border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--dim);
  font-size:22px; line-height:1; cursor:pointer;
}
.dclose:hover{color:var(--txt); border-color:var(--acc2)}

.dhead{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-right:40px}
.dico{
  width:112px; height:56px; object-fit:contain; flex:none;
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px;
}
.dhead h2{margin:0 0 4px; font-size:clamp(17px,2.6vw,22px)}
.dcat{margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dcode{font-size:12px; color:var(--dim); font-family:ui-monospace,Consolas,monospace}

.dgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:18px}
@media(max-width:720px){ .dgrid{grid-template-columns:1fr} }

.dstage{
  min-height:260px; border-radius:10px; border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 35%, rgba(240,136,62,.10), transparent 65%), var(--bg);
  position:relative; overflow:hidden;
}
.dstage.live{touch-action:none; cursor:grab}
.dstage.live.drag{cursor:grabbing}
.dstage canvas{display:block; width:100%; height:100%}
.noview{position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:14px}

/* หลอดสเตตัสแบบในเกม */
.srow{display:grid; grid-template-columns:120px 1fr 44px; align-items:center; gap:10px; margin-bottom:11px}
.slab{font-size:13.5px; line-height:1.25}
.slab small{display:block; font-size:10.5px; color:var(--dim); font-weight:400}
.strack{height:13px; border-radius:7px; background:var(--bg); border:1px solid var(--line); overflow:hidden}
.strack i{display:block; height:100%; border-radius:7px}
.strack i.g1{background:linear-gradient(90deg,#f0883e,#ffc46b)}
.strack i.g2{background:linear-gradient(90deg,#58a6ff,#8ecbff)}
.strack i.g3{background:linear-gradient(90deg,#3fb950,#84e39a)}
.strack i.g4{background:linear-gradient(90deg,#a371f7,#c9a6ff)}
.sval{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; font-size:14px}

.dnums{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px;
  border-top:1px solid var(--line); padding-top:14px;
}
.dnums div{text-align:center}
.dnums b{display:block; font-size:16px; font-variant-numeric:tabular-nums}
.dnums span{font-size:10.5px; color:var(--dim)}
.dinfo{margin:18px 0 0; color:var(--dim); font-size:13.5px; line-height:1.6}

/* แสดงภาพ 2D แทนเมื่อยังไม่มีโมเดล 3D */
.dstage.flat{display:grid; place-items:center; gap:10px; padding:16px}
.flatimg{max-width:88%; max-height:200px; object-fit:contain}


/* ================= หน้าแรก Dashboard ================= */

.dashwrap{
  width:min(1560px,96vw); margin:18px auto 0;
  display:grid; grid-template-columns:minmax(300px,1.05fr) minmax(340px,1.35fr) minmax(300px,1fr);
  gap:16px; align-items:start;
}
.panel{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:16px 16px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.36);
}
.phead{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.phead.tight{margin-bottom:10px}
.phead > div:first-child{min-width:0}
.phead h2{margin:0; font-size:19px; letter-spacing:.2px}
.phead h3{margin:0; font-size:15.5px}
.phead .sub{margin:2px 0 0; color:var(--dim); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pactions{margin-left:auto; display:flex; gap:6px; flex:none}
.badge{
  margin-left:auto; flex:none; align-self:center; font-size:12px; color:var(--dim);
  background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:4px 11px;
}
.chip{
  font:inherit; font-size:12.5px; cursor:pointer; padding:6px 12px; border-radius:99px;
  background:var(--bg); border:1px solid var(--line); color:var(--dim);
}
.chip:hover{color:var(--txt); border-color:var(--acc2)}
.chip.on{background:var(--acc); border-color:var(--acc); color:#111; font-weight:600}

/* เวที 3D */
.stage3d{
  position:relative; height:clamp(420px,58vh,660px); border-radius:14px;
  border:1px solid var(--line); overflow:hidden; touch-action:none; cursor:grab;
  background:
    radial-gradient(ellipse 62% 44% at 50% 96%, rgba(240,136,62,.16), transparent 70%),
    radial-gradient(ellipse at 50% 30%, rgba(88,166,255,.07), transparent 62%),
    #070a0e;
}
.stage3d.drag{cursor:grabbing}
.stage3d canvas{display:block; width:100%; height:100%}
.stage3d.gun{height:190px}
.stagemsg{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--dim); font-size:13.5px; pointer-events:none; text-align:center; padding:16px;
}

/* แถบเลือกหน่วย */
.forcebar{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.forcebar button{
  font:inherit; font-size:12.5px; cursor:pointer; padding:6px 11px; border-radius:8px;
  background:var(--bg); border:1px solid var(--line); color:var(--dim);
  display:inline-flex; align-items:center; gap:5px;
}
.forcebar button:hover{color:var(--txt); border-color:var(--acc2)}
.forcebar button.on{background:var(--acc); border-color:var(--acc); color:#111; font-weight:700}
.forcebar .girl{
  font-style:normal; font-size:9.5px; font-weight:700; line-height:1;
  padding:2px 4px; border-radius:4px; background:rgba(240,136,62,.22); color:var(--acc);
}
.forcebar button.on .girl{background:rgba(0,0,0,.22); color:#111}

/* ช่องใส่ของ */
.gearpick #gq{
  margin-left:auto; flex:0 1 210px; min-width:0; align-self:center;
  padding:8px 12px; font-size:13.5px; font-family:inherit;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--txt);
}
.gearpick #gq:focus{outline:2px solid var(--acc2); outline-offset:-1px}
.slottabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.slottabs button{
  font:inherit; font-size:12.5px; cursor:pointer; padding:6px 12px; border-radius:99px;
  background:var(--bg); border:1px solid var(--line); color:var(--dim);
}
.slottabs button:hover{color:var(--txt)}
.slottabs button.on{background:rgba(240,136,62,.16); border-color:var(--acc); color:var(--acc); font-weight:600}
.slotlist{max-height:clamp(420px,58vh,660px); overflow-y:auto; padding-right:4px}
.slot{margin-bottom:16px}
.slothead{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.slotname{font-size:13.5px; font-weight:600}
.slotcount{font-size:11px; color:var(--dim); background:var(--bg);
  border:1px solid var(--line); border-radius:99px; padding:1px 8px}
.unequip{
  margin-left:auto; font:inherit; font-size:11.5px; cursor:pointer; padding:3px 10px;
  border-radius:6px; background:transparent; border:1px solid var(--line); color:var(--dim);
}
.unequip:hover{color:#ff9a9a; border-color:#7a3b3b}

/* แถบเลื่อนเลือกไอเทม */
.strip{display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:thin}
.gcard{
  position:relative; flex:none; width:128px; cursor:pointer; text-align:left;
  font:inherit; padding:7px; border-radius:11px;
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
}
.gcard:hover{border-color:var(--acc2)}
.gcard.on{border-color:var(--acc); background:rgba(240,136,62,.13)}
.gcard img,.gcard .noimg{
  display:block; width:100%; height:52px; object-fit:contain; border-radius:7px;
  background:#0b0f15; margin-bottom:6px;
}
.gcard b{display:block; font-size:11.5px; font-weight:600; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.gcard .mini{display:block; margin-top:3px; font-size:10px; color:var(--dim); line-height:1.35}
.gcard .d3{
  position:absolute; top:5px; right:5px; font-style:normal; font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:4px; background:var(--acc); color:#111;
}

/* สถานะรวม */
.totals{margin-bottom:6px}
.totals .srow{grid-template-columns:118px 1fr 52px}
.srow.tight{grid-template-columns:56px 1fr 34px; margin-bottom:7px}
.worn{border-top:1px solid var(--line); margin-top:12px; padding-top:12px}
.worn h3{margin:0 0 9px; font-size:14px}
.wornlist{max-height:210px; overflow-y:auto}
.wrow{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12.5px;
  border-bottom:1px dashed var(--line)}
.wrow:last-child{border-bottom:0}
.wslot{color:var(--dim); flex:none; width:92px; font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wrow .wname{flex:1; min-width:0; font-weight:600; font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.flag{font-style:normal; font-size:9.5px; padding:1px 6px; border-radius:4px; flex:none;
  background:rgba(88,166,255,.16); color:var(--acc2)}
.flag.dim{background:rgba(139,148,158,.16); color:var(--dim)}
.note{margin:8px 0 0; color:var(--dim); font-size:12px}

/* การ์ดปืน */
.gunbox{border-top:1px solid var(--line); margin-top:14px; padding-top:14px}
.gunstats{margin-top:10px}
.hold{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px;
  color:var(--dim); cursor:pointer}
.hold input{accent-color:var(--acc); width:15px; height:15px; cursor:pointer}

@media(max-width:1280px){
  .dashwrap{grid-template-columns:1fr 1fr}
  .side{grid-column:1 / -1}
}
@media(max-width:820px){
  .dashwrap{grid-template-columns:1fr; width:94vw}
  .side{grid-column:auto}
  .stage3d{height:clamp(340px,52vh,480px)}
  .slotlist{max-height:none}
  .phead{flex-wrap:wrap}
  .gearpick #gq{flex:1 1 100%; margin-left:0}
}