/* Live showcase layers, composed around the pack's intrinsic-ratio foil shell. */
.arena {
  --stage-light:#00e2ed;
  --pack-height:280px;
  background:
    radial-gradient(ellipse at 50% 37%,#07334970,transparent 67%),
    radial-gradient(ellipse at 50% 95%,#00263250,transparent 65%),
    linear-gradient(135deg,#03121d,#020a12 68%);
  border:1px solid #276579;
  border-radius:14px;
  box-shadow:inset 0 1px 0 #9bf5ff08;
  isolation:isolate;
  overflow:hidden;
}
.arena::before,.arena::after { content:none; animation:none; }
.stage-effects { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.stage-beam {
  position:absolute; top:-12%; left:15%; width:70%; height:105%;
  background:radial-gradient(ellipse at 50% 4%,color-mix(in srgb,var(--stage-light) 32%,transparent),transparent 67%);
  opacity:.85; animation:stage-light-breathe 8s ease-in-out infinite;
}
.stage-beam::before,.stage-beam::after {
  content:''; position:absolute; top:0; left:42%; width:20%; height:88%;
  transform:skewX(-12deg); transform-origin:center top;
  background:linear-gradient(color-mix(in srgb,var(--stage-light) 29%,transparent),transparent 85%);
  filter:blur(4px);
}
.stage-beam::after { left:46%; width:15%; transform:skewX(10deg); opacity:.5; }
.stage-atmosphere {
  position:absolute; inset:10% 5% 0;
  background:
    radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--stage-light) 12%,transparent),transparent 56%),
    radial-gradient(ellipse at 50% 30%,#0b45672b,transparent 65%);
}
.stage-particles { position:absolute; inset:0; width:100%; height:100%; fill:var(--stage-light); opacity:.7; }
.stage-particles .particle-drift { animation:stage-dust-drift 9s ease-in-out infinite alternate; }
.stage-particles .particle-drift:nth-child(2) { animation-delay:-5s; animation-duration:12s; opacity:.6; }
.stage-platform {
  position:absolute; left:50%; top:82%; width:calc(var(--pack-height)*var(--pack-ratio)*1.9); max-width:80%; height:4.6%; transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--stage-light) 90%,#fff);
  border-radius:50%; background:color-mix(in srgb,var(--stage-light) 4%,transparent);
  box-shadow:0 0 5px var(--stage-light),0 0 15px color-mix(in srgb,var(--stage-light) 55%,transparent),inset 0 0 12px color-mix(in srgb,var(--stage-light) 20%,transparent);
  animation:stage-platform-breathe 6s ease-in-out infinite;
}
.stage-platform::before {
  content:''; position:absolute; inset:-90% -12%; border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--stage-light) 22%,transparent),transparent 65%);
  filter:blur(7px); z-index:-1;
}
.stage-platform::after {
  content:''; position:absolute; left:19%; right:19%; top:-30%; height:170%; border-radius:50%;
  background:radial-gradient(ellipse,#000e,transparent 67%); filter:blur(3px);
}
.stage-reflection {
  position:absolute; left:50%; top:83%; height:var(--pack-height); width:calc(var(--pack-height)*var(--pack-ratio));
  background:var(--pack-image) center/100% 100% no-repeat;
  transform:translateX(-50%) scaleY(-1); filter:blur(3px); opacity:.17;
  mask-image:linear-gradient(to top,#000,transparent 29%);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 29%);
  transition:opacity .3s;
}
.arena .display { position:absolute; inset:0; width:100%; height:100%; z-index:1; animation:none; }
.stage-orbits { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; transition:opacity .4s; }
.stage-orbit-line { fill:none; stroke:url(#stage-orbit-gradient); stroke-width:1.1; }
.stage-orbit-light {
  fill:none; stroke:#a5fbff; stroke-width:1.9; stroke-linecap:round;
  stroke-dasharray:17 983; animation:stage-orbit-travel 12s linear infinite;
  filter:drop-shadow(0 0 3px #00e2ed);
}
.stage-orbit-light.orbit-light-two { stroke-dasharray:9 991; animation-delay:-6s; opacity:.75; }
.arena .side-card {
  left:50%; right:auto; top:47%; width:calc(var(--pack-height)*.52); height:calc(var(--pack-height)*.64);
  z-index:1; display:grid; place-items:center; padding:0;
  border:1px solid #7dafc1; border-radius:10px; opacity:.9; filter:none;
  transform:translate(-106%,-50%) rotate(-16deg);
  background:repeating-linear-gradient(142deg,transparent 0 28px,#73abc207 29px 30px),linear-gradient(145deg,#193147,#0b2033 55%,#112a3c);
  box-shadow:inset 0 0 0 2px #a4d0e61a,inset 0 0 24px #001323,0 9px 24px #0007,0 0 9px #00e2ed13;
  animation:stage-card-hover 7s ease-in-out infinite;
  transition:opacity .3s;
}
.arena .side-card.right {
  left:50%; right:auto; transform:translate(6%,-50%) rotate(16deg);
  background:repeating-linear-gradient(142deg,transparent 0 28px,#73abc207 29px 30px),linear-gradient(145deg,#17354a,#0a1c2c 65%,#123246);
  animation-delay:-2.5s;
}
.arena .side-card::before,.arena .side-card::after { content:''; position:absolute; inset:6px; border:1px solid #adc4d28c; border-radius:7px; }
.arena .side-card::after { inset:9px; border-color:#9ab9c73d; border-radius:5px; }
.card-back-mark { width:24%; height:30%; justify-self:start; margin-left:16%; fill:none; stroke:#b1d8e5; stroke-width:1; opacity:.8; }
.side-card.right .card-back-mark { justify-self:end; margin:0 16% 0 0; }
.arena .pack-shell {
  top:46.5%; height:var(--pack-height); width:calc(var(--pack-height)*var(--pack-ratio)); z-index:3;
  transform:translate(-50%,-50%) rotate(-3deg);
  filter:drop-shadow(0 0 7px #00dff228) drop-shadow(0 15px 12px #0008);
  animation:stage-pack-hover 6s ease-in-out infinite;
}
.arena .pack-shell .pack.artwork::after { background:linear-gradient(110deg,transparent 30%,#ccfaff33 48%,transparent 65%); }
.foil-glint { position:absolute; top:1.7%; left:6%; width:88%; height:2px; z-index:5; pointer-events:none; transform:rotate(-.8deg); }
.foil-glint::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,#36e5fb55 32%,#e9ffff 54%,#36e5fb66 68%,transparent);
  box-shadow:0 0 7px #00efff99; animation:stage-seam-glint 5s ease-in-out infinite;
}
.foil-glint::after {
  content:''; position:absolute; left:54%; top:50%; width:12px; height:12px; transform:translate(-50%,-50%);
  background:#dcffff; clip-path:polygon(50% 0,58% 40%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 40%);
  filter:drop-shadow(0 0 3px #00efff); animation:stage-seam-glint 5s ease-in-out infinite;
}
.stage-spark { position:absolute; width:18px; height:22px; fill:none; stroke:#95f5ff; stroke-width:1.3; z-index:4; pointer-events:none; filter:drop-shadow(0 0 4px #00e2ed55); animation:stage-star-twinkle 5s ease-in-out infinite; }
.stage-spark.spark-left { left:17%; top:20%; }
.stage-spark.spark-right { right:17%; top:59%; width:15px; height:19px; animation-delay:-2s; }
.arena.zoomed { --pack-height:300px; }
.arena.zoomed .pack-shell { animation:none; translate:0 0; transform:translate(-50%,-50%) scale(1.1); }
.arena.zoomed .side-card,.arena.zoomed .stage-spark { opacity:0; }
.arena.zoomed .stage-orbits { opacity:.25; }
.arena.zoomed .stage-reflection { opacity:.08; }
.arena.zoomed .stage-beam { opacity:1; }
/* Pause decorative SVG paint work while interaction and card motion take priority. */
.arena.zoomed .stage-orbit-light,.arena.zoomed .stage-effects *,.arena.zoomed .stage-effects *::before,.arena.zoomed .stage-effects *::after { animation-play-state:paused; }
.arena .rip-target { border:0; background:transparent; border-radius:3px; }
.arena .rip-target:focus-visible { outline:1px solid #92f5ff; outline-offset:3px; }
.pack-shell.ripping .foil-glint { opacity:.8; clip-path:inset(0 0 0 calc(var(--rip)*100%)); }
.pack-shell.unsealed .foil-glint { opacity:0; }
.arena.is-revealing { --stage-light:var(--reveal-tone,#00e2ed); }
.arena.is-revealing .stage-reflection { opacity:0; }
.controls.is-busy:has(.phase-label:empty) { min-height:0; padding:0; }
.arena.is-paused *,.arena.is-paused *::before,.arena.is-paused *::after { animation-play-state:paused!important; }

@keyframes stage-pack-hover { 0%,100% { translate:0 0; } 50% { translate:0 -4px; } }
@keyframes stage-card-hover { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
@keyframes stage-light-breathe { 0%,100% { opacity:.75; } 50% { opacity:1; } }
@keyframes stage-platform-breathe { 0%,100% { opacity:.85; } 50% { opacity:1; } }
@keyframes stage-dust-drift { from { transform:translateY(3px); opacity:.35; } to { transform:translateY(-9px); opacity:.8; } }
@keyframes stage-orbit-travel { from { stroke-dashoffset:0; } to { stroke-dashoffset:-1000; } }
@keyframes stage-seam-glint { 0%,30%,100% { opacity:.25; } 44%,58% { opacity:1; } }
@keyframes stage-star-twinkle { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@media(max-width:1000px) and (min-width:761px) { .arena { --pack-height:268px; } .arena.zoomed { --pack-height:300px; } }
@media(max-width:760px) {
  .arena { --pack-height:228px; border-radius:12px; }
  .arena.zoomed { --pack-height:240px; }
  .arena .side-card { border-radius:8px; }
  .stage-spark { width:13px; height:17px; }
  .stage-spark.spark-right { width:11px; height:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .arena *,.arena *::before,.arena *::after { animation:none!important; transition:none!important; }
  .arena .pack-shell,.arena .side-card { translate:0 0; }
  .stage-orbit-light { stroke-dashoffset:-120; }
  .stage-orbit-light.orbit-light-two { stroke-dashoffset:-620; }
  .foil-glint::before,.foil-glint::after { opacity:.75; }
}
.result-profile-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.result-profile-actions .text-button{margin:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;min-height:42px}
.quantities[hidden]{display:none}

/* Rarity suspense stays centered inside the unchanged showcase footprint. */
/* Color steps repaint the compact card glow once; never interpolate a color
   inherited by every full-screen background and filtered decorative layer. */
.arena.is-revealing{transition:none}
.arena.is-revealing .reveal-stage{z-index:2}
.arena.is-extracting .display{visibility:visible;z-index:3;pointer-events:none}
.arena.is-extracting .pack-shell.unsealed .pack.artwork{animation:pack-release-card .9s cubic-bezier(.2,.6,.2,1) both}
.arena.is-extracting .reveal-art-stage{animation:card-from-pack .9s cubic-bezier(.2,.6,.2,1) both}
.arena.is-extracting .reveal-plinth,.arena.is-extracting .reveal-halo,.arena.is-extracting .reveal-motes{opacity:0}

.showcase.opening-focus .arena.is-revealing{--stage-light:var(--reveal-tone);background:radial-gradient(ellipse at 50% 47%,#1225355c,transparent 54%),#030b15;border-color:#344e6b}
.arena.is-revealing .stage-effects{display:none}
.arena.is-revealing .reveal-stage{position:absolute;inset:0;width:100%;height:100%;perspective:1200px;padding:0;text-align:center}
.arena.is-revealing .reveal-stage[hidden]{display:none}
.reveal-stage .reveal-meta{position:absolute;top:16px;right:18px;margin:0;color:#b0b8c9;font-size:10px;line-height:23px;letter-spacing:0}
.reveal-rarity{position:absolute;top:12px;left:50%;transform:translateX(-50%);visibility:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:27px;min-width:0;max-width:100%;margin:0;padding:4px 12px;border:1px solid var(--rarity-color);border-radius:999px;background:color-mix(in srgb,var(--rarity-color) 7%,#080d19);box-shadow:inset 0 0 8px color-mix(in srgb,var(--rarity-color) 10%,transparent);color:var(--rarity-color);font-size:12px;font-weight:800;line-height:1.4;letter-spacing:1.1px;text-transform:uppercase}
.reveal-rarity svg{width:13px;height:15px;fill:currentColor;flex:none}
.reveal-art-stage{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:auto;max-width:64%;height:min(280px,calc(100% - 170px));aspect-ratio:5/7;margin:0;isolation:isolate;perspective:1200px;transition:none}
.reveal-art-stage::after{content:'';position:absolute;inset:-4px;z-index:4;border:1px solid color-mix(in srgb,var(--reveal-tone) 80%,white);border-radius:21px;opacity:0;pointer-events:none}
.reveal-halo{position:absolute;inset:-20% -45%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--reveal-tone) 22%,transparent),transparent 63%);opacity:.7;transition:opacity .3s}
.reveal-art-stage .spotlight-card{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;padding:0;border:0;border-radius:17px;background:none;overflow:visible;box-shadow:0 0 3px 1px color-mix(in srgb,var(--reveal-tone) 90%,white),0 0 22px color-mix(in srgb,var(--reveal-tone) 40%,transparent);animation:none!important}
.reveal-art-stage .spotlight-card::after{content:none}
.reveal-card-turn{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .65s cubic-bezier(.4,0,.2,1)}
.is-extracting .reveal-card-turn,.is-cycling .reveal-card-turn,.is-settling .reveal-card-turn,.is-flipping .reveal-card-turn{will-change:transform}
.reveal-face{position:absolute;inset:0;border-radius:17px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#081326;border:2px solid #dbe6fa}
.reveal-back{transform:rotateY(180deg);padding:5px;background:linear-gradient(130deg,#f4f7ff,#899caf 40%,#d8e7fa)}
.reveal-back::before{content:"rippr✦";position:absolute;inset:0;display:grid;place-items:center;font:800 italic 38px Manrope,Arial,sans-serif;color:white;z-index:-1}
.reveal-back img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.reveal-art-stage .spotlight-card .revealed-art{display:block;width:100%;height:100%;max-width:100%;margin:0;object-fit:contain;border-radius:0}
.reveal-front{background:#030b15;border-color:color-mix(in srgb,var(--reveal-tone) 60%,white)}
.reveal-front::after{content:'';position:absolute;inset:-25% -70%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,#ffffff24 49%,#ffffff42 50%,transparent 60%);transform:translateX(50%);opacity:0}
.reveal-art-fallback{padding:20px;color:#b6c7dc;font-size:13px}
.reveal-edge{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;transform-origin:center;transform-box:border-box}
.reveal-edge rect{fill:none;stroke:color-mix(in srgb,var(--reveal-tone) 45%,white);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:none;stroke-dashoffset:0}
.reveal-plinth{position:absolute;bottom:-23px;left:50%;width:154%;max-width:72vw;height:15px;transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--reveal-tone) 65%,transparent);border-radius:50%;background:radial-gradient(ellipse,var(--reveal-tone),color-mix(in srgb,var(--reveal-tone) 12%,transparent) 40%,transparent 73%);box-shadow:0 0 14px color-mix(in srgb,var(--reveal-tone) 30%,transparent),inset 0 0 12px color-mix(in srgb,var(--reveal-tone) 20%,transparent);z-index:-1;pointer-events:none}
.reveal-information,.reveal-actions{visibility:hidden}
.is-card-revealed .reveal-information,.is-card-revealed .reveal-actions{visibility:visible}
.reveal-information{position:absolute;left:18px;right:18px;bottom:70px;display:flex;align-items:center;justify-content:center;gap:12px;height:40px;min-width:0}
.reveal-information h2{margin:0;color:#f5f5fc;font:800 17px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.4px;overflow-wrap:anywhere;text-wrap:balance;max-height:40px;min-width:0;max-width:480px;overflow:auto;scrollbar-width:thin}
.reveal-value{margin:0;white-space:nowrap;flex:none;color:#b8bccb;font-size:16px;font-weight:650;line-height:1.4;font-variant-numeric:tabular-nums}
.reveal-stage .reveal-actions{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;gap:10px;width:calc(100% - 32px);max-width:420px;margin:0}
.reveal-stage .reveal-actions button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #d0d9e8;border-radius:9px;background:transparent;color:#f2f5fc;font:750 12px/1.45 Manrope,Arial,sans-serif;text-align:center;overflow-wrap:anywhere}
.reveal-stage .reveal-actions .keep-card{border-color:#00e1ed;background:#00e1ed;color:#00131e}
.reveal-stage .reveal-actions button:hover:not(:disabled){border-color:#80eff7;background:#102737}
.reveal-stage .reveal-actions .keep-card:hover:not(:disabled){background:#6ceaf2;color:#03222d}
.reveal-stage .reveal-actions button:focus-visible{outline:2px solid #80eff7;outline-offset:4px}
.reveal-stage .reveal-actions button:disabled{cursor:default;opacity:.55}
.arena.is-revealing .skip-opening{left:auto;right:16px;bottom:14px;transform:none;border:0;background:transparent;color:#e8e9f2;font-size:11px;min-height:34px;white-space:nowrap}
.arena.is-revealing .skip-opening::after{content:' ▸▸';margin-left:6px;color:#b9bdd0;letter-spacing:-3px}
.is-cycling .reveal-edge{animation:rarity-edge-breathe .7s ease-in-out infinite alternate}
.is-settling .reveal-rarity,.is-flipping .reveal-rarity,.is-card-revealed .reveal-rarity{visibility:visible}
.is-settling .reveal-rarity{animation:rarity-label-land .3s ease-out both}
.is-settling .reveal-art-stage::after{animation:rarity-lock-ring .46s ease-out}
.is-settling .reveal-halo{animation:rarity-lock-glow .46s ease-out}
.is-flipping .reveal-card-turn,.is-card-revealed .reveal-card-turn{transform:rotateY(0deg)}
.is-flipping .reveal-edge{opacity:0}
.is-card-revealed .reveal-information{animation:rarity-details-arrive .35s .46s ease-out both}
.is-card-revealed .reveal-actions{animation:rarity-actions-arrive .35s .52s ease-out both}
.is-card-revealed .reveal-front::after{animation:rarity-reveal-sheen .65s .03s ease-out}
.reveal-motes{position:absolute;inset:-15% -35%;pointer-events:none;z-index:-1}
.reveal-motes i{position:absolute;left:calc(8% + var(--i)*11%);top:var(--mote-top,45%);width:2px;height:2px;background:var(--reveal-tone);border-radius:50%;box-shadow:0 0 5px var(--reveal-tone);opacity:.4}
.is-cycling .reveal-motes i{animation:rarity-mote-in 2.4s calc(var(--i)*30ms) ease-in-out both}
.skip-reveal-motion .reveal-card-turn{transition:none}
.skip-reveal-motion .reveal-stage *,.skip-reveal-motion .reveal-stage *::before,.skip-reveal-motion .reveal-stage *::after{animation:none!important;transition:none!important}
@keyframes card-from-pack{0%{transform:translate(-50%,var(--extract-y,60px)) scale(var(--extract-scale,.8))}75%{transform:translate(-50%,-7px) scale(1)}100%{transform:translate(-50%,0) scale(1)}}
@keyframes pack-release-card{0%,20%{opacity:1;translate:0 0}65%{opacity:.85;translate:0 75px}100%{opacity:0;translate:0 150px}}
@keyframes rarity-edge-breathe{from{opacity:.45;transform:scale(.999)}to{opacity:1;transform:scale(1.006)}}
@keyframes rarity-lock-ring{0%{opacity:.85;transform:scale(.995)}100%{opacity:0;transform:scale(1.13)}}
@keyframes rarity-lock-glow{0%,100%{opacity:.7;transform:scale(1)}40%{opacity:1;transform:scale(1.1)}}
@keyframes rarity-reveal-sheen{0%{opacity:0;transform:translateX(-50%)}20%{opacity:.6}75%{opacity:.4}100%{opacity:0;transform:translateX(50%)}}
@keyframes rarity-label-land{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes rarity-actions-arrive{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes rarity-details-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes rarity-mote-in{0%{opacity:0;transform:translateY(12px)}55%{opacity:.7}100%{opacity:.1;transform:translateY(-25px)}}
/* The stage keeps the same footprint as the unopened pack at every breakpoint. */
.showcase.opening-focus .arena.zoomed{--pack-height:clamp(280px,25vw,310px)}
.showcase.opening-focus .arena.zoomed .pack-shell{top:52%;transform:translate(-50%,-50%)}
.showcase.opening-focus .arena .side-card{display:none}
@media(max-width:1000px) and (min-width:761px){
 .reveal-information{left:14px;right:14px;gap:8px}
 .reveal-information h2{font-size:15px;max-height:38px}
 .reveal-stage .reveal-actions button{font-size:11px;padding:10px 8px}
}
@media(max-width:760px){
 .showcase.opening-focus .arena.zoomed{--pack-height:245px}
 .reveal-stage .reveal-meta{top:12px;right:12px;font-size:9px}
 .reveal-rarity{font-size:10px;padding:4px 9px;gap:7px;min-height:24px;letter-spacing:.7px}
 .reveal-rarity svg{width:11px;height:13px}
 .reveal-information{left:14px;right:14px;gap:9px}
 .reveal-information h2{font-size:14px;line-height:1.3;max-height:37px;letter-spacing:-.25px}
 .reveal-value{font-size:14px}
 .reveal-stage .reveal-actions{gap:8px;max-width:420px}
 .reveal-stage .reveal-actions button{min-height:44px;font-size:11px;padding:9px 7px}
 .reveal-plinth{bottom:-15px;width:140%;height:9px}
 .reveal-face,.reveal-art-stage .spotlight-card{border-radius:10px}.reveal-back{padding:3px}.reveal-back img{border-radius:6px}
 .arena.is-revealing .skip-opening{right:12px;bottom:10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.reveal-card-turn{transition:none}.reveal-stage *{animation:none!important}}
.result-card strong{overflow-wrap:anywhere;line-height:1.5}
.result-card .result-disposition{font-size:10px;line-height:1.5;color:#b3d5e2;letter-spacing:0;margin:12px 0 0}
.reveal-sale-dialog{position:fixed;width:min(420px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;padding:28px;border:1px solid #47758b;border-radius:14px;background:#0a1c2a;color:#f0f8ff;font:13px/1.7 Manrope,Arial,sans-serif;box-shadow:0 24px 80px #0008}
.reveal-sale-dialog::backdrop{background:#020a12cb;backdrop-filter:blur(5px)}
.reveal-sale-dialog h2{font-size:23px;line-height:1.3;letter-spacing:-.6px;margin:0 0 14px}
.reveal-sale-dialog p{color:#a8c5d8;margin:0 0 18px;overflow-wrap:anywhere}
.reveal-sale-dialog .reveal-sale-name{color:#e8f4fc;font-weight:650;line-height:1.5;margin-bottom:10px}
.reveal-sale-dialog .reveal-sale-error{color:#ffb4a7;font-size:12px}
.reveal-sale-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.reveal-sale-buttons button{min-height:44px;padding:10px 16px;border:1px solid #4a6e86;border-radius:8px;background:#112b3c;color:#e7f5ff;font:650 12px/1.5 Manrope,Arial,sans-serif}
.reveal-sale-buttons #confirm-reveal-sale{border-color:#00d9e7;background:#00d9e7;color:#03222d}

@media(max-width:760px){.reveal-sale-dialog{padding:24px}.reveal-sale-buttons{flex-wrap:wrap}.reveal-sale-buttons button{flex:1;white-space:nowrap}}

/* Lower tiers stay quieter; the seven existing rarity names remain unchanged. */
.arena[data-reveal-rarity="Common"] .spotlight-card{box-shadow:0 0 3px #dbe6fa99,0 0 12px #adbdcf30}
.arena[data-reveal-rarity="Common"] .reveal-halo{background:radial-gradient(ellipse,#adbdcf13,transparent 63%)}
.arena[data-reveal-rarity="Common"] .reveal-motes{opacity:.3}
.arena[data-reveal-rarity="Uncommon"] .spotlight-card{box-shadow:0 0 3px #a3f7ce,0 0 15px #63dcad44}
.arena[data-reveal-rarity="Uncommon"] .reveal-halo{opacity:.4}

.arena .rip-target{top:calc(9% - 22px);left:0;right:0;width:100%;height:44px}
.arena .rip-helper{bottom:calc(50% + 10px)}
.rip-perforation{position:absolute;top:50%;left:2%;right:2%;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#dcfbff 0 4px,transparent 4px 8px);filter:drop-shadow(0 1px 1px #001019);pointer-events:none}
.rip-perforation::before{content:'';position:absolute;left:0;top:0;width:calc(var(--rip)*100%);height:2px;background:#00e2ed;box-shadow:0 0 5px #00e2ed}
.rip-perforation::after{content:'›';position:absolute;right:-5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:14px;height:14px;border:1px solid #b5f4fc;border-radius:50%;background:#062634;color:#d7fbff;font:700 13px/1 Arial,sans-serif}

/* Enlarge only the suspense artwork; the stage and final reveal keep their size. */
.arena:is(.is-extracting,.is-cycling,.is-settling,.is-flipping) .reveal-art-stage{--suspense-height:min(max(var(--pack-height),calc(min(280px,calc(100% - 170px)) + 32px)),calc(100% - 96px));height:var(--suspense-height);top:max(44px,calc((100% - var(--suspense-height))/2))}
.skip-reveal-motion .reveal-art-stage{transition:none;animation:none}
.stage-mute{position:absolute;top:6px;left:6px;z-index:10;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:#071824b8;color:#b5d4e2;cursor:pointer}
.stage-mute:hover{background:#123246;color:#e0ffff}
.stage-mute svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stage-mute .sound-off,.stage-mute.is-muted .sound-on{display:none}.stage-mute.is-muted .sound-off{display:block}
.stage-mute.is-muted{color:#859fad}
@media(prefers-reduced-motion:reduce){.reveal-art-stage{transition:none}}

.reveal-sale-preference{display:flex;align-items:center;gap:10px;min-height:44px;color:#c5dce9;font-size:12px;cursor:pointer}
.reveal-sale-preference input{width:17px;height:17px;margin:0;accent-color:#00d9e7;flex:none}
.reveal-sale-preference input:focus-visible{outline:2px solid #83edf6;outline-offset:4px}

/* Tier settings share the existing arena footprint and intrinsic pack sizing. */
.arena[data-pack]:not(.is-revealing){
 --stage-light:var(--pack-stage-light);
 border-color:color-mix(in srgb,var(--stage-light) 30%,#263c4f);
 background:
  radial-gradient(ellipse at var(--stage-glow-x,50%) 32%,color-mix(in srgb,var(--stage-light) 11%,transparent),transparent 64%),
  radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--stage-light) 7%,transparent),transparent 58%),
  linear-gradient(145deg,#07121e,#030b14 76%);
}
.arena[data-pack="basic"]{--pack-stage-light:#b8c8d8}
.arena[data-pack="plus"]{--pack-stage-light:#55d9ff}
.arena[data-pack="premium"]{--pack-stage-light:#b798ef;--stage-glow-x:35%}
.arena[data-pack="elite"]{--pack-stage-light:#ff766e;--stage-glow-x:65%}
.arena[data-pack="ultimate"]{--pack-stage-light:#ffcf70}
.arena[data-pack="icy-rush"]{--pack-stage-light:#a4efff}
.stage-signature{position:absolute;inset:0;pointer-events:none;opacity:.58}
.stage-signature svg{display:block;width:100%;height:100%;fill:none;stroke:var(--stage-light);stroke-width:1;vector-effect:non-scaling-stroke}
.stage-signature .signature-detail{opacity:.36}
.arena[data-pack] .stage-orbit-light{stroke:color-mix(in srgb,var(--stage-light) 55%,white);filter:drop-shadow(0 0 3px var(--stage-light))}
.arena[data-pack] .stage-orbit-line{stroke:color-mix(in srgb,var(--stage-light) 25%,transparent)}
.arena[data-pack] .stage-spark{stroke:var(--stage-light);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--stage-light) 30%,transparent))}
.arena[data-pack] .pack-shell{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--stage-light) 22%,transparent)) drop-shadow(0 15px 12px #0008)}
.arena[data-pack="basic"] .stage-beam{left:30%;width:40%;opacity:.5}
.arena[data-pack="basic"] .stage-particles{opacity:.28}
.arena[data-pack="basic"] .stage-orbits{opacity:.12}
.arena[data-pack="basic"] .stage-spark{display:none}
.arena[data-pack="basic"] .stage-platform{box-shadow:0 0 9px #b8c8d822,inset 0 0 12px #b8c8d80a}
.arena[data-pack="basic"] .stage-signature{opacity:.16}
.arena[data-pack="plus"] .stage-signature{opacity:.27}
.arena[data-pack="plus"] .signature-current{stroke-dasharray:90 20 3 20;animation:stage-current-flow 16s linear infinite}
.arena[data-pack="premium"] .stage-signature{opacity:.25}
.arena[data-pack="premium"] .stage-atmosphere{inset:0;background:conic-gradient(from 220deg at 50% 43%,transparent 0 7%,#b798ef0e 7% 13%,transparent 13% 37%,#b798ef0c 37% 44%,transparent 44% 66%,#b798ef09 66% 72%,transparent 72%)}
.arena[data-pack="premium"] .stage-beam{left:5%;width:90%;transform:rotate(-18deg);animation-duration:10s}
.arena[data-pack="premium"] .stage-orbits{opacity:.15}
.arena[data-pack="elite"] .stage-signature{opacity:.46}
.arena[data-pack="elite"] .signature-streak{stroke-width:2;stroke-dasharray:120 290;animation:stage-energy-flow 7s ease-in-out infinite}
.arena[data-pack="elite"] .stage-beam{left:1%;width:95%;transform:skewX(-24deg);animation-duration:5s}
.arena[data-pack="elite"] .stage-atmosphere{background:linear-gradient(135deg,transparent 20%,#ff766e08 20% 23%,transparent 23% 74%,#ff766e0a 74% 77%,transparent 77%)}
.arena[data-pack="elite"] .stage-orbits{opacity:.12}
.arena[data-pack="ultimate"] .stage-signature{opacity:.25}
.arena[data-pack="ultimate"] .signature-star{fill:var(--stage-light);stroke:none;animation:stage-star-twinkle 6s ease-in-out infinite}
.arena[data-pack="ultimate"] .stage-beam{left:25%;width:50%;animation-duration:10s}
.arena[data-pack="ultimate"] .stage-orbits{opacity:.22}
.arena[data-pack="ultimate"] .stage-particles{opacity:.55}
.arena[data-pack="icy-rush"] .stage-signature{opacity:.42}
.arena[data-pack="icy-rush"] .signature-ice{fill:#92e8ff05;stroke:#a4efff;opacity:.45}
.arena[data-pack="icy-rush"] .signature-snow{stroke-width:1.4;stroke-linecap:round;animation:stage-snow-drift 12s ease-in-out infinite alternate}
.arena[data-pack="icy-rush"] .stage-atmosphere{inset:0;background:linear-gradient(125deg,#a4efff08,transparent 20% 78%,#a4efff08),radial-gradient(ellipse at 50% 100%,#8eefff0d,transparent 52%)}
.arena[data-pack="icy-rush"] .stage-orbits{opacity:.1}
.arena[data-pack="icy-rush"] .stage-particles{fill:#e1f9ff;opacity:.7}
.arena[data-pack="icy-rush"] .stage-particles .particle-drift{animation-duration:14s;animation-name:stage-snow-drift}
.arena[data-pack="icy-rush"] .stage-beam{left:5%;width:90%;opacity:.6}
/* The pack atmosphere yields to the winning card's actual rarity. */
.arena[data-pack].is-revealing{--stage-light:var(--reveal-tone)}
@keyframes stage-current-flow{to{stroke-dashoffset:-266}}
@keyframes stage-energy-flow{0%,100%{stroke-dashoffset:60;opacity:.3}50%{stroke-dashoffset:-150;opacity:.8}}
@keyframes stage-snow-drift{from{transform:translate(0,-8px);opacity:.4}to{transform:translate(5px,14px);opacity:.8}}
@media(prefers-reduced-motion:reduce){.stage-signature *{animation:none!important}}

/* Mythic: platinum crystal chamber, sharing the same stage geometry. */
.arena[data-pack="mythic"]{--pack-stage-light:#d8e5ff}
.arena[data-pack="mythic"] .stage-signature{opacity:.23}
.arena[data-pack="mythic"] .signature-crystal{stroke-width:.8}
.arena[data-pack="mythic"] .stage-beam{left:22%;width:56%;animation-duration:12s}
.arena[data-pack="mythic"] .stage-orbits{opacity:.16}
.arena[data-pack="mythic"] .stage-particles{opacity:.45}
.arena[data-pack="mythic"]:not(.is-revealing) .stage-atmosphere{background:radial-gradient(ellipse at 22% 35%,#b9abf514,transparent 48%),radial-gradient(ellipse at 78% 65%,#a8e9fa12,transparent 48%)}
/* Keep rarity lighting outside the artwork and above the 3D card faces. */
.reveal-art-stage .reveal-edge{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);z-index:3;overflow:visible;filter:drop-shadow(0 0 4px var(--reveal-tone))}
.reveal-edge rect{stroke-width:2.5;stroke-linecap:round}