:root{--bg-dark: #051616; --frame-grey: #9299a1; --door-width: 180px; --door-height: 340px; --steel: #95a5a6; --steel-dark: #5f6b6d;}
*, *:before, *:after{box-sizing: inherit; cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Normal%20Select.cur"), auto;}
.monster-btn:hover,.door-leaf,.panel,img{cursor:url("https://file.garden/ag8JwXEGxlB3Dv6B/Link%20Select.cur"),auto;}
html,body{width:100%;height:100%;margin:0;overflow:hidden;}
body{background-image:url(https://file.garden/ag8JwXEGxlB3Dv6B/bg/noccbg.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;display:flex;flex-direction:column;align-items:center;perspective:1500px;}
.medialog{background-image: url('https://file.garden/ag8JwXEGxlB3Dv6B/bg/medialogtitle.png'); background-position: center; background-repeat: no-repeat; background-size: contain; width: 100%; max-width: 600px; height: 150px; display: flex; justify-content: center; align-items: center;}
.vault-stage{position:relative; width:100vw; flex:1; display:flex; justify-content:center; transform-style:preserve-3d; transition: transform 1s cubic-bezier(0.25,1,0.5,1), opacity 0.5s;}
.door-track{position: absolute; width: var(--door-width); height: var(--door-height); transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); display: flex; align-items: center; justify-content: center;}
.door-container{position: absolute; width: var(--door-width); text-align: center; transition: opacity 0.6s, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; align-items: center; backface-visibility: hidden; animation: floating 6s ease-in-out infinite alternate;}
@keyframes floating{0%{margin-top: 20px; rotate: 2deg;}
100%{margin-top: 10px; rotate: 1deg;}
}
.door-container.active{z-index: 10;}
.door-trim-top{width: 100%; height: 24px; background-color: var(--frame-grey); clip-path: polygon(0% 40%, 50% 0%, 100% 40%, 100% 100%, 0% 100%); position: relative; display: flex; justify-content: center;}
.red-light{width: 10px; height: 10px; background: #4a1212; border-radius: 50%; position: absolute; top: 6px; z-index: 10; transition: 0.3s;}
.active .red-light{background: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 4px white;}
.frame{width: var(--door-width); height: var(--door-height); background: var(--frame-grey); position: relative; padding: 0 12px 0 12px; box-sizing: border-box; perspective: 1200px;}
.reveal-content{position: absolute; top: 0; left: 12px; right: 12px; bottom: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 1; overflow: hidden;}
.reveal-content.neighbors{background: url(https://file.garden/ag8JwXEGxlB3Dv6B/ezgif.com-cut.webp); background-size: cover; background-position: center; border: 2px ridge #000; transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease-in;}
.vault-stage.zoomed-in .door-container.active .reveal-content.neighbors{transform: scale(35); opacity: 0;}
.vault-stage.zoomed-in .door-container:not(.active){opacity: 0 !important; transform: scale(0) !important; pointer-events: none;}
.vault-stage.zoomed-in .door-container.active .door-leaf, .vault-stage.zoomed-in .door-container.active .door-trim-top, .vault-stage.zoomed-in .door-container.active .door-name{opacity: 0; transition: opacity 0.4s ease; pointer-events: none;}
.door-leaf{width: calc(100% - 0px); height: 100%; position: relative; transform-origin: left center; transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s; z-index: 5; display: grid; padding: 22px 14px; box-sizing: border-box;}
.door-container.open .door-leaf{transform: rotateY(-115deg);}
.door-name{position: absolute; top: 18%; left: 5%; width: 90%; z-index: 8; background-color: #e1b12c; color: #1e272e; padding: 8px 4px; font-size: 0.95rem; font-family: "Eater", serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; text-shadow: none; border: 3px dashed #1e272e; box-shadow: 2px 4px 8px rgba(0,0,0,0.5); transform: rotate(-7deg); transform-origin: center; transition: opacity 0.5s; pointer-events: none;}
.door-container:nth-child(even) .door-name{transform: rotate(7deg);}
.style-purple{background-color: #7a5ccf; border-left: 8px solid #5e46a1; border-top: 8px solid #5e46a1;}
.style-purple .panel{background-color: #3a2c66;}
.style-purple .knob{background-color: #1f1738;}
.style-midnight{background-color: #1b2a49; border-left: 8px solid #14203a; border-top: 8px solid #14203a;}
.style-midnight .panel{background-color: #0f1830;}
.style-midnight .knob{background-color: #080f1f;}
.style-moonlight{background-color: #4a5d8c; border-left: 8px solid #38486d; border-top: 8px solid #38486d; padding: 26px 20px;}
.style-moonlight .panel{background-color: #2a3554; padding: 16px 12px;}
.style-moonlight .knob{background-color: #1b2238;}
.style-twilight{background-color: #32456b; border-left: 8px solid #253553; border-top: 8px solid #253553;}
.style-twilight .panel{background-color: #1b2742;}
.style-twilight .knob{background-color: #10182c;}
.style-starlight{background-color: #6d7da6; border-left: 8px solid #556389; border-top: 8px solid #556389;}
.style-starlight .panel{background-color: #404d70;}
.style-starlight .knob{background-color: #27304a;}
.panel{border-left:4px solid rgba(0,0,0,0.2); border-top:4px solid rgba(0,0,0,0.2); border-radius:2px; box-sizing:border-box; width:100% !important; height:100% !important;}
.four-panel{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:15px 12px;}
.two-vert{grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:0 12px;}
.three-horiz{grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr; gap:14px 0;}
.six-panel{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:12px 10px;}
.knob{width:22px; height:22px; border-radius:50%; position:absolute; right:5px; top:50%; transform:translateY(-50%); box-shadow:inset 2px 2px 0px rgba(0,0,0,0.25); z-index:6;}
.monster-btn{position:relative; width:100px; height:50px; border:none; background:linear-gradient( to bottom,var(--steel),var(--steel-dark) ); color:white; font-weight:900; letter-spacing:2px; text-transform:uppercase; font-size:16px; border-radius:14px; box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.4); transition:transform .15s ease,box-shadow .2s ease;}
.monster-btn::before{content:""; position:absolute; inset:5px; border:3px solid rgba(255,255,255,.25); border-radius:10px; pointer-events:none;}
.monster-btn:hover{transform:translateY(-3px);}
.bolt{position:absolute; width:8px; height:8px; background:#dfe6e9; border-radius:50%; box-shadow:inset 0 -1px 2px rgba(0,0,0,.5);}
.b1{top:8px; left:8px;}
.b2{top:8px; right:8px;}
.b3{bottom:8px; left:8px;}
.b4{bottom:8px; right:8px;}
#content-view-screen{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.8s ease-in-out; display: flex; flex-direction: column;}
#content-view-screen.visible{opacity: 1; pointer-events: auto;}
#content-view-screen iframe{width: 100%; flex-grow: 1; border: none; background: #000;}
.back-vault-bar{background: url(https://file.garden/ag8JwXEGxlB3Dv6B/bg/starrynights.gif); padding: 10px; display: flex; justify-content: flex-start; border-bottom: 3px solid var(--frame-grey); background-repeat: no-repeat; background-position: center; background-size: cover;}
.return-link{position:fixed; bottom:20px; left:20px; z-index:50; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:none; text-decoration:none; font-family:'Eater', ui-monospace; background:transparent; color:#fff; font-weight:400; letter-spacing:2px; text-transform:uppercase; font-size:16px; border-radius:14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.4);}
.return-link:hover{transform:translateY(-3px);}