/* Interaction belongs to the game, not the browser's text/image drag UI. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"],input *,textarea *{-webkit-user-select:text;user-select:text}
img,a{-webkit-user-drag:none}img{pointer-events:none}button{touch-action:manipulation}

/* Three independent, persistent material treatments. */
/* ===== LÁTVÁNYOS 3D FÓLIÁK, CSILLÁMOK ÉS FÉNYTÖRÉSEK ===== */
/* ===== LETISZTULT PRÉMIUM FÓLIÁK (PÖTTYÖK NÉLKÜL) ===== */
/* ===== LÁMPA NÉLKÜLI, ERŐTELJES PRÉMIUM FÓLIÁK ===== */
/* ===== FINOM, EGÉRMOZGÁSRA REAGÁLÓ PRÉMIUM FÓLIÁK ===== */
/* ===== FINOM, EGÉRMOZGÁSRA CSÚSZÓ PRÉMIUM FÓLIÁK ===== */
/* ===== FINOM, EGÉRMOZGÁSRA CSÚSZÓ PRÉMIUM FÓLIÁK ===== */
/* ===== VÉGLEGES FINOMHANGOLT FÓLIÁK ===== */
.trading-card{
  --rarity-color:#97edff;
  --mx:50%;
  --my:50%;
  transform-style:preserve-3d;
  transition:transform .12s cubic-bezier(.2,.8,.4,1), box-shadow .25s ease;
}

.card-shine, .card-glints{
  display:none !important;
}

.trading-card:not(.finish-normal) .card-material,
.trading-card:not(.finish-normal) .card-luster{
  display:block;
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

/* Kártya belső keretfénye */
.trading-card:not(.finish-normal):after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid var(--rarity-color);
  border-radius:inherit;
  z-index:6;
  pointer-events:none;
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--rarity-color) 60%,transparent);
}

