/* =====================================================================
   P2P 아케이드 — 메인 스타일 (화이트 바탕 + 파스텔 연두 포인트 테마)
   ===================================================================== */

/* ── 리셋 & 기본 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 배경 팔레트 ── */
  --bg:           #f6f8f7;    /* 전체 기본 배경 */
  --bg-card:      #ffffff;    /* 카드/패널 배경 (순백색) */
  --bg-subtle:    #edf2ef;    /* 서브 영역 배경 */
  --bg-hover:     #f2f7f4;    /* 리스트/버튼 호버 */
  --bg-active:    #e4f3ea;    /* 활성 아이템 */

  /* ── 테두리 ── */
  --border:       #e2e9e4;
  --border-sub:   #edf2ee;
  --border-hi:    #b5e6c3;    /* 연두 포인트 테두리 */

  /* ── 파스텔 연두 포인트 ── */
  --green:        #48bb78;    /* 메인 파스텔 연두 */
  --green-hover:  #3ea86a;    /* 버튼 호버 */
  --green-deep:   #276749;    /* 짙은 연두 텍스트 */
  --green-tint:   #eaf8ee;    /* 연두 배경 틴트 */
  --green-tint-hi:#d7f3df;
  --green-border: #9ae6b4;

  /* ── 보조 포인트 컬러 ── */
  --yellow:       #d69e2e;    /* 방장/골드 */
  --yellow-tint:  #fefcbf;
  --yellow-border:#faf089;

  --coral:        #e53e3e;    /* 패배/경고/상대 */
  --coral-tint:   #fff5f5;
  --coral-border: #feb2b2;

  --sky:          #3182ce;    /* 정보/나 */
  --sky-tint:     #ebf8ff;
  --sky-border:   #bee3f8;

  --purple:       #805ad5;
  --purple-tint:  #faf5ff;
  --purple-border:#e9d8fd;

  /* ── 텍스트 ── */
  --t1:           #1a202c;    /* 헤드라인 / 주요 텍스트 */
  --t2:           #4a5568;    /* 본문 텍스트 */
  --t3:           #718096;    /* 보조 / 설명 텍스트 */
  --t4:           #a0aec0;    /* 연한 텍스트 / 플레이스홀더 */

  /* ── 둥근 카드형 디자인 규격 ── */
  --radius-xl:    24px;
  --radius-lg:    18px;
  --radius:       14px;
  --radius-sm:    10px;
  --radius-xs:    6px;

  /* ── 부드러운 그림자 ── */
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.03);
  --shadow:       0 4px 20px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.02);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
  --shadow-green: 0 4px 14px rgba(72,187,120,0.25);

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}

body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
}

/* ── 공통 카드 컴포넌트 ── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* ── 화면 전환 ── */
.screen { display: none !important; height: 100vh; max-height: 100vh; overflow: hidden; }
.screen.active { display: flex !important; }

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.active { animation: screenFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* =====================================================================
   1. HOME SCREEN
   ===================================================================== */
#screen-home {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  flex-direction: row;
  align-items: stretch;
  background: var(--bg);
}

/* ── 사이드바 ── */
.home-sidebar {
  width: 320px;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.sidebar-header {
  padding: 18px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-sub);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.logo-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(72, 187, 120, 0.25);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.sidebar-logo:hover .logo-icon-wrap {
  transform: scale(1.05);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.logo-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--t1);
  letter-spacing: -0.3px;
  font-family: var(--font);
}
.logo-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--t3);
}

.mobile-logo-wrap {
  display: none;
}

/* ── 닉네임 프로필 바 ── */
.home-user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 10px 12px 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(72,187,120,0.3);
}
.user-info { flex: 1; min-width: 0; }
.user-label {
  font-size: 0.74rem;
  color: var(--t3);
  font-weight: 600;
  display: block;
}
.user-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 📜 사이드바 게임 목록 컨테이너 (고정 라벨 + 독립 스크롤 목록) ── */
.sidebar-games {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* 🌟 고정된 게임 목록 라벨 (스크롤되지 않고 상단에 고정) */
.sidebar-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--t3);
  padding: 14px 20px 8px 20px;
  margin: 0;
  user-select: none;
}

/* 🌟 스크롤 가능한 게임 목록 리스트 (::-webkit-scrollbar 적용) */
.sidebar-games ul {
  flex: 1;
  min-height: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 14px 12px;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.sidebar-games ul::-webkit-scrollbar {
  width: 6px;
}
.sidebar-games ul::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-games ul::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.sidebar-games ul::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

.sidebar-game-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.18s ease;
}
.sidebar-game-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-sub);
}
.sidebar-game-item.active {
  background: var(--green-tint);
  border-color: var(--green-border);
}

.sg-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--t2);
  flex-shrink: 0;
  transition: all 0.18s;
}
.sidebar-game-item.active .sg-icon {
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(72,187,120,0.3);
}

.sg-info { flex: 1; min-width: 0; }
.sg-info strong {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--t1);
  display: block;
}
.sg-info span {
  font-size: 0.82rem;
  color: var(--t3);
  display: block;
  margin-top: 2px;
}
.sidebar-game-item.active .sg-info strong {
  color: var(--green-deep);
}

.sg-tag, .rgb-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-2p {
  background: var(--purple-tint);
  border: 1px solid var(--purple-border);
  color: var(--purple);
}
.tag-multi {
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  color: var(--green-deep);
}

/* ── 💬 사이드바 게임 설명 말풍선 팝업 ── */
.sidebar-game-bubble {
  position: fixed;
  width: 290px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  z-index: 10000;
  animation: bubblePopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
@keyframes bubblePopIn {
  0% { opacity: 0; transform: scale(0.92) translateX(-8px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}
.sgb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px;
}
.sgb-close:hover { color: var(--coral); }
.sgb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sgb-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sgb-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sgb-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
}
.sgb-desc {
  font-size: 0.85rem;
  color: var(--t2);
  line-height: 1.45;
  margin: 0;
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-sub);
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-copyright {
  text-align: center;
  font-size: 0.74rem;
  color: var(--t3);
  letter-spacing: -0.2px;
  font-weight: 500;
  user-select: none;
}

/* ── 메인 로비 영역 (FHD 100% 최적화 & 전체 스크롤 차단) ── */
.home-main {
  flex: 1;
  padding: clamp(20px, 2.8vh, 44px) clamp(24px, 3vw, 56px);
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-lobby-container {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 24vw, 380px);
  gap: clamp(16px, 1.8vw, 28px);
  width: 100%;
  max-width: 1540px;
  height: clamp(540px, 84vh, 840px);
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 960px) {
  html, body {
    height: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
  }
  .screen {
    display: none !important;
    height: 100% !important;
    min-height: 100% !important;
  }
  .screen.active {
    display: flex !important;
  }
  #screen-home.active {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .home-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
  }

  /* 🌟 모바일에서는 거대한 상단 제목 박스 숨김 🌟 */
  .sidebar-header {
    display: none !important;
  }

  /* 🌟 상단 플레이어 + 제목 카드 (방/게임 헤더와 위치/여백 100% 일치) 🌟 */
  .mobile-logo-wrap {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
    padding-right: 10px;
    border-right: 1.5px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #48bb78, #276749);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(72, 187, 120, 0.3);
    flex-shrink: 0;
  }
  .mobile-logo-title {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--green-deep);
    letter-spacing: -0.3px;
    white-space: nowrap;
    font-family: var(--font);
  }

  .home-user-bar {
    position: sticky !important;
    top: 6px !important;
    z-index: 120 !important;
    margin: 6px 12px 4px 12px !important;
    padding: 6px 12px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }
  .home-user-bar .user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.88rem !important;
  }
  .home-user-bar .user-label {
    display: none !important;
  }
  .home-user-bar .user-name {
    font-size: 0.92rem !important;
  }
  #btn-change-nickname {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
    color: var(--t2) !important;
  }
  #btn-open-settings {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    color: var(--t2) !important;
  }

  .sidebar-games {
    display: none !important;
  }
  .sidebar-footer {
    display: none !important;
  }

  /* 🌟 메인 컨테이너 (상단바와 동일하게 좌우 여백 12px로 꽉 찬 너비) 🌟 */
  .home-main {
    flex: 1 !important;
    height: calc(100vh - 98px) !important;
    max-height: calc(100vh - 98px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 2px 12px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .home-lobby-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
  }

  /* 🌟 방 목록 카드 (가로 꽉 차는 레이아웃 + 높이 대폭 확장) 🌟 */
  .lobby-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(220px, 42vh, 320px) !important;
    max-height: clamp(220px, 42vh, 320px) !important;
    min-height: 200px !important;
    padding: 8px 12px !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .lobby-card .lobby-header {
    padding: 0 0 2px 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  #btn-refresh-lobby {
    display: none !important; /* 모바일에서 새로고침 버튼 숨김 */
  }
  .lobby-title-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .lobby-card .lobby-title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #lobby-filter-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .lobby-tab-btn {
    padding: 3px 6px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    gap: 3px !important;
  }
  .lobby-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 4px 2px 2px !important;
    scrollbar-width: thin !important;
  }
  .lobby-room-card {
    padding: 7px 10px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .lobby-room-card .lrc-code-badge {
    font-size: 0.78rem !important;
    padding: 2px 6px !important;
  }
  .lobby-room-card .lrc-status-badge {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
  }
  .lobby-room-card .lrc-count-badge {
    font-size: 0.75rem !important;
  }
  .lobby-room-card .lrc-host-name {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
  }
  .lobby-room-card .lrc-join-btn {
    height: 26px !important;
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }
  .lobby-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 8px !important;
    gap: 4px !important;
  }
  .lobby-empty i {
    font-size: 1.4rem !important;
  }
  .lobby-empty p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  /* 🌟 방 만들기 / 참가 카드 (콤팩트 축소 + 큼직한 버튼/글씨) 🌟 */
  .connect-card {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: 235px !important;
    padding: 10px 12px !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .connect-tabs {
    margin-bottom: 2px !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
  }
  .ctab {
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }
  .ctab-panel {
    gap: 6px !important;
    display: none !important;
    flex-direction: column !important;
  }
  .ctab-panel.active {
    display: flex !important;
  }
  .panel-desc-box {
    display: block !important;
    padding: 6px 10px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-hover) !important;
  }
  .panel-desc-box h4 {
    display: none !important;
  }
  .panel-desc-box p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--t2) !important;
  }
  .code-reveal {
    padding: 8px 10px !important;
    gap: 4px !important;
    margin: 2px 0 !important;
  }
  #host-room-code {
    font-size: 1.8rem !important;
    letter-spacing: 6px !important;
  }
  .join-form {
    gap: 8px !important;
  }
  .code-input-field {
    padding: 8px 12px !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    letter-spacing: 10px !important;
    height: 48px !important;
    border-radius: var(--radius) !important;
    box-sizing: border-box !important;
  }
  .connect-card .btn-lg {
    padding: 10px 18px !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    height: 48px !important;
    border-radius: var(--radius) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .room-body {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
}

/* ── 1. 실시간 공개 방 목록 카드 (좌측 메인) ── */
.lobby-card {
  padding: clamp(20px, 2.4vh, 30px);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

/* ── 2. 방 만들기 & 참가 패널 카드 (우측 사이드 - 콤팩트 오밀조밀 UI) ── */
.connect-card {
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: start;
  min-width: 0;
  box-sizing: border-box;
}

.connect-tabs {
  display: flex;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 4px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.ctab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--t2);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ctab.active {
  background: var(--bg-card);
  color: var(--green-deep);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.ctab i { font-size: 0.9rem; }

.ctab-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.ctab-panel.active { display: flex; }
.tag i { color: var(--green); font-size: 0.75rem; }
.tag.tag-highlight {
  background: var(--green-tint);
  border-color: var(--green-border);
  color: var(--green-deep);
}
.tag.tag-highlight i { color: var(--green-deep); }

/* ── 연결 패널 ── */
.connect-panel {
  width: 100%;
  display: flex;
  justify-content: center;
}

.connect-card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.connect-tabs {
  display: flex;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.ctab {
  flex: 1;
  padding: 12px 10px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.ctab.active {
  color: var(--green-deep);
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ctab.active i { color: var(--green); }
.ctab:hover:not(.active) { color: var(--t1); }

.ctab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.ctab-panel.active { display: flex; }

.panel-desc-box {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--border-sub);
}
.panel-desc-box h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.panel-desc-box p {
  font-size: 0.8rem;
  color: var(--t3);
  line-height: 1.5;
}

.password-pin-box {
  width: 75px !important;
  max-width: 75px !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.create-pwd-input {
  width: 75px !important;
  max-width: 75px !important;
  height: 28px !important;
  padding: 2px 4px !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-subtle) !important;
  color: var(--t1) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  letter-spacing: 3px !important;
}
.create-pwd-input::placeholder {
  color: #a0aec0 !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  font-size: 0.85rem !important;
}
.create-pwd-input:focus {
  border-color: var(--green) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.2) !important;
}

/* ── 🌟 대기실 게임 선택 헤더: [게임 선택] + [진영/라운드 설정(중앙)] + [힌트(우측)] ── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  height: 38px;
  margin-bottom: 14px;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.panel-title {
  flex-shrink: 0;
  margin: 0;
}
.panel-sub {
  flex-shrink: 0;
}

.game-extra-settings-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: var(--radius-sm);
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: 32px;
  box-sizing: border-box;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* 🌟 설정 항목이 없을 때도 높이/공간을 유지하여 카드 크기 변화 원천 차단 */
.game-extra-settings-bar.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.extra-setting-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}
.extra-setting-item.hidden {
  display: none !important;
}

.esi-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.esi-stepper {
  display: flex;
  align-items: center;
  background: transparent !important;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.esi-stepper .btn-step {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  background: var(--bg-hover);
  border: none;
  border-radius: 4px;
}
.esi-val {
  min-width: 48px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--green-deep);
  white-space: nowrap;
}

.side-select-toggle {
  display: flex;
  background: transparent !important;
  border-radius: 6px;
  padding: 2px;
  border: 1.5px solid var(--border);
  gap: 2px;
}
.side-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--t3);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.side-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3);
}
.side-btn:hover:not(.active) {
  color: var(--t1);
}

