.mini-gbox-wrap * { margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; }
.mini-gbox-wrap { position:fixed; z-index:2147483647; width:100%; height:100%; top:0; left:0 }
    .mini-gbox-wrap .ooverlay { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8) }
    .mini-gbox-wrap .mini-gbox { position:absolute; z-index:2; width:94%; height:94%; left:3%; top:3%; opacity:0 }
    .mini-gbox-wrap .mini-gbox.aaa { opacity:1 } 

.gcp-wrap {
  font-family:Arial; height: 100%; display: flex; align-items: center; justify-content: center; background-size:cover; background-position:center center; background-repeat:no-repeat; transition:none;
}
.gcp-wrap img { max-width:100%; display:block; margin:0 auto }

.gcp-close { position:absolute; right:15px; top:15px; cursor:pointer }
    .gcp-close img { max-width:50px; }
    .gcp-close:hover { filter:brightness(1.4) }

.gcp-music-wrapper { position: fixed; z-index: 99; right: 0; top: 50px; opacity: 1; transition: 0.3s; overflow: hidden; height: 40px; width: 40px; background: #fff; border-radius: 10px 0 0 10px; display: none; }
    .gcp-music-wrapper audio { position: absolute; left: -6px; top: -7px; }

.gcp-holder { max-width:760px; margin-top:0; position:relative; width:90% }
    .gcp-holder .gcp-top { position:relative; z-index:1; text-align:center; margin-top:12px }

.gashapon-wrapper{position:relative;max-width:460px;margin:0 auto}
.gcp-cover{position:absolute;left:0;right:0;top:-0.5%;pointer-events:none;z-index:3;max-width:96%;margin:0 auto}
.gcp-spin-btn{position:absolute;left:1.5%;right:0;top:53%;z-index:3;max-width:20%;margin:0 auto;}
    .gcp-spin-img { transform:rotate(0deg); transition: none }
    .gcp-spin-img.rotate { animation: gcpRotate 1.4s ease-in-out 2 }
.gcp-draw-wrap{position:absolute;left:0;right:0;top:68%;z-index:3;max-width:90%;margin:0 auto}
    .gcp-draw-wrap .draw-btn{margin:0 auto;width:55%}
    .gcp-draw-wrap .draw-btn:hover { filter: brightness(1.2) drop-shadow(0 0 5px rgb(255,255,255,0.5)) }

@keyframes gcpRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gcp-ball{position:absolute;max-width:23%}
.gcp-ball.gcpb1{left:29%;top:35%;transform:rotate(-10deg);}
.gcp-ball.gcpb2{right:28%;top:44%;z-index:3}
.gcp-ball.gcpb3{right:15%;top:25%;transform:rotate(10deg);z-index:1}
.gcp-ball.gcpb4{left:15%;top:41%}
.gcp-ball.gcpb5{right:30%;top:35%;z-index:2}
.gcp-ball.gcpb6{left:22%;top:25%;z-index:1;transform:rotate(-30deg)}
.gcp-ball.gcpb7{left:30%;right:0;top:46%}
.gcp-ball.gcpb8{left:7%;top:33%;z-index:1;transform:rotate(49deg)}
.gcp-ball.gcpb9{right:11%;top:39%;z-index:1;transform:rotate(25deg)}
.gcp-ball.gcpb10{left:6%;right:0;top:23%;margin:0 auto;z-index:1;transform:rotate(21deg)}
.gcp-ball.gcpb11{right:4%;top:30%;transform:rotate(-21deg)}
.gcp-ball.gcpb12{left:3%;top:25%;transform:rotate(-38deg)}

@keyframes tilt-shaking {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(3px, 3px) rotate(5deg); }
	50% { transform: translate(0, 0) rotate(0eg); }
	75% { transform: translate(-3px, 3px) rotate(-5deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
.shaking .gcp-ball.gcpb6 img, .shaking .gcp-ball.gcpb7 img, .shaking .gcp-ball.gcpb3 img, .shaking .gcp-ball.gcpb4 img, .shaking .gcp-ball.gcpb8 img, .shaking .gcp-ball.gcpb2 img {
	animation: tilt-shaking infinite 0.3s;
}
.shaking .gcp-ball.gcpb5 img, .shaking .gcp-ball.gcpb9 img, .shaking .gcp-ball.gcpb10 img, .shaking .gcp-ball.gcpb1 img, .shaking .gcp-ball.gcpb11 img , .shaking .gcp-ball.gcpb12 img  {
	animation: tilt-shaking infinite 0.5s;
}

.gcp-dropball{position:absolute;left:0;right:0;top:86%;max-width:59%;height:10%;margin:0 auto;overflow:hidden; transition:all .7s}
    .gcp-dropball.show {position:absolute;top:8%;max-width:none;height:auto;overflow:visible; z-index:99;}
    .gcp-dropball.show .gcp-reward-ball { max-width:300px; display:block; visibility:visible; opacity:1 }
.gcp-reward-ball{max-width:30%;margin:0 auto;opacity:0;visibility:hidden;display:none;transform-origin:center;animation:dropshake 1.5s ease-in-out;}
.gcp-reward-ball.active{visibility:visible;opacity:1;display:block}

.gcp-token-need{position:absolute;width:11%; height:6%; z-index:9;left:9%;top:71%; display:flex; justify-content:center; align-items:center}
    .gcp-token-need .token-text{font-size:30px; font-weight:bold; color:#ffffff}
.gcp-token-wrap{position:absolute;max-width:16%;z-index:9;left:9%;top:86.2%}
    .gcp-token-wrap .token-text{position:absolute;left:0;right:0;height:88%;font-size:40px;font-weight:700; color:#ffffff; display:flex; justify-content:center; align-items:center}
.gcp-record-wrap{position:absolute;max-width:16%;z-index:9;right:9%;top:86.2%}

.gcp-startgame-holder { position:relative }
.gcp-startgame { filter:brightness(0.8); pointer-events:none; position:relative }
    .gcp-startgame.aaa { filter:brightness(1); pointer-events:auto; cursor:pointer }
    .gcp-startgame.stop { pointer-events:none; filter:brightness(0.5) }

.gcp-res { position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:12; opacity:0; visibility:hidden;}
.gcp-res.aaa { opacity:1; visibility:visible}
    .gcp-res .overlay { position:absolute; z-index:1; background:rgba(0,0,0,0.7); width:100%; height:100% }
    .gcp-res .gcp-res-con { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:88%; max-width:300px; cursor:pointer }
        .gcp-res .gcp-res-con.stop { pointer-events:none }
        
    .gcp-res .res-con { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; visibility:hidden; opacity:0; }
        .gcp-res .res-con.aaa { visibility:visible; opacity:1;}
    .gcp-res .res-bbg { position:relative; z-index:1;  }
        .gcp-res .res-bbg .ebbg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1 }
            .gcp-res .res-bbg .ebbg img { width:180%; max-width:none; margin:-40%; filter:hue-rotate(192deg) saturate(1.5) }
    .gcp-res .res-label { position:absolute; width:100%; height:100%; top:0; left:0 }
    .gcp-res .res-label .bbg { position:absolute; top:0; left:0; width:100%; height:100% }
        .gcp-res .res-label .bbg img { width:150%; max-width:none; margin:-25% }
    .gcp-res .res-label .ttext { font-size:40px; font-weight:bold; position:absolute; top:0; left:6%; width:88%; height:100%; display:flex; justify-content:center; align-items:center; text-align:center; line-height:40px; color:#111111 }

    .gcp-res.aaa .gcp-res-con { animation:dropballs .6s ease-in-out; }

.gcp-winnerlist { position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:12; opacity:0; visibility:hidden }
.gcp-winnerlist.aaa { opacity:1; visibility:visible}
    .gcp-winnerlist .overlay { position:absolute; z-index:1; background:rgba(0,0,0,0.7); width:100%; height:100% }
    .gcp-winnerlist .ccon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:88%; max-width:480px }

.gcp-wl-wrap { background-color:#ffffff; border-radius:6px; overflow:hidden }
    .gcp-wl-tabs-wrap { display:flex; justify-content:center; align-items:center; background:#36304a; color:#ffffff }
        .gcp-wl-tabs-wrap .gcp-wl-tabs { text-align:center; width:100%; text-transform:uppercase; font-weight:bold; height:40px; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:16px; }
        .gcp-wl-tabs-wrap .gcp-wl-tabs.aaa, .gcp-wl-tabs-wrap .gcp-wl-tabs:hover { background:#201c2f; color:#ffffff }

.gcp-wl-wrap .gcp-wl-con { max-height:60vh; overflow-y:auto; }
    .gcp-wl-wrap .gcp-wl-con .gcp-wl { display:none }
    .gcp-wl-wrap .gcp-wl-con .gcp-wl.aaa { display:block }

.gcp-wl table { width:100%; text-align:center; font-size:14px; color:#555555 }
    .gcp-wl table thead { background-color:#111111; color:#ffffff; position:sticky; top:0 }
    .gcp-wl table tbody { font-size:12px; }
    .gcp-wl table th, .gcp-wl table td { padding:8px; width:33.33%; text-align:center }
    .gcp-wl table tbody tr:nth-child(even) { background-color:#f5f5f5 }
    .gcp-wl table tbody tr td { background:transparent }

.gcp-wl-close { position:absolute; right:-15px; top:-15px; cursor:pointer }
    .gcp-wl-close img { max-width:40px; }
    .gcp-wl-close:hover { filter:brightness(1.4) }

.mob-landscape .gcp-holder { max-width:54vh; height:100% }
.mob-landscape .gcp-token-need .token-text { font-size:18px; }
.mob-landscape .gcp-token-wrap .token-text{ font-size:20px }

@keyframes gcpGlowing {
	0% { filter: drop-shadow(0 0 3px rgb(255,255,255,1))}
	50% { filter: drop-shadow(0 0 12px rgb(255,255,255,1)) brightness(1.2)}
	100% { filter: drop-shadow(0 0 3px rgb(255,255,255,1))}
}

@keyframes dropshake {
	0% { transform: translateY(-100%) }
	20% {transform: translateY(0) }
	30% {transform: translateY(-8px)}
	40% {transform: translateY(0px) translateX(2px) rotate(2deg) }
	50% {transform: translateY(-2px) rotate(-2deg) translateX(-2px)}
	60% { transform: rotate(2deg) translateX(2px)}
	100% { transform: rotate(0) translateX(0px)}
}

@keyframes dropballs {
	45% { transform: translate(-50%,-50%) rotate(12deg)}
	60% { transform: translate(-50%,-50%) rotate(-12deg) }
	75% { transform: translate(-50%,-50%) rotate(12deg)}
}

@media only screen and (max-width: 460px) {

    .gcp-token-need .token-text { font-size:6.8vw }
    .gcp-token-wrap .token-text { font-size:8.8vw }

}