/* The card moments (DESIGN.md §5–6): the pack you tear, the graded-style case, the card. The pack, case and card
   are the card prototype's own (projects/one-more-pull/cards-page: the STAGE pack and the CLASSIC case top Stan
   picked), scoped to #cardlayer; the moment around them (the slot the plush card comes out of, the reward words, the
   CONTINUE? choice) is below. */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --rx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --flip { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --tear { syntax: '<number>'; inherits: true; initial-value: 0; }
.ow-cards {
  --fg: #f5f2f8; --muted: #a69fb4; --gold: #ffd34d; --violet: #9b5cff;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Courier Prime", ui-monospace, Menlo, monospace;
  --dichro: conic-gradient(from calc(var(--ry) * 6 + var(--rx) * 4), #00e5ff, #6a3cff, #ff2bd6, #ffcf3a, #3cffb5, #00e5ff);
  --chrome: linear-gradient(180deg, #ffffff 0%, #e4e7ef 38%, #7c8394 50%, #f6f7fb 63%, #aeb4c2 100%);
  color: var(--fg);
}
#cardlayer { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; font: 16px/1.5 var(--body); }
#cardlayer.on { display: grid; }
#cardlayer > * { grid-area: 1 / 1; }
/* ---------- the foil pack: three designs, with real thickness ---------- */
.ow-cards .pack { --pw: min(58vw, 236px); --glow: #ffffff; --depth: 9px; container-type: inline-size; position: relative; width: var(--pw); aspect-ratio: 0.6; perspective: 1000px; z-index: 5; touch-action: none; cursor: grab; transition: transform .7s cubic-bezier(.4,0,.6,1), opacity .6s; }
.ow-cards .pack.small { --pw: 100%; --depth: 7px; touch-action: pan-y; }
.ow-cards .pack.in { animation: ow-packin .7s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes ow-packin { from { transform: translateY(-120%) rotate(-12deg); } to { transform: none; } }
.ow-cards .pack.gone { transform: translateY(75%) rotate(6deg); opacity: 0; }
.ow-cards .pack.idle { animation: ow-sway 6s ease-in-out infinite; }
.ow-cards .pack.in.idle { animation: ow-packin .7s cubic-bezier(.3,1.4,.5,1) both, ow-sway 6s ease-in-out .7s infinite; }
.ow-cards .pk-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.ow-cards .pk-shadow { position: absolute; left: 12%; right: 12%; bottom: -8%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); filter: blur(4px); }
.ow-cards .pk-back { position: absolute; inset: 1.5% 2%; border-radius: 2%; transform: translateZ(calc(var(--depth) * -1)) rotateY(180deg); background: var(--side); }
.ow-cards .pk-side { position: absolute; top: 9%; bottom: 9%; width: calc(var(--depth) * 2); background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.25) 50%, rgba(0,0,0,.35)), var(--side); }
.ow-cards .pk-side.l { left: calc(var(--depth) * -1); transform: rotateY(-90deg); }
.ow-cards .pk-side.r { right: calc(var(--depth) * -1); transform: rotateY(90deg); }
.ow-cards .skin { position: absolute; inset: 0; transform: translateZ(var(--depth)); }
.ow-cards .skin > * { position: absolute; }
.ow-cards .skin .base { inset: 0; background: var(--packbase); }
.ow-cards .skin .window { overflow: hidden; }
.ow-cards .skin .window img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.12) contrast(1.04); }
.ow-cards .skin .ridges { left: 0; right: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 2px, rgba(0,0,0,.28) 2px 4px); mix-blend-mode: overlay; }
.ow-cards .skin .ridges.t { top: 0; height: 6.5%; } .skin .ridges.b { bottom: 0; height: 6.5%; }
.ow-cards .skin .wrinkles { inset: 0; mix-blend-mode: overlay; background: repeating-linear-gradient(100deg, rgba(255,255,255,.3) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(78deg, rgba(0,0,0,.18) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 7%, transparent 19%, transparent 81%, #000 93%, transparent 95%); mask-image: linear-gradient(180deg, transparent 5%, #000 7%, transparent 19%, transparent 81%, #000 93%, transparent 95%); }
.ow-cards .skin .cards { left: 9%; right: 9%; top: 19%; bottom: 19%; border-radius: 4%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.12); mix-blend-mode: overlay; }
.ow-cards .skin .shade { inset: 0; mix-blend-mode: multiply; background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,.48) 100%), linear-gradient(180deg, rgba(0,0,0,.36) 6%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 83%, rgba(0,0,0,.4) 94%); }
.ow-cards .skin .pillow { inset: 0; mix-blend-mode: soft-light; background: radial-gradient(70% 45% at 36% 42%, rgba(255,255,255,.7), transparent 65%); }
.ow-cards .skin .foil { inset: 0; background: var(--dichro); mix-blend-mode: color-dodge; opacity: var(--foilop, .4); }
.ow-cards .skin .bands { inset: 0; mix-blend-mode: overlay; opacity: .8; background: repeating-linear-gradient(calc(115deg + var(--ry) * 3), rgba(0,229,255,0) 0%, rgba(0,229,255,.85) 4%, rgba(255,43,214,.85) 8%, rgba(255,207,58,.85) 12%, rgba(60,255,181,0) 16%); background-size: 260% 260%; background-position: var(--mx) var(--my); }
.ow-cards .skin .gloss { inset: 0; mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 25%, rgba(0,0,0,.15) 90%); }
.ow-cards .skin .sticker { top: 60%; right: 3%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe27a 45%, #f0a31b); display: grid; place-items: center; text-align: center; font: 900 3.4cqw/1.1 var(--display); color: #3b1b00; transform: rotate(12deg); box-shadow: 0 3px 8px rgba(0,0,0,.35); z-index: 1; }
.ow-cards .pack:not(.gift) .skin .sticker { display: none; }
.ow-cards .skin .tiny { font: 700 3.3cqw/1.1 var(--mono); letter-spacing: 0.1em; }

/* design 1 · STAGE: hot pink and cyan holo, the stage poster in a big window */
.ow-cards .d-stage { --packbase: linear-gradient(135deg, #ff2e93 0%, #ff8bd1 18%, #00e5ff 38%, #fff36b 58%, #9b5cff 78%, #ff2e93 100%); --foilop: .45; --side: linear-gradient(180deg, #ff2e93, #00b8ff); }
.ow-cards .d-stage .window { top: 15%; left: 7%; right: 7%; bottom: 19%; border-radius: 7%; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px rgba(255,255,255,.6), 0 6px 16px rgba(0,0,0,.25); }
.ow-cards .d-stage .window img { object-position: 50% 20%; }
.ow-cards .d-stage .logo { top: 12.5%; left: 6%; font: 900 16cqw/0.8 var(--display); letter-spacing: -0.04em; transform: rotate(-7deg) scaleY(1.15); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 0 #ff2e93) drop-shadow(2px 3px 0 #ff2e93) drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.ow-cards .d-stage .star { top: 13.5%; right: 4%; width: 25%; aspect-ratio: 1; background: #ff2e3b; clip-path: polygon(50% 0, 61% 30%, 95% 25%, 72% 50%, 95% 75%, 61% 70%, 50% 100%, 39% 70%, 5% 75%, 28% 50%, 5% 25%, 39% 30%); display: grid; place-items: center; font: 900 4.5cqw/1 var(--display); color: #fff36b; transform: rotate(12deg); }
.ow-cards .d-stage .band { left: 3%; right: 3%; bottom: 7%; height: 12%; display: grid; align-content: center; justify-items: center; gap: 0.8cqw; transform: rotate(-3deg);
  background: linear-gradient(90deg, #ff2e93 0%, #c44dff 50%, #00b8ff 100%);
  clip-path: polygon(0 0, 100% 0, 95.5% 50%, 100% 100%, 0 100%, 4.5% 50%); overflow: hidden; }
.ow-cards .d-stage .band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(calc(115deg + var(--ry) * 3), rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 4%, rgba(255,243,107,.6) 7%, rgba(0,229,255,.5) 10%, rgba(255,255,255,0) 14%); background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: overlay; }
.ow-cards .d-stage .band::after { content: ""; position: absolute; inset: 1.2cqw 5.5cqw; border-top: 1.5px solid rgba(255,255,255,.85); border-bottom: 1.5px solid rgba(255,255,255,.85); pointer-events: none; }
.ow-cards .d-stage .band b { position: relative; font: 900 9.5cqw/0.9 var(--display); letter-spacing: -0.02em; transform: scaleY(1.15); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #7a0a45) drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.ow-cards .d-stage .band span { position: relative; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.ow-cards .d-stage .top { top: 7.6%; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* design 2 · RACE: chrome and rainbow, the race poster cut on a slant, hazard stripes */
.ow-cards .d-race { --packbase: linear-gradient(160deg, #ffffff 0%, #c7cede 22%, #f5f7fd 40%, #8e97ad 62%, #eef1f8 80%, #b3bbcc 100%); --foilop: .85; --side: linear-gradient(180deg, #e6e9f2, #8e97ad); }
.ow-cards .d-race .speed { inset: 0; background: repeating-linear-gradient(120deg, transparent 0 18px, rgba(255,46,59,.85) 18px 26px, transparent 26px 44px); -webkit-mask-image: linear-gradient(180deg, transparent 70%, #000 82%); mask-image: linear-gradient(180deg, transparent 70%, #000 82%); }
.ow-cards .d-race .window { top: 18%; left: 5%; right: 5%; bottom: 21%; background: #fff; clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); padding: 2.2%; }
.ow-cards .d-race .window img { clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); object-position: 50% 30%; }
.ow-cards .d-race .logo { top: 10.5%; left: 0; right: 0; text-align: center; font: italic 900 15cqw/0.85 var(--display); letter-spacing: -0.03em; color: #ff2e3b; -webkit-text-stroke: 0.9cqw #111; transform: skewX(-8deg) rotate(-4deg); text-shadow: 3px 3px 0 #111; z-index: 1; }
.ow-cards .d-race .hazard { left: 0; right: 0; bottom: 14.5%; height: 4.5%; background: repeating-linear-gradient(135deg, #ffd400 0 10px, #111 10px 20px); }
.ow-cards .d-race .band { left: 0; right: 0; bottom: 7.5%; height: 7%; background: #111; color: #fff; display: grid; place-items: center; }
.ow-cards .d-race .top { top: 7.6%; left: 0; right: 0; text-align: center; color: #111; }

/* design 3 · PLUSH: deep violet and gold, the plush-wall poster under an arch, creepy cute */
.ow-cards .d-plush { --packbase: radial-gradient(120% 70% at 50% 30%, #6a1f9a 0%, #2a0f45 55%, #12051f 100%); --foilop: .55; --side: linear-gradient(180deg, #4b1670, #14051f); }
.ow-cards .d-plush .window { top: 13%; left: 9%; right: 9%; bottom: 21%; border-radius: 50% 50% 4% 4% / 27% 27% 3% 3%; box-shadow: inset 0 0 0 3px #ffd34d, 0 0 18px rgba(255,95,168,.75); }
.ow-cards .d-plush .window img { object-position: 50% 35%; }
.ow-cards .d-plush .logo { bottom: 9.5%; left: 0; right: 0; text-align: center; font: 900 12cqw/0.85 var(--display); letter-spacing: -0.02em; background: linear-gradient(180deg, #fff7c2, #ffd34d 45%, #b47a07 55%, #ffe58a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.ow-cards .d-plush .tag { bottom: 7.4%; left: 0; right: 0; text-align: center; color: #ff8cc4; }
.ow-cards .d-plush .eye { width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1b1b1f 60%, #3a3a44); box-shadow: 0 0 0 2px #ffd34d; display: grid; place-items: center; color: #ffd34d; font: 900 6cqw/1 var(--display); }
.ow-cards .d-plush .eye.a { top: 12%; left: 4%; } .d-plush .eye.b { top: 12%; right: 4%; }
.ow-cards .d-plush .top { top: 7.6%; left: 0; right: 0; text-align: center; color: #ffd34d; }

.ow-cards .pack.gift { --packbase: linear-gradient(160deg, #fff2a8, #ffd34d 30%, #ffb3d6 55%, #fff7d6 78%, #ffcf3a); --side: linear-gradient(180deg, #ffd34d, #e0a400); }

.ow-cards .skin.strip { z-index: 3; transform-origin: 100% 11%; transform: translateZ(var(--depth)) rotate(calc(var(--tear) * -17deg)) translateY(calc(var(--tear) * -6%)); }
.ow-cards .skin.strip.off { transition: transform .6s cubic-bezier(.3,.6,.3,1), opacity .6s; transform: translateZ(var(--depth)) translate(150%, -120%) rotate(50deg); opacity: 0; }
.ow-cards .skin.body { z-index: 1; }
.ow-cards .gap { position: absolute; z-index: 2; left: 0; top: 9.6%; height: 3%; width: calc(var(--tear) * 100%); background: var(--glow); box-shadow: 0 0 14px 4px var(--glow), 0 0 40px 10px var(--glow); border-radius: 2px; transform: translateZ(calc(var(--depth) - 1px)); }
.ow-cards .perf { position: absolute; z-index: 4; left: 5%; right: 5%; top: 11%; border-top: 1.5px dashed rgba(255,255,255,.95); pointer-events: none; transition: opacity .2s; transform: translateZ(calc(var(--depth) + 1px)); }
.ow-cards .perf::after { content: "✂  SWIPE →"; position: absolute; left: 0; top: -1.6em; font: 700 3.6cqw/1 var(--mono); letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.ow-cards .pack.small .perf { display: none; }
.ow-cards .burst { position: absolute; z-index: 2; left: 50%; top: 11%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--glow) 35%, transparent 70%); opacity: 0; pointer-events: none; transform: translateZ(var(--depth)); }
.ow-cards .burst.go { animation: ow-burst .8s ease-out forwards; }
@keyframes ow-burst { 0% { opacity: 1; transform: translateZ(9px) scale(1); } 100% { opacity: 0; transform: translateZ(9px) scale(26); } }
/* ---------- the case: the card fills it, four label designs ---------- */
#cardlayer #spot { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; }
#cardlayer #spot > * { grid-area: 1 / 1; }
.ow-cards .slab { --sw: min(70vw, 286px); --band: #8e877b; width: var(--sw); aspect-ratio: 0.61; perspective: 1200px; container-type: inline-size; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ow-cards .slab.big { touch-action: none; }
.ow-cards .stage .slab { position: relative; z-index: 4; }
.ow-cards .slab.small { --sw: 100%; }
.ow-cards .sl-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); border-radius: 4cqw; }
.ow-cards .slab.settle .sl-inner { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ow-cards .slab.rising { transform: translateY(26%) scale(.8); --flip: 180deg; }
.ow-cards .slab.risen { transition: transform .8s cubic-bezier(.2,1.2,.4,1), --flip 1s cubic-bezier(.2,.8,.2,1) .55s; transform: none; --flip: 0deg; }
.ow-cards .sl-face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.ow-cards .sl-front, .ow-cards .sl-back {
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(255,255,255,.16));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 1.8cqw rgba(255,255,255,.05), inset 0 0 0 2.1cqw rgba(255,255,255,.38), inset 0 0 0 2.3cqw rgba(0,0,0,.15), 0 5cqw 12cqw rgba(0,0,0,.6);
}
.ow-cards .sl-back { transform: rotateY(180deg); display: grid; place-items: center; }
.ow-cards .sl-well { position: absolute; top: 32.5cqw; left: 3cqw; right: 3cqw; bottom: 3cqw; border-radius: 2cqw; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 3cqw rgba(0,0,0,.3); display: grid; place-items: center; }
.ow-cards .sl-well .card { --w: 91.5cqw; }
.ow-cards .sl-gloss { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(calc(105deg + var(--ry) * 2), transparent 32%, rgba(255,255,255,.34) 44%, rgba(255,255,255,.06) 52%, transparent 60%); background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: screen; z-index: 5; }
.ow-cards .sl-back .seal { display: grid; gap: 3cqw; justify-items: center; text-align: center; }
.ow-cards .sl-back .seal b { font: 900 13cqw/0.85 var(--display); letter-spacing: -0.03em; transform: scaleY(1.2); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .sl-back .seal span { font: 700 2.8cqw/1.3 var(--mono); letter-spacing: 0.2em; color: #fff; }
.ow-cards .sl-back .qr { width: 18cqw; aspect-ratio: 1; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 4.5cqw 4.5cqw; border: 1cqw solid #fff; }
.ow-cards .r-N.slab { --band: #9a9384; } .r-R.slab { --band: #2c5cff; } .r-SR.slab { --band: #8b4dff; } .r-SSR.slab { --band: #d9a21b; } .r-SECRET.slab { --band: #1b1d22; }
.ow-cards .count-badge { position: absolute; top: -6px; right: -6px; z-index: 6; font: 800 12px/1 var(--display); background: var(--pink); color: #160b10; border-radius: 99px; padding: 5px 8px; }

/* the label: shared parts */
.ow-cards .sl-label { position: absolute; top: 3cqw; left: 3cqw; right: 3cqw; height: 27cqw; border-radius: 1.6cqw; overflow: hidden; display: grid; column-gap: 2.4cqw; row-gap: 0.4cqw; padding: 2.2cqw 3cqw; align-items: center; }
.ow-cards .sl-label > * { min-width: 0; }
.ow-cards .l-set { grid-area: set; font: 700 2.4cqw/1.2 var(--mono); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .7; }
.ow-cards .l-name { grid-area: name; font: 900 5cqw/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-cards .l-sub { grid-area: sub; font: 600 2.8cqw/1.15 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.ow-cards .l-rate { grid-area: rate; font: 700 2.6cqw/1.2 var(--mono); letter-spacing: 0.03em; white-space: nowrap; }
.ow-cards .l-rate b { color: #d6285f; }
.ow-cards .l-num { grid-area: num; display: none; }
.ow-cards .l-rar { grid-area: rar; font: 900 8.4cqw/0.9 var(--display); letter-spacing: -0.02em; justify-self: end; }
.ow-cards .l-holo { grid-area: holo; width: 7.5cqw; aspect-ratio: 1; border-radius: 50%; background: var(--dichro); box-shadow: inset 0 0 0 0.5cqw rgba(255,255,255,.85); display: grid; place-items: center; font: 900 3.6cqw/1 var(--display); color: #fff; justify-self: end; }
.ow-cards .l-serial { grid-area: serial; font: 700 2.3cqw/1.2 var(--mono); letter-spacing: 0.04em; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-cards .l-by { grid-area: by; font: 700 2.3cqw/1.2 var(--mono); letter-spacing: 0.04em; opacity: .75; justify-self: end; white-space: nowrap; }
.ow-cards .l-tk { grid-area: tk; display: none; }
.ow-cards .l-bar { grid-area: bar; display: none; width: 15cqw; height: 3cqw; justify-self: end; background: repeating-linear-gradient(90deg, currentColor 0 0.35cqw, transparent 0.35cqw 0.7cqw, currentColor 0.7cqw 0.85cqw, transparent 0.85cqw 1.4cqw); }

/* label 1 · CLASSIC: white grading label with a rarity band */
.ow-cards .lb-classic .sl-label { background: linear-gradient(180deg, #ffffff, #e9ecf3); color: #121318; border-top: 1.6cqw solid var(--band); grid-template-columns: 1fr auto; grid-template-areas: "set rar" "name rar" "sub holo" "rate holo" "serial by"; }
.ow-cards .lb-classic .l-rar { background: linear-gradient(160deg, var(--band), #121318 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .lb-classic .sl-label::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(calc(120deg + var(--ry) * 3), transparent 0 6%, rgba(0,229,255,.16) 9%, rgba(255,43,214,.16) 12%, transparent 15%); background-size: 250% 250%; background-position: var(--mx) var(--my); mix-blend-mode: multiply; }

/* label 2 · CHROME: black gloss, chrome number, dichroic edge */
.ow-cards .lb-chrome .sl-label { color: #fff; border: 0.6cqw solid transparent; background: linear-gradient(180deg, #1d1e25, #07070a) padding-box, var(--dichro) border-box; grid-template-columns: auto 1fr auto; grid-template-areas: "num set set" "num name rar" "num sub holo" "num rate holo" "serial serial by"; }
.ow-cards .lb-chrome .l-num { display: block; font: 900 11cqw/0.8 var(--display); letter-spacing: -0.05em; transform: scaleY(1.25); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .lb-chrome .l-name { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .lb-chrome .l-rar { font-size: 6.4cqw; background: linear-gradient(calc(90deg + var(--ry) * 5), #00e5ff, #ff2bd6, #ffcf3a, #3cffb5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .lb-chrome .l-rate b { color: #ff7ab8; }

/* label 3 · HOLO: the whole label is foil, the rarity huge on the left */
.ow-cards .lb-holo .sl-label { color: #101015; background: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)), var(--dichro); box-shadow: inset 0 0 0 0.5cqw rgba(255,255,255,.9); grid-template-columns: auto 1fr auto; grid-template-areas: "rar set num" "rar name num" "rar sub holo" "rar rate holo" "serial serial by"; }
.ow-cards .lb-holo .l-rar { font-size: 10cqw; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: start; line-height: 1; background: linear-gradient(180deg, #101015, var(--band)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .lb-holo .l-num { display: block; font: 900 6cqw/1 var(--display); justify-self: end; }
.ow-cards .lb-holo .sl-label::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 50%); mix-blend-mode: overlay; }

/* label 4 · TICKET: an arcade prize ticket, punched sides */
.ow-cards .lb-ticket .sl-label { color: #c41f33; background: #fff4dc; box-shadow: inset 0 0 0 0.6cqw #c41f33, inset 0 0 0 1.1cqw #fff4dc, inset 0 0 0 1.35cqw #c41f33;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.6cqw, #000 2.7cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 2.6cqw, #000 2.7cqw) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 2.6cqw, #000 2.7cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 2.6cqw, #000 2.7cqw) right / 51% 100% no-repeat;
  padding-inline: 5cqw; grid-template-columns: 1fr auto; grid-template-areas: "tk tk" "name rar" "sub rar" "rate bar" "serial by"; }
.ow-cards .lb-ticket .l-tk { display: block; text-align: center; font: 900 3cqw/1 var(--display); letter-spacing: 0.24em; border-bottom: 0.4cqw dashed #c41f33; padding-bottom: 0.8cqw; }
.ow-cards .lb-ticket .l-set, .ow-cards .lb-ticket .l-holo { display: none; }
.ow-cards .lb-ticket .l-name { color: #1c1410; }
.ow-cards .lb-ticket .l-rar { color: #c41f33; }
.ow-cards .lb-ticket .l-rate b { color: #c41f33; }
.ow-cards .lb-ticket .l-bar { display: block; color: #1c1410; }
/* ---------- the card ---------- */
.ow-cards .card {
  --w: 100%; width: var(--w); aspect-ratio: 63 / 88; perspective: 1100px; container-type: inline-size;
  --foil: 0; --artfoil: 0; --glit: 0; --glare: .35;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.ow-cards .card .inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d; border-radius: 4.6cqw;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));
  box-shadow: 0 2.5cqw 8cqw rgba(0,0,0,.55);
}
.ow-cards .card.static { cursor: inherit; touch-action: inherit; }
.ow-cards .card.static .inner { transform: none; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.45); }
.ow-cards .card.settle .inner { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ow-cards .card.idle, .ow-cards .slab.idle { animation: ow-sway 7s ease-in-out infinite; }
@keyframes ow-sway {
  0%, 100% { --mx: 28%; --my: 30%; --rx: 7deg; --ry: -10deg; }
  50% { --mx: 74%; --my: 68%; --rx: -6deg; --ry: 11deg; }
}
.ow-cards .face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ow-cards .back { transform: rotateY(180deg); }
.ow-cards .front { background: var(--frame); }
.ow-cards .r-N { --frame: linear-gradient(160deg, #f6f2ea, #d8d1c4 60%, #efe9de); --badge: #8e877b; }
.ow-cards .r-R { --frame: linear-gradient(160deg, #2c5cff, #8db6ff 45%, #1d3aa8 75%, #6b95ff); --foil: .35; --badge: #2c5cff; }
.ow-cards .r-SR { --frame: linear-gradient(160deg, #6a35d8, #e3cbff 40%, #5a2bb9 62%, #c3a2ff); --foil: .65; --artfoil: .18; --glit: .45; --badge: #8b4dff; }
.ow-cards .r-SSR { --frame: linear-gradient(160deg, #b57a12, #fff1b8 32%, #c8901d 52%, #fff7d6 70%, #a86f0e); --foil: .9; --artfoil: .3; --glit: .85; --badge: #d9a21b; }
.ow-cards .r-SECRET { --frame: var(--chrome); --foil: 1; --artfoil: .45; --glit: 1; --glare: .55; --badge: #1b1d22; }
.ow-cards .front .dichro { position: absolute; inset: 0; background: var(--dichro); mix-blend-mode: color-dodge; opacity: var(--foil); filter: saturate(1.3); }
.ow-cards .front .bands { position: absolute; inset: 0; opacity: calc(var(--foil) * .9); mix-blend-mode: overlay; background: repeating-linear-gradient(calc(115deg + var(--ry) * 3), rgba(0,229,255,.0) 0%, rgba(0,229,255,.9) 4%, rgba(255,43,214,.9) 8%, rgba(255,207,58,.9) 12%, rgba(60,255,181,.0) 16%); background-size: 260% 260%; background-position: var(--mx) var(--my); }
.ow-cards .art { position: absolute; inset: 4.4% 4.4% 28% 4.4%; border-radius: 3.2cqw; overflow: hidden; background: #111; box-shadow: 0 0 0 0.6cqw rgba(255,255,255,.55), inset 0 0 4cqw rgba(0,0,0,.4); }
.ow-cards .art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.ow-cards .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 78%, rgba(0,0,0,.35) 100%); }
.ow-cards .artfoil { position: absolute; inset: 4.4% 4.4% 28% 4.4%; border-radius: 3.2cqw; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--artfoil); background: repeating-linear-gradient(calc(120deg + var(--ry) * 4), transparent 0%, rgba(0,229,255,.8) 5%, rgba(255,43,214,.8) 10%, rgba(255,207,58,.8) 15%, transparent 20%); background-size: 300% 300%; background-position: var(--mx) var(--my); }
.ow-cards .r-SECRET .art img { filter: saturate(1.25) contrast(1.08); }
.ow-cards .top { position: absolute; top: 6%; left: 8%; right: 8%; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.ow-cards .num { font: 900 15cqw/0.8 var(--display); letter-spacing: -0.04em; transform: scaleY(1.25); transform-origin: left top; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.5cqw 0 rgba(0,0,0,.55)); }
.ow-cards .r-SSR .num, .ow-cards .r-SECRET .num { background: linear-gradient(calc(90deg + var(--ry) * 5), #00e5ff, #ff2bd6, #ffcf3a, #3cffb5); -webkit-background-clip: text; background-clip: text; }
.ow-cards .badge { font: 900 4.2cqw/1 var(--display); letter-spacing: 0.04em; padding: 1.6cqw 2.4cqw; border-radius: 99px; background: var(--badge); color: #fff; box-shadow: 0 0 0 0.5cqw rgba(255,255,255,.7); }
.ow-cards .r-SECRET .badge { background: var(--dichro); color: #111; }
.ow-cards .name { position: absolute; left: 8%; top: 22%; z-index: 2; font: 900 7.4cqw/1 var(--display); letter-spacing: 0.02em; transform: scaleY(1.2); transform-origin: left top; color: #fff; text-shadow: 0 0.6cqw 1.6cqw rgba(0,0,0,.7); }
.ow-cards .plate { position: absolute; left: 4.4%; right: 4.4%; bottom: 3.6%; height: 22.5%; border-radius: 3cqw; padding: 2.6cqw 3.2cqw; background: rgba(12,10,18,.82); color: #fff; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.9cqw; z-index: 2; box-shadow: inset 0 0 0 0.4cqw rgba(255,255,255,.18); }
.ow-cards .r-N .plate { background: rgba(255,255,255,.88); color: #2a2620; }
.ow-cards .title { font: italic 600 4cqw/1.15 var(--body); opacity: .85; }
.ow-cards .skill { font: 600 4.1cqw/1.18 var(--body); }
.ow-cards .skill b { font-weight: 800; color: var(--gold); }
.ow-cards .r-N .skill b { color: #b0661b; }
.ow-cards .stats { display: flex; gap: 3cqw; font: 700 2.9cqw/1 var(--mono); letter-spacing: 0.06em; align-items: end; }
.ow-cards .stats span { display: flex; gap: 0.7cqw; align-items: center; }
.ow-cards .stats i { display: inline-block; width: 2.2cqw; height: 1.6cqw; border-radius: 0.4cqw; background: currentColor; opacity: .25; }
.ow-cards .stats i.on { opacity: 1; background: var(--pink); }
.ow-cards .foot { display: flex; justify-content: space-between; font: 700 2.7cqw/1 var(--mono); letter-spacing: 0.08em; opacity: .75; }
.ow-cards .glitter { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--glit); mix-blend-mode: color-dodge;
  background-image: radial-gradient(circle at 20% 30%, #fff 0 0.35cqw, transparent 0.6cqw), radial-gradient(circle at 70% 60%, #bff 0 0.3cqw, transparent 0.55cqw), radial-gradient(circle at 40% 80%, #fcf 0 0.3cqw, transparent 0.55cqw);
  background-size: 9cqw 11cqw, 13cqw 9cqw, 11cqw 14cqw;
  background-position: calc(var(--mx) * -0.4) calc(var(--my) * -0.4), calc(var(--mx) * 0.3) calc(var(--my) * 0.5), calc(var(--mx) * -0.2) calc(var(--my) * 0.3);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.25) 45%, transparent 75%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.25) 45%, transparent 75%); }
.ow-cards .glare { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: var(--glare); mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 22%, rgba(0,0,0,.25) 90%); }
.ow-cards .back { background: radial-gradient(120% 90% at 50% 40%, #241a3d, #0d0a16 70%); display: grid; place-items: center; }
.ow-cards .back::before { content: ""; position: absolute; inset: 0; background: var(--dichro); mix-blend-mode: color-dodge; opacity: .55; -webkit-mask-image: repeating-conic-gradient(from 0deg at 50% 46%, #000 0 6deg, transparent 6deg 12deg); mask-image: repeating-conic-gradient(from 0deg at 50% 46%, #000 0 6deg, transparent 6deg 12deg); }
.ow-cards .back .logo { position: relative; text-align: center; display: grid; gap: 2cqw; }
.ow-cards .back .logo b { font: 900 16cqw/0.82 var(--display); letter-spacing: -0.03em; transform: scaleY(1.2); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .back .logo span { font: 700 3cqw/1 var(--mono); letter-spacing: 0.3em; color: #fff; }
.ow-cards .back .ring { position: absolute; inset: 5%; border-radius: 3.4cqw; box-shadow: inset 0 0 0 0.8cqw rgba(255,255,255,.75); }
.ow-cards .back .file { position: relative; display: grid; gap: 4cqw; margin: 12cqw 9cqw; padding: 8cqw 7cqw; text-align: left; align-content: center; height: calc(100% - 24cqw); border-radius: 4cqw; background: rgba(10, 8, 16, .82); box-shadow: inset 0 0 0 0.5cqw rgba(255,255,255,.25); }
.ow-cards .back .file span { font: 700 3.2cqw/1.2 var(--mono); letter-spacing: 0.14em; color: var(--pink); }
.ow-cards .back .file p { font: 600 6.4cqw/1.22 var(--body); color: #fff; text-wrap: pretty; }
.ow-cards .back .file b { font: 900 3.6cqw/1 var(--display); letter-spacing: 0.08em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-cards .card.turning .inner { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ow-cards .card.turned { --flip: 180deg; }

/* v6 · the 72-card set: UR (red-gold full art), bare cards rising out of the pack */
.ow-cards .r-UR { --frame: linear-gradient(160deg, #8a0f1f, #ffcf3a 26%, #ff4d6d 44%, #fff3c4 60%, #c4161c 80%, #ffcf3a); --foil: 1; --artfoil: .38; --glit: 1; --glare: .5; --badge: #c4161c; }
.ow-cards .r-UR .num { background: linear-gradient(calc(90deg + var(--ry) * 5), #ffcf3a, #ff2b55, #fff3c4, #ffcf3a); -webkit-background-clip: text; background-clip: text; }
.ow-cards .r-UR.slab { --band: #c4161c; }
.ow-cards .card.full .art { inset: 0; border-radius: inherit; box-shadow: none; }
.ow-cards .card.full .artfoil { inset: 0; border-radius: inherit; }
.ow-cards .card.full .plate { background: linear-gradient(180deg, rgba(12,10,18,.2), rgba(12,10,18,.82) 30%); }
.ow-cards .card.big { --w: min(62vw, 250px); position: relative; z-index: 4; touch-action: none; }
.ow-cards .card.rising { transform: translateY(26%) scale(.8); --flip: 180deg; }
.ow-cards .card.risen { transition: transform .8s cubic-bezier(.2,1.2,.4,1), --flip 1s cubic-bezier(.2,.8,.2,1) .55s; transform: none; --flip: 0deg; }
.ow-cards .slab.empty .sl-well { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, rgba(255,255,255,.1) 8px 16px); }
.ow-cards .slab.empty .sl-well .q { font: 900 28cqw/1 var(--display); background: linear-gradient(180deg, #ffffff 0%, #c9d0dd 40%, #2f3443 52%, #eef1f7 72%, #b7bfcd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }

/* ---------------------------------------------------------------- the moment around them */
.ow-cards .spot { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.ow-cards .spot > * { grid-area: 1 / 1; }
.ow-cards .lift { --w: min(62vw, 250px); width: var(--w); position: relative; z-index: 4; }
.ow-cards .lift .card { --w: 100%; }
.ow-cards .slot { position: absolute; left: 14%; right: 14%; top: 63%; height: 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 18px 6px var(--pink, #ff5fa8), 0 0 60px 18px rgba(255, 95, 168, .55); z-index: 5; opacity: 0; transform: scaleX(.2); transition: opacity .3s, transform .45s cubic-bezier(.2,1.3,.4,1); }
.ow-cards .slot.on { opacity: 1; transform: none; }
.ow-cards .slot.off { opacity: 0; transform: scaleX(1.3); transition: opacity .5s, transform .6s; }
.ow-cards .rise { position: absolute; left: 0; right: 0; top: 0; height: 63%; display: grid; place-items: end center; overflow: hidden; z-index: 4; pointer-events: none; }
.ow-cards .rise .lift { transform: translateY(105%); }
.ow-cards .rise.go .lift { transition: transform 1.1s cubic-bezier(.25,.9,.25,1); transform: translateY(-8%); }
.ow-cards .words { position: absolute; left: 18px; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14%); display: grid; justify-items: center; gap: 8px; z-index: 6; pointer-events: none; }
.ow-cards .words .w { font: 700 17px/1.3 var(--mono); color: #fff; background: rgba(12, 6, 18, .72); padding: 5px 10px 4px; letter-spacing: .01em; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.ow-cards .words .w.on { opacity: 1; transform: none; }
.ow-cards .words .w.hot { color: #ffd1e6; border-left: 3px solid #ff2e93; text-shadow: 0 0 12px rgba(255,46,147,.7); }
.ow-cards .words .w.glitch { animation: glitch .5s steps(2) 2; }
@keyframes glitch { 0% { transform: translateX(-3px); filter: url(#split); } 50% { transform: translateX(3px); } 100% { transform: none; filter: none; } }
.ow-cards .kick { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 13%); left: 0; right: 0; display: grid; justify-items: center; gap: 6px; z-index: 6; pointer-events: none; }
.ow-cards .kick b { font: 900 34px/.9 var(--display); letter-spacing: -.02em; transform: scaleY(1.2); }
.ow-cards .kick span { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; color: #fff; text-transform: uppercase; }
.ow-cards .kick i { font-style: normal; color: var(--gold); }
.ow-cards .kick.pop { animation: kpop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes kpop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.ow-cards .hint2 { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 12%); text-align: center; font: 700 12px/1 var(--mono); letter-spacing: .16em; color: #fff; opacity: .9; pointer-events: none; z-index: 6; transition: opacity .3s; }
.ow-cards .hint2 span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.ow-cards .burstfx { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; background: radial-gradient(40% 30% at 50% 45%, var(--glow, #fff), transparent 70%); }
.ow-cards .burstfx.go { animation: bfx .9s ease-out; }
@keyframes bfx { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.ow-cards .fly { position: fixed; z-index: 60; transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .7s; transform-origin: 0 0; pointer-events: none; }
.ow-cards .stage-pack { position: relative; z-index: 4; }
.ow-cards .pack { --pw: min(58vw, 236px); }
.ow-cards .slab { --sw: min(66vw, 270px); }
/* CONTINUE? when she does not make it */
.ow-cards .cont { position: relative; z-index: 6; width: min(86vw, 340px); display: grid; gap: 12px; justify-items: stretch; text-align: center; }
.ow-cards .cont .q { font: 900 46px/.85 var(--display); letter-spacing: -.03em; transform: scaleY(1.25); background: linear-gradient(180deg, #ffffff 0%, #c9d0dd 40%, #2f3443 52%, #eef1f7 72%, #b7bfcd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #ff2e93); margin-bottom: 10px; }
.ow-cards .cont button { border: 0; border-radius: 14px; padding: 15px 14px; cursor: pointer; font: 900 16px/1.15 var(--body); }
.ow-cards .cont .sp { color: #14070d; background: linear-gradient(180deg, #ff9cc8, #ff5fa8 55%, #e23d86); box-shadow: 0 5px 0 #a3255c; }
.ow-cards .cont .sp small { display: block; margin-top: 4px; font: 700 10px/1 var(--mono); letter-spacing: .16em; opacity: .7; }
.ow-cards .cont .fr { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font-size: 14px; }

/* Safari: aspect-ratio on a size container (container-type) is mis-sized there (the revealed card stretched tall, its
   words lost). A padding spacer gives the height instead, the same in every browser. */
.ow-cards .card { aspect-ratio: auto; position: relative; }
.ow-cards .card::before { content: ""; display: block; padding-top: 139.683%; }
.ow-cards .card > .inner { position: absolute; inset: 0; width: auto; height: auto; }
.ow-cards .slab { aspect-ratio: auto; position: relative; }
.ow-cards .slab::before { content: ""; display: block; padding-top: 163.934%; }
.ow-cards .slab > .sl-inner { position: absolute; inset: 0; width: auto; height: auto; }
/* Safari: a swaying card's words and plate could sort behind its foil (blend layers in a 3D card). Each face is its
   own group, composited as one picture: the words stay on top. */
.ow-cards .face { isolation: isolate; }