/* ═══════════════════════════════════════════════════════════
   Apple-Inspired Design System (상표 직접 사용 X, 스타일만 차용)
   ─────────────────────────────────────────────
   · Palette : #FFFFFF / #F5F5F7 / 강조색 #FF3B30 (로고색 계열)
   · Font    : -apple-system / SF Pro (OS 내장 폰트 — 라이선스 이슈 없음)
   · Radius  : 12~16px 부드러운 곡선
   · Shadow  : 은은한 드롭 + 글래스모피즘 (blur 20px)
   · 테마 시스템 제거 완료 (2026-05-05) — body 게이트는 항상 true
   · cascade 순서: style → theme(stub) → apple → apple-game → apple-system → apple-layout
   ═══════════════════════════════════════════════════════════ */


/* ─── 타이포 ─── */
html, body {
    font-family:
      -apple-system, BlinkMacSystemFont,
      "SF Pro Text", "SF Pro Display",
      "Helvetica Neue", "Segoe UI",
      "Apple SD Gothic Neo", "Noto Sans KR",
      sans-serif !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─── 헤더 / 네비 ─── */
/* nav.lobby-tabs 는 로비 그레이 그라데이션에 녹아들도록 투명 유지 — 이전에 흰색 밴드 처럼 보이는 문제 해결 */
.lobby-header,
.admin-tabs {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
}

nav.lobby-tabs .nav-btn {
    color: var(--text2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}
nav.lobby-tabs .nav-btn:hover { background: rgba(0,0,0,0.04) !important; color: var(--text) !important; }
nav.lobby-tabs .nav-btn.active {
    color: var(--accent) !important;
    background: rgba(255,59,48,0.08) !important;
}

/* ─── 로고 (HULA 텍스트 → 빨간 사과 아이콘) ─── */
.logo h1 {
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 12px;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--text) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.logo h1::before {
    content: '';
    width: 48px; height: 48px;
    background: url('apple-logo.svg') center/contain no-repeat;
    filter: drop-shadow(0 2px 8px rgba(255,59,48,0.25));
}
.logo p { color: var(--text2) !important; }

/* 로비 HUD 안의 HULA 브랜드 텍스트가 있다면 사과로 교체 */
.lobby-brand, .header-logo {
    display: inline-flex; align-items: center; gap: 10px;
}
.lobby-brand::before, .header-logo::before {
    content: '';
    display: inline-block;
    width: 32px; height: 32px;
    background: url('apple-logo.svg') center/contain no-repeat;
}

/* ─── 인증(로그인/회원가입) ─── 실버 크롬 + 중앙 큰 사과 */


/* 로고 영역에 큰 사과 배치 — h1 텍스트 숨기고 사과만 (시각 레퍼런스 재현) */


.tab-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text2) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s;
}
.tab-btn.active {
    background: rgba(0,0,0,0.05) !important;
    color: var(--text) !important;
}

/* ─── 버튼 ─── */


.btn-primary:active { transform: scale(0.97); }

.btn-danger {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 980px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(255,59,48,0.25) !important;
    transition: all 0.15s ease;
}
.btn-danger:hover { background: #E0342A !important; transform: translateY(-1px); }
.btn-danger:active { transform: scale(0.97); }

.btn-sm {
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease;
}
.btn-sm:active { transform: scale(0.97); }

/* ─── 카드 / 컨테이너 ─── */
.wallet-card,
.room-card,
.stat-box,
.admin-card,
.section,
.info-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text) !important;
}
.wallet-amount { color: var(--text) !important; }
.section h2, .section h3 { color: var(--text) !important; }

/* 입력창 공통 */
input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea {
    background: #F5F5F7 !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
}
input[type="text"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    background: #FFFFFF !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(255,59,48,0.10) !important;
    outline: none !important;
}

/* ─── 모달 (글래스모피즘) ─── */
.modal, .modal-overlay, #theme-modal, #result-modal,
#showdown-overlay, .auto-register-modal {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
#theme-modal {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20) !important;
}
#theme-modal h3 { color: var(--accent) !important; }
#theme-modal .theme-sub { color: var(--text2) !important; }
.theme-card { background: #F5F5F7 !important; border-color: rgba(0,0,0,0.06) !important; }
.theme-card.selected { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(255,59,48,0.15) !important; }
.theme-card-name { color: var(--text) !important; }
.theme-card-desc { color: var(--text2) !important; }
#theme-modal-close {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-radius: 980px !important;
    padding: 12px 24px !important;
}

/* ─── 테이블 / 리스트 ─── */
table { background: transparent !important; }
th, td {
    border-color: rgba(0,0,0,0.06) !important;
    color: var(--text) !important;
}
thead th { color: var(--text2) !important; font-weight: 600 !important; }

/* ─── 알림 / 토스트 ─── */


/* ─── 링크 ─── */
a { color: var(--accent) !important; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── 버튼/카드 공통 부드러운 애니메이션 ─── */
button, .btn-primary, .btn-danger, .btn-sm, .room-card, .theme-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

/* ─── 애플 사과 타입 구분 ─── */
/* 배판 표시 — 숫자 대신 사과 아이콘 × N (향후 Phase 2 에서 JS 로 렌더) */
.apple-count {
    display: inline-flex; gap: 3px; vertical-align: middle;
}
.apple-count::before {
    content: '';
    width: 18px; height: 18px;
    background: url('apple-logo.svg') center/contain no-repeat;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════
   게임방 (#game-screen) 은 기본 배경을 매우 연한 단색으로
   ═══════════════════════════════════════════════════════════ */

.game-layout {
    background: transparent !important;
}
/* [REMOVED] .game-hud — 중복 제거 (통합 규칙은 파일 끝 3단 레이아웃 블록 참조) */
/* 기본(default 테마, 테마 미선택) 타원 테이블을 은은한 밝은 톤으로 */


/* 좌석 카드 (Apple 스타일) */

body .seat-slot .pb-name,
body .seat-slot .pb-chips,
body .seat-slot .pb-status,
body #turn-info,
body #multiplier-info,
body #discard-label,
body #deck-count {
    color: var(--text) !important;
    text-shadow: none !important;
}

/* 카드(손패) — 기본 흰 배경 + 얇은 테두리
   ★ BUGFIX: 이전엔 color: var(--text) !important 로 meld-card 색을 덮어써서
   JS 인라인 style="color:..." 가 무시됨 → 모든 멜드 카드가 검정으로 표시.
   color 는 각 카드의 class/inline 이 담당하도록 여기서 설정하지 않음. */
body .hand-card,
body .meld-card,
body .card-base {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* 덱 뒷면 — 빨간 사과 로고 */


/* ═══════════════════════════════════════════════════════════
   실버 크롬 & 사과 아이콘 디테일 (시각 레퍼런스 기반)
   ═══════════════════════════════════════════════════════════ */

/* HUD 잔액 뱃지 — 골드 강조 pill (게임 핵심 정보 강조) */
.balance-badge {
    position: relative;
    background: linear-gradient(135deg, #FFF9E0 0%, #FFE98A 100%) !important;
    border: 1px solid rgba(200, 140, 30, 0.35) !important;
    border-radius: 980px !important;
    padding: 7px 18px 7px 40px !important;        /* left 34 → 40 (사과↔숫자 시각 gap 확보) */
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #1D1D1F !important;
    letter-spacing: -0.01em !important;
    box-shadow:
      0 1px 3px rgba(180, 120, 0, 0.15),
      0 3px 10px rgba(255, 184, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.balance-badge::before {
    content: '';
    position: absolute; left: 10px; top: 50%;        /* 8 → 10 (좌측 여백 확보) */
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: url('apple-logo.svg') center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(255,59,48,0.3));
}

/* 좌석 카드 잔액 — 사과 아이콘 + 금액 */


/* 내 정보 패널 잔액 — 동일하게 사과 prefix */


/* 게임방 상단 배판 영역 — 실버 크롬 pill 로 감싸기 */
#multiplier-info:not(:empty) {
    background: linear-gradient(145deg, #F8F8FA, #FFFFFF 40%, #E8E8ED 100%);
    border: 1px solid rgba(160,160,170,0.3);
    border-radius: 980px;
    padding: 4px 10px 4px 10px;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.9);
    margin-left: 10px;
}

/* 게임 테이블 실버 메탈릭 프레임 — 더 두껍고 반짝이게 (기본 테마만) */


/* 덱 뒷면 — 패턴화된 사과 로고 (기존 단일 아이콘 → 그라데이션 배경 + 큰 사과) */


/* 입력창 — 실버 크롬 느낌 */
.auth-form input, .form-group input,
input[type="text"], input[type="number"],
input[type="password"], input[type="email"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%) !important;
    border: 1px solid rgba(160,160,170,0.3) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* 로그인 버튼 — 애플 레드 그라데이션 */
.auth-form .btn-primary, button[type="submit"].btn-primary {
    background: linear-gradient(180deg, #FF5147, #E0342A) !important;
    color: #FFFFFF !important;
    box-shadow:
      0 2px 8px rgba(255,59,48,0.35),
      inset 0 1px 0 rgba(255,255,255,0.3) !important;
    font-size: 16px !important;
    padding: 14px 24px !important;
}


/* ═══════════════════════════════════════════════════════════
   Phase 2 확장 — 애니메이션 / 배판 / 카드 미니멀
   ═══════════════════════════════════════════════════════════ */

/* 1. 모달 부드럽게 등장 (fade + scale-up) ─────────────────── */
@keyframes appleFadeInUp {
    0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
#theme-modal,
#result-modal .modal-content,
.modal-content,
.auth-container {
    animation: appleFadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 2. 카드 놓을 때 부드럽게 (transform transition) ─────────── */
.hand-card, .meld-card, .card-base {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                opacity 0.2s ease !important;
}
.hand-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
.hand-card.selected {
    transform: translateY(-14px) !important;
    box-shadow: 0 10px 28px rgba(255,59,48,0.25) !important;
    border-color: var(--accent) !important;
}

/* 3. 버튼 press 시 scale-down ─────────────────────────── */
button:active,
.btn-primary:active,
.btn-danger:active,
.btn-sm:active,
.nav-btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.08s ease !important;
}

/* 4. 카드 앞면 — 미니멀 타이포 (기본 테마만) ─────────────── */
body .hand-card .card-rank,
body .meld-card .card-rank {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-family: -apple-system, "SF Pro Display", system-ui, sans-serif !important;
}
/* 숫자 카드의 ♥♦ 빨강 톤을 애플 레드로 통일 */
body .hand-card.suit-heart .card-rank,
body .hand-card.suit-diamond .card-rank,
body .meld-card.suit-heart .card-rank,
body .meld-card.suit-diamond .card-rank,
body .hand-card.suit-heart .card-suit,
body .hand-card.suit-diamond .card-suit,
body .meld-card.suit-heart .card-suit,
body .meld-card.suit-diamond .card-suit {
    color: var(--accent) !important;
}
body .hand-card.suit-spade .card-rank,
body .hand-card.suit-club .card-rank,
body .meld-card.suit-spade .card-rank,
body .meld-card.suit-club .card-rank,
body .hand-card.suit-spade .card-suit,
body .hand-card.suit-club .card-suit,
body .meld-card.suit-spade .card-suit,
body .meld-card.suit-club .card-suit {
    color: var(--text) !important;
}

/* 5. 배판 사과 아이콘 — popping 애니메이션 (새 배판 생성 시 bounce) */
@keyframes appleBounce {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.apple-multi img {
    animation: appleBounce 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    filter: drop-shadow(0 1px 3px rgba(255,59,48,0.35));
}
.apple-multi img:nth-child(2) { animation-delay: 0.08s; }
.apple-multi img:nth-child(3) { animation-delay: 0.16s; }
.apple-multi img:nth-child(4) { animation-delay: 0.24s; }
.apple-multi img:nth-child(5) { animation-delay: 0.32s; }

/* 6. 토스트 슬라이드업 (기존 toast 에 엔트리 애니메이션) ─── */
@keyframes appleToastIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* 7. 좌석 턴 pulse 를 애플 레드로 ───────────────────────── */

body .my-turn-pulse {
    animation: applePulse 1.5s ease-in-out infinite;
}
@keyframes applePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
}

/* ═══════════════════════════════════════════════════════════
   시인성 최적화 (라이트 배경 위 텍스트/카드/컴포넌트 대비 확보)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 텍스트 전역 강제 다크 — #1D1D1F ── */
body, body p, body li, body span, body div, body label,
.wallet-card, .wallet-card *, .section, .section *,
.room-card, .room-card *,
.auth-container, .auth-container * {
    color: #1D1D1F;
}
/* 보조 텍스트 톤 */
.auth-container .logo p, .wallet-card h3, .section-header h3,
.room-card .room-meta, .stat-box .label {
    color: #6E6E73 !important;
}

/* ── 2. 내비게이션 & 탭 — 밝은 배경에 명확한 대비 ── */


/* ── 3. 게임방 내 HUD / 상태바 / 타이머 — 어두운 → 밝은 글래스로 전환 ── */
/* [REMOVED] body .game-hud — 통합 규칙 사용 */


/* 내 턴일 때 turn-info 빨강 강조 */
body .my-area.my-turn-active + * #turn-info,
body #turn-info.my-turn {
    color: var(--accent) !important;
}

/* 타이머 숫자 (중앙 초읽기) — 검정 + 경고 시 빨강 */


/* ── 4. 카드 — 더 크고 굵은 숫자/문양 + 선명한 테두리/그림자 ── */


/* 카드 숫자/문양 크게 + 두껍게 */


/* 멜드 카드 — 동일 처리 (크기는 --meld-scale 유지하되 두께 + 선명하게) */


/* ♥♦ 애플 레드, ♠♣ 차콜 — 양쪽 모두 굵고 선명하게 */
body .hand-card.suit-heart,
body .hand-card.suit-diamond,
body .meld-card.suit-heart,
body .meld-card.suit-diamond {
    color: #FF3B30 !important;
}
body .hand-card.suit-spade,
body .hand-card.suit-club,
body .meld-card.suit-spade,
body .meld-card.suit-club {
    color: #1D1D1F !important;
}

/* ── 5. 플레이어 좌석 카드 — 글래스 + 굵은 폰트 ── */

body .seat-slot .pb-name {
    color: #1D1D1F !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    font-size: 14px !important;
}
body .seat-slot .pb-chips {
    color: #1D1D1F !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    font-size: 15px !important;
}
body .seat-slot .pb-status,
body .seat-slot .pb-info {
    color: #6E6E73 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
body .seat-slot .pb-avatar {
    border-color: rgba(210,210,215,0.9) !important;
    background: #F5F5F7 !important;
    position: relative;
}
body .seat-slot .pb-initial {
    color: #1D1D1F !important;
    font-weight: 800 !important;
}

/* [제거됨] 봇 아바타 우상단 사과 뱃지 — 2026-04-22
   보이스팩 이모지가 이미 아바타를 대체하므로 불필요. 유저 요청으로 제거. */
body .seat-slot .pb-avatar.is-bot::after,
.pb-avatar.is-bot::after {
    content: none !important;
    display: none !important;
}

/* ── 내 정보 패널 ── */


body .my-score-badge {
    color: #1D1D1F !important;
    font-weight: 600 !important;
}

/* ── 6. 하단 액션 버튼 (숫자정렬, 등록/붙이기, 받기) ── */
body .my-controls .ctrl-btn,
body #btn-sort,
body #btn-smart,
body #btn-draw,
body #btn-stop {
    border-radius: 14px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: none !important;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    min-height: 52px !important;
    letter-spacing: -0.01em;
}
/* 활성 버튼 (btn-active) — 블랙 pill + 흰 글씨 */


body .btn-active:active { transform: scale(0.97); }
/* 비활성 버튼 — 밝은 회색 배경 */

/* 받기/버리기 (현재 턴 상태 강조) — 빨간 배경 */


/* 스톱 — 경고 빨강 */


/* 나가기 / 다른 방 / 음소거 등 HUD 버튼 — 흰색 글래스 */
body #game-leave-btn,
body #game-next-room-btn,
body #btn-mute-voice,
body #btn-mute-sfx,
body #spectator-hud-badge {
    background: rgba(255,255,255,0.9) !important;
    color: #1D1D1F !important;
    border: 1px solid rgba(210,210,215,0.9) !important;
    box-shadow:
      0 2px 8px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.9) !important;
    font-weight: 700 !important;
}


/* ── 7. 손패 영역 배경 — 연한 글래스 ── */
body #my-hand {
    background: transparent !important;
    padding: 4px 12px !important;
}

/* ── 8. 멜드 영역 + 덱/버린더미 영역 가독성 ── */


/* 배판 pill — 빨간 강조 텍스트 */
body #multiplier-info {
    color: #1D1D1F !important;
    font-weight: 700 !important;
}

/* ── 9. 로비 방 카드 — Apple 스타일 카드 그리드 (레퍼런스 이미지 재현) ── */


/* 방 이름 + 오른쪽 상단 빨간 사과 */


/* 방 메타 (인원 / 판돈) */


/* 인원 진행 바 */


/* 태그 (대기중/게임중/배판/최소잔액) */


/* Join / 관전 / 삭제 버튼 영역 */
.room-card > div:last-child button {
    border-radius: 980px !important;
    padding: 7px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    transition: all 0.15s ease;
}
.room-card > div:last-child button:active { transform: scale(0.95); }

/* ── 10. 전역 구분선 — 연한 그레이 ── */
hr, .divider, .separator {
    border-color: #D2D2D7 !important;
    background: #D2D2D7 !important;
}

/* ── 11. 모든 텍스트 섀도우 제거 (다크 배경용 텍스트 섀도우 잔재 방어) ── */
body .pb-name,
body .pb-chips,
body .pb-info,
body .pb-status,
body #multiplier-info,
body #discard-label,
body #deck-count,
body #turn-info {
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TONE-DOWN 패스 — 쨍한 순백 → 알루미늄/페이퍼 실버 톤
   (애플 공식 HIG 색 팔레트 기반, 눈 피로 최소화)
   ─────────────────────────────────────────────
   · 순백 #FFFFFF 지양 — 카드도 미세한 오프화이트로
   · 경계선은 거의 보이지 않게 (#E5E5E7)
   · 그림자: rgba(0,0,0,0.04~0.06) 넓은 blur 로 "공중 부양" 느낌
   · 코너: 연속곡선(squircle) 재현을 위해 18~22px
   · 강조색: System Red 그대로 두되 glow/saturate 약화
   ═══════════════════════════════════════════════════════════ */


/* 전역 배경 — 순백 대신 F5F5F7, 살짝 따뜻한 톤 */


#game-screen {
    background: linear-gradient(180deg, #FAFAFA 0%, #F2F2F5 100%) !important;
}

/* 로그인 컨테이너 — 알루미늄 실버 느낌 (쨍한 흰 ≠) */


/* 카드/섹션 — 순백 대신 #FDFDFE (미세 차이) */
.wallet-card, .room-card, .section,
.stat-box, .admin-card, .info-box {
    background: var(--bg2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 18px !important;      /* 14→18 squircle */
    box-shadow: var(--shadow-sm) !important;
}
.wallet-card:hover, .room-card:hover, .stat-box:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-mid) !important;
}

/* 방 카드 — 위 규칙 강화 (기존 16px → 18px, 그림자 더 연하게) */


/* 상단 네비 (로비) — 실버 그라데이션 — .game-hud 는 3단 통합 규칙에서 별도 처리 */
.lobby-header, nav.lobby-tabs, .top-bar {
    background:
      linear-gradient(180deg, rgba(253,253,254,0.82) 0%, rgba(245,245,247,0.82) 100%) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
}

/* ★ 게임 상태바 — 상단 중앙에 pill 로 강조 ★
   기존 좌측 상단 → 상단 중앙으로 이동 + 골드 pill + 애플레드 글자 */

@keyframes hudStatusFadeInCenter {
    from { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}
body .game-status-bar * {
    background: transparent !important;
}


/* 기존 좌상단 사과 로고 숨김 (안내 문구가 그 자리 차지) */


/* 배판 정보는 안내 문구 옆 작은 pill 로 따라감 */


/* 잔액 뱃지 / 배판 pill — 실버 그라데이션 */
.balance-badge, #multiplier-info:not(:empty) {
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* 좌석 카드 — 서리 유리 */


/* 내 정보 패널 — 서리 유리 */


/* 카드 (손패) — 순백 → 미세 오프화이트 + 연한 경계 */


/* 버리기 더미 */


/* 덱 뒷면 — 실버 그라데이션 + 중앙 사과 */


/* 게임 테이블 — 기본(테마 미선택) 실버 메탈릭 톤다운 */

/* 테이블 실버 림 — 그림자 더 은은하게 */


/* 버튼 — 기본/보조는 실버 그라데이션, 강조만 애플 레드 유지 */
.btn-sm, .ctrl-btn {
    background: var(--silver-grad) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-xs) !important;
    font-weight: 600 !important;
}
.btn-sm:hover, .ctrl-btn:hover {
    background: linear-gradient(180deg, #FFFFFF, #EEEEF2) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 활성 액션 버튼 — 블랙 pill (채도 유지, 그림자만 연하게) */

/* 받기/스톱 등 레드 버튼 — 채도 살짝 낮춤 */


/* 나가기 버튼 — 동일 톤다운 */
body #game-leave-btn {
    background: linear-gradient(180deg, #FF5E54, #E5443B) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(255,59,48,0.20),
      0 6px 16px rgba(255,59,48,0.15) !important;
}

/* 로그인 버튼 — 톤다운된 그라데이션 */
.auth-form .btn-primary, button[type="submit"].btn-primary {
    background: linear-gradient(180deg, #FF5E54 0%, #E5443B 100%) !important;
    box-shadow:
      0 1px 3px rgba(255,59,48,0.22),
      0 6px 18px rgba(255,59,48,0.15),
      inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
}

/* 주 버튼 (로비 방만들기 등) — 블랙 pill, 부드러운 그림자 */
.btn-primary {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 980px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10),
      0 4px 14px rgba(0,0,0,0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary:hover {
    background: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.14),
      0 8px 22px rgba(0,0,0,0.10) !important;
}

/* 입력창 — 쨍한 흰색 대신 살짝 오프화이트 + 연한 inset shadow */
.auth-form input, .form-group input, .wallet-card input,
input[type="text"], input[type="number"],
input[type="password"], input[type="email"], textarea {
    background: #F5F5F7 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.025) !important;
    color: var(--text) !important;
}
.auth-form input:focus, .form-group input:focus,
input[type="text"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    background: #FFFFFF !important;
    border-color: var(--accent) !important;
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.02),
      0 0 0 4px rgba(255, 59, 48, 0.10) !important;
}

/* 모달 — 서리 유리 강화 */
#theme-modal, .modal-content, .auth-container {
    background: rgba(253,253,254,0.82) !important;
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 22px !important;
}
#theme-modal-overlay {
    background: rgba(0,0,0,0.30) !important;  /* 기존 0.78 → 은은하게 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 토스트 — 다크 글래스 유지하되 톤 약화 */


/* 태그 / pill 요소들 — 채도 파스텔 */


/* 구분선 — 거의 안 보이게 */
hr, .divider, .separator {
    border-color: var(--border-soft) !important;
    background: var(--border-soft) !important;
    opacity: 1 !important;
}

/* ─── 전역 그림자 톤다운 ─── */

/* 다크 섀도우가 남아있을 수 있는 legacy 요소들 */


/* ═══════════════════════════════════════════════════════════
   모달 통합 — 결과 / 방 만들기 / 관전자 / 감정표현 Apple 스타일
   ═══════════════════════════════════════════════════════════ */

/* 공용 `.modal` — 다크 오버레이 → 부드러운 서리 유리 */
.modal {
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.modal-content {
    background: rgba(253,253,254,0.92) !important;
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid var(--border-soft) !important;
    border-radius: 22px !important;
    box-shadow:
      0 0 0 1px rgba(160,160,170,0.10),
      0 20px 60px rgba(0,0,0,0.15),
      0 8px 24px rgba(0,0,0,0.08) !important;
    padding: 28px !important;
    color: var(--text) !important;
}
.modal-content h2, .modal-content h3, .modal-content h4 {
    color: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* ─── 결과 모달 (게임 종료) ─── */

.result-modal .btn-primary {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border-radius: 980px !important;
    font-size: 16px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.10),
      0 6px 20px rgba(0,0,0,0.10) !important;
    border: none !important;
}
.result-modal .btn-primary:hover {
    background: #000 !important;
    transform: translateY(-1px);
}
.result-modal .btn-primary:active { transform: scale(0.97); }

/* 결과 모달 내부 랭킹 / 점수 표 */
.result-modal table, .result-modal .ranking-row {
    background: transparent !important;
}

.result-modal .ranking-row:last-child { border-bottom: none !important; }
.result-modal .rank-badge {
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 4px 10px;
    font-weight: 700 !important;
    color: var(--text) !important;
}
.result-modal .rank-1 .rank-badge {
    background: linear-gradient(135deg, #FFE27A, #FFB800) !important;
    color: #4A3000 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(255, 184, 0, 0.30) !important;
}

/* 특수승리/훌라 등 승리 타입 뱃지 */
.result-modal .win-type-badge {
    background: rgba(255, 59, 48, 0.10) !important;
    color: #CC3025 !important;
    border-radius: 980px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    display: inline-flex; align-items: center; gap: 6px;
}

/* ─── 방 만들기 모달 ─── */

#create-room-modal .modal-content > * {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#create-room-modal .modal-content h3 {
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}
#create-room-modal .form-group label {
    color: var(--text2) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: block;
}
#create-room-modal .form-group input {
    width: 100%;
    background: #F5F5F7 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: var(--text) !important;
}
/* 옵션 버튼 그룹 (인원수, 베팅 등) */
#create-room-modal .btn-option,
.btn-option {
    background: var(--silver-grad) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
.btn-option.active {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border-color: #1D1D1F !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.btn-option:hover:not(.active) {
    border-color: var(--border-mid) !important;
    background: linear-gradient(180deg, #FFFFFF, #F0F0F3) !important;
}

/* 모달 액션 (취소/생성) */
.modal-actions {
    gap: 12px !important;
    margin-top: 24px !important;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.btn-secondary {
    background: var(--silver-grad) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 980px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-xs) !important;
}
.btn-secondary:hover {
    background: linear-gradient(180deg, #FFFFFF, #EEEEF2) !important;
}

/* ─── 관전자 리스트 팝업 ─── */
#spectator-list-popup {
    background: rgba(253,253,254,0.92) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
}
#spectator-list-popup > div:first-child {
    color: var(--accent) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 8px !important;
    display: flex; align-items: center; gap: 6px;
}
#spectator-list-items {
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
#spectator-list-items > div {
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}
#spectator-list-items > div:hover {
    background: var(--bg3);
}

