/* ===== Niebla ambiental (estilo Dark / Stranger Things) =====
   Tres capas de niebla procedural que derivan despacio; solo transform/opacity (GPU).
   Más densa abajo y en los bordes para no ensuciar el texto. */
.niebla {
  /* Fijo y más alto que cualquier pantalla (140 px de sobra): en iPhone, cuando Safari esconde o enseña su barra,
     la ventana cambia de altura y nunca queda una franja sin niebla. El degradado hacia arriba se pinta dentro del
     propio lienzo (Safari no repinta bien las máscaras CSS sobre elementos fijos al hacer scroll). */
  position: fixed; top: 0; left: 0; width: 100%; height: calc(100% + 140px); height: calc(100lvh + 140px);
  pointer-events: none; z-index: 80;
  opacity: var(--niebla-op, 1);
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

/* Botón de ambiente (sonido): pastilla discreta abajo a la izquierda, responde al pulsar */
.niebla-btn {
  position: fixed; left: max(14px, env(safe-area-inset-left, 14px)); bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 130; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,20,20,.62); color: #f2f2f2; font: 600 12.5px/1 -apple-system, system-ui, sans-serif; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer; transition: transform 160ms cubic-bezier(.23,1,.32,1), background 200ms ease, border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.niebla-btn:active { transform: scale(.96); }
.niebla-btn[aria-pressed="true"] { background: rgba(229,9,20,.82); border-color: rgba(255,255,255,.22); }
.niebla-btn svg { width: 16px; height: 16px; flex: none; }
.niebla-btn .ondas { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.niebla-btn .ondas b { width: 2px; height: 4px; background: currentColor; border-radius: 1px; transform-origin: bottom; }
.niebla-btn[aria-pressed="true"] .ondas b { animation: niebla-onda 1.1s ease-in-out infinite; }
.niebla-btn .ondas b:nth-child(2) { animation-delay: .18s; } .niebla-btn .ondas b:nth-child(3) { animation-delay: .36s; }
@keyframes niebla-onda { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1.9); } }

@media (hover: hover) and (pointer: fine) { .niebla-btn:hover { background: rgba(40,40,40,.72); } .niebla-btn[aria-pressed="true"]:hover { background: rgba(229,9,20,.92); } }
@media (max-width: 640px) { .niebla { --niebla-op: .8; } }
@media (prefers-reduced-motion: reduce) {
  .niebla { --niebla-op: .6; }
  .niebla-btn[aria-pressed="true"] .ondas b { animation: none; transform: scaleY(1.2); }
}
@media (prefers-reduced-transparency: reduce) { .niebla { display: none; } .niebla-btn { background: #141414; backdrop-filter: none; -webkit-backdrop-filter: none; } }