*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-width:100%;
  height:100%;
  min-height:100%;
  background:#020407;
}

body{
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
}

/*
  DOS CAPAS:
  1) full-bg llena TODA la pantalla.
  2) stage muestra la imagen aprobada COMPLETA, sin recortarla.
*/
.full-bg{
  position:fixed;
  inset:-4%;
  z-index:0;
  background:url("../img/intro-design.png") center center / cover no-repeat;
  filter:blur(20px) brightness(.42) saturate(1.15);
  transform:scale(1.08);
}

.bg-shade{
  position:fixed;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 50% 45%,rgba(0,0,0,.03),rgba(0,0,0,.35) 72%,rgba(0,0,0,.68) 100%);
  pointer-events:none;
}

/* Movimiento ambiental detrás del diseño, sin afectar los cuadros. */
.background-fx{
  position:fixed;
  inset:-12%;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 52%,rgba(255,28,18,.22),transparent 31%),
    radial-gradient(circle at 78% 48%,rgba(15,126,255,.22),transparent 31%);
  filter:blur(18px);
  animation:background-aurora 8s ease-in-out infinite alternate;
}
.background-fx::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle,rgba(255,86,42,.45) 0 .07cqw,transparent .14cqw) 0 0/8cqw 7cqw,
    radial-gradient(circle,rgba(61,158,255,.42) 0 .06cqw,transparent .13cqw) 3cqw 2cqw/9cqw 8cqw;
  opacity:.24;
  animation:background-particles 16s linear infinite;
}
.background-fx::after{
  content:"";
  position:absolute;
  inset:14% 5%;
  background:linear-gradient(105deg,transparent 25%,rgba(255,66,34,.09) 39%,transparent 50%,rgba(32,145,255,.09) 61%,transparent 75%);
  background-size:230% 100%;
  animation:background-sweep 10s linear infinite;
}
@keyframes background-aurora{
  from{transform:translate3d(-1.2%,1%,0) scale(1);opacity:.58}
  to{transform:translate3d(1.2%,-1%,0) scale(1.05);opacity:.9}
}
@keyframes background-particles{
  from{transform:translate3d(0,4%,0)}
  to{transform:translate3d(2%,-8%,0)}
}
@keyframes background-sweep{
  from{background-position:150% 0}
  to{background-position:-150% 0}
}

.viewport{
  position:fixed;
  inset:0;
  z-index:3;
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}

/*
  La imagen original mide 1629 x 965.
  Este cálculo hace que SIEMPRE entre completa en la pantalla:
  - nunca corta el logo arriba
  - nunca corta el footer abajo
  - nunca deforma el diseño
*/
.stage{
  position:relative;
  container-type:inline-size;
  width:min(100vw, calc(100vh * 1.6880829));
  width:min(100vw, calc(100dvh * 1.6880829));
  aspect-ratio:1629 / 965;
  max-height:100vh;
  max-height:100dvh;
  flex:0 0 auto;
  overflow:visible;
  transform:scale(var(--browser-zoom,1));
  transform-origin:center center;
  filter:drop-shadow(0 14px 42px rgba(0,0,0,.65));
}

.design{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Halo luminoso alrededor del logo, sin moverlo. */
.logo-motion{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  clip-path:inset(1% 29% 77% 29%);
  animation:logo-aura 3.8s ease-in-out infinite;
}
@keyframes logo-aura{
  0%,100%{
    filter:drop-shadow(-.10cqw 0 .20cqw rgba(255,38,32,.30)) drop-shadow(.10cqw 0 .20cqw rgba(20,137,255,.30));
  }
  50%{
    filter:drop-shadow(-.18cqw 0 .52cqw rgba(255,38,32,.82)) drop-shadow(.18cqw 0 .52cqw rgba(20,137,255,.82)) drop-shadow(0 0 .24cqw rgba(255,255,255,.38));
  }
}

/* Reflejo de fuego tenue sobre el panel 0.99B. */
.bk-panel-fx{
  position:absolute;
  z-index:5;
  left:12.80%;
  top:24.75%;
  width:36.90%;
  height:50.10%;
  overflow:hidden;
  border-radius:1.15cqw;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 18%,rgba(255,42,30,.12) 34%,transparent 48%,rgba(255,112,36,.09) 61%,transparent 76%);
  background-size:240% 100%;
  mix-blend-mode:screen;
  animation:bk-fire 5.4s linear infinite;
  box-shadow:inset 0 0 1.1cqw rgba(255,38,24,.11);
}
@keyframes bk-fire{
  from{background-position:140% 0}
  to{background-position:-140% 0}
}

/* Reflejo de agua tenue sobre el panel inactivo de Season 6. */
.season6-water-fx{
  position:absolute;
  z-index:5;
  left:50.55%;
  top:24.75%;
  width:38.85%;
  height:50.10%;
  overflow:hidden;
  border-radius:1.15cqw;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 18%,rgba(55,178,255,.13) 34%,transparent 48%,rgba(90,205,255,.09) 61%,transparent 76%);
  background-size:240% 100%;
  mix-blend-mode:screen;
  animation:season-water 6s linear infinite;
  box-shadow:inset 0 0 1.1cqw rgba(20,146,255,.12);
}
@keyframes season-water{
  from{background-position:140% 0}
  to{background-position:-140% 0}
}