/* ─── 감정표현 패널 (emote-panel) ─── */
#emote-panel {
    background: rgba(253,253,254,0.92) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    box-shadow: var(--shadow-lg) !important;
}
#emote-panel button {
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-size: 22px !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all 0.15s ease;
}
#emote-panel button:hover {
    background: linear-gradient(180deg, #FFFFFF, #EEEEF2) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm) !important;
}
#emote-panel button:active { transform: scale(0.94); }

/* ─── 지갑 섹션 버튼 정돈 ─── */

.wallet-card .btn-primary,
.wallet-card .btn-danger {
    width: 100%;
    margin-top: 6px;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 980px !important;
}
.wallet-card .btn-primary {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.10),
      0 6px 18px rgba(0,0,0,0.08) !important;
    border: none !important;
}
.wallet-card .btn-danger {
    background: linear-gradient(180deg, #FF5E54, #E5443B) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow:
      0 1px 3px rgba(255,59,48,0.22),
      0 6px 18px rgba(255,59,48,0.15) !important;
}
/* 포인트 전환 카드의 MAX 버튼 */
.convert-amount-row .btn-max {
    background: var(--silver-grad) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-xs) !important;
}
.convert-amount-row .btn-max:hover {
    background: linear-gradient(180deg, #FFFFFF, #EEEEF2) !important;
}

/* 지갑 히스토리 표 */
#wallet-daily table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}
#wallet-daily table th {
    background: var(--bg-soft) !important;
    color: var(--text2) !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#wallet-daily table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text) !important;
}
#wallet-daily table tr:last-child td { border-bottom: none !important; }
#wallet-items > div {
    background: var(--bg2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    box-shadow: var(--shadow-xs) !important;
}

/* ═══════════════════════════════════════════════════════════
   SF 스타일 아이콘 교체 — 이모지 → 인라인 SVG mask
   (기존 HTML 의 이모지 텍스트를 font-size:0 으로 숨기고
    ::before 로 SVG mask 를 그림 → HTML 수정 없이 아이콘 교체)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   ★ HUD 아이콘 버튼 — 모든 테마에서 일관되게 표시 ★
   (body prefix 제거 — 테마 전환 시 버튼 사라지는 버그 수정)
   ═══════════════════════════════════════════════════════════ */

/* ─── 깜빡임 방지 핵심 원칙 ───
   1) backdrop-filter + transparent 조합은 하단 요소와 z-fighting 유발
      → solid 배경 + border-bottom 분리선으로 완전 분리
   2) 높이 고정 (flex-shrink: 0 + fixed height) → 재레이아웃 방지
   3) will-change/transform 남용 금지 — GPU 레이어 승격이 오히려 repaint 유발 */
/* [REMOVED] .game-hud (isolation/contain/84px 포함 큰 규칙) — 통합 규칙은 파일 끝 */
/* ─── 상단 HUD 좌측 — 상태 안내 문구 (Apple 시스템 폰트·볼드) ─── */
.hud-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
}
.hud-status-text {
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #1D1D1F !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 720px;
    transition: color 0.2s ease;
}
.hud-status-text.is-my-turn {
    font-weight: 900 !important;
    animation: hudPulse 1.4s ease-in-out infinite;
}
@keyframes hudPulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.72; }
}
.hud-multiplier:empty { display: none !important; }
.hud-multiplier {
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--apple-red-official, #E3000E) !important;
    background: rgba(227, 0, 14, 0.08) !important;
    border-radius: 980px !important;
    padding: 4px 12px !important;
}
.hud-right {
    position: relative;
    z-index: 9999 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
    flex: 0 0 auto;
}

/* 다크 테마용 HUD — 역시 solid 배경 (반투명 금지) */* [REMOVED data-theme rule] */


/* ═══════════════════════════════════════════════════════════
   ★ 레트로 당구장 테마 — 초록 펠트 멜드 테이블 + 버튼 대비 ★
   ═══════════════════════════════════════════════════════════ */

/* 멜드 영역 (카드 놓이는 곳) — 초록 당구대 펠트 */* [REMOVED data-theme rule] */


/* 멜드 카드도 펠트 위에서 잘 보이도록 선명한 흰 + 깊은 그림자 */* [REMOVED data-theme rule] */


/* ─── 레트로 하단 액션 버튼 — 당구 테이블 그린·큐대 우드 톤 ─── */
/* 활성 일반 버튼 (숫자정렬, 등록/붙이기) — 당구 펠트 그린 */* [REMOVED data-theme rule] */
/* [REMOVED data-theme rule] */


/* 비활성 버튼 — 당구 큐대 우드 톤 (짙은 호두나무) */* [REMOVED data-theme rule] */


/* 받기 — 따뜻한 주황 (레트로 톤) */* [REMOVED data-theme rule] */


/* 스톱 — 진한 레드 (긴박감) */* [REMOVED data-theme rule] */

/* [REMOVED] secret-hideout 테마 — 테마 자체가 제거되어 불필요 */

/* 관전자 뱃지 */
#spectator-hud-badge {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
#spectator-hud-badge::before {
    content: '';
    display: inline-block;
    width: 26px; height: 26px;
    background: #E3000E;
    -webkit-mask: var(--icon-eye) center/contain no-repeat;
            mask: var(--icon-eye) center/contain no-repeat;
    flex-shrink: 0;
}
#spectator-hud-badge .hud-count,
#spectator-hud-count {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1D1D1F !important;
    line-height: 1;
}

/* 마이크 / 스피커 / 관전자 공통 */
#btn-mute-voice,
#btn-mute-sfx {
    font-size: 0 !important;
    color: transparent !important;
    position: relative;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    min-width: 58px;
    min-height: 58px;
}

/* 마이크 */
#btn-mute-voice::before {
    content: '';
    width: 28px; height: 28px;
    background: #1D1D1F;
    -webkit-mask: var(--icon-mic) center/contain no-repeat;
            mask: var(--icon-mic) center/contain no-repeat;
}
#btn-mute-voice.muted::before {
    background: #E3000E;
    -webkit-mask: var(--icon-mic-off) center/contain no-repeat;
            mask: var(--icon-mic-off) center/contain no-repeat;
}

/* 스피커 */
#btn-mute-sfx::before {
    content: '';
    width: 28px; height: 28px;
    background: #1D1D1F;
    -webkit-mask: var(--icon-speaker) center/contain no-repeat;
            mask: var(--icon-speaker) center/contain no-repeat;
}
#btn-mute-sfx.muted::before {
    background: #E3000E;
    -webkit-mask: var(--icon-speaker-off) center/contain no-repeat;
            mask: var(--icon-speaker-off) center/contain no-repeat;
}

/* 나가기 / 다른 방 버튼 — 테마 무관 */
#game-next-room-btn,
#game-leave-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    border-radius: 14px !important;
    min-height: 58px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#game-next-room-btn {
    background: rgba(28, 28, 30, 0.92) !important;
    color: #FFFFFF !important;
    backdrop-filter: saturate(180%) blur(16px);
}
#game-leave-btn {
    background: linear-gradient(180deg, #FF5E54, #E5443B) !important;
    color: #FFFFFF !important;
}

/* ─── 다크 테마용 HUD 버튼 대비 보정 (HUD 바 자체는 아래 블록에서 solid 로 처리) ─── */* [REMOVED data-theme rule] */

/* 어두운 테마 위 아이콘 — 밝은 색 */* [REMOVED data-theme rule] */
/* [REMOVED data-theme rule] */
/* [REMOVED data-theme rule] */

/* 음소거 상태 빨강 유지 (다크 위에선 더 밝게) */* [REMOVED data-theme rule] */


/* 감정표현 토글 버튼 (😊 → smile) */
body .emote-toggle {
    font-size: 0 !important;
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
}
body .emote-toggle::before {
    content: '';
    width: 22px; height: 22px;
    background: var(--text);
    -webkit-mask: var(--icon-smile) center/contain no-repeat;
            mask: var(--icon-smile) center/contain no-repeat;
}

/* 로비 햄버거 메뉴 (☰) — 3줄이 또렷하게 보이도록 크게 */
.lobby-menu-toggle {
    font-size: 0 !important;
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 48px !important; height: 48px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.lobby-menu-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.08) !important;
}
.lobby-menu-toggle::before {
    content: '';
    width: 28px !important; height: 28px !important;
    background: var(--text);
    -webkit-mask: var(--icon-menu) center/contain no-repeat;
            mask: var(--icon-menu) center/contain no-repeat;
}

/* 개별 플레이어 뮤트 버튼 (🔈/🔇 이모지) — 아이콘 교체 */
body .pb-mute-btn {
    font-size: 0 !important;
    background: rgba(253,253,254,0.85) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 50% !important;
    width: 24px; height: 24px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    box-shadow: var(--shadow-xs) !important;
}
body .pb-mute-btn::before {
    content: '';
    width: 14px; height: 14px;
    background: var(--text);
    -webkit-mask: var(--icon-speaker) center/contain no-repeat;
            mask: var(--icon-speaker) center/contain no-repeat;
}
body .pb-mute-btn.muted::before,
body .pb-mute-btn[data-muted='true']::before {
    background: var(--accent);
    -webkit-mask: var(--icon-speaker-off) center/contain no-repeat;
            mask: var(--icon-speaker-off) center/contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════
   손패 카드 앞면 — 미니멀 재레이아웃
   (왼쪽 상단 랭크/문양, 오른쪽 하단 rotated mirror — Apple 카드 앱 느낌)
   ═══════════════════════════════════════════════════════════ */


/* 중앙 큰 문양 (오른쪽 하단) — 문양만 반복된 미니멀 디자인 */

body .hand-card.suit-heart::after { color: var(--accent); }
body .hand-card.suit-diamond::after { color: var(--accent); }
body .hand-card.suit-spade::after { color: var(--text); }
body .hand-card.suit-club::after { color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   로비 전면 재구성 — "Mac 창 안의 흰 패널" 레이아웃
   외곽: 라이트 그레이 / 내부: 흰 카드 패널 / 그리드 방 목록
   레퍼런스: iPad 설정 앱, App Store, Apple.com 제품 리스트
   ═══════════════════════════════════════════════════════════ */


/* 로비 스크린 외곽 — 라이트 그레이 바탕 (패널과 명확한 대비) */
#lobby-screen {
    background: linear-gradient(180deg, #EBEBEF 0%, #DDDDE2 100%) !important;
    min-height: 100vh;
    padding: 0 !important;
}
/* body 도 동일 그레이로 깔아 빈 여백 흰색 방지 */
body:not(.game-body) {
    background: #E5E5EA !important;
}

/* 상단바 — 외곽 그레이에 녹아들게, 탭에 활성 indicator 바 */
.top-bar {
    background: transparent !important;
    border-bottom: none !important;
    padding: 12px 24px !important;
    backdrop-filter: none !important;
}

/* 탭 네비 — 중앙 정렬, 하단 얇은 indicator */
.lobby-tabs {
    background: transparent !important;
    border: none !important;
    padding: 0 24px !important;
    margin-bottom: 16px;
    display: flex !important;
    gap: 4px;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
.lobby-tabs .nav-btn {
    color: var(--text2) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    background: transparent !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    position: relative;
    transition: color 0.2s ease;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
.lobby-tabs .nav-btn:hover {
    background: transparent !important;
    color: var(--text) !important;
}
.lobby-tabs .nav-btn.active {
    color: var(--text) !important;
    background: transparent !important;
    font-weight: 700 !important;
}
.lobby-tabs .nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px; right: 20px;
    height: 2px;
    background: var(--apple-red-official);
    border-radius: 2px 2px 0 0;
    animation: tabIndicator 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tabIndicator {
    from { transform: scaleX(0.3); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* 섹션 — 중앙 흰 패널 (Mac 창 안에 있는 흰 카드) */
.section {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 28px 32px !important;
    margin: 0 24px 24px !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.04),
      0 12px 32px rgba(0,0,0,0.06) !important;
}

/* 섹션 헤더 — "게임 방 목록" + "방 만들기" 버튼 */
.section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.section-header h3 {
    color: var(--text) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.section-header .btn-primary {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border-radius: 980px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06) !important;
    border: none !important;
}

/* 방 목록 그리드 — auto-fill minmax(300px, 1fr) */
.room-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
}

/* 방 카드 — 흰 배경, 테두리 없음, 넓게 퍼지는 부드러운 그림자 */
.room-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease !important;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}
.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
    border-color: rgba(255, 59, 48, 0.20) !important;
}
.room-card:active {
    transform: scale(0.98);
}

/* 방 이름 (최상단, 굵고 검게) + 우상단 빨간 사과 */
.room-card h4 {
    color: #1D1D1F !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    margin: 0 0 16px !important;
    padding-right: 32px;
    letter-spacing: -0.02em !important;
    line-height: 1.2;
}
.room-card h4::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 24px;
    width: 22px;
    height: 22px;
    background: url('apple-logo.svg') center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(227, 0, 14, 0.25));
}

/* 방 메타 정보 — 회색 작은 글씨 */
.room-card .room-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--meta-gray) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}
.room-card .room-meta span {
    color: var(--meta-gray) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.room-card .room-meta span::before {
    color: #A8A8AD;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 56px;
}
.room-card .room-meta span:first-child::before {
    content: 'Players';
    color: #A8A8AD;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 52px;
}
.room-card .room-meta span:nth-child(2)::before {
    content: 'Stakes';
    color: #A8A8AD;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 52px;
}

/* 인원수 진행 바 */
.room-card .room-players-bar {
    height: 3px !important;
    background: #F5F5F7 !important;
    border-radius: 2px !important;
    overflow: hidden;
    margin: 0 0 14px !important;
}
.room-card .room-players-fill {
    background: var(--apple-red-official) !important;
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* 상태 태그 — pill */
.room-card .room-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    margin-top: auto;
}
.room-card .room-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 980px !important;
    background: #F5F5F7 !important;
    color: #6E6E73 !important;
    border: none !important;
    letter-spacing: 0.2px;
}
.room-card .room-tag.tag-waiting {
    background: rgba(48, 209, 88, 0.12) !important;
    color: #1F7A32 !important;
}
.room-card .room-tag.tag-playing {
    background: rgba(227, 0, 14, 0.10) !important;
    color: var(--apple-red-official) !important;
}
.room-card .room-tag.tag-multiplier {
    background: rgba(255, 159, 10, 0.12) !important;
    color: #9C6400 !important;
}

