/* rip-core.css — EXTRACTED VERBATIM from public/packs.html reveal engine.
   Do not reimplement. Class names match Lorcana exactly (.revealstack, .revcard,
   .revface, .glow, .foilshine, .coldfoil, .holofoil, .rarchip, .progress,
   .counter, .revmeta, .revhint, .fx-*, .fxb-*). All game theming happens via
   per-card --rc (rarity color) inline on .revcard, and stage --vc/--fc.
   Fallbacks let any page work without redeclaring the design tokens. */

.rip-core-wrap{ --void:#06070C; --surface-2:#0F1017; --surface-3:#141621; --line:#23283A; --amber:#F2C45A; --faint:#AEB4C4; --dim:#7B8298; --text:#EAEDF6; --pl-warm:#F2C45A; --pl-warm-strong:#E8A23C;
  display:flex; flex-direction:column; align-items:center; width:100%; }

.rip-core-wrap .counter{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--faint);letter-spacing:.05em;margin-bottom:2px}
.rip-core-wrap .counter b{color:var(--rip-accent, var(--amber))}
.rip-core-wrap .progress{width:clamp(300px,40vh,440px);height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-bottom:14px;max-width:100%}
.rip-core-wrap .progress span{display:block;height:100%;background:var(--rip-accent, var(--amber));width:0;transition:width .3s}
.rip-core-wrap .revealstack{position:relative;width:clamp(300px,40vh,440px);aspect-ratio:734/1024;height:auto;max-width:100%;margin:0 auto;touch-action:none}
@media(max-width:640px){.rip-core-wrap .revealstack{width:min(360px,86vw)}.rip-core-wrap .progress{width:min(360px,86vw)}}
.rip-core-wrap .revcard{position:absolute;inset:0;border-radius:16px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s}
.rip-core-wrap .revcard.in{animation:rc-flipin .55s cubic-bezier(.2,.7,.2,1)}
@keyframes rc-flipin{0%{transform:rotateY(180deg) translateY(8px)}100%{transform:rotateY(0) translateY(0)}}
.rip-core-wrap .revcard.out{transform:translateX(var(--ox,-120%)) translateY(var(--oy,0)) rotate(var(--orot,-8deg));opacity:0}
.rip-core-wrap .revface{position:absolute;inset:0;border-radius:16px;overflow:hidden;border:2px solid var(--rc,var(--line));
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 0 var(--rc);background:linear-gradient(160deg,color-mix(in srgb,var(--rc,#333) 24%,var(--void)),var(--void))}
.rip-core-wrap .revface img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#0a0613}
.rip-core-wrap .revcard .glow{position:absolute;inset:-3px;border-radius:18px;box-shadow:0 0 36px 4px var(--rc);opacity:0;transition:opacity .4s;z-index:-1}
.rip-core-wrap .revcard.lit .glow{opacity:.85}

.rip-core-wrap .foilshine{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(125deg,transparent 36%,rgba(255,255,255,.28) 46%,rgba(180,220,255,.2) 52%,transparent 62%);background-size:250% 250%;animation:rc-sheen 3s linear infinite;mix-blend-mode:screen}
@keyframes rc-sheen{0%{background-position:120% 0}100%{background-position:-60% 0}}

.rip-core-wrap .coldfoil{position:absolute;inset:0;border-radius:14px;pointer-events:none;overflow:hidden;z-index:3}
.rip-core-wrap .coldfoil::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,80,120,.22),rgba(255,200,80,.18) 18%,rgba(120,255,180,.20) 36%,rgba(80,200,255,.22) 54%,rgba(180,120,255,.22) 72%,rgba(255,120,200,.20) 90%);background-size:300% 300%;mix-blend-mode:screen;opacity:.55;animation:rc-coldfoil-iris 6s ease-in-out infinite}
.rip-core-wrap .coldfoil::after{content:"";position:absolute;top:-50%;left:-30%;width:60%;height:200%;transform:rotate(18deg);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%,transparent 100%);mix-blend-mode:overlay;animation:rc-coldfoil-glare 3.6s linear infinite;filter:blur(1px)}
@keyframes rc-coldfoil-iris{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes rc-coldfoil-glare{0%{transform:translateX(-40%) rotate(18deg);opacity:0}15%{opacity:.9}55%{opacity:.9}100%{transform:translateX(280%) rotate(18deg);opacity:0}}
.rip-core-wrap .coldfoil-badge{position:absolute;top:12px;left:12px;z-index:5;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:8px;color:#0a0b12;background:linear-gradient(90deg,#ffd6a8,#a8e7ff,#d8b4ff,#ffd6a8);background-size:200% 100%;animation:rc-coldfoil-badge 4s linear infinite;border:1px solid rgba(255,255,255,.55);font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.4)}
@keyframes rc-coldfoil-badge{to{background-position:200% 0}}

.rip-core-wrap .holofoil{position:absolute;inset:0;border-radius:14px;pointer-events:none;overflow:hidden;z-index:3}
.rip-core-wrap .holofoil::before{content:"";position:absolute;inset:-20%;background:
  repeating-linear-gradient(115deg,rgba(255,40,80,.32) 0%,rgba(255,180,40,.30) 8%,rgba(80,255,140,.32) 16%,rgba(40,180,255,.32) 24%,rgba(180,80,255,.32) 32%,rgba(255,40,180,.30) 40%,rgba(255,40,80,.32) 48%);
  background-size:220% 220%;mix-blend-mode:screen;opacity:.85;animation:rc-holofoil-shift 4.2s linear infinite;filter:saturate(1.4)}
.rip-core-wrap .holofoil::after{content:"";position:absolute;top:-50%;left:-40%;width:55%;height:200%;transform:rotate(20deg);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);mix-blend-mode:overlay;animation:rc-holofoil-glare 2.6s linear infinite;filter:blur(2px)}
@keyframes rc-holofoil-shift{0%{background-position:0% 0%}100%{background-position:200% 200%}}
@keyframes rc-holofoil-glare{0%{transform:translateX(-40%) rotate(20deg);opacity:0}20%{opacity:1}60%{opacity:1}100%{transform:translateX(320%) rotate(20deg);opacity:0}}
.rip-core-wrap .holofoil-badge{position:absolute;top:12px;left:12px;z-index:5;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:8px;color:#0a0b12;background:linear-gradient(90deg,#ff5d8f,#ffd86b,#7dffb1,#5dc8ff,#c98bff,#ff5d8f);background-size:300% 100%;animation:rc-holofoil-badge 3s linear infinite;border:1px solid rgba(255,255,255,.7);font-weight:700;box-shadow:0 2px 14px rgba(255,200,255,.35)}
@keyframes rc-holofoil-badge{to{background-position:300% 0}}

.rip-core-wrap .rarchip{position:absolute;top:12px;right:12px;z-index:4;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:8px;background:var(--void);color:var(--rc);border:1px solid var(--rc)}
.rip-core-wrap .fx-chase-flag{position:absolute;bottom:12px;right:12px;z-index:5;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:8px;background:linear-gradient(90deg,#FF6A6A,#F2C45A);color:#0a0b12;border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(232,176,75,.35)}

.rip-core-wrap .revmeta{margin-top:12px;text-align:center;min-height:auto}
.rip-core-wrap .revmeta .rn{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--text)}
.rip-core-wrap .revmeta .rp{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--faint);margin-top:2px}
.rip-core-wrap .revhint{margin-top:8px;font-size:12.5px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,monospace}

/* image-loading shimmer */
@keyframes rc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rip-core-wrap .revface::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:rc-shimmer 1.6s ease-in-out infinite;pointer-events:none}
.rip-core-wrap .revface img{position:relative;z-index:1}

/* ============ rarity reveal FX (escalating, cumulative) ============ */
.rip-core-wrap .fx-aura{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 65%,transparent),transparent 65%);filter:blur(22px);opacity:0;z-index:-2;pointer-events:none;animation:rc-fx-aura-pulse 2.2s ease-in-out .4s infinite}
@keyframes rc-fx-aura-pulse{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.7;transform:scale(1.08)}}

