/* ===== Rip view: shelf ===== */
:root {
  --one-cw: min(64vw, 300px, calc((100vh - 330px) / 1.4));
  --hero-cw: min(78vw, 340px, calc((100vh - 230px) / 1.4));
  --detail-cw: min(86vw, 360px, calc((100vh - 170px) / 1.4));
}
@supports (height: 1svh) {
  :root {
    --one-cw: min(64vw, 300px, calc((100svh - 330px) / 1.4));
    --hero-cw: min(78vw, 340px, calc((100svh - 230px) / 1.4));
    --detail-cw: min(86vw, 360px, calc((100svh - 170px) / 1.4));
  }
}
.kicker { font: 600 11px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.rip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 4px; }
.rip-head h1 { margin: 2px 0 0; font-size: 28px; letter-spacing: -.02em; }
.rip-meter { text-align: right; }
.rip-meter .mono { color: var(--cream); }
.cap-dots { display: flex; gap: 6px; justify-content: flex-end; margin: 5px 0 4px; }
.cap-dots i { width: 22px; height: 8px; border-radius: 99px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line); }
.cap-dots i.used { background: linear-gradient(90deg, var(--red), var(--gold2)); box-shadow: none; }

.rip-grid { display: grid; gap: 6px; }
@media (min-width: 820px) { .rip-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; margin-top: 12px; } }
.rip-hero { display: flex; justify-content: center; padding: 10px 0 30px; }
.shelf-pack {
  position: relative; display: block; border: 0; background: none; padding: 0; cursor: pointer;
  width: min(44vw, 210px); aspect-ratio: 528 / 900; color: inherit;
}
@media (min-width: 820px) { .shelf-pack { width: 250px; } }
.shelf-float { position: absolute; inset: 0; animation: packFloat 3.8s ease-in-out infinite; }
.shelf-float .pack-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .65)); }
.shelf-glow {
  position: absolute; inset: 0 -30% -6%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 67, 56, .34), rgba(233, 196, 106, .1) 62%, transparent);
  animation: glowPulse 3.8s ease-in-out infinite;
}
.shelf-tap {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap;
  font: 600 11px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  animation: tapHint 1.9s ease-in-out infinite;
}
.shelf-pack:active .shelf-float { transform: scale(.97); }
@keyframes packFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.4deg); } 50% { transform: translate3d(0, -10px, 0) rotate(1.4deg); } }
@keyframes glowPulse { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes tapHint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* light sweep clipped to the pack's own alpha — hidden until the pack image itself has loaded,
   so the skewed band never shows unmasked over an empty box */
.pack-sweep { visibility: hidden; }
.pack-img.ok ~ .pack-sweep { visibility: visible; }
.pack-sweep {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: url(/brand/pack.webp) center / contain no-repeat;
  mask: url(/brand/pack.webp) center / contain no-repeat;
}
.pack-sweep::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  animation: sweep 3.6s ease-in-out infinite;
}
@keyframes sweep { 0% { transform: translate3d(0, 0, 0) skewX(-14deg); } 55%, 100% { transform: translate3d(330%, 0, 0) skewX(-14deg); } }

