@import url(https://db.onlinewebfonts.com/c/b78d933f8aa6b9284c1d3efd3db0a9b9?family=Avenir-Black);

* {
    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 * {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.border {
    border: 1px solid #000;
    z-index: 999;
    pointer-events: none;
}

.hs {
    /* background-color: #ff000090; */
    pointer-events: all;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.hs-bgclick{
    height: 20%;
}
 .close-btn{
    display:none; /* comment this out on production */
    position: absolute;
    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;
}

/* nugget tap areas (positioned from SPOTS in main.js) */
.hss-spot {
    pointer-events: all;
    cursor: pointer;
    /* background-color: #ff000050; */
    aspect-ratio: 1/1;
    width: 30%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.a1,.a2,.a3,.a4,.a5,.a6,
.bg,.end-img,.end-lost,.end-win,.endcta,.introcopy1,
.introcopy2,.logo,.nugg1,.nugg1b,.nugg2,.nugg2b,
.nugg3,.nugg3b,.nugg4,.nugg4b,.nugg5,.nugg5b,
.nugg6,.nugg6b,.scorebg,.tapimg,.wrong
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite.png'); }

.a1 {  background-position: 0 0.00%;  background-size: 100%;}
.a2 {  background-position: 0 3.57%;  background-size: 100%;}
.a3 {  background-position: 0 7.14%;  background-size: 100%;}
.a4 {  background-position: 0 10.71%;  background-size: 100%;}
.a5 {  background-position: 0 14.29%;  background-size: 100%;}
.a6 {  background-position: 0 17.86%;  background-size: 100%;}
.bg {  background-position: 0 21.43%;  background-size: 100%;}
.end-img {  background-position: 0 25.00%;  background-size: 100%;}
.end-lost {  background-position: 0 28.57%;  background-size: 100%;}
.end-win {  background-position: 0 32.14%;  background-size: 100%;}
.endcta {  background-position: 0 35.71%;  background-size: 100%;}
.introcopy1 {  background-position: 0 39.29%;  background-size: 100%;}
.introcopy2 {  background-position: 0 42.86%;  background-size: 100%;}
.logo {  background-position: 0 46.43%;  background-size: 100%;}
.nugg1 {  background-position: 0 50.00%;  background-size: 100%;}
.nugg1b {  background-position: 0 53.57%;  background-size: 100%;}
.nugg2 {  background-position: 0 57.14%;  background-size: 100%;}
.nugg2b {  background-position: 0 60.71%;  background-size: 100%;}
.nugg3 {  background-position: 0 64.29%;  background-size: 100%;}
.nugg3b {  background-position: 0 67.86%;  background-size: 100%;}
.nugg4 {  background-position: 0 71.43%;  background-size: 100%;}
.nugg4b {  background-position: 0 75.00%;  background-size: 100%;}
.nugg5 {  background-position: 0 78.57%;  background-size: 100%;}
.nugg5b {  background-position: 0 82.14%;  background-size: 100%;}
.nugg6 {  background-position: 0 85.71%;  background-size: 100%;}
.nugg6b {  background-position: 0 89.29%;  background-size: 100%;}
.scorebg {  background-position: 0 92.86%;  background-size: 100%;}
.tapimg {  background-position: 0 96.43%;  background-size: 100%;}
.wrong {  background-position: 0 100.00%;  background-size: 100%;}

.timer {
    font-family: "Avenir-Black";
    font-size: 23px;
    color: #000;
    top: 27.5%;
    left: 82%;
    width: 8%;
    height: 4%;
    text-align: center;
}

/* full-frame layer; each card is placed on its nugget by main.js */
.cardscontainer {
    left: 0;
    top: 0;
}

/* revealed prize card — size here, position from SPOTS */
.card {
    width: 47%;
    height: auto;
    aspect-ratio: 1/1;
    pointer-events: none;
    will-change: transform, opacity;
}

.cardpair1 { background: url('images/cardpair1.png') no-repeat center center; background-size: contain; }
.cardpair2 { background: url('images/cardpair2.png') no-repeat center center; background-size: contain; }
.cardpair3 { background: url('images/cardpair3.png') no-repeat center center; background-size: contain; }
.cardpair4 { background: url('images/cardpair4.png') no-repeat center center; background-size: contain; }
.cardpair5 { background: url('images/cardpair5.png') no-repeat center center; background-size: contain; }
.cardpair6 { background: url('images/cardpair6.png') no-repeat center center; background-size: contain; }