/* Deck Builder Styles */
.deck-builder-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 10000;
justify-content: center;
align-items: center;
padding: 20px;
}
.collection-modal {
padding: 12px;
}
.collection-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.collection-modal :is(
.deck-tab,
.deck-builder-search,
.deck-filter,
.deck-btn,
.select-cardback-btn
):focus-visible {
outline: 2px solid #f6e27a;
outline-offset: 2px;
}
/* The spell's summoner, seated on the rim the card frame draws between its art
and its description. `.card-desc` owns that boundary at 72.5% of card height
(cards.css); the chip's BOTTOM rests on it, so it covers neither the title it
used to sit on nor a line of description. Left-aligned with the Stellar chip
so the tile reads as one column of chrome rather than four loose stickers. */
.collection-card-owner-badge {
position: absolute;
top: 72.5%;
left: 2px;
transform: translateY(-100%);
max-width: calc(100% - 4px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.35px;
color: #f4f8ff;
background: linear-gradient(135deg, rgba(90, 110, 170, 0.95), rgba(130, 170, 230, 0.95));
border: 1px solid rgba(200, 220, 255, 0.4);
z-index: 12;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.deck-builder-container {
background: linear-gradient(145deg, rgba(30, 25, 50, 0.98), rgba(20, 15, 35, 0.98));
border: 1px solid rgba(238, 219, 241, 0.3);
border-radius: 16px;
width: 100%;
max-width: 1200px;
/* dvh, not svh: `svh` is frozen at the bars-SHOWING height, so once a
phone hides its URL bar — which is what opening the keyboard does — this
panel stops ~100px short of the page box and leaves a dead band it can
never scroll back. dvh is the height the page actually has. */
max-height: 90dvh;
overflow-y: auto;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Collection Modal Overrides */
.collection-modal .deck-builder-container {
max-width: 1300px;
max-height: 96dvh;
}
.collection-container {
display: flex;
flex-direction: column;
height: min(96dvh, 920px);
overflow: hidden;
/* Rebind physical dimensions at this inheritance boundary. The root values
are computed against root --card-unit before a high-resolution tier can
counter-scale it, which would otherwise make zoom grow cards twice. */
--card-width: calc(12.29 * var(--card-unit));
--card-height: calc(22.2 * var(--card-unit));
}
/* The Collection is authored as a 1300x920 desktop workspace. Large desktop
canvases previously kept those exact pixels, turning the whole modal into a
thumbnail at QHD/4K. Layout zoom scales borders, type, controls, and hit
targets as one crisp physical surface. Card anatomy already follows vmin,
so each tier counter-scales --card-unit to avoid applying viewport growth a
second time. Requiring both dimensions deliberately excludes 2560x1080 and
other short ultrawides whose 920px workspace is already height-bound. */
@media (min-width: 2560px) and (min-height: 1440px) {
.collection-modal > .collection-container {
zoom: 133.3333%;
--card-unit: 0.75vmin;
}
}
@media (min-width: 3200px) and (min-height: 1800px) {
.collection-modal > .collection-container {
zoom: 166.6667%;
--card-unit: 0.6vmin;
}
}
@media (min-width: 3840px) and (min-height: 2160px) {
.collection-modal > .collection-container {
zoom: 200%;
--card-unit: 0.5vmin;
}
}
@media (min-width: 5120px) and (min-height: 2880px) {
.collection-modal > .collection-container {
zoom: 266.6667%;
--card-unit: 0.375vmin;
}
}
@media (min-width: 7680px) and (min-height: 4320px) {
.collection-modal > .collection-container {
zoom: 400%;
--card-unit: 0.25vmin;
}
}
.collection-container > .deck-builder-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.collection-modal.collection-packs-active .deck-builder-container {
overflow: hidden;
}
.collection-modal.collection-packs-active .collection-content {
overflow: hidden;
}
.collection-modal.collection-packs-active .collection-section-packs {
overflow: hidden;
}
.collection-subtitle {
margin: 6px 0 0;
color: rgba(238, 219, 241, 0.7);
font-size: 0.9rem;
}
.collection-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.collection-toast-host {
position: fixed;
right: 24px;
bottom: 24px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10001;
pointer-events: none;
}
.collection-toast {
min-width: 260px;
max-width: 360px;
padding: 12px 14px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(28, 24, 44, 0.98), rgba(38, 28, 60, 0.98));
border: 1px solid rgba(255, 240, 200, 0.35);
color: #f7f3ff;
font-size: 0.88rem;
line-height: 1.35;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
animation: collectionToastIn 0.34s cubic-bezier(0.22, 1.18, 0.32, 1);
}
.collection-toast-success {
border-color: rgba(160, 255, 214, 0.6);
box-shadow: 0 12px 30px rgba(50, 200, 140, 0.25);
}
.collection-toast-info {
border-color: rgba(180, 210, 255, 0.6);
box-shadow: 0 12px 30px rgba(80, 120, 200, 0.25);
}
.collection-toast-error {
border-color: rgba(255, 140, 140, 0.6);
box-shadow: 0 12px 30px rgba(210, 70, 90, 0.25);
}
.collection-toast-exit {
animation: collectionToastOut 0.35s ease-in forwards;
}
@keyframes collectionToastIn {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes collectionToastOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
}
.collection-stardust {
-webkit-appearance: none;
appearance: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(238, 219, 241, 0.3);
background: rgba(255, 255, 255, 0.08);
min-width: 90px;
margin: 0;
color: inherit;
font: inherit;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.collection-stardust:hover:not([disabled]) {
background: rgba(238, 219, 241, 0.14);
border-color: rgba(238, 219, 241, 0.58);
box-shadow: 0 0 14px rgba(172, 119, 220, 0.18);
}
.collection-stardust:focus-visible {
outline: 2px solid #f0ddff;
outline-offset: 2px;
}
.collection-stardust-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(238, 219, 241, 0.6);
}
.collection-stardust-value {
font-size: 0.95rem;
font-weight: 600;
color: #f4e6ff;
/* Flex item (blockified) — already transformable for the count-pulse.
tabular-nums keeps the width steady while the value ticks. */
font-variant-numeric: tabular-nums;
}
.collection-tabs {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
min-height: 0;
padding: 0 8px;
overflow-y: hidden;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
border-inline: 1px solid rgba(238, 219, 241, 0.14);
background: transparent;
}
.collection-tabs .deck-tab {
flex: 0 0 auto;
width: auto;
min-height: 34px;
margin: 0;
padding: 5px 10px;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.collection-content {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 12px 6px;
flex: 1;
min-height: 0;
overflow: hidden;
}
.collection-modal.collection-cardbacks-active .collection-content {
overflow: hidden;
}
.collection-modal.collection-cardbacks-active .deck-builder-container {
overflow: hidden;
}
.collection-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: nowrap;
}
.collection-card-tabs {
margin-bottom: 0;
flex-shrink: 0;
}
.collection-controls {
margin-bottom: 0;
flex: 1;
display: flex;
justify-content: flex-end;
min-width: 0;
margin-left: auto;
}
.collection-controls-row .deck-builder-controls {
flex-wrap: nowrap;
justify-content: flex-end;
gap: 4px;
}
.collection-controls-row .deck-builder-search {
width: clamp(150px, 20vw, 280px);
min-width: 120px;
flex: 1 1 auto;
}
.collection-controls-row .deck-filter {
min-width: 74px;
padding: 6px 8px;
}
/* Desktop keeps the existing inline toolbar. The phone layer turns this
wrapper into a surfaced filter drawer without duplicating any controls. */
.collection-mobile-filters-toggle {
display: none;
}
.collection-filter-popover {
display: contents;
}
#collection-filter-collection {
min-width: 104px;
}
#collection-filter-mana,
#collection-sort-cards {
min-width: 74px;
}
.collection-modal .deck-builder-cards {
max-height: none;
min-height: 0;
padding-bottom: 12px;
overflow: hidden;
scroll-padding-bottom: 0;
}
.collection-modal .collection-cards-grid {
--catalog-card-scale: var(--collection-fit-card-scale, 1.05);
}
.collection-card-paint-stage {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: inherit;
grid-auto-rows: inherit;
column-gap: inherit;
row-gap: inherit;
align-content: inherit;
justify-content: inherit;
justify-items: center;
visibility: hidden;
pointer-events: none;
}
.collection-modal .collection-cards-grid.collection-cards-grid-balanced {
grid-template-columns: repeat(
var(--collection-column-count),
calc(var(--card-width) * var(--catalog-card-scale))
);
justify-content: space-evenly;
align-content: center;
}
.collection-section-cards {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
#collection-cards-browser {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
flex: 1;
min-height: 0;
overflow: hidden;
}
.collection-modal .deck-card-item.unowned {
cursor: pointer;
}
.collection-card-detail .card {
margin: 0;
}
.collection-card-detail-status .deck-btn {
flex: none;
}
/* The craft spark burst moved to the shared UI.FX.burst primitive (fx.css). */
@keyframes craftButtonPulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
@keyframes craftButtonGlow {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
/* responsive card detail handled in redesign section below */
.collection-section-cardbacks {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-height: 0;
overflow: hidden;
padding-right: 0;
padding-bottom: 0;
}
.collection-section-deckbuilder {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
padding-right: 2px;
scrollbar-gutter: stable both-edges;
}
.collection-cardbacks-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.collection-cardbacks-header h3 {
margin: 0;
color: #eedbf1;
font-size: 1.2rem;
}
.collection-cardbacks-subtitle {
margin: 6px 0 0;
color: rgba(238, 219, 241, 0.7);
font-size: 0.85rem;
}
.collection-controls #collection-filter-spell-owner {
min-width: 120px;
}
.collection-cardbacks-count {
color: rgba(238, 219, 241, 0.8);
font-size: 0.85rem;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(238, 219, 241, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.collection-pagination,
.deck-builder-pagination,
.cardback-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 6px;
flex-shrink: 0;
}
:is(.collection-pagination, .deck-builder-pagination, .cardback-pagination) .deck-btn {
min-height: 34px;
padding: 6px 10px;
}
@media (pointer: coarse) {
:is(.collection-pagination, .deck-builder-pagination, .cardback-pagination) .deck-btn {
min-height: 44px;
padding: 6px 10px;
}
}
/* Author display rules outrank the browser's default [hidden] rule. Keep the
semantic visibility state and the pixels in lockstep on every breakpoint. */
.deck-saved-pagination[hidden] {
display: none;
}
.collection-page-info,
.deck-builder-page-info,
.cardback-page-info {
font-size: 0.85rem;
color: rgba(238, 219, 241, 0.7);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cardback-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
justify-items: center;
}
.collection-section-cardbacks .cardback-grid {
flex: 1;
min-height: 0;
overflow: hidden;
}
.cardback-item {
background: transparent;
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid transparent;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
width: 100%;
max-width: min(100%, calc((96svh - 380px) * 9 / 16));
color: inherit;
font: inherit;
appearance: none;
-webkit-appearance: none;
}
button.cardback-item {
cursor: pointer;
}
button.cardback-item:disabled {
cursor: default !important;
opacity: 1;
background: transparent;
border-color: transparent;
}
button.cardback-item:focus-visible {
outline: 3px solid #f6e27a;
outline-offset: -1px;
}
.cardback-item:hover {
background: transparent;
}
.cardback-item.selected {
border-color: transparent;
background: transparent;
}
.cardback-item.locked .cardback-image {
opacity: 0.4;
filter: grayscale(100%);
}
.cardback-image-wrapper {
width: 100%;
aspect-ratio: 9/16;
position: relative;
border-radius: 6px;
overflow: hidden;
margin-bottom: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.cardback-item.selected .cardback-image-wrapper {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
outline: 2px solid #ffd700;
outline-offset: -2px;
}
.cardback-item .select-cardback-btn {
flex: 0 0 auto;
width: 7em;
text-align: center;
margin-top: auto;
pointer-events: none;
}
.select-cardback-btn.equipped {
opacity: 0.5;
background: #444;
cursor: default;
}
.cardback-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.cardback-image-unavailable {
visibility: hidden;
}
/* Cohort hold (docs/asset-loading.md law 2, the group form): a freshly
presented page of backs withholds its ART WELLS — never its tile chrome —
until every back has decoded or collection.js's bounded reveal cap releases
them, so the page deals in left to right instead of trickling in network
order. !important so no later rule can leak a held back early. */
.cardback-image.cardback-image-cohort-hold {
visibility: hidden !important;
}
/* The neutral well behind a back that is still on its way (text-first render:
the name, description and Equip never wait). The flat colour cross-fades
with the arriving art; the sweep starts only after the shared art grace,
so a warm load still appears atomically complete. The wrapper's own
background paints beneath its , so a settled back simply covers it.
The sweep is a background-position animation, never a transform on a
pseudo-element: Chromium lets a composited animation inside this modal's
zoomed container (2560x1440 and up) escape its overflow clip, the trap the
hover popup's art well documents in cards.css. The cross-fade itself is
declared with the tilt host's transition below, which owns the wrapper's
`transition` shorthand. */
.cardback-image-wrapper:has(> .cardback-image[data-retrying-image-state="loading"]),
.cardback-image-wrapper:has(> .cardback-image[data-retrying-image-state="retrying"]),
.cardback-image-wrapper:has(> .cardback-image-cohort-hold) {
background-color: rgba(31, 26, 52, 0.95);
background-image: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 32%,
rgba(238, 219, 241, 0.16) 50%,
rgba(255, 255, 255, 0.04) 68%,
transparent 100%);
background-size: 200% 100%;
background-repeat: no-repeat;
/* Parked off the box until the sweep starts. */
background-position: 200% 0;
animation: cardback-well-sweep 1.8s ease-in-out var(--card-art-grace, 450ms) infinite;
}
@keyframes cardback-well-sweep {
from {
background-position: 200% 0;
}
to {
background-position: -100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* Same selectors as the sweep, so this out-ranks it: the flat well stays,
the motion goes. */
.cardback-image-wrapper:has(> .cardback-image[data-retrying-image-state="loading"]),
.cardback-image-wrapper:has(> .cardback-image[data-retrying-image-state="retrying"]),
.cardback-image-wrapper:has(> .cardback-image-cohort-hold) {
animation: none;
}
}
.cardback-lock-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
padding: 10px;
}
.cardback-selected-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ffd700;
color: black;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 0.75em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cardback-name {
font-weight: bold;
margin-bottom: 2px;
color: #fff;
font-size: 0.95em;
}
.cardback-desc {
font-size: 0.72em;
color: #aaa;
margin-bottom: 6px;
min-height: 0;
}
.lock-icon {
font-size: 2em;
margin-bottom: 5px;
}
.lock-hint {
font-size: 0.85em;
color: #ddd;
font-style: italic;
}
.cardback-lock-copy {
display: none;
}
.cardback-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 20000;
display: flex;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
padding: 20px 14px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: cardbackFadeIn 0.2s ease-out;
}
.cardback-modal-content {
max-width: 980px;
width: min(92vw, 980px);
max-height: none;
overflow: visible;
margin: 0 auto;
background: linear-gradient(145deg, rgba(26, 22, 42, 0.96), rgba(18, 16, 34, 0.98));
color: #fff;
border: 1px solid rgba(238, 219, 241, 0.2);
border-radius: 16px;
padding: 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.cardback-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(238, 219, 241, 0.2);
padding-bottom: 10px;
}
.cardback-modal-title {
margin: 0;
color: #eedbf1;
font-size: 1.4rem;
}
/* 3D tilt for cardback image wrappers — reuses card-tilt system */
.cardback-tiltable {
--card-tilt-max: 12;
--card-tilt-perspective: 500px;
--card-tilt-scale: 1;
--card-tilt-glare-intensity: 0.7;
--card-tilt-glare-hue: 270;
--card-tilt-x: 0.5;
--card-tilt-y: 0.5;
--card-tilt-rotate-x: 0deg;
--card-tilt-rotate-y: 0deg;
--card-tilt-opacity: 0;
transform-style: flat;
will-change: auto;
/* background-color: the loading well above cross-fades with arriving art. */
transition: box-shadow 0.25s ease, background-color 0.3s ease;
}
.cardback-tiltable.card-tilt-active {
transform:
perspective(var(--card-tilt-perspective))
rotateX(var(--card-tilt-rotate-x))
rotateY(var(--card-tilt-rotate-y))
scale(var(--card-tilt-scale));
transform-style: preserve-3d;
will-change: transform;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.cardback-modal-close {
background: none;
border: none;
font-size: 2rem;
color: rgba(238, 219, 241, 0.7);
cursor: pointer;
line-height: 1;
transition: color 0.2s;
}
.cardback-modal-close:hover {
color: #fff;
}
@keyframes cardbackFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.collection-section-exchange {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
min-height: 0;
overflow: hidden;
padding-bottom: 24px;
}
.moon-exchange-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.moon-exchange-subtitle {
margin: 6px 0 0;
color: rgba(238, 219, 241, 0.7);
font-size: 0.9rem;
}
.moon-exchange-actions {
display: flex;
align-items: center;
gap: 10px;
}
.moon-exchange-view-switcher {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
flex: 0 0 auto;
}
.moon-exchange-view-btn {
min-height: 34px;
}
.moon-exchange-view-btn.is-active {
border-color: rgba(238, 219, 241, 0.6);
}
.moon-exchange-grid {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr);
grid-template-rows: minmax(0, 1fr);
gap: 18px;
align-items: stretch;
flex: 1;
min-height: 0;
}
.moon-exchange-panel {
background: rgba(12, 10, 24, 0.6);
border: 1px solid rgba(238, 219, 241, 0.2);
border-radius: 14px;
padding: 16px;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
}
.moon-exchange-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 10px;
flex-wrap: wrap;
}
.moon-exchange-panel-header h4 {
margin: 0;
color: #eedbf1;
font-size: 1rem;
}
.moon-exchange-summary-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.moon-exchange-market .moon-exchange-panel-header {
margin-bottom: 12px;
}
.moon-exchange-market .moon-exchange-summary-actions {
justify-content: flex-end;
}
.moon-exchange-market-controls {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.moon-exchange-market-controls .deck-builder-search {
flex: 1;
min-width: 220px;
}
/* Global form/button margins are useful in the lobby, but they make grid items
exceed their Exchange tracks (especially Firefox) and consume an entire
listing row at short desktop heights. The command bar owns spacing via gap. */
.moon-exchange-market-controls :is(
.deck-builder-search,
#moon-exchange-owner-filter,
#moon-exchange-sort,
.moon-exchange-refresh
) {
margin: 0;
}
#moon-exchange-owner-filter,
#moon-exchange-sort {
width: 100%;
min-width: 0;
}
.moon-exchange-filters-toggle {
display: none;
min-width: 104px;
min-height: 44px;
}
.moon-exchange-filter-menu {
display: contents;
}
.moon-exchange-filter-menu[hidden] {
display: none;
}
.moon-exchange-form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* The sell panel swaps the form for the empty state via the `hidden` attribute
(renderSellOptions). Both carry a `display:` rule that would otherwise beat the
UA `[hidden]{display:none}`, so guard them explicitly — same pattern as
manga-overlay/story-feed. Without this the dead form and the "no cards yet"
message both render at once. */
.moon-exchange-form[hidden],
.moon-exchange-sell-empty[hidden] {
display: none;
}
.moon-exchange-label {
font-size: 0.8rem;
color: rgba(238, 219, 241, 0.75);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.moon-exchange-input {
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.moon-exchange-availability {
font-size: 0.8rem;
color: rgba(238, 219, 241, 0.7);
}
.moon-exchange-sell-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.moon-exchange-sell-fields {
display: grid;
gap: 10px;
}
.moon-exchange-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.moon-exchange-sell-preview {
width: 120px;
height: 170px;
border: 1px dashed rgba(238, 219, 241, 0.3);
border-radius: 10px;
background: rgba(6, 6, 12, 0.55);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
position: relative;
/* Capture the ambient unit for the fitted card to multiply — a custom
property cannot reference itself, so the capture sits one level up. */
--exchange-card-unit: var(--card-unit);
}
/* PHYSICALLY fitted, never composited. `fitCardInsidePreview` is allowed to
UPSCALE (capped at 1.5, so a small card is not a lonely island in a 120x170
box) and on the 1400x640 QA viewport it lands on 1.17x — the same stretched
raster as the collection grid had. The shrink direction mattered too: the art
canvas is built for the card's VISUAL box, so a transform shrink resampled a
24px-worth canvas up to the 37px layout box and back down. Sizing by the unit
resamples zero times in either direction, and is dimensionally identical
because every card metric is a multiple of the unit. */
.moon-exchange-sell-preview .deck-builder-card {
/* Pre-JS default. `fitCardInsidePreview` sets the real factor as an inline
style, which outranks this. */
--moon-exchange-card-scale: 0.68;
--card-unit: calc(var(--exchange-card-unit, 1vmin) * var(--moon-exchange-card-scale));
--card-width: calc(12.29 * var(--card-unit));
--card-height: calc(22.2 * var(--card-unit));
/* Hairline and shadow are the only card metrics NOT expressed in
--card-unit, so the transform used to shrink them with everything else. */
border-width: calc(1px * var(--moon-exchange-card-scale));
box-shadow: 0 0 calc(8px * var(--moon-exchange-card-scale)) rgba(238, 219, 241, 0.5);
--card-base-transform: scale(1);
/* The card is a real flex item now, and a flex item that shrinks changes
the card's SHAPE rather than its size. It is fitted to this box by
measurement; it must not be renegotiated by the layout. */
flex: 0 0 auto;
margin: 0;
pointer-events: none;
transform-origin: center;
}
.moon-exchange-sell-preview .moon-exchange-preview-staging {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.moon-exchange-sell-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 0.7rem;
color: rgba(238, 219, 241, 0.6);
text-align: center;
padding: 8px;
}
/* Empty state shown when there is nothing to sell — a friendly message that
replaces the dead form + black card-preview box. */
/* The locked sell gate shares the empty state's composition: it is the same
kind of object — a panel explaining why there is no form here yet. */
.moon-exchange-sell-locked {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px 20px;
text-align: center;
color: rgba(238, 219, 241, 0.75);
}
.moon-exchange-sell-locked[hidden] {
display: none;
}
.moon-exchange-sell-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px 20px;
text-align: center;
color: rgba(238, 219, 241, 0.75);
}
.moon-exchange-sell-empty-icon {
font-size: 2rem;
opacity: 0.85;
}
.moon-exchange-sell-empty-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #eedbf1;
}
.moon-exchange-sell-empty-hint {
margin: 0;
font-size: 0.85rem;
line-height: 1.45;
max-width: 28ch;
}
.moon-exchange-create-btn {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.moon-exchange-status {
min-height: 18px;
font-size: 0.8rem;
color: rgba(238, 219, 241, 0.8);
}
.moon-exchange-status.success {
color: rgba(160, 255, 214, 0.9);
}
.moon-exchange-status.error {
color: rgba(255, 150, 150, 0.95);
}
.moon-exchange-proceeds {
display: grid;
gap: 6px;
padding: 10px;
border: 1px solid rgba(238, 219, 241, 0.16);
border-radius: 10px;
background: rgba(7, 6, 15, 0.42);
font-size: 0.78rem;
color: rgba(238, 219, 241, 0.74);
}
.moon-exchange-proceeds-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.moon-exchange-proceeds-row strong {
color: #f4e9f6;
white-space: nowrap;
}
.moon-exchange-fee-policy {
font-size: 0.72rem;
}
.moon-exchange-sell-error,
.moon-exchange-market-error {
display: grid;
place-items: center;
align-content: center;
gap: 12px;
min-height: 0;
flex: 1 1 auto;
padding: 20px;
text-align: center;
color: rgba(255, 178, 178, 0.96);
}
.moon-exchange-sell-error[hidden] {
display: none;
}
.moon-exchange-sell-error p,
.moon-exchange-market-error p {
margin: 0;
}
/* One-shot reward pop when a trade completes (buy/sell/list). */
.moon-exchange-status--celebrate {
animation: moon-exchange-celebrate 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: left center;
}
@keyframes moon-exchange-celebrate {
0% { transform: scale(1); text-shadow: none; }
35% {
transform: scale(1.08);
text-shadow: 0 0 12px rgba(160, 255, 214, 0.75);
}
100% { transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.moon-exchange-status--celebrate {
animation: none;
}
}
.moon-exchange-listings {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
overflow-y: hidden;
padding-right: 6px;
position: relative;
}
.moon-exchange-paint-stage {
position: absolute;
inset: 0 6px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
min-height: 0;
visibility: hidden;
pointer-events: none;
}
.moon-exchange-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
gap: 12px;
}
.moon-exchange-page-info {
font-size: 0.8rem;
color: rgba(238, 219, 241, 0.75);
}
.moon-exchange-empty {
text-align: center;
padding: 30px 10px;
color: rgba(238, 219, 241, 0.6);
font-style: italic;
}
/* Skeleton loading */
.moon-exchange-skeleton {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 12px;
background: rgba(8, 6, 20, 0.6);
border: 1px solid rgba(238, 219, 241, 0.1);
animation: me-skeleton-fade-in 0.2s ease-out;
}
.moon-exchange-skeleton-card {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.moon-exchange-skeleton-thumb {
width: 66px;
height: 118px;
flex: 0 0 auto;
border-radius: 8px;
background: rgba(238, 219, 241, 0.06);
position: relative;
overflow: hidden;
}
.moon-exchange-skeleton-lines {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
}
.moon-exchange-skeleton-line {
height: 12px;
border-radius: 6px;
background: rgba(238, 219, 241, 0.06);
position: relative;
overflow: hidden;
}
.moon-exchange-skeleton-line:nth-child(1) { width: 55%; height: 14px; }
.moon-exchange-skeleton-line:nth-child(2) { width: 75%; }
.moon-exchange-skeleton-line:nth-child(3) { width: 40%; }
.moon-exchange-skeleton-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.moon-exchange-skeleton-btn {
width: 80px;
height: 32px;
border-radius: 8px;
background: rgba(238, 219, 241, 0.06);
position: relative;
overflow: hidden;
}
.moon-exchange-skeleton-price {
width: 60px;
height: 10px;
border-radius: 6px;
background: rgba(238, 219, 241, 0.04);
}
/* Shimmer sweep on skeleton elements */
.moon-exchange-skeleton-thumb::after,
.moon-exchange-skeleton-line::after,
.moon-exchange-skeleton-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(238, 219, 241, 0.06) 40%,
rgba(238, 219, 241, 0.1) 50%,
rgba(238, 219, 241, 0.06) 60%,
transparent 100%
);
animation: me-shimmer 1.8s ease-in-out infinite;
}
.moon-exchange-skeleton:nth-child(2) .moon-exchange-skeleton-thumb::after,
.moon-exchange-skeleton:nth-child(2) .moon-exchange-skeleton-line::after,
.moon-exchange-skeleton:nth-child(2) .moon-exchange-skeleton-btn::after {
animation-delay: 0.15s;
}
.moon-exchange-skeleton:nth-child(3) .moon-exchange-skeleton-thumb::after,
.moon-exchange-skeleton:nth-child(3) .moon-exchange-skeleton-line::after,
.moon-exchange-skeleton:nth-child(3) .moon-exchange-skeleton-btn::after {
animation-delay: 0.3s;
}
.moon-exchange-skeleton:nth-child(4) .moon-exchange-skeleton-thumb::after,
.moon-exchange-skeleton:nth-child(4) .moon-exchange-skeleton-line::after,
.moon-exchange-skeleton:nth-child(4) .moon-exchange-skeleton-btn::after {
animation-delay: 0.45s;
}
@keyframes me-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes me-skeleton-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Smooth transition when real listings replace skeletons */
.moon-exchange-listings.me-loaded {
animation: me-listings-reveal 0.3s ease-out;
}
@keyframes me-listings-reveal {
from { opacity: 0; }
to { opacity: 1; }
}
.moon-exchange-listing {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 12px;
background: rgba(8, 6, 20, 0.6);
border: 1px solid rgba(238, 219, 241, 0.2);
overflow: visible;
}
.moon-exchange-listing-mine {
border-style: dashed;
border-color: rgba(255, 215, 130, 0.45);
background: rgba(34, 25, 21, 0.58);
}
/* Personal listings need only their total and cancellation action. */
.moon-exchange-listing-mine .moon-exchange-buy {
/* Your own listing has no quantity field, so the three areas simply stack.
Wider than the buy row's clamp because "Cancel listing" and "Share
listing" are both full labels here and several languages are longer. */
grid-template-areas:
"total"
"action"
"share";
grid-template-columns: minmax(0, 1fr);
width: clamp(120px, 10vw, 140px);
}
.moon-exchange-card {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.moon-exchange-card-preview {
width: 66px;
height: 118px;
flex: 0 0 auto;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
cursor: pointer;
/* Capture the ambient unit — see the sell preview above. */
--exchange-card-unit: var(--card-unit);
}
.moon-exchange-card-preview .deck-builder-card {
--moon-exchange-card-scale: 0.5;
--card-unit: calc(var(--exchange-card-unit, 1vmin) * var(--moon-exchange-card-scale));
--card-width: calc(12.29 * var(--card-unit));
--card-height: calc(22.2 * var(--card-unit));
border-width: calc(1px * var(--moon-exchange-card-scale));
box-shadow: 0 0 calc(8px * var(--moon-exchange-card-scale)) rgba(238, 219, 241, 0.5);
/* Centering stays a transform; only the SIZE stopped being one. */
--card-base-transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
margin: 0;
pointer-events: none;
transform-origin: center;
}
.moon-exchange-card-image {
width: 56px;
height: 76px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.moon-exchange-card-info {
min-width: 0;
overflow: visible;
}
.moon-exchange-card-name {
font-size: 0.95rem;
font-weight: 600;
color: #f4e6ff;
margin-bottom: 4px;
white-space: normal;
overflow-wrap: anywhere;
}
.moon-exchange-card-meta,
.moon-exchange-card-seller {
font-size: 0.78rem;
color: rgba(238, 219, 241, 0.7);
white-space: normal;
overflow-wrap: anywhere;
}
/* Real-money equivalent. Its own line so a longer currency string cannot push
the price and remaining-count apart, and empty (rate not loaded) collapses to
nothing rather than reserving a gap. */
.moon-exchange-card-money {
font-size: 0.72rem;
color: rgba(238, 219, 241, 0.52);
white-space: normal;
overflow-wrap: anywhere;
}
.moon-exchange-card-money:empty {
display: none;
}
.collection-craft-money-note {
flex-basis: 100%;
margin: 2px 0 0;
font-size: 0.72rem;
color: rgba(238, 219, 241, 0.55);
text-align: center;
}
.moon-exchange-buy {
display: grid;
/* Share has its OWN CELL. `.moon-exchange-buy .btn` assigns
`grid-area: action`, so a second button with no cell of its own painted
ON TOP of Buy — reported as "share listing button overlaps other button".
It is a ROW rather than a third column: a third column takes its width
out of the card side, whose name/meta/seller lines then wrap and make the
row taller, while a row costs nothing at all here because the 118px card
preview already sets the row height and qty+action+share only reach
~108px. The actions column is narrower than the three-column version was,
so the card side gained width rather than losing it. */
grid-template-areas:
"total total"
"qty action"
"share share";
grid-template-columns: 54px minmax(72px, auto);
align-items: end;
gap: 3px 6px;
min-width: 0;
}
/* BUY, BUT NOT YET.
A locked account browses the Exchange on purpose — seeing what it is, is how
a player learns why the matches are worth finishing. So the row renders in
full and only the action is closed, and it has to LOOK closed rather than
merely fail when pressed: a plain `disabled` button is easy to read as a bug.
The padlock and the dimmed, dashed edge say "not yours yet" instead of
"broken", and `cursor: not-allowed` answers the press before it happens.
The sentence naming the condition rides on `title` and the accessible name,
so this is never a colour-only message. The SERVER is what actually refuses;
this is the explanation. */
.moon-exchange-buy-btn--locked,
.moon-exchange-buy-btn--locked:disabled {
opacity: 0.55;
cursor: not-allowed;
border-style: dashed;
filter: saturate(0.4);
/* No hover lift and no press: a control that cannot act must not pretend
to be interactive. */
transform: none;
box-shadow: none;
}
.moon-exchange-buy-btn--locked:hover,
.moon-exchange-buy-btn--locked:focus-visible {
transform: none;
box-shadow: none;
}
.moon-exchange-buy-qty {
grid-area: qty;
width: 54px;
min-height: 44px;
text-align: center;
}
.moon-exchange-buy-total {
grid-area: total;
font-size: 0.75rem;
color: rgba(238, 219, 241, 0.75);
text-align: right;
white-space: normal;
overflow-wrap: anywhere;
}
/* Its own cell, and specific enough to beat the `.btn` rule below it. */
.moon-exchange-buy .moon-exchange-share {
grid-area: share;
min-height: 44px;
min-width: 44px;
/* Wraps rather than clips. Every language sets this label and several are
longer than English; `exchange.real.spec.js` forbids clipped translated
text outright and is right to. */
white-space: normal;
/* `.deck-btn` carries `margin: 4px 0`, which turned a 44px control into a
52px row inside a lane that allots 50px per listing — every card and
control then spilled out of the lane at 844x280. The grid spaces this
row with `gap`; the button must not also space itself. */
margin: 0;
padding-inline: 6px;
font-size: 0.78rem;
line-height: 1.15;
}
.moon-exchange-buy .btn {
grid-area: action;
min-width: 0;
min-height: 44px;
white-space: normal;
/* `.deck-btn` carries `margin: 4px 0`, which is EIGHT PIXELS of column
height inside a grid that already spaces its rows with `gap` — and the
actions column has to stay under the 118px card preview or it, not the
card, sets the row height. Measured: with the margin the column reached
121px at 1920x1080 and every row grew to 131px, which put a fourth
listing 19px past the bottom of a lane the pager had sized for four.
The touch target is untouched: the button stays 44px, only its outside
margin goes. The landscape tier below already does this, for the same
reason at a smaller size. */
margin: 0;
}
.collection-section-packs {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
min-height: 0;
overflow: hidden;
padding-bottom: 18px;
}
.card-packs-shell {
--packs-bg: #0a0e17;
--packs-ink: #0f1523;
--packs-gold: #e6bf6a;
--packs-teal: #26b5a4;
--packs-text: rgba(247, 240, 223, 0.9);
--packs-muted: rgba(247, 240, 223, 0.6);
--packs-border: rgba(230, 191, 106, 0.25);
--packs-stellar: rgba(176, 132, 255, 0.9);
display: grid;
grid-template-rows: auto minmax(280px, 1fr) auto;
gap: 14px;
flex: 1;
width: 100%;
min-width: 0;
min-height: 0;
padding: 16px;
border-radius: 18px;
background:
radial-gradient(circle at 12% 18%, rgba(38, 181, 164, 0.18), transparent 45%),
radial-gradient(circle at 82% 20%, rgba(230, 191, 106, 0.18), transparent 46%),
linear-gradient(160deg, rgba(12, 18, 30, 0.98), rgba(8, 10, 16, 0.98));
border: 1px solid var(--packs-border);
position: relative;
/* The oversized texture layer uses inset:-30%. Keep that paint inside the
rounded vault instead of letting it enlarge the Collection workspace's
scrollable overflow area. The actual card reveal is already contained
by .card-packs-stage. */
overflow: hidden;
}
.card-packs-shell::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 40%);
opacity: 0.5;
pointer-events: none;
}
.card-packs-shell::after {
content: "";
position: absolute;
inset: -30%;
background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 70px);
opacity: 0.35;
pointer-events: none;
transform: rotate(-3deg);
}
.card-packs-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.card-packs-title {
display: flex;
flex-direction: column;
gap: 2px;
}
.card-packs-eyebrow {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.62rem;
color: rgba(230, 191, 106, 0.85);
font-family: "Cinzel", serif;
}
.card-packs-title h3 {
margin: 0;
font-size: 1.2rem;
color: var(--packs-text);
font-family: "Cinzel", serif;
}
.card-packs-subtitle {
margin: 0;
font-size: 0.78rem;
color: var(--packs-muted);
font-family: "Spectral", serif;
}
/* Published loot-box odds. This is a legal disclosure,
not flavor: it is the
* one line in the header that no viewport is allowed to hide,
so it stays
* short and keeps its own quiet weight next to the Buy button. */
.card-packs-odds{
margin: 0;
font-size: 0.72rem;
letter-spacing: 0.04em;
font-family: "Spectral", serif;
}
.card-packs-odds {
/* Its own full-width row beneath the title and the controls: squeezed
between them as a flex sibling it wrapped mid-phrase. */
flex: 0 0 100%;
order: 3;
color: rgba(230, 191, 106, 0.72);
}
/* Development-only banner sitting under the published odds. It must read as an
obviously abnormal state — a debug port whose rate is NOT the real one — so
it deliberately breaks the header's gold palette instead of blending in. */
.card-packs-debug-odds {
flex: 0 0 100%;
order: 4;
margin: 4px 0 0;
padding: 3px 10px;
border: 1px dashed rgba(255, 128, 168, 0.55);
border-radius: 999px;
align-self: flex-start;
font-size: 0.68rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: "Spectral", serif;
color: rgba(255, 168, 196, 0.92);
background: rgba(120, 20, 60, 0.22);
}
.card-packs-debug-odds[hidden] {
display: none;
}
.card-packs-header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.card-packs-count {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(247, 240, 223, 0.8);
border: 1px solid rgba(230, 191, 106, 0.35);
border-radius: 999px;
padding: 6px 12px;
background: rgba(12, 18, 28, 0.7);
}
.card-packs-duplicates {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
padding: 6px 10px;
border-radius: 12px;
border: 1px solid rgba(230, 191, 106, 0.25);
background: rgba(12, 18, 28, 0.75);
color: rgba(247, 240, 223, 0.85);
}
.card-packs-duplicates-btn {
flex: 0 0 auto;
padding: 6px 12px;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
background: linear-gradient(135deg, #62e0c9, #26b5a4);
color: #071b19;
border: 1px solid rgba(151, 255, 235, 0.9);
box-shadow: 0 6px 14px rgba(38, 181, 164, 0.24);
font-weight: 800;
/* One line on desktop — the short-landscape media block below opts back
into wrapping where horizontal space genuinely runs out. */
white-space: nowrap;
}
.card-packs-duplicates-btn:hover {
filter: brightness(1.08);
}
.card-packs-duplicates-btn:disabled {
opacity: 0.68;
cursor: not-allowed;
box-shadow: none;
}
.card-packs-buy-btn {
background: linear-gradient(140deg, rgba(230, 191, 106, 0.95), rgba(214, 130, 52, 0.95));
color: #22160b;
border: none;
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 12px 20px rgba(214, 130, 52, 0.25);
white-space: nowrap;
}
.card-packs-buy-btn:hover {
filter: brightness(1.08);
}
.card-packs-buy-btn:disabled {
filter: grayscale(0.6) brightness(0.85);
box-shadow: none;
}
/* Desktop: one exact control axis. The duplicates box dissolves into the
grid (display: contents) so the Exchange and Buy buttons sit on the SAME
row and midline. The exchange rules span both action tracks so their long
localized copy can never widen the Exchange button. Its compact width and
left edge align naturally beneath that control, without adding decorative
chrome. Phone/short-landscape media blocks below keep their stacked layouts. */
@media (min-width: 769px) and (min-height: 561px) {
.card-packs-header-actions {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
align-items: center;
column-gap: 14px;
row-gap: 4px;
justify-content: end;
}
.card-packs-count {
grid-column: 1;
grid-row: 2;
}
.card-packs-duplicates {
display: contents;
}
.card-packs-duplicates-btn {
grid-column: 2;
grid-row: 2;
justify-self: stretch;
}
.card-packs-buy-btn {
grid-column: 3;
grid-row: 2;
}
/* Identical control metrics: same height, type scale, and pill radius. */
.card-packs-duplicates-btn,
.card-packs-buy-btn {
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
border-radius: 999px;
padding: 0 18px;
}
}
.card-packs-stage {
/* Shared height budget: the sealed wrapper sizes itself from this same
variable so it can never outgrow the stage that clips it. */
--pack-stage-h: clamp(300px, 50svh, 430px);
/* The hint owns a lane beneath the wrapper; without it the line printed
straight over the pack's crimped bottom edge. It must hold the hint's
TALLEST rendering — two lines of Spectral at 0.8rem is 38px — plus the
offset the hint is anchored at, or the line climbs back into the
wrapper. 44px = 38 + 4 of anchor + 2 of slack. */
--pack-hint-lane: 44px;
/* One period for the whole idle body language. The lift, the foil sheen
travelling across the wrapper, and the ground contact all run on this, so
the pack reads as ONE object catching one light rather than three effects
stacked on a rectangle. Declared on the STAGE because the contact shadow
is the pack's sibling, not its child. */
--pack-breath-dur: 3.2s;
padding-bottom: var(--pack-hint-lane);
position: relative;
border-radius: 16px;
background:
radial-gradient(circle at 50% 0%, rgba(38, 181, 164, 0.22), rgba(11, 15, 24, 0.95) 60%),
linear-gradient(140deg, rgba(12, 18, 28, 0.95), rgba(8, 10, 16, 0.98));
border: 1px solid rgba(230, 191, 106, 0.18);
display: flex;
align-items: center;
justify-content: center;
min-height: var(--pack-stage-h);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
/* A cold pack read has no trustworthy physical state yet. Keep the stage's
exact geometry, but show a neutral moonlit placeholder rather than briefly
inventing a sealed pack that then flashes back to the already-open fan. */
.card-packs-state-placeholder {
position: absolute;
inset: 12% 22%;
z-index: 5;
border: 1px solid rgba(238, 219, 241, 0.14);
border-radius: 24px;
background:
/* The sweep rides ON TOP of the neutral fill, so the panel keeps the
exact colour it had and only gains motion. */
linear-gradient(100deg, transparent 20%, rgba(226, 210, 255, 0.16) 46%, transparent 72%),
radial-gradient(circle at 50% 42%, rgba(211, 190, 255, 0.18), transparent 34%),
linear-gradient(145deg, rgba(67, 49, 94, 0.22), rgba(15, 10, 27, 0.5));
box-shadow: inset 0 0 32px rgba(211, 190, 255, 0.08);
opacity: 0;
pointer-events: none;
/* IT HAS TO MOVE. A neutral panel that just sits there is what produced
"the deck sillhouette appears but the asset is not loading instantly,
looks buggy" — the player cannot tell a slow load from a broken one.
docs/asset-loading.md law 2: a static placeholder is the same defect with
a class name on it. Same sweep as the landing card popup, so the two
waiting states read as one language. */
background-size: 220% 100%, auto, auto;
background-repeat: no-repeat;
animation: card-packs-state-wait 1.25s ease-in-out infinite;
}
@keyframes card-packs-state-wait {
from { background-position: 130% 0, 0 0, 0 0; }
to { background-position: -130% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.card-packs-state-placeholder { animation: none; }
}
#collection-packs-section[data-packs-state-known="false"] :is(.card-packs-pack) {
visibility: hidden;
}
#collection-packs-section[data-packs-state-known="false"] :is(
.card-packs-open-btn,
.card-packs-pack-glow,
.card-packs-pack-hint,
.card-packs-cards
) {
visibility: hidden;
}
#collection-packs-section[data-packs-state-known="false"] .card-packs-state-placeholder {
opacity: 1;
}
.card-packs-stage::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 30%, rgba(230, 191, 106, 0.12), transparent 45%);
opacity: 0.6;
pointer-events: none;
}
.card-packs-stage::after {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 2px);
background-size: 80px 80px;
opacity: 0.3;
pointer-events: none;
transform: rotate(18deg);
}
.card-packs-stage.card-packs-stage-opened::after {
opacity: 0.55;
}
.card-packs-stage.card-packs-stage-opened {
box-shadow: 0 0 0 1px rgba(230, 191, 106, 0.2), 0 0 50px rgba(230, 191, 106, 0.18);
}
.card-packs-open-btn {
position: absolute;
top: 14px;
right: 14px;
border-radius: 999px;
padding: 8px 16px;
background: rgba(15, 20, 30, 0.75);
color: var(--packs-text);
border: 1px solid rgba(38, 181, 164, 0.4);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.7rem;
z-index: 2;
}
.card-packs-open-btn:hover {
border-color: rgba(38, 181, 164, 0.8);
}
.card-packs-pack {
position: relative;
/* 460 / 765 is the wrapper art's exact alpha-trimmed ratio; every size
override keeps it via aspect-ratio. Height-first sizing against the
stage budget: 34px of clearance absorbs centering plus the idle float
so the crimped edges are never clipped (1400x640 clipped 23px when the
wrapper was width-sized).
The third cap is the load-bearing one: `--pack-stage-h` is derived from
the VIEWPORT, not from the stage the grid actually handed out, so any
header that grows a row leaves the wrapper sized for a stage that no
longer exists and `overflow:hidden` clips it. `100%` is the real stage
content box (its padding already carries the hint lane). */
height: min(
350px,
calc(var(--pack-stage-h, 430px) - 34px - var(--pack-hint-lane, 38px)),
calc(100% - 34px)
);
width: auto;
aspect-ratio: 460 / 765;
/* True-transparency wrapper: the container paints NOTHING — no backing
rectangle, border, radius, or box shadow. The wrapper silhouette sits
directly on the stage; depth comes from the art layer's drop-shadow. */
background: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-8px);
transition: transform 0.3s ease, opacity 0.3s ease;
/* One period for the whole idle body language — declared on the STAGE, so
the pack and its sibling contact shadow read the same number. */
animation: packFloat var(--pack-breath-dur, 3.2s) ease-in-out infinite;
z-index: 1;
cursor: default;
}
/* Two semantic inventory states, one visual policy. Both are inert because
there is no charged pack whose seal can be pulled. Keeping the classes
distinct lets copy and controls explain "none owned" versus "ready to
charge" without pretending either inventory count is a physical object. */
.card-packs-pack-disabled,
.card-packs-pack-uncharged {
pointer-events: none;
}
/* No inventory and no active ceremony. */
.card-packs-pack-disabled {
opacity: 0.4;
animation: none;
}
/* Owned inventory is available to charge, but it is not yet a staged pack. */
.card-packs-pack-uncharged {
opacity: 1;
transition-property: transform;
}
/* Inventory is not a staged object. Keep the stable ceremony geometry and
moonlit background, but paint no generic wrapper or contact glow until a
charged pack actually exists. The hint and Charge action remain as the
intentional empty-state affordances. */
.card-packs-stage-vacant .card-packs-pack,
.card-packs-stage-vacant .card-packs-pack-glow {
visibility: hidden;
opacity: 0;
animation: none;
pointer-events: none;
}
/* --- The charge beat ----------------------------------------------------
The one moment in this ceremony the player pays for, and the only one that
used to have nothing to feel: a status line, then a pack that simply existed
on the next frame. Everything downstream already had craft (the seal drag
builds light, the tear strains, the fan lands), so the arrival has to earn
its place next to them.
Five beats, all on transform/opacity so the stage stays on the compositor:
gather the stage draws breath and contracts — anticipation
bloom moonlight spikes and HOLDS for three frames — impact
arrive the pack drops past its rest and rolls back — overshoot, off-axis
contact its shadow expands LATE, on its own clock — secondary motion
The rim sweep that would have closed it is deliberately absent: that pseudo
element already belongs to the drag's charging sweep (--pack-open-progress),
and two owners of one surface is how a later beat silently eats an earlier
one. The idle float takes over directly instead.
---------------------------------------------------------------------- */
@keyframes packChargeGather {
0% { opacity: 0; transform: scale(0.72); }
/* Contract before release: the stage pulls in, then lets go. */
45% { opacity: 0.85; transform: scale(0.88); }
100% { opacity: 0; transform: scale(1.9); }
}
@keyframes packChargeBloom {
0% { opacity: 0; transform: scale(0.4); }
18% { opacity: 1; transform: scale(1.18); }
/* The held frame. Impact is a pause, not a curve. */
30% { opacity: 1; transform: scale(1.18); }
100% { opacity: 0; transform: scale(2.1); }
}
@keyframes packChargeArrive {
0% { opacity: 0; transform: translate3d(0, -34%, 0) scale(0.86) rotate(-7deg); }
38% { opacity: 1; transform: translate3d(0, 4%, 0) scale(1.09) rotate(3.2deg); }
/* Squash on landing, then roll back through the axis rather than onto it. */
58% { transform: translate3d(0, 1%, 0) scale(0.975) rotate(-1.4deg); }
78% { transform: translate3d(0, 0, 0) scale(1.018) rotate(0.6deg); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes packChargeContact {
0% { opacity: 0; transform: scale(0.55); }
100% { opacity: 1; transform: scale(1); }
}
.card-packs-charging::before,
.card-packs-charging::after {
animation: none;
}
/* Overshoot needs room past the settle point, which `ease-out` cannot give. */
.card-packs-charging .card-packs-pack.card-packs-pack-charging {
animation: packChargeArrive 620ms cubic-bezier(0.22, 1.24, 0.32, 1) 240ms both;
/* The phone tiers pin an idle lift here; the arrival owns the transform. */
transform: none;
scale: 1;
}
/* 120ms behind the pack: the shadow is a separate object with its own weight,
and the lag is the whole reason the drop reads as a landing. */
.card-packs-charging .card-packs-pack-glow {
animation: packChargeContact 340ms cubic-bezier(0.2, 0.7, 0.3, 1) 360ms both;
}
/* Reduced motion keeps the EVENT and drops the travel. Removing the beat
entirely would make a paid action look like nothing happened. */
@media (prefers-reduced-motion: reduce) {
.card-packs-charging::before,
.card-packs-charging::after,
.card-packs-charging .card-packs-pack.card-packs-pack-charging,
.card-packs-charging .card-packs-pack-glow {
animation: none;
}
.card-packs-charging .card-packs-pack.card-packs-pack-charging {
opacity: 1;
filter: brightness(1.28) drop-shadow(0 0 14px rgba(214, 200, 255, 0.6));
transition: filter 420ms ease-out;
}
.card-packs-charging .card-packs-pack-glow {
opacity: 1;
}
}
/* --- Pack opening experience ------------------------------------------- */
/* Drag build-up: the pack charges with light as the seal travels; near the
tear it strains. Driven per-frame by --pack-open-progress (0..1). */
.card-packs-pack-dragging {
animation: none;
/* Anticipation. Foil under tension necks IN before it splits, so the pull
narrows the wrapper as it charges. The `scale` property is used rather
than folding this into `transform` so the base lift, the nudge and the
tear keyframes keep sole ownership of that slot.
Vertical is pinned at 1 on purpose: the short-landscape stage hands the
pack zero clearance, and any factor above 1 would push the crimped edge
straight back into `overflow:hidden`. */
scale: calc(1 - var(--pack-open-progress, 0) * 0.028) 1;
}
/* The charge light follows the BAG'S SILHOUETTE.
`box-shadow` on the wrapper drew a glowing rectangle around an element that
paints nothing — a lit box floating behind a crimped foil pouch, with visible
corners where the pack has none. `drop-shadow` reads the art's real alpha, so
the light hugs the crimps and the notches. Both shadows live in one filter
because a second `filter` declaration would replace the first. */
.card-packs-pack-dragging .card-packs-pack-art {
filter:
drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 calc(6px + var(--pack-open-progress, 0) * 22px)
rgba(246, 226, 122, calc(0.18 + var(--pack-open-progress, 0) * 0.62)));
}
/* The stress lives at the SEAM, not on the whole pack.
`filter: brightness(1.22)` on the art bleached the crescent, the filigree and
the crimson seal at exactly the moment the player is staring at them — the
pack got PALER the closer it came to opening, which is the opposite of
material under load. Foil whitens along the line it is about to fail on, so
that is the only place this brightens, and it brightens with the pull.
Masked to the art's alpha like every other light on this wrapper. */
.card-packs-pack-dragging .card-packs-pack-body::after {
content: "";
position: absolute;
inset: 0;
/* A LENS, not a strip. Foil under tension does not whiten evenly along its
whole length — it gives where the load concentrates, and the ribbon is
pulling from the middle of the seam. A full-height band also ran over the
crimped bottom edge and read as a lamp behind the pack. The ellipse dies
well inside the silhouette in both axes, so this needs no alpha mask of
its own (one fewer compositing layer during the drag) and can never light
the transparent crimp notches. */
background: radial-gradient(ellipse 9% 56% at 50% 48%,
rgba(255, 255, 255, calc(var(--pack-open-progress, 0) * 0.95)) 0%,
rgba(255, 248, 224, calc(var(--pack-open-progress, 0) * 0.42)) 38%,
transparent 88%);
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
}
/* The last of the travel, where the seal is about to give: a fast, tiny
shiver that says the material is at its limit. Amplitude stays under a
pixel and a half so it never reads as a glitch. */
.card-packs-pack-straining .card-packs-pack-art {
animation: packSealStrain 0.11s linear infinite;
}
@keyframes packSealStrain {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-1.2px); }
75% { transform: translateX(1.2px); }
}
/* While the halves fly, the pack holds full presence; the opened dim state
lands only after the one-shot tear completes. */
/* During the tear the wrapper must stay on screen so the halves can shear
apart — but it has to be GONE by the time the tear class is dropped. Holding
opacity:1 flat meant that, the moment JS removed `-tearing`, the intact pack
was revealed at full opacity and only then began its 0.3s fade: the "whole
pack flashes back after the halves detach". Fading inside the tear leaves
nothing to reveal. */
.card-packs-pack-tearing.card-packs-pack-opened {
visibility: visible;
animation: card-packs-tear-vanish 0.68s ease-out forwards;
}
@keyframes card-packs-tear-vanish {
0%, 55% { opacity: 1; }
100% { opacity: 0; }
}
/* The tear moment: light escaping along the SEAM.
The flash used to be a radial disc inset -4% — a circle covering the whole
wrapper, so the one thing the player was looking at (the crescent, the
filigree, the halves shearing apart) was bleached out by the effect meant to
celebrate it. The rip is a vertical line down the middle of the pack, so the
flash is a vertical line too: narrow enough that the art either side of it
stays legible, and stretched in X as the seam opens. */
.card-packs-pack-tearing::after {
content: "";
position: absolute;
/* Inside the pack's own height, and shaped by ONE gradient.
Two earlier shapes were wrong in the same way. A `radial-gradient(circle)`
at `inset: -4%` covered the entire wrapper and bleached out the halves it
was celebrating. Replacing it with a linear band plus a radial MASK cost a
whole extra compositing layer (ablation: the flash was 4 of the tear's 7
long frames, and the mask was most of that) — and the mask's Y radius was
62% of its own box, i.e. PAST the box, so it faded nothing and the flash
rendered as a hard-edged column poking out above and below the pack: a
fluorescent tube, not light escaping a rip.
The element is already narrow, so an ellipse whose radii BOTH fall short
of it shapes the light in both axes at once: brightest along the seam,
dying out toward the crimps and toward the art either side. */
inset: 1% 30%;
background: radial-gradient(ellipse 62% 50% at 50% 50%,
#fffdf3 0%,
rgba(255, 248, 224, 0.72) 26%,
rgba(246, 226, 122, 0.2) 62%,
transparent 92%);
/* `screen` is what makes this read as light escaping rather than as paint
laid over the art. It costs about two long frames in the ablation and it
is worth them: this is the moment. */
mix-blend-mode: screen;
/* Short. On a near-black stage `screen` keeps even a 20%-opacity column
plainly visible, so a 420ms flash left a soft white beam standing in the
middle of the stage long after the halves had tumbled out of it — a
lightsaber where the pack used to be. The rip is an event, not a lamp:
it is over before the debris is. */
animation: card-packs-tear-flash 0.24s ease-out forwards;
pointer-events: none;
z-index: 4;
}
/* An impact frame, not a bloom. The old curve took 99ms to reach full — long
enough to read as a light turning on. Contact now lands inside three frames
and the rest of the clip is falloff, which is what makes the moment feel
struck rather than lit. The scale is asymmetric on purpose: the seam WIDENS
as the halves part, it does not inflate. */
@keyframes card-packs-tear-flash {
0% {
opacity: 0;
transform: scale(0.24, 0.86);
}
7% {
opacity: 1;
transform: scale(0.62, 1.02);
}
/* The hold: two frames at full before anything recovers. */
12% {
opacity: 1;
transform: scale(0.86, 1.04);
}
/* Nearly all of the falloff inside the first third: what the eye keeps is
the contact, not the glow after it. */
38% {
opacity: 0.2;
transform: scale(1.5, 1.02);
}
100% {
opacity: 0;
transform: scale(2.3, 0.98);
}
}
/* Behind the halves, the pack's own dark interior opening along the seam.
Without it the rip parted onto the stage and the wrapper read as a decal
splitting rather than a bag tearing. Painted from the wrapper's ::before, so
it sits UNDER the art halves in DOM paint order and can never wash them out;
gone by the time they are clear of it. */
.card-packs-pack-tearing::before {
content: "";
position: absolute;
inset: 5% 45%;
background: linear-gradient(90deg,
rgba(6, 8, 14, 0) 0%,
rgba(6, 8, 14, 0.9) 32%,
rgba(2, 3, 6, 0.98) 50%,
rgba(6, 8, 14, 0.9) 68%,
rgba(6, 8, 14, 0) 100%);
animation: packTearVoid 0.5s cubic-bezier(0.1, 0.72, 0.28, 1) forwards;
pointer-events: none;
z-index: 0;
}
@keyframes packTearVoid {
0% {
opacity: 0;
transform: scaleX(0.12);
}
14% {
opacity: 1;
transform: scaleX(0.8);
}
100% {
opacity: 0;
transform: scaleX(3.2);
}
}
/* The ribbon is attached to the right-hand half, so it goes where that half
goes. It used to hang motionless in mid-air while the pack it was fastened
to was flung apart underneath it — the single clearest tell that the tear
was a stack of effects rather than one object coming apart.
`transform-origin: top center` (from the base rule) is what makes it whip
from its anchor rather than slide. */
.card-packs-pack-tearing .card-packs-pack-seal {
animation: packSealFling 0.62s cubic-bezier(0.1, 0.72, 0.28, 1) forwards;
transition: none;
pointer-events: none;
}
@keyframes packSealFling {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 1;
}
/* It snaps taut before it travels — the same beat the halves split on. */
14% {
transform: translate(26%, -6%) rotate(14deg);
opacity: 1;
}
100% {
transform: translate(190%, 86%) rotate(58deg);
opacity: 0;
}
}
/* TORN FOIL, not sparks.
The tear used to borrow `UI.FX.burst` — the shared button flourish, which
lays its particles at `cos(i/count * 2PI)`, i.e. perfectly evenly around a
circle. Two calls therefore drew two concentric rings of identical round
dots, expanding in lockstep and dying on the same frame: a firework, on a
moment that is supposed to be a foil bag being ripped in half.
These are shards. Every one is a different sliver at a different angle,
thrown a different distance at a different speed, spinning a different way,
and dying at its own time — and they ARC, because the only thing that makes
debris read as debris is that it falls.
The container is positioned by JS at the rip; the shards are its children.
Each carries its own --sx/--sy/--fall/--spin/--tone from JS, so the whole
burst is one CSS animation per shard and no per-frame JS at all. */
.card-packs-foil-burst {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
z-index: 5;
}
.card-packs-foil-shard {
position: absolute;
left: 0;
top: 0;
width: var(--shard-w, 3px);
height: var(--shard-h, 9px);
/* A torn scrap of foil catches light across its width: bright edge, darker
body. Flat fills would read as confetti. */
background: linear-gradient(112deg,
var(--shard-hi, rgba(255, 250, 226, 0.98)) 0%,
var(--shard-lo, rgba(214, 173, 78, 0.92)) 62%,
rgba(120, 92, 34, 0.86) 100%);
border-radius: 1px;
will-change: transform, opacity;
animation: packFoilShard var(--shard-dur, 640ms) var(--shard-delay, 0ms) forwards;
}
@keyframes packFoilShard {
0% {
/* Out of the rip fast, then decelerating — the throw. */
animation-timing-function: cubic-bezier(0.05, 0.78, 0.28, 1);
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
opacity: 1;
}
/* Apex. From here gravity owns it, so the curve flips to accelerating. */
54% {
animation-timing-function: cubic-bezier(0.42, 0, 0.78, 0.92);
transform:
translate3d(calc(var(--sx, 0px) * 0.82), var(--sy, 0px), 0) rotate(calc(var(--spin, 240deg) * 0.58)) scale(0.92);
opacity: 1;
}
100% {
transform:
translate3d(var(--sx, 0px), calc(var(--sy, 0px) + var(--fall, 90px)), 0) rotate(var(--spin, 240deg)) scale(0.4);
opacity: 0;
}
}
/* The stage answers the tear once — a bloom proportional to the event, on the
surface the pack is sitting on. Applied by JS for the duration of the tear
so it can never latch on a surface that outlives the moment.
THE LIGHT IS PAINTED ONCE AND ONLY ITS OPACITY MOVES. The bloom used to
animate the STAGE's own `box-shadow`, sweeping its blur radius from 50px to
120px and back. A blur radius that changes every frame cannot be composited:
the browser re-rasterizes a full-width blurred shadow on every one of them,
and a layer-by-layer ablation measured this as the single largest frame cost
in the whole ceremony — 16 frames over 24ms during the tear, 9 with this one
effect removed and 1 with the ceremony switched off entirely. Sitting behind
the pack (z-index 0) it lights the SURFACE rather than washing the subject,
which is what the box-shadow on the stage did too. */
.card-packs-stage-flare {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
z-index: 0;
box-shadow: inset 0 0 0 1px rgba(255, 246, 214, 0.9);
background: radial-gradient(ellipse 62% 92% at 50% 46%,
rgba(246, 226, 122, 0.32),
rgba(246, 226, 122, 0.09) 44%,
transparent 78%);
}
.card-packs-stage-tearing .card-packs-stage-flare {
animation: packStageBloom 0.72s ease-out;
}
@keyframes packStageBloom {
0% { opacity: 0; }
12% { opacity: 1; }
100% { opacity: 0; }
}
/* Click nudge: the pack refuses a plain click with a small headshake so the
player learns the seal wants to be dragged. */
.card-packs-pack-nudge {
animation: card-packs-pack-nudge 0.5s ease;
}
@keyframes card-packs-pack-nudge {
0%,
100% {
transform: translateY(-8px) rotate(0deg);
}
25% {
transform: translateY(-8px) rotate(-2.2deg);
}
55% {
transform: translateY(-8px) rotate(2.2deg);
}
80% {
transform: translateY(-8px) rotate(-1deg);
}
}
.card-packs-pack-hint-emphasis {
color: #f6e27a;
text-shadow: 0 0 12px rgba(246, 226, 122, 0.65);
transform: scale(1.06);
transition: transform 0.2s ease, color 0.2s ease;
}
/* Affordable buy button breathes so the purchase invites itself. */
.card-packs-buy-btn.card-packs-buy-ready {
animation: card-packs-buy-pulse 2.2s ease-in-out infinite;
}
@keyframes card-packs-buy-pulse {
0%,
100% {
box-shadow: 0 0 0 rgba(246, 226, 122, 0);
}
50% {
box-shadow: 0 0 18px rgba(246, 226, 122, 0.55);
}
}
/* Once claiming starts the pack leaves the scene entirely — a dimmed ghost
behind the reveal fan reads as clutter. The tear plays first (the tearing
override below keeps it fully present), then this rest state fades the
wrapper out and removes it from hit-testing and paint. */
.card-packs-pack-opened {
opacity: 0;
visibility: hidden;
transform: translateY(-4px) scale(0.95);
animation: none;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
/* Once the tear class leaves, make the intact wrapper physically impossible
to repaint during a visibility/opacity transition or a stale style frame.
The tearing exclusion is load-bearing: its pseudo-elements still carry the
two real wrapper halves while they fly apart. */
.card-packs-pack-opened:not(.card-packs-pack-tearing) .card-packs-pack-art {
background: none !important;
filter: none;
visibility: hidden;
}
.card-packs-pack-opened:not(.card-packs-pack-tearing) .card-packs-pack-body {
visibility: hidden;
}
/* The ground contact — and it belongs to the STAGE, not to the pack.
It used to be a child of `.card-packs-pack`, which meant the pack's own
`packFloat` transform carried it: the shadow rose and fell WITH the object
casting it, so a 6px lift changed the object-to-shadow gap by 1.12px. A
shadow that follows its object is not a shadow, it is a decal, and the float
read as a wobble because of it. As a sibling of the pack it is pinned to the
surface, JS gives it the pack's LAYOUT box (offsetTop/offsetWidth ignore
transforms, so the float cannot leak back in), and the lift now opens a real
gap. It still breathes in anti-phase — higher means wider and fainter — which
is the part that reads as height. */
.card-packs-pack-glow {
position: absolute;
top: var(--pack-shadow-top, 100%);
left: 50%;
width: var(--pack-shadow-width, 60%);
height: 15px;
margin-top: 3px;
transform: translateX(-50%);
/* Dark and tight where the object nearly touches, thinning fast outward —
the stage under it is a near-black panel with a teal wash at the top, so
the contact is warm-black rather than neutral grey and never reads as a
painted ellipse. */
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.66) 0%,
rgba(4, 6, 10, 0.36) 44%,
rgba(4, 6, 10, 0) 74%);
filter: blur(5px);
pointer-events: none;
z-index: 0;
animation: packContactShadow var(--pack-breath-dur, 3.2s) ease-in-out infinite;
}
@keyframes packContactShadow {
0%, 100% {
transform: translateX(-50%) scale(1);
opacity: 0.85;
}
50% {
transform: translateX(-50%) scale(1.14, 0.86);
opacity: 0.55;
}
}
/* The foil sheen: a specular band drifting across the sealed wrapper, masked
to the art's own alpha so it lights the pack and never the transparent
crimp notches. Same period as the lift and the contact shadow — one object,
one light. Painted on the BODY (which sits above the art in DOM order) so
it never competes with the tear pseudo-elements for the art's own slots. */
.card-packs-pack-body::before {
content: "";
position: absolute;
inset: 0;
/* Narrowed from a 32%-wide band: at its peak the old sheen veiled a third
of the illustration at once, so the pack looked hazy rather than lit. A
tighter band reads as a harder, more specular foil and leaves the art
readable underneath it. */
background: linear-gradient(108deg,
transparent 40%,
rgba(255, 244, 214, 0.44) 47.5%,
rgba(255, 255, 255, 0.68) 50%,
rgba(255, 244, 214, 0.44) 52.5%,
transparent 60%);
background-size: 300% 100%;
mix-blend-mode: screen;
opacity: 0.42;
-webkit-mask: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
mask: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
pointer-events: none;
animation: packFoilSheen var(--pack-breath-dur, 3.2s) ease-in-out infinite;
}
/* The band tracks back and forth rather than looping in one direction: a
sweep that resets reads as a repeating effect, a band that returns reads as
a light source the pack is turning under. */
@keyframes packFoilSheen {
0%, 100% {
background-position: 118% 0;
opacity: 0.26;
}
50% {
background-position: -18% 0;
opacity: 0.5;
}
}
/* Once the seal is pulled the idle light stops competing with the charge
sweep, and once torn there is no wrapper left to light.
The shadow is now the pack's SIBLING, so its state selectors are sibling
combinators — a descendant selector would silently stop matching and leave a
shadow under a pack that is no longer there. */
.card-packs-pack-dragging .card-packs-pack-body::before,
.card-packs-pack-tearing .card-packs-pack-body::before,
.card-packs-pack-opened .card-packs-pack-body::before,
.card-packs-pack-disabled .card-packs-pack-body::before,
.card-packs-stage-vacant .card-packs-pack-body::before,
.card-packs-pack-disabled ~ .card-packs-pack-glow,
.card-packs-pack-tearing ~ .card-packs-pack-glow,
.card-packs-pack-opened ~ .card-packs-pack-glow {
opacity: 0;
animation: none;
}
/* The generated pack illustration IS the pack. The charging sweep and the
tear halves are layered over this art (scripts/generatePackArt.js). */
.card-packs-pack-art {
position: absolute;
inset: 0;
/* The asset carries real alpha (chroma-keyed in generatePackArt.js) and
the container matches its exact ratio, so it renders 1:1 with no crop
and no letterbox. The drop-shadow follows the crimped silhouette. */
background: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
overflow: visible;
pointer-events: none;
}
/* Charging light: a foil sheen that sweeps across the art, its reach and
brightness driven by the live drag progress. Masked to the wrapper's alpha
so the sweep never lights the transparent crimp notches. */
.card-packs-pack-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 246, 214, 0.55) 50%,
transparent 70%);
background-size: 260% 100%;
background-position: calc(120% - var(--pack-open-progress, 0) * 240%) 0;
opacity: calc(var(--pack-open-progress, 0) * 0.9);
mix-blend-mode: screen;
-webkit-mask: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
mask: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
pointer-events: none;
}
/* The tear: the artwork splits into two halves that shear apart while the
flash fires; each half carries the real art, clipped. */
.card-packs-pack-tearing .card-packs-pack-art {
background: none;
/* AND NO FILTER. The base rule's `drop-shadow` makes this element a filter
root: while its two pseudo children animate, the browser re-renders the
whole subtree into a filter buffer and re-blurs a 22px shadow EVERY
frame — and then does it again underneath the wrapper's own opacity
fade. A layer-by-layer ablation put it at 16 long frames (>24ms) during
the tear with the filter, 10 without, against 1 for the ceremony
switched off entirely. Debris in mid-air has nothing to cast a ground
shadow onto in any case. */
filter: none;
}
.card-packs-pack-tearing .card-packs-pack-art::before,
.card-packs-pack-tearing .card-packs-pack-art::after {
content: "";
position: absolute;
inset: 0;
background: url('../assets/images/card-pack-front.webp') center / 100% 100% no-repeat;
-webkit-mask: none;
mask: none;
mix-blend-mode: normal;
opacity: 1;
}
/* Debris leaves a rip at its FASTEST and decelerates — `ease-in` accelerated
the halves from rest, which read as the pack politely parting. They are now
flung: hard initial velocity, a tumble that keeps turning after the throw,
and a slight shrink as they fall away from the light. */
/* TORN, not cut. `inset(0 50% 0 0)` gave the two halves a dead-straight edge —
the pack looked like it had been opened with scissors, which is the one thing
a foil wrapper never looks like. The two polygons below walk the SAME list of
boundary points in opposite directions, so the ragged seam tiles exactly:
no sliver of overlap, no gap, and a rip that reads as a rip at the moment it
is most visible. */
.card-packs-pack-tearing .card-packs-pack-art::before {
clip-path: polygon(0 0, 52% 0, 46% 9%, 53% 19%, 45% 30%, 52% 41%, 44% 52%, 51% 63%, 45% 74%, 52% 85%, 46% 94%, 50% 100%, 0 100%);
animation: card-packs-tear-left 0.62s cubic-bezier(0.1, 0.72, 0.28, 1) forwards;
}
.card-packs-pack-tearing .card-packs-pack-art::after {
clip-path: polygon(50% 100%, 46% 94%, 52% 85%, 45% 74%, 51% 63%, 44% 52%, 52% 41%, 45% 30%, 53% 19%, 46% 9%, 52% 0, 100% 0, 100% 100%);
background-position: center;
background-size: 100% 100%;
animation: card-packs-tear-right 0.62s cubic-bezier(0.1, 0.72, 0.28, 1) forwards;
}
@keyframes card-packs-tear-left {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
/* The split itself: the halves part before they travel, so the eye sees a
seam open rather than two shapes sliding. */
14% {
transform: translate(-19%, -2%) rotate(-8deg) scale(1.03);
opacity: 1;
}
100% {
transform: translate(-58%, 20%) rotate(-24deg) scale(0.88);
opacity: 0;
}
}
@keyframes card-packs-tear-right {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
14% {
transform: translate(19%, -2%) rotate(8deg) scale(1.03);
opacity: 1;
}
100% {
transform: translate(58%, 20%) rotate(24deg) scale(0.88);
opacity: 0;
}
}
.card-packs-pack-body {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: visible;
}
/* The seal is the R1 crimson fork ribbon: it hangs from the pack's top-right
shoulder like a real bookmark ribbon and is pulled DOWNWARD to open. The
pull ELONGATES the ribbon itself (--seal-stretch, set by JS from the drag
travel) with a slight pendulum sway toward the pointer (--seal-sway /
--seal-rot). The PULL label is printed on the ribbon at 84% of its CURRENT
length, so the drag drags the text down with the material (0.84x the
stretch) while holding a constant clearance above the fork cavity, which
the clip-path opens at that same 84%. */
.card-packs-pack-seal {
position: absolute;
top: 0;
right: 20%;
/* The label inside measures itself against this box. */
container-type: inline-size;
/* 30px on the lab's 190px wrapper — the proportion the pick was made at. */
width: clamp(20px, 15.8%, 34px);
height: calc(30% + var(--seal-stretch, 0px));
/* The button itself paints NOTHING and is never clipped: a clip-path on a
real