@font-face { font-family: "NHG"; src: url(fonts/nhg-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NHG"; src: url(fonts/nhg-medium.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #08080a;
  --ink: #f2f2f0;
  --mute: #8a8a88;
  --line: rgba(255,255,255,.16);
  --orange: #ff3e00;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --accent: #d6d6d6;
  --glow: rgba(214,214,214,.16);
  --pack-h: max(260px, min(58vh, calc(100vh - 400px), 540px));
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 90% at 50% 38%, #17171a 0%, #0b0b0d 52%, #060607 100%);
  color: var(--ink);
  font: 400 16px/1.45 "NHG", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body[data-stage="rip"], body[data-stage="reveal"], body[data-stage="flash"] { overflow: hidden; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.tiny { font-size: 11px; color: var(--mute); margin: 0; }
.kicker { font-size: 12px; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; color: #cfcfcd; }
.sq { display: inline-block; width: 7px; height: 7px; background: var(--orange); flex: none; }

/* ---------- ambience ---------- */
/* the room: one soft light high and behind the pack that breathes very slowly, and a vignette holding the edges.
   nothing moves fast enough to catch the eye; it is only there so the black is not dead */
.room { position: fixed; inset: -20%; pointer-events: none; z-index: 0; --room: rgba(255,255,255,1);
  background:
    radial-gradient(60% 46% at 50% 34%, color-mix(in srgb, var(--room) 7%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.55), transparent 60%);
  animation: breathe-room 22s ease-in-out infinite; }
@keyframes breathe-room { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } 50% { transform: translate3d(0, -1.2%, 0) scale(1.03); opacity: 1; } }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%); }
@media (prefers-reduced-motion: reduce) { .room { animation: none; } }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bloom {
  position: fixed; left: 50%; top: 46%; width: 120vmax; height: 120vmax; transform: translate(-50%,-50%) scale(.4);
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  opacity: 0; pointer-events: none; z-index: 3; transition: opacity 1.6s var(--ease), transform 2.4s var(--ease);
}
.bloom.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ---------- frame ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; text-align: center; padding: 26px 16px 0; pointer-events: none; }
.logo { width: 70px; height: auto; margin: 0 auto; color: var(--ink); opacity: .92; }

