.collection-message{color:#adbed0;font-size:13px;min-height:24px;margin:-8px 0 12px;line-height:1.8}
.badge-grid{gap:0 30px}.badge-card{padding:24px 0 30px;position:relative}.badge-card h2{margin-top:8px}.badge-card>p{max-width:32ch;margin-inline:auto;min-height:40px;text-wrap:balance}
.relic-preview{display:block;margin:0 auto 4px;padding:0;border:0;background:transparent;width:min(230px,100%);aspect-ratio:1;cursor:pointer;border-radius:12px;touch-action:manipulation}
.relic-art{display:block;position:relative;width:100%;height:100%;isolation:isolate;filter:drop-shadow(0 9px 11px #0006);transform-origin:center}
.relic-art img{display:block;width:100%;height:100%;padding:12px;object-fit:contain}
.relic-glint{position:absolute;inset:0;background:linear-gradient(112deg,transparent 44%,#fff7d599 49%,#e4f1ffad 50%,transparent 55%);background-size:320% 100%;background-position:140% 0;mask-image:var(--relic-image);-webkit-mask-image:var(--relic-image);mask-size:calc(100% - 24px) calc(100% - 24px);-webkit-mask-size:calc(100% - 24px) calc(100% - 24px);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mix-blend-mode:screen;opacity:0;pointer-events:none}
.relic-spark{position:absolute;display:block;background:#fff0bd;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 40%);opacity:0;pointer-events:none}
.spark-one{width:12px;height:12px;left:26%;top:27%}.spark-two{width:8px;height:8px;left:72%;top:45%}.spark-three{width:6px;height:6px;left:52%;top:78%}
.relic-awake .relic-glint{animation:relic-sheen 9s ease-in-out infinite}.relic-awake .relic-spark{animation:relic-twinkle 6s ease-in-out infinite}.relic-awake .spark-two{animation-delay:2.1s}.relic-awake .spark-three{animation-delay:4.2s}
.badge-card:nth-child(2n) .relic-glint{animation-delay:2s}.badge-card:nth-child(3n) .relic-glint{animation-delay:4.5s}
.badge-card.locked .relic-art{filter:saturate(.52) brightness(.66) drop-shadow(0 9px 11px #0005)}.badge-card.locked .relic-preview:active .relic-art{filter:saturate(.8) brightness(.86)}
.badge-card.locked .relic-glint,.badge-card.locked .relic-spark{display:none}
.relic-preview:hover{transform:none}.relic-preview:active{transform:scale(.985)}
.celebration-relic{width:210px;height:210px;margin:0 auto 12px}.relic-hero{animation:relic-arrival .8s cubic-bezier(.16,1,.3,1) both}
.fitting-secondary{flex-wrap:wrap;column-gap:16px;row-gap:0}.fitting-secondary .text-button{font-size:12px}
.wand-showcase{position:absolute;inset:0;z-index:8;overflow:hidden;background:radial-gradient(ellipse at 48% 38%,#263748aa,transparent 68%),linear-gradient(0deg,#060d16 0%,#09121ef5 30%,#070f1cee);isolation:isolate}
.wand-showcase[hidden]{display:none}.wand-showcase:before{content:'';position:absolute;inset:10%;border:1px solid #b4c1d51c;border-radius:50%;transform:rotate(-24deg) scaleY(.87)}
.wand-showcase canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.showcase-wand{position:absolute;left:50%;top:43%;width:21%;height:68%;object-fit:fill;transform:translate(-50%,-50%) rotate(-24deg);filter:drop-shadow(0 3px 10px #000);z-index:3}
.wand-showcase[data-phase=loading] .showcase-wand{opacity:0}
.showcase-copy{position:absolute;bottom:7%;left:6%;right:6%;text-align:center;z-index:4;text-shadow:0 2px 8px #0009}
.showcase-copy h3{font:500 clamp(17px,1.7vw,23px)/1.4 var(--serif);color:#f7eddc;margin:4px 0 7px}
.showcase-incantation{font:clamp(17px,2vw,26px)/1.25 Cinzel,serif;color:var(--wand-glow);margin:0 0 6px;text-wrap:balance}
.showcase-translation{font-size:11px;line-height:1.7;color:#cad7e3;max-width:30ch;margin:auto;text-wrap:balance}
#wand-showcase-skip{position:absolute;top:10px;right:14px;min-height:44px;padding:8px 12px;font-size:12px;color:#dbe8f2;z-index:5;background:#0c1729bd;border:1px solid #6b819750;border-radius:6px}
.showcase-progress{height:2px;position:absolute;bottom:0;left:0;right:0;background:#35495d50}.showcase-progress span{display:block;height:100%;background:var(--wand-glow);transform:scaleX(0);transform-origin:left}
#fitting-stage.showcasing .fitting-layers,#fitting-stage.showcasing>.fitting-inscription{opacity:0}.wand-showcase[data-reduced=true] canvas{display:none}
@keyframes relic-sheen{0%,65%{background-position:140% 0;opacity:0}69%{opacity:.6}83%{background-position:-40% 0;opacity:.5}87%,100%{background-position:-40% 0;opacity:0}}
@keyframes relic-twinkle{0%,55%,90%,100%{opacity:0;transform:scale(.45) rotate(0)}70%{opacity:.65;transform:scale(1) rotate(30deg)}82%{opacity:0;transform:scale(.6) rotate(45deg)}}
@keyframes relic-arrival{from{opacity:.4;transform:scale(.82) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:900px){.badge-grid{gap:0 18px}.relic-preview{width:min(245px,100%)}.showcase-copy{bottom:5%;left:4%;right:4%}.showcase-copy h3{font-size:17px}.showcase-incantation{font-size:19px}.showcase-translation{font-size:10px}.showcase-wand{top:40%;height:63%}.wand-showcase:before{inset:8% 12% 24%}.celebration-relic{width:180px;height:180px}}
@media(max-width:480px){.badge-grid{gap:0 12px}.badge-card{padding-top:20px}.relic-preview{width:100%}.relic-art img{padding:7px}.relic-glint{mask-size:calc(100% - 14px) calc(100% - 14px);-webkit-mask-size:calc(100% - 14px) calc(100% - 14px)}.badge-card h2{font-size:17px}.collection-message{font-size:12px}.badge-card>p{font-size:12px}.badge-status{font-size:11px}.showcase-copy h3{font-size:18px}}
@media(max-height:600px){.celebration-relic{width:130px;height:130px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.relic-hero,.relic-awake .relic-glint,.relic-awake .relic-spark{animation:none}.relic-preview:active{transform:none}.relic-glint,.relic-spark{display:none}}