@property --sky-top {
  syntax: '<color>';
  inherits: true;
  initial-value: #080414;
}

@property --sky-middle {
  syntax: '<color>';
  inherits: true;
  initial-value: #121234;
}

@property --sky-horizon {
  syntax: '<color>';
  inherits: true;
  initial-value: #29152f;
}

:root {
  color-scheme: dark;
  --void: #020204;
  --blue: #33a7ff;
  --blue-deep: #165cff;
  --pink: #ff2dad;
  --red: #ff3b39;
  --gold: #ffc35a;
  --violet: #8d4dff;
  --mint: #62ffd7;
  --pointer-x: 50%;
  --pointer-y: 48%;
  --art-shift-x: 0px;
  --art-shift-y: 0px;
  --sky-top: #080414;
  --sky-middle: #121234;
  --sky-horizon: #29152f;
  --star-opacity: .84;
  --cloud-opacity: .06;
  --sun-opacity: 0;
  --moon-opacity: .86;
  --sun-x: 50%;
  --sun-y: 22%;
  --moon-x: 60%;
  --moon-y: 20%;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--void);
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  height: 100%;
}

body {
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  color: #fff8e9;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}

button,
a,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.experience {
  position: relative;
  z-index: 3;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.fortress-shell {
  position: relative;
  z-index: 5;
  display: grid;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  perspective: 1300px;
  touch-action: none;
}

.hotspot,
.gothic-audio-control { touch-action: manipulation; }

.desktop-world {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 3, 8, .12) 0 18%, rgba(2, 2, 5, .5) 45%, rgba(0, 0, 0, .76) 100%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-middle) 54%, var(--sky-horizon) 100%);
  transition: none;
}

.sky-cycle {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-cycle::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 23%, rgba(0,0,0,.12) 54%, rgba(0,0,0,.52) 100%),
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 28% 72%, rgba(0,0,0,.12));
}

.celestial {
  position: absolute;
  display: block;
  z-index: 1;
  width: clamp(118px, 13vw, 220px);
  aspect-ratio: 1;
  object-fit: contain;
  user-select: none;
  transform: translate(-50%, -50%);
  transition: none;
}

.sun {
  left: var(--sun-x);
  top: var(--sun-y);
  opacity: var(--sun-opacity);
  filter: drop-shadow(0 0 16px rgba(255, 209, 112, .68)) drop-shadow(0 0 52px rgba(255, 105, 33, .32));
}

.moon {
  left: var(--moon-x);
  top: var(--moon-y);
  opacity: var(--moon-opacity);
  filter: drop-shadow(0 0 16px rgba(176, 212, 255, .58)) drop-shadow(0 0 50px rgba(83, 62, 255, .28));
}

.night-stars {
  position: absolute;
  inset: -8%;
  opacity: var(--star-opacity);
  transition: none;
  background-repeat: repeat;
  mix-blend-mode: screen;
}

.night-stars-far {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(138,183,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,172,228,.7) 0 1px, transparent 1.5px);
  background-position: 7px 13px, 48px 76px, 103px 37px;
  background-size: 122px 128px, 173px 167px, 211px 194px;
  animation: star-drift 90s linear infinite;
}

.night-stars-near {
  opacity: calc(var(--star-opacity) * .62);
  background-image:
    radial-gradient(circle, rgba(255,244,194,.96) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px);
  background-position: 24px 44px, 132px 93px;
  background-size: 257px 231px, 319px 287px;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.65));
  animation: star-breathe 5s ease-in-out infinite alternate;
}

.cloud {
  position: absolute;
  left: -32vw;
  z-index: 1;
  display: block;
  width: clamp(440px, 52vw, 920px);
  height: auto;
  opacity: var(--cloud-opacity);
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(24, 30, 62, .28));
  user-select: none;
  transition: none;
  animation: cloud-cross 95s linear infinite;
}

.cloud-a { top: 15%; animation-delay: -18s; }
.cloud-b { top: 38%; width: clamp(390px, 43vw, 760px); transform: scale(.78); animation-delay: -64s; animation-duration: 126s; }
.cloud-c { top: 66%; width: clamp(520px, 60vw, 1040px); transform: scale(.92); animation-delay: -42s; animation-duration: 154s; }

.horizon-mist {
  position: absolute;
  right: -15%;
  bottom: -13%;
  left: -15%;
  height: 42%;
  opacity: calc(.13 + var(--cloud-opacity) * .55);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,228,196,.5), transparent 68%);
  filter: blur(44px);
  mix-blend-mode: screen;
  transition: none;
}

body:not(.sky-ready) .desktop-world,
body:not(.sky-ready) .celestial,
body:not(.sky-ready) .night-stars,
body:not(.sky-ready) .cloud,
body:not(.sky-ready) .horizon-mist {
  transition: none;
}