/* ── ⚙️ 방 만들기 세부 옵션 박스 (오밀조밀한 콤팩트 UI) ── */
#panel-create {
  display: none;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 8px;
  flex: 0 0 auto;
}
#panel-create.active {
  display: flex !important;
}

.create-room-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-subtle);
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0;
}

.create-pwd-input::placeholder {
  color: #a0aec0;
  font-weight: 900;
  letter-spacing: 4px;
}

.create-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.create-opt-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 5px;
}
.create-opt-label i {
  color: var(--green);
  font-size: 0.8rem;
}

/* 공개/비밀방 토글 */
.room-type-toggle {
  display: flex;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 2px;
  border: 1px solid var(--border);
}
.room-type-opt {
  position: relative;
  cursor: pointer;
}
.room-type-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.room-type-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--t3);
  border-radius: calc(var(--radius-sm) - 2px);
  transition: all 0.15s ease;
}
.room-type-opt input:checked + .room-type-btn {
  background: var(--bg-card);
  color: var(--green-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 인원 수 스피너 */
.capacity-stepper {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px;
}
.btn-step {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--bg-hover);
  color: var(--t1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-step:hover {
  background: var(--green-tint);
  color: var(--green-deep);
}
.capacity-val {
  min-width: 36px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--green-deep);
}

/* 공개 방 목록 자물쇠 뱃지 */
.lrc-lock-badge {
  font-size: 0.72rem;
  color: #d69e2e;
  background: #fefcbf;
  border: 1px solid #ecc94b;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
}

/* 방 코드 생성 박스 */
.code-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--green-tint);
  border: 1px dashed var(--green-border);
  border-radius: var(--radius);
}
.code-reveal.hidden { display: none; }

.code-reveal-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--green-deep);
}

.code-display {
  display: flex;
  align-items: center;
  gap: 12px;
}
#host-room-code {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}

/* 방 참가 폼 */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-input-field {
  width: 100%;
  background: var(--bg-hover);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: 12px;
  text-align: center;
  outline: none;
  transition: all 0.15s;
}
.code-input-field::placeholder {
  color: var(--t4);
  letter-spacing: 8px;
  font-weight: 500;
  font-size: 1.4rem;
}
.code-input-field:focus {
  border-color: var(--green);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(72,187,120,0.15);
}

/* =====================================================================
   2. NICKNAME SCREEN
   ===================================================================== */
#screen-nickname {
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.nickname-container {
  width: 100%;
  max-width: 440px;
  padding: 24px;
}

.nick-card {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.nick-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 4px;
  box-shadow: var(--shadow-green);
}

.nick-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--t1);
}
.nick-card p {
  font-size: 0.9rem;
  color: var(--t3);
  line-height: 1.5;
}

.nick-input {
  width: 100%;
  background: var(--bg-hover);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t1);
  text-align: center;
  outline: none;
  transition: all 0.15s;
  margin-top: 6px;
}
.nick-input:focus {
  border-color: var(--green);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(72,187,120,0.15);
}
.nick-input::placeholder { color: var(--t4); font-weight: 400; }

.nick-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.nick-btn-row .btn { flex: 1; }

/* =====================================================================
   3. ROOM LOBBY SCREEN
   ===================================================================== */
#screen-room {
  flex-direction: column;
  align-items: stretch;
  background: var(--bg);
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── 방 헤더 ── */
.room-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
}

.room-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.room-name-label {
  font-size: 0.82rem;
  color: var(--t3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.room-code-badge {
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--green-deep);
  letter-spacing: 5px;
  font-variant-numeric: tabular-nums;
}

.room-capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--t2);
  background: var(--bg-subtle);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.room-capacity i { color: var(--green); }

@media (max-width: 640px) {
  .room-header {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "leave capacity"
      "title title";
    gap: 8px;
    justify-content: stretch;
  }
  #btn-leave-room { grid-area: leave; justify-self: start; }
  .room-capacity { grid-area: capacity; justify-self: end; }
  .room-title { grid-area: title; justify-self: center; margin-top: 2px; }
}

/* ── 방 본체 (PC 3단: 좌측 참가자 / 중앙 게임선택 / 우측 채팅) ── */
.room-body {
  flex: 1;
  display: grid;
  grid-template-columns: 270px 1fr 320px;
  gap: 20px;
  padding: 20px 28px;
  max-width: 1540px;
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 0 auto;
  align-items: flex-start !important; /* 🌟 1. 최상단 라인에 맞춰 정렬 (items-start) */
  justify-content: center;
  box-sizing: border-box;
}

.room-players-panel {
  align-self: flex-start !important; /* 🌟 3. 참가자 목록 최상단 기준 고정 & 아래로 자연스럽게 늘어남 */
  width: 100%;
  height: auto;
  max-height: 620px;
  overflow-y: auto;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.room-left-panel {
  align-self: flex-start !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* 기존 참가자 패널 (이모지 패널 공간 확보를 위해 max-height 살짝 조절) */
.room-players-panel {
  width: 100%;
  height: auto;
  max-height: 550px; /* 620px에서 이모지 패널 높이만큼 차감 */
  overflow-y: auto;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* 🌟 2. 신규 이모지 감정표현 패널 */
/* 이모지 패널 (한 줄 가로 정렬 고정) */
.room-emoji-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 10px 12px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}

/* 이모지 버튼 */
.btn-emoji {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
  flex: 1; /* 4개 버튼 동일 비율 분배 */
}

.btn-emoji:hover {
  background-color: var(--hover-bg, rgba(0, 0, 0, 0.06));
  transform: scale(1.2);
}

.btn-emoji:active {
  transform: scale(0.9);
}

/* 이모지 SVG 이미지 크기 정의 */
.btn-emoji .emoji-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

.room-chat-panel {
  align-self: flex-start !important; /* 🌟 1. 최상단 라인 정렬 */
  width: 100%;
  height: 620px !important; /* 🌟 2. 오른쪽 채팅창 전체 높이 고정 */
  max-height: calc(100vh - 140px) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}

.room-game-grid {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 🎮 게임 진행 중 알림 배너 */
.room-playing-alert {
  background: var(--coral-tint);
  border: 1.5px solid var(--coral-border);
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--coral);
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 16px;
  animation: pulseAlert 2s infinite ease-in-out;
}
.room-playing-alert.hidden { display: none !important; }
@keyframes pulseAlert {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 62, 62, 0); }
  50% { box-shadow: 0 0 12px rgba(229, 62, 62, 0.25); }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title i { color: var(--green); }

.panel-badge {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  background: var(--green-tint);
  color: var(--green-deep);
  border: 1px solid var(--green-border);
  border-radius: 999px;
}
.panel-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--t3);
}

/* ── 1. 왼쪽: 플레이어 목록 ── */
.room-players-panel {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.player-item.is-me {
  border-left: 4.5px solid var(--green) !important;
  background: #f0fdf4 !important;
  border-color: #bbf7d0;
}
.player-item.is-me .player-name {
  font-weight: 800;
  color: var(--green-deep);
}
.player-item.ready {
  border-color: var(--green-border);
  background: var(--green-tint);
}
.player-item.ready.is-me {
  border-left: 4.5px solid var(--green) !important;
}
.player-item.is-in-game {
  border: 2px solid var(--coral) !important;
  background: #fff8f8 !important;
  box-shadow: 0 0 10px rgba(229, 62, 62, 0.15) !important;
}

.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.player-avatar i {
  color: #ffffff !important;
}
.player-item.ready .player-avatar {
  box-shadow: 0 0 0 2.5px var(--green), 0 2px 8px rgba(72, 187, 120, 0.4);
}
.player-item.is-in-game .player-avatar {
  box-shadow: 0 0 0 2.5px var(--coral), 0 2px 8px rgba(229, 62, 62, 0.4);
}

.player-meta {
  flex: 1;
  min-width: 0;
}
.player-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crown-icon {
  color: var(--yellow);
  font-size: 0.8rem;
}
.player-role {
  font-size: 0.72rem;
  color: var(--t3);
  font-weight: 600;
}

.ready-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--t3);
  border: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}
.ready-badge.is-ready {
  background: var(--green-tint);
  color: var(--green-deep);
  border-color: var(--green-border);
}
.ready-badge.is-host {
  background: var(--yellow-tint);
  color: #b7791f;
  border-color: var(--yellow-border);
}
.ready-badge.is-playing {
  background: var(--coral-tint);
  color: var(--coral);
  border-color: var(--coral-border);
  font-weight: 900;
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.2);
}

.player-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-slot-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--t4);
}
.slot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.slot-text {
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── 2. 중앙: 게임 선택 패널 + 컨트롤 ── */
.room-center-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-select-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.room-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 8px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  box-sizing: border-box;
}
.room-game-grid::-webkit-scrollbar {
  width: 5px;
}
.room-game-grid::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.room-game-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.room-game-btn:hover:not(.disabled-3p):not(.disabled-game) {
  border-color: var(--green);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.room-game-btn.selected {
  border-color: var(--green);
  background: var(--green-tint);
  box-shadow: 0 0 0 2px var(--green-border);
}
.room-game-btn.disabled-3p {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.8);
}
.room-game-btn.disabled-game {
  cursor: default;
}

.rgb-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 10px;
}
.room-game-btn.selected .rgb-icon {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}

.rgb-info strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 2px;
}
.rgb-info span {
  display: block;
  font-size: 0.72rem;
  color: var(--t3);
  line-height: 1.3;
}

.rgb-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.selected-game-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--green-deep);
}

/* ── 방 컨트롤 영역 ── */
.room-controls {
  padding: 20px;
  background: var(--bg-hover);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.guest-hint {
  font-size: 0.82rem;
  color: var(--t3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-row {
  width: 100%;
  display: flex;
  gap: 12px;
}
.control-row .btn {
  flex: 1;
  padding: 15px 0;
  font-size: 1.05rem;
}

.btn-ready {
  background: #ffffff;
  border: 2px solid var(--border);
  color: var(--t2);
  transition: all 0.2s ease;
}
.btn-ready:hover {
  border-color: var(--green);
  color: var(--green-deep);
  background: var(--green-tint);
}
.btn-ready.is-ready {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(72, 187, 120, 0.4);
}
.btn-ready.is-ready:hover {
  background: #3da864 !important;
  border-color: #3da864 !important;
}
.btn-start {
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(72, 187, 120, 0.4);
}
.btn-start:disabled {
  background: var(--border);
  color: var(--t4);
  box-shadow: none;
  cursor: not-allowed;
}

.ready-hint {
  font-size: 0.78rem;
  color: var(--t3);
  text-align: center;
  font-weight: 600;
}

/* ── 3. 오른쪽: 실시간 채팅 패널 공통 스타일 (높이 620px 고정 + 내부 스크롤) ── */
.room-chat-panel,
.game-chat-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 620px !important;
  max-height: calc(100vh - 140px) !important;
  padding: 16px;
  box-sizing: border-box;
  background: #ffffff;
  align-self: flex-start !important;
}

.gcp-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 10px;
  flex-shrink: 0 !important;
}
.gcp-header h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 7px;
}
.gcp-header h4 i { color: var(--green); }

.chat-count-badge {
  display: none !important;
}

.chat-messages-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.chat-messages-wrap::-webkit-scrollbar { width: 4px; }
.chat-messages-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.chat-system-msg {
  text-align: center;
  font-size: 0.75rem;
  color: var(--t3);
  background: var(--bg-hover);
  padding: 6px 10px;
  border-radius: 6px;
  margin: 2px 0;
  line-height: 1.4;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: fadeInMsg 0.18s ease;
}
@keyframes fadeInMsg {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-msg.me {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-msg.other {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-sender-info {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--t3);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.chat-msg.me .chat-bubble {
  background: var(--green);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}
.chat-msg.other .chat-bubble {
  background: var(--bg-hover);
  color: var(--t1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 2px;
}

.chat-time {
  font-size: 0.65rem;
  color: var(--t4);
  margin-top: 2px;
}

.chat-input-form {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-sub);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}
.chat-input {
  flex: 1;
  min-width: 0; /* 🌟 버튼 밖으로 튀어나옴 방지 핵심 */
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  background: var(--bg-hover);
  transition: all 0.18s ease;
  box-sizing: border-box;
}
.chat-input:focus {
  background: #ffffff;
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-tint);
}
.btn-chat-send {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   5. GAME SCREEN (PC 3단: 좌측 참가자 / 중앙 게임 / 우측 채팅)
   ═══════════════════════════════════════════════════════════════════ */
#screen-game {
  background: var(--bg);
  min-height: 100vh;
  flex-direction: column;
  width: 100%;
}

/* =====================================================================
   4. IN-GAME SCREEN (PC 화면이 잘릴 때만 자연스러운 상하 스크롤/드래그 허용)
   ===================================================================== */
#screen-game {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: none;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#screen-game.active {
  display: flex !important;
}
#screen-game::-webkit-scrollbar {
  width: 6px;
}
#screen-game::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.game-header {
  height: 64px;
  padding: 0 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 20;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

