*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;background:#02040a}
body{overflow-x:hidden}
.site{width:100%}
.design{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  line-height:0;
  overflow:hidden;
}
.design>img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  text-decoration:none;
  outline:none;
  background:transparent;
}
.hotspot:hover{outline:none}

/* Hero CTA hover effect is clipped to the beveled painted buttons */
.cta{
  overflow:hidden;
  clip-path:polygon(4% 0,96% 0,100% 9%,100% 91%,96% 100%,4% 100%,0 91%,0 9%);
}
.play-main:hover{
  background:rgba(126,45,255,.07);
  box-shadow:inset 0 0 20px rgba(155,73,255,.22);
}
.discord-main:hover{
  background:rgba(95,220,45,.06);
  box-shadow:inset 0 0 20px rgba(90,230,55,.18);
}
.top-discord{
  border-radius:10px;
}
.top-discord:hover{
  background:rgba(126,45,255,.055);
  box-shadow:inset 0 0 18px rgba(155,73,255,.18);
}

/* Feature/update anchors */
.features-anchor{position:absolute;left:0;top:64%;width:1px;height:1px}
.updates-anchor{position:absolute;left:0;top:77%;width:1px;height:1px}

/* Mobile/tablet: preserve proportional scaling with no fixed canvas width */
@media(max-width:800px){
  .design{width:100%;min-width:0}
  body{overflow-x:hidden}
}

.home{left:26.450%;top:3.100%;width:3.350%;height:3.300%;}
.features{left:32.400%;top:3.100%;width:5.400%;height:3.300%;}
.updates{left:40.350%;top:3.100%;width:5.150%;height:3.300%;}
.play-nav{left:48.050%;top:3.100%;width:3.450%;height:3.300%;}
.vote{left:53.720%;top:3.100%;width:3.600%;height:3.300%;}
.store{left:59.880%;top:3.100%;width:4.100%;height:3.300%;}
.discord-nav{left:66.650%;top:3.100%;width:5.300%;height:3.300%;}
.wiki{left:74.750%;top:3.100%;width:3.200%;height:3.300%;}
.guides{left:79.950%;top:3.100%;width:4.700%;height:3.300%;}
.discord-top{left:87.35128%;top:2.03046%;width:11.27113%;height:4.97462%;}
.play-main{left:32.56105%;top:56.64975%;width:17.47026%;height:8.22335%;}
.discord-main{left:50.72010%;top:56.64975%;width:17.53287%;height:8.22335%;}



/* Navigation calibrated from live desirersps.com screenshot */
.home,.features,.updates,.play-nav,.vote,.store,.discord-nav,.wiki,.guides{
  background:transparent !important;
  overflow:visible;
}
.home::after,.features::after,.updates::after,.play-nav::after,.vote::after,
.store::after,.discord-nav::after,.wiki::after,.guides::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-2px;
  height:2px;
  border-radius:999px;
  background:#8f00ff;
  box-shadow:0 0 6px rgba(143,0,255,.75);
  opacity:0;
  transform:scaleX(.92);
  transform-origin:center;
  transition:opacity .12s ease,transform .12s ease;
  pointer-events:none;
}
.home:hover::after,.features:hover::after,.updates:hover::after,.play-nav:hover::after,
.vote:hover::after,.store:hover::after,.discord-nav:hover::after,.wiki:hover::after,
.guides:hover::after{
  opacity:1;
  transform:scaleX(1);
}