.world-haze {
  position: absolute;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .12;
  mix-blend-mode: screen;
  animation: world-haze 12s ease-in-out infinite alternate;
  z-index: 1;
}

.world-haze-blue { left: -8vw; bottom: -9vw; background: #1767ff; }
.world-haze-red { right: -8vw; top: -10vw; background: #ff175f; animation-delay: -6s; }

.void-particles {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.magic-sparks {
  position: fixed;
  z-index: 130;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.magic-spark {
  position: absolute;
  left: var(--spark-left);
  top: var(--spark-top);
  width: var(--spark-size);
  aspect-ratio: 1;
  border-radius: 36% 8% 36% 8%;
  opacity: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.82) 0 8%, rgba(200,255,157,.72) 18%, rgba(88,239,118,.58) 43%, rgba(14,138,73,.24) 70%, transparent 78%);
  box-shadow: 0 0 4px rgba(185,255,147,.48), 0 0 9px rgba(39,221,108,.3);
  transform: translate(-50%, -50%) scale(.2) rotate(0deg);
  animation: magic-spark-flight var(--spark-duration) cubic-bezier(.16,.72,.22,1) var(--spark-delay) forwards;
  will-change: transform, opacity;
}

.magic-spark::before,
.magic-spark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,255,180,.48), transparent);
  transform: translate(-50%, -50%);
}

.magic-spark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.artboard {
  --art-scale: 1;
  position: relative;
  z-index: 5;
  width: min(100vw, calc(100svh * .562799));
  width: min(100vw, calc(100dvh * .562799));
  max-width: 941px;
  aspect-ratio: 941 / 1672;
  transform: translate3d(var(--art-shift-x), var(--art-shift-y), 0) scale(var(--art-scale));
  transform-style: preserve-3d;
  transform-origin: 50% 52%;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 350ms ease;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.85));
  isolation: isolate;
}

.art-backlight {
  position: absolute;
  z-index: 0;
  inset: 4% -13% 2%;
  border-radius: 45%;
  opacity: .6;
  background:
    radial-gradient(circle at 18% 36%, rgba(33, 133, 255, .34), transparent 20%),
    radial-gradient(circle at 82% 37%, rgba(255, 39, 155, .32), transparent 22%),
    radial-gradient(circle at 50% 56%, rgba(255, 105, 40, .22), transparent 31%);
  filter: blur(34px);
  animation: backlight-breathe 7s ease-in-out infinite;
}

.fortress-art {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  filter: brightness(1.02) saturate(1.06) contrast(1.025);
  transition: filter 420ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
}

.effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.effects-behind { z-index: 2; }
.effects-front { z-index: 6; }

.crown-aura {
  position: absolute;
  left: 28%;
  top: 1%;
  width: 44%;
  height: 25%;
  opacity: .22;
  background: radial-gradient(ellipse, rgba(255, 195, 74, .7), rgba(255, 47, 29, .15) 42%, transparent 71%);
  filter: blur(18px);
  animation: crown-breathe 4.6s ease-in-out infinite;
}

.fog {
  position: absolute;
  left: -22%;
  width: 144%;
  height: 12%;
  border-radius: 50%;
  opacity: .08;
  background: radial-gradient(ellipse, rgba(255,255,255,.7), rgba(116,137,255,.18) 42%, transparent 72%);
  filter: blur(20px);
  animation: fog-drift 14s ease-in-out infinite alternate;
}

.fog-a { top: 66%; }
.fog-b { top: 73%; transform: translateX(-9%) scale(.8); animation-delay: -5s; animation-duration: 18s; }
.fog-c { top: 59%; transform: translateX(12%) scale(.65); animation-delay: -9s; animation-duration: 21s; }

.spectral-veil {
  position: absolute;
  top: 11%;
  width: 35%;
  height: 72%;
  border-radius: 48% 52% 44% 56%;
  opacity: .055;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(150, 98, 210, .46), rgba(67, 82, 145, .18) 42%, transparent 71%),
    linear-gradient(180deg, transparent 4%, rgba(207, 215, 255, .24) 38%, transparent 88%);
  filter: blur(12px);
  mix-blend-mode: normal;
  animation: spectralVeil 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.spectral-veil-a { left: 3%; transform: rotate(-7deg); }
.spectral-veil-b { right: 2%; transform: rotate(9deg); animation-delay: -9s; animation-duration: 23s; }

.dread-orbit {
  position: absolute;
  left: 38.5%;
  top: 8.5%;
  width: 23%;
  aspect-ratio: 1;
  border: 1px solid rgba(219, 147, 75, .11);
  border-radius: 50%;
  opacity: .24;
  box-shadow: inset 0 0 20px rgba(92, 42, 115, .13), 0 0 19px rgba(192, 55, 62, .08);
  transform: rotateX(68deg);
  animation: dreadOrbit 15s linear infinite;
}

.portal-lens {
  position: absolute;
  border-radius: 50%;
  opacity: .15;
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: portal-breathe 3.4s ease-in-out infinite;
  transform: translateZ(22px);
}

.lens-facebook {
  --lens-glow: rgba(51, 167, 255, .78);
  left: 9.8%;
  top: 28.7%;
  width: 17.4%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 7%, var(--blue) 24%, #1d4fff 47%, transparent 70%);
  box-shadow: 0 0 36px var(--blue), 0 0 64px rgba(31, 88, 255, .7);
}

.lens-instagram {
  --lens-glow: rgba(255, 45, 173, .72);
  right: 9.1%;
  top: 28.9%;
  width: 17.6%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 7%, #ffca4b 18%, var(--pink) 38%, #6f39ff 57%, transparent 72%);
  box-shadow: 0 0 36px var(--pink), 0 0 64px rgba(138, 42, 255, .62);
  animation-delay: -1.3s;
}

.lens-prisma {
  --lens-glow: rgba(98, 255, 215, .62);
  left: 11.5%;
  top: 50.6%;
  width: 28.5%;
  aspect-ratio: 1.15;
  background: radial-gradient(ellipse, rgba(255,255,255,.8), rgba(76,255,215,.45) 18%, rgba(118,130,255,.24) 43%, transparent 72%);
  box-shadow: 0 0 42px rgba(98,255,215,.62), 0 0 70px rgba(111,90,255,.34);
  animation-delay: -2.1s;
}

.lens-music {
  --lens-glow: rgba(139, 76, 255, .66);
  right: 11.3%;
  top: 50.6%;
  width: 27.6%;
  aspect-ratio: 1.05;
  background: conic-gradient(from 0deg, transparent, rgba(36,188,255,.72), rgba(161,45,255,.66), rgba(255,47,156,.7), rgba(255,143,36,.72), transparent);
  box-shadow: 0 0 46px rgba(115,69,255,.68), 0 0 76px rgba(255,39,157,.38);
  animation: music-vortex 8s linear infinite;
}

.arc {
  position: absolute;
  width: 2px;
  height: 18%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, currentColor 18% 28%, transparent 31% 40%, currentColor 43% 66%, transparent 70%);
  color: #fff;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
  transform-origin: 50% 0;
  animation: lightning 5.8s steps(1, end) infinite;
}

.arc::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(5px) skewX(-12deg);
  background: inherit;
}

.arc-blue { left: 29%; top: 24%; color: #64baff; transform: rotate(18deg); animation-delay: -1.7s; }
.arc-pink { right: 28%; top: 24%; color: #ff59bd; transform: rotate(-18deg); animation-delay: -3.9s; }
.arc-gold { left: 50%; top: 73%; height: 21%; color: #ffd277; transform: rotate(2deg); animation-delay: -4.7s; }

.ember {
  position: absolute;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd076;
  box-shadow: 0 0 7px 2px rgba(255, 109, 38, .7);
  opacity: 0;
  animation: ember-rise 4.4s linear infinite;
}

.ember-1 { left: 35%; top: 22%; animation-delay: -.3s; }
.ember-2 { left: 62%; top: 24%; animation-delay: -2.1s; }
.ember-3 { left: 44%; top: 58%; animation-delay: -3.4s; }
.ember-4 { left: 68%; top: 64%; animation-delay: -1.4s; }
.ember-5 { left: 25%; top: 67%; animation-delay: -2.8s; }
.ember-6 { left: 52%; top: 81%; animation-delay: -.9s; }
.ember-7 { left: 72%; top: 43%; animation-delay: -3.9s; }
.ember-8 { left: 19%; top: 44%; animation-delay: -1.9s; }

.void-rune {
  position: absolute;
  border: 1px solid rgba(255, 170, 72, .19);
  border-radius: 50%;
  opacity: .13;
  mix-blend-mode: screen;
  box-shadow: inset 0 0 7px rgba(255, 74, 69, .15), 0 0 9px rgba(154, 58, 198, .13);
  animation: voidRunePulse 7.8s ease-in-out infinite;
}

.void-rune::before,
.void-rune::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px dashed rgba(255, 195, 98, .22);
  border-radius: 38%;
  transform: rotate(45deg);
}

.void-rune::after {
  inset: 32%;
  border-style: solid;
  border-color: rgba(255, 67, 96, .22);
  transform: rotate(0deg);
}

.void-rune-throne { left: 45.7%; top: 8.5%; width: 8.8%; aspect-ratio: 1; }
.void-rune-crystal { left: 46.1%; top: 80.8%; width: 7.8%; aspect-ratio: 1; animation-delay: -3.9s; }

.haunt-flash {
  position: absolute;
  width: 34%;
  height: 48%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: hauntFlash 13s steps(1, end) infinite;
}

.haunt-flash-red {
  left: 9%;
  top: 20%;
  background: radial-gradient(ellipse, rgba(255, 42, 55, .22), transparent 68%);
  animation-delay: -4.5s;
}

.haunt-flash-violet {
  right: 8%;
  top: 32%;
  background: radial-gradient(ellipse, rgba(111, 55, 255, .23), transparent 70%);
  animation-delay: -9.2s;
  animation-duration: 17s;
}

.hotspots {
  position: absolute;
  z-index: 12;
  inset: 0;
  transform: translateZ(44px);
}

.hotspot {
  --hot: #fff;
  --hot-rgb: 255, 255, 255;
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 48%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  outline: 0 !important;
  box-shadow: none !important;
}

.hotspot::before,
.hotspot::after {
  content: none !important;
  display: none !important;
}

.hotspot:focus {
  outline: none;
}

.hotspot:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.hotspot-facebook {
  --hot: var(--blue);
  --hot-rgb: 51, 167, 255;
  left: 7.5%;
  top: 27.3%;
  width: 23.5%;
  height: 15.8%;
}

.hotspot-instagram {
  --hot: var(--pink);
  --hot-rgb: 255, 45, 173;
  left: 69.1%;
  top: 27.5%;
  width: 23.2%;
  height: 15.8%;
}

.hotspot-prisma {
  --hot: var(--mint);
  --hot-rgb: 98, 255, 215;
  left: 8.4%;
  top: 48.8%;
  width: 34.5%;
  height: 16.4%;
}

.floating-audio-controls {
  position: fixed;
  z-index: 95;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: clamp(98px, 23vw, 116px);
  aspect-ratio: 1412 / 1114;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}

.gothic-audio-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.82));
  transition: filter 180ms ease, transform 180ms ease;
  user-select: none;
}

.audio-art-muted {
  filter: grayscale(1) saturate(0) brightness(.43) contrast(.92) drop-shadow(0 5px 8px rgba(0,0,0,.82));
  transition: filter 180ms ease, transform 180ms ease;
}

.audio-art-muted-play {
  clip-path: inset(0 51% 0 0);
  opacity: 1;
}

.audio-art-muted-pause {
  clip-path: inset(0 0 0 51%);
  opacity: 0;
}

body[data-audio="playing"] .audio-art-muted-play {
  opacity: 0;
}

body[data-audio="playing"] .audio-art-muted-pause {
  opacity: 1;
}

.gothic-audio-control {
  position: absolute;
  z-index: 2;
  top: 10%;
  bottom: 7%;
  width: 47%;
  padding: 0;
  border: 0;
  border-radius: 44%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.gothic-audio-play { left: 0; }
.gothic-audio-pause { right: 0; }

.gothic-audio-control:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.floating-audio-controls:has(.gothic-audio-control:is(:hover, :focus-visible)) .audio-art-color {
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.82)) brightness(1.1) saturate(1.08);
}

.floating-audio-controls:has(.gothic-audio-control:is(:hover, :focus-visible)) .audio-art-muted {
  filter: grayscale(1) saturate(0) brightness(.5) contrast(.94) drop-shadow(0 5px 8px rgba(0,0,0,.82));
}

.floating-audio-controls:has(.gothic-audio-control:active) .gothic-audio-art {
  transform: scale(.97);
}

body[data-energy="facebook"] .lens-facebook,
body[data-energy="instagram"] .lens-instagram,
body[data-energy="prisma"] .lens-prisma {
  opacity: .42;
  filter: blur(4px) brightness(1.22);
}

body[data-audio="playing"] .lens-music {
  opacity: .48;
  animation-duration: 2.6s;
  filter: blur(4px) brightness(1.2);
}

body[data-audio="playing"] .fortress-art {
  filter: brightness(1.035) saturate(1.08) contrast(1.025);
}

body[data-audio="playing"] .void-rune-crystal {
  opacity: .30;
  animation-duration: 4.4s;
}

body[data-period="night"] .spectral-veil { opacity: .09; }
body[data-period="night"] .dread-orbit { opacity: .34; }
body[data-period="day"] .spectral-veil { opacity: .025; }
body[data-period="day"] .void-rune { opacity: .075; }

body.page-inactive *,
body.page-inactive *::before,
body.page-inactive *::after {
  animation-play-state: paused !important;
}

body[data-performance="lite"] .world-haze,
body[data-performance="lite"] .art-backlight,
body[data-performance="lite"] .crown-aura,
body[data-performance="lite"] .fog,
body[data-performance="lite"] .portal-lens,
body[data-performance="lite"] .night-stars-near,
body[data-performance="lite"] .spectral-veil,
body[data-performance="lite"] .void-rune {
  animation: none;
}

body[data-performance="lite"] .world-haze {
  opacity: .07;
  filter: blur(38px);
}

body[data-performance="lite"] .art-backlight {
  opacity: .46;
  filter: blur(19px);
}

