*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050505}
body{min-width:320px;font-family:Arial,Helvetica,sans-serif}
.gabdua-page{
  position:relative;
  width:100%;
  aspect-ratio:1672/941;
  background:url("/assets/gabdua-hero.png") top center/100% auto no-repeat;
  overflow:hidden;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:10;
  border-radius:8px;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.hotspot:hover,
.hotspot:focus-visible{
  background:rgba(255,190,0,.08);
  box-shadow:0 0 18px rgba(255,190,0,.35);
  outline:none;
  transform:translateY(-1px);
}

/* Top navigation */
.home{left:8.1%;top:1.2%;width:5.4%;height:5.7%}
.slots{left:14.2%;top:1.2%;width:5.7%;height:5.7%}
.live{left:20.1%;top:1.2%;width:8.8%;height:5.7%}
.sports{left:29.0%;top:1.2%;width:6.4%;height:5.7%}
.fourd{left:35.5%;top:1.2%;width:4.2%;height:5.7%}
.fishing{left:39.8%;top:1.2%;width:6.8%;height:5.7%}
.promotions{left:46.7%;top:1.2%;width:9.1%;height:5.7%}
.vip{left:56.0%;top:1.2%;width:4.5%;height:5.7%}
.login{left:68.0%;top:1.0%;width:7.6%;height:5.4%}
.register{left:76.4%;top:1.0%;width:9.5%;height:5.4%}
.app{left:86.5%;top:1.0%;width:11.3%;height:5.4%}

/* Main CTA */
.hero-register{left:12.0%;top:33.7%;width:14.5%;height:5.0%}

/* Game cards */
.card-slots{left:3.5%;top:45.2%;width:18.0%;height:15.4%}
.card-live{left:22.0%;top:45.2%;width:18.0%;height:15.4%}
.card-sports{left:40.6%;top:45.2%;width:18.0%;height:15.4%}
.card-4d{left:59.4%;top:45.2%;width:18.0%;height:15.4%}
.card-fishing{left:78.0%;top:45.2%;width:18.0%;height:15.4%}

/* Promo cards */
.promo-1{left:3.5%;top:75.2%;width:23.2%;height:11.8%}
.promo-2{left:27.2%;top:75.2%;width:22.6%;height:11.8%}
.promo-3{left:50.2%;top:75.2%;width:22.0%;height:11.8%}
.promo-4{left:72.6%;top:75.2%;width:23.5%;height:11.8%}

@media(max-width:900px){
  .gabdua-page{
    min-height:620px;
    aspect-ratio:16/10;
    background-size:cover;
    background-position:center top;
  }
  /* Hide most hotspots on cropped tablet layout to avoid misalignment */
  .card-slots,.card-live,.card-sports,.card-4d,.card-fishing,
  .promo-1,.promo-2,.promo-3,.promo-4{display:none}
}
@media(max-width:600px){
  .gabdua-page{
    aspect-ratio:9/12;
    min-height:720px;
    background-size:auto 100%;
    background-position:center top;
  }
  .home,.slots,.live,.sports,.fourd,.fishing,.promotions,.vip,.login,.app{display:none}
  .register{left:65%;top:1.4%;width:29%;height:5.4%}
  .hero-register{left:7%;top:34%;width:40%;height:5.5%}
}