.rouletteCreatePopup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; display:none; width:340px; padding:20px; background-color:#fff; border-radius:14px; box-shadow:0 8px 25px rgba(0, 0, 0, .25); box-sizing:border-box; }
.rouletteCreateInner { width:100%; box-sizing:border-box; }
.rouletteCreateInner h3 { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-size:20px; font-weight:700; color:#333; }
.rouletteCreateInner h3 img { width:20px; height:20px; }
.rouletteSection { margin-bottom:14px; }
.rouletteLabel { margin:0 0 7px; font-size:15px; font-weight:700; color:#333; }
.rouletteRewardList { display:flex; gap:6px; }
.rouletteRewardCard { flex:1; height:68px; border:1px solid #ddd; border-radius:12px; background:#fff; cursor:pointer; transition:.2s; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.rouletteRewardCard.active { border-color:#5f5cff; background:#f7f7ff; box-shadow:0 0 0 1px #5f5cff inset; }
.rouletteRewardCard .icon { display:block; margin-bottom:3px; text-align:center; }
.rouletteRewardCard .icon img { width:22px; height:22px; object-fit:contain; }
.rouletteRewardCard strong { display:block; font-size:12px; font-weight:700; color:#333; text-align:center; }
.rouletteOwnBox { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#f5f5f9; border-radius:10px; }
.rouletteOwnLabel { display:flex; align-items:center; gap:5px; font-size:12px; color:#666; }
.rouletteOwnLabel img { width:15px; height:15px; object-fit:contain; }
.rouletteOwnBox strong { font-size:17px; font-weight:700; color:#111; }
.rouletteAmountBox {margin-bottom: 10px; display:flex; gap:10px; align-items:center; }
.rouletteAmountBox>label {font-size:13px; font-weight:700; color:#666;}
.rouletteRewardAmount { flex:1; width:100%; height:40px; border:1px solid #ddd; border-radius:10px; font-size:15px; font-weight:700; color:#111; text-align: center; box-sizing:border-box; text-indent: 7px;}
.rouletteRewardAmount[type=number] { -moz-appearance:textfield; appearance:textfield; }
.rouletteBtnArea { display:flex; gap:6px; margin-top:16px; }
.rouletteBtnArea button { border:0; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
.rouletteCloseBtn { flex:1; height:42px; background:#e5e5e5; color:#555; }
.rouletteStartBtn { flex:2; height:42px; background:#5f5cff; color:#fff; }

.rouletteCreateNotice { padding:10px 12px; border-left:3px solid #5f5cff; background:#f7f7ff; border-radius:0 10px 10px 0; font-size:12px; line-height:1.5; color:#555; }

.rouletteCloseBtn:hover,
.rouletteStartBtn:hover,
.rouletteRewardCard:hover { opacity:.9; }




.rouletteJoinHostPopup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; display:none; width:340px; padding:20px; background:#fff; border-radius:14px; box-shadow:0 8px 25px rgba(0, 0, 0, .25); box-sizing:border-box; }
.rouletteJoinHostInner { width:100%; box-sizing:border-box; }
.rouletteJoinHostInner h3 { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-size:20px; font-weight:700; color:#333; }
.rouletteJoinHostInner h3 img { width:20px; height:20px; }
.rouletteJoinRewardBox { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin-bottom:14px; background:#f5f5f9; border-radius:10px; }
.rouletteJoinRewardLabel { font-size:12px; color:#666; }
.rouletteJoinRewardText { display:flex; align-items:center; gap:5px; font-size:16px; font-weight:700; color:#111; }
.rouletteJoinRewardText img { width:16px; height:16px; object-fit:contain; }
.rouletteJoinStatusBox { display:flex; gap:8px; margin-bottom:14px; }
.rouletteJoinStatusItem { flex:1; padding:14px 10px; background:#fff; border:1px solid #ddd; border-radius:12px; text-align:center; }
.rouletteJoinStatusItem strong { display:block; margin-bottom:4px; font-size:26px; font-weight:700; color:#111; }
.rouletteJoinStatusItem span { display:block; font-size:12px; color:#666; }
.rouletteJoinProgress { width:100%; height:5px; margin-bottom:14px; background:#eee; border-radius:10px; overflow:hidden; }
.rouletteJoinProgressBar { display:block; width:100%; height:100%; background:#5f5cff; border-radius:10px; transition:width .3s linear; }
.rouletteJoinNotice { padding:10px 12px; border-left:3px solid #5f5cff; background:#f7f7ff; border-radius:0 10px 10px 0; font-size:12px; line-height:1.5; color:#555; }






.roulettePlayPopup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; display:none; width:340px; padding:20px; background:#fff; border-radius:14px; box-shadow:0 8px 25px rgba(0, 0, 0, .25); box-sizing:border-box; }
.roulettePlayInner { width:100%; text-align:center; box-sizing:border-box; }
.roulettePlayInner h3 { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-size:20px; font-weight:700; color:#333; }
.roulettePlayInner h3 img { width:20px; height:20px; }
.rouletteCanvasBox { position:relative; width:260px; height:260px; margin:0 auto 14px; }
.rouletteCanvasBox canvas { width:260px; height:260px; border-radius:50%; }
.roulettePointer { position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:22px solid #e84a5f; z-index:2; }
.roulettePlayText { font-size:20px; font-weight:700; color:#555; }





.rouletteResultPopup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; width:340px; display:none; padding:20px; background:#fff; border-radius:14px; box-shadow:0 8px 25px rgba(0,0,0,.25); box-sizing:border-box; }
.rouletteResultInner { text-align:center; }
.rouletteResultInner h3 { margin:0 0 18px; font-size:22px; font-weight:700; color:#333; }
.rouletteResultWinner { margin-bottom:14px; }
.rouletteResultWinner span { display:block; margin-bottom:6px; font-size:13px; color:#888; }
.rouletteResultNick { display:block; font-size:24px; font-weight:700; color:#534AB7; }
.rouletteResultReward { margin-bottom:20px; }
.rouletteResultReward span { display:block; margin-bottom:6px; font-size:13px; color:#888; }
.rouletteResultRewardText { display:block; font-size:18px; font-weight:700; color:#333; }
.rouletteResultConfirmBtn { width:100%; height:46px; border:0; border-radius:10px; background:#534AB7; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }




.rouletteJoinUserPopup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; display:none; width:340px; padding:20px; background:#fff; border-radius:14px; box-shadow:0 8px 25px rgba(0, 0, 0, .25); box-sizing:border-box; }
.rouletteJoinUserInner { width:100%; text-align:center; box-sizing:border-box; }
.rouletteJoinUserInner h3 { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-size:20px; font-weight:700; color:#333; }
.rouletteJoinUserInner h3 img { width:20px; height:20px; }
.rouletteJoinUserProgressBar { display:block; width:100%; height:100%; background:#534AB7; border-radius:999px; transition:width .3s linear; }

.rouletteJoinUserDesc { margin:0 0 14px; font-size:14px; color:#666; }
.rouletteJoinUserBtnArea { display:flex; gap:8px; margin-top:14px; }
.rouletteJoinUserBtnArea button { flex:1; height:44px; border:0; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
.rouletteJoinBtn { background:#534AB7; color:#fff; }
.rouletteRejectBtn { background:#e5e5e5; color:#555; }
.rouletteJoinBtn:disabled,
.rouletteRejectBtn:disabled {
    background:#ddd;
    color:#888;
    cursor:not-allowed;
    opacity:.8;
}