body[data-performance="lite"] .crown-aura {
  filter: blur(12px);
}

body[data-performance="lite"] .fog {
  filter: blur(11px);
}

body[data-performance="lite"] .fog-b,
body[data-performance="lite"] .cloud-b,
body[data-performance="lite"] .ember-2,
body[data-performance="lite"] .ember-4,
body[data-performance="lite"] .ember-6,
body[data-performance="lite"] .ember-8,
body[data-performance="lite"] .spectral-veil-b,
body[data-performance="lite"] .haunt-flash-violet,
body[data-performance="lite"] .void-rune-throne {
  display: none;
}

body[data-performance="lite"] .portal-lens {
  opacity: .13;
  filter: blur(4px);
  box-shadow: 0 0 24px var(--lens-glow, rgba(255,255,255,.35));
}

body[data-performance="lite"] .arc {
  filter: drop-shadow(0 0 3px currentColor);
  animation-duration: 8.5s;
}

body[data-performance] .night-stars-far,
body[data-performance] .night-stars-near,
body[data-performance] .cloud,
body[data-performance] .world-haze,
body[data-performance] .art-backlight,
body[data-performance] .crown-aura,
body[data-performance] .fog,
body[data-performance] .spectral-veil,
body[data-performance] .dread-orbit,
body[data-performance] .portal-lens,
body[data-performance] .music-vortex,
body[data-performance] .arc,
body[data-performance] .ember,
body[data-performance] .void-rune,
body[data-performance] .haunt-flash {
  animation: none !important;
}

body[data-period="twilight"] .crown-aura {
  opacity: .42;
}

body[data-period="night"] .crown-aura {
  opacity: .34;
}

.fallback-panel {
  position: absolute;
  z-index: 50;
  inset: 23% 9% auto;
  display: grid;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid rgba(255, 189, 80, .38);
  border-radius: 18px;
  background: rgba(6,6,12,.94);
  color: #fff;
  box-shadow: 0 18px 60px #000;
}

.fallback-panel[hidden] {
  display: none;
}

.fallback-panel p {
  margin: 0;
  color: rgba(255,255,255,.74);
  line-height: 1.45;
}

.fallback-panel a {
  min-height: 46px;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.art-error .hotspots {
  display: none;
}

.noscript-note {
  position: fixed;
  z-index: 100;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: .72rem 1rem;
  border: 1px solid rgba(255, 189, 80, .34);
  border-radius: 12px;
  background: rgba(5,5,10,.93);
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  text-align: center;
}

@keyframes backlight-breathe {
  0%, 100% { opacity: .44; transform: scale(.96); }
  50% { opacity: .7; transform: scale(1.045); }
}

@keyframes crown-breathe {
  0%, 100% { transform: scale(.9); opacity: .17; }
  50% { transform: scale(1.08); opacity: .36; }
}

@keyframes fog-drift {
  0% { translate: -8% 0; opacity: .04; }
  50% { opacity: .11; }
  100% { translate: 9% -5%; opacity: .055; }
}

@keyframes spectralVeil {
  0% { transform: translate3d(-7%, 3%, 0) rotate(-8deg) scale(.88); opacity: .025; }
  48% { opacity: .10; }
  100% { transform: translate3d(10%, -4%, 0) rotate(7deg) scale(1.08); opacity: .045; }
}

@keyframes dreadOrbit {
  to { transform: rotateX(68deg) rotateZ(360deg); }
}

@keyframes voidRunePulse {
  0%, 100% { transform: scale(.86) rotate(-4deg); opacity: .07; }
  50% { transform: scale(1.08) rotate(5deg); opacity: .25; }
}

@keyframes hauntFlash {
  0%, 2%, 4%, 100% { opacity: 0; }
  1% { opacity: .26; }
  3% { opacity: .09; }
}

@keyframes portal-breathe {
  0%, 100% { transform: scale(.86); opacity: .1; }
  50% { transform: scale(1.1); opacity: .27; }
}

@keyframes music-vortex {
  to { transform: rotate(360deg); }
}

@keyframes lightning {
  0%, 7%, 9%, 12%, 100% { opacity: 0; }
  8%, 10% { opacity: .76; }
  11% { opacity: .2; }
}

@keyframes ember-rise {
  0% { opacity: 0; transform: translate(0, 8px) scale(.5); }
  18% { opacity: .75; }
  100% { opacity: 0; transform: translate(10px, -78px) scale(.12); }
}

@keyframes music-breathe {
  0%, 100% { filter: brightness(1.02) saturate(1.06) contrast(1.025); }
  50% { filter: brightness(1.075) saturate(1.13) contrast(1.035); }
}

@keyframes star-drift {
  to { transform: translate3d(4%, 2%, 0); }
}

@keyframes star-breathe {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(1.2%, .6%, 0); }
}

@keyframes cloud-cross {
  from { translate: -8vw 0; }
  to { translate: 148vw 0; }
}

