/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   APPLE LAYOUT — 레이아웃 전용 (px 0, % / 변수만, 2026-04-27)            ║
   ║   · 최종 로드 → cascade 항상 승리                                        ║
   ║   · 레이아웃 / 위치 / 크기 — 비율 기반 (clamp + var)                     ║
   ║   · 색상 / 폰트 / 그림자는 apple-system.css 가 관할                       ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   1. LAYOUT TOKENS (변수 시스템)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* 화면 비율 기반 사이즈 */
    --layout-vh:           100dvh;
    --layout-vw:           100vw;

    /* 헤더 / 푸터 — 화면 비율 기반 */
    --header-h:            clamp(2.5rem, 7vh, 3.75rem);     /* 40 ~ 60px */
    --footer-h:            clamp(8rem, 22vh, 14rem);         /* 128 ~ 224px */

    /* 모달 */
    --modal-w:             min(90vw, 25rem);                 /* 90% / 400px */
    --modal-w-lg:          min(90vw, 35rem);                 /* PC 560px */
    --modal-h-max:         min(80vh, 80dvh);
    --modal-pad:           clamp(1rem, 3vw, 1.5rem);

    /* 드롭다운 */
    --dropdown-w:          min(90vw, 17.5rem);               /* 280px */
    --dropdown-h-max:      calc(var(--layout-vh) - 5rem);

    /* 게임 캔버스 base */
    --canvas-w:            100rem;                            /* 1600px = 100rem (16px 기준) */
    --canvas-h:            56.25rem;                          /* 900px */

    /* 간격 — vw 기반 fluid */
    --pad-page:            clamp(0.5rem, 2vw, 1.5rem);
    --pad-component:       clamp(0.5rem, 1.5vw, 1rem);
    --gap-component:       clamp(0.25rem, 1vw, 0.75rem);

    /* 터치 표준 (iOS HIG 44pt) */
    --touch-min:           2.75rem;                           /* 44px */
}

/* ═══════════════════════════════════════════════════════════════════
   2. ROOT RESET — 100dvh + 스크롤 정책
   ═══════════════════════════════════════════════════════════════════ */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
}
body {
    height: var(--layout-vh);
    max-height: var(--layout-vh);
}
@supports not (height: 100dvh) {
    body { height: 100vh; max-height: 100vh; }
}

/* ═══════════════════════════════════════════════════════════════════
   3. SCREEN STATE — 한 번에 하나만 visible
   ═══════════════════════════════════════════════════════════════════ */
#auth-screen.screen:not(.active),
#lobby-screen.screen:not(.active),
#game-screen.screen:not(.active) {
    display: none;
}
#auth-screen.screen.active,
#lobby-screen.screen.active,
#game-screen.screen.active {
    width: 100%;
    height: var(--layout-vh);
    max-height: var(--layout-vh);
    overflow: hidden;
    box-sizing: border-box;
}

/* 인증 — flex center */
#auth-screen.screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--pad-page);
}
#auth-screen .auth-container {
    width: 90%;
    max-width: var(--modal-w);
    max-height: 90%;
    overflow: hidden;
}

/* 로비 — grid: header / section */
#lobby-screen.screen.active {
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-columns: 100%;
}
#lobby-screen.screen.active > .top-bar,
#lobby-screen.screen.active > header {
    grid-row: 1;
    width: 100%;
    height: var(--header-h);
}
#lobby-screen.screen.active > .section.active,
#lobby-screen.screen.active > section.section.active {
    grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ★ 버그수정: 햄버거 메뉴(랭킹/충전·환전/규칙) 섹션 전환 복구.
   apple-system.css 의 `> .section`(.active 한정 없음)가 모든 섹션을 flex 로 띄워
   비활성 섹션이 안 숨겨지고 겹쳐 있어, 메뉴를 눌러도 화면이 안 바뀌던 문제. */
#lobby-screen.screen.active > .section:not(.active) { display: none !important; }

/* 게임 — flex center 컨테이너 (스케일러는 transform 으로) */
#game-screen.screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   4. 헤더 / 상단 바 — flex space-between, 겹침 0
   ═══════════════════════════════════════════════════════════════════ */
header.top-bar,
header.game-hud {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--header-h);
    padding: 0 var(--pad-page);
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: var(--gap-component);
}
.top-left,
.hud-left {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-component);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-right,
.hud-right {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-component);
    flex-wrap: nowrap;
}

/* 텍스트 정보 — overflow 보호 */
#user-balance, #user-points, #user-info,
.balance-badge {
    flex: 0 1 auto;
    min-width: 0;
    max-width: clamp(4rem, 22vw, 12rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 버튼 — 터치 영역 보장 */
header.top-bar button,
header.game-hud button {
    flex: 0 0 auto;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

/* ═══════════════════════════════════════════════════════════════════
   5. MODAL — 정중앙 고정, 비율 기반
   ═══════════════════════════════════════════════════════════════════ */
.modal,
#thankyou-modal,
#result-modal,
#win-announce-overlay,
#game-announce-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--layout-vh);
    z-index: 9000;
}
.modal.hidden,
#thankyou-modal.hidden,
#result-modal.hidden { display: none; }

.modal-content,
#thankyou-modal .modal-content,
#result-modal .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--modal-w);
    max-width: var(--modal-w);
    min-width: 0;
    max-height: var(--modal-h-max);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--modal-pad);
    margin: 0;
    box-sizing: border-box;
    z-index: 9001;
}
@media (min-width: 48rem) {
    /* ≥ 768px (태블릿/PC) — 모달 좀 더 크게 */
    .modal-content,
    #thankyou-modal .modal-content,
    #result-modal .modal-content {
        width: var(--modal-w-lg);
        max-width: var(--modal-w-lg);
    }
}

/* 단일 카드형 팝업 */
#thankyou-select-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--modal-w);
    max-width: var(--modal-w);
    max-height: var(--modal-h-max);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--modal-pad);
    margin: 0;
    box-sizing: border-box;
    z-index: 9001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
}
#thankyou-select-popup.hidden { display: none; }
#thankyou-select-popup > * {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
}

/* 모달 애니메이션 — center translate 유지 */
@keyframes modalCenterIn {
    0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-content,
#thankyou-modal .modal-content,
#result-modal .modal-content,
#thankyou-select-popup {
    animation: modalCenterIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* legacy keyframes 무력화 */
@keyframes resultModalIn {
    0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.94); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes appleFadeInUp {
    0%   { opacity: 0; transform: translate(-50%, -45%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   6. DROPDOWN (햄버거) — fixed, 오른쪽 위, 100% 노출 보장
   ═══════════════════════════════════════════════════════════════════ */
#lobby-menu-dropdown {
    position: fixed;
    top: var(--header-h);
    right: var(--pad-page);
    width: var(--dropdown-w);
    max-width: var(--dropdown-w);
    min-width: 0;
    max-height: var(--dropdown-h-max);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--gap-component);
    z-index: 9500;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    box-sizing: border-box;
}
#lobby-menu-dropdown.hidden { display: none; }
#lobby-menu-dropdown > * {
    flex-shrink: 0;
    width: 100%;
    min-height: var(--touch-min);
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   7. 게임 캔버스 — 스케일러 (JS 가 transform 처리)
   ═══════════════════════════════════════════════════════════════════ */
body.game-popup-body #game-screen {
    width: var(--layout-vw);
    height: var(--layout-vh);
}
body.game-popup-body #game-scaler {
    width: var(--canvas-w);
    height: var(--canvas-h);
    flex: 0 0 auto;
    transform-origin: center center;
}
body.game-popup-body .game-layout {
    width: var(--canvas-w);
    height: var(--canvas-h);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   8. 모드 카드 / 스테이크 페이지 — 비율 기반
   ═══════════════════════════════════════════════════════════════════ */
.lobby-mode-select,
.mode-select-cards,
.stake-page,
.stake-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.mode-select-cards,
.stake-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(0.5rem, 2vw, 1.5rem);
}
.lobby-mode-card,
.stake-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: clamp(13.75rem, 30vw, 20rem);
    max-width: 20rem;
    min-height: clamp(16rem, 28vw, 20rem);
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   9. 작은 화면 (≤ 600px) — 폰트만 비례 축소, 레이아웃 재배치 X
   ═══════════════════════════════════════════════════════════════════ */
