/* ═══════════════════════════════════════════════════════════
   fisica-juego.css — Colorimetría del hub de minijuegos de Física
   Elemental W · juegos/fisica/css/

   Reutiliza el shell compartido (css/juegos.css: .cabecera-juego,
   .juego-pregunta, .juego-btn-siguiente) sin duplicarlo. El NARANJA
   (#cf5f3f / #f5c693, paleta oficial de Física) es el color
   PRINCIPAL de todo el widget vía data-ew-theme="orange" (pasado
   como tema en juego.js). Sobre esa base, igual que Inorgánica
   pinta cada tipo de compuesto (óxido/hidróxido/ácido/sal) con su
   propio color, aquí cada CATEGORÍA de magnitud (cinemática,
   dinámica, electricidad...) recibe un acento propio — ver
   CATEGORIA_COLOR en generadores-fisica.js — para que el hub se
   sienta vivo y variado sin dejar de ser "naranja" en su base.
═══════════════════════════════════════════════════════════ */

:root {
  --fis-naranja: #cf5f3f;
  --fis-naranja-claro: #f5c693;
  --fis-naranja-glow: rgba(207, 95, 63, 0.35);
}

/* ── Badge de modo (cabecera) ─────────────────────────────── */
.fis-modo-badge {
  font-family: "Orbitron", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fis-naranja-claro);
  background: linear-gradient(
    135deg,
    rgba(207, 95, 63, 0.28),
    rgba(245, 198, 147, 0.14)
  );
  border: 1px solid rgba(207, 95, 63, 0.45);
  border-radius: var(--r-sm, 6px);
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 0 16px var(--fis-naranja-glow);
  animation: fis-badge-pulso 2.6s ease-in-out infinite;
}

@keyframes fis-badge-pulso {
  0%,
  100% {
    box-shadow: 0 0 10px var(--fis-naranja-glow);
  }
  50% {
    box-shadow: 0 0 22px var(--fis-naranja-glow);
  }
}

/* ── Botón "Siguiente": degradado naranja/terracota vibrante ── */
#juego-btn-siguiente {
  color: #241109;
  background: linear-gradient(135deg, #ffe0b3, var(--fis-naranja-claro), var(--fis-naranja));
  box-shadow: 0 4px 24px var(--fis-naranja-glow);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  #juego-btn-siguiente:hover {
    box-shadow: 0 6px 32px rgba(207, 95, 63, 0.55);
    transform: translateY(-1px);
  }
}

/* ── Ancho del host del minijuego ─────────────────────────── */
.juego-pregunta {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.juego-minijuego-host {
  width: min(100%, 960px);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  align-self: stretch;
  box-sizing: border-box;
  position: relative;
}

.juego-minijuego-host > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Halo naranja detrás de cada instancia de minijuego, para que el
   marco no se sienta plano incluso cuando la tarjeta interna use
   el color de una categoría distinta. */
.juego-minijuego-host::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(207, 95, 63, 0.16),
    transparent 70%
  );
  pointer-events: none;
}

/* ── Chips de categoría (contrarreloj + selección múltiple) ──
   El color se inyecta por instancia vía --fis-chip-color desde
   generadores-fisica.js (chipCategoria), igual que Inorgánica
   inyecta --tarjeta-color por tipo de compuesto. */
.fis-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fis-chip-color, var(--fis-naranja));
  background: color-mix(in srgb, var(--fis-chip-color, var(--fis-naranja)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fis-chip-color, var(--fis-naranja)) 45%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--fis-chip-color, var(--fis-naranja)) 30%, transparent);
}

/* ── Mascota Chispa ────────────────────────────────────────
   Burbuja de feedback fija arriba del minijuego. Estados 'happy'/
   'normal' ya vienen resueltos como <img src> distinta desde
   chispa-fisica.js; aquí solo el chrome visual + el pulso al
   cambiar de mensaje. */
.fis-chispa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 960px);
  margin: 0 auto 14px;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(207, 95, 63, 0.14),
    rgba(245, 198, 147, 0.08)
  );
  border: 1px solid rgba(207, 95, 63, 0.3);
  box-sizing: border-box;
}

.fis-chispa__img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 8px rgba(207, 95, 63, 0.45));
}

.fis-chispa__globo {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-1, #f4ece6);
  line-height: 1.35;
}

@keyframes fis-chispa-pulso {
  0% {
    transform: scale(0.98);
    opacity: 0.7;
  }
  40% {
    transform: scale(1.015);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fis-chispa--pulso {
  animation: fis-chispa-pulso 0.35s ease-out;
}

.fis-chispa--pulso .fis-chispa__img {
  animation: fis-chispa-pulso 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .fis-modo-badge {
    animation: none;
  }
  .fis-chispa--pulso,
  .fis-chispa--pulso .fis-chispa__img {
    animation: none;
  }
}

@media (max-width: 480px) {
  .fis-chispa {
    padding: 8px 12px;
    gap: 8px;
  }
  .fis-chispa__img {
    width: 36px;
    height: 36px;
  }
  .fis-chispa__globo {
    font-size: 0.82rem;
  }
}