/* 03. 방 선택 카드 — SSOT ornate frame (637×789 → 280×347) + 슬롯만 · 운영 12방 캐러셀 */

/* ═══ FROZEN — 방카드 외곽 사각 테두리 금지 (2026-06-04) · docs/방카드-사각테두리-동결.md ═══ */
.rooms-track .rsc-card,
.rooms-track .rsc-card__clip,
.rooms-track .rsc-card__media,
.rooms-track .rsc-scene__base,
.rooms-track .rsc-scene__viewport,
.rooms-track .rsc-scene__wrap,
.rooms-track .rsc-road-bed,
.rooms-track .rsc-road-wrap,
.rooms-track .rsc-slot {
  border: none !important;
  outline: none !important;
}

.rooms-track .rsc-card__clip {
  background: transparent !important;
}

.rooms-track .rsc-card__media,
.rooms-track .rsc-scene__viewport {
  background: transparent !important;
}

.rooms-track .rsc-scene__base {
  background: transparent !important;
}

.rooms-track .rsc-road-wrap {
  border: none !important;
  box-shadow: none !important;
}

/* 토너먼트 룸 전체 — 헤더+카드 캐러셀을 한 박스로 (시안 외곽 금테) */
.rooms-panel {
  margin-top: 14px;
  flex-shrink: 0;
  position: relative;
  padding: 12px 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(198, 150, 67, 0.58);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)),
    url(/assets/a-lobby/mobile/lcr_exact_stage_bg.png) center top / cover no-repeat,
    #050303;
  box-shadow:
    inset 0 1px 0 rgba(246, 215, 151, 0.1),
    0 6px 24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.rooms-panel::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  border: 1px solid rgba(198, 150, 67, 0.2);
  pointer-events: none;
  z-index: 0;
}

.rooms-panel > * {
  position: relative;
  z-index: 1;
}

.rooms-panel .rooms-head {
  margin-top: 0;
  height: auto;
  min-height: 28px;
  padding: 0 6px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(198, 150, 67, 0.28);
  justify-content: flex-start;
}

.rooms-panel .rooms-zone {
  margin-top: 6px;
}

.rooms-zone {
  height: 420px;
}

/* 캐러셀 존 — 모바일 #lobby-carousel · 패널 홀 BG + #lcr-spotlight */
.rooms-panel .rooms-zone.rooms-zone--carousel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  min-height: 420px;
}

/* 모바일 #lcr-spotlight 동일 */
.rooms-zone__spotlight {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  height: calc(100% - 44px);
  min-height: 340px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 38%, rgba(255, 200, 80, 0.22) 0%, transparent 70%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.rooms-zone--carousel .rooms-track,
.rooms-zone--carousel .rooms-carousel__dots,
.rooms-zone--carousel .rooms-cta-wrap,
.rooms-zone--carousel .rooms-fab {
  position: relative;
  z-index: 2;
}

/* 모바일 STG-CAROUSEL — 좌우 페이드 없음 */
.rooms-zone--carousel::before,
.rooms-zone--carousel::after {
  display: none !important;
}

.rooms-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  min-height: 20px;
}

.rooms-carousel__dots .rooms-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(198, 150, 67, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}