.stage { position: relative; z-index: 10; }
.scene { display: none; min-height: 100vh; min-height: 100dvh; padding: 84px 16px 28px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.scene.is-on { display: flex; }
.scene.cards.is-on { display: block; }
.h { font-weight: 400; font-size: clamp(30px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 clamp(14px, 3vh, 30px); text-transform: uppercase; }
#s1 .h { min-height: 1.02em; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
#s1 .tiny { min-height: 1.45em; }
#s1 { padding-bottom: 56px; }   /* keeps the hint clear of the fixed terms line */
/* the terms live in the footer, apart from the copy that belongs to the button */
.terms { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 20; text-align: center; font-size: 10px; letter-spacing: .1em; color: #5e5e5c; pointer-events: none; transition: opacity .5s; }
.terms a { pointer-events: auto; color: #8a8a88; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.terms a:hover { color: var(--ink); text-decoration-color: var(--ink); }
body:not([data-stage="mystery"]) .terms { opacity: 0; }
body:not([data-stage="mystery"]) .terms a { pointer-events: none; }
@media (max-width: 560px) { .terms { bottom: 12px; font-size: 9px; } }
.lede { max-width: 420px; color: #b9b9b6; margin: 0 auto; }

/* ---------- buttons ---------- */
.cta-row { display: flex; gap: 12px; justify-content: center; align-items: center; margin: clamp(14px, 3vh, 28px) 0 14px; min-height: 44px; }
.btn {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 28px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-radius: 5px;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--ink); color: #000; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn-solid { background: var(--ink); color: #000; }
.btn-solid:hover { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: .4; pointer-events: none; }
#claimBtn, #ripBtn { min-width: 190px; }

/* ---------- the pack ---------- */
/* an engraved seal behind the pack, like the die of a coin: fine lines, barely there, turning once every four minutes */
.seal { position: fixed; left: 50%; top: 50%; width: min(150vmin, 1300px); height: auto; translate: -50% -50%; z-index: 1; pointer-events: none;
  opacity: .085; animation: seal 240s linear infinite; mask-image: radial-gradient(closest-side, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%); }
@keyframes seal { to { rotate: 360deg; } }
body.themed .seal { filter: sepia(1) saturate(.6) brightness(1.2); }
body[data-tier="rare"].themed .seal { filter: none; }
/* the pack stands on something: a reflection falls away beneath it */
.reflect { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1) translateY(-3%); transform-origin: 50% 0;
  opacity: .16; filter: blur(1.5px); pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 42%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 42%); }
.pack.ripping .reflect, .pack.dissolving .reflect { opacity: 0; transition: opacity .4s; }
/* a glint crosses the foil every so often, even with the mouse still */
.pack::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: soft-light; opacity: .9;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.65) 48%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.65) 52%, transparent 62%);
  background-size: 300% 100%; animation: glint 9s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes glint { 0%, 70% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.pack.ripping::before, .pack.dissolving::before { display: none; }
@media (prefers-reduced-motion: reduce) { .seal, .pack::before { animation: none; } }
.pack-wrap { perspective: 1400px; width: 100%; display: flex; justify-content: center; }
.pack {
  position: relative; height: var(--pack-h); aspect-ratio: 994 / 1582;
  transform-style: preserve-3d; will-change: transform;
  animation: float 6.5s ease-in-out infinite;
}
.pack.tilt { animation: none; }
body[data-stage="mystery"] .pack, body[data-stage="revealed"] .pack { cursor: pointer; }
body[data-stage="revealed"].glove-on .pack { cursor: none; }
.pack:focus-visible { outline: 2px solid var(--orange); outline-offset: 10px; border-radius: 6px; }
body[data-stage="mystery"] .pack:hover .face.front, body[data-stage="revealed"] .pack:hover .face.back { filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)) brightness(1.06); }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-14px) rotate(1.2deg); }
}
.pack .shadow {
  position: absolute; left: 12%; right: 12%; bottom: -34px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(6px); transform: translateZ(-1px);
  animation: shadow 6.5s ease-in-out infinite;
}
@keyframes shadow { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(.82); opacity: .4; } }
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.45,.05,.2,1); }
.flipper.turned { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); }
.face.back { transform: rotateY(180deg); }
.pack::after { /* soft sheen that tracks the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .7;
  background: radial-gradient(60% 40% at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.55), transparent 70%);
}
.halves { position: absolute; inset: 0; display: none; }
.half.top { z-index: 2; }
.half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); will-change: transform; }
.pack.ripping .halves { display: block; }
.pack.ripping .flipper { display: none; }

.tearlight {
  position: absolute; left: -6%; right: -6%; top: 9.5%; height: 3%; opacity: 0; pointer-events: none;
  transform: rotate(-2.2deg); transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); filter: blur(5px);
}

/* ---------- tier flash ---------- */
.flash { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.flash::before { content: ""; position: absolute; inset: 0; background: rgba(4,4,5,.72); }
.flash > * { position: relative; }
.flash-word {
  font-weight: 400; text-transform: uppercase; color: var(--ink);
  font-size: clamp(28px, 6.2vw, 100px); line-height: 1; letter-spacing: .4em; padding-left: .4em; max-width: 100vw; white-space: nowrap; opacity: 0;
  text-shadow: 0 0 40px var(--glow);
}
.flash-line { display: block; height: 1px; width: min(70vw, 760px); background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transform: scaleX(.2); }
.flash-line.l1 { margin-bottom: clamp(18px, 3.4vh, 34px); }
.flash-line.l2 { margin-top: clamp(18px, 3.4vh, 34px); }
.flash-sub { margin-top: 18px; font-size: 11px; color: var(--accent); opacity: 0; }
body[data-tier="legendary"] .flash-word { color: #f6dca4; }

/* ---------- gauntlet ---------- */
.glove { position: fixed; left: 0; top: 0; z-index: 60; width: 176px; height: auto; pointer-events: none; opacity: 0; transform-origin: 27.5% 71.4%; will-change: transform; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
body.glove-on #stage, body.glove-on .btn { cursor: none; }
.slashfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 58; pointer-events: none; display: none; }
.hitflash { position: fixed; inset: 0; z-index: 57; pointer-events: none; background: #fff; opacity: 0; mix-blend-mode: overlay; }
.burst { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 40; pointer-events: none; }
.burst::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; transform: translate(-50%,-50%) scale(0); opacity: 0;
  background: radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.55) 8%, var(--glow) 30%, transparent 62%);
}

/* ---------- cards ---------- */
.scene.cards { padding: 136px clamp(24px, 6vw, 96px) 64px; }
/* on the card page the logo scrolls with the page instead of riding over the titles */
body[data-stage="cards"] .top { position: absolute; }
.cards .kicker { margin-bottom: 22px; }
.cards-head { max-width: 760px; margin: 0 auto clamp(40px, 7vh, 80px); }
.hand {
  --cols: 5; max-width: 1160px; margin: 0 auto; display: grid; gap: clamp(28px, 3.4vw, 52px) clamp(22px, 3vw, 44px);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); justify-items: center;
}
.hand.n12 { --cols: 6; }
.card {
  position: relative; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0;
  perspective: 900px; will-change: transform; text-align: left;
}
.card .tilt { position: relative; transition: transform .35s var(--ease); transform-style: preserve-3d; border-radius: 3.5%; }
.card img { width: 100%; height: auto; border-radius: 3.5%; box-shadow: 0 18px 36px rgba(0,0,0,.5); }
.card .sheen { position: absolute; inset: 0; border-radius: 3.5%; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, rgba(255,214,150,.2) 52%, transparent 66%); background-size: 220% 100%; background-position: var(--sx, 50%) 0; }
.card:hover .sheen, .card:focus-visible .sheen { opacity: 1; }
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 4px; }
/* the Claim badge printed on the card: light blended into the plate itself, feathered so there is no edge */
.hot { position: absolute; left: 36.5%; right: 36.5%; bottom: 1.6%; height: 8.4%; z-index: 2; border-radius: 6px; }
.hot .lit { display: none; }
.hot::before { content: ""; position: absolute; inset: 4% 3%; pointer-events: none; border-radius: 40%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 82%);
  mix-blend-mode: overlay; opacity: 0; animation: lit 3.6s ease-in-out infinite; transition: opacity .25s; }
