.slot-window.held { border: 4px solid #e74c3c; box-shadow: 0 0 15px #e74c3c; }
    .hold-status-message {
            /*display: none;  평소에는 숨겨둠 */
    opacity: 0; /* ✨ 초기에는 투명하게 만들어 숨김 */
    transition: opacity 0.3s ease-in-out; /* ✨ 부드럽게 나타나고 사라지는 효과 */
    min-height: 0.2em; /* ✨ 메시지가 없을 때도 최소 높이를 유지하여 레이아웃 흔들림 방지 */
            margin-top: -15px;
            font-size: 1em;
            font-weight: bold;
            color: #f0f0f0;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
            display: flex; flex-direction: column; align-items: center; 
            color: white; padding-top: 0; margin: 0; min-height: 100vh;
            background-color: #2c3e50;
            background-image: url('game_backbord.jpg');
            background-size: cover; background-position: center;
            background-repeat: no-repeat; background-attachment: fixed;
        }
        nav#gameNavigationBar {
            width: 100%; background-color: rgba(0,0,0,0.7); padding: 12px 0;
            text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); margin-bottom: 0px;
            position: sticky; top: 0; z-index: 1000;
        }
        nav#gameNavigationBar .nav-button {
            color: #ecf0f1; text-decoration: none; padding: 10px 20px; margin: 0 8px;
            border-radius: 6px; font-size: 0.95em; font-weight: 500;
            transition: background-color 0.2s ease-in-out;
        }
        nav#gameNavigationBar .nav-button:hover { background-color: #3498db; }
        .user-info-bar {
            display: none; width: auto; max-width: 95%; margin: 0 auto 15px auto; padding: 10px 18px;
            background-color: rgba(0, 0, 0, 0.5); border-radius: 8px; color: #dfe6e9;
            text-align: center; font-size: 0.9em; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .user-info-bar span { margin: 0 10px; }
        .user-info-bar .username { font-weight: bold; color: #ffffff; }
        .user-info-bar .tier { color: #f1c40f; }
        .user-info-bar .coins { color: #2ecc71; }
        
        h2.game-title { color: #e74c3c; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); margin-top: -15px; margin-bottom: -5px; }

        .slot-machine {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px;
            background-color: rgba(0,0,0,0.4); border-radius: 15px; border: 3px solid #f1c40f;
            box-shadow: 0 0 25px rgba(241, 196, 15, 0.6), inset 0 0 15px rgba(0,0,0,0.6);
        }
        .slot-machine {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px;
            background-color: rgba(0,0,0,0.4); border-radius: 15px; border: 3px solid #f1c40f;
            box-shadow: 0 0 25px rgba(241, 196, 15, 0.6), inset 0 0 15px rgba(0,0,0,0.6);
        }
.slot-window {
    width: 100px;
    height: 100px;
    background-color: #ecf0f1;
    border-radius: 10px;
    overflow: hidden; /* ✨ 창 밖으로 나가는 이미지는 숨김 */
    position: relative;
    cursor: pointer;
    
    border: 4px solid transparent; /* 평소에는 투명 테두리 */
    transition: border-color 0.3s ease;
    box-sizing: border-box; /* 테두리가 크기에 영향을 주지 않도록 함 */
    
    
}

.slot-window.held {
    border-color: #e74c3c;
    box-shadow: 0 0 15px #e74c3c;
}

.reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 3s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform; /* ✨ [추가] 애니메이션 성능 향상 힌트 */
}

.reel-symbol {
    width: 100%; /* ✨ 창 너비에 맞춤 */
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* 이미지가 찌그러지지 않도록 함 */
}

.reel-symbol img {
    max-width: 75%;
    max-height: 75%;
    object-fit: contain;
    /* ✨ 드래그 방지 코드 */
    user-select: none;
    -webkit-user-drag: none;
}
        
        .controls { margin: 5px 0; display: flex; align-items: center; justify-content: center; }
        .controls input[type="number"] { width: 60px; padding: 10px; margin-right: 10px; border-radius: 4px; border: none; text-align: right; font-size: 1em; }
        .controls button { padding: 12px 25px; font-size: 1.1em; cursor: pointer; background-color: #e67e22; color: white; border: none; border-radius: 6px; font-weight: bold; transition: background-color 0.2s ease; }
        .controls button:disabled { background-color: #95a5a6; cursor: not-allowed; }
        #testJackpotButton {
            display: none; margin-left: 18px; background-color: #8e44ad;
        }
        #testJackpotButton:hover { background-color: #9b59b6; }
        .result-message { margin-top: 0; font-size: 1.2em; font-weight: bold; min-height: 1.5em; color: #f1c40f; padding: 10px;}

        .paytable-container {
            margin-top: 0px; margin-bottom: 0px; padding: 25px;
            background-color: rgba(0, 0, 0, 0.4); border-radius: 15px; width: 90%; max-width: 600px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4); border: 1px solid rgba(255, 255, 255, 0.15);
        }
        /* ... (기존 paytable 스타일은 생략) ... */
        .paytable-container h3 { color: #f39c12; text-align: center; margin-top: 0; margin-bottom: 0px; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 15px; }
        .paytable-container table { width: 100%; border-collapse: collapse; color: #ecf0f1; }
        .paytable-container th, .paytable-container td { border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px; text-align: left; font-size: 0.95em; }
        .paytable-container th { background-color: rgba(255, 255, 255, 0.05); text-align: center; font-weight: bold; color: #ddd; }
        .paytable-container tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.2); }
        .paytable-container td:first-child { text-align: center; font-size: 1.4em; }
        .paytable-container td:last-child { text-align: center; font-weight: bold; color: #2ecc71; }
        .paytable-container .paytable-note { font-size: 0.85em; color: #ccc; text-align: center; display: block; margin-top: 0px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px; }
        
        .jackpot-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.7); z-index: 10002;
            justify-content: center; align-items: center;
        }
        .jackpot-content {
            position: relative; display: flex; justify-content: center; align-items: center;
        }
        .jackpot-overlay img {
            max-width: 80%; max-height: 80vh; border: 5px solid #f1c40f;
            border-radius: 15px; box-shadow: 0 0 30px rgba(255, 255, 0, 0.7);
        }
        #jackpotMessage {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 90%;
            color: white; font-size: 2em; font-weight: bold; text-align: center;
            padding: 10px; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px;
            text-shadow: 2px 2px 5px black, 0 0 10px #ffc107;
        }
        
        .modal { display: none; position: fixed; z-index: 10001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
        .modal-content { background-color: #2c2c2c; color: white; padding: 25px; border-radius: 10px; width: 90%; max-width: 420px; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
        .modal-content h2 { margin-top:0; color: #87CEFA; }
        .modal-content label { display: block; margin-top: 10px; margin-bottom: 5px; font-size:0.9em; }
        .modal-content input { width: calc(100% - 20px); padding: 10px; margin-bottom: 12px; border-radius: 5px; border: 1px solid #555; background-color: #333; color:white; }
        .modal-content button { width: 100%; padding: 12px; margin-top:15px; border-radius:5px; background-color: #007bff; color:white; border:none; cursor:pointer; }
        .modal-content button:hover { background-color: #0056b3; }
        #challengeModal p { margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #444; padding-bottom: 15px; }
        #challengeModal strong { color: #FFC107; }
        .game-selection-group { display: flex; gap: 15px; margin-bottom: 15px; }
        .game-selection-group .game-option { display: flex; align-items: center; cursor: pointer; font-size: 1em; }
        .game-selection-group input[type="radio"] { width: auto; margin-right: 8px; }
        /* ✨ [추가] 프로그레시브 잭팟 스타일 */
.jackpot-pool-container {
    padding: 3px 90px;
    margin: 15px 0;
    border: 3px solid #FFD700;
    border-radius: 15px;
    background: linear-gradient(145deg, #4a0e0e, #8b0000);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), inset 0 0 10px rgba(0,0,0,0.5);
    text-align: center;
    animation: jackpot-glow 2s infinite alternate;
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center; 
}

.jackpot-pool-title {
    font-size: 1em;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.jackpot-pool-amount {
    font-size: 1.7em;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 2px;
    transition: transform 0.3s ease;
}

/* 마우스를 올리면 살짝 커지는 효과 */
.jackpot-pool-container:hover .jackpot-pool-amount {
    transform: scale(1.55);
}
/* ✨ [추가] 가변 난이도 표시 스타일 */
.difficulty-display {
    margin-top: -10px;
    margin-bottom: 15px;
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    font-size: 0.9em;
    color: #ecf0f1;
}

#difficultyText {
    font-weight: bold;
    transition: color 0.3s ease;
}
/* ✨ [수정] 슬롯머신 프레임 관련 스타일 */

/* 1. 기존 .slot-machine-wrapper 스타일은 삭제합니다. */

/* 2. .slot-machine 스타일을 수정합니다. */
.slot-machine {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 55px; /* 프레임 두께만큼 안쪽으로 밀어넣기 위해 패딩 값을 크게 조절 */
    background-color: rgba(0,0,0,0.4);
    border-radius: 15px;
    border: 3px solid #f1c40f;
    box-shadow: 0 0 25px rgba(241, 196, 15, 0.6), inset 0 0 15px rgba(0,0,0,0.6);
    position: relative; /* ✨ 프레임 이미지의 기준점이 되도록 설정 (매우 중요) */
    width: 445px;  /* 전체 크기를 프레임에 맞게 조절 (예시) */
    height: 445px; /* 전체 크기를 프레임에 맞게 조절 (예시) */
    box-sizing: border-box; /* 패딩과 테두리가 크기에 영향을 주지 않도록 설정 */
}

/* 3. .slot-frame-image 스타일 */
.slot-frame-image {
    position: absolute; /* .slot-machine 내부에서 자유롭게 움직이도록 설정 */
    top: 0;
    left: 0;
    width: 100%; /* 부모(.slot-machine)의 크기에 꽉 맞춤 */
    height: 100%;
    z-index: 10; 
    pointer-events: none; /* 프레임이 슬롯 클릭을 방해하지 않도록 설정 */
}
/* ✨ [추가] 보너스 챌린지 관련 스타일 */
.bonus-slots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11; /* 프레임 이미지보다 위에 오도록 설정 */
    pointer-events: none; /* 클릭 방해하지 않도록 설정 */
}

.bonus-slot {
    position: absolute;
    width: 100px;  /* 프레임 홈 크기에 맞게 조절 */
    height: 40px; /* 프레임 홈 크기에 맞게 조절 */
    background-color: rgba(0, 0, 0, 0.7); /* 평소에는 어두운 상태 */
    border-radius: 8px;
    transition: background-color 0.8s ease-out, box-shadow 0.8s ease-out; /* 꼬리 효과를 위한 transition */
    /* ✨ [추가] 텍스트 스타일 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}


/* 빛나는 효과 (애니메이션 적용 시 이 클래스 사용) */
.bonus-slot.lit {
    background-color: #ffd700;
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.8);
    transition: background-color 0.1s ease-in, box-shadow 0.1s ease-in; /* 켜질 땐 빠르게 */
}

/* 12개 슬롯 위치 지정 (teduri.png 이미지에 맞춘 예시 값) */
.slot-top-1 { top: 8px; left: 56px; }
.slot-top-2 { top: 8px; left: 170px; }
.slot-top-3 { top: 8px; left: 285px; }

.slot-right-1 { top: 85px; right: -20px; transform: rotate(90deg); }
.slot-right-2 { top: 200px; right: -20px; transform: rotate(90deg); }
.slot-right-3 { top: 315px; right: -20px; transform: rotate(90deg); }

.slot-bottom-1 { bottom: 8px; right: 56px; }
.slot-bottom-2 { bottom: 8px; right: 170px; }
.slot-bottom-3 { bottom: 8px; right: 285px; }

.slot-left-1 { top: 85px; left: -20px; transform: rotate(90deg); }
.slot-left-2 { top: 200px; left: -20px; transform: rotate(90deg); }
.slot-left-3 { top: 315px; left: -20px; transform: rotate(90deg); }
/* 반짝이는 애니메이션 효과 */
#challengeButton {
    margin-left: 15px;
}
/* ✨ [추가] 보너스 결과 메시지 스타일 */
.result-message.bonus-win {
    color: #2ecc71; /* 성공: 녹색 */
    font-size: 1.5em;
}
.result-message.bonus-lose {
    color: #e74c3c; /* 실패: 빨간색 */
    font-size: 1.5em;
}
.result-message.bonus-neutral {
    color: #95a5a6; /* 꽝: 회색 */
    font-size: 1.5em;
}
/* .bonus-slot 스타일을 찾아 아래 내용을 추가/수정합니다. */
.bonus-slot {
    /* ... 기존 스타일 ... */
    color: white; /* '꽝'은 기본 흰색으로 표시 */
    text-shadow: 1px 1px 2px black;
}

/* ✨ [추가] 보상/페널티 색상 클래스 */
.bonus-slot.reward {
    color: #e74c3c; /* 보상(+)은 빨간색 */
}

.bonus-slot.penalty {
    color: #3498db; /* 페널티(-)는 파란색 */
}

/* ✨ [추가] 관리자 모드 버튼 스타일 */

#adminModeButton.active {
    background-color: #2980b9; /* ON 상태일 때의 색상 */
}
#adminModeButton {
            display: none; margin-left: 8px; background-color: #8e44ad;
        }
#spawnRaidButton {
            display: none; margin-left: 8px; background-color: #8e44ad;
        }
.admin-container {
    margin: 5px 0; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
/* ✨ [추가/수정] 족보(paytable) 펼침 기능 스타일 */

/* 1. 기존 div를 details 태그로 변경 */
details.paytable-container {
    margin-top: 20px;
    padding: 15px 25px; /* 내부 여백 살짝 조절 */
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease; /* 부드러운 효과 */
}

/* 2. 클릭 가능한 제목(summary) 부분 스타일 */
details.paytable-container summary {
    cursor: pointer;
    outline: none; /* 클릭 시 테두리 제거 */
    display: block; /* 화살표 아이콘 위치를 위해 block으로 설정 */
}

/* 3. 제목(h3)의 불필요한 여백 제거 */
details.paytable-container summary h3 {
    display: inline-block; /* 제목 옆에 화살표가 오도록 설정 */
    margin: 0;
    padding: 0;
    color: #f39c12;
}

/* 4. 기본 화살표 아이콘 숨기기 */
details.paytable-container summary::-webkit-details-marker {
    display: none;
}

/* 5. 커스텀 화살표 아이콘 추가 */
details.paytable-container summary::after {
    content: '▼'; /* 닫혔을 때 아이콘 */
    float: right;
    font-size: 0.9em;
    color: #f39c12;
    transition: transform 0.3s ease;
}

/* 6. 펼쳐졌을 때 화살표 아이콘 회전 */
details.paytable-container[open] summary::after {
    transform: rotate(-180deg);
}

/* 7. 펼쳐졌을 때 아래쪽 여백 추가 */
details.paytable-container[open] {
    padding-bottom: 25px;
}

@keyframes jackpot-glow {
    from {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 8px rgba(0,0,0,0.5);
    }
    to {
        box-shadow: 0 0 35px rgba(255, 165, 0, 1), inset 0 0 12px rgba(0,0,0,0.5);
    }
}
/* ✨ [추가] 자동 돌리기 컨트롤 스타일 */
.auto-spin-control {
    display: flex;
    align-items: center;
    margin-right: 15px; /* 베팅 코인 라벨과의 간격 */
}

.auto-spin-control label {
    margin-left: 5px;
    font-size: 1em;
    cursor: pointer;
    user-select: none; /* 텍스트 드래그 방지 */
}

.auto-spin-control input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.raid-enter-button {
    display: block; /* 버튼을 블록 요소로 */
    margin-top: 5px; /* 위아래 간격 */
}