/* 관전/삭제 버튼 컨테이너 */
.room-card > div:last-child:not(.room-tags) {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.room-card > div:last-child:not(.room-tags) button {
    border-radius: 980px !important;
    padding: 7px 14px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border: none !important;
    background: var(--silver-grad) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-xs) !important;
    flex: 1;
    transition: all 0.15s ease;
}
.room-card > div:last-child:not(.room-tags) button:hover {
    background: linear-gradient(180deg, #FFFFFF, #EEEEF2) !important;
}

/* 로고 우상단 브랜드 사과 — 애플 공식 레드 톤 적용 */
.lobby-brand::before {
    filter: drop-shadow(0 1px 3px rgba(227, 0, 14, 0.30));
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .section {
        margin: 0 12px 16px !important;
        padding: 20px !important;
        border-radius: 18px !important;
    }
    .section-header h3 { font-size: 18px !important; }
    .room-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .room-card { padding: 20px !important; min-height: 0; }
}

/* 큰 모니터에서 최대 너비 제한 (너무 퍼지면 읽기 힘듦)
   ※ nav / header 는 full-width 로 두고 .section 만 제한 (이전엔 nav 가 우측 치우침) */
@media (min-width: 1400px) {
    #lobby-screen > .section {
        max-width: 1360px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #lobby-screen > nav.lobby-tabs,
    #lobby-screen > header.top-bar {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 빈 목록 상태 — 중앙 안내 */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--meta-gray) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   ★ 로비 빈 목록 — "게임 모드 선택" 큰 CTA 카드 (레퍼런스 이미지) ★
   전체 패널 폭 활용 + 중앙 정렬 + 큰 카드
   ※ JS 에서 room-list 를 display:block 으로 전환 → 아래 규칙으로 중앙 정렬
   ═══════════════════════════════════════════════════════════ */
/* ★ 부모 래퍼 자체를 flex center 로 강제 — 어떤 grid 규칙도 우회 */

.lobby-mode-select {
    /* ★ 반응형 세로 스택 — 제목 + 카드 중앙 정렬 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(24px, 3vw, 44px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    /* 상하 여백 5vw · 좌우 5vw — 어떤 기기에서도 여유로운 마진 */
    padding: clamp(32px, 5vw, 72px) clamp(16px, 5vw, 80px) !important;
    text-align: center;
    box-sizing: border-box !important;
}
.mode-select-title {
    font-family: "M PLUS Rounded 1c", "SF Pro Rounded", system-ui, sans-serif !important;
    /* ★ 반응형 제목 — 작은 화면 20px ↔ 큰 화면 28px */
    font-size: clamp(20px, 2.2vw, 28px) !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    text-align: center;
}
.mode-select-cards {
    /* ★ 가로 flex · 반응형 gap · 중앙 배치 */
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(16px, 4vw, 44px) !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: auto !important;           /* 카드 내용 폭만큼만 */
    max-width: 100% !important;
    flex-wrap: wrap !important;       /* 좁으면 줄바꿈 */
    box-sizing: border-box !important;
}
.mode-select-cards > .lobby-mode-card {
    /* ★ 반응형 카드 폭 — clamp(최소, 선호, 최대) */
    flex: 0 0 clamp(220px, 30vw, 320px) !important;
    width: clamp(220px, 30vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    min-height: clamp(260px, 28vw, 320px) !important;
}
.lobby-mode-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 1.4vw, 16px) !important;
    padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px) !important;
    /* ★ 순백 배경 — Apple 앱 카드 스타일 */
    background: #FFFFFF !important;
    /* ★ 테두리 완전 제거 — 면과 그림자로만 영역 구분 */
    border: none !important;
    border-radius: clamp(20px, 1.8vw, 24px) !important;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
    /* ★ Apple-style 단일 넓은 확산 그림자 — 공중에 살짝 떠있는 느낌 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    position: relative;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system,
                 BlinkMacSystemFont, system-ui, sans-serif !important;
    width: 100%;
}
.lobby-mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}
.lobby-mode-card:active { transform: scale(0.98); }

/* ★ 모드별 accent — 테두리/배경 컬러 제거, 타이틀·태그 텍스트에만 포인트 */
.lobby-mode-card.lobby-mode-monster,
.lobby-mode-card.lobby-mode-joker {
    border: none !important;
    background: #FFFFFF !important;
}
.lobby-mode-card.lobby-mode-monster:hover,
.lobby-mode-card.lobby-mode-joker:hover {
    border: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

.lobby-mode-card .lm-icon {
    /* ★ 반응형 아이콘 — 42 ↔ 64px, 그림자 줄임 */
    font-size: clamp(42px, 5vw, 64px) !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
    transition: transform 0.28s ease;
}
.lobby-mode-card:hover .lm-icon {
    transform: scale(1.06);
}
.lobby-mode-card .lm-title {
    /* ★ Extra Bold(800) · 타이트한 자간 · 시스템 폰트 */
    font-size: clamp(22px, 2.4vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #1D1D1F !important;
    line-height: 1.05 !important;
    margin-top: clamp(6px, 0.8vw, 12px) !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
}
/* ★ 타이틀 모드별 포인트 — 은은한 파스텔 톤 */
.lobby-mode-card.lobby-mode-monster .lm-title {
    color: #2F7F4E !important;   /* 세이지 그린 */
}
.lobby-mode-card.lobby-mode-joker .lm-title {
    color: #6B4FA3 !important;   /* 라벤더 퍼플 */
}


/* 모바일 최적화 — 폭 좁으면 세로 스택, 여백/카드 축소 */
@media (max-width: 640px) {
    .mode-select-cards {
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }
    .mode-select-cards > .lobby-mode-card {
        flex: 1 1 auto !important;
        width: 90vw !important;
        max-width: 360px !important;
        min-height: 200px !important;
    }
    .lobby-mode-select {
        padding: 32px 5vw !important;
        gap: 24px !important;
    }
}
/* 극단적 모바일 (400 이하) — 더 축소 */
@media (max-width: 400px) {
    .lobby-mode-card .lm-icon { font-size: 38px !important; }
    .lobby-mode-card .lm-title { font-size: 22px !important; }
    .lobby-mode-card .lm-desc { font-size: 12px !important; }
}

/* ★ 빈 방 목록일 때 .room-grid 자체를 단일 컬럼으로 재정의
   (auto-fill minmax 300px 1fr 로 인한 narrow column 문제 해결) */
.room-grid:has(.lobby-mode-select) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════
   방 만들기 모달 — 괴물/조커 모드 선택 큰 카드 (레퍼런스 이미지)
   ═══════════════════════════════════════════════════════════ */
.mode-select-group { margin-bottom: 24px !important; }
.mode-select-group > label {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 14px !important;
    display: block;
    letter-spacing: -0.01em;
}
.btn-group.mode-cards {
    /* ★ 중앙 정렬 + 넓은 gap + 꽉 찬 폭 */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
.mode-card {
    /* ★ Apple 순백 카드 — 테두리/선 제거, 단일 확산 그림자 */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 44px 24px !important;
    min-height: 320px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 24px !important;
    color: #1D1D1F !important;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    position: relative;
    overflow: hidden;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
}
.mode-card .mode-icon {
    /* ★ 아이콘 확대 (48 → 80px) */
    font-size: 80px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.14));
    transition: transform 0.28s ease;
}
.mode-card .mode-title {
    /* ★ 타이틀 확대 (22 → 36px) */
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
    line-height: 1 !important;
    margin-top: 8px !important;
}
.mode-card .mode-desc {
    /* ★ 설명 확대 (12 → 15px) + 가독성 강화 */
    font-size: 15px !important;
    color: #636366 !important;
    text-align: center !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin-top: 4px;
}
.mode-card:hover {
    transform: translateY(-3px);
    background: #FFFFFF !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}
.mode-card:hover .mode-icon {
    transform: scale(1.10);
}
.mode-card:active { transform: scale(0.98); }

/* ★ Active 상태 — 배경/테두리 컬러 제거, 은은한 accent shadow + 타이틀 색상만 */
.mode-card.mode-monster.active {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(47, 127, 78, 0.15) !important;
}
.mode-card.mode-monster.active .mode-title {
    color: #2F7F4E !important;    /* 세이지 그린 */
}
.mode-card.mode-joker.active {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(107, 79, 163, 0.15) !important;
}
.mode-card.mode-joker.active .mode-title {
    color: #6B4FA3 !important;    /* 라벤더 퍼플 */
}

/* 모바일 — 가로가 좁으면 세로 쌓기 */
@media (max-width: 540px) {
    .btn-group.mode-cards { grid-template-columns: 1fr !important; }
    .mode-card { min-height: 140px !important; padding: 20px !important; }
    .mode-card .mode-icon { font-size: 40px !important; }
}

/* ═══════════════════════════════════════════════════════════
   지갑 섹션 — 3 열 그리드 (레퍼런스의 Apple Wallet 스타일)
   ═══════════════════════════════════════════════════════════ */
.wallet-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px;
}
.wallet-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.wallet-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08) !important;
}
.wallet-card h3 {
    color: var(--text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.01em !important;
}
.wallet-card .wallet-amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}

/* ═══════════════════════════════════════════════════════════
   랭킹 섹션 — Apple 리스트 스타일 (App Store 순위표 느낌)
   ═══════════════════════════════════════════════════════════ */
#rankings-section table,
.ranking-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent !important;
}
#rankings-section thead th {
    background: transparent !important;
    color: var(--meta-gray) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    text-align: left;
}
#rankings-section tbody td {
    padding: 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    background: transparent !important;
}
#rankings-section tbody tr {
    transition: background 0.15s;
}
#rankings-section tbody tr:hover {
    background: var(--bg) !important;
}
#rankings-section tbody tr:last-child td { border-bottom: none !important; }

/* 랭킹 1~3위 강조 */
#rankings-section tbody tr:nth-child(1) td:first-child {
    color: #FFB800 !important;
    font-weight: 800 !important;
}
#rankings-section tbody tr:nth-child(2) td:first-child {
    color: #A8A8AD !important;
    font-weight: 800 !important;
}
#rankings-section tbody tr:nth-child(3) td:first-child {
    color: #CD7F32 !important;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════
   규칙 섹션 — Apple 스펙 페이지 스타일 (넓은 여백, 큰 제목)
   ═══════════════════════════════════════════════════════════ */
#rules-section .rules-container {
    max-width: 860px !important;
    margin: 0 auto !important;
}
#rules-section h2 {
    color: var(--text) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    margin-bottom: 28px !important;
}
#rules-section .rules-section,
#rules-section .rules-block {
    background: #F5F5F7 !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
}
#rules-section h3, #rules-section h4 {
    color: var(--text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.01em !important;
}
#rules-section p, #rules-section li {
    color: var(--text) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}
#rules-section strong, #rules-section b {
    color: var(--text) !important;
    font-weight: 700 !important;
}
#rules-section ul, #rules-section ol {
    padding-left: 20px;
}
#rules-section .btn-option {
    padding: 10px 22px !important;
    font-weight: 600 !important;
}
/* 모드 탭 (괴물/조커 규칙 전환) */
#rules-section #tab-monster.active,
#rules-section #tab-joker.active {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border-color: #1D1D1F !important;
}

/* 로그인 화면도 동일 외곽 그레이 톤으로 통일 */
#auth-screen {
    background: linear-gradient(180deg, #F2F2F5 0%, #EAEAEE 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   로그인 화면 슬림 리파인 — Apple ID 로그인 카드 스타일
   ═══════════════════════════════════════════════════════════ */
.auth-container {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04),
      0 20px 60px rgba(0,0,0,0.12) !important;
    border-radius: 20px !important;
    padding: 44px 36px 32px !important;
    backdrop-filter: blur(20px);
    position: relative;
    max-width: 380px;
    width: calc(100% - 40px);
}
.auth-container .logo {
    margin-bottom: 24px !important;
    text-align: center;
}
.auth-container .logo h1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 12px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}
.auth-container .logo h1::before {
    content: '';
    width: 64px !important;
    height: 64px !important;
    background: url('apple-logo.svg') center/contain no-repeat;
    filter: drop-shadow(0 6px 16px rgba(227, 0, 14, 0.25))
      drop-shadow(0 1px 2px rgba(0,0,0,0.08)) !important;
    margin-bottom: 4px;
}
.auth-container .logo p {
    color: var(--meta-gray) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* 탭 버튼 — 세그먼트 컨트롤 스타일 */
.auth-container .tab-buttons {
    background: #F5F5F7 !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 0 !important;
    margin-bottom: 22px !important;
    display: flex;
}
.auth-container .tab-btn {
    flex: 1;
    background: transparent !important;
    color: var(--text2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.auth-container .tab-btn.active {
    background: #FFFFFF !important;
    color: var(--text) !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 2px 4px rgba(0,0,0,0.04) !important;
}

/* 입력 필드 — slim */
.auth-form {
    gap: 10px !important;
}
.auth-form input {
    background: #F5F5F7 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    padding: 13px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.auth-form input:focus {
    background: #FFFFFF !important;
    border-color: var(--apple-red-official) !important;
    box-shadow: 0 0 0 4px rgba(227, 0, 14, 0.10) !important;
}
.auth-form input::placeholder {
    color: #A8A8AD;
}

/* 제출 버튼 — 애플 레드 pill */
.auth-form .btn-primary,
.auth-form button[type="submit"] {
    background: var(--apple-red-official) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    box-shadow: 0 1px 3px rgba(227, 0, 14, 0.22) !important;
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
}
.auth-form .btn-primary:hover {
    background: #CC000C !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(227, 0, 14, 0.30) !important;
}
.auth-form .btn-primary:active { transform: scale(0.98); }


/* ═══════════════════════════════════════════════════════════
   햄버거 드롭다운 메뉴 — 글래스 카드
   ═══════════════════════════════════════════════════════════ */
.lobby-menu-dropdown {
    background: rgba(253,253,254,0.92) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.06),
      0 10px 30px rgba(0,0,0,0.12) !important;
    min-width: 200px;
}
.lobby-menu-dropdown select,
.lobby-menu-dropdown .lobby-menu-item {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    display: block;
}
.lobby-menu-dropdown .lobby-menu-item:hover,
.lobby-menu-dropdown select:hover {
    background: var(--bg) !important;
}
.lobby-menu-dropdown select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2386868B' d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 30px !important;
}

/* ═══════════════════════════════════════════════════════════
   방 만들기 — 인원/판돈 버튼을 Segmented Control 로
   ═══════════════════════════════════════════════════════════ */
#create-room-modal .form-group > label {
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block;
}

/* 인원수 / 판돈 버튼 그룹 — iOS 세그먼트 컨트롤 */
#create-room-modal .btn-group:not(.mode-cards) {
    background: #F5F5F7 !important;
    border-radius: 10px !important;
    padding: 3px !important;
    display: flex !important;
    gap: 0 !important;
}
#create-room-modal .btn-group:not(.mode-cards) .btn-option {
    flex: 1;
    background: transparent !important;
    color: var(--text2) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#create-room-modal .btn-group:not(.mode-cards) .btn-option.active {
    background: #FFFFFF !important;
    color: var(--text) !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 2px 4px rgba(0,0,0,0.04) !important;
}
#create-room-modal .btn-group:not(.mode-cards) .btn-option:hover:not(.active) {
    color: var(--text) !important;
}

/* 최소 보유금 안내 텍스트 */
#create-room-modal .info-text,
#min-balance-info {
    background: #F5F5F7 !important;
    color: var(--text2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    border: none !important;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   게임방 상단 로고 배치 — 왼쪽 상단에 작은 사과 브랜드
   ═══════════════════════════════════════════════════════════ */
body .game-hud::before {
    display: none !important;
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: url('apple-logo.svg') center/contain no-repeat;
    filter: drop-shadow(0 2px 6px rgba(227, 0, 14, 0.30));
    z-index: 11;
    pointer-events: none;
}
/* [REMOVED] body .game-hud { position: relative } — 통합 규칙 사용 */

/* ═══════════════════════════════════════════════════════════
   ★ FINAL POLISH — 나머지 자잘한 영역 일괄 Apple 톤 통일 ★
   · 스크롤바 / 토스트 / 관리자 / 알림 / 결과 모달 / 회전오버레이
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 스크롤바 슬림 Apple 스타일 ─── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(134, 134, 139, 0.35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(134, 134, 139, 0.55);
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(134,134,139,0.35) transparent;
}

/* ─── 2. 토스트 — 하단 floating + bounce ─── */
.toast {
    background: rgba(28, 28, 30, 0.92) !important;
    color: #FFFFFF !important;
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 980px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10),
      0 12px 36px rgba(0,0,0,0.18) !important;
    animation: toastBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    position: fixed !important;
    top: auto !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 14px 22px !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    z-index: 10000 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    max-width: 80vw;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.4;
}
@keyframes toastBounceIn {
    0%   { opacity: 0; transform: translate(-50%, 30px) scale(0.9); }
    70%  { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
    100% { opacity: 1; transform: translate(-50%, 0)   scale(1); }
}

/* ─── 3. 인라인 알림 (error/success/info) ─── */
.error-msg, .success-msg, .info-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
    border: none !important;
}
/* 비어있으면 공간 차지하지 않도록 숨김 (wallet-msg 등 회색 빈 pill 방지) */
.error-msg:empty, .success-msg:empty, .info-msg:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.error-msg {
    color: var(--apple-red-official) !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    text-align: center;
    font-weight: 500;
    background: rgba(227, 0, 14, 0.08) !important;
}
.success-msg {
    background: rgba(48, 209, 88, 0.10) !important;
    color: #1F7A32 !important;
}
.info-msg {
    background: #F5F5F7 !important;
    color: var(--text2) !important;
}

/* ─── 4. 결과 모달 — 승리 연출 강화 ─── */
.result-modal {
    animation: resultModalIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes resultModalIn {
    0%   { opacity: 0; transform: translateY(30px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.result-modal h2 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--text) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    animation: resultTitleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes resultTitleIn {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
/* 1등 row 강조 — 금색 배경 tint */
.result-modal .rank-1 {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.08), rgba(255, 227, 122, 0.04)) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    animation: rank1Glow 2s ease-in-out infinite;
}
@keyframes rank1Glow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,184,0,0.20); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255,184,0,0.45), 0 0 0 4px rgba(255,184,0,0.05); }
}
/* 랭킹 row 순차 등장 */
.result-modal .ranking-row {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: rowFadeIn 0.35s ease both;
}
.result-modal .ranking-row:nth-child(1) { animation-delay: 0.25s; }
.result-modal .ranking-row:nth-child(2) { animation-delay: 0.32s; }
.result-modal .ranking-row:nth-child(3) { animation-delay: 0.39s; }
.result-modal .ranking-row:nth-child(4) { animation-delay: 0.46s; }
.result-modal .ranking-row:nth-child(5) { animation-delay: 0.53s; }
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── 5. 관리자 페이지 Apple 톤 ─── */
body.admin-body, body#admin-page {
    background: linear-gradient(180deg, #F2F2F5 0%, #EAEAEE 100%) !important;
}
.admin-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 0 24px !important;
    display: flex;
    gap: 4px;
    margin-bottom: 20px !important;
}
.admin-tab {
    background: transparent !important;
    color: var(--text2) !important;
    padding: 12px 18px !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.admin-tab:hover { color: var(--text) !important; }
.admin-tab.active {
    color: var(--text) !important;
    font-weight: 700 !important;
}
.admin-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 18px; right: 18px;
    height: 2px;
    background: var(--apple-red-official);
    border-radius: 2px 2px 0 0;
    animation: tabIndicator 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-panel {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin: 0 24px 20px !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.05) !important;
    border: none !important;
}
.admin-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 20px;
}
.admin-card {
    background: #FAFAFC !important;
    border-radius: 16px !important;
    padding: 18px !important;
    box-shadow: none !important;
    border: 1px solid var(--border-soft) !important;
}
.admin-card .num {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}
.admin-card .label {
    color: var(--meta-gray) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600 !important;
    margin-top: 4px;
}

/* 관리자 테이블 */
.admin-panel table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.admin-panel thead th {
    background: #FAFAFC !important;
    color: var(--meta-gray) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    text-align: left;
}
.admin-panel tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text) !important;
    background: transparent !important;
    font-size: 13px !important;
}
.admin-panel tbody tr:hover { background: var(--bg) !important; }
.admin-panel tbody tr:last-child td { border-bottom: none !important; }

/* 관리자 inline-edit 입력 */
.inline-edit {
    background: #F5F5F7 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: var(--text) !important;
    width: 90px;
}
.inline-edit:focus {
    background: #FFFFFF !important;
    border-color: var(--apple-red-official) !important;
    box-shadow: 0 0 0 3px rgba(227, 0, 14, 0.10) !important;
    outline: none;
}

/* ─── 6. 회전 경고 오버레이 (모바일 세로모드) ─── */
#rotate-overlay {
    background: linear-gradient(180deg, #1C1C1E 0%, #000000 100%) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(20px);
}
#rotate-overlay .rotate-icon,
#rotate-overlay .rotate-arrow {
    filter: drop-shadow(0 2px 8px rgba(255,255,255,0.15));
}

/* ─── 7. 로딩 스크린 Apple 스피너 스타일 ─── */
.game-loading {
    background: linear-gradient(180deg, #F2F2F5 0%, #EAEAEE 100%) !important;
}
.game-loading .loading-text {
    color: var(--text) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    text-transform: uppercase;
}
.game-loading .loading-spinner {
    border: 3px solid rgba(0,0,0,0.08) !important;
    border-top-color: var(--apple-red-official) !important;
}

/* ─── 8. 글로벌 포커스 링 (키보드 접근성) ─── */
button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 2px solid var(--apple-red-official) !important;
    outline-offset: 2px;
}

/* ─── 9. 선택(selection) 색상 Apple 톤 ─── */
::selection {
    background: rgba(227, 0, 14, 0.18);
    color: inherit;
}

