/* ============================================================
   PEGASUS UNION — section: VJ กำลังไลฟ์ตอนนี้  (css/live.css)
   สีทุกสีมาจาก css/tokens.css เท่านั้น — ไม่มี hex ในไฟล์นี้
   Mobile-first เริ่ม 360px
   ============================================================ */

/* ---------- หัวข้อ ---------- */
.live__head{text-align:center;margin-bottom:var(--sp-6)}
.live__title{margin-bottom:var(--sp-2)}
.live__lead{
  max-width:34ch;margin-inline:auto;
  font-size:var(--fs-sm);opacity:.85;
}

/* ตัวนับ + จุดแดงกะพริบ */
.live__counter{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin:0;padding:.5em 1.1em;
  background:linear-gradient(var(--surface),var(--surface)),var(--surface);
  border:1px solid var(--surface-brd);
  border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
  font-size:var(--fs-sm);font-weight:600;
}
.live__counter b{color:var(--accent);font-size:1.15em}
.live__dot{
  width:10px;height:10px;flex:0 0 auto;border-radius:var(--r-pill);
  background:var(--live-dot);
  box-shadow:0 0 0 0 var(--live-dot);
  animation:liveDotPulse 1.6s var(--ease) infinite;
}
@keyframes liveDotPulse{
  0%  {box-shadow:0 0 0 0 var(--live-dot);opacity:1}
  70% {box-shadow:0 0 0 9px transparent;opacity:.65}
  100%{box-shadow:0 0 0 0 transparent;opacity:1}
}

/* ---------- กริดการ์ด ---------- */
.live__grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:1fr;              /* 360px = 1 คอลัมน์ */
  margin-top:var(--sp-6);
}
/* เดิมแตกเป็น 2 คอลัมน์ตั้งแต่ 420px — มือถือแทบทุกรุ่นที่ลูกค้าใช้ (360–430px)
   จึงได้การ์ดกว้างแค่ ~186px และรูป VJ ก็เล็กตามไปด้วย
   ทั้งที่ traffic 100% มาจากมือถือ และรูปคือจุดขาย → ยกเส้นแบ่งไปที่ 560px
   ผลคือมือถือทุกเครื่องเห็นการ์ดเต็มความกว้าง + รูป 172px เต็มเพดาน */
@media (min-width:560px){
  .live__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .live__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
}
/* เดิมแตกเป็น 4 คอลัมน์ที่ 1024px — การ์ดแคบลงเหลือ ~257px รูปจึงได้แค่ ~166px
   ซึ่งเล็กกว่าบนมือถือเสียอีก (172px) ทั้งที่จอกว้างกว่า 3 เท่า
   รูปคือจุดขาย จึงคงไว้ที่ 3 คอลัมน์ตลอด ยอมให้การ์ดใหญ่ขึ้นแทนที่จะยัดให้ครบแถว
   ⚠ ลบบล็อก @media 1024px ทิ้งไปแล้ว — ถ้าจะเอา 4 คอลัมน์กลับมา ต้องแก้เพดาน
     ของ .vjcard__top ที่ 1024px ด้านล่างด้วย ไม่งั้นรูปจะหดกลับไปเล็กเหมือนเดิม */

/* ---------- การ์ด VJ ---------- */
.vjcard{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-4);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vjcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.vjcard::after{                              /* ขอบเรืองแสงบางๆ ด้านบน */
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad-gold);opacity:.9;
}

