/* ════════════════════════════════════════════════════════════════
   MI TURNO · modals/overlay.css
   ════════════════════════════════════════════════════════════════ */

.ovl {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Blur blanco: tinte claro + frosted glass en lugar de oscuro */
  background: rgba(200, 220, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow:hidden evita que el overlay haga scroll → elimina el artefacto de dos colores */
  overflow: hidden;
  padding: 20px;
  animation: fadeIn 0.25s var(--ease);
  /* Aislar capa de composición */
  isolation: isolate;
  contain: paint;
}

[data-theme='dark'] .ovl {
  background: rgba(0, 4, 20, 0.52);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}