/* ─── 10. 유틸 — 경고/성공 배지 (결과 모달 등에서 쓸 수 있게) ─── */
.apple-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.apple-badge.badge-gold {
    background: linear-gradient(135deg, #FFE27A, #FFB800);
    color: #4A3000;
    box-shadow: 0 2px 6px rgba(255, 184, 0, 0.28);
}
.apple-badge.badge-silver {
    background: linear-gradient(135deg, #F5F5F7, #C4C4CA);
    color: #1D1D1F;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.apple-badge.badge-red {
    background: rgba(227, 0, 14, 0.10);
    color: var(--apple-red-official);
}
.apple-badge.badge-green {
    background: rgba(48, 209, 88, 0.12);
    color: #1F7A32;
}

/* ─── 11. 카드 힌트 화살표 (게임 힌트) 톤다운 ─── */
body .card-hint-arrow {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
    color: var(--apple-red-official) !important;
}

/* ─── 12. placeholder 스타일 통일 ─── */
::placeholder { color: #A8A8AD !important; opacity: 1 !important; }

/* ─── 13. details/summary (접을 수 있는 섹션 있으면) ─── */
details {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
details[open] summary { margin-bottom: 8px; }
summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    letter-spacing: -0.01em;
}

/* ─── 14. 파라미터 뱃지 (배판 등 작은 pill) ─── */
.pill-gold {
    background: linear-gradient(135deg, #FFE27A, #FFB800);
    color: #4A3000;
    border-radius: 980px;
    padding: 2px 10px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
}

/* ─── 15. 이모지 불필요 요소 통일 (손패 빈 상태 등) ─── */
body #my-hand:empty::before {
    content: '카드가 없습니다';
    color: var(--meta-gray);
    font-size: 13px;
    font-weight: 500;
    padding: 20px;
    display: block;
    text-align: center;
}

/* ─── 16. 섹션 내부 제목 계층 일관성 ─── */
body:not(.admin-body) .section h4 {
    color: var(--text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 16px 0 10px !important;
    letter-spacing: -0.01em !important;
}

/* ─── 17. 수평 레이아웃 구분선 (아주 연한) ─── */
.section hr, .wallet-card hr {
    border: none !important;
    height: 1px !important;
    background: var(--border-soft) !important;
    margin: 16px 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   게임방 최종 리파인 — "선 0개, 면과 그림자로만 구분"
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 타원형 테이블 테두리 완전 제거 + 페이지 배경과 블렌드 ─── */
/* ::after (실버 메탈릭 림) 완전 소멸 */
body .oval-table::after {
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
    background-image: none !important;
    border: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
    display: none !important;
}
/* ★ 중앙 테이블 상판 — Apple 다크 모드 프리미엄 레이어
   이전: display:none (완전 투명) → 사용자 피드백: "순수 블랙 이질감"
   이후: #1C1C1E ~ #000 radial + SVG 노이즈 + 0.5px 흰선 + 깊은 그림자
   "Z-축 깊이" 를 주어 카드가 다크 레이어 위에 떠 있는 느낌 구현 */
body .oval-table::before {
    background: radial-gradient(ellipse at 50% 40%,
        #FAFAFA 0%, #F2F2F5 40%, #E8E8EC 78%, #DCDCE1 100%) !important;
    box-shadow: /* 아래로 깊은 드롭 그림자 — "떠 있는" 레이어 */
      0 2px 4px rgba(0, 0, 0, 0.15),
      0 12px 32px rgba(0, 0, 0, 0.20),
      0 24px 48px rgba(0, 0, 0, 0.12),
      /* 상단 얇은 흰 하이라이트 (유리 엣지 느낌) */
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      /* 외곽 은은한 흰 테두리 */
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.04) !important;
    display: block !important;
    content: '' !important;
    opacity: 1 !important;
    background-image: /* (1) SVG fractalNoise — 미세 재질감 */
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      /* (2) 중앙 은은한 밝은 스팟 (고급 테이블 조명) */
      radial-gradient(ellipse 60% 50% at 50% 45%,
        rgba(68, 68, 74, 0.45) 0%,
        rgba(44, 44, 46, 0.25) 35%,
        transparent 70%),
      /* (3) 베이스 다크 — 애플 표준 다크모드 톤 */
      radial-gradient(ellipse at 50% 50%,
        #2C2C2E 0%,     /* 중앙 차콜 */
        #1C1C1E 50%,    /* Apple System Gray 6 */
        #0A0A0C 100%);
    background-size: 180px 180px, auto, auto !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-blend-mode: overlay, normal, normal !important;
    border: 0.5px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    transform: translateZ(0);
}
body .oval-table {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─── 2. 카드 깊이감 강화 (Depth) ─── */
/* 손패 — 공중에 살짝 떠 있는 프리미엄 카드 */


/* 멜드(등록) 카드 — 바닥에 깔려있지만 약간의 lift */


/* 버리기 더미 */


/* 덱 뒷면 */


/* ─── 3. 카드 숫자/문양 강화 ─── */


/* ♥♦ 더 선명한 빨강, ♠♣ 깊은 차콜 */
body .hand-card.suit-heart,
body .hand-card.suit-diamond,
body .meld-card.suit-heart,
body .meld-card.suit-diamond {
    color: #E3000E !important;
}
body .hand-card.suit-spade,
body .hand-card.suit-club,
body .meld-card.suit-spade,
body .meld-card.suit-club {
    color: #0A0A0A !important;  /* 기존 #1D1D1F 보다 더 딥 차콜 */
}

/* ─── 4. 하단 액션 버튼 — 20% 축소 + 글래스 ─── */

body #btn-sort,
body #btn-smart,
body #btn-draw,
body #btn-stop,
body .my-controls .ctrl-btn {
    min-height: 42px !important;        /* 52 → 42 (20% down) */
    padding: 10px 16px !important;       /* 14 20 → 10 16 */
    font-size: 13px !important;          /* 15 → 13 */
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* 비활성 버튼 — 글래스 */
body .btn-disabled,
body #btn-sort.btn-disabled,
body #btn-smart.btn-disabled {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    color: #A8A8AD !important;
    box-shadow: inset 0 0 0 1px rgba(210, 210, 215, 0.6) !important;
    border: none !important;
}

/* 활성 버튼 (숫자정렬/등록 등) — 블랙 글래스 */


/* 받기/버리기 — 레드 */


/* 스톱 — 오렌지 글래스 */


/* HUD 버튼들도 비례 축소 + 글래스 */
body #game-leave-btn,
body #game-next-room-btn,
body #btn-mute-voice,
body #btn-mute-sfx,
body #spectator-hud-badge {
    min-height: 58px !important;         /* 72 → 58 (20% down) */
    min-width: 58px !important;
    padding: 8px 14px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
}
body #game-next-room-btn,
body #game-leave-btn {
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ─── 5. 내 정보창 — 순백 대비 ─── */
body .my-info-panel {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
      0 6px 18px rgba(0, 0, 0, 0.08) !important;
    color: #1D1D1F !important;
    backdrop-filter: none !important;
    padding: 10px 14px !important;
}


/* ─── 6. 중앙 타이머 + 배판 — 다크 반투명 원/pill 배경 ─── */
body .center-timer-wrap,
body #center-timer {
    background: transparent !important;
}


/* 배판 pill — 다크 반투명 배경 (사과 아이콘이 잘 보이도록) */
body #multiplier-info:not(:empty) {
    margin-left: 12px !important;
    background: rgba(28, 28, 30, 0.78) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: none !important;
    border-radius: 980px !important;
    padding: 6px 14px !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12),
      0 6px 18px rgba(0, 0, 0, 0.15) !important;
}
body #multiplier-info span[style*="color:var(--text2)"] {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* 턴/상태 정보 pill — 흰 글래스 유지하되 내부 대비 강화 */

body #turn-info {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
    background: transparent !important;
    padding: 0 !important;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65vw;
    vertical-align: middle;
}
body #discard-label {
    color: rgba(28, 28, 30, 0.65) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
body #deck-count {
    color: #0A0A0A !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

/* ─── 7. 좌석 — 테두리 제거, 그림자만 ─── */


/* ═══════════════════════════════════════════════════════════
   ★ 프리미엄 게임방 최종 패스 ★
   · 플레이어 뱃지 뒤 검은 레이어 전부 제거 (순백 대비)
   · 4색 카드 (♥ 빨강 / ♦ 골드 / ♣ 초록 / ♠ 검정)
   · 닉네임 크고 검게, 여백 확보
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 플레이어 뱃지 배경 검은 레이어 완전 제거 ─── */


/* 아바타 배경 다크 → 실버 */
body .player-badge .pb-avatar {
    background: linear-gradient(135deg, #FAFAFC, #EEEEF1) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body .player-badge .pb-initial {
    color: #1D1D1F !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}

/* 이름/잔액 정보 세로 정렬 — 여백 확보 */


/* ═══════════════════════════════════════════════════════════
   ★ 상대 플레이어 손패 — 실제 빨간 사과 카드 뒷면 (Apple 스타일) ★
   · "7장" 같은 텍스트 대신 카드 뒷면 묶음으로 직관적 시각화
   · 각 카드에 미니 사과 로고 워터마크 + 흰 림 + 깊이 그림자
   · 겹친(stack) 레이아웃 유지 (여러 장이 한 묶음처럼)
   ═══════════════════════════════════════════════════════════ */
body .player-badge .pb-cards {
    display: flex !important;
    gap: 0 !important;
    justify-content: center !important;
    padding: 6px 0 4px !important;
    flex-shrink: 0 !important;
    min-height: 82px !important;
}

body .player-badge .mini-card:first-child {
    margin-left: 0 !important;
}
/* 기존 ::after 노이즈 패턴 제거 (사과 로고가 중앙에 있으므로 깔끔하게) */
body .player-badge .mini-card::after {
    content: none !important;
    display: none !important;
}
/* 3장 이상이면 살짝 부채 모양으로 기울임 */
body .player-badge .mini-card:nth-child(1) { transform: rotate(-3deg); }
body .player-badge .mini-card:nth-child(2) { transform: rotate(-1.5deg); }
body .player-badge .mini-card:nth-child(3) { transform: rotate(0deg); }
body .player-badge .mini-card:nth-child(4) { transform: rotate(1.5deg); }
body .player-badge .mini-card:nth-child(5) { transform: rotate(3deg); }
body .player-badge .mini-card:nth-child(6) { transform: rotate(4.5deg); }
body .player-badge .mini-card:nth-child(7) { transform: rotate(6deg); }
body .player-badge .mini-card:nth-child(n+8) { transform: rotate(7.5deg); }

/* 플레이어 카드 아래 "7장" 텍스트 — 카드 뒷면이 시각화하므로 간소화 */


/* 좌석 높이 조정 — 카드 묶음이 잘 보이도록 */


/* 좌석 안쪽 padding — 카드가 프로필 가리지 않게 */


/* ─── 2. 4색 카드 — ♥ Red / ♦ Gold / ♣ Green / ♠ Black ─── */
/* 하트 — 선명한 애플 레드 */
body .hand-card.card-red,
body .meld-card.card-red,
body .hand-card.card-red .card-label,
body .hand-card.card-red .card-suit-icon,
body .hand-card.card-red::after,
body .meld-card.card-red .mc-rank,
body .meld-card.card-red .mc-suit {
    color: #E3000E !important;
}

/* 다이아 — 고급스러운 골드·오렌지 */
body .hand-card.card-diamond,
body .meld-card.card-diamond,
body .hand-card.card-diamond .card-label,
body .hand-card.card-diamond .card-suit-icon,
body .hand-card.card-diamond::after,
body .meld-card.card-diamond .mc-rank,
body .meld-card.card-diamond .mc-suit {
    color: #E68A00 !important;   /* 골드 오렌지 — 검정·빨강과 구별되는 따뜻한 톤 */
}

/* 클로버 — 직관적인 시스템 그린 */
body .hand-card.card-club,
body .meld-card.card-club,
body .hand-card.card-club .card-label,
body .hand-card.card-club .card-suit-icon,
body .hand-card.card-club::after,
body .meld-card.card-club .mc-rank,
body .meld-card.card-club .mc-suit {
    color: #1A7A32 !important;   /* 애플 시스템 그린 다크 */
}

/* 스페이드 — 깊이감 있는 블랙 */
body .hand-card.card-black,
body .meld-card.card-black,
body .hand-card.card-black .card-label,
body .hand-card.card-black .card-suit-icon,
body .hand-card.card-black::after,
body .meld-card.card-black .mc-rank,
body .meld-card.card-black .mc-suit {
    color: #0A0A0A !important;
}

/* 이전 suit-heart/suit-diamond 규칙 override 해제 (중복 적용 차단) */
body .hand-card.suit-heart,
body .hand-card.suit-diamond,
body .meld-card.suit-heart,
body .meld-card.suit-diamond {
    color: inherit !important;
}

/* ─── 3. 카드 숫자·문양 선명도 극대화 ─── */


/* 카드 우하단 워터마크 투명도 살짝 ↑ (선명한 구분) */


/* ─── 4. 빈 좌석 / 대기 상태도 새 톤으로 ─── */
body .empty-seat {
    opacity: 1 !important;
}
body .empty-seat .pb-avatar {
    background: #FAFAFC !important;
    border: 1.5px dashed var(--border-mid) !important;
    box-shadow: none !important;
}
body .empty-seat .pb-initial {
    color: var(--text3) !important;
}
body .empty-seat .pb-name {
    color: var(--text2) !important;
}

body .waiting-badge {
    opacity: 1 !important;
}
body .waiting-badge .pb-avatar {
    border-color: var(--apple-red-official) !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ 플레이어 상태 표시 — 색상 + 인디케이터 (턴/땡큐/대기) ★
   · 기본: 흰 글래스
   · 턴 중       → 부드러운 애플 그린 tint + 초록 glow + ▶
   · 땡큐/대기중 → 부드러운 애플 옐로우 tint + 노랑 glow + 💬
   · 색 투명도 15~20% + 0.3s ease 전환 → 애플 특유의 고급스러운 전이
   ═══════════════════════════════════════════════════════════ */

/* 부드러운 전환 — 모든 좌석이 상태 변화 시 0.3s ease */
body .seat-slot,
body .seat-slot * {
    transition:
      background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease,
      color 0.2s ease !important;
}

/* ─── 턴 표시 (seat-turn): 애플 그린 ─── */
body .seat-slot.seat-turn {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.55),              /* 초록 선명한 ring */
      0 0 28px rgba(52, 199, 89, 0.25),               /* 외곽 halo */
      0 6px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background: rgba(52, 199, 89, 0.16) !important;
    animation: seatTurnGlow 2s ease-in-out infinite;
}
@keyframes seatTurnGlow {
    0%, 100% {
        box-shadow:
          0 0 0 2px rgba(52, 199, 89, 0.55),
          0 0 24px rgba(52, 199, 89, 0.20),
          0 6px 20px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow:
          0 0 0 2px rgba(52, 199, 89, 0.70),
          0 0 36px rgba(52, 199, 89, 0.35),
          0 6px 20px rgba(0, 0, 0, 0.08);
    }
}
/* ▶ 재생 아이콘 — 턴 중인 좌석에 표시 */
body .seat-slot.seat-turn::before {
    content: '';
    position: absolute;
    top: 6px; left: 8px;
    width: 18px; height: 18px;
    background: #1A7A32;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>") center/contain no-repeat;
    z-index: 20;
    filter: drop-shadow(0 1px 2px rgba(52, 199, 89, 0.4));
    animation: indicatorBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ★ 턴 중 텍스트 가독성 — 초록 배경 위에서 완전 대비 ★
   · 글자색 #000000 (Deep Black) 강제 — 어떤 CSS 도 이기도록 최고 구체성
   · 1px 흰색 text-shadow 로 초록 배경에 글자 "떠오름" 효과
   · 닉네임은 흰 반투명 pill 배경 추가로 한번 더 분리 */
body .seat-slot.seat-turn .pb-profile .pb-name,
body .seat-slot.seat-turn .pb-name,
body .seat-slot.seat-turn .pb-info,
body .seat-slot.seat-turn .pb-status,
body .seat-slot.seat-turn .pb-initial,
body .seat-slot.seat-turn .pb-status-wrap,
body .seat-slot.seat-turn .pb-penalties {
    color: #000000 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/* 닉네임 — 흰 반투명 pill 배경으로 한번 더 분리 */
body .seat-slot.seat-turn .pb-profile .pb-name {
    background: rgba(255, 255, 255, 0.78) !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
    text-shadow: none !important;
}

/* 보유머니 골드 pill — 턴 중엔 진한 골드로 더 강조 */
body .seat-slot.seat-turn .pb-chips {
    background: linear-gradient(135deg, #FFF2B8 0%, #FFD54A 100%) !important;
    border-color: rgba(180, 120, 20, 0.45) !important;
    box-shadow:
      0 1px 3px rgba(180, 120, 0, 0.22),
      0 4px 12px rgba(255, 184, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    color: #1D1D1F !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* 땡큐 대기(노란 배경) 도 동일 가독성 보정 */
body .seat-slot.seat-thankyou-check .pb-profile .pb-name,
body .seat-slot.seat-thankyou-check .pb-name,
body .seat-slot.seat-thankyou-check .pb-info,
body .seat-slot.seat-thankyou-check .pb-status,
body .seat-slot.seat-thankyou-check .pb-initial {
    color: #000000 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5),
      0 0 3px rgba(255, 255, 255, 0.3) !important;
}
body .seat-slot.seat-thankyou-check .pb-profile .pb-name {
    background: rgba(255, 255, 255, 0.75) !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
    text-shadow: none !important;
}

/* ─── 땡큐/결정 대기 (seat-thankyou-check): 애플 옐로우 ─── */
body .seat-slot.seat-thankyou-check {
    background: rgba(255, 204, 0, 0.22) !important;   /* System Yellow 22% */
    border: none !important;
    box-shadow:
      0 0 0 2px rgba(255, 204, 0, 0.60),
      0 0 28px rgba(255, 204, 0, 0.28),
      0 6px 20px rgba(0, 0, 0, 0.08) !important;
    animation: seatThankYouGlow 1.4s ease-in-out infinite;
}
@keyframes seatThankYouGlow {
    0%, 100% {
        box-shadow:
          0 0 0 2px rgba(255, 204, 0, 0.60),
          0 0 22px rgba(255, 204, 0, 0.22),
          0 6px 20px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow:
          0 0 0 2px rgba(255, 180, 0, 0.80),
          0 0 38px rgba(255, 180, 0, 0.40),
          0 6px 20px rgba(0, 0, 0, 0.08);
    }
}
/* 💬 말풍선 아이콘 — 땡큐 고민 중 좌석 */
body .seat-slot.seat-thankyou-check::before {
    content: '';
    position: absolute;
    top: 6px; left: 8px;
    width: 20px; height: 20px;
    background: #A06500;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h2v2H7V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h2v2H7V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9z'/></svg>") center/contain no-repeat;
    z-index: 20;
    filter: drop-shadow(0 1px 2px rgba(230, 160, 0, 0.4));
    animation: thinkingBounce 1.6s ease-in-out infinite;
}

@keyframes indicatorBounce {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes thinkingBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* 땡큐 대기 텍스트 — 검정 강제 */
body .seat-slot.seat-thankyou-check .pb-name,
body .seat-slot.seat-thankyou-check .pb-chips,
body .seat-slot.seat-thankyou-check .pb-info,
body .seat-slot.seat-thankyou-check .pb-status,
body .seat-slot.seat-thankyou-check .pb-initial {
    color: #1D1D1F !important;
    text-shadow: none !important;
}

/* 내 영역 (하단)에도 동일 시그널 — 내 턴일 때 초록 */
body .my-area.my-turn-active {
    border-top: none !important;
    box-shadow: inset 0 2px 0 rgba(52, 199, 89, 0.65) !important;
    background: linear-gradient(180deg,
        rgba(52, 199, 89, 0.10) 0%,
        rgba(245, 245, 247, 0.80) 40%) !important;
}
body .my-area.my-thankyou-check {
    border-top: none !important;
    box-shadow: inset 0 2px 0 rgba(255, 204, 0, 0.75) !important;
    background: linear-gradient(180deg,
        rgba(255, 204, 0, 0.14) 0%,
        rgba(245, 245, 247, 0.80) 40%) !important;
}

/* 좌석 내부 여백 재조정 — 좌상단 아이콘 자리 확보
   ★ BUGFIX: 이전엔 position:relative 로 덮어써서 .seat-0/1/2/3 의 절대좌표(top/bottom/left/right)
   가 무효화되어 우측 좌석 2개가 사라지고 감정표현 시 좌석이 이동하던 문제가 있었다.
   반드시 position:absolute !important 유지 + isolation:isolate 로 감정표현 애니메이션의
   transform 이 좌석 좌표에 영향 주지 않도록 격리. */

/* 4좌석 좌표/폭/높이: apple-game.css 의 SSOT 블록(파일 하단) 이 단일 관리 (2026-05-16 v2).
   이전 .seat-slot.seat-N { left:0 right:0 width:180px !important } 하드코드 4줄이
   SSOT 의 var(--seat-inset-x)/var(--seat-panel-w) 변수와 cascade 충돌(specificity
   0,1,2 vs 0,2,3) 발생 — 일부 viewport 에서 변수가 무시되고 0/180px 고정으로
   회귀. 사용자 "수정이 안 되는걸 보니..." 문제의 root cause. → 삭제. */

/* seats-container 가 viewport 전체를 덮도록 강제 (우측 짤림 방지) */
#seats-container {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    overflow: visible !important;   /* 우측 잘림 방지 */
    pointer-events: none;
}
#seats-container > .seat-slot { pointer-events: auto; }

/* 테마 활성 시에도 좌석 절대좌표 유지 (body:not prefix 없이 적용) */
.seat-slot {
    position: absolute !important;
    z-index: 10 !important;
}

/* 감정표현 애니메이션 방어:
   감정표현 팝업(#emote-popup 등)이 .seat-slot 내부에 position:absolute 로 삽입되거나
   transform 으로 움직일 때, 좌석 본체는 절대 움직이지 않도록 transform 차단 */

/* 좌석 내부의 감정표현 팝업 — 좌석 바깥으로 나가지 않게 */
body .seat-slot .emote-popup,
body .seat-slot .emote-bubble {
    position: absolute !important;
    z-index: 25;  /* 좌석(10) 보다 위, 모달(100) 보다 아래 */
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   ★ 아이콘 중복 렌더링 방지 — 이모지 텍스트 0 + ::before 단일 아이콘 ★
   · HTML 에서 이모지 제거 완료 → ::before 만 렌더
   · 폴백: 실수로 텍스트가 들어가도 안 보이도록 text-indent·color:transparent
   ═══════════════════════════════════════════════════════════ */

/* HUD 아이콘 버튼 공용 클래스 — 안전하게 텍스트 완전 차단 */
.hud-icon-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    min-width: 58px; min-height: 58px;
    padding: 8px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.hud-icon-btn > * {
    font-size: 0 !important;
    color: transparent !important;
}

/* 공통 ::before — 크기/위치 정돈 */
#btn-mute-voice::before,
#btn-mute-sfx::before,
#spectator-hud-badge::before {
    position: static !important;
    display: inline-block !important;
    flex-shrink: 0;
}

/* 관전자 뱃지 — 카운트 숫자 표시 복구 */
body #spectator-hud-badge {
    font-size: 0 !important;
    color: transparent !important;
    background: var(--silver-grad) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    padding: 8px 14px !important;
    min-height: 58px !important;
    min-width: 70px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    overflow: visible;
    text-indent: 0 !important;
}
body #spectator-hud-badge::before {
    content: '';
    width: 22px; height: 22px;
    background: var(--apple-red-official);
    -webkit-mask: var(--icon-eye) center/contain no-repeat;
            mask: var(--icon-eye) center/contain no-repeat;
    flex-shrink: 0;
}
body #spectator-hud-badge .hud-count,
body #spectator-hud-count {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1;
}

/* ─── 플레이어 음소거 버튼 복구 ─── */
/* HTML 이모지 제거 완료 → ::before 로만 아이콘 렌더 */
body .pb-mute-btn,
.pb-mute-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
    opacity: 1 !important;
    transition: all 0.2s ease;
}
.pb-mute-btn::before {
    content: '';
    display: block;
    width: 12px; height: 12px;
    background: #1D1D1F;
    -webkit-mask: var(--icon-speaker) center/contain no-repeat;
            mask: var(--icon-speaker) center/contain no-repeat;
    text-indent: 0;
}
/* 음소거 상태 — 빨간 취소선 스피커 */
.pb-mute-btn.muted,
.pb-mute-btn[data-muted="true"] {
    background: rgba(227, 0, 14, 0.10) !important;
    border-color: rgba(227, 0, 14, 0.30) !important;
}
.pb-mute-btn.muted::before,
.pb-mute-btn[data-muted="true"]::before {
    background: var(--apple-red-official);
    -webkit-mask: var(--icon-speaker-off) center/contain no-repeat;
            mask: var(--icon-speaker-off) center/contain no-repeat;
}
.pb-mute-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.pb-mute-btn:active { transform: scale(0.92); }

/* 프로필 영역 레이아웃 조정 — 닉네임 아래 mute 버튼 중앙 정렬 */


/* ─── HUD 버튼 inline 이모지 사이즈 잔재 방어 ─── */
/* HTML inline style="font-size:30px" 가 남아있어도 무력화 */
#btn-mute-voice[style],
#btn-mute-sfx[style] {
    font-size: 0 !important;
}

/* 2026-05-22: [제거됨] 구 멜드 겹침 완화 override(--meld-ox-ratio:0.78 !important).
   style.css 의 overlap 값을 덮어쓰던 legacy. overlap 은 style.css 단일 소스로만 관리. */

/* ═══════════════════════════════════════════════════════════
   ★ 카드 폰트 통일 — 손패 + 멜드 동일 SF Pro Display 감성 ★
   (숫자·문양·조커 모두 같은 타이포 스택으로 일관성)
   ═══════════════════════════════════════════════════════════ */
body .hand-card,
body .hand-card .card-label,
body .hand-card .card-suit-icon,
body .meld-card,
body .meld-card .mc-rank,
body .meld-card .mc-suit {
    font-family:
      -apple-system, BlinkMacSystemFont,
      "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Arial",
      "Apple SD Gothic Neo", "Noto Sans KR",
      sans-serif !important;
    font-feature-settings: "tnum" 1;  /* tabular numbers — 숫자 자릿수 정렬 */
}

/* 멜드 숫자 크기·굵기 — 손패와 동일 레벨 */


/* 멜드 카드 배경·테두리 — 손패와 동일 톤 */


/* 인라인 style="color:..." 이 있으면 mc-rank/mc-suit 에 상속되도록 */
body .meld-card[style*="color"] .mc-rank,
body .meld-card[style*="color"] .mc-suit {
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ 카드 디자인 최종 통일 — 손패 ≡ 멜드 ★
   · 폰트: SF Pro Rounded 우선 (없으면 SF Pro Display) — 더 부드러운 곡선감
   · 크기: 손패 카드 15~20% 확대 (82×115 → 96×134)
   · 숫자/문양: 멜드와 동일 비율·두께
   · 색상: 카드 본체 inline/class 양쪽 모두 4색 팔레트 적용
   ═══════════════════════════════════════════════════════════ */

/* SF Pro Rounded 우선 — macOS/iOS 에 내장됨. 폴백으로 SF Pro Display → 일반 sans */
body .hand-card,
body .meld-card,
body .hand-card .card-label,
body .hand-card .card-suit-icon,
body .meld-card .mc-rank,
body .meld-card .mc-suit {
    font-family:
      "SF Pro Rounded",
      -apple-system, BlinkMacSystemFont,
      "SF Pro Display", "SF Pro Text",
      "Helvetica Neue Rounded",
      "Apple SD Gothic Neo",
      system-ui, sans-serif !important;
    font-feature-settings: "tnum" 1, "ss01" 1 !important;
}

/* 손패 카드 15~20% 확대 + 정갈한 패딩 */


/* 손패 숫자 — 멜드와 동일 스케일 (34px, weight 800, letter-spacing -0.04em) */


/* 손패 문양 — weight 900 + 자기색 outline shadow */


/* 멜드 카드 폰트 사이즈도 비례 유지 (이미 scale 변수와 연동되어 있음) */


/* 우하단 워터마크 (손패만 — Apple 카드 앱 느낌) */


/* 4색 명시 (손패 + 멜드 공통) — card-red/diamond/club/black 에 inline style 없어도 동작 */
body .hand-card.card-red,
body .hand-card.card-red .card-label,
body .hand-card.card-red .card-suit-icon,
body .hand-card.card-red::after,
body .meld-card.card-red,
body .meld-card.card-red .mc-rank,
body .meld-card.card-red .mc-suit { color: #E3000E !important; }

body .hand-card.card-diamond,
body .hand-card.card-diamond .card-label,
body .hand-card.card-diamond .card-suit-icon,
body .hand-card.card-diamond::after,
body .meld-card.card-diamond,
body .meld-card.card-diamond .mc-rank,
body .meld-card.card-diamond .mc-suit { color: #E68A00 !important; }

body .hand-card.card-club,
body .hand-card.card-club .card-label,
body .hand-card.card-club .card-suit-icon,
body .hand-card.card-club::after,
body .meld-card.card-club,
body .meld-card.card-club .mc-rank,
body .meld-card.card-club .mc-suit { color: #1A7A32 !important; }

body .hand-card.card-black,
body .hand-card.card-black .card-label,
body .hand-card.card-black .card-suit-icon,
body .hand-card.card-black::after,
body .meld-card.card-black,
body .meld-card.card-black .mc-rank,
body .meld-card.card-black .mc-suit { color: #0A0A0A !important; }

/* ★ 멜드 카드 4색 동작 원리
   · JS 가 <div class="meld-card" style="color:#E3000E">... 형태로 인라인 색 지정
   · 인라인 style 은 !important 없는 일반 CSS 규칙을 이김
   · 자식 span (.mc-rank/.mc-suit) 은 color 를 상속 → 부모 인라인 색 사용
   · 따라서 .meld-card 에 color !important 를 걸면 절대 안 됨 (인라인 덮어써버림)
   · 자식이 부모 색 상속을 확실히 받도록 inherit 만 지정 */
body .meld-card .mc-rank,
body .meld-card .mc-suit {
    color: inherit !important;
}

/* hover / selected 상태 — 새 크기에 맞춰 조정 */
body .hand-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
      0 14px 28px rgba(0, 0, 0, 0.14),
      0 24px 48px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    border-color: #A8A8AD !important;
    transform: translateY(-12px) !important;
}
body .hand-card.selected {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 10px rgba(227, 0, 14, 0.30),
      0 16px 36px rgba(227, 0, 14, 0.20),
      0 28px 56px rgba(227, 0, 14, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-18px) !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ 중앙 타이머 + 하단 액션 버튼 시인성 강화 ★
   · 타이머 숫자 1.5배 확대 + <5초 빨간 깜빡임
   · 액션 버튼 글씨 키우고 padding 재조정
   · SF Pro Rounded 통일 + press scale 애니메이션
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 중앙 타이머 확대 ─── */
body .center-timer-wrap {
    z-index: 5;
}


body .timer-turn-name {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

/* 타이머 상태별 색상 & 펄스
   기본 링을 애플 골드로 전환 — 다크 배경 위에서 고급스럽게 빛남 */
body .timer-circle.timer-normal {
    border-color: rgba(255, 204, 0, 0.80) !important;     /* Apple Yellow Gold */
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.18),
      0 0 26px rgba(255, 204, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
body .timer-circle.timer-normal .timer-number {
    color: #FFE28A !important;  /* 골드 톤 숫자 */
    text-shadow: 0 0 16px rgba(255, 204, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
body .timer-circle.timer-thankyou {
    border-color: rgba(255, 204, 0, 0.70) !important;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.14),
      0 0 26px rgba(255, 204, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body .timer-circle.timer-warning {
    border-color: rgba(255, 159, 10, 0.75) !important;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.14),
      0 0 28px rgba(255, 159, 10, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body .timer-circle.timer-warning .timer-number {
    color: #FFD57A !important;
}

/* <= 4초: 긴박 — 빨간 깜빡임 */
body .timer-circle.timer-danger {
    border-color: #FF3B30 !important;
    background: rgba(40, 10, 10, 0.88) !important;
    animation: timerDangerPulse 0.7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes timerDangerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.14),
          0 0 28px rgba(255, 59, 48, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    50% {
        transform: scale(1.08);
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.14),
          0 0 44px rgba(255, 59, 48, 0.60),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
}
@keyframes timerDangerBlink {
    0%, 100% { opacity: 1; color: #FFFFFF; }
    50%      { opacity: 0.85; color: #FF3B30; }
}

/* ─── 2. 하단 액션 버튼 확대 ─── */

body #btn-sort,
body #btn-smart,
body #btn-draw,
body #btn-stop,
body .my-controls .ctrl-btn {
    min-height: 62px !important;            /* 42 → 62 */
    min-width: 110px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;             /* 13 → 18 */
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    border-radius: 16px !important;
    font-family:
      "SF Pro Rounded", -apple-system,
      "SF Pro Display", system-ui, sans-serif !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition:
      transform 0.12s ease,
      background 0.2s ease,
      box-shadow 0.18s ease !important;
}

/* 버튼 press 시 scale-down 피드백 */
body #btn-sort:active,
body #btn-smart:active,
body #btn-draw:active,
body #btn-stop:active,
body .my-controls .ctrl-btn:active {
    transform: scale(0.94) !important;
}

/* 버튼별 색상 — 대비 강화 */
body .btn-active {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14),
      0 8px 20px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    border: none !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
}
body .btn-active:hover {
    background: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20),
      0 12px 28px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* 받기/버리기 — 애플 레드 */
body #btn-draw.btn-active {
    background: linear-gradient(180deg, #FF5E54, #E5443B) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(227, 0, 14, 0.28),
      0 10px 26px rgba(227, 0, 14, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
}
body #btn-draw.btn-active:hover {
    background: linear-gradient(180deg, #FF6E64, #D23A31) !important;
}

/* 스톱 — 오렌지 */
body #btn-stop.btn-active {
    background: linear-gradient(180deg, #FFB540, #FF9500) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(255, 149, 0, 0.28),
      0 10px 26px rgba(255, 149, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* 비activated — 밝고 명확한 대비 */
body .btn-disabled {
    background: #FFFFFF !important;
    color: #A8A8AD !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    cursor: not-allowed;
    opacity: 1 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ 중앙 스택 (덱 / 타이머 / 버린카드) 대형화 + 통일 ★
   · 덱 + 버린카드 크기 손패 수준으로 확대
   · 버린카드 디자인 = 손패/멜드와 동일 (SF Pro Rounded + 4색)
   · 중앙 스택 배경 투명화 + 상단 공간 충분히 활용
   ═══════════════════════════════════════════════════════════ */


/* --center-stack-w / --center-half 반응형은 apple-game.css 단일 SSOT 가 관리 (2026-05-16 REFACTOR).
   이전 1280/1080 미디어쿼리 → apple-game 1599/1199/899 와 1px 충돌 → 삭제. */

body .center-stack {
    gap: 14px !important;
    padding: 12px !important;
    background: transparent !important;    /* 다크 상판이 이미 있으므로 투명 */
    border-radius: 0 !important;
    width: var(--center-stack-w) !important;
}
/* 멜드 영역 — 다크 상판 위에서 명확히 구분되도록 내부 살짝 밝게 */
body .table-felt {
    background: transparent !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.03) !important;
}

/* 덱 뒷면 — 큰 사이즈 + 사과 로고 */

/* 덱의 카드 장수 숫자 — 우하단 배지 */

/* 옛 노이즈 패턴 ::after 제거 */
body .card-back::after {
    content: none !important;
    display: none !important;
}

/* 버린카드 — 손패/멜드와 동일 Apple 스타일 */
body .discard-pile {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1.5px dashed rgba(134, 134, 139, 0.35) !important;
    border-radius: 14px !important;
    color: var(--meta-gray) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05),
      0 8px 20px rgba(0, 0, 0, 0.10) !important;
    width: 104px !important;
    height: 146px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* discard-card-content — 손패의 card-label/card-suit-icon 과 동일 스타일 */
body .discard-card-content {
    padding: 10px 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    position: relative;
    width: 100%; height: 100%;
    font-family: "SF Pro Rounded", -apple-system, "SF Pro Display", system-ui, sans-serif !important;
    font-feature-settings: "tnum" 1, "ss01" 1;
}


/* 버린카드 우하단 반투명 대형 문양 워터마크 */
body .discard-card-content::after {
    content: attr(data-suit);
    position: absolute;
    bottom: 10px; right: 12px;
    font-size: 54px;
    font-weight: 900;
    opacity: 0.15;
    line-height: 1;
    color: inherit;
    pointer-events: none;
    font-family: "SF Pro Rounded", -apple-system, "SF Pro Display", system-ui, sans-serif;
}

/* 버린카드 라벨 (버린 사람 이름) */
body .discard-label {
    color: var(--text2) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-shadow: none !important;
    bottom: -16px !important;
}

/* 타이머 원형도 중앙 스택 크기에 맞춰 확대 */


body .timer-circle.timer-danger .timer-number {
    color: #FF6B5C !important;
    font-size: 72px !important;
    animation: timerDangerBlink 0.7s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   ★ 카드 디자인 고도화 — 사과 로고 제거 + 라운드 볼드 폰트 + 디테일
   · 덱/상대 손패 뒷면에서 사과 아이콘 제거 → 다이아 무늬 패턴
   · M PLUS Rounded 1c 900 + Jua — 둥글고 귀여운 볼드체
   · 0.5px 세밀한 테두리 + 다중 그림자 + 8-10px radius
   · 손패 숫자 추가 20% 확대 + weight 900
   ═══════════════════════════════════════════════════════════ */

/* 전역 카드 폰트 스택 업데이트 — 라운드 볼드 우선 */
body .hand-card,
body .hand-card .card-label,
body .hand-card .card-suit-icon,
body .meld-card,
body .meld-card .mc-rank,
body .meld-card .mc-suit,
body .discard-card-content,
body .discard-card-content .dc-rank,
body .discard-card-content .dc-suit,
body .timer-number {
    font-family:
      "M PLUS Rounded 1c",     /* Google Font — 라운드 볼드, Latin+Korean 모두 */
      "Jua",                    /* Google Font — 귀여운 한글 라운드 */
      "SF Pro Rounded",         /* macOS/iOS 내장 */
      -apple-system, BlinkMacSystemFont,
      "SF Pro Display",
      "Apple SD Gothic Neo",
      system-ui, sans-serif !important;
    font-feature-settings: "tnum" 1, "ss01" 1 !important;
}

/* ─── 1. 덱 뒷면 — 상대 손패와 동일한 빨간 다이아 패턴 ─── */
body .card-back {
    background: /* 다이아몬드 격자 무늬 (흰색 투명) — mini-card 와 동일 패턴 */
      repeating-linear-gradient(45deg,
        transparent 0, transparent 8px,
        rgba(255, 255, 255, 0.14) 8px, rgba(255, 255, 255, 0.14) 9px,
        transparent 9px, transparent 17px),
      repeating-linear-gradient(-45deg,
        transparent 0, transparent 8px,
        rgba(255, 255, 255, 0.10) 8px, rgba(255, 255, 255, 0.10) 9px,
        transparent 9px, transparent 17px),
      /* 빨간 그라데이션 바닥 */
      linear-gradient(145deg, #FF5E54 0%, #E3000E 50%, #B5000B 100%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 6px 16px rgba(227, 0, 14, 0.18),
      0 14px 32px rgba(0, 0, 0, 0.08) !important;
    width: 104px !important;
    height: 146px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding: 8px !important;
    position: relative;
    font-size: 13px !important;
    color: #1D1D1F !important;
    font-weight: 700 !important;
    font-family: "SF Pro Rounded", -apple-system, "SF Pro Display", system-ui, sans-serif !important;
}
/* 덱 카운트 배지 — 우하단 (빨간 배경 위에서 잘 보이는 흰 pill) */
body .card-back #deck-count {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1D1D1F !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
    font-family: "M PLUS Rounded 1c", "SF Pro Rounded", system-ui, sans-serif !important;
}

/* ─── 2. 상대 손패 뒷면 — 사과 로고 제거 + 다이아 격자 패턴 ─── */
body .player-badge .mini-card {
    width: 44px !important;
    height: 64px !important;
    border-radius: 8px !important;
    background: repeating-linear-gradient(45deg,
        transparent 0, transparent 4px,
        rgba(255, 255, 255, 0.12) 4px, rgba(255, 255, 255, 0.12) 5px,
        transparent 5px, transparent 9px),
      repeating-linear-gradient(-45deg,
        transparent 0, transparent 4px,
        rgba(255, 255, 255, 0.08) 4px, rgba(255, 255, 255, 0.08) 5px,
        transparent 5px, transparent 9px),
      linear-gradient(145deg, #FF5E54 0%, #E3000E 50%, #B5000B 100%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
      0 3px 8px rgba(227, 0, 14, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
    margin-left: -26px !important;
    position: relative;
    transform: rotate(0deg);
    transition: transform 0.2s ease !important;
}

/* ─── 3. 손패 카드 — 적정 크기로 축소 (115→100) ─── */
body .hand-card {
    background: #FFFFFF !important;
    border: 0.5px solid #E0E0E0 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.95) inset,
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 6px 14px rgba(0, 0, 0, 0.10),
      0 16px 36px rgba(0, 0, 0, 0.08) !important;
    padding: 10px 10px 0 !important;
    align-items: flex-start;
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
    width: 100px !important;
    height: 140px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}
body .hand-card .card-label {
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    text-align: left;
    margin-top: 0 !important;
}
body .hand-card .card-suit-icon {
    font-size: 30px !important;
    line-height: 1 !important;
    margin-top: 3px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 0.5px currentColor,
      0.3px 0 0 currentColor,
      -0.3px 0 0 currentColor,
      0 0.3px 0 currentColor !important;
}
body .hand-card::after {
    content: attr(data-suit);
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 48px !important;
    font-weight: 900;
    opacity: 0.14;
    line-height: 1;
    font-family: "SF Pro Rounded", -apple-system,
      "SF Pro Display", system-ui, sans-serif;
    pointer-events: none;
}

/* ─── 4. 멜드 카드 — 같은 폰트/톤 ─── */
body .meld-card {
    background: #FFFFFF !important;
    border: 0.5px solid #E0E0E0 !important;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.9) inset,
      0 1px 2px rgba(0, 0, 0, 0.05),
      0 3px 8px rgba(0, 0, 0, 0.08),
      0 8px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 4px 0 0 5px !important;
    border-radius: 8px !important;
}
body .meld-card .mc-rank {
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    font-size: calc(34px * var(--meld-scale, 1)) !important;
    line-height: 1 !important;
}
body .meld-card .mc-suit {
    font-weight: 900 !important;
    font-size: calc(24px * var(--meld-scale, 1)) !important;
    line-height: 1 !important;
    text-shadow: 0 0 0.5px currentColor,
      0.3px 0 0 currentColor,
      -0.3px 0 0 currentColor !important;
}

/* ─── 5. 버린카드 — 같은 톤 ─── */
body .discard-pile.has-card {
    background: #FFFFFF !important;
    border: 0.5px solid #E0E0E0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.95) inset,
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 6px 14px rgba(0, 0, 0, 0.10),
      0 16px 32px rgba(0, 0, 0, 0.08) !important;
    overflow: visible !important;
}
body .discard-card-content .dc-rank {
    font-size: 40px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: inherit !important;
}
body .discard-card-content .dc-suit {
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-top: 3px !important;
    color: inherit !important;
    text-shadow: 0 0 0.5px currentColor,
      0.3px 0 0 currentColor,
      -0.3px 0 0 currentColor,
      0 0.3px 0 currentColor !important;
}

/* 타이머 숫자 — 라운드 볼드 */


/* ═══════════════════════════════════════════════════════════
   ★ 플레이어 정보 폰트 확대 + 보이스팩 아바타 + balance no-wrap ★
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 내 정보 패널 (하단) 폰트 대폭 확대 ─── */
body #my-info-panel {
    padding: 14px 18px !important;
    min-width: 200px !important;
    gap: 6px !important;
}
body #my-nick {
    color: #1D1D1F !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em;
    white-space: nowrap !important;
}
body #my-info-balance {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    color: #1D1D1F !important;
    text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.7) !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    padding: 6px 14px 6px 10px !important;
    background: linear-gradient(135deg, #FFF9E0 0%, #FFE98A 100%) !important;
    border: 1px solid rgba(200, 140, 30, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(180, 120, 0, 0.15),
      0 4px 12px rgba(255, 184, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
body #my-info-balance::before {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    background: url('apple-logo.svg') center/contain no-repeat !important;
    filter: drop-shadow(0 1px 2px rgba(227, 0, 14, 0.30)) !important;
    -webkit-mask: none !important;
    mask: none !important;
    flex-shrink: 0;
}
body .my-score-badge,
body #my-score {
    font-size: 17px !important;               /* 12 → 17 */
    font-weight: 700 !important;
    color: #1D1D1F !important;
    padding: 4px 10px;
    background: var(--silver-grad);
    border-radius: 10px;
    display: inline-block;
    letter-spacing: -0.01em;
}

/* ─── 2. 다른 플레이어 정보 폰트 확대 ─── */
body .player-badge .pb-name {
    background: transparent !important;
    border: none !important;
    color: #1D1D1F !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    padding: 2px 4px !important;
    max-width: 160px !important;
    letter-spacing: -0.01em;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}


body .player-badge .pb-penalties,
body .player-badge .pb-gold-wrap {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* 좌석 넓이 확장 — 큰 글자 수용 */


/* ─── 3. 보이스팩 기반 아바타 이모지 ─── */
/* pb-initial (알파벳 이니셜) 숨김 */
body .pb-avatar[data-voice="man"] .pb-initial,
body .pb-avatar[data-voice="woman"] .pb-initial,
body .pb-avatar[data-voice="bj_happy"] .pb-initial,
body .pb-avatar[data-voice="happy"] .pb-initial,
body .pb-avatar[data-voice="burger"] .pb-initial,
body .pb-avatar[data-voice="chilbong"] .pb-initial,
body .pb-avatar[data-voice="poggun"] .pb-initial {
    display: none !important;
}

/* 아바타 기본 크기 확대 + 보이스팩 이모지 렌더 */


body .pb-avatar[data-voice="man"]::before {
    content: '🧑';
    font-size: 26px;
    line-height: 1;
}
body .pb-avatar[data-voice="woman"]::before {
    content: '👩';
    font-size: 26px;
    line-height: 1;
}
body .pb-avatar[data-voice="bj_happy"]::before {
    content: '😊';
    font-size: 26px;
    line-height: 1;
}
body .pb-avatar[data-voice="happy"]::before {
    content: '😄';
    font-size: 26px;
    line-height: 1;
}
body .pb-avatar[data-voice="burger"]::before {
    content: '🍔';
    font-size: 24px;
    line-height: 1;
}
body .pb-avatar[data-voice="chilbong"]::before {
    content: '🎤';
    font-size: 24px;
    line-height: 1;
}
body .pb-avatar[data-voice="poggun"]::before {
    content: '💪';
    font-size: 24px;
    line-height: 1;
}

/* 보이스팩별 배경 tint — 미세한 차이 */
body .pb-avatar[data-voice="man"] {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important;  /* 연한 파랑 */
}
body .pb-avatar[data-voice="woman"] {
    background: linear-gradient(135deg, #FCE4EC, #F8BBD0) !important;  /* 연한 핑크 */
}
body .pb-avatar[data-voice="bj_happy"],
body .pb-avatar[data-voice="happy"] {
    background: linear-gradient(135deg, #FFF9C4, #FFF59D) !important;  /* 연한 노랑 */
}
body .pb-avatar[data-voice="burger"] {
    background: linear-gradient(135deg, #FFE0B2, #FFCC80) !important;  /* 연한 주황 */
}
body .pb-avatar[data-voice="chilbong"] {
    background: linear-gradient(135deg, #E1BEE7, #CE93D8) !important;  /* 연한 보라 */
}
body .pb-avatar[data-voice="poggun"] {
    background: linear-gradient(135deg, #FFCDD2, #EF9A9A) !important;  /* 연한 빨강 */
}

/* 데이터 속성 없는 일반 아바타 (사람 유저 — 기본 인물 아이콘) */
body .pb-avatar:not([data-voice]):not([data-voice=""]),
body .pb-avatar[data-voice=""] {
    /* 기본 유저 — 초기 문자 유지 */
    background: linear-gradient(135deg, #FAFAFC, #EEEEF1) !important;
}
body .pb-avatar[data-voice=""] .pb-initial {
    display: inline-flex !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1D1D1F !important;
}

/* HUD 상단 잔액도 no-wrap + 크기 ↑ */
body #game-balance,
body .balance-badge {
    font-size: 17px !important;               /* 15 → 17 */
    white-space: nowrap !important;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════
   ★★ FINAL HIG-STRICT PASS — Apple HIG 엄격 준수 ★★
   1. 실버-그레이 그라데이션 배경 (145deg 좌상→우하 광원)
   2. 테두리 선 전면 제거 → shadow-blur 30px 로만 레이어 분리
   3. 간격 1.5배 확대 (gap/padding/margin)
   4. SF Pro Rounded Bold 전역 강제
   5. SF Symbols 스타일 얇은 라인 아이콘
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. 실버 그라데이션 배경 (전역) ─── */

body #game-screen,
body #lobby-screen,
body #auth-screen {
    background: transparent !important;   /* body 그라데이션이 비치게 */
}
body .game-layout {
    background: transparent !important;
}

/* ─── 2. 테두리 전면 제거 + 30px shadow 레이어 ─── */
body .wallet-card,
body .section,
body .stat-box,
body .admin-card,
body .info-box,
body .auth-container,
body .modal-content,
body #theme-modal,
body #my-info-panel,
body .lobby-menu-dropdown,
body #spectator-list-popup,
body #emote-panel {
    border: none !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 4px 16px rgba(0, 0, 0, 0.04),
      0 20px 30px rgba(0, 0, 0, 0.05) !important;
}

body .room-card {
    border: none !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 30px rgba(0, 0, 0, 0.06) !important;
}
body .room-card:hover {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.04),
      0 18px 40px rgba(0, 0, 0, 0.10) !important;
}


/* 카드류 — 얇은 0.5px 테두리 유지 (카드는 실제 물리적 경계감이 필요) */
body .hand-card,
body .meld-card,
body .discard-pile.has-card,
body .card-back {
    border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.95) inset,
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 20px rgba(0, 0, 0, 0.08),
      0 18px 36px rgba(0, 0, 0, 0.06) !important;
}

/* 구분선 전면 제거 — HIG 원칙 "면과 그림자로만 구분" */
body hr,
body .divider,
body .separator,
body .lobby-tabs,
body .admin-tabs {
    border: none !important;
    background: transparent !important;
}
body .lobby-tabs,
body .admin-tabs {
    /* 탭 아래 구분선도 투명 + 활성 탭의 빨간 indicator 만 유지 */
    border-bottom: none !important;
}

/* ─── 3. 간격 1.5배 확대 ─── */
body .section {
    padding: 40px 48px !important;          /* 28 32 → 40 48 */
    margin: 0 36px 32px !important;          /* 0 24 24 → 0 36 32 */
}
body .section-header {
    margin-bottom: 36px !important;          /* 24 → 36 */
}
body .room-grid,
body .wallet-cards {
    gap: 28px !important;                    /* 20 → 28 */
}
body .room-card,
body .wallet-card {
    padding: 32px !important;                /* 24 → 32 */
}
body .lobby-tabs {
    gap: 6px !important;
    padding: 0 36px !important;              /* 0 24 → 0 36 */
}
body .lobby-tabs .nav-btn {
    padding: 18px 28px !important;           /* 14 20 → 18 28 */
}
body .auth-container {
    padding: 52px 40px 40px !important;      /* 44 36 32 → 52 40 40 */
    max-width: 420px !important;
}
body .auth-form {
    gap: 14px !important;                    /* 10 → 14 */
}
body .modal-content {
    padding: 36px !important;                /* 28 → 36 */
}
body .my-controls {
    gap: 16px !important;
    padding: 14px 18px !important;
    margin-left: 40px !important;
    margin-right: 12px !important;
}
body .my-area {
    background: rgba(245, 245, 247, 0.72) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-top: none !important;
    padding: 16px 24px !important;
    gap: 18px !important;
}


/* ─── 4. SF Pro Rounded Bold 전역 ─── */
body,
body * {
    font-family:
      "M PLUS Rounded 1c",     /* Google Font — Latin + Korean 라운드 볼드 */
      "Jua",                    /* Google Font — 한글 전용 라운드 */
      "SF Pro Rounded",         /* macOS/iOS 내장 */
      -apple-system, BlinkMacSystemFont,
      "SF Pro Display",
      "Apple SD Gothic Neo",
      system-ui, sans-serif;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 주요 타이포 weight 상향 — "귀엽고 볼드" */
body h1,
body h2,
body h3,
body h4,
body .btn-primary,
body .btn-danger,
body #my-nick,
body #my-info-balance,
body .pb-name,
body .pb-chips,
body #turn-info,
body .balance-badge {
    font-weight: 800 !important;
}
body .hand-card .card-label,
body .hand-card .card-suit-icon,
body .meld-card .mc-rank,
body .meld-card .mc-suit,
body .discard-card-content .dc-rank,
body .discard-card-content .dc-suit,
body .timer-number {
    font-weight: 900 !important;
}

/* ─── 5. 탭 인디케이터 두께 살짝 얇게 (HIG 스타일) ─── */
body .lobby-tabs .nav-btn.active::after,
body .admin-tab.active::after {
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
}

/* 모달 overlay 톤 — HIG 는 30% 정도의 부드러운 dim */
body .modal,
body #theme-modal-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ 좌석 레이아웃 재구성 — 세로 3행 스택으로 가로폭 축소 ★
   Row 1: [아바타] [닉네임] [음소거 버튼]  ← 한 줄
   Row 2: [보유머니]                       ← 아래 줄
   Row 3: [4장 등록]                       ← 하단
   ═══════════════════════════════════════════════════════════ */

/* 좌석 가로폭 축소 */
body .seat-slot {
    background: rgba(255, 255, 255, 0.82) !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 30px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-radius: 16px !important;
    min-height: 180px !important;
    padding: 16px !important;
    padding-top: 14px !important;
    position: absolute !important;
    isolation: isolate;
    contain: layout;
    z-index: 10;
    transform: none !important;
    will-change: auto !important;
    width: 190px !important;
    overflow: visible !important;
}
body .player-badge {
    overflow: visible !important;
}

/* pb-bottom 을 세로 스택으로 전환 */
body .player-badge .pb-bottom {
    gap: 6px !important;
    padding: 6px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Row 1: pb-profile — 아바타 + 닉네임 + 음소거 가로 배치 */
body .player-badge .pb-profile {
    gap: 8px !important;
    padding: 2px 0 !important;
    align-items: center !important;
    justify-content: flex-start;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    flex: 0 0 auto !important;
}
/* 아바타: 왼쪽 고정 */
body .player-badge .pb-profile .pb-avatar {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
/* 닉네임: 중앙 가변, 길면 말줄임 */
body .player-badge .pb-profile .pb-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    max-width: none !important;
}
/* 음소거 버튼: 오른쪽 고정 */
body .player-badge .pb-profile .pb-mute-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Row 2+3: pb-detail — flex-wrap 으로 "보유머니 / 카드정보+미등록박 / 상태" 3행 */
body .player-badge .pb-detail {
    gap: 4px !important;
    padding-left: 4px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 3px !important;
    column-gap: 6px !important;
    width: 100% !important;
    padding: 0 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* 보유머니 — 자체 행 (flex 100%) */


/* 카드 수·상태 정보 + 미등록박 + 배판 — 모두 같은 행에 나란히 */
body .player-badge .pb-info,
body .player-badge .pb-penalties,
body .player-badge .pb-gold-wrap {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
}
body .player-badge .pb-gold-wrap:empty {
    display: none !important;                 /* 배판 없을 때 공간 차지 X */
}

/* 상태 wrap — 자체 행 */
body .player-badge .pb-status-wrap {
    flex: 1 1 100% !important;
}

/* 배판 (pb-gold) 뱃지 — 골드 pill */
body .player-badge .pb-gold-wrap:not(:empty),
body .player-badge .pb-gold {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #B87400 !important;
    background: linear-gradient(135deg, rgba(255,227,122,0.35), rgba(255,184,0,0.25)) !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    animation: none !important;
}

/* 미등록박 뱃지 스타일 — 시선 끌기 */
body .player-badge .pb-penalties:not(:empty) {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--apple-red-official) !important;
    background: rgba(227, 0, 14, 0.10);
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.2;
}

/* 보유머니 — 게임에서 가장 중요한 정보, 강조된 하이라이트 pill */
body .player-badge .pb-chips {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    color: #1D1D1F !important;
    text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6) !important;
    font-weight: 900 !important;
    font-size: 19px !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    flex: 1 1 100% !important;
    overflow: visible !important;
    max-width: none !important;
    padding: 5px 12px 5px 8px !important;
    background: linear-gradient(135deg, #FFF9E0 0%, #FFE98A 100%) !important;
    border: 1px solid rgba(200, 140, 30, 0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(180, 120, 0, 0.12),
      0 3px 8px rgba(255, 184, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
body .player-badge .pb-chips::before {
    content: '' !important;
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    background: url('apple-logo.svg') center/contain no-repeat !important;
    filter: drop-shadow(0 1px 2px rgba(227, 0, 14, 0.30)) !important;
    flex-shrink: 0;
    -webkit-mask: none !important;
    mask: none !important;
}

/* "4장 등록" 같은 상태 정보 — 보유머니 아래 한 줄 */
body .player-badge .pb-info {
    color: var(--text2) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.3px;
    text-shadow: none !important;
    white-space: nowrap;
    margin: 0 !important;
}
body .player-badge .pb-status {
    color: #1D1D1F !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap;
}
body .player-badge .pb-penalties,
body .player-badge .pb-gold-wrap,
body .player-badge .pb-status-wrap {
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* 아바타 크기 소폭 조정 — 행에 딱 맞게 */
body .pb-avatar {
    box-shadow: var(--shadow-xs) !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--border-soft) !important;
    background: var(--silver-grad) !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   ★ 3-Tier SEGMENTED LAYOUT — 전면 재건축 (Clean Rewrite) ★
   · Flexbox column · Header/Footer 완전 불투명 (1.0) · backdrop-filter 제거
   · 시맨틱 태그: <header>/<main>/<footer>
   · contain/isolation/중복 규칙 모두 제거됨
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --bg: #F5F5F7;
    --bg2: #FDFDFE;
    --bg3: #F0F0F3;
    --text: #1D1D1F;
    --text2: #6E6E73;
    --accent: #FF3B30;
    --accent-2: #FF6B5C;
    --gold: #FF3B30;
    --primary: #1D1D1F;
    --danger: #FF3B30;
    --success: #30D158;
    --warning: #FF9F0A;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.05), 0 24px 48px rgba(0,0,0,0.08);
    --glow: none;
    --bg-soft: #FAFAFA;
    --border-soft: #E5E5E7;
    --border-mid: #D2D2D7;
    --text3: #A8A8AD;
    --accent-soft: #FF6B63;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06);
    --silver-grad: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
    --silver-grad-strong: linear-gradient(145deg, #FCFCFD 0%, #F2F2F5 50%, #E8E8EC 100%);
    --icon-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 6c-4.4 0-7.9 2.4-10 6 2.1 3.6 5.6 6 10 6s7.9-2.4 10-6c-2.1-3.6-5.6-6-10-6zm0 10a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/></svg>");
    --icon-mic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 14a3 3 0 003-3V6a3 3 0 00-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 006 6.93V22h2v-4.07A7 7 0 0019 11h-2z'/></svg>");
    --icon-mic-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zM14.98 11.17c0-.06.02-.11.02-.17V5a3 3 0 00-5.94-.6L14.98 11.17zM4.27 3L3 4.27l6.01 6.01V11a3 3 0 005.08 2.17l1.66 1.66A5.94 5.94 0 0112 16a5 5 0 01-5-5H5a7 7 0 0010 6.37L19.73 21 21 19.73 4.27 3z'/></svg>");
    --icon-speaker: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 10v4a1 1 0 001 1h3l5 4V5L7 9H4a1 1 0 00-1 1zm13.5 2a4.5 4.5 0 00-2.5-4v8a4.5 4.5 0 002.5-4zm-2.5 7a7 7 0 000-14v2a5 5 0 010 10v2z'/></svg>");
    --icon-speaker-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16.5 12A4.5 4.5 0 0014 8v2.18l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.96 8.96 0 0021 12a9 9 0 00-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.17v2.06a8.99 8.99 0 003.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/></svg>");
    --icon-palette: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c1.1 0 2-.9 2-2 0-.51-.2-.97-.51-1.31-.31-.34-.51-.8-.51-1.31 0-1.1.9-2 2-2h2.36c3.04 0 5.5-2.46 5.5-5.5C22.67 5.08 18 2 12 2zM6.5 12a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm3-4a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm5 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm3 4a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/></svg>");
    --icon-menu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/></svg>");
    --icon-smile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/></svg>");
    --icon-door: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 17v-2H8v-3h8V10l4 3.5-4 3.5zM14 3H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h9c1.1 0 2-.9 2-2v-2h-2v2H5V5h9v2h2V5a2 2 0 00-2-2z'/></svg>");
    --icon-swap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z'/></svg>");
    --apple-red-official: #E3000E;
    --meta-gray: #86868B;
    /* --center-stack-w / --center-half 는 apple-game.css SSOT 가 관리 (2026-05-16 REFACTOR).
       이전 170/90 → apple-game 가 90/38 로 override → 단일 소스로 정리. */
    --hud-header-h: 60px;
    --hud-footer-h: 220px;
    --hud-plane: #F5F5F7;
    --hud-border: #D2D2D7;
}

/* 0) .game-layout — Flexbox column, 화면 분할 */
body.game-popup-body .game-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 1600px !important;
    height: 900px !important;
    min-height: 900px !important;
    max-height: 900px !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* 1) HEADER — 60px 고정, 완전 불투명, backdrop-filter 제거 */


/* 2) MAIN — flex:1 로 나머지 공간 전부 */

/* 기본 테마 — radial-gradient (중앙 깊이 / 외곽 정갈) */


/* 3) FOOTER — 220px 고정, 완전 불투명, 대칭 구분선 */


/* 4) HUD 좌측 — 안내 문구 "텍스트만" · 배경/테두리/박스 전부 금지 */
body.game-popup-body .hud-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.game-popup-body .hud-status-text.is-my-turn {
    color: #E3000E !important;
    /* 내 차례만 살짝 진하게 — 기본 semibold ↑ bold */
    font-weight: 700 !important;
}
/* 내용 변경 시 슥 나타나는 페이드 (game.js 에서 .fade-in 토글) */
body.game-popup-body .hud-status-text.fade-in {
    animation: hudStatusFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hudStatusFadeIn {
    0%   { opacity: 0; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 5) HUD 우측 — 버튼 한 열, 우측 끝, 60px 안에서 수직 중앙 */
body.game-popup-body .hud-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* HUD 내부 모든 버튼 — 60px 높이에 맞추기 (인라인 min-height:72px 강제 오버라이드) */
body.game-popup-body .hud-right > button,
body.game-popup-body .hud-right .btn-sm {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
/* 아이콘 전용 버튼 (음소거·테마·관전) — 정사각형 */
body.game-popup-body .hud-right .hud-icon-btn,
body.game-popup-body .hud-right #spectator-hud-badge {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
}
/* 액션 버튼 (다른 방 / 나가기) — HUD 에 맞는 pill */
body.game-popup-body .hud-right .hud-action-next {
    background: #1D1D1F !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
}
body.game-popup-body .hud-right .hud-action-leave {
    background: #E3000E !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
}

/* 6) 중앙 떠있던 다크 pill (.game-status-bar) 제거 */
body .game-status-bar {
    background: rgba(28, 28, 30, 0.78) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12),
      0 8px 22px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 22px !important;
    border-radius: 980px !important;
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 10000 !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    max-width: 70vw;
    pointer-events: none;
    animation: hudStatusFadeInCenter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    display: none !important;
    align-items: center;
    gap: 10px;
}

/* 7) 타이머 — 얇은 링, 숫자 볼드·확대 */
body .timer-circle {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: saturate(180%) blur(12px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
    width: 128px !important;
    height: 128px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
body .timer-number {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28) !important;
    font-size: 56px !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", sans-serif !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s ease, font-size 0.2s ease !important;
}

/* 8) 카드 — 부드러운 그림자 + 둥근 모서리 */
body .card,
body .meld-card,
body .hand-card {
    border-radius: 10px !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.10),
      0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
body .card:hover,
body .hand-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.10),
      0 8px 20px rgba(0, 0, 0, 0.14),
      0 14px 32px rgba(0, 0, 0, 0.12) !important;
}

/* 9) 전체 폰트 통일 */
body.game-popup-body,
body.game-popup-body .game-layout,
body.game-popup-body .game-hud,
body.game-popup-body .my-area,
body.game-popup-body button,
body.game-popup-body input,
body.game-popup-body .hud-status-text,
body.game-popup-body .timer-number,
body.game-popup-body .action-btn,
body.game-popup-body .player-badge {
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", "Apple SD Gothic Neo",
                 "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   ★ FINAL POLISH — Apple iOS 감성 마감 작업 ★
   · 카드 Deep Soft Shadow · 버튼 귀여운 볼드 · Footer 여백 대칭 · z-index 정리
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 카드 — Deep Soft Shadow 다중 레이어 · 모서리 12px 통일 */
body.game-popup-body .hand-card,
body.game-popup-body .meld-card,
body.game-popup-body .card-back {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.06),
      0 4px 12px rgba(0, 0, 0, 0.10),
      0 8px 24px rgba(0, 0, 0, 0.14),
      0 16px 40px rgba(0, 0, 0, 0.10) !important;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* 손패 카드 hover — 살짝 떠오름 + 그림자 확장 */
body.game-popup-body .hand-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.08),
      0 8px 20px rgba(0, 0, 0, 0.14),
      0 14px 36px rgba(0, 0, 0, 0.18),
      0 24px 60px rgba(0, 0, 0, 0.12) !important;
}
/* 선택된 손패 카드 — 그림자 유지 */
body.game-popup-body .hand-card.selected {
    transform: translateY(-10px) !important;
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.10),
      0 10px 24px rgba(0, 0, 0, 0.16),
      0 18px 44px rgba(0, 0, 0, 0.20) !important;
}

/* 2) 덱 뒷면 카드 — 동일 감성 (radius 12 + deep shadow) */


/* 3) 액션 버튼 — 귀여운 볼드 (카드 숫자 감성과 맞춤) */


/* 4) Footer (.my-area) 내부 여백 — Header(padding 0 20px)와 대칭 */

body.game-popup-body footer.my-area .my-info-panel {
    margin-left: 0 !important;            /* 기존 margin-left:120px 리셋 */
}
body.game-popup-body footer.my-area .my-controls {
    margin-right: 0 !important;           /* 기존 margin-right:30px 리셋 */
}

/* 5) z-index 정리 — stacking 우선순위 명확화 */

body.game-popup-body main.table-viewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1  !important;
    background: radial-gradient(
        ellipse 85% 75% at 50% 50%,
        #3A3A3C 0%,
        #2E2E30 45%,
        #1F1F21 80%,
        #151517 100%
    ) !important;
}

body.game-popup-body .thankyou-float        { z-index: 50 !important; }
body.game-popup-body .thankyou-select,
body.game-popup-body #thankyou-select-popup { z-index: 60 !important; }
body.game-popup-body .modal                 { z-index: 100 !important; }
body.game-popup-body #game-announce-overlay,
body.game-popup-body #win-announce-overlay  { z-index: 9999 !important; }
/* 상태 문구는 header 안에 있으므로 상속된 z-index 10 사용 — 단독 z-index 불필요 */
body.game-popup-body .hud-status-text {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", "Apple SD Gothic Neo",
                 "Noto Sans KR", -apple-system, system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: #1D1D1F !important;
    line-height: 1 !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 740px;
    opacity: 1;
    transition: opacity 0.22s ease;
    z-index: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ★ MODE SELECT — FORCE RESET + CENTER (강제 적용) ★
   position/left/margin-left 전부 초기화 · Flexbox 중앙 정렬 · 카드 1.5배+
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 강제 초기화 — 모든 잠재 오정렬 속성 제거 */
#lobby-mode-cta,
#lobby-mode-cta .lobby-mode-select,
#lobby-mode-cta .mode-select-cards,
#lobby-mode-cta .lobby-mode-card,
#create-room-modal .modal-content,
#create-room-modal .mode-select-group,
#create-room-modal .btn-group.mode-cards,
#create-room-modal .mode-card {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none;
}

/* 2) 모달/패널 최상위 래퍼 — 완벽 중앙 정렬 */
#lobby-mode-cta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 40px 0 !important;
    margin: 0 !important;
    text-align: center !important;
    flex-direction: column !important;
}
#create-room-modal .modal-content {
    min-width: 720px !important;
    max-width: 820px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 40px 48px !important;
    margin: 0 auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* 3) 제목 중앙 정렬 */
#lobby-mode-cta .mode-select-title,
#create-room-modal .modal-content h3,
#create-room-modal .mode-select-group > label {
    text-align: center !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* 4) 카드 컨테이너 — 중앙 정렬 + 넓은 gap */
#lobby-mode-cta .lobby-mode-select,
#lobby-mode-cta .mode-select-cards,
#create-room-modal .btn-group.mode-cards {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 48px !important;   /* 요청: 40px+ */
    flex-wrap: nowrap !important;
}
/* 로비 empty-state 의 outer 는 column */
#lobby-mode-cta .lobby-mode-select {
    flex-direction: column !important;
    gap: 40px !important;
}

/* 5) 카드 — 반응형 clamp(220, 30vw, 320) · 기기별 자동 최적화 */
#lobby-mode-cta .lobby-mode-card {
    flex: 0 0 clamp(220px, 30vw, 320px) !important;
    width: clamp(220px, 30vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    min-height: clamp(260px, 28vw, 320px) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
}
/* 카드 컨테이너 — 내용 폭만큼 (반응형 gap) */
#lobby-mode-cta .mode-select-cards {
    width: auto !important;
    max-width: 100% !important;
    gap: clamp(16px, 4vw, 44px) !important;
    flex-wrap: wrap !important;
}
#create-room-modal .mode-card {
    flex: 1 1 0 !important;
    min-width: 320px !important;        /* 모달 내 최소 320 = 이전 대비 1.8배 */
    max-width: 440px !important;
    min-height: 340px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
}

/* 6) 내부 아이콘·텍스트 비례 확대 (요청: 20%+) */
#create-room-modal .mode-card .mode-icon { font-size: 92px !important; }
#create-room-modal .mode-card .mode-title { font-size: 42px !important; }
#create-room-modal .mode-card .mode-desc  { font-size: 16px !important; }

/* ═══════════════════════════════════════════════════════════════════
   ★ ZERO-SCROLL · 모바일 가로 모드 최적화 ★
   · 네비 탭 → 햄버거 메뉴 통합
   · 긴 룰 설명 → (ⓘ) 툴팁
   · landscape · max-height 기준 컴팩트 레이아웃
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 기존 상단 네비 탭 제거 (햄버거로 통합) */
nav.lobby-tabs {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
    display: none !important;
}

/* 2) 상단 바 높이 최소화 */
body:not(.game-popup-body) .top-bar {
    min-height: 56px !important;
    padding: 8px 16px !important;
}

/* 3) 햄버거 드롭다운 내부 네비 아이템 스타일 */
.lobby-menu-dropdown .lobby-nav-item {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1D1D1F !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lobby-menu-dropdown .lobby-nav-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}
.lobby-menu-dropdown .lobby-nav-item.active {
    background: rgba(227, 0, 14, 0.08) !important;
    color: #E3000E !important;
    font-weight: 800 !important;
}
.lobby-menu-dropdown .lobby-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 6px 0;
}

/* 4) 카드 내부 긴 desc 제거 → 컴팩트 요소 */
.lobby-mode-card .lm-desc {
    font-size: clamp(12px, 1.2vw, 15px) !important;
    font-weight: 600 !important;
    color: #636366 !important;
    text-align: center !important;
    line-height: 1.6 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2px;
    display: none !important;
}

/* 5) 태그 (52장 / 54장 + 조커) — 은은한 pill · 통일 톤 */
.lobby-mode-card .lm-tag {
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
    font-size: clamp(11px, 1vw, 13px) !important;
    font-weight: 600 !important;
    color: #8E8E93;                 /* Apple system secondary gray */
    background: #F5F5F7;             /* Apple system light gray */
    border-radius: 980px;
    padding: 4px 12px;
    margin-top: 6px;
    letter-spacing: -0.01em;
}
/* ★ 모드별 태그 — 색상 제거, 모두 통일된 중성 회색 */
.lobby-mode-card.lobby-mode-monster .lm-tag,
.lobby-mode-card.lobby-mode-joker .lm-tag {
    color: #8E8E93;
    background: #F5F5F7;
}

/* 6) 정보 아이콘 (ⓘ) — 우측 상단, hover 시 title 속성 브라우저 툴팁 표시 */
.lobby-mode-card .lm-info {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.25);
    line-height: 1;
    transition: color 0.15s ease;
    pointer-events: none;   /* title 툴팁은 버튼 전체에서 동작 */
}
.lobby-mode-card:hover .lm-info { color: rgba(0, 0, 0, 0.5); }

/* 7) LANDSCAPE + max-height ≤ 600px — 제로 스크롤 강제 */
@media (orientation: landscape) and (max-height: 600px) {
    /* 상단 바 초소형 */
    body:not(.game-popup-body) .top-bar {
        min-height: 44px !important;
        padding: 4px 12px !important;
    }
    /* .section 자체 내부 여백 축소 */
    #rooms-section.section {
        padding: 12px 16px !important;
        margin: 0 8px 8px !important;
    }
    .section-header { margin-bottom: 8px !important; }
    .section-header h3 { font-size: 15px !important; }

    /* 게임 모드 선택 — 타이틀-카드 간격 축소, 카드 세로 높이 제한 */
    #lobby-mode-cta {
        padding: 8px 16px !important;
    }
    .lobby-mode-select {
        gap: 10px !important;
        padding: 8px 0 !important;
    }
    .mode-select-title {
        font-size: 15px !important;
        margin: 0 !important;
    }
    .mode-select-cards {
        gap: 14px !important;
        flex-wrap: nowrap !important;
    }
    .lobby-mode-card {
        /* ★ 화면 세로 높이 초과 금지 — max-height 로 강제 */
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 140px) !important;
        padding: 14px 12px !important;
        gap: 6px !important;
        border-radius: 14px !important;
        flex: 0 0 clamp(140px, 26vw, 220px) !important;
        width: clamp(140px, 26vw, 220px) !important;
    }
    .lobby-mode-card .lm-icon {
        font-size: clamp(28px, 5vh, 44px) !important;
    }
    .lobby-mode-card .lm-title {
        font-size: clamp(16px, 3vh, 22px) !important;
        margin-top: 2px !important;
    }
    .lobby-mode-card .lm-tag {
        font-size: 10px !important;
        padding: 2px 8px !important;
        margin-top: 2px !important;
    }
    .lobby-mode-card .lm-info {
        top: 6px; right: 8px; font-size: 12px;
    }
}

/* 8) 세로 모드지만 높이가 낮은 경우 (max-height ≤ 500px) — desc 무조건 숨김 + 컴팩트 */
@media (max-height: 500px) {
    .lobby-mode-card .lm-desc { display: none !important; }
    .section-header { margin-bottom: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ★ STAKE PAGE — 화면 전환형 판돈 선택 (Next Page) ★
   · 가로 모드 우선 · 제로 스크롤 · Apple-style
   ═══════════════════════════════════════════════════════════════════ */

#room-list.stake-screen { padding: 0 !important; }

.stake-page {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 2vw, 28px) !important;
    padding: clamp(16px, 2vw, 32px) clamp(16px, 3vw, 48px) !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    animation: stakePageIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes stakePageIn {
    0%   { opacity: 0; transform: translateX(12px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Header: 뒤로 가기 + 모드명 */
.stake-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
}
.stake-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 980px !important;
    padding: 8px 16px !important;
    color: #1D1D1F !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.stake-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.stake-back-btn:active { transform: scale(0.96); }
.stake-back-btn .sbb-arrow { font-size: 18px; line-height: 1; }
.stake-back-btn .sbb-label { font-size: 14px; }

.stake-page-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    font-family: "M PLUS Rounded 1c", "SF Pro Rounded", system-ui, sans-serif !important;
    font-size: clamp(18px, 2.2vw, 26px) !important;
    font-weight: 900 !important;
    color: #1D1D1F !important;
    letter-spacing: -0.02em;
}
.stake-page-title .spt-emoji { font-size: 1.2em; }
.stake-page-spacer { flex: 0 0 80px; }   /* 좌측 back 버튼 폭 보정 — 타이틀 시각 중앙 */

/* 판돈 선택 섹션 */
.stake-subtitle {
    font-size: clamp(12px, 1.2vw, 14px) !important;
    color: #636366 !important;
    text-align: center !important;
    margin: 0 0 6px !important;
    font-weight: 500;
}
.stake-row {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(12px, 2vw, 24px) !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* 판돈 버튼 카드 — 순백 + 테두리 제거 + 단일 확산 그림자 */
.stake-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: clamp(14px, 2vw, 22px) clamp(10px, 1.5vw, 16px) !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: clamp(20px, 1.6vw, 22px) !important;
    color: #1D1D1F !important;
    cursor: pointer;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
    transition: transform 0.15s ease, box-shadow 0.22s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
}
.stake-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}
.stake-btn:active { transform: scale(0.98); }
.stake-btn .stake-medal {
    font-size: clamp(28px, 3.6vh, 42px) !important;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
.stake-btn .stake-label {
    font-size: clamp(16px, 1.8vw, 20px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    margin-top: 4px;
}
.stake-btn .stake-amount {
    font-size: clamp(13px, 1.3vw, 15px) !important;
    font-weight: 700 !important;
    color: #1D1D1F;
    margin-top: 2px;
}
.stake-btn .stake-min {
    /* ★ 보조 설명 — 작고 연한 회색 */
    font-size: clamp(10px, 1vw, 12px) !important;
    color: #A0A0A5;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.stake-btn .stake-online {
    font-size: clamp(11px, 1.1vw, 13px) !important;
    font-weight: 700 !important;
    margin-top: 4px;
}

/* ★ 판돈별 accent — 테두리 제거, 라벨/온라인 텍스트에만 파스텔 포인트 */
.stake-btn.stake-bronze .stake-label,
.stake-btn.stake-bronze .stake-online { color: #B37A3E !important; }

.stake-btn.stake-silver .stake-label,
.stake-btn.stake-silver .stake-online { color: #6E6E73 !important; }

.stake-btn.stake-gold .stake-label,
.stake-btn.stake-gold .stake-online { color: #A68A2F !important; }

/* 매칭 대기 */
.matching-screen {
    text-align: center;
    padding: clamp(24px, 4vw, 44px) 0 !important;
    background: #FAFAFC !important;
    border-radius: 22px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
.matching-screen h4 {
    color: #1D1D1F !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
}
.matching-screen p { color: #636366 !important; margin: 0 0 4px !important; font-size: 13px; }
.matching-screen .matching-spinner {
    width: 44px; height: 44px; border: 4px solid rgba(0,0,0,0.08);
    border-top-color: #E3000E; border-radius: 50%;
    margin: 0 auto 14px; animation: spin 1s linear infinite;
}
.stake-cancel-btn {
    margin-top: 14px; background: #E3000E; color: #fff; border: none;
    border-radius: 980px; padding: 10px 24px; cursor: pointer;
    font-size: 13px; font-weight: 700;
}

/* Footer: 비공개 방 — 카드와 동일한 스타일 · 크기만 작게 */
.stake-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: clamp(10px, 1.5vw, 18px) !important;
    margin-top: auto !important;
    padding-top: clamp(8px, 1vw, 14px) !important;
    /* ★ 선 제거 — 면과 공간으로만 구분 */
    border-top: none !important;
}
.stake-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    /* ★ 카드와 동일한 순백 배경 + 테두리 제거 + 부드러운 그림자 */
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 980px !important;
    color: #1D1D1F !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}
.stake-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
}
.stake-icon-btn:active { transform: scale(0.96); }
.stake-icon-btn .sib-icon { font-size: 16px; }

/* ★ LANDSCAPE — 제로 스크롤 강제 · 화면 세로 높이에 완전 fit */
@media (orientation: landscape) and (max-height: 600px) {
    .stake-page {
        gap: 10px !important;
        padding: 10px 16px !important;
    }
    .stake-page-header { gap: 8px !important; }
    .stake-back-btn { padding: 4px 10px !important; font-size: 12px !important; }
    .stake-back-btn .sbb-arrow { font-size: 14px; }
    .stake-back-btn .sbb-label { font-size: 12px !important; }
    .stake-page-title { font-size: 16px !important; }
    .stake-page-spacer { display: none; }

    .stake-subtitle { font-size: 11px !important; margin: 0 !important; }
    .stake-row { gap: 10px !important; }

    .stake-btn {
        padding: 8px 6px !important;
        max-height: calc(100vh - 160px) !important;
        border-radius: 12px !important;
        gap: 2px !important;
    }
    .stake-btn .stake-medal { font-size: clamp(22px, 4.5vh, 32px) !important; }
    .stake-btn .stake-label { font-size: 14px !important; margin-top: 1px; }
    .stake-btn .stake-amount { font-size: 12px !important; }
    .stake-btn .stake-min { font-size: 10px !important; }
    .stake-btn .stake-online { font-size: 11px !important; }

    .stake-footer {
        padding-top: 6px !important;
        border-top: none !important;
    }
    .stake-icon-btn { padding: 4px 12px !important; font-size: 11px !important; }
    .stake-icon-btn .sib-icon { font-size: 13px; }
}

/* 극협소 (max-width 480) — 판돈 버튼 세로 스택 */
@media (max-width: 480px) and (orientation: portrait) {
    .stake-row { flex-direction: column !important; }
    .stake-btn { max-width: 100% !important; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║          FINAL ZERO-SCROLL REWRITE (definitive · authoritative)     ║
   ║  · 100dvh (dynamic viewport) — 모바일 URL 바 보정                    ║
   ║  · CSS Grid 로 명시적 row 배분                                      ║
   ║  · overscroll-behavior: none — 바운스 차단                          ║
   ║  · 레거시 .screen/.auth/.section 오버라이드                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── 0. 글로벌: 스크롤 완전 차단 + dvh 정확도 ── */
html {
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}
body {
    background: radial-gradient(ellipse 80% 60% at 20% 10%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.0) 55%),
      linear-gradient(135deg,
        #F8F8FB 0%,
        #F2F2F5 35%,
        #EAEAEE 70%,
        #E2E2E6 100%) !important;
    color: var(--text) !important;
    background-attachment: fixed !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: manipulation;
}
@supports not (height: 100dvh) {
    body { height: 100vh !important; max-height: 100vh !important; }
}

/* ★ CRITICAL: .active 클래스 없는 screen 은 절대 표시 X — 화면 전환 동작 보장 */
#auth-screen.screen:not(.active),
#lobby-screen.screen:not(.active),
#game-screen.screen:not(.active) {
    display: none !important;
}

/* ★★★ 모바일 세로 — 회전 안내만 노출, 다른 모든 UI 강제 숨김 ★★★
   (specificity 1,3,0 으로 .active 룰 1,2,0 보다 우선 — 어떤 화면이든 portrait 시 가려짐) */
@media (orientation: portrait) and (max-width: 932px) {
    html body #rotate-overlay {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        background: #0d1117 !important;
        z-index: 99999 !important;
        justify-content: center !important;
        align-items: center !important;
    }
    html body #auth-screen.screen,
    html body #auth-screen.screen.active,
    html body #lobby-screen.screen,
    html body #lobby-screen.screen.active,
    html body #game-screen.screen,
    html body #game-screen.screen.active,
    html body .screen,
    html body .modal,
    html body .lobby-menu-dropdown {
        display: none !important;
    }
}

/* ── 1. 로그인 화면 (active 일 때만 flex) ── */
#auth-screen.screen.active {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2vh 2vw !important;
    box-sizing: border-box !important;
}
#auth-screen .auth-container {
    max-height: 96dvh !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
}

/* ── 2. 로비 화면 (active 일 때만 grid) ── */
#lobby-screen.screen.active {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: auto !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;    /* header / section */
    grid-template-columns: 100% !important;
}
#lobby-screen > .top-bar {
    grid-row: 1;
    flex-shrink: 0 !important;
}
#lobby-screen > nav.lobby-tabs { display: none !important; }  /* 햄버거로 통합 */
#lobby-screen > #lobby-menu-dropdown {
    position: fixed !important;                /* 드롭다운은 overlay — 레이아웃 영향 X */
    top: 60px !important; right: 12px !important;
    z-index: 1000 !important;
}
#lobby-screen > .section {
    grid-row: 2;
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
#lobby-screen > .section .section-header { flex-shrink: 0 !important; }
#lobby-screen > .section > #room-list,
#lobby-screen > .section > #lobby-mode-cta {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ── 3. 자동 축소 (shrink) ── */
.auth-container, .section, .lobby-mode-select, .mode-select-cards,
.stake-page, .stake-row, .lobby-mode-card, .stake-btn {
    flex-shrink: 1 !important;
    min-height: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE · 100dvh 에 모든 것 fit — 스크롤 수학적 금지
   ═════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
    /* 헤더 초소형 — 36px */
    body:not(.game-popup-body) .top-bar {
        min-height: 36px !important;
        height: 36px !important;
        padding: 2px 10px !important;
    }
    .top-bar .btn-sm {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        padding: 2px 6px !important;
    }
    .balance-badge { font-size: 10px !important; padding: 2px 6px !important; }

    /* .section — margin 최소, padding 4px */
    #lobby-screen > .section {
        padding: 4px 8px !important;
        margin: 0 4px 4px !important;
        border-radius: 10px !important;
    }
    .section-header {
        margin-bottom: 2px !important;
        padding: 2px 0 !important;
    }
    .section-header h3 { font-size: 12px !important; }
    .section-header .btn-primary {
        padding: 3px 10px !important;
        font-size: 10px !important;
        min-height: 22px !important;
    }

    /* 로그인 화면 —  20% 추가 축소 */
    .auth-container {
        padding: 12px 18px !important;
        max-width: 320px !important;
        width: 86vw !important;
        max-height: 92dvh !important;
    }
    .auth-container .logo { margin-bottom: 8px !important; }
    .auth-container .logo h1 { font-size: 16px !important; gap: 4px !important; }
    .auth-container .logo h1::before { width: 32px !important; height: 32px !important; }
    .auth-container .logo p { font-size: 9px !important; }
    .auth-container .tab-buttons { margin-bottom: 8px !important; }
    .auth-container .tab-btn { padding: 5px 8px !important; font-size: 11px !important; }
    .auth-form { gap: 5px !important; }
    .auth-form input { padding: 7px 10px !important; font-size: 12px !important; }
    .auth-form .btn-primary,
    .auth-form button[type="submit"] {
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin-top: 3px !important;
    }

    /* 모드 선택 — 100% 가용 높이 사용 */
    #lobby-mode-cta {
        padding: 2px 6px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .lobby-mode-select {
        gap: 4px !important;
        padding: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    .mode-select-title { font-size: 11px !important; margin: 0 !important; }
    .mode-select-cards {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        flex: 1 1 auto !important;
        max-height: calc(100% - 20px) !important;
    }
    .lobby-mode-card {
        max-height: 100% !important;
        padding: 6px 8px !important;
        gap: 2px !important;
        border-radius: 10px !important;
        flex: 0 0 clamp(110px, 22vw, 170px) !important;
        width: clamp(110px, 22vw, 170px) !important;
    }
    .lobby-mode-card .lm-icon { font-size: clamp(20px, 6vh, 32px) !important; }
    .lobby-mode-card .lm-title { font-size: 13px !important; margin-top: 1px !important; }
    .lobby-mode-card .lm-tag { font-size: 8px !important; padding: 1px 5px !important; margin-top: 0 !important; }
    .lobby-mode-card .lm-info { top: 3px; right: 5px; font-size: 9px; }
    .lobby-mode-card .lm-desc { display: none !important; }

    /* 스테이크 페이지 — 100% 사용 */
    #room-list.stake-screen {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .stake-page {
        height: 100% !important;
        max-height: 100% !important;
        gap: 4px !important;
        padding: 2px 6px !important;
    }
    .stake-page-header { gap: 4px !important; padding: 0 !important; }
    .stake-back-btn { padding: 2px 7px !important; font-size: 10px !important; box-shadow: none !important; }
    .stake-back-btn .sbb-arrow { font-size: 11px; }
    .stake-back-btn .sbb-label { font-size: 10px !important; }
    .stake-page-title { font-size: 12px !important; gap: 4px !important; }
    .stake-page-spacer { display: none !important; }

    .stake-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .stake-subtitle { font-size: 9px !important; margin: 0 !important; }
    .stake-row {
        gap: 6px !important;
        flex-direction: row !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .stake-btn {
        padding: 4px 3px !important;
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 8px !important;
        gap: 0 !important;
    }
    .stake-btn .stake-medal { font-size: clamp(16px, 5vh, 24px) !important; }
    .stake-btn .stake-label { font-size: 11px !important; margin-top: 1px !important; }
    .stake-btn .stake-amount { font-size: 10px !important; }
    .stake-btn .stake-min { font-size: 8px !important; }
    .stake-btn .stake-online { font-size: 9px !important; }

    .stake-footer { padding-top: 2px !important; gap: 6px !important; flex-shrink: 0 !important; }
    .stake-icon-btn { padding: 3px 8px !important; font-size: 9px !important; box-shadow: none !important; }
    .stake-icon-btn .sib-icon { font-size: 10px; }
}

/* 극한 가로 (max-height ≤ 380px) */
@media (orientation: landscape) and (max-height: 380px) {
    body:not(.game-popup-body) .top-bar {
        min-height: 30px !important; height: 30px !important; padding: 1px 8px !important;
    }
    #lobby-screen > .section { padding: 2px 6px !important; margin: 0 3px 2px !important; }
    .section-header h3 { font-size: 11px !important; }
    .lobby-mode-card .lm-tag { display: none !important; }
    .lobby-mode-card .lm-icon { font-size: 18px !important; }
    .lobby-mode-card .lm-title { font-size: 11px !important; }
    .stake-btn .stake-min, .stake-btn .stake-online { display: none !important; }
    .stake-btn .stake-medal { font-size: 16px !important; }
    .stake-btn .stake-label { font-size: 10px !important; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║       GAME MINIMAL POLISH — Apple Premium UI (definitive)            ║
   ║  · 단일 톤 배경 / 슬림 프로필 / 매트 카드 / 글래스 버튼 / 통합 메뉴   ║
   ║  · 화려함 X · 깔끔함 O — 여백+폰트로만 프리미엄 분위기                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── 1. 배경 — 단일 연회색 통일 (바둑판 / 강한 대비 제거) ── */
body.game-popup-body {
    background: #F5F5F7 !important;
}
body.game-popup-body .table-viewport {
    /* radial gradient → 단일 오프화이트로 변경 */
    background: #FAFAFA !important;
}
body.game-popup-body .oval-table::before,
body.game-popup-body .oval-table::after {
    /* 강한 그림자/원색 그라데이션 제거 — 평탄한 면 */
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04) !important;
    border: none !important;
    filter: none !important;
}

/* ── 2. 플레이어 프로필 — 30% 슬림 + 흰 배경 + 미니멀 ── */
body.game-popup-body .player-badge {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 6px 8px !important;        /* 이전 대비 ~30% 감소 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.game-popup-body .pb-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    background: #F5F5F7 !important;
    border: none !important;
    box-shadow: none !important;
}
body.game-popup-body .pb-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1D1D1F !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}
/* 금액: 골드 박스 → 흰 배경 + 진한 텍스트만 */
body.game-popup-body .pb-balance,
body.game-popup-body .pb-gold,
body.game-popup-body .pb-gold-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #1D1D1F !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
}
body.game-popup-body .pb-status,
body.game-popup-body .pb-status-wrap {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #8E8E93 !important;
    text-shadow: none !important;
}

/* ── 3. 카드 뒷면 — 강한 빨간 격자 → 매트 딥레드 ── */
body.game-popup-body .card-back {
    border-radius: 10px !important;
    background: #8B1A1F !important;
    background-image: none !important;
    border: none !important;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08),
      0 2px 6px rgba(0,0,0,0.10),
      0 8px 20px rgba(0,0,0,0.08) !important;
}
body.game-popup-body .card-back::before,
body.game-popup-body .card-back::after {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body.game-popup-body .card-back #deck-count {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── 3-2. 테이블 ↔ 손패 여백 충분히 — 답답함 해소 ── */
body.game-popup-body footer.my-area {
    flex: 0 0 var(--hud-footer-h) !important;
    height: var(--hud-footer-h) !important;
    min-height: var(--hud-footer-h) !important;
    max-height: var(--hud-footer-h) !important;
    width: 100% !important;
    background: rgb(245, 245, 247) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-top: 1px solid var(--hud-border) !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    gap: 18px !important;
    padding-top: 18px !important;
}
body.game-popup-body .my-hand {
    margin-top: 4px !important;
}

/* ── 4. 하단 액션 버튼 — Glassmorphism (Zero-Glow) ── */
body.game-popup-body .action-btn {
    font-family: "SF Pro Rounded", "M PLUS Rounded 1c", -apple-system, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    min-height: 52px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(180%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1D1D1F !important;
    text-shadow: none !important;
}
body.game-popup-body .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}
body.game-popup-body .action-btn:active {
    transform: scale(0.97);
}
body.game-popup-body .action-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed;
}
/* 핵심 액션만 빨간색 — 스톱(즉시 종결) */
body.game-popup-body .action-btn.btn-stop-action,
body.game-popup-body .action-btn#btn-stop {
    background: rgba(227, 0, 14, 0.92) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}
body.game-popup-body .action-btn.btn-stop-action:hover {
    background: #CC000C !important;
}
/* 받기 / 등록 — 부드러운 흰 글래스 (과한 강조 제거) */

/* ── 5. 상단 HUD 아이콘 — 더 작고 정교하게 ── */
body.game-popup-body header.game-hud {
    flex: 0 0 var(--hud-header-h) !important;
    height: var(--hud-header-h) !important;
    min-height: var(--hud-header-h) !important;
    max-height: var(--hud-header-h) !important;
    width: 100% !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: #F5F5F7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: 1px solid #E5E5EA !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}
body.game-popup-body .hud-right .hud-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: rgba(0,0,0,0.04) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
}
body.game-popup-body .hud-right .hud-icon-btn:hover {
    background: rgba(0,0,0,0.08) !important;
}
body.game-popup-body .hud-right .hud-icon-btn::before {
    width: 18px !important;
    height: 18px !important;
    background: #1D1D1F !important;
}
body.game-popup-body .hud-right .hud-action-next,
body.game-popup-body .hud-right .hud-action-leave {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}

/* 강조 색상 절제 — 알림류만 빨강 유지, 나머지 중립 */
body.game-popup-body .balance-badge {
    background: transparent !important;
    border: none !important;
    color: #1D1D1F !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 그림자 / 테두리 정리 — 불필요한 노이즈 제거 */
body.game-popup-body .seat-slot {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 방만들기 모달 2단 래퍼 — 기본은 display:contents 라 세로/PC 레이아웃 무영향.
   가로모드 미디어쿼리에서만 flex 2단으로 전환됨. */
#create-room-modal .cr-body,
#create-room-modal .cr-col-modes,
#create-room-modal .cr-col-fields {
    display: contents;
}

/* 방만들기 모달은 PWA 배너(z-index:99999)보다 위에 — 배너가 모달/버튼 가리지 않게.
   apple-layout 의 html body #create-room-modal:not(.hidden){z-index:9999} 보다 높은 특정성. */
html body #create-room-modal.modal,
html body #create-room-modal.modal:not(.hidden),
html body #create-room-modal:not(.hidden) {
    z-index: 100001 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ★ 모바일 가로모드 로비 — 모드선택 "한 화면 fit + 큼직한 탭 타겟" (AUTHORITATIVE)
   2026-06-17: 기존 가로 규칙이 #lobby-mode-cta(ID) 크기 규칙(min-height 260px,
   width clamp(220,30vw,320))에 특정성으로 져서 미적용이었음 → 가로모드 폰은 폭이
   넓고(800~900) 높이만 낮아(360~430) max-width 쿼리도 안 걸렸음. 여기서 ID 특정성 +
   max-height(높이 기준) + 파일 끝 배치로 확실히 이기게 재정의. 카드를 가용 높이에 꽉
   채워 "큼직큼직"(요청), 잘림/스크롤 없음. landscape & 낮은 높이에서만 동작(세로/데스크톱 무영향).
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 600px) {
    /* 컨테이너 — 가용 높이 전부 사용 */
    #lobby-mode-cta {
        padding: 6px 14px !important;
        height: 100% !important;
        justify-content: center !important;
    }
    #lobby-mode-cta .lobby-mode-select {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        gap: clamp(6px, 1.6vh, 14px) !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }
    #lobby-mode-cta .mode-select-title {
        font-size: clamp(15px, 4vh, 22px) !important;
        margin: 0 0 2px !important;
        flex: 0 0 auto !important;
    }
    /* 카드 행 — 남은 높이 전부 차지 */
    #lobby-mode-cta .mode-select-cards {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 920px !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(12px, 3vw, 28px) !important;
        min-height: 0 !important;
    }
    /* 카드 — 가로 절반씩 + 세로 꽉 채움 = 큼직한 탭 타겟 */
    #lobby-mode-cta .lobby-mode-card {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 460px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: clamp(10px, 2.4vh, 24px) clamp(12px, 2vw, 28px) !important;
        gap: clamp(6px, 1.6vh, 14px) !important;
        border-radius: clamp(16px, 2vh, 24px) !important;
        justify-content: center !important;
        align-items: center !important;
    }
    /* 내용 — 가용 높이 비례로 크게 */
    #lobby-mode-cta .lobby-mode-card .lm-icon {
        font-size: clamp(40px, 13vh, 80px) !important;
    }
    #lobby-mode-cta .lobby-mode-card .lm-title {
        font-size: clamp(22px, 6.5vh, 36px) !important;
        margin-top: 0 !important;
    }
    #lobby-mode-cta .lobby-mode-card .lm-tag {
        display: inline-block !important;
        font-size: clamp(11px, 3vh, 16px) !important;
        padding: clamp(2px, 0.6vh, 5px) clamp(8px, 1.4vw, 14px) !important;
        margin-top: clamp(2px, 0.8vh, 6px) !important;
    }
    #lobby-mode-cta .lobby-mode-card .lm-desc { display: none !important; }
    /* ⓘ 정보 배지 — 탭하기 쉽게 */
    #lobby-mode-cta .lobby-mode-card .lm-info {
        top: clamp(6px, 1.4vh, 12px) !important;
        right: clamp(8px, 1.4vw, 14px) !important;
        font-size: clamp(14px, 3.2vh, 20px) !important;
    }

    /* ── 헤더 모서리 버튼 — 큼직하게(탭 쉬움) + 상단 잘림 방지 ── */
    body:not(.game-popup-body) .top-bar {
        min-height: 46px !important;
        height: 46px !important;
        padding: 4px 12px !important;
        align-items: center !important;
    }
    body:not(.game-popup-body) .top-bar .top-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    body:not(.game-popup-body) .top-bar .btn-sm {
        min-width: 42px !important;
        width: 42px !important;
        height: 38px !important;
        font-size: 20px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    /* ★ 햄버거 토글 — 텍스트 ☰ 숨김(::before 아이콘만), "두 개로 보임" 회귀 방지.
       (위 .btn-sm font-size:20px 가 font-size:0 을 덮어 텍스트가 부활했던 버그) */
    body:not(.game-popup-body) .top-bar .lobby-menu-toggle {
        font-size: 0 !important;
        color: transparent !important;
        width: 46px !important;
        height: 42px !important;
        position: relative !important;
        overflow: visible !important;
    }
    body:not(.game-popup-body) .top-bar .lobby-menu-toggle::before {
        width: 24px !important;
        height: 24px !important;
    }
    /* ★ smart 확장 탭 영역 — 보이는 것보다 넓게(모서리에서도 잘 눌림). 클릭은 버튼으로 전달됨 */
    body:not(.game-popup-body) .top-bar .lobby-menu-toggle::after {
        content: '' !important;
        position: absolute !important;
        top: -12px !important; bottom: -12px !important;
        left: -14px !important; right: -10px !important;
    }
    /* "방 만들기" 버튼도 탭 쉽게 */
    #lobby-screen > .section .section-header .btn-primary {
        padding: 8px 16px !important;
        font-size: 13px !important;
        min-height: 38px !important;
    }
    /* 로비 섹션헤더 컴팩트 — 모드선택 카드 하단 여유 확보(잘림 방지) */
    #lobby-screen > .section .section-header {
        margin-bottom: 2px !important;
        padding: 2px 0 !important;
    }
    #lobby-screen > .section .section-header h3 {
        font-size: clamp(13px, 3.4vh, 18px) !important;
        margin: 0 !important;
    }
    /* PWA 배너 떠 있을 때: grid 컨테이너(#lobby-screen)에 하단 padding → 헤더/섹션 전체가
       배너 위 영역으로 압축돼 모드 카드가 배너에 안 가림. (#lobby-mode-cta 는 showModeSelect 가
       인라인 !important 를 박아 CSS 로 못 이기므로, 인라인 없는 grid 컨테이너에서 처리.)
       배너 실제 높이는 JS가 --pwa-banner-h 로 노출(가변), 없으면 64px 폴백. */
    body.has-pwa-banner #lobby-screen.screen.active {
        padding-bottom: calc(var(--pwa-banner-h, 64px) + 6px) !important;
        box-sizing: border-box !important;
    }

    /* ═══ 방 만들기 모달 — 가로모드 2단(모드/필드) 레이아웃, 세로 스크롤 없이 한 화면 ═══ */
    #create-room-modal .modal-content {
        min-width: 0 !important;
        width: min(94vw, 840px) !important;
        max-width: 94vw !important;
        max-height: 94dvh !important;
        padding: 10px 18px !important;
        gap: 6px !important;
        /* 넘치면 모달 내부에서만 스크롤(페이지 스크롤/겹침 방지). 보통 높이에선 스크롤 안 생김 */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    #create-room-modal .modal-content > h3 {
        font-size: 18px !important;
        margin: 0 0 2px !important;
        flex: 0 0 auto !important;
    }
    /* 2단 본문 */
    #create-room-modal .cr-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    #create-room-modal .cr-col-modes {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    /* 오른쪽 필드 — 세로 1단 컴팩트 스택(방이름/인원/판돈/안내), 상단 정렬(제목 아래로) */
    #create-room-modal .cr-col-fields {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    /* 왼쪽: 모드선택이 좌측 컬럼 높이 채움 */
    /* 왼쪽 모드 — 자연 높이(스트레치 안 함)로 cr-body 를 안 늘림 */
    #create-room-modal .mode-select-group {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #create-room-modal .mode-select-group > label {
        font-size: 11px !important;
        margin: 0 0 3px !important;
    }
    #create-room-modal .btn-group.mode-cards {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    #create-room-modal .mode-card {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 130px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 8px 6px !important;
        gap: 2px !important;
        border-radius: 12px !important;
    }
    #create-room-modal .mode-card .mode-icon { font-size: 30px !important; }
    #create-room-modal .mode-card .mode-title { font-size: 15px !important; }
    /* 모드 설명 숨김 (아이콘+이름으로 충분) — apple-layout 보다 높은 특정성 */
    html body:not(.game-popup-body) #create-room-modal .mode-card .mode-desc { display: none !important; }

    /* 오른쪽 필드 컴팩트 — apple-layout(0,1,4,2) 보다 높은 특정성으로 버튼/입력/여백 강제 축소 */
    html body:not(.game-popup-body) #create-room-modal .cr-col-fields .form-group {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 라벨 숨김 — 컨트롤이 자명(자동생성 placeholder / "5인" / "400원") → 세로 높이 절약 */
    html body #create-room-modal .cr-col-fields label { display: none !important; }
    html body:not(.game-popup-body) #create-room-modal .cr-col-fields input,
    html body:not(.game-popup-body) #create-room-modal .cr-col-fields .form-group input {
        padding: 6px 10px !important;
        font-size: 13px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    html body:not(.game-popup-body) #create-room-modal .cr-col-fields .btn-group:not(.mode-cards) {
        gap: 6px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    html body:not(.game-popup-body) #create-room-modal .cr-col-fields .btn-group:not(.mode-cards) .btn-option {
        padding: 6px 4px !important;
        font-size: 13px !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.15 !important;
        flex: 1 1 0 !important;
    }
    html body #create-room-modal .info-text { font-size: 10px !important; margin: 0 !important; }

    /* 제목/액션 컴팩트 → cr-body 세로 여유 확보 */
    #create-room-modal .modal-content > h3 {
        font-size: 17px !important;
        margin: 0 0 2px !important;
    }
    #create-room-modal .modal-actions {
        flex: 0 0 auto !important;
        gap: 12px !important;
        margin-top: 2px !important;
        display: flex !important;
        justify-content: center !important;
    }
    #create-room-modal .modal-actions button {
        padding: 7px 20px !important;
        font-size: 14px !important;
        min-height: 36px !important;
    }

    /* === 땡큐 모달(괴물 순차, #thankyou-modal) 가로모드 컴팩트 ===
       apple-layout 의 generic `#thankyou-modal:not(.hidden) > .modal-content{max-height:min(90vh,90dvh)}`
       가 이겨서 가로모드에서 거의 풀스크린(600×351)이 됨. 더 높은 특정성(html body.game-popup-body)+
       max-height(높이기준)으로 상단 고정 + 내용 높이 + 옵션 가로배치로 작게. */
    html body.game-popup-body #thankyou-modal { align-items: flex-start !important; }
    html body.game-popup-body #thankyou-modal:not(.hidden) > .modal-content {
        min-width: 0 !important;
        width: auto !important;
        max-width: 92vw !important;
        height: auto !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 8px auto 0 !important;
        padding: 8px 18px 10px !important;
        overflow-y: auto !important;
    }
    html body.game-popup-body #thankyou-modal .modal-content > h3 { font-size: 16px !important; margin: 0 0 2px !important; }
    html body.game-popup-body #thankyou-modal #thankyou-info { font-size: 12px !important; margin: 0 0 4px !important; }
    /* 버린 카드 — 넓은 흰 막대로 늘어나지 않게 카드 모양(고정 크기)으로 제약 */
    html body.game-popup-body #thankyou-modal .thankyou-card {
        width: 60px !important;
        height: 84px !important;
        min-width: 0 !important;
        margin: 2px auto 6px !important;
        flex: 0 0 auto !important;
    }
    html body.game-popup-body #thankyou-modal .thankyou-card .discard-card-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* 옵션 버튼: 세로 전체폭 → 가로 배치(넘치면 좌우/줄바꿈) */
    html body.game-popup-body #thankyou-modal #thankyou-options {
        margin: 4px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        max-height: 30dvh !important;
        overflow-y: auto !important;
    }
    html body.game-popup-body #thankyou-modal #thankyou-options button {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        text-align: center !important;
    }
    html body.game-popup-body #thankyou-modal .modal-actions { margin: 4px 0 0 !important; }
    html body.game-popup-body #thankyou-modal .modal-actions .btn-secondary {
        min-width: 0 !important;
        padding: 7px 22px !important;
        font-size: 13px !important;
    }
    html body.game-popup-body #thankyou-modal .thankyou-timer-bar { margin: 4px 0 0 !important; }
    html body.game-popup-body #thankyou-modal .thankyou-timer-text { font-size: 11px !important; margin: 2px 0 0 !important; }
}