/* ---------- หัวการ์ด: รูป VJ (พระเอก) + ป้าย LIVE ----------
   ลูกค้าบอกว่า "หน้า VJ คือจุดขาย" — ของเดิมเป็นวงกลม 58px มุมบนซ้าย
   ซึ่งเล็กกว่าปุ่มในการ์ดใบเดียวกันเสียอีก ตาจึงไปลงที่ปุ่มก่อนเสมอ
   ใหม่: วงกลมใหญ่กลางหัวการ์ด กว้างตามการ์ด แล้วให้ป้าย LIVE คร่อมขอบล่าง

   ทำไมคิดเป็น % ของการ์ด ไม่ใช่ vw (แบบที่ pink.css ใช้ได้):
   กริดนี้เปลี่ยนจำนวนคอลัมน์ตามจอ (1→2→3→4) ความกว้างการ์ดจึง "ไม่ได้" แปรตาม vw
   ถ้าใช้ vw รูปจะล้นการ์ดทันทีที่ข้ามไปสองคอลัมน์ (เช่น 38vw ที่จอ 560px = 213px
   แต่การ์ดตอนนั้นกว้างแค่ ~215px) → ต้องผูกกับความกว้างการ์ดเท่านั้น */
.vjcard__top{
  position:relative;
  width:min(68%,172px);
  margin-inline:auto;
  /* เผื่อที่ให้ป้าย LIVE ที่ยื่นพ้นขอบล่างวงกลมลงมา (นอกเหนือจาก gap ของการ์ด) */
  margin-bottom:var(--sp-2);
  /* กล่องอ้างอิงของหน่วย cqi ที่ .vjcard__initial ใช้ (ดูเหตุผลที่นั่น) */
  container-type:inline-size;
}

.vjcard__avatar{
  width:100%;aspect-ratio:1;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%);
  color:var(--peg-white);
  box-shadow:var(--shadow-gold);
  user-select:none;
}

/* กรณี "ยังไม่มีรูป" — ตัวอักษรย่อต้องใหญ่ตามวงกลม ไม่ใช่ตัวจิ๋วกลางจานสี
   ขนาดตัวอักษรต้องอิง "ความกว้างวงกลม" ซึ่งเป็น min(64%,172px) — ค่าที่เขียน
   เป็นสูตร ไม่มีทางเอามาคูณใน font-size ได้ตรงๆ จึงต้องใช้หน่วย container query
   บรรทัดแรกคือค่าคงที่สำหรับเบราว์เซอร์ที่ไม่รู้จัก cqi (ทั้งบรรทัดจะถูกทิ้งไป)
   ห้ามยุบสองบรรทัดนี้เป็นบรรทัดเดียว มิฉะนั้นเบราว์เซอร์เก่าจะได้ font-size จาก
   .card ซึ่งเป็นตัวอักษรขนาดเนื้อความ = ตัวย่อจิ๋วกลางวงกลม 172px */
.vjcard__initial{
  font-family:var(--font-display);font-weight:600;
  line-height:1;text-transform:uppercase;
  font-size:2.4rem;
}
.vjcard__initial{font-size:34cqi}

/* ตั้งแต่ 768px กริดเป็น 3–4 คอลัมน์ การ์ดจึงแคบที่สุดของทั้งเว็บ (~186px)
   เพดาน 172px ไม่มีผลแล้ว เหลือแต่ % → เพิ่ม % ให้รูปไม่ลีบเกินไปบนเดสก์ท็อป */
@media (min-width:768px){
  .vjcard__top{width:min(74%,172px)}
}
/* ★ ลดเหลือ 3 คอลัมน์อย่างเดียวได้รูปใหญ่ขึ้นแค่ 166→172px เพราะชนเพดาน 172 อยู่ดี
     เพดานนั้นตั้งไว้สมัยที่การ์ดแคบ ไม่ใช่ขีดจำกัดเชิงออกแบบ — บนจอกว้างจึงยกขึ้นได้
     ที่ wrap 1180px / 3 คอลัมน์ การ์ดกว้าง ~351px ⇒ 74% = ~236px เพดาน 220 จึงยังไม่ชน %
     (ตัวย่อกรณีไม่มีรูปใช้หน่วย cqi อยู่แล้ว จึงโตตามเองไม่ต้องแก้) */
@media (min-width:1024px){
  .vjcard__top{width:min(74%,220px)}
}

