:root{
  --li-visual-black:#050609;
  --li-visual-gold:#c9a84c;
  --li-visual-text:#d8d3c8;
  --li-visual-dim:#8e887b;
}
html{background:var(--li-visual-black)}
body.li-visualized{
  isolation:isolate;
  background-color:transparent!important;
  background-image:none!important;
}
.li-visual-root{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(circle at 52% 8%,#24212a 0,#090a0e 54%,#050609 100%);
}
.li-visual-picture{position:absolute;inset:0;display:block;opacity:1;transition:opacity .8s ease}
.li-visual-picture.li-visual-next{opacity:0}
.li-visual-picture.li-visual-next.is-ready{opacity:1}
.li-visual-picture img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:var(--li-focal,50% 50%);
  filter:saturate(.72) contrast(1.12) brightness(.78);transform:scale(1.018);
}
.li-visual-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,6,9,.36) 0,rgba(5,6,9,.66) 50%,rgba(5,6,9,.94) 100%),
    radial-gradient(circle at 68% 24%,transparent 0,rgba(5,6,9,.28) 56%,rgba(5,6,9,.72) 100%);
}
.li-visual-noise{
  position:absolute;inset:0;opacity:.11;mix-blend-mode:screen;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.025) 4px);
}
.li-scene-mark{
  position:absolute;right:18px;bottom:14px;padding:5px 8px;border:1px solid rgba(201,168,76,.22);
  color:rgba(216,211,200,.42);background:rgba(5,6,9,.46);font:8px/1.2 Consolas,monospace;
  letter-spacing:.17em;text-transform:uppercase;backdrop-filter:blur(6px);
}
body.li-module-launcher .li-visual-picture img{filter:saturate(.8) contrast(1.12) brightness(.72)}
body.li-module-launcher .li-visual-scrim{background:linear-gradient(90deg,rgba(5,6,9,.92) 0,rgba(5,6,9,.68) 54%,rgba(5,6,9,.38) 100%),linear-gradient(180deg,rgba(5,6,9,.2),rgba(5,6,9,.9))}
body.li-module-voiders .li-visual-picture img{filter:saturate(.62) contrast(1.14) brightness(.62)}
body.li-module-voiders .li-visual-scrim{background:linear-gradient(90deg,rgba(5,6,9,.82) 0,rgba(5,6,9,.7) 67%,rgba(5,6,9,.82) 100%),linear-gradient(180deg,rgba(5,6,9,.38),rgba(5,6,9,.94))}
body.li-module-marshal .li-visual-picture img{filter:saturate(.62) contrast(1.14) brightness(.56)}
body.li-module-marshal .li-visual-scrim{background:linear-gradient(180deg,rgba(5,6,9,.46),rgba(5,6,9,.9)),radial-gradient(circle at 62% 22%,transparent,rgba(5,6,9,.72) 72%)}
body.li-module-shipyard .li-visual-picture img{filter:saturate(.55) contrast(1.15) brightness(.5)}
body.li-module-shipyard .li-visual-scrim{background:linear-gradient(90deg,rgba(5,6,9,.9) 0,rgba(5,6,9,.42) 46%,rgba(5,6,9,.9) 100%),linear-gradient(180deg,rgba(5,6,9,.35),rgba(5,6,9,.78))}
body.li-module-drydock .li-visual-picture img{filter:saturate(.65) contrast(1.12) brightness(.57)}
body.li-module-drydock .li-visual-scrim{background:linear-gradient(90deg,rgba(5,6,9,.84) 0,rgba(5,6,9,.7) 64%,rgba(5,6,9,.58) 100%),linear-gradient(180deg,rgba(5,6,9,.44),rgba(5,6,9,.94))}
body.li-visualized>header,body.li-visualized>nav{
  background-color:rgba(7,7,11,.86)!important;
  backdrop-filter:blur(11px) saturate(.72);
}
body.li-module-voiders aside .box,body.li-module-marshal .box{
  background:rgba(8,8,12,.88);backdrop-filter:blur(7px);
}
body.li-module-voiders .mapwrap,body.li-module-marshal svg{
  background-color:rgba(6,6,10,.9)!important;
}
body.li-module-shipyard aside{background:rgba(7,7,11,.9);backdrop-filter:blur(8px)}
body.li-module-shipyard #view{background:rgba(5,6,9,.32)!important}
body.li-module-drydock .box,body.li-module-drydock .card{background:rgba(8,8,12,.88)!important;backdrop-filter:blur(7px)}

