/* Raptor Squad · colores sacados del juego (scripts/sprites.gd y config.gd). */

@font-face {
  font-family: "Raptor Logo";
  src: url("../fonts/noto-display-condensedblackitalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Raptor Titulos";
  src: url("../fonts/noto-display-condensedbold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fondo: #05030f;
  --fondo-2: #0c0820;
  --panel: rgba(20, 14, 44, 0.72);
  --borde: #2a2050;
  --texto: #e6e2f4;
  --suave: #a49cc4;
  --rosa: #ff4fd0;
  --rosa-claro: #ffb0f0;
  --cian: #7ff3ff;
  --naranja: #ffb040;
  --p1: #4fa3ff;
  --p2: #ff5a5a;
  --p3: #5aff7a;
  --p4: #ffd84f;
  --titulos: "Raptor Titulos", "Arial Narrow", system-ui, sans-serif;
  --ancho: 68rem;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  /* Campo de estrellas fijo y una nebulosa tramada, como el fondo del juego. */
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 34%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 66%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 8%, #cfe8ff99 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 10% 70%, #4a1d7a33, transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 30%, #0e5a6a2a, transparent 70%);
  background-size: 260px 260px, 340px 340px, 300px 300px, 420px 420px, 520px 520px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

a {
  color: var(--cian);
}

a:hover {
  color: #fff;
}

kbd {
  display: inline-block;
  min-width: 1.9em;
  margin: 0.1em 0.12em;
  padding: 0.05em 0.45em 0.15em;
  border: 2px solid #4a4270;
  border-bottom-width: 4px;
  border-radius: 4px;
  background: #1a1436;
  color: #fff;
  font: 700 0.85em/1.4 var(--titulos);
  text-align: center;
  letter-spacing: 0.04em;
}

kbd.ancha {
  min-width: 4.2em;
}

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--rosa);
  color: #000;
}

.saltar:focus {
  left: 0.5rem;
}

/* ---- Barra superior ---- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem clamp(1rem, 4vw, 2rem);
  background: rgba(5, 3, 15, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.marca {
  font: italic 900 1.35rem/1 "Raptor Logo", var(--titulos);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 6px var(--rosa), 0 0 14px var(--rosa);
  white-space: nowrap;
}

.barra nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}

.barra nav a {
  color: var(--suave);
  font: 700 1rem/1 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.barra nav a:hover {
  color: var(--cian);
}

.idioma {
  display: flex;
  border: 1px solid var(--borde);
  border-radius: 4px;
  overflow: hidden;
}

.idioma button {
  padding: 0.25rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--suave);
  font: 700 0.85rem/1 var(--titulos);
  cursor: pointer;
}

.idioma button[aria-pressed="true"] {
  background: var(--rosa);
  color: #14001a;
}

@media (max-width: 720px) {
  .barra nav {
    display: none;
  }
  .idioma {
    margin-left: auto;
  }
}

/* ---- Portada ---- */

.portada {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(92vh, 56rem);
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
}

#escena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.portada::after {
  /* Scanlines muy suaves y viñeta. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6));
}

.portada-texto {
  position: relative;
  z-index: 1;
  padding: 2rem 1rem;
  text-align: center;
}

.logo {
  margin: 0;
  font: italic 900 clamp(3.4rem, 13vw, 9.5rem)/0.95 "Raptor Logo", var(--titulos);
  color: #fff4fc;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.035em var(--rosa);
  paint-order: stroke fill;
  text-shadow: 0 0 0.12em var(--rosa), 0 0 0.4em rgba(255, 79, 208, 0.65), 0 0.06em 0 #5a0f4a;
}

.lema {
  margin: 0.6rem 0 2rem;
  color: var(--cian);
  font: 700 clamp(1.05rem, 2.6vw, 1.6rem)/1.2 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(127, 243, 255, 0.5), 0 2px 0 #000;
}

.plataformas {
  margin: 1rem 0 0;
  color: var(--suave);
  font: 700 0.95rem/1 var(--titulos);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}

.bajar {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  z-index: 1;
  translate: -50% 0;
  color: var(--rosa);
  text-decoration: none;
  animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
  50% {
    translate: -50% 6px;
    opacity: 0.5;
  }
}

/* ---- Botones ---- */

.boton {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 1.8rem 0.8rem;
  border: 3px solid #fff;
  background: var(--rosa);
  color: #14001a;
  font: italic 900 1.5rem/1 "Raptor Logo", var(--titulos);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 3px #14001a, 0 0 22px rgba(255, 79, 208, 0.75), 6px 6px 0 3px #14001a;
  transition: transform 0.1s, box-shadow 0.1s;
  /* Esquinas recortadas, como un botón de 8 bits. */
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.boton small {
  margin-top: 0.25rem;
  font: 700 0.8rem/1 var(--titulos);
  font-style: normal;
  letter-spacing: 0.1em;
}

.boton:hover,
.boton:focus-visible {
  color: #14001a;
  background: #ff7fe0;
  transform: translateY(-2px);
}

.boton:active {
  transform: translateY(2px);
}

.boton-grande {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

/* ---- Secciones ---- */

.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem) 0;
}

.seccion h2 {
  margin: 0 0 1.5rem;
  font: italic 900 clamp(2.2rem, 5vw, 3.4rem)/1 "Raptor Logo", var(--titulos);
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 79, 208, 0.7), 3px 3px 0 #3a0d34;
}