.game-title-area {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--t1);
  letter-spacing: -0.3px;
}

.game-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.game-room-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--green-deep);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

#btn-game-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--t2);
  cursor: pointer;
  transition: all 0.15s ease;
}
#btn-game-settings:hover {
  background: var(--bg-hover);
  color: var(--green-deep);
  border-color: var(--green-border);
}

.game-main-layout {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 40px 24px;
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: 20px;
  align-items: flex-start !important; /* 🌟 1. 최상단 라인에 맞춰 정렬 (items-start) */
  justify-content: center;
  min-height: calc(100vh - 64px);
  box-sizing: border-box;
}

/* 야추 다이스 3인 이상 플레이 시 중앙 영역 및 전체 너비 확장 (채팅창 우측 이동) */
.game-main-layout.yacht-wide-mode {
  max-width: 1750px !important;
  grid-template-columns: 240px 1.8fr 280px !important;
  align-items: flex-start !important;
}

/* 좌측 상시 참가자 목록 사이드바 (최상단 고정 & 우측 말풍선 팝업 허용) */
.game-sidebar-players {
  position: relative;
  width: 100%;
  height: auto !important;
  max-height: 620px !important;
  overflow: visible !important; /* 🌟 우측 말풍선이 잘리지 않고 뜨도록 허용 */
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  align-self: flex-start !important; /* 🌟 3. 참가자 목록 상단 고정 */
}

.gsp-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-sub);
}
.gsp-header h4 {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 7px;
}
.gsp-header h4 i { color: var(--green); }

/* 좌측 퇴장 알림 메시지 영역 */
.gsp-alert-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gsp-alert-item {
  background: var(--coral-tint);
  border: 1px solid var(--coral-border);
  color: var(--coral);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: slideInDown 0.25s ease;
}
.gsp-alert-item i { flex-shrink: 0; }

@keyframes slideInDown {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.gsp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gsp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  border: 1.5px solid var(--border-sub);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gsp-item.is-me {
  border-left: 4.5px solid var(--green) !important;
  background: #f0fdf4 !important;
  border-color: #bbf7d0;
}
.gsp-item.is-me .gsp-name {
  font-weight: 800;
  color: var(--green-deep);
}

.gsp-item.gsp-spectator-item.is-me {
  border-left: 4.5px solid var(--sky) !important;
  background: #f0f9ff !important;
  border-color: #bae6fd;
}
.gsp-item.gsp-spectator-item.is-me .gsp-name {
  font-weight: 800;
  color: #0369a1;
}

.gsp-item.is-current-turn {
  background: var(--green-tint) !important;
  border: 2px solid var(--green) !important;
  box-shadow: 0 4px 14px rgba(72, 187, 120, 0.35);
  animation: turnCardBounce 1.2s infinite ease-in-out;
}
.gsp-item.is-current-turn.is-me {
  border-left: 4.5px solid var(--green) !important;
}

@keyframes turnCardBounce {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(72, 187, 120, 0.35);
  }
  50% {
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 6px 18px rgba(72, 187, 120, 0.55);
  }
}

.gsp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.gsp-avatar i {
  color: #ffffff !important;
}
.gsp-item.is-current-turn .gsp-avatar {
  box-shadow: 0 0 0 2px var(--green), 0 2px 8px rgba(72, 187, 120, 0.4);
}

.gsp-meta {
  flex: 1;
  min-width: 0;
}
.gsp-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsp-tag {
  font-size: 0.65rem;
  color: var(--t3);
}

/* 🌟 중앙 게임 플레이 영역 (상단 정렬 일치 - 좌우 사이드바와 상단 라인 일치) 🌟 */
.game-play-area {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  align-self: flex-start !important;
}

#game-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start !important;
  margin: 0;
  padding: 0;
}

#game-content > * {
  margin-top: 0 !important;
}

/* =====================================================================
   5. 버튼 공통
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }

.btn-primary {
  background: var(--green);
  color: #ffffff;
  box-shadow: var(--shadow-green);
}
.btn-primary:hover:not(:disabled) {
  background: var(--green-hover);
  box-shadow: 0 6px 18px rgba(72,187,120,0.35);
}

.btn-outline {
  background: var(--bg-card);
  color: var(--t2);
  border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled) {
  color: var(--t1);
  border-color: var(--green);
  background: var(--green-tint);
}

.btn-ghost {
  background: transparent;
  color: var(--t2);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { color: var(--t1); background: var(--bg-subtle); }

.btn-lg { padding: 15px 28px; font-size: 1rem; width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; }

.btn-ready {
  flex: 1;
  background: var(--bg-hover);
  color: var(--t2);
  border: 2px solid var(--border);
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  transition: all 0.15s ease;
}
.btn-ready:hover {
  background: var(--bg-hover);
  border-color: var(--green-border);
}
.btn-ready.is-ready {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  box-shadow: var(--shadow-green);
}

.btn-start {
  flex: 1;
  background: var(--green);
  color: #ffffff;
  border: none;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  transition: all 0.15s ease;
  box-shadow: var(--shadow-green);
}
.btn-start:hover:not(:disabled) {
  background: var(--green-hover);
  box-shadow: 0 6px 20px rgba(72,187,120,0.4);
}
.btn-start.hidden { display: none; }

.btn-icon {
  background: #ffffff;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--t3);
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  line-height: 1;
}
.btn-icon:hover {
  color: var(--green);
  border-color: var(--green-border);
  background: var(--green-tint);
}
.btn-icon.sm { font-size: 0.8rem; padding: 4px 8px; }

/* =====================================================================
   6. OVERLAYS (카운트다운, 결과, 로딩)
   ===================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: screenFadeIn 0.2s ease;
}
.overlay.hidden { display: none; }

/* ── 환경 설정 모달 ── */
.settings-modal {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: modalPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-sub);
}
.settings-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-header h3 i { color: var(--green); }

.btn-close-settings {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--t3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.15s;
}
.btn-close-settings:hover {
  color: var(--t1);
  background: var(--bg-hover);
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.setting-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--t1);
}

.btn-sound-toggle {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sound-toggle:hover {
  border-color: var(--green);
  background: var(--green-tint);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.sound-range-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  transition: background 0.15s;
}
.sound-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s;
}
.sound-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.sound-range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.vol-text {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--t2);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   🐾 프로필 편집 말풍선 팝업 (Floating Bubble Popover)
   ===================================================================== */
.profile-bubble-popup {
  position: fixed;
  z-index: 2500;
  width: 320px;
  max-width: 90vw;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--green-border);
  box-shadow: 0 14px 40px rgba(47, 133, 90, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  animation: bubblePopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-bubble-popup.hidden {
  display: none !important;
}

@keyframes bubblePopIn {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.profile-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-sub);
  padding-bottom: 8px;
}
.profile-bubble-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-bubble-title i {
  color: var(--green);
}

.profile-preview-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: var(--bg-hover);
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
  gap: 4px;
}

.profile-preview-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-preview-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--t1);
  margin-top: 2px;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-section-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--t2);
}

.profile-input-nick {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--t1);
  box-sizing: border-box;
}
.profile-input-nick:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2);
}

.avatar-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.avatar-icon-btn {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  color: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.avatar-icon-btn:hover {
  transform: scale(1.1);
  border-color: var(--green);
  background: var(--green-tint);
}
.avatar-icon-btn.active {
  border-color: var(--green-deep);
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.35);
  transform: scale(1.1);
}

.avatar-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.avatar-color-btn {
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: relative;
}
.avatar-color-btn:hover {
  transform: scale(1.08);
}
.avatar-color-btn.active {
  border-color: #ffffff;
  outline: 2px solid var(--green-deep);
  transform: scale(1.08);
}

.profile-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.profile-btn-row .btn {
  flex: 1;
  height: 38px;
}

/* ── 카운트다운 오버레이 (3, 2, 1, START) ── */
.countdown-overlay {
  background: rgba(14, 26, 18, 0.72);
  backdrop-filter: blur(12px);
  z-index: 1500;
}

.countdown-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.countdown-number-wrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(72, 187, 120, 0.15);
  border: 3px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(72, 187, 120, 0.4);
}

.countdown-number {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1;
  text-shadow: 0 0 20px rgba(72, 187, 120, 0.6);
  animation: countdownPulse 0.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.countdown-sub {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

@keyframes countdownPulse {
  0% { transform: scale(0.6); opacity: 0.2; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.result-modal {
  background: var(--bg-card);
  padding: 48px 40px;
  max-width: 460px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.result-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 2px solid var(--green-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--green);
}

#result-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.5px;
}
#result-message {
  font-size: 0.95rem;
  color: var(--t2);
  line-height: 1.5;
}
.result-score-row {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t1);
  background: var(--bg-subtle);
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

/* 로딩 모달 */
.loading-modal {
  background: var(--bg-card);
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow-lg);
}

.loading-ring {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}
.loading-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 4px;
  border: 4px solid transparent;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: ringRotate 1s cubic-bezier(0.5,0,0.5,1) infinite;
}
.loading-ring div:nth-child(1) { animation-delay: -0.45s; }
.loading-ring div:nth-child(2) { animation-delay: -0.3s; }
.loading-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes ringRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loading-text { font-size: 0.95rem; font-weight: 700; color: var(--t2); }

/* =====================================================================
   7. TOAST
   ===================================================================== */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t1);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  animation: toastSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.toast.hidden { display: none; }
.toast.success { border-color: var(--green-border); color: var(--green-deep); background: var(--green-tint); }
.toast.error   { border-color: var(--coral-border); color: var(--coral); background: var(--coral-tint); }
.toast.warn    { border-color: var(--yellow-border); color: var(--yellow); background: var(--yellow-tint); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =====================================================================
   8. WAITING DOTS & UTILS
   ===================================================================== */
.waiting-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t3);
  font-size: 0.82rem;
  font-weight: 600;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

.hidden { display: none !important; }

/* ── 기본 데스크톱 채팅 토글 및 백드롭 숨김 ── */
.btn-mobile-chat-toggle { display: none; }
.btn-close-mobile-chat { display: none; }
.mobile-chat-backdrop { display: none; }

.chat-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53e3e;
  border: 1.5px solid #ffffff;
  display: inline-block;
  animation: pulseDot 1.2s infinite;
}

/* =====================================================================
   9. RESPONSIVE DESIGN (자연스러운 반응형 튜닝)
   ===================================================================== */
