.case-sprite{display:block;aspect-ratio:1;background-image:url('assets/case-atlas.png');background-size:400% 200%;background-position:var(--atlas-x) var(--atlas-y);background-repeat:no-repeat;flex-shrink:0;filter:drop-shadow(0 18px 16px #0006)}
.case-sprite.collection-cover{position:relative;isolation:isolate;background-image:none;background-size:auto;container-type:inline-size;filter:drop-shadow(0 12px 14px #0005);margin:0;color:var(--cover-color)}
.collection-cover .collection-cover-frame{position:absolute;inset:10% 8% 11%;border:1px solid color-mix(in srgb,var(--cover-color) 40%,#34303c);border-radius:18%;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--cover-color) 22%,#19161f),#17141e 78%);transform:rotate(-5deg);box-shadow:inset 0 0 0 7px #ffffff03,0 10px 20px #0003}
.cover-motif-1 .collection-cover-frame{border-radius:8% 25% 8% 25%;transform:rotate(5deg)}.cover-motif-2 .collection-cover-frame{border-radius:24% 7% 24% 7%;transform:none;background:repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 14px),radial-gradient(ellipse,color-mix(in srgb,var(--cover-color) 20%,#19161f),#17141e)}
.case-sprite.collection-cover .collection-cover-item{position:absolute;display:block;object-fit:contain;width:86%;max-width:none;height:43%;left:7%;margin:0;filter:drop-shadow(0 7px 6px #0008);pointer-events:none}
.case-sprite.collection-cover .collection-cover-error{display:flex;align-items:center;justify-content:center;color:#a394ad;font-size:9px;font-size:4cqw;text-align:center;font-weight:400}
.case-sprite.collection-cover .cover-item-0{top:28%;z-index:3;--cover-item-transform:none}.case-sprite.collection-cover .cover-item-1{top:7%;width:72%;height:37%;left:14%;--cover-item-transform:rotate(-12deg);z-index:2}.case-sprite.collection-cover .cover-item-2{top:48%;width:72%;height:37%;left:14%;--cover-item-transform:rotate(12deg);z-index:1}.case-sprite.collection-cover.cover-count-1 .cover-item-0{top:22%;height:55%;width:90%;left:5%}
.case-sprite.collection-cover img.collection-cover-item,.case:hover .caseart .case-sprite.collection-cover img.collection-cover-item{transform:var(--cover-item-transform,none)}
.collection-cover .collection-cover-mark{position:absolute;right:15%;top:16%;font-style:normal;font-weight:800;font-size:10px;font-size:4cqw;letter-spacing:.15em;opacity:.5;z-index:4}.collection-cover .collection-cover-title{position:absolute;bottom:13%;left:15%;right:15%;z-index:4;max-height:18%;overflow:hidden;text-align:center;text-transform:uppercase;font-size:11px;font-size:4.3cqw;line-height:1.25;letter-spacing:.09em;color:#f3e9fa;text-shadow:0 1px 5px #000;overflow-wrap:anywhere}.collection-cover .collection-cover-empty{position:absolute;inset:35% 16% auto;text-align:center;z-index:3;font-size:12px;font-size:5cqw;color:#b7a8c1;line-height:1.5}
.collection-cover.related-sprite .collection-cover-title,.collection-cover.profile-case-art .collection-cover-title,.collection-cover.library-case-art .collection-cover-title,.collection-cover.related-sprite .collection-cover-mark,.collection-cover.profile-case-art .collection-cover-mark,.collection-cover.library-case-art .collection-cover-mark{display:none}
.caseart>.case-sprite{position:relative;z-index:1;width:95%;max-width:275px;transition:transform .45s cubic-bezier(.2,.7,.2,1);transform:translateY(4px)}
.case:hover .case-sprite{transform:translateY(-7px) rotate(-2deg)}
.caseart{height:270px}.case-skin{display:none}.case-halo{opacity:.12}.case-backword{top:90px;opacity:.045}.casecopy h3{font-size:29px}.case .tag{top:10px;background:#ffffff06;border-radius:5px;padding:5px 7px;letter-spacing:1px}.casecopy{padding-top:13px}.casecopy small{display:none}
.showcase-sprite{width:290px;max-width:90%;position:relative;z-index:2;animation:case-arrive .6s ease both}.related-sprite{width:86px}.mobile-dock{display:none}
@keyframes case-arrive{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:960px){.caseart{height:240px}.caseart>.case-sprite{width:100%}}
@media(max-width:760px){.mobile-dock{position:fixed;bottom:0;left:0;right:0;height:calc(72px + env(safe-area-inset-bottom));padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#1d1a25ed;backdrop-filter:blur(22px);border-top:1px solid #ffffff0d;box-shadow:0 -10px 40px #0003;border-radius:20px 20px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;z-index:30}.mobile-dock a,.mobile-dock button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font:9px Manrope,sans-serif;color:#8c8598;background:none;border:0;margin:0;padding:0;text-align:center;min-width:0}.mobile-dock a>span,.mobile-dock button>span{font-size:24px;height:28px;line-height:28px}.mobile-dock a.active{color:var(--gold)}.mobile-dock a.active:after{display:none}.mobile-dock #dock-refill>span{height:37px;line-height:36px;width:44px;background:linear-gradient(135deg,#fadd9b,#dfae61);color:#282018;border-radius:12px;font-size:29px;box-shadow:0 0 22px #f3c16b1a;margin-top:-8px}.mobile-dock small{font-size:7px;color:#a99b82}body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}#toast{bottom:calc(92px + env(safe-area-inset-bottom));max-width:90%;width:max-content;font-size:11px}#selection-bar{bottom:calc(86px + env(safe-area-inset-bottom))}.caseart{height:260px}.caseart>.case-sprite{width:96%}}
@media(max-width:560px){.caseart{height:184px}.caseart>.case-sprite{width:102%}.casecopy{padding-top:10px}.casecopy h3{font-size:24px}.showcase-sprite{width:240px}.related-sprite{width:75px}.case-backword{font-size:30px;top:60px}.case .tag{font-size:6px;top:8px;left:0}.favorite{top:8px;right:0}.case:hover .case-sprite{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.showcase-sprite{animation:none}.caseart>.case-sprite{transition:none}}