.li-transition{
  position:fixed;inset:0;z-index:9000;overflow:hidden;background:#050609;color:var(--li-visual-text);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility 0s linear .55s;
}
.li-transition-art{
  position:absolute;inset:-2%;background-color:#090a0e;background-image:var(--li-art,radial-gradient(circle at 50% 40%,#27212a,#050609 70%));
  background-size:cover;background-position:var(--li-load-focal,50% 50%);filter:saturate(.78) contrast(1.12) brightness(.77);
  transform:scale(1.035);
}
.li-transition-vignette{
  position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,7,.93) 0,rgba(3,4,7,.62) 48%,rgba(3,4,7,.3) 100%),linear-gradient(180deg,rgba(3,4,7,.18),rgba(3,4,7,.92));
}
.li-transition-copy{
  position:absolute;left:clamp(24px,7vw,110px);right:24px;bottom:clamp(34px,9vh,100px);max-width:650px;
  border-left:2px solid var(--li-visual-gold);padding:5px 0 4px 22px;text-shadow:0 2px 20px #000;
}
.li-transition-copy span{display:block;color:var(--li-visual-gold);font:9px/1.3 Consolas,monospace;letter-spacing:.24em;text-transform:uppercase;margin-bottom:13px}
.li-transition-copy strong{display:block;color:#d8d3c8;font:400 clamp(28px,5vw,62px)/.98 Georgia,serif;letter-spacing:.035em;text-transform:uppercase}
.li-transition-copy small{display:block;color:#aaa397;font:10px/1.55 Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
.li-transition-copy i{display:block;width:min(380px,66vw);height:1px;margin-top:22px;background:linear-gradient(90deg,var(--li-visual-gold),rgba(201,168,76,.08));transform-origin:left center}
.li-transition.li-arriving{visibility:visible;pointer-events:none;animation:li-arrival-safety 1.25s both}
body.li-departing .li-transition{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
body.li-departing .li-transition-art{animation:li-drift 8s ease-out both}
body.li-departing .li-transition-copy i{animation:li-transfer-line .72s ease-out both}
.li-transition.li-dismiss{opacity:0!important;visibility:hidden!important;animation:none!important}
@keyframes li-arrival-safety{0%,42%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes li-drift{from{transform:scale(1.035)}to{transform:scale(1.085)}}
@keyframes li-transfer-line{from{transform:scaleX(.05);opacity:.3}to{transform:scaleX(1);opacity:1}}

.li-transition[data-scene="stellar-armada-blue"]{--li-art:url("visuals/stellar-armada-blue-800.webp");--li-load-focal:50% 50%}
.li-transition[data-scene="chrysopolis-ruin"]{--li-art:url("visuals/chrysopolis-ruin-800.webp");--li-load-focal:52% 48%}
.li-transition[data-scene="gas-giant-engagement"]{--li-art:url("visuals/gas-giant-engagement-800.webp");--li-load-focal:55% 50%}
.li-transition[data-scene="bridge-debriefing"]{--li-art:url("visuals/bridge-debriefing-800.webp");--li-load-focal:50% 45%}
.li-transition[data-scene="carrier-sortie"]{--li-art:url("visuals/carrier-sortie-800.webp");--li-load-focal:52% 48%}
.li-transition[data-scene="battlecruiser-portrait"]{--li-art:url("visuals/battlecruiser-portrait-800.webp");--li-load-focal:66% 48%}
.li-transition[data-scene="imperial-advance"]{--li-art:url("visuals/imperial-advance-800.webp");--li-load-focal:58% 50%}
.li-transition[data-scene="miklegard-blockade"]{--li-art:url("visuals/miklegard-blockade-800.webp");--li-load-focal:58% 48%}
.li-transition[data-scene="blockade-runners"]{--li-art:url("visuals/blockade-runners-800.webp");--li-load-focal:52% 48%}
.li-transition[data-scene="chrysopolis-defense"]{--li-art:url("visuals/chrysopolis-defense-800.webp");--li-load-focal:52% 48%}
.li-transition[data-scene="chrysopolis-cathedral"]{--li-art:url("visuals/chrysopolis-cathedral-800.webp");--li-load-focal:60% 48%}
.li-transition[data-scene="geometry-stasis-01"]{--li-art:url("visuals/geometry-stasis-01-800.webp");--li-load-focal:58% 48%}
.li-transition[data-scene="geometry-stasis-02"]{--li-art:url("visuals/geometry-stasis-02-800.webp");--li-load-focal:54% 48%}
.li-transition[data-scene="geometry-stasis-03"]{--li-art:url("visuals/geometry-stasis-03-800.webp");--li-load-focal:60% 48%}
.li-transition[data-scene="geometry-stasis-04"]{--li-art:url("visuals/geometry-stasis-04-800.webp");--li-load-focal:60% 48%}
@media(min-width:900px){
  .li-transition[data-scene="stellar-armada-blue"]{--li-art:url("visuals/stellar-armada-blue-1600.webp")}
  .li-transition[data-scene="chrysopolis-ruin"]{--li-art:url("visuals/chrysopolis-ruin-1600.webp")}
  .li-transition[data-scene="gas-giant-engagement"]{--li-art:url("visuals/gas-giant-engagement-1600.webp")}
  .li-transition[data-scene="bridge-debriefing"]{--li-art:url("visuals/bridge-debriefing-1600.webp")}
  .li-transition[data-scene="carrier-sortie"]{--li-art:url("visuals/carrier-sortie-1600.webp")}
  .li-transition[data-scene="battlecruiser-portrait"]{--li-art:url("visuals/battlecruiser-portrait-1600.webp")}
  .li-transition[data-scene="imperial-advance"]{--li-art:url("visuals/imperial-advance-1600.webp")}
  .li-transition[data-scene="miklegard-blockade"]{--li-art:url("visuals/miklegard-blockade-1600.webp")}
  .li-transition[data-scene="blockade-runners"]{--li-art:url("visuals/blockade-runners-1600.webp")}
  .li-transition[data-scene="chrysopolis-defense"]{--li-art:url("visuals/chrysopolis-defense-1600.webp")}
  .li-transition[data-scene="chrysopolis-cathedral"]{--li-art:url("visuals/chrysopolis-cathedral-1600.webp")}
  .li-transition[data-scene="geometry-stasis-01"]{--li-art:url("visuals/geometry-stasis-01-1600.webp")}
  .li-transition[data-scene="geometry-stasis-02"]{--li-art:url("visuals/geometry-stasis-02-1600.webp")}
  .li-transition[data-scene="geometry-stasis-03"]{--li-art:url("visuals/geometry-stasis-03-1600.webp")}
  .li-transition[data-scene="geometry-stasis-04"]{--li-art:url("visuals/geometry-stasis-04-1600.webp")}
}
@media(max-width:700px){
  .li-scene-mark{display:none}.li-visual-root{height:62vh}.li-visual-root:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 10%,#050609 94%)}
  .li-transition-art{inset:0;transform:none;background-size:auto 62%;background-repeat:no-repeat;background-position:var(--li-load-focal,50% 8%)}
  .li-transition-vignette{background:linear-gradient(180deg,rgba(3,4,7,.18) 0,rgba(3,4,7,.55) 42%,rgba(3,4,7,.98) 72%)}
  .li-transition-copy{left:22px;bottom:36px;padding-left:16px}.li-transition-copy strong{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .li-visual-picture,.li-transition{transition:none!important}.li-visual-picture img,.li-transition-art{transform:none!important;animation:none!important}
  .li-transition.li-arriving{animation:li-arrival-reduced .16s both}.li-transition-copy i{animation:none!important}
  @keyframes li-arrival-reduced{0%,35%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
}