.rooms-carousel__dots .rooms-dot.is-active {
  width: 9px;
  height: 9px;
  background: linear-gradient(180deg, #f6d797, #c59643);
  border-color: #f6d797;
  box-shadow: 0 0 6px rgba(246, 215, 151, 0.45);
}

/* 캐러셀 하단 CTA — 카드별 버튼으로 대체 (전역 비표시) */
.rooms-cta-wrap {
  display: none !important;
}

.rooms-track {
  display: flex;
  gap: 12px;
  height: 100%;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  /* pan-x는 브라우저 네이티브 가로 스크롤이 zone pointer 드래그와 충돌 → JS 전담 */
  touch-action: none;
  overscroll-behavior-x: contain;
  padding: 8px 56px 12px 56px;
  scroll-padding-inline: 56px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.rooms-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  touch-action: none;
}

.rooms-track.is-animating {
  scroll-snap-type: none;
}

/* 마지막 카드까지 좌우 전 구간 스크롤 */
.rooms-track__spacer {
  flex: 0 0 56px;
  width: max(56px, calc(100% - 292px));
  height: 1px;
  pointer-events: none;
}

.rooms-zone--carousel .rooms-fab {
  position: absolute;
  top: 42%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(246, 215, 151, 0.42);
  background: rgba(6, 4, 3, 0.52);
  color: rgba(246, 215, 151, 0.88);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  box-shadow: none;
}

.rooms-zone--carousel .rooms-fab:hover:not(:disabled) {
  border-color: rgba(246, 215, 151, 0.65);
  background: rgba(12, 8, 6, 0.72);
  color: #f6d797;
}

.rooms-zone--carousel .rooms-fab--prev {
  left: 4px;
}

.rooms-zone--carousel .rooms-fab--next {
  right: 4px;
}

.rooms-zone--carousel .rooms-fab:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* 멀티룸 조인 — 슬롯·참가취소·피커 */
.mj-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mj-cell .mj-slot {
  width: 100%;
}

.mj-slot--add {
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.mj-slot.on {
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.mj-slot--joined::after {
  content: '●';
  color: #6dbe83;
  font-size: 8px;
}

.mj-cancel-btn {
  width: 100%;
  padding: 4px 2px;
  border: 1px solid rgba(200, 120, 120, 0.45);
  border-radius: 6px;
  background: rgba(60, 20, 20, 0.55);
  color: #e8a8a8;
  font-family: inherit;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  line-height: 1.2;
}

.mj-cancel-btn:hover:not(:disabled) {
  border-color: rgba(230, 150, 150, 0.7);
  color: #ffc8c8;
}

.mj-cancel-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mj-slot-rm {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #f6d797;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.mj-slot-rm:hover {
  border-color: rgba(246, 215, 151, 0.7);
  color: #fff4d0;
}

.mj-picker {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mj-picker.is-open {
  display: flex;
}

.mj-picker__panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: min(80vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  background: linear-gradient(165deg, rgba(28, 22, 16, 0.98), rgba(8, 6, 4, 0.99));
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.mj-picker__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #f6d797;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.mj-picker__title {
  margin: 0 0 10px;
  padding-right: 36px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #f6d797;
  font-weight: 600;
}

.mj-picker__list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(min(80vh, 520px) - 56px);
}

.mj-picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(201, 169, 110, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #f5efe0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.mj-picker__item:hover:not(:disabled) {
  border-color: rgba(246, 215, 151, 0.55);
  background: rgba(201, 169, 110, 0.08);
}

.mj-picker__item:disabled {
  opacity: 0.38;
  cursor: default;
}

.mj-picker__code {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #f6d797;
  letter-spacing: 0.06em;
}

.mj-picker__meta {
  font-size: 10px;
  color: rgba(245, 239, 224, 0.55);
  letter-spacing: 0.04em;
}

.rooms-track::-webkit-scrollbar {
  display: none;
}

.rooms-track .trc-card,
.rooms-track .room-frame {
  display: none !important;
}

.rooms-track .rsc-card-unit {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  scroll-snap-align: center;
}

.rooms-track .rsc-card-unit .rsc-card {
  flex: 0 0 auto;
  width: 100%;
  height: 347px;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}

.rooms-track .rsc-card-unit:not(.has-actions) .rsc-card-actions {
  visibility: hidden;
  pointer-events: none;
  min-height: 36px;
}

.rooms-track .rsc-card::before {
  display: none !important;
  content: none !important;
}

/* 자동 슬라이드: 카드 lift 없음 — 마우스 hover·클릭만 */
.rooms-track:not(.is-dragging) .rsc-card:hover {
  transform: translateY(-8px);
  z-index: 8;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.65));
}

.rooms-track .rsc-card.is-pressed {
  transform: translateY(-4px) scale(0.985);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition: transform 0.12s ease, filter 0.12s ease;
}

.rooms-track .rsc-card.is-pick {
  transform: none;
  filter: none;
  box-shadow: none;
}

.rooms-track .rsc-card:focus,
.rooms-track .rsc-card:focus-visible {
  outline: none;
  box-shadow: none;
}

.rooms-track.is-dragging .rsc-card,
.rooms-track.is-dragging .rsc-card:hover,
.rooms-track.is-dragging .rsc-card.is-pressed {
  transform: none;
  filter: none;
  transition: none;
}

.rooms-track .rsc-card__clip {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: visible;
  /* 모바일 .lcr-card 와 동일 — 금테는 배경, 자식(그림장·슬롯)이 위 */
  background:
    url(/assets/a-lobby/mobile/lcr_exact_card_v2_frame.png) center / 100% 100% no-repeat;
}

.rooms-track .rsc-back__img,
.rooms-track .rsc-card__frame-foot,
.rooms-track .rsc-card__fill {
  display: none !important;
}

/* 상단 테이블 씬 — room_table PNG · clip/베이스 투명 · 금테(z5) 아래 */

.rooms-track .rsc-card__media {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 11%;
  height: 34%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

/* 상단 베이스 — 투명 (사각 검정 금지) */
.rooms-track .rsc-scene__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}

/* 아치 창 — 캡처 245×109 (에셋 490×218) · photo_mask */
.rooms-track .rsc-scene__viewport {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: url(/assets/a-lobby/parts-ready/room_select_photo_mask.png?v=83);
  mask-image: url(/assets/a-lobby/parts-ready/room_select_photo_mask.png?v=83);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

/* wrap만 위로 넓힘 → 상단 점 가림 · viewport는 inset 0 → 하단 검정 띠 방지 */
.rooms-track .rsc-scene__wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: -9%;
  height: 112%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.rooms-track .rsc-scene__img,
.rooms-track .rsc-table__img {
  --rsc-scale: 0.85;
  --rsc-pos-x: 6%;
  --rsc-pos-y: -11%;
  --rsc-focus-y: 44%;
  position: absolute;
  z-index: 3;
  display: block !important;
  width: calc(100% * var(--rsc-scale)) !important;
  height: calc(100% * var(--rsc-scale)) !important;
  min-width: calc(100% * var(--rsc-scale)) !important;
  min-height: calc(100% * var(--rsc-scale)) !important;
  left: var(--rsc-pos-x) !important;
  top: var(--rsc-pos-y) !important;
  object-fit: cover !important;
  object-position: center var(--rsc-focus-y) !important;
}

.rooms-track .rsc-room-id {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 5px 16px 4px;
  font-family: Cinzel, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #f6d797;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 3px 12px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(198, 150, 67, 0.75);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 12, 8, 0.82), rgba(0, 0, 0, 0.72));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.rooms-track .rsc-card--tier-grand .rsc-room-id {
  font-size: 23px;
  color: #ffe8a8;
  border-color: rgba(246, 215, 151, 0.9);
}

/* 금테 — clip 배경으로만 (img 오버레이는 그림장 가림) */
.rooms-track .rsc-frame__img {
  display: none !important;
}

/* 제거 — 구 슬롯 hero/emblem (모바일 헤더는 .rsc-card__head) */
.rooms-track .rsc-ribbon,
.rooms-track .rsc-badge,
.rooms-track .rsc-code,
.rooms-track .rsc-slot--hero,
.rooms-track .rsc-room-id,
.rooms-track .rsc-emblem {
  display: none !important;
}

/* 상단 오버레이 — WAITING · #매치 · 방번호(ROOM 라벨 없음) */
.rsc-card__head {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.rsc-lcr-status {
  position: absolute;
  top: 11.5%;
  left: 14.5%;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  font: 900 7px/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(20, 9, 6, 0.7);
  color: #ffe58f;
}

.rsc-lcr-status[data-st='running'] {
  color: #8cf0a6;
}

.rsc-lcr-status[data-st='done'] {
  color: rgba(255, 232, 150, 0.55);
}

.rsc-lcr-matchcode {
  position: absolute;
  top: 19%;
  left: 12%;
  z-index: 1;
  font: 900 7px/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 232, 150, 0.98);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 203, 82, 0.45);
}

.rsc-lcr-matchcode[hidden] {
  display: none !important;
}

/* 방번호만 — 정가운데 · "ROOM" 소제목 없음 (모바일 ::before 제거) */
.rsc-lcr-roomid {
  position: absolute;
  top: 30%;
  left: 7%;
  right: 7%;
  z-index: 1;
  margin: 0;
  text-align: center;
  font: 900 2.65rem/0.92 Cinzel, serif;
  letter-spacing: 0.03em;
  color: #ffe99a;
  text-shadow:
    0 1px 0 #fff2b4,
    0 3px 0 rgba(70, 36, 3, 0.9),
    0 6px 10px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(255, 200, 80, 0.35);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rsc-lcr-roomid[hidden] {
  display: none !important;
}

/* done 셔플 — 아치 영역 불투명 + 큰 문구 + 2분 카운트 (모바일 셔플 오버레이) */
.rsc-shuffle-banner {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 10%;
  height: 37%;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 10px;
  overflow: hidden;
}

.rsc-shuffle-banner[hidden] {
  display: none !important;
}

.rsc-shuffle-banner__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rsc-shuffle-banner__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 14px 12px;
  max-width: 100%;
  box-sizing: border-box;
}

.rsc-shuffle-banner__lbl {
  display: block;
  font: 800 14px/1.25 Arial, sans-serif;
  letter-spacing: 0.08em;
  color: #ffd76a;
  text-shadow:
    0 0 14px rgba(255, 215, 106, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.85);
}

.rsc-shuffle-banner__cd {
  display: block;
  margin-top: 10px;
  font: 700 26px/1 'Barlow Condensed', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #fff8c5;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.rsc-slots {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.rsc-badge {
  position: absolute;
  left: 18px;
  top: 48px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.rsc-badge.live {
  color: #ffffff;
  background: linear-gradient(180deg, #2d7a4a, #1a4a2e);
  border: 1px solid rgba(120, 200, 140, 0.4);
}

.rsc-badge.wait {
  color: #f6d797;
  background: linear-gradient(180deg, #5c4020, #3a2810);
  border: 1px solid rgba(115, 87, 46, 0.55);
}

.rsc-code {
  position: absolute;
  left: 18px;
  top: 62px;
  z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #c4a574;
}

.rsc-ribbon {
  position: absolute;
  z-index: 3;
  padding: 4px 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

.rsc-ribbon.hot {
  left: 4px;
  top: 54px;
  transform: rotate(-42deg);
  background: linear-gradient(180deg, #a52a2a, #6b1515);
}

.rsc-ribbon.new {
  right: 4px;
  top: 54px;
  left: auto;
  transform: rotate(42deg);
  background: linear-gradient(180deg, #2e7d32, #1a5c34);
}

.rsc-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  border: none;
  background: transparent;
  box-shadow: none;
  /* 금테 안쪽 — 라벨·숫자 세로 안 잘림 */
  padding: 6px 4px 7px;
  gap: 3px;
  z-index: 6;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* .rsc-slot .v · .k → lobby-gold-type.css */

.rsc-slot--hero {
  position: absolute;
  left: 26px;
  top: 58px;
  width: 229px;
  height: 98px;
  z-index: 4;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

.rsc-title-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  padding: 4px 6px 5px;
  box-sizing: border-box;
  background: #000;
}

.rsc-emblem {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.rsc-emblem--txt {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a0c00;
  background: radial-gradient(circle at 35% 28%, #fff8d8, #c89a3a 55%, #5c4010);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.rsc-card--tier-standard .rsc-emblem--txt {
  background: radial-gradient(circle at 35% 28%, #c8f5d8, #2d8a52 60%, #1a4a30);
  color: #ffffff;
  font-size: 11px;
}

.rsc-card--tier-premium .rsc-emblem--txt {
  background: radial-gradient(circle at 35% 28%, #f0e0ff, #7a52a8 60%, #3a2860);
  color: #ffffff;
  font-size: 11px;
}

.rsc-card--tier-vip .rsc-emblem--txt {
  background: radial-gradient(circle at 35% 28%, #d8e8ff, #3a5ca8 60%, #1a2a50);
  color: #f6d797;
  font-size: 11px;
}

.rsc-card--tier-grand .rsc-emblem--txt {
  background: radial-gradient(circle at 35% 28%, #fff8d8, #c89a3a 55%, #5c4010);
  color: #1a0c00;
  font-size: 10px;
}

.rsc-title-txt {
  min-width: 0;
  flex: 1;
}

.rsc-lbl {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9c8b72;
  margin-bottom: 1px;
}

.rsc-slot--hero h3 {
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.05;
  color: #f6d797;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}

/* 슬롯 — 모바일 lcr stats3/row2 (340×420 → 280×347 스케일) · 금테 위 z6 */
.rsc-slot--e {
  left: 5.9%;
  top: 47%;
  width: 27%;
  height: 10.2%;
}

.rsc-slot--w {
  left: 36.5%;
  top: 47%;
  width: 27%;
  height: 10.2%;
}

.rsc-slot--r {
  left: 67%;
  top: 47%;
  width: 27%;
  height: 10.2%;
}

.rsc-slot--p {
  left: 5.9%;
  top: 57%;
  width: 42%;
  height: 10.5%;
}

.rsc-slot--pl {
  left: 52%;
  top: 57%;
  width: 42%;
  height: 10.5%;
}

/* 그림장 — clip 금테 창(z4) · 모바일 31/340 · 293/420 · h74/420 */
.rooms-track .rsc-road-bed {
  position: absolute;
  left: 9.1%;
  right: 9.1%;
  top: 69.8%;
  height: 17.6%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  visibility: visible;
}

/* 셔플+우승자 — 금테 그림장 창에 맞게 확대 (3줄 전부) */
.rooms-track .rsc-road-bed.is-shuffle-top3 {
  left: 7.8%;
  right: 7.8%;
  top: 67.4%;
  height: 22.8%;
}

.rsc-road-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 239, 224, 0.94));
  border: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
}

.rooms-track .rsc-road-bed.is-shuffle-top3 .rsc-road-wrap {
  border-radius: 3px;
}

.rsc-road-wrap canvas.rsc-bigroad {
  display: block;
  width: 100%;
  height: 100%;
  background: #fafafa;
}

/* 카드 바깥(하단) — 방별 참여·관전·입장 버튼 */
.rsc-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 50px;
  padding: 2px 0 0;
  pointer-events: auto;
}


/* 가운데 — STARTS IN MM:SS (waiting · history 없을 때 그림장 중앙) */
.rsc-road-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  background: rgba(8, 6, 4, 0.72);
  border-radius: 4px;
  padding: 4px 6px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.rsc-road-center__lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(246, 215, 151, 0.78);
  text-transform: uppercase;
  line-height: 1;
}

.rsc-road-center__v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f6d797;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.rsc-road-shuffle[hidden],
.rsc-road-top3[hidden],
.rsc-road-center[hidden] {
  display: none !important;
}

/* 셔플 — status=done · endsAt~nextStartsAt 2분만 */
.rsc-road-shuffle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  background: rgba(20, 8, 6, 0.78);
  border-radius: 3px;
  border: 1px solid rgba(165, 42, 42, 0.45);
}

.rsc-road-shuffle__lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #f5b56b;
  line-height: 1;
}

.rsc-road-shuffle__v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f6d797;
  line-height: 1;
}

/* top3 — 셔플 중 그림장 · 상단과 동일 불투명 레이어 + 텍스트 */
.rsc-road-wrap.is-shuffle-top3 {
  background: transparent !important;
  box-shadow: none !important;
}

.rsc-road-wrap.is-shuffle-top3 canvas.rsc-bigroad {
  visibility: hidden;
}

.rsc-road-top3 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

.rsc-top3__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 3px;
}

.rsc-top3__list {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 4px;
  padding: 5px 6px;
  box-sizing: border-box;
}

.rsc-top3__row {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  min-height: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 215, 106, 0.22);
}

.rsc-top3__row--1 {
  border-color: rgba(255, 215, 106, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 106, 0.14), rgba(0, 0, 0, 0.42));
}

.rsc-top3__row--2 {
  border-color: rgba(220, 220, 220, 0.4);
}

.rsc-top3__row--3 {
  border-color: rgba(205, 127, 50, 0.45);
}

.rsc-top3__rank {
  flex: 0 0 auto;
  font: 800 11px/1 Arial, sans-serif;
  letter-spacing: 0.04em;
  min-width: 28px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.rsc-top3__row--1 .rsc-top3__rank {
  color: #ffd76a;
}

.rsc-top3__row--2 .rsc-top3__rank {
  color: #e8e8e8;
}

.rsc-top3__row--3 .rsc-top3__rank {
  color: #cd7f32;
}

.rsc-top3__nick {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 13px/1.2 'Barlow Condensed', sans-serif;
  color: #fff8e8;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.rsc-top3__prize {
  flex: 0 0 auto;
  font: 700 11px/1.2 'Barlow Condensed', sans-serif;
  color: #ffc9a8;
  white-space: nowrap;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.rsc-top3__prize--na {
  color: rgba(255, 255, 255, 0.35);
}

.rsc-top3__empty {
  text-align: center;
  font: 700 12px/1.2 'Barlow Condensed', sans-serif;
  color: rgba(255, 248, 200, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.rsc-road-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.15;
  transition: filter 0.18s ease;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.rsc-road-btn[hidden] {
  display: none !important;
}

.rsc-road-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.rsc-road-btn:not(:disabled):hover {
  filter: brightness(1.12);
}

.rsc-road-btn--join {
  color: #1a0c00;
  background: linear-gradient(180deg, #f6d797, #c59643);
  border: 1px solid #f6d797;
  box-shadow: 0 2px 8px rgba(197, 150, 67, 0.35);
}

.rsc-road-btn--leave {
  color: #f6d797;
  background: linear-gradient(180deg, rgba(58, 18, 18, 0.85), rgba(28, 8, 8, 0.85));
  border: 1px solid rgba(165, 42, 42, 0.6);
}

.rsc-road-btn--enter,
.rsc-road-btn--spectate {
  color: #1a0c00;
  background: linear-gradient(180deg, #f6d797, #c59643);
  border: 1px solid #f6d797;
  box-shadow: 0 2px 8px rgba(197, 150, 67, 0.35);
}

/* lobby 전용 토스트 (wallet-toast 와 별개) */
.lobby-toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(8, 6, 4, 0.92);
  color: #f6d797;
  border: 1px solid rgba(198, 150, 67, 0.55);
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lobby-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mj-chip-txt {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f6d797;
}