/* ห้อง Rig — สไตล์ของห้อง (Art Production 30 ก.ย. 2026) · ไฟล์เดียวกันใช้ทั้งต้นแบบ rig-room-b-demo/ และเว็บ (Head ก๊อบไม่แก้)
   แก้ที่ design/production/rig-room-b/rig-room.css แล้วรัน make_room_rig_demo.py — ตัวสร้างก๊อบไปที่ rig-room-b-demo/
   ต้องมีตัวแปรสี/ฟอนต์ของทะเบียน (tokens.css) อยู่แล้วในหน้า · ขนาดห้อง/เฟรมมาจาก rig-layout.json ผ่าน TTRoom.boot (ตั้ง --rw --rh --frames --rev ที่ .rigroom)
   รูปทุกรูปตั้งจาก JS ผ่าน opts.asset() — ไฟล์นี้ไม่มี url() ของรูปเลย เพื่อให้วางโฟลเดอร์รูปที่ไหนก็ได้ */
* { box-sizing: border-box; }
.rigroom { height: 100%; background: var(--px-0); color: var(--px-9); display: grid; place-items: center; align-content: center; gap: 12px;
  font: 400 11px var(--font-label); letter-spacing: .1em; overflow: hidden; }
.room { position: relative; width: calc(var(--rw) * 1px * var(--z, 2)); height: calc(var(--rh) * 1px * var(--z, 2));
  background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
/* ของทุกชิ้นเป็นชั้นแยก วางซ้อนตามลำดับหลังไปหน้า (ตำแหน่ง/ขนาดตั้งจาก JS ตามของที่เลือก) */
.layers img { position: absolute; display: block; image-rendering: pixelated; pointer-events: none; }
.crate { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
/* ภาพสภาพชี้ใหญ่กว่าชิ้นข้างละ 1 พิกเซลตรรกะ (ขอบอำพัน) จึงเหลื่อมออกไป 1×z */
.crate .hot { position: absolute; display: block; image-rendering: pixelated; left: calc(-1px * var(--z, 2)); top: calc(-1px * var(--z, 2));
  width: calc(100% + 2px * var(--z, 2)); height: calc(100% + 2px * var(--z, 2)); visibility: hidden; }
/* สามทางที่ลังเรือง: เมาส์ชี้ · โฟกัสจากคีย์บอร์ด · [data-hot] ที่ปุ่มหมุน Browse ตั้งเอง
   ⚠ พึ่ง :focus อย่างเดียวไม่ได้ — หน้าต่างที่ไม่ได้ถือโฟกัสของระบบ :focus ไม่ติดแม้ activeElement จะเป็นลัง (วัด 29 ก.ย.)
     คนที่มืออยู่บนมิกเซอร์อาจไม่ได้คลิกหน้าต่างเบราว์เซอร์ไว้ สภาพเรืองจึงต้องไม่ขึ้นกับโฟกัสของหน้าต่าง */
.crate:hover .hot, .crate:focus .hot, .crate[data-hot] .hot { visibility: visible; }
.crate:focus { outline: none; }                /* ขอบอำพันในภาพทำหน้าที่กรอบโฟกัสแล้ว */
/* ---- แผ่นบนเทิร์นเทเบิล (เจ้าของสั่ง 29 ก.ย.) ----
   เลือกเพลงในลัง → แผ่นของชุดนั้นวางบนเทิร์น ป้ายกลางแผ่นหมุน 33⅓ รอบต่อนาที (--frames เฟรมต่อรอบ) · แขนเข็มพาดอยู่บนแผ่นตามเครื่องที่เคาะไว้
   ภาพเป็นแถบเฟรมที่ตัดจากห้องที่ลงแสงแล้ว (make_rig_room_demo.py) · ลากแผ่นไปวางเทิร์นอีกข้างได้ · Enter/Space ที่แผ่น = ย้ายข้าง */
.platter { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; cursor: grab; touch-action: none;
  left: calc(var(--px) * var(--z, 2)); top: calc(var(--py) * var(--z, 2));
  width: calc(var(--pw) * var(--z, 2)); height: calc(var(--ph) * var(--z, 2));
  background-repeat: no-repeat; background-size: calc(var(--pw) * var(--frames) * var(--z, 2)) 100%; image-rendering: pixelated;
  animation: spin var(--rev) steps(var(--frames)) infinite; }
.platter[hidden] { display: none; }
.platter[data-hold] { animation: none; background-size: 100% 100%; }     /* หยุดเล่น: แผ่นนิ่ง แขนเข็มพัก (ภาพ hold-*.png ใบเดียว) */
.platter[data-lift] { visibility: hidden; }        /* กำลังลากอยู่ — แผ่นอยู่ที่ตัวชี้ จานกลับเป็นสลิปแมต */
.platter:focus-visible { outline: calc(1px * var(--z, 2)) solid var(--led-amber); outline-offset: 0; }
@keyframes spin { to { background-position-x: calc(var(--pw) * -1 * var(--frames) * var(--z, 2)); } }
.carry { position: fixed; z-index: 5; pointer-events: none; image-rendering: pixelated; transform: translate(-50%, -50%); filter: drop-shadow(calc(2px * var(--z, 2)) calc(3px * var(--z, 2)) 0 rgb(0 0 0 / .5)); }
@media (prefers-reduced-motion: reduce) { .platter { animation: none; } }
/* ---- ป๊อปอัปหน้าลัง ----
   **เจ้าของเคาะ 29 ก.ย.: "Motion จาก 0 ที่ 200ms"** (12F) · --ease-pop เลยเป้า ~120% แล้วเด้งกลับ
   ⚠ เริ่มจาก 0 = ทับ SCREENS.md:191 (เนื้อหาต้องอ่านได้ตั้งแต่เฟรมแรก) **เฉพาะป๊อปอัปนี้** — .mo-pop ของเว็บยังเริ่มที่ 80% จนกว่าเจ้าของจะสั่งทั้งเว็บ
   ม่านหลังป๊อปอัป = เม็ดทึบ 1 ใน 4 พิกเซล (หรี่ห้อง 25%) ไม่ใช่ความโปร่ง · เดิมเป็นหมากรุก 50% ซ้อนกับพื้นป๊อปอัปแล้วห้องมืดจนแทบไม่เห็น */
:root { --pop-dur: 200ms; --pop-from: 0; --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.64, 0, .78, 0); }
/* เจ้าของสั่ง 30 ก.ย.: "นอกกรอบลังเคลื่อนไหวไม่ต้องเบลอ" — ถอดม่านเม็ดที่หรี่ห้องนอกป๊อปอัปออก · ห้องนอกกรอบเห็นชัดเท่าปกติ (ในกรอบยังมีพื้นดำ 60%) */
.veil { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; }
.veil[hidden] { display: none; }
/* เล็กกว่าจอพอให้เห็นห้องรอบๆ — มันคือหน้าต่างย่อยที่เด้งขึ้นทับห้อง ไม่ใช่การเปลี่ยนหน้า */
/* พื้นป๊อปอัปจางให้เห็นห้องข้างหลัง (เจ้าของสั่ง 29 ก.ย.) — ทางเดียวกับแผงรายชื่อเพลงที่เจ้าของให้โปร่ง 30% · ตัวลัง ปก ตัวหนังสือ ทึบเท่าเดิม */
/* ป๊อปอัปใหญ่เกือบเต็มจอ (เจ้าของทัก 29 ก.ย.: หน้าลัง "เล็กไป") — เดิม 86vw × 84vh สูงสุด 900 · ยังเหลือขอบให้เห็นห้องรอบๆ และคลิกนอกเพื่อปิดได้ */
/* เจ้าของตีกรอบ 30 ก.ย.: "pop up หน้าลังเล็กลงให้สามารถ click ที่ห้องได้" — กว้าง 73% สูง 82% ของจอ
   สูงไม่ต่ำกว่า 664 (ลัง ×3 ต้องการ 660) แต่ไม่เกิน 94vh · ม่านไม่รับคลิก ของในห้องรอบๆ กดได้ขณะป๊อปอัปเปิด */
.veil { pointer-events: none; }
.pop { pointer-events: auto; }
.pop { width: 73vw; height: min(94vh, max(82vh, 664px)); background: color-mix(in srgb, var(--px-0) 60%, transparent); border: 2px solid var(--px-6);
  box-shadow: 8px 8px 0 var(--px-0); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.pop iframe { display: block; width: 100%; height: 100%; border: 0; }
@keyframes pop-in { from { transform: scale(var(--pop-from)); } to { transform: none; } }
@keyframes pop-out { to { transform: scale(var(--pop-from)); visibility: hidden; } }
.veil[data-state="in"] .pop { animation: pop-in var(--pop-dur) var(--ease-pop) both; }
.veil[data-state="out"] .pop { animation: pop-out 100ms var(--ease-in) both; }
@media (prefers-reduced-motion: reduce) { .veil .pop { animation: none !important; } }
.hint { margin: 0; }
/* ---- ป๊อปอัปดูของ (เจ้าของสั่ง 30 ก.ย.) — ท่าเดียวกับป๊อปอัปลัง: โตออกจากชิ้นที่กด 200 ms · ในกรอบดำ 60% · นอกกรอบไม่หรี่ · ของในห้องยังกดได้ ---- */
.wallhits button { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.wallhits button:focus-visible { outline: calc(1px * var(--z, 2)) solid var(--led-amber); outline-offset: 0; }
.rigroom[data-edit] .wallhits { display: none; }
.iveil { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; }
.iveil[hidden] { display: none; }
.ipop { pointer-events: auto; max-width: 94vw; max-height: 92vh; overflow: auto; display: grid; gap: 10px; padding: 12px 16px 14px;
  background: color-mix(in srgb, var(--px-0) 60%, transparent); border: 2px solid var(--px-6); box-shadow: 8px 8px 0 var(--px-0);
  transform-origin: var(--ox, 50%) var(--oy, 50%); color: var(--px-11); }
.iveil[data-state="in"] .ipop { animation: pop-in var(--pop-dur) var(--ease-pop) both; }
.iveil[data-state="out"] .ipop { animation: pop-out 100ms var(--ease-in) both; }
@media (prefers-reduced-motion: reduce) { .iveil .ipop { animation: none !important; } }
.ipop header { display: flex; align-items: center; gap: 12px; }
.ipop h2 { margin: 0 auto 0 0; font: 400 11px var(--font-label); letter-spacing: .14em; color: var(--px-12); }
.ipop header button { margin: 0; padding: 4px 8px; border-radius: 0; cursor: pointer; font: 400 10px var(--font-label); letter-spacing: .1em; color: var(--px-11); background: var(--px-2); border: 2px solid var(--px-3); }
.ibody { display: flex; gap: 16px; align-items: flex-start; }
.iarts { display: flex; gap: 12px; align-items: flex-end; }
.iarts button { margin: 0; padding: 6px; border: 2px solid transparent; border-radius: 0; background: none; cursor: pointer; line-height: 0; }
.iarts button[aria-pressed="true"] { border-color: var(--led-amber); }
.iarts button:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 2px; }
.iarts img { display: block; }
.iarts img[data-px] { image-rendering: pixelated; }
/* กล่อง info — แบบเดียวกับแผงรายชื่อเพลงของหน้าลัง: กรอบเทา พื้นหมึก หัวอำพัน */
.iinfo { width: 260px; border: 2px solid var(--px-6); background: var(--px-1); padding: 10px 12px 12px; animation: tool-in 200ms cubic-bezier(.34, 1.56, .64, 1) both; }
.iinfo[hidden] { display: none; }
.iinfo h3 { margin: 0 0 8px; font: 400 11px var(--font-label); letter-spacing: .14em; color: var(--led-amber); }
.iinfo p { margin: 0; font: 400 15px/1.5 var(--font-body, sans-serif); letter-spacing: 0; color: var(--px-11); }
.iinfo p[data-empty] { font: 400 10px var(--font-label); letter-spacing: .1em; color: var(--px-8); }
@media (prefers-reduced-motion: reduce) { .iinfo { animation: none; } }
.ihint { margin: 0; font: 400 10px var(--font-label); letter-spacing: .1em; color: var(--px-8); }
.ihint:empty { display: none; }
/* ---- โหมดแต่งห้อง (เจ้าของสั่ง 30 ก.ย. สองรอบ) ----
   รอบสอง: ไอคอน CUSTOMIZE (คอมพิวเตอร์) มุมขวาบนของห้อง → กดแล้วเส้นขอบขึ้นทุกชิ้นที่แต่งได้ + ไอคอน STORAGE (ตู้) โผล่ขึ้นมา
   กดไอคอน STORAGE หรือกดชิ้นในห้อง → แถบคลังเลื่อนเข้าแบบ CHAT ROOM / MY BATTLE ทับห้อง (ห้องไม่หด)
   แถบออกด้านไหนขึ้นกับชิ้น: ลัง · เทิร์นขวา · ลำโพงขวา → ออกทางซ้าย · เทิร์นซ้าย · ลำโพงซ้าย · มิกเซอร์ → ออกทางขวา
   ของบนกำแพง → แถบยาวแนวนอนโผล่จากด้านล่าง ของเรียงแถวเดียว */
/* มุมมืดตามไฟที่ใส่ (เจ้าของสั่ง 30 ก.ย.) — แผ่นตัวคูณแสงทับทั้งห้อง · ไม่รับคลิก · ใต้เส้นขอบโหมดแต่ง (z 5) และไอคอน (z 6) */
.vig { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: multiply; background: 0 0 / 100% 100% no-repeat; }
.tool { position: absolute; z-index: 6; right: calc(4px * var(--z, 2)); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; line-height: 0; }
.tool img { display: block; width: 80px; height: 80px; image-rendering: pixelated; }
/* ข้อความกำกับไอคอน (เจ้าของสั่ง 30 ก.ย. "เพิ่มข้อความกำกับ Icon Customize mode / Storage") */
.tool span { display: block; margin-top: 4px; font: 400 10px/1 var(--font-label); letter-spacing: .1em; text-align: center; color: var(--px-12); text-shadow: 1px 1px 0 var(--px-0), -1px 1px 0 var(--px-0), 1px -1px 0 var(--px-0), -1px -1px 0 var(--px-0); }
.tool[aria-pressed="true"] span { color: var(--led-amber); }
.tool[hidden] { display: none; }
.tool:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 2px; }
.tool[aria-pressed="true"] { outline: 2px solid var(--led-amber); outline-offset: 2px; }
#editbtn { top: calc(4px * var(--z, 2)); }
#stockbtn { top: calc(4px * var(--z, 2) + 108px); animation: tool-in 200ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes tool-in { from { transform: scale(0); } to { transform: none; } }
.mixfit { position: absolute; display: block; image-rendering: pixelated; pointer-events: none; }
.mixfit[hidden] { display: none; }
.edit { position: absolute; inset: 0; z-index: 5; }
.edit[hidden] { display: none; }
.edit img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.edit img[data-sel] { filter: brightness(0) invert(1); }
/* ของบนกำแพง (วางได้ทุกช่องกริด): ชิ้นที่วางแล้วเป็นช่องของแผ่นรวม wl-<ชิ้น>.png · เส้นขอบเป็นภาพขนาดชิ้น ไม่ใช่ขนาดห้อง */
.walls i { position: absolute; display: block; image-rendering: pixelated; background-repeat: no-repeat; pointer-events: none; }
.edit img.w { inset: auto; }
/* กริดกำแพงอยู่ใต้ของที่วางแล้ว (เส้นไม่ขีดทับชิ้น) — ขึ้นเฉพาะโหมดแต่งห้อง · จางตอนไม่ได้เลือก ชัดตอนเลือกหมวดกำแพง */
.walls .grid { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; opacity: .3; }
.walls .grid[data-sel] { opacity: 1; }
.edit button[data-w], .edit button[data-d] { cursor: grab; touch-action: none; }
.edit i { position: absolute; display: block; image-rendering: pixelated; background-repeat: no-repeat; pointer-events: none; }
.edit button { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.edit button:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 0; }
/* แถบคลัง — ตำแหน่งตั้งด้วย data-side · เลื่อนเข้า 200 ms (ท่าเดียวกับแผงแชท) */
.stock { position: fixed; z-index: 8; border: 2px solid var(--px-6); background: var(--px-1); padding: 10px 12px 12px; color: var(--px-11);
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 200ms; visibility: hidden; }
.stock[data-side="right"] { top: 0; bottom: 0; right: 0; width: 320px; transform: translateX(100%); }
.stock[data-side="left"] { top: 0; bottom: 0; left: 0; width: 320px; transform: translateX(-100%); }
.stock[data-side="bottom"] { left: 0; right: 0; bottom: 0; transform: translateY(100%); }
.stock[data-open] { transform: none; visibility: visible; transition-delay: 0s; }
.stock header { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
/* หมวดเรียงแถวเดียวร่วมกับหัวแถบ (เจ้าของสั่ง 30 ก.ย. "ให้เมนูชื่อหมวดเรียงเป็นแถวเดียว ไม่บัง Rig") — หัว = ข้อความสถานะเล็กชิดขวา ตัดท้ายเมื่อไม่พอ */
.stock h2 { flex: 1 1 0; min-width: 0; margin: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 9px var(--font-label); letter-spacing: .12em; color: var(--px-9); }
.stock header .tabs { flex: 0 1 auto; min-width: 0; margin: 0; }
.stock .tabs, .stock .items { display: flex; flex-wrap: wrap; gap: 6px; }
.stock .tabs { margin-bottom: 10px; }
.stock[data-side="bottom"] .items { flex-wrap: nowrap; overflow-x: auto; }       /* ของบนกำแพง: เรียงแถวเดียว */
.stock[data-side="bottom"] .tabs { flex-wrap: nowrap; overflow-x: auto; }
.stock button { margin: 0; border-radius: 0; cursor: pointer; font: 400 10px var(--font-label); letter-spacing: .1em; color: var(--px-11); background: var(--px-2); border: 2px solid var(--px-3); }
.stock .tabs button, .stock .shut { padding: 4px 8px; white-space: nowrap; }
.stock .tabs button[aria-selected="true"], .stock .spots button[aria-pressed="true"] { border-color: var(--px-12); color: var(--px-12); }
.stock .spots[hidden] { display: none; }
.stock .items button { touch-action: none; }
.crate[hidden] { display: none; }
.stock .items button { flex: none; display: grid; justify-items: center; align-content: end; gap: 4px; width: 104px; height: 92px; padding: 6px 4px; }
.stock .items img { display: block; max-width: 84px; max-height: 52px; image-rendering: pixelated; }
.stock .items img[src*="th-fader"] { width: auto; height: 36px; }      /* ฝาสามตัว (ชิ้นเล็ก) ขยายให้เห็น */
.stock .items button[aria-pressed="true"] { border-color: var(--led-amber); color: var(--led-amber); }
.stock .items small { font-size: 9px; color: var(--px-8); }
.stock .none { margin: 0; font: 400 10px var(--font-label); letter-spacing: .1em; color: var(--px-8); }
.stock button:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 2px; }
/* ซูมเข้าหาชิ้นที่เลือก (เจ้าของถาม 30 ก.ย.) — ขยายทั้งห้อง ×2 (จำนวนเต็ม พิกเซลยังคม) แล้วเลื่อนให้ชิ้นอยู่กลางพื้นที่ที่แถบคลังไม่บัง */
.rigroom:has(.stock[data-open]) .tool { visibility: hidden; }      /* ไอคอนอยู่ในห้อง ซูมแล้วจะโตตาม — ซ่อนตอนแถบเปิด (ปิดแถบด้วย CLOSE / Esc) */
.room { transform-origin: 0 0; transition: transform 300ms cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .stock, .room { transition: none; } #stockbtn { animation: none; } }
/* หน้าลังเปิดอยู่ = ซ่อนบรรทัดบอกของห้อง ไม่งั้นมันทะลุพื้นโปร่งของป๊อปอัปไปทับบรรทัดของหน้าลัง */
.rigroom:has(.veil:not([hidden])) > .hint { visibility: hidden; }
.hint b { color: var(--px-12); font-weight: 400; }