/* ═════════════════════════════════════════════════════════════════════════════
   🎩 แถบหัวเว็บ (header) — ดีไซน์ใหม่ 2026-09-07
   ⛔ ห้าม inline style ในหน้า Razor — CSP `style-src 'self'` บล็อกเงียบ

   🔑 ทำไมเป็น "ไฟล์แยก + ชื่อคลาสใหม่" (`sitehdr`) ไม่ใช่ทับ `.nav` เดิม:
      แถบเดิมมีกฎกระจายอยู่ 3 แผ่น (site.css · skin-nav.css · modern.css) และ modern.css
      โหลดท้ายสุดพร้อม `!important` ⇒ ทับของเดิมทีละกฎจะกลายเป็นสงคราม !important
      ตั้งชื่อใหม่แล้วเขียนครบชุดที่นี่ = ของเก่าไม่มีผลกับแถบนี้เลยแม้แต่กฎเดียว

   📐 ความสูงแถบผูกกับ `--nav-h` (ตั้งที่ site.css) — ทั้ง `main{padding-top}` ·
      แถบตัวกรองหน้าร้าน · กล่องแจ้งผล ใช้ค่านี้ร่วมกัน ⇒ แก้ที่นี่ที่เดียวทุกอย่างตามมาเอง
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --nav-h:64px;                       /* เตี้ยกว่าเดิม (72) — คืนพื้นที่ให้เนื้อหา */
  --hd-bg:#0e1524;                    /* พื้นแถบ: เข้ม ⇒ เนื้อหาสว่างด้านล่างเด่นขึ้น */
  --hd-bg2:#131c2e;
  --hd-ink:#c9d4e2;                   /* ตัวหนังสือปกติ */
  --hd-ink-on:#ffffff;                /* หน้าที่กำลังเปิด / ชี้อยู่ */
  --hd-gold:#e0b44c;
  --hd-gold2:#c8921f;
  --hd-line:rgba(255,255,255,.09);
}

/* ── ตัวแถบ ───────────────────────────────────────────────────────────────── */
/*  🔴 user เคาะ 2026-09-07: **ไม่เอาแสงเรือง/ไล่เฉด** ("ดูเป็น AI มากไป")
    ⇒ พื้นเรียบสีเดียว · เส้นคั่นธรรมดา · ปุ่มทองสีเดียว · ตัวอักษรไม่ไล่เฉด ไม่มีเงา
    ⛔ อย่าเอา gradient / box-shadow เรือง ๆ กลับเข้ามาในแถบนี้ */
.sitehdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:8px;
  padding:0 max(3.2vw,18px);
  background:#131c2e;
  /* 🟡 เส้นทองใต้แถบ (user สั่งเก็บไว้ 2026-09-07) — **เส้นทึบคม** ไม่ใช่ไล่เฉดฟุ้งแบบเดิม */
  border-bottom:2px solid #b8871f;
}

/* ── ตราเว็บ ──────────────────────────────────────────────────────────────── */
.hd-brand{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  text-decoration:none;padding-right:6px;
}
.hd-brand img{height:34px;width:auto;display:block}
.hd-brand-tx{display:flex;flex-direction:column;line-height:1.1}
.hd-brand-tx i{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.22em;color:rgba(201,212,226,.72);
}
.hd-brand-tx b{font-size:15px;font-weight:900;letter-spacing:.06em;color:var(--hd-gold)}

/* ── เมนู ─────────────────────────────────────────────────────────────────── */
.hd-nav{
  display:flex;align-items:center;gap:2px;
  list-style:none;margin:0 0 0 14px;padding:0;
  min-width:0;
}
.hd-nav a{
  display:block;position:relative;
  padding:9px 13px;border-radius:9px;
  font-size:14px;font-weight:700;color:var(--hd-ink);
  text-decoration:none;white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
.hd-nav a:hover{color:var(--hd-ink-on);background:rgba(255,255,255,.07)}
.hd-nav a.on{color:var(--hd-ink-on);background:rgba(224,180,76,.14)}
/* จุดทองใต้หน้าที่กำลังเปิด — บอกตำแหน่งได้เร็วกว่าสีตัวหนังสือเฉย ๆ */
.hd-nav a.on::after{
  content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:14px;height:2px;border-radius:2px;background:var(--hd-gold);
}

/* ── ฝั่งขวา ──────────────────────────────────────────────────────────────── */
.hd-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}

/* ตะกร้า */
.hd-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--hd-line);border-radius:11px;
  background:rgba(255,255,255,.05);color:var(--hd-ink);
  text-decoration:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}
