*{box-sizing:border-box}
html,body{margin:0;background:#061a45;min-height:100%;overflow-x:hidden}
body{display:flex;justify-content:center}
.screen{position:relative;width:min(100vw,1024px);line-height:0}
.art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{
  position:absolute;border:0;background:transparent;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent
}
.hotspot:focus-visible{outline:4px solid #fff;outline-offset:-4px;border-radius:22px}
.nuevo{left:5.4%;top:49.5%;width:89.5%;height:9.4%}
.como{left:5.4%;top:59.2%;width:89.5%;height:8.7%}
.retos{left:5.4%;top:68.3%;width:89.5%;height:8.8%}
.cuentas{left:5.4%;top:77.4%;width:89.5%;height:8.8%}
.nav-inicio{left:1.8%;bottom:0.5%;width:31%;height:9.3%}
.nav-retos{left:34.5%;bottom:0.5%;width:31%;height:9.3%}
.nav-perfil{right:1.8%;bottom:0.5%;width:31%;height:9.3%}
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#061a45;color:white;border:2px solid #77ff00;border-radius:14px;
  padding:12px 18px;font:700 15px system-ui,sans-serif;line-height:1.2;
  box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:10
}