/* กรณี "มีรูปจริง" — ทับเต็มวงกลม
   object-position เยื้องขึ้นบน เพราะรูปคนมักมีหัวอยู่ค่อนไปทางบนของเฟรม
   ถ้าครอปที่กึ่งกลางพอดี หน้าจะโดนตัดบ่อย */
.vjcard__photo{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 28%;
  border-radius:inherit;
}

/* ป้าย LIVE — คร่อมขอบล่างวงกลม ให้อ่านว่า "คนนี้อยู่ในห้องตอนนี้"
   วงแหวนรอบป้ายใช้ --surface-brd (สีขอบการ์ดของโซนนั้นๆ) เพื่อตัดป้ายออกจากรูป */
.vjcard__badge{
  position:absolute;left:50%;bottom:0;
  transform:translate(-50%,42%);
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:.28em .7em;border-radius:var(--r-pill);
  background:var(--live-dot);color:var(--peg-white);
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  white-space:nowrap;
  box-shadow:0 0 0 3px var(--surface-brd),var(--shadow-sm);
  animation:liveBadgeBlink 1.8s steps(1,end) infinite;
}
.vjcard__badge::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--peg-white);
}
@keyframes liveBadgeBlink{
  0%,60%{opacity:1}
  80%,100%{opacity:.45}
}

/* ชื่อ + tags
   จัดกึ่งกลางทั้งหัวการ์ด เพราะรูปกลมใหญ่อยู่กลางแล้ว — ถ้าปล่อยข้อความชิดซ้าย
   การ์ดจะดูเอียงข้างเดียว */
.vjcard__name{
  margin:0;font-family:var(--font-display);font-size:var(--fs-h3);
  line-height:1.25;word-break:break-word;text-align:center;
}
/* คติประจำใจ — ตัดที่ 2 บรรทัดเพื่อให้การ์ดสูงเท่ากัน */
.vjcard__motto{
  margin:calc(var(--sp-1) * -1) 0 0;
  font-style:italic;font-size:var(--fs-sm);line-height:1.5;text-align:center;
  color:var(--fg);opacity:.8;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
}

.vjcard__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.vjcard__tag{
  font-size:.72rem;padding:.2em .6em;border-radius:var(--r-pill);
  border:1px solid var(--surface-brd);
  background:var(--surface);color:var(--fg);opacity:.9;
}

/* ช่วงเวลาไลฟ์ */
.vjcard__schedule{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--accent);
}
.vjcard__schedule-ico{font-size:.95em;opacity:.9}

/* ---------- แถบรหัส ID ไลฟ์ (ข้อมูลล้วน) ---------- */
/* ป้าย ID ไลฟ์ — แผ่นสลักขอบทอง

   เดิมเป็น border:1px dashed var(--accent) บนพื้น --surface
   เส้นประทำให้อ่านเป็น "คูปองส่วนลด / ใบเสร็จ" มากกว่าของสังกัดพรีเมียม
   และสีเส้นเป็น --accent (ชมพูสด/ฟ้าสว่าง) ซึ่งตีกับปุ่มทองที่อยู่ใต้มันพอดี

   ใหม่: เส้นทองบาง + ไฮไลต์ด้านบน ให้ดูเป็นแผ่นโลหะสลัก ไม่ใช่กล่องแบน
   ทองคือสีที่ใช้กับของสำคัญอยู่แล้วทั้งเว็บ (ปุ่มหลัก, ชื่อแบรนด์)
   ID จึงถูกจัดอยู่ในกลุ่มเดียวกับของสำคัญ แทนที่จะเป็นป้ายกำกับ */