.hd-cart:hover{border-color:rgba(224,180,76,.55);background:rgba(224,180,76,.12);color:#fff}
.hd-cart:active{transform:scale(.94)}
.hd-cart.on{border-color:var(--hd-gold);color:#fff;background:rgba(224,180,76,.16)}
.hd-cart-n{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1.5px solid var(--hd-bg);
  background:#d3a53c;
  color:#2a1c00;font-size:10.5px;font-weight:900;line-height:1;
}
.hd-cart-n.is-zero{display:none}

/* 🎁 ป้าย "ของรางวัลรอรับ" — โครงเดียวกับตะกร้า ต่างแค่สี ⇒ ผู้เล่นแยกออกว่าไม่ใช่ตะกร้า
   โผล่เฉพาะตอนมีของจริง (ฝั่ง Razor ไม่วาดเลยถ้าเป็น 0) ⇒ ไม่ต้องมีกฎ is-zero */
.hd-gift{border-color:rgba(224,180,76,.5);background:rgba(224,180,76,.13);color:#f3dfae}
.hd-gift:hover{border-color:var(--hd-gold);background:rgba(224,180,76,.22)}
.hd-gift .hd-cart-n{background:#e0b44c;color:#2a1c00}
.hd-cart-n.bump{animation:cartbump .42s cubic-bezier(.2,1.5,.4,1)}

/* ปุ่มในแถบ — ชุดของแถบเอง ไม่ยืม .btn ของหน้าเว็บ (ปุ่มนั้นออกแบบมาสำหรับพื้นสว่าง) */
.hd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 16px;border-radius:10px;
  font-family:inherit;font-size:13.5px;font-weight:800;
  text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:filter .16s ease, background .16s ease, border-color .16s ease, transform .12s ease;
}
.hd-btn-ghost{border-color:var(--hd-line);background:rgba(255,255,255,.05);color:var(--hd-ink)}
.hd-btn-ghost:hover{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.1)}
.hd-btn-gold{background:#d3a53c;color:#3a2600}
.hd-btn-gold:hover{filter:brightness(1.06)}
.hd-btn:active{transform:translateY(1px)}

/* ปุ่ม "เข้าสู่ระบบ" มีโลโก้ Google นำ — บอกล่วงหน้าว่าเข้าด้วยบัญชี Google
   (โลโก้สีเต็มใช้ `ic-color` — ⧔ ห้ามย้อมสี/ใส่เงา ผิดกฎแบรนด์ของ Google) */
.hd-btn{gap:8px}
.hd-btn-google .ic-google{flex:0 0 auto}

/* ลิงก์เข้าสู่ระบบในแผงเมนูจอเล็ก — ไอคอนต้องอยู่แถวเดียวกับตัวหนังสือ */
.hd-narrow-only>a{display:inline-flex;align-items:center;gap:8px}

/* ── เมนูผู้ใช้ (details/summary — กางได้โดยไม่ต้องมีสคริปต์) ───────────────── */
.hd-user{position:relative;flex:0 0 auto}
.hd-user>summary{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 11px 0 5px;
  border:1px solid var(--hd-line);border-radius:999px;
  background:rgba(255,255,255,.05);color:var(--hd-ink);
  font-size:13px;font-weight:700;cursor:pointer;list-style:none;
  max-width:230px;
}
.hd-user>summary::-webkit-details-marker{display:none}
.hd-user>summary:hover{border-color:rgba(255,255,255,.24);color:#fff}
/* วงกลมอักษรตัวแรกของอีเมล — แทนรูปโปรไฟล์ที่เราไม่ได้เก็บ */
.hd-ava{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#d3a53c;
  color:#3a2600;font-size:13px;font-weight:900;text-transform:uppercase;
}
.hd-user-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-user-caret{opacity:.6;font-size:10px}
.hd-user[open]>summary{border-color:rgba(224,180,76,.5);color:#fff}

.hd-pop{
  position:absolute;right:0;top:calc(100% + 9px);
  min-width:232px;padding:7px;
  background:#fff;border:1px solid #e4e9f0;border-radius:13px;
  box-shadow:0 22px 50px -18px rgba(9,14,24,.5);
  display:flex;flex-direction:column;gap:1px;
}
.hd-pop a,.hd-pop button{
  display:block;width:100%;text-align:left;
  padding:9px 11px;border:0;border-radius:8px;
  background:transparent;color:#334155;
  font-family:inherit;font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;
}
.hd-pop a:hover,.hd-pop button:hover{background:#f6f8fb;color:#0f172a}
.hd-pop form{margin:0}
.hd-pop-out{color:#b02a2a!important;font-weight:700!important}
.hd-pop-sep{height:1px;margin:5px 6px;background:#eef1f6}

/* 📏 จุดยุบเป็นปุ่มขีดสามขีด = 1120px (เดิม 940 · เลื่อน 2026-09-25 หลังเพิ่มเมนู "คู่มือเกม" — ที่ 974px เมนูทับปุ่มเข้าสู่ระบบ 32px · 1065px เหลือช่อง 53px สำหรับ guest · เผื่อเมนูสมาชิกที่อีเมลยาว)
   ⚠️ เพิ่มเมนูบนแถบอีกเมื่อไร ต้องวัดช่วงรอยต่อใหม่ (ดู scratch: navRight vs ปุ่มขวา) */
/* ── ปุ่มขีดสามขีด (จอแคบ) — checkbox + CSS ล้วน ไม่มีสคริปต์ ───────────────── */
.hd-toggle{display:none}
.hd-burger{display:none}

@media (max-width:1080px){
  .hd-nav a{padding:9px 10px;font-size:13.5px}
}

@media (max-width:1120px){
  .hd-burger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:40px;height:38px;flex:0 0 auto;order:-1;
    border:1px solid var(--hd-line);border-radius:10px;
    background:rgba(255,255,255,.05);cursor:pointer;
  }
  .hd-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--hd-ink);transition:.2s}
  .hd-toggle:checked ~ .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hd-toggle:checked ~ .hd-burger span:nth-child(2){opacity:0}
  .hd-toggle:checked ~ .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* เมนูร่วงลงมาเป็นแผงเต็มความกว้าง */
  .hd-nav{
    display:none;position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:8px max(3.2vw,18px) 14px;
    background:#131c2e;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hd-toggle:checked ~ .hd-nav{display:flex}
  .hd-nav a{padding:12px 12px;font-size:15px;border-radius:10px}
  .hd-nav a.on::after{left:12px;transform:none;bottom:8px}
  .hd-brand-tx i{display:none}
}

/* รายการที่มีไว้เฉพาะจอเล็ก (ตอนปุ่มในแถบถูกยุบ) — จอกว้างต้องไม่โชว์ซ้ำกับปุ่ม */
.hd-narrow-only{display:none}

@media (max-width:620px){
  .hd-narrow-only{display:block}
  .hd-brand img{height:30px}
  .hd-user-mail{display:none}          /* เหลือวงกลมอักษร — อีเมลยาวกินแถบทั้งแถบ */
  .hd-user>summary{padding:0 6px 0 5px}
  .hd-btn{padding:0 12px;font-size:13px}
  /* ปุ่ม "เข้าสู่ระบบ" ยุบทิ้งบนจอเล็ก เหลือปุ่มหลักปุ่มเดียว (ลิงก์อยู่ในแผงเมนูแล้ว) */
  .hd-btn-ghost{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hd-cart-n.bump{animation:none}
  .hd-btn:active,.hd-cart:active{transform:none}
}

/* ── 📚 กลุ่มเมนู "ข้อมูล NPC" — กางด้วย <details> ไม่ใช้สคริปต์ ───────────────
   ⚠️ ปิดเมนูต้องกดที่หัวข้ออีกครั้ง (ปิดเมื่อคลิกที่อื่นต้องใช้สคริปต์ ซึ่ง CSP ห้าม inline) */
.hd-has-drop{position:relative}
/* 🔴 หัวข้อกลุ่มเป็น <summary> ไม่ใช่ <a> ⇒ **ไม่เข้ากฎ `.hd-nav a`**
   ถ้าไม่ลอกสไตล์มาเอง มันจะกลายเป็นตัวหนังสือสีเข้มจมหายไปกับพื้นแถบ (เจอมาแล้ว) */
.hd-drop>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:9px 13px;border-radius:9px;
  font-size:14px;font-weight:700;color:var(--hd-ink);
  transition:color .16s ease, background .16s ease;
}
.hd-drop>summary:hover{color:var(--hd-ink-on);background:rgba(255,255,255,.07)}
.hd-drop>summary.on{color:var(--hd-ink-on);background:rgba(224,180,76,.14)}
.hd-drop[open]>summary{color:var(--hd-ink-on);background:rgba(255,255,255,.07)}
.hd-drop>summary::-webkit-details-marker{display:none}
.hd-drop-caret{opacity:.6;font-size:10px}
.hd-pop-nav{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;
  min-width:210px;
}
@media (max-width:1180px){
  .hd-drop>summary{padding:9px 10px;font-size:13.5px}
}
@media (max-width:1120px){
  /* แผงเมนูขีดสามขีด: เมนูย่อยกางในที่ของมันเอง ไม่ลอยทับรายการอื่น */
  .hd-pop-nav{position:static;min-width:0;margin:6px 0 2px;box-shadow:none}
  .hd-drop>summary{padding:9px 10px}
}