html, body {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 960px) {
  /* ── 방 로비 화면 (자연스러운 모바일 터치 스크롤 지원) ── */
  #screen-room {
    height: 100% !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    width: 100%;
    max-width: 100vw;
  }
  #screen-room.active {
    display: flex !important;
    flex-direction: column !important;
  }
  /* 🌟 방 로비 상단바: 로비/인게임과 크기/위치 100% 일치 🌟 */
  .room-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin: 6px 12px 4px 12px !important;
    padding: 6px 12px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 6px !important;
    z-index: 100 !important;
    gap: 8px !important;
  }

  /* 좌측 로비 나가기 버튼: 인게임 뒤로가기 버튼과 모양 완전 통일 */
  #btn-leave-room {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    flex-shrink: 0 !important;
    font-size: 1.05rem !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--t1) !important;
  }
  #btn-leave-room span {
    display: none !important;
  }

  /* 중앙 ROOM CODE 뱃지: 줄바꿈 없이 한 줄로 */
  .room-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .room-name-label {
    display: none !important;
  }
  .room-code-badge {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    padding: 3px 10px !important;
    letter-spacing: 2px !important;
    border-radius: var(--radius-xs) !important;
  }
  #btn-copy-room-code {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 우측 설정 버튼: 테두리 없이 인게임 설정 버튼과 모양 완전 통일 */
  .room-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  #btn-room-settings {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    color: var(--t2) !important;
  }

  /* 🌟 방 본체 🌟 */
  .room-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 12px 32px 12px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }
  .room-left-panel {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* 🌟 방 화면 참가자 목록: 인게임과 크기/높이 100% 동일한 2열 칩 형태 🌟 */
  .room-players-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    flex-shrink: 0 !important;
  }
  .room-players-panel .panel-header {
    display: none !important;
  }
  .player-slots {
    display: none !important;
  }
  #player-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 8px !important;
    width: 100% !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    max-height: none !important;
  }
  .player-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    font-size: 0.84rem !important;
    border-radius: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
    background: var(--bg-subtle, #f7fafc) !important;
    border: 1px solid var(--border-sub, #edf2f7) !important;
  }
  .player-item.ready {
    border-color: var(--green) !important;
    background: var(--green-tint, #f0fff4) !important;
  }
  .player-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.82rem !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .player-meta {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }
  .player-name {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .player-role {
    display: none !important;
  }

  /* 🌟 프로필 점 세 개(관리 버튼) 숨김 🌟 */
  .btn-manage-trigger {
    display: none !important;
  }

  .ready-badge {
    font-size: 0.68rem !important;
    padding: 2.5px 6px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  .player-item.ready .ready-badge {
    background: var(--green) !important;
    color: #ffffff !important;
  }
  .player-item:not(.ready):not(.host-item) .ready-badge {
    background: var(--bg-hover) !important;
    color: var(--t3) !important;
    border: 1px solid var(--border) !important;
  }
  .player-item.host-item .ready-badge {
    background: #fefcbf !important;
    color: #744210 !important;
    border: 1px solid #f6e05e !important;
  }

  /* 🌟 방 화면 이모지 패널 🌟 */
  .room-emoji-panel {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    gap: 8px !important;
    width: auto !important;
    align-self: center !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .room-emoji-panel .btn-emoji {
    padding: 4px 6px !important;
    border: none !important;
    background: transparent !important;
  }
  .room-emoji-panel .emoji-img {
    width: 20px !important;
    height: 20px !important;
  }

  /* 🌟 방 화면 중앙 게임 선택 카드 (카드는 고정, 내부 게임들은 2열 스크롤) 🌟 */
  .room-center-panel {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
  }

  .game-select-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }

  /* 🌟 '게임 선택' 문구: 진영 선택이나 라운드가 없을 때만 나타남 🌟 */
  .game-select-panel .panel-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 0 6px 0 !important;
    gap: 4px !important;
    min-height: 36px !important;
    border-bottom: 1px solid var(--border-sub, #edf2f7) !important;
  }
  .game-select-panel.has-extra-settings .panel-title {
    display: none !important;
  }
  .game-select-panel:not(.has-extra-settings) .panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .game-extra-settings-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }
  .extra-setting-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .side-select-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .side-btn {
    padding: 4px 7px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  #game-select-role-hint {
    display: none !important; /* 공간 확보 위해 힌트 숨김 */
  }

  /* 🌟 게임 목록: PC버전 스타일 2열 카드 (세로로 약간 길게 튜닝) 🌟 */
  .room-game-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: clamp(230px, 42vh, 320px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding: 2px 2px 6px 2px !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
  }
  .room-game-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 86px !important;
    padding: 12px 10px 10px 10px !important;
    gap: 5px !important;
    position: relative !important;
    border-radius: var(--radius) !important;
    background: var(--bg-hover) !important;
    border: 1.5px solid var(--border) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transition: all 0.18s ease !important;
  }
  .room-game-btn.selected {
    border-color: var(--green) !important;
    background: var(--green-tint, #f0fff4) !important;
    box-shadow: 0 0 0 2px var(--green-border) !important;
  }
  .rgb-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--green) !important;
    flex-shrink: 0 !important;
    margin: 0 0 4px 0 !important;
  }
  .room-game-btn.selected .rgb-icon {
    background: var(--green) !important;
    color: #ffffff !important;
    border-color: var(--green) !important;
  }
  .rgb-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .rgb-info strong {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--t1) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.25 !important;
  }
  .rgb-info span {
    display: none !important; /* 설명 문구 숨김 */
  }
  .rgb-tag {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
  }

  /* 🌟 게임시작/준비 컨트롤: 바깥 영역(회색 배경/테두리/패딩) 없이 오직 버튼만 깔끔하게 표시 🌟 */
  .room-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .room-controls .control-row {
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
  }
  .room-controls .btn-ready,
  .room-controls .btn-start {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 !important;
  }
  .ready-hint,
  .guest-hint,
  #ready-hint,
  #guest-wait-hint {
    display: none !important; /* 모바일에서 시작 버튼 아래 문구 제거 */
  }

  /* 🌟 방 화면 실시간 채팅: 모바일에서는 바텀시트 모달로 작동 🌟 */
  .room-chat-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 72vh !important;
    height: 72dvh !important;
    max-height: 520px !important;
    z-index: 999 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
    background: var(--bg-card) !important;
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .room-chat-panel.mobile-open {
    transform: translateY(0) !important;
  }
  #btn-close-room-mobile-chat {
    display: inline-flex !important;
  }

/* 1. 인게임 화면 CSS 보완 */
#screen-game {
  width: 100%;
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. 윷판 컨테이너 크기 고정 */
.yut-board-area {
  width: min(90vw, 420px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

  /* 🌟 인게임 상단바: 로비/방과 위치/크기 100% 일치 🌟 */
  .game-header {
    position: sticky !important;
    top: 6px !important;
    z-index: 120 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 6px 12px 4px 12px !important;
    padding: 6px 12px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    gap: 8px !important;
  }

  /* 좌측: 방으로 돌아가기는 텍스트 숨기고 꺽쇄만 남김 */
  #btn-back-to-room {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    flex-shrink: 0 !important;
    font-size: 1.05rem !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
  }
  #btn-back-to-room span {
    display: none !important; /* 모바일에서 '방으로 돌아가기' 텍스트 제거 */
  }

  /* 중앙: 게임 타이틀 */
  .game-title-area {
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #current-game-title {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: var(--t1) !important;
    letter-spacing: -0.3px !important;
  }

  /* 우측: 방번호 + 설정 */
  .game-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .game-room-badge {
    padding: 3px 8px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border-radius: var(--radius-xs) !important;
  }
  #btn-game-settings {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    color: var(--t2) !important;
  }

  /* 🌟 모바일 채팅 버튼: 화면 좌측 하단 원형 플로팅 액션 버튼(FAB)으로 배치 🌟 */
  .btn-mobile-chat-toggle {
    display: flex !important;
    position: fixed !important;
    bottom: 22px !important;
    left: 18px !important;
    right: auto !important;
    z-index: 999 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(72, 187, 120, 0.45) !important;
    background: var(--green) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 1.25rem !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .btn-mobile-chat-toggle:active {
    transform: scale(0.92) !important;
  }
  .btn-mobile-chat-toggle span:not(.chat-badge-dot) {
    display: none !important; /* '채팅' 글자 숨김 */
  }
  .btn-mobile-chat-toggle .chat-badge-dot {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* 🌟 인게임 본체 레이아웃 및 2열 그리드 참가자 목록 🌟 */
  .game-main-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 4px 10px 64px 10px !important;
    gap: 10px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  .game-left-panel {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  /* 참가자 목록: 2열 그리드(2 columns), 사람이 늘어날수록 행이 늘어남 */
  .game-sidebar-players {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 8px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .gsp-header {
    display: none !important; /* 불필요한 '참가자 (2)' 제목 숨김으로 화면 높이 확보 */
  }
  .gsp-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 8px !important;
    width: 100% !important;
    padding: 2px 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .gsp-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    font-size: 0.84rem !important;
    border-radius: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
    background: var(--bg-subtle, #f7fafc) !important;
    border: 1px solid var(--border-sub, #edf2f7) !important;
  }
  .gsp-item.is-turn-active {
    border-color: var(--green) !important;
    background: var(--green-tint, #f0fff4) !important;
  }
  .gsp-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.82rem !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .gsp-info {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }
  .gsp-name {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .gsp-tag {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 2.5px 6px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  /* 인게임 이모지 패널 */
  .game-emoji-panel {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    gap: 8px !important;
    width: auto !important;
    align-self: center !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .game-emoji-panel .btn-emoji {
    padding: 4px 6px !important;
  }
  .game-emoji-panel .emoji-img {
    width: 20px !important;
    height: 20px !important;
  }

  .game-play-area {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #game-content {
    width: 100%;
    height: auto !important;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  /* ── 💬 모바일 인게임 채팅 바텀시트 팝업 모달 ── */
  .mobile-chat-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 998;
    animation: screenFadeIn 0.2s ease;
  }
  .mobile-chat-backdrop.hidden {
    display: none !important;
  }

  .game-chat-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 72vh !important;
    height: 72dvh !important;
    max-height: 520px !important;
    z-index: 999 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
    background: var(--bg-card) !important;
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  .game-chat-panel.mobile-open {
    transform: translateY(0) !important;
  }
  .btn-close-mobile-chat {
    display: inline-flex !important;
  }

  /* 🌟 [모바일 UI] 윷놀이 프로필 완주 배지 (0/4) 스타일 🌟 */
  .yut-gsp-finished-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: var(--green-tint, #f0fff4) !important;
    color: var(--green-deep, #22543d) !important;
    border: 1px solid var(--green-border, #bbf7d0) !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    padding: 1.5px 6px !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    margin-right: 4px !important;
  }

  /* 🌟 [모바일 UI] 모든 게임의 게임판 상단 [닉네임 차례] / [턴] 표시 및 윷놀이 중복 알약 전체 제거 🌟 */
  .turn-indicator,
  .yut-turn-badge,
  #yut-turn-badge,
  #yh-turn-label,
  .yut-score-pills,
  #yut-score-pills,
  .gomoku-wrap .turn-indicator,
  .chess-wrap .turn-indicator,
  .quoridor-wrap .turn-indicator,
  .janggi-header-area .turn-indicator,
  .alkkagi-header-area .turn-indicator,
  .baskin-wrap .turn-indicator,
  .wordchain-wrap .turn-indicator,
  .yacht-header #yh-turn-label {
    display: none !important;
  }

  /* 🌟 윷놀이 모바일 레이아웃: 온전하고 선명한 윷판 + 자연스러운 세로 스크롤 🌟 */
  .yut-game-container {
    height: auto !important;
    gap: 10px !important;
    padding: 4px 6px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  .yut-header-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px 0 !important;
    min-height: unset !important;
  }
  .yut-banner-msg {
    font-size: 0.88rem !important;
    padding: 4px 14px !important;
  }
  .alkkagi-header-area,
  .janggi-header-area {
    justify-content: flex-end !important;
    min-height: unset !important;
    padding: 2px 0 !important;
    margin-bottom: 4px !important;
  }
  .yut-main-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .yut-board-wrapper {
    width: 100% !important;
    max-width: min(92vw, 420px) !important;
    padding: 10px !important;
    border-radius: var(--radius) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fbf8f1 !important;
    border: 2.5px solid #b08968 !important;
    overflow: hidden !important;
  }
  .yut-board-surface {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    background: #fffdf9 !important;
  }
  .yut-board-node {
    width: 22px !important;
    height: 22px !important;
  }
  .yut-board-node.center-node {
    width: 28px !important;
    height: 28px !important;
  }
  .yut-board-piece {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
  }
  .yut-control-panel {
    width: 100% !important;
    max-width: min(92vw, 420px) !important;
    padding: 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  .yut-mat-arena {
    padding: 14px 10px !important;
    gap: 12px !important;
    min-height: 100px !important;
  }
  .yut-stick-item {
    width: 28px !important;
    height: 86px !important;
    border-radius: 14px !important;
  }
  .yut-stick-item.is-backdo .stick-wood-body::after {
    font-size: 1.1rem !important;
  }
  .yut-power-btn {
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
  }
  .yut-waiting-header {
    font-size: 0.85rem !important;
  }
  .yut-waiting-token {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.88rem !important;
  }
}

@media (max-width: 560px) {
  .result-modal { padding: 28px 18px; }
  .room-chat-panel { height: 230px; }
}

/* =====================================================================
   7. 글로벌 로비 목록 (Firebase 실시간 연동 - 모던 아케이드 디자인)
   ===================================================================== */
.lobby-panel {
  margin-top: 24px;
  width: 100%;
}

.lobby-card {
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-sub);
}

.lobby-title-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lobby-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lobby-title i {
  color: var(--green);
}

/* 🌟 공개방 / 비밀방 탭 필터 버튼 🌟 */
.lobby-tab-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.lobby-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--t3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lobby-tab-btn:hover {
  color: var(--t1);
}

.lobby-tab-btn.active {
  background: var(--bg-card);
  color: var(--green-deep);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.lobby-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  color: var(--green-deep);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.lobby-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.6; }
}

/* 🌟 로비 방 목록 컨테이너 (방 유무와 무관하게 항상 회색 배경 유지 + 방 카드는 내부에 배치) 🌟 */
.lobby-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  box-sizing: border-box;
  align-content: start;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.lobby-list.is-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 24px !important;
  overflow: hidden !important;
}

.lobby-list::-webkit-scrollbar {
  width: 6px;
}
.lobby-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}
.lobby-list::-webkit-scrollbar-thumb {
  background: var(--border-focus);
  border-radius: 999px;
}
.lobby-list::-webkit-scrollbar-thumb:hover {
  background: var(--t3);
}

/* 🌟 컴팩트 아케이드 방 카드 */
.lobby-room-card {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.lobby-room-card:hover {
  transform: translateY(-2px);
  border-color: var(--green-border);
  box-shadow: 0 6px 16px rgba(56, 161, 105, 0.15);
}

.lobby-room-card.is-playing {
  border-color: var(--border);
  opacity: 0.85;
}
.lobby-room-card.is-full {
  border-color: var(--border);
}

/* 카드 상단 */
.lrc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lrc-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lrc-code-badge {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--t1);
  background: var(--bg-hover);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lrc-status-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lrc-status-badge.waiting {
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  color: var(--green-deep);
}
.lrc-status-badge.playing {
  background: var(--coral-tint);
  border: 1px solid var(--coral-border);
  color: var(--coral);
}
.lrc-status-badge.full {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: var(--t3);
}

.lrc-count-badge {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green-deep);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 카드 하단 (방장 정보 + 입장 버튼 1줄 배치) */
.lrc-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-sub);
}

.lrc-host-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lrc-host-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(56, 161, 105, 0.25);
}
.lrc-host-avatar i {
  color: #ffffff !important;
}

.lrc-host-meta {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lrc-host-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lrc-join-btn {
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
}

.lrc-join-btn.disabled {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* 빈 목록 상태 (부모 .lobby-list의 회색 영역 내 중앙 배치) */
.lobby-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 280px;
  flex: 1;
  color: var(--t3);
  gap: 12px;
  text-align: center;
  background: transparent;
  border: none;
  box-sizing: border-box;
  padding: 20px;
}
.lobby-empty i {
  font-size: 2.5rem;
  color: var(--border-focus);
}
.lobby-empty p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--t3);
}

/* =====================================================================
   8. 방장 참가자 관리 팝업/드롭다운 (강퇴 - 최상위 렌더링)
   ===================================================================== */
.host-action-dropdown {
  position: fixed !important;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22) !important;
  padding: 6px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 99999 !important;
  min-width: 150px;
  animation: modalPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto !important;
}

.host-action-dropdown.hidden {
  display: none !important;
}

.host-action-target-name {
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--t3);
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 2px;
}

.host-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t1);
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
  width: 100%;
}
.host-action-btn:hover {
  background: var(--bg-hover);
}

