/* ─── ATMÓSFERA ─── */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background: linear-gradient(165deg, #0a0418 0%, #050209 50%, #0f0512 100%);
  /* Aisla pintado/composición del resto del layout (clave para reducir repaint en Safari) */
  contain: strict;
  will-change: auto;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  /* Blur reducido (60→30): el radio del blur es lo más caro de la GPU en iOS;
     a 30px el aspecto sigue siendo nube suave y baja el coste por frame. */
  filter: blur(30px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .72;
  /* Promueve a capa propia para que el compositor no repinte en cada frame */
  transform: translateZ(0);
  contain: layout paint;
}
/* Pausa SOLO las animaciones decorativas e infinitas cuando la app está oculta
   (son las que consumen GPU/batería de forma continua). Las animaciones de
   entrada de una sola pasada —screenIn, fadeIn, fadeUp, slideIn— NO se pausan:
   usan animation-fill-mode:both y empiezan en opacity:0, así que pausarlas dejaba
   pantallas/tarjetas invisibles al volver de segundo plano. */
html.app-hidden .cloud,
html.app-hidden .home-title,
html.app-hidden .mc-extra,
html.app-hidden .g-tab-dot.pulse,
html.app-hidden .sorteo-coin,
html.app-hidden .end-flame,
html.app-hidden .timer-ring circle.prog.urgent { animation-play-state: paused !important; }
/* Congela el fondo decorativo (la carga de GPU dominante) sin que el jugador lo
   note: en reposo durante el juego (html.bg-still, se reanuda al primer toque) o
   cuando un overlay a pantalla completa lo tapa por completo. */
html.bg-still .cloud,
html.bg-still .home-title,
body:has(.lt-overlay, .glucose-overlay) .cloud { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .cloud, .home-title, .mc-extra, .g-tab-dot.pulse { animation: none !important; }
}
/* Solo 5 nubes activas (antes 7): cada nube es una capa grande y borrosa
   con mix-blend-mode, lo más caro para la GPU del iPhone. Con 5 el fondo
   sigue lleno y se reduce ~30% el trabajo de composición continuo. */
.cloud:nth-of-type(n+6) { display: none; }
/* Drift patterns — each cloud moves arbitrarily across screen */
@keyframes cloudFloatA {
  0%   { transform: translate(0, 0) scale(1); opacity: .62; }
  18%  { transform: translate(34vw, -12vh) scale(1.12); opacity: .78; }
  36%  { transform: translate(62vw, 8vh) scale(0.96); opacity: .60; }
  54%  { transform: translate(44vw, 26vh) scale(1.16); opacity: .72; }
  72%  { transform: translate(12vw, 18vh) scale(1.04); opacity: .68; }
  100% { transform: translate(0, 0) scale(1); opacity: .62; }
}
@keyframes cloudFloatB {
  0%   { transform: translate(0, 0) scale(1); opacity: .65; }
  22%  { transform: translate(-30vw, 14vh) scale(1.08); opacity: .55; }
  44%  { transform: translate(-58vw, -6vh) scale(1.14); opacity: .72; }
  66%  { transform: translate(-24vw, -22vh) scale(0.94); opacity: .60; }
  100% { transform: translate(0, 0) scale(1); opacity: .65; }
}
@keyframes cloudFloatC {
  0%   { transform: translate(0, 0) scale(1); opacity: .55; }
  20%  { transform: translate(28vw, 24vh) scale(1.14); opacity: .72; }
  45%  { transform: translate(-22vw, 36vh) scale(0.98); opacity: .50; }
  70%  { transform: translate(-46vw, 10vh) scale(1.18); opacity: .68; }
  100% { transform: translate(0, 0) scale(1); opacity: .55; }
}
@keyframes cloudFloatD {
  0%   { transform: translate(0, 0) scale(1); opacity: .68; }
  25%  { transform: translate(-28vw, -26vh) scale(1.12); opacity: .55; }
  50%  { transform: translate(22vw, -36vh) scale(1.08); opacity: .72; }
  78%  { transform: translate(40vw, -12vh) scale(0.92); opacity: .60; }
  100% { transform: translate(0, 0) scale(1); opacity: .68; }
}
@keyframes cloudDiagE {
  0%   { transform: translate(-10vw, 10vh) scale(1); opacity: .50; }
  30%  { transform: translate(36vw, -18vh) scale(1.14); opacity: .72; }
  55%  { transform: translate(54vw, 22vh) scale(0.96); opacity: .55; }
  80%  { transform: translate(10vw, 40vh) scale(1.12); opacity: .68; }
  100% { transform: translate(-10vw, 10vh) scale(1); opacity: .50; }
}
@keyframes cloudDiagF {
  0%   { transform: translate(20vw, -10vh) scale(1); opacity: .55; }
  28%  { transform: translate(-32vw, 18vh) scale(1.12); opacity: .72; }
  52%  { transform: translate(-18vw, 44vh) scale(1.06); opacity: .62; }
  76%  { transform: translate(28vw, 22vh) scale(0.94); opacity: .56; }
  100% { transform: translate(20vw, -10vh) scale(1); opacity: .55; }
}
@keyframes cloudVertG {
  0%   { transform: translate(0, 0) scale(1); opacity: .60; }
  33%  { transform: translate(8vw, -42vh) scale(1.10); opacity: .75; }
  66%  { transform: translate(-6vw, 36vh) scale(1.05); opacity: .58; }
  100% { transform: translate(0, 0) scale(1); opacity: .60; }
}
@keyframes cloudVertH {
  0%   { transform: translate(0, -8vh) scale(1); opacity: .62; }
  35%  { transform: translate(14vw, 30vh) scale(1.12); opacity: .75; }
  72%  { transform: translate(-20vw, -32vh) scale(0.96); opacity: .60; }
  100% { transform: translate(0, -8vh) scale(1); opacity: .62; }
}
@keyframes fadeUp    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideIn   { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
@keyframes breathe   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes shimmer   { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes screenIn  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes cardFlip  { 0%{transform:rotateY(90deg) scale(.92);opacity:0} 100%{transform:rotateY(0deg) scale(1);opacity:1} }

/* ─── APP ─── */
.app {
  position: relative; z-index: 1;
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  max-width: var(--app-max);
  margin: 0 auto;
  overflow: hidden;
}
.screen { display:none; flex-direction:column; height:100%; overflow:hidden; animation:screenIn .3s cubic-bezier(.25,.46,.45,.94) both; position:relative; contain: layout paint style; }
.screen.active { display:flex; }
/* Las pantallas no activas no pintan ni hacen layout (ahorro CPU/GPU gigante) */
.screen:not(.active) { content-visibility: hidden; }