* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(69,181,218,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(130,60,200,0.06) 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(69,181,218,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:#45b5da; 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(69,181,218,0.12);
}

/* ===== Plinko Board (왼쪽) ===== */
#plinko-area {
    position:relative; flex:1; min-height:0;
    display:flex; justify-content:center; align-items:center;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(30,40,80,0.5) 0%, transparent 60%),
        repeating-conic-gradient(rgba(255,255,255,0.008) 0% 25%, transparent 0% 50%) 0 0 / 40px 40px;
}
#plinkoCanvas { width:100%; height:100%; }

/* 사운드 토글 버튼 */
.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; cursor:pointer;
    transition:all 0.15s;
}
.sound_toggle:hover { background:rgba(69,181,218,0.2); border-color:rgba(69,181,218,0.3); }
.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(69,181,218,0.06); border:1px solid rgba(69,181,218,0.15);
}
.bal_label { font-size:13px; color:#c6b273; }
.bal_value { font-size:20px; font-weight:800; color:#fff; }

.ctrl_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;
}

.setting_row { display:flex; align-items:center; gap:10px; }
.setting_label { font-size:13px; color:#9aa; flex-shrink:0; width:48px; }

.risk_select { display:flex; gap:6px; flex:1; }
.risk_btn {
    flex:1; padding:9px 0; background:#2a2a3e; border:1px solid #3a3a5e; border-radius:5px;
    font-size:13px; color:#ccc; transition:all 0.15s;
}
.risk_btn:hover { border-color:#45b5da; }
.risk_btn.active { background:#45b5da; color:#1a1a2e; border-color:#45b5da; font-weight:700; }

.rows_select { display:flex; align-items:center; gap:8px; }
.rows_btn {
    width:34px; height:34px; background:#2a2a3e; border:1px solid #3a3a5e; border-radius:5px;
    font-size:18px; font-weight:700; color:#ccc; display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
}
.rows_btn:hover { border-color:#45b5da; color:#fff; }
.rows_value { font-size:17px; font-weight:700; color:#45b5da; min-width:36px; text-align:center; }

.bet_block { 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(3, 1fr); gap:6px; }
.bet_q {
    padding:9px 0; background:#2a2a3e; border:1px solid #3a3a5e; border-radius:5px;
    font-size:13px; color:#ccc; transition:all 0.15s; text-align:center;
}
.bet_q:hover { border-color:#45b5da; color:#fff; }
.bet_q_reset { background:#3a2a2a; border-color:#e63946; color:#e63946; }
.bet_q_reset:hover { background:#e63946; color:#fff; }

.drop_row { display:flex; align-items:center; gap:10px; }
.drop_count_wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.drop_count_input {
    width:60px; height:48px; padding:0 6px;
    background:#1a1a2e; border:1px solid #3a3a5e; border-radius:6px;
    font-size:18px; font-weight:700; color:#45b5da; text-align:center;
}
.drop_count_input:focus { border-color:#45b5da; }
.drop_count_label { font-size:13px; color:#888; }

.btn_auto {
    width:64px; height:48px; border-radius:6px; font-size:13px; font-weight:700;
    background:#2a2a3e; color:#ccc; border:1px solid #3a3a5e;
    transition:all 0.15s; flex-shrink:0;
}
.btn_auto:hover { border-color:#45b5da; }
.btn_auto.active { background:#e63946; color:#fff; border-color:#e63946; }

.btn_drop {
    flex:1; height:48px; border-radius:6px; font-size:17px; 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_drop:hover { filter:brightness(1.1); }
.btn_drop:active { transform:scale(0.98); }

/* ===== 라이브 배팅 리스트 (오른쪽 하단, 남은 공간 채움) ===== */
.live_panel {
    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(69,181,218,0.08); border-radius:8px;
    overflow:hidden;
}
.live_ol_header {
    padding:8px 12px;
    font-size:12px; font-weight:700; color:rgba(69,181,218,0.85);
    background:rgba(69,181,218,0.06);
    border-bottom:1px solid rgba(69,181,218,0.1);
    letter-spacing:1px;
}
.live_ol_list { flex:1; overflow-y:auto; padding:4px 0; }
.live_ol_list::-webkit-scrollbar { width:5px; }
.live_ol_list::-webkit-scrollbar-track { background:transparent; }
.live_ol_list::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.live_ol_list:hover::-webkit-scrollbar-thumb { background:#555; }
.live_ol_item {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 12px; font-size:12px; color:rgba(190,190,190,0.85);
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.live_ol_item .lo_name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live_ol_item .lo_multi { width:46px; text-align:center; font-weight:600; }
.live_ol_item .lo_result { width:72px; text-align:right; font-weight:600; }
.live_ol_item.win .lo_multi, .live_ol_item.win .lo_result { color:#4ad9a0; }
.live_ol_item.lose .lo_multi, .live_ol_item.lose .lo_result { 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 ===== */
.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} }

/* ===== Win Overlay ===== */
.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} }

/* HighLow 와 동일하게 항상 좌우 2단 유지 (반응형 세로 전환 없음) */