/* Round 4: shared pieces. Motion consumes existing palette and easing tokens. */
.piece-card{position:relative;display:block;width:100%;min-width:44px;min-height:44px;aspect-ratio:100/120;border:0;padding:0;background:transparent;color:var(--ink);font:400 13px/1.35 var(--font-body);text-align:left;text-transform:none;cursor:pointer;perspective:700px;touch-action:manipulation;isolation:isolate}
.piece-card:focus-visible,.piece-copy:focus-visible,.rail-arrow:focus-visible{outline:3px solid var(--accent-deep);outline-offset:4px}
.piece-turn{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 520ms var(--ease)}
.piece-front,.piece-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.piece-front{transform:rotateY(0deg)}
.piece-card .piece-svg{display:block;width:100%;height:auto;pointer-events:none}
.piece-card .piece-rank{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px}
/* The back is a detail panel. It is never narrower than 232px: on a small card (beam node, odds
   marker) it centres itself over the card instead of inheriting the card's width, which is what
   produced the cramped, scrollbar-ridden panel. It sizes to its content, so it never scrolls. */
.piece-card{container-type:inline-size}
.piece-card.is-flipped{min-height:312px;width:100%;aspect-ratio:auto;z-index:6}
.piece-card.is-flipped .piece-turn{transform:rotateY(180deg)}
.piece-back{transform:rotateY(180deg);inset:0 auto auto 0;width:100%;min-height:100%;height:max-content;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;background:var(--card);border:0;border-radius:20px;padding:18px 18px 16px;overflow:visible;font:400 13px/1.4 var(--font-body);color:var(--ink);box-shadow: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)}
@container (max-width:231px){.piece-back{left:50%;width:232px;margin-left:-116px}}
.piece-back .piece-name{font:700 15px/1.25 var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.piece-back dl{margin:0;display:grid;gap:0}
.piece-back dl>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.piece-back dl>div:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.piece-back dt{font:500 12px/1.3 var(--font-body);letter-spacing:0;text-transform:capitalize;color:var(--ink-soft);white-space:nowrap}
.piece-back dd{margin:0;font:600 13px/1.3 var(--font-body);color:var(--ink);text-align:right;overflow-wrap:anywhere}
.piece-back p{margin:0}
.piece-back p:has(.piece-odds){display:flex;align-items:baseline;gap:6px;font:500 12px/1 var(--font-body);color:var(--ink-soft)}
.piece-back .piece-odds{font:700 24px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.piece-back .tag{margin:0;align-self:flex-start}
.piece-back code{display:inline-block;font:400 12px/1.4 var(--font-mono);color:var(--ink-soft);background:var(--tint);border-radius:8px;padding:6px 8px;margin:0;overflow-wrap:anywhere;user-select:text}
.piece-copy{align-self:flex-start;min-width:44px;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:12px;color:var(--ink);background:var(--card);font:500 13px/1 var(--font-body);cursor:pointer;transition:background-color 180ms var(--ease),transform 180ms var(--ease)}
.piece-copy:hover{background:var(--tint);transform:translateY(-1px)}.piece-copy:active{transform:translateY(0) scale(.98)}
.piece-copy-status{display:block;min-height:1em;font:500 12px/1 var(--font-body);color:var(--accent-deep)}
.piece-card:hover,.piece-card:focus-visible{transform:perspective(700px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.piece-card:active{transform:perspective(700px) translateY(-4px) scale(.98)}
.piece-card.is-turning .piece-turn{will-change:transform}
.piece-body,.piece-eyes,.piece-eye,.piece-headwear,.piece-hand,.piece-links,.piece-sparkle{transform-box:fill-box;transform-origin:center}
.piece-body{transform-origin:center bottom;animation:card-breathe 3.6s ease-in-out var(--piece-delay) infinite}
.piece-eyes{animation:card-blink 9.6s linear var(--piece-delay) infinite}
.piece-pupil{transform:translate(var(--eye-x,0px),var(--eye-y,0px))}
.piece-links{transform-origin:center top;animation:card-links 4.8s ease-in-out var(--piece-delay) infinite}
@keyframes card-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes card-blink{0%,44%,46.5%,100%{transform:scaleY(1)}44.625%,45.875%{transform:scaleY(.1)}}
@keyframes card-links{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.piece-card.piece-live:hover .piece-headwear,.piece-card.piece-live:focus-visible .piece-headwear{animation:card-hat-wave 420ms var(--ease) both}
.piece-card.piece-live:hover .piece-hand,.piece-card.piece-live:focus-visible .piece-hand{animation:card-hand-wave 420ms var(--ease) both}
.piece-hand:nth-child(2){transform-origin:right bottom}
@keyframes card-hat-wave{0%{transform:rotate(0)}30%{transform:rotate(-6deg)}65%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes card-hand-wave{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-12deg) translateY(-3px)}70%{transform:rotate(8deg) translateY(-1px)}}
.piece-sweep,.piece-sparkle,.piece-rim,.piece-conic{display:none;pointer-events:none}
.piece-card[data-rank="uncommon"] .piece-sweep,.piece-card[data-rank="legendary"] .piece-sweep{display:block;animation:card-glint 6s linear var(--piece-delay) infinite}
@keyframes card-glint{0%,65%{transform:translateX(0);opacity:0}68%{opacity:.55}92%{opacity:.55}100%{transform:translateX(140px);opacity:0}}
.piece-rim{position:absolute;inset:11% 5% 12%;border-radius:21%;box-shadow:0 0 16px 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.piece-card[data-rank="rare"] .piece-rim{display:block;animation:card-rim 4.8s ease-in-out var(--piece-delay) infinite}
@keyframes card-rim{0%,100%{opacity:.3}50%{opacity:1}}
.piece-conic{position:absolute;inset:18.3% 15% 21.7%;border-radius:18%;overflow:hidden;clip-path:inset(0 round 18%)}
.piece-card[data-rank="legendary"] .piece-conic{display:block}
.piece-conic::after{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0deg,var(--card) 65deg,transparent 130deg,transparent 360deg);opacity:.18;animation:card-conic 12s linear var(--piece-delay) infinite}
.piece-card[data-rank="legendary"] .piece-sparkle{display:block;fill:var(--card);animation:card-sparkle 3.6s ease-in-out calc(var(--piece-delay) + var(--spark-delay)) infinite}
@keyframes card-conic{to{transform:rotate(360deg)}}
@keyframes card-sparkle{0%,20%,100%{transform:scale(.2);opacity:0}55%{transform:scale(1);opacity:1}}
.piece-card.is-firing.piece-live .piece-pane{animation:card-fill 480ms var(--ease) both}
.piece-card.is-firing.piece-live .piece-arrival{animation:card-rise 540ms var(--ease) 180ms both}
.piece-card.is-firing.piece-live .piece-eyes{animation:card-fire-blink 120ms linear 650ms both}
.piece-card.is-firing.piece-live .piece-hand{animation:card-land 320ms var(--ease) 620ms both}
.piece-card.is-firing.piece-live .piece-headwear{animation:card-hat-drop 420ms var(--ease) 850ms both}
.piece-card.is-firing.piece-live .piece-rank{animation:card-stamp 400ms var(--ease) 1160ms both}
.piece-card.is-firing.piece-live .piece-front{animation:card-proud 560ms var(--ease) 1540ms both}
@keyframes card-fill{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes card-rise{from{transform:translateY(65px)}to{transform:translateY(0)}}
@keyframes card-fire-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes card-land{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes card-hat-drop{0%{transform:translateY(-32px);opacity:0}72%{transform:translateY(1px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes card-stamp{from{transform:translateX(-50%) scale(1.15);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes card-proud{0%,100%{transform:rotateY(0)}50%{transform:rotateY(8deg)}}
/* All idle consumers start paused. The single observer gives at most 24 cards a live class. */
.piece-card:not(.piece-live) *,.piece-card:not(.piece-live) *::after,.piece-card.is-flipped *,.piece-card.is-flipped *::after{animation-play-state:paused!important}
.piece-card.is-flipped.is-turning .piece-back,.piece-card.is-flipped .snag-digit-reel{animation-play-state:running!important}
.piece-card.piece-live .piece-body,.piece-card.piece-live .piece-eyes,.piece-card.piece-live .piece-links{will-change:transform}
.piece-card.is-flipped .piece-body,.piece-card.is-flipped .piece-eyes,.piece-card.is-flipped .piece-links{will-change:auto}
.rail-piece,.rail-section.is-in .rail-piece{animation:none}
.rail-piece{flex-basis:248px;width:248px}
.rail-piece .tilt-tile{width:232px}
.rail-carousel{position:relative;max-width:100%}
.rail-scroll{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.rail-scroll.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rail-scroll.is-dragging .piece-card{pointer-events:none}
.rail-arrow{position:absolute;top:45%;z-index:5;display:grid;place-items:center;width:44px;height:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font:400 20px/1 var(--font-body);cursor:pointer}
.rail-arrow[hidden]{display:none}.rail-prev{left:0}.rail-next{right:0}
.rail-progress{height:2px;background:var(--line);margin-top:12px;overflow:hidden}
.rail-progress>span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
#seedTile{width:248px;max-width:100%}
.odds-group h3{flex-wrap:wrap}
.odds-group h3 .piece-card{width:80px}
.odds-group h3 .piece-card.is-flipped{width:min(100%,248px)}
.odds-group h3 .piece-svg{width:100%;height:auto}
.odds-group h3 .piece-rank{font-size:12px;padding:2px 4px}
.marquee-tile{width:248px;flex:0 0 248px;padding:4px}
.marquee-track.has-flipped,.marquee-track.tab-hidden{animation-play-state:paused}
#pieceMarquee:hover .piece-card *,#pieceMarquee:focus-within .piece-card *,#pieceMarquee:hover .piece-card *::after,#pieceMarquee:focus-within .piece-card *::after{animation-play-state:paused}
#pieceMarquee:hover .piece-card .snag-digit-reel,#pieceMarquee:focus-within .piece-card .snag-digit-reel{animation-play-state:running}
.wallet-journey ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-left:24px;margin:24px 0}
@media(min-width:769px){.nav-links{min-width:280px}.seed-result{grid-template-columns:248px minmax(0,1fr)}}
@media(min-width:769px) and (max-width:900px){.nav-wordmark span{display:none}}
@media(max-width:480px){.piece-preview{min-width:0}.piece-back{padding:12px}.wallet-journey ol{grid-template-columns:minmax(0,1fr)}}
/* Each new animation consumer has an explicit reduced-motion override. */
@media(prefers-reduced-motion:reduce){
 .piece-body{animation:none!important} /* card-breathe */
 .piece-eyes{animation:none!important} /* card-blink */
 .piece-links{animation:none!important} /* card-links */
 .piece-card .piece-headwear{animation:none!important} /* card-hat-wave, card-hat-drop */
 .piece-card .piece-hand{animation:none!important} /* card-hand-wave, card-land */
 .piece-card .piece-sweep{animation:none!important} /* card-glint */
 .piece-card .piece-rim{animation:none!important} /* card-rim */
 .piece-card .piece-conic::after{animation:none!important} /* card-conic */
 .piece-card .piece-sparkle{animation:none!important} /* card-sparkle */
 .piece-card .piece-pane{animation:none!important} /* card-fill */
 .piece-card .piece-arrival{animation:none!important} /* card-rise */
 .piece-card.is-firing .piece-eyes{animation:none!important} /* card-fire-blink */
 .piece-card .piece-rank{animation:none!important} /* card-stamp */
 .piece-card .piece-front{animation:none!important} /* card-proud */
 .piece-card,.piece-card:hover,.piece-card:focus-visible,.piece-card:active,.piece-card .piece-turn{transform:none!important;transition:none!important}
 .piece-card *{will-change:auto!important}.piece-pupil{transform:none}
 .piece-front,.piece-back{transform:none;transition:opacity 140ms linear!important}
 .piece-back{opacity:0;pointer-events:none}.piece-card.is-flipped .piece-back{opacity:1;pointer-events:auto}
 .piece-card.is-flipped .piece-front{opacity:0}
 .piece-card.is-firing .piece-front{animation:card-quiet-fade 160ms linear both!important}
 @keyframes card-quiet-fade{from{opacity:0}to{opacity:1}}
 .piece-card.is-firing .piece-front{animation-play-state:running!important}
 .marquee-set{grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
 .marquee-tile{width:100%}
 .rail-scroll{scroll-behavior:auto}
}

#pieceMarquee:hover .piece-card *,#pieceMarquee:focus-within .piece-card *{will-change:auto}

/* Round 9: a front rank always has its mint-share context. Tiny art keeps details on the back. */
.piece-card .piece-rank{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;white-space:normal;width:100%;text-align:center}
.piece-share{flex-basis:100%;font-weight:600}
@container (max-width:159px){.piece-front .piece-rank{display:none}}
.piece-back p.exact-mix{display:block;line-height:1.5}