:root {
  color-scheme: light;
  --espaciado-tema: 0.15em;
}

:root,
[data-tema="fuego"] {
  --color-primario: #ff6a1a;
  --color-claro: #ffcf7e;
  --color-acento: #e8382c;
  --color-oscuro: #3a2113;
  --fuente-tema: "Baloo 2", system-ui, sans-serif;

  --fondo-pantalla: linear-gradient(180deg, #ffe3b0 0%, #ffcf7e 55%, #ffb65b 100%);
  --color-texto: #3a2113;
  --color-superficie: #ffffff;
  --color-placeholder: #b79a78;
  --badge-fondo: #3a2113;
  --badge-texto: #ffe3b0;
  --chip-fondo: #ffffff;
  --chip-texto: #3a2113;
  --chip-borde: 2px solid #3a2113;
  --hint-fondo: #3a2113;
  --hint-texto: #ffd98a;
  --boton-fondo: #e8382c;
  --boton-texto: #fff3e2;
  --boton-sombra: #a1241b;
  --boton-secundario-fondo: #ffe3b0;
  --boton-secundario-texto: #3a2113;
  --boton-secundario-sombra: #cf9f5e;
  --input-sombra: inset 0 0 0 3px #3a2113;
}

[data-tema="circo"] {
  --color-primario: #e8384f;
  --color-claro: #1fa2a6;
  --color-acento: #f4b400;
  --color-oscuro: #2b2140;
  --fuente-tema: "Fredoka", system-ui, sans-serif;

  --fondo-pantalla: repeating-linear-gradient(115deg, #fff7ec 0 26px, #ffe3e7 26px 52px);
  --color-texto: #2b2140;
  --color-superficie: #ffffff;
  --color-placeholder: #b7adcb;
  --badge-fondo: #e8384f;
  --badge-texto: #fff7ec;
  --chip-fondo: #1fa2a6;
  --chip-texto: #fff7ec;
  --chip-borde: none;
  --hint-fondo: #f4b400;
  --hint-texto: #2b2140;
  --boton-fondo: #2b2140;
  --boton-texto: #fff7ec;
  --boton-sombra: #150f24;
  --boton-secundario-fondo: #fff7ec;
  --boton-secundario-texto: #2b2140;
  --boton-secundario-sombra: #b7adcb;
  --input-sombra: inset 0 0 0 3px #2b2140;
}

[data-tema="espacio"] {
  --color-primario: #7c4dff;
  --color-claro: #35d6e0;
  --color-acento: #ffd66b;
  --color-oscuro: #1a1442;
  --fuente-tema: "Chewy", system-ui, sans-serif;

  --fondo-pantalla: radial-gradient(circle at 22% 18%, #2c2168 0%, #1a1442 55%, #100c30 100%);
  --color-texto: #f4efff;
  --color-superficie: rgba(255, 255, 255, 0.08);
  --color-placeholder: rgba(244, 239, 255, 0.45);
  --badge-fondo: #7c4dff;
  --badge-texto: #100c30;
  --chip-fondo: rgba(255, 255, 255, 0.1);
  --chip-texto: #f4efff;
  --chip-borde: 1px solid rgba(255, 255, 255, 0.25);
  --hint-fondo: #ffd66b;
  --hint-texto: #1a1442;
  --boton-fondo: #35d6e0;
  --boton-texto: #100c30;
  --boton-sombra: #1e8a92;
  --boton-secundario-fondo: rgba(255, 255, 255, 0.1);
  --boton-secundario-texto: #f4efff;
  --boton-secundario-sombra: rgba(255, 255, 255, 0.25);
  --input-sombra: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--fondo-pantalla);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--color-texto);
  transition: color 0.2s ease;
}

barra-superior-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 4.5rem;
  padding: 0 0.75rem;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--color-superficie) 55%, transparent);
}

.titulo-barra-superior {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
  font-weight: 800;
  color: var(--color-texto);
}

.boton-reiniciar-partida {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  flex-shrink: 0;
  border: 2px solid var(--color-placeholder);
  border-radius: 999px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-texto);
  box-shadow: none;
}

