/* =====================================================================
   LOS LEOPARD SHOP  |  public/css/navart.css
   เมนูหลักแบบปุ่มรูปเสือดาว (public/img/nav/*.webp · 480x249)

   รูปทุกใบครอปให้กรอบอยู่ตำแหน่งเดียวกันเป๊ะ :
     กรอบปุ่ม  = สูงจาก 41.8% ถึง 98.4% ของรูป · กว้างเต็มรูป
     เสือ      = ครึ่งซ้าย (ถึงราว 47%) หัวโผล่พ้นขอบบนกรอบ
     ชื่อเมนู   = ตัวหนังสือจริงวางทับครึ่งขวาของกรอบ

   ที่อยู่ของปุ่ม :
     จอคอม (≥ 1081px) → ในแถบเมนูบนเสมอ · แถบสูงขึ้นเป็น 78px ให้เสือตัวใหญ่พอเห็นหน้า
                        จอยิ่งแคบ ปุ่มยิ่งเล็กลงเป็นขั้น (ไม่สลับกลับเป็นตัวหนังสือ)
     มือถือ (≤ 1080px) → ปุ่มใต้แถบเมนู เห็นครบทุกปุ่มในจอเดียว (.navdock) · ไม่ต้องกดปุ่มเบอร์เกอร์

   ⚠ ขอบ/ตัวหนังสือเป็นส้มได้ แต่ไม่ใช้พื้นส้มทึบ — ปุ่มที่เลือกอยู่ใช้แสงเรือง ไม่ใช่ถมสี
   ===================================================================== */

/* ─────────── หน้าตาปุ่ม (ใช้ทั้งบนแถบและในแถวมือถือ) ─────────── */
.nav__link.nav__link--art{
  --bh:62px;                                  /* ความสูงปุ่ม — กำหนดทีละช่วงจอข้างล่าง */
  height:var(--bh); aspect-ratio:480 / 249; flex:none;
  padding:0; border-radius:0; background:none;
  color:#eadfd2;
  /*  ยกทั้งปุ่ม (รูป+ข้อความ) เป็นก้อนเดียว — เดิมยกเฉพาะรูป ข้อความเลยไม่ขยับตาม  */
  transform-origin:50% 100%;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav__link.nav__link--art:hover{ background:none; color:#fff; transform:translateY(-2px) scale(1.04); }
.nav__link--art > .ic{ display:none; }
.nav__link.nav__link--art::after{ display:none; }

.nav__art{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; user-select:none;
  filter:brightness(.84) saturate(.9);
  transform-origin:30% 100%;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), filter .22s ease;
}

.nav__link--art .nav__txt{
  position:absolute; top:41.8%; bottom:1.6%; left:47%; right:7%;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--bh) * .215); font-weight:700; line-height:1;
  white-space:nowrap; letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  transition:color .2s ease, text-shadow .2s ease;
}

.nav__link--art:hover .nav__art{
  filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 9px rgba(var(--o),.45));
}

/*  ปุ่มที่เลือกอยู่ : รูปสว่างเต็ม + เรืองส้มรอบกรอบ + แสงนวลใต้ปุ่ม + ชื่อส้มสว่าง  */
.nav__link.nav__link--art.is-active{
  color:var(--or-hi);
  background:radial-gradient(55% 40% at 60% 82%, rgba(var(--o),.2), transparent 72%);
}
.nav__link--art.is-active .nav__art{
  filter:brightness(1.07) saturate(1.08) drop-shadow(0 0 10px rgba(var(--o),.55));
}
.nav__link--art.is-active .nav__txt{
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(var(--o),.6);
}

.nav__link--art:focus-visible{ outline:none; }
.nav__link--art:focus-visible .nav__art{
  filter:brightness(1.1) drop-shadow(0 0 1px var(--or-hi)) drop-shadow(0 0 8px rgba(var(--o),.85));
}

/*  จุดส้ม "ตู้สุ่ม" : มุมขวาบนของกรอบ  */
.nav__link.nav__link--art.nav__link--hot::before{ top:calc(41.8% + 5px); right:9%; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .nav__art{ transition:filter .2s ease; }
  .nav__link--art{ transition:color .18s ease; }
  .nav__link--art:hover{ transform:none; }
}