.seccion h2::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.35em;
  vertical-align: 0.12em;
  background: var(--rosa);
  box-shadow: 0 0 10px var(--rosa);
}

.intro {
  max-width: 46rem;
  margin: 0 0 2.5rem;
  color: var(--suave);
  font-size: 1.15rem;
}

h3,
h4 {
  margin: 0 0 0.4rem;
  font-family: var(--titulos);
  font-weight: 700;
  letter-spacing: 0.02em;
}

h3 {
  font-size: 1.35rem;
  color: var(--cian);
}

h4 {
  font-size: 1.3rem;
  color: #fff;
  text-transform: uppercase;
}

canvas.sprite {
  image-rendering: pixelated;
  flex: none;
}

/* Rasgos */

.rasgos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.rasgos li {
  display: grid;
  grid-template-rows: 4rem auto 1fr;
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--rosa);
}

.rasgos li:nth-child(2) {
  border-top-color: var(--p3);
}

.rasgos li:nth-child(3) {
  border-top-color: var(--p2);
}

.rasgos li:nth-child(4) {
  border-top-color: var(--p4);
}

.rasgos canvas {
  display: block;
  align-self: end;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

.rasgos p {
  margin: 0;
  color: var(--suave);
  font-size: 0.98rem;
}

/* Galería */

.galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.galeria figure {
  margin: 0;
  grid-column: span 2;
}

.galeria figure:nth-child(-n + 2) {
  grid-column: span 3;
}

.galeria a {
  display: block;
  border: 2px solid var(--borde);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.galeria a:hover,
.galeria a:focus-visible {
  border-color: var(--cian);
  box-shadow: 0 0 18px rgba(127, 243, 255, 0.35);
}

.galeria img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .galeria {
    grid-template-columns: 1fr 1fr;
  }
  .galeria figure,
  .galeria figure:nth-child(-n + 2) {
    grid-column: span 1;
  }
  .galeria figure:first-child {
    grid-column: span 2;
  }
}

.visor {
  max-width: min(96vw, 1280px);
  padding: 0;
  border: 2px solid var(--cian);
  background: #000;
  box-shadow: 0 0 40px rgba(127, 243, 255, 0.35);
}

.visor::backdrop {
  background: rgba(2, 0, 10, 0.88);
}

.visor img {
  display: block;
  width: 100%;
  height: auto;
}

.visor .cerrar {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid #fff;
  background: var(--rosa);
  color: #14001a;
  font: 700 1.6rem/1 var(--titulos);
  cursor: pointer;
}

/* Niveles y jefes */

.niveles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.nivel {
  padding: 1.5rem;
  background: linear-gradient(160deg, rgba(60, 30, 110, 0.35), var(--panel) 45%);
  border: 1px solid var(--borde);
}

.nivel-hierro {
  background: linear-gradient(160deg, rgba(110, 20, 50, 0.35), var(--panel) 45%);
}

.nivel > header {
  margin-bottom: 1rem;
}

.nivel-num {
  color: var(--rosa-claro);
  font: 700 0.9rem/1 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nivel h3 {
  font-size: 1.8rem;
  color: #fff;
}

.desfile {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  min-height: 3.5rem;
}

.jefe {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px dashed var(--borde);
}

.jefe canvas {
  justify-self: center;
  max-width: 100%;
  filter: drop-shadow(0 0 10px rgba(255, 79, 208, 0.35));
}

.jefe p {
  margin: 0;
  color: var(--suave);
  font-size: 0.98rem;
}

@media (max-width: 480px) {
  .jefe {
    grid-template-columns: 1fr;
  }
  .jefe canvas {
    justify-self: start;
  }
}

/* Online */

.pasos {
  counter-reset: paso;
  display: grid;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 1rem 1.25rem 1rem 3.6rem;
  background: var(--panel);
  border-left: 4px solid var(--cian);
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 1.25rem;
  top: 0.85rem;
  color: var(--cian);
  font: italic 900 1.8rem/1 "Raptor Logo", var(--titulos);
  text-shadow: 0 0 8px rgba(127, 243, 255, 0.6);
}

.pasos b,
.avisos b {
  color: #fff;
}

.avisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.avisos p {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--borde);
  color: var(--suave);
  font-size: 0.95rem;
}

/* Controles */

.tabla-envoltorio {
  overflow-x: auto;
}

.controles {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--panel);
}

