/* Motor de videojueguitos DiveLearn: pantallas, HUD, pulpo profe y efectos.
   Fondo de abismo en azul noche (nunca negro), texto claro, pixel solo en etiquetas cortas. */
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

.juego [hidden] {
  display: none !important;
}

.juego {
  --abismo: #1f1d5c;
  --abismo-2: #2c2a7a;
  --lima: #e0f24a;
  --lav: #b2cafd;
  --claro: #f6f7ff;
  --c: var(--modulo, #ff7a8a);
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  border: 2px solid var(--ink, #1f1d5c);
  border-radius: 18px;
  overflow: hidden;
  color: var(--claro);
  background: radial-gradient(120% 80% at 50% 0%, #34318f 0%, var(--abismo) 55%, #17154a 100%);
  box-shadow: 6px 6px 0 rgba(31, 29, 92, 0.3);
  font-family: "Century Gothic", "Questrial", system-ui, sans-serif;
}
.juego .px {
  image-rendering: pixelated;
}
.juego button {
  font: inherit;
  cursor: pointer;
}
.juego :focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 2px;
}

/* HUD */
.j-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(23, 21, 74, 0.7);
  border-bottom: 2px solid var(--abismo-2);
  font: 700 0.875rem "Silkscreen", ui-monospace, monospace;
  color: var(--lav);
}
.j-hud b {
  color: var(--claro);
}
.j-hud .j-titulo {
  flex: 1 1 auto;
  color: var(--lima);
}
.j-ronda-caja {
  display: flex;
  align-items: center;
  gap: 8px;
}
.j-ronda-pista {
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: var(--abismo-2);
  overflow: hidden;
}
#j-ronda-barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lima);
  transition: width 0.3s ease;
}
.j-perla {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 20%, #e9e4fb 35%, #b2cafd 100%);
}

/* Pantallas */
.j-pantalla {
  padding: clamp(18px, 4vw, 32px);
  min-height: 420px;
}
.j-centro {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 14px;
}
.j-centro h1,
.j-centro h2 {
  margin: 0;
  font: 700 clamp(1.4rem, 4vw, 2.2rem) / 1.15 "Silkscreen", ui-monospace, monospace;
  color: var(--lima);
}
.j-centro p {
  max-width: 52ch;
  margin: 0;
  line-height: 1.6;
  color: var(--claro);
}
.j-etiqueta {
  font: 700 0.875rem "Silkscreen", ui-monospace, monospace;
  color: var(--c);
}
.j-btn {
  min-height: 48px;
  padding: 10px 22px;
  border: 2px solid var(--abismo);
  border-radius: 12px;
  background: var(--lima);
  color: var(--abismo);
  font-weight: 700 !important;
  box-shadow: 4px 4px 0 #17154a;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.j-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #17154a;
}
.j-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #17154a;
}
.j-btn.sec {
  background: var(--lav);
}
.j-niveles {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  width: min(100%, 360px);
}
.j-niveles button {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  text-align: left;
  border: 1.5px solid var(--lav);
  border-radius: 10px;
  background: transparent;
  color: var(--claro);
}
.j-niveles button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.j-lista {
  text-align: left;
  max-width: 52ch;
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

/* Pulpo profe */
.j-profe {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1.5px solid var(--abismo-2);
  border-radius: 14px;
  background: rgba(23, 21, 74, 0.6);
  line-height: 1.55;
}
.j-profe img {
  flex: none;
  width: 56px;
  height: auto;
}
.j-profe p {
  margin: 0;
}
.j-profe b {
  color: var(--lima);
}

/* Efectos (todos se apagan con reduced motion desde el JS y aquí) */
.j-sacude {
  animation: j-sacude 0.4s ease;
}
@keyframes j-sacude {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.j-brilla {
  animation: j-brilla 0.6s ease;
}
@keyframes j-brilla {
  40% { filter: drop-shadow(0 0 14px var(--lima)) brightness(1.25); }
}
.j-entra {
  animation: j-entra 0.3s ease;
}
@keyframes j-entra {
  from { opacity: 0; transform: translateY(6px); }
}
.j-perla-vuela {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  transform: translateX(-50%);
  font: 700 1rem "Silkscreen", ui-monospace, monospace;
  color: var(--lima);
  text-shadow: 2px 2px 0 #17154a;
  animation: j-vuela 0.9s ease-out forwards;
}
@keyframes j-vuela {
  to { opacity: 0; transform: translate(-50%, -48px); }
}
@media (prefers-reduced-motion: reduce) {
  .juego *,
  .j-perla-vuela {
    animation: none !important;
    transition: none !important;
  }
}