/* Tear to Sim (snap lander experiment, 11/3): the pack's own top seal is the control,
   and its own cinema plays the free sim. See tear.js for the beats.
   Everything that moves animates transform and opacity only (the compositor's work);
   the one exception is the tear itself, which re-clips one image per frame. */

/* ------------------------------------------------------------- the seal */

.sl-pack { container-type: inline-size; }

/* the grab area: the crimp plus a finger's margin (the pack's top 0-5.5% is the crimp,
   the tear line runs at 6%) */
.sl-tear {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -2.5%;
  height: 12%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}
.sl-tear:focus-visible .slt-label { outline: 2px solid var(--acc); outline-offset: 3px; }
.sl-tear.is-grab { cursor: grabbing; }
/* while it's being torn the pack holds still: no float, no tilt */
.slt-grab .sl-pack { animation-play-state: paused; --rx: 0deg !important; --ry: 0deg !important; }

/* the seal glows: one even line of light along the whole tear line, breathing, and
   now and then a slim glint runs along it left to right (the way to pull), fading as it goes */
.slt-seal {
  position: absolute;
  left: 3%;
  right: 3%;
  top: calc(8.5 / 12 * 100%);   /* the tear line (6% of the pack) inside the grab area */
  height: 3px;
  margin-top: -1.5px;
  container-type: inline-size;
  pointer-events: none;
}
/* the groove: a soft dark perforation the light sits in (light only reads against dark) */
.slt-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);
}
/* the light: brightest at the left end, where the pull starts, thinning along the seal;
   drop-shadow (not box-shadow) so the glow fades with the line */
.slt-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) 90%, #fff));
  mix-blend-mode: plus-lighter;
  animation: slt-breathe 2.8s ease-in-out infinite;
}
/* the hot end: a concentrated glow pooled where the tear begins */
.slt-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) 85%, #fff) 0%, color-mix(in srgb, var(--acc) 45%, transparent) 45%, transparent 100%);
  mix-blend-mode: plus-lighter;
  animation: slt-hot 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes slt-hot { 0%, 100% { opacity: .78; scale: .94 1; } 50% { opacity: 1; scale: 1.06 1.1; } }
.slt-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) 55%, transparent) 60%, transparent 100%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
  animation: slt-glint 3.6s cubic-bezier(.5, 0, .3, 1) infinite 1s;
}
@keyframes slt-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes slt-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; }
}

/* the words, on the crimp: a dark glass bar with a holo edge, so no foil eats them */
.slt-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), 0 0 12px color-mix(in srgb, var(--acc) 30%, transparent);
  color: #fff;
  font-size: clamp(10px, 3.9cqw, 13.5px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease, scale .25s ease;
}
.slt-label b { font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.slt-arrows { display: inline-flex; gap: .05em; font-weight: 900; color: color-mix(in srgb, var(--acc) 60%, #fff); }
.slt-arrows i { font-style: normal; opacity: .25; animation: slt-chev 1.5s ease-in-out infinite; }
.slt-arrows i:nth-child(2) { animation-delay: .15s; }
.slt-arrows i:nth-child(3) { animation-delay: .3s; }
@keyframes slt-chev { 0%, 100% { opacity: .22; } 35% { opacity: 1; } }
.sl-tear.is-grab .slt-label { opacity: 0; scale: .92; }
.sl-tear.is-grab .slt-seal { opacity: 0; transition: opacity .15s ease; }
/* the pack's moving sheen isn't cut with the tear, so it steps out while the pack is open */
.sl-pack::after { transition: opacity .2s ease; }
.slt-grab .sl-pack::after { opacity: 0; }
.sl-tear.is-grab .slt-seal i { animation: none; opacity: 0; }
.sl-tear.is-nudge .slt-label { animation: slt-nudge .55s ease; }
@keyframes slt-nudge { 30% { translate: calc(-50% + 8px) -50%; } 60% { translate: calc(-50% - 3px) -50%; } }
html.sl-glass .sl-tear { opacity: 0; pointer-events: none; }

/* --------------------------------------------- the tear (built by tear.js) */

/* the tear's own layer, pinned over the pack (tear.js build) */
.slt-tearfx { position: fixed; z-index: 999; pointer-events: none; }
.sl-tear.is-torn .slt-label, .sl-tear.is-torn .slt-seal { opacity: 0; transition: opacity .2s ease; }

/* the torn strip: thin slices of the pack's own art, chained (tear.js paint) */
.slt-strip { position: absolute; inset: 0; will-change: transform, opacity; }
.slt-slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
/* light from inside the pack, along the opening: a fine bright line in a soft glow */
.slt-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 color-mix(in srgb, var(--acc) 80%, #fff));
  mix-blend-mode: plus-lighter;
  will-change: transform, opacity;
}
/* the strip's shadow on the pack, just under the opening */
.slt-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;
}

/* the moment it tears: a slit of light blooming open along the seal */
.slt-fx { position: fixed; inset: 0; z-index: 1001; pointer-events: none; overflow: hidden; contain: strict; }
.slt-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) 60%, transparent) 46%, transparent 100%);
  mix-blend-mode: plus-lighter;
  will-change: transform, opacity;
}
/* the soft glow pouring up out of the opening */
.slt-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) 45%, transparent) 40%, transparent 100%);
  mix-blend-mode: plus-lighter;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