/* ─────────── จอคอม : ปุ่มอยู่ในแถบเมนูบน ─────────── */
.navdock{ display:none; }

@media (min-width: 1081px){
  :root{ --nav-h:78px; }
  .nav > .wrap{ width:min(1400px, 100% - 32px); }
  /*  ช่องไฟระหว่างปุ่ม — ปุ่มชิดกัน 2px แล้วกรอบนีออนติดกันเป็นพืด อ่านไม่ออกว่าปุ่มไหนเป็นปุ่มไหน
      ขนาดช่องไฟแต่ละช่วงจอ = วัดที่ว่างเหลือจริงบนแถบแล้ว (ดูชุด --nav-gap ข้างล่าง) ไม่ให้แถบล้น  */
  .nav__links{ gap:var(--nav-gap, 12px); align-self:stretch; align-items:center; justify-content:center; }

  /*  ═══ ปุ่มเมนูอยู่กึ่งกลางแถบ ═══
      ⚠ เดิมเป็น flex เรียงต่อกัน : ปุ่มชิดโลโก้ ที่ว่างไปกองขวาหมด
        ยิ่งปิดคิวสอบ (เหลือ 4 ปุ่ม) ยิ่งเอียงซ้ายหนัก ขวาโล่ง (ผู้ใช้แคปหน้าจริงมา 1870px)
      grid 3 ช่อง  ซ้าย 1fr | ปุ่ม auto | ขวา 1fr  → สองข้างกว้างเท่ากัน ปุ่มอยู่กลางจอจริง ๆ
      จอแคบที่ฝั่งขวา (เหรียญ + ปุ่ม + รูปโปรไฟล์) กว้างเกินครึ่งที่เหลือ grid ขยายช่องขวาให้เอง
      ปุ่มจะขยับซ้ายนิดหน่อยแต่ไม่ทับกัน · ช่องซ้ายหดได้เพราะ .brand มี min-width:0 (ชื่อร้านตัดท้าย ...)
      ปุ่มเบอร์เกอร์ (display:none) กับ .spacer ไม่นับเป็นช่อง  */
  .nav > .nav__in{ display:grid; grid-template-columns:1fr auto 1fr; column-gap:var(--brand-gap, 18px); }
  .nav > .nav__in > .spacer{ display:none; }
  .nav > .nav__in > .brand{ margin-right:0; justify-self:start; max-width:100%; }
  .nav > .nav__in > .nav__right{ justify-self:end; }

  /*  เส้นเรืองใต้ปุ่มที่เลือกอยู่ — วางทับเส้นขอบล่างของแถบเมนูพอดี  */
  .nav__link.nav__link--art.is-active::after{
    display:block; content:''; position:absolute;
    left:44%; right:12%; bottom:calc((var(--nav-h) - var(--bh)) / -2);
    width:auto; height:2px; translate:none; border-radius:2px;
    background:var(--or); box-shadow:0 0 12px 1px rgba(var(--o),.7);
  }
}
@media (min-width: 1440px){  .nav__link.nav__link--art{ --bh:72px; } }
/*  ≥ 1600px ชื่อผู้ใช้กลับมาโชว์ (+80px) — ขยายแถบให้อีก ไม่งั้นชื่อร้านโดนตัดอีกรอบ (วัดที่ 1680)  */
@media (min-width: 1600px){  .nav > .wrap{ width:min(1520px, 100% - 32px); } }
@media (min-width: 1320px) and (max-width: 1439px){ .nav__link.nav__link--art{ --bh:60px; } }

/*  ช่องไฟต่อช่วงจอ — ปรับจากที่วัดจริง (ล็อกอินอยู่ มีเหรียญ 2 กระเป๋า · ตราโลโก้ 50px)
    รอบแรกตั้ง 16 / 12 / 9 แล้วชื่อร้านโดนตัด 2 / 13 / 11px ที่ 1600 / 1440 / 1320
    → ลดช่องไฟกับระยะจากชื่อร้านลงให้พอดี (1320 ลดความสูงปุ่ม 1px ด้วย เผื่อชื่อร้านที่ยาวกว่านี้นิดหน่อย)
    ⚠ จะเพิ่มช่องไฟอีก ต้องเช็กว่า .brand__title ไม่โดนตัด (scrollWidth > clientWidth) ทุกช่วงจอ  */