.vjcard__id{
  margin-top:auto;
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--peg-gold) 45%,transparent);
  /* ไล่แสงจางจากขอบบน = แผ่นโลหะรับแสง ไม่ใช่พื้นทึบเรียบ
     วางบน --surface เพื่อให้ยังกลืนกับการ์ดทั้ง 2 โซน */
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--peg-gold-light) 18%,transparent) 0%,
      transparent 62%),
    var(--surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--peg-gold-light) 50%,transparent);
}
.vjcard__id-label{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;line-height:1.3;
}
.vjcard__id-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.18rem;font-weight:700;letter-spacing:.1em;
  line-height:1.25;
  /* tabular-nums = เลขทุกตัวกว้างเท่ากัน ป้าย ID จึงไม่ขยับความกว้าง
     ตอนสลับ VJ หรือตอนวาดใหม่ตอนเปลี่ยนภาษา */
  font-variant-numeric:tabular-nums;
  /* สีตั้งต้นต้องอ่านออกเสมอ — gradient ทองเป็นของแถมที่ใส่ทีหลังใน @supports
     ทำแบบนี้ไม่ใช่แบบ .gold-text ใน base.css (ที่ตั้ง color:transparent ตรงๆ)
     เพราะนี่คือ "รหัสที่ผู้ใช้ต้องอ่านไปพิมพ์ต่อ" ถ้าเบราว์เซอร์ไหนไม่รองรับ
     background-clip:text ขึ้นมา ตัวเลขจะหายไปทั้งตัว = ผู้ใช้ไปต่อไม่ได้ */
  color:var(--fg);
  overflow-wrap:anywhere;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .vjcard__id-value{
    /* --grad-gold-text ไม่ใช่ --grad-gold : ตัวหลังสว่างเกินไปบนพื้นชมพูอ่อน
       (tokens.css บันทึกไว้ว่า contrast ~1.8:1 อ่านไม่ออก) */
    background:var(--grad-gold-text);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* ---------- แถว action: ไปดูไลฟ์ (หลัก) + คัดลอก ID (รอง) ----------
   ซ้อนกันเป็นคอลัมน์เสมอ — ที่ 768px การ์ดแคบสุด (~186px, 3 คอลัมน์)
   วางปุ่มคู่กันแนวนอนจะล้นแน่ในภาษาอังกฤษ ("Watch Live" + "Copy") */
/* ความสูงคงที่ = "สองแถวเสมอ" (ปุ่มหลัก 48 + gap + ปุ่มรอง 44)
   การ์ดที่ไม่มีลิงก์ห้องมีปุ่มเดียว ก้นการ์ดจึงเคยสูงไม่เท่าใบอื่น ~52px
   ตรึงความสูงไว้ที่นี่แทนการยัดปุ่ม disabled เข้าไปให้ครบจำนวน
   (ปุ่มที่กดไม่ได้ = บั๊ก — ดูเหตุผลเต็มใน js/live.js)
   flex-end: ปุ่มเกาะก้นการ์ดเสมอ ช่องที่เหลือดันขึ้นไปให้ข้อความบอกทาง */
.vjcard__actions{
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--sp-2);
  min-height:calc(48px + var(--sp-2) + 44px);
}

/* ข้อความบอกทางแทนปุ่ม "ไปดูไลฟ์" ที่หายไป
   clamp 2 บรรทัด: อังกฤษยาวกว่าไทย ถ้าปล่อยให้ล้นเป็น 3 บรรทัด
   แถบนี้จะดันเกิน min-height แล้วการ์ดกลับมาสูงไม่เท่ากันอีก */
.vjcard__hint{
  margin:0;
  font-size:var(--fs-sm);line-height:1.4;text-align:center;
  color:var(--fg);opacity:.75;
  text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
}

/* ปุ่มหลัก "ไปดูไลฟ์" — เด่นที่สุดในการ์ด */
.vjcard__go{
  min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:0 var(--sp-4);
  border-radius:var(--r-sm);
  background:var(--grad-gold);color:var(--peg-ink);
  font-family:var(--font-display);
  font-size:var(--fs-body);font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;
  box-shadow:var(--shadow-gold);
  transition:transform .2s var(--ease),filter .2s var(--ease);
}
.vjcard__go:hover{filter:brightness(1.06);transform:translateY(-2px)}
.vjcard__go:active{transform:translateY(0) scale(.98)}
.vjcard__go-ico{font-size:.9em;transition:transform .2s var(--ease)}
.vjcard__go:hover .vjcard__go-ico{transform:translateX(3px)}