/* dust, sparks and orbs */
.slt-mote { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
/* a crisp four-point glint */
.slt-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;
}

/* ------------------------------------------------------------- the stage */

.slt-stage {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  contain: strict;
  font-family: inherit;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.slt-stage > * { position: absolute; }
.slt-back {
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 46%, color-mix(in srgb, var(--acc) 26%, #0b0d14) 0%, #07080c 62%, #030306 100%);
  opacity: 0;
}
.slt-rays {
  left: 50%;
  top: 46%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--acc) 22%, transparent) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%);
  opacity: 0;
  will-change: transform, opacity;
}
.slt-bloom {
  left: 50%;
  top: 46%;
  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;
}
.slt-flash { inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }

/* --- the studio (Nick 11/3: the rays read as "AI"; ?bg=rays brings them back):
   a dark room, one spotlight falling from above, a halftone field in the pack's colour
   (the site's own look) lit where the beam lands, a pool of light where the cards stand,
   a few motes drifting in the beam. Each piece is still; only the light breathes. */
.slt-stage:not(.is-rays) .slt-back {
  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%);
}
.slt-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: slt-sway 16s ease-in-out infinite;
}
@keyframes slt-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.slt-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;
}
/* true halftone: bigger dots where the light is strongest */
.slt-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--acc) 80%, #fff) 0 2.1px, transparent 2.7px);
  background-size: 12px 12px;
  background-position: 6px 6px;
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, .7) 0%, transparent 50%);
          mask: radial-gradient(closest-side, rgba(0, 0, 0, .7) 0%, transparent 50%);
}
.slt-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;
}
.slt-motes { inset: 0; opacity: 0; }
.slt-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: slt-float 14s linear infinite;
}
@keyframes slt-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; }
}
.slt-vig { inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
/* the epic warms the whole room to gold */
.slt-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;
}
.slt-stage.is-gold .slt-gold { opacity: 1; }
/* the room drops away around the card (under the cards, over the room) */
.slt-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; }
.slt-world { z-index: 3; }
.slt-fxl { z-index: 4; }
.slt-plate { z-index: 6; }

/* a hit's backlight: the card's own shape, in the pack's colour (no oval glow) */
.slt-card.is-hit .slt-aura {
  inset: 3%;
  border-radius: 14% / 10%;
  background: none;
  box-shadow:
    0 0 50px 16px color-mix(in srgb, var(--hit) 45%, transparent),
    0 0 110px 36px color-mix(in srgb, var(--hit) 20%, transparent);
}
/* the card catching the light as it turns: a flash inside its own outline */
.slt-shine {
  position: absolute;
  inset: 0;
  /* a soft bloom from the middle that fades to nothing before the edges, so it never
     traces the card's outline */
  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;
}
/* the epic's backlight: card-shaped gold light spilling out round the edges (a static
   shadow; only its opacity and scale move) */