.host-action-btn.kick {
  color: var(--coral);
}
.host-action-btn.kick:hover {
  background: var(--coral-tint);
}

/* 점 3개 참가자 관리 전용 버튼 */
.btn-manage-trigger {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-manage-trigger:hover {
  background: var(--border-sub);
  color: var(--t1);
  transform: scale(1.15);
}

/* 플레이어 목록 호버 효과 (방장일 때만 클릭 가능하도록) */
.player-item.can-manage, .gsp-item.can-manage {
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.player-item.can-manage:hover {
  background-color: var(--green-tint) !important;
}
.gsp-item.can-manage:hover {
  background-color: rgba(56, 161, 105, 0.1) !important;
}

/* =====================================================================
   9. 진행 중인 방 빨간 버튼 & 사이드바 게임 설명 말풍선 팝업
   ===================================================================== */
.lrc-join-btn.is-playing-btn {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3) !important;
}
.lrc-join-btn.is-playing-btn:hover {
  background: #c53030 !important;
  border-color: #c53030 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4) !important;
}

/* 💬 사이드바 게임 설명 말풍선 팝업 */
.sidebar-game-bubble {
  position: fixed !important;
  z-index: 99999 !important;
  width: 300px;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--green) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22), 0 4px 14px rgba(72, 187, 120, 0.25) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  animation: bubblePopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto !important;
  box-sizing: border-box;
}

@keyframes bubblePopIn {
  from { opacity: 0; transform: scale(0.92) translateX(-8px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}

/* 말풍선 좌측 꼬리표 (PC) */
.sidebar-game-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--bg-card);
  border-left: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  transform: rotate(45deg);
}

@media (max-width: 1024px) {
  .sidebar-game-bubble::before { display: none; }
}

.sgb-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.sgb-close:hover {
  color: var(--coral);
}

.sgb-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sgb-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.sgb-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sgb-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--t1);
}

.sgb-desc {
  font-size: 0.88rem;
  color: var(--t2);
  line-height: 1.55;
  margin: 0;
  background: var(--bg-hover);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* =====================================================================
   10. 전통 윷놀이 (Host-Authoritative Yutnori Arena)
   ===================================================================== */
.yut-game-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 12px;
  box-sizing: border-box;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── 상단 헤더 ── */
.yut-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.yut-turn-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 1.05rem;
  font-weight: 800;
}
.yut-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulseDot 1.5s infinite;
}

/* 상단 중앙 윷 결과 알림 뱃지 */
.yut-banner-msg {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--t1);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yut-score-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.yut-score-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s;
}
.yut-score-pill.active-turn {
  background: var(--bg-hover);
  box-shadow: 0 0 12px rgba(56, 161, 105, 0.2);
  border-color: var(--green) !important;
}
.yut-sp-score {
  font-weight: 900;
  color: var(--t1);
}

/* 윷놀이 메인 배틀 구역 */
.yut-main-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .yut-main-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── 1. 전통 윷놀이 보드판 & 바로 아래 대기 말 ── */
.yut-board-wrapper {
  background: #fbf8f1;
  border: 3px solid #b08968;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: inset 0 0 24px rgba(176, 137, 104, 0.18), 0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  touch-action: none !important;
  user-select: none;
  -webkit-user-drag: none;
  box-sizing: border-box;
  overflow: hidden !important;
}

.yut-board-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  max-height: 480px;
  background: #fffdf9;
  border: 2px solid #e6ccb2;
  border-radius: var(--radius);
  box-shadow: inset 0 0 14px rgba(176, 137, 104, 0.1);
  touch-action: none !important;
  user-select: none;
  -webkit-user-drag: none;
  overflow: hidden !important;
}

.yut-board-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 29개 노드 */
.yut-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.yut-board-node {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ddb892;
  transform: translate(-50%, -50%);
  transition: all 0.2s;
  z-index: 2;
}
.yut-board-node.corner-node {
  width: 28px;
  height: 28px;
  border: 2.5px solid #b08968;
  background: #ede0d4;
}
.yut-board-node.center-node {
  width: 32px;
  height: 32px;
  border: 3px solid #c08552;
  background: #e6ccb2;
}
.yut-board-node.start-node {
  border-color: #38a169;
  background: #f0fff4;
}

/* 🌟 이동 목적지 노드 하이라이트 (빛남 펄스) */
.yut-board-node.dest-highlight {
  border-color: #e53e3e !important;
  background: #ffeded !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
  box-shadow: 0 0 18px rgba(229, 62, 62, 0.8), inset 0 0 8px rgba(229, 62, 62, 0.5) !important;
  animation: destNodeGlow 0.9s infinite alternate ease-in-out;
  z-index: 12 !important;
}
@keyframes destNodeGlow {
  from { box-shadow: 0 0 8px rgba(229, 62, 62, 0.5); }
  to { box-shadow: 0 0 22px rgba(229, 62, 62, 1); }
}

/* 🌟 보드 위 말 (노드보다 무조건 위에 오도록 z-index: 30) */
.yut-pieces-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30 !important;
  pointer-events: none;
}
.yut-board-piece {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s;
  cursor: pointer;
  pointer-events: auto !important;
  user-select: none;
  touch-action: manipulation;
  z-index: 35 !important;
}
.ybp-animal-icon {
  font-size: 1.05rem;
  color: #ffffff;
}
/* UI 흔들림 없는 정돈된 말 하이라이트 */
.yut-board-piece.interactive {
  cursor: pointer;
  box-shadow: 0 0 0 3px #ffffff, 0 0 14px rgba(72, 187, 120, 0.9);
}
.yut-board-piece.interactive:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 4px #ffffff, 0 0 20px rgba(72, 187, 120, 1);
}
.ybp-stack-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #1a202c;
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #ffffff;
}

/* ── 2. 우측 컨트롤 패널 ── */
.yut-control-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

/* 🪵 윷놀이 멍석 아레나 매트 (3D 윷가락 4개) */
.yut-mat-arena {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 26px 18px;
  background: radial-gradient(circle at center, #eed9a4, #d4a373 90%);
  border: 3.5px solid #8b261e;
  border-radius: var(--radius);
  min-height: 135px;
  box-shadow: inset 0 0 20px rgba(139, 38, 30, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
  perspective: 800px;
}

/* 윷가락 개별 아이템 */
.yut-stick-item {
  width: 32px;
  height: 104px;
  border-radius: 16px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.stick-wood-body {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 8px 0;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  border: 2px solid #582f0e;
  transition: all 0.25s ease;
}

/* 1) 둥근 등면 (Round Face - 짙은 원목 엠보싱) */
/* 1) 둥근 등면 (Round Face - 짙은 박달나무 3D 입체 실린더) */
.yut-stick-item.is-round .stick-wood-body {
  background: linear-gradient(90deg, #3d1c06 0%, #603813 25%, #854d0e 48%, #9a5b13 52%, #603813 75%, #3d1c06 100%);
  border-color: #241002;
  box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.25), inset -3px 0 6px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.yut-stick-item.is-round .stick-x-pattern {
  display: none;
}

/* 2) 평평한 배면 (Flat Face - 따뜻한 백목 + 3줄 전통 불도장 음각) */
.yut-stick-item.is-flat .stick-wood-body {
  background: linear-gradient(180deg, #fefae0 0%, #faedcd 50%, #fefae0 100%);
  border-color: #c98a4c;
  box-shadow: inset 0 0 12px rgba(187, 148, 87, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 전통 X자 불도장 음각 패턴 */
.stick-x-pattern {
  position: relative;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stick-x-pattern::before, .stick-x-pattern::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2.6px;
  background-color: #6f3b0c;
  border-radius: 1.5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.stick-x-pattern::before {
  transform: rotate(45deg);
}
.stick-x-pattern::after {
  transform: rotate(-45deg);
}

/* 빽도(Back-Do) 붉은 X자 각인 */
.yut-stick-item.is-backdo .stick-wood-body {
  border-color: #e53e3e;
}
.yut-stick-item.is-backdo .stick-x-pattern:nth-child(2)::before,
.yut-stick-item.is-backdo .stick-x-pattern:nth-child(2)::after {
  background-color: #e53e3e;
  height: 3.5px;
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.8);
}

/* 🌟 리얼 윷 던지기 3D 물리 텀블링 애니메이션 🌟 */
.yut-stick-item.rolling-3d.stick-anim-0 {
  animation: yutTumble0 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
.yut-stick-item.rolling-3d.stick-anim-1 {
  animation: yutTumble1 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.05s forwards;
}
.yut-stick-item.rolling-3d.stick-anim-2 {
  animation: yutTumble2 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.09s forwards;
}
.yut-stick-item.rolling-3d.stick-anim-3 {
  animation: yutTumble3 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.13s forwards;
}

@keyframes yutTumble0 {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0); }
  45% { transform: translateY(-40px) rotateX(540deg) rotateY(180deg) rotateZ(20deg) scale(1.15); }
  80% { transform: translateY(-6px) rotateX(900deg) rotateY(360deg) rotateZ(-8deg) scale(1.04); }
  100% { transform: translateY(0) rotateX(1080deg) rotateY(360deg) rotateZ(4deg) scale(1); }
}
@keyframes yutTumble1 {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0); }
  45% { transform: translateY(-48px) rotateX(720deg) rotateY(-180deg) rotateZ(-25deg) scale(1.18); }
  80% { transform: translateY(-8px) rotateX(1080deg) rotateY(-360deg) rotateZ(12deg) scale(1.04); }
  100% { transform: translateY(0) rotateX(1440deg) rotateY(-360deg) rotateZ(-6deg) scale(1); }
}
@keyframes yutTumble2 {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0); }
  45% { transform: translateY(-38px) rotateX(360deg) rotateY(360deg) rotateZ(30deg) scale(1.12); }
  80% { transform: translateY(-5px) rotateX(720deg) rotateY(540deg) rotateZ(-10deg) scale(1.03); }
  100% { transform: translateY(0) rotateX(1080deg) rotateY(720deg) rotateZ(10deg) scale(1); }
}
@keyframes yutTumble3 {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0); }
  45% { transform: translateY(-44px) rotateX(540deg) rotateY(-360deg) rotateZ(-18deg) scale(1.16); }
  80% { transform: translateY(-7px) rotateX(900deg) rotateY(-540deg) rotateZ(8deg) scale(1.04); }
  100% { transform: translateY(0) rotateX(1080deg) rotateY(-720deg) rotateZ(-4deg) scale(1); }
}

/* ── 🌟 파워 게이지 (글씨 없는 깔끔한 게이지 바) ── */
.yut-throw-control-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yut-gauge-track {
  width: 100%;
  height: 18px;
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.yut-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #38a169;
  border-radius: 999px;
  transition: width 0.02s linear, background-color 0.15s;
}

.yut-power-btn {
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
  touch-action: none;
}
.yut-power-btn:active {
  transform: scale(0.98);
}

/* ── 🌟 윷 던지는 곳 바로 아래: 동그란 원형 윷패 토큰 바 (글씨 없이 토큰만 나열) 🌟 ── */
.yut-queue-tokens-container {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yut-queue-tokens-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.yut-token-coin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.05);
  animation: tokenPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.yut-token-coin.is-bonus {
  box-shadow: 0 0 14px rgba(5, 150, 105, 0.5), inset 0 0 6px rgba(5, 150, 105, 0.2);
  animation: tokenPop 0.22s cubic-bezier(0.16, 1, 0.3, 1), bonusGlow 1.2s infinite alternate ease-in-out;
}

@keyframes tokenPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bonusGlow {
  from { transform: scale(1); }
  to { transform: scale(1.1); box-shadow: 0 0 18px rgba(5, 150, 105, 0.8); }
}

/* ── 🌟 윷판 바로 아래 대기실 말 바 🌟 ── */
.yut-waiting-section {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 253, 249, 0.95);
  border: 1.5px dashed #c98a4c;
  border-radius: var(--radius);
  padding: 8px 12px;
  box-sizing: border-box;
  min-height: 64px;
}
.yut-waiting-header {
  font-size: 0.82rem;
  font-weight: 800;
  color: #8b5e34;
}
.yut-waiting-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 38px;
}
.yut-waiting-empty {
  font-size: 0.82rem;
  color: var(--t3);
  font-weight: 600;
}