.control-sonido {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0.5rem;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-texto);
  box-shadow: none;
}

.control-sonido--silenciado {
  opacity: 0.5;
}

.boton-instrucciones {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0.5rem;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-texto);
  box-shadow: none;
}

.instrucciones-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.5);
}

.instrucciones-popup-tarjeta {
  width: 100%;
  max-width: 32rem;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.25);
}

.instrucciones-popup-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.instrucciones-popup-titulo {
  margin: 0;
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
  font-weight: 800;
  color: var(--color-texto);
}

.instrucciones-popup-cerrar {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-texto);
  box-shadow: none;
}

.instrucciones-popup-cuerpo {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: "Nunito", sans-serif;
  color: var(--color-texto);
}

.selector-tema {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
  font-weight: 800;
  cursor: pointer;
  background-color: var(--badge-fondo);
  color: var(--badge-texto);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, color 0.2s ease;
}

configuracion-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4.5rem 1.5rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}

.filas-jugadores {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
}

.fila-jugador {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.campo-nombre {
  flex: 1 1 auto;
  min-width: 0;
}

.campo-edad {
  flex: 0 0 5.5rem;
}

.campo-edad input {
  width: 100%;
}

.tiempo-globo-campos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.error {
  color: var(--color-acento);
  font-weight: 700;
  font-size: 0.85rem;
}

configuracion-view label,
configuracion-view legend {
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
  font-weight: 800;
  color: var(--color-texto);
}

.tiempo-globo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  border: none;
  border-radius: 16px;
  padding: 0.9rem;
  margin: 0;
  background: color-mix(in srgb, var(--color-superficie) 40%, transparent);
}

.tiempo-globo legend {
  padding: 0 0.3rem;
}

configuracion-view input,
configuracion-view select {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  color: var(--color-texto);
  background: var(--color-superficie);
  box-shadow: var(--input-sombra);
}

configuracion-view input::placeholder {
  color: var(--color-placeholder);
}

configuracion-view button {
  min-height: 44px;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  box-shadow: 0 4px 0 var(--boton-sombra);
}

.acciones-configuracion {
  display: flex;
  gap: 0.75rem;
}

.acciones-configuracion .boton-pulsacion {
  flex: 1 1 auto;
}

configuracion-view button:disabled {
  background-color: var(--color-placeholder);
  color: var(--color-superficie);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

pantalla-juego-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4.5rem 1.5rem 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}

.marcador-rondas {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0 0 0.25rem;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
}

.marcador-rondas li {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--chip-fondo);
  color: var(--chip-texto);
  border: var(--chip-borde);
}

.globo {
  --progreso-globo: 0;
  position: relative;
  align-self: center;
  order: 1;
  width: calc(80px + var(--progreso-globo) * 160px);
  height: calc(80px + var(--progreso-globo) * 160px);
  transition: width 0.1s linear, height 0.1s linear;
}

.globo-cuerpo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-claro), var(--color-primario));
  box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, border-radius 0.2s ease;
}

.globo-cara,
.globo-anillo,
.globo-remate,
.globo-hilo {
  display: none;
  position: absolute;
  pointer-events: none;
}

.globo-particulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.globo-particulas i {
  position: absolute;
  display: none;
}

/* ================= FUEGO — patata ================= */
[data-tema="fuego"] .globo-cuerpo {
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, var(--color-claro), var(--color-primario) 65%, var(--color-oscuro) 100%);
}

[data-tema="fuego"] .globo-cara {
  display: block;
  top: 32%;
  left: 0;
  width: 100%;
  height: 34%;
  background: radial-gradient(circle at 34% 40%, var(--color-oscuro) 0 9%, transparent 10%),
    radial-gradient(circle at 58% 40%, var(--color-oscuro) 0 9%, transparent 10%);
}

[data-tema="fuego"] .globo-cara::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 62%;
  width: 24%;
  height: 30%;
  border-bottom: 4px solid var(--color-oscuro);
  border-radius: 0 0 60% 60%;
}