html { font-size: clamp(0.875rem, 1.4vw, 1rem); }       /* 14 ~ 16px */
@media (max-width: 37.5rem) {                            /* ≤ 600px */
    html { font-size: clamp(0.75rem, 2.6vw, 0.9375rem); } /* 12 ~ 15px */
}
@media (max-width: 22.5rem) {                            /* ≤ 360px */
    html { font-size: clamp(0.6875rem, 3vw, 0.8125rem); }
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  CRITICAL OVERRIDE — !important 강제 (꼬인 legacy 무력화)               ║
   ║  · #F2F2F7 배경 / #1C1C1E 텍스트 / 검정 영역 제거                       ║
   ║  · rgba(255,255,255,0.8) + blur(20px) 글래스                            ║
   ║  · 모든 border 0 / radius 20px / Bold 폰트                              ║
   ║  · 컨테이너 width:100% 강제 (max-width 제거)                            ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─ 1. 전체 배경 — System Gray 6 (#F2F2F7) ─ */
html, body, #auth-screen, #lobby-screen, #game-screen,
.screen, .game-layout, #game-scaler, #room-list,
.section, #lobby-mode-cta {
    background: #F2F2F7 !important;
    background-image: none !important;
}
.table-viewport,
body:not([data-theme]) .table-viewport {
    background: #F2F2F7 !important;
    background-image: none !important;
}

/* ─ 2. 검정 영역 / 좌석 뒤 어지러움 제거 ─ */
.seat-slot, .seat-area, #seats-container,
.vip-room-bg {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
.vip-room-bg { display: none !important; }

/* ─ 3. 텍스트 컬러 통일 — Dark Gray (#1C1C1E) ─ */
html, body, .pb-name, .pb-balance, .pb-status,
.section-header h3, .modal-content,
header.top-bar, header.game-hud,
.action-btn, .btn-sm, .nav-btn,
.lobby-menu-item, .stake-btn, .lobby-mode-card {
    color: #1C1C1E !important;
}

/* ─ 4. 카드 뒷면 — 매트 딥 네이비 (#1C1C26) ─ */
.card-back {
    background: #1C1C26 !important;
    background-image:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.10) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
    color: #FFFFFF !important;
}
.card-back #deck-count {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

/* ─ 5. 모든 테두리 / 검정 라인 제거 ─ */
button, .btn-sm, .btn-primary, .btn-secondary, .btn-danger,
.action-btn, .nav-btn, .btn-option,
.player-badge, .modal-content, .auth-container,
.section, .wallet-card, .stake-btn,
.lobby-mode-card, .mode-card, .stake-icon-btn, .stake-back-btn,
input, select, textarea {
    border: none !important;
    outline: none !important;
}

/* ─ 6. Glassmorphism — rgba(255,255,255,0.8) + blur(20px) ─ */
header.top-bar, header.game-hud,
footer.my-area, .my-area,
.player-badge,
.action-btn, .btn-sm, .nav-btn,
.stake-btn, .stake-icon-btn, .stake-back-btn,
.lobby-mode-card, .mode-card,
#user-balance, #user-points,
#lobby-menu-dropdown,
.hud-right {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ─ 7. 모서리 — 20px 통일 ─ */
.player-badge, .modal-content, .auth-container,
.wallet-card, .stake-btn, .lobby-mode-card,
.mode-card, .action-btn, #lobby-menu-dropdown,
#user-balance, #user-points, .stake-back-btn,
.stake-icon-btn, .card-back, .hand-card, .meld-card {
    border-radius: 20px !important;
}
/* 캡슐 형태 유지 (HUD 통합 바 등) */
.hud-right, .balance-badge, .lm-tag,
button.btn-primary, button.btn-secondary {
    border-radius: 980px !important;
}

/* ─ 8. 폰트 — Bold + 자간 -0.03em ─ */
.card-back #deck-count,
.hand-card .card-rank, .meld-card .card-rank,
.hand-card .card-corner-top, .hand-card .card-corner-bottom,
.meld-card .card-corner-top, .meld-card .card-corner-bottom,
#user-balance, #user-points,
.pb-balance, .pb-gold, .pb-gold-wrap,
.modal-content h2, .modal-content h3,
.lobby-mode-card .lm-title, .stake-btn .stake-label {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

/* ─ 9. 컨테이너 width:100% 강제 (max-width / overflow 제약 해제) ─
   ★ 단, #game-scaler 와 .game-layout 은 1600x900 고정 캔버스 — 절대 100% 적용 X
     (JS scaler 가 transform: scale() 로 viewport 에 맞춤) */
html, body, #auth-screen, #lobby-screen, #game-screen,
.screen,
.section, #room-list, #lobby-mode-cta,
.lobby-mode-select, .mode-select-cards,
.stake-page, footer.my-area, header.top-bar, header.game-hud {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* 게임 캔버스 — width 100% 절대 적용 X, 1600x900 고정 유지 */
body.game-popup-body #game-scaler,
body.game-popup-body .game-layout {
    width: var(--canvas-w) !important;        /* 100rem = 1600px */
    max-width: none !important;
    height: var(--canvas-h) !important;
    flex: 0 0 auto !important;
}
body.game-popup-body #game-scaler {
    transform-origin: center center !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  PLAYER AREA 검정 일체화 + 저대비 (Low-Contrast Calm)                   ║
   ║  · 좌석 / 컨테이너 / wrapper 의 모든 검정 배경 제거                     ║
   ║  · 텍스트 / 그림자 톤다운 → 눈 피로 0                                   ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─ 모든 좌석 / 컨테이너 / wrapper 검정 영역 제거 ─ */
body.game-popup-body .seat-slot,
body.game-popup-body .seat-area,
body.game-popup-body .seat-wrapper,
body.game-popup-body #seats-container,
body.game-popup-body .empty-seat,
body.game-popup-body .waiting-badge,
body.game-popup-body .pb-profile,
body.game-popup-body .pb-row,
body.game-popup-body .pb-content,
body.game-popup-body .my-info-panel,
body.game-popup-body .my-cards-section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* [REMOVED 2026-05-11] 13-셀렉터 #F2F2F7 강제 통일 룰 제거
   - 이전: body / game-layout / table-viewport / table-felt / oval-table / center-stack /
           discard-wrap / table-melds / #game-melds 모두 #F2F2F7 라이트 그레이 강제
   - 이후: apple-game.css v7+ 의 다크 펠트 + 다마스크가 정상 적용됨
   - 표는 보더리스 유지 — 필요시 v7 룰에서 처리 */

/* oval-table 의 ::before/::after 펠트 텍스처 — 무력화 */
body.game-popup-body .oval-table::before,
body.game-popup-body .oval-table::after,
body.game-popup-body .table-felt::before,
body.game-popup-body .table-felt::after,
body.game-popup-body .table-viewport::before,
body.game-popup-body .table-viewport::after {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    content: none !important;
    display: none !important;
}

/* ─ 플레이어 배지 — 글래스 카드 단독 (테두리/검정 그림자 0) ─ */
body.game-popup-body .player-badge {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;   /* 매우 옅게 */
    border-radius: 20px !important;
}

/* ─ 아바타 — 검정 톤 → 부드러운 회색 ─ */
body.game-popup-body .pb-avatar {
    background: #E5E5EA !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #1C1C1E !important;
}

/* ─ 텍스트 — 순검정 X, Apple Dark Gray ─ */
body.game-popup-body .pb-name,
body.game-popup-body .pb-balance,
body.game-popup-body .pb-status,
body.game-popup-body .pb-info,
body.game-popup-body #my-nick,
body.game-popup-body #my-info-balance,
body.game-popup-body #my-score,
body.game-popup-body .turn-info,
body.game-popup-body .game-status-bar {
    color: #1C1C1E !important;
    text-shadow: none !important;
    background: transparent !important;
}

/* ─ 보조 텍스트 (상태 / 미등록 등) — 더 연한 회색 ─ */
body.game-popup-body .pb-status,
body.game-popup-body .pb-status-wrap,
body.game-popup-body .pb-penalties,
body.game-popup-body .pb-info {
    color: #6E6E73 !important;       /* Apple secondary text */
    font-weight: 500 !important;
}

/* ─ 카드 그림자 — 톤다운 (검정 진한 X) ─ */
body.game-popup-body .hand-card,
body.game-popup-body .meld-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
}

/* ─ 카드 뒷면 inner shadow 도 연하게 ─ */
body.game-popup-body .card-back {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* ─ 헤더 / 푸터 그림자 — 거의 안 보이게 ─ */
body.game-popup-body header.game-hud,
body.game-popup-body footer.my-area,
body.game-popup-body .my-area {
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.04) !important;     /* 매우 연한 구분선 */
}

/* ─ 액션 버튼 그림자 — 옅게 ─ */
body.game-popup-body .action-btn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* ─ 모달 배경 어두움 톤다운 ─ */
body.game-popup-body .modal,
body.game-popup-body #thankyou-modal,
body.game-popup-body #result-modal {
    background: rgba(0, 0, 0, 0.30) !important;        /* 0.5 → 0.3 */
}

/* ─ 1px 보더 잔존 — 모두 매우 연하게 통일 ─ */
body.game-popup-body *,
body.game-popup-body *::before,
body.game-popup-body *::after {
    border-color: rgba(0, 0, 0, 0.04) !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  THEME LOCKDOWN — 테마 시스템 완전 제거 (data-theme / theme-* 무력화)   ║
   ║  · apple.css / theme.css 의 [data-theme=...] 룰 32건 강제 무효화         ║
   ║  · body 의 theme-default / theme-retro 클래스 영향 차단                  ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 어떤 [data-theme] / theme-* 클래스가 있어도 — 단일 디자인 강제 */
body[data-theme],
body[data-theme="default"],
body[data-theme="retro-hall"],
body[data-theme="secret-hideout"],
body.theme-default,
body.theme-retro,
body[class*="theme-"] {
    background: #F2F2F7 !important;
    background-image: none !important;
    color: #1C1C1E !important;
}
body[data-theme] *,
body[data-theme] *::before,
body[data-theme] *::after,
body.theme-retro *,
body.theme-default * {
    background-image: none !important;       /* 테마별 그라데이션/이미지 모두 무력화 */
}

/* 좌석 검정 영역 — 어떤 테마든 무조건 transparent (재강조) */
body[data-theme] .seat-slot,
body[data-theme] .seat-area,
body[data-theme] #seats-container,
body[data-theme] .empty-seat,
body[data-theme] .pb-profile,
body[data-theme] .my-info-panel,
body[data-theme] .my-cards-section {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 게임 캔버스 / 테이블 — 어떤 테마든 #F2F2F7 단일 톤 */
body[data-theme],
body[data-theme] #game-screen,
body[data-theme] .game-layout,
body[data-theme] .table-viewport,
body[data-theme] .table-felt,
body[data-theme] .oval-table {
    background: #F2F2F7 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-theme] .oval-table::before,
body[data-theme] .oval-table::after,
body[data-theme] .table-felt::before,
body[data-theme] .table-felt::after {
    background: transparent !important;
    background-image: none !important;
    content: none !important;
    display: none !important;
}

/* 카드 뒷면 — 어떤 테마든 #1C1C26 매트 딥 네이비 고정 */
body[data-theme] .card-back,
body.theme-retro .card-back,
body.theme-default .card-back {
    background: #1C1C26 !important;
    background-image:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.10) 100%) !important;
    border-radius: 20px !important;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 헤더 / 푸터 / 플레이어 배지 — 어떤 테마든 글래스 통일 */
body[data-theme] header.top-bar,
body[data-theme] header.game-hud,
body[data-theme] footer.my-area,
body[data-theme] .my-area,
body[data-theme] .player-badge,
body[data-theme] .action-btn,
body[data-theme] .btn-sm,
body[data-theme] .stake-btn,
body[data-theme] .lobby-mode-card {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    color: #1C1C1E !important;
}

/* 모든 텍스트 — Dark Gray + Bold 800 */
body[data-theme] .pb-name,
body[data-theme] .pb-balance,
body[data-theme] #user-balance,
body[data-theme] #user-points,
body[data-theme] .modal-content h2,
body[data-theme] .modal-content h3 {
    color: #1C1C1E !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-shadow: none !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   UNIVERSAL OVERRIDE — data-theme 무관, 모든 상태에서 적용              ║
   ║   · style.css:382 의 .game-layout {bg:#080a0e} 등 진짜 원인 차단         ║
   ║   · 셀렉터를 body 또는 html body 로 — 항상 매칭 보장                     ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─ 어떤 상태든 게임 배경 / 캔버스 / 테이블 — #F2F2F7 강제 ─ */
html body,
html body #game-screen,
html body #game-scaler,
html body .game-layout,
html body .table-viewport,
html body .table-felt,
html body .oval-table,
html body .center-stack,
html body .discard-wrap,
html body .table-melds,
html body #game-melds,
html body #room-list,
html body .section,
html body #lobby-screen,
html body #auth-screen {
    background: #F2F2F7 !important;
    background-color: #F2F2F7 !important;
    background-image: none !important;
}

/* ─ 좌석 / 컨테이너 / wrapper — 어떤 상태든 transparent ─ */
html body .seat-slot,
html body .seat-area,
html body .seat-wrapper,
html body #seats-container,
html body .empty-seat,
html body .waiting-badge,
html body .pb-profile,
html body .pb-row,
html body .pb-content,
html body .my-info-panel,
html body .my-cards-section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ─ vip-room-bg 야경 잔재 — 어떤 상태든 hide ─ */
html body .vip-room-bg,
html body #vip-room-bg {
    display: none !important;
    background: transparent !important;
    background-image: none !important;
}

/* ─ 카드 뒷면 — 어떤 상태든 매트 딥 네이비 ─ */
html body .card-back {
    background: #1C1C26 !important;
    background-image:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.10) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* ─ 헤더 / 푸터 / 배지 — 글래스 통일 ─ */
html body header.top-bar,
html body header.game-hud,
html body footer.my-area,
html body .my-area,
html body .player-badge {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    color: #1C1C1E !important;
}

/* ─ oval-table::before/::after 펠트 텍스처 — 무력화 ─ */
html body .oval-table::before,
html body .oval-table::after,
html body .table-felt::before,
html body .table-felt::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  HIGH-SPECIFICITY KILL — apple.css 의 body:not([data-theme]) 룰 무력화  ║
   ║  · apple.css 룰 (0,2,1) 보다 한 단계 더 강한 (0,2,3) 으로 작성           ║
   ║  · :not([data-theme]) 매칭 + :is() 로 추가 specificity 부스트            ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* :not(#never) 트릭으로 specificity 부스팅 (#never 는 존재하지 않으므로 항상 매칭) */
html body:not([data-theme]) .seat-slot,
html body:not([data-theme]) .seat-area,
html body:not([data-theme]) #seats-container,
html body:not([data-theme]) .empty-seat,
html body:not([data-theme]) .pb-profile,
html body:not([data-theme]) .pb-content,
html body:not([data-theme]) .my-info-panel,
html body:not([data-theme]) .my-cards-section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 게임 캔버스 / 레이아웃 / 테이블 — 모두 #F2F2F7 강제 (apple.css 진한 배경 무효) */
html body:not([data-theme]) #game-screen,
html body:not([data-theme]) #game-scaler,
html body:not([data-theme]) .game-layout,
html body:not([data-theme]) .table-viewport,
html body:not([data-theme]) .table-felt,
html body:not([data-theme]) .oval-table {
    background: #F2F2F7 !important;
    background-color: #F2F2F7 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 카드 뒷면 — 매트 딥 네이비 강제 */
html body:not([data-theme]) .card-back {
    background: #1C1C26 !important;
    background-color: #1C1C26 !important;
    background-image:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.10) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #FFFFFF !important;
}

/* 플레이어 배지 / 헤더 / 푸터 — 글래스 강제 */
html body:not([data-theme]) header.top-bar,
html body:not([data-theme]) header.game-hud,
html body:not([data-theme]) footer.my-area,
html body:not([data-theme]) .my-area,
html body:not([data-theme]) .player-badge {
    background: rgba(255, 255, 255, 0.80) !important;
    background-color: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    color: #1C1C1E !important;
}

/* 정보 박스 패딩 1.5배 + 금액 시각적 묵직함 */
#user-balance, #user-points {
    padding: 0.75rem 1.25rem !important;
    font-size: clamp(0.8125rem, 1.4vw, 1rem) !important;
}
.player-badge {
    padding: 0.75rem 1.125rem !important;
    line-height: 1.5 !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   VIP UNITY (2026-05-11) — 로비/모달/폼 다크 그린 테마 확산           ║
   ║   · 베이스: #0A1F11 다크 그린 + 가죽 그레인 + 비네팅                  ║
   ║   · 액센트: #D4AF37 샴페인 골드 / #FAD02C 브라이트 골드               ║
   ║   · 텍스트: #E1E1E6 오프 화이트 (가독성 100%)                        ║
   ║   · 게임 화면(.game-popup-body) 은 영향 X                            ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

html body:not(.game-popup-body) {
    --vip-bg-base:        #0A1F11;
    --vip-bg-mid:         #082014;
    --vip-bg-deep:        #041208;
    --vip-bg-edge:        #02080A;
    --vip-glass:          rgba(255, 255, 255, 0.05);
    --vip-glass-strong:   rgba(255, 255, 255, 0.08);
    --vip-hairline:       rgba(255, 255, 255, 0.12);
    --vip-gold:           #D4AF37;
    --vip-gold-bright:    #FAD02C;
    --vip-gold-light:     #E6C770;
    --vip-gold-deep:      #8E7424;
    --vip-text:           #E1E1E6;
    --vip-text-2:         #A8A8B0;
    --vip-text-3:         #6B6B73;
    --vip-burgundy:       #8B0000;
}

html body:not(.game-popup-body) {
    background: var(--vip-bg-edge) !important;
    background-image:
        radial-gradient(ellipse 60% 35% at 50% -8%, rgba(255, 255, 250, 0.08) 0%, transparent 60%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='vu'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.98  0 0 0 0 0.86  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23vu)'/></svg>"),
        radial-gradient(ellipse at 50% 30%, var(--vip-bg-base) 0%, var(--vip-bg-mid) 50%, var(--vip-bg-deep) 80%, var(--vip-bg-edge) 100%) !important;
    background-blend-mode: screen, screen, normal !important;
    background-size: cover, 160px 160px, cover !important;
    color: var(--vip-text) !important;
}

/* 텍스트 가독성 — 전역 오프 화이트 */
html body:not(.game-popup-body),
html body:not(.game-popup-body) p,
html body:not(.game-popup-body) span,
html body:not(.game-popup-body) div,
html body:not(.game-popup-body) label,
html body:not(.game-popup-body) li,
html body:not(.game-popup-body) td,
html body:not(.game-popup-body) th,
html body:not(.game-popup-body) h1,
html body:not(.game-popup-body) h2,
html body:not(.game-popup-body) h3,
html body:not(.game-popup-body) h4 {
    color: var(--vip-text) !important;
}
html body:not(.game-popup-body) .text-muted,
html body:not(.game-popup-body) .info-text,
html body:not(.game-popup-body) .stat-box .label {
    color: var(--vip-text-2) !important;
}

/* 상단 헤더 — 다크 글래스 */
html body:not(.game-popup-body) header.top-bar {
    background: rgba(8, 32, 20, 0.85) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.90) 0%, rgba(8, 24, 16, 0.85) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: 0 1px 0 rgba(212, 175, 55, 0.10), 0 4px 16px rgba(0, 0, 0, 0.40) !important;
}

/* 잔액/포인트 뱃지 — 골드 */
html body:not(.game-popup-body) .balance-badge,
html body:not(.game-popup-body) #user-balance,
html body:not(.game-popup-body) #user-points {
    background: linear-gradient(135deg, rgba(250, 208, 44, 0.15) 0%, rgba(212, 175, 55, 0.10) 100%) !important;
    color: var(--vip-gold-bright) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.30) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
html body:not(.game-popup-body) #user-info {
    color: var(--vip-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 헤더 작은 버튼 */
html body:not(.game-popup-body) header.top-bar .btn-sm {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
html body:not(.game-popup-body) header.top-bar .btn-sm:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: var(--vip-gold-bright) !important;
}

/* 로비 메뉴 드롭다운 — 다크 글래스 */
html body:not(.game-popup-body) #lobby-menu-dropdown,
html body:not(.game-popup-body) .lobby-menu-dropdown {
    background: rgba(8, 24, 16, 0.92) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.92) 0%, rgba(8, 20, 14, 0.92) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50), 0 16px 48px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .lobby-menu-item,
html body:not(.game-popup-body) .lobby-nav-item {
    background: transparent !important;
    color: var(--vip-text) !important;
    border: none !important;
    border-radius: 8px !important;
}
html body:not(.game-popup-body) .lobby-menu-item:hover,
html body:not(.game-popup-body) .lobby-nav-item:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    color: var(--vip-gold-bright) !important;
}
html body:not(.game-popup-body) .lobby-menu-item.active,
html body:not(.game-popup-body) .lobby-nav-item.active {
    background: rgba(212, 175, 55, 0.18) !important;
    color: var(--vip-gold-bright) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.40) !important;
}
html body:not(.game-popup-body) .lobby-menu-divider {
    border-top: 1px solid rgba(212, 175, 55, 0.20) !important;
    margin: 8px 0 !important;
}

/* 섹션 헤더 */
html body:not(.game-popup-body) .section-header h2,
html body:not(.game-popup-body) .section-header h3 {
    color: var(--vip-gold-bright) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 방 목록 카드 — Glassmorphism + 골드 hairline */
html body:not(.game-popup-body) .room-card {
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .room-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.18), 0 24px 56px rgba(0, 0, 0, 0.45) !important;
}
html body:not(.game-popup-body) .room-card h4 {
    color: var(--vip-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html body:not(.game-popup-body) .room-card .room-meta,
html body:not(.game-popup-body) .room-card .room-meta span {
    color: var(--vip-text-2) !important;
}
html body:not(.game-popup-body) .room-card .room-meta span::before {
    color: var(--vip-gold) !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.30) !important;
}
html body:not(.game-popup-body) .room-card .room-players-bar {
    background: rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .room-card .room-players-fill {
    background: linear-gradient(90deg, var(--vip-gold-deep), var(--vip-gold)) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.40) !important;
}

/* 방 태그 */
html body:not(.game-popup-body) .room-tag {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}
html body:not(.game-popup-body) .tag-waiting {
    background: rgba(48, 209, 88, 0.18) !important;
    color: #6FE395 !important;
    border: 1px solid rgba(48, 209, 88, 0.40) !important;
}
html body:not(.game-popup-body) .tag-playing {
    background: rgba(255, 69, 58, 0.18) !important;
    color: #FF8B85 !important;
    border: 1px solid rgba(255, 69, 58, 0.40) !important;
}
html body:not(.game-popup-body) .tag-multiplier {
    background: rgba(212, 175, 55, 0.20) !important;
    color: var(--vip-gold-bright) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
}
html body:not(.game-popup-body) .room-card .room-tags > span[style] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text-2) !important;
    border: 1px solid var(--vip-hairline) !important;
}
html body:not(.game-popup-body) .room-card button[onclick*="spectateRoom"] {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--vip-gold-bright) !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    font-weight: 700 !important;
}

