* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(230,57,70,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(74,217,160,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(20,20,60,1) 0%, rgba(8,8,24,1) 100%);
    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; }
input { font-family:inherit; outline:none; }

/* ===== Header (HighLow 와 동일하게 82px) ===== */
#game-header {
    height:82px; padding:0 16px; flex-shrink:0;
    display:flex; align-items:center;
    border-bottom:1px solid rgba(230,57,70,0.12);
}
.hash_line { display:flex; align-items:center; gap:12px; width:100%; font-size:12px; color:#999; }
.game_title { font-size:20px; font-weight:900; color:#e63946; letter-spacing:3px; white-space:nowrap; }
.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:60%; vertical-align:middle; }
.hash_line .limit_money { white-space:nowrap; color:#c6b273; font-weight:500; }

/* ===== 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:300px; height:100%;
    display:flex; flex-direction:column;
    background:rgba(10,10,30,0.35);
    border-left:1px solid rgba(230,57,70,0.12);
}

/* ===== History (왼쪽 상단) ===== */
.history_bar { display:flex; gap:5px; padding:10px 12px; flex-shrink:0; overflow-x:auto; }
.history_bar::-webkit-scrollbar { height:0; }
.hist_item {
    padding:4px 10px; border-radius:4px; font-size:12px; font-weight:700;
    white-space:nowrap; flex-shrink:0;
}
.hist_low { background:rgba(74,217,160,0.15); color:#4ad9a0; }
.hist_mid { background:rgba(74,144,217,0.15); color:#4a90d9; }
.hist_high { background:rgba(155,89,182,0.15); color:#9b59b6; }
.hist_mega { background:rgba(232,64,128,0.15); color:#e84080; }

/* ===== Chart (왼쪽) ===== */
#chart-area {
    position:relative; flex:1; min-height:0;
    display:flex; justify-content:center; align-items:center;
    overflow:hidden;
    background: repeating-conic-gradient(rgba(255,255,255,0.006) 0% 25%, transparent 0% 50%) 0 0 / 40px 40px;
}
#crashCanvas { width:100%; height:100%; }

.multi_display {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; pointer-events:none;
}
.multi_value {
    display:block; font-size:60px; font-weight:900;
    color:#4ad9a0; text-shadow:0 0 30px rgba(74,217,160,0.3);
    transition: color 0.3s;
}
.multi_value.crashed { color:#e63946; text-shadow:0 0 30px rgba(230,57,70,0.5); }
.multi_status { display:block; font-size:15px; color:#888; margin-top:6px; }

/* Sound Toggle */
.sound_toggle {
    position:absolute; top:8px; right:8px;
    width:32px; height:32px;
    background:rgba(10,10,30,0.4);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:6px;
    font-size:16px; line-height:32px;
    text-align:center; padding:0; z-index:10;
}
.sound_toggle:hover { background:rgba(69,181,218,0.2); }
.sound_toggle.muted { opacity:0.4; }

/* ===== Controls (오른쪽) ===== */
.control_area { padding:16px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }
.balance_bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-radius:8px;
    background:rgba(230,57,70,0.06); border:1px solid rgba(230,57,70,0.15);
}
.bal_label { font-size:13px; color:#c6b273; }
.bal_value { font-size:20px; font-weight:800; color:#fff; }

.bet_block {
    padding:14px; border-radius:8px;
    background:rgba(20,20,46,0.5); border:1px solid rgba(58,58,94,0.5);
    display:flex; flex-direction:column; gap:12px;
}
.bet_input_wrap { display:flex; flex-direction:column; gap:8px; }
.bet_input {
    width:100%; height:44px; padding:0 12px;
    background:#1a1a2e; border:1px solid #3a3a5e; border-radius:6px;
    font-size:18px; font-weight:700; color:#fff; text-align:right;
}
.bet_input:focus { border-color:#45b5da; }
.bet_quick { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.bet_q {
    padding:9px 0; background:#2a2a3e; border:1px solid #3a3a5e; border-radius:5px;
    font-size:12px; color:#ccc; text-align:center; transition:all 0.15s;
}
.bet_q:hover { border-color:#45b5da; color:#fff; }

.bet_action_row { display:flex; gap:8px; }
.btn_bet {
    flex:1; height:56px; border-radius:6px; font-size:18px; font-weight:800;
    background:linear-gradient(180deg, #4ad9a0, #2aa970); color:#fff;
    box-shadow:0 4px 12px rgba(74,217,160,0.3); transition:all 0.15s;
}
.btn_bet:hover { filter:brightness(1.1); }
.btn_bet:active { transform:scale(0.98); }
.btn_bet.disabled { opacity:0.4; pointer-events:none; }

.btn_cashout {
    flex:1; height:56px; border-radius:6px; font-size:18px; font-weight:800;
    background:linear-gradient(180deg, #e6a800, #cc8400); color:#fff;
    box-shadow:0 4px 12px rgba(230,168,0,0.3); transition:all 0.15s;
    animation: cashoutPulse 0.6s infinite alternate;
}
.btn_cashout:hover { filter:brightness(1.1); }
.btn_cashout:active { transform:scale(0.98); }
@keyframes cashoutPulse { from{box-shadow:0 0 8px rgba(230,168,0,0.3)} to{box-shadow:0 0 20px rgba(230,168,0,0.6)} }

/* ===== Live Players (오른쪽 하단) ===== */
.live_players {
    flex:1; min-height:0; margin:0 16px 16px;
    display:flex; flex-direction:column;
    background:rgba(10,10,30,0.25);
    border:1px solid rgba(230,57,70,0.08); border-radius:8px;
    overflow:hidden;
}
.live_pl_header { display:flex; padding:8px 12px; background:rgba(230,57,70,0.06); border-bottom:1px solid rgba(230,57,70,0.1); font-size:12px; color:#999; font-weight:700; }
.live_pl_header span:nth-child(1) { flex:1; }
.live_pl_header span:nth-child(2) { width:70px; text-align:center; }
.live_pl_header span:nth-child(3) { width:55px; text-align:center; }
.live_pl_header span:nth-child(4) { width:75px; text-align:right; }
.live_pl_list { flex:1; overflow-y:auto; padding:2px 0; }
.live_pl_list::-webkit-scrollbar { width:5px; }
.live_pl_list::-webkit-scrollbar-track { background:transparent; }
.live_pl_list::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.live_pl_list:hover::-webkit-scrollbar-thumb { background:#555; }
.live_pl_item { display:flex; padding:6px 12px; border-bottom:1px solid rgba(255,255,255,0.03); font-size:12px; color:#aaa; }
.live_pl_item span:nth-child(1) { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live_pl_item span:nth-child(2) { width:70px; text-align:center; }
.live_pl_item span:nth-child(3) { width:55px; text-align:center; }
.live_pl_item span:nth-child(4) { width:75px; text-align:right; }
.live_pl_item.cashed span:nth-child(3), .live_pl_item.cashed span:nth-child(4) { color:#4ad9a0; }
.live_pl_item.lost span:nth-child(3), .live_pl_item.lost span:nth-child(4) { color:#e63946; }

/* ===== Popups ===== */
#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_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:40%; left:50%; transform:translate(-50%,-50%); z-index:9999;
    padding:16px 32px; border-radius:10px; font-size:24px; font-weight:bold;
    text-align:center; animation:resultPop 0.3s ease-out;
}
.result_overlay .win-multi { font-size:32px; font-weight:900; }
.result_overlay .win-amount { font-size:16px; margin-top:4px; }
@keyframes resultPop { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }