/* Holoroll — the site's look: the app's "holographic night" (Holoroll/UI/Design.swift).
 * Every page uses this file. Season 1 "Afterglow": night hue 0.72 (violet), accent 0.70.
 * No webfonts, no CDNs: SF Pro Rounded on Apple devices, the system face elsewhere. */

:root {
  color-scheme: dark;
  --bg: #0d0920;
  --fg: #f3f0ff;
  --dim: #a89fc9;
  --faint: #6f6795;
  --accent: #c9b8ff;
  --glass: rgba(255, 255, 255, .065);
  --glass-hi: rgba(255, 255, 255, .11);
  --line: rgba(255, 255, 255, .11);
  --paper: #f9f7f4;
  --ink: #1c1c21;
  --r-common: #999999;
  --r-uncommon: #26a094;
  --r-rare: #5c6bf2;
  --r-chase: #eba82e;
  --gold: #f7c252;
  --holo: #ff73b3, #ffb866, #f2f280, #73f2bf, #66ccff, #ad8cff, #ff73b3;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --tx: 0;
  --ty: 0;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: transparent; color: var(--fg); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.narrow { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lbl { font: 700 11px/1.3 var(--sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* ---------- The night: a slowly drifting mesh of violet with film grain (HoloBackground) ---------- */
.night { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.night i { position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 28s ease-in-out infinite alternate; }
.night i:nth-child(1) { width: 70vmax; height: 70vmax; left: -20vmax; top: -30vmax; background: hsl(252 80% 20%); }
.night i:nth-child(2) { width: 55vmax; height: 55vmax; right: -18vmax; top: 5vmax; background: hsl(262 85% 32%); animation-duration: 33s; animation-delay: -9s; }
.night i:nth-child(3) { width: 50vmax; height: 50vmax; left: 18vmax; bottom: -30vmax; background: hsl(280 80% 22%); animation-duration: 39s; animation-delay: -17s; }
.night i:nth-child(4) { width: 34vmax; height: 34vmax; left: 40vmax; top: 30vh; background: hsl(268 90% 30%); opacity: .55; animation-duration: 45s; animation-delay: -4s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7vmax, 4vmax) scale(1.08); }
  100% { transform: translate(-5vmax, 8vmax) scale(.94); }
}
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Logo: two stacked cards (LogoMark) + "holoroll" in rounded black (Wordmark) ---------- */
.mark { --s: 28px; --line-c: rgba(255, 255, 255, .6); position: relative; width: var(--s); height: var(--s); flex: none; display: inline-block; }
.mark::before, .mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; height: 84%; border-radius: calc(var(--s) * .16); }
.mark::before { border: max(1.2px, calc(var(--s) * .07)) solid var(--line-c); transform: translate(-50%, -50%) translate(calc(var(--s) * -.14), calc(var(--s) * .02)) rotate(-12deg); }
.mark::after { background: linear-gradient(135deg, var(--holo)) calc(50% + var(--tx) * 60%) calc(50% + var(--ty) * 60%) / 220% 220%; transform: translate(-50%, -50%) translateX(calc(var(--s) * .13)) rotate(9deg); box-shadow: 0 calc(var(--s) * .03) calc(var(--s) * .08) rgba(0, 0, 0, .35); }
.wm { --fs: 24px; display: inline-flex; align-items: center; gap: calc(var(--fs) * .24); text-decoration: none; color: inherit; }
.wm .mark { --s: calc(var(--fs) * 1.25); }
.wm-t { font: 900 var(--fs)/1 var(--round); letter-spacing: -.03em; padding-bottom: .06em;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 190, 235, .9) 44%, rgba(170, 230, 255, .9) 54%, transparent 68%) calc(50% + var(--tx) * 90%) 0 / 300% 100%, linear-gradient(#fff, #d1d1d6);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 30; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); }
.nav.solid { background: rgba(13, 9, 32, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 500; }
.nav-links a { color: var(--dim); text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav .holo-btn { font-size: 14px; padding: 10px 18px; }

/* ---------- Buttons ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.holo-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; color: #fff; font: 700 17px/1 var(--round); background: rgba(22, 15, 44, .8); text-decoration: none; isolation: isolate; border: 0; cursor: pointer; white-space: nowrap; transition: transform .2s ease; }
.holo-btn:active { transform: scale(.96); }
.holo-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; background: conic-gradient(from var(--ang), var(--holo)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; z-index: -1; }
.holo-btn::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; background: conic-gradient(from var(--ang), var(--holo)); filter: blur(18px); opacity: .26; z-index: -2; animation: spin 6s linear infinite; }
.holo-btn svg { width: 18px; height: 18px; fill: currentColor; margin-top: -2px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--fg); }
.chip svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
button.chip { cursor: pointer; font-family: inherit; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---------- A card: the photo on a thin paper frame with a caption strip (CardFace) ---------- */
.hc { --w: 220px; position: relative; width: var(--w); aspect-ratio: .72; flex: none; background: var(--paper); border-radius: calc(var(--w) * .06); padding: calc(var(--w) * .04) calc(var(--w) * .04) 0; display: flex; flex-direction: column; container-type: inline-size; isolation: isolate; overflow: hidden; color: var(--ink); margin: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 calc(var(--w) * .05) calc(var(--w) * .12) rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25); }
.tilt { transform: perspective(900px) rotateY(calc(var(--tx) * 11deg)) rotateX(calc(var(--ty) * -8deg)); }
.hc-ph { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 3.5cqw; background: #2a2440; }
.hc-cap { height: 20.8cqw; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 0 1.6cqw; }
.hc-tt { display: flex; flex-direction: column; gap: .8cqw; min-width: 0; }
.hc-tt b { font: 600 6.2cqw/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.hc-tt span { font: 400 4.2cqw/1.1 var(--sans); color: rgba(28, 28, 33, .55); white-space: nowrap; }
.hc-mt { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2cqw; flex: none; }
.hc-mt i { font-style: normal; font-size: 4.6cqw; line-height: 1; font-weight: 700; }
.hc-n { display: flex; align-items: center; gap: 1.4cqw; font: 500 3.6cqw/1 var(--mono); color: rgba(28, 28, 33, .5); }
.hc-n svg { width: 4.4cqw; height: 3cqw; color: #b58ce0; }
.r-common { color: var(--r-common); } .r-uncommon { color: var(--r-uncommon); } .r-rare { color: var(--r-rare); } .r-chase { color: var(--r-chase); }
/* Foil: Plain → Gloss (glare) → Holo (a rainbow band that follows the tilt) → Prism (banding + sparkles) */
.hc-foil, .hc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.hc-foil { opacity: 0; mix-blend-mode: color-dodge; }
.hc-glare { opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(farthest-corner circle at calc(50% + var(--tx) * 70%) calc(35% + var(--ty) * 70%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 52%); transition: opacity .4s; }
.f-gloss .hc-glare, .f-holo .hc-glare, .f-prism .hc-glare { opacity: 1; }
.f-holo .hc-foil { opacity: .6; mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 0 22%, #ff73b3 32%, #ffb866 39%, #f2f280 45%, #73f2bf 51%, #66ccff 58%, #ad8cff 65%, transparent 76%) calc(50% + var(--tx) * 60%) calc(50% + var(--ty) * 60%) / 260% 260%; }
.f-prism .hc-foil { opacity: .5; mix-blend-mode: overlay; background: repeating-linear-gradient(115deg, #ff73b3 0, #ffb866 7%, #f2f280 14%, #73f2bf 21%, #66ccff 28%, #ad8cff 35%, #ff73b3 42%) calc(50% + var(--tx) * 40%) calc(50% + var(--ty) * 40%) / 220% 220%; }
.f-prism .hc-foil::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: calc(.35 + var(--tx) * .3);
  background: radial-gradient(circle at 30% 40%, #fff 0 .8px, transparent 1.6px) calc(var(--tx) * 8px) 0 / 13px 17px, radial-gradient(circle at 70% 20%, #fff 0 .6px, transparent 1.3px) 0 calc(var(--ty) * 8px) / 19px 11px; }

/* The back of a card in a pack (CardBack) */
.cb { --w: 220px; position: relative; width: var(--w); aspect-ratio: .72; border-radius: calc(var(--w) * .06); background: radial-gradient(120% 90% at 30% 10%, #2b2360, #120e2a 70%); container-type: inline-size; overflow: hidden; display: grid; place-items: center; box-shadow: 0 calc(var(--w) * .05) calc(var(--w) * .12) rgba(0, 0, 0, .35); }
.cb::before, .cb::after { content: ""; position: absolute; border-radius: 5cqw; border: 1px solid rgba(255, 255, 255, .14); }
.cb::before { inset: 6cqw; } .cb::after { inset: 13cqw; border-color: rgba(255, 255, 255, .09); }
.cb .mark { --s: 26cqw; }

/* The card back you get by tapping a card (CardStatsBack) */
.sb { --w: 280px; width: var(--w); aspect-ratio: .72; border-radius: calc(var(--w) * .06); background: var(--paper); color: var(--ink); container-type: inline-size; padding: 5cqw; display: flex; flex-direction: column; gap: 4cqw; text-align: left; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.sb canvas { width: 100%; aspect-ratio: 1.5; border-radius: 3.5cqw; display: block; background: #efe9dc; }
.sb h4 { margin: 0; font: 700 6.2cqw/1.15 var(--sans); }
.sb dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2.4cqw 4cqw; font-size: 4.6cqw; }
.sb dt { color: rgba(28, 28, 33, .55); }
.sb dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sb .sbf { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font: 800 3.6cqw/1 var(--sans); letter-spacing: .14em; color: rgba(28, 28, 33, .5); }
.sb .mark { --s: 7cqw; --line-c: rgba(28, 28, 33, .45); }

/* ---------- A sealed pack: crimped foil edges, title and logo in foil (PackArt) ---------- */
.hp { --w: 180px; --h: 262; position: relative; width: var(--w); aspect-ratio: 1 / 1.6; flex: none; container-type: inline-size; clip-path: var(--crimp, none); color: #fff; isolation: isolate; overflow: hidden; }
.hp.s2 { clip-path: var(--wave, none); }
.hp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.85); }
.hp-tint { position: absolute; inset: 0; background: linear-gradient(180deg, hsla(var(--h), 70%, 22%, .78), hsla(var(--h), 60%, 40%, .25) 45%, hsla(calc(var(--h) + 20), 70%, 12%, .85)); }
.hp-crimp { position: absolute; left: 0; right: 0; height: 12px; background: linear-gradient(90deg, var(--holo)) calc(50% + var(--tx) * 80%) 0 / 300% 100%; opacity: .9; }
.hp.s2 .hp-crimp { background: linear-gradient(90deg, #66f2f2, #8cb3ff, #b88cff, #59d9e6, #66f2f2) calc(50% + var(--tx) * 80%) 0 / 300% 100%; }
.hp-crimp.top { top: 0; } .hp-crimp.bot { bottom: 0; }
.hp-txt { position: absolute; left: 8cqw; right: 8cqw; top: 13cqw; text-align: center; display: flex; flex-direction: column; gap: 2cqw; align-items: center; }
.hp-k { font: 700 4.5cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.hp-t, .foiltext { background: linear-gradient(110deg, #fff 0 30%, #ffc9e6 40%, #fff3b0 47%, #b6ffe3 54%, #bfe6ff 61%, #fff 72%) calc(50% + var(--tx) * 90%) 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-t { font: 800 12cqw/1.02 var(--sans); letter-spacing: -.02em; text-wrap: balance; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.hp-foot { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; display: flex; flex-direction: column; gap: 3cqw; }
.hp-sub { font: 800 4cqw/1.2 var(--sans); opacity: .78; text-align: center; }
.hp-row { display: flex; align-items: center; gap: 2cqw; }
.hp-row .mark { --s: 10cqw; }
.hp-row b { font: 900 5.5cqw/1 var(--round); flex: 1; }
.hp-s { display: flex; align-items: center; gap: 1.5cqw; font: 800 4cqw/1 var(--sans); letter-spacing: .08em; }
.hp-s svg { width: 5cqw; height: 3.2cqw; }
.hp-5 { font: 800 3.4cqw/1 var(--sans); letter-spacing: .14em; opacity: .7; text-align: right; }
.hp-sheen { position: absolute; inset: 0; mix-blend-mode: soft-light; background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .75) 45%, transparent 60%) calc(50% + var(--tx) * 90%) 0 / 260% 100%; pointer-events: none; }
.hp-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hp-year { font: 900 42cqw/.82 var(--round); letter-spacing: -.04em; text-align: center; color: rgba(255, 255, 255, .2); margin-top: 18cqw; }
.hp-cal { width: 46cqw; aspect-ratio: .86; background: #fff; border-radius: 5cqw; overflow: hidden; display: flex; flex-direction: column; margin-top: 22cqw; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, .4); transform: rotate(-6deg); }
.hp-cal i { font: 800 5cqw/1 var(--sans); letter-spacing: .15em; font-style: normal; background: #e5484d; color: #fff; text-align: center; padding: 2.5cqw 0; }
.hp-cal b { flex: 1; display: grid; place-items: center; color: #1c1c21; font: 900 26cqw/1 var(--round); }
.hp-hearts span { position: absolute; color: #ff6fa8; opacity: .85; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); line-height: 1; }
.hp-map svg { width: 80cqw; margin-top: 22cqw; }

/* ---------- Home: hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-block: 48px 110px; }
.hero h1 { font: 900 clamp(46px, 7.4vw, 100px)/.95 var(--round); letter-spacing: -.035em; margin: 18px 0 22px; text-wrap: balance; }
.hero h1 em, .shine { font-style: normal; background: linear-gradient(100deg, var(--holo)) calc(50% + var(--tx) * 60%) 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--dim); max-width: 34em; margin: 0 0 32px; }
.cta { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }
.cta small { color: var(--dim); font-size: 13.5px; }
.fan { position: relative; height: clamp(330px, 38vw, 480px); }
.fan .slot { position: absolute; left: 50%; bottom: 6%; transform-origin: 50% 120%; transform: translateX(-50%) rotate(var(--r)) translateY(var(--y)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fan .hc { --w: clamp(150px, 17vw, 230px); }
.fan:hover .slot { transform: translateX(-50%) rotate(calc(var(--r) * 1.35)) translateY(calc(var(--y) - 10px)); }
.tilt-ask { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); z-index: 10; white-space: nowrap; background: rgba(22, 15, 44, .88); }

/* ---------- Home: sections ---------- */
.sec { padding-block: 100px; scroll-margin-top: 70px; }
.sec h2 { font: 900 clamp(34px, 4.6vw, 60px)/1 var(--round); letter-spacing: -.03em; margin: 12px 0 16px; text-wrap: balance; }
.sec .lead { font-size: 18px; line-height: 1.55; color: var(--dim); max-width: 38em; margin: 0; }
.split { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.split.rev { grid-template-columns: 1fr auto; }
.split h2 { font-size: clamp(32px, 3.8vw, 50px); }

/* Opening a pack */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.step { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.step .art { height: 250px; display: grid; place-items: center; position: relative; }
.step h3 { margin: 0; font: 800 21px/1.15 var(--round); }
.step h3 span { font: 600 13px var(--mono); color: var(--faint); margin-right: 8px; }
.step p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.5; }
.step .hp { --w: 138px; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.torn { position: relative; width: 138px; height: 221px; }
.torn .hp { position: absolute; inset: 0; animation: none; }
.torn .t1, .torn .t2 { position: absolute; inset: 0; }
.torn .t1 { clip-path: inset(0 0 85.5% 0); transform: translate(16px, -30px) rotate(-12deg); }
.torn .t2 { clip-path: inset(14.5% 0 0 0); }
.torn .peek { position: absolute; left: 50%; top: 14px; z-index: -1; transform: translateX(-50%) rotate(-3deg); }
.torn .peek .cb { --w: 112px; }
.mini-fan { position: relative; width: 100%; height: 100%; }
.mini-fan .hc, .mini-fan .cb { --w: 96px; position: absolute; left: 50%; top: 50%; transform-origin: 50% 130%; transform: translate(-50%, -50%) rotate(var(--r)) translateY(var(--y)); }
.timer { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding: 16px 20px; width: fit-content; }
.timer svg { width: 56px; height: 56px; transform: rotate(-90deg); flex: none; }
.timer small { display: block; color: var(--dim); font: 700 11px var(--sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.timer code { font: 600 22px var(--mono); font-variant-numeric: tabular-nums; }
.timer p { margin: 0; color: var(--dim); font-size: 14px; max-width: 24em; }

/* Sets shelf */
.shelf { margin-top: 56px; display: flex; gap: clamp(14px, 2.4vw, 30px); align-items: flex-end; overflow-x: auto; padding: 30px 4px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.shelf::-webkit-scrollbar { display: none; }
.shelf .hp { --w: clamp(132px, 14vw, 178px); animation: bob 5s ease-in-out infinite; scroll-snap-align: center; }
.shelf .hp:nth-child(2n) { animation-delay: -2.5s; }
.ledge { height: 18px; margin-top: 10px; border-radius: 50%; background: radial-gradient(50% 100% at 50% 0, rgba(190, 160, 255, .55), transparent 70%); filter: blur(4px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.fact { padding: 20px 22px; }
.fact b { display: block; font: 800 17px var(--round); margin-bottom: 4px; }
.fact span { color: var(--dim); font-size: 14.5px; line-height: 1.5; }

/* Foil */
.foil-stage { display: grid; place-items: center; padding: 30px; }
.foil-stage .hc { --w: clamp(230px, 26vw, 320px); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); margin: 28px 0 22px; max-width: 100%; overflow-x: auto; }
.seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font: 700 14px var(--round); color: var(--dim); cursor: pointer; }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; }
.ladder div { padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; color: var(--dim); line-height: 1.35; }
.ladder b { display: block; color: #fff; font: 800 15px var(--round); margin-bottom: 3px; }
.rarity { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 24px; font-size: 14px; color: var(--dim); }
.rarity span { display: inline-flex; gap: 6px; align-items: center; }

/* Card back */
.flipper { --w: clamp(240px, 26vw, 300px); width: var(--w); aspect-ratio: .72; perspective: 1200px; cursor: pointer; border: 0; padding: 0; background: none; display: block; color: inherit; font: inherit; }
.flipper .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.flipper.on .in { transform: rotateY(180deg); }
.flipper .hc, .flipper .sb { --w: inherit; width: 100%; position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipper .sb { transform: rotateY(180deg); }
.flip-hint { font-size: 13px; color: var(--dim); margin-top: 14px; text-align: center; }

/* Atlas */
.atlas { padding: 14px; }
.atlas canvas { width: 100%; aspect-ratio: 1.6; display: block; border-radius: 14px; }

/* Seasons */
.seasons { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 16px; margin-top: 50px; }
.season { border-radius: 26px; padding: 26px; min-height: 340px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); }
.season.s1 { background: radial-gradient(120% 90% at 20% 0%, rgba(110, 60, 200, .7), rgba(29, 15, 60, .6) 70%); }
.season.s2 { background: radial-gradient(120% 90% at 20% 0%, rgba(18, 122, 134, .75), rgba(7, 37, 48, .65) 70%); }
.season.s3 { background: var(--glass); border-style: dashed; border-color: rgba(255, 255, 255, .2); }
.season .lbl { color: rgba(255, 255, 255, .72); }
.season h3 { margin: 0; font: 900 40px/1 var(--round); letter-spacing: -.03em; }
.season p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.5; max-width: 19em; }
.season .hp { --w: 120px; position: absolute; right: 22px; bottom: -40px; transform: rotate(8deg); }
.stamps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* More (tiles) */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 50px; }
.tile { grid-column: span 2; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; position: relative; }
.tile.w3 { grid-column: span 3; }
.tile h3 { margin: 0; font: 800 20px/1.15 var(--round); }
.tile p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.5; }
.tile .art { margin-top: auto; padding-top: 10px; }
.filechip { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.filechip .hc { --w: 54px; border-radius: 5px; padding: 2px 2px 0; box-shadow: none; }
.filechip .hc .hc-cap { height: 6px; }
.filechip .hc .hc-cap * { display: none; }
.filechip b { display: block; font: 700 14px var(--sans); }
.filechip span { font: 400 12.5px var(--sans); color: var(--dim); }
.together { position: relative; height: 150px; }
.together .hc { position: absolute; --w: 104px; }
.together .hc:nth-child(1) { left: 6%; top: 8px; transform: rotate(-8deg); }
.together .hc:nth-child(2) { left: 36%; top: 0; transform: rotate(6deg); }
.never { display: flex; gap: 14px; align-items: center; }
.never .hc { --w: 92px; }
.never .hc .hc-ph { filter: blur(7px) saturate(.6); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.widgets { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.widget { width: 120px; height: 120px; border-radius: 26px; background: #1f1340; padding: 10px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.widget img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 14px; }
.widget small { font: 700 10px var(--sans); color: #fff; margin-top: 6px; letter-spacing: .04em; }
.lockw { padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .12); font: 700 12px var(--sans); display: flex; gap: 8px; align-items: center; }
.lockw .mark { --s: 16px; }
.clip { width: 74px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.clip img { width: 100%; height: 100%; object-fit: cover; }
.clip span { position: absolute; left: 6px; bottom: 6px; font: 700 10px var(--sans); background: rgba(0, 0, 0, .55); padding: 3px 6px; border-radius: 6px; }
.big { font: 900 54px/1 var(--round); letter-spacing: -.04em; }
.big small { font-size: 18px; letter-spacing: 0; color: var(--dim); font-weight: 700; }
.dust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dust div { text-align: center; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--dim); }
.dust b { display: block; font: 800 18px var(--round); color: #fff; }

/* Privacy */
.rows { display: flex; flex-direction: column; }
.rows > div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line); }
.rows > div:first-child { border-top: 0; }
.rows svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.rows b { display: block; font: 700 16px var(--round); margin-bottom: 3px; }
.rows span { color: var(--dim); font-size: 14.5px; line-height: 1.45; }
.rows p { margin: 0; }
.more-link { display: inline-flex; gap: 6px; margin-top: 26px; color: var(--accent); font-weight: 600; text-decoration: none; }
.more-link:hover { text-decoration: underline; }

/* Price + download */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; text-align: left; }
.price { padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.price h3 { margin: 0; font: 800 20px var(--round); }
.price .amt { font: 900 38px/1.05 var(--round); letter-spacing: -.03em; }
.price .amt small { font: 600 14px var(--sans); color: var(--dim); letter-spacing: 0; }
.price ul { margin: 6px 0 0; padding-left: 18px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.price.hi { background: linear-gradient(rgba(30, 20, 60, .85), rgba(30, 20, 60, .85)) padding-box, linear-gradient(135deg, var(--holo)) border-box; border: 1.5px solid transparent; }
.download { text-align: center; padding-block: 120px 70px; }
.download .appicon { width: 112px; height: 112px; border-radius: 25px; margin: 0 auto; box-shadow: 0 20px 60px rgba(120, 80, 255, .45); }
.download h2 { font: 900 clamp(40px, 6vw, 76px)/1 var(--round); letter-spacing: -.035em; margin: 26px 0 14px; }
.download > .wrap > p { color: var(--dim); font-size: 18px; margin: 0 auto 32px; max-width: 30em; line-height: 1.5; }
.download small.req { display: block; color: var(--faint); margin-top: 18px; font-size: 13px; }

/* ---------- Footer ---------- */
.foot { padding-block: 36px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* ---------- Text pages: privacy, support, what's new ---------- */
.page-head { padding-block: 60px 30px; }
.page-head h1 { font: 900 clamp(40px, 6vw, 68px)/1 var(--round); letter-spacing: -.035em; margin: 14px 0 16px; text-wrap: balance; }
.page-head p { color: var(--dim); font-size: 18px; line-height: 1.55; margin: 0; max-width: 36em; }
.prose { padding-bottom: 80px; font-size: 16.5px; line-height: 1.65; }
.prose h2 { font: 800 26px/1.2 var(--round); letter-spacing: -.015em; margin: 52px 0 12px; scroll-margin-top: 80px; }
.prose h3 { font: 700 18px/1.3 var(--round); margin: 28px 0 8px; }
.prose p, .prose li { color: #d6d0ec; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose code { font: 500 .9em var(--mono); background: var(--glass-hi); padding: 1px 6px; border-radius: 6px; }
.prose .path { font-weight: 600; color: var(--fg); white-space: nowrap; }
.summary { padding: 8px 24px; margin-bottom: 10px; }
.summary ul { list-style: none; padding: 0; margin: 0; }
.summary li { padding: 14px 0 14px 30px; border-top: 1px solid var(--line); position: relative; margin: 0; }
.summary li:first-child { border-top: 0; }
.summary li::before { content: ""; position: absolute; left: 0; top: 19px; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--holo)); transform: rotate(9deg); }
.callout { padding: 18px 22px; margin: 18px 0 22px; }
.callout p:last-child { margin: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.toc a { text-decoration: none; }

/* Support: questions */
.faq-group { margin-top: 44px; }
.faq-group > h2 { margin-bottom: 14px; }
.faq { border-radius: 18px; background: var(--glass); border: 1px solid var(--line); margin-bottom: 10px; scroll-margin-top: 80px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font: 700 17px/1.35 var(--round); position: relative; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; }
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .ans { padding: 0 22px 8px; }
.search { width: 100%; max-width: 520px; margin-top: 26px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font: 16px var(--sans); }
.search::placeholder { color: var(--faint); }
.contact { padding: 26px; margin-top: 50px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.contact h2 { margin: 0 0 4px !important; font-size: 22px !important; }
.contact p { margin: 0 !important; }

/* What's new */
.releases { list-style: none; padding: 0; margin: 0 0 80px; display: flex; flex-direction: column; gap: 18px; }
.rel-card { padding: 28px; }
.rel-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rel-ver { font: 900 30px/1 var(--round); letter-spacing: -.02em; }
.rel-ver.shine { padding-bottom: 2px; }
.rel-date { color: var(--dim); font-size: 14px; }
.rel-card h3 { font: 800 22px/1.2 var(--round); margin: 12px 0 6px; }
.rel-sum { color: var(--dim); margin: 0 0 8px; }
.ch-group { margin-top: 18px; }
.ch-kind { display: inline-block; font: 700 11px var(--sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--glass-hi); color: var(--accent); }
.ch-group[data-kind="better"] .ch-kind { color: #73f2bf; }
.ch-group[data-kind="fixed"] .ch-kind { color: #ffb866; }
.ch-group ul { margin: 10px 0 0; padding-left: 20px; }
.ch-group li { color: #d6d0ec; margin-bottom: 8px; line-height: 1.55; }
.ch-group li::marker { color: var(--faint); }
.ch-empty { color: var(--dim); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .hero, .split, .split.rev { grid-template-columns: 1fr; }
  .fan { order: -1; height: 340px; margin: 10px 0 40px; }
  .hero { padding-top: 10px; }
  .nav-links a:not(.holo-btn) { display: none; }
  .steps, .facts, .prices { grid-template-columns: 1fr; }
  .step .art { height: 230px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile, .tile.w3 { grid-column: span 2; }
  .seasons { grid-template-columns: 1fr; }
  .season { min-height: 280px; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .foil-stage { padding: 10px 0 0; }
  .flipper { margin: 0 auto; }
  .sec { padding-block: 80px; }
}
@media (max-width: 520px) {
  .fan { height: 300px; }
  .fan .hc { --w: 150px; }
  .sec h2 { font-size: 34px; }
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile.w3 { grid-column: auto; }
  .rel-card, .contact { padding: 22px; }
  .page-head { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}