/* 게임 관련 스타일 */

body {
    font-family: 'S-CoreDream-3Light', sans-serif; /* 'CookieRun-Regular' */
    color: #333;
    background: url(./images/top-bar.png) 0 0/contain no-repeat #fff;
    font-size: 1.5rem;
    overflow: hidden;
}


.btn {display:inline-block;padding:.5rem 1.8rem;border-radius: 15px;font-size: 5vh;}
.bottoms {width:60%;position: absolute;bottom: 2rem;text-align: center;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .bottoms {width:calc(100% - 2vw);}
}
.bottoms .btn {user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .bottoms .btn {font-size: 5vw;}
}
.bottoms .btn.left {float:left;}
.bottoms .btn.right {float:right;}
/* .bottoms::after {clear:both;content: " ";display: block;margin-bottom: 2rem;} */




.scene{width:100vw;height:100vh;overflow: hidden;    display:flex;justify-content: center;align-items: center;flex-direction: column;    /*min-width: 178vh;*/}
.scene {font-size: 5vh;/*font-size:1.5rem*/}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene {font-size: 6vw;word-break: auto-phrase;text-align: center;}
}
.scene .contents {max-height: 100vh;/*max-width: 800px;*/margin: 0 auto;width: 100%;           display:flex;justify-content: center;align-items: center;flex-direction: column;}
.scene .contents .intro {display:flex;justify-content: center;align-items: center;flex-direction: column;margin-top: -8rem;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro {margin-bottom: 10vh;margin-top: 10vh;}
}
.scene .contents .intro .title {display:flex;justify-content: center;align-items: center;flex-direction: column;/*width:80%;*/width: 70vh;/*max-width:800px;*/}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro .title {width: 70%;margin: 0 auto;}
}
.scene .contents .intro .title img {width:100%}
.scene .contents .intro p {margin-bottom: 2vh;font-size: 6vh;    margin-top: 6vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro p {font-size: 3.6vh;}
}

/* .scene .contents {max-width: 800px;margin: 0 auto;width: 100%;} */
.scene .contents .game {display: flex;justify-content: center;align-items: center;flex-direction: column; width: 100%;margin-top: -3rem;}
.scene .contents .game header {/*font-size: 1rem;*/display:flex;justify-content: center;align-items: center;flex-direction:row;background:none;color: #007B6D; width: 100%;/*margin-bottom: 2rem;*/    margin-bottom: 1vh;font-size: 5vh;}
.scene .contents .game header.portrait {flex-direction: column; display:none;}
.scene .contents .game header.portrait .score_board {display: flex;flex-direction: row;justify-content: center;align-items: center;}
.scene .contents .game header.portrait .score_board > *:first-child {margin-right: 10vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game {margin-top: 3rem;}
    .scene .contents .game header.portrait {display:flex;margin-bottom: 5vh;}
    .scene .contents .game header.landscape {display:none;}
    .scene .contents .game header.portrait .score_board > *:first-child {margin-right: 5vw;}
}


.scene .contents .game header>* {flex-grow: 1;}
.scene .contents .game header .explain {color:black;background-color:#EDEDED;border-radius: 1rem; /*padding: 1rem;*/margin:0;    font-size: 6vh;padding: 1vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game header .explain {font-size: 6.3vw;margin-bottom: 2vh;}
}
.scene .contents .game .container {    width: 100%;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game .container {margin-bottom: 8vh;}
}

@media screen and (orientation: portrait) {/* 세로 모드일 때 */


}


/* 룰렛에서 추가 */

.scene .contents .game .title {position: absolute;width: 100%;top: 0vh;text-align: center;margin-top:1rem;font-size: 7vh;}
@media screen and (orientation: portrait) {
    .scene .contents .game .title {
        font-size: 6vw;
    }
}

.roulette-container {position: relative;width: min(90vw, 60vh);height: min(90vw, 60vh);margin: 30px auto 10px auto;background: url(./images/board-round.png) 50% 50% / cover no-repeat;}
#roulette {display: block;background: #fff;border-radius: 50%;box-shadow: 0 0 20px #aaa;width: 94%;height: 94%;position: absolute;left: 3%;top: 3%;}
.spin-btn {
    position: absolute;z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    /* padding: 40px 40px; */
    font-size: 22px;
    border: 5px solid #000;
    border-radius: 50%;
    background: #f00;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 16px #f8b40055;
    transition: background 0.2s, transform 0.1s;
    z-index: 2;
    user-select: none;
}
.spin-btn:active {
    background: #f85f73;
    transform: translate(-50%, -50%) scale(0.96);
}
.spin-btn img {width: 90%;}


.scene .contents .popup {position: fixed;z-index: 100;width: 100vw;height: 100vh;left: 0;top: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;background: rgba(0, 0, 0, .5);}
.scene .contents .popup .container {width: 50vw;/*max-width: 500px;*/text-align: center;padding: 2rem;background: url(./images/top-bar.png) 0 0 / contain no-repeat #fff;}
.scene .contents .popup .container .btn {border-radius: 15px;padding: .5rem 1.8rem;display: inline-block;font-size: 4vw;}
.scene .contents .popup .container .item {font-size:7vw;font-weight: 900;margin:5vw 0 6vw;}
.scene .contents .popup .container .info {margin:0;font-size:5vw}
.scene .contents .popup#menulist .container {max-height: 50vh;overflow: auto;}
.scene .contents .popup#menulist .container .menu {margin: 1vh auto;}