@keyframes lit { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
.hot:hover::before, .hot:focus-visible::before { animation: none; opacity: 1; }
.hot:focus-visible { outline: none; }
/* foil: on rare and legendary the hover sheen is the pack's own metal */
body.themed .card .sheen { background: var(--foil); background-size: 220% 100%; background-position: var(--sx, 50%) 0; mix-blend-mode: soft-light; }
body.themed .card:hover .sheen, body.themed .card:focus-visible .sheen { opacity: .9; }
.cards-foot { margin: clamp(48px, 9vh, 96px) 0 24px; text-align: center; }
.linkish { appearance: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--mute); cursor: pointer; border-bottom: 1px solid transparent; }
.linkish:hover { color: var(--ink); border-color: var(--ink); }
.skip { position: fixed; right: 22px; bottom: 22px; z-index: 70; appearance: none; background: none; border: 1px solid rgba(255,255,255,.18); color: var(--mute); padding: 9px 14px; font-size: 10px; border-radius: 5px; cursor: pointer; opacity: 0; transition: opacity .6s, color .25s, border-color .25s; }
.skip.on { opacity: 1; }
.skip:hover { color: var(--ink); border-color: var(--ink); }
.scene.err .pack { animation: none; cursor: default; filter: grayscale(1) brightness(.45) contrast(.9); height: min(40vh, 360px); margin: 6px 0 22px; }
.scene.err .pack::after { display: none; }
.scene.err .lede { margin-top: 0; }

