* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    color: #fff;
    line-height: 18px;
    background: #171a1c;
    user-select: none;
    -webkit-user-select: none;
}
ul, ol, li { list-style: none; }
button { font-family: inherit; outline: none; cursor: pointer; }
input { font-family: inherit; outline: none; }
.clear:after { content:" "; display:block; clear:both; height:0; visibility:hidden; }

/* ============================================================
   HEADER
   ============================================================ */
#game-header { height: 82px; padding: 20px 10px 0; }
.hash_line { position: relative; height: 16px; }
.hash_line span { display: inline-block; font-weight: 500; color: #d4d4d4; line-height: 16px; }
.hash_line .game_id .r_num { color: #727577; }
.hash_line .hash {
    position: absolute; top: 0; left: 17%; width: 55%; padding-left: 7%;
}
.hash_line .hash .tit { position: absolute; top: 0; left: 15px; }
.hash_line .hash .hash_result {
    overflow: hidden; width: 100%; padding-left: 20px;
    text-overflow: ellipsis; white-space: nowrap; color: #727577; cursor: pointer;
}
.hash_line .limit_money {
    position: absolute; top: -8px; right: 0; z-index: 991;
    padding: 8px 0 8px 10px;
}
.hash_line .limit_money .money { color: #727577; }
.time_line { position: relative; width: 100%; height: 37px; margin-top: 9px; padding: 0 100px 0 0; }
.time_line > div { position: relative; width: 100%; height: 27px; background: #000; border: 1px solid #666; text-align: center; overflow: hidden; }
.time_line > div #status { display: inline-block; position: relative; z-index: 10; font-size: 13px; color: #fff; line-height: 25px; }
.time_line > div .time_bar { position: absolute; top: -1px; left: -1px; height: 27px; background: #db0d18; transition: width 0.1s linear; }

.time_line .btn_history {
    position: absolute; top: 0; right: 0;
    width: 80px; height: 27px;
    background: #45b5da; border: 0; border-radius: 3px;
    font-size: 12px; font-weight: 500; color: #22272b;
    line-height: 27px; text-align: center; cursor: pointer;
}
.time_line .btn_history:hover { background: #5cc5e8; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
#main-layout {
    position: absolute; top: 82px; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: center;
}
#left-col {
    width: 100%; max-width: 1260px;
    height: 100%; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    padding: 0 10px;
}

/* ============================================================
   ROULETTE STRIP (원본 구조)
   ============================================================ */
.roulette_area {
    width: 100%; padding: 15px 0 8px;
}
.roulette_strip_wrap {
    position: relative; width: 100%; height: 110px;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 15%, #222 50%, #1a1a1a 85%, #0a0a0a 100%);
    border: 2px solid #333;
    border-radius: 4px;
}

/* 숫자 스트립 - CSS transform으로 이동 */
.numbers {
    display: flex;
    position: absolute;
    top: 10px; left: 50%;
    height: 90px;
    will-change: transform;
    transition: none;
}
.num_cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 73px; min-width: 73px; height: 90px;
    margin: 0 1px;
    font-size: 44px; font-weight: 900;
    color: #fff;
    border-radius: 5px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.num_cell.red_num { background: linear-gradient(180deg, #c42b30 0%, #8a1a1e 100%); }
.num_cell.black_num { background: linear-gradient(180deg, #555 0%, #2a2a2a 100%); }
.num_cell.green_num { background: linear-gradient(180deg, #6abf30 0%, #3a7a15 100%); }

/* 로딩 오버레이 */
.roulette_overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
}
.roulette_overlay .overlay_text {
    font-size: 16px;
    font-weight: bold;
    color: #e53935;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* 포인터 (가운데 황금색 라인) */
.roulette_pointer {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 100%;
    background: #f4cd1a;
    z-index: 10;
    box-shadow: 0 0 10px rgba(244,205,26,0.7);
}
.roulette_pointer:before {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #f4cd1a;
}
.roulette_pointer:after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #f4cd1a;
}

/* ============================================================
   HISTORY BAR
   ============================================================ */
.history_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 36px;
    padding: 3px 0;
    gap: 4px;
}
.history_nav {
    width: 28px; height: 28px;
    background: #333; border: 1px solid #555; border-radius: 3px;
    color: #ccc; font-size: 14px; font-weight: bold;
    cursor: pointer; flex-shrink: 0;
}
.history_nav:hover { background: #444; }
.history_numbers {
    display: flex;
    gap: 4px;
    overflow: hidden;
}
.history_numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; min-width: 28px; height: 28px;
    font-size: 13px; font-weight: 700;
    color: #fff; border-radius: 3px;
    transition: margin-left 0.15s ease;
}
.history_numbers .red_num { background: #a0242a; }
.history_numbers .black_num { background: #3a3a3a; }
.history_numbers .green_num { background: #5ca028; }

/* ============================================================
   BETTING CART
   ============================================================ */
.betting_cart_wrap { padding: 10px 0; }
.betting_cart {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.betting_cart .money_info {
    display: flex; align-items: center; gap: 6px;
}
.betting_cart .money_info dt {
    font-size: 15px; font-weight: 500; color: #c6b273;
    white-space: nowrap;
}
.betting_cart .money_info dd {
    width: 130px; height: 36px;
    background: #1b1b1b; border-radius: 5px;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.75) inset;
}
.betting_cart .money_info dd input {
    width: 100%; height: 100%; padding: 0 9px;
    background: none; border: 0;
    font-size: 15px; font-weight: 500;
    color: #fff; text-align: right;
}
.betting_cart .btn_area {
    display: flex; gap: 5px; margin-left: auto;
}
.betting_cart .btn_reset {
    width: 55px; height: 36px;
    background: #4a4e53; border: 1px solid #5a5e63;
    font-size: 14px; font-weight: 600; color: #fff; border-radius: 3px;
}
.betting_cart .btn_reset:hover { background: #5a5e63; }
.betting_cart .btn_reset:active { background: #81bf39; color: #fff; }
.betting_cart .btn_betting {
    width: 55px; height: 36px;
    background: #393c41; border: 1px solid #4d4d4d;
    font-size: 14px; font-weight: 500; color: #fff; border-radius: 3px;
}
.betting_cart .btn_betting:hover { border-color: #45b5da; }
.betting_cart .btn_betting:active { background: #45b5da; color: #fff; }

/* ============================================================
   BET AREA (3열: LOW / ZERO / HIGH)
   ============================================================ */
.bet_area { width: 100%; }

/* 당첨금 표시 */
.result_prev_info {
    position: relative; height: 20px; text-align: center;
}
.result_prev_info #result_money_win {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 18px; font-weight: bold; color: #f4cd1a;
    transition: top 1.5s ease, opacity 1.5s ease;
    opacity: 0; top: -12px;
}

/* 배팅 총액 (bet_btn_row / bet_result_row / bet_users_row 와 같은 3열·gap) */
.bet_total_row {
    display: flex; gap: 8px; width: 100%;
    padding: 2px 0;
}
.bet_total_cell {
    flex: 1; text-align: center; min-width: 0;
}
.total_label {
    font-size: 12px; font-weight: bold;
}
.total_label.total_red { color: #d04048; }
.total_label.total_green { color: #81bf39; }
.total_label.total_black { color: #b8c0d0; }

/* 배팅 버튼 행 */
.bet_btn_row {
    display: flex; gap: 8px; width: 100%;
}
.btn_bet {
    position: relative;
    flex: 1; height: 68px;
    border: 2px solid; border-radius: 5px;
    box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.8);
    transition: all 0.15s;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
}
.btn_bet:hover { filter: brightness(1.15); }
.btn_bet:active { transform: scale(0.97); }

.btn_red {
    background: linear-gradient(180deg, #6a2225 0%, #3a1215 100%);
    border-color: #7a3235 !important;
}
.btn_green {
    background: linear-gradient(180deg, #4a6228 0%, #2a3a15 100%);
    border-color: #5a7238 !important;
}
.btn_black {
    background: linear-gradient(180deg, #3a3a4a 0%, #1a1a2a 100%);
    border-color: #4a4a5a !important;
}

.btn_label {
    font-size: 20px; font-weight: 800; color: #fff;
    text-transform: uppercase;
}
.btn_rate {
    font-size: 14px; font-weight: 600; color: #bbb;
}

/* 배팅 상태 표시 */
.btn_bet.bet_ing {
    opacity: 0.4; pointer-events: none;
}
.btn_bet.bet_ing:before {
    content: ""; position: absolute; top: -2px; left: -2px; z-index: 100;
    width: calc(100% + 4px); height: calc(100% + 4px);
    background: rgba(0,0,0,0.5); border-radius: 5px;
}
.btn_bet.my_bet { border-color: #fff !important; }
.btn_bet.active {
    border-color: #f4cd1a !important;
    box-shadow: 0 0 15px rgba(244,205,26,0.5);
}

/* 예상 당첨금 행 */
.bet_result_row {
    display: flex; gap: 8px; margin-top: 4px;
}
.bet_result_cell {
    flex: 1; text-align: center;
    font-size: 12px; color: #f4cd1a; font-weight: bold;
}

/* 유저 배팅 리스트 */
.bet_users_row {
    display: flex; gap: 8px; width: 100%;
    margin-top: 6px;
}
.bet_user_list {
    flex: 1;
    max-height: 180px; overflow-y: auto;
    background: #1c1f23;
    border-radius: 3px;
    transition: opacity 0.3s;
}
.bet_user_list.bet_ing { opacity: 0.5; }
.bet_user_list.active { }
.bet_user_list::-webkit-scrollbar { width: 4px; }
.bet_user_list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.bet_user_list dl {
    display: flex; justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid #2a2d30;
    font-size: 13px; color: #ccc;
}
.bet_user_list dl.active { color: #81bf39; }
.bet_user_list dl.my { color: #f4cd1a; }
.bet_user_list dl dt { flex: 1; }
.bet_user_list dl dd { text-align: right; }

/* 배팅 취소 */
.bet_cancel_row {
    margin-top: 8px; text-align: center; display: none;
}
.btn_cancel {
    width: 120px; height: 34px;
    background: #555; border: 1px solid #777; border-radius: 3px;
    font-size: 13px; color: #ccc; cursor: pointer;
}
.btn_cancel:hover { border-color: #db0d18; color: #fff; }

/* ============================================================
   ROUND HISTORY
   ============================================================ */
.round_wrap {
    width: 100%; padding-top: 14px;
    flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.round_wrap .hash_tit dt {
    float: left; width: 12%; height: 41px;
    border-bottom: 2px solid #323336; color: #ccc; line-height: 39px; text-align: center;
}
.round_wrap .hash_tit dd {
    float: left; width: 80%; height: 41px;
    border-bottom: 2px solid #323336; color: #ccc; line-height: 39px; text-align: center;
}
.round_wrap .hash_tit dd.hash_result_dd { width: 8%; }
.round_wrap .round_hash_wrap {
    flex: 1; overflow-y: auto; min-height: 0;
}
.round_wrap .round_hash_wrap::-webkit-scrollbar { width: 6px; }
.round_wrap .round_hash_wrap::-webkit-scrollbar-track { background: transparent; }
.round_wrap .round_hash_wrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.round_wrap .round_hash_wrap:hover::-webkit-scrollbar-thumb { background: #444; }
.round_wrap .hash_list dl { overflow: hidden; }
.round_wrap .hash_list dt {
    float: left; width: 12%; height: 40px; padding-left: 1%;
    border-bottom: 1px solid #323336; color: #ccc; line-height: 39px; text-align: center;
}
.round_wrap .hash_list dd {
    float: left; position: relative; height: 40px;
    border-bottom: 1px solid #323336; color: #ccc; line-height: 39px;
}
.round_wrap .hash_list dd.hash_val {
    width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; padding-left: 4px;
}
.round_wrap .hash_list dd.hash_result_dd {
    width: 8%; padding: 5px 2px; text-align: center;
}

.result_num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    font-size: 13px; font-weight: 700;
    color: #fff; border-radius: 3px;
}
.result_num.red { background: #a0242a; }
.result_num.gray { background: #3a3a3a; }
.result_num.green { background: #5ca028; }

/* ============================================================
   BETTING HISTORY POPUP
   ============================================================ */
#betHistoryPopup {
    position: fixed; top: 82px; right: 0;
    z-index: 99998; width: 680px;
}
.betting_history_cont {
    position: relative; width: 100%;
    max-height: calc(100vh - 100px); overflow-y: auto;
    padding: 20px 20px 40px;
    background: #22272b; border: 1px solid #45b5da;
}
.bet_his_header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid #333;
}
.bet_his_header span { font-size: 16px; font-weight: bold; color: #45b5da; }
.btn_his_close {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; font-size: 18px; color: #888; cursor: pointer;
}
.btn_his_close:hover { color: #fff; }
.btn_his_close_bottom {
    display: block; width: 100%; margin-top: 15px; padding: 8px 0;
    background: #393c41; border: 1px solid #4d4d4d;
    font-size: 14px; color: #ccc; cursor: pointer; text-align: center;
}
.btn_his_close_bottom:hover { border-color: #45b5da; color: #fff; }
.tbl_bet_history {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.tbl_bet_history thead th {
    padding: 10px 6px; background: #1a1d20; color: #ccc;
    border-bottom: 1px solid #333; text-align: center; font-weight: 500;
}
.tbl_bet_history tbody { overflow-y: auto; display: block; max-height: 400px; }
.tbl_bet_history thead, .tbl_bet_history tbody tr {
    display: table; width: 100%; table-layout: fixed;
}
.tbl_bet_history tbody td {
    padding: 8px 6px; border-bottom: 1px solid #2a2d30;
    color: #ccc; text-align: center;
}
.tbl_bet_history tbody tr:nth-child(even) td { background: #1f2225; }
.tbl_bet_history .win { color: #81bf39; }
.tbl_bet_history .lose { color: #ed3327; }

/* ============================================================
   HASH POPUP
   ============================================================ */
#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: 480px; padding: 24px 28px;
    background: #22272b; border: 1px solid #45b5da; border-radius: 8px;
}
.hash_popup .popup_title {
    margin-top: 14px; font-size: 14px; color: #ccc; word-break: break-all;
}
.hash_popup .popup_title:first-child { margin-top: 0; }
.hash_popup .popup_title .titles {
    display: inline-block; font-size: 13px; font-weight: bold; color: #45b5da;
    margin-bottom: 4px;
}
.hash_popup .popup_title .text_success {
    display: inline-block; font-size: 13px; color: #81bf39; word-break: break-all;
}
.hash_popup .popup_btn { text-align: center; margin-top: 16px; }
.hash_popup .popup_btn button {
    width: 120px; height: 32px; background: #45b5da; border: 0; border-radius: 3px;
    font-size: 14px; font-weight: bold; color: #22272b; cursor: pointer;
}
.hash_popup .popup_btn button:hover { background: #5cc5e8; }
.hash_popup .popup_close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none; font-size: 18px; color: #888; cursor: pointer;
}
.hash_popup .popup_close:hover { color: #fff; }

/* ============================================================
   TOAST / RESULT OVERLAY
   ============================================================ */
.toast-msg {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 999999; padding: 12px 24px; background: rgba(0,0,0,0.85);
    border: 1px solid #45b5da; border-radius: 6px;
    font-size: 14px; color: #fff; white-space: nowrap;
    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: 32px; font-weight: bold; text-align: center;
    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; }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media screen and (max-width: 767px) {
    #main-layout {
        position: relative; top: auto; bottom: auto;
        flex-direction: column; height: auto;
    }
    #left-col {
        width: 100%; min-width: auto;
        height: auto; overflow: visible;
        display: block; padding: 0 5px;
    }

    #game-header { height: auto; padding: 10px 8px; }
    .hash_line .hash { display: none; }

    .roulette_strip_wrap { height: 70px; }
    .numbers { height: 55px; top: 7px; }
    .num_cell { width: 48px; min-width: 48px; height: 55px; font-size: 26px; }

    .history_bar { height: 28px; }
    .history_numbers span { width: 22px; min-width: 22px; height: 22px; font-size: 11px; }
    .history_nav { width: 22px; height: 22px; font-size: 12px; }

    .betting_cart { flex-direction: column; gap: 6px; }
    .betting_cart .money_info { width: 100%; }
    .betting_cart .money_info dd { flex: 1; }
    .betting_cart .btn_area { width: 100%; justify-content: space-between; margin-left: 0; }
    .betting_cart .btn_reset,
    .betting_cart .btn_betting { flex: 1; height: 34px; font-size: 13px; }

    .btn_bet { height: 55px; }
    .btn_label { font-size: 16px; }
    .btn_rate { font-size: 12px; }

    .bet_user_list { max-height: 100px; }
    .bet_user_list dl { padding: 3px 6px; font-size: 11px; }

    .round_wrap { padding-top: 8px; flex: none; min-height: 0; }
    .round_wrap .round_hash_wrap { max-height: 250px; flex: none; }
    .round_wrap .hash_tit dt,
    .round_wrap .hash_list dt { width: 18%; }
    .round_wrap .hash_tit dd.hash_result_dd,
    .round_wrap .hash_list dd.hash_result_dd { width: 10%; }
    .round_wrap .hash_tit dd:last-child { width: 72%; }
    .round_wrap .hash_list dd.hash_val { width: 72%; font-size: 10px; }

    .hash_popup { width: 90%; padding: 16px; }
    #betHistoryPopup { width: 95%; }
}