/**
 * 픽스터룸 전용 스타일
 */

/* ========================================
   픽스터룸 레이아웃 기본 스타일
   ======================================== */

/* CSS 변수 */
:root {
    --accent-color: #e8a01a;
    --accent-glow: rgba(245, 181, 68, 0.5);
}

/* 픽스터룸 전용 body 스타일 */
.pickster-room-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a1a1f 0%, #0d2329 50%, #0a1a1f 100%);
}

.pickster-room-main {
    flex: 1;
    padding: 0;
    text-align: left;
}

/* 픽스터룸 카드 기본 스타일 */
.pickster-room .card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* 버튼 기본 스타일 */
.pickster-room .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.pickster-room .btn-primary {
    background: var(--accent-color, #e8a01a);
    color: #000;
}

.pickster-room .btn-primary:hover {
    background: #b8841f;
    transform: translateY(-1px);
}

.pickster-room .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pickster-room .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 버튼 스타일 */
.btn-player {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-player:hover {
    background: rgba(59, 130, 246, 0.25);
}

.btn-banker {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-banker:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* ========================================
   픽스터룸 목록 페이지
   ======================================== */

/* 페이지 기본 — 우측 사이드바(.global-right-sidebar)와 시작점 정렬 위해 동일한 margin-top */
.pickster-page,
.pickster-my-page {
    padding: 0 8px;
    margin-top: var(--spacing-md);
}

.pickster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 15px;
    /* 글로벌 .page-header(style.css)가 들어와 underline·중앙정렬·과한 padding이 입혀지는 것 차단 */
    background: transparent;
    border-bottom: none;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--accent-color, #e8a01a);
    text-align: left;
}

/* 내 룸 관리 페이지 카드 박스 (.card 클래스가 픽스터 CSS에 없어 박스가 안 그려지던 문제) */
.pickster-my-page .card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

/* ========================================
   페이지 상단 메인 탭 (일간 / 주간)
   40~50대 사용자도 명확히 구분되도록 크게 노출
   ======================================== */
.pickster-main-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0 18px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(245, 181, 68, 0.18);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* 버튼이 1개만 남았을 때 컨테이너 전체 너비를 차지 (주간 버튼 제거 대응) */
.pickster-main-tab:only-child {
    grid-column: 1 / -1;
}

.pickster-main-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.18s;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
    line-height: 1.2;
}

.pickster-main-tab .pmt-sub {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.2px;
}

.pickster-main-tab:hover {
    background: rgba(245, 181, 68, 0.06);
    color: #f5b544;
}

/* 일간 탭 활성 — 청록 */
.pickster-main-tab.active[data-main-tab="daily"] {
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.22), rgba(245, 181, 68, 0.10));
    border-color: rgba(245, 181, 68, 0.55);
    color: #f5b544;
    box-shadow: 0 0 0 1px rgba(245, 181, 68, 0.25) inset, 0 4px 14px rgba(245, 181, 68, 0.18);
    text-shadow: 0 0 10px rgba(245, 181, 68, 0.45);
}
.pickster-main-tab.active[data-main-tab="daily"] .pmt-sub { color: rgba(245, 181, 68, 0.85); }

/* 주간 탭 활성 — 황색 */
.pickster-main-tab.active[data-main-tab="weekly"] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.10));
    border-color: rgba(245, 158, 11, 0.55);
    color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset, 0 4px 14px rgba(245, 158, 11, 0.18);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}
.pickster-main-tab.active[data-main-tab="weekly"] .pmt-sub { color: rgba(251, 191, 36, 0.85); }

/* 일반 active 폴백 (data-main-tab 없는 경우) */
.pickster-main-tab.active {
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.22), rgba(245, 181, 68, 0.10));
    border-color: rgba(245, 181, 68, 0.55);
    color: #f5b544;
}

@media (max-width: 768px) {
    .pickster-main-tabs {
        gap: 5px;
        padding: 4px;
        margin: 12px 0 14px;
    }
    .pickster-main-tab {
        padding: 11px 6px;
        font-size: 14px;
    }
    .pickster-main-tab .pmt-sub {
        font-size: 10px;
    }
}

.pickster-header .page-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.pickster-header .page-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.pickster-header .page-subtitle {
    font-size: 14px;
    color: #888;
}

.pickster-header .btn-outline {
    padding: 8px 16px;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background: transparent;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.pickster-header .btn-outline:hover {
    background: var(--accent-color);
    color: #000;
}

/* 개설권 보유 배너 — 컴팩트 한 줄 요약 + 우측 액션 */
.my-tickets-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.08), rgba(245, 181, 68, 0.03));
    border: 1px solid rgba(245, 181, 68, 0.28);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}

/* 보유 0개 빈 상태 — 상점 유도 */
.my-tickets-banner.empty-state {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.35));
    border: 1px dashed rgba(245, 181, 68, 0.35);
    padding: 14px 18px;
}
.my-tickets-banner.empty-state .empty-state-icon {
    font-size: 28px;
    line-height: 1;
    filter: grayscale(0.15);
}
.my-tickets-banner.empty-state .empty-state-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.my-tickets-banner.empty-state .empty-state-title {
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
}
.my-tickets-banner.empty-state .empty-state-desc {
    font-size: 12px;
    color: #94a3b8;
}