@media (min-width: 1600px){ .nav{ --nav-gap:12px; --brand-gap:18px; } }
@media (min-width: 1440px) and (max-width: 1599px){ .nav{ --nav-gap:7px; --brand-gap:12px; } }
@media (min-width: 1320px) and (max-width: 1439px){ .nav{ --nav-gap:6px; --brand-gap:8px; } }
/*  รอบกรอบนีออนฝั่งขวา (ท้ายไฟล์) ชิปเหรียญกว้างขึ้น → ชื่อร้านโดนตัด 28 / 27 / 16px ที่ 1600 / 1440 / 1320
    เก็บที่คืน : ช่องไฟข้างบนลดลง + ชิปแน่นขึ้น + ตัวอักษรชื่อร้านชิดขึ้นนิดเดียว
    .nav นำหน้า = ชนะ padding ของชิปที่ประกาศทีหลังในไฟล์ (เฉพาะจอคอม มือถือใช้ค่าท้ายไฟล์)  */
@media (min-width: 1081px){
  .nav .navwallet{ gap:5px; }
  .nav .navcoin{ padding:6px 14px 6px 11px; }
  .nav .usermenu__btn{ padding:4px 14px 4px 11px; }
  .nav .brand__title{ letter-spacing:.06em; }
}
/*  ช่วงนี้ชื่อร้านซ่อน เหลือตรา — .nav .brand ชนะ margin-right:6px ในบล็อกซ่อนชื่อร้านข้างล่าง  */
/*  ⚠ ช่วงนี้ไม่ใช้ grid กึ่งกลางจอ — ชื่อร้านซ่อน (เหลือแค่ตรา) ช่องซ้ายเลยว่างเกือบหมด
      แต่ช่องขวา (เหรียญ + ปุ่ม + รูป) กว้างเกินครึ่ง grid เลยดันปุ่มไปชิดขวา : วัดที่ 1200 ซ้าย 121px ขวา 18px
    → กลับเป็น flex + margin auto : ที่ว่างสองข้างของชุดปุ่มเท่ากันพอดี ไม่ชิดฝั่งไหน  */
@media (min-width: 1081px) and (max-width: 1319px){
  .nav{ --nav-gap:12px; }
  .nav > .nav__in{ display:flex; }
  .nav > .nav__in > .nav__links{ margin-inline:auto; }
}

/*  มือถือ : ช่องไฟระหว่างปุ่มในแถว .navdock (> ทำให้ชนะ --gap:6px ที่ประกาศทีหลังในไฟล์)  */
@media (max-width: 1080px){ .navdock > .navdock__in{ --gap:10px; row-gap:6px; } }

/*  จอโน้ตบุ๊กเล็ก : ปุ่มเล็กลง + เก็บที่ให้ปุ่ม
    ซ่อนชื่อร้าน (เหลือโลโก้หกเหลี่ยม) กับชื่อผู้ใช้ (เหลือรูปโปรไฟล์) — ของสองอย่างนี้ไม่ต้องกด  */
@media (min-width: 1200px) and (max-width: 1319px){ .nav__link.nav__link--art{ --bh:57px; } }
@media (min-width: 1081px) and (max-width: 1199px){ .nav__link.nav__link--art{ --bh:53px; } }
@media (min-width: 1081px) and (max-width: 1319px){
  .brand > span:not(.mark){ display:none; }
  .brand{ margin-right:6px; }
}
/*  ชื่อผู้ใช้ข้างรูปโปรไฟล์กินที่ราว 80px — ต่ำกว่า 1600px เอาที่นั้นให้ชื่อร้านแทน
    (วัดจริงที่ 1440 / 1320 : ชื่อร้านโดนตัดเหลือ "LOS LEOPARD..." ถ้ายังโชว์ชื่อผู้ใช้)
    ชื่อตัวเองเจ้าตัวรู้อยู่แล้ว และยังเห็นเต็ม ๆ ในเมนูบัญชีตอนกดรูป  */
