html[data-display-style="vault-108"]{background:#030706}
html[data-display-style="vault-108"][data-vault-background="vault-108-atrium"]{--vault-background-image:url("./vault-108/backgrounds/vault-108-atrium.png");--vault-background-tint:#06100bc7}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"]{--vault-background-image:url("./vault-108/backgrounds/sanctuary-reclaimed.png");--vault-background-tint:#100b05bd}
html[data-display-style="vault-108"][data-vault-background="roadside-workshop"]{--vault-background-image:url("./vault-108/backgrounds/roadside-workshop.png");--vault-background-tint:#040b11c2}
html[data-display-style="vault-108"][data-vault-background="irradiated-expedition"]{--vault-background-image:url("./vault-108/backgrounds/irradiated-expedition.png");--vault-background-tint:#031009c2}
html[data-display-style="vault-108"] body{position:relative;isolation:isolate;background:transparent!important}
html[data-display-style="vault-108"] body::before,html[data-display-style="vault-108"] body::after{content:"";position:fixed;inset:-3%;pointer-events:none}
html[data-display-style="vault-108"] body::before{z-index:-2;background-color:#030706;background-image:var(--vault-background-image);background-position:center;background-size:cover;filter:saturate(.93) contrast(1.04);animation:vaultBackgroundDrift 34s ease-in-out infinite alternate,vaultBackgroundReveal .8s ease both;transform:scale(1.035)}
html[data-display-style="vault-108"] body::after{z-index:-1;background:linear-gradient(90deg,#020504b8 0,transparent 24%,transparent 72%,#0205049e 100%),linear-gradient(180deg,#02040324 0,var(--vault-background-tint,#06100bc7) 100%);transition:opacity .7s ease}
.vault-background-fx{position:fixed;inset:0;z-index:-1;display:none;overflow:hidden;pointer-events:none}
html[data-display-style="vault-108"] .vault-background-fx{display:block}
.vault-walker{position:fixed;left:-16vw;bottom:clamp(-34px,-2.4vw,-12px);z-index:-1;display:none;width:clamp(76px,8.8vw,150px);aspect-ratio:247.875/793;opacity:0;pointer-events:none;filter:drop-shadow(0 16px 13px #000c);will-change:left,opacity,transform}
html[data-display-style="vault-108"] .vault-walker{display:block}.vault-walker.is-visible{opacity:.94}.vault-walker-sprite{position:absolute;inset:0;background:url("./vault-108/vault-dweller-walk-cycle.png") 0 0/800% 100% no-repeat}.vault-walker.is-walking .vault-walker-sprite{animation:vaultDwellerWalk .72s steps(7,end) infinite}.vault-walker.is-interacting .vault-walker-sprite{background-position:42.857% 0;animation:vaultDwellerInspect 2.4s ease-in-out infinite}.vault-walker-interaction{position:absolute;left:63%;top:43%;width:22%;aspect-ratio:1;border-radius:50%;opacity:0;background:#5dff8b;filter:blur(6px);box-shadow:0 0 18px 9px #48ff83aa}.vault-walker.is-interacting .vault-walker-interaction{animation:vaultPipGlow 1.4s ease-in-out infinite}.vault-walker-interaction i,.vault-walker-interaction b{position:absolute;display:block;opacity:0}
.vault-scene-companion{position:fixed;z-index:-1;display:none;background-position:center bottom;background-repeat:no-repeat;background-size:contain;pointer-events:none;filter:drop-shadow(0 14px 12px #000c);transform-origin:center bottom;will-change:transform,filter}
html[data-display-style="vault-108"] .vault-scene-companion{display:block}
html[data-display-style="vault-108"][data-vault-background="vault-108-atrium"] .vault-scene-companion{left:20vw;bottom:3vh;width:clamp(90px,10vw,170px);aspect-ratio:593/778;background-image:url("./vault-108/atrium-maintenance-robot.png");animation:vaultRobotHover 3.2s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-scene-companion{left:34vw;bottom:-2vh;width:clamp(76px,8vw,130px);aspect-ratio:490/773;background-image:url("./vault-108/sanctuary-settler.png");animation:vaultSettlerIdle 5s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="roadside-workshop"] .vault-scene-companion{left:80vw;bottom:-2vh;width:clamp(76px,8vw,136px);aspect-ratio:410/797;background-image:url("./vault-108/roadside-mechanic.png");animation:vaultMechanicIdle 4.6s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="irradiated-expedition"] .vault-scene-companion{left:76vw;bottom:0;width:clamp(96px,10vw,170px);aspect-ratio:482/642;background-image:url("./vault-108/expedition-dogmeat.png");animation:vaultDogIdle 2.6s ease-in-out infinite}
html[data-display-style="vault-108"] .vault-scene-companion.is-responding{filter:drop-shadow(0 14px 12px #000d) drop-shadow(0 0 13px #65ff944d)}
html[data-display-style="vault-108"][data-vault-background="vault-108-atrium"] .vault-scene-companion.is-responding{animation:vaultRobotRespond 1.2s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-scene-companion.is-responding{animation:vaultSettlerRespond 1.8s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="roadside-workshop"] .vault-scene-companion.is-responding{animation:vaultMechanicRespond 1.5s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="irradiated-expedition"] .vault-scene-companion.is-responding{animation:vaultDogRespond .72s ease-in-out infinite}
.vault-walker[data-interaction="terminal"] .vault-walker-interaction b{left:calc(100% + 10px);top:-55%;width:90px;height:70px;border:1px solid #66ff9a88;background:repeating-linear-gradient(180deg,#75ffad22 0 2px,transparent 3px 7px);box-shadow:inset 0 0 18px #54ff8a22,0 0 14px #54ff8a22}.vault-walker[data-interaction="armour"] .vault-walker-interaction i{left:90%;top:-140%;width:72px;height:100px;border:1px solid #ffd36b77;border-radius:50% 50% 35% 35%;box-shadow:0 0 25px #ffd36b22}.vault-walker[data-interaction="scan"] .vault-walker-interaction i{left:40%;top:-85%;width:120px;height:120px;border:1px solid #76ff9aaa;border-radius:50%;box-shadow:0 0 0 18px #76ff9a0d,0 0 0 38px #76ff9a08}.vault-walker.is-interacting .vault-walker-interaction :is(i,b){opacity:1;animation:vaultInteractionPulse 1.8s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="vault-108-atrium"] .vault-background-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 61%,#3cff8a28,transparent 10%),radial-gradient(circle at 91% 62%,#3cff8a1f,transparent 11%),linear-gradient(180deg,transparent 0 12%,#ffd36d08 20%,transparent 38%);mix-blend-mode:screen;animation:vaultConsoleBreath 4.8s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="vault-108-atrium"] .vault-background-fx::after{content:"";position:absolute;inset:0;background:#ffe39a12;opacity:0;animation:vaultLampFlicker 11s steps(1,end) infinite}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx i{position:absolute;left:var(--dust-x,10%);bottom:-5%;width:3px;height:3px;border-radius:50%;background:#ffe0a4;box-shadow:26px -20px #ffe0a4aa,64px -5px #fff0c277,-34px -42px #ffe0a488,8px -78px #fff3d855;opacity:0;animation:vaultDustRise 13s linear infinite}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx i:nth-child(2){--dust-x:23%;animation-delay:-7s;animation-duration:16s}html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx i:nth-child(3){--dust-x:42%;animation-delay:-3s;animation-duration:18s}html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx i:nth-child(4){--dust-x:67%;animation-delay:-11s;animation-duration:15s}html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx i:nth-child(5){--dust-x:82%;animation-delay:-5s;animation-duration:19s}
html[data-display-style="vault-108"][data-vault-background="sanctuary-reclaimed"] .vault-background-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 20%,#ffd47a2b,transparent 36%);mix-blend-mode:screen;animation:vaultSunBreath 7s ease-in-out infinite alternate}
html[data-display-style="vault-108"][data-vault-background="roadside-workshop"] .vault-background-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 52%,#ffc46b32,transparent 20%);mix-blend-mode:screen;animation:vaultWorkshopBreath 5.4s ease-in-out infinite}
html[data-display-style="vault-108"][data-vault-background="roadside-workshop"] .vault-background-fx::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 0 31%,#eaf7ff8c 32%,transparent 32.6%);opacity:0;mix-blend-mode:screen;animation:vaultStormFlash 12s steps(1,end) infinite}
html[data-display-style="vault-108"][data-vault-background="irradiated-expedition"] .vault-background-fx::before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at 28% 74%,#5dff7142,transparent 25%),radial-gradient(ellipse at 68% 63%,#7dff8440,transparent 28%),radial-gradient(ellipse at 82% 36%,#5dff7a20,transparent 20%);filter:blur(24px);mix-blend-mode:screen;animation:vaultRadiationFog 16s ease-in-out infinite alternate}
html[data-display-style="vault-108"][data-vault-background="irradiated-expedition"] .vault-background-fx::after{content:"";position:absolute;inset:0;background:#dfffe166;opacity:0;mix-blend-mode:screen;animation:vaultStormFlash 9s steps(1,end) infinite}
html[data-display-style="vault-108"] :is(.sidebar,.topbar,.hero,.panel,.policy,.interface-companion,.reward-shop-hero,.shop-wallet article,.shop-song-card,.shared-theme-card){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vault-scenic-toggle{position:fixed;right:18px;bottom:18px;z-index:10000;display:none;align-items:center;gap:8px;padding:10px 13px;border:1px solid #e7c950;border-radius:8px;background:#07110ee8;color:#f7e596;font:800 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 30px #000b;cursor:pointer}
html[data-display-style="vault-108"] .vault-scenic-toggle{display:inline-flex}
html[data-display-style="vault-108"] .vault-scenic-toggle::before{content:"◉";color:#62f7a1;text-shadow:0 0 9px #62f7a1}
html[data-display-style="vault-108"] body>.app,html[data-display-style="vault-108"] body>.shell,html[data-display-style="vault-108"] body>.portal-shell,html[data-display-style="vault-108"] body>main{transition:opacity .65s ease,filter .65s ease}
html[data-display-style="vault-108"] body.vault-scenic-mode::after{opacity:.15}
html[data-display-style="vault-108"] body.vault-scenic-mode>.app,html[data-display-style="vault-108"] body.vault-scenic-mode>.shell,html[data-display-style="vault-108"] body.vault-scenic-mode>.portal-shell,html[data-display-style="vault-108"] body.vault-scenic-mode>main{opacity:0;filter:blur(10px);pointer-events:none;user-select:none}
html[data-display-style="vault-108"] body.vault-scenic-mode .vault-scenic-toggle{background:#e7c950;color:#101405}
html[data-display-style="vault-108"] body.vault-scenic-mode .vault-scenic-toggle::before{color:#101405;text-shadow:none}
@keyframes vaultBackgroundDrift{0%{transform:scale(1.035) translate3d(-.35%,0,0)}100%{transform:scale(1.075) translate3d(.45%,-.35%,0)}}
@keyframes vaultBackgroundReveal{from{opacity:0;filter:saturate(.65) contrast(.9) blur(8px)}to{opacity:1;filter:saturate(.93) contrast(1.04) blur(0)}}
@keyframes vaultConsoleBreath{0%,100%{opacity:.45;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.35)}}
@keyframes vaultLampFlicker{0%,7%,9%,61%,63%,100%{opacity:0}8%,62%{opacity:.42}}
@keyframes vaultDustRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}12%{opacity:.65}72%{opacity:.32}100%{opacity:0;transform:translate3d(95px,-105vh,0) scale(1.25)}}
@keyframes vaultSunBreath{from{opacity:.45;transform:scale(1)}to{opacity:.95;transform:scale(1.05)}}
@keyframes vaultWorkshopBreath{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes vaultStormFlash{0%,45%,47%,49%,78%,80%,100%{opacity:0}46%{opacity:.88}48%{opacity:.28}79%{opacity:.52}}
@keyframes vaultRadiationFog{from{opacity:.46;transform:translate3d(-3%,1%,0) scale(1)}to{opacity:.92;transform:translate3d(4%,-2%,0) scale(1.1)}}
@keyframes vaultDwellerWalk{to{background-position:100% 0}}
@keyframes vaultDwellerInspect{0%,100%{transform:translateY(0) rotate(0)}45%,65%{transform:translateY(2px) rotate(1.4deg)}}
@keyframes vaultPipGlow{0%,100%{opacity:.25;transform:scale(.72)}50%{opacity:.95;transform:scale(1.18)}}
@keyframes vaultInteractionPulse{0%,100%{filter:brightness(.75);transform:scale(.94)}50%{filter:brightness(1.45);transform:scale(1.04)}}
@keyframes vaultRobotHover{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-7px) rotate(.6deg)}}
@keyframes vaultRobotRespond{0%,100%{transform:translateY(-2px) rotate(-2deg) scale(1)}50%{transform:translateY(-10px) rotate(3deg) scale(1.04)}}
@keyframes vaultSettlerIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(.3deg)}}
@keyframes vaultSettlerRespond{0%,100%{transform:rotate(0) translateY(0)}40%,65%{transform:rotate(-2.5deg) translate(-4px,-3px) scale(1.025)}}
@keyframes vaultMechanicIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(.6deg) translateY(-2px)}}
@keyframes vaultMechanicRespond{0%,100%{transform:rotate(0)}42%{transform:rotate(-3deg) translate(-3px,-5px) scale(1.03)}72%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes vaultDogIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.5deg)}}
@keyframes vaultDogRespond{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translate(-4px,-8px) rotate(2deg) scale(1.045)}}
@media(max-width:700px){html[data-display-style="vault-108"] body::before{inset:0;background-position:center;animation:none;transform:none}.vault-scenic-toggle{right:10px;bottom:10px}.vault-walker{width:82px;bottom:-20px}.vault-scene-companion{transform:scale(.82);transform-origin:center bottom}}
@media(prefers-reduced-motion:reduce){html[data-display-style="vault-108"] body::before{animation:none;transform:scale(1.035)}html[data-display-style="vault-108"] :is(.vault-background-fx,.vault-walker,.vault-scene-companion){display:none}html[data-display-style="vault-108"] body>.app,html[data-display-style="vault-108"] body>.shell,html[data-display-style="vault-108"] body>.portal-shell,html[data-display-style="vault-108"] body>main{transition:none}}
