/**
 * MODO SIN DESENFOQUE DE FONDO (`html.no-blur`).
 *
 * POR QUÉ EXISTE. `backdrop-filter` obliga al compositor a: (1) recortar lo que
 * hay DEBAJO del elemento, (2) desenfocarlo en una textura aparte, (3) mezclar.
 * En Chrome de escritorio eso es gratis. En el WebView de Android es el gasto
 * más grande de toda la interfaz, por dos motivos que se suman:
 *
 *  · `.topbar` y `.navbar` están SIEMPRE en pantalla y, durante la partida,
 *    están ENCIMA del lienzo. Un fondo que cambia invalida el desenfoque, así
 *    que el WebView vuelve a desenfocar esas dos franjas EN CADA FOTOGRAMA a
 *    60 fps. Ése es el juego a 30-35 fps con tirones.
 *  · `.panel` lo lleva también, y un menú tiene diez tarjetas. Cambiar de menú
 *    destruye y reserva diez texturas de golpe. Ése es el parpadeo.
 *
 * Se activa desde el `<head>` de `index.html` antes del primer pintado, y por
 * defecto sólo dentro de la APK: en navegador no hace falta y el efecto se ve.
 *
 * CÓMO SE COMPENSA. Quitar el desenfoque a secas deja los paneles translúcidos
 * y se lee peor, porque el desenfoque hacía de separador. Así que a cada fondo
 * afectado se le sube la opacidad hasta que aísla por sí solo. El resultado no
 * es idéntico —es un cristal esmerilado convertido en cristal tintado— pero es
 * legible, coherente, y cuesta cero.
 *
 * SÓLO toca `backdrop-filter`. Los `filter:blow()` de brillos y auras son otra
 * cosa: desenfocan el PROPIO elemento, no el fondo, no releen la pantalla y
 * son mucho más baratos. Si hiciera falta más, ése es el siguiente escalón,
 * pero se mide antes de tocarlo.
 */

/*
 * Red de seguridad. Va con `!important` y sobre `*` a propósito: hay
 * `backdrop-filter` escritos como estilo en línea desde JavaScript
 * (`services/iap.js`, `game/modes/survivor.js`, `ui/screens/base.js`), y una
 * regla `!important` de hoja de estilos gana a un estilo en línea sin él. Es
 * la única forma de garantizar que no queda ninguno suelto.
 */