/* 🌟 동그란 원형 대기말 토큰 */
.yut-waiting-token {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  cursor: default;
  transition: transform 0.16s ease, box-shadow 0.16s;
  user-select: none;
}
.yut-waiting-token.selectable {
  cursor: pointer;
}
.yut-waiting-token.selectable:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 0 0 3px #ffffff, 0 4px 12px rgba(72, 187, 120, 0.9);
}
.yut-waiting-token.selected, .yut-board-piece.selected {
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 3px #ffffff, 0 0 16px #38a169 !important;
  border-color: #ffffff !important;
}

/* 🌟 체스 방식: 목적지 노드 위에 윷패 이름(도, 개 등) 뱃지 표시 및 52px 넓은 터치 영역 🌟 */
.yut-board-node.dest-highlight {
  border-color: #e53e3e !important;
  background: #ffeded !important;
  transform: translate(-50%, -50%) scale(1.3) !important;
  box-shadow: 0 0 16px rgba(229, 62, 62, 0.9), inset 0 0 6px rgba(229, 62, 62, 0.5) !important;
  animation: destNodeGlow 0.9s infinite alternate ease-in-out;
  z-index: 50 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* 🌟 대충 근처를 눌러도 100% 클릭되도록 투명 히트박스 확장 */
.yut-board-node.dest-highlight::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 51;
}

.yut-board-node.dest-highlight::after {
  content: attr(data-yut-label);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #e53e3e;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 52;
}

/* 🏁 완주 골인 전용 대형 클릭 영역 */
.yut-finish-target {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yut-finish-btn {
  background: linear-gradient(135deg, #e53e3e, #c53030) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 16px rgba(229, 62, 62, 0.6) !important;
  cursor: pointer !important;
  animation: finishPulse 1s infinite alternate ease-in-out;
}
@keyframes finishPulse {
  from { transform: scale(1); box-shadow: 0 4px 12px rgba(229, 62, 62, 0.5); }
  to { transform: scale(1.08); box-shadow: 0 6px 20px rgba(229, 62, 62, 0.9); }
}


/* =====================================================================
   11. YACHT DICE (부드러운 3D 주사위 롤 & 말풍선 팝업 & 고정 너비 점수표)
   ===================================================================== */
.yacht-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1020px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.yacht-header {
  padding: 12px 18px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yh-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.yh-round-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--green-deep);
  background: var(--green-tint);
  border: 1px solid var(--green-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.yh-rolls-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t2);
}
.yh-rolls-badge strong {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 900;
}
.rolls-3 { background: var(--green-tint); color: var(--green-deep); }
.rolls-2 { background: #e2e8f0; color: #2b6cb0; }
.rolls-1 { background: var(--coral-tint); color: var(--coral); }
.rolls-0 { background: #fed7d7; color: #9b2c2c; }

.yacht-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .yacht-main-grid {
    grid-template-columns: 1fr;
  }
}

.yacht-board {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.yacht-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--t1);
  border-bottom: 1.5px solid var(--border-sub);
  padding-bottom: 8px;
}
.yh-sub-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--t3);
}

/* ── 🌟 일체형 원목 3D 주사위 트레이 테이블 (상단 벨벳 롤링 존 + 하단 5칸 일체형 원목 슬롯) ── */
.dice-tray-table {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #6b2d0c 0%, #3e1906 100%);
  border: 3.5px solid #85370e;
  border-radius: 18px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* 상단 롤링 벨벳 존 */
.dice-felt-area {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 10px;
  background: radial-gradient(circle at 50% 45%, #242f42 0%, #111827 100%);
  box-shadow: inset 0 5px 18px rgba(0, 0, 0, 0.6);
  perspective: 900px;
  min-height: 135px;
}

.dice-rolling-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  transition: all 0.25s ease;
}

/* 🌟 주사위 표면을 덮는 족보 팝업 오버레이 (자연스러운 페이드아웃) */
.dice-combo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  border-radius: 14px 14px 0 0;
  opacity: 1;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  animation: comboOverlayFadeIn 0.2s ease forwards;
}
.dice-combo-overlay.hidden {
  display: none !important;
  opacity: 0;
}
.dice-combo-overlay.fade-out {
  opacity: 0 !important;
  transform: scale(0.92) !important;
}

@keyframes comboOverlayFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.dice-combo-pill {
  padding: 10px 24px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #fbbf24;
  border-radius: 999px;
  color: #fbbf24;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: comboPillPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dice-combo-pill.is-yacht {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #fef3c7;
  color: #ffffff;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.8), 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes comboPillPop {
  0% { transform: scale(0.65); opacity: 0; }
  75% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 🌟 하단 자연스럽게 붙은 일체형 원목 5칸 수납 슬롯 존 */
.dice-wood-shelf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #421b06 0%, #291003 100%);
  border-top: 3px solid #230d02;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.7);
  padding: 10px 10px 12px 10px;
}

.wood-slot {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: radial-gradient(circle, #2d1304 0%, #150801 100%);
  border: 1.5px solid #5a2608;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}
.wood-slot.has-die {
  border-color: #a1440d;
  background: radial-gradient(circle, #3d1a05 0%, #1c0a01 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.25);
}

.dice-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 8px;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease;
  user-select: none;
  flex-shrink: 0;
}
.dice-slot.clickable {
  cursor: pointer;
}
.dice-slot.clickable:hover {
  transform: translateY(-3px) scale(1.05);
}

.dice-slot.align-pop {
  animation: gentleAlignPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes gentleAlignPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 🌟 주사위가 슉 이동하는 부드러운 스우프 애니메이션 (이동한 단일 주사위에만 적용) */
.dice-slot.anim-to-keeper {
  animation: swoopToKeeper 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes swoopToKeeper {
  0% { transform: translateY(-30px) scale(1.1); opacity: 0.65; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.dice-slot.anim-to-tray {
  animation: swoopToTray 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes swoopToTray {
  0% { transform: translateY(30px) scale(0.92); opacity: 0.65; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.keep-badge {
  display: none !important;
}

.dice-3d-wrap {
  width: 52px;
  height: 52px;
  perspective: 600px;
}

.dice-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}

.dice-cube .face {
  position: absolute;
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 5px;
  box-sizing: border-box;
}

/* 6개 면 3D 트랜스폼 (52px 큐브 기준 translateZ 26px) */
.face-1 { transform: rotateY(0deg) translateZ(26px); }
.face-2 { transform: rotateY(90deg) translateZ(26px); }
.face-3 { transform: rotateX(90deg) translateZ(26px); }
.face-4 { transform: rotateX(-90deg) translateZ(26px); }
.face-5 { transform: rotateY(-90deg) translateZ(26px); }
.face-6 { transform: rotateY(180deg) translateZ(26px); }

/* 주사위 점(Pip) 배치 */
.pip {
  display: block;
  width: 9px;
  height: 9px;
  background: #1e293b;
  border-radius: 50%;
  margin: auto;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pip-red {
  background: #e53e3e !important;
  width: 15px !important;
  height: 15px !important;
}

.pip-tl { grid-area: 1 / 1; }
.pip-tr { grid-area: 1 / 3; }
.pip-ml { grid-area: 2 / 1; }
.pip-c  { grid-area: 2 / 2; }
.pip-mr { grid-area: 2 / 3; }
.pip-bl { grid-area: 3 / 1; }
.pip-br { grid-area: 3 / 3; }

/* ── 주사위 굴리기 버튼 ── */
.dice-action-area {
  display: flex;
  justify-content: center;
}
.btn-roll-dice {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: #ffffff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(72, 187, 120, 0.4);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  overflow: hidden;
}
.btn-roll-dice:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(72, 187, 120, 0.5);
}
.btn-roll-dice:active:not(:disabled),
.btn-roll-dice.shaking {
  transform: scale(0.97);
  background: linear-gradient(135deg, #e53e3e, #c53030);
  box-shadow: 0 2px 10px rgba(229, 62, 62, 0.6);
  animation: shakeButton 0.1s infinite alternate;
}
@keyframes shakeButton {
  from { transform: scale(0.97) rotate(-0.8deg); }
  to { transform: scale(0.97) rotate(0.8deg); }
}
.btn-roll-dice:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}
.btn-roll-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── 점수표 (Scoresheet Table) ── */
.yacht-scoresheet {
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  position: relative;
  overflow: visible !important;
}
.scoresheet-table-wrap {
  overflow: visible !important;
  position: relative;
}
.scoresheet-table {
  width: 100%;
  table-layout: fixed; /* 🌟 점수 길이에 상관없이 칸 가로 너비 고정 */
  border-collapse: collapse;
  font-size: 0.84rem;
}
.scoresheet-table th,
.scoresheet-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-sub);
  text-align: center;
  box-sizing: border-box;
}
.scoresheet-table td.score-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoresheet-table thead th {
  background: var(--bg-hover);
  font-weight: 800;
  color: var(--t2);
  border-bottom: 2px solid var(--border);
}
.col-category {
  text-align: left !important;
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  overflow: visible !important;
}
.col-player {
  width: auto;
  text-align: center;
}
.th-player-name {
  font-weight: 900;
  color: var(--t1);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 🌟 닉네임 길면 2줄로 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.4em;
}

/* 🌟 카테고리 셀 (괄호/보조설명 없이 1줄 & 클릭 시 말풍선 팝업) */
.cat-cell {
  position: relative;
  text-align: left !important;
  user-select: none;
  overflow: visible !important;
}
.cat-interactive {
  cursor: pointer;
  transition: background 0.15s ease;
}
.cat-interactive:hover {
  background: var(--green-tint);
  border-radius: 4px;
}
.cat-cell-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.cat-svg-icon {
  width: 19px;
  height: 19px;
  margin-right: 7px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.cat-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* ── 🌟 화이트 좌측 말풍선 팝업 (White Left Tooltip Bubble) ── */
.cat-tooltip-bubble {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background: var(--bg-card);
  color: #1e293b;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.08);
  width: 210px;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: normal; /* 말풍선 내부는 정상 줄바꿈 */
  animation: popInTooltipLeft 0.16s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
}
.cat-tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  border-width: 7px 0 7px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #ffffff;
  filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.05));
}
.cat-tooltip-bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #cbd5e1;
}

@keyframes popInTooltipLeft {
  from { opacity: 0; transform: translateY(-50%) translateX(6px) scale(0.95); }
  to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

.tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 5px;
  margin-bottom: 6px;
  color: var(--green-deep);
  font-weight: 900;
  font-size: 0.84rem;
}
.tooltip-close {
  cursor: pointer;
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: auto;
  transition: color 0.15s ease;
  user-select: none;
}
.tooltip-close:hover {
  color: #e53e3e;
}
.tooltip-body {
  font-weight: 600;
  color: #475569;
}

/* 🌟 점수 셀 & 상대방 실시간 프리뷰 */
.score-cell {
  font-size: 0.88rem;
  transition: background 0.15s ease;
}
.score-cell.my-col {
  background: rgba(240, 253, 244, 0.5);
}
.score-val.confirmed {
  font-weight: 900;
  color: var(--t1);
}
.score-val.preview {
  font-weight: 800;
}
.score-val.my-preview {
  color: #94a3b8;
  opacity: 0.75;
}
.score-val.opp-preview {
  color: #a0aec0 !important;
  opacity: 0.7;
}
.score-cell.opp-preview-cell {
  background: rgba(241, 245, 249, 0.5);
}

.score-cell.preview-active {
  background: var(--green-tint) !important;
  cursor: pointer;
  border-radius: 4px;
}
.score-cell.preview-active:hover {
  background: #c6f6d5 !important;
  transform: scale(1.04);
}
.score-cell.preview-active:hover .score-val.preview {
  color: var(--green-deep) !important;
  font-weight: 900;
  opacity: 1;
}

/* 상단 소계 (Subtotal) */
.row-subtotal td {
  background: #e2e8f0;
  border-top: 2px solid #94a3b8;
  border-bottom: 1.5px solid #cbd5e1;
  font-weight: 900;
}
.row-subtotal .cat-name {
  color: #1e293b;
  font-weight: 900;
}
.subtotal-val {
  font-weight: 900;
  color: #1e293b;
  font-size: 0.88rem;
}
.subtotal-val.bonus-achieved {
  color: var(--green-deep);
}

/* +35 보너스 행 */
.row-bonus td {
  background: #e2e8f0;
  border-bottom: 2px solid #94a3b8;
  font-weight: 900;
}
.row-bonus .cat-name {
  color: #1e293b;
  font-weight: 900;
}
.bonus-val-small {
  display: inline-block;
  color: var(--green-deep);
  font-weight: 900;
  font-size: 0.9rem;
}
.bonus-val-empty {
  color: var(--t3);
  font-weight: 700;
}

/* 최종 총점 (Total) */
.row-total td {
  background: var(--bg-card);
  border-top: 2px solid var(--border);
  font-size: 0.92rem;
  font-weight: 900;
}
.total-cell strong {
  color: var(--green-deep);
  font-size: 1.05rem;
}

/* ═══════════════════════════════════════════════════════════════
   🥋 장기 (Janggi) 사용자 레퍼런스 이미지 100% 완벽 일치 스타일링
   - 밝은 미송/황토 원목 대국판 + 선명한 흑색 격자선 + 정통 화점 마커
   - 3D 입체 육각/팔각 화이트 목각 기물 + 굵은 정통 궁서체 한자 (초: 청색 / 한: 홍색)
   - 선택된 기물 4방향 블루 코너 브래킷 (┌ ┐ └ ┘) 포커스
   - 담백한 '장군' 배지 및 상단 우측 '기권' 버튼
   ═══════════════════════════════════════════════════════════════ */

.janggi-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: none;
}

.janggi-header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.janggi-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.janggi-header-area .turn-label.cho-turn {
  background: rgba(11, 56, 143, 0.12);
  border-color: rgba(11, 56, 143, 0.35);
  color: #0b388f;
}
.janggi-header-area .turn-label.han-turn {
  background: rgba(204, 31, 26, 0.12);
  border-color: rgba(204, 31, 26, 0.35);
  color: #cc1f1a;
}

/* 🌟 담백한 '장군' 알림 배지 */
.janggi-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fee2e2;
  color: #cc1f1a;
  border: 1.5px solid #f87171;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.88rem;
  animation: pulseCheck 1s infinite;
}
@keyframes pulseCheck {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 31, 26, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 10px 2px rgba(204, 31, 26, 0.3); }
}

