: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{min-height:100vh;overflow-x:hidden}

/* DESKTOP - rasio artwork 1760 x 832 */
.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;
}

/* cover logo generated in artwork, then overlay exact logo from supplied sample */
.logo-cover{
  position:absolute;
  z-index:2;
  left:39.3%;
  top:2.7%;
  width:22.0%;
  height:9.7%;
  background:linear-gradient(180deg,#00152f,#00152f);
  border-radius:18px;
}
.real-logo{
  position:absolute;
  z-index:3;
  left:41.0%;
  top:4.1%;
  width:18.6%;
  height:6.0%;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(35,196,255,.75));
}

.hotspot{
  position:absolute;
  z-index:5;
  display:block;
  border-radius:7px;
  outline:none;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.06);
  opacity:0;
  transition:.15s ease;
}
.hotspot:hover::after{opacity:1}
.hotspot:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cyan)}

/* exact clickable coordinates on 1760 x 832 artwork */
.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}

/* responsive HP */
@media (max-width:700px), (orientation:portrait) and (max-width:900px){
  .desktop-shell{display:none}
  .mobile-shell{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
    padding:14px 8px 24px;
    background:
      linear-gradient(rgba(0,15,40,.18),rgba(0,5,18,.48)),
      url("assets/scene-gardatoto.webp") center / cover fixed no-repeat;
  }
  .mobile-card{
    width:min(390px,100%);
    background:linear-gradient(180deg,#001d43,#02070d);
    border:2px solid var(--cyan);
    padding:11px;
    box-shadow:0 0 24px rgba(35,196,255,.42),0 18px 45px rgba(0,0,0,.7);
  }
  .mobile-logo{
    height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-logo img{
    max-width:260px;
    width:84%;
    max-height:54px;
    object-fit:contain;
    filter:drop-shadow(0 0 7px rgba(35,196,255,.65));
  }

  /* crop center promo area from same artwork */
  .mobile-poster{
    width:100%;
    aspect-ratio:1.05 / 1;
    border:2px solid var(--cyan);
    background-image:url("assets/scene-gardatoto.webp");
    background-repeat:no-repeat;
    background-size:500% auto;
    background-position:50.0% 18.5%;
    box-shadow:inset 0 0 0 1px rgba(150,230,255,.18);
  }

  .mobile-btn{
    height:46px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    font-size:14px;
    font-weight:900;
    background:linear-gradient(#002a59,#02070d);
    border:1px solid var(--cyan);
    border-radius:7px;
    box-shadow:0 0 10px rgba(35,196,255,.16);
    position:relative;
  }
  .mobile-btn::after{
    content:"";
    position:absolute;
    bottom:-2px;
    width:44px;
    height:2px;
    background:var(--cyan);
    box-shadow:0 0 9px var(--cyan);
  }

  .mobile-menu{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:18px;
  }
  .mobile-menu a{
    min-height:128px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:11px;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(#00254e,#02070d);
    border:1px solid var(--cyan);
    border-radius:7px;
  }
  .crown{
    font-size:52px;
    line-height:.8;
    color:#d9f5ff;
    text-shadow:0 0 9px var(--cyan);
  }
  .mobile-menu span{
    font-size:9px;
    line-height:1.2;
    font-weight:900;
  }
}

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