/* pack art missing → drawn foil pack */
.pack-fb {
  position: absolute; inset: 0; border-radius: 5% / 3%; overflow: hidden;
  background: linear-gradient(160deg, #22356b, #0c1433 46%, #6b1525 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8%;
  box-shadow: inset 0 0 0 2px rgba(233, 196, 106, .5);
  color: var(--gold); font: 600 12px var(--font); letter-spacing: .22em; text-transform: uppercase;
}
.pack-fb::before, .pack-fb::after { content: ""; position: absolute; left: 0; right: 0; height: 6.5%; background: repeating-linear-gradient(90deg, #e6e6e6 0 3px, #9a9a9a 3px 6px); }
.pack-fb::before { top: 0; }
.pack-fb::after { bottom: 0; }
.pack-fb-king { width: 62%; height: auto; display: block; }
.pack-fb-king.crown-fb svg { width: 100%; height: auto; display: block; }

.pack-btns { display: grid; gap: 10px; }
.btn.pack-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 14px; text-align: left;
}
.pack-btn .pb-label { font-size: 16px; font-weight: 600; }
.pack-btn .pb-sub { font: 500 12px/1.2 var(--mono); opacity: .8; }
.pack-btn.big { min-height: 66px; box-shadow: 0 10px 30px rgba(232, 67, 56, .28); }
.pack-btn.big .pb-label { font-size: 18px; }
.btn.violet { background: linear-gradient(180deg, #8f63f7, #6a3fd6); color: #fff; }
.buy-label { display: flex; justify-content: space-between; gap: 10px; margin: 4px 2px -2px; }
.buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy-row .btn.pack-btn { min-height: 64px; padding: 10px 12px; }
.buy-row .pb-label { font-size: 15px; }
.buy-row .pb-sub { font-size: 11px; }
.btn.halo-btn {
  color: #FFE08A;
  background: radial-gradient(120% 140% at 50% 0%, rgba(245, 192, 75, .22), transparent 60%), linear-gradient(180deg, #2a1407, #170b04);
  box-shadow: inset 0 0 0 1px rgba(245, 192, 75, .65), 0 0 22px rgba(232, 67, 56, .32);
}
.btn.halo-btn .pb-sub { color: #f2c98a; opacity: .9; }
.btn.outline { background: transparent; border: 1px dashed rgba(233, 196, 106, .4); color: var(--cream); }
.btn.epic { box-shadow: 0 0 0 1px rgba(245, 192, 75, .7), 0 0 24px rgba(139, 92, 246, .5); }
.btn.soft { opacity: .55; box-shadow: none; }
.rip-notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 13px; }
.rip-notes .note { display: inline-flex; align-items: center; gap: 2px; color: var(--cream); }
.rip-recent { margin-top: 22px; }
.rip-recent h3 { margin-bottom: 4px; }
.recent-list li { flex-wrap: wrap; gap: 8px 12px; }
.recent-cards { display: flex; gap: 4px; }
.recent-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-left: auto; }
.recent-meta .link { padding: 2px 0; color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-mini { font: 500 12px var(--mono); padding: 3px 8px; border-radius: 99px; background: var(--s3); color: var(--cream); white-space: nowrap; }
.chip-mini.chip-cp { background: rgba(232, 67, 56, .2); color: #ff9b92; }
.chip-mini.chip-usdt { background: rgba(245, 192, 75, .18); color: var(--gold2); }

/* ===== Stage (full-screen opening sequence) ===== */
.stage {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: #040506; color: var(--cream);
  opacity: 0; transition: opacity .22s ease-out;
  overflow: hidden; overflow: clip; touch-action: manipulation;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-user-select: none; user-select: none;
}
.stage.in { opacity: 1; }
.stage-bg, .stage-bg::after { position: absolute; inset: 0; pointer-events: none; }
.stage-bg { background: radial-gradient(75% 55% at 50% 44%, rgba(232, 67, 56, .16), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(233, 196, 106, .08), transparent); }
.stage-bg::after { content: ""; opacity: 0; transition: opacity .7s; background: radial-gradient(75% 55% at 50% 44%, rgba(var(--mood, 232, 67, 56), .38), transparent 72%); }
/* good pulls light the stage in project red; only the Golden Claw turns it gold */
.stage[data-mood="R"], .stage[data-mood="SR"], .stage.god { --mood: 232, 67, 56; }
.stage[data-mood="UR"] { --mood: 240, 88, 52; }
.stage[data-mood="GOLD"] { --mood: 245, 192, 75; }
.stage[data-mood="R"] .stage-bg::after, .stage[data-mood="SR"] .stage-bg::after, .stage[data-mood="UR"] .stage-bg::after,
.stage[data-mood="GOLD"] .stage-bg::after, .stage.god .stage-bg::after { opacity: 1; }
.stage-rays, .hero-rays {
  position: absolute; left: 50%; top: 46%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 190, .07) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  opacity: 0; transition: opacity .8s;
  animation: spin 46s linear infinite;
}
.stage[data-mood="SR"] .stage-rays, .stage[data-mood="UR"] .stage-rays, .stage[data-mood="GOLD"] .stage-rays, .stage.god .stage-rays { opacity: 1; }
@keyframes spin { to { transform: rotate(1turn); } }
.stage-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 12px 2px 18px; }
.stage-src { font: 600 11px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stage-skip { color: var(--cream); opacity: .8; font-weight: 500; padding: 8px 10px; }
.stage-banner { position: relative; z-index: 3; text-align: center; font-size: 13px; color: var(--muted); padding: 0 16px; }
.stage-banner:empty { display: none; }
.stage.halo .stage-bg { background: radial-gradient(75% 55% at 50% 44%, rgba(245, 160, 70, .2), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(232, 67, 56, .14), transparent); }
.halo-fb { position: absolute; inset: 0; filter: drop-shadow(0 0 18px rgba(245, 192, 75, .8)); }
.tear-wrap.halo .pack-sweep { -webkit-mask-image: url(/brand/pack-halo.webp); mask-image: url(/brand/pack-halo.webp); }
.stage-banner .god, .stage-banner .epic, .stage-banner .halo {
  display: inline-block; margin-right: 6px; padding: 4px 10px; border-radius: 99px;
  font: 700 12px var(--font); letter-spacing: .2em; color: #15100a;
  background: linear-gradient(90deg, #ff8ad9, #ffd36a, #7affcb, #7ac0ff, #cf8aff);
}
.stage-banner .halo { background: linear-gradient(90deg, #E84338, #F5C04B, #E84338); }
.stage-mid { position: relative; z-index: 1; flex: 1; min-height: 0; margin: 4px 10px 0; }
.stage-chip { position: relative; z-index: 2; display: flex; justify-content: center; }
.stage-chip:empty { display: none; }
.stage-foot { position: relative; z-index: 2; padding: 10px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 62px; }
.stage-hint { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.stage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; animation: riseIn .35s ease-out both; }
.stage-actions .btn.primary { grid-column: 1 / -1; order: -1; min-height: 52px; font-size: 16px; }
.btn.xbtn { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* ---- tear ---- */
.tear-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.tear-wrap.gone { visibility: hidden; }
.tear-pack {
  position: relative; cursor: grab; touch-action: none; outline: none;
  width: min(58vw, 290px, calc((100vh - 250px) * .5867));
  aspect-ratio: 528 / 900;
  animation: packIn .55s cubic-bezier(.2, .9, .3, 1.15) both, packShake 2.8s 1.3s ease-in-out infinite;
}
@supports (height: 1svh) { .tear-pack { width: min(58vw, 290px, calc((100svh - 250px) * .5867)); } }
.tear-wrap.touching .tear-pack, .tear-wrap.tearing .tear-pack { animation: none; }
.tear-pack .pack-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.tear-body, .tear-strip { position: absolute; inset: 0; }
.tear-body { clip-path: inset(var(--tear) 0 0 0); filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); }
.tear-strip { clip-path: inset(0 0 calc(100% - var(--tear)) 0); transform-origin: 50% 100%; will-change: transform; }
.tear-shadow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 67, 56, .22), transparent); }
.tear-line { position: absolute; left: 4%; right: 4%; top: var(--tear); height: 3px; margin-top: -1.5px; pointer-events: none; overflow: visible; }
.tear-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 6px, transparent 6px 12px);
  opacity: .5; animation: dash .9s linear infinite;
}
.tear-line i {
  position: absolute; inset: -1px 0; border-radius: 3px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff, #FFE08A, #fff);
  box-shadow: 0 0 10px #FFE08A, 0 0 22px rgba(245, 192, 75, .85);
}
.tear-line.rtl i { transform-origin: 100% 50%; }
@keyframes dash { to { transform: translate3d(12px, 0, 0); } }
.tear-guide { position: absolute; left: 6%; right: 6%; top: var(--tear); height: 0; pointer-events: none; }
.tear-guide i { position: absolute; left: 0; top: -12px; width: 100%; height: 24px; animation: guide 2s cubic-bezier(.5, 0, .3, 1) 1s infinite both; }
.tear-guide i::before {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 7px rgba(255, 255, 255, .2), 0 4px 14px rgba(0, 0, 0, .5);
}
.tear-wrap.touching .tear-guide, .tear-wrap.tearing .tear-guide { display: none; }
@keyframes guide {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate3d(calc(100% - 24px), 0, 0); opacity: 1; }
  100% { transform: translate3d(calc(100% - 24px), 0, 0); opacity: 0; }
}
.tear-hint { font-size: 14px; color: var(--cream); opacity: .8; text-align: center; padding: 0 20px; }
.tear-wrap.burst::after {
  content: ""; position: absolute; left: 50%; top: 32%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 220, .95), rgba(245, 192, 75, .45) 38%, transparent 70%);
  animation: flash .7s ease-out forwards;
}
@keyframes flash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes packIn { from { opacity: 0; transform: translate3d(0, 50px, 0) scale(.82); } }
@keyframes packShake {
  0%, 76%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(-2.6deg); } 84% { transform: rotate(2.6deg); } 88% { transform: rotate(-1.6deg); } 92% { transform: rotate(1deg); }
}