/* ปุ่มคัดลอก — touch target >= 44px */
.vjcard__copy{
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  padding:0 var(--sp-3);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;line-height:1.2;
  text-align:center;
  transition:transform .2s var(--ease),filter .2s var(--ease),background .2s var(--ease);
}
/* รอง: เส้นขอบ (ใช้เมื่อมีปุ่ม "ไปดูไลฟ์" อยู่ด้วย) */
.vjcard__copy--ghost{
  background:transparent;border:1.5px solid var(--accent);color:var(--accent);
  box-shadow:none;
}
.vjcard__copy--ghost:hover{background:var(--surface)}
/* หลัก: ไม่มีลิงก์ → ปุ่มนี้ต้องเด่นแทน */
.vjcard__copy--solo{
  min-height:48px;
  background:var(--accent);color:var(--peg-white);
  font-size:var(--fs-body);
  box-shadow:var(--shadow-sm);
}
.vjcard__copy:hover{filter:brightness(1.1);transform:translateY(-1px)}
.vjcard__copy:active{transform:translateY(0) scale(.97)}
/* feedback หลังกดคัดลอก — ทับทั้ง ghost และ solo */
.vjcard__copy.is-copied{
  background:var(--peg-gold-deep);color:var(--peg-white);border-color:var(--peg-gold-deep);
}
.vjcard__copy.is-failed{
  background:var(--live-dot);color:var(--peg-white);border-color:var(--live-dot);
}

/* โซนน้ำเงิน: --accent เป็นฟ้าอ่อน → ตัวอักษรบนพื้น accent ต้องเป็นสีเข้ม */
[data-zone="blue"] .vjcard__copy--solo{color:var(--blue-navy-deep)}
[data-zone="blue"] .vjcard__avatar{color:var(--blue-navy-deep)}

/* ---------- Empty state ---------- */
.live__empty{
  margin-top:var(--sp-6);
  text-align:center;
  padding:var(--sp-8) var(--sp-4);
  background:linear-gradient(var(--surface),var(--surface)),var(--surface);
  border:1px solid var(--surface-brd);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.live__empty-art{
  font-size:clamp(2.4rem,11vw,3.4rem);line-height:1;
  margin-bottom:var(--sp-3);
  animation:liveTwinkle 2.8s var(--ease) infinite;
}
@keyframes liveTwinkle{
  0%,100%{transform:scale(1) rotate(0);opacity:.9}
  50%    {transform:scale(1.14) rotate(8deg);opacity:1}
}
.live__empty-title{margin-bottom:var(--sp-2)}
.live__empty-text{margin:0;font-size:var(--fs-sm);opacity:.85}

/* ---------- แถบไลฟ์ถัดไป ---------- */
.live__next{
  margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-6);
  background:linear-gradient(var(--surface),var(--surface)),var(--surface);
  border:1px solid var(--surface-brd);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.live__next-title{
  display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-3);font-size:var(--fs-h3);
}
.live__next-icon{font-size:.9em}
/* รายการน้อย → ย่อกล่องแล้วจัดกึ่งกลาง (js/live.js ตั้ง data-count ให้)
   ทำเฉพาะ >=768px: มือถือกล่องเต็มความกว้างอยู่แล้ว ย่ออีกจะลีบ
   ตั้งเป็น max-width คงที่แทนการให้กล่อง "หดตามเนื้อหา" (width:fit-content)
   เพราะ fit-content ทำให้ grid ข้างในไม่มีความกว้างที่แน่นอน แล้ว auto-fit
   จะยุบเหลือคอลัมน์เดียว — รายการ 4 อันจะเรียงลงล่างแทนที่จะเป็น 2x2 */
@media (min-width:768px){
  .live__next[data-count="1"]{max-width:30rem;margin-inline:auto}
  .live__next[data-count="2"]{max-width:56rem;margin-inline:auto}
}

