/* Pack-opening composition */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { overscroll-behavior: none; }
.stage { position: relative; width: 100%; height: 100%; height: 100svh; background: #000; overflow: clip; }
.wrapper { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pack-interior { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; }
.pack-hit {
  position: absolute; left: 50%; top: 50%; width: var(--pack-width, 320px); height: var(--pack-height, 570px);
  transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; z-index: 3;
}
.pack-hit:disabled { cursor: wait; }
.pack-hit:focus-visible { outline: 1px solid #c6a6ec; outline-offset: 8px; border-radius: 12px; }
.pack-fallback { display: none; width: 100%; height: 100%; pointer-events: none; }
.no-webgl .pack-fallback { display: block; }
.card-reveal { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; transform-origin: 50% 50%; }
.card-reveal[data-extracting] .card { transform: var(--extraction-pose, rotateY(180deg)) !important; }
.stage[data-state="opened"] .card-reveal { opacity: 1; transform: none; pointer-events: auto; }
.stage[data-state="opened"] .wrapper, .stage[data-state="opened"] .pack-hit { display: none; }
.stage[data-state="opened"] .pack-interior { display: none; }
.status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cosmopet screens · Figma 1280 × 720 */
@font-face { font-family: 'Zalando Sans Expanded'; src: url('./assets/fonts/zalando-sans-expanded.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url('./assets/fonts/young-serif.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --ui: 1px; --card-width: 320px; --card-height: 449px; --card-offset: 16px; color-scheme: dark; }
body { font-family: 'Zalando Sans Expanded', sans-serif; color: #fff; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #c6f700; outline-offset: 5px; }
button:disabled { cursor: wait; }
.stage { isolation: isolate; background: transparent; }
.game-background { position: absolute; inset: 0; z-index: 0; background: #0b0610; transition: opacity .6s ease; pointer-events: none; }
.game-background img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.pack-interior { z-index: 1; }
.pack-object { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.card-reveal { z-index: 2; }
.wrapper { z-index: 3; transition: opacity .6s ease; }
.pack-hit { z-index: 4; pointer-events: none; cursor: default; }
.card { width: var(--card-width); }
.card-stage { transform: translateY(var(--card-offset)); transition: transform .75s cubic-bezier(.22,1,.36,1); }
.stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"],[data-screen="returning"]) { --card-offset: calc(-19 * var(--ui)); }
.stage[data-screen="splash"] .wrapper, .stage[data-screen="splash"] .pack-hit { opacity: 0; }
.stage:is([data-screen="leaving"],[data-screen="opening"]) .game-background { opacity: 0; }
.screen-ui { position: absolute; z-index: 10; opacity: 0; pointer-events: none; transition: opacity .35s ease, translate .55s cubic-bezier(.22,1,.36,1); }
.screen-ui.is-visible { opacity: 1; pointer-events: auto; }
.screen-ui img { display: block; pointer-events: none; }
.splash { inset: 0; z-index: 20; pointer-events: none !important; transition-duration: .55s; }
.splash-logo { position: absolute; left: 50%; top: calc(50% - 107 * var(--ui)); width: calc(400 * var(--ui)); height: calc(180 * var(--ui)); translate: -50% 0; overflow: hidden; animation: logo-float 2.5s ease-in-out infinite alternate; }
.splash-logo img { position: absolute; width: 100%; height: 148.33%; top: -24.17%; }
@keyframes logo-float { from { transform: translateY(3px) scale(.985); } to { transform: translateY(-4px) scale(1.02); } }
.obby-brand { position: absolute; left: 50%; bottom: calc(40 * var(--ui)); translate: -50% 0; display: flex; align-items: center; gap: calc(8 * var(--ui)); font: calc(26.165 * var(--ui)) 'Young Serif', serif; height: calc(40 * var(--ui)); }
.obby-brand img { width: calc(46 * var(--ui)); height: calc(35 * var(--ui)); }
.loading-track { position: absolute; left: 50%; top: calc(50% + 100 * var(--ui)); translate: -50% 0; width: calc(258 * var(--ui)); padding: 2px; border: 1px solid #ffffff1f; background: #00000085; border-radius: 7px; }
.loading-bed { height: calc(8 * var(--ui)); min-height: 6px; border-radius: 4px; overflow: hidden; background: #ffffff26; }
.loading-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#da00f7,#f05dce 50%,#86db4a); transform-origin: left; transform: scaleX(0); animation: boot-progress 2.5s cubic-bezier(.2,.6,.5,1) forwards; }
@keyframes boot-progress { to { transform: scaleX(1); } }
.stage:not([data-screen="splash"]) .splash * { animation-play-state: paused; }
.obby-comment { top: calc(25 * var(--ui)); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--ui)); white-space: nowrap; }
.obby-comment img { width: calc(46 * var(--ui)); height: calc(35 * var(--ui)); }
.obby-comment p { margin: 0; font: calc(16 * var(--ui))/1.3 'Young Serif',serif; color: #c6f700; }
.glass-button { display: flex; gap: calc(10 * var(--ui)); align-items: center; justify-content: center; height: calc(60 * var(--ui)); padding: 0 calc(20 * var(--ui)); border-radius: 999px; border: 1px solid #1b1b1d; background: #77736b75; backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); box-shadow: inset 0 3px #ffffff0d; font-size: calc(20 * var(--ui)); white-space: nowrap; transition: background .2s, opacity .35s, translate .55s; }
.glass-button:hover { background: #8c847f85; }
.glass-button:active { background: #60596199; }
.glass-button img, .bet-control img { width: calc(24 * var(--ui)); height: calc(24 * var(--ui)); flex: none; }
.utility-actions { display: flex; gap: calc(10 * var(--ui)); left: calc(40 * var(--ui)); bottom: calc(40 * var(--ui)); }
.icon-button { width: calc(60 * var(--ui)); padding: 0; }
.binder-control { width: calc(200 * var(--ui)); right: calc(40 * var(--ui)); bottom: calc(40 * var(--ui)); }
.open-control { overflow: hidden; left: 50%; top: calc(50% + 47 * var(--ui)); translate: -50% -50%; display: flex; align-items: center; gap: calc(10 * var(--ui)); height: calc(60 * var(--ui)); padding: 0 calc(20 * var(--ui)) 0 calc(10 * var(--ui)); border: 1px solid #04011352; border-radius: 999px; background: #ea3cf3c7; backdrop-filter: blur(4.65px); -webkit-backdrop-filter: blur(4.65px); box-shadow: inset 0 0 9.5px #00000070; font-size: calc(20 * var(--ui)); transition: opacity .3s, background .25s, border-color .25s, box-shadow .25s; }
.open-control:hover { background: #f264f6e6; }
.open-arrow { display: grid; place-items: center; background: #fff; width: calc(40 * var(--ui)); height: calc(40 * var(--ui)); border-radius: 50%; transform: translateX(var(--open-arrow-x,0px)); opacity: var(--open-arrow-opacity,1); }
.open-arrow img { width: calc(24 * var(--ui)); height: calc(24 * var(--ui)); }
.open-label { transition: opacity .18s; }
.open-control.is-visible { opacity: var(--open-pack-opacity,1); }
.stage:not(:is([data-screen="home"],[data-screen="returning-pack"])) .open-control { pointer-events: none; }
.stage:is([data-screen="leaving"],[data-screen="opening"],[data-screen="arriving"]) .open-control { transition: none; }
.stage:not(:is([data-screen="home"],[data-screen="returning-pack"])) .open-label { opacity: 0; }
.stage[data-screen="returning-pack"] :is(.open-control,.open-label) { transition: none; }
.stage[data-screen="returning-pack"] .open-control { pointer-events: none; }
/* The arrow and tear share the JS opening clock; no independent CSS delay. */
.stage:is([data-screen="leaving"],[data-screen="opening"]) .obby-comment { translate: -50% -45px; }
.stage:is([data-screen="leaving"],[data-screen="opening"]) :is(.utility-actions,.binder-control) { translate: 0 75px; }
.stage:is([data-screen="leaving"],[data-screen="opening"]) .round-setup { translate: -50% 75px; }
.round-setup { display: flex; gap: calc(20 * var(--ui)); left: 50%; bottom: calc(40 * var(--ui)); translate: -50% 0; align-items: center; }
.bet-picker { position: relative; }
.bet-control, .quantity-control { display: flex; align-items: center; gap: calc(5 * var(--ui)); border: 1px solid #565656; border-radius: 999px; background: #0000001c; backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); box-shadow: inset 0 3px #ffffff0d; }
.bet-control { width: calc(185 * var(--ui)); height: calc(52 * var(--ui)); padding: calc(5 * var(--ui)) calc(10 * var(--ui)); font-size: calc(20 * var(--ui)); }
.bet-control span { flex: 1; }
.quantity-control { padding: calc(5 * var(--ui)); }
.quantity-control button { --quantity-size: calc(40 * var(--ui)); display: grid; place-items: center; flex: none; width: var(--quantity-size); height: var(--quantity-size); padding: 0; border-radius: 50%; border: 1px solid #ffffff0f; color: #ffffff80; background: transparent; font-size: calc(16 * var(--ui)); transition: color .2s,background .2s; }
.quantity-control button[aria-pressed="true"] { background: #97ea12; color: #172402; border-color: #1b1b1d; box-shadow: inset 0 3px #ffffff0d; }
.bet-options { position: absolute; left: 0; bottom: calc(100% + 10px); width: 100%; padding: 5px; border: 1px solid #565656; border-radius: 18px; background: #1e1728f2; box-shadow: 0 12px 30px #0008; }
.bet-options button { display: block; width: 100%; border: 0; background: transparent; padding: 10px; border-radius: 12px; font-size: calc(17 * var(--ui)); }
.bet-options button:hover, .bet-options button[aria-selected="true"] { background: #97ea1226; color: #c6f700; }
.swipe-guide { width: calc(80 * var(--ui)); height: calc(var(--card-height) + 108 * var(--ui)); left: calc(50% + 6 * var(--ui)); top: calc(50% + 8 * var(--ui)); translate: -50% -50%; z-index: 1; pointer-events: none !important; }
.swipe-guide svg { display: block; width: 100%; height: 100%; overflow: visible; }
.guide-orbit { animation: guide-orbit 2.8s linear infinite; transform: rotate(180deg); transform-origin: 0 0; }
.guide-orbit path { stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.guide-orbit .guide-trail { stroke: url(#guide-tail-fade); }
@keyframes guide-orbit { from { transform: rotate(180deg); } to { transform: rotate(-180deg); } }
.stage[data-guide="false"] .swipe-guide { opacity: 0; }
.swipe-guide:not(.is-visible) .guide-orbit, .stage[data-guide="false"] .guide-orbit { animation: none; }
.card-counter { display: flex; align-items: center; gap: calc(10 * var(--ui)); left: 50%; top: calc(50% + 280 * var(--ui)); translate: -50% 0; font-size: calc(14 * var(--ui)); line-height: calc(20 * var(--ui)); font-variant-numeric: tabular-nums; transition: top .75s cubic-bezier(.22,1,.36,1),opacity .35s; }
.counter-divider { opacity: .6; }
.stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"]) .card-counter { top: calc(50% + 225 * var(--ui)); }
.card-actions { display: flex; gap: calc(10 * var(--ui)); left: 50%; bottom: calc(40 * var(--ui)); translate: -50% 20px; }
.card-actions.is-visible { translate: -50% 0; transition-delay: .15s; }
@media (max-width: 700px) {
 .obby-comment { top: max(20px, env(safe-area-inset-top)); }
 .obby-comment p { font-size: 14px; }
 .obby-comment img { width: 38px; height: 29px; }
 .obby-comment { gap: 10px; }
 .utility-actions { left: 18px; bottom: max(20px,env(safe-area-inset-bottom)); gap: 7px; }
 .glass-button { height: 46px; padding: 0 15px; font-size: 15px; gap: 8px; }
 .glass-button img { width: 21px; height: 21px; }
 .icon-button { width: 44px; height: 44px; padding: 0; }
 .binder-control { width: 150px; right: 18px; bottom: max(20px,env(safe-area-inset-bottom)); }
 .round-setup { bottom: 94px; gap: 10px; }
 .bet-control { width: 142px; height: 48px; font-size: 17px; }
 .quantity-control { gap: 3px; padding: 4px; }
 .quantity-control button { --quantity-size: 36px; font-size: 14px; }
 .card-actions { bottom: 94px; gap: 12px; }
 .card-counter { top: calc(50% + var(--card-height) / 2 + 50px); font-size: 13px; }
 .stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"],[data-screen="returning"]) { --card-offset: -36px; }
 .stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"]) .card-counter { top: calc(50% + var(--card-height) / 2 - 18px); }
 .swipe-guide { height: calc(var(--card-height) + 90px); width: 65px; top: calc(50% + 4px); }
 .splash-logo { width: min(360px,90vw); height: min(162px,40.5vw); top: calc(50% - 100px); }
 .loading-track { width: 230px; top: calc(50% + 88px); }
 .obby-brand { bottom: 38px; }
 .open-control { height: 54px; font-size: 18px; padding: 0 18px 0 8px; gap: 9px; top: calc(50% + 38px); }
 .open-arrow { width: 38px; height: 38px; }
}
@media (max-height: 550px) and (min-width: 701px) { .glass-button { min-height: 40px; } .icon-button { min-width: 40px; } }
@media (prefers-reduced-motion: reduce) {
 .screen-ui, .card-stage, .card-counter, .open-control, .open-arrow, .game-background { transition-duration: .1s; }
 .splash-logo, .guide-orbit { animation: none; }
}
.stage { --card-offset: var(--wait-offset,16px); }
.stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"],[data-screen="returning"]) { --card-offset: calc(-19 * var(--ui)); }
@media(max-width:700px) { .stage:is([data-screen="revealed"],[data-screen="selling"],[data-screen="sold"],[data-screen="fast"],[data-screen="returning"]) { --card-offset: -36px; } }
@media(max-width:360px) {
 .utility-actions { left: 14px; gap: 5px; }
 .binder-control { right: 14px; width: 124px; font-size: 12px; padding: 0 10px; gap: 6px; }
 .binder-control img { width: 18px; height: 18px; }
 .round-setup { gap: 8px; }
 .bet-control { width: 124px; font-size: 15px; }
 .quantity-control button { --quantity-size: 33px; }
 .card-actions { gap: 8px; }
 .card-actions .glass-button { font-size: 13px; padding: 0 11px; gap: 7px; }
 .card-actions .glass-button img { width: 18px; height: 18px; }
 .obby-comment p { font-size: 12px; }
}

/* Shared session totals: Figma Block/StatLine. */
.stat-line { left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(10 * var(--ui)) calc(45 * var(--ui)); color: #ffffff99; font-size: calc(14 * var(--ui)); line-height: calc(20 * var(--ui)); text-transform: uppercase; white-space: nowrap; }
.stat-line p { margin: 0; }
.stat-balance, .stat-binder { width: calc(240 * var(--ui)); }
.stat-binder { text-align: right; }
.stat-round { display: flex; gap: calc(30 * var(--ui)); }
.stage:is([data-screen="leaving"],[data-screen="opening"]) .stat-line { translate: 0 40px; }
@media(max-width:700px) {
 .stat-line { top: calc(92px + max(0px, env(safe-area-inset-top) - 20px)); bottom: auto; padding: 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 10px; line-height: 14px; }
 .stat-round { display: contents; }
 .stat-balance, .stat-binder { width: auto; }
 .stat-round p:first-child { text-align: right; }
 .stage:is([data-screen="leaving"],[data-screen="opening"]) .stat-line { translate: 0 -30px; }
}
@media(max-width:360px) { .stat-line { padding-inline: 14px; font-size: 8.5px; } }

/* Reveal FX shares the counter row from Figma. */
.card-counter { width: calc(320 * var(--ui)); padding: 0 calc(10 * var(--ui)); justify-content: space-between; }
.card-number { display: flex; align-items: center; gap: calc(10 * var(--ui)); }
.reveal-fx { display: flex; align-items: center; gap: calc(8 * var(--ui)); height: calc(32 * var(--ui)); margin-block: calc(-6 * var(--ui)); padding: 0; border: 0; background: none; font: inherit; text-transform: uppercase; white-space: nowrap; }
.fx-track { position: relative; flex: none; width: calc(24 * var(--ui)); height: calc(16 * var(--ui)); border-radius: 999px; background: #77736b75; border: 1px solid #1b1b1d; box-shadow: inset 0 3px #ffffff0d; }
.fx-thumb { position: absolute; top: calc(3 * var(--ui) - 1px); left: calc(3 * var(--ui) - 1px); width: calc(10 * var(--ui)); height: calc(10 * var(--ui)); border-radius: 50%; background: #54c427; translate: calc(8 * var(--ui)) 0; transition: translate .2s ease,background .2s ease; }
.reveal-fx[aria-checked="false"] .fx-thumb { translate: 0 0; background: #b7b3ac; }
.reveal-fx[aria-checked="false"] > span:last-child { opacity: .6; }
@media(max-width:700px) {
 .card-counter { width: min(320px,calc(100% - 28px)); padding-inline: 10px; }
 .reveal-fx { min-height: 32px; font-size: 12px; gap: 8px; }
 .fx-track { width: 24px; height: 16px; }
 .fx-thumb { width: 10px; height: 10px; top: 2px; left: 2px; translate: 8px 0; }
 .reveal-fx[aria-checked="false"] .fx-thumb { translate: 0 0; }
}
@media(prefers-reduced-motion:reduce) { .fx-thumb { transition: none; } }

/* Quick mode uses the same animation path with a faster shared opening clock. */
.quick-control[aria-pressed="true"] { background: #97ea12; border-color: #97ea12; box-shadow: inset 0 3px #ffffff22,0 0 16px #97ea1220; }
.quick-control[aria-pressed="true"] img { filter: brightness(0); }
@media(prefers-reduced-motion:no-preference) {
 .stage[data-quick="true"] .screen-ui:not(.splash):not(.open-control) { transition-duration: .18s; }
 .stage[data-quick="true"] .card-stage { transition-duration: .25s; }
}

/* Figma 340:7638: the sold back shares the original frame and surface finish. */
@font-face { font-family: 'Zalando Sans Expanded'; src: url('./assets/fonts/zalando-sans-expanded-italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }
.sold-scene { display: none; background: #251044; }
.card[data-back-variant="sold"] .back .sold-scene,
.card[data-front-variant="sold"] .front .sold-scene { display: block; }
.card[data-back-variant="sold"] .portal-scene { display: none; }
.card[data-front-variant="sold"] .front-scene:not(.sold-scene) { display: none; }
.sold-background { left: -36.190476%; top: -36.818182%; width: 172.380952%; height: 164.545455%; }
.coin-03 { left: -10.793651%; top: 9.318182%; width: 52.063492%; height: 37.272727%; }
.coin-02 { left: 55.555556%; top: 12.5%; width: 31.746032%; height: 22.727273%; --coin-angle: 7deg; }
.coin-01 { left: 23.968254%; top: 52.954545%; width: 45.238095%; height: 32.386364%; --coin-angle: -7deg; }
.coin-art { transform: rotate(calc(var(--coin-angle,0deg) + var(--layer-roll,0deg))); }
.coin-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin-shadow { position: absolute; left: -7.8125%; top: -7.8125%; width: 115.625%; height: 115.625%; transform: translate(var(--stone-shadow-x,0px),var(--stone-shadow-y,3px)); }
.sold-price { position: absolute; top: 45.454545%; left: 50%; translate: -50% 0; white-space: nowrap; font: italic 700 calc(84.607 * var(--scene-unit))/1.22 'Zalando Sans Expanded',sans-serif; letter-spacing: calc(3.3843 * var(--scene-unit)); -webkit-text-stroke: calc(16.052 * var(--scene-unit)) #180b3a; paint-order: stroke fill; color: white; }
.sell-control { min-width: calc(205 * var(--ui)); }
.sell-control.is-sold, .sell-control.is-sold:hover { background: #54c42747; opacity: 1; cursor: default; }
.stage[data-screen="selling"] .next-control { opacity: .5; }
@media(max-width:700px) { .sell-control { min-width: 148px; } }
@media(max-width:360px) { .sell-control { min-width: 130px; } }

/* A bounded, shared-bitmap queue behind the one interactive card. */
.card-motion, .card-stack { position: absolute; inset: 0; pointer-events: none; }
.card-motion { z-index: 2; transform-origin: 50% calc(50% + var(--card-offset)); }
.card-motion .card { pointer-events: auto; }
.card-stack { z-index: 1; transform: translateY(var(--card-offset)); transition: transform .75s cubic-bezier(.22,1,.36,1); }
.stack-card { position: absolute; left: 50%; top: 50%; width: var(--card-width); height: var(--card-height); translate: -50% -50%; pointer-events: none; }
.stack-card img { display: block; width: 100%; height: 100%; transform: perspective(calc(var(--card-width) * 3.42)) rotateX(4deg) rotateY(9deg) rotateZ(2deg); filter: brightness(var(--stack-brightness,.8)); }
.departing-card { z-index: 3; pointer-events: none !important; }
.departing-card * { pointer-events: none !important; }
.skip-control[hidden], .stack-card[hidden] { display: none; }
@media (max-width: 700px) {
 .stage[data-bulk="true"] .card-actions { gap: 6px; }
 .stage[data-bulk="true"] .card-actions .glass-button { padding: 0 10px; gap: 6px; font-size: clamp(12px,3.4vw,14px); }
 .stage[data-bulk="true"] .card-actions .glass-button img { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
 .card-stack { transition-duration: .1s; }
}

/* Collection feedback shares the existing front art and the Figma binder button. */
.binder-control.is-collecting { background: #97ea128f; box-shadow: inset 0 3px #ffffff0d,0 0 24px #97ea1226; }
:is([data-stat="binder"],[data-stat="win"]) { display: inline-block; font-variant-numeric: tabular-nums; transition: color .3s,text-shadow .3s; }
:is([data-stat="binder"],[data-stat="win"]).is-counting { color: #97ea12; text-shadow: 0 0 14px #97ea1240; }
.binder-flights { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: clip; }
.binder-flight { position: absolute; pointer-events: none; transform-origin: center; }
.binder-art { position: relative; width: 100%; height: 100%; --scene-unit: 1px; --shine: .12; pointer-events: none; }
.binder-art .front { transform: none; visibility: visible; }
.binder-art * { animation: none !important; will-change: auto !important; }
/* Clip only beneath the button; rotated outer cards need room above and beside the fan. */
.binder-fan { position: absolute; z-index: 9; pointer-events: none; overflow: visible; clip-path: inset(-30% -30% 0); opacity: 0; transform: translateY(16px); transition: opacity .25s,transform .4s cubic-bezier(.22,1,.36,1); }
.binder-fan.is-visible { opacity: 1; transform: translateY(0); }
.binder-fan .binder-art { position: absolute; width: 48%; height: auto; aspect-ratio: 633/888; top: 0; left: 26%; transform-origin: 50% 95%; transform: translateX(var(--fan-x)) rotate(var(--fan-angle)); }
.stage:is([data-screen="leaving"],[data-screen="opening"],[data-screen="splash"]) .binder-fan { opacity: 0; }
@media (max-width: 700px) {
 /* Let the receipt fan tuck away as the nearby pack/card controls return. */
 .stage:not(:is([data-screen="returning"],[data-screen="returning-pack"])) .binder-fan { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
 .binder-fan { transform: none; transition-duration: .1s; }
}

/* The collection keeps its authored SVG hierarchy and rarity-specific silhouette. */
@font-face { font-family: 'Zen Dots'; src: url('./assets/collection/art/ZenDots-Regular.ttf') format('truetype'); font-display: block; }
.collection-sold-frame { display: none; }
.card[data-front-variant="sold"] .collection-artwork { display: none; }
.card[data-front-variant="sold"] .collection-sold-frame { display: block; }
.collection-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.binder-art .collection-artwork { display: block; }

/* Binder: session catalog, a single live card, and per-copy sales. */
.binder-panel[hidden] { display: none; }
.binder-panel { position:absolute; inset:0; z-index:50; display:grid; grid-template-columns:minmax(0,570fr) minmax(0,350fr) minmax(0,280fr); padding:calc(40 * var(--ui)) calc(40 * var(--ui)) calc(110 * var(--ui)); background:#0b0610; isolation:isolate; font-variant-numeric:normal; }
.binder-world { position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.binder-world img { position:absolute; object-fit:cover; }
.binder-space { scale:1.15; width:119.14%; height:100%; left:-13.83%; top:0; }
.binder-planet { width:14.22%; aspect-ratio:1; left:44.53%; top:1.94%; animation:binder-planet-drift 8s ease-in-out infinite alternate; }
.binder-stones { width:19.53%; aspect-ratio:1; left:62.5%; top:2.78%; animation:binder-stone-drift 9.5s -4s ease-in-out infinite alternate; }
.binder-world-shade { position:absolute; inset:0; background:radial-gradient(ellipse 25% 47% at 60% 48%,transparent,#000b); }
.binder-foreground { position:absolute; z-index:8; pointer-events:none; width:24.61%; left:36.56%; top:79.16%; filter:blur(3.7px); }
.binder-catalog { width:calc(540 * var(--ui)); max-width:100%; margin-bottom:calc(-110 * var(--ui)); min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; z-index:2; }
.binder-catalog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 20px; border-bottom:1px solid #ffffff47; }
.binder-grouping { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
.binder-grouping button { border:0; background:none; padding:0; font-size:clamp(10px,1.094vw,16px); line-height:20px; text-transform:uppercase; color:#fff; }
.binder-grouping button[aria-pressed="true"] { color:#fff; }
.binder-grouping .binder-group-track { position:relative; width:24px; height:20px; min-height:20px; flex:none; padding:5px 3px; }
.binder-group-track::before { content:""; position:absolute; inset:2px 0; border-radius:12px; background:#ffffff29; }
.binder-group-track::after { content:''; position:relative; display:block; width:10px; height:10px; border-radius:50%; background:#97ea12; transition:translate .2s; }
.binder-panel[data-group="character"] .binder-group-track::after { translate:8px 0; }
.binder-progress { margin:0; color:#fff9; font-size:clamp(10px,1.094vw,16px); line-height:20px; text-transform:uppercase; white-space:nowrap; font-variant-numeric:normal; text-align:right; }
.binder-list { flex:1; width:calc(100% + 12px); margin-left:-2px; min-height:0; overflow:auto; overscroll-behavior:contain; padding:28px 10px 20px 2px; scrollbar-width:none; }
.binder-section { padding-bottom:30px; margin-bottom:28px; border-bottom:1px solid #ffffff3d; }
.binder-section:last-child { border:0; margin-bottom:0; padding-bottom:0; }
.binder-section>header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:20px; }
.binder-section h2 { font-family:'Zen Dots',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(14px,1.719vw,26px); letter-spacing:.04em; margin:0; }
.binder-section-progress { display:flex; align-items:center; gap:10px; font-size:clamp(10px,1.09vw,15px); white-space:nowrap; font-variant-numeric:normal; }
.binder-section progress { width:calc(100 * var(--ui)); max-width:8vw; height:6px; border:0; border-radius:6px; overflow:hidden; background:#ffffff24; }
.binder-section progress::-webkit-progress-bar { background:#ffffff24; }
.binder-section progress::-webkit-progress-value { background:#97ea12; border-radius:6px; }
.binder-section progress::-moz-progress-bar { background:#97ea12; border-radius:6px; }
.binder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(30 * var(--ui)) calc(20 * var(--ui)); padding:0 0 6px; }
.binder-tile { position:relative; min-width:0; align-self:start; padding:7%; border:2px solid #ffffff36; border-radius:calc(16 * var(--ui)); background:#18181833; transition:border-color .2s,box-shadow .2s,background .2s; }
.binder-tile.is-owned { border-color:#ffffffb3; }
.binder-tile:hover { background:#ffffff0c; border-color:#ffffff80; }
.binder-tile img { display:block; width:100%; height:auto; aspect-ratio:300/419; object-fit:contain; pointer-events:none; }
.binder-tile[aria-pressed="true"] { border-color:#aedc04; box-shadow:inset 0 0 10.3px #bbf9237a,0 0 15px #a0ee1712; }
.binder-copy-count { position:absolute; right:-6px; top:-6px; min-width:calc(30 * var(--ui)); height:calc(30 * var(--ui)); padding:0 5px; display:flex; align-items:center; justify-content:center; border:2px solid #70765e; border-radius:50px; background:#0005; font-size:clamp(11px,1.09vw,16px); }
.binder-tile[aria-pressed="true"] .binder-copy-count { border-color:#aedc04; }
.binder-tile-worth { position:absolute; left:50%; bottom:calc(-15 * var(--ui)); translate:-50% 0; padding:4px 7px; border:1px solid #ffffff29; border-radius:30px; background:#0004; font-size:clamp(10px,1.09vw,15px); white-space:nowrap; font-variant-numeric:normal; }
.binder-preview-area { translate:calc(-17 * var(--ui)) calc(10 * var(--ui)); position:relative; min-width:0; min-height:0; align-self:stretch; display:grid; align-items:center; padding-top:calc(65 * var(--ui)); }
.binder-altar { position:absolute; width:calc(520 * var(--ui)); height:calc(529 * var(--ui)); left:50%; top:50%; translate:-50% -43%; pointer-events:none; z-index:-1; }
.binder-altar img { position:absolute; }
.binder-portal { left:15.02%; top:10.09%; width:69.06%; aspect-ratio:1; animation:binder-portal 42s linear infinite; }
.binder-arch { left:10.65%; top:0; width:78.45%; aspect-ratio:1; }
.binder-stand { left:0; top:44.7%; width:100%; height:55.3%; }
.binder-preview { translate:0 calc(-48 * var(--ui)); position:relative; width:100%; height:calc(345 * var(--ui)); z-index:1; display:grid; place-items:center; }
.binder-preview .card-stage { position:absolute; inset:0; height:100%; width:100%; transform:none; transition:none; }
.binder-preview .card { width:calc(262 * var(--ui)); }
.binder-preview-placeholder { height:calc(366 * var(--ui)); max-width:95%; width:auto; object-fit:contain; animation:binder-float 5s ease-in-out infinite alternate; }
.binder-preview-note { position:absolute; top:calc(50% + 215 * var(--ui)); left:0; right:0; margin:0; text-align:center; color:#ffffff85; font-size:10px; }
.binder-details { align-self:center; min-width:0; position:relative; z-index:2; padding-left:0; display:flex; flex-direction:column; gap:calc(30 * var(--ui)); }
.binder-heading h1 { font:400 clamp(18px,2.02vw,30px)/1.25 'Zen Dots',sans-serif; text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px; overflow-wrap:anywhere; }
.binder-description { height:4.05em; font-size:clamp(10px,.938vw,14px); line-height:1.35; letter-spacing:.04em; margin:0 0 15px; }
.binder-edition { font-size:10px; line-height:1.3; letter-spacing:.04em; color:#fff9; margin:0 0 3px; }
.binder-owned { font-size:clamp(11px,1.09vw,16px); margin:0; font-variant-numeric:normal; }
.binder-copies { height:calc(170 * var(--ui)); min-height:calc(170 * var(--ui)); overflow:auto; scrollbar-width:thin; scrollbar-color:#e2b9fb3b transparent; border-top:1px solid transparent; border-bottom:1px solid #ffffff47; }
.binder-copies.is-scrolled { border-top-color:#ffffff47; }
.binder-sale-slot[hidden] { display:none; }
.binder-copy { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid #ffffff38; min-height:52px; }
.binder-copy:first-child { padding-top:0; min-height:41px; }
.binder-copy:last-child { border-bottom:0; }
.binder-copy label { display:flex; gap:8px; align-items:center; font-size:clamp(11px,1.09vw,16px); cursor:pointer; min-height:30px; }
.binder-copy input { appearance:none; margin:0; width:22px; height:22px; flex:none; border:1px solid #fff; border-radius:6px; background:#0005; cursor:pointer; }
.binder-copy input:checked { background:#7ffa16 url('./assets/ui/binder-check.svg') center/22px no-repeat; border-color:#7ffa16; }
.binder-copy input:focus-visible { outline:2px solid #e2b9fb; outline-offset:3px; }
.binder-copy button { border:1px solid #565656; box-shadow:inset 0 3px #ffffff0d; background:#0002; border-radius:25px; padding:6px 12px; min-width:47%; min-height:30px; font-size:clamp(10px,.938vw,14px); white-space:nowrap; }
.binder-copy button:hover { background:#e2b9fb22; border-color:#e2b9fb; }
.binder-copy.is-selected { color:#7ffa16; }
.binder-copy.is-selected button { border-color:#7ffa16; }
.binder-sell-selected { border:1px solid #e2b9fb; border-radius:25px; background:#0003; box-shadow:inset 0 3px #ffffff0d; width:100%; min-height:calc(50 * var(--ui)); padding:5px 20px 5px 10px; display:flex; align-items:center; gap:5px; color:#e2b9fb; font-size:clamp(12px,1.25vw,18px); line-height:40px; }
.binder-sell-selected img { width:24px; height:24px; flex:none; }
.binder-sell-selected output { margin-left:auto; color:white; font-size:clamp(11px,1.094vw,16px); line-height:normal; white-space:nowrap; }
.binder-sell-selected[data-has-selection="false"] { color:#ffffff52; border-color:#ffffff52; cursor:default; }
.binder-sell-selected output[hidden] { display:none; }
.binder-sell-selected:enabled:hover { background:#e2b9fb20; }
.binder-empty { color:#ffffff65; font-size:12px; line-height:1.5; }
.binder-sell-selected[data-sale-state="sold"] { justify-content:center; gap:5px; padding-inline:8px; border-color:#97ea12; color:#97ea12; font-size:clamp(10px,1.094vw,14px); cursor:default; }
.binder-sell-selected[data-sale-state="sold"] img { width:20px; height:20px; }
.binder-sell-selected[data-sale-state="sold"] span { line-height:1.4; }
.binder-control.is-binder-back img { display:none; }
.binder-back-icon,.binder-footer-worth { display:none; }
.binder-control.is-binder-back .binder-back-icon { display:block; flex:none; width:24px; height:24px; }
.stage[data-binder-open="true"]>.binder-control { z-index:60; }
.stage[data-binder-open="true"]>.stat-line { z-index:60; pointer-events:none; }
.stage[data-binder-open="true"]:not([data-binder-transition="leaving"]) .stat-balance,.stage[data-binder-open="true"]:not([data-binder-transition="leaving"]) .stat-round { visibility:hidden; }
.stage[data-binder-open="true"]>.binder-fan { visibility:hidden; }
.stage[data-binder-open="true"]>.utility-actions { visibility:hidden; }
.stage[data-binder-open="true"]>.card-reveal { visibility:hidden; }
[data-stat="binder"].is-decreasing { color:#ff7089; text-shadow:0 0 14px #ff587755; transition:color .15s; }
@keyframes binder-portal { to { transform:rotate(360deg); } }
@keyframes binder-float { from { transform:translateY(-4px) rotate(-1deg); } to { transform:translateY(5px) rotate(1deg); } }
@media(max-width:1000px) and (min-width:701px) {
 .binder-grouping { gap:5px; }
 .binder-catalog-head { flex-wrap:wrap; row-gap:8px; }
 .binder-progress { margin-left:auto; }
 .binder-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 14px; }
 .binder-panel { grid-template-columns:minmax(0,42fr) minmax(0,30fr) minmax(250px,28fr); }
 .binder-details { padding-left:10px; }
 .binder-section-progress progress { display:none; }
}
@media(max-width:700px) {
 .binder-panel { scroll-padding-bottom:100px; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; padding:0 18px 100px; }
 .binder-world { position:fixed; }
 .binder-space { width:240%; left:-95%; object-fit:cover; }
 .binder-world-shade { background:linear-gradient(#0004,#0b0610da 70%); }
 .binder-planet { width:34%; left:2%; top:4%; }
 .binder-stones { width:55%; left:53%; top:3%; }
 .binder-preview-area { translate:none; order:0; flex:none; width:100%; height:355px; padding-top:38px; }
 .binder-altar { width:390px; height:397px; top:21px; translate:-50% 0; }
 .binder-preview { height:280px; translate:0 -25px; }
 .binder-preview .card { width:210px; }
 .binder-preview-placeholder { height:293px; }
 .binder-preview-note { top:auto; bottom:9px; }
 .binder-details { flex:none; order:1; padding:10px 0 30px; width:100%; gap:18px; }
 .binder-heading h1 { font-size:24px; }
 .binder-description { font-size:12px; max-width:460px; }
 .binder-owned { font-size:14px; }
 .binder-copies { height:auto; min-height:0; overflow:visible; border:0; }
 .binder-sale-slot { min-height:70px; }
 .binder-sale-action { border-top:1px solid #ffffff47; padding-top:17px; }
 .binder-panel[data-mobile-view="detail"][data-sale-docked="true"] { scroll-padding-bottom:190px; }
 .binder-panel[data-mobile-view="detail"][data-sale-docked="true"] .binder-sale-action { position:fixed; z-index:10; left:18px; right:18px; bottom:calc(max(18px,env(safe-area-inset-bottom)) + 80px); background:#0b0610; isolation:isolate; }
 .binder-panel[data-mobile-view="detail"][data-sale-docked="true"] .binder-sale-action::before { content:""; position:absolute; z-index:-1; top:0; left:-18px; right:-18px; bottom:calc(-1 * (max(18px,env(safe-area-inset-bottom)) + 80px)); background:#0b0610; pointer-events:none; }
 .binder-panel[data-mobile-view="detail"][data-sale-docked="true"] .binder-details { padding-bottom:110px; }
 .binder-copy { min-height:54px; }
 .binder-copy button { min-height:40px; font-size:12px; }
 .binder-copy label { font-size:14px; min-height:40px; }
 .binder-sell-selected { min-height:48px; font-size:14px; }
 .binder-sell-selected output { font-size:14px; }
 .binder-sell-selected[data-sale-state="sold"] { font-size:clamp(12px,3.59vw,14px); }
 .binder-catalog { width:100%; margin-bottom:0; order:2; flex:none; padding-top:max(18px,env(safe-area-inset-top)); }
 .binder-panel[data-mobile-view="catalog"] :is(.binder-preview-area,.binder-details,.binder-foreground) { display:none; }
 .binder-panel[data-mobile-view="detail"] .binder-catalog { display:none; }
 .binder-panel[data-mobile-view="catalog"] .binder-world-shade { background:linear-gradient(#0b061099,#0b0610b3); }
 .binder-catalog-head { flex-wrap:nowrap; gap:6px; }
 .binder-grouping { gap:5px; justify-content:flex-end; }
 .binder-grouping button { min-height:44px; font-size:clamp(8px,2.55vw,11px); }
 .binder-grouping .binder-group-track { height:44px; padding-block:17px; }
 .binder-group-track::before { inset:14px 0; }
 .binder-progress { font-size:clamp(8px,2.55vw,11px); }
 .binder-list { flex:none; overflow:visible; }
 .binder-grid { gap:30px 12px; }
 .binder-tile { border-radius:10px; }
 .binder-section h2 { font-size:17px; }
 .binder-section-progress { font-size:11px; }
 .binder-section progress { width:60px; max-width:60px; }
 .binder-foreground { display:block; width:115px; left:-60px; top:240px; }
 .stage[data-binder-open="true"]>.binder-control { bottom:max(18px,env(safe-area-inset-bottom)); width:124px; }
 .stage[data-binder-open="true"]:not([data-binder-transition="leaving"])>.stat-line { visibility:hidden; }
 .binder-footer-worth:not([hidden]) { display:block; position:absolute; z-index:60; left:18px; right:160px; bottom:max(18px,env(safe-area-inset-bottom)); height:48px; margin:0; pointer-events:none; color:#ffffff99; text-transform:uppercase; font-size:10px; line-height:16px; white-space:nowrap; }
 .binder-footer-worth span { display:block; font-size:18px; line-height:24px; color:#97ea12; }
 .binder-footer-worth .is-decreasing { color:#ff7089; text-shadow:0 0 14px #ff587755; }
 .stage[data-binder-open="true"]::after { content:''; position:absolute; z-index:55; left:0; right:0; bottom:0; height:96px; pointer-events:none; background:linear-gradient(transparent,#0b0610 35%); }
}
@media(prefers-reduced-motion:reduce) {
 .binder-panel,.binder-planet,.binder-stones,.binder-portal,.binder-preview-placeholder { animation:none; }
}

.stage[data-binder-open="true"] [data-stat="binder"] { color:#97ea12; }
.stage[data-binder-open="true"] [data-stat="binder"].is-decreasing { color:#ff7089; }

.stage[data-binder-open="true"]>:is(.pack-object,.obby-comment,.round-setup,.card-counter,.card-actions,.swipe-guide) { visibility:hidden; }

/* Keep the departing composition visible until the camera travel completes. */
.stage[data-binder-open="true"][data-binder-transition]>:is(.pack-object,.card-reveal,.utility-actions,.obby-comment,.round-setup,.card-counter,.card-actions,.swipe-guide) { visibility:visible; }
.binder-tile { background:transparent; }
.binder-tile::before { content:''; position:absolute; inset:0; border-radius:inherit; background:#18181833; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); pointer-events:none; }
.binder-tile>img { position:relative; }
.binder-tile:hover { background:transparent; }
.binder-tile:hover::before { background:#ffffff0c; }
.binder-copy-count { -webkit-backdrop-filter:blur(6.7px); backdrop-filter:blur(6.7px); }
.binder-tile-worth { -webkit-backdrop-filter:blur(6.5px); backdrop-filter:blur(6.5px); }
.binder-copy button,.binder-sell-selected { -webkit-backdrop-filter:blur(3.5px); backdrop-filter:blur(3.5px); }
.binder-sell-selected output { font-weight:500; }
.binder-preview-note:empty { display:none; }
/* Unknown cards retain the catalog's silhouettes inside the live card renderer. */
.binder-preview .inactive-full-scene { filter:grayscale(1) brightness(.38) blur(13px); }
.binder-preview .inactive-story-scene { filter:grayscale(1) brightness(.38) blur(16px); }
.binder-preview .inactive-background { filter:grayscale(1) brightness(.72) blur(7px); }
.binder-preview .inactive-subject { filter:brightness(0) invert(.055); }
.binder-preview .inactive-prop { filter:brightness(0) invert(.13); }
.binder-preview .inactive-original-frame { filter:saturate(.55) brightness(.85); }
.binder-preview .inactive-frame-detail { filter:saturate(.2) brightness(.65); }

@media (prefers-reduced-motion:reduce) { .binder-space { scale:1; } }

/* Copy count changes content, not the desktop action baseline. */
.binder-details { align-self:start; margin-top:calc(117 * var(--ui)); min-height:calc(406 * var(--ui)); }
.binder-details[data-copies="none"] .binder-copies { display:none; }
.binder-details[data-copies="single"] .binder-copies { border:0; }
.binder-owned[hidden],.binder-sell-selected[hidden] { display:none; }
.binder-tile.is-uncollected>img { filter:grayscale(1); }
.card[data-uncollected="true"] :is(.coating,.frame-holo,.background-holo,.foil,.gloss) { display:none; }
@keyframes binder-planet-drift { from { transform:translate(-12px,-11px) rotate(-4deg); } to { transform:translate(14px,15px) rotate(4deg); } }
@keyframes binder-stone-drift { from { transform:translate(17px,13px) rotate(4deg); } to { transform:translate(-18px,-16px) rotate(-5deg); } }
@media(max-width:700px) {
 .binder-details { margin-top:0; min-height:0; }
 .binder-details[data-copies="single"] .binder-copies { display:none; }
 .binder-tile-worth { height:26px; display:flex; align-items:center; }
}
@media(prefers-reduced-motion:reduce) {
 .binder-planet,.binder-stones { animation:none; translate:none; transition:none; }
}

.binder-list::-webkit-scrollbar { display:none; }

/* Mobile catalog tiles show ownership; the remembered preview is not a selection. */
@media(max-width:700px) {
 .binder-tile[aria-pressed="true"] { border-color:#ffffff36; box-shadow:none; }
 .binder-tile.is-owned[aria-pressed="true"] { border-color:#ffffffb3; }
 .binder-tile[aria-pressed="true"] .binder-copy-count { border-color:#70765e; }
}

/* A rejected purchase leaves the sealed pack in place and explains how to proceed. */
.stage.has-balance-error .obby-comment p,
.stage.has-balance-error [data-stat="balance"] { color:#ff6b78; }
.stage.has-balance-error .obby-comment { max-width:calc(100% - 32px); white-space:normal; text-align:center; }
.stage.has-balance-error [data-stat="balance"] { text-shadow:0 0 12px #ff6b7830; }