/* ---- one-card reveal ---- */
.one { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 40px; }
.one-slot { position: relative; }
.one-slot .card { cursor: pointer; }
.tap-bubble {
  position: absolute; left: 50%; bottom: 100%; z-index: 6; margin-bottom: 18px;
  padding: 9px 18px 10px; border-radius: 16px; background: var(--red); color: #fff;
  font: 800 22px/1 var(--font); letter-spacing: .06em; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 24px rgba(232, 67, 56, .55), inset 0 -3px 0 rgba(0, 0, 0, .18);
  opacity: 0; transform: translate3d(-50%, 10px, 0) scale(.6);
}
.tap-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -9px; border: 9px solid transparent; border-top-color: var(--red); border-bottom: 0; }
.tap-bubble.in { animation: bubbleIn .32s cubic-bezier(.3, 1.6, .5, 1) forwards, bob 1s .32s ease-in-out infinite; }
.tap-bubble.gone { animation: bubbleOut .18s ease-in forwards; }
@keyframes bubbleIn { to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } }
@keyframes bob { 0%, 100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } 50% { opacity: 1; transform: translate3d(-50%, -8px, 0) scale(1.04); } }
@keyframes bubbleOut { from { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } to { opacity: 0; transform: translate3d(-50%, -6px, 0) scale(.7); } }

