.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 } 

.ln-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; background-image:url(../img/number-bg.jpg);
}
.ln-wrap img { max-width:100% }

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

.ln-holder { max-width:960px; margin-top:0; position:relative; width:100%; height:100%; text-transform:uppercase; display:flex; justify-content:center; align-items:center; gap:18px; overflow-x:hidden; overflow-y:auto; }

.number-play-left, .number-play-right { text-align:center; width:50%; margin: auto auto }

.number-topbox{width:290px;border:2px solid #440381;border-radius:8px;overflow:hidden;margin:0 auto}
    .number-token-left{float:left;width:70%;background:#440381;color:#fff;padding:10px;font-size:16px;font-weight:bold}
    .number-token-right{float:left;width:30%;background:#fff;color:#440381;padding:10px;font-size:16px;font-weight:bold}
.number-machine{margin:15px auto 0}
    .number-machine-wrapper{position:relative;display:inline-block}
    .number-wrap{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:60%;display:flex;height:30%}
    .number-spin{width:70%;height:16%;font-size:42px;line-height:42px;font-weight:bold;color:#fff;border:0;position:absolute;bottom:12%;left:50%;transform:translateX(-50%);background:#f4ab09;border-radius:80px;text-transform:uppercase}
        .number-spin:hover{filter:brightness(1.2)}
    .number-txt-1{font-weight:bold;font-size:50px;color:#fff}
    .number-txt-2{margin-top:25px;font-size:22px;color:#f4ab09;font-weight:bold}
    .number-txtbox{width:100%;height:50px;background:#fff;border:3px solid #440381;border-radius:5px;color:#000;text-align:center;font-size:22px;font-weight:bold}
        .number-txtbox:focus{outline:0}
    .number-btn-1{background:#f4ab09;font-size:20px;font-weight:bold;color:#fff;border:0;margin-top:10px;padding:10px 30px;transition:all .5s ease;margin-bottom:30px;border-radius:12px;text-transform:uppercase; filter:grayscale(1); pointer-events:none}
        .number-btn-1.aaa { filter:grayscale(0); pointer-events:auto; }
        .number-btn-1:hover{background:#ff6c00}
        .number-btn-1.loading { opacity: 0.7; pointer-events: none; }
    .number-mynumber-left{float:left;width:100%;background:#440381;color:#fff;padding:10px;font-size:16px;font-weight:bold}
    .number-mynumber-right{float:left;width:50%;background:#fff}
        .number-mynumber-right>input{width:100%;color:#440381;font-size:16px;font-weight:bold;border:0;padding:10px;text-align:center}
    .mynumber-wrap-1{margin-top:15px;width:100%;border:5px solid #946c30;padding:6px;border-radius:25px;background:#440381;margin:15px auto 0}
    .mynumber-wrap-2{border:1px solid #f4ab09;background:#440381;padding:10px;border-radius:18px}
    .mynumber-table { font-size:12px; }
        .mynumber-table>tbody>tr>th{background:#f4ab09;padding:5px;text-align:center;font-weight:bold;color:#fff}
        .mynumber-table>tbody>tr>td{background:#fff;color:#fff;padding:5px}
        .mynumber-table tbody tr td:nth-child(-n+2) { background:rgba(0,0,0,.6) }
        .mynumber-table td, .mynumber-table th { border:1px solid #4c3400 }

.number-wrap.n4 .number-run { width:25% }
.number-wrap.n3 .number-run { width:33.33% }
.number-wrap.n2 .number-run { width:50% }
.number-run{width:25%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:auto 70%}
    .number-run[num="1"]{background-image:url("../img/num1.png")}
    .number-run[num="2"]{background-image:url("../img/num2.png")}
    .number-run[num="3"]{background-image:url("../img/num3.png")}
    .number-run[num="4"]{background-image:url("../img/num4.png")}
    .number-run[num="5"]{background-image:url("../img/num5.png")}
    .number-run[num="6"]{background-image:url("../img/num6.png")}
    .number-run[num="7"]{background-image:url("../img/num7.png")}
    .number-run[num="8"]{background-image:url("../img/num8.png")}
    .number-run[num="9"]{background-image:url("../img/num9.png")}
    .number-run[num="0"]{background-image:url("../img/num0.png")}

@keyframes slotDrop {
    0%   { transform: translateY(-30px); opacity: 0; }
    30%  { transform: translateY(10px); opacity: 1; }
    60%  { transform: translateY(-5px); }
    80%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

.number-run.animate {
    animation-name: slotDrop;
    animation-fill-mode: both;
}

@media only screen and (max-width: 820px) {
    .ln-holder { flex-direction:column; padding:80px 0 30px; justify-content:start }
    .number-play-left, .number-play-right { width:90%; }
    .number-spin { font-size:8.2vw; line-height:8.2vw }
    .number-txt-1 { font-size:8.2vw }
    .number-txt-2 { margin-top:3%; font-size:4.8vw }
    .number-btn-1 { font-size:5vw; padding:2vw 6vw; margin-top:3% }
}