/* ---------- lightbox: the card in your hand ---------- */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(3,3,4,.94); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 56px 16px 24px; perspective: 1400px; }
.lb-glow { position: absolute; left: 50%; top: 50%; width: min(110vmin, 100%); height: 110vmin; transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent 66%); opacity: 1; }
body:not(.themed) .lb-glow { background: radial-gradient(closest-side, rgba(255,255,255,.1), transparent 68%); }
.lb-card { position: relative; height: min(74vh, 740px); aspect-ratio: 700 / 978; max-width: 100%; transform-style: preserve-3d; }
.lb-tilt { position: absolute; inset: 0; border-radius: 3.5%; transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06), 0 0 70px 6px var(--glow); }
.lb-tilt img#lbImg { width: 100%; height: 100%; object-fit: cover; border-radius: 3.5%; display: block; }
.lb-tilt .holo, .lb-tilt .glare, .lb-tilt .rim { position: absolute; inset: 0; border-radius: 3.5%; pointer-events: none; }
/* foil: a rainbow band that slides with the tilt, blended so it only lives in the highlights */
.lb-tilt .holo { display: none; }
/* glare: one soft light that follows the pointer across the surface */
.lb-tilt .glare { opacity: 1;
  background: radial-gradient(46% 34% at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, transparent 70%); }