@media (min-width: 1081px) and (max-width: 1599px){
  .usermenu__name{ display:none; }
}

/* ─────────── มือถือ / แท็บเล็ต : แถวปุ่มใต้แถบเมนู ─────────── */
@media (max-width: 1080px){
  /*  ปุ่มย้ายมาอยู่ในแถว .navdock แล้ว — เมนูพับกับปุ่มเบอร์เกอร์ไม่ต้องใช้  */
  .nav__burger{ display:none !important; }
  .nav__links, .nav__links.is-open{ display:none !important; }

  .navdock{
    display:block; position:relative; z-index:5;
    background:linear-gradient(180deg, rgba(10,6,4,.94), rgba(10,6,4,.6));
    border-bottom:1px solid var(--hair);
  }
  /*  ⚠ ห้ามทำเป็นแถวเลื่อนซ้าย-ขวา
        เคยทำแล้ว ปุ่มท้าย ๆ โดนตัดครึ่งที่ขอบจอ ดูเหมือนหน้าพัง และคนไม่รู้ว่าต้องปัดถึงจะเจอ
      ปุ่มทุกอันต้องเห็นครบในจอเดียว :
        จอ ≥ 560px → แถวเดียว 5 ปุ่ม
        จอแคบกว่า  → 3 + 2 · ถ้ามี 4 ปุ่ม (ปิดคิวสอบ) → 2 + 2 · แถวล่างอยู่กลาง  */
  .navdock__in{
    --gap:6px; --cols:3;
    display:flex; flex-wrap:wrap; justify-content:center; gap:2px var(--gap);
    max-width:760px; margin-inline:auto; padding:8px 12px;
  }
  .navdock__in:has(> :nth-child(4):last-child){ --cols:2; }
  .navdock .nav__link.nav__link--art{
    flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    width:auto; height:auto;
    container-type:inline-size;
  }
  /*  ตัวหนังสือโตตามความกว้างปุ่ม (ปุ่มกว้าง 139px → 15.5px เท่ากับบนจอคอม)
      .8rem ข้างหน้าเป็นค่าสำรองของเบราว์เซอร์เก่าที่ไม่รู้จักหน่วย cqw  */
  .navdock .nav__link--art .nav__txt{ font-size:.8rem; font-size:11.1cqw; }
}
@media (min-width: 560px) and (max-width: 1080px){
  .navdock__in, .navdock__in:has(> :nth-child(4):last-child){ --cols:5; }
}


/* =====================================================================
   ตราโลโก้บนแถบเมนู (views/partials/nav.ejs · .mark--logo)
   ลายเสือ = public/img/logo-emblem.svg (ลายเดียวกับบนเหรียญเครดิต)

   ขยับ 4 อย่าง ซ้อนกัน :
     ลอยขึ้นลง + เอียงซ้ายขวานิด ๆ   4.5 วิ/รอบ
     แสงวิ่งผ่านลายเสือ             ทุก 4.5 วิ (ตรงจังหวะลอย — ใช้คีย์เฟรมลอยชุดเดียวกัน)
     แสงนวลรอบตราหายใจ              3 วิ/รอบ
     ประกายไฟลอยขึ้น 3 เม็ด          สลับเวลากัน
   ชี้เมาส์ที่ชื่อร้าน = ตราเด้งใหญ่ขึ้น

   ⚠ แสงวิ่งใช้ mask ด้วยไฟล์ลายเสือ — แสงจึงวิ่งเฉพาะบนตัวเสือ ไม่ใช่ทั้งกล่องสี่เหลี่ยม
   ⚠ ขนาดวงนอกกำหนดที่ .mark.mark--logo อย่างเดียว ชั้นข้างในเป็น % ทั้งหมด
   ===================================================================== */
.mark.mark--logo{
  width:50px; height:58px;
  transition:scale .35s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 1080px){ .mark.mark--logo{ width:42px; height:49px; } }
.brand:hover .mark--logo{ scale:1.09; }

