/* ============================================================================
   JUGAR — partidas entre los dos móviles.
   ========================================================================== */

.jugar-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.jugar-cab .intro { margin: 0; }
.jugar-cab .btn { flex: none; font-size: var(--t-xs); padding: 8px 14px; min-height: 38px; }

.partidas { display: grid; gap: var(--sp-3); }

.partida {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-m);
  background: var(--cristal);
  border: var(--cristal-borde);
  cursor: pointer;
  transition: transform var(--d-sm) var(--ease-back), box-shadow var(--d-md), border-color var(--d-md);
}
.partida:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.partida h3 { font-size: var(--t-md); font-style: italic; color: var(--gold-soft); }

/* Si te toca a ti, la tarjeta respira. */
.partida.me-toca {
  border-color: rgba(233,199,132,.5);
  box-shadow: var(--halo-oro);
  animation: respirar-turno 3.4s var(--ease-soft) infinite;
}
@keyframes respirar-turno {
  0%, 100% { box-shadow: 0 0 22px rgba(233,199,132,.18); }
  50% { box-shadow: 0 0 34px rgba(233,199,132,.36); }
}
.partida.me-toca .rotulo { color: var(--gold); }

.partida-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10,9,20,.5);
  border: 1px solid rgba(233,199,132,.22);
  color: var(--gold-deep);
}
.partida-lado { display: grid; justify-items: end; gap: 4px; }

.juegos-nuevos { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .juegos-nuevos { grid-template-columns: 1fr 1fr; } }

/* ── ¿Quién eres? ────────────────────────────────────────────────────────── */

.quien {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}
.quien h2 { font-size: var(--t-xl); font-style: italic; color: var(--gold-soft); }
.quien p { max-width: 32ch; font-size: var(--t-sm); }
.quien-botones { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-3); }
.quien-botones .btn { min-width: 130px; justify-content: center; }

/* ── Cortesía para los juegos ────────────────────────────────────────────── */
/* Cada juego trae sus estilos, pero si alguno deja un botón desnudo, que al
   menos parezca de esta casa y no el gris del navegador. */
.juego button:not([class]) {
  padding: 12px 22px;
  min-height: 46px;
  border-radius: var(--r-full);
  border: 1px solid rgba(233,199,132,.32);
  background: linear-gradient(180deg, rgba(34,29,60,.92), rgba(18,16,31,.92));
  color: var(--gold-soft);
  font-family: var(--util);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: transform 180ms var(--ease-back), box-shadow var(--d-sm);
}
.juego button:not([class]):hover { box-shadow: var(--halo-oro); }
.juego button:not([class]):active { transform: scale(.94); }

/* Los juegos ocupan su hueco sin desbordar la pantalla. */
.juego-lienzo > * { max-width: 100%; }