/* Interfaz compartida de los cuatro juegos de la paleta base. */

.juego { padding: 22px 0 10px; }

.juego-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.marcador {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.opciones {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.opcion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--linea);
  background: #fff;
  cursor: pointer;
}

.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

.opcion:has(input:checked) {
  border-color: var(--azul-btn);
  background: #e7f4fa;
}

.opcion input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 3px;
  accent-color: var(--azul-btn);
}

.pregunta-texto {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.revelacion {
  display: grid;
  gap: 10px;
}

.revelacion article {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
}

.resumen-final {
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sombra);
}

.lienzo-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--sombra);
}

.lienzo {
  width: 100%;
  height: min(62vw, 460px);
  min-height: 240px;
  touch-action: none;
  background: #fffbf7;
  border-radius: 16px;
  display: block;
  cursor: crosshair;
}

.herramientas, .chat-rapido {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(7, 59, 76, 0.25);
  padding: 0;
}

.color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--oscuro); }

.grosor { width: 140px; }

.palabra-secreta {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--oscuro);
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.chat-log {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  margin: 6px 0 0;
}

.burbuja {
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
}

.grafico {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 18px;
}

.historial {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.historial li {
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
}

.escape-layout {
  display: grid;
  gap: 14px;
}

.cronometro {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.pista-jugador {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border-left: 6px solid var(--coral);
}

.pista-jugador.victor { border-left-color: var(--azul); }

.mapa-juego {
  position: relative;
  height: 320px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 45%, rgba(255, 107, 107, 0.25), transparent 28%),
    radial-gradient(circle at 78% 40%, rgba(17, 138, 178, 0.28), transparent 26%),
    linear-gradient(90deg, #137a96, #0b4f68 40%, #0e6d8c 60%, #118ab2);
  overflow: hidden;
}

.ciudad {
  position: absolute;
  transform: translate(-50%, -50%);
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 0;
  background: #fff6ee;
  color: var(--oscuro);
  font-weight: 700;
}

.ciudad.marcada { background: var(--amarillo); }

.simbolos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.simbolo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
}

.clave-glifo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}

.clave-glifo li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
}

.tabla-morse {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  font-size: 0.92rem;
}

.tabla-morse th, .tabla-morse td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
}

.cajas {
  display: grid;
  gap: 10px;
}

@media (min-width: 720px) {
  .cajas { grid-template-columns: repeat(3, 1fr); }
}

.caja-sobre {
  padding: 14px;
  border-radius: 18px;
  border: 2px solid var(--linea);
  background: #fff;
  text-align: left;
  min-height: 140px;
}

.caja-sobre strong { display: block; margin-bottom: 6px; }

.final-carta {
  padding: 8px 0 20px;
}

.temblor { animation: temblor 0.35s linear; }

@keyframes temblor {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}