* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100dvh;
    overflow: hidden;
}

.nt-wrapper {
    width: 100dvw;
    height: 100dvh;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nt-progress-bar-cont {
    width: 45%;
    max-width: 250px;
    height: 7px;
    position: relative;
}

.nt-progress-bar {
    width: 100%;
    height: 100%;
    border: 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
}

.nt-progress {
    width: 1%;
    height: 100%;
    background-color: white;
    position: absolute;
}

.nt-ad-container {
    width: auto;
    height: auto;
    overflow: hidden;
    background-color: #ffffff;
    position: absolute;
    display: none;
}

.nt-ad-container * {
    position: absolute;
    pointer-events: none;
}

.scene,
.layer {
    inset: 0;
    width: 100%;
    height: 100%;
}

.scene {
    opacity: 0;
}

.intro-scene {
    opacity: 1;
}

.intro-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    background: #000000;
    opacity: 1;
    pointer-events: none;
}

.layer {
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("images/sprite.png");
}

.intro_bg { background-position: 0 0.000000%; }
.intro_popcornimg { background-position: 0 4.761905%; }
.intro_topcopy { background-position: 0 9.523810%; }
.intro_taptxt { background-position: 0 14.285714%; }
.intro_tapcircle { background-position: 0 19.047619%; transform-origin: 50.1% 78.4%; }
.intro_taphand { background-position: 0 23.809524%; transform-origin: 49.9% 78.4%; }
.intro_bottomlogo { background-position: 0 28.571429%; }
.game_bg { background-position: 0 33.333333%; }
.game_logo { background-position: 0 38.095238%; }
.game_copy { background-position: 0 42.857143%; }
.game_txt { background-position: 0 47.619048%; }
.game_clockimg { background-position: 0 52.380952%; }
.game_stage { background-position: 0 57.142857%; }
.game_dicecontainer { background-position: 0 61.904762%; transform-origin: 50.1% 61.5%; }
.game_popcorn { background-position: 0 66.666667%; transform-origin: 80.3% 73.1%; }
.game_cta { background-position: 0 71.428571%; }
.end_bg { background-position: 0 76.190476%; }
.end_logo { background-position: 0 80.952381%; }
.end_copy { background-position: 0 85.714286%; }
.end_img { background-position: 0 90.476190%; }
.end_replay { background-position: 0 95.238095%; }
.end_cta { background-position: 0 100.000000%; }

.game-guide {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
}

.guide-dot {
    width: 6.1%;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    opacity: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity, box-shadow;
}

.game_dicecontainer,
.dice-3d,
.popcorn-piece {
    z-index: 4;
}

.game_cta {
    z-index: 5;
}

.timer-value {
    left: 46%;
    top: 32.5%;
    width: 21%;
    height: 5%;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    opacity: 0;
}

.dice-3d {
    width: 10.4%;
    aspect-ratio: 1 / 1;
    left: 44.7%;
    top: 59.0%;
    opacity: 0;
    perspective: 420px;
    transform-origin: 50% 50%;
}

.die-cube {
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-18deg) rotateY(25deg);
}

.die-face {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #111111;
    border-radius: 14%;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 54%, #cfcfcf 100%);
    box-shadow: inset -8px -8px 14px rgba(0, 0, 0, 0.16), inset 5px 5px 10px rgba(255, 255, 255, 0.9);
    transform-style: preserve-3d;
}

.die-face span {
    width: 13%;
    height: 13%;
    border-radius: 50%;
    background: #111111;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.die-face-1 { transform: translateZ(18px); }
.die-face-2 { transform: rotateY(180deg) translateZ(18px); }
.die-face-3 { transform: rotateY(90deg) translateZ(18px); }
.die-face-4 { transform: rotateY(-90deg) translateZ(18px); }
.die-face-5 { transform: rotateX(90deg) translateZ(18px); }
.die-face-6 { transform: rotateX(-90deg) translateZ(18px); }

.die-face-2 span:nth-child(1),
.die-face-3 span:nth-child(1),
.die-face-4 span:nth-child(1),
.die-face-5 span:nth-child(1),
.die-face-6 span:nth-child(1) { left: 28%; top: 28%; }
.die-face-2 span:nth-child(2),
.die-face-3 span:nth-child(3),
.die-face-4 span:nth-child(4),
.die-face-5 span:nth-child(5),
.die-face-6 span:nth-child(6) { left: 72%; top: 72%; }
.die-face-3 span:nth-child(2),
.die-face-5 span:nth-child(3) { left: 50%; top: 50%; }
.die-face-4 span:nth-child(2),
.die-face-5 span:nth-child(2),
.die-face-6 span:nth-child(2) { left: 72%; top: 28%; }
.die-face-4 span:nth-child(3),
.die-face-5 span:nth-child(4),
.die-face-6 span:nth-child(5) { left: 28%; top: 72%; }
.die-face-6 span:nth-child(3) { left: 28%; top: 50%; }
.die-face-6 span:nth-child(4) { left: 72%; top: 50%; }

.hs {
    pointer-events: all;
    z-index: 900;
}

.hs-start {
    inset: 0;
}

.hs-roll {
    width: 34%;
    height: 17%;
    left: 33%;
    top: 54%;
    border-radius: 50%;
    display: none;
}

.hs-replay {
    width: 50%;
    height: 6.5%;
    left: 25%;
    top: 81%;
    display: none;
}

.hs-bgclick {
    width: 52%;
    height: 7%;
    left: 24%;
    top: 88%;
    display: none;
}

.border {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    z-index: 999;
    pointer-events: none;
}

.close-btn {
    display: none;
    width: 20px;
    height: 20px;
    top: 5px;
    right: 5px;
    color: #fff;
    border: 1px #fff solid;
    background-color: #000000;
    border-radius: 10px;
    text-align: center;
    pointer-events: all;
    line-height: 17px;
    z-index: 1000;
}