.mark--logo .mark__glow{
  position:absolute; inset:-34%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--o),.34), rgba(var(--o),.08) 45%, transparent 66%);
  animation:lmGlow 3s ease-in-out infinite;
}
.brand:hover .mark--logo .mark__glow{ background:radial-gradient(circle, rgba(var(--o),.5), rgba(var(--o),.12) 45%, transparent 68%); }

.mark--logo .mark__emb,
.mark--logo .mark__shine{
  position:absolute; left:50%; top:52%; width:76%; height:auto; aspect-ratio:1;
  translate:-50% -50%;
  animation:lmFloat 4.5s ease-in-out infinite;
  pointer-events:none;
}
.mark--logo .mark__emb{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(var(--o),.4)); }

.mark--logo .mark__shine{
  -webkit-mask:url(/img/logo-emblem.svg?v=1) center / contain no-repeat;
          mask:url(/img/logo-emblem.svg?v=1) center / contain no-repeat;
  background:linear-gradient(112deg, transparent 38%, rgba(255,251,230,.92) 50%, transparent 62%) no-repeat;
  background-size:320% 100%;
  animation:lmFloat 4.5s ease-in-out infinite, lmShine 4.5s ease-in-out infinite;
}

.mark--logo .mark__ember{ position:absolute; inset:0; pointer-events:none; }
.mark--logo .mark__ember i{
  position:absolute; bottom:14%; width:3px; height:3px; border-radius:50%;
  background:var(--or-hi); box-shadow:0 0 6px 1px rgba(var(--o),.9);
  opacity:0; animation:lmEmber 3.4s ease-out infinite;
}
.mark--logo .mark__ember i:nth-child(1){ left:20%; animation-delay:.3s; }
.mark--logo .mark__ember i:nth-child(2){ left:72%; animation-delay:1.5s; }
.mark--logo .mark__ember i:nth-child(3){ left:46%; animation-delay:2.5s; }

@keyframes lmFloat{
  0%, 100%{ transform:translateY(1.5px) rotate(-3deg); }
  50%     { transform:translateY(-2px) rotate(3deg) scale(1.04); }
}
@keyframes lmShine{
  0%, 52%  { background-position:140% 0; }
  78%, 100%{ background-position:-40% 0; }
}
@keyframes lmGlow{
  0%, 100%{ opacity:.5; scale:.9; }
  50%     { opacity:1; scale:1.06; }
}
@keyframes lmEmber{
  0%  { opacity:0; transform:translate(0, 0) scale(1); }
  18% { opacity:1; }
  100%{ opacity:0; transform:translate(5px, -32px) scale(.35); }
}

