/* loopers.css — แถบ LOOPERS ในล็อบบี้ (Art Production · 24 ก.ย. 2026)
   สีจากทะเบียน (สำเนา :root อยู่ใน paper.css) · ไม่มีค่าสีดิบในไฟล์นี้แม้แต่ค่าเดียว

   **รอบสาม (เจ้าของสั่ง 24 ก.ย.):**
   - ตัดแถวล่างสุด (LOOPERS 01–25 + ชื่อทั้งสระวิ่ง) ออก
   - ชื่อแทร็กที่กำลังเล่น เป็นสีขาว วิ่งวนแทน (ท่าเดียวกับแถวที่ตัดออก)
   - PLAY/PAUSE เป็นไอคอน ไม่ใช่ตัวหนังสือ (แต่ยังไม่ใช่ปุ่มยาง — ไอคอนลอยเปล่าๆ)
   - จัดให้กึ่งกลางกับปก

   รอบสอง: ไม่มีแผง ไม่มีกรอบ ไม่มีเงา
   รอบสี่: ย้ายจากหัวเว็บมาอยู่แถวท้ายหน้า ถัดจากปุ่ม SEND FEEDBACK

   ⚠ ข้อความทุกบรรทัดพูดถึง "เครื่องนี้" เท่านั้น ห้ามอ่านได้ว่าบอกสิ่งที่กำลังเกิดในห้อง (CONCEPT:387) */

/* อยู่ในแถวท้ายหน้า ถัดจากปุ่ม SEND FEEDBACK (เจ้าของสั่ง 24 ก.ย.)
   ย้ายลงมาจากมุมขวาบน เพราะปกย่อไม่ได้: ตัวปกเป็นตัวหนังสือ ("THE PIT LOOPER" + โดเมน)
   ลองย่อเป็น 32 แล้วอ่านไม่ออกเลย — ของที่เนื้อหาเป็นตัวหนังสือ ย่อแล้วตายก่อนอย่างอื่นเสมอ
   margin-right: auto = เกาะกลุ่มซ้ายไว้กับปุ่ม Feedback ไม่ลอยไปกลางแถว (.home-foot เป็น space-between) */
.loopers { display: grid; grid-template-columns: auto 1fr auto; gap: 0 12px;
  align-items: center;                 /* กึ่งกลางกับปก (เจ้าของสั่ง 24 ก.ย.) */
  margin: 0 auto 6px 0; }
.loopers[hidden] { display: none; }

/* ปกเป็นรูป ไม่ใช่ปุ่ม — เส้นขอบ 1 px บางๆ พอให้ไม่จมไปกับฉากหลัง ไม่ใช่กรอบการ์ด */
.lp-cover { display: block; width: 64px; height: 64px; image-rendering: pixelated; border: 1px solid var(--px-6); }

.lp-main { min-width: 0; }
.lp-main p { margin: 0; }

/* ---- ชื่อแทร็กที่กำลังเล่น · สีขาว · วิ่งวน ---- */
/* เนื้อในซ้ำสองชุดแล้วเลื่อน -50% → วนกลับมาต่อกันพอดี ไม่มีรอยต่อ
   ความเร็วคงที่ ไม่ผูกจังหวะเพลง (กฎการเคลื่อนไหวยกเลิก 24 ก.ย.) · --lp-dur ตั้งจาก JS ตามความยาวจริง */
.lp-marquee { position: relative; width: 260px; overflow: hidden; height: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.lp-track { display: flex; gap: 28px; width: max-content; will-change: transform;
  animation: lp-run var(--lp-dur, 12s) linear infinite; }
.lp-track span { font: 400 12px/18px var(--font-label); letter-spacing: .08em; color: var(--px-12); white-space: nowrap; }
@keyframes lp-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.loopers:hover .lp-track { animation-play-state: paused; }     /* เอาเมาส์วางแล้วหยุดให้อ่านทัน */

/* ---- บรรทัดสถานะ ---- */
.lp-sub { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; white-space: nowrap; }
.lp-state { font: 400 11px var(--font-label); letter-spacing: .08em; color: var(--led-amber); }
.lp-state[data-state="off"] { color: var(--px-8); }
.lp-next { font: 400 11px var(--font-label); letter-spacing: .08em; color: var(--px-9); font-variant-numeric: tabular-nums; }

/* ---- ตัวคุมเพลง = ไอคอนลอย ไม่ใช่ปุ่มยาง (เจ้าของสั่ง 24 ก.ย. ทั้งสองรอบ) ----
   ต้องล้างสไตล์ปุ่มยางของ paper.css ออกทุกช่อง ไม่งั้นแผ่นยางกลับมาเงียบๆ */
.lp-play { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: block; line-height: 0; cursor: pointer; }
.lp-play:not(:disabled):active { transform: none; box-shadow: none; }
.lp-play .ico { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.lp-play:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 3px; }

/* ลดการเคลื่อนไหว = ไม่วิ่ง · โชว์ชื่อเต็มไปเลย ไม่ต้องตัด (ถอดสำเนาที่สองออก ปล่อยความกว้างตามเนื้อ) */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee { width: auto; max-width: 320px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lp-track { animation: none; }
  .lp-track span + span { display: none; }
}

/* จอแคบ */
@media (max-width: 600px) {
  .lp-marquee { width: 200px; }
}

/* ── ย่อระยะของหน้าแรกให้แถบมีที่ (Head 24 ก.ย. · เจ้าของสั่ง "ห้ามเลื่อน") ──
   วัดจริงบนหน้าแรกของจริงที่ 1280×720 ตอนแถบขึ้น: อังกฤษ 730 = ล้น 10 px
   (Art วัด 715 บนม็อกอัป — ม็อกอัปไม่มีปุ่ม SEND FEEDBACK ของคนมีบัญชี ซึ่งดันแถวท้ายหน้าสูงขึ้น)
   ตัดจากระยะห่างล้วนๆ ไม่แตะขนาดตัวอักษร ฮู้ด ปุ่มใหญ่ หรือความกว้างเมนู ซึ่งเจ้าของเคาะเอง
   ผูกกับ body.wide = หน้าแรกกับ admin เท่านั้น และ admin ไม่โหลดไฟล์นี้ */
body.wide { padding-bottom: 20px; }
body.wide .home-foot { margin-top: 16px; }