.open-page{width:100vw;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1e1e1e}.open-page{--rarity-start: #56dc63;--rarity-end: #56dc63;--rarity-gradient: linear-gradient(180deg, var(--rarity-start), var(--rarity-end))}.open-page.rarity-r{--rarity-start: #80dda4;--rarity-end: #143c9d}.open-page.rarity-sr{--rarity-start: #e680dc;--rarity-end: #7439e1}.open-page.rarity-sp{--rarity-start: #f8a569;--rarity-end: #f84e6b}.open-page.rarity-ssr{--rarity-gradient: conic-gradient(from 0deg, #ff0080, #ff8c00, #ffee00, #4de94c, #00cfff, #8a2be2, #ff0080)}.page-container{width:60vw;height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.top-left-btn{position:absolute;top:24px;left:24px;z-index:200}.center-content{display:grid;position:absolute;height:90%;margin-bottom:20vh;grid-template-columns:1fr 30vw 1fr;align-items:center;justify-items:center;column-gap:0vw;width:100%;z-index:50}.center-content h2{font-size:2vw;line-height:1.4}.content-box{color:#f8f8f8;width:30vw;height:29.5vh}.bg-box{position:absolute;width:100vw;height:100vh;background:repeating-linear-gradient(#5559588a 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,#5559588a 0 1px,transparent 1px 100%);background-size:1vw 1vw,1vw 1vw;background-position:left top,left top;background-repeat:repeat,repeat}.index-box{color:#f8f8f8;height:100vh;margin-left:9vw;width:5vw;display:flex;text-wrap:nowrap;align-items:center;justify-content:center;rotate:-90deg}.index-label{font-family:Novecento Wide,Noto Sans SC,Arial,sans-serif;font-weight:800;letter-spacing:.05em}.index-anim{animation:slideDownIn 10s cubic-bezier(0,1,0,1) both}.index-value{font-family:Novecento Wide,Noto Sans SC,Arial,sans-serif;font-weight:300;opacity:1}.rarity-box{color:#f8f8f8;height:100vh;width:5vw;margin-right:9vw;display:flex;text-wrap:nowrap;align-items:center;justify-content:center;rotate:90deg}.rarity-label{font-family:Novecento Wide,Arial,sans-serif;font-weight:800;letter-spacing:.05em}.rarity-value{font-family:Novecento Wide,Arial,sans-serif;font-weight:300;opacity:.9}.rarity-anim{animation:slideUpIn 10s cubic-bezier(0,1,0,1) both}@keyframes slideDownIn{0%{transform:translate(400%);opacity:0}50%{opacity:1}to{transform:translate(40%);opacity:1}}@keyframes slideUpIn{0%{transform:translate(400%);opacity:0}50%{opacity:1}to{transform:translate(100%);opacity:1}}.from-box{position:absolute;top:95vh;display:flex;align-items:center;justify-content:center}.data-display{position:fixed;top:25vh;left:40vw;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:1.2vw;width:20vw;height:50vh;cursor:pointer;background-color:transparent;perspective:800px}.tilt-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;background-color:#e4e8e7;border:10px solid transparent;border-image:var(--rarity-gradient) 1}@keyframes spin3d{0%{transform:rotateY(0) rotateX(0)}to{transform:rotateY(2turn) rotateX(0)}}.tilt-content.spinning{animation:spin3d 1s cubic-bezier(.1,1,.2,1) both}.result-text span{padding-left:2vw;padding-right:2vw;cursor:pointer}.result-text{position:relative}.result-item{font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:2vw;margin-right:2vw;color:#1e1e1e}.bottom-buttons{position:absolute;bottom:0;left:0;right:0;height:120px;display:flex;justify-content:center;align-items:stretch;padding:0}.home-btn{background:transparent;border:none;color:#fff;font-family:Novecento Wide,Noto Sans SC,Arial,sans-serif;font-weight:600;letter-spacing:.06em;cursor:pointer;z-index:100}.home-btn:hover{opacity:.85}.collection-btn{background:transparent;border:none;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:#fff;cursor:pointer;padding-bottom:1vh}.collection-label{font-family:Novecento Wide,Noto Sans SC,Arial,sans-serif;font-weight:800;font-size:3vw;line-height:.8;color:transparent;-webkit-text-stroke:1px #ffffff;transition:color .2s ease;z-index:300}.collection-btn:hover .collection-label{color:#fff}.collection-arrow{display:block;font-size:2.2vw;line-height:1}.decoration-item1{width:9vw;height:60vh;position:absolute;top:0;left:4vw;background-color:#aeb4bb;z-index:1;animation:slideDownInDeco 10s cubic-bezier(0,1,0,1) both}@keyframes slideDownInDeco{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.decoration-item2{width:9vw;height:60vh;position:absolute;bottom:0;right:4vw;background-color:#aeb4bb;z-index:1;animation:slideUpInDeco 10s cubic-bezier(0,1,0,1) both}@keyframes slideUpInDeco{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.index-box h2,.rarity-box h2{font-size:14vh}.decoration-item3{position:absolute;font-size:1vw;top:20vh;left:20vw;font-weight:400;letter-spacing:.1vw;bottom:0;right:4vw;color:#fff;z-index:1}.new-label{position:absolute;font-weight:ultra bold;bottom:4vw;left:39.5vw;letter-spacing:-.09vw;font-size:1.5vw;font-weight:600;color:#1e1e1e;background-color:#fff;padding:.35vw .5vw .2vw .35vw;border-radius:100%}.new-label-anim{animation:fadeIn .5s ease-in-out both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.decoration-item4{width:5vw;height:70vh;position:absolute;top:20vh;left:11vw;background:var(--rarity-gradient);z-index:5;animation:slideDownInDeco 2s cubic-bezier(0,1,0,1) both}.decoration-item5{width:5vw;height:70vh;position:absolute;bottom:20vh;right:11vw;background:var(--rarity-gradient);z-index:5;animation:slideUpInDeco 2s cubic-bezier(0,1,0,1) both}.decoration-item6{position:absolute;top:10vh;left:35vw;height:20vh;z-index:0;filter:brightness(3);animation:flicker 3s cubic-bezier(0,1,0,1) both}.decoration-item6 img{height:100%;object-fit:cover}@keyframes flicker{0%{filter:brightness(15);transform:translateY(0)}to{filter:brightness(2);transform:translateY(10px)}}.decoration-item7{position:absolute;top:50%;left:50%;width:26vw;z-index:0;filter:brightness(5);animation:rotate 2s cubic-bezier(0,1,0,1) both;transform-origin:center center}.decoration-item7 img{width:100%;object-fit:cover}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(180deg)}}.decoration-item8{position:absolute;top:70vh;left:5vw;width:23vw;z-index:0;filter:brightness(5);animation:flicker-alt .49s ease-out infinite both}.decoration-item8 img{width:100%;object-fit:cover}@keyframes flicker-alt{0%{filter:brightness(6);transform:translate(0)}to{filter:brightness(2);transform:translate(10px)}}