.hh-ls {
     position: fixed;
     inset: 0;
     z-index: 99999;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.55s ease;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
 .hh-ls__stage {
     position: relative;
     width: 100%;
     max-width: min(960px, 92vw);
    /* fits HumHub's container */
     max-height: calc(100vh - var(--hh-fixed-header-height, 64px) - 32px);
     margin-top: var(--hh-fixed-header-height, 64px);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 0;
     overflow: hidden;
}
 .hh-ls--dungeon {
     --ls-rune: #8b7fd4;
     --ls-torch: #e8842a;
     --ls-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Atmospheric background layers */
 .hh-ls--dungeon::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 90% 60% at 50% 100%, rgba(139,127,212,.1) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 14% 50%, rgba(232,132,42,.06) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 86% 50%, rgba(232,132,42,.06) 0%, transparent 60%);
     pointer-events: none;
}
/* Stone floor lines perspective */
 .hh-ls--dungeon::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 45%;
     background-image: repeating-linear-gradient(to bottom, transparent, transparent 60px, rgba(139,127,212,.04) 61px), repeating-linear-gradient(to right, transparent, transparent 78px, rgba(139,127,212,.03) 79px);
     mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent);
     pointer-events: none;
}
 .hh-ls-arch-wrap {
     position: relative;
     width: min(560px, 82vw);
     height: min(600px, 62vh);
     margin-bottom: 18px;
     flex-shrink: 0;
}
/* Stone arch background */
 .hh-ls-arch {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg, #1c1930 0%, #10101e 40%, #0c0b18 100%);
     clip-path: polygon(8% 100%, 0% 55%, 2% 28%, 8% 12%, 18% 4%, 32% 0%, 50% 0%, 68% 0%, 82% 4%, 92% 12%, 98% 28%, 100% 55%, 92% 100%);
     box-shadow: inset 0 0 80px rgba(0,0,0,.8), 0 0 0 3px #04030a, 0 0 0 7px #121028, 0 0 60px rgba(0,0,0,.9);
}
/* Arch border stones */
 .hh-ls-arch::before {
     content: '';
     position: absolute;
     inset: 0;
     clip-path: polygon( 8% 100%, 0% 55%, 2% 28%, 8% 12%, 18% 4%, 32% 0%, 50% 0%, 68% 0%, 82% 4%, 92% 12%, 98% 28%, 100% 55%, 92% 100%, 94% 100%, 98% 57%, 96% 30%, 90% 13%, 80% 5%, 66% 2%, 50% 2%, 34% 2%, 20% 5%, 10% 13%, 4% 30%, 2% 57%, 6% 100% );
     background: linear-gradient(to bottom, #3a3558 0%, #2a2740 35%, #1e1c30 60%, #2a2740 100%);
}
/* Runic text carved into arch top */
 .hh-ls-arch::after {
     content: 'ᚠᚢᚦᚨᚱᚲ · ᚷᚹᚺᚾᛁ · ᛃᛇᛈᛊᛏᛒᛖᛗᛚᛟ';
     position: absolute;
     top: 4%;
     left: 50%;
     transform: translateX(-50%);
     font-size: .52rem;
     letter-spacing: 3px;
     color: var(--ls-rune);
     opacity: .45;
     white-space: nowrap;
     font-family: serif;
     text-shadow: 0 0 8px var(--ls-rune);
}
 .hh-ls-doors {
     position: absolute;
     inset: 0;
     display: flex;
     clip-path: polygon(9% 100%, 1% 55%, 3% 28%, 9% 12%, 19% 4%, 33% 0%, 50% 0%, 67% 0%, 81% 4%, 91% 12%, 97% 28%, 99% 55%, 91% 100%);
}
 .hh-ls-door {
     flex: 1;
     position: relative;
     overflow: hidden;
     transition: transform 2.6s var(--ls-ease, cubic-bezier(0.16,1,0.3,1));
}
 .hh-ls-door--l {
     transform-origin: left center;
     border-right: 2px solid #03020a;
}
 .hh-ls-door--r {
     transform-origin: right center;
     border-left: 2px solid #03020a;
}
/* JS adds this class when progress hits 100% */
 .hh-ls-doors--open .hh-ls-door--l {
     transform: translateX(-105%) rotate(-4deg) skewY(1deg);
}
 .hh-ls-doors--open .hh-ls-door--r {
     transform: translateX(105%) rotate(4deg) skewY(-1deg);
}
/* Stone block texture */
 .hh-ls-door__stone {
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(0deg, transparent, transparent 54px, rgba(0,0,0,.18) 55px), repeating-linear-gradient(90deg, transparent, transparent 42px, rgba(0,0,0,.10) 43px), linear-gradient(170deg, #221f35 0%, #181628 40%, #141224 70%, #1c1a2c 100%);
}
 .hh-ls-door--r .hh-ls-door__stone {
     background: repeating-linear-gradient(0deg, transparent, transparent 54px, rgba(0,0,0,.18) 55px), repeating-linear-gradient(90deg, transparent, transparent 42px, rgba(0,0,0,.10) 43px), linear-gradient(10deg, #221f35 0%, #181628 40%, #141224 70%, #1c1a2c 100%);
}
 .hh-ls-door__stone::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(137deg, transparent 40%, rgba(0,0,0,.22) 41%, rgba(0,0,0,.22) 42%, transparent 43%), linear-gradient(62deg, transparent 60%, rgba(255,255,255,.025) 61%, transparent 62%), linear-gradient(175deg, transparent 25%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.14) 27%, transparent 28%);
}
/* Rune emblems on each door face */
 .hh-ls-door__emblem {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
     z-index: 2;
}
 .hh-ls-door__rune {
     font-family: serif;
     font-size: clamp(.85rem, 1.9vw, 1.3rem);
     color: var(--ls-rune);
     opacity: .6;
     text-shadow: 0 0 10px var(--ls-rune);
     animation: hh-ls-runeFlicker 2.5s ease-in-out infinite alternate;
}
 .hh-ls-door__rune--lg {
     font-size: clamp(1.5rem, 3.5vw, 2.6rem);
     opacity: .85;
     animation-delay: -.8s;
}
 .hh-ls-door__rune:nth-child(3) {
     animation-delay: -.4s;
}
 .hh-ls-door__rune:nth-child(4) {
     animation-delay: -1.2s;
}
/* Door ring handle */
 .hh-ls-door__ring {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 4;
}
 .hh-ls-door--l .hh-ls-door__ring {
     right: 10px;
}
 .hh-ls-door--r .hh-ls-door__ring {
     left: 10px;
}
 .hh-ls-door__ring-inner {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 30%, #a89060, #4a3820 60%, #1e1608);
     box-shadow: inset 0 2px 4px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.8), 0 0 16px rgba(139,127,212,.2);
     display: flex;
     align-items: center;
     justify-content: center;
}
 .hh-ls-door__ring-inner::after {
     content: '';
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: radial-gradient(circle at 40% 35%, #d4c090, #8a7050);
}
/* Runic seal on the join between doors */
 .hh-ls-seal {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 64px;
     height: 64px;
     z-index: 10;
     pointer-events: none;
}
 .hh-ls-seal svg {
     width: 100%;
     height: 100%;
     animation: hh-ls-sealSpin 12s linear infinite;
}
/* Keystone glyph */
 .hh-ls-keystone {
     position: absolute;
     top: -8px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 2rem;
     z-index: 15;
     filter: drop-shadow(0 0 22px var(--ls-rune)) drop-shadow(0 0 44px var(--ls-rune));
     animation: hh-ls-keystonePulse 2s ease-in-out infinite alternate;
}
/* Ground mist below arch */
 .hh-ls-ground-mist {
     position: absolute;
     bottom: 6%;
     left: 50%;
     transform: translateX(-50%);
     width: min(440px, 80vw);
     height: 26px;
     background: radial-gradient(ellipse, rgba(139,127,212,.28) 0%, transparent 70%);
     filter: blur(10px);
     animation: hh-ls-groundMist 3s ease-in-out infinite alternate;
     pointer-events: none;
}
/* Wall torches */
 .hh-ls-torch {
     position: absolute;
     top: 22%;
     z-index: 6;
     display: flex;
     flex-direction: column;
     align-items: center;
}
 .hh-ls-torch--l {
     left: -42px;
}
 .hh-ls-torch--r {
     right: -42px;
}
 .hh-ls-torch__cup {
     width: 20px;
     height: 14px;
     margin-bottom: -2px;
     background: linear-gradient(to bottom, #8a7030, #4a3818);
     border-radius: 4px 4px 2px 2px;
     position: relative;
}
 .hh-ls-torch__cup::before {
     content: '';
     position: absolute;
     top: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 18px;
     height: 12px;
     background: linear-gradient(to top, var(--ls-torch), #ffc553);
     border-radius: 50% 50% 30% 30%;
}
 .hh-ls-torch__shaft {
     width: 8px;
     height: 64px;
     background: linear-gradient(to bottom, #7a5818, #3c2808, #1e1408);
     border-radius: 2px;
}
 .hh-ls-torch__flame {
     position: absolute;
     top: -56px;
     left: 50%;
     transform: translateX(-50%);
     width: 26px;
     height: 48px;
}
 .hh-ls-torch__flame-i {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     height: 100%;
     background: radial-gradient(ellipse at bottom, #fff4d0 0%, #ffc553 22%, var(--ls-torch) 55%, rgba(200,80,10,.2) 82%, transparent 100%);
     border-radius: 50% 50% 20% 20%;
     animation: hh-ls-tFlick .13s ease-in-out infinite alternate;
     filter: blur(1.5px);
}
 .hh-ls-torch__flame-o {
     position: absolute;
     bottom: -4px;
     left: 50%;
     transform: translateX(-50%);
     width: 180%;
     height: 160%;
     background: radial-gradient(ellipse at bottom, rgba(255,150,30,.35) 0%, rgba(200,80,10,.1) 50%, transparent 80%);
     border-radius: 50%;
     animation: hh-ls-tFlick .2s ease-in-out infinite alternate-reverse;
     filter: blur(5px);
}
 .hh-ls-torch__glow {
     position: absolute;
     top: -86px;
     left: 50%;
     transform: translateX(-50%);
     width: 120px;
     height: 120px;
     background: radial-gradient(circle, rgba(232,132,42,.22) 0%, rgba(232,132,42,.06) 50%, transparent 75%);
     filter: blur(10px);
     animation: hh-ls-glowPulse .5s ease-in-out infinite alternate;
     pointer-events: none;
}
/* Status / progress bar area */
 .hh-ls-status {
     text-align: center;
     z-index: 20;
     padding: 0 16px;
     min-width: 240px;
}
 .hh-ls-platform {
     font-family: serif;
     font-size: .68rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--ls-torch);
     opacity: .75;
     margin-bottom: 6px;
}
 .hh-ls-title {
     font-family: serif;
     font-size: clamp(.7rem, 1.6vw, .86rem);
     letter-spacing: 5px;
     text-transform: uppercase;
     color: #b8aaff;
     text-shadow: 0 0 16px var(--ls-rune), 0 0 28px rgba(139,127,212,.3);
     margin-bottom: 12px;
     animation: hh-ls-textBreath 2s ease-in-out infinite alternate;
}
 .hh-ls-subtitle {
     font-family: serif;
     font-size: .78rem;
     font-style: italic;
     color: rgba(184,170,255,.5);
     margin-bottom: 8px;
}
 .hh-ls-bar-track {
     width: min(240px, 50vw);
     height: 3px;
     background: #201e33;
     border-radius: 2px;
     margin: 0 auto 12px;
     overflow: hidden;
}
 .hh-ls-bar-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, #5a4fa0, #b8aaff, #e8842a);
     border-radius: 2px;
     transition: width .35s ease;
     box-shadow: 0 0 10px #8b7fd4;
}
 .hh-ls-rune-row {
     display: flex;
     gap: 10px;
     justify-content: center;
     font-size: .88rem;
     color: rgba(139,127,212,.45);
}
 .hh-ls-rune-row span {
     animation: hh-ls-runeFlicker 1.8s ease-in-out infinite alternate;
}
 .hh-ls-rune-row span:nth-child(2) {
     animation-delay: -.6s;
}
 .hh-ls-rune-row span:nth-child(3) {
     animation-delay: -1.2s;
}
 .hh-ls-rune-row span:nth-child(4) {
     animation-delay: -.3s;
}
 .hh-ls-rune-row span:nth-child(5) {
     animation-delay: -.9s;
}
 .hh-ls--minimal {
     --ls-accent: #5d48e8;
}
/* The "stage" for minimal is a centred card with subtle backdrop */
 .hh-ls--minimal .hh-ls__stage {
     justify-content: center;
}
 .hh-ls-minimal__card {
     position: relative;
     width: 100%;
     max-width: 520px;
     padding: clamp(36px, 6vw, 64px) clamp(28px, 5vw, 56px);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
     text-align: center;
    /* Frosted card on top of the preset background */
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.1);
     border-radius: 6px;
     box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
     backdrop-filter: blur(12px);
}
/* Top accent line */
 .hh-ls-minimal__card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 20%;
     right: 20%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--ls-accent), transparent);
     border-radius: 2px;
}
 .hh-ls-minimal__logo {
     font-size: clamp(2.4rem, 5vw, 3.6rem);
     line-height: 1;
     filter: drop-shadow(0 0 18px var(--ls-accent));
     animation: hh-ls-emblemPulse 3s ease-in-out infinite alternate;
}
 .hh-ls-minimal__name {
     font-family: sans-serif;
     font-size: clamp(1.1rem, 3vw, 1.7rem);
     font-weight: 700;
     letter-spacing: 2px;
     color: #fff;
     text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
 .hh-ls-minimal__title {
     font-family: sans-serif;
     font-size: clamp(.78rem, 1.6vw, .92rem);
     letter-spacing: 3px;
     text-transform: uppercase;
     color: rgba(255,255,255,.5);
}
/* Spinner base */
 .hh-ls-spinner {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 56px;
}
/* Ring spinner */
 .hh-ls-spinner--ring .hh-ls-spinner__ring {
     width: 52px;
     height: 52px;
     border: 3px solid rgba(255,255,255,.1);
     border-top-color: var(--ls-accent);
     border-radius: 50%;
     animation: hh-ls-spin .9s linear infinite;
}
/* Dots spinner */
 .hh-ls-spinner--dots {
     gap: 8px;
}
 .hh-ls-spinner--dots span {
     display: block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--ls-accent);
     animation: hh-ls-dotBounce 1.2s ease-in-out infinite;
}
 .hh-ls-spinner--dots span:nth-child(2) {
     animation-delay: .2s;
}
 .hh-ls-spinner--dots span:nth-child(3) {
     animation-delay: .4s;
}
/* Pulse spinner */
 .hh-ls-spinner--pulse .hh-ls-spinner__pulse {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: var(--ls-accent);
     animation: hh-ls-pulsate 1.2s ease-out infinite;
}
 .hh-ls-minimal__subtitle {
     font-family: sans-serif;
     font-size: .85rem;
     color: rgba(255,255,255,.4);
     font-style: italic;
}
/* Progress bar for minimal */
 .hh-ls-minimal__bar-track {
     width: 100%;
     height: 2px;
     background: rgba(255,255,255,.08);
     border-radius: 2px;
     overflow: hidden;
     margin-top: 4px;
}
 .hh-ls-minimal__bar-fill {
     height: 100%;
     width: 0%;
     background: var(--ls-accent);
     border-radius: 2px;
     transition: width .35s ease;
     box-shadow: 0 0 8px var(--ls-accent);
}
 .hh-ls--corporate {
     --ls-accent: #e94560;
}
/* Atmospheric layers */
 .hh-ls--corporate::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(233,69,96,.07) 0%, transparent 70%), repeating-linear-gradient(0deg, transparent, transparent 58px, rgba(255,255,255,.015) 59px), repeating-linear-gradient(90deg, transparent, transparent 58px, rgba(255,255,255,.015) 59px);
     pointer-events: none;
}
 .hh-ls-corp__card {
     position: relative;
     width: 100%;
     max-width: 480px;
     padding: clamp(40px, 7vw, 70px) clamp(32px, 6vw, 60px);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 18px;
     text-align: center;
     background: rgba(255,255,255,.04);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 4px;
     box-shadow: 0 32px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Top corner accent lines */
 .hh-ls-corp__card::before, .hh-ls-corp__card::after {
     content: '';
     position: absolute;
}
 .hh-ls-corp__card::before {
     top: -1px;
     left: -1px;
     width: 32px;
     height: 32px;
     border-top: 2px solid var(--ls-accent);
     border-left: 2px solid var(--ls-accent);
}
 .hh-ls-corp__card::after {
     bottom: -1px;
     right: -1px;
     width: 32px;
     height: 32px;
     border-bottom: 2px solid var(--ls-accent);
     border-right: 2px solid var(--ls-accent);
}
 .hh-ls-corp__logo {
     font-size: clamp(1.8rem, 4vw, 2.8rem);
     line-height: 1;
     filter: drop-shadow(0 0 16px var(--ls-accent));
     animation: hh-ls-emblemPulse 3s ease-in-out infinite alternate;
}
 .hh-ls-corp__name {
     font-family: sans-serif;
     font-size: clamp(.65rem, 1.5vw, .78rem);
     font-weight: 700;
     letter-spacing: 6px;
     text-transform: uppercase;
     color: rgba(255,255,255,.6);
}
 .hh-ls-corp__divider {
     width: 60px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--ls-accent), transparent);
}
/* Animated arc + central dot spinner */
 .hh-ls-corp__spinner-wrap {
     position: relative;
     width: 72px;
     height: 72px;
}
 .hh-ls-corp__ring-outer {
     position: absolute;
     inset: 0;
     border: 2px solid rgba(255,255,255,.06);
     border-radius: 50%;
}
 .hh-ls-corp__arc {
     position: absolute;
     inset: 0;
     border: 2px solid transparent;
     border-top-color: var(--ls-accent);
     border-right-color: rgba(233,69,96,.3);
     border-radius: 50%;
     animation: hh-ls-spin .75s linear infinite;
}
 .hh-ls-corp__arc-inner {
     position: absolute;
     inset: 12px;
     border: 1px solid transparent;
     border-bottom-color: rgba(233,69,96,.5);
     border-radius: 50%;
     animation: hh-ls-spin 1.4s linear infinite reverse;
}
 .hh-ls-corp__dot {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--ls-accent);
     box-shadow: 0 0 14px var(--ls-accent), 0 0 28px rgba(233,69,96,.4);
     animation: hh-ls-pulsate 1s ease-in-out infinite;
}
 .hh-ls-corp__title {
     font-family: sans-serif;
     font-size: clamp(.85rem, 2vw, 1.05rem);
     font-weight: 600;
     letter-spacing: 2px;
     color: rgba(255,255,255,.9);
}
 .hh-ls-corp__subtitle {
     font-family: sans-serif;
     font-size: .82rem;
     color: rgba(255,255,255,.38);
     font-style: italic;
}
 .hh-ls-corp__bar-track {
     width: 100%;
     height: 2px;
     background: rgba(255,255,255,.08);
     border-radius: 2px;
     overflow: hidden;
     margin-top: 6px;
}
 .hh-ls-corp__bar-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--ls-accent), rgba(233,69,96,.6));
     border-radius: 2px;
     transition: width .35s ease;
     box-shadow: 0 0 8px var(--ls-accent);
}
 .hh-ls--mystical {
     --ls-rune: #8b7fd4;
     --ls-accent: #8b7fd4;
}
/* Atmospheric background */
 .hh-ls--mystical::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(139,127,212,.12) 0%, transparent 60%), radial-gradient(ellipse 30% 20% at 20% 30%, rgba(139,127,212,.06) 0%, transparent 50%), radial-gradient(ellipse 30% 20% at 80% 70%, rgba(139,127,212,.06) 0%, transparent 50%);
     pointer-events: none;
}
 .hh-ls-myst__inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 22px;
     text-align: center;
     padding: 0 24px;
     position: relative;
     z-index: 2;
}
/* Rotating rune rings wrapper */
 .hh-ls-myst__rings {
     position: relative;
     width: 220px;
     height: 220px;
     flex-shrink: 0;
}
/* Both rings share this base — positioned absolutely, centred */
 .hh-ls-myst__ring {
     position: absolute;
     top: 50%;
     left: 50%;
     border-style: solid;
     border-color: var(--ls-rune);
     border-radius: 50%;
}
/* Outer ring */
 .hh-ls-myst__ring--1 {
     width: 200px;
     height: 200px;
     margin-top: -100px;
     margin-left: -100px;
     border-width: 1px;
     opacity: .55;
     animation: hh-ls-sealSpin 18s linear infinite;
}
/* Inner ring — dashed, counter-rotates */
 .hh-ls-myst__ring--2 {
     width: 130px;
     height: 130px;
     margin-top: -65px;
     margin-left: -65px;
     border-width: 1px;
     border-style: dashed;
     opacity: .45;
     animation: hh-ls-sealSpin 11s linear infinite reverse;
}
/* Individual rune glyphs placed around each ring's circumference */
 .hh-ls-myst__ring span {
     position: absolute;
     top: 50%;
     left: 50%;
     font-family: serif;
     font-size: clamp(.65rem, 1.3vw, .85rem);
     color: var(--ls-rune);
     opacity: .75;
     text-shadow: 0 0 8px var(--ls-rune);
     transform-origin: 0 0;
}
/* Ring 1 — 8 glyphs at 45° steps, radius 100px */
 .hh-ls-myst__ring--1 span:nth-child(1) {
     transform: rotate(0deg) translate(-50%, -100px) rotate(0deg);
}
 .hh-ls-myst__ring--1 span:nth-child(2) {
     transform: rotate(45deg) translate(-50%, -100px) rotate(-45deg);
}
 .hh-ls-myst__ring--1 span:nth-child(3) {
     transform: rotate(90deg) translate(-50%, -100px) rotate(-90deg);
}
 .hh-ls-myst__ring--1 span:nth-child(4) {
     transform: rotate(135deg) translate(-50%, -100px) rotate(-135deg);
}
 .hh-ls-myst__ring--1 span:nth-child(5) {
     transform: rotate(180deg) translate(-50%, -100px) rotate(-180deg);
}
 .hh-ls-myst__ring--1 span:nth-child(6) {
     transform: rotate(225deg) translate(-50%, -100px) rotate(-225deg);
}
 .hh-ls-myst__ring--1 span:nth-child(7) {
     transform: rotate(270deg) translate(-50%, -100px) rotate(-270deg);
}
 .hh-ls-myst__ring--1 span:nth-child(8) {
     transform: rotate(315deg) translate(-50%, -100px) rotate(-315deg);
}
/* Ring 2 — 8 glyphs, radius 65px */
 .hh-ls-myst__ring--2 span:nth-child(1) {
     transform: rotate(22deg) translate(-50%, -65px) rotate(-22deg);
}
 .hh-ls-myst__ring--2 span:nth-child(2) {
     transform: rotate(67deg) translate(-50%, -65px) rotate(-67deg);
}
 .hh-ls-myst__ring--2 span:nth-child(3) {
     transform: rotate(112deg) translate(-50%, -65px) rotate(-112deg);
}
 .hh-ls-myst__ring--2 span:nth-child(4) {
     transform: rotate(157deg) translate(-50%, -65px) rotate(-157deg);
}
 .hh-ls-myst__ring--2 span:nth-child(5) {
     transform: rotate(202deg) translate(-50%, -65px) rotate(-202deg);
}
 .hh-ls-myst__ring--2 span:nth-child(6) {
     transform: rotate(247deg) translate(-50%, -65px) rotate(-247deg);
}
 .hh-ls-myst__ring--2 span:nth-child(7) {
     transform: rotate(292deg) translate(-50%, -65px) rotate(-292deg);
}
 .hh-ls-myst__ring--2 span:nth-child(8) {
     transform: rotate(337deg) translate(-50%, -65px) rotate(-337deg);
}
/* Central glowing sigil */
 .hh-ls-myst__sigil {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: clamp(1.6rem, 3.5vw, 2.4rem);
     color: var(--ls-rune);
     text-shadow: 0 0 20px var(--ls-rune), 0 0 40px rgba(139,127,212,.4);
     animation: hh-ls-emblemPulse 2s ease-in-out infinite alternate;
    /* Counter-rotate against the outer ring so it appears stationary */
     animation-name: hh-ls-emblemPulse;
}
/* Glow halo behind the rings */
 .hh-ls-myst__halo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(139,127,212,.15) 0%, rgba(139,127,212,.04) 50%, transparent 75%);
     filter: blur(18px);
     pointer-events: none;
     animation: hh-ls-glowPulse2 3s ease-in-out infinite alternate;
}
 .hh-ls-myst__platform {
     font-family: serif;
     font-size: clamp(.68rem, 1.5vw, .85rem);
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--ls-rune);
     text-shadow: 0 0 12px var(--ls-rune);
     opacity: .8;
}
 .hh-ls-myst__title {
     font-family: serif;
     font-size: clamp(.9rem, 2.5vw, 1.4rem);
     letter-spacing: 3px;
     color: rgba(184,170,255,.9);
     text-shadow: 0 0 18px rgba(139,127,212,.3);
}
 .hh-ls-myst__subtitle {
     font-family: serif;
     font-size: .85rem;
     font-style: italic;
     color: rgba(184,170,255,.45);
}
/* Progress bar for mystical */
 .hh-ls-myst__bar-track {
     width: min(200px, 44vw);
     height: 2px;
     background: rgba(139,127,212,.12);
     border-radius: 2px;
     overflow: hidden;
}
 .hh-ls-myst__bar-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--ls-rune), #d8ccff);
     border-radius: 2px;
     transition: width .35s ease;
     box-shadow: 0 0 8px var(--ls-rune);
}
 @keyframes hh-ls-runeFlicker {
     0% {
         opacity: .4;
         text-shadow: 0 0 4px rgba(139,127,212,.15);
    }
     100% {
         opacity: 1;
         text-shadow: 0 0 14px rgba(139,127,212,.7), 0 0 28px rgba(139,127,212,.3);
    }
}
 @keyframes hh-ls-emblemPulse {
     0% {
         filter: drop-shadow(0 0 8px rgba(139,127,212,.3));
    }
     100% {
         filter: drop-shadow(0 0 22px rgba(139,127,212,.8)) drop-shadow(0 0 44px rgba(139,127,212,.35));
    }
}
 @keyframes hh-ls-keystonePulse {
     0% {
         filter: drop-shadow(0 0 12px rgba(139,127,212,.6));
    }
     100% {
         filter: drop-shadow(0 0 28px rgba(139,127,212,1)) drop-shadow(0 0 55px rgba(139,127,212,.5));
    }
}
 @keyframes hh-ls-sealSpin {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
 @keyframes hh-ls-tFlick {
     0% {
         transform: translateX(-50%) scaleX(1) scaleY(1);
    }
     100% {
         transform: translateX(-50%) scaleX(.91) scaleY(1.07);
    }
}
 @keyframes hh-ls-glowPulse {
     0% {
         opacity: .45;
         transform: translateX(-50%) scale(.94);
    }
     100% {
         opacity: 1;
         transform: translateX(-50%) scale(1.06);
    }
}
 @keyframes hh-ls-glowPulse2 {
     0% {
         opacity: .5;
         transform: translate(-50%,-50%) scale(.92);
    }
     100% {
         opacity: 1;
         transform: translate(-50%,-50%) scale(1.08);
    }
}
 @keyframes hh-ls-groundMist {
     0% {
         opacity: .35;
         transform: translateX(-50%) scaleX(.88);
    }
     100% {
         opacity: .8;
         transform: translateX(-50%) scaleX(1.12);
    }
}
 @keyframes hh-ls-textBreath {
     0% {
         opacity: .55;
         letter-spacing: 5px;
    }
     100% {
         opacity: 1;
         letter-spacing: 7px;
    }
}
 @keyframes hh-ls-spin {
     to {
         transform: rotate(360deg);
    }
}
 @keyframes hh-ls-dotBounce {
     0%, 80%, 100% {
         transform: scale(0);
    }
     40% {
         transform: scale(1);
    }
}
 @keyframes hh-ls-pulsate {
     0% {
         transform: scale(1);
         opacity: 1;
    }
     100% {
         transform: scale(1.55);
         opacity: 0;
    }
}
 @media (prefers-reduced-motion: reduce) {
     .hh-ls-door, .hh-ls-seal svg, .hh-ls-myst__ring, .hh-ls-corp__arc, .hh-ls-corp__arc-inner, .hh-ls-spinner--ring .hh-ls-spinner__ring {
         animation: none !important;
         transition: none !important;
    }
     .hh-ls-doors--open .hh-ls-door--l {
         transform: translateX(-100%);
    }
     .hh-ls-doors--open .hh-ls-door--r {
         transform: translateX(100%);
    }
}
 @media (max-width: 480px) {
     .hh-ls-torch {
         display: none;
    }
     .hh-ls-myst__rings {
         width: 160px;
         height: 160px;
    }
     .hh-ls-myst__ring--1 {
         width: 150px;
         height: 150px;
         margin-top: -75px;
         margin-left: -75px;
    }
     .hh-ls-myst__ring--2 {
         width: 90px;
         height: 90px;
         margin-top: -45px;
         margin-left: -45px;
    }
     .hh-ls-myst__ring--1 span:nth-child(n) {
         display: none;
    }
     .hh-ls-myst__ring--1 span:nth-child(1), .hh-ls-myst__ring--1 span:nth-child(3), .hh-ls-myst__ring--1 span:nth-child(5), .hh-ls-myst__ring--1 span:nth-child(7) {
         display: block;
    }
}