:root{
  --cyan:#2bc8ff;
  --navy:#00152f;
  --navy2:#001d43;
  --black:#02070d;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#001128;
  font-family:Arial,Helvetica,sans-serif;
}
body{overflow-x:hidden}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* DESKTOP */
.desktop-shell{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#001128;
}
.stage{
  position:relative;
  width:100vw;
  aspect-ratio:1760/832;
  max-height:100vh;
  background:url("assets/scene-gardatoto.webp") center top/100% 100% no-repeat;
  overflow:hidden;
}
.logo-cover{
  position:absolute;
  z-index:2;
  left:39.3%;
  top:2.7%;
  width:22%;
  height:9.7%;
  background:#00152f;
  border-radius:18px;
}
.real-logo{
  position:absolute;
  z-index:3;
  left:41%;
  top:4.1%;
  width:18.6%;
  height:6%;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(35,196,255,.75));
}
.hotspot{
  position:absolute;
  z-index:5;
  display:block;
}
.login{left:39.20%;top:57.10%;width:21.70%;height:5.95%}
.register{left:39.20%;top:64.05%;width:21.70%;height:5.95%}
.terbaru{left:39.18%;top:72.45%;width:6.92%;height:17.80%}
.thailand{left:46.85%;top:72.45%;width:6.92%;height:17.80%}
.gacor{left:54.50%;top:72.45%;width:6.92%;height:17.80%}

.mobile-shell{display:none}

/* MOBILE = 1 image directly cropped from the web artwork */
@media (max-width:700px), (orientation:portrait) and (max-width:900px){
  html,body{
    margin:0;
    padding:0;
    background:#001128;
    overflow-x:hidden;
  }

  .desktop-shell{display:none}

  .mobile-shell{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    width:100%;
    min-height:0;
    padding:0;
    margin:0;
    background:#001128;
  }

  .mobile-stage{
    position:relative;
    width:min(100vw,430px);
    margin:0 auto;
    line-height:0;
    background:#001128;
  }

  .mobile-stage>img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .m-hotspot{
    position:absolute;
    z-index:5;
    display:block;
  }

  /* Hotspots positioned over the direct mobile crop */
  .m-login{
    left:4.5%;
    top:58.5%;
    width:91%;
    height:6.1%;
  }
  .m-register{
    left:4.5%;
    top:65.6%;
    width:91%;
    height:6.1%;
  }
  .m-terbaru{
    left:4.5%;
    top:74.2%;
    width:28.5%;
    height:17.2%;
  }
  .m-thailand{
    left:35.8%;
    top:74.2%;
    width:28.5%;
    height:17.2%;
  }
  .m-gacor{
    left:67.1%;
    top:74.2%;
    width:28.5%;
    height:17.2%;
  }
}

@media(min-width:1761px){
  .stage{width:min(100vw,calc(100vh * 2.1153846154))}
}