html.no-blur *,
html.no-blur *::before,
html.no-blur *::after{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Compensación: barras permanentes ---------- */
/* Eran las dos caras del problema en partida. El degradado se conserva para no
   perder el remate, pero el extremo transparente sube de .55 a .90. */
html.no-blur .topbar{
  background:linear-gradient(180deg, rgba(5,7,15,.98), rgba(5,7,15,.92)) !important;
  isolation:isolate;
  contain:layout style;
  transform:translateZ(0);
}
html.no-blur .subbar{
  background:linear-gradient(180deg, rgba(5,7,15,.92), rgba(10,14,28,.95)) !important;
  isolation:isolate;
  contain:layout style;
  transform:translateZ(0);
}
html.no-blur .navbar{
  background:linear-gradient(0deg, rgba(5,7,15,.99), rgba(10,14,28,.95)) !important;
}

/* Retratos de perfil sin máscaras de composición alfa en móvil */
html.no-blur .av-ring{
  -webkit-mask:none !important;
  mask:none !important;
  background:none !important;
  border:2px solid var(--av-c1, #2E6BFF) !important;
  padding:0 !important;
}

/* ---------- Compensación: tarjetas ---------- */
/* `--panel` se redefine en el ámbito de `.no-blur`, así que lo heredan todos
   los sitios que lo usan sin tener que enumerarlos uno por uno. */
html.no-blur{
  --panel:      rgba(17, 24, 50, .93);
  --panel-soft: rgba(26, 34, 68, .88);
}

/* ---------- Compensación: velos de fondo ---------- */
/* Estos cubren la pantalla entera y su trabajo es tapar lo de detrás; sin
   desenfoque necesitan bastante más cuerpo o se lee el menú a través. */
html.no-blur .popup-bg{ background:rgba(3,5,12,.93); }
html.no-blur .tuto-modo{ background:rgba(3,5,12,.88); }

/* ---------- Compensación: píldoras flotantes ---------- */
/* Van sobre la cinemática de entrada, que es la imagen con más contraste del
   juego: a .62 sin desenfoque el texto se pierde encima de las zonas claras. */
html.no-blur .intro-skip,
html.no-blur .intro-unmute{ background:rgba(8,11,22,.90); }

/* ---------- Compensación: capa holográfica ---------- */
html.no-blur .bstate{ background:rgba(8, 14, 30, .92); }
html.no-blur .holo-line{
  background:linear-gradient(90deg, rgba(9,14,30,.95), rgba(9,14,30,.82));
}

/* ---------- Optimización de islas / base (evitar cuadros y tile stalls en WebView) ---------- */
/* En el WebView de Android, las máscaras radiales (-webkit-mask-image) y los
   filtros de desenfoque (filter:blur) en las capas de la isla fuerzan a la GPU
   a crear framebuffers fuera de pantalla en cada fotograma. Al deslizar entre
   islas, el rasterizador se satura y se ven baldosas cuadradas (checkerboarding).
   Aquí se sustituyen por degradados directos y opacidades limpias. */
html.no-blur .mp-halo{
  filter:none !important;
  stroke-width:4.2;
  stroke-opacity:.18;
}
html.no-blur .v-sombra{
  filter:none !important;
  fill:rgba(2,4,10,.55);
}
html.no-blur .isla-atmos .at-scan{
  filter:none !important;
}
html.no-blur .isla-atmos .at-fog{
  filter:none !important;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,
    color-mix(in srgb, var(--isla-brillo, #2E6BFF) 18%, transparent) 0%,
    color-mix(in srgb, var(--isla-brillo, #2E6BFF) 8%, transparent) 45%,
    transparent 70%) !important;
}
html.no-blur .isla-atmos .at-grid,
html.no-blur .isla-atmos .at-hex{
  mask-image:none !important;
  -webkit-mask-image:none !important;
}
html.no-blur .isla-atmos .at-grid{
  opacity:.35;
}
html.no-blur .isla-atmos .at-hex{
  /* Sin la máscara que la difumina, la malla se ve entera hasta el borde: algo
     menos de opacidad para que siga siendo fondo y no dibujo. */
  opacity:.22;
}
html.no-blur .isla-atmos .at-mote{
  box-shadow:none !important;
}
html.no-blur .isla.bloqueada .mapa-svg{
  filter:none !important;
  opacity:.30;
}
html.no-blur .isla.bloqueada .isla-atmos{
  display:none !important;
}

/* Optimización de Tienda y VIP */
html.no-blur .shop-hero{
  box-shadow:none !important;
}
html.no-blur .vip-badge .ic{
  filter:none !important;
}
html.no-blur .btn.premium .ic{
  filter:none !important;
}

/* Eliminación de parpadeos por animación escalonada en pantallas */
html.no-blur .screen.entra:not(.out) .screen-body > *{
  animation:none !important;
}
html.no-blur .screen.entra:not(.out) .screen-header{
  animation:none !important;
}

/* Aislamiento estricto de las islas para evitar checkerboarding GPU */
html.no-blur .isla{
  isolation:isolate !important;
  contain:paint layout !important;
  transform:translateZ(0) !important;
}
html.no-blur .isla.bloqueada{
  animation:none !important;
  pointer-events:none !important;
}
html.no-blur .isla.bloqueada .v-humo,
html.no-blur .isla.bloqueada .v-faro-halo,
html.no-blur .isla.bloqueada .isla-circuit-canvas{
  display:none !important;
  animation:none !important;
}

/* Aislamiento estricto de Topbar y Subbar */
html.no-blur .topbar,
html.no-blur .subbar{
  contain:paint layout !important;
  isolation:isolate !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden !important;
}

/* Aceleración instantánea y eliminación total de parpadeos entre menús */
html.no-blur .screen{
  transition:opacity .05s ease-out !important;
  transform:translateZ(0) !important;
  contain:layout paint !important;
}
html.no-blur .stagger > .panel::after{
  display:none !important;
  animation:none !important;
}
html.no-blur .entra .base-view::before{
  display:none !important;
  animation:none !important;
}