.lb-tilt .rim { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35); }
.lb-dl { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s; }
.lb-dl:hover { border-color: var(--ink); }
/* the how-to: an item stat sheet beside the card (below it on phones); the Claim badge lights at the same moment */
.lb { overflow-y: auto; overflow-x: hidden; justify-content: safe center; gap: 14px; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; }
.lb-card { height: min(648px, calc((100dvh - 130px) * .9), calc((100vw - 32px - 288px) * 978 / 700 * .9)); min-height: 240px; width: auto; flex: none; }
.lb-gives { width: 260px; flex: none; padding: 16px; text-align: left;
  background: rgba(10,10,12,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
  box-shadow: inset 0 0 0 3px rgba(10,10,12,.9), inset 0 0 0 4px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(-8px); pointer-events: none; }
.lb-gives.on { pointer-events: auto; animation: gives-in .22s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gives-in { to { opacity: 1; transform: none; } }
body.themed .lb-gives { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.lb-gives-k { margin: 0 0 10px; font-size: 10px; color: var(--accent); display: flex; justify-content: space-between; align-items: center; }
.lb-nav { display: flex; align-items: center; gap: 7px; color: var(--mute); }
.lb-nav span { min-width: 0; text-align: center; white-space: nowrap; }
.lb-nav button { appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); width: 24px; height: 22px; border-radius: 3px; font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lb-nav button:hover { border-color: var(--ink); }
.lb-gives-f { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 10px; }
.lb-gives-f .lb-dl { color: var(--mute); white-space: nowrap; }
.lb-gives-f .lb-dl:hover { color: var(--ink); }
.lb-gives-t { text-wrap: pretty; margin: 0 0 14px; font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: -.005em; }
.lb-attrs { margin: 0 0 12px; font-size: 10px; }
.lb-attrs div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.lb-attrs div:last-child { border-bottom: 1px solid var(--line); }
.lb-attrs dt { color: var(--mute); flex: none; }
.lb-attrs dd { margin: 0; color: var(--ink); text-align: right; }
.lb-gives.on .lb-attrs div { opacity: 0; animation: attr-in .2s ease-out forwards; animation-delay: calc(80ms + var(--i) * 35ms); }
@keyframes attr-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.lb-gives-h { margin: 0; font-size: 10px; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.lb-gives-h kbd { font: inherit; color: #000; background: var(--ink); padding: 3px 6px 2px; border-radius: 3px; line-height: 1; }
/* phones: the card first, then a tight two-column sheet; the card already carries the lore, so the line is dropped */
@media (max-width: 719px) {
  .lb-stage { flex-direction: column; gap: 14px; }
  .lb-card { height: min(calc(100dvh - 268px), calc((100vw - 28px) * 978 / 700)); }
  .lb-gives { width: min(400px, calc(100vw - 28px)); padding: 12px 14px 10px; transform: translateY(-6px); }
  .lb-gives-t { display: none; }
  .lb-attrs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-bottom: 10px; }
  .lb-attrs div { padding: 6px 0; }
  .lb-attrs { border-bottom: 1px solid var(--line); }
  .lb-attrs div:last-child { border-bottom: 0; }
  .lb-attrs div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
body.themed .lb-gives-h kbd { background: var(--accent); }
.hot.cue::before { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lb-gives.on { animation: none; opacity: 1; transform: none; } }
.lb-x { position: absolute; top: 18px; right: 18px; appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); padding: 10px 14px; cursor: pointer; font-size: 11px; border-radius: 5px; z-index: 2; }
.lb-x:hover { border-color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 90; background: #000; color: var(--ink); border: 1px solid var(--line); padding: 12px 16px; font-size: 11px; opacity: 0; pointer-events: none; transition: .35s var(--ease); display: flex; gap: 10px; align-items: center; }
.toast::before { content: ""; width: 7px; height: 7px; background: var(--orange); flex: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .hand, .hand.n12 { --cols: 3; }
  .scene.cards { padding-left: 28px; padding-right: 28px; }
}
@media (pointer: coarse) {
  /* a thumb needs more than the printed badge: the tap area grows, the light stays on the plate */
  .hot { left: 24%; right: 24%; bottom: 0; height: 16%; }
  .hot::before { inset: 39% 25% 11%; }
}
@media (max-width: 560px) {
  :root { --pack-h: min(46vh, 400px); }
  .scene { padding-top: 76px; }
  .glove { width: 128px; }
  .lb { padding: 64px 14px 20px; gap: 14px; }
  .skip { right: 14px; bottom: 14px; }
  .hand, .hand.n12 { --cols: 2; gap: 26px 18px; }
  .scene.cards { padding-left: 22px; padding-right: 22px; }
  .flash-word { font-size: 8vw; }
  .btn { padding: 0 22px; }
  .logo { width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack, .pack .shadow, .hot::before { animation: none; }
  .flipper { transition-duration: .01s; }
}

/* ---------- tension before the reveal ---------- */
.charge { position: fixed; left: 50%; top: 46%; width: min(120vw, 900px); aspect-ratio: 1; transform: translate(-50%,-50%) scale(.6); opacity: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.16) 42%, transparent 70%); }
.cta-row { position: relative; }
/* the seal: a chunky pixel bar, like an old game's loading strip, that fills in stutters */
.unseal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; opacity: 0; }
.unseal-cap { font-size: 10px; color: var(--mute); }
.bar { display: grid; grid-auto-flow: column; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.28); image-rendering: pixelated; }
.bar i { display: block; width: 7px; height: 7px; background: rgba(255,255,255,.08); }
.bar i.on { background: #fff; }
.bar.done { border-color: #fff; }
.dissolve { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); }
.pack.dissolving .dissolve { display: block; }
.pack.dissolving::after { display: none; }
.pack-wrap { will-change: transform, translate, scale; }
body[data-stage="tension"] { overflow: hidden; }

/* ---------- rare + legendary wear their colour from the flip onward ---------- */
body.themed { --ink2: var(--accent); }
body.themed[data-stage="reveal"], body.themed[data-stage="revealed"], body.themed[data-stage="rip"], body.themed[data-stage="cards"], body.themed[data-stage="again"] {
  background: radial-gradient(120% 90% at 50% 38%, var(--tint) 0%, #0b0b0d 55%, #060607 100%);
}
body[data-tier="rare"] { --tint: #15191f; --foil: linear-gradient(100deg, #9fb0c4 0%, #f4f8ff 28%, #b9c8da 46%, #ffffff 62%, #8e9eb2 100%); }
body[data-tier="legendary"] { --tint: #1d1810; --foil: linear-gradient(100deg, #9a7230 0%, #f7e1a6 26%, #c99a45 44%, #fff4cf 60%, #8d6626 100%); }
body.themed .h, body.themed .cards .h {
  color: transparent; background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  animation: foil 7s ease-in-out infinite;
}
@keyframes foil { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
body.themed .btn { border-color: var(--accent); color: var(--accent); }
body.themed .btn:hover { background: var(--accent); color: #000; }
body.themed .btn-solid { background: var(--accent); color: #000; border-color: var(--accent); }
body.themed .btn-solid:hover { background: transparent; color: var(--accent); }
body.themed .tiny, body.themed .kicker { color: var(--accent); opacity: .85; }
body.themed .face, body.themed .half { filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)) drop-shadow(0 0 28px var(--glow)); }
body.themed .card img { box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 1px var(--glow); }
body.themed .logo { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { body.themed .h { animation: none; } }

/* ---------- how to claim ---------- */
.guide { position: fixed; inset: 0; z-index: 85; background: rgba(3,3,4,.88); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; }
.guide[hidden] { display: none; }
.guide-box { width: min(400px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px 16px 18px; text-align: left;
  background: rgba(10,10,12,.96); border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
  box-shadow: inset 0 0 0 3px rgba(10,10,12,.96), inset 0 0 0 4px rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.7); animation: guide-in .22s cubic-bezier(.2,.8,.3,1); }
@keyframes guide-in { from { opacity: 0; transform: translateY(8px); } }
body.themed .guide-box { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.guide-k { margin: 0 0 10px; font-size: 10px; color: var(--accent); display: flex; justify-content: space-between; align-items: center; }
.guide-k .sq { margin-right: 6px; }
.guide-x { appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); width: 24px; height: 24px; border-radius: 3px; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; padding: 0; display: grid; place-items: center; }
.guide-x:hover { border-color: var(--ink); }
.guide-h { margin: 4px 0 8px; font-weight: 400; font-size: clamp(26px, 7vw, 34px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.guide-sub { margin: 0 0 14px; font-size: 10px; color: var(--mute); }
.guide-demo { position: relative; height: min(34dvh, 300px); display: grid; place-items: center; margin: 0 0 14px; overflow: hidden; border-radius: 3px;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent 80%); }
.guide-card { position: relative; height: calc(min(34dvh, 300px) * .86); width: auto; aspect-ratio: 700 / 978; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.guide-card img { width: 100%; height: 100%; display: block; border-radius: 3.5%; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.guide-demo.open .guide-card { transform: scale(1.08); }
.guide-card .hot { pointer-events: none; }
.guide-cur { position: absolute; width: 15px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); transform-origin: 0 0;
  transition: left .6s cubic-bezier(.45,0,.2,1), top .6s cubic-bezier(.45,0,.2,1), transform .12s; }
.guide-cur.press { transform: scale(.8); }
.guide-toast { position: absolute; left: 50%; top: 10px; z-index: 4; width: min(260px, 86%); transform: translate(-50%, -10px); opacity: 0; transition: opacity .25s, transform .25s;
  background: #0b0b0d; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 10px 12px 12px; display: flex; gap: 10px; align-items: center; overflow: hidden; text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.gt-ico { flex: none; width: 28px; height: 28px; border-radius: 3px; background: var(--orange); color: #000; display: grid; place-items: center; }
.gt-ico svg { width: 15px; height: 15px; }
.guide-toast.done .gt-ico svg path { d: path("M3.5 8.5 6.5 11.5 12.5 4.5"); }
.gt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gt-txt b { font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--ink); }
.gt-txt .mono { font-size: 9px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-toast i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange); }
.guide-toast.on { opacity: 1; transform: translate(-50%, 0); }
.guide-toast.on i { width: 100%; transition: width 1.6s linear .15s; }
.guide-toast.done i { opacity: 0; transition: opacity .3s; }
.guide-steps { list-style: none; margin: 0 0 16px; padding: 0; font-size: 10px; }
.guide-steps li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--mute); transition: color .2s; }
.guide-steps li:last-child { border-bottom: 1px solid var(--line); }
.guide-steps b { font-weight: 400; transition: color .2s; }
.guide-steps li.on { color: var(--ink); }
.guide-steps li.on b { color: var(--orange); }
.guide-f { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.guide-f .btn { width: 100%; }
.guide-f .linkish { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }

/* ---------- first opening: a slow moving blur over each card until it is tapped ---------- */
.card .veil { position: absolute; inset: 0; z-index: 3; border-radius: 3.5%; overflow: hidden; cursor: pointer; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: opacity .8s cubic-bezier(.2,.7,.2,1); }
.veil-img { position: absolute; inset: -18%; background: var(--vi) center / cover; filter: blur(16px) saturate(1.1) brightness(.85);
  animation: veil-drift 9s ease-in-out infinite alternate; animation-delay: var(--vd, 0s); will-change: transform; }
.veil-mist { position: absolute; inset: -30%; mix-blend-mode: soft-light; opacity: .8;
  background: radial-gradient(40% 30% at 30% 35%, rgba(255,255,255,.55), transparent 70%), radial-gradient(35% 28% at 72% 68%, rgba(255,255,255,.4), transparent 70%);
  animation: veil-mist 13s ease-in-out infinite alternate; animation-delay: var(--vd, 0s); will-change: transform; }
@keyframes veil-drift { 0% { transform: translate(-4%, -3%) scale(1.04); } 50% { transform: translate(3%, 2%) scale(1.1); } 100% { transform: translate(-2%, 4%) scale(1.06); } }
@keyframes veil-mist { 0% { transform: translate(-8%, 4%) rotate(0deg); } 100% { transform: translate(8%, -6%) rotate(12deg); } }
.veil-k { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: rgba(255,255,255,.85); padding: 7px 10px 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; background: rgba(0,0,0,.25); transition: background .2s, border-color .2s; }
.card.veiled:hover .veil-k { background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.8); }
.card.veiled .hot, .card.veiled .sheen { pointer-events: none; visibility: hidden; }
.card.unveil .veil { opacity: 0; pointer-events: none; }
.card.unveil .veil-img { filter: blur(0) saturate(1) brightness(1); transform: none; transition: filter .8s cubic-bezier(.2,.7,.2,1), transform .8s; animation: none; }
.card.unveil .veil-k { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .veil-img, .veil-mist { animation: none; } }

/* ---------- Claim pressed: the badge lights and a band of light runs across it while the file starts ---------- */
.hot::after { content: ""; position: absolute; inset: 14% 8%; border-radius: 40%; pointer-events: none; opacity: 0; mix-blend-mode: overlay;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.95) 45%, rgba(255,255,255,.95) 55%, transparent 80%) no-repeat;
  background-size: 45% 100%; background-position: -60% 0; }
.hot.claiming::before { animation: claim-pulse .7s ease-in-out 3; opacity: 1; }
.hot.claiming::after { opacity: 1; animation: claim-sweep .7s cubic-bezier(.4,0,.2,1) 3; }
@keyframes claim-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes claim-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hot.claiming { transform: scale(.97); transition: transform .12s; }
@media (prefers-reduced-motion: reduce) { .hot.claiming::after { animation: none; opacity: 0; } .hot.claiming::before { animation: none; opacity: 1; } }

/* return visit: the opening scene stays hidden while the page checks the link */
.returning #s1, .returning .terms { visibility: hidden; }

/* ---------- press link: welcome note + a tab to reopen it ---------- */
.press-lede { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.press-lede b { font-weight: 500; }
.press-p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.press .guide-steps li { color: var(--ink); }
.press-note { margin: 0 0 16px; font-size: 10px; line-height: 1.6; color: var(--mute); }
.press-mail { margin: 0; font-size: 10px; color: var(--mute); }
.press-tab { position: fixed; top: 22px; left: 18px; z-index: 21; appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); padding: 9px 12px; border-radius: 5px; font-size: 10px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.press-tab[hidden] { display: none; }
.press-tab:hover { border-color: var(--ink); }
@media (max-width: 560px) { .press-tab { top: 16px; left: 14px; padding: 8px 10px; } }

/* ---------- the seal: password gate for sealed links ---------- */
.gate { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 40%, rgba(40,32,22,.55), rgba(3,3,4,.96) 70%); }
.gate[hidden] { display: none; }
.gate-box { position: relative; width: min(380px, 100%); text-align: center; padding: 34px 22px 22px;
  background: rgba(10,10,12,.94); border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
  box-shadow: inset 0 0 0 3px rgba(10,10,12,.94), inset 0 0 0 4px rgba(214,184,128,.16), 0 30px 80px rgba(0,0,0,.7); }
.gate-seal { width: 76px; height: 76px; display: block; margin: 0 auto 16px; opacity: .55; animation: gate-turn 60s linear infinite; }
@keyframes gate-turn { to { transform: rotate(360deg); } }
.gate.open .gate-seal { animation: gate-break .6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes gate-break { to { transform: scale(1.35) rotate(40deg); opacity: 0; } }
.gate.open .gate-box { transition: opacity .5s .15s, transform .5s .15s; opacity: 0; transform: translateY(-8px); }
.gate-k { margin: 0 0 10px; font-size: 10px; color: #c9ab78; display: flex; gap: 8px; justify-content: center; align-items: center; }
.gate-h { margin: 0 0 10px; font-weight: 400; font-size: clamp(26px, 7vw, 32px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.gate-p { margin: 0 auto 22px; max-width: 30ch; font-size: 13px; line-height: 1.5; color: var(--mute); }
.gate-slots { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 22px; }
.gate-slot { width: 52px; height: 62px; text-align: center; font-size: 24px; color: var(--ink); caret-color: #c9ab78;
  background: rgba(0,0,0,.5); border: 1px solid rgba(214,184,128,.35); border-radius: 3px; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); outline: none; transition: border-color .2s, box-shadow .2s; }
.gate-slot:focus { border-color: #d6b880; box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 0 3px rgba(214,184,128,.15); }
.gate-dot { color: rgba(214,184,128,.5); font-size: 18px; }
.gate-box .btn { width: 100%; }
.gate-msg { min-height: 1.4em; margin: 14px 0 0; font-size: 10px; color: #c9ab78; }
@media (prefers-reduced-motion: reduce) { .gate-seal { animation: none; } }

/* Jess 12 Oct · link underlines: one underline, a little lower; Blood Orange on hover */
a.linkish { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
a.linkish:hover { color: #FF3E00; border-color: #FF3E00; }
/* Jess 12 Oct · phones: footer links stacked, centred, no dot, easy to tap */
@media (max-width: 560px) {
  .cards-foot span[aria-hidden] { display: none; }
  .cards-foot .linkish { display: table; margin: 0 auto 22px; padding-top: 4px; }
  #s1 .h { font-size: min(8.2vw, 34px); }
}