/* 모달 — 다크 글래스 + 골드 액자 */
html body:not(.game-popup-body) .modal,
html body:not(.game-popup-body) .modal-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
html body:not(.game-popup-body) .modal-content {
    background: rgba(8, 24, 16, 0.92) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.92) 0%, rgba(8, 20, 14, 0.92) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    color: var(--vip-text) !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 64px rgba(212, 175, 55, 0.10) !important;
}
html body:not(.game-popup-body) .modal-content h2,
html body:not(.game-popup-body) .modal-content h3 {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.25) !important;
}

/* Input / Select — 골드 액센트 */
html body:not(.game-popup-body) input[type="text"],
html body:not(.game-popup-body) input[type="password"],
html body:not(.game-popup-body) input[type="number"],
html body:not(.game-popup-body) input[type="email"],
html body:not(.game-popup-body) textarea,
html body:not(.game-popup-body) select {
    background: rgba(0, 0, 0, 0.40) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
}
html body:not(.game-popup-body) input:focus,
html body:not(.game-popup-body) textarea:focus,
html body:not(.game-popup-body) select:focus {
    border-color: var(--vip-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
    outline: none !important;
}
html body:not(.game-popup-body) input::placeholder,
html body:not(.game-popup-body) textarea::placeholder {
    color: var(--vip-text-3) !important;
}

/* Primary 버튼 — 샴페인 골드 그라데이션 */
html body:not(.game-popup-body) .btn-primary,
html body:not(.game-popup-body) button.btn-primary {
    background: linear-gradient(180deg, var(--vip-gold-bright) 0%, var(--vip-gold) 50%, var(--vip-gold-deep) 100%) !important;
    color: #1A1A1C !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px rgba(212, 175, 55, 0.30), 0 8px 20px rgba(212, 175, 55, 0.20) !important;
}
html body:not(.game-popup-body) .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.45), 0 16px 36px rgba(212, 175, 55, 0.25) !important;
}
html body:not(.game-popup-body) .btn-primary:active {
    transform: scale(0.98) !important;
}

/* Secondary 버튼 */
html body:not(.game-popup-body) .btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
html body:not(.game-popup-body) .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(212, 175, 55, 0.40) !important;
    color: var(--vip-gold-bright) !important;
}

/* Danger 버튼 — 버건디 */
html body:not(.game-popup-body) .btn-danger {
    background: linear-gradient(180deg, #B22222 0%, var(--vip-burgundy) 100%) !important;
    color: #FAF8F4 !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.40) !important;
}

/* 옵션 버튼 (모드/인원/베팅 선택) */
html body:not(.game-popup-body) .btn-option {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
html body:not(.game-popup-body) .btn-option:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: rgba(212, 175, 55, 0.40) !important;
    color: var(--vip-gold-bright) !important;
}
html body:not(.game-popup-body) .btn-option.active {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.30) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
    color: var(--vip-gold-bright) !important;
    border: 1px solid var(--vip-gold) !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.30) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 모드 카드 (괴물/조커 선택) */
html body:not(.game-popup-body) .mode-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--vip-hairline) !important;
    border-radius: 12px !important;
    color: var(--vip-text) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
html body:not(.game-popup-body) .mode-card.active {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.10) 100%) !important;
    border: 1px solid var(--vip-gold) !important;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.25) !important;
}
html body:not(.game-popup-body) .mode-card .mode-title {
    color: var(--vip-gold-bright) !important;
    font-weight: 800 !important;
}
html body:not(.game-popup-body) .mode-card .mode-desc {
    color: var(--vip-text-2) !important;
}

/* 인증 (로그인/회원가입) */
html body:not(.game-popup-body) .auth-container {
    background: rgba(8, 24, 16, 0.92) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.92) 0%, rgba(8, 20, 14, 0.92) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 80px rgba(212, 175, 55, 0.12) !important;
    color: var(--vip-text) !important;
}
html body:not(.game-popup-body) .auth-container .logo p {
    color: var(--vip-text-2) !important;
}
html body:not(.game-popup-body) .tab-buttons {
    border-bottom: 1px solid var(--vip-hairline) !important;
    background: transparent !important;
}
html body:not(.game-popup-body) .tab-btn {
    background: transparent !important;
    color: var(--vip-text-2) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 600 !important;
}
html body:not(.game-popup-body) .tab-btn.active {
    color: var(--vip-gold-bright) !important;
    border-bottom: 2px solid var(--vip-gold) !important;
}
html body:not(.game-popup-body) .error-msg {
    color: #FF8B85 !important;
    background: rgba(139, 0, 0, 0.20) !important;
    border: 1px solid rgba(178, 34, 34, 0.45) !important;
    border-radius: 8px !important;
}