/* 상단 우측 기권 버튼 */
.btn-jg-header-resign {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-jg-header-resign:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

/* 🌟 레퍼런스 이미지 대국판 카드 (황토빛 외곽 프레임) */
.janggi-card {
  background: #c99a61;
  border: 3px solid #ab7e48;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), inset 0 1px 3px rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.janggi-board-container {
  width: 100%;
  aspect-ratio: 420 / 470;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.25);
}

/* 밝은 미송 원목 보드 */
.janggi-wood-board {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fce8a6 0%, #fae29c 45%, #f2d486 100%);
  position: relative;
}

.janggi-grid-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 선명한 흑색 격자선 (레퍼런스 이미지 완벽 일치) */
.jg-border-line {
  fill: none;
  stroke: #000000;
  stroke-width: 2.5;
}
.jg-inner-line {
  stroke: #111111;
  stroke-width: 1.25;
  stroke-linecap: square;
}
.jg-palace-line {
  stroke: #111111;
  stroke-width: 1.25;
  stroke-linecap: square;
}

.janggi-pieces-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 🌟 3D 입체 기물 & 깊이감 있는 3중 입체 그림자 */
.janggi-piece {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s cubic-bezier(0.25, 1, 0.5, 1), filter 0.16s ease;
  z-index: 10;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)) 
          drop-shadow(0 7px 12px rgba(0, 0, 0, 0.35)) 
          drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}

/* 3단계 기물 크기 비례 (시원하고 큼직하게 확대) */
.janggi-piece.piece-size-large {
  width: 12.8%;
  aspect-ratio: 119 / 105;
}
.janggi-piece.piece-size-medium {
  width: 10.8%;
  aspect-ratio: 119 / 105;
}
.janggi-piece.piece-size-small {
  width: 9.0%;
  aspect-ratio: 119 / 105;
}

.jg-piece-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 🌟 선택된 기물: 레퍼런스 이미지와 동일한 4방향 블루 코너 브래킷 (┌ ┐ └ ┘) */
.jg-select-brackets {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  pointer-events: none;
  z-index: 15;
}
.bracket-tl, .bracket-tr, .bracket-bl, .bracket-br {
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: #0b388f;
  border-style: solid;
}
.bracket-tl {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
}
.bracket-tr {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
}
.bracket-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
}
.bracket-br {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
}

.janggi-piece.clickable {
  cursor: pointer;
}
.janggi-piece.clickable:hover {
  transform: translate(-50%, -55%) scale(1.1);
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.4)) 
          drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42)) 
          drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
  z-index: 20;
}

.janggi-piece.selected {
  transform: translate(-50%, -58%) scale(1.15);
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45)) 
          drop-shadow(0 18px 26px rgba(0, 0, 0, 0.48)) 
          drop-shadow(0 0 10px rgba(11, 56, 143, 0.75));
  z-index: 30;
}

.janggi-piece.last-move {
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)) 
          drop-shadow(0 7px 12px rgba(0, 0, 0, 0.35)) 
          drop-shadow(0 0 8px rgba(11, 56, 143, 0.8));
}

/* 🌟 이동 가능 마커 */
.janggi-move-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 9%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
}
.janggi-move-dot .dot-inner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.9);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.85);
  transition: transform 0.15s ease;
}
.janggi-move-dot:hover .dot-inner {
  transform: scale(1.35);
  background: #10b981;
}

.janggi-move-dot.is-capture {
  background: radial-gradient(circle, rgba(204, 31, 26, 0.25) 0%, rgba(204, 31, 26, 0.05) 70%);
  border: 2px dashed #cc1f1a;
}
.janggi-move-dot.is-capture .dot-inner {
  background: #cc1f1a;
  box-shadow: 0 0 10px rgba(204, 31, 26, 0.9);
}

.janggi-last-from-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px dashed rgba(11, 56, 143, 0.7);
  background: rgba(11, 56, 143, 0.12);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 알까기 (Alkkagi) 전용 스타일링 (미니멀 & 스크롤 차단)
   ═══════════════════════════════════════════════════════════════ */
.alkkagi-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: none;
  touch-action: none;
}

.alkkagi-header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.alkkagi-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alkkagi-arena-card {
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#ak-canvas {
  width: 100%;
  aspect-ratio: 520 / 570;
  display: block;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   🌙 다크 모드 (모던 웹 표준 다크 테마 / Slate & Charcoal)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── 기본 배경 팔레트 (GitHub / Tailwind Slate 표준 다크) ── */
  --bg:           #0f172a;    /* 메인 배경: 딥 슬레이트 (Slate 900) */
  --bg-card:      #1e293b;    /* 카드/패널: 슬레이트 표면 (Slate 800) */
  --bg-subtle:    #0f172a;    /* 서브 영역/리스트/인풋 배경 */
  --bg-hover:     #334155;    /* 호버/인터랙션 (Slate 700) */
  --bg-active:    #3e4e68;    /* 활성 아이템 */

  /* ── 테두리 ── */
  --border:       #334155;    /* 깔끔하고 선명한 테두리 (Slate 700) */
  --border-sub:   #1e293b;    /* 서브 테두리 */
  --border-hi:    #475569;    /* 하이라이트 테두리 */

  /* ── 포인트 컬러 (표준 다크 모드 최적화 채도) ── */
  --green:        #22c55e;    /* 산뜻한 에메랄드 그린 */
  --green-hover:  #16a34a;    /* 그린 호버 */
  --green-deep:   #4ade80;    /* 텍스트/뱃지용 밝은 그린 (Green 400) */
  --green-tint:   rgba(34, 197, 94, 0.15);
  --green-tint-hi:rgba(34, 197, 94, 0.25);
  --green-border: rgba(34, 197, 94, 0.4);

  /* ── 보조 포인트 컬러 ── */
  --yellow:       #fbbf24;
  --yellow-tint:  rgba(251, 191, 36, 0.15);
  --yellow-border:rgba(251, 191, 36, 0.35);

  --coral:        #f87171;
  --coral-tint:   rgba(248, 113, 113, 0.15);
  --coral-border: rgba(248, 113, 113, 0.35);

  --sky:          #38bdf8;
  --sky-tint:     rgba(56, 189, 248, 0.15);
  --sky-border:   rgba(56, 189, 248, 0.35);

  --purple:       #a855f7;
  --purple-tint:  rgba(168, 85, 247, 0.15);
  --purple-border:rgba(168, 85, 247, 0.35);

  /* ── 텍스트 ── */
  --t1:           #f8fafc;    /* 주요 헤드라인 (Slate 50) */
  --t2:           #cbd5e1;    /* 본문 텍스트 (Slate 300) */
  --t3:           #94a3b8;    /* 설명/보조 텍스트 (Slate 400) */
  --t4:           #64748b;    /* 연한 텍스트/플레이스홀더 (Slate 500) */

  /* ── 그림자 ── */
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow:       0 4px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-green: 0 4px 14px rgba(34, 197, 94, 0.25);
}

/* ── 다크모드 컴포넌트 세부 스타일링 ── */
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .home-top-bar,
[data-theme="dark"] .room-top-bar,
[data-theme="dark"] .game-top-bar,
[data-theme="dark"] .game-title-bar,
[data-theme="dark"] .room-controls {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-subtle) !important;
  color: var(--t1) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder {
  color: var(--t4) !important;
}

