/* ============================================================
   ห้องของฉัน
   ------------------------------------------------------------
   ทุกสีดึงจาก token ของธีมที่ผู้ใช้เลือกอยู่ ไม่มีสีตายตัวสักค่า —
   ยกเว้นในตัวฉากห้อง (SVG) ซึ่งเป็นของที่ผู้ใช้เลือกสีเอง
   ห้องจึงไม่เปลี่ยนหน้าตาตามธีมแอป และไม่ควรเปลี่ยนด้วย
   เพราะห้องคือของที่เขาตั้งใจแต่ง ส่วนธีมคือของที่เขาแค่ชอบสี
   ============================================================ */

/* ---------- ฉากห้อง ---------- */
.rm-stage {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-top: 14px;
  background: var(--card2);
}
.rm-scene { display: block; width: 100%; height: auto; }

/* แถบใต้ฉาก — ป้ายไฟกับป้ายหน้าห้องอยู่ด้วยกัน
   สองอันนี้คือของที่ "เป็นคนคนนั้นจริง ๆ" ในจอนี้ ที่เหลือคือของที่เลือกมาจากรายการ */
.rm-plate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

/* ป้ายไฟ — ชิ้นเดียวในจอที่ไม่ได้มาจากการกดเลือก มันมาจากว่าตอนนี้นั่งทำงานอยู่จริงไหม */
.rm-lamp {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
}
.rm-lamp.on { color: var(--good); background: var(--good-soft); border-color: transparent; }
.rm-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #8A94A8;
}
.rm-lamp.on .rm-dot {
  background: #5FCB94;
  box-shadow: 0 0 0 0 rgba(95, 203, 148, .6);
  animation: rm-pulse 2s infinite;
}
@keyframes rm-pulse {
  70%  { box-shadow: 0 0 0 8px rgba(95, 203, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 203, 148, 0); }
}
@media (prefers-reduced-motion: reduce) { .rm-lamp.on .rm-dot { animation: none; } }

/* ---------- ชื่อห้อง + ป้ายหน้าห้อง ---------- */
/* นี่คือช่องอิสระสองช่องของจอนี้ — ที่เหลือเป็นการเลือกจากของที่มี
   สองช่องนี้จึงเป็นที่เดียวที่ห้องสองห้องจะไม่มีทางเหมือนกันเลย */
.rm-id {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px 15px;
}
.rm-fld { display: flex; flex-direction: column; gap: 5px; }
.rm-fld > span {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted);
}
.rm-fld input {
  width: 100%;
  background: var(--card2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14.5px; font-weight: 500;
  transition: border-color .15s ease;
}
.rm-fld input::placeholder { color: var(--faint); font-weight: 400; }
.rm-fld input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--card);
}
.rm-say {
  flex: 1; min-width: 0;
  color: var(--ink);
  font-size: 13px; line-height: 1.5;
}

/* ---------- แถบชื่อ + ยอดโทเคน ---------- */
.rm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px;
}
.rm-ttl {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-bal {
  display: flex; align-items: center; gap: 5px; flex: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px;
  padding: 5px 11px 5px 9px;
}
.rm-bal svg { width: 13px; height: 13px; }

/* ---------- แถบช่อง ---------- */
/* เก้าช่องยาวเกินความกว้างจอแน่นอน — ต้องมีอะไรบอกว่ายังมีต่อทางขวา
   ไม่งั้นคนเห็นแค่ห้าช่องแรกแล้วคิดว่าแต่งได้เท่านี้ · ใช้ mask ไล่จางที่ขอบขวา
   แทนลูกศร เพราะลูกศรกินที่และต้องมาคอยซ่อนตอนเลื่อนสุดแล้ว */
.rm-tabs {
  display: flex; gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.rm-tabs::-webkit-scrollbar { display: none; }
.rm-tab {
  flex: none;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rm-tab:active { transform: scale(.96); }
.rm-tab.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--ink);
}

/* ---------- ตารางของ ---------- */
.rm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.rm-opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 7px 9px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rm-opt:active { transform: scale(.97); }
.rm-opt.on { border-color: var(--blue); background: var(--blue-soft); }
/* ของที่ยังไม่ได้ซื้อบอกด้วยกรอบประกับป้ายราคา — ไม่หรี่รูปให้จาง
   เพราะสิ่งที่กำลังตัดสินใจซื้อคือ "สีนี้" กับ "รูปนี้" การหรี่มันลง
   ทำให้ชมพูอ่อนดูเป็นสีเทา แล้วคนจ่ายโทเคนไปโดยไม่รู้ว่าจะได้อะไร */
.rm-opt.locked { border-style: dashed; }

/* แผ่นสีสำหรับผนัง/พื้น/แสง */
.rm-sw {
  width: 100%; height: 38px; border-radius: 9px;
  border: 1px solid var(--line);
}
/* รูปย่อของของ — ครอปมาจากฉากจริง ไม่ได้วาดไอคอนชุดที่สอง */
.rm-mini {
  width: 100%; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--card2);
  overflow: hidden;
}
.rm-mini svg { width: 100%; height: 100%; }
.rm-none {
  font-style: normal; color: var(--faint);
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 15px;
}
.rm-nm {
  font-size: 11.5px; font-weight: 600; line-height: 1.3; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.rm-on {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--blue);
}
.rm-cost {
  display: flex; align-items: center; gap: 3px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  color: var(--warn);
}
.rm-cost::before { content: '◈'; font-size: 9px; }

.rm-note {
  margin: 16px 0 0;
  font-size: 12px; line-height: 1.65; color: var(--faint);
}