*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow: hidden; background: #020204; }

body {
  background: linear-gradient(to top, #060504 0%, #030303 30%, #020204 100%);
  color: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}


/* Starfield canvas */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Vignette overlay */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}

/* Glow orb */
.glow-orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.glow-orb::after {
  content: '';
  width: clamp(300px, 80vw, 800px);
  height: clamp(300px, 80vw, 800px);
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(255,245,210,0.55) 0%, 
    rgba(220,200,150,0.25) 30%, 
    rgba(180,160,120,0.06) 55%, 
    transparent 75%
  );
  transform: translateZ(0);
  animation: glow-rise 10s ease-in-out infinite;
}

/* Particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.particles, .glow-orb {
  transition: transform 0.15s ease-out;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,248,230,0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,245,220,0.3);
  animation: rise linear infinite;
  will-change: transform, opacity;
  bottom: -5%;
}

/* Decorative lines */
.line-top, .line-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8rem;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,190,140,0.2), rgba(255,255,255,0.2), rgba(212,190,140,0.2), transparent);
  animation: fadeIn 3s ease-out 1.5s both, breathe 6s ease-in-out 4.5s infinite;
}
.line-top    { top: 0; }
.line-bottom { bottom: 0; }

/* Hero */
.hero {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 1.5rem;
  user-select: none;
  width: 100%;
  max-width: 100vw;
}

/* Divine light rays behind text */
.divine-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255,240,200,0.03) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255,240,200,0.02) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255,240,200,0.04) 66deg,
      transparent 72deg,
      transparent 90deg,
      rgba(255,240,200,0.02) 96deg,
      transparent 102deg,
      transparent 120deg,
      rgba(255,240,200,0.03) 126deg,
      transparent 132deg,
      transparent 150deg,
      rgba(255,240,200,0.02) 156deg,
      transparent 162deg,
      transparent 180deg,
      rgba(255,240,200,0.03) 188deg,
      transparent 196deg,
      transparent 210deg,
      rgba(255,240,200,0.02) 218deg,
      transparent 226deg,
      transparent 240deg,
      rgba(255,240,200,0.04) 246deg,
      transparent 252deg,
      transparent 270deg,
      rgba(255,240,200,0.02) 276deg,
      transparent 282deg,
      transparent 300deg,
      rgba(255,240,200,0.03) 306deg,
      transparent 312deg,
      transparent 330deg,
      rgba(255,240,200,0.02) 338deg,
      transparent 346deg,
      transparent 360deg
    );
  animation: raysRotate 60s linear infinite, fadeIn 4s ease-out 1s both;
  mask-image: radial-gradient(circle, white 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, white 0%, transparent 70%);
}

/* Radiance halo behind title */
.radiance {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(400px, 80vw, 900px);
  height: clamp(250px, 40vw, 450px);
  transform: translate(-50%, -55%) translateZ(0);
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,248,225,0.12) 0%,
    rgba(255,242,210,0.06) 25%,
    rgba(255,235,195,0.02) 45%,
    rgba(220,200,150,0.005) 65%,
    transparent 80%
  );
  animation: radiancePulse 8s ease-in-out infinite, fadeIn 3s ease-out 0.5s both;
}
h1 {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(1.2rem, 8vw, 9rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 2rem;
  color: #fff;
  visibility: hidden;
  white-space: nowrap;
  transform: translateZ(0);
  animation: holyGlow 6s ease-in-out infinite;
  cursor: default;
}
/* Ornamental divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 1.5s ease-out 0.4s both;
}
.divider::before, .divider::after {
  content: '';
  width: clamp(2rem, 8vw, 6rem);
  height: 1px;
  background: linear-gradient(to var(--dir), transparent, rgba(212,190,140,0.4));
}
.divider::before { --dir: right; }
.divider::after  { --dir: left; }
.divider-icon {
  flex-shrink: 0;
  margin: 0 0.75rem;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  filter: drop-shadow(0 0 6px rgba(255,240,200,0.4));
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
}
.divider-icon .rocket,
.divider-icon .infinity {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.divider-icon .rocket {
  opacity: 0;
  animation: rocketFlyIn 1s ease-out 1.8s forwards, rocketFlyOut 0.8s ease-in 4s forwards;
}
body[data-mode] .rocket,
body[data-mode] .divine-rays { display: none; }
.divider-icon .infinity {
  opacity: 0;
  animation: infinityAppear 1s ease-out 4.8s forwards;
  color: rgba(255,245,220,0.6);
  font-family: 'Cinzel', serif;
  font-size: 1.4em;
  font-weight: 400;
  text-shadow: 0 0 8px rgba(255,240,200,0.3);
}
/* Mode-specific icons — hidden by default, shown only in their mode */
.divider-icon .icon-stagnatum,
.divider-icon .icon-descendum,
.divider-icon .icon-annihilatum {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: 1.1em;
  line-height: 1;
  pointer-events: none;
}

p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(0.4rem, 2.5vw, 1rem);
  letter-spacing: clamp(0.05em, 1vw, 0.4em);
  text-transform: uppercase;
  color: rgba(255,250,235,0.75);
  text-shadow: 0 0 15px rgba(255,245,220,0.2), 0 0 40px rgba(255,240,200,0.06);
  animation: fadeUp 1.5s ease-out 0.6s both;
  white-space: nowrap;
  display: block;
}
.word-infinite {
  animation: infiniteGlow 2s ease-in-out 4.8s both;
}

