@font-face {
  font-family: 'ValueSerif';
  src: url('fonts/ValueSerif-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
    box-sizing: border-box;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
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;
    /* border : 1px solid red; */
    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: #fbead9;
    position: absolute;
    display: none;
}


.nt-ad-container > div:not(.game-wrapper) {
    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%;
   
}
.hs-bgclick{
  height: 18%;
  bottom: 0;
  position: absolute;
}
.hs-bgclicktop{
  top: 0;
  height: 37%;
  position: absolute;
}
.f1,.f2,.f3{
    width: 100%;
    height : 100%;
    position:absolute;
    pointer-events: none;
}
.game-wrapper {
      /*width: 90vmin;*/
      max-width: 100%;
      top: 37.5%;
      left: 50%;
      transform: translate(-50%, 0);
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: absolute;
    }

#game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 85%;
  height: 85%;
  padding: 10px;  
}

.grid-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.game-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  pointer-events: auto;
}
canvas {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation; /* recommended */
}

.glow {
  animation: glowPulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px red);
}
.game-img.glow {
  border: 2px solid red;
}

@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 2px red); }
  50% { filter: drop-shadow(0 0 10px red); }
  100% { filter: drop-shadow(0 0 2px red); }
}

.demo-img { 
    width: 100%;
    height: 100%;
    top: 44%;
    left: 30%;
    position: absolute;
}

.demo-img1 { 
    background-size: contain;
    top: 44%;
    left: 30%;
    position: absolute;
}


.demo,
.cta,
.end-img,
.end-t1,
.end-t2,
.hand,
.intro-img1,
.intro-img2,
.intro-phone,
.intro-t1,
.logo,
.t1,
.t2,
.table {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  position: absolute;
  pointer-events: none !important;
}

.timer-wrapper{
    width: 18%;
    height: 5%;
    position: absolute;
    top: 30%;
    left: 41%;
}
.timerbg{
    background-color: #eeca97;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
}
#timer{
    font-family: 'ValueSerif', serif;
    font-weight: bold;
    font-size: 23px;
    color:#000;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    transform: translate(-50%, -50%);
}




.cta,.end-img,.end-t1,.end-t2,.hand,.intro-img1,
.intro-img2,.intro-phone,.intro-t1,.logo,.t1,.t2,
.table
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite.png'); }

.cta {  background-position: 0 0.00%;  background-size: 100%;}
.end-img {  background-position: 0 8.33%;  background-size: 100%;}
.end-t1 {  background-position: 0 16.67%;  background-size: 100%;}
.end-t2 {  background-position: 0 25.00%;  background-size: 100%;}
.hand {  background-position: 0 33.33%;  background-size: 100%;}
.intro-img1 {  background-position: 0 41.67%;  background-size: 100%;}
.intro-img2 {  background-position: 0 50.00%;  background-size: 100%;}
.intro-phone {  background-position: 0 58.33%;  background-size: 100%;}
.intro-t1 {  background-position: 0 66.67%;  background-size: 100%;}
.logo {  background-position: 0 75.00%;  background-size: 100%;}
.t1 {  background-position: 0 83.33%;  background-size: 100%;}
.t2 {  background-position: 0 91.67%;  background-size: 100%;}
.table {  background-position: 0 100.00%;  background-size: 100%;}