/* 체크박스 / 라디오 */
html body:not(.game-popup-body) input[type="checkbox"],
html body:not(.game-popup-body) input[type="radio"] {
    accent-color: var(--vip-gold) !important;
}

/* 지갑/통계 박스 */
html body:not(.game-popup-body) .wallet-card,
html body:not(.game-popup-body) .stat-box,
html body:not(.game-popup-body) .ranking-table {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(212, 175, 55, 0.20) !important;
    border-radius: 12px !important;
    color: var(--vip-text) !important;
}
html body:not(.game-popup-body) .stat-box .value {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.30) !important;
}
html body:not(.game-popup-body) .ranking-table th {
    background: rgba(212, 175, 55, 0.12) !important;
    color: var(--vip-gold-bright) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.30) !important;
}
html body:not(.game-popup-body) .ranking-table td {
    border-bottom: 1px solid var(--vip-hairline) !important;
}

/* info-text */
html body:not(.game-popup-body) .info-text {
    color: var(--vip-text-2) !important;
    background: rgba(212, 175, 55, 0.06) !important;
    border-left: 2px solid rgba(212, 175, 55, 0.40) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

/* 토스트 */
html body:not(.game-popup-body) .toast {
    background: rgba(8, 24, 16, 0.92) !important;
    color: var(--vip-text) !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 로비 모드 카드 */
html body:not(.game-popup-body) .lobby-mode-card,
html body:not(.game-popup-body) #lobby-mode-cta .mode-cta-card {
    background: rgba(255, 255, 255, 0.05) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    border-radius: 16px !important;
    color: var(--vip-text) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .lobby-mode-card:hover,
html body:not(.game-popup-body) #lobby-mode-cta .mode-cta-card:hover {
    border-color: var(--vip-gold) !important;
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.20) !important;
}

/* 스크롤바 (Webkit) */
html body:not(.game-popup-body) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html body:not(.game-popup-body) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.30);
    border-radius: 4px;
}
html body:not(.game-popup-body) ::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.30);
    border-radius: 4px;
}
html body:not(.game-popup-body) ::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.50);
}

/* 링크 */
html body:not(.game-popup-body) a {
    color: var(--vip-gold-bright) !important;
    text-decoration: none !important;
}
html body:not(.game-popup-body) a:hover {
    color: #FFE066 !important;
    text-decoration: underline !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   VIP UNITY v2 (2026-05-11) — stake-* + lobby section 컴포넌트       ║
   ║   apple.css L5352+ 의 흰 배경 .stake-* 룰을 다크 VIP 톤으로 덮어씀     ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 섹션 컨테이너 — 투명 (배경 노출) */
html body:not(.game-popup-body) #room-list,
html body:not(.game-popup-body) .room-grid,
html body:not(.game-popup-body) .stake-page {
    background: transparent !important;
    background-image: none !important;
}

/* stake-page 헤더 */
html body:not(.game-popup-body) .stake-page-title,
html body:not(.game-popup-body) .stake-page-title .spt-name {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.30), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
}

/* "뒤로" 백 버튼 — 다크 글래스 pill */
html body:not(.game-popup-body) .stake-back-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 14px rgba(0, 0, 0, 0.30) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html body:not(.game-popup-body) .stake-back-btn:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--vip-gold-bright) !important;
    border-color: rgba(212, 175, 55, 0.40) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 18px rgba(212, 175, 55, 0.20) !important;
}

