/* Floating labels over locked rooms (positioned in % by rooms.js). */
.room-layer { position: fixed; inset: 0; pointer-events: none; }
.room-lock {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(40, 30, 40, 0.72);
  color: #fff7ee;
  font: inherit;
  font-size: 16px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.room-lock .ico { color: #fff7ee; width: 20px; height: 20px; }
.room-lock strong { font-weight: 400; }
.room-cost { display: inline-flex; align-items: center; gap: 2px; color: #ffe39a; }
.room-cost .ico { width: 16px; height: 16px; }
.room-lock.next { opacity: 1; background: rgba(143, 123, 255, 0.92); }
.room-lock.next:hover { transform: translate(-50%, -50%) scale(1.06); }

@media (pointer: coarse) {
  .room-lock { font-size: 15px; padding: 7px 12px; }
}