/* Keyframes */
@keyframes holyGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255,250,240,0.40), 0 0 40px rgba(255,240,200,0.15), 0 0 80px rgba(255,235,190,0.08); }
  50%       { text-shadow: 0 0 15px rgba(255,250,240,0.55), 0 0 55px rgba(255,240,200,0.28), 0 0 110px rgba(255,235,190,0.12); }
}
@keyframes annihilatumGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(180,80,255,0.40), 0 0 40px rgba(140,40,220,0.15), 0 0 80px rgba(100,0,200,0.08); }
  50%      { text-shadow: 0 0 15px rgba(180,80,255,0.55), 0 0 55px rgba(140,40,220,0.28), 0 0 110px rgba(100,0,200,0.12); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glow-rise {
  0%       { opacity: 0.08; transform: translateY(30px) scale(1) translateZ(0);    }
  50%      { opacity: 0.16; transform: translateY(-40px) scale(1.1) translateZ(0); }
  100%     { opacity: 0.08; transform: translateY(30px) scale(1) translateZ(0);    }
}
@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}
@keyframes twinkle {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50%      { transform: translateX(-50%) scaleX(1.5); }
}
@keyframes subtleShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes raysRotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes radiancePulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -55%) scale(1) translateZ(0); }
  50%      { opacity: 1;   transform: translate(-50%, -55%) scale(1.08) translateZ(0); }
}
@keyframes rocketFlyIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(60px); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translateY(-5px); }
  80%  { opacity: 1; transform: translate(-50%, -50%) translateY(2px); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@keyframes rocketFlyOut {
  0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-300px); }
}
@keyframes infinityAppear {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes infiniteGlow {
  0%, 100% { }
  30%  { color: #fff; text-shadow: 0 0 12px rgba(255,245,220,0.8), 0 0 30px rgba(255,240,200,0.4), 0 0 60px rgba(255,235,190,0.2); }
}

/* ── Descendum divider animations ── */
@keyframes descendumDive {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-60px); }
  25%  { opacity: 1; transform: translate(-50%, -50%) translateY(0px);  }
  70%  { opacity: 1; transform: translate(-50%, -50%) translateY(0px);  }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(300px); }
}
@keyframes infinityAppearDescendum {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* ── Mode switcher ── */
.mode-switcher {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 10001;
}
.mode-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,248,230,0.22);
  transition: color 0.3s ease;
  padding: 0.35rem 0.55rem;
}
.mode-btn:hover  { color: rgba(255,248,230,0.55); }
.mode-btn--active { color: rgba(255,248,230,0.65); }
.mode-sep {
  font-size: 0.45rem;
  color: rgba(255,248,230,0.12);
  pointer-events: none;
  user-select: none;
}

/* ── Annihilatum overlay ── */
.annihilatum-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
}
.annihilatum-overlay.active {
  opacity: 1;
}

/* ── Descendum mode — hellfire palette ── */
body[data-mode="descendum"] {
  background: linear-gradient(to bottom, #000000 0%, #0a0100 50%, #200400 100%);
}
/* Hellfire rising from the abyss */
body[data-mode="descendum"]::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background:
    radial-gradient(ellipse 120% 60% at 50% 100%,
      rgba(200,45,0,0.60) 0%,
      rgba(160,30,0,0.35) 25%,
      rgba(100,15,0,0.12) 55%,
      transparent 75%);
  pointer-events: none;
  z-index: 1;
  animation: twinkle 3s ease-in-out infinite alternate;
}
body[data-mode="descendum"] .glow-orb::after {
  background: radial-gradient(circle,
    rgba(255,90,10,0.70) 0%,
    rgba(210,55,5,0.40) 25%,
    rgba(140,25,2,0.12) 55%,
    transparent 75%);
}
body[data-mode="descendum"] .radiance {
  background: radial-gradient(ellipse at center,
    rgba(230,85,10,0.20) 0%,
    rgba(190,55,4,0.10) 25%,
    rgba(130,25,2,0.04) 45%,
    transparent 65%);
}
body[data-mode="descendum"] .particle {
  background: rgba(235,88,18,0.92);
  box-shadow: 0 0 6px rgba(220,70,10,0.50);
}
body[data-mode="descendum"] h1 {
  color: rgba(240,190,130,0.92);
  text-shadow:
    0 0 10px rgba(240,130,40,0.45),
    0 0 40px rgba(210,80,10,0.20),
    0 0 90px rgba(170,45,5,0.10);
}
body[data-mode="descendum"] p {
  color: rgba(200,130,70,0.70);
  text-shadow: 0 0 15px rgba(210,90,15,0.22), 0 0 40px rgba(170,50,5,0.08);
}
body[data-mode="descendum"] .divider::before,
body[data-mode="descendum"] .divider::after {
  background: linear-gradient(to var(--dir), transparent, rgba(210,90,20,0.48));
}
body[data-mode="descendum"] .divider-icon {
  filter: drop-shadow(0 0 6px rgba(230,100,20,0.50)) hue-rotate(20deg) saturate(1.2) brightness(0.85);
}
/* Strip decorative / elegant elements */
body[data-mode="descendum"] .line-top,
body[data-mode="descendum"] .line-bottom { display: none; }
body[data-mode="descendum"] .divider-icon .infinity { 
  opacity: 0;
  animation: infinityAppearDescendum 1s ease-out 2.8s forwards;
  color: rgba(255,140,40,0.65);
  text-shadow: 0 0 10px rgba(255,80,10,0.4);
}
body[data-mode="descendum"] .divider-icon .icon-descendum {
  opacity: 0;
  color: rgba(235,120,30,0.90);
  font-size: 1.0em;
  text-shadow: 0 0 12px rgba(220,80,10,0.65);
  animation: descendumDive 2.2s ease-in 0.5s forwards;
}

/* ── Stagnatum mode — permanently trapped in ice ── */
body[data-mode="stagnatum"] {
  background: linear-gradient(to top, #000810 0%, #000e1c 30%, #001218 100%);
}
/* Cold light filtering through deep glacier ice + frost cracks */
body[data-mode="stagnatum"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 42%,
      rgba(60,195,255,0.09) 0%,
      rgba(30,160,240,0.04) 40%,
      rgba(30,160,240,0) 70%),
    linear-gradient(to top,
      rgba(0,60,100,0.20) 0%,
      rgba(0,40,80,0.08) 30%,
      rgba(0,40,80,0) 60%),
    repeating-linear-gradient(72deg,  transparent, transparent 36px, rgba(160,230,255,0.022) 36px, rgba(160,230,255,0.022) 37px),
    repeating-linear-gradient(-14deg, transparent, transparent 58px, rgba(160,230,255,0.016) 58px, rgba(160,230,255,0.016) 59px),
    repeating-linear-gradient(38deg,  transparent, transparent 80px, rgba(160,230,255,0.011) 80px, rgba(160,230,255,0.011) 81px);
  pointer-events: none;
  z-index: 1;
}
body[data-mode="stagnatum"] h1 {
  color: rgba(215,242,255,0.92);
  text-shadow:
    0 0 8px  rgba(140,225,255,0.55),
    0 0 25px rgba(80,200,255,0.28),
    0 0 70px rgba(40,170,240,0.12);
  animation: none;
}
body[data-mode="stagnatum"] h1:hover {
  text-shadow:
    0 0 8px  rgba(140,225,255,0.55),
    0 0 25px rgba(80,200,255,0.28),
    0 0 70px rgba(40,170,240,0.12);
  filter: none;
}
/* Freeze everything — time stands completely still */
body[data-mode="stagnatum"] .divider {
  animation: none;
  opacity: 1;
}
body[data-mode="stagnatum"] .line-top,
body[data-mode="stagnatum"] .line-bottom {
  animation: none;
  opacity: 0.4;
}
body[data-mode="stagnatum"] p {
  color: rgba(120,198,240,0.68);
  text-shadow: 0 0 12px rgba(80,195,250,0.22);
}
body[data-mode="stagnatum"] .glow-orb::after {
  background: radial-gradient(circle,
    rgba(65,200,255,0.40) 0%,
    rgba(35,165,240,0.20) 30%,
    rgba(15,125,220,0.05) 55%,
    rgba(15,125,220,0) 75%);
}
body[data-mode="stagnatum"] .radiance {
  background: radial-gradient(ellipse at center,
    rgba(80,210,255,0.12) 0%,
    rgba(40,175,245,0.06) 30%,
    rgba(40,175,245,0) 65%);
}
body[data-mode="stagnatum"] .particle {
  background: rgba(190,238,255,0.78);
  box-shadow: 0 0 6px rgba(140,220,255,0.45);
}
body[data-mode="stagnatum"] .divider::before,
body[data-mode="stagnatum"] .divider::after {
  background: linear-gradient(to var(--dir), transparent, rgba(110,215,255,0.38));
}
body[data-mode="stagnatum"] .divider-icon {
  filter: drop-shadow(0 0 6px rgba(80,215,255,0.35));
}
body[data-mode="stagnatum"] .divider-icon .infinity  { opacity: 0; animation: none; }
body[data-mode="stagnatum"] .divider-icon .icon-stagnatum {
  opacity: 0.82;
}
body[data-mode="stagnatum"] .particle,
body[data-mode="stagnatum"] .glow-orb::after,
body[data-mode="stagnatum"] .radiance {
  animation-play-state: paused !important;
}

/* ── Annihilatum: pre-explosion tremor ── */
@keyframes annihilate-tremor {
  0%  { transform: translate(0,0)       rotate(0deg);    }
  10% { transform: translate(-1px, 0)   rotate(-0.10deg); }
  20% { transform: translate(1px, -1px) rotate( 0.12deg); }
  30% { transform: translate(-2px, 1px) rotate(-0.20deg); }
  40% { transform: translate(2px, 0)    rotate( 0.22deg); }
  50% { transform: translate(-2px,-2px) rotate(-0.30deg); }
  60% { transform: translate(3px, 1px)  rotate( 0.32deg); }
  70% { transform: translate(-3px,-1px) rotate(-0.40deg); }
  80% { transform: translate(4px, 2px)  rotate( 0.40deg); }
  90% { transform: translate(-2px,-1px) rotate(-0.22deg); }
  100%{ transform: translate(0,0)       rotate(0deg);    }
}
.hero.annihilatum-tremor {
  animation: annihilate-tremor 0.07s linear infinite;
  will-change: transform;
}

/* ── Annihilatum: h1 glow intensification ── */
@keyframes annihilate-intensify {
  0% {
    text-shadow: 0 0 10px rgba(180,80,255,0.4), 0 0 40px rgba(140,40,220,0.15);
  }
  100% {
    text-shadow:
      0 0 15px rgba(220,160,255,1.0),
      0 0 50px rgba(200,100,255,0.90),
      0 0 100px rgba(170,60,255,0.80),
      0 0 150px rgba(140,20,220,0.60);
  }
}
h1.annihilatum-intensify,
p.annihilatum-intensify {
  animation: annihilate-intensify 0.44s ease-in forwards !important;
}



/* ── Annihilatum flash ── */
.annihilatum-flash {
  position: fixed;
  inset: 0;
  z-index: 10002;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%,
    #fff 0%,
    rgba(255,225,140,0.95) 18%,
    rgba(255,130,30,0.75) 45%,
    rgba(200,60,10,0.3) 65%,
    transparent 80%);
}
@keyframes annihilate-flash {
  0%   { opacity: 1; transform: scale(0.15); }
  15%  { opacity: 1; transform: scale(2); }
  100% { opacity: 0; transform: scale(3); }
}
@keyframes annihilate-shake {
  0%   { transform: translate(0,0)       rotate(0deg); }
  12%  { transform: translate(-16px,12px)  rotate(-3deg); }
  25%  { transform: translate(18px,-14px)  rotate(2.5deg); }
  38%  { transform: translate(-12px,16px)  rotate(-2deg); }
  52%  { transform: translate(14px,-10px)  rotate(2deg); }
  65%  { transform: translate(-10px,12px)  rotate(-1deg); }
  78%  { transform: translate(8px,-6px)    rotate(1deg); }
  90%  { transform: translate(-4px,4px)    rotate(-0.5deg); }
  100% { transform: translate(0,0)         rotate(0deg); }
}

/* ── Annihilatum: void purple palette ── */
body[data-mode="annihilatum"] {
  background: linear-gradient(to top, #04000f 0%, #070014 30%, #0a001c 100%);
}
body[data-mode="annihilatum"] h1 {
  color: rgba(220,190,255,0.92);
  animation: annihilatumGlow 6s ease-in-out infinite;
}
body[data-mode="annihilatum"] p {
  color: rgba(160,110,220,0.68);
  text-shadow: 0 0 12px rgba(140,60,220,0.22);
}
body[data-mode="annihilatum"] .glow-orb::after {
  background: radial-gradient(circle,
    rgba(130,40,220,0.45) 0%,
    rgba(100,20,180,0.22) 30%,
    rgba(70,0,140,0.06) 55%,
    rgba(70,0,140,0) 75%);
}
body[data-mode="annihilatum"] .particle {
  background: rgba(190,120,255,0.78);
  box-shadow: 0 0 6px rgba(160,80,255,0.45);
}
body[data-mode="annihilatum"] .divider::before,
body[data-mode="annihilatum"] .divider::after {
  background: linear-gradient(to var(--dir), transparent, rgba(160,80,255,0.35));
}
body[data-mode="annihilatum"] .divider-icon {
  filter: drop-shadow(0 0 6px rgba(160,80,255,0.35));
}

/* ── Annihilatum: hide rocket, keep mode buttons legible ── */
body[data-mode="annihilatum"] .divider-icon .infinity           { opacity: 0; animation: none; }
body[data-mode="annihilatum"] .divider-icon .icon-annihilatum {
  opacity: 0.45;
  color: rgba(200,160,255,0.65);
  font-size: 1.05em;
  text-shadow: 0 0 8px rgba(160,80,255,0.30);
}
body[data-mode="annihilatum"] .mode-btn        { color: rgba(200,160,255,0.30); }
body[data-mode="annihilatum"] .mode-btn--active { color: rgba(200,160,255,0.50); }
body[data-mode="annihilatum"] .mode-btn:hover   { color: rgba(200,160,255,0.70); }
body[data-mode="annihilatum"] .mode-sep         { color: rgba(200,160,255,0.18); }

/* ── Utility: slow spin (used by ❄ in Stagnatum) ── */
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Mobile: reduce GPU load and fix iOS compositing glow bug ── */
@media (max-width: 768px) {
  /* Prevent iOS Safari from creating a blown-out compositing layer */
  h1 {
    filter: none !important;
    transition: none;
  }
  h1:hover { filter: none; }

  /* Mobile annihilatum: cap the intensify effect so it doesn't obliterate the screen */
  @keyframes annihilate-intensify {
    0%   { text-shadow: 0 0 10px rgba(255,250,240,0.4), 0 0 40px rgba(255,240,200,0.15); }
    100% {
      text-shadow:
        0 0 15px rgba(255,255,255,1.0),
        0 0 40px rgba(255,245,200,0.70),
        0 0 80px rgba(255,220,120,0.35);
    }
  }

  /* Disable ray rotation — compositor still has to move this 200%x200% element */
  .divine-rays {
    animation: fadeIn 4s ease-out 1s both;
  }

  /* Shrink and dim the glow orb */
  .glow-orb::after {
    width: clamp(180px, 55vw, 420px);
    height: clamp(180px, 55vw, 420px);
    opacity: 0.5;
  }

  /* Remove blur on ascension pillars — filter: blur() is expensive on mobile */
  .ascension-pillar::after {
    filter: none;
  }

  /* Stagnatum: reduce glow intensity on mobile to fix iOS compositor blowout */
  body[data-mode="stagnatum"] .glow-orb::after {
    background: radial-gradient(circle,
      rgba(65,200,255,0.18) 0%,
      rgba(35,165,240,0.08) 30%,
      rgba(15,125,220,0.02) 55%,
      rgba(15,125,220,0) 75%);
    opacity: 0.6;
  }
  body[data-mode="stagnatum"] h1 {
    text-shadow:
      0 0 6px  rgba(140,225,255,0.35),
      0 0 18px rgba(80,200,255,0.15),
      0 0 40px rgba(40,170,240,0.07);
  }
  /* Mode switcher: tighten spacing so it fits on narrow screens */
  .mode-switcher {
    gap: 0.15rem;
    bottom: 1rem;
  }
  .mode-btn {
    font-size: 0.44rem;
    letter-spacing: 0.07em;
    padding: 0.2rem 0.25rem;
  }
  .mode-sep {
    font-size: 0.32rem;
  }

  /* Descendum: pull back the hellfire on tall/narrow mobile viewports */
  body[data-mode="descendum"]::after {
    height: 35%;
    background:
      radial-gradient(ellipse 140% 60% at 50% 100%,
        rgba(200,45,0,0.35) 0%,
        rgba(140,25,0,0.15) 40%,
        transparent 70%);
  }
  body[data-mode="descendum"] .glow-orb::after {
    background: radial-gradient(circle,
      rgba(240,75,10,0.45) 0%,
      rgba(190,45,5,0.22) 30%,
      rgba(120,20,2,0.06) 55%,
      transparent 75%);
  }
}