/* 보유 1+ : 한 줄 요약 */
.tickets-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
}
.tickets-summary .ts-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color, #e8a01a);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding-right: 4px;
    border-right: 1px solid rgba(245, 181, 68, 0.25);
    margin-right: 4px;
}
.tickets-summary .ts-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}
.tickets-summary .ts-item strong {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0 1px;
}
.tickets-summary .ts-item.on strong { color: #f5b544; }
.tickets-summary .ts-item.off { color: #64748b; }
.tickets-summary .ts-item.off strong { color: #64748b; font-weight: 700; }
.tickets-summary .ts-divider {
    color: rgba(255, 255, 255, 0.18);
    font-size: 13px;
}
.tickets-summary .ts-hint {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    margin-left: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}
.tickets-summary .ts-hint.ok {
    color: #f5b544;
    background: rgba(245, 181, 68, 0.12);
}
.tickets-summary .ts-hint.warn {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

/* 우측 액션 버튼 */
.tickets-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.tickets-actions .btn-primary {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
}

/* 모바일 */
@media (max-width: 768px) {
    .my-tickets-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    .my-tickets-banner.empty-state {
        align-items: center;
        text-align: center;
    }
    .tickets-summary {
        gap: 4px 10px;
        justify-content: flex-start;
    }
    .tickets-summary .ts-label {
        flex: 1 1 100%;
        border-right: none;
        margin-right: 0;
        margin-bottom: 2px;
    }
    .tickets-actions {
        justify-content: flex-end;
    }
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* 픽스터 배너 영역 */
.pickster-banners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pickster-banners:has(.pickster-banner-item:only-child) {
    grid-template-columns: 1fr;
}

.pickster-banner-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s;
}

.pickster-banner-item:hover {
    transform: scale(1.02);
}

.pickster-banner-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .pickster-banners {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .pickster-banner-item img {
        height: 50px;
    }
}

/* 공지사항 게시판 위젯 (픽스터룸 페이지) */
.pickster-notice-board {
    margin: 16px 0;
    padding: 12px 16px 14px;
    background: var(--bg-secondary, #151c24);
    border: 1px solid var(--border-dark, rgba(255,255,255,0.06));
    border-radius: 10px;
}
.pickster-notice-board .board-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 181, 68,0.20);
    margin-bottom: 8px;
}
.pickster-notice-board .board-header h3 {
    margin: 0; font-size: 15px; font-weight: 700;
}
.pickster-notice-board .board-header h3 a {
    color: #e2e8f0; text-decoration: none;
    /* 전역 .board-header h3 a 의 네온 글로우(--neon-text-glow) 상속 차단 — 빛 번짐 제거 */
    text-shadow: none;
}
.pickster-notice-board .board-header h3 a:hover { color: #f5b544; }
.pickster-notice-board .board-header-actions {
    display: flex; align-items: center; gap: 8px;
}
.pickster-notice-board .more-link,
.pickster-notice-board .write-link {
    color: #94a3b8; font-size: 12px; text-decoration: none;
}
.pickster-notice-board .more-link:hover,
.pickster-notice-board .write-link:hover { color: #f5b544; }
.pickster-notice-board .write-link {
    padding: 3px 8px;
    background: rgba(245, 181, 68,0.12);
    border: 1px solid rgba(245, 181, 68,0.3);
    border-radius: 4px;
    color: #f5b544;
    font-weight: 600;
}
.pickster-notice-board .write-link:hover {
    background: rgba(245, 181, 68,0.20);
}
.pickster-notice-board .board-empty {
    padding: 14px 4px; text-align: center;
    color: #64748b; font-size: 12px;
}
.pickster-notice-board .board-list {
    list-style: none; padding: 0; margin: 0;
}
.pickster-notice-board .board-list li {
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.pickster-notice-board .board-list li:last-child { border-bottom: none; }
.pickster-notice-board .board-list li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 4px; gap: 10px;
    color: #cbd5e1; text-decoration: none; font-size: 13px;
    transition: color 0.15s ease;
}
.pickster-notice-board .board-list li a:hover { color: #f5b544; }
.pickster-notice-board .board-list .post-title {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
/* notice-badge / new-badge 는 글로벌 스타일을 그대로 사용 (다른 페이지와 일관성) */
.pickster-notice-board .board-list .notice-badge,
.pickster-notice-board .board-list .new-badge {
    flex-shrink: 0;
}
.pickster-notice-board .board-list .comment-count {
    color: #e8a01a; font-size: 12px; font-weight: 600;
}
.pickster-notice-board .board-list .post-date {
    color: #64748b; font-size: 11px; white-space: nowrap;
    flex-shrink: 0;
}

/* 일간/주간 픽스터 랭킹 대시보드 탭 */
.pickster-rank-dashboard {
    margin: 16px 0 22px;
}
.prd-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.prd-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: #94a3b8;
    padding: 10px 14px;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.prd-tab .prd-tab-sub {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.2px;
}
.prd-tab.active[data-rank-tab="daily"] .prd-tab-sub { color: rgba(245, 181, 68, 0.85); }
.prd-tab.active[data-rank-tab="weekly"] .prd-tab-sub { color: rgba(251, 191, 36, 0.85); }
@media (max-width: 768px) {
    .prd-tab { padding: 8px 8px; font-size: 12px; }
    .prd-tab .prd-tab-sub { font-size: 10px; }
}
.prd-tab:hover {
    background: rgba(245, 181, 68,0.06);
    color: #f5b544;
}
/* 일간 랭킹 탭 active — 청록 */
.prd-tab.active[data-rank-tab="daily"] {
    background: linear-gradient(135deg, rgba(245, 181, 68,0.18), rgba(245, 181, 68,0.06));
    border-color: rgba(245, 181, 68,0.5);
    color: #f5b544;
    box-shadow: 0 -2px 8px rgba(245, 181, 68,0.15);
}
/* 주간 랭킹 탭 active — 황색 */
.prd-tab.active[data-rank-tab="weekly"] {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.06));
    border-color: rgba(245,158,11,0.5);
    color: #fbbf24;
    box-shadow: 0 -2px 8px rgba(245,158,11,0.15);
}
/* 폴백 */
.prd-tab.active {
    background: linear-gradient(135deg, rgba(245, 181, 68,0.18), rgba(245, 181, 68,0.06));
    border-color: rgba(245, 181, 68,0.5);
    color: #f5b544;
}

/* 주간 패널 안의 랭킹 카드 — 황색 톤 오버라이드 */
.prd-panel[data-rank-panel="weekly"] .pickster-weekly-rank {
    background: linear-gradient(135deg, rgba(245,158,11,0.07), rgba(245,158,11,0.02));
    border-color: rgba(245,158,11,0.30);
}
.prd-panel[data-rank-panel="weekly"] .pickster-weekly-rank .pwr-header {
    border-bottom-color: rgba(245,158,11,0.20);
}
.prd-panel[data-rank-panel="weekly"] .pickster-weekly-rank .pwr-header h3 {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(245,158,11,0.4);
}
/* 주간 패널 안의 일자 셀렉터 active — 황색 */
.prd-panel[data-rank-panel="weekly"] .rank-date-selector .rds-btn.active {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.55);
    color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(245,158,11,0.18) inset;
}
.prd-panel[data-rank-panel="weekly"] .rank-date-selector .rds-btn:hover {
    border-color: rgba(245,158,11,0.45);
}
.prd-panel { animation: fadeIn 0.2s ease; }
/* active 클래스 없는 패널은 강제 숨김 — inline style이 어떤 이유로든 미적용 시 fallback */
.prd-panel:not(.active) { display: none !important; }
.prd-panel .pickster-weekly-rank { margin-top: 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 주간 픽스터 TOP20 */
.pickster-weekly-rank {
    margin: 16px 0 22px;
    padding: 16px 18px 14px;
    background: linear-gradient(135deg, rgba(245, 181, 68,0.07), rgba(168,85,247,0.04));
    border: 1px solid rgba(245, 181, 68,0.30);
    border-radius: 12px;
}
.pickster-weekly-rank .pwr-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 181, 68,0.20);
    flex-wrap: wrap; gap: 6px;
}
.pickster-weekly-rank .pwr-header h3 {
    margin: 0; font-size: 15px; color: #f5b544;
    text-shadow: 0 0 8px rgba(245, 181, 68,0.4);
}
.pickster-weekly-rank .pwr-subtitle { font-size: 11px; color: #94a3b8; }

/* 본인 row 강조 — TOP20 밖일 때 20위 자리에 본인이 노출됨 */
.pickster-weekly-rank .pwr-item-me {
    background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.06)) !important;
    border: 1px solid rgba(245,158,11,0.45) !important;
    box-shadow: 0 0 0 1px rgba(245,158,11,0.22) inset;
}
.pickster-weekly-rank .pwr-me-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: rgba(245,158,11,0.25);
    color: #fcd34d;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

/* 랭킹 일자 셀렉터 (일간 7일 / 주간 이번/전 주) */
.rank-date-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.rank-date-selector .rds-btn {
    padding: 5px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    -webkit-appearance: none; appearance: none;
}
.rank-date-selector .rds-btn:hover {
    border-color: rgba(245, 181, 68,0.45);
    color: #cbd5e1;
}
.rank-date-selector .rds-btn.active {
    background: rgba(245, 181, 68,0.18);
    border-color: rgba(245, 181, 68,0.55);
    color: #f5b544;
    box-shadow: 0 0 0 1px rgba(245, 181, 68,0.18) inset;
}
/* 2026-05 정책: 1~10등을 한 영역에 표시 (옛 좌/우 2열 폐기) */
.pickster-weekly-rank .pwr-list {
    display: block;
    width: 100%;
}
.pickster-weekly-rank .pwr-group {
    display: block;
    width: 100%;
}
/* 모바일 탭 (PC에선 숨김) */
.pickster-weekly-rank .pwr-tabs { display: none; }

/* 엑셀 스타일 — 각 셀 사이에 명확한 구분선, 행 사이에도 가로선 */
.pickster-weekly-rank .pwr-list {
    border-top: 1px solid rgba(255,255,255,0.10);
    border-left: 1px solid rgba(255,255,255,0.10);
}
.pickster-weekly-rank .pwr-item {
    display: grid;
    /* 5컬럼 — 등수 / 상금 / 아이콘 / 닉네임 / 최종금액 (승률·전적 제거)
       상금은 "현금 200,000원 + 일반 300,000P" 처럼 길어 넓게(2줄 wrap), 닉네임은 과도하게 넓지 않게 축소 */
    grid-template-columns: 42px minmax(150px, 1.4fr) 30px minmax(78px, 0.85fr) 118px;
    width: 100%;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #e2e8f0; font-size: 13px;
    transition: background 0.15s ease;
}
/* 모든 셀 기본 가운데 정렬 (닉네임만 .pwr-nick 룰로 왼쪽 override) */
.pickster-weekly-rank .pwr-item > * {
    justify-content: center;
    text-align: center;
}
.pickster-weekly-rank .pwr-nick {
    /* 닉네임은 자연스럽게 왼쪽 정렬 (긴 닉네임 줄임) */
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding-left: 6px !important;
}
.pickster-weekly-rank .pwr-reward {
    white-space: normal;        /* 잘림 대신 2줄 wrap */
    word-break: keep-all;       /* 한글 단어 안 깨고 공백/+ 에서만 줄바꿈 */
    overflow-wrap: anywhere;
    line-height: 1.25;
    font-size: 11.5px;
}
.pickster-weekly-rank .pwr-balance {
    font-weight: 700;
    color: #22c55e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12.5px;
}
.pickster-weekly-rank .pwr-winrate {
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}
.pickster-weekly-rank .pwr-record {
    color: #94a3b8;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 모바일 압축 처리는 아래쪽 @media (max-width:768px) 블록(라인 ~899)에 단일화됨 — 중복 제거 */
.pickster-weekly-rank .pwr-item:hover { background: rgba(245, 181, 68,0.06); }
.pickster-weekly-rank .pwr-item > * {
    padding: 7px 10px;
    border-right: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    min-width: 0;
}
/* 등급 아이콘 — EJS에서 <img class="pwr-rank-icon"> 자체가 grid item.
   img 직접 스타일 + 우측 경계/패딩 제거로 닉네임에 자연스럽게 붙임 */
.pickster-weekly-rank .pwr-item > img.pwr-rank-icon,
.pickster-weekly-rank .pwr-item > span.pwr-rank-icon {
    padding: 4px 0 4px 8px;
    border-right: 0;
    width: 28px;
    height: auto;
    max-height: 24px;
    object-fit: contain;
    justify-self: center;
    align-self: center;
    box-sizing: border-box;
}
/* 닉네임 셀 — 아이콘과 자연스럽게 붙도록 왼쪽 패딩 축소 */
.pickster-weekly-rank .pwr-item > .pwr-nick {
    padding-left: 6px;
}
.pickster-weekly-rank .pwr-item > *:last-child { border-right: none; }
.pickster-weekly-rank .pwr-nick { cursor: pointer; }
.pickster-weekly-rank .pwr-nick:hover { color: #f5b544; }

/* 입장 버튼 */
.pickster-weekly-rank .pwr-enter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 3px 9px;
    background: linear-gradient(135deg, #e8a01a, #b8841f);
    border: none; border-radius: 5px;
    color: #fff; font-size: 11px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.pickster-weekly-rank .pwr-enter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 181, 68,0.4);
}
.pickster-weekly-rank .pwr-enter-disabled {
    background: rgba(255,255,255,0.05) !important;
    color: #475569 !important;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.pickster-weekly-rank .pwr-rank {
    font-weight: 700; text-align: center; color: #94a3b8; font-size: 13px;
}
.pickster-weekly-rank .pwr-rank-1 .pwr-rank,
.pickster-weekly-rank .pwr-rank-2 .pwr-rank,
.pickster-weekly-rank .pwr-rank-3 .pwr-rank { font-size: 15px; }
.pickster-weekly-rank .pwr-rank-icon { width: 18px; height: 18px; object-fit: contain; }
.pickster-weekly-rank .pwr-nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickster-weekly-rank .pwr-winrate { font-weight: 700; color: #e8a01a; justify-content: flex-end; }
.pickster-weekly-rank .pwr-record { color: #64748b; font-size: 11px; justify-content: flex-end; }
.pickster-weekly-rank .pwr-reward {
    /* 다크 틸 배경에 어울리는 차분한 amber 톤 — 상금 강조하되 튀지 않게 */
    font-weight: 700;
    font-size: 12px;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    justify-content: center;
}
.pickster-weekly-rank .pwr-reward:not(.has-reward) {
    color: #334155;
    font-weight: 400;
}
/* 2026-05: 모든 탭 공통 안내 박스 */
.pickster-global-notice {
    margin: 12px 0 16px;
    padding: 10px 14px;
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.28);
    border-radius: 8px;
    color: #c4b5fd;
    font-size: 13px;
    line-height: 1.6;
}
.pickster-global-notice a {
    color: #ddd6fe;
    font-weight: 700;
    text-decoration: underline;
}

.pickster-weekly-rank .pwr-reward-notice {
    margin: 6px 0 14px;
    padding: 8px 12px;
    background: rgba(168,85,247,0.07);
    border: 1px solid rgba(168,85,247,0.22);
    border-radius: 6px;
    color: #c4b5fd;
    font-size: 12px;
    line-height: 1.5;
}
.pickster-weekly-rank .pwr-reward-notice a { color: #ddd6fe; font-weight: 700; text-decoration: underline; }
.pickster-weekly-rank .pwr-reward-notice .prn-line {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.pickster-weekly-rank .pwr-reward-notice .prn-line + .prn-line { margin-top: 4px; }
.pickster-weekly-rank .pwr-reward-notice .prn-line .rk-ico { margin-top: 2px; flex-shrink: 0; }
.pickster-weekly-rank .pwr-header h3 .rk-ico {
    margin-right: 4px;
    vertical-align: -2px;
}
.prd-tab-main .rk-ico {
    margin-right: 4px;
    vertical-align: -2px;
}
.pickster-weekly-rank .pwr-empty {
    padding: 16px; text-align: center; color: #64748b; font-size: 13px;
}
@media (max-width: 768px) {
    /* 모바일 5컬럼 압축 — 상금 넓히고 닉네임 축소(상금 2줄 wrap). */
    .pickster-weekly-rank .pwr-item {
        grid-template-columns: 28px minmax(74px, 1.3fr) 14px minmax(0, 0.8fr) 78px;
        font-size: 11px;
    }
    .pickster-weekly-rank .pwr-item > * { padding: 5px 4px; }
    .pickster-weekly-rank .pwr-rank { font-size: 12px; }
    .pickster-weekly-rank .pwr-rank-1 .pwr-rank,
    .pickster-weekly-rank .pwr-rank-2 .pwr-rank,
    .pickster-weekly-rank .pwr-rank-3 .pwr-rank { font-size: 13px; }
    .pickster-weekly-rank .pwr-item > img.pwr-rank-icon,
    .pickster-weekly-rank .pwr-item > span.pwr-rank-icon {
        width: 14px !important;
        height: 14px !important;
        max-height: 14px !important;
        padding: 4px 0 4px 2px !important;
    }
    .pickster-weekly-rank .pwr-nick { padding-left: 4px !important; font-size: 11px; }
    .pickster-weekly-rank .pwr-reward { font-size: 9.5px; }
    .pickster-weekly-rank .pwr-balance { font-size: 10.5px; }
    .pickster-weekly-rank .pwr-winrate { font-size: 10.5px; }
    .pickster-weekly-rank .pwr-record { font-size: 9.5px; }
    .pickster-weekly-rank .pwr-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
    }
    .pickster-weekly-rank .pwr-tab {
        flex: 1;
        padding: 7px 10px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .pickster-weekly-rank .pwr-tab.active {
        background: linear-gradient(135deg, rgba(245, 181, 68,0.25), rgba(245, 181, 68,0.10));
        border-color: rgba(245, 181, 68,0.55);
        color: #f5b544;
    }
    /* 비활성 그룹 숨김 — active 그룹은 block(세로 stack), flex 아님!
       flex 였을 때 .pwr-item 자식들이 가로로 배치되어 화면 폭을 넘고 가로 스크롤 발생했음 */
    .pickster-weekly-rank .pwr-group { display: none; }
    .pickster-weekly-rank .pwr-group.active { display: block; }
}

/* 초소형(<=380px): 닉네임 영역 더 확보 */
@media (max-width: 380px) {
    .pickster-weekly-rank .pwr-item {
        grid-template-columns: 24px minmax(66px, 1.25fr) 12px minmax(0, 0.75fr) 72px;
    }
}

/* 필터 영역 */
.pickster-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    margin-bottom: 20px;
    gap: 20px;
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 21px;
    width: 100%;
}

.filter-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #aaa;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    transition: all 0.2s;
    text-decoration: none;
}

.filter-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.1);
}

.filter-tab.active {
    background: var(--accent-color, #e8a01a);
    color: #000 !important;
    font-weight: 600;
}

/* 전체 탭 (왼쪽) — 카지노 탭 그룹과 1:5 비율 */
.filter-tab.all-tab {
    flex: 1;
    padding: 16px 12px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.filter-tab.all-tab .all-tab-text {
    font-size: 15px;
    font-weight: 600;
    color: #ccc;
    letter-spacing: 0.5px;
}

.filter-tab.all-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}

.filter-tab.all-tab:hover .all-tab-text {
    color: #fff;
}

.filter-tab.all-tab.active {
    background: rgba(245, 181, 68, 0.15);
    border-color: var(--accent-color, #e8a01a);
}

.filter-tab.all-tab.active .all-tab-text {
    color: var(--accent-color, #e8a01a);
}

/* 카지노 탭 그룹 — flex 값은 EJS에서 활성 카지노 수로 인라인 설정
   (전체 탭과 각 카지노 탭이 동일 너비가 되도록) */
.casino-tabs-group {
    display: flex;
    gap: 16px;
}

.filter-tab.casino-tab {
    flex: 1;
    padding: 16px 24px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-tab.casino-tab img {
    height: 56px;
    width: 120px;
    object-fit: contain;
    display: block;
    opacity: 0.5;
    transition: all 0.2s;
}

.filter-tab.casino-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}

.filter-tab.casino-tab:hover img {
    opacity: 0.9;
}

.filter-tab.casino-tab.active {
    background: rgba(245, 181, 68, 0.15);
    border-color: var(--accent-color, #e8a01a);
}

.filter-tab.casino-tab.active img {
    opacity: 1;
}

.filter-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-sort label {
    font-size: 13px;
    color: #888;
}

.filter-sort select {
    padding: 6px 12px;
    border-radius: 6px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.filter-sort select option {
    background: #1a1a1a;
    color: #fff;
}

/* 룸 카운트 */
.pickster-room-count {
    font-size: 14px;
    color: #888;
    margin-bottom: 16px;
}

/* 룸 목록 */
.pickster-room-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* 페이지네이션 */
.pickster-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}
.pickster-pagination .pp-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pickster-pagination .pp-btn:hover:not(.disabled):not(.active) {
    background: rgba(245, 181, 68, 0.08);
    border-color: rgba(245, 181, 68, 0.35);
    color: #f5b544;
}
.pickster-pagination .pp-btn.active {
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.25), rgba(245, 181, 68, 0.12));
    border-color: rgba(245, 181, 68, 0.6);
    color: #f5b544;
    cursor: default;
    box-shadow: 0 2px 10px rgba(245, 181, 68, 0.18);
}
.pickster-pagination .pp-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: #64748b;
}
.pickster-pagination .pp-ellipsis {
    min-width: 24px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    user-select: none;
}
@media (max-width: 768px) {
    .pickster-pagination .pp-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
}

/* 룸 카드 */
.pickster-room-card {
    position: relative;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 16px 14px;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.pickster-room-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.pickster-room-card.my-room {
    border-color: rgba(245, 181, 68, 0.32);
    background: #1a1a1a;
}

/* 카지노 태그 — outline 스타일 */
.room-casino-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid;
    background: transparent;
    z-index: 1;
}

.room-casino-tag.evolution {
    color: #ff9a9a;
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.45);
}

.room-casino-tag.pragmatic {
    color: #f5b544;
    background: rgba(245, 181, 68, 0.08);
    border-color: rgba(245, 181, 68, 0.45);
}

.room-casino-tag.bota {
    color: #c0adfd;
    background: rgba(167, 139, 250, 0.08);
    border-color: rgba(167, 139, 250, 0.45);
}

.room-casino-tag.sexy {
    color: #f8a3cf;
    background: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.45);
}

/* 내 방 리본 */
.my-room-ribbon {
    position: absolute;
    top: 10px;
    left: -22px;
    background: #b8841f;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 25px;
    transform: rotate(-45deg);
    z-index: 2;
}

/* 프로필 영역 */
.room-profile-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-right: 46px;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1c2832;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar span {
    font-size: 15px;
    font-weight: 600;
    color: #9aa5b1;
}

.profile-level-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #141414;
    padding: 1px;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-nickname {
    font-size: 14px;
    font-weight: 700;
    color: #e6e9ed;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 0;
}

.profile-table {
    font-size: 11.5px;
    color: #74808c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 승률 — 점선 위 얇은 막대 + 모노 숫자 */
.room-winrate-area {
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    margin-bottom: 0;
}

.winrate-bar {
    height: 2px;
    background: rgba(255,255,255,0.06);
    margin-bottom: 6px;
    overflow: hidden;
}

.winrate-fill {
    height: 100%;
    background: #f5b544;
    transition: width 0.5s ease;
}

.winrate-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.winrate-label {
    font-size: 10.5px;
    color: #74808c;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.winrate-value {
    font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.winrate-value.high { color: #f5b544; }
.winrate-value.mid  { color: #c9b56b; }
.winrate-value.low  { color: #8a8f95; }

/* 전적 — 위/아래 점선 라인, 모노 숫자 */
.room-stats-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px dashed rgba(255,255,255,0.08);
    border-bottom: 1px dashed rgba(255,255,255,0.08);
    margin-top: 10px;
    margin-bottom: 10px;
}

.stats-record {
    display: flex;
    gap: 8px;
    font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.3px;
}

.record-total { color: #74808c; }
.record-win   { color: #22c55e; font-weight: 600; }
.record-tie   { color: #94a3b8; }
.record-lose  { color: #ef4444; }

.stats-streak {
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.stats-streak.win {
    background: rgba(201, 181, 107, 0.12);
    color: #c9b56b;
}

.stats-streak.lose {
    background: rgba(176, 104, 104, 0.12);
    color: #b06868;
}

.stats-profit {
    font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.3px;
    white-space: nowrap;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.stats-profit.profit-plus  { color: #22c55e; }
.stats-profit.profit-minus { color: #ef4444; }

/* 하단 영역 */
.room-bottom-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.visitor-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #74808c;
}

.visitor-count svg {
    opacity: 0.5;
    width: 12px;
    height: 12px;
}

.remaining-time-small {
    font-size: 11.5px;
    font-weight: 500;
    color: #74808c;
    font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: -0.3px;
}

.bottom-enter {
    font-size: 11.5px;
    font-weight: 600;
    color: #8a98a3;
    letter-spacing: 0.5px;
    transition: color 0.18s, transform 0.18s;
}

.pickster-room-card:hover .bottom-enter {
    color: #d4d8de;
    transform: translateX(3px);
}

.bottom-actions {
    display: flex;
    gap: 6px;
}

.btn-room-open,
.btn-room-close {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    letter-spacing: 0.3px;
}

.btn-room-open {
    background: transparent;
    color: #f5b544;
    border-color: rgba(245, 181, 68, 0.45);
}

.btn-room-open:hover {
    background: rgba(245, 181, 68, 0.1);
    border-color: #f5b544;
}

.btn-room-close {
    background: transparent;
    color: #b06868;
    border-color: rgba(176, 104, 104, 0.45);
}

.btn-room-close:hover {
    background: rgba(176, 104, 104, 0.12);
    border-color: #b06868;
}

/* 관리자 강제 폐쇄 버튼 (룸 카드 우하단, '입장 →' 옆) */
.bottom-enter { display: inline-flex; align-items: center; gap: 8px; }
.btn-room-admin-close {
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn-room-admin-close:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fff;
    border-color: #ef4444;
}

/* 순위 뱃지 (닉네임 옆 인라인) */
.pickster-room-card .rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 10.5px;
    vertical-align: middle;
    margin-left: 6px;
    box-shadow: none;
}

.pickster-room-card .rank-badge .rank-icon {
    font-size: 10.5px;
}

.pickster-room-card .rank-badge .rank-num {
    font-size: 10.5px;
    line-height: 1;
}

.pickster-room-card .rank-badge.rank-1 {
    background: rgba(230, 200, 74, 0.14);
    color: #e6c84a;
}

.pickster-room-card .rank-badge.rank-2 {
    background: rgba(196, 200, 204, 0.12);
    color: #c4c8cc;
}

.pickster-room-card .rank-badge.rank-3 {
    background: rgba(200, 136, 74, 0.14);
    color: #c8884a;
}

.pickster-room-card .rank-badge.rank-4,
.pickster-room-card .rank-badge.rank-5 {
    background: rgba(255,255,255,0.06);
    color: #a3acb4;
}

/* 상위 룸 카드 — 좌측 stripe로 강조 */
.pickster-room-card.top-rank {
    border-width: 1px;
    padding-left: 18px;
}

.pickster-room-card.top-rank::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    z-index: 0;
}

.pickster-room-card.rank-1 {
    border-color: rgba(230, 200, 74, 0.28);
    background: #141414;
}

.pickster-room-card.rank-1::before { background: #e6c84a; }

.pickster-room-card.rank-1:hover {
    border-color: rgba(230, 200, 74, 0.5);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.pickster-room-card.rank-2 {
    border-color: rgba(196, 200, 204, 0.25);
    background: #141414;
}

.pickster-room-card.rank-2::before { background: #c4c8cc; }

.pickster-room-card.rank-2:hover {
    border-color: rgba(196, 200, 204, 0.45);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.pickster-room-card.rank-3 {
    border-color: rgba(200, 136, 74, 0.28);
    background: #141414;
}

.pickster-room-card.rank-3::before { background: #c8884a; }

.pickster-room-card.rank-3:hover {
    border-color: rgba(200, 136, 74, 0.5);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* 카지노 태그 위치 조정 */
.room-casino-tag.with-rank {
    top: 14px;
}

/* 승률 바 상위 색상 — 단색 */
.winrate-bar.gold .winrate-fill   { background: #e6c84a; }
.winrate-bar.silver .winrate-fill { background: #c4c8cc; }
.winrate-bar.bronze .winrate-fill { background: #c8884a; }

/* 빈 상태 */
.pickster-empty {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    color: #444;
    margin-bottom: 20px;
}

.empty-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 8px;
}

.empty-desc {
    font-size: 14px;
    color: #888;
    margin-bottom: 24px;
}

/* 모바일 */
@media (max-width: 768px) {
    .pickster-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pickster-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .pickster-room-list {
        grid-template-columns: 1fr;
    }

    .filter-tabs {
        width: 100%;
        gap: 6px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .filter-tab {
        white-space: nowrap;
    }

    /* 모바일: 전체 탭과 각 카지노 탭이 동일 너비 (flex는 EJS 인라인으로 설정됨) */
    .casino-tabs-group {
        gap: 6px;
        min-width: 0;
    }

    .filter-tab.all-tab {
        padding: 10px 6px;
        min-height: 52px;
    }

    .filter-tab.all-tab .all-tab-text {
        font-size: 13px;
    }

    /* 모바일에서는 카지노 탭 4개가 가로 스크롤 없이 한 줄에 균등 배치되도록 축소 */
    .filter-tab.casino-tab {
        flex: 1;
        padding: 10px 6px;
        min-width: 0;
    }

    .filter-tab.casino-tab img {
        width: 100%;
        height: 32px;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ========================================
   모달 스타일
   ======================================== */
.pickster-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pickster-modal {
    background: var(--bg-secondary, #0d2329);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.pickster-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pickster-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.pickster-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.pickster-modal-close:hover {
    color: #fff;
}

.pickster-modal-body {
    padding: 16px 20px;
}

.pickster-modal-body .form-group {
    margin-bottom: 12px;
}

.pickster-modal-body .radio-option {
    padding: 10px 14px;
}

.pickster-modal-body .radio-group {
    gap: 6px;
}

.pickster-modal-body .form-input,
.pickster-modal-body .form-select {
    padding: 10px 14px;
}

.pickster-modal-body .form-hint {
    margin-top: 4px;
}

.pickster-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pickster-modal-footer .btn {
    flex: 1;
}

/* 티켓 선택 카드 */
.ticket-select-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.ticket-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

.ticket-card-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.ticket-card-btn.active {
    border-color: rgba(245, 181, 68, 0.3);
    background: rgba(245, 181, 68, 0.05);
}

.ticket-card-btn-qty {
    font-size: 1.6rem;
    font-weight: 700;
    color: #444;
    line-height: 1;
}

.ticket-card-btn.active .ticket-card-btn-qty {
    color: var(--accent-color, #e8a01a);
}

.ticket-card-btn-name {
    font-size: 14px;
    font-weight: 600;
    color: #888;
}

.ticket-card-btn.active .ticket-card-btn-name {
    color: #fff;
}

.ticket-card-btn-desc {
    font-size: 11px;
    color: #555;
}

.ticket-card-btn.active .ticket-card-btn-desc {
    color: var(--accent-color, #e8a01a);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.form-group .required {
    color: #ef4444;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-color, #e8a01a);
}

.form-hint {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-option {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.radio-option input {
    display: none;
}

.radio-option input:checked + .radio-label::before {
    background: var(--accent-color, #e8a01a);
    border-color: var(--accent-color, #e8a01a);
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.radio-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #444;
    background: transparent;
    transition: all 0.2s;
}

.radio-desc {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    margin-left: 28px;
}

.casino-select-grid {
    display: grid;
    /* 2026-05: 활성 카지노 개수에 자동 적응 (1개=중앙, 2개=2열, 3+개=2~3열) */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.casino-select-btn {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.casino-select-btn img {
    height: 40px;
    width: auto;
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* 테마별 카지노 로고 토글 — 라이트=검정 로고(-light), 다크=흰 로고(-dark).
   구 evolution.png/pragmatic.png 는 2026-06 리스킨 때 삭제되어 엑박이었음. games/index.ejs 와 동일 규칙. */
.casino-select-btn .icon-dark { display: none; }
.casino-select-btn .icon-light { display: block; }
[data-theme="dark"] .casino-select-btn .icon-light { display: none; }
[data-theme="dark"] .casino-select-btn .icon-dark { display: block; }

.casino-select-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.casino-select-btn:hover img {
    opacity: 0.9;
}

.casino-select-btn.active {
    border-color: var(--accent-color, #e8a01a);
    background: rgba(245, 181, 68, 0.1);
}

.casino-select-btn.active img {
    opacity: 1;
}

.pickster-confirm-box {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.confirm-title {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
}

.confirm-row span:first-child {
    color: #888;
}

.confirm-row span:last-child {
    color: #fff;
    font-weight: 500;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}


/* ========================================
   픽스터룸 상세 페이지
   ======================================== */

/* 룸 전체 레이아웃 */
.pickster-room {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px 8px 16px;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 헤더 */
.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 16px;
}

.header-left {
    display: flex;
    align-items: center;
}

.pickster-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pickster-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(245, 181, 68, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(245, 181, 68, 0.35);
}

.pickster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pickster-avatar .avatar-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-primary, #e8a01a);
}

.pickster-info .pickster-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pickster-name .rank-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.pickster-name .nickname {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.owner-badge {
    padding: 2px 8px;
    background: rgba(245, 181, 68, 0.15);
    color: var(--accent-primary, #e8a01a);
    border: 1px solid rgba(245, 181, 68, 0.4);
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
}

.room-title {
    font-size: 14px;
    color: #888;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.room-header .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-icon {
    color: #666;
}

.room-header .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 13px;
    color: #888;
}

.stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.1);
}

.remaining-time {
    font-family: 'Roboto Mono', monospace;
}

.casino-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    letter-spacing: 0.3px;
}

.casino-badge.evolution {
    background: rgba(255, 107, 107, 0.1);
    color: #ff8585;
    border-color: rgba(255, 107, 107, 0.35);
}

.casino-badge.pragmatic {
    background: rgba(245, 181, 68, 0.1);
    color: var(--accent-primary, #e8a01a);
    border-color: rgba(245, 181, 68, 0.4);
}

.casino-badge.bota {
    background: rgba(167, 139, 250, 0.1);
    color: #b8a3ff;
    border-color: rgba(167, 139, 250, 0.35);
}

.btn-close-room {
    padding: 8px 14px;
    font-size: 13px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close-room:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* 메인 컨텐츠 */
.room-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

/* 슈 데이터 영역 */
.room-left {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* 빅로드 빈 상태 */
.pickster-room .bigroad-empty {
    min-height: 180px;
}

/* 픽스터룸 테이블카드 (분석기와 동일한 구조) */
.pickster-room .table-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.pickster-room .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pickster-room .table-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.pickster-room .table-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 결과 수 제한 셀렉트 */
.result-limit-select {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}
.result-limit-select:focus {
    border-color: rgba(45, 212, 191, 0.3);
}
.result-limit-select option {
    background: #1a1a2e;
    color: #fff;
}

/* 테이블 토글 버튼 */
.table-toggles {
    display: flex;
    gap: 6px;
    margin-right: 8px;
    align-items: center;
}

.table-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.table-toggle-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.table-toggle-btn.active {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.3);
    color: #2dd4bf;
}

.table-toggle-btn .toggle-label {
    font-weight: 600;
}

.table-toggle-btn .toggle-status {
    font-weight: 700;
    font-size: 10px;
}


/* 토스트 메시지 */
.pickster-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 212, 191, 0.9);
    color: #000;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    z-index: 10002;
    animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in 2s forwards;
    pointer-events: none;
}

@keyframes toastIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.pickster-room .table-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.pickster-room .table-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pickster-room .table-stats .stat-label {
    color: #888;
    font-weight: 500;
}

.pickster-room .table-stats .stat-value {
    font-weight: 700;
    color: #ccc;
}

.pickster-room .table-stats .stat-percent {
    color: #666;
    font-size: 11px;
}

.pickster-room .table-stats .stat-item.player .stat-value { color: var(--color-player, #1BA9DE); }
.pickster-room .table-stats .stat-item.banker .stat-value { color: var(--color-banker, #E62626); }
.pickster-room .table-stats .stat-item.tie .stat-value { color: var(--color-tie, #91C653); }

/* 빅로드 컨테이너 */
.pickster-room .bigroad-container {
    overflow-x: auto;
    overflow-y: hidden;
}

/* 채팅 영역 */
.room-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.chat-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    text-align: left;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.chat-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.chat-count {
    font-size: 12px;
    color: #666;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    text-align: left;
}

.chat-messages .chat-message + .chat-message {
    margin-top: 8px;
}

/* 채팅 메시지 */
.chat-message {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border-left: 3px solid transparent;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.chat-message.pickster {
    background: rgba(245, 181, 68, 0.08);
    border-left-color: var(--accent-color);
}

.message-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.message-rank-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.message-nickname {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    cursor: pointer;
}

.message-nickname:hover {
    text-decoration: underline;
}

.message-nickname.is-pickster {
    color: var(--accent-color);
}

.pickster-tag {
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--accent-color);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
}

.message-time {
    font-size: 11px;
    color: #555;
    margin-left: auto;
}

.message-content {
    font-size: 14px;
    color: #ddd;
    line-height: 1.5;
    word-break: break-word;
}

.message-content .mention {
    color: #f59e0b;
    font-weight: 600;
    cursor: pointer;
}

.message-content .mention:hover {
    text-decoration: underline;
}

/* 채팅 입력 */
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.chat-input-wrap {
    flex: 1;
    position: relative;
}

.chat-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.chat-input::placeholder {
    color: #555;
}

.btn-send {
    padding: 10px 16px;
}

/* 멘션 드롭다운 */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #1a2a35;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    margin-bottom: 4px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.mention-dropdown.show {
    display: block;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.mention-item:hover,
.mention-item.selected {
    background: rgba(245, 181, 68, 0.15);
}

.mention-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.mention-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-item-avatar span {
    font-size: 12px;
    font-weight: 600;
    color: #888;
}

.mention-item-info {
    flex: 1;
    min-width: 0;
}

.mention-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.mention-item-badge {
    font-size: 11px;
    color: var(--accent-color);
    margin-left: 6px;
}

.mention-empty {
    padding: 12px 14px;
    color: #666;
    font-size: 13px;
    text-align: center;
}

/* 픽 영역 (테이블 카드 내부) */
.pick-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.pick-current {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pick-label {
    font-size: 14px;
    color: #888;
}

.pick-value {
    font-size: 20px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px;
}

.pick-value.banker {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pick-value.player {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pick-value.none {
    background: rgba(255, 255, 255, 0.05);
    color: #666;
    font-size: 14px;
    padding: 8px 16px;
}

.pick-value.none .waiting-text {
    font-size: 14px;
    font-weight: 500;
}

.pick-stats {
    display: flex;
    gap: 24px;
}

.pick-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pick-stat-item .label {
    font-size: 13px;
    color: #666;
}

.pick-stat-item .value {
    font-size: 14px;
    color: #ccc;
}

.pick-stat-item .value .win { color: #3b82f6; }
.pick-stat-item .value .tie { color: #22c55e; }
.pick-stat-item .value .lose { color: #ef4444; }

.pick-stat-item .value.streak.win {
    color: #f59e0b;
    font-weight: 600;
}

.pick-stat-item .value.streak.lose {
    color: #ef4444;
}

.pick-controls {
    display: flex;
    gap: 10px;
}

/* 카드 오버레이 (분석기와 동일) */
.pickster-room .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    animation: overlayFadeIn 0.2s ease;
}

.pickster-room .card-overlay.fade-out {
    animation: overlayFadeOut 0.3s ease forwards;
}

.pickster-room .overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 8px;
}

.pickster-room .cards-display {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.pickster-room .player-area,
.pickster-room .banker-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.pickster-room .win-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.pickster-room .player-area .win-badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

.pickster-room .banker-area .win-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.pickster-room .win-badge.show {
    animation: winPop 0.4s ease;
}

.pickster-room .vs-divider {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    padding: 0 4px;
    margin-top: 30px;
}

.pickster-room .side-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pickster-room .player-area .side-label { color: #3b82f6; }
.pickster-room .banker-area .side-label { color: #ef4444; }

.pickster-room .cards-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pickster-room .card-slot {
    width: 48px;
    height: 68px;
    background: transparent;
    border: none;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}

.pickster-room .card-slot.filled {
    background: linear-gradient(145deg, #f8f6f0, #e8e4d9);
    border: 1px solid #c0b8a8;
    color: #2c2c2c;
    animation: cardPop 0.25s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}

.pickster-room .card-slot.filled.red {
    color: #b22222;
}

.pickster-room .card-slot.third-card {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: none;
}

.pickster-room .card-slot.third-card.filled {
    width: 48px;
    height: 68px;
    opacity: 1;
    overflow: visible;
}

.pickster-room .player-area .card-slot.third-card.filled {
    transform: rotate(90deg);
    margin-right: 10px;
    animation: playerThirdCardPop 0.2s ease;
}

.pickster-room .banker-area .card-slot.third-card.filled {
    transform: rotate(-90deg);
    margin-left: 10px;
    animation: bankerThirdCardPop 0.2s ease;
}

.pickster-room .card-tl, .pickster-room .card-tr,
.pickster-room .card-bl, .pickster-room .card-br {
    position: absolute;
    font-weight: 900;
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1;
}

.pickster-room .card-tl, .pickster-room .card-br { font-size: 18px; }
.pickster-room .card-tr, .pickster-room .card-bl { font-size: 20px; }

.pickster-room .rank-ten { letter-spacing: -3px; }

.pickster-room .card-tl { top: 4px; left: 6px; }
.pickster-room .card-tr { top: 4px; right: 6px; }
.pickster-room .card-bl { bottom: 4px; left: 6px; transform: rotate(180deg); }
.pickster-room .card-br { bottom: 4px; right: 6px; transform: rotate(180deg); }

.pickster-room .score-badge {
    font-size: 18px;
    font-weight: 800;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.pickster-room .player-area .score-badge { border-color: rgba(59, 130, 246, 0.5); color: #60a5fa; }
.pickster-room .banker-area .score-badge { border-color: rgba(239, 68, 68, 0.5); color: #f87171; }

.pickster-room .tie-badge {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    letter-spacing: 2px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.pickster-room .tie-badge.show { animation: winPop 0.4s ease; }

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

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes overlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes playerThirdCardPop {
    0% { transform: rotate(90deg) scale(0.5); opacity: 0; }
    50% { transform: rotate(90deg) scale(1.08); }
    100% { transform: rotate(90deg) scale(1); opacity: 1; }
}

@keyframes bankerThirdCardPop {
    0% { transform: rotate(-90deg) scale(0.5); opacity: 0; }
    50% { transform: rotate(-90deg) scale(1.08); }
    100% { transform: rotate(-90deg) scale(1); opacity: 1; }
}

/* 슈 체인지 오버레이 (분석기와 동일) */
.pickster-room .shoe-change-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.95), rgba(6, 95, 70, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    border-radius: inherit;
    animation: shoeOverlayIn 0.4s ease;
}

.pickster-room .shoe-change-overlay.fade-out {
    animation: shoeOverlayOut 0.5s ease forwards;
}

.pickster-room .shoe-change-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: white;
    text-align: center;
}

.pickster-room .shoe-icon { animation: shoeIconSpin 1s ease-in-out; }
.pickster-room .shoe-icon svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.pickster-room .shoe-text { font-size: 24px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); animation: shoeTextPop 0.5s ease 0.2s both; }
.pickster-room .shoe-subtext { font-size: 12px; font-weight: 500; opacity: 0.8; letter-spacing: 1px; animation: shoeTextPop 0.5s ease 0.3s both; }

@keyframes shoeOverlayIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shoeOverlayOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes shoeIconSpin { 0% { transform: rotate(0deg) scale(0.5); opacity: 0; } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); opacity: 1; } }
@keyframes shoeTextPop { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* 스크롤바 */
.chat-messages::-webkit-scrollbar,
.bigroad-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.bigroad-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02);
}

.chat-messages::-webkit-scrollbar-thumb,
.bigroad-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* ========================================
   상세 페이지 구성요소 (분석기 재사용)
   ======================================== */

/* 좌측 영역 스크롤 */
.room-left {
    overflow-y: auto;
    max-height: calc(100vh - 90px);
}

/* 페어 통계 */
.pickster-room .detail-stats-section {
    padding: 0 12px 12px;
}

.pickster-room .pair-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pickster-room .pair-stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
}

.pickster-room .pair-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
}

.pickster-room .pp-card::before { background: #3b82f6; }
.pickster-room .bp-card::before { background: #ff8a65; }
.pickster-room .dpp-card::before { background: #ffd740; }

.pickster-room .dpp-card {
    grid-column: 1 / -1;
}

.pickster-room .pair-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pickster-room .pp-card .pair-stat-label { color: #3b82f6; }
.pickster-room .bp-card .pair-stat-label { color: #ff8a65; }
.pickster-room .dpp-card .pair-stat-label { color: #ffd740; }

.pickster-room .pair-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pickster-room .pair-stat-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pickster-room .pair-stat-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.pickster-room .pair-stat-pct {
    font-size: 0.7rem;
    color: #999;
    font-weight: 500;
}

.pickster-room .pair-stat-perfect {
    text-align: right;
    border-left: 1px solid rgba(255,255,255,0.06);
    padding-left: 8px;
}

.pickster-room .pair-stat-perfect-label {
    display: block;
    font-size: 0.55rem;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 2px;
}

.pickster-room .pair-stat-perfect-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: #999;
}

.pickster-room .pair-stat-perfect-val .ppp-pct,
.pickster-room .pair-stat-perfect-val .bpp-pct {
    font-size: 0.6rem;
    font-weight: 400;
    color: #666;
}

/* 카드 카운팅 */
.pickster-room .card-counting-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
}

.pickster-room .card-counting-section .section-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #999;
}

.pickster-room .card-count-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.pickster-room .card-count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}

.pickster-room .card-count-item:hover {
    border-color: #e8a01a;
}

.pickster-room .card-count-rank {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1;
}

.pickster-room .card-count-suits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    width: 100%;
}

.pickster-room .suit-count {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.4);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.pickster-room .suit-count .suit-symbol {
    font-size: 0.9rem;
}

.pickster-room .suit-count.spade,
.pickster-room .suit-count.club { color: #b0b0b0; }
.pickster-room .suit-count.heart,
.pickster-room .suit-count.diamond { color: #e05555; }

.pickster-room .card-count-total {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e8a01a;
    margin-bottom: 4px;
}

.pickster-room .card-count-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}

.pickster-room .card-count-bar-fill {
    height: 100%;
    background: #e8a01a;
    border-radius: 2px;
}

/* 회차별 결과 */
.pickster-room .rounds-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.pickster-room .rounds-section .section-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #999;
}

.pickster-room .rounds-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pickster-room .round-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.2s;
}

.pickster-room .round-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.pickster-room .round-item.round-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.pickster-room .round-item.new-round {
    animation: newRoundPulse 0.5s ease;
}

@keyframes newRoundPulse {
    0% { transform: scale(1.01); box-shadow: 0 0 20px rgba(245, 181, 68, 0.3); }
    100% { transform: scale(1); box-shadow: none; }
}

.pickster-room .round-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pickster-room .round-number {
    font-size: 0.8rem;
    font-weight: 600;
    color: #999;
}

.pickster-room .round-time {
    font-size: 0.7rem;
    color: #666;
}

.pickster-room .round-result {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pickster-room .round-result.player {
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
}

.pickster-room .round-result.banker {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.pickster-room .round-result.tie {
    background: rgba(81, 207, 102, 0.2);
    color: #51cf66;
}

/* 페어 배지 */
.pickster-room .pair-badges {
    display: flex;
    gap: 3px;
}

.pickster-room .pair-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

.pickster-room .pair-badge.pp {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pickster-room .pair-badge.bp {
    background: rgba(255, 138, 101, 0.2);
    color: #ff8a65;
    border: 1px solid rgba(255, 138, 101, 0.3);
}

/* 카드 영역 */
.pickster-room .round-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}

.pickster-room .cards-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    min-width: 100px;
}

.pickster-room .cards-area.player-area {
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.2);
}

.pickster-room .cards-area.banker-area {
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.pickster-room .cards-area.winner {
    border-width: 2px;
}

.pickster-room .cards-area.player-area.winner {
    background: rgba(74, 158, 255, 0.15);
    border-color: #4a9eff;
}

.pickster-room .cards-area.banker-area.winner {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
}

.pickster-room .cards-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pickster-room .cards-area.player-area .cards-label { color: #4a9eff; }
.pickster-room .cards-area.banker-area .cards-label { color: #ff6b6b; }

.pickster-room .vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #666;
    background: rgba(255,255,255,0.02);
    letter-spacing: 1px;
}

.pickster-room .cards-score {
    font-size: 0.9rem;
    font-weight: 800;
}

.pickster-room .cards-area.player-area .cards-score { color: #4a9eff; }
.pickster-room .cards-area.banker-area .cards-score { color: #ff6b6b; }

.pickster-room .cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
}

.pickster-room .main-cards {
    display: flex;
    gap: 4px;
}

.pickster-room .third-card-wrapper {
    display: flex;
    align-items: center;
}

.pickster-room .cards-area.player-area .third-card-wrapper {
    margin-right: 4px;
}

.pickster-room .cards-area.banker-area .third-card-wrapper {
    margin-left: 4px;
}

/* 카드 슬롯 */
.pickster-room .detail-card {
    width: 36px;
    height: 52px;
    background: linear-gradient(145deg, #f8f6f0, #e8e4d9);
    border: 1px solid #c0b8a8;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.9);
    flex-shrink: 0;
    color: #2c2c2c;
}

.pickster-room .detail-card.placeholder {
    background: linear-gradient(145deg, #f8f6f0, #e8e4d9);
    border: 1px solid #c0b8a8;
}

.pickster-room .detail-card.placeholder .card-tl,
.pickster-room .detail-card.placeholder .card-tr,
.pickster-room .detail-card.placeholder .card-bl,
.pickster-room .detail-card.placeholder .card-br {
    color: #2c2c2c;
    font-size: 14px;
}

.pickster-room .detail-card.third-card {
    width: 36px;
    height: 52px;
}

.pickster-room .cards-area.player-area .detail-card.third-card {
    transform: rotate(90deg);
}

.pickster-room .cards-area.banker-area .detail-card.third-card {
    transform: rotate(-90deg);
}

.pickster-room .detail-card.black { color: #2c2c2c; }
.pickster-room .detail-card.red { color: #b22222; }

.pickster-room .detail-card .card-tl,
.pickster-room .detail-card .card-tr,
.pickster-room .detail-card .card-bl,
.pickster-room .detail-card .card-br {
    position: absolute;
    font-weight: 900;
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1;
}

.pickster-room .detail-card .card-tl,
.pickster-room .detail-card .card-br {
    font-size: 13px;
}

.pickster-room .detail-card .card-tr,
.pickster-room .detail-card .card-bl {
    font-size: 15px;
}

.pickster-room .detail-card .rank-ten {
    letter-spacing: -2px;
}

.pickster-room .detail-card .card-tl { top: 3px; left: 4px; }
.pickster-room .detail-card .card-tr { top: 3px; right: 4px; }
.pickster-room .detail-card .card-bl { bottom: 3px; left: 4px; transform: rotate(180deg); }
.pickster-room .detail-card .card-br { bottom: 3px; right: 4px; transform: rotate(180deg); }

/* 페이지네이션 */
.pickster-room .pagination {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pickster-room .pagination-top {
    justify-content: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pickster-room .pagination-bottom {
    justify-content: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.pickster-room .page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: #999;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pickster-room .page-btn:hover:not(.active):not(.disabled) {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.pickster-room .page-btn.active {
    background: #e8a01a;
    border-color: #e8a01a;
    color: white;
    font-weight: 600;
}

.pickster-room .page-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pickster-room .page-ellipsis {
    padding: 0 2px;
    color: #666;
}

.pickster-room .empty-message {
    text-align: center;
    padding: 1.5rem;
    color: #666;
    font-size: 0.85rem;
}

/* 플로팅 채팅 버튼 & 닫기 버튼 (PC에서 숨김) */
.chat-float-btn {
    display: none;
}
.chat-close-btn {
    display: none;
}

/* 반응형 */
@media (max-width: 900px) {
    .room-content {
        grid-template-columns: 1fr;
    }

    /* 모바일: 채팅 영역 숨기고 모달로 전환 */
    .room-right {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0,0,0,0.6);
        padding: 16px;
    }
    .room-right.mobile-open {
        display: flex;
        animation: chatSlideUp 0.25s ease-out;
    }
    @keyframes chatSlideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .room-right .chat-section {
        max-height: none;
        height: 100%;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    /* 닫기 버튼 표시 */
    .chat-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: none;
        background: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.7);
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        flex-shrink: 0;
        margin-right: 6px;
    }
    .chat-close-btn:hover {
        background: rgba(255,255,255,0.15);
    }

    /* 플로팅 버튼 표시 */
    .chat-float-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #00c9a7, #00b4d8);
        color: #fff;
        font-size: 24px;
        border: none;
        cursor: pointer;
        z-index: 999;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        transition: transform 0.15s;
    }
    .chat-float-btn:active {
        transform: scale(0.92);
    }
    .chat-float-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        background: #ef4444;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .pick-section {
        align-items: flex-start;
    }
    .pick-controls {
        width: 100%;
    }
    .pick-controls .btn {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .room-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .pick-stats {
        flex-direction: column;
        gap: 8px;
    }
}

/* ========================================
   판정 결과 오버레이
   ======================================== */
.judge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.judge-overlay.show {
    opacity: 1;
}

/* 적중 - 배경 글로우 */
.judge-overlay.correct {
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
}
.judge-overlay.wrong {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.12) 0%, transparent 70%);
}
.judge-overlay.tie {
    background: radial-gradient(circle at center, rgba(148, 163, 184, 0.08) 0%, transparent 70%);
}

.judge-content {
    padding: 36px 52px;
    border-radius: 24px;
    backdrop-filter: blur(24px);
    text-align: center;
    transform: scale(0.85);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.judge-overlay.show .judge-content {
    transform: scale(1);
}

.judge-overlay.correct .judge-content {
    background: rgba(34, 197, 94, 0.1);
    border: 1.5px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 80px rgba(34, 197, 94, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.judge-overlay.wrong .judge-content {
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 80px rgba(239, 68, 68, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.judge-overlay.tie .judge-content {
    background: rgba(148, 163, 184, 0.08);
    border: 1.5px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 0 60px rgba(148, 163, 184, 0.12), 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* 아이콘 래퍼 */
.judge-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
}

.judge-icon {
    width: 80px;
    height: 80px;
}

.judge-icon svg {
    width: 100%;
    height: 100%;
}

/* SVG 애니메이션 */
.judge-overlay.correct .judge-icon { color: #22c55e; }
.judge-overlay.wrong .judge-icon { color: #ef4444; }
.judge-overlay.tie .judge-icon { color: #94a3b8; }

.judge-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: judgeCircle 0.5s ease forwards;
}

.judge-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: judgeStroke 0.35s 0.3s ease forwards;
}

.judge-cross {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: judgeStroke 0.35s 0.3s ease forwards;
}

@keyframes judgeCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes judgeStroke {
    to { stroke-dashoffset: 0; }
}

.judge-text {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.judge-sub {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.5px;
}

/* ========================================
   테이블 변경 모달
   ======================================== */
.table-change-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.table-change-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.table-change-modal .modal-content {
    position: relative;
    width: 90%;
    max-width: 440px;
    padding: 0;
    z-index: 1;
}

.table-change-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.table-change-modal .modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.table-change-modal .modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 24px;
    cursor: pointer;
}

.table-change-modal .modal-body {
    padding: 24px;
}

.table-change-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

.table-change-modal .form-input {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.table-change-modal .form-input option {
    background: #1a1a1a;
    color: #fff;
}

.table-change-modal .form-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.table-change-modal .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* 테이블 변경 버튼 */
.btn-change-table {
    font-size: 13px;
    padding: 6px 14px;
}

/* ========================================
   잔액/베팅 설정
   ======================================== */
.balance-display {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.balance-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
}

.balance-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.balance-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.balance-amount {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
}

.balance-item.current .balance-amount {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.balance-amount.profit-plus { color: #22c55e; }
.balance-amount.profit-minus { color: #ef4444; }

.balance-unit {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

.balance-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

.balance-profit-tag {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.balance-profit-tag.profit-plus {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.balance-profit-tag.profit-minus {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.bet-settings {
    padding: 8px 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    box-sizing: border-box;
    text-align: center;
}
.bet-settings > .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}
.bet-settings > span {
    flex: 0 0 auto;
}
@media (max-width: 600px) {
    .bet-settings { flex-wrap: wrap; }
    .bet-settings > .btn { flex: 1 1 100%; }
}

/* 베팅 타이머 — emerald 통일 */
.betting-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px auto;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    font-size: 13px;
    color: #34d399;
    font-weight: 600;
    width: fit-content;
}
.betting-timer .betting-timer-sec {
    font-family: 'Menlo','Consolas',monospace;
    font-size: 16px;
    font-weight: 800;
    color: #f5b544;
}

/* 대회 종료 안내 — emerald 통일 */
.bet-locked-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    text-align: center;
    color: #f5b544;
    font-size: 13px;
    font-weight: 600;
}

/* 다크틸 통일 — bet-settings 버튼/뱃지/상태 */
.bet-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #cbd5e1);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bet-settings-btn:hover {
    background: rgba(245, 181, 68,0.08);
    border-color: rgba(245, 181, 68,0.35);
    color: var(--accent-primary, #e8a01a);
}
.bet-settings-btn svg { flex-shrink: 0; }
.bet-settings-btn.is-register {
    background: rgba(245, 181, 68,0.12);
    border-color: rgba(245, 181, 68,0.45);
    color: var(--accent-primary, #e8a01a);
}
.bet-settings-btn.is-register:hover {
    background: rgba(245, 181, 68,0.2);
    border-color: rgba(245, 181, 68,0.65);
}
.bet-settings-btn.is-close:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.4);
    color: #f87171;
}
.bet-settings .ticket-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 1px 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}
.bet-settings-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(245, 181, 68,0.12);
    color: var(--accent-primary, #e8a01a);
    border: 1px solid rgba(245, 181, 68,0.35);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.bet-setting-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bet-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    height: 36px;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    outline: none;
}

.bet-input:focus {
    border-color: var(--teal-primary, #2dd4bf);
}

.bet-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-accent {
    background: var(--teal-primary, #2dd4bf);
    color: #000;
    border: none;
    font-weight: 700;
    cursor: pointer;
}

.btn-accent:hover {
    background: var(--teal-hover, #e8a01a);
}

/* ========================================
   채팅 시스템 메시지
   ======================================== */
.chat-message.system-message {
    text-align: center;
    padding: 6px 12px;
    margin: 4px 0;
}

.system-message-content {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.system-message.system-pick .system-message-content {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.system-message.system-balance_set .system-message-content {
    background: rgba(16, 185, 129, 0.08);
    color: #f5b544;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.system-message.system-result_win .system-message-content {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.system-message.system-result_lose .system-message-content {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.system-message.system-result_tie .system-message-content {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.system-message.system-gift .system-message-content {
    background: rgba(16, 185, 129, 0.1);
    color: #f5b544;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

/* 시스템 메시지 내 PLAYER/BANKER 색상 */
.sys-player { color: #3b82f6; font-weight: 800; }
.sys-banker { color: #ef4444; font-weight: 800; }

/* 빅로드 페어 도트 */
.pickster-room .pair-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 2;
}
.pickster-room .pair-dot.pp-dot {
    top: 1px;
    left: 1px;
    background: #3b82f6;
}
.pickster-room .pair-dot.bp-dot {
    bottom: 1px;
    right: 1px;
    background: #ff8a65;
}
.pickster-room .pair-dot.perfect {
    box-shadow: 0 0 3px 1px currentColor;
}

/* ========================================
   (에볼루션 스타일)
   ======================================== */
.pickster-room .betting-board {
    margin: 8px auto 0;
    max-width: 600px;
    width: 100%;
    align-self: center;
    border-radius: 12px;
    overflow: hidden;
    background: #0a1410;
    border: 1px solid rgba(16, 185, 129, 0.25);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* 베팅 영역 그리드 (4:2:4) */
.bet-areas {
    display: grid;
    grid-template-columns: 4fr 2fr 4fr;
    min-height: 120px;
}

.bet-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: filter 0.15s;
    border: 1px solid rgba(255,255,255,0.06);
}
.bet-area:hover:not(.locked):not(.disabled) {
    filter: brightness(1.25);
}
.bet-area:active:not(.locked):not(.disabled) {
    filter: brightness(1.4);
}
.bet-area.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.bet-area.locked {
    cursor: default;
}

/* 플레이어 — 다크 + emerald 액센트 (사이드 보더로 식별) */
.bet-area.area-player {
    background: #0d1620;
    box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.55);
}
.bet-area.area-player .area-label-main { color: #93c5fd; }
/* 타이 — emerald 중앙 */
.bet-area.area-tie {
    background: #0d1a17;
    box-shadow: inset 0 3px 0 rgba(16, 185, 129, 0.6);
}
.bet-area.area-tie .area-label-sub { color: #f5b544; }
/* 뱅커 — 다크 + 와인 보더 (사이드 보더로 식별) */
.bet-area.area-banker {
    background: #1a1014;
    box-shadow: inset -3px 0 0 rgba(248, 113, 113, 0.55);
}
.bet-area.area-banker .area-label-main { color: #fca5a5; }

/* 레이블: 페어 영역 */
.area-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-align: center;
    line-height: 1.3;
}
.area-odds {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
}

/* 레이블: 메인 영역 (플레이어/뱅커) */
.area-label-main {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* 레이블: 타이 영역 */
.area-label-sub {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.area-label-sub em {
    font-style: normal;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
}

/* 베팅금 표시 */
.bet-amount-display {
    display: none;
    margin-bottom: 4px;
    padding: 4px 14px;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(245, 181, 68,0.55);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-primary, #e8a01a);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.bet-area.has-bet {
    box-shadow: inset 0 0 18px rgba(245, 181, 68,0.18);
}

/* ===== 칩 바 ===== */
.chip-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 12px;
    background: var(--bg-secondary, #151c24);
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}

.chip-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
}

.chip {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    padding: 0;
    outline: none;
}
.chip span {
    /* 칩 내부 텍스트 숨김 (SVG에 텍스트 포함) */
    font-size: 0;
    color: transparent;
}
.chip:hover {
    transform: translateY(-4px);
    filter: brightness(1.15);
}
.chip.selected {
    transform: translateY(-6px) scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(245, 181, 68,0.6)) brightness(1.1);
}

.chip-50k { background-image: url('/img/chips/chip-50k.svg'); }
.chip-100k { background-image: url('/img/chips/chip-100k.svg'); }
.chip-500k { background-image: url('/img/chips/chip-500k.svg'); }
.chip-1m { background-image: url('/img/chips/chip-1m.svg'); }
.chip-5m { background-image: url('/img/chips/chip-5m.svg'); }

/* 칩 액션 버튼 (되돌리기 / 2배) */
.chip-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.15s;
}
.chip-action-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.chip-action-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}

/* 베팅 액션 바 */
.bet-action-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-primary, #0f1419);
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.btn-bet-clear, .btn-bet-submit, .btn-bet-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-bet-clear {
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #cbd5e1);
}
.btn-bet-clear:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--glass-border-light, rgba(255,255,255,0.16));
    color: var(--text-primary, #f1f5f9);
}
.btn-bet-submit {
    background: var(--accent-primary, #e8a01a);
    border-color: var(--accent-primary, #e8a01a);
    color: var(--bg-primary, #0f1419);
    font-size: 14px;
}
.btn-bet-submit:hover {
    background: var(--accent-secondary, #10b981);
    border-color: var(--accent-secondary, #10b981);
}
.btn-bet-cancel {
    background: transparent;
    color: #f87171;
    border-color: rgba(239,68,68,0.4);
}
.btn-bet-cancel:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.6);
}

.pickster-room /* 뷰어 모드 (비방장) */
.betting-board.viewer-mode .bet-area {
    cursor: default;
}
.betting-board.viewer-mode .bet-area:hover {
    filter: none;
}
.betting-board.viewer-mode .bet-area:active {
    filter: none;
}

.betting-board.bet-locked .chip-bar {
    opacity: 0.4;
    pointer-events: none;
}
.pickster-room .betting-board.bet-locked .btn-bet-clear,
.pickster-room .betting-board.bet-locked .btn-bet-submit {
    opacity: 0.3;
    pointer-events: none;
}

/* 모바일 반응형 */
@media (max-width: 560px) {
    .bet-areas {
        grid-template-columns: 4fr 2fr 4fr;
        min-height: 90px;
    }
    .area-label-main { font-size: 14px; }
    .chip { width: 40px; height: 40px; }
    .chip-group { gap: 5px; }
    .chip-action-btn { width: 36px; height: 36px; }
    .chip-action-icon { font-size: 15px; }
}

/* ========================================
   고정 메시지
   ======================================== */
.pinned-message {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255,215,0,0.08);
    border-bottom: 1px solid rgba(255,215,0,0.15);
    font-size: 12px;
    color: #ffd700;
}
.pin-icon { font-size: 12px; flex-shrink: 0; }
.pin-content {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   채팅 헤더 액션 버튼
   ======================================== */
.chat-header-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.chat-action-btn {
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.15s;
}
.chat-action-btn:hover {
    background: rgba(255,255,255,0.10);
    color: var(--text-primary, #e2e8f0);
    border-color: rgba(255,255,255,0.16);
}
.chat-action-btn svg { display: block; }

/* ============================================================
   대회 참가 모달 — 정책 안내 박스 (각 라인 nowrap)
   ============================================================ */
.contest-rules-box {
    margin-bottom: 16px;
    padding: 12px 14px 12px;
    background: linear-gradient(135deg, rgba(245,158,11,0.09), rgba(245,158,11,0.03));
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.contest-rules-box .rules-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fcd34d;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(245,158,11,0.25);
}
.contest-rules-box .rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.contest-rules-box .rules-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #fde68a;
}
.contest-rules-box .rules-list li .ico {
    flex-shrink: 0;
    font-size: 13px;
    width: 16px;
    text-align: center;
}
.contest-rules-box .rules-list li .txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.contest-rules-box .rules-list li strong {
    color: #fef3c7;
    font-weight: 700;
}
.contest-rules-box .rules-list li.must { color: #fca5a5; }
.contest-rules-box .rules-list li.must strong { color: #fecaca; }

@media (max-width: 480px) {
    .contest-rules-box .rules-list li { font-size: 11.5px; }
}

/* SVG 아이콘 정렬 — index.ejs의 이모지를 SVG로 교체한 곳들 */
.my-tickets-banner.empty-state .empty-state-icon {
    color: var(--accent-color, #e8a01a);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}
.my-tickets-banner.empty-state .empty-state-icon svg { display: block; opacity: 0.9; }

.tickets-summary .ts-item .ts-ico {
    color: #f5b544;
    flex-shrink: 0;
}

.pickster-notice-board .board-header h3 a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pickster-notice-board .board-header h3 .nb-ico { flex-shrink: 0; opacity: 0.85; }

.contest-rules-box .rules-title svg { flex-shrink: 0; opacity: 0.9; }
.contest-rules-box .rules-list li .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}
.contest-rules-box .rules-list li .ico svg { display: block; }
.contest-rules-box .rules-list li.must .ico { opacity: 1; }

.rejoin-active-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-weight: 700;
    padding: 6px 14px;
}



/* ===========================================================================
 * 픽스터 — 라이트 모드 컬러 매핑 (2026-05-26)
 *
 * 목표: 라이트 모드일 때 픽스터 영역도 라이트 톤으로 사이트 전체와 일관되게.
 *       다크 강제 X. 흰 배경 카드 + 검정/회색 텍스트.
 *
 * 적용: .pickster-page 컨테이너 안의 자손만 (사이드바/footer 영향 없음)
 * 룸 페이지(/pickster/room/:id)는 pickster-room.ejs에서 다크 강제 유지 (베팅 UI 특성)
 * =========================================================================== */

/* 픽스터 페이지 root — 라이트 모드 배경 (사이트 따라감) */
[data-theme="light"] .pickster-page {
    background: transparent;
    color: #0b1220;
}

/* 카드 / 배너 / 섹션 박스 — 흰 배경 + 옅은 보더 */
[data-theme="light"] .pickster-page .my-tickets-banner,
[data-theme="light"] .pickster-page .empty-state,
[data-theme="light"] .pickster-page .pickster-room-card,
[data-theme="light"] .pickster-page .pickster-card,
[data-theme="light"] .pickster-page .pwr-card,
[data-theme="light"] .pickster-page .pickster-rank-dashboard,
[data-theme="light"] .pickster-page .pickster-section,
[data-theme="light"] .pickster-page .my-status-card,
[data-theme="light"] .pickster-page .my-room-info,
[data-theme="light"] .pickster-page .my-history-card,
[data-theme="light"] .pickster-page .my-history-day,
[data-theme="light"] .pickster-page .pickster-notice-board,
[data-theme="light"] .pickster-page .pickster-banners,
[data-theme="light"] .pickster-page .pickster-banner-area,
[data-theme="light"] .pickster-page .ranking-table,
[data-theme="light"] .pickster-page .ranking-list,
[data-theme="light"] .pickster-page .card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .pickster-page .pickster-room-card.my-room {
    background: #fffdf5;
    border-color: rgba(232, 160, 26, 0.45);
}

/* 페이지 헤더 + 타이틀 */
[data-theme="light"] .pickster-page .page-title,
[data-theme="light"] .pickster-page .pickster-header,
[data-theme="light"] .pickster-page h1,
[data-theme="light"] .pickster-page h2,
[data-theme="light"] .pickster-page h3,
[data-theme="light"] .pickster-page h4,
[data-theme="light"] .pickster-page .pickster-section-title {
    color: #0b1220;
}
[data-theme="light"] .pickster-page .page-subtitle,
[data-theme="light"] .pickster-page .pickster-section-sub,
[data-theme="light"] .pickster-page .pickster-help-text,
[data-theme="light"] .pickster-page .ts-label,
[data-theme="light"] .pickster-page .ts-hint,
[data-theme="light"] .pickster-page .ts-divider,
[data-theme="light"] .pickster-page .empty-state-desc {
    color: #475569;
}
[data-theme="light"] .pickster-page .empty-state-title,
[data-theme="light"] .pickster-page .ts-item {
    color: #0b1220;
}

/* 카지노 필터 / 메인 탭 / 정렬 — 라이트 톤 */
[data-theme="light"] .pickster-page .casino-filter,
[data-theme="light"] .pickster-page .filter-bar,
[data-theme="light"] .pickster-page .pickster-main-tabs,
[data-theme="light"] .pickster-page .pickster-main-tab,
[data-theme="light"] .pickster-page .casino-tab,
[data-theme="light"] .pickster-page .casino-select-btn,
[data-theme="light"] .pickster-page .sort-options {
    background: #ffffff;
    color: #0b1220;
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .pickster-page .pickster-main-tab.active,
[data-theme="light"] .pickster-page .casino-tab.active {
    color: #0b1220;
}

/* 게이지/통계 표준 색 — 라이트 모드 대비 강화 */
[data-theme="light"] .pickster-page .record-total { color: #475569; }
[data-theme="light"] .pickster-page .record-win   { color: #15803d; }
[data-theme="light"] .pickster-page .record-tie   { color: #475569; }
[data-theme="light"] .pickster-page .record-lose  { color: #b91c1c; }
[data-theme="light"] .pickster-page .stats-profit.profit-plus,
[data-theme="light"] .pickster-page .balance-amount.profit-plus  { color: #15803d; }
[data-theme="light"] .pickster-page .stats-profit.profit-minus,
[data-theme="light"] .pickster-page .balance-amount.profit-minus { color: #b91c1c; }

/* 바카라 대회 공지 영역 — 라이트 모드 글씨 대비 (흰 배경에서 가독) */
[data-theme="light"] .pickster-page .pickster-notice-board .board-header h3 a { color: #0f172a; }
[data-theme="light"] .pickster-page .pickster-notice-board .board-list li a { color: #1e293b; }
[data-theme="light"] .pickster-page .pickster-notice-board .board-list .post-title { color: #1e293b; }
[data-theme="light"] .pickster-page .pickster-notice-board .board-list .post-date { color: #475569; }
[data-theme="light"] .pickster-page .pickster-notice-board .more-link { color: #475569; }

/* 다크: 공지 게시판 내부 게시글 목록(.board-list)/헤더가 전역 catch-all([class$="-list"]/-header) #0f1419
   검정 박스를 받아 "게시글 뒤 검정 칸"이 생김 → 투명화해 공지 카드 한 면에 얹히도록 (헤더 하단 구분선만 유지) */
[data-theme="dark"] .pickster-notice-board .board-list,
[data-theme="dark"] .pickster-notice-board .board-header {
    background: transparent;
}
[data-theme="light"] .pickster-page .pickster-notice-board .write-link { color: #111827; }

/* "인증 회원만 참여할 수 있습니다." — 라이트 모드 검은색 (인라인 색 override) */
[data-theme="light"] .pickster-page .pk-verify-only { color: #111827 !important; }

/* 헤더 우측 인증 안내 — 맨 오른쪽 정렬, 기본 검은색(화이트모드 보장), 다크모드만 밝게 */
.pickster-page .pickster-header .page-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.pickster-page .pk-header-verify-notice {
    text-align: right;
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
}
[data-theme="dark"] .pickster-page .pk-header-verify-notice { color: #cbd5e1; }

/* 룸 카드 내부 텍스트 (닉네임/테이블명 등) */
[data-theme="light"] .pickster-page .pickster-room-card .nick,
[data-theme="light"] .pickster-page .pickster-room-card .nickname,
[data-theme="light"] .pickster-page .pickster-room-card .table-name,
[data-theme="light"] .pickster-page .pickster-room-card .room-title,
[data-theme="light"] .pickster-page .pwr-nick,
[data-theme="light"] .pickster-page .pwr-stat,
[data-theme="light"] .pickster-page .pwr-rank {
    color: #0b1220;
}

/* 랭킹 대시보드 탭 / 일자 셀렉터 — 라이트 모드 가독 (기본이 다크 톤 rgba(흰,투명)이라 흰 배경서 안 보임) */
[data-theme="light"] .pickster-page .prd-tab {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
[data-theme="light"] .pickster-page .prd-tab .prd-tab-sub { color: #64748b; }
[data-theme="light"] .pickster-page .prd-tab:hover {
    background: #fff7e6;
    color: #b45309;
}
[data-theme="light"] .pickster-page .prd-tab.active[data-rank-tab="daily"],
[data-theme="light"] .pickster-page .prd-tab.active {
    color: #b45309;
}
[data-theme="light"] .pickster-page .prd-tab.active[data-rank-tab="daily"] .prd-tab-sub,
[data-theme="light"] .pickster-page .prd-tab.active .prd-tab-sub { color: #b45309; }
[data-theme="light"] .pickster-page .rank-date-selector .rds-btn {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.14);
    color: #475569;
}
[data-theme="light"] .pickster-page .rank-date-selector .rds-btn:hover {
    border-color: rgba(232, 160, 26, 0.5);
    color: #b45309;
}
[data-theme="light"] .pickster-page .rank-date-selector .rds-btn.active {
    background: rgba(232, 160, 26, 0.16);
    border-color: rgba(232, 160, 26, 0.55);
    color: #b45309;
}
[data-theme="light"] .pickster-page .pwr-subtitle { color: #64748b; }

/* 라이트: 랭킹표(엑셀형) 구분선 — 기본이 흰색 반투명(rgba(255,255,255,..))이라 흰 배경서 안 보임 → 어두운 선으로 */
[data-theme="light"] .pickster-page .pwr-list {
    border-top-color: rgba(15,23,42,0.14);
    border-left-color: rgba(15,23,42,0.14);
}
[data-theme="light"] .pickster-page .pwr-item {
    border-right-color: rgba(15,23,42,0.14);
    border-bottom-color: rgba(15,23,42,0.14);
}
[data-theme="light"] .pickster-page .pwr-item > * {
    border-right-color: rgba(15,23,42,0.10);
}

/* 다크: TOP10 랭킹 카드의 앰버·보라 틴트 뒷배경(칸) 제거 → 평면화 */
[data-theme="dark"] .pickster-page .pickster-weekly-rank,
[data-theme="dark"] .pickster-page .prd-panel[data-rank-panel="weekly"] .pickster-weekly-rank {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
[data-theme="light"] .pickster-page .pickster-room-card .room-time,
[data-theme="light"] .pickster-page .pickster-room-card .visitor-count,
[data-theme="light"] .pickster-page .pickster-room-card .winrate-label {
    color: #475569;
}

/* 입력 / select */
[data-theme="light"] .pickster-page input[type="text"],
[data-theme="light"] .pickster-page input[type="number"],
[data-theme="light"] .pickster-page select,
[data-theme="light"] .pickster-page textarea {
    background: #ffffff;
    color: #0b1220;
    border-color: rgba(15, 23, 42, 0.20);
}

/* 카지노 태그 — 라이트 모드 보색 */
[data-theme="light"] .pickster-page .room-casino-tag.evolution { color: #b91c1c; background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.45); }
[data-theme="light"] .pickster-page .room-casino-tag.pragmatic { color: #a16207; background: rgba(234, 179, 8, 0.10); border-color: rgba(234, 179, 8, 0.45); }
[data-theme="light"] .pickster-page .room-casino-tag.bota      { color: #5b21b6; background: rgba(167, 139, 250, 0.10); border-color: rgba(167, 139, 250, 0.45); }
[data-theme="light"] .pickster-page .room-casino-tag.sexy      { color: #9d174d; background: rgba(244, 114, 182, 0.10); border-color: rgba(244, 114, 182, 0.45); }

/* MY 리본 — 라이트 모드 골드 톤 */
[data-theme="light"] .pickster-page .my-room-ribbon {
    background: #a16207;
    color: #ffffff;
}

/* 모달 — 라이트 모드 흰 배경 */
[data-theme="light"] #pickster-modal,
[data-theme="light"] .pickster-modal {
    color: #0b1220;
}
[data-theme="light"] #pickster-modal .pickster-modal-content,
[data-theme="light"] .pickster-modal .pickster-modal-content {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0b1220;
}
[data-theme="light"] #pickster-modal input,
[data-theme="light"] #pickster-modal select,
[data-theme="light"] #pickster-modal textarea {
    background: #ffffff;
    color: #0b1220;
    border-color: rgba(15, 23, 42, 0.20);
}

/* my.ejs 전용 myv2-* / cal-* 클래스 — 라이트 모드 흰 카드 톤 */
[data-theme="light"] .pickster-page [class*="myv2-"],
[data-theme="light"] .pickster-page [class*="cal-"] {
    color: #0b1220;
}
[data-theme="light"] .pickster-page .myv2-hero,
[data-theme="light"] .pickster-page .myv2-balance,
[data-theme="light"] .pickster-page .myv2-cal-grid,
[data-theme="light"] .pickster-page .myv2-cal-cell,
[data-theme="light"] .pickster-page .myv2-empty-tickets,
[data-theme="light"] .pickster-page .myv2-empty-actions,
[data-theme="light"] .pickster-page .myv2-empty-msg,
[data-theme="light"] .pickster-page .myv2-casino,
[data-theme="light"] .pickster-page .myv2-cta,
[data-theme="light"] .pickster-page .my-history-day,
[data-theme="light"] .pickster-page .my-history-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* 와일드카드 — pickster-page 안의 모든 박스성 클래스 라이트 톤 */
[data-theme="light"] .pickster-page [class$="-hero"],
[data-theme="light"] .pickster-page [class$="-balance"],
[data-theme="light"] .pickster-page [class$="-grid"]:not(.bigroad-grid),
[data-theme="light"] .pickster-page [class$="-cell"]:not(.bigroad-cell),
[data-theme="light"] .pickster-page [class$="-panel"],
[data-theme="light"] .pickster-page [class$="-box"],
[data-theme="light"] .pickster-page [class$="-list"]:not(.sub-menu),
[data-theme="light"] .pickster-page [class$="-row"]:not(.flex-row),
[data-theme="light"] .pickster-page [class*="-empty"] {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
}

/* 보조 텍스트 — 회색으로 */
[data-theme="light"] .pickster-page .myv2-balance-label,
[data-theme="light"] .pickster-page .myv2-balance-unit,
[data-theme="light"] .pickster-page .myv2-balance-base,
[data-theme="light"] .pickster-page .cal-day,
[data-theme="light"] .pickster-page .cal-date,
[data-theme="light"] .pickster-page .lbl,
[data-theme="light"] .pickster-page .l,
[data-theme="light"] .pickster-page .muted {
    color: #475569;
}

/* 강조 (delta/figure/amount) — 손익 색 */
[data-theme="light"] .pickster-page .myv2-balance-delta.profit-plus,
[data-theme="light"] .pickster-page .myv2-balance-figure.profit-plus,
[data-theme="light"] .pickster-page .cal-amount.profit-plus { color: #15803d; }
[data-theme="light"] .pickster-page .myv2-balance-delta.profit-minus,
[data-theme="light"] .pickster-page .myv2-balance-figure.profit-minus,
[data-theme="light"] .pickster-page .cal-amount.profit-minus { color: #b91c1c; }

/* myv2-* 모든 컨테이너 — 라이트 모드 흰 배경 (광범위 와일드카드) */
[data-theme="light"] .pickster-page section[class*="myv2-"],
[data-theme="light"] .pickster-page div[class*="myv2-"]:not(.myv2-cta):not(.myv2-tab-sub):not(.myv2-balance-delta):not(.myv2-balance-figure):not(.myv2-balance-label):not(.myv2-balance-unit):not(.myv2-balance-base):not(.myv2-stat-num):not(.myv2-stat-lbl):not(.myv2-stat-ico):not(.myv2-history-title) {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0b1220 !important;
}
[data-theme="light"] .pickster-page .myv2-stat-ico {
    color: #a16207;
}
[data-theme="light"] .pickster-page .myv2-stat-num,
[data-theme="light"] .pickster-page .myv2-history-title {
    color: #0b1220;
}
[data-theme="light"] .pickster-page .myv2-stat-lbl,
[data-theme="light"] .pickster-page .myv2-tab-sub,
[data-theme="light"] .pickster-page .myv2-history-empty {
    color: #475569;
}

/* 픽스터 개설 모달 — 라이트 모드 (모달은 body 직속 append라 .pickster-page 컨텍스트 밖) */
[data-theme="light"] .pickster-modal-overlay {
    background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pickster-modal,
[data-theme="light"] .pickster-modal-header,
[data-theme="light"] .pickster-modal-body,
[data-theme="light"] .pickster-modal-footer {
    background: #ffffff;
    color: #0b1220;
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .pickster-modal-header h3 {
    color: #0b1220;
}
[data-theme="light"] .pickster-modal-close {
    color: #475569;
}
[data-theme="light"] .pickster-modal-close:hover {
    color: #0b1220;
}
[data-theme="light"] .pickster-modal label {
    color: #0b1220;
}
[data-theme="light"] .pickster-modal .form-hint {
    color: #475569;
}
[data-theme="light"] .pickster-modal .form-input,
[data-theme="light"] .pickster-modal .form-select,
[data-theme="light"] .pickster-modal input,
[data-theme="light"] .pickster-modal select,
[data-theme="light"] .pickster-modal textarea {
    background: #ffffff;
    color: #0b1220;
    border-color: rgba(15, 23, 42, 0.20);
}

/* 안내 박스 .contest-rules-box */
[data-theme="light"] .pickster-modal .contest-rules-box {
    background: #fffdf5;
    border-color: rgba(232, 160, 26, 0.40);
    color: #0b1220;
}
[data-theme="light"] .pickster-modal .rules-title,
[data-theme="light"] .pickster-modal .rules-list li {
    color: #0b1220;
}
[data-theme="light"] .pickster-modal .rules-list li .txt strong {
    color: #a16207;
}
[data-theme="light"] .pickster-modal .rules-list li.must {
    color: #b91c1c;
}

/* 카지노 / 참가 카드 (.ticket-card-btn) */
[data-theme="light"] .pickster-modal .ticket-card-btn,
[data-theme="light"] .pickster-modal .casino-select-btn {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
}
[data-theme="light"] .pickster-modal .ticket-card-btn.active,
[data-theme="light"] .pickster-modal .casino-select-btn.active {
    background: #fffdf5;
    border-color: rgba(232, 160, 26, 0.55);
}

/* 확인 박스 .pickster-confirm */
[data-theme="light"] .pickster-modal #pickster-confirm,
[data-theme="light"] .pickster-modal .pickster-confirm,
[data-theme="light"] .pickster-modal .confirm-box {
    background: #f4f6f9;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
}

/* 라이트 모드 — 바카라 대회 랭킹 카드 내부 모든 글씨 검은색 */
[data-theme="light"] .pickster-rank-dashboard,
[data-theme="light"] .pickster-rank-dashboard *,
[data-theme="light"] .pickster-weekly-rank,
[data-theme="light"] .pickster-weekly-rank * {
    color: #000 !important;
}