@charset "utf-8";
@font-face {
  font-family: 'NanumSquareRound';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 공통 */
.btn_wrap.top{right:10px;z-index:1;}
.btn_wrap.top .btn.screen.fullscreen{width:40px;height:41px;background-image:url(../img/roulette_btn_fullscreen.png);}
.btn_wrap.top .btn.screen.fullscreen.on{width:64px;height:64px;position:fixed;top:0;right:10px;top:30px;background-image:url(../img/btn_fullscreen_on.png);}  
.popbtnWrap{position:absolute;top:39px;right:55px;z-index:1;}
.popbtnWrap>button{background:url('../img/roulette_btnGuide.png') no-repeat center center;width:42px;height:41px;z-index:1;}
.popbtnWrap.on{right:85px;}

/* 핀볼게임 */
*{box-sizing:border-box;}
    canvas{width:100%;height:100%;position:fixed;inset:0;font-family:'NanumSquareRound'; image-rendering: optimizeSpeed;image-rendering: crisp-edges;image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;-ms-interpolation-mode: nearest-neighbor;}  
    div.copyright{color:#fff;z-index:999;font-size:12px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);}
    div.copyright a{color:#fff;}
    .blind {position:absolute;left:-1000000px;text-indent:-1000000px;overflow:hidden;;margin:-1px;width:1px;height:1px;}
    #settings{position:fixed;bottom:27px;left:27px;width:542px;padding:11px 15px 12px 14px;background:#fff067;border-width:2px 2px 8px 2px;border-style:solid;border-color:#e4b100;border-radius:20px;visibility:visible;opacity:1;z-index:9;transition: visibility, opacity 1s linear;display: flex;font-family:'NanumSquareRound';font-weight:900;color:#3d3f4a;line-height:1;} 
    #settings.hide{visibility:hidden;opacity:0;}
    #settings h3{margin:0;padding:0;font-size:14px;font-weight:900;color:#3d3f4a;margin:4px 0 7px;}
    #settings textarea{background:#fff;border:none;border-radius:12px;width:100%;height:54px;font-size:12px;font-weight:700;color:#3d3f4a;font-family:'NanumSquareRound';padding:11px 14px 12px 9px;border:1px solid #dedede;line-height:15px;word-break:keep-all;overflow-y:auto;}
    #settings button{border: none;}
    #settings .icon{vertical-align: middle;width: 25px;height: 25px;display: inline-block;-webkit-mask-position: center;mask-position: center;-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;background:url('../img/btn_random.png') no-repeat center center;width:100px;height:29px;}
    #settings .icon.play{background-image:url('../img/roulette_btn_start.png');} 
    #settings .icon.shuffle{background-image:url('../img/roulette_btn_random.png');}
    #settings .icon.settingIcon{background-image:url('../img/roulette_icon_roulette.png');width:15px;height:16px;background-position-y:0;}
    #settings .icon.settingIcon.map{background-position-y:0px;}
    #settings .icon.settingIcon.record{background-position-y:-35px;height:12px;}
    #settings .icon.settingIcon.trophy{background-position-y:-65px;}
    #settings .icon.settingIcon.bomb{background-position-y:-98px;}
    #settings div.left{order: 1;width:209px;margin-right:18px;}
    #settings div.left .actions{display:flex;justify-content:center;gap:0 7px;margin-top:6px;} 
    #settings div.right{order: 2;width:283px;} 
    #settings div.right div.row{align-items: center;display: flex;} 
    #settings div.right div.row+.row{margin-top:13px;} 
    #settings div.right div.row label{color:#3d3f4a;flex-grow: 0;flex-shrink: 0;font-weight:900;font-family:'NanumSquareRound';font-size:12px;margin-right:5px;}
    #settings select{background: #fff;border-radius:10px;font-family:'NanumSquareRound';font-weight:900;font-size:11px;text-align:center;padding:0 20px 0 18px;border:1px solid #c4c4c4;color:#3d3f4a; -o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;background:url('../img/roulette_select_arrow.png') no-repeat calc(100% - 6px) center #fff;width:124px;height:23px;} 
    #settings select option{text-align:left;}
    #settings input[type="checkbox"]{vertical-align: middle;width: 0;height:16px;position: relative;}
    #settings input[type="checkbox"]:before{content: "";background:url('../img/roulette_icon_toggle.png') no-repeat 0 0;width:35px;height:16px;display: inline-block;position: absolute;top: 0;left: 0;}
    #settings input[type="checkbox"]:after{content: "";background: #eceef0;border-radius:13px;width:13px;height:13px;transition: transform .2s;position: absolute;top:50%;left:3px;transform:translate(125%, -50%);}
    #settings input[type="checkbox"]:checked:after{background: #fff;transform: translate(0, -50%);}
    #settings input[type="checkbox"]:checked:before{content: "";background-position-y:bottom;}
    #settings .row .onoff{display:inline-block;background:url('../img/roulette_icon_on.png') no-repeat center 0;width:20px;height:14px;margin-right:3px;}  
    #settings .row .onoff.off{margin-left:39px;width:26px;background-image:url('../img/roulette_icon_off.png');}        
    #settings .row .onoff.on.active,#settings .onoff.off.active{background-position:bottom;}
    #settings .btn-group{justify-content: stretch;display: flex;gap:0 3px;}
    #settings .btn-group.on{z-index:1;}
    #settings .btn-group > *{box-sizing: border-box;color: #ffffff;background: #f4bf40;border:2px solid #e3a103;border-radius:10px;justify-content: center;align-items: center;display: flex;overflow: hidden;font-size:11px;font-weight:900;width:54px;height:22px;}
    #settings .btn-group > button:nth-child(3){width:83px;}
    #settings .btn-group > .active{background: #f69100;border-color:#ee7b00;}             
    #settings .btn-group > .btn-numberpush.active{display:none;}     
    #settings .btn-group input[type="number"]{box-sizing: border-box;text-align: center;}    
    #settings .btn-group input[type="number"]#in_winningRank{display:none;line-height:22px;}
    #settings .btn-group input[type="number"]#in_winningRank.active{display:block;} 
    #settings .row .question{position:relative;height:23px;top:0;} 
    #settings .row .question .guideBtn{position:absolute;top:0;left:0;background:url('../img/roulette_btn_info.png') no-repeat center center;width:23px;height:23px;cursor: pointer;}     
    #settings .row .question .guideBtn_txt{background:url('../img/roulette_info_bullon.png') no-repeat center center;position:absolute;bottom:3px;left:22px;width:331px;height:75px;display:none;}
    #settings .row .question .guideBtn:hover+.guideBtn_txt{display:block;}
    #donate{z-index: 999;visibility: visible;opacity: 1;transition: visibility, opacity 1s linear;position: fixed;bottom: calc(160px + 1.5rem);left: 1rem;}    
    #donate.hide{opacity: 0;visibility: hidden;}        
    .copyright {font-size:14px;color:rgba(225,225,225,0.5);position:absolute;bottom:30px;right:40px;font-weight:400;z-index:10;;}    
    #inGame{height:1px;width:1px;opacity:0;}