@keyframes world-haze {
  to { transform: translate3d(7vw, -4vh, 0) scale(1.16); opacity: .2; }
}

@keyframes magic-spark-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18) rotate(0deg);
  }
  16% {
    opacity: .56;
    transform: translate(-50%, -50%) scale(.92) rotate(0deg);
  }
  72% {
    opacity: .34;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.68) rotate(var(--spark-turn));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.05) rotate(var(--spark-turn));
  }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-aspect-ratio: 3 / 4) {
  .desktop-world {
    background:
      radial-gradient(circle at 50% 50%, rgba(5, 3, 8, .1) 0 18%, rgba(2, 2, 5, .38) 52%, rgba(0, 0, 0, .62) 100%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-middle) 54%, var(--sky-horizon) 100%);
  }

  .world-haze {
    width: 72vw;
    height: 72vw;
    opacity: .08;
    filter: blur(48px);
  }

  .celestial {
    width: clamp(108px, 28vw, 150px);
  }

  .cloud {
    width: 104vw;
  }

  .artboard {
    filter: drop-shadow(0 22px 30px rgba(0,0,0,.82));
  }

  .art-backlight {
    inset: 3% -4% 2%;
    filter: blur(26px);
  }
}

@media (min-width: 1100px) {
  .artboard {
    max-height: 100svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .artboard {
    transform: none !important;
  }

  .portal-lens {
    opacity: .13;
  }

  .spectral-veil,
  .haunt-flash,
  .dread-orbit { display: none; }

  .void-rune { animation: none; opacity: .10; }

  body[data-audio="playing"] .lens-music {
    opacity: .34;
  }
}

/* v0.7.4 — Terror vivo, fortaleza clavada y tormenta espectral legible. */
.horror-world-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100dvh * .562799));
  max-width: 941px;
  aspect-ratio: 941 / 1672;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
  contain: layout style;
}

.horror-world-behind { z-index: 4; }
.horror-world-front { z-index: 6; }