@media (prefers-reduced-motion:reduce){
  .logo-motion,.background-fx,.background-fx::before,.background-fx::after{animation:none}
}

/* Reemplaza solamente el 139 impreso por el online real */
.online-mask{
  position:absolute;
  z-index:6;
  /* ONLINE REAL: centrado dentro de CONECTADOS y alineado con 150x / 50% */
  width:4.85%;
  height:3.85%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#030505;
  border:0;
  border-radius:4px;
  box-shadow:none;
  color:#35f26c;
  font-weight:900;
  line-height:1;
  text-align:center;
  text-shadow:none;
}
.online-099{
  left:44.40%;
  top:53.00%;
  height:4.35%;
}
.online-s6{left:71.80%;top:53.25%;color:#35f26c}
.online-mask span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-size:1.53cqw;
  line-height:1;
  text-align:center;
}

/* áreas clicables alineadas con la imagen aprobada */
/* Sustituye los valores impresos en el arte sin perder el escalado responsive. */
.stat-mask{
  position:absolute;
  z-index:7;
  top:53.25%;
  width:4.55%;
  height:3.85%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  background:#030505;
  font-size:1.53cqw;
  font-weight:900;
  line-height:1;
  text-align:center;
}
.stat-exp099{left:30.15%;color:#ff4b5c}
.stat-drop099{left:37.20%;color:#ff4b5c}
.stat-expS6{left:56.15%;top:56.55%;color:#559bea}
.stat-dropS6{left:64.55%;top:56.55%;color:#559bea}

.season6-disabled-overlay{
  position:absolute;
  z-index:8;
  left:50.55%;
  top:24.75%;
  width:38.85%;
  height:50.10%;
  border-radius:1.15cqw;
  background:rgba(0,4,8,.58);
  box-shadow:inset 0 0 3.5cqw rgba(0,0,0,.62);
  backdrop-filter:grayscale(.82) brightness(.58);
  -webkit-backdrop-filter:grayscale(.82) brightness(.58);
  pointer-events:none;
}

.coming-soon-s6{
  position:absolute;
  z-index:9;
  left:52.10%;
  top:39.10%;
  width:27.80%;
  height:8.80%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-7deg);
  transform-origin:center;
  overflow:visible;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,55,98,.18),rgba(7,83,143,.92) 17%,rgba(3,45,78,.88) 82%,rgba(2,55,98,.15));
  border-top:1px solid rgba(56,157,223,.75);
  border-bottom:1px solid rgba(0,35,65,.9);
  clip-path:polygon(0 28%,8% 18%,5% 8%,22% 17%,31% 5%,47% 15%,61% 2%,76% 17%,91% 9%,100% 27%,94% 48%,100% 72%,86% 80%,89% 94%,69% 83%,56% 97%,40% 83%,24% 94%,10% 79%,0 72%,6% 51%);
  color:#d8dde0;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:3.05cqw;
  font-weight:900;
  letter-spacing:.10cqw;
  line-height:1;
  text-align:center;
  text-shadow:
    0 .16cqw 0 #30383e,
    0 .28cqw .35cqw rgba(0,0,0,.95);
}

.server-status{
  position:absolute;
  z-index:7;
  left:52.30%;
  top:26.35%;
  width:5.15%;
  height:2.75%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.28cqw;
  border:1px solid rgba(255,61,77,.75);
  border-radius:999px;
  background:#050707;
  color:#ff3d4d;
  font-size:.64cqw;
  font-weight:800;
  line-height:1;
}
.server-status span{
  width:.38cqw;
  height:.38cqw;
  flex:0 0 auto;
  border-radius:50%;
  background:#ff3d4d;
}

.hotspot{
  position:absolute;
  z-index:10;
  display:block;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.hotspot:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}

.enter099{left:17.0%;top:58.78%;width:29.1%;height:5.55%}
.download099{left:17.0%;top:65.75%;width:9.4%;height:5.0%}
.discord099{left:26.7%;top:65.75%;width:9.4%;height:5.0%}
.ranking099{left:36.45%;top:65.75%;width:9.4%;height:5.0%}

.enterS6{left:51.45%;top:60.85%;width:29.0%;height:5.3%}
.downloadS6{left:51.45%;top:67.08%;width:9.3%;height:5.0%}
.discordS6{left:61.15%;top:67.08%;width:9.3%;height:5.0%}
.rankingS6{left:70.83%;top:67.08%;width:9.3%;height:5.0%}

.disabled{
  cursor:not-allowed;
  pointer-events:auto;
}

/* Tablet */
@media (max-width:1024px){
  .full-bg{
    filter:blur(14px) brightness(.38) saturate(1.1);
  }
}

/* Teléfono horizontal */
@media (max-height:650px) and (orientation:landscape){
  .stage{
    width:min(100vw, calc(100dvh * 1.6880829));
  }
}

/* Teléfono vertical:
   se muestra el diseño ENTERO y el fondo sigue llenando la pantalla */
@media (orientation:portrait){
  .viewport{
    align-items:center;
  }
  .stage{
    width:100vw;
    max-height:none;
  }
}

/* teléfonos muy pequeños */
@media (max-width:420px){
  .full-bg{
    filter:blur(10px) brightness(.35);
  }
  .online-mask{
    border-radius:2px;
  }
}