/* Marble uses the generator's complete stone illustration; no colored art overlay. */
.finish-marble{
  --rarity-color:#d7e6df;
  border-color:#dfebe5!important;
  box-shadow:0 0 14px #c5d9cf35,0 14px 28px #0008;
}
.finish-marble .card-material,.finish-marble .card-luster{display:none!important}
.finish-marble:before{border-color:#edf2e8!important;box-shadow:inset 0 0 8px #e4e9df66}
.finish-marble .finish-tag{color:#e3eee5}
.vfx-demo button[data-vfx-preview="marble"]{color:#d7e6df}
.reveal-slot.rarity-marble.shiny{filter:drop-shadow(0 0 9px #d7e6df50)}
.sound-toggle{align-self:center;background:#ffffff08;border:1px solid #ffffff26;border-radius:20px;padding:8px 12px;color:#c8d3df;font-size:12px;white-space:nowrap}
.sound-toggle[aria-pressed="true"]{color:#e2c58e;border-color:#e2c58e55}
@media(max-width:600px){.sound-toggle{padding:6px 8px;font-size:10px}}
@media(max-width:760px){.topbar nav{gap:16px}}

/* ========================================================
   1. HOLO: GYORSABB, FOLYÉKONYAN HULLÁMZÓ SZIVÁRVÁNY
   ======================================================== */
.finish-holo{
  --rarity-color:#4ef0ff;
  box-shadow:0 0 18px rgba(78,240,255,0.35), 0 14px 28px #0008;
}
.finish-holo .card-material{
  z-index:2;
  background:repeating-linear-gradient(
    125deg,
    rgba(255, 60, 140, 0.42) 0%,
    rgba(255, 200, 40, 0.42) 10%,
    rgba(40, 240, 160, 0.42) 20%,
    rgba(40, 190, 255, 0.48) 30%,
    rgba(190, 80, 255, 0.42) 40%,
    rgba(255, 60, 140, 0.42) 50%
  );
  background-size:250% 250%;
  background-position:var(--mx, 50%) var(--my, 50%);
  mix-blend-mode:hard-light;
  opacity:0.5;
  /* Kicsit gyorsabb folyamatos belső lebegés, ami kiegészíti az egér mozgását */
  animation:holo-fluid 3.2s ease-in-out infinite alternate;
}

/* ========================================================
   2. PRISMATIC: KRISTÁLYOS GYÉMÁNTRÁCS
   ======================================================== */
.finish-prismatic{
  --rarity-color:#d575ff;
  box-shadow:0 0 22px rgba(213,117,255,0.45), 0 14px 28px #0008;
}
.finish-prismatic .card-material{
  z-index:2;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 120, 220, 0.25) 0px,
      rgba(0, 230, 255, 0.25) 14px,
      rgba(160, 90, 255, 0.25) 28px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.12) 0px,
      transparent 14px,
      rgba(255, 255, 255, 0.12) 28px
    );
  background-size:200% 200%;
  background-position:var(--mx, 50%) var(--my, 50%);
  mix-blend-mode:hard-light;
  opacity:0.9;
  transition:background-position 0.05s ease-out;
}

/* ========================================================
   3. GOLD: GAZDAG MELEG ARANY (KIÉGŐ FEHÉR FOLT NÉLKÜL!)
   ======================================================== */
.finish-gold{
  --rarity-color:#ffd747;
  box-shadow:0 0 30px rgba(255,215,71,0.65), 0 0 55px rgba(255,160,20,0.25), 0 16px 30px #0009;
}

.finish-gold:before{
  border:2.5px solid #fff2ba !important;
  box-shadow:inset 0 0 10px #ffe285, 0 0 14px #ffe285 !important;
}

.finish-gold .card-material{
  z-index:2;
  /* Vissza a gazdag, telt aranyhoz – de fehér helyett mély borostyán és meleg arany */
  background:linear-gradient(
    135deg,
    rgba(255, 200, 30, 0.45) 0%,
    rgba(235, 140, 15, 0.35) 30%,
    rgba(255, 225, 75, 0.65) 60%,
    rgba(255, 185, 25, 0.45) 100%
  );
  background-size:200% 200%;
  background-position:var(--mx, 50%) var(--my, 50%);
  mix-blend-mode:hard-light;
  opacity:0.75; /* Vissza a határozott, szép arany fedettséghez! */
  transition:background-position 0.05s ease-out;
}

/* A fénycsík sem fehér, hanem TISZTA ARANY, így sehol sem ég ki fehérre! */
.finish-gold .card-luster{
  z-index:3;
  background:linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 200, 40, 0.15) 45%,
    rgba(255, 230, 90, 0.55) 50%,
    rgba(255, 200, 40, 0.15) 55%,
    transparent 62%
  );
  background-size:280% 100%;
  mix-blend-mode:screen;
  opacity:0.3;
  animation:foil-sweep 6.5s ease-in-out infinite;
}

/* ========================================================
   KÖZÖS ÁTFUTÓ FÉNYSÁV: HALVÁNYABB ÉS LASSABB (NAGYON LÁGY!)
   ======================================================== */
.finish-holo .card-luster,
.finish-prismatic .card-luster,
.finish-gold .card-luster{
  z-index:3;
  background:linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 58%
  );
  background-size:280% 100%;
  mix-blend-mode:screen;
  opacity:0.25; /* Nagyon finom, diszkrét selyemfény */
  animation:foil-sweep 6.5s ease-in-out infinite; /* 4.5s helyett 6.5s: komótos, elegáns suhanás */
}

/* Gyorsabb, finomabb szivárvány pulzálás */
@keyframes holo-fluid{
  0%{filter:hue-rotate(0deg) contrast(1);}
  100%{filter:hue-rotate(45deg) contrast(1.15);}
}

/* Parallax has separate art layers; foil is kept off the character. */
.finish-parallax{--rarity-color:#a8ffe5;border-color:#a8ffe5!important;box-shadow:0 0 22px #7be8cf55,0 14px 28px #0008}
.parallax-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.parallax-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .16s ease-out}
.parallax-art .parallax-bg{transform:translate(calc(var(--px,0)*-7px),calc(var(--py,0)*-5px)) scale(1.12)}
.parallax-art .parallax-character{transform:translate(calc(var(--px,0)*6px),calc(var(--py,0)*4px));filter:drop-shadow(-5px 10px 7px #071e3055)}
.finish-parallax .card-material,.finish-parallax .card-luster{display:none!important}
.finish-parallax .finish-tag{color:#b8ffe9}
.rare-showcase[data-finish="parallax"]{--rarity-color:#a8ffe5;background:radial-gradient(ellipse at center,#173e3cee,#080f1af7 75%)}
@media(prefers-reduced-motion:reduce){.parallax-art img{transform:none!important;filter:none;animation:none!important}}

/* ===== CSOMAGBONTÁS: feszülés → repedés → fényes kettéválás → papír elporladása → lapok érkezése ===== */
#opening{isolation:isolate;transition:background .35s;overflow:hidden}
#opening-stage{min-height:390px}
.vfx-canvas{position:absolute;inset:0;width:100%;pointer-events:none;z-index:25}
.opening-pack-button{padding:30px 70px;z-index:3;position:relative;background:none;border:0}
.opening-pack-button .booster{animation:sealed-levitate 4s ease-in-out infinite;filter:drop-shadow(0 15px 25px #000b);transition:filter .3s}

/* A csomag mögötti aura (a csomag saját színeiből) */
.pack-energy{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:-1;opacity:.3;background:radial-gradient(circle,color-mix(in srgb,var(--pack-accent) 60%,transparent) 0%,color-mix(in srgb,var(--pack-color) 28%,transparent) 38%,transparent 68%)}
.is-charging .pack-energy{animation:aura-build 1.12s cubic-bezier(.4,0,.9,.6) forwards}
.is-bursting .pack-energy{animation:aura-release 1.2s ease-out forwards}

/* Szerkezet: rig > shaker > (fényoszlop, bodies > két fél, intact-pack, repedés-SVG, csillanás) */
.tear-rig{position:absolute;z-index:4;pointer-events:none;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.tear-rig .shaker,.tear-rig .bodies,.tear-rig .half,.tear-rig .clip,.tear-rig .intact-pack{position:absolute;inset:0}
.opening-pack-button .tear-rig .booster{position:absolute!important;inset:0;width:100%!important;height:100%!important;transform:none!important;animation:none!important;filter:none!important;transition:none!important}

/* A feszülés alatt a sértetlen csomag látszik, a két fél csak a robbanáskor kapcsol be */
.tear-rig .intact-pack{filter:drop-shadow(0 18px 22px #000a)}
.tear-rig .bodies{opacity:0}
.is-bursting .tear-rig .intact-pack{opacity:0;display:none}
.is-bursting .tear-rig .bodies{opacity:1}

.is-charging .tear-rig{animation:rig-swell 1.12s cubic-bezier(.4,0,.9,.6) forwards}
.is-bursting .tear-rig{transform:translateY(-6px) scale(1.07)!important;animation:none}
.is-charging .tear-rig .shaker{animation:pack-tremble 1.12s linear forwards}
.is-charging .tear-rig .intact-pack{animation:pack-charge-glow 1.12s ease-in forwards}
.is-bursting .tear-rig .half{filter:drop-shadow(0 0 28px var(--pack-color)) drop-shadow(0 0 14px var(--gold)) brightness(1.2)}
.is-bursting .tear-rig .half-left{transform-origin:20% 60%;animation:split-left 1.5s cubic-bezier(.12,.75,.3,1) forwards}
.is-bursting .tear-rig .half-right{transform-origin:80% 60%;animation:split-right 1.5s cubic-bezier(.12,.75,.3,1) forwards}

/* A papír elporladása: zajmaszkos feloldás, izzó perem (az SVG-szűrőt a JS építi be) */
.tear-rig .bodies.dissolving{filter:url(#pack-dissolve);animation:bodies-fade 1.35s linear forwards}

/* Fényes csík feszülés közben */
.tear-rig .sheen{position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 38%,#ffffffa8 50%,transparent 62%);background-size:300% 100%;background-position:140% 0}
.is-charging .tear-rig .sheen{animation:sheen-sweep .6s ease-in-out .08s 2}
.is-bursting .tear-rig .sheen{display:none}

/* A repedés: középről kifelé "nő", színes varázs-izzással és arany-fehér maggal */
.crack-svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:6;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 8px var(--gold))
    drop-shadow(0 0 16px var(--pack-color))
    drop-shadow(0 0 26px var(--pack-accent));
}
.crack-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.crack-svg .crack-aura{stroke:var(--pack-color);opacity:0.75}
.crack-svg .crack-core{stroke:#fff8dc}
.is-charging .crack-svg path{animation:crack-grow var(--dur,.6s) cubic-bezier(.3,.6,.4,1) var(--d,.3s) forwards}
.is-bursting .crack-svg path{stroke-dashoffset:0;animation:crack-vanish .3s .1s forwards}

/* A résen át előtörő fény, a felvillanás és a sugarak */
.crack-light{position:absolute;left:50%;top:50%;width:190px;height:480px;margin:-240px 0 0 -95px;opacity:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,#fff 0%,#fff8dc 18%,color-mix(in srgb,var(--pack-color) 75%,var(--gold)) 42%,color-mix(in srgb,var(--pack-accent) 35%,transparent) 68%,transparent 100%)}
.is-bursting .crack-light{animation:light-flare 1.5s ease-out forwards}
.tear-flash{position:absolute;left:50%;top:50%;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0%,#fff6d6 16%,color-mix(in srgb,var(--pack-color) 65%,transparent) 38%,transparent 68%)}
.tear-rays{position:absolute;left:50%;top:50%;width:580px;height:580px;margin:-290px 0 0 -290px;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--gold) 0 .9deg,transparent .9deg 7deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%)}
.is-bursting .tear-flash{animation:flash-pop .85s ease-out forwards}
.is-bursting .tear-rays{animation:rays-burst 1.1s ease-out forwards}

/* Enyhe lökés a színpadon */
.pack-opening-impact #opening-stage{animation:stage-thump .55s ease-out}

/* Lapok érkezése */
#opening-stage.reveals-arriving:before{content:'';position:absolute;left:50%;top:50%;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffffffb0 0%,color-mix(in srgb,var(--pack-accent) 42%,transparent) 28%,transparent 64%);animation:arrival-glow 1.2s ease-out forwards}
.reveals-arriving .reveal-slot{--dx:calc((1.5 - var(--i)) * (100% + 18px));--dy:0px;animation:cards-launch .95s cubic-bezier(.2,.9,.25,1.1) backwards;animation-delay:calc(var(--i) * .09s)}

/* --- KEYFRAME-EK --- */
@keyframes aura-build{to{opacity:1;transform:scale(1.18)}}
@keyframes aura-release{0%{opacity:1;transform:scale(1.18)}25%{opacity:1;transform:scale(1.55)}100%{opacity:0;transform:scale(2)}}
@keyframes rig-swell{to{transform:translateY(-6px) scale(1.07)}}
@keyframes pack-tremble{
  0%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-.5px,.4px) rotate(-.25deg)}
  20%{transform:translate(.8px,-.5px) rotate(.35deg)}
  30%{transform:translate(-1.1px,.7px) rotate(-.6deg)}
  40%{transform:translate(1.5px,-.9px) rotate(.8deg)}
  50%{transform:translate(-1.9px,1.1px) rotate(-1deg)}
  60%{transform:translate(2.3px,-1.3px) rotate(1.2deg)}
  70%{transform:translate(-2.6px,1.5px) rotate(-1.4deg)}
  80%{transform:translate(3px,-1.7px) rotate(1.6deg)}
  90%{transform:translate(-3.3px,1.9px) rotate(-1.8deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes pack-charge-glow{
  from{filter:drop-shadow(0 18px 22px #000a) drop-shadow(0 0 0 var(--pack-accent)) brightness(1) blur(0px)}
  to{filter:drop-shadow(0 18px 22px #000a) drop-shadow(0 0 34px var(--pack-accent)) brightness(1.25) blur(0px)}
}
@keyframes sheen-sweep{0%{opacity:.9;background-position:140% 0}100%{opacity:.9;background-position:-40% 0}}
@keyframes crack-grow{to{stroke-dashoffset:0}}
@keyframes crack-glow{
  from{filter:drop-shadow(0 0 2px var(--pack-accent)) drop-shadow(0 0 3px #fff0)}
  to{filter:drop-shadow(0 0 7px var(--pack-accent)) drop-shadow(0 0 16px #ffffffcc)}
}
@keyframes crack-vanish{to{opacity:0}}
@keyframes split-left{0%{transform:none}100%{transform:translate(-46px,10px) rotate(-6deg)}}
@keyframes split-right{0%{transform:none}100%{transform:translate(46px,10px) rotate(6deg)}}
@keyframes bodies-fade{0%,82%{opacity:1}100%{opacity:0}}
@keyframes light-flare{
  0%{opacity:0;transform:scale(.3,.6)}
  10%{opacity:1;transform:scale(.9,1)}
  40%{opacity:.9;transform:scale(1.3,1.05)}
  100%{opacity:0;transform:scale(2.1,1.1)}
}
@keyframes flash-pop{
  0%{opacity:0;transform:scale(.3)}
  18%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes rays-burst{
  0%{opacity:0;transform:scale(.3) rotate(-10deg)}
  18%{opacity:.9}
  100%{opacity:0;transform:scale(1.2) rotate(14deg)}
}
@keyframes stage-thump{0%{transform:scale(1)}30%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes arrival-glow{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes cards-launch{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) translateY(34px) scale(.5) rotate(calc((var(--i) - 1.5) * -5deg))}
  30%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes foil-sweep{0%,15%{background-position:150% 0}75%,100%{background-position:-50% 0}}
@keyframes holo-flow{from{background-position:0% 10%}to{background-position:200% 150%}}
@keyframes prism-flow{0%{background-position:0% 0%;filter:hue-rotate(-15deg)}100%{background-position:100% 100%;filter:hue-rotate(25deg)}}
@keyframes glint-drift{0%{background-position:0 0;opacity:.4}50%{opacity:.9}100%{background-position:12px -40px;opacity:.4}}
@keyframes sealed-levitate{0%,100%{transform:translateY(0) rotate(-5deg) rotateY(-7deg)}50%{transform:translateY(-12px) rotate(1deg) rotateY(7deg)}}
@keyframes energy-charge{from{opacity:0;transform:scale(1.4) rotate(-20deg)}to{opacity:1;transform:scale(.85) rotate(25deg)}}
@keyframes charge-tension{0%{transform:scale(1) rotate(-5deg)}55%{transform:scale(1.1) rotate(2deg)}80%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(1.12) rotate(0)}}
@keyframes rift-grow{0%{transform:scaleY(0);opacity:0}45%{opacity:.8}100%{transform:scaleY(1);opacity:1}}
@keyframes wrapper-rip-left{from{transform:scale(1.12)}to{transform:translate(-220px,120px) rotate(-65deg) rotateY(50deg) scale(.7);opacity:0}}
@keyframes wrapper-rip-right{from{transform:scale(1.12)}to{transform:translate(240px,90px) rotate(70deg) rotateY(-60deg) scale(.7);opacity:0}}
@keyframes rift-release{0%{transform:scaleY(1) scaleX(1);opacity:1}40%{transform:scaleY(1.6) scaleX(25);opacity:.75}100%{transform:scaleY(1.8) scaleX(80);opacity:0}}
@keyframes energy-release{0%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(2.2) rotate(90deg)}}
@keyframes soft-flare{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes impact-shift{0%,100%{transform:translate(0)}20%{transform:translate(3px,2px)}45%{transform:translate(-3px,-1px)}70%{transform:translate(1px,1px)}}
@keyframes card-charge{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1.2)}}
@keyframes card-impact{0%{transform:scale(1)}35%{transform:scale(1.09) translateY(-10px)}100%{transform:scale(1)}}
@keyframes showcase-in{from{opacity:0}to{opacity:1}}@keyframes showcase-out{to{opacity:0;transform:scale(1.05)}}
@keyframes rare-card-arrival{0%{opacity:0;transform:translateY(70px) scale(.5) rotateY(55deg) rotate(-12deg)}70%{opacity:1;transform:translateY(-8px) scale(1.04) rotateY(-6deg)}100%{transform:none;opacity:1}}
@keyframes rare-levitate{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes rays-orbit{to{transform:rotate(360deg)}}
/* ===== RITKA KÁRTYA KIEMELT BEMUTATÓ (SHOWCASE) ===== */
#opening {
  /* Keep the modal anchored to the viewport, including after focus changes. */
  position: fixed;
  inset: 0;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rare-showcase {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #1a152aee, #080f1af7 75%);
  border-radius: inherit;
  overflow: hidden;
  animation: showcase-in .35s ease-out both;
  --rarity-color: #ffd779;
}

.rare-showcase[data-finish="prismatic"] {
  --rarity-color: #c996ff;
  background: radial-gradient(ellipse at center, #2e1d4bee, #080f1af7 75%);
}

.rare-showcase[data-finish="gold"] {
  --rarity-color: #ffe091;
  background: radial-gradient(ellipse at center, #352618ee, #080f1af7 75%);
}

.rare-showcase.leaving {
  animation: showcase-out .35s ease-in both;
}

/* Forgó fénysugarak a kártya mögött */
.rare-rays {
  position: absolute;
  width: 1000px;
  height: 1000px;
  max-width: none;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, color-mix(in srgb, var(--rarity-color) 20%, transparent) 13deg 17deg, transparent 18deg 30deg);
  mask-image: radial-gradient(circle, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle, black 10%, transparent 65%);
  animation: rays-orbit 25s linear infinite;
  pointer-events: none;
}

/* Finom asztrológiai fénygyűrű */
.rare-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 45%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-25deg) scaleY(.65);
  box-shadow: 0 0 50px color-mix(in srgb, var(--rarity-color) 25%, transparent);
  pointer-events: none;
}

.rare-orbit:before {
  content: '✧';
  position: absolute;
  left: 8%;
  top: 8%;
  font-size: 36px;
  color: var(--rarity-color);
  text-shadow: 0 0 20px var(--rarity-color);
}

.rare-heading {
  position: relative;
  text-align: center;
  color: var(--rarity-color);
  z-index: 2;
}

.rare-heading small {
  letter-spacing: 4px;
  font-size: 9px;
  font-weight: 600;
  display: block;
}

.rare-heading h3 {
  font: 600 28px 'Playfair Display', Georgia, serif;
  letter-spacing: 4px;
  margin: 6px 0 0;
  text-shadow: 0 0 22px color-mix(in srgb, var(--rarity-color) 70%, transparent);
}

/* A kártya normális, elegáns mérete (nem nyúlik szét!) */
.showcase-card {
  width: clamp(190px, 22vw, 240px);
  perspective: 1200px;
  animation: rare-card-arrival .85s cubic-bezier(.16,.8,.24,1) both;
  position: relative;
  z-index: 2;
}

.showcase-card .trading-card {
  animation: rare-levitate 4s ease-in-out .85s infinite;
  pointer-events: none;
}

/* Pointer tilt owns this transform; the entrance stays on the outer wrapper. */
.showcase-card .trading-card.finish-parallax {
  animation: none;
  pointer-events: auto;
  cursor: move;
}

.rare-caption {
  position: relative;
  font-size: 11px;
  color: #e7dbc3;
  z-index: 2;
  margin: 0;
}

.rare-showcase .skip-showcase {
  position: relative;
  z-index: 3;
  color: var(--rarity-color);
  border: 1px solid color-mix(in srgb, var(--rarity-color) 35%, transparent);
  border-radius: 20px;
  background: #111b2dc9;
  font-size: 11px;
  padding: 8px 22px;
  margin-top: 4px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}

.rare-showcase .skip-showcase:hover {
  background: color-mix(in srgb, var(--rarity-color) 25%, #111b2d);
  transform: translateY(-1px);
}
@media(max-width:760px){.reveals-arriving .reveal-slot:nth-child(1){--dx:calc(.5*(100% + 15px));--dy:calc(.5*(100% + 15px))}.reveals-arriving .reveal-slot:nth-child(2){--dx:calc(-.5*(100% + 15px));--dy:calc(.5*(100% + 15px))}.reveals-arriving .reveal-slot:nth-child(3){--dx:calc(.5*(100% + 15px));--dy:calc(-.5*(100% + 15px))}.reveals-arriving .reveal-slot:nth-child(4){--dx:calc(-.5*(100% + 15px));--dy:calc(-.5*(100% + 15px))}.tear-rays{width:560px;height:560px;margin:-280px 0 0 -280px}.rare-showcase{justify-content:flex-start;padding:60px 0 30px;min-height:620px}.showcase-card{width:210px}.rare-heading h3{font-size:25px}.rare-orbit{width:330px;height:330px;top:320px}.rare-rays{top:-180px}.card-bottom .finish-tag{font-size:6px!important;padding:3px}.card-material,.card-glints{will-change:auto}}
@media(prefers-reduced-motion:reduce){.vfx-canvas,.pack-energy,.tear-rig,.wrapper-piece,.rare-rays{display:none!important}.card-luster{opacity:.4!important}.rare-showcase{animation:none}.rare-orbit{box-shadow:none}.trading-card .card-material{opacity:.4}.pack-break>.booster{opacity:0}}