.horror-sprite {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.horror-ghost {
  mix-blend-mode: normal;
  opacity: .24;
}

.horror-ghost-a {
  left: -7%;
  top: 39%;
  width: 31%;
  animation: ghostSiegeA 19s ease-in-out -8s infinite alternate;
}

.horror-ghost-b {
  right: -9%;
  top: 57%;
  width: 27%;
  opacity: .13;
  animation: ghostSiegeB 23s ease-in-out -15s infinite alternate;
}

.horror-bats {
  left: 57%;
  top: 9%;
  width: 27%;
  opacity: .31;
  animation: batsCrossTheVoid 26s ease-in-out -12s infinite;
}

.horror-rune {
  width: 13%;
  opacity: .28;
  mix-blend-mode: normal;
  animation: runeShardHover 12s ease-in-out infinite alternate;
}

.horror-rune-a {
  left: 1%;
  top: 25%;
  transform: rotate(-19deg);
  animation-delay: -4s;
}

.horror-rune-b {
  right: 1%;
  top: 42%;
  width: 11%;
  opacity: .13;
  transform: rotate(21deg) scale(.82);
  animation-delay: -9s;
  animation-duration: 16s;
}

.soul-flame {
  width: 8%;
  opacity: .46;
  mix-blend-mode: normal;
  animation: soulFlameDance 5.6s ease-in-out infinite alternate;
}

.soul-flame-a { left: 25%; top: 75%; animation-delay: -1.8s; }
.soul-flame-b { left: 67%; top: 75.5%; animation-delay: -4.1s; animation-duration: 6.4s; }

.horror-ember-trail {
  width: 20%;
  opacity: .23;
  mix-blend-mode: normal;
  animation: emberTrailHaunt 15s ease-in-out infinite alternate;
}

.horror-ember-trail-a { left: -3%; top: 52%; animation-delay: -7s; }
.horror-ember-trail-b {
  right: -2%;
  top: 56%;
  width: 17%;
  opacity: .12;
  transform: scaleX(-1) rotate(-8deg);
  animation-name: emberTrailHauntMirror;
  animation-delay: -12s;
  animation-duration: 19s;
}

.storm-bloom {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.storm-bloom-blue {
  left: 2%;
  top: 10%;
  background: radial-gradient(circle, rgba(82, 136, 255, .36), rgba(54, 38, 188, .12) 42%, transparent 70%);
  animation: stormPulse 17s ease-out -5s infinite;
}

.storm-bloom-red {
  right: 0;
  top: 30%;
  width: 35%;
  background: radial-gradient(circle, rgba(255, 46, 108, .28), rgba(154, 20, 80, .1) 44%, transparent 72%);
  animation: stormPulse 23s ease-out -16s infinite;
}

.storm-lightning {
  --storm-floor: .07;
  --storm-mid: .12;
  --storm-peak: .48;
  position: absolute;
  left: -12%;
  top: -8%;
  width: 62%;
  height: auto;
  opacity: var(--storm-floor);
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  transform: rotate(-5deg);
  transform-origin: 50% 50%;
  will-change: auto;
}

body[data-lightning="peak"] .storm-lightning { opacity: var(--storm-peak); }
body[data-lightning="echo"] .storm-lightning { opacity: calc(var(--storm-peak) * .72); }

body[data-period="day"] .storm-lightning {
  --storm-floor: .035;
  --storm-mid: .065;
  --storm-peak: .2;
}

body[data-period="day"] .horror-ghost,
body[data-period="day"] .horror-rune,
body[data-period="day"] .horror-ember-trail { opacity: .055; }

body[data-period="day"] .horror-bats { opacity: .13; }
body[data-period="twilight"] .horror-sprite { opacity: .2; }

body[data-audio="playing"] .soul-flame {
  opacity: .55;
  animation-duration: 3.9s;
}

body[data-audio="playing"] .horror-ember-trail { opacity: .28; }

body[data-energy="facebook"] .horror-ghost-a,
body[data-energy="instagram"] .horror-ghost-b,
body[data-energy="prisma"] .horror-rune-a {
  opacity: .46;
  transform: scale(1.06);
}

body[data-performance] .portal-lens {
  animation: none !important;
  will-change: auto;
}

body[data-performance][data-energy="facebook"] .lens-facebook,
body[data-performance][data-energy="instagram"] .lens-instagram,
body[data-performance][data-energy="prisma"] .lens-prisma {
  opacity: .44 !important;
  filter: blur(4px) brightness(1.24);
}

body[data-performance][data-audio="playing"] .lens-music {
  opacity: .48 !important;
  filter: blur(4px) brightness(1.2);
}

body[data-performance] .horror-sprite {
  animation: none !important;
  will-change: auto;
}

body[data-performance] .storm-bloom-blue {
  animation: stormPulse 17s ease-out -5s infinite !important;
}

body[data-performance] .storm-bloom-red {
  animation: none !important;
}

body[data-performance] .lens-instagram { animation-delay: -1.7s !important; }
body[data-performance] .lens-prisma { animation-delay: -3.4s !important; }
body[data-performance] .lens-music { animation-delay: -5.1s !important; }

@keyframes ghostSiegeA {
  from { transform: translate3d(-7px, 9px, 0) rotate(-4deg) scale(.9); opacity: .07; }
  48% { opacity: .22; }
  to { transform: translate3d(11px, -13px, 0) rotate(4deg) scale(1.03); opacity: .13; }
}

@keyframes ghostSiegeB {
  from { transform: translate3d(6px, 11px, 0) scaleX(-1) rotate(4deg) scale(.86); opacity: .05; }
  52% { opacity: .17; }
  to { transform: translate3d(-10px, -10px, 0) scaleX(-1) rotate(-3deg) scale(1); opacity: .09; }
}

@keyframes batsCrossTheVoid {
  0%, 100% { transform: translate3d(-12px, 8px, 0) scale(.88) rotate(-3deg); opacity: .08; }
  38% { opacity: .28; }
  70% { transform: translate3d(24px, -13px, 0) scale(1.04) rotate(4deg); opacity: .18; }
}

@keyframes runeShardHover {
  from { transform: translate3d(-2px, 5px, 0) rotate(-20deg) scale(.9); opacity: .08; }
  48% { opacity: .25; }
  to { transform: translate3d(4px, -7px, 0) rotate(-14deg) scale(1.02); opacity: .13; }
}

@keyframes soulFlameDance {
  from { transform: translate3d(-1px, 3px, 0) scale(.88) rotate(-2deg); opacity: .2; }
  46% { opacity: .46; }
  to { transform: translate3d(2px, -4px, 0) scale(1.06) rotate(3deg); opacity: .29; }
}

@keyframes emberTrailHaunt {
  from { transform: translate3d(-4px, 5px, 0) rotate(-8deg) scale(.9); opacity: .07; }
  55% { opacity: .23; }
  to { transform: translate3d(7px, -7px, 0) rotate(2deg) scale(1.02); opacity: .12; }
}

@keyframes emberTrailHauntMirror {
  from { transform: translate3d(5px, 4px, 0) scaleX(-1) rotate(-8deg) scale(.88); opacity: .05; }
  50% { opacity: .18; }
  to { transform: translate3d(-7px, -8px, 0) scaleX(-1) rotate(-2deg) scale(1); opacity: .1; }
}

@keyframes stormPulse {
  0%, 64%, 100% { opacity: 0; transform: scale(.82); }
  66% { opacity: .42; transform: scale(1.03); }
  68% { opacity: .06; }
  70% { opacity: .22; transform: scale(1.08); }
  74% { opacity: 0; }
}

@keyframes hauntedPortalIdle {
  from { transform: translate(-50%, -50%) scale(.91); opacity: .11; }
  to { transform: translate(-50%, -50%) scale(1.05); opacity: .25; }
}

@media (max-width: 700px) {
  .horror-ghost-b,
  .horror-rune-b,
  .horror-ember-trail-b,
  .storm-bloom-red { display: none; }

  .horror-ghost-a { left: -1%; top: 43%; width: 31%; opacity: .25; }
  .horror-bats { left: 59%; top: -4%; width: 30%; opacity: .34; }
  .horror-rune-a { left: 5%; top: 28%; width: 15%; opacity: .34; }
  .horror-ember-trail-a { left: 3%; top: 55%; width: 20%; opacity: .26; }
  .soul-flame { width: 9%; opacity: .48; }
  .soul-flame-a { left: 20%; top: 74%; }
  .soul-flame-b { left: 72%; top: 74%; }
  .storm-bloom-blue { width: 36%; }
  .storm-lightning { left: -16%; top: -7%; width: 69%; }

  body[data-performance] .portal-lens {
    animation-duration: 8.4s !important;
  }
}

/* Partículas diminutas en una capa propia: se mueven sin repintar la fortaleza. */
.ambient-haunt {
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.world-haunt-image {
  position: absolute;
  display: block;
  height: auto;
  opacity: .13;
  pointer-events: none;
  user-select: none;
}

.world-haunt-bats {
  top: 1.5%;
  right: 4%;
  width: clamp(96px, 19vw, 260px);
}

.world-haunt-ghost {
  left: 3%;
  bottom: 1%;
  width: clamp(110px, 21vw, 280px);
  opacity: .1;
}

body[data-period="day"] .world-haunt-image { opacity: .045; }

.haunt-mote {
  position: absolute;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50% 15% 50% 15%;
  opacity: 0;
  background: rgba(126, 102, 255, .8);
  box-shadow: 0 0 4px rgba(103, 124, 255, .7);
  transform: rotate(45deg) scale(.55);
  animation: hauntMoteFlicker var(--mote-duration, 11s) steps(1, end) var(--mote-delay, 0s) infinite;
  will-change: auto;
}

.haunt-mote-1 { left: 8%; top: 72%; --mote-duration: 10s; --mote-delay: -2s; }
.haunt-mote-2 { left: 18%; top: 38%; --mote-duration: 13s; --mote-delay: -8s; background: rgba(65, 177, 255, .82); }
.haunt-mote-3 { left: 31%; top: 82%; --mote-duration: 9s; --mote-delay: -5s; background: rgba(255, 91, 69, .8); box-shadow: 0 0 4px rgba(255, 66, 48, .62); }
.haunt-mote-4 { right: 8%; top: 67%; --mote-duration: 12s; --mote-delay: -4s; background: rgba(255, 59, 147, .78); box-shadow: 0 0 4px rgba(255, 39, 146, .6); }
.haunt-mote-5 { right: 19%; top: 28%; --mote-duration: 14s; --mote-delay: -10s; }
.haunt-mote-6 { right: 32%; top: 78%; --mote-duration: 11s; --mote-delay: -7s; background: rgba(255, 166, 66, .78); box-shadow: 0 0 4px rgba(255, 104, 48, .58); }
.haunt-mote-7 { left: 42%; top: 18%; --mote-duration: 15s; --mote-delay: -12s; width: 3px; }
.haunt-mote-8 { right: 42%; top: 58%; --mote-duration: 12.5s; --mote-delay: -3s; width: 3px; background: rgba(255, 87, 112, .76); }

body[data-period="day"] .ambient-haunt { opacity: .34; }
.haunt-mote-3,
.haunt-mote-5,
.haunt-mote-6,
.haunt-mote-7,
.haunt-mote-8 { display: none; }

@keyframes hauntMoteFlicker {
  0%, 11%, 81%, 100% { transform: translate3d(-2px, 8px, 0) rotate(32deg) scale(.45); opacity: 0; }
  12% { transform: translate3d(0, 2px, 0) rotate(45deg) scale(.65); opacity: .28; }
  36% { transform: translate3d(4px, -10px, 0) rotate(68deg) scale(1); opacity: .68; }
  60% { transform: translate3d(8px, -24px, 0) rotate(88deg) scale(.72); opacity: .18; }
  80% { transform: translate3d(10px, -31px, 0) rotate(102deg) scale(.5); opacity: .08; }
}

@media (max-width: 700px) {
  .ambient-haunt { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .haunt-mote {
    animation: none !important;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horror-ghost,
  .horror-bats,
  .horror-ember-trail,
  .storm-bloom { display: none; }

  .storm-lightning {
    opacity: .13;
    will-change: auto;
  }

  .horror-rune,
  .soul-flame,
  body[data-performance] .portal-lens {
    animation: none !important;
    will-change: auto;
  }
}