/* Round 11. The existing layered card shadow is shared by the instruments. */
:root{--shadow-layered:0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent),0 18px 44px -20px color-mix(in srgb,var(--ink) 34%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.snag-slider{position:relative;min-width:0;width:100%;max-width:100%;isolation:isolate}
#pieceMarquee{overflow:hidden;margin:0;mask-image:none}
.slider-stage{position:relative;perspective:1000px;perspective-origin:50% 40%;height:392px;overflow:hidden;touch-action:pan-y}
.showcase-track{position:absolute;inset:0;transform-style:preserve-3d}
.showcase-piece{position:absolute;left:50%;top:24px;width:200px;transform-origin:center;transition:transform 600ms var(--ease-out-expo),opacity 600ms var(--ease-out-expo)}
.showcase-piece .piece-card{width:200px;animation:none;transform:none;filter:none;box-shadow:none;touch-action:pan-y}
.showcase-piece.is-current .piece-card:not(.is-flipped){animation:showcase-hover 6s var(--ease-soft) infinite}
@keyframes showcase-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.showcase-piece .piece-front .piece-rank{display:none}
.showcase-piece .piece-card.is-flipped{min-height:0;aspect-ratio:auto}
.showcase-piece .piece-back{padding:12px;gap:8px;max-height:344px;overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-layered)}
.showcase-piece .piece-back .tag{font-size:20px}.showcase-piece .piece-back .rarity-summary{font-size:14px;margin:0}
.showcase-piece .piece-back dl>div{display:block;padding:4px 0}.showcase-piece .piece-back dd{text-align:left}.showcase-piece .piece-copy{min-height:48px}
.slider-reflection{position:absolute;pointer-events:none;left:50%;top:260px;width:200px;height:120px;opacity:.14;overflow:hidden;transform:translateX(-50%);mask-image:linear-gradient(var(--ink),transparent 80%)}
.slider-reflection .piece-svg{display:block;width:100%;transform:scaleY(-1);margin-top:-104px}
.slider-stage:has(.is-current .is-flipped) .slider-reflection{opacity:0}
.slider-caption{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:116px;padding:0 16px;text-align:center}
.slider-caption p{margin:0;font:400 14px/1.4 var(--font-body)}
.slider-caption .slider-flip{min-height:48px;font-size:14px;padding:12px 16px}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0;min-width:0}
.slider-controls[hidden]{display:none}
.slider-rail .rail-empty{max-width:100%;white-space:normal}
.slider-controls .slider-arrow{position:static;flex:0 0 48px;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow-layered);font:400 20px/1 var(--font-body)}
.slider-arrow:disabled{opacity:.36;cursor:default}.slider-arrow:focus-visible,.slider-flip:focus-visible{outline:2px solid var(--accent-deep);outline-offset:4px}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;max-width:280px;height:48px}
.slider-dots span{flex:1;max-width:4px;min-width:0;height:4px;border-radius:999px;background:var(--ink);opacity:.2;transform:scaleX(.65);transition:transform 160ms var(--ease-out-expo),opacity 160ms var(--ease-out-expo)}
.slider-showcase .slider-dots{gap:0}
.slider-showcase .slider-dots span{transform:scaleX(.45)}
.slider-showcase .slider-dots .is-active{transform:scaleX(1.5)}
.slider-dots .is-active{opacity:1;transform:scaleX(2)}
.snag-slider.is-dragging .showcase-piece{transition:none}.snag-slider.is-dragging{cursor:grabbing;user-select:none}
.snag-slider.is-dragging .piece-card{pointer-events:none}
.snag-slider .piece-card{transform:none;filter:none;will-change:auto}
.snag-slider .piece-card *,.snag-slider .piece-card *::after{will-change:auto!important}
.snag-slider .piece-body,.snag-slider .piece-eyes,.snag-slider .piece-links,.snag-slider .piece-headwear,.snag-slider .piece-hand,.snag-slider .piece-sweep,.snag-slider .piece-rim,.snag-slider .piece-sparkle,.snag-slider .piece-pane,.snag-slider .piece-arrival,.snag-slider .piece-conic::after{animation:none!important}
.snag-slider:hover .showcase-piece .piece-card,.snag-slider:focus-within .showcase-piece .piece-card,.snag-slider.is-dragging .piece-card,.slider-offscreen .piece-card,.motion-paused .snag-slider .piece-card{animation-play-state:paused}
.slider-rail .rail-scroll,.slider-footer .footer-rail-scroll{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-y;scrollbar-width:none;padding:16px 0}
.slider-rail .rail-pieces{position:relative;display:flex;gap:16px;padding:24px 8px 16px;width:max-content;min-width:100%;max-width:none;justify-content:flex-start}
.slider-rail .rail-pieces::before{content:"";position:absolute;inset:8px 0 auto;height:12px;border:1px solid var(--line);border-inline:8px solid var(--card);border-radius:999px;background:linear-gradient(var(--card) 0 40%,var(--line) 40% 52%,var(--tint) 52%);box-shadow:var(--shadow-layered)}
.slider-rail .rail-piece{position:relative;flex:0 0 200px;width:200px;scroll-snap-align:start;transform-origin:50% 0}
.slider-rail .rail-piece .piece-card{width:200px;touch-action:pan-y}.slider-rail .rail-hook{top:-24px}
.slider-rail .rail-piece{display:flex;flex-direction:column;align-items:center;padding:20px 0 0}
.slider-rail .rail-piece.is-yours{outline:0;background:transparent}
.slider-rail .rail-piece .piece-card{order:0}.slider-rail .rail-piece h3{order:1;margin:12px 0 0}.slider-rail .rail-piece .component-caption{order:2}.slider-rail .rail-piece .piece-back{box-shadow:var(--shadow-layered)}
.slider-footer .footer-piece:nth-child(n+6){display:block}
.slider-footer .footer-piece{flex:0 0 80px;width:80px;scroll-snap-align:start}
.slider-footer .footer-piece .piece-card{width:80px;touch-action:pan-y}.slider-footer #footerPieces>.footer-piece{animation:none}
.slider-footer .footer-rail{gap:16px}.slider-footer .slider-dots span{background:var(--card)}
.slider-rail::before,.slider-rail::after,.slider-footer::before,.slider-footer::after{content:"";position:absolute;z-index:5;top:0;bottom:80px;width:32px;pointer-events:none;opacity:0;transition:opacity 160ms var(--ease-out-expo)}
.slider-rail::before{left:0;background:linear-gradient(to right,var(--ground),transparent)}.slider-rail::after{right:0;background:linear-gradient(to left,var(--ground),transparent)}
.slider-footer::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}.slider-footer::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}
.snag-slider.has-before::before,.snag-slider.has-after::after{opacity:1}
@media(min-width:768px){.showcase-piece,.showcase-piece .piece-card{width:232px}.slider-stage{height:424px}.slider-reflection{top:300px;width:232px}.slider-reflection .piece-svg{margin-top:-140px}.slider-rail .rail-piece{flex-basis:232px;width:232px}.slider-rail .rail-piece .piece-card{width:232px}.slider-footer .footer-piece{flex-basis:96px;width:96px}.slider-footer .footer-piece .piece-card{width:96px}}
@media(min-width:1024px){.showcase-piece,.showcase-piece .piece-card{width:260px}.slider-stage{height:456px}.slider-reflection{top:332px;width:260px}.slider-reflection .piece-svg{margin-top:-172px}}
/* Body portal keeps transformed tiles and the phone sheet below the options. */
.trait-popover{position:fixed;inset:auto;z-index:1000;width:280px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;margin:0;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-layered);animation:trait-open 160ms var(--ease-out-expo)}
.trait-popover[hidden]{display:none}
@keyframes trait-open{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.trait-popover [role=option]{height:40px;min-height:40px;gap:8px;padding:0 12px;font:400 14px/1.4 var(--font-body)}
.trait-popover [role=option]:hover{background:var(--tint)}.trait-popover [role=option]:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.option-chance{font:400 13px/1.4 var(--font-mono);color:color-mix(in srgb,var(--ink) 62%,transparent);margin-left:auto}
.trait-swatch{width:20px;height:20px;border-radius:4px;overflow:hidden}.trait-swatch svg{width:20px;height:20px;display:block;fill:var(--card);stroke:var(--line);stroke-width:1}
.swatch-frame{border-radius:4px;border-width:3px}.swatch-glass{border-radius:4px}.trait-swatch .piece-svg{width:20px;height:20px}
.rarity-segments,.collection-filters{gap:8px}
.rarity-segments button,.rarity-segments button.tag,.trait-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:0 14px;font:400 14px/1 var(--font-body);letter-spacing:0;margin:0;white-space:nowrap}
.rarity-segments button[aria-pressed=false]{background:transparent;color:var(--ink);border-color:var(--line);outline:0}
.rarity-segments button[aria-pressed=true]{outline:0;outline-offset:0}
.rarity-segments button[data-option=""][aria-pressed=true]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.rarity-segments button[aria-pressed=false]:hover{box-shadow:inset 0 0 0 1px var(--accent-deep)}
.rarity-segments .tier-rare[aria-pressed=false]:hover,.rarity-segments .tier-legendary[aria-pressed=false]:hover{box-shadow:inset 0 0 0 1px var(--glow)}
.trait-toggle[data-active=true]{border:1.5px solid var(--ink)}
.trait-toggle [data-count-for]:not(:empty){display:grid;place-items:center;flex:none;width:18px;height:18px;padding:0;border-radius:999px;background:var(--glow);color:var(--ink);font:400 11px/1 var(--font-mono)}
.filter-share{display:none}.collection-filter-panel{min-width:0}.collection-tools{align-items:baseline;gap:8px;min-height:40px;font-size:14px}.collection-tools select{height:40px;min-height:40px;padding:0 8px;font-size:14px;max-width:120px}
.collection-tools #collectionClear{border:0;background:transparent;box-shadow:none;min-height:40px;padding:0 4px;font:400 14px/1 var(--font-body)}
.collection-tools #collectionClear[hidden]{display:none}
.active-filters{gap:12px;margin:12px 0}.active-filters button{position:relative;height:32px;min-height:32px;padding:0 12px;border-radius:999px;font-size:14px;overflow:visible}
.active-filters button::after{content:"";position:absolute;inset:-6px 0;min-height:44px}.active-filters button span{display:inline-grid;place-items:center;width:20px;height:32px}
.collection-grid{position:relative;z-index:0;isolation:isolate}.collection-piece .piece-card:hover{z-index:1}
@media(min-width:768px){.collection-bar{flex-wrap:wrap;gap:8px}.collection-filter-panel{display:contents;position:static;flex-basis:100%;overflow:visible;padding:0}.collection-filters{display:contents;flex-wrap:wrap}.trait-toggle{width:auto}.rarity-segments{flex-basis:100%}.collection-tools{margin-left:auto}.collection-tools output{display:block}.collection-tools select{max-width:96px}}
@media(min-width:1024px){.collection-bar{flex-wrap:nowrap}.collection-filter-panel{display:block;flex:1;overflow-x:auto;scrollbar-width:thin}.collection-filters{display:flex;width:max-content;flex-wrap:nowrap;padding:4px 0}.rarity-segments{flex-basis:auto}.collection-tools{flex:none;white-space:nowrap}.collection-tools select{max-width:120px}}
@media(max-width:767px){.rarity-segments{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.trait-toggle{display:flex;width:100%;margin-top:8px}.collection-tools #collectionClear:not([hidden]){display:block}.collection-tools{gap:8px}.trait-popover{position:fixed;width:280px;max-width:calc(100vw - 32px);padding:8px;border:1px solid var(--line);box-shadow:var(--shadow-layered)}}
@media(prefers-reduced-motion:reduce){.showcase-piece,.slider-dots span,.trait-popover,.slider-rail::before,.slider-rail::after,.slider-footer::before,.slider-footer::after{transition:none;animation:none}.showcase-piece.is-current .piece-card:not(.is-flipped){animation:none}.snag-slider .piece-turn,.snag-slider .piece-back{transition:none!important}}