.controles th,
.controles td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  color: var(--suave);
}

.controles thead th {
  color: var(--rosa-claro);
  font: 700 0.95rem/1 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.controles tbody th {
  color: #fff;
  font: 700 1.1rem/1 var(--titulos);
  white-space: nowrap;
}

.piloto {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.6rem;
  box-shadow: 0 0 8px currentColor;
}

.p1 { background: var(--p1); color: var(--p1); }
.p2 { background: var(--p2); color: var(--p2); }
.p3 { background: var(--p3); color: var(--p3); }
.p4 { background: var(--p4); color: var(--p4); }

.extra {
  color: var(--suave);
  font-size: 0.95rem;
}

/* Clasificación (oculta hasta que haya API) */

.pestanas {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pestanas button {
  padding: 0.45rem 1rem;
  border: 2px solid var(--borde);
  background: transparent;
  color: var(--suave);
  font: 700 1rem/1 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.pestanas button[aria-selected="true"] {
  border-color: var(--rosa);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 79, 208, 0.4);
}

.ranking {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 700 1.15rem/1 var(--titulos);
}

.ranking li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--panel);
}

.ranking .pos {
  color: var(--rosa);
}

.ranking .puntos {
  color: var(--p4);
  font-variant-numeric: tabular-nums;
}

.ranking .vacio {
  display: block;
  color: var(--suave);
  font: 1rem/1.4 system-ui, sans-serif;
}

/* Cierre y pie */

.cierre {
  padding-bottom: 4rem;
  text-align: center;
}

.cierre h2::before {
  display: none;
}

.pie {
  padding: 2rem 1rem;
  border-top: 1px solid var(--borde);
  color: var(--suave);
  font-size: 0.9rem;
  text-align: center;
}

.version {
  color: var(--rosa-claro);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .bajar {
    animation: none;
  }
}