/* รายการไลฟ์ถัดไป
   auto-fit + เพดาน 26rem ต่อคอลัมน์ + justify-content:center คือหัวใจของบล็อกนี้:
   การ์ดกว้างได้ถึง 1180px ถ้าปล่อยให้แถวยืดเต็ม พอมี VJ คนเดียว (ซึ่งเป็นกรณีปกติ)
   จะเหลือช่องว่างยาวกลางแถว — ที่ลูกค้าบอกว่า "โล่ง"
   auto-fit ยุบคอลัมน์ที่ไม่มีของทิ้ง คอลัมน์ที่เหลือจึงหยุดที่ 26rem แล้วถูกจัดกึ่งกลาง
   → 1 รายการ = การ์ดเล็กกลางจอ, 4 รายการ = เต็มความกว้างพอดี
   min(100%,17rem) แทน 17rem เฉยๆ: กัน track ที่กว้างกว่าคอนเทนเนอร์ตอนจอ 360px
   ซึ่งจะดัน horizontal scroll ทั้งหน้า */
.live__next-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),26rem));
  justify-content:center;
}
.live__next-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-1);
  border-bottom:1px solid var(--surface-brd);
  font-size:var(--fs-sm);
}

/* รูป VJ วงกลมเล็ก — ตัวย่ออยู่ข้างหลังเสมอ รูปวางทับด้วย absolute
   (กลไกเดียวกับ .vjcard__avatar ถ้ารูปพัง js ถอด <img> ออก แล้วตัวย่อโผล่แทน) */
.live__next-av{
  position:relative;overflow:hidden;
  width:2.875rem;height:2.875rem;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%);
  color:var(--peg-white);
  box-shadow:var(--shadow-sm);
  user-select:none;
}
[data-zone="blue"] .live__next-av{color:var(--blue-navy-deep)}
.live__next-initial{
  font-family:var(--font-display);font-weight:600;
  line-height:1;text-transform:uppercase;font-size:1.15rem;
}
.live__next-photo{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 28%;border-radius:inherit;
}

.live__next-body{min-width:0;display:grid;gap:.15rem}
.live__next-name{font-weight:600;overflow-wrap:anywhere}

/* แถวข้อมูลรอง: ป้ายเวลา + นับถอยหลัง + แท็ก — wrap ได้อิสระ
   จึงไม่มีทางดันแถวให้กว้างเกินคอลัมน์ ไม่ว่าภาษาไหน */
.live__next-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}

/* เวลาเป็น "ป้าย" ไม่ใช่ตัวหนังสือลอยชิดขวา — อ่านว่าตั้งใจวาง ไม่ใช่เหลือที่ว่าง */
.live__next-time{
  display:inline-flex;align-items:center;
  padding:.15em .6em;border-radius:var(--r-pill);
  border:1px solid var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;font-weight:700;color:var(--accent);white-space:nowrap;
}
.live__next-count{font-size:.72rem;font-weight:600;opacity:.85;white-space:nowrap}
.live__next-tag{
  font-size:.72rem;padding:.2em .6em;border-radius:var(--r-pill);
  border:1px solid var(--surface-brd);
  background:var(--surface);color:var(--fg);opacity:.9;
}

/* ---------- reduced motion: หยุดกะพริบทั้งหมด ---------- */
@media (prefers-reduced-motion:reduce){
  .live__dot,
  .vjcard__badge,
  .live__empty-art{animation:none}
  .live__dot{box-shadow:none;opacity:1}
  .vjcard__badge{opacity:1}
  .live__empty-art{transform:none;opacity:1}
  .vjcard:hover{transform:none}
  .vjcard__go,
  .vjcard__go-ico,
  .vjcard__copy{transition:none}
  .vjcard__go:hover,
  .vjcard__copy:hover{transform:none}
  .vjcard__go:hover .vjcard__go-ico{transform:none}
}