.rip-core-wrap .fx-sparkles{position:absolute;inset:-10%;pointer-events:none;z-index:4;overflow:hidden}
.rip-core-wrap .fx-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff,color-mix(in srgb,var(--rc) 75%,#fff) 50%,transparent 72%);opacity:0;filter:drop-shadow(0 0 4px var(--rc));animation:rc-fx-spark var(--dur,2.2s) ease-out var(--d,0s) infinite}
@keyframes rc-fx-spark{0%{opacity:0;transform:translateY(14px) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translateY(-48px) scale(1.15)}}

.rip-core-wrap .fx-burst{position:absolute;inset:0;border-radius:16px;border:2px solid var(--rc);box-shadow:0 0 20px var(--rc) inset, 0 0 28px var(--rc);opacity:0;pointer-events:none;z-index:3;animation:rc-fx-burst 1s ease-out .45s forwards}
@keyframes rc-fx-burst{0%{opacity:.95;transform:scale(.88)}100%{opacity:0;transform:scale(1.75)}}

.rip-core-wrap .fx-sweep{position:absolute;inset:0;border-radius:14px;pointer-events:none;mix-blend-mode:screen;z-index:3;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);background-size:260% 260%;background-position:200% 0;opacity:0;animation:rc-fx-sweep 1.2s ease-out .55s forwards}
@keyframes rc-fx-sweep{0%{opacity:0;background-position:200% 0}20%{opacity:1}100%{opacity:0;background-position:-110% 0}}

