* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
    background: url('../assets/extracted/BG_Main.png') no-repeat center top;
    background-size: cover; background-color:#0d0d1a;
    color:#fff; font-family:'Noto Sans KR','Malgun Gothic',sans-serif; font-size:14px;
    user-select:none; -webkit-user-select:none; overflow:hidden;
}
button { font-family:inherit; outline:none; cursor:pointer; border:none; }

/* ===== Header (HighLow 와 동일하게 82px) ===== */
#game-header {
    height:82px; padding:10px 16px; flex-shrink:0;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    background:rgba(10,10,26,0.55);
    border-bottom:1px solid rgba(69,181,218,0.12);
}
.hash_line { display:flex; align-items:center; gap:10px; font-size:12px; color:#999; height:16px; }
.hash_line .game_id .r_num { color:#666; }
.hash_line .hash { flex:1; overflow:hidden; }
.hash_line .hash .tit { color:#ccc; margin-right:6px; }
.hash_line .hash .hash_result { color:#666; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:300px; vertical-align:middle; }
.hash_line .limit_money { white-space:nowrap; color:#c6b273; }
.time_line { display:flex; gap:6px; height:27px; }
.time_bar_wrap { flex:1; position:relative; background:#000; border:1px solid #444; overflow:hidden; text-align:center; }
.time_bar_wrap #status { position:relative; z-index:2; font-size:12px; line-height:25px; color:#fff; }
.time_bar_wrap .time_bar { position:absolute; top:0; left:0; height:100%; background:#db0d18; transition:width 0.1s linear; }
.btn_history { width:80px; background:#45b5da; border-radius:3px; font-size:11px; font-weight:600; color:#1a1a2e; }

/* ===== Main Layout (HighLow 와 동일 구조) ===== */
#main-layout {
    position:absolute; top:82px; bottom:0; left:0; right:0;
    display:flex;
}
#left-col {
    width:640px; min-width:640px; height:100%; overflow:hidden;
    display:flex; flex-direction:column;
}
#right-col {
    flex:1; min-width:320px; height:100%; overflow-y:auto;
    display:flex; flex-direction:column;
    background:rgba(10,10,30,0.5);
    border-left:1px solid rgba(69,181,218,0.12);
}

/* ===== Wheel (왼쪽) ===== */
#wheel-area {
    position:relative; flex:1; min-height:0;
    display:flex; justify-content:center; align-items:center;
    padding:10px 0;
    overflow:hidden; z-index:50;
    background: url('../static/images/bg_wheel.png') no-repeat center center;
    background-size: cover;
}
.wheel-container {
    position:relative; width:420px; height:420px;
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center center;
}
.wheel-container.zoom-spin { transform: scale(1.7) translateY(40px); }
.wheel-container.zoom-out {
    transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(1) translateY(0);
}
#wheel-area.spinning-active { z-index:100; }
.wheel-container canvas { width:100%; height:100%; }
.wheel-pointer {
    position:absolute; top:-30px; left:50%; transform:translateX(-50%);
    width:220px; z-index:10;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.wheel-pointer img { width:100%; height:auto; display:block; }
.wheel-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; pointer-events:none; }
.multiplier-display {
    width:60px; height:60px; border-radius:50%;
    background:radial-gradient(circle, #ff4444, #cc0000);
    display:flex; align-items:center; justify-content:center;
    border:3px solid #f4cd1a;
    animation:pulse 0.8s infinite alternate;
}
.multiplier-display span { font-size:20px; font-weight:900; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.5); }
@keyframes pulse { from{transform:scale(1)} to{transform:scale(1.1)} }

.spin-backdrop {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0); z-index:40; pointer-events:none;
    transition: background 1s ease;
}
.spin-backdrop.active { background:rgba(0,0,0,0.6); }

.win-image-display {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    z-index:30;
    display:flex; align-items:center; justify-content:center;
    padding:10px 20px;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    animation: winPop 0.4s ease-out;
}
.win-result-img { height:80px; width:auto; filter:drop-shadow(0 0 12px rgba(255,200,0,0.6)); }
@keyframes winPop {
    0% { transform:translateX(-50%) scale(0.3); opacity:0; }
    60% { transform:translateX(-50%) scale(1.1); opacity:1; }
    100% { transform:translateX(-50%) scale(1); opacity:1; }
}

.wheel-overlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;
    z-index:20; text-align:center;
}
.wheel-overlay span { font-size:16px; font-weight:bold; color:#e53935; line-height:1.6; }

/* ===== History (왼쪽 하단) ===== */
.history_bar { display:flex; justify-content:center; padding:8px 10px; gap:4px; flex-shrink:0; background:rgba(10,10,26,0.45); }
.history_numbers { display:flex; gap:4px; overflow:hidden; }
.history_numbers span {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; padding:0 5px;
    font-size:12px; font-weight:700; color:#fff; border-radius:4px;
    transition:transform 0.2s ease;
}
.hist_1 { background:#f0a030; color:#fff; }
.hist_2 { background:#4a90d9; color:#fff; }
.hist_5 { background:#e84080; color:#fff; }
.hist_10 { background:#2db84d; color:#fff; }
.hist_20 { background:#e07028; color:#fff; }
.hist_40 { background:#8b45b0; color:#fff; }
.hist_0 { background:#555; color:#fff; }
.hist_multi { background:#d42020; color:#fff; border:2px solid #ff6; }

/* ===== Balance & Chips (오른쪽 상단) ===== */
.balance_bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 16px; flex-shrink:0; background:rgba(17,17,37,0.7); }
.balance_info { display:flex; align-items:center; gap:8px; }
.bal_label { font-size:13px; color:#c6b273; }
.bal_value { font-size:20px; font-weight:800; color:#fff; min-width:90px; }
.chip_select { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.chip {
    padding:8px 14px; background:#2a2a3e; border:1px solid #3a3a5e; border-radius:5px;
    font-size:13px; color:#ccc; transition:all 0.15s;
}
.chip:hover { border-color:#45b5da; }
.chip.active { background:#45b5da; color:#1a1a2e; border-color:#45b5da; font-weight:700; }

/* ===== Bet Area (오른쪽) ===== */
.bet_area { padding:14px 16px; flex-shrink:0; }
.bet_row { display:flex; gap:8px; margin-bottom:8px; }
.bet_btn {
    flex:1; height:64px; border-radius:6px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; transition:all 0.15s; position:relative;
    box-shadow:0 3px 8px rgba(0,0,0,0.5);
}
.bet_btn:hover { filter:brightness(1.2); }
.bet_btn:active { transform:scale(0.95); }
.bet_btn.disabled { opacity:0.4; pointer-events:none; }
.bet_btn.disabled:after {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.4); border-radius:6px;
}
.bet_label { font-size:17px; font-weight:800; color:#fff; }
.bet_rate { font-size:11px; color:rgba(255,255,255,0.7); }
.bet_amount { font-size:11px; color:#fffc01; font-weight:600; min-height:14px; }

.bet_btn[data-slot="0"] { background:linear-gradient(180deg,#d4a843,#a07820); border:2px solid #d4a843; }
.bet_btn[data-slot="1"] { background:linear-gradient(180deg,#4a90d9,#2a60a9); border:2px solid #4a90d9; }
.bet_btn[data-slot="2"] { background:linear-gradient(180deg,#d94a6b,#a92a4b); border:2px solid #d94a6b; }
.bet_btn[data-slot="3"] { background:linear-gradient(180deg,#4ad9a0,#2aa970); border:2px solid #4ad9a0; }
.bet_btn[data-slot="4"] { background:linear-gradient(180deg,#d9a04a,#a9702a); border:2px solid #d9a04a; }
.bet_btn[data-slot="5"] { background:linear-gradient(180deg,#9b59b6,#6b2996); border:2px solid #9b59b6; }
.bet_even { background:linear-gradient(180deg,#3a5a8a,#2a3a6a); border:2px solid #4a7aba; }
.bet_odd { background:linear-gradient(180deg,#5a3a3a,#3a2a2a); border:2px solid #7a4a4a; }
.bet_multi { background:linear-gradient(180deg,#8a2a2a,#5a1a1a); border:2px solid #e63946; }

.bet_actions { gap:8px; }
.btn_action {
    flex:1; height:44px; border-radius:5px; font-size:14px; font-weight:600;
    transition:all 0.15s;
}
.btn_action.disabled { opacity:0.4; pointer-events:none; }
.btn_reset { background:#3a3a4e; color:#ccc; border:1px solid #555; }
.btn_reset:hover { border-color:#e63946; }
.btn_repeat { background:#3a3a4e; color:#ccc; border:1px solid #555; }
.btn_repeat:hover { border-color:#45b5da; }

/* ===== Live Bets (오른쪽 하단) ===== */
.live_bets { flex:1; min-height:120px; overflow:hidden; display:flex; flex-direction:column; margin:0 16px 16px; background:rgba(10,10,30,0.25); border:1px solid rgba(69,181,218,0.08); border-radius:8px; }
.live_header { display:flex; padding:8px 12px; background:rgba(69,181,218,0.06); border-bottom:1px solid rgba(69,181,218,0.1); font-size:12px; color:#999; font-weight:700; }
.live_header span:nth-child(1) { flex:1; }
.live_header span:nth-child(2) { width:60px; text-align:center; }
.live_header span:nth-child(3) { width:90px; text-align:right; }
.live_list { flex:1; overflow-y:auto; padding:2px 0; }
.live_list::-webkit-scrollbar { width:5px; }
.live_list::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.live_item { display:flex; padding:6px 12px; border-bottom:1px solid rgba(255,255,255,0.03); font-size:12px; color:#aaa; }
.live_item span:nth-child(1) { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live_item span:nth-child(2) { width:60px; text-align:center; }
.live_item span:nth-child(3) { width:90px; text-align:right; }

/* ===== Popups ===== */
#betHistoryPopup { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99998; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; }
.betting_history_cont { width:90%; max-width:600px; max-height:80vh; overflow-y:auto; padding:20px; background:#1a1a2e; border:1px solid #45b5da; border-radius:8px; }
.bet_his_header { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid #2a2a4e; }
.bet_his_header span { font-size:16px; font-weight:bold; color:#45b5da; }
.btn_his_close { background:none; font-size:18px; color:#888; cursor:pointer; }
.btn_his_close:hover { color:#fff; }
.btn_his_close_bottom { display:block; width:100%; margin-top:12px; padding:8px; background:#2a2a4e; border:1px solid #3a3a5e; color:#ccc; border-radius:4px; }
.tbl_bet_history { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
.tbl_bet_history th { padding:8px 4px; background:#111125; color:#999; border-bottom:1px solid #2a2a4e; }
.tbl_bet_history td { padding:6px 4px; border-bottom:1px solid #1a1a2e; color:#ccc; text-align:center; }

#hashPopup { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; }
.hash_popup { position:relative; width:90%; max-width:450px; padding:20px; background:#1a1a2e; border:1px solid #45b5da; border-radius:8px; }
.hash_popup .popup_title { margin-top:12px; font-size:13px; color:#ccc; word-break:break-all; }
.hash_popup .titles { color:#45b5da; font-weight:bold; }
.hash_popup .text_success { color:#81bf39; }
.hash_popup .popup_btn { text-align:center; margin-top:14px; }
.hash_popup .popup_btn button { padding:6px 20px; background:#45b5da; border:none; border-radius:3px; color:#1a1a2e; font-weight:bold; cursor:pointer; }
.hash_popup .popup_close { position:absolute; top:8px; right:12px; background:none; font-size:18px; color:#888; cursor:pointer; }

.toast-msg {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:999999;
    padding:10px 20px; background:rgba(0,0,0,0.9); border:1px solid #45b5da; border-radius:6px;
    font-size:13px; color:#fff; animation:toastFade 2s forwards;
}
@keyframes toastFade { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

.result_overlay {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;
    padding:20px 40px; border-radius:10px; font-size:28px; font-weight:bold;
    animation:resultPop 0.3s ease-out;
}
.result_overlay.win { background:rgba(129,191,57,0.9); color:#fff; }
.result_overlay.lose { background:rgba(219,13,24,0.9); color:#fff; }
@keyframes resultPop { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }