/* Living scenes inside the round options: shared by the site and both stream overlays (see scenes.js).
   The container sets --speed (1 = normal; lower = faster, e.g. on hover). */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx i { position: absolute; left: var(--x); top: var(--y); display: block; animation-duration: calc(var(--d) * var(--speed, 1)); animation-delay: var(--delay); animation-iteration-count: infinite; animation-timing-function: linear; }

.fx-snow i { width: 4px; height: 4px; background: #fff; top: -6px; animation-name: fall-sway; }
.fx-petals i { width: 5px; height: 4px; background: #ff9ecf; top: -6px; animation-name: fall-spin; }
.fx-leaves i { width: 4px; height: 4px; background: #8fe052; top: -6px; animation-name: fall-spin; }
.fx-ash i { width: 3px; height: 3px; background: #c9c9d1; top: -6px; opacity: .8; animation-name: fall-sway; }
.fx-rain i { width: 2px; height: 12px; background: rgba(120, 175, 255, .85); top: -14px; animation-name: rain; --d: .7s; }
.fx-embers i { width: 4px; height: 4px; background: #ffb347; box-shadow: 0 0 6px #ff8c2b; top: auto; bottom: 30px; animation-name: rise-fade; }
.fx-souls i { width: 4px; height: 6px; background: #6fe0ff; box-shadow: 0 0 6px #6fe0ff; top: auto; bottom: 20px; animation-name: rise-wave; }
.fx-bubbles i { width: 6px; height: 6px; border: 2px solid rgba(255, 255, 255, .8); top: auto; bottom: 10px; animation-name: rise-wave; }
.fx-spores-red i, .fx-spores-teal i, .fx-spores-pink i { width: 3px; height: 3px; animation-name: drift; }
.fx-spores-red i { background: #ff6b6b; }
.fx-spores-teal i { background: #7df0e6; }
.fx-spores-pink i { background: #ffc4e1; }
.fx-sparkles i, .fx-sparkles-purple i { width: 4px; height: 4px; background: #fff3a8; box-shadow: 0 0 8px #ffd046; animation-name: sparkle; }
.fx-sparkles-purple i { background: #e7d2ff; box-shadow: 0 0 8px #b07cff; }
.fx-stars i { width: 3px; height: 3px; background: #fff; top: calc(var(--y) * .6); animation-name: twinkle; }
.fx-fireflies i { width: 4px; height: 4px; background: #e8ff7a; box-shadow: 0 0 8px #d8ff4a; top: calc(40% + var(--y) * .45); animation-name: wander; }
.fx-sand i { width: 3px; height: 3px; background: rgba(255, 255, 255, .8); left: -6px; top: calc(30% + var(--y) * .5); animation-name: sand; }
.fx-clouds i { width: 64px; height: 16px; background: #fff; box-shadow: 16px -8px 0 #fff, 32px 0 0 #f2f6ff; left: -100px; top: calc(var(--y) * .55); opacity: .95; animation-name: cloud; --d: 14s; }
.fx-fireworks .burst { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.fx-fireworks .burst i {
  left: 0; top: 0; width: 5px; height: 5px; background: var(--c); box-shadow: 0 0 6px var(--c);
  animation: firework calc(2.2s * var(--speed, 1)) ease-out var(--delay) infinite;
}

@keyframes fall-sway { 0% { transform: translate(0, 0); } 50% { transform: translate(8px, 90px); } 100% { transform: translate(-4px, 175px); } }
@keyframes fall-spin { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 85px) rotate(180deg); } 100% { transform: translate(-6px, 175px) rotate(360deg); } }
@keyframes rain { from { transform: translate(0, 0) rotate(12deg); } to { transform: translate(-30px, 185px) rotate(12deg); } }
@keyframes rise-fade { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(10px, -110px); opacity: 0; } }
@keyframes rise-wave { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(6px, -60px); } 100% { transform: translate(-4px, -130px); opacity: 0; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(14px, -16px); opacity: 1; } }
@keyframes sparkle { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: translateY(-10px) scale(1.2); opacity: 1; } }
@keyframes wander { 0%, 100% { transform: translate(0, 0); opacity: .3; } 30% { transform: translate(12px, -8px); opacity: 1; } 70% { transform: translate(-10px, 6px); opacity: .7; } }
@keyframes sand { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(380px, 12px); opacity: 0; } }
@keyframes cloud { from { transform: translateX(0); } to { transform: translateX(520px); } }
@keyframes firework { 0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(30px) scale(1); opacity: 0; } }

/* overlays: heat shimmer, lava glow, waves, ice glint, lightning, whirlpool */
.overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.overlay-shimmer { background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, .12) 10px 12px); top: 35%; bottom: 40%; animation: shimmer calc(1.2s * var(--speed, 1)) ease-in-out infinite alternate; }
.overlay-lava { top: auto; height: 26%; background: linear-gradient(transparent, rgba(255, 140, 43, .45)); animation: lava-glow calc(2s * var(--speed, 1)) ease-in-out infinite alternate; }
.overlay-waves { top: 34%; height: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 10px, transparent 10px 26px); animation: waves calc(4s * var(--speed, 1)) linear infinite; }
.overlay-glint { background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) no-repeat; background-size: 30% 100%; top: 75%; height: 14%; animation: glint calc(4s * var(--speed, 1)) ease-in-out infinite; }
.overlay-lightning { background: #fff; opacity: 0; animation: lightning calc(4s * var(--speed, 1)) steps(1) infinite; }
.overlay-swirl {
  left: 50%; top: 66%; width: 90px; height: 32px; transform: translate(-50%, -50%);
  border: 4px dashed rgba(255, 255, 255, .6); border-radius: 50%; animation: swirl calc(2s * var(--speed, 1)) linear infinite;
}
@keyframes shimmer { from { transform: translateX(-3px) skewX(-2deg); } to { transform: translateX(3px) skewX(2deg); } }
@keyframes lava-glow { to { opacity: .4; } }
@keyframes waves { to { background-position: 26px 0; } }
@keyframes glint { 0%, 60% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes lightning { 0%, 88%, 92%, 100% { opacity: 0; } 89%, 91% { opacity: .85; } }
@keyframes swirl { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* the mob or event standing in its scene */
.hero { position: absolute; left: 50%; bottom: 50px; z-index: 2; transform: translateX(-50%); font-size: 46px; line-height: 1; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .45)); }
.hero .px-icon { width: 56px; height: 56px; display: block; }
.hero-bob { animation: hero-bob calc(2.2s * var(--speed, 1)) ease-in-out infinite; }
.hero-flip > * { animation: hero-flip calc(2.6s * var(--speed, 1)) var(--spring, cubic-bezier(.2, 1.4, .4, 1)) infinite; }
.hero-grow > * { animation: hero-grow calc(1.8s * var(--speed, 1)) ease-in-out infinite; }
.hero-shrink > * { animation: hero-shrink calc(1.8s * var(--speed, 1)) ease-in-out infinite; }
.hero-spin > * { animation: hero-spin calc(1.6s * var(--speed, 1)) linear infinite; }
.hero-float { animation: hero-float calc(3s * var(--speed, 1)) ease-in-out infinite; }
.hero-glow > * { animation: hero-glow calc(1.4s * var(--speed, 1)) ease-in-out infinite alternate; }
.hero-flash > * { animation: hero-flash calc(4s * var(--speed, 1)) steps(1) infinite; }
@keyframes hero-bob { 50% { transform: translate(-50%, -5px); } }
@keyframes hero-flip { 0%, 30% { transform: rotate(0); } 50%, 80% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes hero-grow { 50% { transform: scale(1.45); } }
@keyframes hero-shrink { 50% { transform: scale(.55); } }
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-float { 0%, 100% { transform: translate(-50%, 6px); } 50% { transform: translate(-50%, -14px); } }
@keyframes hero-glow { to { filter: drop-shadow(0 0 10px #fff3a8) drop-shadow(0 0 18px #ffd046); } }
@keyframes hero-flash { 0%, 88%, 92% { filter: none; } 89%, 91% { filter: brightness(2.2) drop-shadow(0 0 12px #fff); } }
@keyframes twinkle { 50% { opacity: .1; } }