[data-tema="fuego"] .globo-particulas i {
  display: block;
  top: -6%;
  width: 13%;
  height: 34%;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: linear-gradient(180deg, #ffd54a 0%, #ff7a1a 55%, #e8382c 100%);
  transform-origin: bottom center;
  animation: llama-parpadeo 1.1s ease-in-out infinite alternate;
}
[data-tema="fuego"] .globo-particulas i:nth-child(1) {
  left: 24%;
}
[data-tema="fuego"] .globo-particulas i:nth-child(2) {
  left: 43%;
  height: 42%;
  top: -14%;
  animation-delay: 0.15s;
}
[data-tema="fuego"] .globo-particulas i:nth-child(3) {
  left: 63%;
  animation-delay: 0.3s;
}

@keyframes llama-parpadeo {
  from {
    transform: scaleY(1) rotate(-3deg);
  }
  to {
    transform: scaleY(1.12) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tema="fuego"] .globo-particulas i {
    animation: none;
  }
}

/* ================= CIRCO — globo ================= */
[data-tema="circo"] .globo-cuerpo {
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--color-primario) 45%, white), var(--color-primario) 72%);
}

[data-tema="circo"] .globo-remate {
  display: block;
  top: 100%;
  left: 50%;
  width: 10%;
  height: 8%;
  background: var(--color-primario);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}

[data-tema="circo"] .globo-hilo {
  display: block;
  top: calc(100% + 6%);
  left: 50%;
  width: 2px;
  height: 22%;
  background: var(--color-texto);
  opacity: 0.4;
  transform: translateX(-50%);
}

[data-tema="circo"] .globo-particulas i {
  display: block;
  width: 7%;
  height: 7%;
  border-radius: 2px;
}
[data-tema="circo"] .globo-particulas i:nth-child(1) {
  top: 4%;
  left: 2%;
  background: var(--color-acento);
  transform: rotate(20deg);
}
[data-tema="circo"] .globo-particulas i:nth-child(2) {
  top: -6%;
  left: 82%;
  background: var(--color-claro);
  transform: rotate(-15deg);
}
[data-tema="circo"] .globo-particulas i:nth-child(3) {
  top: 22%;
  left: 92%;
  background: var(--color-texto);
  transform: rotate(40deg);
}

/* ================= ESPACIO — planeta ================= */
[data-tema="espacio"] .globo-cuerpo {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--color-primario) 55%, white), var(--color-primario) 60%, var(--color-oscuro) 100%);
  box-shadow: 0 0 0 6px rgba(124, 77, 255, 0.15), inset -6px -8px 0 rgba(0, 0, 0, 0.12);
}

[data-tema="espacio"] .globo-cuerpo::before,
[data-tema="espacio"] .globo-cuerpo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}
[data-tema="espacio"] .globo-cuerpo::before {
  width: 20%;
  height: 20%;
  top: 22%;
  left: 58%;
}
[data-tema="espacio"] .globo-cuerpo::after {
  width: 12%;
  height: 12%;
  top: 60%;
  left: 20%;
}

[data-tema="espacio"] .globo-anillo {
  display: block;
  top: 50%;
  left: 50%;
  width: 152%;
  height: 36%;
  border: 3px solid var(--color-claro);
  border-radius: 50%;
  opacity: 0.85;
  transform: translate(-50%, -50%) rotate(-12deg);
}

[data-tema="espacio"] .globo-particulas i {
  display: block;
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: var(--color-acento);
  opacity: 0.8;
}
[data-tema="espacio"] .globo-particulas i:nth-child(1) {
  top: -12%;
  left: 18%;
}
[data-tema="espacio"] .globo-particulas i:nth-child(2) {
  top: 6%;
  left: 92%;
}
[data-tema="espacio"] .globo-particulas i:nth-child(3) {
  top: 95%;
  left: -4%;
}

.globo.reventado {
  width: 200px;
  height: 200px;
  animation: globo-estallido-sacudida 0.4s ease-out;
}

.globo.reventado::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--color-acento);
  animation: globo-estallido-onda 0.5s ease-out;
}