.rip-core-wrap .fx-callout{position:absolute;left:50%;top:-30px;transform:translateX(-50%) scale(.6);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:11.5px;letter-spacing:.22em;padding:6px 14px;border-radius:8px;color:#fff;background:color-mix(in srgb,var(--rc) 65%,rgba(4,5,9,.85));border:1px solid var(--rc);box-shadow:0 0 26px var(--rc);opacity:0;pointer-events:none;white-space:nowrap;z-index:6;text-shadow:0 1px 4px rgba(0,0,0,.6);animation:rc-fx-callout 1.8s cubic-bezier(.2,.7,.2,1) .5s forwards}
@keyframes rc-fx-callout{0%{opacity:0;transform:translateX(-50%) scale(.55) translateY(10px)}15%{opacity:1;transform:translateX(-50%) scale(1.12) translateY(0)}28%{transform:translateX(-50%) scale(1) translateY(0)}88%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1) translateY(-6px)}}

.rip-core-wrap .fx-rays{position:absolute;inset:-30%;pointer-events:none;z-index:-3;background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--rc) 70%,transparent) 8deg,transparent 18deg,transparent 60deg,color-mix(in srgb,var(--rc) 55%,transparent) 68deg,transparent 78deg,transparent 140deg,color-mix(in srgb,var(--rc) 65%,transparent) 148deg,transparent 158deg,transparent 220deg,color-mix(in srgb,var(--rc) 55%,transparent) 228deg,transparent 238deg,transparent 300deg,color-mix(in srgb,var(--rc) 60%,transparent) 308deg,transparent 318deg);-webkit-mask:radial-gradient(circle,transparent 26%,#000 32%,#000 62%,transparent 80%);mask:radial-gradient(circle,transparent 26%,#000 32%,#000 62%,transparent 80%);opacity:0;animation:rc-fx-rays-in .8s ease-out .4s forwards, rc-fx-rays-rot 8s linear .4s infinite}
@keyframes rc-fx-rays-in{to{opacity:.6}}
@keyframes rc-fx-rays-rot{to{transform:rotate(360deg)}}

.rip-core-wrap .revealstack.fx-vignette{box-shadow:inset 0 0 90px 10px color-mix(in srgb,var(--vc,#fff) 55%,transparent);border-radius:20px;transition:box-shadow .4s}

.rip-core-wrap .fx-screenflash{position:absolute;inset:-60vmax;pointer-events:none;z-index:5;background:radial-gradient(circle,var(--fc,#fff),transparent 60%);opacity:0;animation:rc-fx-screenflash .9s ease-out forwards}
@keyframes rc-fx-screenflash{0%{opacity:0}10%{opacity:.72}100%{opacity:0}}

.rip-core-wrap .fx-prism{position:absolute;inset:0;border-radius:14px;pointer-events:none;mix-blend-mode:screen;z-index:3;background:linear-gradient(115deg,transparent 25%,rgba(255,80,160,.6),rgba(255,200,80,.6),rgba(120,255,160,.6),rgba(80,200,255,.6),rgba(190,120,255,.6) 75%,transparent 85%);background-size:320% 320%;background-position:220% 0;opacity:0;animation:rc-fx-prism 1.9s ease-out .5s forwards}
@keyframes rc-fx-prism{0%{opacity:0;background-position:220% 0}25%{opacity:.95}100%{opacity:0;background-position:-160% 0}}

.rip-core-wrap .fx-chargeup{animation:rc-flipin .55s cubic-bezier(.2,.7,.2,1), rc-fx-chargeup .4s ease-out .55s}
@keyframes rc-fx-chargeup{0%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.55) saturate(1.4)}100%{filter:brightness(1) saturate(1)}}

.rip-core-wrap .fx-iconic .glow{box-shadow:0 0 60px 12px var(--rc),0 0 140px 30px rgba(255,206,77,.55)!important;opacity:1!important}
.rip-core-wrap .fx-afterglow{position:absolute;inset:-15%;border-radius:50%;pointer-events:none;z-index:-4;background:radial-gradient(circle,rgba(255,206,77,.45),color-mix(in srgb,var(--rc) 40%,transparent) 40%,transparent 70%);opacity:0;animation:rc-fx-after 2.8s ease-out .55s forwards}
@keyframes rc-fx-after{0%{opacity:0;transform:scale(.6)}22%{opacity:.95;transform:scale(1.18)}100%{opacity:.25;transform:scale(1.35)}}
.rip-core-wrap .revealstack.fx-shake{animation:rc-fx-shake .3s ease-in-out 0s 2}
@keyframes rc-fx-shake{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-3px,2px,0)}50%{transform:translate3d(4px,-2px,0)}75%{transform:translate3d(-3px,3px,0)}}
.rip-core-wrap .revealstack.fx-dim{filter:brightness(.55);transition:filter .25s}

@media(prefers-reduced-motion:reduce){
  .rip-core-wrap .fx-aura,.rip-core-wrap .fx-burst,.rip-core-wrap .fx-sweep,.rip-core-wrap .fx-sparkles,.rip-core-wrap .fx-rays,.rip-core-wrap .fx-callout,.rip-core-wrap .fx-prism,.rip-core-wrap .fx-afterglow,.rip-core-wrap .fx-screenflash{display:none!important}
  .rip-core-wrap .revealstack.fx-shake,.rip-core-wrap .revealstack.fx-dim{animation:none!important;filter:none!important}
  .rip-core-wrap .revealstack.fx-vignette{box-shadow:inset 0 0 60px 6px color-mix(in srgb,var(--vc,#fff) 45%,transparent)}
  .rip-core-wrap .coldfoil::before{animation:none;opacity:.5;background-position:50% 50%}
  .rip-core-wrap .coldfoil::after{display:none}
  .rip-core-wrap .coldfoil-badge{animation:none;background:linear-gradient(90deg,#ffd6a8,#a8e7ff,#d8b4ff)}
  .rip-core-wrap .holofoil::before{animation:none;opacity:.75;background-position:50% 50%}
  .rip-core-wrap .holofoil::after{display:none}
  .rip-core-wrap .holofoil-badge{animation:none;background:linear-gradient(90deg,#ff5d8f,#ffd86b,#7dffb1,#5dc8ff,#c98bff)}
}