/* ─── 훌라 UI v3 - Dark Navy / Green Felt / Gold Accent ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══ 모바일 세로 모드 → 가로 회전 유도 (전체 페이지) ═══ */
#rotate-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0d1117; z-index: 99999;
    justify-content: center; align-items: center;
    flex-direction: column;
}
#rotate-overlay .rotate-inner { text-align: center; }
#rotate-overlay .rotate-icon { font-size: 60px; animation: rotatePhone 2s ease-in-out infinite; }
#rotate-overlay .rotate-arrow { font-size: 36px; color: #d4af37; margin: 8px 0; }
#rotate-overlay p { color: #fff; font-size: 18px; font-weight: 700; }
@keyframes rotatePhone { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
@media (max-width: 932px) and (orientation: portrait) {
    #rotate-overlay { display: flex !important; }
    #game-screen, #auth-screen, #lobby-screen, .screen { display: none !important; }
}
:root {
    /* 배경 — VIP 룸 */
    --bg: #08090c;
    --bg2: #111318;
    --bg3: #1a1c24;
    /* 테이블 펠트 */
    --table: #1a5c3a;
    --table2: #0d3820;
    --table-border: #8b7355;
    /* 강조 (골드) */
    --primary: #c9a84c;
    --primary-dark: #a68a3a;
    --accent: #d4af37;
    /* 상태 색상 */
    --danger: #e74c3c;
    --warning: #f39c12;
    --gold: #ffd700;
    --success: #27ae60;
    --green: #00e5a0;
    /* 텍스트 */
    --text: #e6e8eb;
    --text2: #7d8590;
    /* 카드 */
    --card-bg: #fff;
    --card-red: #d32f2f;
    --card-black: #1a1a2e;
    /* VIP 전용 */
    --vip-wood: #5a3a1a;
    --vip-wood-light: #8b6914;
    --vip-leather: #1a1410;
    --vip-rim: linear-gradient(180deg, #c9a84c, #8b6914, #5a3a1a, #8b6914, #c9a84c);
    /* 유틸 */
    --radius: 10px;
    --shadow: 0 4px 20px rgba(0,0,0,0.5);
    --glow: 0 0 20px rgba(212,175,55,0.25);
}
body {
    font-family: 'Segoe UI', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}
.hidden { display: none !important; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ─── 로그인 ─── */
#auth-screen {
    justify-content: center; align-items: center;
    background: radial-gradient(ellipse at center, #131a24 0%, #0d1117 70%);
}
.auth-container {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    padding: 40px; border-radius: 16px; width: 380px;
    box-shadow: var(--shadow), 0 0 40px rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.15);
}
.logo { text-align: center; margin-bottom: 30px; }
.logo h1 {
    font-size: 52px;
    background: linear-gradient(135deg, var(--gold), var(--primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 10px; font-weight: 900;
}
.logo p { color: var(--text2); margin-top: 8px; font-size: 14px; }
.tab-buttons { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 10px; border: 2px solid var(--bg3);
    background: transparent; color: var(--text2); border-radius: 8px;
    cursor: pointer; font-size: 14px; transition: all 0.2s;
}
.tab-btn.active { border-color: var(--accent); color: var(--gold); background: rgba(212,175,55,0.08); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
    padding: 12px 16px; background: var(--bg); border: 2px solid var(--bg3);
    border-radius: 8px; color: var(--text); font-size: 14px; outline: none;
}
.auth-form input:focus { border-color: var(--accent); }
.error-msg { color: var(--danger); text-align: center; margin-top: 10px; font-size: 13px; }

/* ─── 버튼 ─── */
.btn-primary {
    padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 14px; font-weight: 700; transition: all 0.2s;
    background: linear-gradient(135deg, var(--accent), #b8941f); color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(212,175,55,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,175,55,0.35); }
.btn-secondary {
    padding: 12px 24px; background: var(--bg3); color: var(--text);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; font-size: 14px;
}
.btn-danger {
    padding: 12px 24px; background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700;
}
.btn-sm {
    padding: 6px 14px; background: var(--bg3); color: var(--text);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer; font-size: 12px;
}
.btn-lg { padding: 16px 48px; font-size: 18px; }

/* ─── 상단 바 ─── */
/* ── 1단: 상단 바 ── */
.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(22,27,34,0.98), rgba(13,17,23,0.95));
    border-bottom: 1px solid rgba(212,175,55,0.12);
    flex-shrink: 0;
}
.top-bar h2 {
    font-size: 20px; letter-spacing: 4px;
    background: linear-gradient(135deg, var(--gold), var(--primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.top-right { display: flex; align-items: center; gap: 12px; }
#user-info { color: var(--text2); font-size: 13px; }
.balance-badge {
    background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
    color: var(--gold); padding: 4px 12px; border-radius: 20px;
    font-size: 13px; font-weight: 700; border: 1px solid rgba(212,175,55,0.2);
}
.lobby-menu-toggle { font-size: 20px !important; min-width: 36px; }
/* ── 햄버거 드롭다운 ── */
.lobby-menu-dropdown {
    position: absolute; top: 52px; right: 12px; z-index: 1000;
    background: rgba(18,22,30,0.98); border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px; padding: 8px; min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; gap: 4px;
}
.lobby-menu-dropdown.hidden { display: none; }
.lobby-menu-dropdown select {
    padding: 10px 12px; background: var(--bg2); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: var(--text); font-size: 14px; cursor: pointer; width: 100%;
}
.lobby-menu-item {
    display: block; padding: 12px 14px; background: none; border: none;
    border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left; text-decoration: none; width: 100%;
}
.lobby-menu-item:hover { background: rgba(212,175,55,0.1); color: var(--gold); }
/* ── 2단: 탭 네비게이션 ── */
.lobby-tabs {
    display: flex; flex-shrink: 0;
    background: rgba(13,17,23,0.95);
    border-bottom: 1px solid rgba(212,175,55,0.08);
}
.lobby-tabs .nav-btn {
    flex: 1; padding: 14px 8px; background: transparent; color: var(--text2);
    border: none; border-bottom: 3px solid transparent; cursor: pointer;
    font-size: 14px; font-weight: 700; transition: all 0.2s;
    text-align: center; touch-action: manipulation;
}
.lobby-tabs .nav-btn.active {
    color: var(--gold); border-bottom-color: var(--gold);
    background: rgba(212,175,55,0.06);
}
.lobby-tabs .nav-btn:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.03); }
.admin-only { display: none; }

/* ─── 섹션 ─── */
.section { display: none; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
.section.active { display: block; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-header h3 { font-size: 20px; }

/* ─── 방 목록 ─── */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.room-card {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border-radius: var(--radius); padding: 20px; cursor: pointer;
    transition: all 0.3s; border: 1px solid rgba(212,175,55,0.08);
}
.room-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--glow); }
.room-card h4 { font-size: 16px; margin-bottom: 8px; }
.room-card .room-meta { display: flex; justify-content: space-between; color: var(--text2); font-size: 13px; margin-bottom: 8px; }
.room-card .room-players-bar { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.room-card .room-players-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); border-radius: 2px; }
.room-card .room-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.room-tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tag-waiting { background: rgba(39,174,96,0.15); color: var(--success); }
.tag-playing { background: rgba(231,76,60,0.15); color: var(--danger); }
.tag-multiplier { background: rgba(255,215,0,0.12); color: var(--gold); }
.empty-state { text-align: center; color: var(--text2); padding: 60px; font-size: 15px; }

/* ─── 모달 ─── */
.modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); display: flex; justify-content: center;
    align-items: center; z-index: 100; backdrop-filter: blur(4px);
}
.modal-content {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    padding: 30px; border-radius: 16px; min-width: 360px; max-width: 480px;
    border: 1px solid rgba(212,175,55,0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-content h3 { margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; color: var(--text2); font-size: 13px; margin-bottom: 6px; }
.form-group input {
    width: 100%; padding: 10px 14px; background: var(--bg); border: 2px solid var(--bg3);
    border-radius: 8px; color: var(--text); font-size: 14px; outline: none;
}
.form-group input:focus { border-color: var(--accent); }
.btn-group { display: flex; gap: 8px; }
.btn-option {
    padding: 8px 16px; background: var(--bg); border: 2px solid var(--bg3);
    color: var(--text2); border-radius: 8px; cursor: pointer; font-size: 13px;
}
.btn-option.active { border-color: var(--accent); color: var(--gold); background: rgba(212,175,55,0.08); }
.info-text { color: var(--text2); font-size: 13px; }
.info-msg { color: var(--success); text-align: center; margin-top: 12px; font-size: 13px; }

/* ─── 랭킹 테이블 ─── */
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th {
    text-align: left; padding: 12px 16px; background: var(--bg2);
    color: var(--text2); font-size: 13px; border-bottom: 2px solid var(--bg3);
}
.ranking-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; }
.ranking-table tr:hover { background: rgba(212,175,55,0.04); }
.rank-1 { color: var(--gold); font-weight: 700; }
.rank-2 { color: #c0c0c0; font-weight: 700; }
.rank-3 { color: #cd7f32; font-weight: 700; }

/* ─── 지갑 ─── */
.wallet-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wallet-card {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border-radius: var(--radius); padding: 24px;
    border: 1px solid rgba(212,175,55,0.08);
}
.wallet-card h3 { font-size: 14px; color: var(--text2); margin-bottom: 12px; }
.wallet-amount { font-size: 32px; color: var(--gold); font-weight: 700; }
.wallet-card input {
    width: 100%; padding: 10px; background: var(--bg); border: 2px solid var(--bg3);
    border-radius: 8px; color: var(--text); font-size: 14px; outline: none; margin-bottom: 6px;
}
/* 숫자 스피너(상하 화살표) 숨김 — 크롬/사파리/파이어폭스 */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; appearance: textfield; }
/* 금액 입력 우측 정렬 + MAX 버튼 붙이기 */
.convert-amount-row {
    display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px;
}
.convert-amount-row input#convert-amount {
    flex: 1; text-align: right; font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px; margin-bottom: 0;
}
.convert-amount-row .btn-max {
    flex: 0 0 auto; padding: 0 14px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #b8941f);
    color: #1a1a1a; font-weight: 800; font-size: 13px;
    border: none; cursor: pointer; white-space: nowrap;
}
.convert-amount-row .btn-max:hover { filter: brightness(1.1); }
.convert-amount-row .btn-max:active { transform: translateY(1px); }

/* ─── 관리자 ─── */
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.admin-card {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border-radius: var(--radius); padding: 20px; text-align: center;
    border: 1px solid rgba(212,175,55,0.08);
}
.admin-card h4 { font-size: 13px; color: var(--text2); margin-bottom: 8px; }
.stat-num { font-size: 28px; font-weight: 700; color: var(--gold); }

/* ─── 방 대기실 ─── */
.room-content {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 40px;
    background: radial-gradient(ellipse at center, #131a24 0%, var(--bg) 70%);
}
.players-circle { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.player-seat {
    width: 140px; min-height: 160px;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border-radius: 16px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 12px;
    border: 2px solid rgba(212,175,55,0.1); transition: all 0.3s;
}
.player-seat.occupied { border-color: var(--accent); box-shadow: 0 0 15px rgba(212,175,55,0.15); }
.player-seat .seat-num { color: var(--text2); font-size: 11px; margin-bottom: 6px; }
.player-seat .seat-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.player-seat .seat-empty { color: var(--text2); font-size: 28px; }
.multiplier-badge {
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05));
    color: var(--gold); padding: 4px 10px; border-radius: 6px;
    font-weight: 700; font-size: 13px; border: 1px solid rgba(255,215,0,0.25);
}

/* ═══════════════════════════════════════════════════════════
   게임 화면 — VIP 카지노 룸 (Clean Rewrite)
   구조: .game-layout > .vip-room-bg + .game-hud + .table-viewport + .my-area
   ═══════════════════════════════════════════════════════════ */

/* ── VIP 룸 배경 ── */
.vip-room-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* 실제 이미지가 있으면 이미지 사용, 없으면 CSS 야경 */
    background:
        url('/img/vip-room-bg.jpg') center/cover no-repeat,
        /* 폴백: 라스베가스 야경 시뮬레이션 */
        radial-gradient(ellipse 12% 35% at 8% 20%, rgba(60,90,160,0.25) 0%, transparent 100%),
        radial-gradient(circle 2px at 5% 15%, rgba(255,220,100,0.7) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 7% 22%, rgba(255,150,50,0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 3% 18%, rgba(200,100,255,0.4) 0%, transparent 100%),
        radial-gradient(ellipse 12% 35% at 92% 20%, rgba(60,90,160,0.20) 0%, transparent 100%),
        radial-gradient(circle 2px at 95% 16%, rgba(255,200,80,0.6) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 93% 24%, rgba(100,200,255,0.4) 0%, transparent 100%),
        radial-gradient(circle 1px at 97% 19%, rgba(255,100,100,0.3) 0%, transparent 100%),
        radial-gradient(ellipse 25% 18% at 50% 10%, rgba(40,60,120,0.15) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 48% 8%, rgba(255,230,100,0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 52% 6%, rgba(200,220,255,0.4) 0%, transparent 100%),
        linear-gradient(180deg, #0a0c14 0%, #0e1018 40%, #080a0e 100%);
}
/* 비네팅 오버레이 */
.vip-room-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 20%, rgba(0,0,0,0.75) 100%);
}

/* ── 스케일링 컨테이너 ── */
#game-screen {
    display: flex; align-items: center; justify-content: center;
    width: 100vw; height: 100vh; height: 100dvh;
    background: #040506; overflow: hidden;
}
.game-scaler {
    width: 1600px; height: 900px;
    transform-origin: center center;
    position: relative;
}

/* ── 로딩 화면 ── */
.game-loading {
    position: absolute; inset: 0; z-index: 9999;
    background: #080a0e;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
}
.game-loading .loading-text {
    font-size: 20px; color: var(--gold); font-weight: 700; letter-spacing: 2px;
}
.game-loading .loading-spinner {
    width: 40px; height: 40px; border: 3px solid rgba(201,168,76,0.2);
    border-top-color: var(--gold); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 전체 레이아웃 (고정 1600x900) ── */
.game-layout {
    display: flex; flex-direction: column;
    width: 1600px; height: 900px;
    background: #080a0e; overflow: hidden; position: relative;
}

/* ── HUD 상단 ── */
.game-hud {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 6px 8px; flex-shrink: 0; z-index: 10;
    background: linear-gradient(180deg, rgba(5,5,8,0.9), transparent);
}
.hud-right { display: flex; gap: 12px; align-items: center; margin-right: 30px; }

/* ── 테이블 뷰포트 ── */
.table-viewport {
    flex: 1; display: flex; justify-content: center; align-items: center;
    position: relative; min-height: 0; z-index: 1;
}

/* ── 타원 테이블 ── */
.oval-table {
    position: absolute; top: 0; bottom: 0; left: 130px; right: 130px;
}
/* 우드 외곽 림 */
.oval-table::after {
    content: ''; position: absolute;
    top: 1%; left: 0; right: 0; bottom: 1%;
    border-radius: 50%; pointer-events: none; z-index: 1;
    border: 6px solid transparent;
    background:
        linear-gradient(145deg, #3a2510, #6b4a1e 30%, #8b6914 50%, #6b4a1e 70%, #3a2510) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    box-shadow:
        0 0 0 2px rgba(201,168,76,0.5),
        0 8px 40px rgba(0,0,0,0.8),
        inset 0 0 0 2px rgba(201,168,76,0.3);
}
/* 그린 펠트 */
.oval-table::before {
    content: ''; position: absolute;
    top: 3%; left: 1.5%; right: 1.5%; bottom: 3%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 60% 50% at 45% 35%, rgba(80,160,100,0.18) 0%, transparent 60%),
        radial-gradient(ellipse, #1a6b42 0%, #155a30 20%, #104a25 40%, #0c3a1c 65%, #082a14 85%, transparent 100%);
    box-shadow:
        inset 0 0 80px rgba(8,30,18,0.8),
        inset 0 0 0 2px rgba(201,168,76,0.3);
}

/* ── 좌석 컨테이너: table-viewport와 동일 크기, 좌석의 positioning context ── */
#seats-container {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; /* 테이블 클릭 통과 */
}
#seats-container > .seat-slot { pointer-events: auto; }

/* ── 4좌석: seats-container 기준 고정 위치 ── */
.seat-slot {
    position: absolute; z-index: 10;
    width: 180px;
    padding: 6px; overflow: hidden;
    background: rgba(8,10,14,0.85);
    border: 1px solid rgba(201,168,76,0.1);
}
.seat-1 { top: 0;    left: 0;  height: 50%; }
.seat-0 { bottom: 0; left: 0;  height: 50%; }
.seat-2 { top: 0;    right: 0; height: 50%; }
.seat-3 { bottom: 0; right: 0; height: 50%; }

.waiting-badge { opacity: 0.8; }
.waiting-badge .pb-avatar { border-color: var(--gold) !important; }
.empty-seat { opacity: 0.3; }
.empty-seat .pb-avatar { border-style: dashed !important; }

/* ── 좌석 경계선 턴 표시 ── */
.seat-slot.seat-turn {
    border: 2px solid var(--success);
    box-shadow: inset 0 0 15px rgba(39,174,96,0.15), 0 0 12px rgba(39,174,96,0.3);
}
.seat-slot.seat-thankyou-check {
    border: 2px solid var(--warning);
    box-shadow: inset 0 0 15px rgba(243,156,18,0.15), 0 0 12px rgba(243,156,18,0.3);
}
/* 내 차례: 하단 골드 라인 */
.my-area.my-turn-active {
    border-top: 3px solid var(--success);
    box-shadow: inset 0 2px 15px rgba(39,174,96,0.15);
}
.my-area.my-thankyou-check {
    border-top: 3px solid var(--warning);
    box-shadow: inset 0 2px 15px rgba(243,156,18,0.15);
}

/* ── 플레이어 뱃지 ── */
.player-badge {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    width: 100%; height: 100%; justify-content: flex-start;
}
.player-badge .pb-cards { display: flex; gap: 0; justify-content: center; flex-shrink: 0; }
.player-badge .pb-bottom { display: flex; align-items: center; gap: 6px; flex: 1; }
.player-badge .pb-profile { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.player-badge .pb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #1a1e2a, #12151e);
    border: 2.5px solid rgba(201,168,76,0.4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6); overflow: hidden;
}
.player-badge .pb-initial { font-size: 13px; font-weight: 800; color: var(--text); text-transform: uppercase; }
.player-badge .pb-detail { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.player-badge .pb-name {
    display: inline-block; padding: 3px 10px; border-radius: 4px;
    font-size: 14px; font-weight: 800; color: #fff;
    background: rgba(15,17,22,0.9); border: 1px solid rgba(201,168,76,0.25);
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-badge .pb-chips { font-size: 16px; color: var(--gold); font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.player-badge .pb-balance { font-size: 13px; color: var(--gold); }
.player-badge .pb-info { font-size: 14px; font-weight: 700; }
.player-badge .pb-status { font-size: 14px; font-weight: 800; margin-top: 2px; letter-spacing: 0.5px; }
.player-badge .pb-gold { font-size: 14px; text-align: center; animation: goldPulse 2s ease-in-out infinite; }
@keyframes goldPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 턴/상태 표시 */
.player-badge.is-disconnected .pb-avatar { opacity: 0.4; border-color: rgba(231,76,60,0.5); }
.player-badge.is-disconnected .pb-name { opacity: 0.5; }
.player-badge.is-active .pb-avatar {
    border-color: var(--success); box-shadow: 0 0 18px rgba(39,174,96,0.6);
    animation: avatarGlow 1.5s ease-in-out infinite;
}
.player-badge.is-active .pb-name { background: #0d3520; border-color: var(--success); }
.player-badge.is-thankyou .pb-avatar {
    border-color: var(--warning); box-shadow: 0 0 18px rgba(243,156,18,0.6);
    animation: avatarGlowY 1.5s ease-in-out infinite;
}
.player-badge.is-thankyou .pb-name { background: #3a2f08; border-color: var(--warning); }
@keyframes avatarGlow { 0%,100% { box-shadow: 0 0 12px rgba(39,174,96,0.4); } 50% { box-shadow: 0 0 28px rgba(39,174,96,0.8); } }
@keyframes avatarGlowY { 0%,100% { box-shadow: 0 0 12px rgba(243,156,18,0.4); } 50% { box-shadow: 0 0 28px rgba(243,156,18,0.8); } }

/* ── 미니카드 (상대 손패) ── */
.mini-card {
    width: 48px; height: 68px;
    background: linear-gradient(145deg, #c62828, #8b0000 50%, #6d0000);
    border-radius: 6px; border: 1.5px solid rgba(255,180,180,0.3);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5); margin-left: -28px; position: relative;
}
.mini-card:first-child { margin-left: 0; }
.mini-card::after {
    content: ''; position: absolute; inset: 3px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 2px;
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.06) 3px, rgba(255,255,255,0.06) 6px),
                repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.04) 6px);
}

/* ── 중앙 데크 구역: 덱(위) → 타이머(중) → 버린더미(아래) ── */
/* SSOT: --center-stack-w, --center-half 는 apple-game.css 의 단일 SSOT 블록에서 관리 (2026-05-16 REFACTOR).
   이전 :root { --center-stack-w: 140px; --center-half: 75px; } 는 apple.css 170/90, apple-game 70/25,
   apple-game SSOT 38 등 4-tier 충돌 발생 → 삭제. */
.center-stack {
    position: absolute; z-index: 6;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: var(--center-stack-w);
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 16px;
}
.center-timer-wrap { text-align: center; position: relative; }
.timer-circle {
    width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
}
.timer-number { font-size: 28px; font-weight: 900; color: var(--green); }
.timer-turn-name {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85);
    white-space: nowrap; margin-top: 4px;
    background: rgba(0,0,0,0.5); padding: 2px 10px; border-radius: 10px;
    letter-spacing: 0.5px;
}
.discard-wrap { position: relative; }
.card-back {
    width: 64px; height: 90px;
    background: linear-gradient(145deg, #c62828, #8b0000 40%, #6d0000 70%, #8b0000);
    border-radius: 8px; border: 1.5px solid rgba(255,180,180,0.35);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; font-size: 14px; color: rgba(255,255,255,0.8); font-weight: 700;
    transition: all 0.2s; position: relative;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
.card-back::after {
    content: ''; position: absolute; inset: 4px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 8px),
                repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 8px);
}
.card-back:hover { transform: scale(1.06); box-shadow: 0 0 18px rgba(255,100,100,0.4); }
.discard-pile {
    width: 64px; height: 90px; background: rgba(139,115,85,0.06);
    border-radius: 8px; border: 2px dashed rgba(139,115,85,0.2);
    display: flex; justify-content: center; align-items: center;
    cursor: default; font-size: 14px; font-weight: 700;
}
.discard-pile.has-card {
    background: linear-gradient(170deg, #fff, #f8f8f4 50%, #f0f0ea);
    border: 1.5px solid rgba(0,0,0,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); border-radius: 7px; overflow: hidden;
}
.discard-card-content {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    font-weight: 900; line-height: 1; padding: 4px 0 0 5px; width: 100%; height: 100%;
}
.dc-rank { font-size: 28px; }
.dc-suit { font-size: 22px; margin-top: 1px; }
.discard-label {
    font-size: 9px; color: var(--text2); text-align: center;
    position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
}

/* ── 테이블 펠트 (멜드 영역) ──
   left/right 는 apple-game.css SSOT 의 calc(seat + edge) 가 관리 (2026-05-16 REFACTOR).
   이전 left:70 right:70 하드코드 + 미디어쿼리 60/50/40 충돌 → 삭제. */
.table-felt {
    position: absolute; top: 0%; bottom: 12%;
    z-index: 2; overflow: hidden;
    border: none; border-radius: 12px;
}
/*
  meld 카드 치수는 한 곳(--meld-w/h)에서만 관리. 2026-04-18 v4 최대크기 + 가독 overlap:
  · 기본 카드 크기 70×98 (v3 의 56×78 대비 +25%) — 가독성 최대 확보
  · 가로 overlap: advance = 0.45 * w (45% 노출, 55% 겹침) — rank/suit/일부 정보 확인 가능
  · 세로 overlap (우측 트리플): advance = 0.65 * h (65% 노출, 35% 겹침) — rank+suit 모두 보임
  · 좌측 Row 간: 세로 겹침 없음 (+6px gap) — 서로 다른 스트레이트 그룹 완전 분리
  · 52장 전부 등록되는 최악 케이스에는 JS adjustMeldScale() 이 --meld-scale 을 5단(10%씩) 축소
    → 자동으로 Safe Zone 안에 Clamp
*/
.table-melds {
    display: flex; width: 100%; height: 100%; overflow: hidden;
    gap: 8px; align-items: stretch; justify-content: space-between;
    --meld-scale: 1;
    --meld-w-base: 70px; --meld-h-base: 98px;
    --meld-ox-ratio: 0.40;   /* 2026-05-22 v3: 40% 노출/60% 겹침 — 큰 좌상단 숫자("10")가 노출폭에 들어오게 살짝 완화 */
    --meld-oy-ratio: 0.46;   /* 세로 트리플 밀집 */
    --meld-w: calc(var(--meld-w-base) * var(--meld-scale));
    --meld-h: calc(var(--meld-h-base) * var(--meld-scale));
}
/* 좌/우 영역은 중앙 stack 침범 금지: max-width = 반폭 - (중앙 반폭 + 여유 10px). */
.meld-zone-left {
    flex: 1 1 auto; min-width: 0;
    max-width: calc(50% - var(--center-half) - 10px);
    display: flex; flex-direction: column; padding: 2px 2px 2px 0;
    overflow: hidden; align-items: flex-start; justify-content: center;
}
.meld-grid {
    display: flex; flex-direction: column; width: 100%;
    gap: 6px;                    /* 서로 다른 스트레이트 묶음은 겹치지 않고 세로 간격 유지 */
    justify-content: center; align-items: flex-start;
}
/* 행 간 세로 겹침 완전 제거. 각 row 는 독립 높이 h 를 차지 */
.meld-grid-row { display: flex; gap: 0; position: relative; flex-shrink: 0; height: var(--meld-h); }
/* 각 셀 폭 = 카드 폭. 다음 셀 시작 위치 = 이전 카드의 --meld-ox-ratio(30%) 지점.
   → margin-left = -(w - ox) = -w*(1 - ratio) */
.meld-grid-cell {
    width: var(--meld-w); flex-shrink: 0;
    margin-left: calc(-1 * var(--meld-w) * (1 - var(--meld-ox-ratio)));
    position: relative; overflow: visible;
}
.meld-grid-cell:first-child { margin-left: 0; }
.meld-grid-cell.filled { cursor: pointer; }
.meld-grid-cell.filled .meld-card { width: var(--meld-w); height: var(--meld-h); border-radius: 6px; }
.meld-grid-cell.empty {
    width: var(--meld-w);
    margin-left: calc(-1 * var(--meld-w) * (1 - var(--meld-ox-ratio)));
}
.meld-grid-cell.empty:first-child { margin-left: 0; }
/* 블록 경계 spacer: 같은 suit 내 비연속 run/단독 사이 10px 간격.
   다음 cell 은 음수 margin 리셋(새 블록 첫 카드는 완전한 폭 노출). */
.meld-block-spacer { width: 10px; flex-shrink: 0; height: var(--meld-h); pointer-events: none; }
.meld-block-spacer + .meld-grid-cell { margin-left: 0; }
.meld-grid-cell.meld-selected .meld-card { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,0.4); }
/* 각 행 안에서 뒤 카드가 앞 카드를 덮도록 */
.meld-grid-cell:nth-child(1) { z-index: 1; } .meld-grid-cell:nth-child(2) { z-index: 2; }
.meld-grid-cell:nth-child(3) { z-index: 3; } .meld-grid-cell:nth-child(4) { z-index: 4; }
.meld-grid-cell:nth-child(5) { z-index: 5; } .meld-grid-cell:nth-child(6) { z-index: 6; }
.meld-grid-cell:nth-child(7) { z-index: 7; } .meld-grid-cell:nth-child(8) { z-index: 8; }
.meld-grid-cell:nth-child(9) { z-index: 9; } .meld-grid-cell:nth-child(10) { z-index: 10; }
.meld-grid-cell:nth-child(11) { z-index: 11; } .meld-grid-cell:nth-child(12) { z-index: 12; }
.meld-grid-cell:nth-child(13) { z-index: 13; }
.meld-zone-right {
    flex: 0 1 auto;
    max-width: calc(50% - var(--center-half) - 10px);
    display: flex; flex-direction: row; gap: 3px; align-items: flex-start;
    flex-wrap: wrap;                /* 세트가 많으면 Row 2, 3 으로 줄바꿈 */
    align-content: center; justify-content: flex-end;
    padding: 4px 0 4px 4px; overflow: hidden;
}
.meld-group {
    padding: 1px; background: rgba(255,255,255,0.02);
    border-radius: 4px; border: 1px solid rgba(139,115,85,0.12);
    transition: transform 0.2s, opacity 0.3s, border-color 0.15s;
    cursor: pointer; flex: 0 0 auto;
}
.meld-group:hover { border-color: var(--accent); box-shadow: 0 0 8px rgba(212,175,55,0.25); }
.meld-group.meld-new { animation: meldAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes meldAppear { 0% { transform: scale(0.5) translateY(15px); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.meld-cards-h { display: flex; }
.meld-cards-h .meld-card { margin-left: calc(-1 * var(--meld-w) * (1 - var(--meld-ox-ratio))); position: relative; }
.meld-cards-h .meld-card:first-child { margin-left: 0; }
/* 세로 스택: 다음 카드는 이전의 --meld-oy-ratio(20%) 지점부터
   → margin-top = -(h - oy) = -h*(1 - ratio) */
.meld-cards-v { display: flex; flex-direction: column; }
.meld-cards-v .meld-card { margin-top: calc(-1 * var(--meld-h) * (1 - var(--meld-oy-ratio))); position: relative; box-shadow: 2px 2px 6px rgba(0,0,0,0.4); }
.meld-cards-v .meld-card:first-child { margin-top: 0; }
/* z-index stacking */
.meld-cards-h .meld-card:nth-child(1), .meld-cards-v .meld-card:nth-child(1) { z-index: 1; }
.meld-cards-h .meld-card:nth-child(2), .meld-cards-v .meld-card:nth-child(2) { z-index: 2; }
.meld-cards-h .meld-card:nth-child(3), .meld-cards-v .meld-card:nth-child(3) { z-index: 3; }
.meld-cards-h .meld-card:nth-child(4), .meld-cards-v .meld-card:nth-child(4) { z-index: 4; }
.meld-cards-h .meld-card:nth-child(5), .meld-cards-v .meld-card:nth-child(5) { z-index: 5; }
.meld-cards-h .meld-card:nth-child(6), .meld-cards-v .meld-card:nth-child(6) { z-index: 6; }
.meld-cards-h .meld-card:nth-child(7), .meld-cards-v .meld-card:nth-child(7) { z-index: 7; }
.meld-cards-h .meld-card:nth-child(8), .meld-cards-v .meld-card:nth-child(8) { z-index: 8; }
.meld-cards-h .meld-card:nth-child(9), .meld-cards-v .meld-card:nth-child(9) { z-index: 9; }
.meld-cards-h .meld-card:nth-child(10), .meld-cards-v .meld-card:nth-child(10) { z-index: 10; }
.meld-card {
    width: var(--meld-w); height: var(--meld-h); border-radius: 6px; border: 1.2px solid rgba(0,0,0,0.12);
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 4px 0 0 5px; font-weight: 900;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    background: linear-gradient(170deg, #fff, #f8f8f4 50%, #f0f0ea);
}
/* 폰트 비율: 카드 폭 70px 기준 rank ≈ 49%, suit ≈ 34% (손패와 동일 비율).
   --meld-scale 과 연동해 자동 축소. */
.meld-card .mc-rank { font-size: calc(34px * var(--meld-scale, 1)); line-height: 1; }
.meld-card .mc-suit { font-size: calc(24px * var(--meld-scale, 1)); line-height: 1; margin-top: 1px; }

/* ── 상태바 ── */
.game-status-bar {
    position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); z-index: 8;
    display: flex; gap: 12px; align-items: center;
    background: rgba(10,12,16,0.9); padding: 6px 20px; border-radius: 20px; font-size: 13px;
    border: 1px solid rgba(201,168,76,0.25); white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
#turn-info { font-weight: 700; }

/* ── 하단: 내 영역 ── */
.my-area {
    background: rgba(8,10,14,0.97); padding: 8px 0 10px; flex-shrink: 0;
    border-top: 2px solid rgba(201,168,76,0.25);
    display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.my-info-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 10px 18px; min-width: 150px;
    background: rgba(10,12,16,0.95); border: 1.5px solid rgba(201,168,76,0.2); border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5); flex-shrink: 0;
    margin-left: 120px;
}
#my-nick { font-size: 14px !important; }
#my-info-balance { font-size: 13px !important; }
.my-cards-section { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.my-hand { display: flex; justify-content: center; gap: 0; flex-wrap: nowrap; }
.my-score-badge {
    background: rgba(201,168,76,0.08); padding: 6px 16px; border-radius: 8px;
    font-size: 13px; color: var(--text2); border: 1px solid rgba(201,168,76,0.1); white-space: nowrap;
}
.my-controls {
    display: flex; justify-content: center; align-items: center;
    position: relative; flex-shrink: 0;
    margin-right: 30px;
}
.ctrl-btn {
    padding: 6px 14px; font-size: 11px; background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.15); color: var(--text2); border-radius: 6px; cursor: pointer;
}
.ctrl-btn:hover { background: rgba(201,168,76,0.12); color: var(--gold); }

/* ── 손패 카드 ── */
.hand-card {
    width: 82px; height: 115px;
    background: linear-gradient(170deg, #fff, #f8f8f4 50%, #f0f0ea);
    border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12); cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 6px 0 0 8px; transition: all 0.15s; user-select: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4); position: relative; margin-left: -12px;
}
.hand-card:first-child { margin-left: 0; }
.hand-card:hover { transform: translateY(-14px) scale(1.05); box-shadow: 0 14px 35px rgba(0,0,0,0.5); border-color: rgba(201,168,76,0.5); z-index: 10; }
.hand-card.selected { transform: translateY(-16px) scale(1.07); border-color: var(--gold); box-shadow: 0 12px 30px rgba(212,175,55,0.4); }
.hand-card .card-label { font-size: 40px; font-weight: 900; line-height: 1; }
.hand-card .card-suit-icon { font-size: 30px; line-height: 1; margin-top: 2px; }
/* ── 카드 힌트 삼각형 ── */
.card-hint-arrow {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    font-size: 28px; font-weight: 900; line-height: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    pointer-events: none; z-index: 5;
    animation: hintBounce 1.5s ease-in-out infinite;
}
.hint-register { color: #4CAF50; }
.hint-layoff { color: #2196F3; }
.hint-both { color: #FFD700; }
@keyframes hintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

.card-red { color: #c62828; }
.card-black { color: #1a1a2e; }
.card-club { color: #1b5e20; }
.card-diamond { color: #e65100; }

/* ── 조커 카드 ── */
.card-joker {
    color: #FFD700 !important;
    background: linear-gradient(135deg, #1a1a2e, #2a1f0a 50%, #1a1a2e) !important;
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 24px rgba(255,165,0,0.3);
    animation: jokerPulse 2s ease-in-out infinite;
    align-items: center !important; justify-content: center !important; padding: 0 !important;
}
.card-joker .card-art-joker { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card-joker.selected { box-shadow: 0 0 16px rgba(255,215,0,0.8), 0 0 32px rgba(255,165,0,0.5); transform: translateY(-14px); }
@keyframes jokerPulse {
    0%,100% { box-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 24px rgba(255,165,0,0.3); }
    50% { box-shadow: 0 0 18px rgba(255,215,0,0.8), 0 0 36px rgba(255,165,0,0.5); }
}
.card-joker-glow { text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500; }
.meld-card.meld-card-joker { background: linear-gradient(135deg, #2a1f0a, #3a2a0a) !important; border-color: #FFD700 !important; box-shadow: 0 0 8px rgba(255,215,0,0.4); }
.meld-card.meld-card-joker .mc-rank { color: #FFD700 !important; font-weight: 900; }
.meld-card.meld-card-joker .mc-suit { color: #FFD700 !important; }

/* 반응형 카드 사이즈/--center-stack-w/--center-half/.table-felt 위치는
   apple-game.css 의 단일 SSOT (4-tier @media: 1599/1199/899) 가 관리.
   이전 1200/932/600 미디어쿼리 3블록은 apple-game.css 와 1px 경계 충돌 발생 → 삭제. */

/* ── 페이스 카드 ── */
.card-face .card-face-art { position: absolute; bottom: 0; right: 0; width: 50px; height: 68px; pointer-events: none; }
.card-face .card-label { font-weight: 900; font-size: 40px; }

/* ── 버튼 ── (width/height 는 apple-game.css 의 clamp + 반응형이 SSOT) */
.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-btn {
    background: linear-gradient(180deg, rgba(18,20,28,0.95), rgba(10,12,18,0.98));
    color: #fff; border: 2px solid rgba(201,168,76,0.25); border-radius: 12px; cursor: pointer;
    font-size: 22px; font-weight: 800; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.action-btn:hover { background: rgba(201,168,76,0.12); border-color: var(--accent); color: var(--gold); }
.action-btn:active { transform: scale(0.95); }
.action-btn.btn-active { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,175,55,0.5); color: var(--gold); }
.action-btn.btn-disabled { opacity: 0.3; pointer-events: none; }
.btn-sort { color: var(--text2); border-color: rgba(255,255,255,0.12); }
.btn-sort:hover { color: var(--gold); }
.btn-draw-action { color: var(--primary); border-color: rgba(201,168,76,0.4); font-weight: 700; }
.btn-draw-action:hover { background: rgba(201,168,76,0.15); }
.btn-draw-action.btn-active { background: var(--primary); color: #000; border-color: var(--primary); }
.btn-stop-action { color: var(--danger); border-color: rgba(231,76,60,0.3); }
.btn-stop-action:hover { background: rgba(231,76,60,0.12); }
.btn-special-action { color: var(--gold); border-color: rgba(255,215,0,0.25); }
.btn-special-action:hover { background: rgba(255,215,0,0.08); }

/* ── 감정표현 ── */
/* ── 타이머 게이지 바 ── */
.timer-gauge-wrap {
    width: 100%; height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; position: relative; overflow: hidden;
    margin-top: 4px;
}
.timer-gauge-bar {
    height: 100%; border-radius: 3px;
    transition: width 0.3s linear, background 0.3s;
    width: 100%; background: var(--green);
}
.timer-gauge-bar.urgent { background: var(--danger); animation: gaugePulse 0.5s ease-in-out infinite; }
.timer-gauge-bar.warning { background: #f59e0b; }
.timer-gauge-text {
    position: absolute; right: 4px; top: -14px;
    font-size: 11px; font-weight: 800; color: var(--text);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
@keyframes gaugePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* 상대 좌석 게이지 */
.seat-gauge-wrap {
    width: 90%; height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden; margin: 3px auto 0;
}
.seat-gauge-bar {
    height: 100%; border-radius: 2px; width: 100%;
    background: var(--green); transition: width 0.3s linear, background 0.3s;
}
.seat-gauge-bar.urgent { background: var(--danger); animation: gaugePulse 0.5s ease-in-out infinite; }
.seat-gauge-bar.warning { background: #f59e0b; }

/* ── 대기 스피너 ── */
.waiting-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(212,175,55,0.2);
    border-top: 3px solid var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pb-mute-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 22px;
    padding: 6px 10px; border-radius: 8px; transition: opacity 0.2s; touch-action: manipulation;
}
.pb-mute-btn:hover { opacity: 1 !important; background: rgba(255,255,255,0.1); }
.emote-toggle { font-size: 18px !important; padding: 4px 8px !important; cursor: pointer; }
.emote-toggle.cooldown { opacity: 0.4; pointer-events: none; }
.emote-btn {
    background: none; border: 1px solid transparent; border-radius: 8px;
    cursor: pointer; padding: 4px; transition: all 0.15s;
}
.emote-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(212,175,55,0.4); transform: scale(1.15); }
.emote-btn:active { transform: scale(0.95); }
.emote-popup {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    z-index: 100; pointer-events: none; text-align: center;
    animation: emoteFloat 2.5s ease-out forwards;
}
@keyframes emoteFloat {
    0% { opacity: 1; transform: translateX(-50%) scale(0.5); }
    20% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.8); }
}

/* ═══ 애니메이션 ═══ */
.hand-card.card-flying { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s; transform: translateY(-120px) scale(0.6) !important; opacity: 0.3; pointer-events: none; }
.hand-card.card-rollback { animation: cardBounceBack 0.35s ease; }
@keyframes cardDealIn { 0% { transform: scale(0.3) translateY(-20px); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cardBounceBack { 0% { transform: translateY(-60px) scale(0.8); opacity: 0.5; } 60% { transform: translateY(5px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
.table-felt.table-shake { animation: tableShake 0.3s ease; }
@keyframes tableShake { 0%,100% { transform: translate(0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,1px); } }
.card-particle-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 20; }
.card-particle { position: absolute; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; opacity: 0; animation: particleBurst 0.5s ease-out forwards; }
@keyframes particleBurst { 0% { transform: translate(0) scale(1); opacity: 0.9; } 100% { transform: translate(var(--px),var(--py)) scale(0); opacity: 0; } }
.my-turn-glow { position: relative; }
.my-turn-glow::before {
    content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,215,0,0.7) 25%, transparent 50%, rgba(212,175,55,0.5) 75%, transparent 100%);
    animation: turnGlowSpin 2s linear infinite; z-index: -1;
}
@keyframes turnGlowSpin { to { transform: rotate(360deg); } }
.my-area.my-turn-pulse { animation: areaPulse 1.5s ease-in-out infinite; border-top-color: rgba(255,215,0,0.3); }
@keyframes areaPulse { 0%,100% { box-shadow: inset 0 2px 10px rgba(255,215,0,0); } 50% { box-shadow: inset 0 2px 20px rgba(255,215,0,0.15); } }

/* ═══ 땡큐 UI ═══ */
/* game-layout(1600x900) 기준 absolute — 멜드 영역 우측 하단, 우측 좌석 왼쪽, 내 손패 위 */
.thankyou-float { position: absolute; bottom: 300px; right: 220px; z-index: 6000; cursor: pointer; transition: transform 0.15s; }
.thankyou-float:hover { transform: scale(1.1); }
.thankyou-float:active { transform: scale(0.95); }
.thankyou-float.hidden { display: none !important; }
.thankyou-float.thankyou-inactive {
    opacity: 0.25; pointer-events: none; filter: grayscale(1);
}
.thankyou-float.thankyou-active {
    opacity: 1; pointer-events: auto; filter: none;
}
.thankyou-float.thankyou-active .thankyou-float-inner {
    animation: floatBtnPulse 1s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,165,0,0.4), 0 4px 15px rgba(0,0,0,0.4);
}
@keyframes floatBtnPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}
.thankyou-float-inner {
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFE066, #FFD700, #DAA520);
    border: 3px solid #B8860B;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(255,215,0,0.5), 0 5px 16px rgba(0,0,0,0.3);
}
.thankyou-float-text { font-size: 32px; font-weight: 900; color: #5D4037; text-shadow: 0 2px 0 rgba(255,255,255,0.4); letter-spacing: 2px; }
.thankyou-float-timer { text-align: center; font-size: 22px; font-weight: 700; color: var(--gold); margin-top: 5px; }
@keyframes floatBtnPulse {
    0%,100% { box-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(255,165,0,0.3), 0 4px 15px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 30px rgba(255,215,0,0.9), 0 0 60px rgba(255,165,0,0.5), 0 4px 15px rgba(0,0,0,0.4); }
}
.thankyou-float.show-anim { animation: floatBtnAppear 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes floatBtnAppear { 0% { opacity: 0; transform: scale(0.3) translateY(30px); } 100% { opacity: 1; transform: scale(1); } }
.thankyou-select {
    position: fixed; bottom: 180px; left: 50%; transform: translateX(-50%); z-index: 6100;
    background: rgba(12,12,20,0.95); border: 2px solid var(--gold); border-radius: 14px;
    padding: 16px 20px; min-width: 280px; max-width: 400px; text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); animation: floatBtnAppear 0.3s ease-out;
}
.thankyou-select.hidden { display: none !important; }
.thankyou-select-card { margin: 0 auto 12px; background: #fff; border-radius: 10px; padding: 8px 16px; display: inline-block; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
#thankyou-select-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#thankyou-select-options button {
    width: 100%; padding: 12px 16px;
    background: rgba(255,215,0,0.1); border: 1.5px solid rgba(255,215,0,0.4);
    border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
}
#thankyou-select-options button:hover { background: rgba(255,215,0,0.2); border-color: var(--gold); transform: scale(1.02); }
.thankyou-select-pass { padding: 8px 24px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: var(--text2); font-size: 13px; cursor: pointer; }
.thankyou-select-pass:hover { background: rgba(255,255,255,0.15); }
.thankyou-wait-label {
    position: fixed; bottom: 200px; left: 50%; transform: translateX(-50%); z-index: 5500;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,215,0,0.3); border-radius: 20px;
    padding: 8px 20px; color: var(--gold); font-size: 13px; font-weight: 600;
}
.thankyou-wait-label.hidden { display: none !important; }
.thankyou-modal { text-align: center; }
.thankyou-card { font-size: 48px; margin: 20px 0; padding: 24px; background: #fff; border-radius: 16px; min-height: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.thankyou-card .discard-card-content {
    align-items: center !important; justify-content: center !important;
    padding: 0 !important; width: 100%; height: 100%;
}
.thankyou-card .dc-rank { font-size: 52px !important; }
.thankyou-card .dc-suit { font-size: 40px !important; }
/* 땡큐 카운트다운 게이지 바 */
.thankyou-timer-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.15);
    border-radius: 2px; margin-top: 12px; overflow: hidden;
}
.thankyou-timer-fill {
    height: 100%; background: linear-gradient(90deg, var(--gold), #f59e0b);
    border-radius: 2px; transition: width 0.5s linear;
}
.thankyou-timer-fill.urgent {
    background: linear-gradient(90deg, #e53935, #ff5252);
}
.thankyou-timer-text {
    font-size: 12px; color: var(--text2); margin-top: 4px;
}
#thankyou-modal:not(.hidden) .btn-primary { animation: thankyouBtnPulse 0.8s ease-in-out infinite; border: 2px solid var(--gold); }
@keyframes thankyouBtnPulse { 0%,100% { box-shadow: 0 0 8px rgba(212,175,55,0.4); } 50% { box-shadow: 0 0 20px rgba(212,175,55,0.8); transform: scale(1.03); } }
#race-waiting-overlay { animation: raceOverlayFadeIn 0.3s ease-out; }
@keyframes raceOverlayFadeIn { from { opacity: 0; transform: translate(-50%,-50%) scale(0.9); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ═══ 결과 모달 ═══ */
.result-modal { text-align: center; min-width: 700px; max-width: 900px; padding: 48px 40px; }
.result-modal h2 { font-size: 42px; margin-bottom: 28px; background: linear-gradient(135deg, var(--gold), #c9a84c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.result-row { display: flex; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 22px; }
.result-row.winner { background: linear-gradient(90deg, rgba(255,215,0,0.08), transparent); color: var(--gold); font-weight: 700; }
.result-row .payout-plus { color: var(--success); font-weight: 700; }
.result-row .payout-minus { color: var(--danger); }
.result-rake { color: var(--text2); font-size: 18px; margin-top: 16px; }
.result-modal .btn-primary { font-size: 22px; padding: 16px 40px; margin-top: 20px; }

/* ═══ 토스트 ═══ */
.toast {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    padding: 12px 24px; background: rgba(15,17,22,0.95); border: 1px solid var(--accent);
    border-radius: 10px; color: var(--text); font-size: 14px; z-index: 200;
    animation: fadeInDown 0.3s ease; pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
@keyframes fadeInDown { from { opacity: 0; transform: translate(-50%,-20px); } to { opacity: 1; transform: translate(-50%,0); } }

/* ═══════════════════════════════════════
   반응형 — 로비
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .wallet-cards { grid-template-columns: 1fr; }
    .admin-grid { grid-template-columns: repeat(2, 1fr); }
    /* 1단: 상단 바 — 컴팩트 */
    .top-bar { padding: 10px 12px; gap: 8px; }
    .top-bar h2 { font-size: 16px; letter-spacing: 2px; flex-shrink: 0; }
    .top-right { gap: 8px; flex-shrink: 0; padding-right: env(safe-area-inset-right, 4px); }
    .top-right #user-info { display: none; }
    .top-right .btn-sm { padding: 8px 10px; font-size: 16px; min-height: 40px; min-width: 40px;
        display: flex; align-items: center; justify-content: center; border-radius: 10px; }
    .balance-badge { font-size: 13px; padding: 6px 12px; font-weight: 800; }
    /* 햄버거 메뉴 위치 보정 */
    .lobby-menu-dropdown { top: 56px; right: 8px; }
    /* 2단: 탭 — 모바일 최적화 */
    .lobby-tabs { border-bottom: 2px solid rgba(212,175,55,0.1); }
    .lobby-tabs .nav-btn { padding: 14px 4px; font-size: 14px; font-weight: 800; }
    /* 레이아웃 */
    body { overflow: hidden; height: 100vh; height: 100dvh; }
    #lobby-screen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }
    #lobby-screen .lobby-content, #lobby-screen > section, .section { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    .auth-container { width: 90%; padding: 24px; }
    .result-modal { min-width: auto; width: 90vw; }
    .section { padding: 16px 12px; }
    .section-header h3 { font-size: 17px; }
}

/* ═══════════════════════════════════════
   반응형 — 모바일 (스케일링으로 자동 처리, 팝업만 조정)
   ═══════════════════════════════════════ */
@media (max-width: 932px) {
    /* 모달은 스케일링 밖에서 뷰포트 기준으로 표시 */
    .modal-content { min-width: auto; width: 80vw; max-width: 320px; padding: 14px; }
    .thankyou-modal { min-width: auto !important; width: 80vw; }
    .thankyou-card { font-size: 24px; padding: 10px; min-height: 40px; }
    /* result-modal은 스케일러 내부 → 기본 스타일 유지 */
    .toast { top: 28px; font-size: 11px; padding: 5px 12px; max-width: 70vw; }
    .thankyou-float { bottom: 130px; }
}