/* Atmosphere: glow, flicker, fog, bats, moon. Shared by phone and TV. */

.glow { text-shadow: 0 0 6px currentColor, 0 0 18px currentColor, 0 0 42px rgba(255, 122, 26, .5); }

.flicker { animation: flicker 4s infinite; }
@keyframes flicker {
  0%, 19%, 21%, 23%, 52%, 56%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor, 0 0 24px rgba(255, 122, 26, .6); }
  20%, 22%, 54% { opacity: .55; text-shadow: none; }
}

.fog { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fog i {
  position: absolute; left: -50%; width: 200%; height: 60%;
  background:
    radial-gradient(35% 50% at 20% 50%, rgba(200, 180, 255, .09), transparent 70%),
    radial-gradient(30% 45% at 55% 40%, rgba(200, 180, 255, .07), transparent 70%),
    radial-gradient(35% 50% at 85% 60%, rgba(200, 180, 255, .08), transparent 70%);
  filter: blur(18px);
  animation: drift 38s linear infinite;
}
.fog i:nth-child(1) { bottom: -10%; }
.fog i:nth-child(2) { bottom: 15%; animation-duration: 55s; animation-direction: reverse; opacity: .7; }
.fog i:nth-child(3) { top: -5%; animation-duration: 70s; opacity: .45; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }

.moon {
  position: fixed; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 38% 35%, #fffaf0 0, #fff1c9 45%, #f2d58f 100%);
  box-shadow: 0 0 80px 20px rgba(255, 214, 140, .22);
  opacity: .9;
}

.bat { position: fixed; z-index: 1; pointer-events: none; width: 34px; height: 18px; color: #1b1229; animation: bat-fly 16s linear infinite; }
.bat svg { width: 100%; height: 100%; fill: currentColor; animation: flap .25s ease-in-out infinite alternate; transform-origin: center; }
@keyframes flap { to { transform: scaleY(.5); } }
@keyframes bat-fly {
  0% { transform: translate(-60px, 30vh) rotate(-6deg); }
  50% { transform: translate(50vw, 12vh) rotate(4deg); }
  100% { transform: translate(110vw, 26vh) rotate(-4deg); }
}

/* Full-screen “+N” burst (phone) */
.burst {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(14, 10, 23, .55), rgba(5, 3, 10, .92));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .2s;
}
.burst .n { font: 900 6.5rem/1 Rubik; color: var(--slime); text-shadow: 0 0 40px rgba(139, 224, 78, .55); animation: pop .6s var(--ease-out) both; }
.burst.neg .n { color: var(--blood); text-shadow: 0 0 40px rgba(255, 75, 92, .55); }
.burst.zero .n { font-size: 4rem; color: var(--viol); text-shadow: 0 0 40px rgba(167, 123, 255, .5); }
.burst .l { margin-top: 10px; font: 800 1.3rem Rubik; animation: up-soft .5s .15s var(--ease-out) both; }
.burst .h { margin-top: 28px; color: var(--mute); font-size: .85rem; animation: fade 1s .8s both; }
.burst.out { animation: fade .25s reverse forwards; }