.globo.reventado .globo-cara,
.globo.reventado .globo-anillo,
.globo.reventado .globo-remate,
.globo.reventado .globo-hilo,
.globo.reventado .globo-particulas {
  display: none;
}

.globo.reventado .globo-cuerpo {
  background: radial-gradient(circle, var(--color-claro), var(--color-acento));
  border-radius: 50%;
  opacity: 0.3;
  animation: globo-estallido-cuerpo 0.4s ease-out;
}

@keyframes globo-estallido-sacudida {
  0% {
    transform: scale(0.85) rotate(0deg);
  }
  30% {
    transform: scale(1.15) rotate(-6deg);
  }
  60% {
    transform: scale(0.95) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes globo-estallido-cuerpo {
  0% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

@keyframes globo-estallido-onda {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .globo.reventado,
  .globo.reventado::before,
  .globo.reventado .globo-cuerpo {
    animation: none;
  }
}

[data-tema="fuego"] .globo.reventado .globo-cuerpo {
  background: radial-gradient(circle, var(--color-acento), var(--color-oscuro));
  opacity: 0.4;
}

[data-tema="circo"] .globo.reventado .globo-cuerpo {
  background: repeating-conic-gradient(var(--color-primario) 0deg 20deg, var(--color-acento) 20deg 40deg);
  opacity: 0.5;
}

[data-tema="espacio"] .globo.reventado .globo-cuerpo {
  background: radial-gradient(circle, var(--color-acento), transparent 70%);
  opacity: 0.5;
}

[data-tema="espacio"] .globo.reventado .globo-cuerpo::before,
[data-tema="espacio"] .globo.reventado .globo-cuerpo::after {
  display: none;
}

.zona-pregunta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.zona-pregunta[hidden],
.resumen-ronda[hidden] {
  display: none;
}

.turno-label {
  align-self: center;
  margin: 0;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--badge-fondo);
  color: var(--badge-texto);
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
}

.pregunta-label {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-texto);
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
}

.zona-pregunta input,
.zona-pregunta button {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
}

.zona-pregunta input {
  border: none;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  color: var(--color-texto);
  background: var(--color-superficie);
  box-shadow: var(--input-sombra);
}

.zona-pregunta input::placeholder {
  color: var(--color-placeholder);
}

.zona-pregunta button {
  min-height: 44px;
  border: none;
  border-radius: 14px;
  padding: 0.75rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  box-shadow: 0 4px 0 var(--boton-sombra);
}

.mensaje-respuesta {
  align-self: center;
  margin: 0;
  min-height: 1.2em;
  font-weight: 800;
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
}

.mensaje-respuesta:not(:empty) {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--hint-fondo);
  color: var(--hint-texto);
}

.resumen-ronda {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}

.resumen-ronda p {
  font-weight: 800;
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
}

.resumen-ronda button {
  min-height: 44px;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  box-shadow: 0 4px 0 var(--boton-sombra);
}

resultado-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 4.5rem 2rem 2rem;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.anuncio-ganador {
  margin: 0;
  color: var(--color-texto);
  font-family: var(--fuente-tema);
  letter-spacing: var(--espaciado-tema);
}

resultado-view button {
  min-height: 44px;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  box-shadow: 0 4px 0 var(--boton-sombra);
}

.boton-secundario {
  background-color: var(--boton-secundario-fondo);
  color: var(--boton-secundario-texto);
  box-shadow: 0 4px 0 var(--boton-secundario-sombra);
}

.celebracion {
  width: 100%;
  height: 80px;
  background-repeat: repeat-x;
  background-size: 40px 40px;
}

[data-tema="fuego"] .celebracion {
  background-image: radial-gradient(circle at 50% 100%, var(--color-acento) 0 8px, transparent 9px);
}

[data-tema="circo"] .celebracion {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-primario) 0 6px,
    var(--color-claro) 6px 12px,
    var(--color-acento) 12px 18px,
    transparent 18px 24px
  );
}

[data-tema="espacio"] .celebracion {
  background-image: radial-gradient(circle at 20% 50%, var(--color-claro) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 30%, var(--color-acento) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, var(--color-primario) 0 3px, transparent 4px);
}