/* stake-subtitle 안내문 */
html body:not(.game-popup-body) .stake-subtitle {
    color: var(--vip-text-2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 판돈 버튼 카드 (브론즈/실버/골드) — 글래스모피즘 + 골드 hairline */
html body:not(.game-popup-body) .stake-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    color: var(--vip-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 8px 24px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .stake-btn:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 12px 32px rgba(212, 175, 55, 0.20),
        0 24px 56px rgba(0, 0, 0, 0.45) !important;
}

/* 카드 내부 텍스트 */
html body:not(.game-popup-body) .stake-btn .stake-label {
    color: var(--vip-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html body:not(.game-popup-body) .stake-btn .stake-amount {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.30), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    font-weight: 800 !important;
}
html body:not(.game-popup-body) .stake-btn .stake-min {
    color: var(--vip-text-3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html body:not(.game-popup-body) .stake-btn .stake-online {
    color: var(--vip-text-2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 판돈별 accent — 메달 아이콘 톤만 살리고 라벨은 통일 (가독성) */
html body:not(.game-popup-body) .stake-btn.stake-bronze .stake-label,
html body:not(.game-popup-body) .stake-btn.stake-bronze .stake-online {
    color: #D4A06B !important;                     /* 브론즈 톤 — 채도 다운 */
}
html body:not(.game-popup-body) .stake-btn.stake-silver .stake-label,
html body:not(.game-popup-body) .stake-btn.stake-silver .stake-online {
    color: #C0C0C8 !important;                     /* 실버 톤 */
}
html body:not(.game-popup-body) .stake-btn.stake-gold .stake-label,
html body:not(.game-popup-body) .stake-btn.stake-gold .stake-online {
    color: var(--vip-gold-bright) !important;      /* 브라이트 골드 */
}

/* 매칭 대기 화면 */
html body:not(.game-popup-body) .matching-screen {
    background: rgba(8, 24, 16, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    color: var(--vip-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.50) !important;
}
html body:not(.game-popup-body) .matching-screen h4 {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.30) !important;
}
html body:not(.game-popup-body) .matching-screen p {
    color: var(--vip-text-2) !important;
}
html body:not(.game-popup-body) .matching-screen .matching-spinner {
    border: 4px solid rgba(212, 175, 55, 0.20) !important;
    border-top-color: var(--vip-gold) !important;
}
html body:not(.game-popup-body) .stake-cancel-btn {
    background: linear-gradient(180deg, #B22222 0%, var(--vip-burgundy) 100%) !important;
    color: #FAF8F4 !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.40) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 비공개 방 만들기/참가 풋터 버튼 */
html body:not(.game-popup-body) .stake-icon-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.30) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html body:not(.game-popup-body) .stake-icon-btn:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--vip-gold-bright) !important;
    border-color: rgba(212, 175, 55, 0.40) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 22px rgba(212, 175, 55, 0.20) !important;
}

/* 모드 선택 CTA (괴물/조커 큰 카드) */
html body:not(.game-popup-body) #lobby-mode-cta,
html body:not(.game-popup-body) .lobby-mode-cta {
    background: transparent !important;
}
html body:not(.game-popup-body) #lobby-mode-cta button,
html body:not(.game-popup-body) #lobby-mode-cta .mode-cta-card,
html body:not(.game-popup-body) .lobby-mode-cta button {
    background: rgba(255, 255, 255, 0.05) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    color: var(--vip-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) #lobby-mode-cta button:hover {
    border-color: var(--vip-gold) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 32px rgba(212, 175, 55, 0.20) !important;
}

/* 일반 .section 컨테이너 — 투명 (배경 노출) */
html body:not(.game-popup-body) .section.active,
html body:not(.game-popup-body) #rooms-section,
html body:not(.game-popup-body) #rankings-section,
html body:not(.game-popup-body) #wallet-section,
html body:not(.game-popup-body) #rules-section {
    background: transparent !important;
}

/* 매치 메이킹 / 회원가입 시 .info-text 패널 */
html body:not(.game-popup-body) #min-balance-info {
    color: var(--vip-text-2) !important;
    background: rgba(212, 175, 55, 0.06) !important;
    border-left: 2px solid rgba(212, 175, 55, 0.40) !important;
}

/* 폼 그룹 라벨 */
html body:not(.game-popup-body) .form-group label,
html body:not(.game-popup-body) .form-group > p {
    color: var(--vip-text) !important;
    font-weight: 600 !important;
}
html body:not(.game-popup-body) .form-group .label {
    color: var(--vip-gold-bright) !important;
}

/* 모달 액션 영역 */
html body:not(.game-popup-body) .modal-actions {
    border-top: 1px solid var(--vip-hairline) !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
}

/* "+ 방 만들기" 버튼 등 섹션 헤더의 primary 버튼 — 이미 .btn-primary 룰이 잡지만 확인 */
html body:not(.game-popup-body) .section-header .btn-primary {
    /* 별도 처리 불필요 — .btn-primary 룰이 적용 */
}

/* 빈 상태 메시지 */
html body:not(.game-popup-body) .empty-state,
html body:not(.game-popup-body) .no-rooms-msg {
    color: var(--vip-text-2) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed var(--vip-hairline) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   GLOBAL MODAL SYSTEM (2026-05-11) — 표준화 정중앙 + 다크 VIP        ║
   ║                                                                     ║
   ║   · Overlay: rgba(0,0,0,0.7) + backdrop-filter blur(5px)            ║
   ║   · Center: position:fixed + top/left 50% + translate(-50%,-50%)    ║
   ║   · Animation: scale 0.94 → 1.0 + opacity 0 → 1 (ease-out 0.28s)    ║
   ║   · Body lock: :has() 셀렉터 — 모달 열린 동안 body overflow:hidden    ║
   ║   · 반응형: max-height 90vh + 내부 스크롤 + 모바일 좌우 padding       ║
   ║   · 게임화면 (.game-popup-body) 도 동일 표준 적용                     ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ─── 1. 모달 Overlay — 어둡고 흐릿한 배경 ─── */
html body .modal:not(.hidden),
html body .modal-overlay:not(.hidden),
html body #thankyou-modal:not(.hidden),
html body #result-modal:not(.hidden),
html body #theme-modal:not(.hidden),
html body #create-room-modal:not(.hidden),
html body #win-announce-overlay:not(.hidden),
html body #game-announce-overlay:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.70) !important;
    backdrop-filter: blur(5px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(140%) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(8px, 3vw, 32px) !important;
    box-sizing: border-box !important;
    animation: vipModalOverlayIn 0.22s ease-out both !important;
}

@keyframes vipModalOverlayIn {
    0%   { opacity: 0; backdrop-filter: blur(0px); }
    100% { opacity: 1; backdrop-filter: blur(5px); }
}

/* ─── 2. 모달 Content — 정중앙 + scale-in 애니메이션 ─── */
html body .modal:not(.hidden) > .modal-content,
html body .modal:not(.hidden) > .result-modal,
html body #thankyou-modal:not(.hidden) > .modal-content,
html body #result-modal:not(.hidden) > .modal-content,
html body #theme-modal:not(.hidden) > .modal-content,
html body #create-room-modal:not(.hidden) > .modal-content {
    /* flex 중앙 정렬 사용 — overlay 가 flex 컨테이너 */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    /* 크기 — 90vw / 90vh 클램프, max 600 */
    width: 100% !important;
    max-width: min(600px, 90vw) !important;
    max-height: min(90vh, 90dvh) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    /* scale-in 애니메이션 */
    animation: vipModalContentIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes vipModalContentIn {
    0%   { opacity: 0; transform: scale(0.94) translateY(8px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 작은 thankyou-select-popup — 단일 카드형 (overlay 없음) */
html body #thankyou-select-popup:not(.hidden) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    max-width: min(400px, 90vw) !important;
    max-height: min(90vh, 90dvh) !important;
    overflow-y: auto !important;
    animation: vipPopupIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes vipPopupIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─── 3. Body 스크롤 잠금 — :has() 사용 ─── */
@supports selector(:has(*)) {
    html body:has(.modal:not(.hidden)),
    html body:has(.modal-overlay:not(.hidden)),
    html body:has(#thankyou-modal:not(.hidden)),
    html body:has(#result-modal:not(.hidden)),
    html body:has(#theme-modal:not(.hidden)),
    html body:has(#create-room-modal:not(.hidden)),
    html body:has(#thankyou-select-popup:not(.hidden)) {
        overflow: hidden !important;
        touch-action: none;
    }
}

/* ─── 4. 로비 모달 — VIP 다크 그린 + 샴페인 골드 (강화) ─── */
html body:not(.game-popup-body) .modal:not(.hidden) > .modal-content,
html body:not(.game-popup-body) #create-room-modal:not(.hidden) > .modal-content {
    background: rgba(10, 31, 17, 0.92) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.95) 0%, rgba(8, 24, 16, 0.92) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    color: var(--vip-text) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;     /* 샴페인 액자 */
    border-radius: 18px !important;
    padding: clamp(20px, 3vw, 32px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 80px rgba(212, 175, 55, 0.12) !important;
}

/* 모달 내부 텍스트 */
html body:not(.game-popup-body) .modal-content h2,
html body:not(.game-popup-body) .modal-content h3 {
    color: var(--vip-gold-bright) !important;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.30), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    margin-top: 0 !important;
    font-weight: 800 !important;
}

/* 모달 close 버튼 (있다면) */
html body:not(.game-popup-body) .modal-content .close-btn,
html body:not(.game-popup-body) .modal-content .modal-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--vip-text) !important;
    border: 1px solid var(--vip-hairline) !important;
    border-radius: 50% !important;
}
html body:not(.game-popup-body) .modal-content .close-btn:hover,
html body:not(.game-popup-body) .modal-content .modal-close:hover {
    background: rgba(212, 175, 55, 0.18) !important;
    color: var(--vip-gold-bright) !important;
}

/* ─── 5. 모달 액션 영역 (취소/만들기 버튼 row) ─── */
html body:not(.game-popup-body) .modal-content .modal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--vip-hairline) !important;
}
html body:not(.game-popup-body) .modal-content .modal-actions button {
    min-width: 100px !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
}

/* ─── 6. 모바일 — 작은 화면 대응 ─── */
@media (max-width: 480px) {
    html body .modal:not(.hidden),
    html body #create-room-modal:not(.hidden) {
        padding: 12px !important;
    }
    html body .modal:not(.hidden) > .modal-content,
    html body #create-room-modal:not(.hidden) > .modal-content {
        max-width: 100% !important;
        max-height: 92vh !important;
        padding: clamp(16px, 4vw, 24px) !important;
        border-radius: 14px !important;
    }
}

/* ─── 7. 모달 Hidden 상태 — 완전 숨김 ─── */
html body .modal.hidden,
html body .modal-overlay.hidden,
html body #thankyou-modal.hidden,
html body #result-modal.hidden,
html body #theme-modal.hidden,
html body #create-room-modal.hidden,
html body #thankyou-select-popup.hidden,
html body #win-announce-overlay.hidden,
html body #game-announce-overlay.hidden {
    display: none !important;
    animation: none !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   LEGIBILITY PASS LOBBY (2026-05-11) — 로비 가독성 강화               ║
   ║   · 모든 텍스트에 text-shadow 적용                                   ║
   ║   · font-weight 500+                                                ║
   ║   · 헤더 잔액/포인트 → 더 진한 골드                                   ║
   ║   · 방 카드 텍스트 가독성                                            ║
   ║   · 모달 안 텍스트 / 폼 라벨                                         ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 전역 — 작은 텍스트 가독성 */
html body:not(.game-popup-body) {
    font-weight: 500 !important;
}
html body:not(.game-popup-body) p,
html body:not(.game-popup-body) span:not(.balance-badge):not(.room-tag),
html body:not(.game-popup-body) div,
html body:not(.game-popup-body) li,
html body:not(.game-popup-body) td,
html body:not(.game-popup-body) label {
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
html body:not(.game-popup-body) h1,
html body:not(.game-popup-body) h2,
html body:not(.game-popup-body) h3,
html body:not(.game-popup-body) h4 {
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 헤더 잔액 / 포인트 — 강한 골드 + 검정 그림자 */
html body:not(.game-popup-body) #user-balance,
html body:not(.game-popup-body) #user-points,
html body:not(.game-popup-body) .balance-badge {
    color: #FAD02C !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(250, 208, 44, 0.20) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
}
html body:not(.game-popup-body) #user-info {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: clamp(15px, 1.6vw, 19px) !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(212, 175, 55, 0.20) !important;
    max-width: clamp(6rem, 26vw, 16rem) !important;
}

/* 섹션 헤더 */
html body:not(.game-popup-body) .section-header h2,
html body:not(.game-popup-body) .section-header h3 {
    color: #FAD02C !important;
    font-weight: 900 !important;
    font-size: clamp(20px, 2.4vw, 28px) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 16px rgba(250, 208, 44, 0.30) !important;
}

/* 방 카드 텍스트 */
html body:not(.game-popup-body) .room-card h4 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}
html body:not(.game-popup-body) .room-card .room-meta,
html body:not(.game-popup-body) .room-card .room-meta span {
    color: #E1E1E6 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .room-card .room-meta span::before {
    color: #FAD02C !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* 방 태그 — 강한 색상 */
html body:not(.game-popup-body) .tag-waiting {
    color: #4ADE80 !important;                          /* 형광 녹색 */
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .tag-playing {
    color: #FF8B85 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .tag-multiplier {
    color: #FAD02C !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(250, 208, 44, 0.40) !important;
}

/* stake-* 카드 텍스트 */
html body:not(.game-popup-body) .stake-btn .stake-label {
    font-weight: 900 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}
html body:not(.game-popup-body) .stake-btn .stake-amount {
    color: #FAD02C !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(250, 208, 44, 0.20) !important;
}
html body:not(.game-popup-body) .stake-btn .stake-min {
    color: #C0C0C8 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .stake-btn .stake-online {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* 모달 안 텍스트 */
html body:not(.game-popup-body) .modal-content p,
html body:not(.game-popup-body) .modal-content label,
html body:not(.game-popup-body) .modal-content div {
    color: #E1E1E6 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) .modal-content h2,
html body:not(.game-popup-body) .modal-content h3 {
    color: #FAD02C !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 16px rgba(250, 208, 44, 0.30) !important;
}

/* 폼 라벨 */
html body:not(.game-popup-body) .form-group > label,
html body:not(.game-popup-body) .form-group > p {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Input 텍스트 */
html body:not(.game-popup-body) input,
html body:not(.game-popup-body) textarea,
html body:not(.game-popup-body) select {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
html body:not(.game-popup-body) input::placeholder,
html body:not(.game-popup-body) textarea::placeholder {
    color: #8B8B92 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* btn-option 텍스트 */
html body:not(.game-popup-body) .btn-option {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) .btn-option.active {
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(250, 208, 44, 0.30) !important;
}

/* 인증 (로그인/회원가입) 텍스트 */
html body:not(.game-popup-body) .auth-container .logo p {
    color: #C0C0C8 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) .tab-btn {
    color: #A8A8B0 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) .tab-btn.active {
    color: #FAD02C !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(250, 208, 44, 0.30) !important;
}

/* 토스트 가독성 */
html body:not(.game-popup-body) .toast {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* 로비 메뉴 항목 */
html body:not(.game-popup-body) .lobby-menu-item,
html body:not(.game-popup-body) .lobby-nav-item {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* 랭킹 테이블 */
html body:not(.game-popup-body) .ranking-table th {
    font-weight: 900 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .ranking-table td {
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* 지갑 통계 박스 */
html body:not(.game-popup-body) .stat-box .label {
    color: #C0C0C8 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) .stat-box .value {
    color: #FAD02C !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(250, 208, 44, 0.25) !important;
}

/* 모드 카드 (괴물/조커) */
html body:not(.game-popup-body) .mode-card .mode-title {
    color: #FAD02C !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(250, 208, 44, 0.25) !important;
}
html body:not(.game-popup-body) .mode-card .mode-desc {
    color: #E1E1E6 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* info-text */
html body:not(.game-popup-body) .info-text {
    color: #E1E1E6 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* 에러 메시지 */
html body:not(.game-popup-body) .error-msg {
    color: #FF8B85 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* ─── SELECT 드롭다운 — option 엘리먼트 가독성 ─── */
/* 보이스팩 / 일반 select 의 <option> 들 — OS 기본 렌더라 따로 스타일 필요 */
html body:not(.game-popup-body) select,
html body:not(.game-popup-body) #voice-mode-select {
    color: #FFFFFF !important;
    background: rgba(8, 24, 16, 0.95) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    /* select 닫혀있을 때 화살표 색상 */
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #FAD02C 50%),
        linear-gradient(135deg, #FAD02C 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 30px !important;
}

/* option 엘리먼트 자체 — 다크 배경 + 흰 텍스트 */
html body:not(.game-popup-body) select option,
html body:not(.game-popup-body) #voice-mode-select option {
    background: #0A1F11 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 8px !important;
}

/* 선택된 option (드롭다운 펼친 상태에서 호버/선택) */
html body:not(.game-popup-body) select option:checked,
html body:not(.game-popup-body) select option:hover,
html body:not(.game-popup-body) #voice-mode-select option:checked {
    background: linear-gradient(180deg, #D4AF37 0%, #8E7424 100%) !important;
    color: #000000 !important;
    font-weight: 800 !important;
}

/* disabled option */
html body:not(.game-popup-body) select option:disabled {
    color: #6B6B73 !important;
    background: #02080A !important;
}

/* 게임 화면에도 동일 적용 (혹시 game.html 안에 select 있을 경우) */
html body.game-popup-body select,
html body.game-popup-body[class] select {
    color: #FFFFFF !important;
    background: rgba(8, 24, 16, 0.95) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    font-weight: 600 !important;
}
html body.game-popup-body select option,
html body.game-popup-body[class] select option {
    background: #0A1F11 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
html body.game-popup-body select option:checked,
html body.game-popup-body select option:hover {
    background: linear-gradient(180deg, #D4AF37 0%, #8E7424 100%) !important;
    color: #000000 !important;
    font-weight: 800 !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   AUTH SCREEN FIX (2026-05-11)                                     ║
   ║   · body 흰 배경 강제 차단 (apple-system.css / apple.css 충돌)        ║
   ║   · #auth-screen 정중앙 정렬 강제                                    ║
   ║   · 어떤 부모 흰 배경도 다크 그린으로 덮어씀                          ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 1. 최고 specificity body bg 룰 — apple-system.css L456 등 모든 흰 룰 패배 */
html body[class]:not(.game-popup-body),
html body:not(.game-popup-body):not(.admin-body),
html:not([class]) body:not(.game-popup-body),
html body:not(.game-popup-body) {
    background-color: #02080A !important;            /* fallback solid */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. html 자체도 다크 (혹시 body 밖이 보일 때 대비) */
html:not([class]) {
    background-color: #02080A !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100% !important;
}

/* 3. auth-screen / lobby-screen 정중앙 정렬 강제 */
html body:not(.game-popup-body) #auth-screen.screen.active,
html body[class]:not(.game-popup-body) #auth-screen.screen.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(16px, 4vw, 40px) !important;
    overflow: hidden !important;
    background: transparent !important;              /* body 의 dark gradient 노출 */
    box-sizing: border-box !important;
}

/* 4. lobby-screen 도 풀 vh */
html body:not(.game-popup-body) #lobby-screen.screen.active,
html body[class]:not(.game-popup-body) #lobby-screen.screen.active {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* 5. screen 전체 — 비활성 시 완전 숨김 (display:none 보장) */
html body:not(.game-popup-body) .screen:not(.active),
html body[class]:not(.game-popup-body) .screen:not(.active) {
    display: none !important;
}

/* 6. auth-container 폭 보정 — 너무 좁아지지 않게 */
html body:not(.game-popup-body) .auth-container,
html body[class]:not(.game-popup-body) .auth-container {
    width: 100% !important;
    max-width: min(440px, 92vw) !important;
    margin: 0 auto !important;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 40px) !important;
    box-sizing: border-box !important;
    /* 위에서 정의한 auth-container VIP 스타일은 유지 */
}

/* 7. .game-layout 등 누군가 흰 배경 깔고있으면 차단 */
html body:not(.game-popup-body) .game-layout,
html body:not(.game-popup-body) #game-scaler,
html body:not(.game-popup-body) main,
html body:not(.game-popup-body) #room-list,
html body[class]:not(.game-popup-body) .game-layout,
html body[class]:not(.game-popup-body) #game-scaler {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   AUTH SCREEN LEGIBILITY FIX (2026-05-11)                          ║
   ║   · HULA 로고 텍스트 → 밝은 골드 + glow                              ║
   ║   · 탭 컨테이너 → 다크 글래스 (흰 배경 제거)                          ║
   ║   · active 탭 → 골드 그라데이션 + 검정 텍스트                         ║
   ║   · 비활성 탭 → 흰 텍스트                                            ║
   ║   · input 다크 배경 + 흰 placeholder                                 ║
   ║   · body 100% width (100vw 가 scrollbar 만큼 초과되던 문제)           ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 1. body width — 100vw 대신 100% 사용 (스크롤바 17px 초과 방지) */
html body[class]:not(.game-popup-body),
html body:not(.game-popup-body) {
    width: 100% !important;
    max-width: 100% !important;
}
html:not([class]) {
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. HULA 로고 텍스트 — 밝은 샴페인 골드 + glow */
html body:not(.game-popup-body) .auth-container .logo h1,
html body[class]:not(.game-popup-body) .auth-container .logo h1 {
    color: #FAD02C !important;                          /* 밝은 골드 */
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85),
                 0 0 24px rgba(250, 208, 44, 0.45),
                 0 0 48px rgba(250, 208, 44, 0.25) !important;
}

/* 서브타이틀 "한국형 카드게임 플랫폼" — 오프 화이트 */
html body:not(.game-popup-body) .auth-container .logo p,
html body[class]:not(.game-popup-body) .auth-container .logo p {
    color: #E1E1E6 !important;                          /* 오프 화이트 */
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* 3. 탭 컨테이너 — 다크 글래스 */
html body:not(.game-popup-body) .auth-container .tab-buttons,
html body[class]:not(.game-popup-body) .auth-container .tab-buttons {
    background: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 비활성 탭 — 오프 화이트 */
html body:not(.game-popup-body) .auth-container .tab-btn,
html body[class]:not(.game-popup-body) .auth-container .tab-btn {
    background: transparent !important;
    color: #E1E1E6 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* 활성 탭 — 골드 그라데이션 + 검정 텍스트 */
html body:not(.game-popup-body) .auth-container .tab-btn.active,
html body[class]:not(.game-popup-body) .auth-container .tab-btn.active {
    background: linear-gradient(180deg, #FAD02C 0%, #D4AF37 50%, #8E7424 100%) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    border-bottom: none !important;                      /* 이전 탭 언더라인 제거 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(212, 175, 55, 0.30) !important;
}
html body:not(.game-popup-body) .auth-container .tab-btn:hover:not(.active) {
    color: #FAD02C !important;
    background: rgba(212, 175, 55, 0.10) !important;
}

/* 4. 입력 필드 — 다크 배경 + 흰 텍스트 */
html body:not(.game-popup-body) .auth-form input,
html body[class]:not(.game-popup-body) .auth-form input {
    background: rgba(0, 0, 0, 0.40) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
html body:not(.game-popup-body) .auth-form input::placeholder,
html body[class]:not(.game-popup-body) .auth-form input::placeholder {
    color: #8B8B92 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}
html body:not(.game-popup-body) .auth-form input:focus {
    border-color: #FAD02C !important;
    box-shadow: 0 0 0 3px rgba(250, 208, 44, 0.20) !important;
    background: rgba(0, 0, 0, 0.50) !important;
    outline: none !important;
}

/* 5. 로그인 버튼 — 골드 그라데이션 (강화) */
html body:not(.game-popup-body) .auth-form .btn-primary,
html body[class]:not(.game-popup-body) .auth-form .btn-primary,
html body:not(.game-popup-body) .auth-form button[type="submit"],
html body[class]:not(.game-popup-body) .auth-form button[type="submit"] {
    background: linear-gradient(180deg, #FAD02C 0%, #D4AF37 50%, #8E7424 100%) !important;
    color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(212, 175, 55, 0.35),
        0 12px 32px rgba(212, 175, 55, 0.20) !important;
    cursor: pointer !important;
    transition: transform 0.12s, box-shadow 0.15s !important;
}
html body:not(.game-popup-body) .auth-form .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 8px 20px rgba(212, 175, 55, 0.50),
        0 16px 40px rgba(212, 175, 55, 0.25) !important;
}
html body:not(.game-popup-body) .auth-form .btn-primary:active {
    transform: scale(0.98) !important;
}

/* 6. 에러 메시지 */
html body:not(.game-popup-body) #auth-error,
html body[class]:not(.game-popup-body) #auth-error {
    color: #FF8B85 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    margin-top: 12px !important;
}

/* 7. auth-container 자체 — 다크 글래스 강화 */
html body:not(.game-popup-body) .auth-container,
html body[class]:not(.game-popup-body) .auth-container {
    background: rgba(8, 24, 16, 0.85) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.92) 0%, rgba(8, 20, 14, 0.85) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 80px rgba(212, 175, 55, 0.12) !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   🏛️  GLOBAL LAYOUT FOUNDATION (2026-05-11) — 근본 레이아웃 표준화    ║
   ║                                                                     ║
   ║   원칙:                                                              ║
   ║   1. html/body — 100% 폭 / min-height 100dvh / 가로 스크롤 차단      ║
   ║   2. .screen — 풀 viewport flex 컨테이너 (가로/세로 중앙)             ║
   ║   3. 모달 — fixed + flex center (어떤 부모도 영향 X)                  ║
   ║   4. z-index 계층 — toast > modal > dropdown > content 일관 적용      ║
   ║   5. 모바일 — 자동 스케일 / 폰트 축소 fallback                        ║
   ║                                                                     ║
   ║   적용 범위: index.html / game.html / admin.html 전부                ║
   ║   * 게임 화면(.game-popup-body) 의 .game-scaler transform 보존       ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   [1] HTML / BODY 표준 — viewport 풀 사용 + 가로 스크롤 차단
   ═══════════════════════════════════════════════════════════════════ */
html {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* body — 모든 페이지 공통 baseline (게임 popup 만 별도) */
html body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    /* 게임 popup 은 height 100dvh + overflow:hidden 유지 */
}

/* 비-게임 body — 정상 스크롤 가능 (단, 가로는 차단) */
html body:not(.game-popup-body) {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 게임 popup body — 풀 viewport 고정 */
html body.game-popup-body {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [2] .screen 표준 — Flexbox 중앙 정렬 시스템
   ═══════════════════════════════════════════════════════════════════ */
/* 비활성 screen — 완전 숨김 */
html body .screen:not(.active) {
    display: none !important;
}

/* 활성 screen — 풀 viewport flex 컨테이너 */
html body:not(.game-popup-body) #auth-screen.screen.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: clamp(16px, 3vw, 40px) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
}

html body:not(.game-popup-body) #lobby-screen.screen.active {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* lobby header (top-bar) — grid row 1, 자동 높이 */
html body:not(.game-popup-body) #lobby-screen.screen.active > header.top-bar {
    grid-row: 1 !important;
    width: 100% !important;
    z-index: 100 !important;
}

/* lobby section (메인 컨텐츠) — grid row 2, 남은 공간 */
html body:not(.game-popup-body) #lobby-screen.screen.active > .section.active {
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: clamp(16px, 2vw, 32px) !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [3] 모달 표준 — fixed + flex center (어떤 부모도 영향 X)
   ═══════════════════════════════════════════════════════════════════ */
html body .modal:not(.hidden),
html body .modal-overlay:not(.hidden),
html body #thankyou-modal:not(.hidden),
html body #result-modal:not(.hidden),
html body #theme-modal:not(.hidden),
html body #create-room-modal:not(.hidden),
html body #win-announce-overlay:not(.hidden),
html body #game-announce-overlay:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(8px, 3vw, 32px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 모달 content — 풀 viewport 안에서 자동 중앙 (translate 불필요) */
html body .modal:not(.hidden) > .modal-content,
html body #thankyou-modal:not(.hidden) > .modal-content,
html body #result-modal:not(.hidden) > .modal-content,
html body #theme-modal:not(.hidden) > .modal-content,
html body #create-room-modal:not(.hidden) > .modal-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: min(600px, 90vw) !important;
    max-height: min(90vh, 90dvh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 단일 카드형 popup (오버레이 X) — 자체가 fixed center */
html body #thankyou-select-popup:not(.hidden) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    max-width: min(400px, 90vw) !important;
    max-height: min(90vh, 90dvh) !important;
    overflow-y: auto !important;
    margin: 0 !important;
}

/* 모달 hidden — 완전 숨김 */
html body .modal.hidden,
html body .modal-overlay.hidden,
html body #thankyou-modal.hidden,
html body #result-modal.hidden,
html body #theme-modal.hidden,
html body #create-room-modal.hidden,
html body #thankyou-select-popup.hidden,
html body #win-announce-overlay.hidden,
html body #game-announce-overlay.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [4] z-index 계층 — 일관 시스템
   ═══════════════════════════════════════════════════════════════════ */
html body .toast,
html body #toast-container { z-index: 10000 !important; }

html body .modal,
html body .modal-overlay,
html body #thankyou-modal,
html body #result-modal,
html body #theme-modal,
html body #create-room-modal,
html body #thankyou-select-popup { z-index: 9999 !important; }

html body #win-announce-overlay,
html body #game-announce-overlay { z-index: 9998 !important; }

html body #lobby-menu-dropdown,
html body .dropdown-menu { z-index: 9500 !important; }

html body header.top-bar,
html body header.game-hud { z-index: 100 !important; }

/* ═══════════════════════════════════════════════════════════════════
   [5] 반응형 — 작은 화면 대응
   ═══════════════════════════════════════════════════════════════════ */
/* 매우 작은 화면 (<480px) — padding/font 자동 축소 */
@media (max-width: 480px) {
    html body:not(.game-popup-body) {
        font-size: 14px !important;
    }
    html body:not(.game-popup-body) #auth-screen.screen.active {
        padding: 12px !important;
    }
    html body:not(.game-popup-body) #lobby-screen.screen.active > .section.active {
        padding: 12px !important;
    }
    html body .modal:not(.hidden) {
        padding: 8px !important;
    }
    html body .modal:not(.hidden) > .modal-content {
        max-width: 100% !important;
        max-height: 95vh !important;
        padding: clamp(14px, 4vw, 20px) !important;
        border-radius: 14px !important;
    }
    /* auth-container 좁은 화면 대응 */
    html body:not(.game-popup-body) .auth-container {
        max-width: 100% !important;
        padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 28px) !important;
    }
}

/* 매우 짧은 화면 (<600px height) — 폰트 축소 */
@media (max-height: 600px) {
    html body:not(.game-popup-body) .auth-container .logo h1 {
        font-size: 22px !important;
    }
    html body:not(.game-popup-body) .auth-container {
        padding: 20px !important;
    }
    html body:not(.game-popup-body) #auth-screen.screen.active {
        padding: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   [6] 캡슐화 — 어떤 자식 요소도 부모를 넘어가지 못함
   ═══════════════════════════════════════════════════════════════════ */
html body .auth-container,
html body .modal-content,
html body .room-card,
html body .stake-btn {
    contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════════
   [7] AUTH-CONTAINER 절대 중앙 — position: fixed (마지막 안전장치)
   부모 flex/grid 레이아웃이 어떤 이유로 깨져도 정중앙 보장
   ═══════════════════════════════════════════════════════════════════ */
html body:not(.game-popup-body) #auth-screen.screen.active .auth-container,
html body[class]:not(.game-popup-body) #auth-screen.screen.active .auth-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(440px, calc(100% - 32px)) !important;
    max-width: min(440px, calc(100% - 32px)) !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    /* 다크 글래스 + 골드 액자 (기존 스타일 유지) */
    background: rgba(8, 24, 16, 0.85) !important;
    background-image: linear-gradient(180deg, rgba(15, 40, 26, 0.92) 0%, rgba(8, 20, 14, 0.85) 100%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 20px !important;
    padding: clamp(28px, 5vw, 48px) clamp(24px, 4vw, 40px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 80px rgba(212, 175, 55, 0.12) !important;
    animation: vipAuthIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes vipAuthIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 모바일 (좁은 화면) — 좌우 padding 보정 */
@media (max-width: 480px) {
    html body:not(.game-popup-body) #auth-screen.screen.active .auth-container {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 28px) !important;
    }
}

/* 짧은 화면 (가로 모바일 등) — 컨테이너 더 컴팩트 */
@media (max-height: 700px) {
    html body:not(.game-popup-body) #auth-screen.screen.active .auth-container {
        max-height: 95vh !important;
        max-height: 95dvh !important;
        padding: 20px !important;
    }
    html body:not(.game-popup-body) #auth-screen.screen.active .auth-container .logo {
        margin-bottom: 12px !important;
    }
    html body:not(.game-popup-body) #auth-screen.screen.active .auth-container .logo h1 {
        font-size: 22px !important;
    }
    html body:not(.game-popup-body) #auth-screen.screen.active .auth-container .logo p {
        font-size: 11px !important;
    }
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   LOBBY MODE CARD + BALANCE BADGE FIX (2026-05-11)                 ║
   ║   · .lm-tag (52장/54장+조커) — 라이트 → 다크 글래스 + 골드 텍스트     ║
   ║   · .lm-title (괴물/조커) — 다크 텍스트 → 형광 강조                   ║
   ║   · .lm-info (ⓘ) — 어두운 알파 → 골드                                ║
   ║   · 잔액 뱃지 — 사과↔금액 간격 확보 (padding-left 40 → 50)           ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 1. 모드 카드 자체 — 다크 글래스 강화 */
html body:not(.game-popup-body) .lobby-mode-card,
html body[class]:not(.game-popup-body) .lobby-mode-card {
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.40) !important;
}
html body:not(.game-popup-body) .lobby-mode-card:hover {
    border-color: rgba(212, 175, 55, 0.65) !important;
    background-image: linear-gradient(180deg, rgba(212, 175, 55, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 12px 32px rgba(212, 175, 55, 0.25) !important;
}

/* 2. 모드 타이틀 (괴물 / 조커) — 형광 강조 */
html body:not(.game-popup-body) .lobby-mode-card .lm-title,
html body[class]:not(.game-popup-body) .lobby-mode-card .lm-title {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}
html body:not(.game-popup-body) .lobby-mode-card.lobby-mode-monster .lm-title {
    color: #4ADE80 !important;                           /* 형광 녹색 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 16px rgba(74, 222, 128, 0.30) !important;
}
html body:not(.game-popup-body) .lobby-mode-card.lobby-mode-joker .lm-title {
    color: #C084FC !important;                           /* 형광 라벤더 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 16px rgba(192, 132, 252, 0.30) !important;
}

/* 3. 모드 태그 pill (52장 / 54장+조커) — 골드 톤 다크 글래스 */
html body:not(.game-popup-body) .lobby-mode-card .lm-tag,
html body[class]:not(.game-popup-body) .lobby-mode-card .lm-tag,
html body:not(.game-popup-body) .lobby-mode-card.lobby-mode-monster .lm-tag,
html body:not(.game-popup-body) .lobby-mode-card.lobby-mode-joker .lm-tag {
    color: #FAD02C !important;                           /* 밝은 골드 */
    background: rgba(212, 175, 55, 0.18) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 980px !important;
    padding: 5px 14px !important;
    margin-top: 12px !important;
    font-size: clamp(12px, 1.1vw, 14px) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.30) !important;
    letter-spacing: -0.01em !important;
}

/* 4. 정보 아이콘 (ⓘ) — 골드 톤 */
html body:not(.game-popup-body) .lobby-mode-card .lm-info,
html body[class]:not(.game-popup-body) .lobby-mode-card .lm-info {
    color: rgba(212, 175, 55, 0.55) !important;
    font-size: 16px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) .lobby-mode-card:hover .lm-info {
    color: #FAD02C !important;
}

/* 5. 모드 아이콘 (🐲/🃏) — drop shadow 강화 */
html body:not(.game-popup-body) .lobby-mode-card .lm-icon {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.50)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.10)) !important;
}

/* 6. 모드 선택 타이틀 (게임 모드 선택) */
html body:not(.game-popup-body) .mode-select-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* ─── 7. 잔액 뱃지 — 사과↔금액 간격 확보 ─── */
html body:not(.game-popup-body) .balance-badge,
html body:not(.game-popup-body) #user-balance,
html body:not(.game-popup-body) #user-points,
html body[class]:not(.game-popup-body) .balance-badge {
    /* padding-left 50px (사과 아이콘 우측에서 18px 여백) */
    padding: 8px 20px 8px 50px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
/* 사과 아이콘 위치 — 좌측 14px (이전 8px) + 미세 사이즈 보정 */
html body:not(.game-popup-body) .balance-badge::before,
html body[class]:not(.game-popup-body) .balance-badge::before {
    left: 14px !important;
    width: 20px !important;
    height: 20px !important;
    /* 골드 글로우 추가 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.50))
            drop-shadow(0 0 8px rgba(212, 175, 55, 0.20)) !important;
}

/* ─── 햄버거 메뉴 (☰) 가독성 — 다크 글래스 + 화이트 아이콘 ─── */
html body:not(.game-popup-body) .lobby-menu-toggle,
html body[class]:not(.game-popup-body) .lobby-menu-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.30),
        0 6px 16px rgba(0, 0, 0, 0.30) !important;
}
html body:not(.game-popup-body) .lobby-menu-toggle:hover,
html body[class]:not(.game-popup-body) .lobby-menu-toggle:hover {
    background-image: linear-gradient(180deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.05) 100%) !important;
    border-color: rgba(212, 175, 55, 0.65) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 12px rgba(212, 175, 55, 0.30) !important;
}

/* 햄버거 ::before 아이콘 — 화이트 (CSS mask 색상) */
html body:not(.game-popup-body) .lobby-menu-toggle::before,
html body[class]:not(.game-popup-body) .lobby-menu-toggle::before {
    background: #FFFFFF !important;
    width: 22px !important;
    height: 22px !important;
    /* 미세 골드 글로우 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}
html body:not(.game-popup-body) .lobby-menu-toggle:hover::before {
    background: #FAD02C !important;       /* hover 시 밝은 골드 */
}

/* 마이크 / 스피커 버튼도 동일 (다크 배경에서 안 보일 수 있음) */
html body:not(.game-popup-body) #lobby-mute-voice,
html body:not(.game-popup-body) #lobby-mute-sfx,
html body[class]:not(.game-popup-body) #lobby-mute-voice,
html body[class]:not(.game-popup-body) #lobby-mute-sfx {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.30) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) #lobby-mute-voice:hover,
html body:not(.game-popup-body) #lobby-mute-sfx:hover {
    background: rgba(212, 175, 55, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.65) !important;
}
/* 마이크/스피커 ::before 아이콘 — 화이트 */
html body:not(.game-popup-body) #lobby-mute-voice::before,
html body:not(.game-popup-body) #lobby-mute-sfx::before,
html body[class]:not(.game-popup-body) #lobby-mute-voice::before,
html body[class]:not(.game-popup-body) #lobby-mute-sfx::before {
    background: #FFFFFF !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}
/* muted 상태 — 빨강 */
html body:not(.game-popup-body) #lobby-mute-voice.muted::before,
html body:not(.game-popup-body) #lobby-mute-sfx.muted::before {
    background: #FF8B85 !important;
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   🍎 LOBBY BRAND — 사과 1.5x + HULA 골드 텍스트 + 클릭 → 방 목록      ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

html body:not(.game-popup-body) .lobby-brand,
html body[class]:not(.game-popup-body) .lobby-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;                                 /* 사과 ↔ HULA 간격 */
    cursor: pointer !important;
    margin: 0 !important;
    padding: 4px 12px 4px 4px !important;
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
}

/* 사과 아이콘 — 32px → 48px (1.5x), 그림자 강화 */
html body:not(.game-popup-body) .lobby-brand::before,
html body[class]:not(.game-popup-body) .lobby-brand::before {
    content: '' !important;
    display: inline-block !important;
    width: 48px !important;                               /* 32 → 48 (1.5x) */
    height: 48px !important;
    background: url('apple-logo.svg') center/contain no-repeat !important;
    filter:
        drop-shadow(0 2px 6px rgba(227, 0, 14, 0.40))
        drop-shadow(0 0 12px rgba(255, 59, 48, 0.20)) !important;     /* 빨강 글로우 */
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
}

/* HULA 텍스트 — 골드, 큰 글자, 강조 */
html body:not(.game-popup-body) .lobby-brand .brand-text,
html body[class]:not(.game-popup-body) .lobby-brand .brand-text {
    display: inline-block !important;
    color: #FAD02C !important;                            /* 밝은 샴페인 골드 */
    font-family: "Montserrat", "SF Pro Rounded", "Roboto",
                 -apple-system, system-ui, sans-serif !important;
    font-size: 28px !important;                           /* 큰 사이즈 */
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 0 16px rgba(250, 208, 44, 0.40),
        0 0 32px rgba(250, 208, 44, 0.20) !important;
    /* 골드 그라데이션 텍스트 (모던 브라우저) */
    background: linear-gradient(180deg, #FFE066 0%, #FAD02C 50%, #D4AF37 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    /* fallback (브라우저 미지원 시) */
}

/* Hover — 살짝 떠오르고 사과 회전 */
html body:not(.game-popup-body) .lobby-brand:hover,
html body[class]:not(.game-popup-body) .lobby-brand:hover {
    background: rgba(212, 175, 55, 0.10) !important;
    transform: translateY(-1px) !important;
}
html body:not(.game-popup-body) .lobby-brand:hover::before,
html body[class]:not(.game-popup-body) .lobby-brand:hover::before {
    transform: scale(1.08) rotate(-5deg) !important;
    filter:
        drop-shadow(0 4px 12px rgba(227, 0, 14, 0.55))
        drop-shadow(0 0 20px rgba(255, 59, 48, 0.35)) !important;
}

/* 클릭/액티브 시 — 살짝 눌림 */
html body:not(.game-popup-body) .lobby-brand:active,
html body[class]:not(.game-popup-body) .lobby-brand:active {
    transform: scale(0.97) !important;
}

/* 키보드 focus (tabindex) — 골드 ring */
html body:not(.game-popup-body) .lobby-brand:focus-visible,
html body[class]:not(.game-popup-body) .lobby-brand:focus-visible {
    outline: 2px solid #FAD02C !important;
    outline-offset: 4px !important;
}

/* 모바일 (좁은 화면) — 사과만 표시, HULA 텍스트 숨김 (선택적) */
@media (max-width: 480px) {
    html body:not(.game-popup-body) .lobby-brand::before {
        width: 40px !important;
        height: 40px !important;
    }
    html body:not(.game-popup-body) .lobby-brand .brand-text {
        font-size: 22px !important;
    }
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   🏛️ CREATE-ROOM MODAL VIP UPGRADE (2026-05-12)                    ║
   ║                                                                     ║
   ║   1. Modal — 다크 크리스탈 글래스 + 네온 골드 보더 + 강한 backdrop    ║
   ║   2. 타이틀 — 샴페인 골드 그라데이션 + bevel                          ║
   ║   3. Input — 다크 그레이 + 골드 보더 + 아이보리 글자                  ║
   ║   4. Mode 카드 — 루비 레드/다크 마호가니 + 샴페인 골드 타이틀         ║
   ║   5. Selectors — 투명 + active 골드 글로우                            ║
   ║   6. 만들기 버튼 — 유광 골드 메탈릭                                  ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* [1] Create-room modal overlay — backdrop 강화 */
html body:not(.game-popup-body) #create-room-modal:not(.hidden),
html body[class]:not(.game-popup-body) #create-room-modal:not(.hidden) {
    background: rgba(0, 0, 0, 0.78) !important;          /* 0.70 → 0.78 */
    backdrop-filter: blur(12px) saturate(160%) !important; /* 5 → 12 (강화) */
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

/* Modal content — 다크 크리스탈 글래스 + 네온 골드 액자 */
html body:not(.game-popup-body) #create-room-modal:not(.hidden) > .modal-content,
html body[class]:not(.game-popup-body) #create-room-modal:not(.hidden) > .modal-content {
    background: rgba(10, 47, 17, 0.85) !important;        /* #0A2F11 0.8 — 다크 그린 글래스 */
    background-image: linear-gradient(180deg,
        rgba(20, 60, 28, 0.92) 0%,
        rgba(8, 28, 14, 0.85) 100%) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1.5px solid rgba(250, 208, 44, 0.65) !important;   /* 네온 골드 보더 */
    border-radius: 20px !important;
    color: #F4EFD8 !important;                            /* 아이보리 기본 */
    padding: clamp(24px, 4vw, 36px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(250, 208, 44, 0.25),               /* 외곽 골드 halo */
        0 24px 64px rgba(0, 0, 0, 0.70),
        0 0 80px rgba(250, 208, 44, 0.20),                /* 네온 외부 글로우 */
        0 0 120px rgba(250, 208, 44, 0.10) !important;
}

/* [2] 타이틀 — 샴페인 골드 그라데이션 + bevel */
html body:not(.game-popup-body) #create-room-modal .modal-content h2,
html body:not(.game-popup-body) #create-room-modal .modal-content h3,
html body[class]:not(.game-popup-body) #create-room-modal .modal-content h2 {
    /* 골드 그라데이션 텍스트 */
    background: linear-gradient(180deg, #F1DDCF 0%, #FAD02C 50%, #C9A66B 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #FAD02C !important;                            /* fallback */
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    margin: 0 0 20px !important;
    /* Bevel 효과 — 다층 shadow */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20),                /* 상단 highlight */
        0 -1px 0 rgba(0, 0, 0, 0.50),                     /* 하단 shadow */
        0 2px 8px rgba(0, 0, 0, 0.85),
        0 0 20px rgba(250, 208, 44, 0.30) !important;
}

/* [3] Input (방 이름) — 다크 그레이 + 골드 보더 + 아이보리 글자 */
html body:not(.game-popup-body) #create-room-modal input[type="text"],
html body:not(.game-popup-body) #create-room-modal input[id="room-name"],
html body[class]:not(.game-popup-body) #create-room-modal input[type="text"] {
    background: rgba(0, 0, 0, 0.55) !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.65) 100%) !important;
    color: #F4EFD8 !important;                            /* 아이보리 */
    border: 1px solid rgba(212, 175, 55, 0.50) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.50),
        inset 0 0 0 1px rgba(212, 175, 55, 0.15) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html body:not(.game-popup-body) #create-room-modal input[type="text"]::placeholder {
    color: rgba(244, 239, 216, 0.45) !important;          /* 옅은 아이보리 */
    font-weight: 500 !important;
    text-shadow: none !important;
}
html body:not(.game-popup-body) #create-room-modal input[type="text"]:focus {
    border-color: #FAD02C !important;
    background: rgba(0, 0, 0, 0.65) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.50),
        0 0 0 3px rgba(250, 208, 44, 0.20),
        0 0 16px rgba(250, 208, 44, 0.25) !important;
    outline: none !important;
}

/* form-group 라벨 */
html body:not(.game-popup-body) #create-room-modal .form-group > label,
html body:not(.game-popup-body) #create-room-modal .form-group > p:not(.info-text):not(#min-balance-info) {
    color: #FAD02C !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 8px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
html body:not(.game-popup-body) #create-room-modal .form-group {
    margin-bottom: 18px !important;
}

/* [4] 게임 모드 카드 — 다크 마호가니 + 샴페인 골드 타이틀 */
html body:not(.game-popup-body) #create-room-modal .mode-card,
html body[class]:not(.game-popup-body) #create-room-modal .mode-card {
    background: linear-gradient(180deg, #3D1B0A 0%, #2A130A 100%) !important;  /* 다크 마호가니 */
    background-image: linear-gradient(180deg, #3D1B0A 0%, #2A130A 100%) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.40) !important;
    border-radius: 16px !important;
    padding: clamp(14px, 2vw, 20px) !important;
    color: #F4EFD8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 150, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.40),
        0 8px 20px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    text-align: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
html body:not(.game-popup-body) #create-room-modal .mode-card:hover {
    border-color: rgba(250, 208, 44, 0.70) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 150, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.45),
        0 12px 28px rgba(250, 208, 44, 0.25) !important;
}
html body:not(.game-popup-body) #create-room-modal .mode-card.active {
    background: linear-gradient(180deg, #4D1F0A 0%, #3A180A 100%) !important;
    background-image: linear-gradient(180deg, #4D1F0A 0%, #3A180A 100%) !important;
    border: 2px solid #FAD02C !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.20),
        inset 0 0 0 1px rgba(250, 208, 44, 0.25),
        0 0 24px rgba(250, 208, 44, 0.40),                /* 골드 글로우 */
        0 12px 32px rgba(0, 0, 0, 0.50) !important;
}

/* 모드 아이콘 — drop-shadow 강조 */
html body:not(.game-popup-body) #create-room-modal .mode-card .mode-icon {
    font-size: clamp(36px, 4vw, 48px) !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.50)) drop-shadow(0 0 12px rgba(250, 208, 44, 0.15)) !important;
}

/* 모드 타이틀 — 샴페인 골드 + bold */
html body:not(.game-popup-body) #create-room-modal .mode-card .mode-title {
    color: #FAD02C !important;
    font-size: clamp(20px, 2.4vw, 26px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    margin-top: 8px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(250, 208, 44, 0.30) !important;
    display: block !important;
}

/* 모드 설명 — 연한 베이지 */
html body:not(.game-popup-body) #create-room-modal .mode-card .mode-desc {
    color: #D4C8A8 !important;                            /* 연한 베이지 */
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    display: block !important;
}

/* btn-group (인원/베팅 선택 바) — 투명 베이스 */
html body:not(.game-popup-body) #create-room-modal .btn-group:not(.mode-cards) {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    display: flex !important;
    gap: 4px !important;
}

/* btn-option (2인/3인/4인/5인 / 400원/1000원 등) — 비활성 */
html body:not(.game-popup-body) #create-room-modal .btn-group:not(.mode-cards) .btn-option {
    background: transparent !important;
    color: rgba(244, 239, 216, 0.65) !important;
    border: 1px solid rgba(244, 239, 216, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex: 1 1 auto !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
html body:not(.game-popup-body) #create-room-modal .btn-group:not(.mode-cards) .btn-option:hover {
    background: rgba(212, 175, 55, 0.10) !important;
    color: #FAD02C !important;
    border-color: rgba(250, 208, 44, 0.40) !important;
}
/* active — 골드 빛남 */
html body:not(.game-popup-body) #create-room-modal .btn-group:not(.mode-cards) .btn-option.active {
    background: linear-gradient(180deg, #FAD02C 0%, #D4AF37 50%, #8E7424 100%) !important;
    color: #1A1A1C !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 8px rgba(250, 208, 44, 0.40),
        0 0 16px rgba(250, 208, 44, 0.30) !important;
}

/* [5] 최소 보유금 안내 — 샴페인 골드 bold 중앙 */
html body:not(.game-popup-body) #create-room-modal #min-balance-info,
html body:not(.game-popup-body) #create-room-modal .info-text,
html body[class]:not(.game-popup-body) #create-room-modal #min-balance-info {
    color: #FAD02C !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 16px 0 !important;
    padding: 10px 16px !important;
    background: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(212, 175, 55, 0.30) !important;
    border-radius: 10px !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(250, 208, 44, 0.25) !important;
    letter-spacing: -0.01em !important;
}

/* [6] modal-actions 액션 영역 */
html body:not(.game-popup-body) #create-room-modal .modal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.20) !important;
}

/* 취소 버튼 (.btn-secondary) — 다크 글래스 */
html body:not(.game-popup-body) #create-room-modal .btn-secondary {
    background: rgba(0, 0, 0, 0.45) !important;
    background-image: none !important;
    color: #F4EFD8 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.18s ease !important;
    min-width: 120px !important;
}
html body:not(.game-popup-body) #create-room-modal .btn-secondary:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: #FAD02C !important;
    color: #FAD02C !important;
}

/* 만들기 버튼 (.btn-primary) — 유광 골드 메탈릭 */
html body:not(.game-popup-body) #create-room-modal .btn-primary,
html body[class]:not(.game-popup-body) #create-room-modal .btn-primary {
    background: linear-gradient(180deg,
        #FFE066 0%,                                       /* 최상단 highlight */
        #FAD02C 30%,
        #D4AF37 70%,
        #8E7424 100%) !important;                         /* 하단 shadow */
    background-image: linear-gradient(180deg,
        #FFE066 0%, #FAD02C 30%, #D4AF37 70%, #8E7424 100%) !important;
    color: #1A1A1C !important;
    border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 12px !important;
    padding: 14px 36px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;  /* 양각 효과 */
    /* 유광 메탈릭 — 다층 box-shadow */
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),          /* 상단 highlight */
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),               /* 하단 shadow */
        inset 0 0 0 1px rgba(255, 220, 150, 0.30),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(250, 208, 44, 0.45),              /* 메인 글로우 */
        0 8px 20px rgba(212, 175, 55, 0.30),
        0 16px 32px rgba(250, 208, 44, 0.15) !important;  /* 외부 ambient */
    transition: all 0.18s ease !important;
    min-width: 140px !important;
    cursor: pointer !important;
    position: relative !important;
}
html body:not(.game-popup-body) #create-room-modal .btn-primary:hover {
    transform: translateY(-2px) !important;
    background-image: linear-gradient(180deg,
        #FFE680 0%, #FFE066 30%, #FAD02C 70%, #D4AF37 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 230, 160, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 8px 24px rgba(250, 208, 44, 0.65),
        0 16px 36px rgba(212, 175, 55, 0.40),
        0 24px 48px rgba(250, 208, 44, 0.20) !important;
}
html body:not(.game-popup-body) #create-room-modal .btn-primary:active {
    transform: scale(0.97) !important;
}