/*  ชื่อร้าน : ไล่สีครีม → ทอง ให้เข้าชุดกับตราและปุ่มเสือ (ตัวหนังสือจริง แอดมินเปลี่ยนชื่อได้เหมือนเดิม)  */
.nav .brand__title{
  background:linear-gradient(180deg, #fff7e2 0%, #ffdc8f 58%, #f3a93c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(var(--o),.25));
}

@media (prefers-reduced-motion: reduce){
  .mark--logo .mark__glow, .mark--logo .mark__emb, .mark--logo .mark__shine, .mark--logo .mark__ember i{ animation:none; }
  .mark--logo .mark__ember{ display:none; }
}


/* =====================================================================
   จัดแนวทั้งแถบบนจอคอม : ทุกอย่างวางบน "เส้นราง" เส้นเดียว
   (บล็อกนี้อยู่ท้ายไฟล์ตั้งใจ — ทับค่าความสูงแถบ / การจัดแนวตั้ง / ขนาดตราที่ประกาศไว้ข้างบน)

   ⚠ ปัญหาเดิม : รูปปุ่มมีหัวเสืออยู่ครึ่งบน ตัวกรอบปุ่มอยู่ครึ่งล่าง (จุดกลางกรอบ = 70% ของความสูงรูป)
     จัดกึ่งกลางแนวตั้งแบบปกติ → กรอบปุ่มต่ำกว่าโลโก้ เหรียญ รูปโปรไฟล์ ราว 14px
     ผู้ใช้เห็นว่า "ปุ่มต่ำ ซ้ายขวาไม่สมูด"
   ใหม่ : เส้นราง --rail วัดจากขอบบนแถบ
     กรอบปุ่ม   → จุดกลางกรอบวางบนเส้นราง · หัวเสือโผล่ขึ้นเหนือเส้น (ตั้งใจ)
     ซ้าย / ขวา → กล่องสูง 2 × (nav-h − rail) ชิดล่าง = จุดกลางกล่องอยู่บนเส้นรางพอดี
   ===================================================================== */
@media (min-width: 1081px){
  :root{ --nav-h:84px; --rail:56px; }

  .nav__links{ align-items:flex-end; }
  .nav__links .nav__link.nav__link--art{
    /*  .299 = ระยะจากจุดกลางกรอบถึงก้นรูป (กรอบ 41.8% → 98.4% ของความสูง)  */
    --mb:calc(var(--nav-h) - var(--rail) - var(--bh) * .299);
    margin-bottom:var(--mb);
  }
  /*  เส้นเรืองใต้ปุ่มที่เลือกอยู่ : ยังทับขอบล่างของแถบพอดี  */
  .nav__links .nav__link.nav__link--art.is-active::after{ bottom:calc(var(--mb) * -1); }

  .nav > .nav__in > .brand,
  .nav > .nav__in > .nav__right{
    align-self:end; height:calc((var(--nav-h) - var(--rail)) * 2);
  }
  /*  กล่องซ้ายสูง 56px — ตรา 50x58 ล้นกล่อง ลดลงนิดเดียว  */
  .mark.mark--logo{ width:46px; height:53px; }
}


/* =====================================================================
   ฝั่งขวา : ชิปเหรียญ + ปุ่มบัญชี + ปุ่มไอคอน ให้เป็นภาษาเดียวกับกรอบปุ่มเสือ
   ⚠ เดิม : ชิปเหรียญเป็นแคปซูลโปร่ง ปุ่มบัญชีเป็นแคปซูลขอบเทา — คนละแบบกับกรอบนีออนตัดมุมของปุ่มเสือ
     วางข้างกันแล้วดูเหมือนของสองเว็บ
   ใหม่ : กรอบหกเหลี่ยมยาว (ปลายซ้ายขวาแหลมแบบกรอบปุ่มเสือ) + ขอบนีออนส้มบาง + พื้นในเข้ม
     ::before = สีขอบ · ::after = พื้นใน (inset 1.5px) · clip-path ตัดทั้งคู่ ขอบจึงตามรูปทรงพอดี
   ⚠ พื้นในเข้มเสมอ ไม่ถมส้ม (ส้มใช้ได้แค่ขอบ / ตัวหนังสือ / แสงเรือง)
   ===================================================================== */
.navwallet{ gap:8px; }
.navcoin, .usermenu__btn{
  --chip:polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
  position:relative; isolation:isolate;
  border:0; border-radius:0; background:none;
  filter:drop-shadow(0 0 6px rgba(var(--o),.16));
  transition:filter .18s var(--ease);
}
.navcoin{ padding:7px 17px 7px 13px; }
.usermenu__btn{ padding:5px 17px 5px 13px; }
.navcoin::before, .usermenu__btn::before{
  content:''; position:absolute; inset:0; z-index:-2; clip-path:var(--chip);
  background:linear-gradient(180deg, rgba(var(--o),.8), rgba(var(--o),.3));
  transition:background .18s var(--ease);
}
.navcoin::after, .usermenu__btn::after{
  content:''; position:absolute; inset:1.5px; z-index:-1; clip-path:var(--chip);
  background:linear-gradient(180deg, #1c1209, #0b0705);
  transition:background .18s var(--ease);
}
.navcoin--ember::before{ background:linear-gradient(180deg, rgba(var(--em),.8), rgba(var(--em),.3)); }

.navcoin:hover, .usermenu__btn:hover, .usermenu.is-open .usermenu__btn{
  background:none; border:0; filter:drop-shadow(0 0 9px rgba(var(--o),.45));
}
.navcoin--ember:hover{ background:none; filter:drop-shadow(0 0 9px rgba(var(--em),.45)); }
.navcoin:hover::before, .usermenu__btn:hover::before, .usermenu.is-open .usermenu__btn::before{
  background:linear-gradient(180deg, var(--or-hi), rgba(var(--o),.6));
}
.navcoin--ember:hover::before{ background:linear-gradient(180deg, var(--ember-hi), rgba(var(--em),.6)); }
.navcoin:hover::after, .usermenu__btn:hover::after, .usermenu.is-open .usermenu__btn::after{
  background:linear-gradient(180deg, #2a1a0b, #140c06);
}

/*  ปุ่มไอคอนหกเหลี่ยม (ตะกร้า / ทางลัดทีมงาน) : ขอบส้มจาง ๆ ตลอดเวลา (เดิมขอบเทาขาว) · เส้นคั่นอุ่นขึ้น  */
.iconbtn{ color:#d6c3ad; }
.iconbtn::before{ background:linear-gradient(180deg, rgba(var(--o),.7), rgba(var(--o),.22)); }
.navacts{ border-left-color:rgba(var(--o),.2); }

/*  theme.css ย่อชิปเหรียญที่ ≤ 1000px — ปรับ padding ใหม่ให้พอกับปลายแหลมของกรอบ  */
@media (max-width: 1000px){
  .navcoin{ padding:5px 13px 5px 10px; }
}

/* ═══ ปุ่มบัญชี : รูปโปรไฟล์หกเหลี่ยม "เกาะ" หัวป้ายชื่อ ═══
   ⚠ รอบก่อนใช้กรอบปลายแหลมสองข้างแบบชิปเหรียญ — รูปโปรไฟล์หกเหลี่ยมไปชนปลายแหลมด้านซ้าย
     มุมหกเหลี่ยมสองอันซ้อนกันดูแปลก (ผู้ใช้แคปมา)
   ใหม่ : ป้ายเริ่มจากกลางรูปโปรไฟล์ ขอบซ้ายตรง (ซ่อนอยู่หลังรูป) ปลายขวาแหลม
          รูปใหญ่กว่าป้าย ยื่นพ้นขอบบนล่างนิดหน่อย = ตราติดหัวป้ายชื่อ + แสงเรืองรอบรูป
   .nav นำหน้า = ชนะ padding / inset / clip-path ของชิปที่ประกาศไว้ข้างบน ทุกขนาดจอ  */
.nav .usermenu__btn{
  --plate:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  padding:0 16px 0 0; gap:10px; min-height:44px;
}
.nav .usermenu__btn::before{ inset:5px 0 5px 19px; clip-path:var(--plate); }
.nav .usermenu__btn::after{ inset:6.5px 1.5px 6.5px 20.5px; clip-path:var(--plate); }
.nav .usermenu__btn .usermenu__ava{
  width:38px; height:44px;
  filter:drop-shadow(0 0 5px rgba(var(--o),.45));
}
.nav .usermenu__btn .usermenu__ava img{ inset:2.5px; width:calc(100% - 5px); height:calc(100% - 5px); }


/* =====================================================================
   แถบเมนูลอย : ไม่มีพื้นหลังตอนอยู่บนสุดของหน้า
   ⚠ เดิมแถบมีพื้นดำไล่เฉด + เส้นขอบล่าง = แถบยาวสีดำตัดกับพื้นหลังจริงของหน้า ดูเหมือนกล่องแปะทับ (ผู้ใช้แคปมา)
   ใหม่ : อยู่บนสุดของหน้า → โปร่งทั้งแถบ ปุ่มลอยอยู่บนพื้นหลังจริง
          เลื่อนหน้าลง (public/js/navfx.js ใส่ .is-scrolled) → พื้นเบลอค่อย ๆ โผล่
          ⚠ ส่วนหลังนี้ต้องมี — แถบติดขอบจอ (sticky) ถ้าโปร่งตลอด เนื้อหาจะวิ่งลอดใต้ปุ่ม อ่านไม่ออก
   ===================================================================== */
.nav{
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{
  background:linear-gradient(180deg, rgba(8,5,3,.9), rgba(8,5,3,.7));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:rgba(var(--o),.14);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.95);
}
/*  แถวปุ่มบนมือถือไม่ติดขอบจอ (เลื่อนหายไปกับหน้า) — ไม่ต้องมีพื้นเลย  */
.navdock{ background:none; border-bottom:0; }


/* =====================================================================
   เปลี่ยนหน้าแล้วเมนูต้องนิ่ง + มีอนิเมชันสลับหน้า
   ⚠ ผู้ใช้เจอ : กดเปลี่ยนหน้าแล้วแถบเมนูกระตุก / ขยับ
     วัดตำแหน่งจริงทุกหน้าแล้ว (/, /shop, /gacha ... 10 หน้า ที่ 1600px) = ตรงกันเป๊ะทุกหน้า
     ที่ขยับคือ "ระหว่างโหลดหน้าใหม่" :
       1. โหลดทั้งหน้าใหม่ แถบเมนูวาดใหม่ กะพริบ
       2. อนิเมชันโลโก้เริ่มนับใหม่ทุกหน้า → โลโก้กระตุกกลับจุดเริ่ม
       3. หน้าสั้นไม่มีแถบเลื่อน / หน้ายาวมี → จอกว้างต่างกัน 10–17px เมนูที่จัดกลางเลยเลื่อน
   ===================================================================== */

/*  3. จองที่แถบเลื่อนไว้เสมอ — ทุกหน้ากว้างเท่ากัน ไม่ว่าหน้าจะสั้นหรือยาว  */
html{ scrollbar-gutter:stable; }

/*  1. View Transitions ข้ามหน้า (Chrome / Edge 126+, Safari 18.2+)
       ถ่ายภาพหน้าเก่าไว้ → หน้าใหม่พร้อมแล้วค่อยสลับ
       แถบเมนู / แถวปุ่มมือถือ / แถบ DEMO = ชิ้นแยก ตำแหน่งเดิมทั้งสองหน้า → อยู่นิ่ง
       เนื้อหาที่เหลือ (root) = หน้าเก่าจางออก หน้าใหม่ลอยขึ้นมาแทน
       เบราว์เซอร์ที่ไม่รองรับ (Firefox) = เปลี่ยนหน้าแบบปกติ ไม่พัง  */
@view-transition{ navigation:auto; }
.nav{ view-transition-name:site-nav; }
.navdock{ view-transition-name:site-dock; }       /* public/js/navfx.js ปลดชื่อนี้ถ้าเลื่อนหน้าลงไปจนแถวนี้พ้นจอ */
.demobar{ view-transition-name:site-demo; }

::view-transition-old(root){ animation:lvOut .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:lvIn .38s cubic-bezier(.16,1,.3,1) both; }
/*  แถบเมนูเปลี่ยนแค่ปุ่มที่เลือก / พื้นเบลอ — ให้จางสลับกันเร็ว ๆ ไม่ต้องขยับอะไร  */
::view-transition-group(site-nav),
::view-transition-group(site-dock){ animation-duration:.26s; }
@keyframes lvOut{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes lvIn { from{ opacity:0; transform:translateY(12px); } }

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
}

/*  2. อนิเมชันโลโก้ต่อเนื่องข้ามหน้า
       public/js/navsync.js (โหลดใน <head> ก่อนวาดหน้า) ตั้ง --lm-* = เวลาปัจจุบัน mod รอบอนิเมชัน (ค่าติดลบ)
       หน้าใหม่เลยเล่นต่อจากจังหวะเดียวกับหน้าเก่า ไม่กระตุกกลับจุดเริ่ม
       ⚠ ความยาวรอบ 4.5s / 3s / 3.4s ต้องตรงกับ navsync.js  */
.mark--logo .mark__glow{ animation-delay:var(--lm-glow, 0s); }
.mark--logo .mark__emb{ animation-delay:var(--lm-float, 0s); }
.mark--logo .mark__shine{ animation-delay:var(--lm-float, 0s), var(--lm-float, 0s); }
.mark--logo .mark__ember i:nth-child(1){ animation-delay:calc(var(--lm-ember, 0s) + .3s); }
.mark--logo .mark__ember i:nth-child(2){ animation-delay:calc(var(--lm-ember, 0s) + 1.5s); }
.mark--logo .mark__ember i:nth-child(3){ animation-delay:calc(var(--lm-ember, 0s) + 2.5s); }