@charset "utf-8";

/* font */
@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-subset.min.css');


/* reset */

/*
* {margin:0;padding:0;font:inherit;font-family: 'Pretendard', Pretendard, sans-serif;letter-spacing:-0.1px;word-spacing:-1px;}
*, *::before, *::after {box-sizing:border-box;}
html {font-size: 62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
img, video, svg, picture {display:block;height:auto;max-width:100%;}
body {font-size:1.4rem;}
a {text-decoration:none;}
button {border:none;cursor:pointer;background-color:transparent;}
sup {line-height:1;vertical-align:0px;}
ul, ol, li {list-style:none;}

input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input::-ms-clear {display: none;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type='number'] {-moz-appearance: textfield;}

select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}

button { -webkit-tap-highlight-color: rgba(214, 254, 255, 0);}
*/



/* roulette style */
.roulette-container {
    position: relative;
    text-align: center;
}


.roulette-container:before {
    position:absolute;
    content:'';
    top:-2%;
    left:50%;
    transform:translate(-50%);
    width:42px;
    height:60px;
    background:url(roulette_pin.png) no-repeat 0 0 / 100% auto;
    z-index:1;
}
#roulette {
    position: relative;
    width: 600px;
    height: 600px;
    border: 10px solid #969696;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
}

.segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    overflow: hidden;
    border: 1px solid #ddd;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%); */
}

.segment:nth-child(2n) {
    background: #FFF;
}

.segment:nth-child(2n+1) {
    background: hsl(0, 0%, 90%);
}

.segment-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transform-origin: 100% 100%;
    color: #000000;
    text-align: center;
    line-height: 1.2;
}
.segment-text span {
    transform: rotate(45deg);
}

.rlt-left img {
    margin: 0 auto 20px;
}

.rlt-wrap {display:flex;flex-direction:row;width:100%;height:100dvh;overflow:hidden;align-items:center;justify-content:center;gap:20px;background:url(roulette_bg.png) no-repeat center;background-size:cover;}

.rlt-count {display:flex;gap:30px;margin-bottom:20px;justify-content: end;}
.rlt-count-item-label {color:#fff;margin-right:9px;font-size:16px;font-weight:500;}
.rlt-count-item-value {display:inline-block;width:70px;padding:2px 20px;background:#fff;text-align:center;font-size:20px;border-radius:6px;}

.rlt-right {width:50%;}
.rlt-chat {width:748px;margin-left:auto;max-width:100%;border-radius:8px;background-color: #3b3b3b;padding:20px 28px;}
.rlt-chat .rlt-chat-title {color: #fff;font-weight:600;font-size:20px;}
.rlt-chat .rlt-chat-box {padding-top:9px;margin-top:20px;background-color: #343434;border-radius:8px;height:680px;overflow: auto;}
.rlt-chat .rlt-chat-box p {color:#fff;font-size:16px;text-align: center;font-weight:500;line-height:1.4;margin:12px 0;}

.rlt-line {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}


@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.rlt-line {
animation: fadeIn 0.5s ease-out;
}

.btn-roulette {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:156px;
    height:156px;
    background:url(roulette_btn.png) no-repeat 0 0 / 100% auto;
}