/* mode-cards 컨테이너 (가로 배치) */
html body:not(.game-popup-body) #create-room-modal .mode-cards,
html body[class]:not(.game-popup-body) #create-room-modal .mode-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
}

/* 모바일 — 모드 카드 세로 stack */
@media (max-width: 540px) {
    html body:not(.game-popup-body) #create-room-modal .mode-cards {
        flex-direction: column !important;
    }
    html body:not(.game-popup-body) #create-room-modal .modal-actions {
        flex-direction: column !important;
    }
    html body:not(.game-popup-body) #create-room-modal .modal-actions button {
        width: 100% !important;
    }
}

/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   📱 LOBBY MOBILE OVERHAUL (2026-05-13)                             ║
   ║   - 로비 모달 풀폭, 방 카드 그리드 단열, 입력 필드 44px              ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 600px) {
    /* 방 만들기 모달 — 풀폭 */
    html body #create-room-modal:not(.hidden) > .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        padding: 20px 16px !important;
    }

    /* 모드 카드 (괴물/조커) — 모바일 세로 스택 */
    html body:not(.game-popup-body) .mode-select-cards,
    html body:not(.game-popup-body) .lobby-mode-select .mode-select-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 방 목록 그리드 — 한 줄에 1개 또는 2개 (좁으면 1) */
    html body:not(.game-popup-body) #room-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 입력 필드 — 44px 터치 친화 */
    html body:not(.game-popup-body) input[type="text"],
    html body:not(.game-popup-body) input[type="number"],
    html body:not(.game-popup-body) input[type="password"],
    html body:not(.game-popup-body) select {
        min-height: 48px !important;
        font-size: 16px !important;  /* iOS auto-zoom 방지 (16px 이상) */
        padding: 12px 14px !important;
    }

    /* 폼 그룹 라벨 — 모바일에서 살짝 작게 (공간 절약) */
    html body:not(.game-popup-body) .form-group label {
        font-size: 14px !important;
    }

    /* 섹션 헤더 — 줄임 */
    html body:not(.game-popup-body) .section-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }
    html body:not(.game-popup-body) .section-header h2,
    html body:not(.game-popup-body) .section-header h3 {
        font-size: clamp(18px, 5vw, 22px) !important;
    }

    /* 섹션 padding — 좁은 화면 절약 */
    html body:not(.game-popup-body) #lobby-screen.screen.active > .section.active {
        padding: 12px 10px !important;
    }
}

@media (max-width: 380px) {
    /* 매우 좁은 화면 — HUD 잔액/포인트 텍스트 압축 */
    html body:not(.game-popup-body) .balance-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        max-width: 7rem !important;
    }
}