/* ladder stage 0: the shake builds for 0.9 s — identical for every rarity */
.one-slot .card.shaking { animation: shakeRamp .9s linear both; }
@keyframes shakeRamp {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { transform: translate3d(-1px, 0, 0) rotate(-.4deg); }
  16% { transform: translate3d(1px, -1px, 0) rotate(.5deg); }
  24% { transform: translate3d(-2px, 1px, 0) rotate(-.9deg); }
  31% { transform: translate3d(2px, -1px, 0) rotate(1deg); }
  38% { transform: translate3d(-3px, 1px, 0) rotate(-1.4deg); }
  45% { transform: translate3d(3px, -2px, 0) rotate(1.5deg); }
  51% { transform: translate3d(-4px, 2px, 0) rotate(-2deg); }
  57% { transform: translate3d(4px, -2px, 0) rotate(2.1deg); }
  62% { transform: translate3d(-5px, 2px, 0) rotate(-2.6deg); }
  67% { transform: translate3d(5px, -3px, 0) rotate(2.7deg); }
  72% { transform: translate3d(-6px, 3px, 0) rotate(-3.2deg) scale(1.01); }
  76% { transform: translate3d(6px, -3px, 0) rotate(3.3deg) scale(1.01); }
  80% { transform: translate3d(-7px, 3px, 0) rotate(-3.7deg) scale(1.02); }
  84% { transform: translate3d(7px, -4px, 0) rotate(3.8deg) scale(1.02); }
  88% { transform: translate3d(-8px, 4px, 0) rotate(-4.2deg) scale(1.03); }
  91% { transform: translate3d(8px, -4px, 0) rotate(4.3deg) scale(1.03); }
  94% { transform: translate3d(-9px, 4px, 0) rotate(-4.6deg) scale(1.04); }
  97% { transform: translate3d(9px, -5px, 0) rotate(4.7deg) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.02); }
}
/* (i) ttak: red light cracks out of the edges */
.card.crack::after {
  content: ""; position: absolute; inset: -2px; border-radius: 5% / 3.6%; pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 2px #ff7a6e, 0 0 18px 6px rgba(232, 67, 56, .95), 0 0 54px 18px rgba(232, 67, 56, .55), inset 0 0 22px 4px rgba(255, 120, 100, .8);
  animation: crackGlow .3s ease-out both;
}
@keyframes crackGlow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .75; } }
.crack-rays {
  position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 7deg, rgba(255, 110, 90, .95) 0deg 1.6deg, transparent 1.6deg 13deg);
  -webkit-mask: radial-gradient(closest-side, transparent 22%, #000 30%, transparent 72%);
  mask: radial-gradient(closest-side, transparent 22%, #000 30%, transparent 72%);
  transform: translate(-50%, -50%);
}
/* (ii) motion: the card trembles while red energy builds */
.one-slot .card.charging { animation: tremble .08s linear infinite alternate; }
.card.charging .aura, .card.crack .aura { background: radial-gradient(closest-side, rgba(232, 67, 56, .95), rgba(232, 67, 56, 0)); opacity: 1; transform: scale(1.1); }
.card.charging .aura { animation: leak .28s ease-in-out infinite alternate; }
@keyframes tremble { from { transform: translate3d(-1.5px, 0, 0) rotate(-.8deg); } to { transform: translate3d(1.5px, -1px, 0) rotate(.8deg); } }
/* (iii) pop: glow ring bursting out with the card */
.pop-ring {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 3px solid rgba(255, 226, 214, .95);
  box-shadow: 0 0 28px 6px rgba(232, 67, 56, .9), inset 0 0 24px 4px rgba(255, 190, 170, .7);
  opacity: 0; transform: translate(-50%, -50%) scale(.3);
}
.pop-ring.go { animation: popRing .75s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes popRing { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
.card.popped .aura { opacity: .9; transform: scale(1.04); }

/* light plates (anim/fx.js): screen-blended inside the opaque stage so their black vanishes */
.fx-vid { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .26s ease-out; object-fit: contain; background: transparent; }
.fx-vid.on { opacity: 1; transition-duration: .06s; }
.fx-vid.fx-UR { left: 50%; top: 50%; width: min(100vw, 100vh); height: min(100vw, 100vh); transform: translate(-50%, -50%); z-index: 4; }
.fx-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(232, 67, 56, .95), rgba(232, 67, 56, .3) 45%, rgba(232, 67, 56, 0) 78%); }
.fx-flash.red { background: radial-gradient(circle at 50% 50%, rgba(232, 67, 56, .5), rgba(232, 67, 56, .85) 70%, rgba(150, 18, 10, .95)); }
.fx-flash.pop { background: radial-gradient(circle at 50% 50%, #fff, rgba(255, 200, 190, .85) 22%, rgba(232, 67, 56, .55) 48%, rgba(232, 67, 56, 0) 78%); }

/* ---- intro (beat 2) ---- */
.intro { position: absolute; inset: 0; z-index: 8; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .38s ease-out; cursor: pointer; overflow: hidden; }
.intro[hidden] { display: none; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; opacity: 0; transition: opacity .25s ease-out; }
.intro-vid.on { opacity: 1; }
.intro-vid.warm { position: fixed; inset: auto; left: -4px; top: -4px; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
@media (min-aspect-ratio: 3/4) { .intro-vid { object-fit: contain; } }
.intro-fb {
  background: radial-gradient(120% 55% at 50% 108%, rgba(232, 67, 56, .38), transparent 62%), radial-gradient(70% 45% at 50% 0%, rgba(245, 192, 75, .1), transparent 70%),
    linear-gradient(180deg, #06070b, #110705 70%, #1c0a05);
}
.intro-floor {
  position: absolute; left: -30%; right: -30%; bottom: -12%; height: 48%; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 50% 0%, rgba(245, 192, 75, .1) 0 2px, transparent 2px 30px);
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 0;
}
.intro-ring-wrap { position: absolute; left: 50%; top: 40%; width: min(64vw, 42vh); aspect-ratio: 3 / 1; animation: ringDescend 1.5s cubic-bezier(.2, .7, .2, 1) both; }
.intro-ring { position: absolute; inset: 0; border-radius: 50%; border: max(4px, .9vmin) solid #F5C04B; box-shadow: 0 0 2vmin #E84338, 0 0 7vmin rgba(232, 67, 56, .75), inset 0 0 2vmin rgba(245, 192, 75, .85); }
.intro-ring.hot { border-color: #fff4d0; box-shadow: 0 0 3vmin #fff, 0 0 10vmin rgba(245, 192, 75, .9), 0 0 18vmin rgba(232, 67, 56, .8); opacity: 0; animation: ignite .9s 1.4s ease-out forwards; }
.intro-burst {
  position: absolute; left: 50%; top: 40%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 240, 210, .9), rgba(245, 192, 75, .5) 25%, rgba(232, 67, 56, .25) 45%, transparent 70%);
  opacity: 0; transform: scale(.2); animation: introBurst .95s 1.5s ease-out forwards;
}
@keyframes ringDescend { from { transform: translate3d(-50%, -46vh, 0) scale(.55); opacity: 0; } 30% { opacity: 1; } to { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; } }
@keyframes ignite { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .85; } }
@keyframes introBurst { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* ---- reward chip ---- */
.chip-wrap { position: relative; display: flex; align-items: center; gap: 14px; padding: 4px 16px 0; perspective: 900px; }
.chip-coin { position: relative; width: 84px; height: 84px; flex: none; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.chip-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.chip-front { transform: rotateY(0deg); }
.chip-back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #2c3a6e, #0d1430); box-shadow: inset 0 0 0 3px #E9C46A, inset 0 0 0 6px #0a1128, inset 0 0 0 7px rgba(233, 196, 106, .45), 0 8px 20px rgba(0, 0, 0, .5); }
.chip-king { width: 72%; height: 72%; object-fit: contain; display: block; }
.chip-king.crown-fb svg { width: 100%; height: 100%; display: block; }
.chip-big { font-size: 17px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.chip-unit { font: 700 10px var(--font); letter-spacing: .16em; }
.chip-xp .chip-front { background: radial-gradient(circle at 35% 28%, #fffaf0, #dcd3c3 45%, #968e82); color: #2a2418; box-shadow: inset 0 0 0 3px #f7efe0, inset 0 0 0 6px #b2aa9c, 0 8px 22px rgba(0, 0, 0, .55); }
.chip-cp .chip-front { background: radial-gradient(circle at 35% 28%, #ff9a90, #e84338 45%, #861a12); color: #fff; box-shadow: inset 0 0 0 3px #F5C04B, inset 0 0 0 6px #a52a1f, 0 8px 22px rgba(232, 67, 56, .45); }
.chip-usdt .chip-front { background: radial-gradient(circle at 35% 28%, #fff6cf, #f5c04b 45%, #9e6c17); color: #3a2905; box-shadow: inset 0 0 0 3px #fff1b8, inset 0 0 0 6px #b8862b, 0 8px 26px rgba(245, 192, 75, .55); }
.chip-shadow { position: absolute; left: 16px; top: 4px; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(245, 192, 75, .85); opacity: 0; pointer-events: none; }
.chip-wrap.landed .chip-shadow { animation: ring .9s ease-out; }
.chip-cp .chip-shadow { box-shadow: 0 0 0 2px rgba(232, 67, 56, .9); }
.chip-text { opacity: 0; transform: translate3d(-10px, 0, 0); transition: opacity .35s, transform .35s; }
.chip-wrap.landed .chip-text { opacity: 1; transform: none; }
.chip-label { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.chip-usdt .chip-label { color: var(--gold2); }
.chip-cp .chip-label { color: #ff8a80; }
.chip-sub { font-size: 13px; color: var(--muted); max-width: 250px; line-height: 1.35; }
@keyframes ring { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
/* §5.14: the XP chip takes the card's rarity colours; a prize follows as a separate BONUS chip */
.chip-xp.xr-U .chip-front { background: radial-gradient(circle at 35% 28%, #e6fff5, #5ee7b2 45%, #1f7f60); color: #08241a; box-shadow: inset 0 0 0 3px #c6fbe6, inset 0 0 0 6px #23926e, 0 8px 22px rgba(94, 231, 178, .35); }
.chip-xp.xr-R .chip-front { background: radial-gradient(circle at 35% 28%, #ffc9c2, #e84338 45%, #7e1810); color: #fff; box-shadow: inset 0 0 0 3px #ffb3a8, inset 0 0 0 6px #a52a1f, 0 8px 22px rgba(232, 67, 56, .45); }
.chip-xp.xr-SR .chip-front { background: radial-gradient(circle at 35% 28%, #efe8ff, #8b5cf6 45%, #3a1d82); color: #fff; box-shadow: inset 0 0 0 3px #ded2ff, inset 0 0 0 6px #6d3fe0, 0 8px 24px rgba(139, 92, 246, .5); }
.chip-xp.xr-UR .chip-front { background: radial-gradient(circle at 35% 28%, #fff6cf, #f5c04b 45%, #9e6c17); color: #3a2905; box-shadow: inset 0 0 0 3px #fff1b8, inset 0 0 0 6px #b8862b, 0 8px 26px rgba(245, 192, 75, .6); }
.chip-xp.xr-U .chip-label { color: #8ff0cb; }
.chip-xp.xr-R .chip-label { color: #ff8a80; }
.chip-xp.xr-SR .chip-label { color: #c4adff; }
.chip-xp.xr-UR .chip-label { color: var(--gold2); }
.chip-xp.xr-SR .chip-shadow { box-shadow: 0 0 0 2px rgba(174, 146, 255, .9); }
.chip-xp.xr-R .chip-shadow { box-shadow: 0 0 0 2px rgba(232, 67, 56, .9); }
.chip-bonus {
  position: absolute; left: 50%; top: -7px; z-index: 2; transform: translate3d(-50%, 0, 30px);
  padding: 3px 7px 2px; border-radius: 99px; background: var(--red); color: #fff;
  font: 800 9px/1 var(--font); letter-spacing: .14em; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); pointer-events: none;
}
.chip-usdt .chip-bonus { background: linear-gradient(90deg, #c9962f, #f5c04b, #c9962f); color: #2a1d04; }
/* two chips (XP + BONUS): both turn compact and stack */
.stage-chip.two { flex-direction: column; align-items: center; gap: 4px; }
.chip-coin { transition: width .3s ease, height .3s ease; }
.stage-chip.two .chip-wrap { width: min(100%, 360px); padding: 2px 16px 0; gap: 12px; }
.stage-chip.two .chip-coin, .stage-chip.two .chip-shadow { width: 62px; height: 62px; }
.stage-chip.two .chip-big { font-size: 14px; }
.stage-chip.two .chip-unit { font-size: 9px; }
.stage-chip.two .chip-label { font-size: 17px; }
.stage-chip.two .chip-sub { font-size: 12px; max-width: 260px; }

/* ===== Hero overlays (UR / Golden Claw) ===== */
.hero-ov {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; opacity: 0; transition: opacity .25s ease-out;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.hero-ov.in { opacity: 1; }
.hero-ov.out { opacity: 0; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(60% 48% at 50% 46%, rgba(245, 192, 75, .3), rgba(6, 7, 9, .97) 72%), #060709; }
.hero-ov.ur .hero-bg { background: radial-gradient(55% 45% at 50% 46%, rgba(245, 192, 75, .32), rgba(139, 92, 246, .14) 55%, rgba(6, 7, 9, .97) 78%), #060709; }
.hero-ov .hero-rays { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 224, 138, .13) 0deg 5deg, transparent 5deg 15deg); animation-duration: 32s; }
.hero-main { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px; text-align: center; max-height: 100%; }
.hero-kicker { display: flex; align-items: center; gap: 8px; font: 700 12px var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--gold2); }
.hero-kicker .mono { letter-spacing: .04em; font-size: 14px; }
.hero-title { margin: 0; font-size: 26px; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.hero-title.mono { font-size: 30px; color: var(--gold2); }
.hero-card { position: relative; margin: 6px 0; }
.hero-flavor { margin: 2px 0 4px; max-width: 340px; color: #cfc6b8; font-size: 14px; line-height: 1.4; }
.hero-btn { min-width: 210px; }
.hero-new { background: var(--red); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 10px; letter-spacing: .1em; }
.gem-mini { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: conic-gradient(#ff6ad5, #ffd36a, #6affc4, #6ab8ff, #c86aff, #ff6ad5); }
.confetti { position: absolute; top: 0; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; z-index: 1; }
.hero-ov.flash::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle, #fff7da, rgba(245, 192, 75, .6) 40%, transparent 75%); animation: flash .55s ease-out forwards; }
.gold-video { position: absolute; inset: 0; z-index: 3; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .3s; cursor: pointer; }
.gold-video.fade { opacity: 0; }
.gold-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-aspect-ratio: 3/4) { .gold-vid { object-fit: contain; } }
.gold-skip { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); color: rgba(255, 255, 255, .78); font-size: 13px; }

.detail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 22px; }
.detail .card { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .shelf-float, .shelf-glow, .shelf-tap, .pack-sweep::before, .tear-pack, .tear-line::before, .tear-guide i, .stage-rays, .hero-rays { animation: none !important; }
  .tear-guide { display: none; }
  .one-slot .card { animation: none !important; }
  .tap-bubble.in { animation: none; opacity: 1; transform: translate3d(-50%, 0, 0); }
  .intro-ring-wrap, .intro-ring.hot, .intro-burst { animation: none !important; }
}

/* ===== Event hour (SPEC §5.12) ===== */
.live-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(232, 67, 56, .22), rgba(232, 67, 56, .06)); border: 1px solid rgba(232, 67, 56, .45);
  font-size: 15px;
}
.live-banner b { letter-spacing: .12em; color: #ff8a80; }
.live-banner .mono { font-weight: 500; color: var(--cream); }
.live-banner .small { color: var(--gold); }
.next-rip, .gate { max-width: 460px; margin: 6px auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.next-pack { position: relative; width: min(42vw, 190px); aspect-ratio: 528 / 900; margin: 8px 0 14px; }
.next-pack .pack-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .65)); }
.next-rip .countdown { font-size: 40px; }
.next-when { font-size: 17px; font-weight: 600; }
.next-note { margin: 6px 0 4px; padding: 8px 14px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); color: #d6cdbf; }
.next-actions { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.next-actions .btn span { display: inline-flex; }
.gate h1 { margin: 6px 0 0; }
.gate .land-sub { margin: 0; }

/* ===== Reveal polish (owner request 2026-10-20) ===== */
/* fill 'backwards' only: a forwards fill would pin opacity and kill the fade-out transition (black frame) */
.intro { animation: introIn .32s ease-out backwards; }
@keyframes introIn { from { opacity: 0; } }
.fx-vid.fx-BURST { z-index: 4; }
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.fx-flash.chroma { background: none; box-shadow: inset 10px 0 0 rgba(255, 40, 70, .75), inset -10px 0 0 rgba(0, 230, 255, .75), inset 0 10px 0 rgba(255, 40, 70, .45), inset 0 -10px 0 rgba(0, 230, 255, .45); }
.rarity-stamp {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 16px; z-index: 7; pointer-events: none; white-space: nowrap;
  font: 800 clamp(24px, 8.5vw, 38px)/1 var(--font); letter-spacing: .14em; padding: .22em .55em .2em .69em;
  border: 3px solid currentColor; border-radius: 12px; background: rgba(6, 7, 9, .72);
  color: #ff6b5e; text-shadow: 0 0 18px currentColor; box-shadow: 0 0 24px rgba(232, 67, 56, .55), inset 0 0 14px rgba(232, 67, 56, .35);
  transform: translate3d(-50%, 0, 0) rotate(-7deg); opacity: 0;
}
.rarity-stamp.st-SR { color: #ff5fa2; box-shadow: 0 0 24px rgba(255, 95, 162, .5), inset 0 0 14px rgba(255, 95, 162, .3); }
.rarity-stamp.st-UR { color: #F5C04B; box-shadow: 0 0 28px rgba(245, 192, 75, .6), inset 0 0 14px rgba(245, 192, 75, .35); }
.rarity-stamp.st-HALO { color: #FFE08A; border-color: #E84338; box-shadow: 0 0 28px rgba(232, 67, 56, .6), inset 0 0 14px rgba(245, 192, 75, .4); }
.reveal-sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); mix-blend-mode: screen;
}
.reveal-sweep.gold { background: linear-gradient(90deg, transparent, rgba(255, 224, 138, .8), rgba(255, 250, 230, .55), transparent); }
@media (prefers-reduced-motion: reduce) { .intro { animation: none; } }

/* ===== The 500-card box (SPEC §5.13) ===== */
.box-line { display: grid; gap: 6px; width: 100%; }
.box-text { font-size: 13px; color: var(--gold); }
.box-bar { height: 5px; border-radius: 99px; background: rgba(244, 235, 221, .1); overflow: hidden; }
.box-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold2), var(--red)); }
.live-banner .box-line.in-banner { flex-basis: 100%; margin-top: 4px; }
.sold-out .sold-stamp {
  margin: 18px 0 6px; padding: .18em .6em .14em .72em; border: 4px solid var(--red); border-radius: 14px;
  font: 800 clamp(34px, 11vw, 52px)/1 var(--font); letter-spacing: .14em; color: #ff6b5e;
  transform: rotate(-6deg); box-shadow: 0 0 30px rgba(232, 67, 56, .45), inset 0 0 18px rgba(232, 67, 56, .3);
  text-shadow: 0 0 18px rgba(232, 67, 56, .6);
}
.sold-out .box-line { max-width: 360px; text-align: left; }

/* ===== One pack (owner feedback 2026-10-20): the next pack, one tap opens it ===== */
.one-shelf { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 10px; text-align: center; }
.shelf-pack.one-pack { width: min(58vw, 260px); margin: 6px 0 28px; perspective: 900px; }
@media (min-width: 820px) { .shelf-pack.one-pack { width: 280px; } }
.pack-ribbon {
  position: absolute; left: -7%; right: -7%; bottom: 15%; z-index: 3; pointer-events: none;
  padding: 9px 8px 8px; font: 800 clamp(13px, 4vw, 17px)/1 var(--font); letter-spacing: .14em; color: #fff;
  background: linear-gradient(90deg, #a52a1f, #E84338 18%, #E84338 82%, #a52a1f);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.is-halo-pack .pack-ribbon { color: #1d0e04; background: linear-gradient(90deg, #b8862b, #F5C04B 20%, #fff1b8 50%, #F5C04B 80%, #b8862b); text-shadow: none; }
.is-halo-pack .shelf-glow { background: radial-gradient(closest-side, rgba(245, 192, 75, .4), rgba(232, 67, 56, .14) 62%, transparent); }
.one-pack .shelf-tap { bottom: -24px; }
.xp-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); }
.xp-switch button { border: 0; background: transparent; color: var(--muted); font: 600 13px var(--font); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.xp-switch button.on { background: var(--cream); color: var(--bg); }
.xp-switch button.on[data-id="halo"] { background: linear-gradient(90deg, #E84338, #F5C04B); color: #1d0e04; }
.pack-subline { font: 500 12px var(--mono); color: var(--gold); }
.pack-subline[hidden] { display: none; }
.sns-link { font-size: 13px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.pack-status { font-size: 12px; color: var(--muted); max-width: 420px; line-height: 1.5; }
.tear-wrap.auto .tear-pack { animation: packIn .45s cubic-bezier(.2, .9, .3, 1.15) both; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tear-wrap.auto .tear-pack { animation: none; } }

/* ===== REVEAL v3 — escalation ladder (SPEC §15) ===== */
/* the camera push-in scales the slot about the card's centre; the slot's perspective gives the landing spin depth */
.one-slot { perspective: 1000px; scale: var(--zoom, 1); transition: scale .45s cubic-bezier(.2, .8, .2, 1); --ray: 255, 246, 228; }
/* while it spins in, the card shows its back on both sides (the front stays hidden: no spoilers) */
.card.spinning .face.back { backface-visibility: visible; -webkit-backface-visibility: visible; }
.land-ring {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 3px solid rgba(255, 240, 222, .95);
  box-shadow: 0 0 26px 6px rgba(232, 67, 56, .6), inset 0 0 20px 4px rgba(255, 214, 196, .55);
  transform: translate(-50%, -50%) scale(.42); opacity: 0;
}
/* rotating light rays behind the card: tint per stage, spin rate set from JS */
.ladder-rays {
  position: absolute; left: 50%; top: 50%; width: 460%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(var(--ray), .85) 0deg 3deg, rgba(var(--ray), 0) 7.5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .55) 36%, transparent 70%);
  mask: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .55) 36%, transparent 70%);
  opacity: 0; transform: translate(-50%, -50%); transition: opacity .4s ease-out;
}
/* the edge vignette: smoke → white → red → violet → gold; sits under the card so the card stays crisp */
.ladder-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; --vig: 70, 24, 18;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(var(--vig), 0) 56%, rgba(var(--vig), .26) 80%, rgba(var(--vig), .72) 100%);
  transition: opacity .35s ease-out;
}
.ladder-vignette.gold { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(var(--vig), .22) 0%, rgba(var(--vig), .34) 45%, rgba(var(--vig), .92) 100%); }
/* plates that play over the card (screen blend keeps the card readable underneath) */
.fx-vid.fx-SPARKS, .fx-vid.fx-LIGHTNING, .fx-vid.fx-FIZZLE, .fx-vid.fx-GOLDBURST { z-index: 4; }
/* the lightning clip has a white-hot core: mask it off so the ring crackles around the card instead */
.fx-vid.fx-LIGHTNING {
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 48%);
  mask: radial-gradient(closest-side, transparent 30%, #000 48%);
}
.fx-flash.white { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .85), rgba(255, 246, 228, .35) 40%, rgba(255, 246, 228, 0) 75%); }
.fx-flash.violet { background: radial-gradient(circle at 50% 50%, rgba(214, 170, 255, .7), rgba(150, 60, 230, .45) 45%, rgba(120, 30, 160, .15) 80%, transparent); }
.fx-flash.gold { background: radial-gradient(circle at 50% 50%, #fff7da, rgba(245, 192, 75, .75) 38%, rgba(245, 160, 50, .35) 70%, rgba(245, 160, 50, .12)); }
.fx-flash.soft { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 45%, transparent 75%); }
.fx-flash.drain { background: radial-gradient(ellipse closest-side at 50% 50%, rgba(30, 6, 4, .2) 30%, rgba(14, 3, 2, .88) 100%); }
/* CSS stand-ins, only used if a clip fails to load */
.card.spark-edge::after, .card.bolt-edge::after {
  content: ""; position: absolute; inset: -3px; border-radius: 5% / 3.6%; pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 14px 4px rgba(255, 246, 228, .9), 0 0 42px 12px rgba(255, 226, 170, .45);
  animation: edgeFlicker .11s linear infinite alternate;
}
.card.bolt-edge::after { box-shadow: 0 0 0 2px #e3c2ff, 0 0 16px 5px rgba(170, 80, 255, .95), 0 0 50px 16px rgba(232, 67, 56, .5); }
@keyframes edgeFlicker { from { opacity: 1; } to { opacity: .5; } }
/* stage 3 recolours the leaking aura violet-red */
.card.st3 .aura { background: radial-gradient(closest-side, rgba(170, 80, 255, .95), rgba(232, 67, 56, .5) 60%, rgba(232, 67, 56, 0)); }
/* the fake-out: the card sags and dims as the smoke rolls over it */
.one-slot .card.fizzled { animation: fizzleSag .8s ease-out both; }
@keyframes fizzleSag {
  0% { filter: none; transform: none; }
  30% { filter: brightness(.55) saturate(.4); transform: scale(.965) translate3d(0, 4px, 0); }
  100% { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ladder-rays, .land-ring { display: none; }
  .one-slot { transition: none; scale: none; }
  .one-slot .card.fizzled { animation: none; }
}