[data-theme="dark"] .lobby-list {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

/* ── 로비 방 카드 (Lobby Room Card) 다크모드 적용 ── */
[data-theme="dark"] .lobby-room-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .lobby-room-card:hover {
  border-color: var(--green) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 방 카드 내부 배지 및 서브 요소 텍스트 색상 대응 */
[data-theme="dark"] .lrc-code-badge,
[data-theme="dark"] .lrc-count-badge,
[data-theme="dark"] .lrc-status-badge {
  background: var(--bg-subtle) !important;
  color: var(--t2) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .lrc-host-name {
  color: var(--t1) !important;
}
[data-theme="dark"] .room-card:hover {
  border-color: var(--green) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .room-card-header {
  border-bottom-color: var(--border-sub) !important;
}

[data-theme="dark"] .lobby-filter-btn {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t3) !important;
}
[data-theme="dark"] .lobby-filter-btn:hover {
  color: var(--t1) !important;
}
[data-theme="dark"] .lobby-filter-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-color: var(--green) !important;
}

[data-theme="dark"] .player-item {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .player-item.is-me {
  background: rgba(34, 197, 94, 0.12) !important;
  border-left: 4.5px solid var(--green) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
[data-theme="dark"] .player-item.ready {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

[data-theme="dark"] .gsp-item {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .gsp-item.is-me {
  background: rgba(34, 197, 94, 0.12) !important;
  border-left: 4.5px solid var(--green) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
[data-theme="dark"] .gsp-item.gsp-spectator-item.is-me {
  background: rgba(56, 189, 248, 0.12) !important;
  border-left: 4.5px solid var(--sky) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] .gsp-item.is-current-turn {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: var(--green) !important;
}

[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-messages-wrap {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .chat-msg,
[data-theme="dark"] .chat-msg.other,
[data-theme="dark"] .chat-msg.me {
  background: transparent !important;
  border: none !important;
}
[data-theme="dark"] .chat-msg.me .chat-bubble {
  background: var(--green) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}
[data-theme="dark"] .chat-msg.other .chat-bubble {
  background: var(--bg-hover) !important;
  color: #f8fafc !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

[data-theme="dark"] .overlay {
  background: rgba(15, 23, 42, 0.8) !important;
}
[data-theme="dark"] .modal,
[data-theme="dark"] .settings-modal,
[data-theme="dark"] .dialog-box,
[data-theme="dark"] .profile-bubble-popup {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .settings-header,
[data-theme="dark"] .settings-footer {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .btn-icon {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .btn-icon:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .room-game-btn {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .room-game-btn:hover {
  border-color: var(--green) !important;
}
[data-theme="dark"] .room-game-btn.selected {
  background: var(--green-tint) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .room-game-btn.selected .rgb-icon {
  background: var(--green) !important;
  color: #ffffff !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .rgb-icon {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--green) !important;
}

[data-theme="dark"] .setting-item {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .btn-sound-toggle {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
/* 방 카드 내부의 모든 자식 요소 배경을 투명하게 설정 */
[data-theme="dark"] .room-card * {
  background-color: transparent;
}

/* 방 카드 헤더 등 특정 영역이 개별 배경을 써야 한다면 지정 */
[data-theme="dark"] .room-card-header {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-sub) !important;
}

/* ── 다크 모드: 게임별 세부 디자인 최적화 ── */
[data-theme="dark"] .cat-cell {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .cat-name {
  color: var(--t1) !important;
}
[data-theme="dark"] .cat-svg-icon rect {
  fill: #334155 !important;
}
[data-theme="dark"] .cat-svg-icon circle {
  fill: #f8fafc !important;
}
[data-theme="dark"] .score-cell {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .score-cell.confirmed .score-val {
  color: var(--t1) !important;
}
[data-theme="dark"] .score-cell.preview-active {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .score-cell.opp-preview-cell {
  background: rgba(248, 113, 113, 0.12) !important;
}
[data-theme="dark"] .cat-tooltip-bubble {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .cat-tooltip-bubble .tooltip-header {
  border-bottom: 1px solid #334155 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .cat-tooltip-bubble .tooltip-body {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .chess-clock-bar,
[data-theme="dark"] .baskin-counter,
[data-theme="dark"] .typing-prompt-box,
[data-theme="dark"] .typing-input-field,
[data-theme="dark"] .wc-input-field,
[data-theme="dark"] .cm-guess-input,
[data-theme="dark"] .yut-score-pill,
[data-theme="dark"] .yut-waiting-area {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .chess-clock-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .chess-clock-item.active {
  border-color: var(--green) !important;
  background: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="dark"] .baskin-counter {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .baskin-progress {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .baskin-num {
  background: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
  color: var(--t3) !important;
}
[data-theme="dark"] .baskin-num.called-p0 {
  border-color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.22) !important;
  color: #4ade80 !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .baskin-num.called-p1 {
  border-color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.22) !important;
  color: #60a5fa !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .baskin-num.called-p2 {
  border-color: #c084fc !important;
  background: rgba(192, 132, 252, 0.22) !important;
  color: #c084fc !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .baskin-num.called-p3 {
  border-color: #fb923c !important;
  background: rgba(251, 146, 60, 0.22) !important;
  color: #fb923c !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .baskin-num.called-p4 {
  border-color: #facc15 !important;
  background: rgba(250, 204, 21, 0.22) !important;
  color: #facc15 !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .btn-baskin {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .toast {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* ── 화면 테마 전환 토글 버튼 그룹 ── */
.theme-toggle-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  padding: 3px;
  border-radius: var(--radius-sm);
}

.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--t3);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-theme-toggle i {
  font-size: 0.88rem;
}
.btn-theme-toggle:hover:not(.active) {
  color: var(--t1);
  background: var(--bg-card);
}
.btn-theme-toggle.active {
  background: var(--bg-card);
  color: var(--green-deep);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.btn-theme-toggle#btn-theme-light.active i {
  color: var(--yellow);
}
.btn-theme-toggle#btn-theme-dark.active i {
  color: var(--sky);
}

[data-theme="dark"] .theme-toggle-group {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .btn-theme-toggle {
  color: var(--t3) !important;
}
[data-theme="dark"] .btn-theme-toggle.active {
  background: var(--bg-card) !important;
  color: #f8fafc !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .btn-theme-toggle#btn-theme-light.active i {
  color: #fbbf24 !important;
}
[data-theme="dark"] .btn-theme-toggle#btn-theme-dark.active i {
  color: #38bdf8 !important;
}

/* ── 다크 모드: 스크롤바 & 모달 닫기 & 세부 설정 바 ── */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

[data-theme="dark"] .btn-close-settings,
[data-theme="dark"] .btn-close-guide,
[data-theme="dark"] .bubble-popup-close {
  background: var(--bg-subtle) !important;
  color: var(--t3) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .btn-close-settings:hover,
[data-theme="dark"] .btn-close-guide:hover,
[data-theme="dark"] .bubble-popup-close:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .game-extra-settings-bar {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .extra-opt-btn {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .extra-opt-btn:hover {
  color: var(--t1) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .extra-opt-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  border-color: var(--green) !important;
}
/* ── 다크 모드: 1. 로비 공개/비밀방 필터 & 방 만들기 옵션 & 최대 인원 ── */
[data-theme="dark"] .lobby-tab-group {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .lobby-tab-btn {
  color: var(--t3) !important;
}
[data-theme="dark"] .lobby-tab-btn:hover:not(.active) {
  color: var(--t1) !important;
}
[data-theme="dark"] .lobby-tab-btn.active {
  background: var(--bg-card) !important;
  color: #f8fafc !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .lobby-tab-btn#tab-lobby-public.active i {
  color: #38bdf8 !important;
}
[data-theme="dark"] .lobby-tab-btn#tab-lobby-private.active i {
  color: #fbbf24 !important;
}

[data-theme="dark"] .create-room-options {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .create-opt-row {
  border-color: var(--border) !important;
}
[data-theme="dark"] .create-opt-label {
  color: var(--t2) !important;
}
[data-theme="dark"] .room-type-toggle {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .room-type-btn {
  color: var(--t3) !important;
}
[data-theme="dark"] .room-type-opt input:checked + .room-type-btn {
  background: var(--green) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .capacity-stepper {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .capacity-stepper .btn-step {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .capacity-stepper .btn-step:hover {
  background: var(--bg-hover) !important;
  border-color: var(--green) !important;
  color: var(--green-deep) !important;
}
[data-theme="dark"] .capacity-val {
  color: var(--t1) !important;
  font-weight: 800 !important;
}

/* ── 다크 모드: 2. 방 화면 대기실 채팅창 ── */
[data-theme="dark"] .room-chat-panel {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .chat-messages-wrap {
  background: var(--bg-card) !important;
  border: none !important;
}
[data-theme="dark"] .chat-system-msg {
  background: var(--bg-hover) !important;
  color: var(--t3) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .chat-count-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--green-deep) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
[data-theme="dark"] .room-chat-panel .chat-input-form {
  border-top-color: var(--border-sub) !important;
}
[data-theme="dark"] .room-chat-panel .chat-input {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .room-chat-panel .chat-input:focus {
  background: var(--bg-card) !important;
  border-color: var(--green) !important;
}

/* ── 다크 모드: 3. 게임 선택 카드 진영 선택 & 라운드 수 ── */
[data-theme="dark"] .game-extra-settings-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .extra-setting-item {
  background: transparent !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .esi-label {
  color: var(--t2) !important;
}
[data-theme="dark"] .esi-stepper {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
}
[data-theme="dark"] .esi-stepper .btn-step {
  background: var(--bg-subtle) !important;
  border: none !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .esi-stepper .btn-step:hover {
  background: var(--bg-hover) !important;
  color: var(--green-deep) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .esi-val {
  color: var(--t1) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .side-select-toggle {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
}
[data-theme="dark"] .side-btn {
  color: var(--t3) !important;
}
[data-theme="dark"] .side-btn:hover:not(.active) {
  color: var(--t1) !important;
}
[data-theme="dark"] .side-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .side-btn#btn-side-black i {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .side-btn#btn-side-white i {
  color: #f8fafc !important;
}

/* ── 다크 모드: 4. 인게임 실시간 관전 배지 & 관전자 목록 ── */
.spectator-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sky-tint);
  color: var(--sky);
  border: 1px solid var(--sky-border);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  margin-left: 6px;
}
.gsp-spectator-header {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--sky);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 4px;
  border-top: 1px solid var(--border-sub);
  margin-top: 6px;
}

[data-theme="dark"] .spectator-mode-badge {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .gsp-spectator-header {
  color: #38bdf8 !important;
  border-top-color: var(--border-sub) !important;
}
[data-theme="dark"] .gsp-tag {
  color: var(--t3) !important;
}
[data-theme="dark"] .gsp-item.gsp-spectator-item {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

/* ── 다크 모드: 5. 야추 다이스 Subtotal & +35 보너스 행 (더 진하고 묵직한 스타일링) ── */
[data-theme="dark"] .row-subtotal td {
  background: #0b1526 !important;
  border-top: 2px solid #1e3a8a !important;
  border-bottom: 1.5px solid #1e293b !important;
}
[data-theme="dark"] .row-subtotal .cat-name {
  color: #60a5fa !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .subtotal-val {
  color: #93c5fd !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .subtotal-val.bonus-achieved {
  color: #4ade80 !important;
}

[data-theme="dark"] .row-bonus td {
  background: #0b1526 !important;
  border-bottom: 2px solid #1e3a8a !important;
}
[data-theme="dark"] .row-bonus .cat-name {
  color: #60a5fa !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .bonus-val-small {
  color: #4ade80 !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .bonus-val-empty {
  color: #64748b !important;
}

/* ── 다크 모드: 프로필 설정 팝업 & 취소 버튼 & 동물 아이콘 버튼 ── */
[data-theme="dark"] .profile-bubble-popup {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .profile-preview-area {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .profile-preview-name {
  color: var(--t1) !important;
}
[data-theme="dark"] .profile-section-label {
  color: var(--t3) !important;
}
[data-theme="dark"] .profile-input-nick {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .avatar-icon-btn {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .avatar-icon-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .avatar-icon-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-secondary:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}

/* ── 다크 모드: 사이드바 게임 설명 말풍선 ── */
[data-theme="dark"] .sidebar-game-bubble {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .sidebar-game-bubble::before {
  background: var(--bg-card) !important;
  border-left: 1.5px solid var(--border) !important;
  border-bottom: 1.5px solid var(--border) !important;
}
[data-theme="dark"] .sgb-desc {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .sgb-title {
  color: var(--t1) !important;
}

/* ── 다크 모드: 인게임 상단바 & 채팅창 ── */
[data-theme="dark"] .game-header {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .game-title-area {
  color: var(--t1) !important;
}
[data-theme="dark"] .game-room-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--green-deep) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
[data-theme="dark"] #btn-game-settings {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] #btn-game-settings:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .game-sidebar-chat,
[data-theme="dark"] .chat-sidebar {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .chat-input-form {
  border-color: var(--border-sub) !important;
}
[data-theme="dark"] .chat-input {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .chat-input:focus {
  background: var(--bg-card) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .game-sidebar-players {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .game-chat-panel {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ── 다크 모드: 캐치마인드 게임 카드 ── */
[data-theme="dark"] .cm-header-card,
[data-theme="dark"] .cm-canvas-card,
[data-theme="dark"] .cm-guess-bar {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .cm-guess-input {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .cm-guess-input:focus {
  background: var(--bg-card) !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .cm-toolbar {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .cm-tool-btn {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .cm-tool-btn:hover {
  background: var(--green-tint) !important;
  border-color: var(--green) !important;
  color: var(--green-deep) !important;
}
[data-theme="dark"] .cm-word-banner {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .cm-word-title {
  color: var(--t1) !important;
}

/* ── 다크 모드: 쿼리도 게임 카드 ── */
[data-theme="dark"] .quoridor-toolbar,
[data-theme="dark"] .quoridor-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .qd-tool-btn {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}
[data-theme="dark"] .qd-tool-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--green) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .qd-tool-btn.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .qd-goal-hint {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--green-deep) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

/* ── 다크 모드: 베스킨라빈스 버튼 & 카드 ── */
[data-theme="dark"] .baskin-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .baskin-pick-btn {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="dark"] .baskin-pick-btn:hover:not(:disabled) {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
}

/* ── 다크 모드: 야추 다이스 카드 & 점수표 ── */
[data-theme="dark"] .yacht-board,
[data-theme="dark"] .yacht-scoresheet {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .scoresheet-table thead th {
  background: var(--bg-subtle) !important;
  color: var(--t2) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .scoresheet-table th,
[data-theme="dark"] .scoresheet-table td {
  border-bottom-color: var(--border-sub) !important;
}
[data-theme="dark"] .th-player-name {
  color: var(--t1) !important;
}

/* 아바타 영역 내 절대 좌표 지정을 위한 설정 */
.player-list li, .player-avatar {
  position: relative;
}

/* 프로필 아바타 우상단 이모지 팝업 버블 */
.profile-emoji-bubble {
  position: absolute;
  top: 18px;   /* 🌟 위에서 아래로 내려서 우하단 배치 (필요시 20px~24px 조절) */
  left: 22px;  /* 🌟 기존 32px에서 약간 왼쪽으로 당김 */
  width: 22px; /* 🌟 기존 30px에서 22px로 축소 */
  height: 22px;
  z-index: 20;
  pointer-events: none;
  animation: emojiPopBounce 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.profile-emoji-bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 뿅 나타나서 통통 튀다 스르륵 사라지는 애니메이션 */
@keyframes emojiPopBounce {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  25% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  40% { transform: scale(0.95) rotate(-3deg); opacity: 1; }
  55% { transform: scale(1.1) rotate(0deg); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.4) translateY(-12px); opacity: 0; }
}


/* 인게임 좌측 영역 세로 정렬 */
.game-left-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px; /* 기존 인게임 사이드바 너비에 맞춤 */
  box-sizing: border-box;
}

.game-sidebar-players {
  width: 100%;
}

/* 인게임 이모지 패널 */
.game-emoji-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 8px 10px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}

/* 인게임 플레이어 리스트 아이템 상대 좌표 설정 (이모지 팝업용) */
.gsp-list li, .gsp-avatar {
  position: relative !important;
}

/* 인게임 사이드바 및 리스트 오버플로우 잘림 방지 */
.game-sidebar-players,
.gsp-list,
.gsp-list li {
  overflow: visible !important;
  position: relative !important;
}

/* 인게임 아바타 영역 절대 좌표 기준 설정 */
.gsp-avatar, .gsp-list li > div:first-child {
  position: relative !important;
}

/* 🌟 인게임 화면(작은 아바타) 전용 이모지 위치 및 크기 조절 */
.gsp-avatar .profile-emoji-bubble {
  width: 22px;
  height: 16px;
  top: 16px;         /* 아바타 하단에 맞게 위로 끌어올림 (기존 22px -> 16px) */
  left: 16px;        /* 왼쪽으로 당김 (기존 26px -> 16px) */
}

/* 관전자 아바타는 투명도가 있어서 이모지도 흐려지는 것 방지 */
.gsp-spectator-item .gsp-avatar .profile-emoji-bubble {
  opacity: 1 !important; 
}

/* Netlify 주입 배지 및 팝업 카드 강제 숨김 */
#nl-badge,
.nl-badge,
#nl-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   이모지 버튼 다크모드 스타일
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .room-emoji-panel,
[data-theme="dark"] .game-emoji-panel {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .btn-emoji:hover {
  background-color: var(--bg-hover, rgba(255, 255, 255, 0.08));
}

/* 이모지 SVG는 트위터 twemoji라 자체 색상이 있으므로 별도 filter 불필요 */

/* ═══════════════════════════════════════════════════════════════
   토글 스위치 (자동 준비 설정 등)
   ═══════════════════════════════════════════════════════════════ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border, #cbd5e0);
  border-radius: 24px;
  transition: background 0.2s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--green, #38a169);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.setting-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #718096);
  margin-top: 4px;
  padding-left: 2px;
}