.slt-card.is-epic .slt-aura {
  inset: 3%;
  border-radius: 14% / 10%;
  background: none;
  box-shadow:
    0 0 60px 22px rgba(255, 210, 110, .6),
    0 0 140px 60px rgba(255, 170, 60, .3);
}
/* the epic: a light running the card's edge during the build */
@property --slt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.slt-rim {
  position: absolute;
  z-index: 2;
  inset: -4px;
  padding: 4px;
  border-radius: 5.5% / 4%;
  background: conic-gradient(from var(--slt-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: slt-rim 1.15s linear infinite;
}
@keyframes slt-rim { to { --slt-a: 360deg; } }
/* the epic's soft gold bloom (light, not a shape) */
.slt-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;
}
/* the foil catching the light across the card's face */
.slt-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;
}
.slt-plate.is-epic {
  border: 1px solid 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);
}

/* the flown pack, open at the top */
.slt-pack { will-change: transform, opacity; }
.slt-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* its shadow: a soft shape under it, not a blur filter (a 40px blur over the whole pack had
   to be painted fresh the moment the stage appeared: a dropped frame) */
.slt-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);
}
/* the open mouth glows */
.slt-mouth {
  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: slt-breathe 1.4s ease-in-out infinite;
}
.slt-pack .slt-mouth { position: absolute; }

/* the cards: a back and a face on one flipping plane */
.slt-card { will-change: transform, opacity; perspective: 1400px; }
.slt-flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.slt-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;
}
.slt-flip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slt-face { transform: rotateY(180deg); }
/* a band of light that crosses a hit's face once */
.slt-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;
}
/* a hit's aura, behind the card */
.slt-aura {
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 16%;
  background: radial-gradient(closest-side, var(--hit, #fff) 0%, color-mix(in srgb, var(--hit, #fff) 45%, transparent) 45%, transparent 75%);
  opacity: 0;
  will-change: transform, opacity;
}

/* the plate under a hit */
.slt-plate {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 16px 11px;
  min-width: 180px;
  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;
}
.slt-plate b { font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.slt-plate small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hit, #ffd36b); }
.slt-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); }
.slt-plate--small { min-width: 0; padding: 7px 11px 8px; }
.slt-plate--small b { font-size: 12.5px; }
.slt-plate--small strong { font-size: 17px; }

/* sparks */
.slt-spark {
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* the controls */
.slt-close, .slt-skip {
  z-index: 5;
  top: calc(env(safe-area-inset-top) + 14px);
  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;
}
.slt-close { right: 14px; }
.slt-skip { right: 62px; }
.slt-close { width: 36px; padding: 0; }
.slt-tag {
  z-index: 5;
  left: 14px;
  top: calc(env(safe-area-inset-top) + 22px);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.slt-hint {
  z-index: 4;
  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;
}
.slt-hint.is-on { opacity: 1; }

/* the end: what the pack came to, and the two ways on */
.slt-end {
  z-index: 30;
  left: 50%;
  translate: -50% 0;
  width: min(92vw, 420px);
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  opacity: 0;
}
.slt-end h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.slt-end p { margin: -4px 0 4px; font-size: 13px; color: rgba(255, 255, 255, .65); }
.slt-live {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #171a24, #0e1018) padding-box,
    linear-gradient(100deg, #3ee6ff, #7c5cff, #ff5ce1, #ffd35c, #9dffd2) border-box;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
.slt-live em { font-style: normal; padding: 5px 10px; border-radius: 10px; color: #0a0a0d; background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff)); font-size: 15px; }
.slt-again {
  appearance: none;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .75);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}

/* while the stage is up, the page's own pack and its cards step out (the copy is on stage) */
.slt-away .sl-pack, .slt-away .sl-fan { visibility: hidden; }

/* while the sim's stage covers the screen (tear.js adds .slt-under once its backdrop is opaque):
   the page under it neither paints nor animates nor keeps its compositing layers, so a phone
   holds only the cinema in memory (iPhones were killing the tab mid-sim, 11/5) */
html.slt-under body > *:not(.slt-stage) { visibility: hidden !important; }
html.slt-under body > *:not(.slt-stage) *,
html.slt-under body > *:not(.slt-stage) *::before,
html.slt-under body > *:not(.slt-stage) *::after { animation-play-state: paused !important; will-change: auto !important; }