/* HOLO RIP (11/3): the pack opening, site-wide (static/js/holo_rip.js). Replaces rip_cinema.css.
   Everything that moves animates transform and opacity only. */

/* ------------------------------------------------------------- the tear on a page's pack */
.hr-tear {
  position: absolute;
  z-index: 6;
  pointer-events: auto;   /* the pack pages' art shell ignores pointers; the seal must not */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
  --acc-t: var(--acc, #9ed4ff);
}
.hr-tear.is-grab { cursor: grabbing; }
.hr-tear:focus-visible .hr-tear-label { outline: 2px solid var(--acc-t); outline-offset: 3px; }
.hr-grab .chasers-pack-art-shell, .hr-grab.chasers-pack-art-shell { animation-play-state: paused !important; }
.hr-torn .hr-tear .hr-tear-label, .hr-torn .hr-tear .hr-seal { opacity: 0; transition: opacity .2s ease; }
.hr-seal {
  position: absolute;
  left: 3%;
  right: 3%;
  top: calc(8.5 / 12 * 100%);
  height: 3px;
  margin-top: -1.5px;
  container-type: inline-size;
  pointer-events: none;
}
.hr-seal::before {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  top: -4px;
  height: 11px;
  border-radius: 11px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 12%, rgba(0, 0, 0, .5) 88%, transparent 100%);
  filter: blur(3px);
}
.hr-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0%, #fff 3%, #fff 16%, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, .28) 72%, rgba(255, 255, 255, .06) 100%);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px color-mix(in srgb, var(--acc-t) 90%, #fff));
  mix-blend-mode: plus-lighter;
  animation: hr-breathe 2.8s ease-in-out infinite;
}
.hr-hot {
  position: absolute;
  z-index: 1;
  left: -4%;
  top: 50%;
  width: 34%;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 18% 50%, #fff 0%, rgba(255, 255, 255, .9) 12%, transparent 40%),
    radial-gradient(closest-side, color-mix(in srgb, var(--acc-t) 85%, #fff) 0%, color-mix(in srgb, var(--acc-t) 45%, transparent) 45%, transparent 100%);
  mix-blend-mode: plus-lighter;
  animation: hr-hot 2.8s ease-in-out infinite;
  pointer-events: none;
}
.hr-seal i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 24%;
  height: 12px;
  margin-top: -6px;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .85) 30%, color-mix(in srgb, var(--acc-t) 55%, transparent) 60%, transparent 100%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
  animation: hr-glint 3.6s cubic-bezier(.5, 0, .3, 1) infinite 1s;
}
@keyframes hr-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes hr-hot { 0%, 100% { opacity: .78; scale: .94 1; } 50% { opacity: 1; scale: 1.06 1.1; } }
@keyframes hr-glint {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: .95; }
  42% { opacity: .9; }
  55% { translate: calc(100cqw - 100%) 0; opacity: 0; }
  100% { translate: calc(100cqw - 100%) 0; opacity: 0; }
}
.hr-tear-label {
  position: absolute;
  left: 50%;
  top: calc(5.25 / 12 * 100%);
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .42em .95em .42em 1.05em;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(14, 16, 26, .9), rgba(6, 7, 12, .9)) padding-box,
    linear-gradient(100deg, #8ee9ff, #c9a6ff 40%, #ffd9a8 70%, #9dffd2) border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
  color: #fff;
  font-size: clamp(10px, calc(var(--w, 260px) * .042), 13.5px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease, scale .25s ease;
}
.hr-tear-label b { font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.hr-arrows { display: inline-flex; gap: .05em; font-weight: 900; color: color-mix(in srgb, var(--acc-t) 60%, #fff); }
.hr-arrows i { font-style: normal; opacity: .25; animation: hr-chev 1.5s ease-in-out infinite; }
.hr-arrows i:nth-child(2) { animation-delay: .15s; }
.hr-arrows i:nth-child(3) { animation-delay: .3s; }
@keyframes hr-chev { 0%, 100% { opacity: .22; } 35% { opacity: 1; } }
.hr-tear.is-grab .hr-tear-label { opacity: 0; scale: .92; }
.hr-tear.is-grab .hr-seal { opacity: 0; transition: opacity .15s ease; }
.hr-tear.is-nudge .hr-tear-label { animation: hr-nudge .55s ease; }
@keyframes hr-nudge { 30% { translate: calc(-50% + 8px) -50%; } 60% { translate: calc(-50% - 3px) -50%; } }
@media (prefers-reduced-motion: reduce) { .hr-seal::after, .hr-hot, .hr-seal i, .hr-arrows i { animation: none; } }

/* the torn strip and its light (holo_rip.js Strip) */
.hr-tearfx { position: fixed; z-index: 999; pointer-events: none; }
.hr-tearfx--stage { position: fixed; z-index: 6; }
.hr-strip { position: absolute; inset: 0; will-change: transform, opacity; }
.hr-slice { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.hr-gap {
  position: absolute; left: 0; top: 6%; width: 100%; height: 3px; margin-top: -1.5px;
  pointer-events: none; transform-origin: 0 50%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .4), #fff 3%, #fff 97%, rgba(255, 255, 255, .4));
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #cfe9ff);
  mix-blend-mode: plus-lighter;
  will-change: transform, opacity;
}
.hr-shade { position: absolute; left: 0; top: 6%; width: 100%; height: 16px; pointer-events: none; transform-origin: 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent); opacity: 0; }

/* light & dust */
.hr-fx { position: fixed; inset: 0; z-index: 1001; pointer-events: none; overflow: hidden; contain: strict; }
.hr-mote { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
.hr-glint {
  position: absolute; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #fff 50%, transparent) center / 100% 1.6px no-repeat,
    linear-gradient(0deg, transparent, #fff 50%, transparent) center / 1.6px 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent 40%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  mix-blend-mode: plus-lighter;
  will-change: transform, opacity;
}
.hr-slit { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .85) 18%, color-mix(in srgb, var(--acc, #9ed4ff) 60%, transparent) 46%, transparent 100%); mix-blend-mode: plus-lighter; will-change: transform, opacity; }
.hr-plume { position: absolute; border-radius: 50%; background: radial-gradient(closest-side at 50% 85%, rgba(255, 255, 255, .55) 0%, color-mix(in srgb, var(--acc, #9ed4ff) 45%, transparent) 40%, transparent 100%); mix-blend-mode: plus-lighter; transform-origin: 50% 100%; will-change: transform, opacity; }

/* ------------------------------------------------------------- the stage */
.hr-stage {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  --acc: #9ed4ff;
}
.hr-stage > * { position: absolute; }
.hr-stage.is-resting { pointer-events: none; background: none; }
.hr-room { inset: 0; }
.hr-room > * { position: absolute; }
.hr-back {
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(120% 75% at 50% 0%, color-mix(in srgb, var(--acc) 12%, #0d0f16) 0%, #08090d 52%, #040406 100%);
  opacity: 0;
}
.hr-spot {
  left: 50%; top: 0; width: min(160vw, 1200px); height: 96vh; margin-left: max(-80vw, -600px);
  transform-origin: 50% 0;
  background:
    radial-gradient(ellipse 22% 100% at 50% 0%, rgba(255, 255, 255, .13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 92% at 50% 0%, color-mix(in srgb, var(--acc) 28%, transparent) 0%, color-mix(in srgb, var(--acc) 10%, transparent) 45%, transparent 78%);
  opacity: 0;
  animation: hr-sway 16s ease-in-out infinite;
}
@keyframes hr-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.hr-dots {
  left: 50%; top: 42%; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--acc) 70%, #fff) 0 1px, transparent 1.6px);
  background-size: 12px 12px;
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .12) 55%, transparent 100%);
          mask: radial-gradient(closest-side, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .12) 55%, transparent 100%);
  opacity: 0;
}
.hr-floor {
  left: 50%; width: min(130vw, 980px); height: 64px; margin-left: max(-65vw, -490px); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 40%, rgba(255, 255, 255, .3)) 0%, color-mix(in srgb, var(--acc) 16%, transparent) 50%, transparent 100%);
  opacity: 0;
}
.hr-motes { inset: 0; opacity: 0; }
.hr-motes i {
  position: absolute; width: calc(3px * var(--s, 1)); height: calc(3px * var(--s, 1)); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, color-mix(in srgb, var(--acc) 70%, #fff) 55%, transparent 72%);
  opacity: 0;
  animation: hr-float 14s linear infinite;
}
@keyframes hr-float { 0% { translate: 0 40px; opacity: 0; } 15% { opacity: .7; } 50% { translate: 14px -40px; opacity: .35; } 85% { opacity: .6; } 100% { translate: -8px -140px; opacity: 0; } }
.hr-bloom {
  left: 50%; top: 45%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), color-mix(in srgb, var(--acc) 55%, transparent) 38%, transparent 72%);
  opacity: 0;
  will-change: transform, opacity;
}
.hr-gold {
  inset: 0;
  background: radial-gradient(ellipse 40% 92% at 50% 0%, rgba(255, 205, 100, .22) 0%, transparent 75%), radial-gradient(ellipse 60% 50% at 50% 46%, rgba(255, 200, 90, .16) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hr-stage.is-gold .hr-gold { opacity: 1; }
.hr-stage.is-resting .hr-gold { opacity: 0; }
.hr-dim { inset: 0; z-index: 2; background: radial-gradient(ellipse 34% 40% at 50% 46%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .94) 75%); opacity: 0; pointer-events: none; }
.hr-world { inset: 0; z-index: 3; pointer-events: none; }
.hr-fxl { inset: 0; z-index: 4; pointer-events: none; }
.hr-flash { inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }

/* the top bar: what this is, a run's count, the way out */
.hr-top {
  z-index: 8; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 0;
}
.hr-stage.is-resting .hr-top { display: none; }
.hr-tag, .hr-hud { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hr-hud { color: #fff; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.hr-btns { margin-left: auto; display: flex; gap: 8px; }
.hr-btn {
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 12, 18, .6); color: #fff;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.hr-close { width: 36px; padding: 0; }
.hr-golive { border-color: transparent; background: linear-gradient(180deg, #171a24, #0e1018) padding-box, linear-gradient(100deg, #3ee6ff, #7c5cff, #ff5ce1, #ffd35c) border-box; }
.hr-hint {
  z-index: 7; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 22px);
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); opacity: 0; transition: opacity .4s ease;
}
.hr-hint.is-on { opacity: 1; }

/* the flown pack */
.hr-pack { position: absolute; z-index: 2; will-change: transform, opacity; }
.hr-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hr-pack::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.hr-mouth {
  position: absolute; left: 6%; right: 6%; top: 6%; height: 16px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--acc) 60%, #fff) 45%, transparent);
  filter: blur(2px); opacity: .9;
  animation: hr-breathe 1.4s ease-in-out infinite;
}
.hr-mouth[hidden] { display: none; }

/* the cards */
.hr-card { position: absolute; will-change: transform, opacity; perspective: 1400px; }
.hr-flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.hr-flip > * {
  position: absolute; inset: 0; border-radius: 4.5% / 3.3%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12);
  background: #111;
}
.hr-back-face { background: url("../images/homepage/misc/pokemon-cardback.jpg") center / cover no-repeat, #1b2a6b; }
.hr-flip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-face { transform: rotateY(180deg); }
.hr-sweep { position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); mix-blend-mode: overlay; translate: -60% 0; opacity: 0; }
.hr-foil { position: absolute; inset: -20% -70%; background: linear-gradient(105deg, transparent 30%, rgba(255, 120, 210, .5) 42%, rgba(255, 240, 150, .6) 50%, rgba(120, 235, 255, .5) 58%, transparent 70%); mix-blend-mode: color-dodge; opacity: 0; pointer-events: none; }
.hr-shine { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 52% at 50% 44%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .4) 45%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.hr-aura { position: absolute; z-index: -1; inset: 3%; border-radius: 14% / 10%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.hr-card.is-hit .hr-aura, .hr-rest-art.is-hit .hr-aura {
  box-shadow: 0 0 50px 16px color-mix(in srgb, var(--hit, #9ed4ff) 45%, transparent), 0 0 110px 36px color-mix(in srgb, var(--hit, #9ed4ff) 20%, transparent);
}
.hr-card.is-epic .hr-aura, .hr-rest-art.is-epic .hr-aura { box-shadow: 0 0 60px 22px rgba(255, 210, 110, .6), 0 0 140px 60px rgba(255, 170, 60, .3); }
@property --hr-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hr-rim {
  position: absolute; z-index: 2; inset: -4px; padding: 4px; border-radius: 5.5% / 4%;
  background: conic-gradient(from var(--hr-a), transparent 0deg 200deg, rgba(255, 236, 170, .35) 250deg, #fff 316deg, #ffd36b 336deg, transparent 356deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 8px #ffd36b) drop-shadow(0 0 3px #fff);
  opacity: 0; pointer-events: none;
  animation: hr-rim 1.15s linear infinite;
}
@keyframes hr-rim { to { --hr-a: 360deg; } }
.hr-burstglow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 230, .95) 0%, rgba(255, 214, 120, .7) 22%, rgba(255, 180, 70, .28) 50%, transparent 78%); mix-blend-mode: plus-lighter; pointer-events: none; will-change: transform, opacity; }

/* a graded slab: the card inside a clear case under our label */
/* a slab out of the pack = the homepage slab: frosted case, holo-edged white
   label (grader in its colour, the Pokemon, the grade), the card in its well */
.hr-slab { position: absolute; inset: 0; container-type: inline-size; border-radius: 3.2% / 1.9%;
  background: linear-gradient(118deg, rgba(255,255,255,.08) 28%, rgba(255,255,255,.26) 44%, rgba(255,255,255,.06) 60%),
              linear-gradient(180deg, rgba(228,234,242,.42), rgba(206,214,226,.32) 50%, rgba(220,227,238,.38));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 0 18px rgba(255,255,255,.2); }
.hr-slab::after { content: ""; position: absolute; left: 4%; right: 4%; top: 21.6%; height: 1.1%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.16)); }
.hr-slab-label { position: absolute; left: 5.5%; right: 5.5%; top: 3%; height: 17%; padding: 1.6cqw; border-radius: 3px; display: flex;
  background: linear-gradient(120deg, #5be0ff, #7b9bff 28%, #c98bff 52%, #ff8fd4 72%, #ffd17a); }
.hr-slab-label::before { content: ""; position: absolute; inset: 1.6cqw; border-radius: 2px; background: linear-gradient(180deg, #ffffff, #eef1f6); }
.hr-slab-txt, .hr-slab-grade { position: relative; z-index: 1; }
.hr-slab-txt { flex: 1 1 auto; min-width: 0; display: grid; align-content: center; gap: .8cqw; padding: 0 2cqw 0 4.5cqw; color: #10131c; line-height: 1.05; }
.hr-slab-co { font-size: 7.4cqw; font-weight: 900; letter-spacing: .06em; color: #10131c; }
.hr-slab-co[data-grader="psa"] { color: #c8102e; }
.hr-slab-co[data-grader="cgc"] { color: #0057b8; }
.hr-slab-co[data-grader="tag"] { color: #111111; }
.hr-slab-txt strong { font-size: 6cqw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-slab-grade { flex: 0 0 auto; display: grid; align-content: center; justify-items: end; padding-right: 4.5cqw; line-height: 1; }
.hr-slab-grade b { font-size: 14cqw; font-weight: 900; letter-spacing: -.03em; color: #10131c; }
.hr-slab-well { position: absolute; left: 7%; right: 7%; top: 24%; bottom: 3%; display: grid; place-items: center; padding: 2.5%; border-radius: 2px; background: rgba(8, 12, 22, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.hr-slab-well img { position: absolute; inset: 2.5%; width: 95%; height: 95%; object-fit: contain; border-radius: 3.5% / 2.5%; }
.hr-flip .hr-slab img, .hr-rest-face .hr-slab img { object-fit: contain; }

/* a pick they passed on */
.hr-card.is-miss .hr-face { transition: filter .6s ease; }
/* a hit sitting in the tray (toTray): one flat picture, no 3D, no layers of its own. A long
   run piles these up, and each full-size 3D card cost a phone ~10 MB of GPU memory (11/5). */
.hr-card.is-tray { will-change: auto; perspective: none; }
.hr-card.is-tray > :not(.hr-flip),
.hr-card.is-tray .hr-back-face, .hr-card.is-tray .hr-foil, .hr-card.is-tray .hr-sweep, .hr-card.is-tray .hr-shine { display: none; }
.hr-card.is-tray .hr-flip { transform: none !important; transform-style: flat; will-change: auto; }
.hr-card.is-tray .hr-face { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.hr-stamp {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: 0 0;
  transform: translate(-50%, -50%) rotate(-8deg);
  display: grid; justify-items: center; gap: 4px;
  padding: 10px 16px; border-radius: 10px;
  border: 2px solid rgba(255, 120, 130, .9);
  background: rgba(20, 6, 10, .78);
  color: #ffb3ba; text-align: center; white-space: nowrap;
  opacity: 0;
}
.hr-stamp b { font-size: 16px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hr-stamp small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 220, 224, .75); }

/* the plate under a card while it's revealed */
.hr-plate {
  z-index: 6; display: grid; justify-items: center; gap: 4px; padding: 10px 16px 11px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(20, 22, 34, .92), rgba(9, 10, 16, .92));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5); text-align: center; opacity: 0; will-change: transform, opacity;
}
.hr-plate b { font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.hr-plate small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hit, #ffd36b); }
.hr-plate strong { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 211, 107, .45); }
.hr-plate.is-epic { border-color: transparent; background: linear-gradient(180deg, rgba(30, 24, 12, .94), rgba(12, 10, 6, .94)) padding-box, linear-gradient(100deg, #ffe7a3, #ffb84a, #fff3cf, #ffc75a) border-box; box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 200, 90, .35); }
.hr-banner {
  z-index: 9; left: 50%; top: 22%; transform: translate(-50%, -50%);
  max-width: 90vw; padding: 12px 18px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 24, 12, .94), rgba(12, 10, 6, .94)) padding-box, linear-gradient(100deg, #ffe7a3, #ffb84a, #fff3cf) border-box;
  border: 1px solid transparent; font-size: 13px; font-weight: 900; letter-spacing: .1em; color: #ffe7a3;
}
.hr-none { z-index: 9; left: 0; right: 0; top: 46%; text-align: center; font-size: 18px; font-weight: 900; color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------- the rest: hits on the page */
.hr-rest { position: absolute; z-index: 60; pointer-events: none; }
.hr-rest.is-scroll { overflow-x: auto; overflow-y: hidden; pointer-events: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hr-rest.is-scroll::-webkit-scrollbar { display: none; }
.hr-rest-row { position: relative; height: 100%; }
.hr-rest-card { position: absolute; top: 0; margin: 0; display: grid; grid-template-rows: auto auto; justify-items: center; gap: 8px; pointer-events: auto; }
.hr-rest-art { position: relative; width: 100%; aspect-ratio: 63 / 88; transform-origin: 50% 100%; }
.hr-rest-art .hr-aura { opacity: .7; }
.hr-rest-face { position: absolute; inset: 0; border-radius: 4.5% / 3.3%; overflow: hidden; box-shadow: 0 18px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); background: #111; }
.hr-rest-face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-rest-art.is-link { cursor: pointer; }
.hr-rest-plate {
  display: grid; justify-items: center; gap: 3px; width: 100%; box-sizing: border-box;
  padding: 8px 10px 9px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(20, 22, 34, .94), rgba(9, 10, 16, .94));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45); color: #fff; text-align: center;
}
.hr-rest-plate b { max-width: 100%; font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-rest-plate strong { font-size: 16px; font-weight: 900; color: #ffd36b; font-variant-numeric: tabular-nums; }
.hr-rest-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hr-rest-tag.is-link { color: #9ed4ff; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* torn and waiting for the pack to come back from the server: light breathes out of the mouth */
.hr-torn .chasers-pack-art-shell::after, .chasers-pack-art-shell.hr-torn::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 1%; height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(190, 225, 255, .45) 45%, transparent);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  animation: hr-breathe 1.1s ease-in-out infinite;
}

/* the top bar on a phone: one line, never wrapping */
.hr-tag, .hr-hud, .hr-btn { white-space: nowrap; }
.hr-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .hr-top { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hr-tag { max-width: 26vw; font-size: 9.5px; letter-spacing: .12em; }
  .hr-hud { padding: 5px 8px; font-size: 9.5px; letter-spacing: .1em; }
  .hr-btns { gap: 6px; }
  .hr-btn { height: 32px; padding: 0 10px; font-size: 10px; letter-spacing: .1em; }
  .hr-close { width: 32px; padding: 0; }
}

/* the pack pages' separate "pack top" picture (the old manual rip) must never show over a torn pack */
.chasers-pack-art-shell.hr-grab .chasers-pack-art-top,
.chasers-pack-art-shell.hr-torn .chasers-pack-art-top { display: none !important; }

/* ============================================================= 11/3 round 3 */

/* ---- the stage wears the pack: its colour glowing behind it, its accents in still shards ---- */
.hr-halo {
  inset: 0;
  background: radial-gradient(ellipse 70% 46% at 50% 44%, color-mix(in srgb, var(--halo, #1c2440) 70%, var(--acc) 30%) 0%, color-mix(in srgb, var(--halo, #1c2440) 70%, transparent) 42%, transparent 76%);
  opacity: 0;
}
.hr-shards {
  inset: 0;
  background:
    linear-gradient(118deg, transparent 47%, color-mix(in srgb, var(--acc) 20%, transparent) 47% 49%, transparent 49%),
    linear-gradient(118deg, transparent 52.5%, color-mix(in srgb, var(--acc) 14%, transparent) 52.5% 53.3%, transparent 53.3%),
    repeating-linear-gradient(118deg, transparent 0 46px, color-mix(in srgb, var(--acc) 10%, transparent) 46px 48px);
  -webkit-mask-image: radial-gradient(ellipse 55% 42% at 50% 44%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 55% 42% at 50% 44%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%);
  opacity: 0;
}
/* the dais: a pool of light on the floor and a fine bright ring the pack stands over */
.hr-dais {
  left: 50%;
  width: min(78vw, 520px);
  height: 60px;
  margin-left: calc(min(78vw, 520px) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 38%, rgba(255, 255, 255, .25)) 0%, color-mix(in srgb, var(--acc) 14%, transparent) 55%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.hr-dais i {
  position: absolute;
  inset: 22% 8%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--acc) 70%, #fff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent), inset 0 0 14px color-mix(in srgb, var(--acc) 40%, transparent);
  opacity: .7;
  animation: hr-breathe 3.2s ease-in-out infinite;
}
/* the charge: a column of light rising out of the open pack */
.hr-beam {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 94%;
  height: 150%;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, .95) 0%, color-mix(in srgb, var(--acc) 60%, rgba(255, 255, 255, .5)) 22%, color-mix(in srgb, var(--acc) 22%, transparent) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  opacity: 0;
}

/* ---- THE END: the hits on the stage, clean type under each, the tokens beneath ---- */
.hr-final { left: 0; right: 0; z-index: 6; }
.hr-final.is-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hr-final.is-scroll::-webkit-scrollbar { display: none; }
.hr-final-row { position: relative; }
/* many hits: a grid that scrolls up and down (rest(), 11/5). Room is left round the cards for
   their glow; past 6 the bottom fades so the next row reads as "more below". */
.hr-final.is-grid.is-long {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; scrollbar-width: none;
}
.hr-final.is-grid::-webkit-scrollbar { display: none; }
.hr-final.is-grid.is-more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}
.hr-final.is-grid .hr-final-row { display: grid; justify-content: center; align-content: start; }
.hr-final.is-grid.is-long .hr-final-row { padding-bottom: 24px; }
.hr-final.is-grid .hr-final-card { position: relative; gap: 8px; align-content: start; min-height: 0; }
.hr-final.is-grid .hr-final-cap { gap: 3px; width: calc(100% + 8px); }
.hr-final.is-grid .hr-final-cap b { font-size: 12px; }
.hr-final.is-grid .hr-final-cap strong { font-size: 16px; }
/* the tag ("Vaulted", "Simulation") goes: Keep vaulted and the header already say it */
.hr-final.is-grid .hr-final-tag { display: none; }
/* under a grid the two buttons share a line (the bulk count wraps under them) */
.hr-final-acts.is-row { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.hr-final-acts.is-row .hr-sell--all, .hr-final-acts.is-row .hr-keep { min-height: 2.6rem; padding: 0 .85rem; font-size: 13px; }
/* the Sell token, compact so it stays inside its column, with one glow instead of three (a long
   run can put a dozen on screen) */
.hr-final.is-grid .hr-final-cap .hr-sell {
  max-width: 100%; min-height: 1.95rem; padding: 0 .5rem; gap: .3em; font-size: 10.5px; border-radius: 10px;
  filter: drop-shadow(0 0 calc(5px + var(--heat) * 6px) var(--bloom-a));
}
.hr-final.is-grid .hr-final-cap .hr-sell::before { border-radius: 10px; }
.hr-final.is-grid .hr-final-cap .hr-sell::after { border-radius: 8px; }
.hr-final-card { position: absolute; margin: 0; display: grid; justify-items: center; gap: 12px; }
/* no will-change here: a run can end with dozens of these, each a layer the phone keeps (11/5) */
.hr-final-art { position: relative; width: 100%; }
.hr-final-art .hr-aura { opacity: .75; will-change: auto; }
.hr-final-face { position: absolute; inset: 0; border-radius: 4.5% / 3.3%; overflow: hidden; box-shadow: 0 22px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); background: #111; }
.hr-final-face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-final-art.is-link { cursor: pointer; }
.hr-final-cap { display: grid; justify-items: center; gap: 4px; text-align: center; max-width: 100%; }
.hr-final-cap b { max-width: 100%; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-final-cap strong { font-size: 20px; font-weight: 900; color: #ffd36b; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 211, 107, .4); line-height: 1.1; }
.hr-final-tag { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hr-final-tag.is-link { color: #7ff0b8; cursor: pointer; }
.hr-final-tag.is-link::after { content: " \203A"; }
.hr-final-acts {
  position: absolute; z-index: 7; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
  width: max-content; max-width: 94vw;
}
.hr-bulk { width: 100%; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hr-none { z-index: 9; left: 0; right: 0; top: 46%; text-align: center; font-size: 18px; font-weight: 900; color: rgba(255, 255, 255, .85); }
/* the vault taking the cards in */
.hr-vaultslot {
  z-index: 8; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 70px);
  width: min(70vw, 360px); height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #7ff0b8 15%, #fff 50%, #7ff0b8 85%, transparent);
  box-shadow: 0 0 18px #7ff0b8, 0 0 40px rgba(127, 240, 184, .5);
  opacity: 0;
}
.hr-vaultslot span {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #7ff0b8; white-space: nowrap;
}

/* ---- the Sell token (the old cinema's, Nick: "I like the way the sell buttons were"): the holo
        gradient on an 8-bit slab, a dark face inside it, pixel type, a neon bloom. Pressed, the
        face drains, the token lights up in holo and a ring of sparks leaves it. ---- */
.hr-sell {
  --holo: linear-gradient(100deg, #3ee6ff, #7c5cff 30%, #ff5ce1 55%, #ffd35c 78%, #3ee6ff);
  --face: linear-gradient(180deg, #1b2038 0%, #0a0c18 58%, #16102a 100%);
  --bloom-a: rgba(62, 230, 255, .55);
  --bloom-b: rgba(155, 92, 255, .4);
  --stairs: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  --heat: 0;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 2.1rem;
  padding: 0 .95rem;
  border: 0;
  background: none;
  color: #fff;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: .58rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  filter:
    drop-shadow(2px 2px 0 rgba(4, 6, 16, .92))
    drop-shadow(0 0 1px rgba(4, 6, 16, .9))
    drop-shadow(0 0 calc(7px + var(--heat) * 8px) var(--bloom-a))
    drop-shadow(0 0 calc(16px + var(--heat) * 14px) var(--bloom-b));
  transition: filter 220ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease;
}
.hr-sell::before { content: ""; position: absolute; inset: 0; z-index: 0; clip-path: var(--stairs); background: var(--holo); background-size: 300% 100%; }
.hr-sell::after { content: ""; position: absolute; inset: 3px; z-index: 0; clip-path: var(--stairs); background: var(--face); transition: opacity 320ms ease; }
.hr-sell > * { position: relative; z-index: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .85), 0 0 8px rgba(150, 210, 255, .45); transition: color 320ms ease, text-shadow 320ms ease; }
.hr-sell em { font-style: normal; color: #ffd35c; }
@media (hover: hover) and (pointer: fine) {
  .hr-sell:not(.is-sold):hover { --heat: 1; transform: translateY(-1px); }
  .hr-sell:not(.is-sold):hover::before { animation: hr-holo 2.2s linear infinite; }
}
.hr-sell:not(.is-sold):active { transform: translateY(1px); }
.hr-sell:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes hr-holo { to { background-position: 300% 50%; } }
.hr-sell.is-sold { --heat: 1.4; cursor: default; }
.hr-sell.is-sold::after { opacity: 0; }
.hr-sell.is-sold::before { animation: hr-holo 1.6s linear infinite; }
.hr-sell.is-sold > *, .hr-sell.is-sold em { color: #0a0c18; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.hr-sell.is-busy { animation: hr-sell-breathe 900ms ease-in-out infinite alternate; }
@keyframes hr-sell-breathe { from { --heat: .6; } to { --heat: 1.4; } }
.hr-sell.is-shake { animation: hr-sell-shake 420ms ease; }
@keyframes hr-sell-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.hr-sell--all { min-height: 2.4rem; padding: 0 1.1rem; font-size: .62rem; }
.hr-spark {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 1px;
  background: var(--c, #fff); box-shadow: 0 0 6px var(--c, #fff), 0 0 12px var(--c, #fff);
  pointer-events: none; z-index: 2; opacity: 0;
  animation: hr-spark 720ms cubic-bezier(.17, .85, .3, 1) both; animation-delay: var(--t, 0ms);
}
@keyframes hr-spark {
  0% { transform: rotate(var(--a)) translateX(4px) scale(1.2); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d, 44px)) scale(.2); opacity: 0; }
}
.hr-final-cap, .hr-final-acts { position: relative; }
.hr-final-acts { position: absolute; }
@media (prefers-reduced-motion: reduce) { .hr-sell::before { animation: none !important; } .hr-spark, .hr-sell.is-busy, .hr-sell.is-shake { animation: none; } }

/* ---- the Rip button (Nick: "modern, simple, clean"; just another way to rip): a quiet glass pill,
        the words, a hairline, the price. ---- */
[data-stage-slider-shell]:has(.hr-ripbtn) .chasers-rip-slider { display: none !important; }
.hr-ripbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  margin: 0 auto;
  padding: 0 8px 0 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(14, 16, 24, .72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, background .2s ease;
}
[data-stage-slider-shell]:has(.hr-ripbtn) { display: flex; justify-content: center; }
.hr-ripbtn-mark { display: none; }
.hr-ripbtn-label { white-space: nowrap; }
.hr-ripbtn-price {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hr-ripbtn-price:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .hr-ripbtn:hover { border-color: rgba(255, 255, 255, .32); background: rgba(22, 25, 36, .8); } }
.hr-ripbtn:active, .hr-ripbtn.is-press { transform: scale(.97); }
.hr-ripbtn:disabled { opacity: .5; cursor: default; }
.hr-ripbtn:focus-visible { outline: 2px solid var(--t-acc, #9ed4ff); outline-offset: 3px; }

/* the Sell tokens, smooth (Nick 11/3: "keep the concepts but ditch the pixelation"): the same holo rim
   around a dark face, the neon bloom, the face draining to holo when sold, the spark ring; rounded,
   in the site's own type, no stepped slab, no pixel font, no hard pixel shadow */
.hr-sell {
  --stairs: none;
  min-height: 2.35rem;
  padding: 0 1.05rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  filter:
    drop-shadow(0 6px 12px rgba(4, 6, 16, .55))
    drop-shadow(0 0 calc(6px + var(--heat) * 8px) var(--bloom-a))
    drop-shadow(0 0 calc(14px + var(--heat) * 14px) var(--bloom-b));
}
.hr-sell::before { clip-path: none; border-radius: 12px; }
.hr-sell::after { clip-path: none; inset: 2px; border-radius: 10px; }
.hr-sell > * { text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 8px rgba(150, 210, 255, .35); }
.hr-sell em { font-weight: 900; font-variant-numeric: tabular-nums; }
.hr-sell--all { min-height: 2.75rem; padding: 0 1.4rem; font-size: 14px; border-radius: 14px; }
.hr-sell--all::before { border-radius: 14px; }
.hr-sell--all::after { border-radius: 12px; }
.hr-sell.is-sold > *, .hr-sell.is-sold em { text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.hr-spark { border-radius: 50%; }

/* ============================================================= 11/3 round 4 */

/* ---- the room: prod's deep night, the pack's colour as one soft glow centred on the pack, a
        neutral spotlight, a fine grain over it all so the gradients never show their steps ---- */
.hr-back { background: #04050b; overflow: hidden; }   /* painted by paintRoom() in holo_rip.js */
.hr-halo, .hr-spot { display: none; }
.hr-bloom { top: var(--hy, 50%); }
.hr-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.hr-cv-fore { z-index: 3; }
.hr-final-cap strong { color: #f5dfa8; text-shadow: 0 0 14px rgba(245, 223, 168, .3); }

/* ---- the end: Sell all, and under it the quiet way out ---- */
.hr-final-acts { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.hr-keep {
  appearance: none;
  min-height: 2.4rem;
  padding: 0 1.3rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .16s ease;
}
@media (hover: hover) and (pointer: fine) { .hr-keep:hover { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); } }
.hr-keep:active { transform: scale(.97); }
.hr-keep:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- the Rip button: dark glass with a foil rim in the pack's colours that slowly turns, a soft
        glow of the pack's colour under it, the price on a chip of that colour, a sheen that passes
        now and then. It reads first on the page without shouting. ---- */
.hr-ripbtn {
  --ra: var(--t-acc, #9ed4ff);
  --rb: var(--t-acc2, #ffffff);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 54px;
  min-width: 232px;
  gap: 14px;
  padding: 0 7px 0 26px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 60%) padding-box,
    linear-gradient(#10121a, #10121a) padding-box,
    conic-gradient(from var(--ra-turn, 0deg), var(--ra), var(--rb), rgba(255, 255, 255, .9), var(--ra), color-mix(in srgb, var(--ra) 40%, #10121a), var(--ra)) border-box;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    0 14px 34px -10px color-mix(in srgb, var(--ra) 55%, transparent),
    0 0 26px -6px color-mix(in srgb, var(--ra) 40%, transparent),
    0 8px 20px rgba(0, 0, 0, .4);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .015em;
  /* the rim turns; the glow under it holds still (a breathing box-shadow repainted the button every
     frame for as long as the page was open, 11/5) */
  animation: hr-rip-turn 7s linear infinite;
}
@property --ra-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hr-rip-turn { to { --ra-turn: 360deg; } }
@keyframes hr-rip-glow {
  0%, 100% { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--ra) 45%, transparent), 0 0 22px -8px color-mix(in srgb, var(--ra) 32%, transparent), 0 8px 20px rgba(0, 0, 0, .4); }
  50% { box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--ra) 62%, transparent), 0 0 30px -4px color-mix(in srgb, var(--ra) 46%, transparent), 0 8px 20px rgba(0, 0, 0, .4); }
}
/* the sheen */
.hr-ripbtn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .04) 54%, transparent 64%);
  transform: translateX(-120%);
  animation: hr-rip-sheen 4.6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
  pointer-events: none;
}
@keyframes hr-rip-sheen { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }
.hr-ripbtn-label { text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.hr-ripbtn-price {
  padding: 8px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ra) 90%, #fff), color-mix(in srgb, var(--ra) 80%, #000));
  color: #0b0c12;
  font-size: 14.5px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(0, 0, 0, .35);
}
@media (hover: hover) and (pointer: fine) {
  .hr-ripbtn:hover {
    border-color: transparent;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 60%) padding-box,
      linear-gradient(#141722, #141722) padding-box,
      conic-gradient(from var(--ra-turn, 0deg), var(--ra), var(--rb), rgba(255, 255, 255, .9), var(--ra), color-mix(in srgb, var(--ra) 40%, #10121a), var(--ra)) border-box;
    transform: translateY(-1px);
  }
}
.hr-ripbtn:disabled { animation: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.hr-ripbtn:disabled::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .hr-ripbtn, .hr-ripbtn::after { animation: none; } }
@media (max-width: 420px) { .hr-ripbtn { height: 50px; min-width: 210px; font-size: 15.5px; padding-left: 22px; } }

/* ---- the epic in the pack's own colour (--ep, set by holo_rip.js) instead of a fixed gold ---- */
.hr-gold { display: none; }
.hr-card.is-epic .hr-aura, .hr-rest-art.is-epic .hr-aura { box-shadow: 0 0 60px 22px color-mix(in srgb, var(--ep, #ffd36b) 60%, transparent), 0 0 140px 60px color-mix(in srgb, var(--ep, #ffd36b) 28%, transparent); }
.hr-rim {
  background: conic-gradient(from var(--hr-a), transparent 0deg 200deg, color-mix(in srgb, var(--ep, #ffd36b) 35%, transparent) 250deg, #fff 316deg, var(--ep, #ffd36b) 336deg, transparent 356deg);
  filter: drop-shadow(0 0 8px var(--ep, #ffd36b)) drop-shadow(0 0 3px #fff);
}
.hr-burstglow { background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, color-mix(in srgb, var(--ep, #ffd36b) 75%, transparent) 22%, color-mix(in srgb, var(--ep, #ffd36b) 28%, transparent) 50%, transparent 78%); }
.hr-plate.is-epic {
  background: linear-gradient(180deg, rgba(14, 16, 24, .94), rgba(6, 7, 12, .94)) padding-box,
    linear-gradient(100deg, color-mix(in srgb, var(--ep, #ffd36b) 60%, #fff), var(--ep, #ffd36b), #fff, var(--ep, #ffd36b)) border-box;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--ep, #ffd36b) 35%, transparent);
}
.hr-plate.is-epic strong { color: color-mix(in srgb, var(--ep, #ffd36b) 55%, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--ep, #ffd36b) 45%, transparent); }

/* ---- the stage room for now (11/3): the homepage's look, the pack's glow and its shards; no dots ---- */
.hr-back {
  background:
    radial-gradient(ellipse 85% 50% at 50% var(--hy, 50%), color-mix(in srgb, var(--halo, #1c2440) 70%, var(--acc) 30%) 0%, color-mix(in srgb, var(--halo, #1c2440) 75%, transparent) 40%, transparent 78%),
    linear-gradient(180deg, #0d0e13 0%, #08090c 60%, #050608 100%);
}
.hr-motif {
  inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(118deg, transparent 47%, color-mix(in srgb, var(--acc) 20%, transparent) 47% 49%, transparent 49%),
    linear-gradient(118deg, transparent 52.5%, color-mix(in srgb, var(--acc2, #fff) 16%, transparent) 52.5% 53.3%, transparent 53.3%),
    repeating-linear-gradient(118deg, transparent 0 46px, color-mix(in srgb, var(--acc) 11%, transparent) 46px 48px),
    repeating-linear-gradient(28deg, transparent 0 120px, color-mix(in srgb, var(--acc2, #fff) 6%, transparent) 120px 121px);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% calc(var(--hy, 50%) - 8%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% calc(var(--hy, 50%) - 8%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}
.hr-dimmer { inset: 0; background: #000; opacity: 0; pointer-events: none; }
.hr-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }

/* 11/4 the glass floor (Chamber in holo_rip.js) reflects only the foil it draws itself: live CSS
   reflections of the pack and cards re-render their animated insides every frame (Nick 11/4: lag). */
.hr-gl { opacity: 1; }

/* ---- 11/4: each grader's own label (Nick: "PSA more PSA-like, CGC more CGC-like... superb").
   PSA: white label in a red frame, red wordmark. CGC: deep navy, white type (Pristine: gold).
   TAG: black, white type, a silver hairline. BGS: silver (Black Label: black and gold).
   Every label gets the grade word over the number and a soft gloss. */
.hr-slab-label { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px rgba(0,0,0,.25); overflow: hidden; }
.hr-slab-label::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 54%),
              linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
}
.hr-slab-txt { gap: .5cqw; }
.hr-slab-label .hr-slab-co { font-size: 8cqw; font-weight: 900; letter-spacing: .02em; line-height: .95; font-style: normal; }
.hr-slab-txt strong { font-size: 5.4cqw; font-weight: 800; letter-spacing: .01em; }
.hr-slab-grade { gap: .4cqw; justify-items: end; }
.hr-slab-grade small { font-size: 3.3cqw; font-weight: 900; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.hr-slab-grade b { font-size: 13cqw; line-height: .85; font-variant-numeric: tabular-nums; }
/* the set (+ card number) under the name and the cert under the grade (11/10): small, grey, one line each */
.hr-slab-txt .hr-slab-set { font-size: 3.2cqw; font-style: normal; font-weight: 700; letter-spacing: .02em; color: #4a5263;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.hr-slab-grade .hr-slab-cert { font-size: 2.8cqw; font-style: normal; font-weight: 700; letter-spacing: .05em; color: #4a5263;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; margin-top: .3cqw; }

/* PSA (11/4, Nick: "white and pearl... real premium label feel"): a lacquered red frame with a
   fine highlight; inside, a pearl white panel (soft pink / blue / mint iridescence over a fine
   engraved line pattern), set a hair below the frame; the wordmark and type pressed into it. */
.hr-slab-label[data-grader="psa"] {
  background: linear-gradient(180deg, #ff6276 0%, #d71733 18%, #b10d27 62%, #82071a 100%);
  box-shadow: inset 0 .35cqw 0 rgba(255,255,255,.38), inset 0 -.35cqw 0 rgba(60,0,8,.35), 0 2px 6px rgba(0,0,0,.28);
}
.hr-slab-label[data-grader="psa"]::before {
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(255,205,226,.55), rgba(255,205,226,0) 60%),
    radial-gradient(90% 160% at 100% 100%, rgba(186,220,255,.6), rgba(186,220,255,0) 60%),
    radial-gradient(60% 140% at 62% -10%, rgba(206,255,236,.5), rgba(206,255,236,0) 65%),
    repeating-linear-gradient(118deg, rgba(150,140,170,0) 0 .8cqw, rgba(150,140,170,.07) .8cqw 1cqw),
    linear-gradient(180deg, #ffffff 0%, #f6f4f9 55%, #ece9f1 100%);
  box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.95), inset 0 .5cqw 1.1cqw rgba(110,70,95,.16), 0 0 0 .22cqw rgba(90,4,16,.55);
}
.hr-slab-label[data-grader="psa"] .hr-slab-co {
  color: #c8102e; font-style: italic; letter-spacing: -.01em; font-size: 9cqw;
  text-shadow: 0 .25cqw 0 rgba(255,255,255,.9), 0 -.15cqw 0 rgba(110,0,18,.25);
}
.hr-slab-label[data-grader="psa"] .hr-slab-txt strong {
  color: #1b1d24; text-transform: uppercase; font-size: 4.8cqw; letter-spacing: .05em;
  text-shadow: 0 .25cqw 0 rgba(255,255,255,.85);
}
.hr-slab-label[data-grader="psa"] .hr-slab-grade small { color: #c8102e; letter-spacing: .16em; text-shadow: 0 .2cqw 0 rgba(255,255,255,.85); }
/* (no filter or clipped gradient here: either gives the number its own layer, and in the turning
   case a layer can paint through to the other side, as the back's hologram once did) */
.hr-slab-label[data-grader="psa"] .hr-slab-grade b { color: #121419; text-shadow: 0 .3cqw 0 rgba(255,255,255,.95), 0 -.12cqw 0 rgba(0,0,0,.18); }
/* the pearl catches the light: the label's gloss runs a little pink-to-blue on PSA */
.hr-slab-label[data-grader="psa"]::after {
  background: linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,226,240,.32) 38%, rgba(255,255,255,.42) 44%, rgba(214,234,255,.32) 50%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%);
}

/* CGC */
.hr-slab-label[data-grader="cgc"] { background: linear-gradient(180deg, #4d86d9, #1d4c9c); }
.hr-slab-label[data-grader="cgc"]::before { background: linear-gradient(170deg, #1b4a96 0%, #0f3070 55%, #0a2456 100%); }
.hr-slab-label[data-grader="cgc"] .hr-slab-co { color: #ffffff; letter-spacing: .1em; }
.hr-slab-label[data-grader="cgc"] .hr-slab-txt strong { color: rgba(236,243,255,.92); }
.hr-slab-label[data-grader="cgc"] .hr-slab-grade small { color: #9fc3ff; }
.hr-slab-label[data-grader="cgc"] .hr-slab-grade b { color: #ffffff; }
.hr-slab-label[data-grader="cgc"] .hr-slab-set, .hr-slab-label[data-grader="cgc"] .hr-slab-cert { color: rgba(214,228,255,.78); }
.hr-slab-label[data-grader="cgc"][data-perfect] .hr-slab-set, .hr-slab-label[data-grader="cgc"][data-perfect] .hr-slab-cert { color: rgba(242,214,140,.85); }
.hr-slab-label[data-grader="cgc"][data-perfect] { background: linear-gradient(120deg, #fff3c4, #d9ad3c 35%, #fbe7a1 60%, #b98b22); }
.hr-slab-label[data-grader="cgc"][data-perfect]::before { background: linear-gradient(170deg, #12306a, #0a2152 60%, #081a42); }
.hr-slab-label[data-grader="cgc"][data-perfect] .hr-slab-grade small { color: #f2cf6b; }
.hr-slab-label[data-grader="cgc"][data-perfect] .hr-slab-grade b {
  background: linear-gradient(180deg, #fff6d2, #e9c25a 55%, #c8962a); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* TAG */
.hr-slab-label[data-grader="tag"] { background: linear-gradient(180deg, #3a3d44, #121316); }
.hr-slab-label[data-grader="tag"]::before { background: linear-gradient(180deg, #17181b, #070708); box-shadow: inset 0 0 0 .5cqw rgba(214,219,228,.28); }
.hr-slab-label[data-grader="tag"] .hr-slab-co { color: #ffffff; letter-spacing: .26em; font-size: 7cqw; }
.hr-slab-label[data-grader="tag"] .hr-slab-txt strong { color: rgba(244,245,249,.85); }
.hr-slab-label[data-grader="tag"] .hr-slab-set, .hr-slab-label[data-grader="tag"] .hr-slab-cert { color: rgba(214,219,228,.72); }
.hr-slab-label[data-grader="tag"] .hr-slab-grade small { color: rgba(244,245,249,.6); }
.hr-slab-label[data-grader="tag"] .hr-slab-grade b { color: #ffffff; }

/* BGS */
.hr-slab-label[data-grader="bgs"] { background: linear-gradient(120deg, #f4f6f9, #9aa3b2 40%, #eef1f5 65%, #8890a0); }
.hr-slab-label[data-grader="bgs"]::before { background: linear-gradient(180deg, #e9ecf1, #c9ced8); }
.hr-slab-label[data-grader="bgs"] .hr-slab-co { color: #1d2230; letter-spacing: .08em; }
.hr-slab-label[data-grader="bgs"] .hr-slab-txt strong, .hr-slab-label[data-grader="bgs"] .hr-slab-grade small, .hr-slab-label[data-grader="bgs"] .hr-slab-grade b { color: #1d2230; }
.hr-slab-label[data-grader="bgs"][data-perfect] { background: linear-gradient(120deg, #f6e3a6, #b88a2c 45%, #f2d98c 70%, #9b7222); }
.hr-slab-label[data-grader="bgs"][data-perfect]::before { background: linear-gradient(180deg, #141414, #050505); }
.hr-slab-label[data-grader="bgs"][data-perfect] .hr-slab-co,
.hr-slab-label[data-grader="bgs"][data-perfect] .hr-slab-txt strong,
.hr-slab-label[data-grader="bgs"][data-perfect] .hr-slab-grade small,
.hr-slab-label[data-grader="bgs"][data-perfect] .hr-slab-grade b { color: #e8c766; }

/* ---- 11/4: a slab turns around IN its case. Its back: the same case, the label's back in the
   grader's frame (hologram + barcode), a card back in the well. */
.hr-back-face.is-slab { background: #111; }
.hr-slab--back { --glint: -40%; }
.hr-slab--back::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent calc(var(--glint) - 12%), rgba(255,255,255,.35) var(--glint), transparent calc(var(--glint) + 12%));
}
.hr-slab--back .hr-slab-txt { gap: 1.4cqw; }
.hr-slab--back .hr-slab-co { font-size: 7cqw; }
.hr-slab-bars {
  display: block; height: 4.2cqw; width: 70%;
  background: repeating-linear-gradient(90deg, currentColor 0 .5cqw, transparent .5cqw 1cqw, currentColor 1cqw 1.3cqw, transparent 1.3cqw 2.2cqw, currentColor 2.2cqw 3cqw, transparent 3cqw 3.5cqw);
  color: #14161c; opacity: .8;
}
.hr-slab-label[data-grader="cgc"] .hr-slab-bars, .hr-slab-label[data-grader="tag"] .hr-slab-bars,
.hr-slab-label[data-grader="bgs"][data-perfect] .hr-slab-bars { color: #f4f5f9; }
.hr-slab-holo {
  position: relative; z-index: 1; align-self: center; flex: 0 0 auto; margin-right: 4cqw;
  width: 11cqw; height: 11cqw; border-radius: 1.4cqw;
  background: conic-gradient(from 30deg, #5be0ff, #7b9bff, #c98bff, #ff8fd4, #ffd17a, #8fffc1, #5be0ff);
  box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.55), 0 0 2cqw rgba(255,255,255,.25);
  animation: hr-holo-chip 3s linear infinite;
}
/* turned by an angle, not a filter: a filter gives the chip its own layer, and that layer ignored
   the back face's backface-visibility and showed through the front label */
@property --chip { syntax: "<angle>"; inherits: false; initial-value: 30deg; }
.hr-slab-holo { background: conic-gradient(from var(--chip), #5be0ff, #7b9bff, #c98bff, #ff8fd4, #ffd17a, #8fffc1, #5be0ff); }
@keyframes hr-holo-chip { to { --chip: 390deg; } }
.hr-slab-cardback { position: absolute; inset: 2.5%; border-radius: 3.5% / 2.5%; background: url("../images/homepage/misc/pokemon-cardback.jpg") center / cover no-repeat, #1b2a6b; }

/* the beyond-epic slab: rays open behind it, a shockwave leaves it */
.hr-rays {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ep, #ffd36b) 55%, transparent) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 40%, transparent 72%);
          mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 40%, transparent 72%);
  mix-blend-mode: screen;
}
.hr-shock {
  position: absolute; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  border: 3px solid color-mix(in srgb, var(--ep, #fff) 80%, #fff);
  box-shadow: 0 0 24px var(--ep, #fff), inset 0 0 24px var(--ep, #fff);
}

/* the end, one slab on a big screen: bigger type and buttons */
@media (min-width: 760px) {
  .is-solo-slab .hr-final-cap { gap: 6px; }
  .is-solo-slab .hr-final-cap b { font-size: 20px; }
  .is-solo-slab .hr-final-cap strong { font-size: 30px; }
  .is-solo-slab .hr-final-tag { font-size: 12px; }
  .is-solo-slab .hr-final-cap .hr-sell { min-height: 3.1rem; padding: 0 1.6rem; font-size: 17px; border-radius: 15px; margin-top: 4px; }
  .is-solo-slab .hr-final-cap .hr-sell::before { border-radius: 15px; }
  .is-solo-slab .hr-final-cap .hr-sell::after { border-radius: 13px; }
  .is-solo-slab .hr-keep { min-height: 3rem; padding: 0 1.9rem; font-size: 16px; }
}
@property --glint { syntax: "<percentage>"; inherits: true; initial-value: -40%; }

/* 11/4 v2 (Nick: the starburst sat in front of the card): beyond epic now happens BEHIND the slab:
   a slow prismatic halo, and a comet of light running round the case's edge */
.hr-rays { display: none; }
.hr-prism {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--ep, #ffd36b) 70%, #fff) 0%, color-mix(in srgb, var(--ep, #ffd36b) 35%, transparent) 30%, transparent 62%),
    conic-gradient(from 0deg, rgba(91,224,255,.55), rgba(123,155,255,.5), rgba(201,139,255,.55), rgba(255,143,212,.5), rgba(255,209,122,.55), rgba(143,255,193,.45), rgba(91,224,255,.55));
  -webkit-mask: radial-gradient(closest-side, #000 20%, rgba(0,0,0,.6) 45%, transparent 70%);
          mask: radial-gradient(closest-side, #000 20%, rgba(0,0,0,.6) 45%, transparent 70%);
  filter: blur(18px) saturate(1.2);
  mix-blend-mode: screen;
}
.hr-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; opacity: 0; }
.hr-trace rect {
  fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 160 840;
  filter: drop-shadow(0 0 4px var(--ep, #fff)) drop-shadow(0 0 10px var(--ep, #fff));
}
.hr-card.is-slab-reveal .hr-aura { display: none; }