@import url("astra-chrome.css");
@import url("collector-callout.css");

/* ASTRA BLACK collector demo shell (web/play.html).
   Motion and layout: docs/demo-motion-spec.md. Anime meets fighting game:
   Persona-style skewed panels and huge condensed type, one accent per screen
   (the collector's colour says who, the rarity colour says what), glows that
   always fade to zero alpha, hard edges only on graphic panels and tapes.

   Stacking: #stage, .scr and .col have no z-index of their own, so a screen's
   full-bleed backdrop (.bleed, z10) sits under the #fx-back focus lines (z20)
   and its column content (.col, z30) sits above them. */

@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; }
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded.ttf") format("truetype"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora.ttf") format("truetype"); font-weight: 100 800; font-display: block; }

:root {
  --ink: #07080b;
  --ink2: #0e1017;
  --paper: #f4f6fb;
  --dim: rgba(244, 246, 251, .62);
  --mp: #ff5bd8;
  --gold: #ffc94a;
  --prism: linear-gradient(100deg, #ff4fd8, #ffd35a 30%, #5cf2ff 55%, #b877ff 80%, #ff4fd8);
  --display: "Archivo", "Unbounded", system-ui, sans-serif;
  --round: "Unbounded", "Sora", system-ui, sans-serif;
  --body: "Sora", system-ui, sans-serif;
  --snap: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --whip: cubic-bezier(.7, 0, .84, 0);
  --glide: cubic-bezier(.65, 0, .35, 1);
  --s: 1;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper);
  font-family: var(--body); overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
img { -webkit-user-drag: none; }

/* ---- layers ---- */
#rip { position: fixed; inset: 0; z-index: 10; visibility: hidden; background: var(--ink); }
#rip.on { visibility: visible; }
#rip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--ink); }
#shake { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#fx-back, #fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
#fx-back { z-index: 20; }
#stage { position: absolute; inset: 0; }
#fx { z-index: 45; }
#overlay { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
#ui { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }

.scr { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; }
.bleed { position: absolute; inset: 0; z-index: 10; pointer-events: inherit; }
.col {
  position: absolute; left: 50%; top: 50%; width: 430px; height: 932px; margin: -466px 0 0 -215px;
  transform: scale(var(--s)); transform-origin: 50% 50%; z-index: 30; pointer-events: none;
}
.col button, .col [role="button"] { pointer-events: auto; }
.smear-ghost { pointer-events: none !important; }

/* ---- boot ---- */

/* ---- global chrome ---- */
.chrome { z-index: 60; }
.mute {
  position: absolute; right: 14px; top: calc(14px + var(--safe-t)); width: 44px; height: 44px; pointer-events: auto;
  display: grid; place-items: center; background: rgba(7,8,11,.55); border: 1px solid rgba(255,255,255,.18);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); transition: opacity .2s;
}
.mute.hidden { opacity: 0; pointer-events: none; }
.mute-ico { grid-area: 1 / 1; width: 22px; height: 22px; display: block; fill: var(--paper); }
.mute-ico.off, .mute.muted .mute-ico.on { display: none; }
.mute.muted .mute-ico.off { display: block; fill: #ff5b6b; opacity: .9; }
.toast {
  position: absolute; left: 50%; top: calc(72px + var(--safe-t)); transform: translate(-50%, -10px) skewX(-10deg); padding: 10px 18px;
  background: var(--paper); color: var(--ink); font: 900 14px/1 var(--display); font-stretch: 80%; letter-spacing: .14em;
  opacity: 0; transition: opacity .2s, transform .25s var(--snap); white-space: nowrap; box-shadow: 5px 5px 0 #000;
}
.toast.on { opacity: 1; transform: translate(-50%, 0) skewX(-10deg); }

/* ---- shared controls ---- */
.cta {
  position: absolute; left: 24px; right: 24px; height: 64px; display: grid; place-items: center; overflow: hidden;
  background: var(--accent, var(--paper)); color: var(--ink); transform: skewX(-10deg);
  box-shadow: 6px 6px 0 #000, 0 0 0 2px #000; font: 900 26px/1 var(--display); font-stretch: 75%; letter-spacing: .12em;
}
.cta > span { transform: skewX(10deg); display: block; padding-left: .12em; }
.cta:active { filter: brightness(1.12); }
.cta-sheen { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: cta-sheen 2.4s var(--glide) infinite 1s; pointer-events: none; }
@keyframes cta-sheen { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.pill-btn {
  position: relative; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
  background: rgba(7,8,11,.78); border: 2px solid rgba(244,246,251,.85); color: var(--paper);
  font: 900 16px/1 var(--display); font-stretch: 80%; letter-spacing: .14em; transform: skewX(-10deg); box-shadow: 4px 4px 0 #000;
}
.pill-btn > * { transform: skewX(10deg); }
.pill-btn .badge { position: absolute; right: -8px; top: -10px; min-width: 22px; height: 22px; padding: 0 6px; background: #ff3b4a; color: #fff; font: 800 11px/22px var(--body); font-style: normal; letter-spacing: .04em; border: 2px solid #000; display: none; transform: skewX(10deg) rotate(8deg); }
.pill-btn.has-new .badge { display: block; }
.pill-btn.hub-work .badge { background: #7ce5cc; color: #092128; white-space: nowrap; right: -6px; }
.pill-btn.pulse { animation: pill-pulse 1.4s var(--glide) infinite; }
@keyframes pill-pulse { 50% { box-shadow: 4px 4px 0 #000, 0 0 0 4px color-mix(in srgb, var(--accent, #fff) 55%, transparent); } }
.ico-binder, .ico-roster { width: 20px; height: 18px; position: relative; display: inline-block; }
.ico-binder::before { content: ""; position: absolute; inset: 0 2px; border: 2px solid currentColor; border-radius: 2px; }
.ico-binder::after { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: currentColor; }
.ico-roster::before { content: ""; position: absolute; left: 5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.ico-roster::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 7px; border-radius: 9px 9px 2px 2px; background: currentColor; }

/* ---- slash wipe ---- */
.wipe { position: absolute; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.wipe.on { display: block; }
.wipe-a, .wipe-b { position: absolute; top: -2%; bottom: -2%; width: 110%; background: var(--ink); will-change: transform; }
.wipe-a { left: -40%; transform: translateX(-110%) skewX(-18deg); }
.wipe-b { right: -40%; transform: translateX(110%) skewX(-18deg); }
.wipe-a::after, .wipe-b::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px); }
.wipe-a i, .wipe-b i { position: absolute; top: 0; bottom: 0; width: 7px; background: var(--wipe-accent, #fff); z-index: 1; }
.wipe-a i { right: 0; }
.wipe-b i { left: 0; }

/* ---- typewriter ---- */
.tw { opacity: 0; }
.tw.on { opacity: 1; }

/* =====================================================================
   Portraits
   ===================================================================== */
.pt { position: absolute; left: 0; top: 0; }
.pt-pose, .pt-idle, .pt-talk, .pt-art { position: absolute; inset: 0; transform-origin: 50% 100%; }
.pt-img, .pt-clip { position: absolute; max-width: none; pointer-events: none; user-select: none; }
/* The Safari clip: a canvas we composite, with its source video parked invisibly inside. */
.pt-clip > canvas { display: block; width: 100%; height: 100%; }
.pt-clip > video { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pt-panel-vignette .pt-img, .pt-panel-vignette .pt-clip {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
.pt-panel-frame { clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); background: #10131b; }
.pt-panel-frame .pt-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,8,11,.95) 0, rgba(7,8,11,0) 32%), linear-gradient(100deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 40%); pointer-events: none; }
.pt-frame-tape { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; background: linear-gradient(var(--accent), var(--accent)) no-repeat; background-size: 6px 100%; clip-path: polygon(15% 0, calc(15% + 6px) 0, 6px 100%, 0 100%); }
.pt-cutout .pt-img, .pt-cutout .pt-clip { filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.pt-sil .pt-art { filter: grayscale(1) contrast(3.2) brightness(.16) sepia(1) hue-rotate(195deg) saturate(3); }
.pt-cutout.pt-sil .pt-art { filter: brightness(0) drop-shadow(0 0 2px var(--rim)) drop-shadow(0 0 12px color-mix(in srgb, var(--rim) 45%, transparent)); }
.pt-slab .pt-art { background: var(--accent); clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); display: grid; place-items: center; }
.pt-slab-name { font: 900 48px/1 var(--display); font-stretch: 70%; color: var(--ink); transform: rotate(-90deg); white-space: nowrap; letter-spacing: .06em; }
.face-img { position: absolute; max-width: none; pointer-events: none; }
.face-slab { position: absolute; inset: 0; display: grid; place-items: center; background: var(--accent); color: var(--ink); font: 900 28px/1 var(--display); }

/* =====================================================================
   Title
   ===================================================================== */
.title-bg { background: radial-gradient(120% 70% at 50% 110%, #0e0a1c 0%, #050508 60%); overflow: hidden; }
.tb-glow { position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 18% 88%, rgba(255,107,31,.1), rgba(255,107,31,0) 70%),
  radial-gradient(60% 45% at 84% 86%, rgba(198,255,61,.06), rgba(198,255,61,0) 70%),
  radial-gradient(70% 38% at 50% 20%, rgba(122,160,255,.1), rgba(122,160,255,0) 70%); }
.tb-halftone { position: absolute; inset: -20%; background: radial-gradient(rgba(255,255,255,.07) 1.1px, transparent 1.6px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%); animation: drift 20s linear infinite; }
@keyframes drift { to { transform: translate(9px, 9px); } }
.tb-holo { position: absolute; inset: -30%; opacity: .16; background: conic-gradient(from 90deg at 50% 50%, #ff4fd8, #ffd35a, #5cf2ff, #b877ff, #ff4fd8);
  -webkit-mask-image: radial-gradient(40% 30% at 50% 30%, #000, transparent 70%); mask-image: radial-gradient(40% 30% at 50% 30%, #000, transparent 70%); animation: holo-spin 24s linear infinite; }
@keyframes holo-spin { to { transform: rotate(360deg); } }
.tb-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 9%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #dfe8ff, transparent),
  radial-gradient(1px 1px at 33% 6%, #fff, transparent), radial-gradient(1px 1px at 58% 26%, #cfd8ff, transparent), radial-gradient(1px 1px at 6% 40%, #fff, transparent); opacity: .7; }
.t-panel { position: absolute; left: 0; top: 330px; width: 430px; height: 602px; overflow: hidden; }
.t-left { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
.t-right { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.t-art { position: absolute; inset: 0; }
.t-left .t-art { background: radial-gradient(70% 60% at 30% 40%, rgba(255,107,31,.1), transparent 70%); filter: brightness(.86) saturate(.94); }
.t-right .t-art { background: radial-gradient(70% 60% at 74% 40%, rgba(198,255,61,.06), transparent 70%); filter: brightness(.86) saturate(.94); }
.t-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 45%); mix-blend-mode: screen; opacity: .28; }
.t-slash { position: absolute; left: 213px; top: 330px; width: 3px; height: 602px; background: #fff; transform-origin: 50% 100%; opacity: 0; }
.t-edges { position: absolute; left: 0; top: 330px; width: 430px; height: 602px; pointer-events: none; }
/* Prism lines on the split: a spectrum runs down each edge, with two fainter refracted lines beside it. */
.t-edge { position: absolute; left: 50%; top: -10px; width: 3px; height: 640px; margin-left: -1.5px; transform-origin: 50% 50%; transform: translateX(var(--dx)) rotate(9.7deg);
  background: linear-gradient(180deg, #ff4fd8 0%, #ffd35a 30%, #5cf2ff 62%, #b877ff 100%); box-shadow: 0 0 12px rgba(255,255,255,.35), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }
.t-edge::before, .t-edge::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: inherit; opacity: .45; }
.t-edge::before { left: -9px; } .t-edge::after { left: 11px; opacity: .3; }
.e-j { --dx: -5px; }
.e-z { --dx: 5px; }
.t-fade { position: absolute; left: -200px; right: -200px; bottom: 0; height: 300px; background: linear-gradient(to top, var(--ink) 18%, rgba(7,8,11,0)); pointer-events: none; }
.t-mark { position: absolute; left: 0; right: 0; top: 72px; display: grid; justify-items: center; }
.t-crest { width: 58px; height: 58px; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(180,200,255,.35)); }
.t-astra {
  position: relative; font: 900 118px/.86 var(--display); font-stretch: 62%; letter-spacing: .01em; padding: 0 .06em;
  background: linear-gradient(180deg, #ffffff 0%, #e6eaf2 30%, #8b929f 48%, #3a3f49 51%, #c9ced8 56%, #ffffff 78%, #b9c0cc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35);
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(150,180,255,.22));
}
.t-astra::after {
  content: attr(data-text); position: absolute; inset: 0; padding: 0 .06em; -webkit-text-stroke: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,79,216,.85) 42%, rgba(255,211,90,.85) 48%, rgba(92,242,255,.85) 54%, rgba(184,119,255,.8) 58%, transparent 68%);
  background-size: 320% 100%; background-position: 110% 0; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0;
}
.t-mark.sweep .t-astra::after { animation: t-sweep .7s var(--glide); }
@keyframes t-sweep { 0% { opacity: 1; background-position: 110% 0; } 100% { opacity: 1; background-position: -10% 0; } }
/* Jesse's Figma wordmark (assets.wordmark): inline SVG, chrome letters, blue-violet star; the holo sweep runs
   through a copy of the SVG used as a mask. Phone 300 px wide, wide 440. */
.t-wordwrap { position: relative; width: 300px; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(150,180,255,.22)); }
.t-word { display: block; width: 100%; height: auto; }
.t-word-sweep { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  mask-size: contain; mask-position: center; mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  background: linear-gradient(100deg, transparent 30%, rgba(255,79,216,.85) 42%, rgba(255,211,90,.85) 48%, rgba(92,242,255,.85) 54%, rgba(184,119,255,.8) 58%, transparent 68%);
  background-size: 320% 100%; background-position: 110% 0; }
.t-mark.sweep .t-word-sweep { animation: t-sweep .7s var(--glide); }
.t-mark.has-word .t-sub { margin-top: 6px; }
.t-black { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 800 20px/1 var(--round); letter-spacing: .62em; padding-left: .62em; color: #e9eef7; }
.t-black i { width: 38px; height: 2px; background: linear-gradient(90deg, transparent, #e9eef7); }
.t-black i:last-child { background: linear-gradient(90deg, #e9eef7, transparent); }
.t-sub { margin-top: 14px; display: flex; font: 700 12px/1 var(--body); letter-spacing: .42em; color: rgba(244,246,251,.7); padding-left: .42em; }
.t-sub span { display: inline-block; min-width: .3em; }
.t-start { position: absolute; left: 0; right: 0; bottom: calc(52px + var(--safe-b)); display: flex; justify-content: center; align-items: center; gap: 14px; font: 900 24px/1 var(--display); font-stretch: 80%; letter-spacing: .24em; opacity: 0; text-shadow: 0 2px 0 #000; }
.chev { width: 12px; height: 12px; border: 3px solid var(--paper); border-width: 3px 3px 0 0; }
.chev.l { transform: rotate(-135deg); animation: chev-l 1.2s var(--glide) infinite; }
.chev.r { transform: rotate(45deg); animation: chev-r 1.2s var(--glide) infinite; }
@keyframes chev-l { 50% { transform: translateX(-5px) rotate(-135deg); } }
@keyframes chev-r { 50% { transform: translateX(5px) rotate(45deg); } }
.t-hold { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); width: 180px; margin-left: -90px; text-align: center; opacity: 0; transition: opacity .2s; font: 700 10px/1 var(--body); letter-spacing: .24em; color: #ff8a8a; }
.t-hold i { display: block; margin-top: 6px; height: 3px; background: #ff5b6b; transform-origin: left; transform: scaleX(0); }
.t-hold.on { opacity: 1; }
/* Title noir, 2026-09-23 (Jesse: "sleeker ... the character silhouettes, everything black on black" and "think triple A
   game - RPG"). The collectors are backlit silhouettes on near-black; the canvas draws the stars, the dot grid, dust
   and the star's shockwave; the logo only arrives after the press (title.js logoIn). */
.title-bg.noir { background: #040406; }
.tb-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tb-haze { position: absolute; inset: 0; background:
  radial-gradient(30% 34% at 30% 64%, rgba(74,86,118,.38), rgba(74,86,118,0) 72%),
  radial-gradient(30% 34% at 71% 62%, rgba(74,86,118,.32), rgba(74,86,118,0) 72%),
  radial-gradient(70% 30% at 50% 100%, rgba(36,44,66,.4), rgba(36,44,66,0) 70%); }
html.wide .tb-haze { background:
  radial-gradient(24% 44% at 26% 52%, rgba(74,86,118,.36), rgba(74,86,118,0) 72%),
  radial-gradient(24% 44% at 76% 50%, rgba(74,86,118,.3), rgba(74,86,118,0) 72%),
  radial-gradient(60% 34% at 50% 100%, rgba(36,44,66,.42), rgba(36,44,66,0) 70%); }
.scr-title.noir .t-panel { opacity: 0; }
.scr-title.noir .t-panel .t-art { background: none; filter: none; }   /* beats html.wide .t-left .t-art's orange / green glow */
/* the silhouette is the image itself now (black with the cold rim); the universe canvas sits over it, cut to its alpha */
.scr-title .pt-cutout.pt-sil .pt-art { filter: none; }
.scr-title .pt-cutout.pt-sil .pt-img, .scr-title .pt-cutout.pt-sil .pt-clip { filter: brightness(0) drop-shadow(0 0 1px rgba(196,208,236,.6)) drop-shadow(0 0 18px rgba(120,140,190,.22)); }
.t-cosmos { position: absolute; pointer-events: none; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
/* the lockup's halo is off while the letters are black and comes up with the colour at the stamp (title.js stamp) */
.scr-title.noir .t-wordwrap { filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(150,180,255,0)); transition: filter .7s ease-out; }
.scr-title.noir .t-mark.lit .t-wordwrap { filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 22px rgba(150,180,255,.22)); }
/* TAP TO START: the wordmark's four-point star over a quiet, tracked label (the hairlines read "cheap and weird") */
.scr-title.noir .t-start { flex-direction: column; gap: 10px; font: 500 11px/1 var(--body); letter-spacing: .58em; padding-left: .58em; color: rgba(222,229,245,.86);
  text-shadow: 0 0 14px rgba(150,175,235,.35); }
.t-start-star { display: block; width: 22px; height: 22px; animation: t-star-turn 9s linear infinite; }
.t-start-star svg { display: block; width: 100%; height: 100%; }
@keyframes t-star-turn { to { transform: rotate(360deg); } }
html.wide .scr-title.noir .t-start { font-size: 12px; gap: 12px; }
html.wide .t-start-star { width: 26px; height: 26px; }
.rm .t-start-star { animation: none; }
.t-wordwrap .w-astra, .t-wordwrap .w-black, .t-wordwrap .w-star { transform-box: fill-box; transform-origin: 50% 50%; }
.scr-title.noir .t-wordwrap svg { overflow: visible; }   /* the words fly in from far outside the lockup's own box */
/* black lettering with a thin cold rim until the star lands; the hole in its mask grows from the star (title.js) */
.t-wordwrap .w-dark path { fill: #000; stroke: rgba(200,212,240,.62); stroke-width: 1.6px; vector-effect: non-scaling-stroke; paint-order: stroke; }
.t-wordwrap .w-hole { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.001); }
.scr-title.noir .t-sub span { opacity: 0; }   /* COLLECTOR DEMO fades in after the star lands (title.js showSub) */
/* where the two rows meet (53.5% down the lockup): a line of light as they connect */
.t-seam { position: absolute; left: -8%; right: -8%; top: 53.5%; height: 3px; margin-top: -1.5px; opacity: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(190,210,255,.6) 20%, #fff 50%, rgba(190,210,255,.6) 80%, transparent); box-shadow: 0 0 16px 3px rgba(170,195,255,.5); }
/* the anamorphic streak through the star as it lands */
.t-flare { position: fixed; left: 0; top: 0; width: 150vw; height: 3px; opacity: 0; pointer-events: none; z-index: 20; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(150,180,255,.3) 22%, #fff 50%, rgba(150,180,255,.3) 78%, transparent); box-shadow: 0 0 22px 5px rgba(160,190,255,.45); }
.t-flare::after { content: ""; position: absolute; left: 32%; right: 32%; top: -10px; height: 23px; border-radius: 50%; background: radial-gradient(closest-side, rgba(205,220,255,.5), transparent); }
.t-hold.on i { transition: transform .8s linear; transform: scaleX(1); }

/* =====================================================================
   Character select
   ===================================================================== */
.sel-bg { background: var(--ink); overflow: hidden; }
.sel-bg-glow { position: absolute; inset: 0; background: radial-gradient(55% 40% at 66% 34%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); transition: background .24s; }
.sel-bg-stripes { position: absolute; inset: -20%; background: repeating-linear-gradient(-72deg, rgba(255,255,255,.035) 0 26px, transparent 26px 80px); }
.sel-bg-halftone { position: absolute; inset: 0; background: radial-gradient(color-mix(in srgb, var(--accent) 28%, transparent) 1.2px, transparent 1.7px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 70%, transparent 95%); mask-image: linear-gradient(160deg, transparent 30%, #000 70%, transparent 95%); opacity: .5; }
.sel-bg-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, #000 10%, transparent); }
.sel-ribbon { position: absolute; left: -20px; right: 60px; top: calc(24px + var(--safe-t)); height: 46px; background: #000; transform-origin: left; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); box-shadow: 0 0 0 2px var(--paper); }
.sel-ribbon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transition: background .24s; }
.sel-ribbon-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 26px 0 34px; }
.sel-ribbon-text { font: 900 19px/1 var(--display); font-stretch: 72%; letter-spacing: .06em; transform: skewX(-10deg); white-space: nowrap; }
.sel-ribbon-count { font: 800 13px/1 var(--round); color: var(--accent); letter-spacing: .06em; }
.sel-back { left: 16px; top: calc(84px + var(--safe-t)); }
.sel-stage { position: absolute; left: 118px; top: 62px; width: 312px; height: 500px; transform-origin: 50% 70%; }
.sel-accent { position: absolute; left: 30px; top: 30px; width: 300px; height: 440px; background: var(--accent); transform: skewX(-10deg); transform-origin: left; transition: background-color .24s; overflow: hidden; }
.sel-accent-dots { position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,.28) 1.4px, transparent 1.9px) 0 0 / 8px 8px; -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%); }
.sel-accent-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px); }
.sel-hero { position: absolute; inset: 0; }
.sel-hero .pt { box-shadow: none; }
.sel-outline { position: absolute; inset: -6px; border: 4px solid var(--accent); clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); opacity: 0; pointer-events: none; }
.sel-info { position: absolute; left: 16px; bottom: 384px; width: 240px; z-index: 3; }
.sel-namewrap { transform-origin: 0 100%; }
.sel-name { font: 900 72px/.84 var(--display); font-stretch: 62%; letter-spacing: .01em; transform: skewX(-10deg); text-shadow: 0 4px 0 #000, 4px 4px 0 color-mix(in srgb, var(--accent) 85%, #000); color: #fff; }
.sel-name.long { font-size: 58px; }
.sel-first { display: block; }
.sel-last { display: block; font-size: .5em; letter-spacing: .06em; margin-top: 2px; }
.sel-title { display: inline-block; margin-top: 8px; padding: 5px 10px 6px; background: var(--accent); color: var(--ink); font: 900 13px/1 var(--display); font-stretch: 80%; letter-spacing: .12em; transform: skewX(-10deg); box-shadow: 3px 3px 0 #000; transition: background .24s; }
.sel-stats { margin-top: 12px; display: grid; gap: 5px; width: 190px; }
.sel-stat { display: grid; grid-template-columns: 50px 1fr; align-items: center; height: 22px; background: rgba(7,8,11,.8); border-left: 3px solid var(--accent); padding: 0 8px; transform: skewX(-10deg); }
.sel-stat span { font: 700 10px/1 var(--body); letter-spacing: .18em; color: rgba(244,246,251,.6); }
.sel-stat b { font: 900 13px/1 var(--display); font-stretch: 85%; letter-spacing: .08em; white-space: nowrap; }
.sel-luck { display: flex; gap: 4px; }
.sel-luck i { width: 18px; height: 10px; background: rgba(255,255,255,.14); transform: skewX(-14deg); }
.sel-luck i.on { background: var(--accent); }
.sel-bio { margin-top: 16px; margin-left: 6px; width: 190px; max-height: calc(11px * 1.42 * 3); background: rgba(7,8,11,.8); box-shadow: 0 0 0 6px rgba(7,8,11,.8); font: 600 11px/1.42 var(--body); color: rgba(244,246,251,.82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sel-quote { position: absolute; left: 10px; right: 10px; top: 556px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: rgba(7,8,11,.9); border: 2px solid rgba(244,246,251,.9); transform: skewX(-10deg); opacity: 0; transition: opacity .18s; z-index: 4; box-shadow: 4px 4px 0 #000; }
.sel-quote.on { opacity: 1; }
.sel-quote-mark { font: 900 30px/1 var(--display); color: var(--accent); font-style: normal; margin-top: 8px; }
.sel-quote-text { font: 700 14px/1.2 var(--body); transform: skewX(10deg); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.sel-roster { position: absolute; left: 16px; top: 610px; width: 398px; height: 176px; display: grid; grid-template-columns: repeat(var(--cols, 6), var(--tile-w, 60px)); grid-auto-rows: var(--tile-h, 84px); column-gap: var(--gap, 7.6px); row-gap: 8px; }
.sel-roster.short { row-gap: 6px; }
.sel-roster.short .tile-name { padding: 2px 0 3px; font-size: 9px; }
.sel-roster.short .tile-lock { inset: 0 0 14px; }
.sel-roster.short .tile-lock b { font-size: 24px; }
.sel-roster.short .lock-ico { width: 11px; height: 11px; right: 3px; top: 3px; }
.sel-roster.short .tile-new { top: 1px; padding: 1px 4px; font-size: 8px; }
.tile { position: relative; width: var(--tile-w, 60px); height: var(--tile-h, 84px); perspective: 400px; }
.tile-in { position: absolute; inset: 0; transform: skewX(-8deg); background: #151823; border: 2px solid rgba(244,246,251,.35); overflow: hidden; transform-style: preserve-3d; transition: border-color .2s; }
.tile-art { position: absolute; inset: 0; transform: skewX(8deg) scale(1.2); background: linear-gradient(to top, color-mix(in srgb, var(--accent) 40%, #0c0e17), #0c0e17); overflow: hidden; }
.tile-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px; text-align: center; background: #07080b; font: 900 10px/1 var(--display); font-stretch: 80%; letter-spacing: .06em; }
/* The backing follows the tile's slant; only the lettering is straightened. */
.tile-name > span { display: block; transform: skewX(8deg); }
.tile.focus .tile-in { border-color: var(--accent); }
.tile.locked .tile-in { background: #0c0e17; border-color: rgba(125,134,255,.4); }
.tile.locked .tile-art { background: radial-gradient(80% 60% at 50% 40%, rgba(125,134,255,.18), transparent 70%), #0c0e17; }
.tile.locked .tile-art .face-img { filter: brightness(0) drop-shadow(0 0 1px rgba(125,134,255,.8)); opacity: .9; }
.tile.locked .tile-name { color: rgba(125,134,255,.9); }
.tile-lock { position: absolute; inset: 0 0 18px; display: grid; place-items: center; transform: skewX(8deg); }
.tile-lock b { font: 900 34px/1 var(--display); color: rgba(210,214,255,.9); text-shadow: 0 0 12px rgba(125,134,255,.6); }
.lock-ico { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; color: rgba(210,214,255,.85); }
.tile-new { position: absolute; left: -2px; top: 3px; padding: 2px 5px; background: #ff3b4a; color: #fff; font: 900 9px/1 var(--display); letter-spacing: .08em; transform: skewX(8deg) rotate(-8deg); }
.tile-sheen { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.tile.sheen .tile-sheen { animation: tile-sheen .7s var(--glide); }
@keyframes tile-sheen { to { transform: translateX(130%); } }
.sel-cursor { position: absolute; left: 0; top: 0; width: var(--tile-w, 60px); height: var(--tile-h, 84px); pointer-events: none; opacity: 0; }
.sel-cursor i { position: absolute; width: 16px; height: 16px; border: 4px solid var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.sel-cursor .c1 { left: -8px; top: -7px; border-width: 4px 0 0 4px; }
.sel-cursor .c2 { right: -14px; top: -7px; border-width: 4px 4px 0 0; }
.sel-cursor .c3 { left: -2px; bottom: -7px; border-width: 0 0 4px 4px; }
.sel-cursor .c4 { right: -8px; bottom: -7px; border-width: 0 4px 4px 0; }
.sel-cursor.idle { animation: cursor-pulse .9s var(--glide) infinite alternate; }
@keyframes cursor-pulse { to { scale: 1.06; } }
.sel-tip { position: absolute; left: calc(var(--tx, 215px) - 120px); top: 540px; width: 240px; padding: 9px 12px 10px; background: var(--paper); color: var(--ink); text-align: center; display: grid; gap: 3px; opacity: 0; transform: translateY(8px) skewX(-8deg); transition: opacity .16s, transform .2s var(--snap); z-index: 6; box-shadow: 5px 5px 0 #000; pointer-events: none; }
.sel-tip.on { opacity: 1; transform: translateY(0) skewX(-8deg); }
.sel-tip b { font: 900 11px/1 var(--display); letter-spacing: .2em; color: #5a4fff; }
.sel-tip span { font: 800 14px/1.15 var(--body); }
.sel-tip em { font: 800 12px/1 var(--round); font-style: normal; color: #ff3b4a; }
.sel-lock { top: 808px; }
.sel-lock.fired { background: #fff; }
.sel-super { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 8; }
.sel-super.on { opacity: 1; }
.super-band { position: absolute; left: -120px; right: -120px; top: 600px; height: 150px; }
.super-name { position: absolute; left: 22px; right: -40px; top: 596px; font-size: 128px; opacity: 0; }
.super-name small { display: block; font-size: 38px; letter-spacing: .1em; margin-top: -2px; }
.super-title { position: absolute; left: 30px; top: 560px; padding: 7px 12px; background: var(--accent); color: var(--ink); font: 900 18px/1 var(--display); font-stretch: 78%; letter-spacing: .14em; opacity: 0; box-shadow: 4px 4px 0 #000; }
.super-partner { position: absolute; right: 18px; top: 770px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(7,8,11,.9); border: 2px solid var(--accent); transform: skewX(-10deg); opacity: 0; }
.super-partner span { font: 700 10px/1 var(--body); letter-spacing: .2em; color: rgba(244,246,251,.65); }
.super-partner b { font: 900 16px/1 var(--display); font-stretch: 80%; letter-spacing: .1em; color: var(--accent); }
.super-tagline { position: absolute; left: 26px; top: 822px; font: 800 14px/1 var(--round); letter-spacing: .08em; color: #fff; opacity: 0; text-shadow: 0 2px 0 #000; }
.super-tagline.on { opacity: 1; }
.super-quote { position: absolute; left: 16px; right: 16px; top: 856px; min-height: 44px; padding: 10px 14px; background: rgba(7,8,11,.88); border-left: 4px solid var(--accent); font: 700 15px/1.3 var(--body); opacity: 0; }
.super-quote.on { opacity: 1; }

/* =====================================================================
   Stall hub
   ===================================================================== */
.hub-bg { overflow: hidden; transform-origin: 50% 64%; }
.hub-sky { position: absolute; inset: 0; }
.hub-bg.dusk .hub-sky { background: linear-gradient(180deg, #1e1440 0%, #45245c 28%, #8a3a62 46%, #d9694a 60%, #f3a35a 68%, #3b2140 69%, #150f22 100%); }
.hub-bg.night .hub-sky { background: linear-gradient(180deg, #05060f 0%, #0c1030 30%, #1d1640 55%, #2c1b45 67%, #120c20 68%, #07060d 100%); }
.hub-far { position: absolute; inset: 0; }
.hub-far-svg { position: absolute; left: 0; right: 0; bottom: calc(50% - (560px - 466px) * var(--s)); width: 100%; height: calc(900px * var(--s)); min-height: 60%; }
.hub-bg.dusk { --sil: #1d1330; --lit: #ffb45a; }
.hub-bg.night { --sil: #0b0b18; --lit: #ffb45a; }
.hub-far-svg .skyline { fill: var(--sil); opacity: .85; }
.hub-far-svg .stall { fill: var(--sil); }
.hub-far-svg .stall-lit { fill: var(--lit); }
.hub-far-svg .wire { stroke: rgba(0,0,0,.6); stroke-width: 2; fill: none; }
.hub-far-svg .bulb { fill: #fff3d6; }
.hub-far-svg .lantern { fill: #ff8a3d; }
.hub-far-svg .lantern.pink { fill: #ff4fd8; }
.hub-bg.dusk .hub-far-svg .bulb { opacity: .75; }
.hub-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.hub-passers { position: absolute; left: 0; right: 0; top: calc(50% + (430px - 466px) * var(--s)); height: calc(150px * var(--s)); overflow: hidden; }
.passer { position: absolute; bottom: 0; width: calc(40px * var(--s)); height: calc(120px * var(--s)); fill: #120b1c; opacity: .8; filter: blur(1.2px); }
.passer svg { width: 100%; height: 100%; display: block; }
.passer.p0 { left: -10%; animation: walk-r 19s linear infinite; }
.passer.p1 { left: 110%; animation: walk-l 23s linear infinite 3s; transform: scale(.85); }
.passer.p2 { left: -10%; animation: walk-r 27s linear infinite 9s; transform: scale(.9); }
.passer.p3 { left: 110%; animation: walk-l 17s linear infinite 12s; }
@keyframes walk-r { to { translate: 130vw 0; } }
@keyframes walk-l { to { translate: -130vw 0; } }
.hub-back { z-index: 30; }
.hub-awning { position: absolute; left: -30px; top: 0; width: 490px; height: 96px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.hub-awning .aw-a { fill: #1a0f1f; }
.hub-awning .aw-b { fill: color-mix(in srgb, var(--accent) 80%, #3a0f10); }
.hub-awning .aw-top { fill: #000; }
.hub-post { position: absolute; top: 80px; width: 14px; height: 560px; background: linear-gradient(90deg, #120c10, #2a1c18 40%, #0b0709); }
.hub-post.l { left: 6px; }
.hub-post.r { right: 6px; }
.hub-neon { position: absolute; left: 30px; top: 122px; transform: rotate(-4deg); text-align: left; z-index: 1; }
.hub-neon span { display: block; font: 900 46px/1 var(--display); font-stretch: 70%; letter-spacing: .08em; color: #eaffff;
  text-shadow: 0 0 4px #7afcff, 0 0 12px #7afcff, 0 0 28px rgba(122,252,255,.55); }
.hub-neon small { display: block; margin-top: 4px; font: 700 10px/1 var(--body); letter-spacing: .44em; color: #ffd6f4; text-shadow: 0 0 6px #ff4fd8, 0 0 14px rgba(255,79,216,.6); }
.hub-char { position: absolute; left: 0; top: 0; width: 430px; height: 700px; }
.hub-bg.night ~ .hub-back .pt-art { filter: saturate(.92) brightness(.94); }
/* On a painted backdrop there is no stand to hide the studio wall's edges: fade it out in an ellipse round her. */
.hub-back.has-scene .pt-panel-vignette .pt-img, .hub-back.has-scene .pt-panel-vignette .pt-clip {
  -webkit-mask-image: radial-gradient(ellipse 50% 56% at 50% 46%, #000 62%, transparent 100%), linear-gradient(to bottom, #000 0, #000 72%, transparent 96%);
  mask-image: radial-gradient(ellipse 50% 56% at 50% 46%, #000 62%, transparent 100%), linear-gradient(to bottom, #000 0, #000 72%, transparent 96%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hub-front { z-index: 32; pointer-events: none; }
.hub-counter { position: absolute; left: 0; right: 0; top: calc(50% + (566px - 466px) * var(--s)); bottom: 0; }
.hub-counter-top { position: absolute; left: 0; right: 0; top: 0; height: calc(34px * var(--s)); background: linear-gradient(180deg, #6b4630 0%, #4a2e20 30%, #2e1c14 100%); box-shadow: inset 0 2px 0 rgba(255,210,160,.35); }
.hub-counter-front { position: absolute; left: 0; right: 0; top: calc(34px * var(--s)); bottom: 0; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px calc(64px * var(--s))),
  linear-gradient(180deg, #20140f 0%, #120b09 40%, #07050a 100%); }
.hub-counter-front::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(26px * var(--s)); background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.hub-counter-banner { position: absolute; left: 50%; top: calc(70px * var(--s)); transform: translateX(-50%) scale(var(--s)); display: flex; align-items: center; gap: 14px; white-space: nowrap; opacity: .38; }
.hub-counter-banner span { font: 800 11px/1 var(--round); letter-spacing: .5em; color: #e9d7c4; }
.hub-counter-banner i { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
.hub-near { position: absolute; inset: 0; pointer-events: none; }
.bokeh { position: absolute; border-radius: 50%; }
.bokeh.b1 { left: -8%; bottom: 8%; width: 42vmin; height: 42vmin; background: radial-gradient(circle, rgba(255,160,80,.22), rgba(255,160,80,0) 70%); }
.bokeh.b2 { right: -10%; bottom: 20%; width: 34vmin; height: 34vmin; background: radial-gradient(circle, rgba(255,79,216,.16), rgba(255,79,216,0) 70%); }
.bokeh.b3 { right: 12%; top: 2%; width: 20vmin; height: 20vmin; background: radial-gradient(circle, rgba(122,252,255,.12), rgba(122,252,255,0) 70%); }
.hub-frontcol { z-index: 34; }
.hub-packs { position: absolute; left: 0; top: 0; width: 430px; height: 700px; }
.pack-glow { position: absolute; left: 60px; top: 330px; width: 250px; height: 330px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,91,216,.14) 45%, rgba(122,252,255,.06) 70%, rgba(122,252,255,0)); }
.pack2d { position: absolute; width: 78px; height: 118px; transform-origin: 50% 100%; transform: rotate(var(--r)) scale(var(--s)); pointer-events: auto; cursor: pointer; }
.pack2d.diving { transform-origin: 50% 50%; }
.pack2d-body { position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  background: linear-gradient(115deg, #030304 0%, #15171d 38%, #050506 52%, #1c1f27 70%, #040405 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14), inset 2px 0 0 rgba(255,255,255,.06); }
.pack2d-crimp { position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, #2b2e36 0 2px, #0b0c10 2px 4px); opacity: .95; }
.pack2d-crimp.top { top: 0; }
.pack2d-crimp.bottom { bottom: 0; }
.pack2d-logo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pack2d-print { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.pack2d.printed .pack2d-body { background: #07080b; }
.pack2d-word { position: absolute; inset: 22% 8% auto; text-align: center; }
.pack2d-word b { display: block; font: 900 18px/1 var(--display); font-stretch: 70%; letter-spacing: .06em; background: linear-gradient(180deg, #fff, #9aa1ad 55%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack2d-word span { display: block; margin-top: 3px; font: 800 7px/1 var(--round); letter-spacing: .4em; color: #cfd6e2; padding-left: .4em; }
.pack2d-holo { position: absolute; inset: 0; opacity: .22; mix-blend-mode: color-dodge; background: linear-gradient(125deg, transparent 20%, #ff5bd8 38%, #ffe45c 46%, #7afcff 54%, transparent 72%); background-size: 260% 100%; background-position: 80% 0; }
.pack2d-sheen { position: absolute; inset: -10%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform: translateX(-140%); pointer-events: none; }
.pack2d.sheening .pack2d-sheen { animation: pack-sheen 1.4s var(--glide) infinite; }
.pack2d.glint .pack2d-sheen { animation: pack-sheen .6s var(--glide) 1; }
.pack2d.glint .pack2d-holo { animation: holo-slide .6s var(--glide) 1; }
@keyframes pack-sheen { 0% { transform: translateX(-140%); } 60%, 100% { transform: translateX(140%); } }
@keyframes holo-slide { from { background-position: 100% 0; opacity: .6; } to { background-position: 0 0; opacity: .22; } }
.pack2d.story .pack2d-body { box-shadow: 0 12px 22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(255,91,216,.25); }
.hub-chalk { position: absolute; left: 318px; top: 496px; width: 96px; height: 104px; perspective: 500px; transform: rotate(3deg); pointer-events: none; }
.chalk-face { position: absolute; inset: 0; backface-visibility: hidden; background: #1f2621; border: 5px solid #5a3b25; box-shadow: 0 8px 14px rgba(0,0,0,.5); display: grid; place-content: center; text-align: center; gap: 4px; transition: transform .36s var(--snap); }
.chalk-face b { font: 900 22px/1 var(--display); font-stretch: 75%; letter-spacing: .06em; color: rgba(255,255,255,.88); text-shadow: 0 0 1px #fff; }
.chalk-face span { font: 700 8px/1 var(--body); letter-spacing: .12em; color: rgba(255,255,255,.62); }
.chalk-face em { font: 800 11px/1 var(--round); font-style: normal; color: #ffd66b; }
.chalk-face.b { transform: rotateY(180deg); }
.chalk-face.b b { color: #ff8a8a; }
.hub-chalk.closed .chalk-face.a { transform: rotateY(-180deg); }
.hub-chalk.closed .chalk-face.b { transform: rotateY(0deg); }
/* With more than one product the sign is the switch (hub.js). Its hit area is the whole board. */
.hub-chalk.swappable { pointer-events: auto; cursor: pointer; }
.hub-chalk.swappable.closed { pointer-events: none; }
.chalk-face u { margin-top: 5px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.28); font: 800 7px/1 var(--body); letter-spacing: .1em; text-decoration: none; color: #9fe8ff; }
.hub-chalk.swappable:hover .chalk-face u, .hub-chalk.swappable:focus-visible .chalk-face u { color: #fff; }
.hub-hud { position: absolute; left: 14px; top: calc(12px + var(--safe-t)); right: 72px; display: grid; gap: 7px; justify-items: start; opacity: 0; }
.scr-hub:not(.story) .hub-hud { opacity: 1; }
.hud-who { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; background: rgba(7,8,11,.82); border: 2px solid var(--accent); transform: skewX(-10deg); box-shadow: 3px 3px 0 #000; }
.hud-who > * { transform: skewX(10deg); }
.hud-face { position: relative; width: 30px; height: 30px; overflow: hidden; background: var(--accent); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.hud-who span { font: 900 17px/1 var(--display); font-stretch: 78%; letter-spacing: .1em; }
.hud-row { display: flex; gap: 7px; }
.hud-chip { position: relative; display: flex; align-items: baseline; gap: 6px; height: 28px; padding: 8px 10px 0; background: rgba(7,8,11,.78); transform: skewX(-10deg); border-left: 3px solid rgba(244,246,251,.8); }
.hud-chip span { font: 700 9px/1 var(--body); letter-spacing: .18em; color: rgba(244,246,251,.62); transform: skewX(10deg); }
.hud-chip b { font: 800 13px/1 var(--round); transform: skewX(10deg); }
.hud-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent) calc(var(--f) * 100%), rgba(255,255,255,.12) 0); }
.hud-hype { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; background: rgba(7,8,11,.78); transform: skewX(-10deg); }
.hud-hype > * { transform: skewX(10deg); }
.hud-hype span { font: 900 12px/1 var(--display); letter-spacing: .16em; color: #ffc94a; }
.hud-hype-segs { display: flex; gap: 3px; }
.hud-hype-segs i { width: 18px; height: 8px; background: rgba(255,201,74,.18); transform: skewX(-18deg); }
.hud-hype-segs i.on { background: #ffc94a; box-shadow: 0 0 8px rgba(255,201,74,.55); }
.hud-hype b { font: 700 10px/1 var(--body); letter-spacing: .1em; color: rgba(244,246,251,.7); }
.hud-hype.full { box-shadow: 0 0 0 2px #ffc94a; animation: hype-glow 1.2s var(--glide) infinite alternate; }
.hud-hype.full b { color: #ffc94a; font-weight: 800; }
.hud-hype-guarantee { padding: 6px 10px; border-left: 3px solid #ffc94a; background: rgba(7,8,11,.88); color: #ffc94a; transform: skewX(-10deg); font: 800 10px/1.2 var(--body); letter-spacing: .08em; }
.hud-hype-guarantee span { display: block; transform: skewX(10deg); }
@keyframes hype-glow { to { box-shadow: 0 0 0 2px #ffc94a, 0 0 18px rgba(255,201,74,.55); } }
.hub-say { position: absolute; left: 14px; top: 228px; width: 206px; padding: 10px 14px 12px; background: var(--paper); color: var(--ink); opacity: 0; transform-origin: 100% 60%; pointer-events: none;
  clip-path: polygon(0 4%, 96% 0, 100% 52%, 108% 64%, 97% 72%, 94% 100%, 3% 96%); filter: drop-shadow(4px 4px 0 #000); }
.hub-say.on { opacity: 1; }
.hub-say-name { display: inline-block; margin-bottom: 5px; padding: 3px 7px; background: var(--accent); font: 900 11px/1 var(--display); font-stretch: 80%; letter-spacing: .16em; transform: skewX(-10deg); }
.hub-say-text { font: 700 16px/1.32 var(--body); min-height: 21px; }
.hub-actions { position: absolute; left: 24px; right: 24px; top: 740px; display: flex; gap: 14px; opacity: 0; pointer-events: none; }
.hub-actions.on { opacity: 1; }
.hub-actions.on .pill-btn { pointer-events: auto; }
.hub-actions .pill-btn { flex: 1; }
.hub-actions { top: 680px; flex-wrap: wrap; row-gap: 12px; }
.hub-actions .hub-battle { flex: 1 0 100%; border-color: var(--accent); background: linear-gradient(100deg, rgba(120,10,24,.92), rgba(7,8,11,.86) 70%); box-shadow: 4px 4px 0 #000, inset 0 0 0 1px rgba(255,59,74,.35); }
.hub-battle-sub { font: 700 10px/1 var(--body); font-style: normal; letter-spacing: .24em; color: rgba(244,246,251,.7); }
.ico-battle { width: 20px; height: 20px; position: relative; display: inline-block; }
.hub-battle .ico-battle { left: -2px; top: -3px; }
.ico-battle::before, .ico-battle::after { content: ""; position: absolute; left: 9px; top: -1px; width: 2px; height: 22px; background: currentColor; border-radius: 1px; box-shadow: 0 15px 0 1px currentColor; }
.ico-battle::before { transform: rotate(45deg); }
.ico-battle::after { transform: rotate(-45deg); }
.hub-cta { top: 808px; opacity: 0; pointer-events: none; }
.hub-cta.on { opacity: 1; pointer-events: auto; }
.hub-cta-sub { position: absolute; left: 0; right: 0; top: 882px; text-align: center; font: 700 10px/1 var(--body); letter-spacing: .3em; color: rgba(244,246,251,.55); opacity: 0; }
.hub-hint { position: absolute; left: 136px; top: 668px; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; }
.hub-hint.on { opacity: 1; }
.hub-hint span { font: 900 12px/1 var(--display); letter-spacing: .18em; text-shadow: 0 2px 0 #000; }
.hand { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; animation: hand-tap 1s var(--glide) infinite; }
@keyframes hand-tap { 50% { transform: scale(.72); box-shadow: 0 0 0 8px rgba(255,255,255,.18); } }
.hub-banner { position: absolute; left: 20px; right: 20px; top: 430px; text-align: center; visibility: hidden; z-index: 9; }
.hub-banner span { display: inline-block; padding: 10px 16px; background: #000; border: 3px solid var(--rc); color: var(--rc); font: 900 28px/1 var(--display); font-stretch: 70%; letter-spacing: .08em; transform: skewX(-10deg); box-shadow: 5px 5px 0 var(--rc); }
.dive-dim { background: #000; }

/* ---- dialogue box ---- */
.dlg { position: absolute; left: 12px; right: 12px; top: 684px; height: 222px; opacity: 0; pointer-events: none; z-index: 12; }
.dlg.on { opacity: 1; }
.dlg-box { position: absolute; left: 0; right: 0; top: 18px; bottom: 0; transform: rotate(-1.5deg); }
.dlg-box::before { content: ""; position: absolute; inset: 0; background: var(--paper); clip-path: polygon(1% 7%, 34% 0, 100% 4%, 98% 93%, 62% 100%, 0 97%); }
.dlg-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, #0c0e15, #07080b 60%); clip-path: polygon(calc(1% + 3px) calc(7% + 3px), 34% 3px, calc(100% - 3px) calc(4% + 3px), calc(98% - 3px) calc(93% - 3px), 62% calc(100% - 3px), 3px calc(97% - 3px)); }
.dlg-text { position: absolute; left: 26px; right: 30px; top: 34px; z-index: 1; font: 600 19px/1.38 var(--body); color: #fff; }
.dlg-next { position: absolute; right: 30px; bottom: 22px; z-index: 1; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid var(--accent); opacity: 0; }
.dlg-next.on { opacity: 1; animation: dlg-bob .6s var(--glide) infinite alternate; }
@keyframes dlg-bob { to { transform: translateY(4px); } }
.dlg-tab { position: absolute; left: 16px; top: 0; z-index: 2; padding: 8px 18px 9px; background: var(--accent); color: var(--ink); transform: skewX(-12deg); box-shadow: 5px 5px 0 #000; }
.dlg-name { display: block; font: 900 22px/1 var(--display); font-stretch: 72%; letter-spacing: .1em; transform: skewX(12deg); }

/* =====================================================================
   Rip screen
   ===================================================================== */
.scr-rip { pointer-events: none; }
.scr-rip .col, .scr-rip .col * { pointer-events: none; }
.scr-rip .rip-binder-btn { pointer-events: auto; }
.rip-loading { position: absolute; left: 0; right: 0; top: 420px; display: grid; justify-items: center; gap: 16px; opacity: 0; transition: opacity .3s; }
.rip-loading.on { opacity: 1; }
.rip-loading span { font: 700 11px/1 var(--body); letter-spacing: .4em; color: rgba(244,246,251,.7); padding-left: .4em; }
.rip-spinner { display: flex; gap: 6px; }
.rip-spinner i { width: 12px; height: 34px; background: var(--paper); transform: skewX(-14deg); animation: spin-bar .9s var(--glide) infinite; }
.rip-spinner i:nth-child(2) { animation-delay: .12s; background: #ff5bd8; }
.rip-spinner i:nth-child(3) { animation-delay: .24s; background: #7afcff; }
@keyframes spin-bar { 50% { transform: skewX(-14deg) scaleY(.35); opacity: .45; } }
.rip-corner { position: absolute; left: 12px; top: calc(12px + var(--safe-t)); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.rip-corner span { display: none; }
.rip-corner.on { opacity: .92; }
.scr-rip.zoomed .rip-corner { opacity: 0; }
.rip-corner-face { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--accent); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent); }
.rip-corner span { padding: 4px 8px; background: var(--accent); color: var(--ink); font: 900 12px/1 var(--display); font-stretch: 80%; letter-spacing: .14em; transform: skewX(-10deg); }
.rip-hype { position: absolute; left: 70px; top: calc(20px + var(--safe-t)); display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: rgba(7,8,11,.75); transform: skewX(-10deg); opacity: 0; transition: opacity .3s; }
.rip-hype.on { opacity: 1; }
.rip-hype > * { transform: skewX(10deg); }
.rip-hype span { font: 900 12px/1 var(--display); letter-spacing: .16em; color: #ffc94a; }
.rip-hype-segs { display: flex; gap: 3px; }
.rip-hype-segs i { width: 16px; height: 8px; background: rgba(255,201,74,.2); transform: skewX(-18deg); }
.rip-hype-segs i.on { background: #ffc94a; }
.rip-hype b { font: 800 10px/1 var(--body); letter-spacing: .1em; color: #ffc94a; }
.rip-hype.full { box-shadow: 0 0 0 2px #ffc94a, 0 0 16px rgba(255,201,74,.4); }
.rip-callout { position: absolute; left: 0; right: 0; text-align: center; visibility: hidden; }
.rip-callout span { display: inline-block; font: 900 64px/1 var(--display); font-stretch: 62%; letter-spacing: .04em; transform: skewX(-10deg); padding: 0 .1em;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--rc) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #000;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 60%, transparent)); }
.rip-binderbar { position: absolute; left: 50%; top: calc(66px + var(--safe-t)); width: 250px; margin-left: -125px; display: flex; align-items: center; gap: 8px; }
.rip-binderbar span { font: 700 9px/1 var(--body); letter-spacing: .2em; color: rgba(244,246,251,.65); }
.rip-binderbar b { font: 800 12px/1 var(--round); min-width: 38px; text-align: right; }
.rip-bar { position: relative; flex: 1; height: 6px; background: rgba(255,255,255,.12); transform: skewX(-20deg); overflow: hidden; }
.rip-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
.rip-bar .was { background: rgba(255,255,255,.35); transform: scaleX(var(--f)); }
.rip-bar .now { background: linear-gradient(90deg, #5fd6a8, #7afcff); transform: scaleX(var(--f)); }
.rip-binder-btn { position: absolute; right: 14px; top: calc(792px - var(--safe-b)); height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 7px; background: rgba(7,8,11,.8); border: 2px solid var(--paper); transform: skewX(-10deg); box-shadow: 3px 3px 0 #000; font: 900 13px/1 var(--display); letter-spacing: .12em; opacity: 0; }
.rip-binder-btn > * { transform: skewX(10deg); }
/* Summary chrome steps aside while a card is zoomed (its name takes the top band).
   filter, not opacity: the entrance animations hold opacity with fill: both. */
.rip-binderbar, .rip-binder-btn, .ribbon { transition: filter .2s, visibility 0s; }
.scr-rip.zoomed .rip-binderbar, .scr-rip.zoomed .rip-binder-btn, .ribbon.chrome-off { filter: opacity(0); visibility: hidden; transition: filter .15s, visibility 0s .15s; }

/* ---- 2D reveal fallback (no WebGL 2) ---- */
.domrip { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 45%, #141827, var(--ink)); pointer-events: auto; font-family: var(--body); }
.domrip-pack { width: 200px; height: 300px; display: grid; place-content: center; gap: 8px; background: linear-gradient(115deg, #030304, #1a1d24 40%, #050506 55%, #1d2029); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.domrip-pack span { font: 900 40px/1 var(--display); font-stretch: 70%; letter-spacing: .06em; }
.domrip-pack small { font: 700 11px/1 var(--body); letter-spacing: .3em; color: var(--dim); }
.domrip-hint { position: absolute; left: 0; right: 0; bottom: calc(30px + var(--safe-b)); text-align: center; font: 600 14px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.domrip-card { position: absolute; left: 50%; top: 50%; width: 260px; height: 363px; margin: -200px 0 0 -130px; perspective: 1000px; cursor: pointer; }
.domrip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--snap); }
.domrip-card.flipped .domrip-inner { transform: rotateY(180deg); }
.domrip-back, .domrip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
.domrip-back { background: radial-gradient(circle at 50% 50%, #1b3a52, #05090f); border: 3px solid #cfe7f5; }
.domrip-face { transform: rotateY(180deg); background: #0b0c10; border: 4px solid var(--rc); box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 50%, transparent); display: grid; grid-template-rows: 1fr auto auto; padding: 10px; gap: 4px; }
.domrip-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.domrip-face b { font: 700 18px/1.1 var(--round); }
.domrip-face small { color: var(--rc); font-weight: 700; letter-spacing: .2em; }
.domrip-summary { position: absolute; left: 12px; right: 12px; top: 18%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.domrip-mini { width: 110px; height: 154px; border: 3px solid var(--rc); border-radius: 8px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; background: #0b0c10; }
.domrip-mini img { width: 100%; height: 100%; object-fit: cover; }
.domrip-mini small { text-align: center; padding: 3px; font-size: 10px; color: var(--rc); letter-spacing: .14em; }
.domrip-again { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%); padding: 16px 40px; background: var(--paper); color: var(--ink); font: 900 16px/1 var(--display); letter-spacing: .14em; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }

/* =====================================================================
   Overlay set pieces (#overlay)
   ===================================================================== */
.ocol { z-index: 1; }
.dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.shield { position: absolute; inset: 0; pointer-events: auto; background: transparent; touch-action: none; }
.lbox { position: absolute; left: 0; right: 0; height: 9vh; background: #000; transform: scaleY(0); }
.lbox-top { top: 0; transform-origin: 50% 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.lbox-bottom { bottom: 0; transform-origin: 50% 100%; }

/* lightning slam card */
.slam { position: absolute; left: 16px; right: 16px; top: 92px; height: 128px; display: grid; place-items: center; }
.sl-plate { position: absolute; left: 6px; right: 6px; top: 16px; height: 96px; transform: skewX(-12deg); opacity: 0;
  background: linear-gradient(100deg, rgba(7,8,11,.94) 45%, color-mix(in srgb, var(--rc) 24%, #07080b)); box-shadow: inset 0 0 0 3px var(--rc), 0 12px 30px rgba(0,0,0,.45); }
.sl-streak { position: absolute; left: -30%; right: -30%; top: 50%; height: 2px; margin-top: -1px; opacity: 0; transform: scaleX(.1);
  background: linear-gradient(90deg, rgba(255,255,255,0), color-mix(in srgb, var(--rc) 80%, #fff) 30%, #fff 50%, color-mix(in srgb, var(--rc) 80%, #fff) 70%, rgba(255,255,255,0)); }
.slam.landed .sl-streak { animation: sl-streak .9s var(--snap) both; }
@keyframes sl-streak { 0% { opacity: 0; transform: scaleX(.1); } 20% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
.sl-border { display: none; }
.slam-masterpiece .sl-plate { box-shadow: 0 12px 30px rgba(0,0,0,.45); background: linear-gradient(100deg, rgba(7,8,11,.95) 40%, rgba(60,10,50,.9)); }
.slam-masterpiece .sl-border { display: block; position: absolute; inset: 0; padding: 3px; background: var(--prism); background-size: 200% 100%; animation: prism 2.4s linear infinite;
  -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); }
@keyframes prism { to { background-position: -200% 0; } }
.sl-word { position: relative; display: flex; transform: skewX(-10deg); font: 900 var(--fs)/1 var(--display); font-stretch: 66%; letter-spacing: .02em; white-space: nowrap; overflow: visible; }
.sl-l { display: inline-block; opacity: 0; background: linear-gradient(180deg, #fff 0%, #fff 42%, color-mix(in srgb, var(--rc) 60%, #fff) 62%, var(--rc) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #000; filter: drop-shadow(0 3px 0 #000); }
.slam.landed .sl-word { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 55%, transparent)); }
.slam-masterpiece .sl-l { background: linear-gradient(100deg, #7afcff, #ff5bd8 50%, #ffe45c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: prism 2.4s linear infinite; }
.sl-sheen { position: absolute; inset: -6px -20px; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); mix-blend-mode: overlay; opacity: 0; transform: translateX(-80%); pointer-events: none; }
.slam.sheen .sl-sheen { animation: sl-sheen .7s var(--glide) both; }
@keyframes sl-sheen { 0% { opacity: 1; transform: translateX(-80%); } 100% { opacity: 1; transform: translateX(80%); } }
.sl-tag { position: absolute; right: 2px; bottom: 6px; padding: 7px 10px 8px; background: #000; color: #fff; border: 2px solid var(--rc); font: 800 15px/1 var(--body); letter-spacing: .1em; visibility: hidden; }
.slam-masterpiece .sl-tag { border-color: #ffe45c; }

/* chip speech bubble */
.chip { position: absolute; display: flex; align-items: flex-end; gap: 8px; transform-origin: 32px 100%; max-width: 360px; }
.chip-bottom { left: 14px; top: 718px; }
.chip-top { left: 14px; top: 100px; }
.chip-face { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--accent); box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--accent); }
.chip-bubble { position: relative; margin-bottom: 6px; padding: 8px 14px 10px; background: var(--paper); color: var(--ink); min-width: 120px;
  clip-path: polygon(0 10%, 97% 0, 100% 90%, 8% 100%, 0 70%, -6% 60%); filter: drop-shadow(3px 3px 0 #000); }
.chip-name { display: inline-block; margin-bottom: 3px; padding: 3px 6px; background: var(--accent); font: 900 10px/1 var(--display); font-stretch: 80%; letter-spacing: .16em; transform: skewX(-10deg); }
.chip-text { font: 700 16px/1.28 var(--body); }
.chip-whisper .chip-bubble { background: rgba(12,14,21,.92); color: #e9eef7; }
.chip-whisper .chip-text { font-style: italic; font-weight: 600; }

/* band cut-in */
.band { position: absolute; left: -12vw; right: -12vw; top: 64%; height: 22%; transform: skewY(-7deg); }
.band-legendary { height: 24%; top: 63%; }
.band-in { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; transform: scaleY(0); background: var(--accent); }
.band-lines { position: absolute; top: 0; bottom: 0; left: -80px; right: -80px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.4) 18px 20px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); animation: lines-scroll-20 .28s linear infinite; }
.band-legendary .band-lines { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,233,160,.55) 18px 20px); animation-duration: .18s; }
@keyframes lines-scroll-20 { to { transform: translateX(-20px); } }
.band-dots { position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,.22) 1.4px, transparent 1.9px) 0 0 / 8px 8px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.band-portrait { position: absolute; left: 66%; top: 0; width: 0; height: 100%; }
.band-face { filter: drop-shadow(-8px 0 0 rgba(0,0,0,.35)); }
/* Unkeyed art is a rectangle with its studio backdrop: feather its side edges into the band. */
.band-face.face-panel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.band-name { position: absolute; left: calc(12vw + 18px); top: 12px; padding: 6px 12px 7px; background: #000; color: #fff; font: 900 22px/1 var(--display); font-stretch: 72%; letter-spacing: .12em; box-shadow: 4px 4px 0 rgba(0,0,0,.35); visibility: visible; }
.band-sub { position: absolute; left: calc(12vw + 18px); bottom: 16px; max-width: min(56vw, 300px); font: 800 20px/1.2 var(--body); color: #fff;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; }
.band-sub .w { display: inline-block; white-space: nowrap; }
.band-sub .l { display: inline-block; }
.band-tape { position: absolute; left: 0; right: 0; height: 6px; transform-origin: 100% 50%; background: linear-gradient(#fff 0 4px, #000 4px); }
.band-tape.top { top: 0; }
.band-tape.bottom { bottom: 0; transform: scaleY(-1); }

/* masterpiece split cut-in */
.split { position: absolute; inset: 0; overflow: hidden; }
.split-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.split-a { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 30%, 0 62%); overflow: hidden; }
.split-prism { position: absolute; inset: 0; background: linear-gradient(125deg, #ff5bd8 0%, #b877ff 30%, #7afcff 55%, #ffe45c 80%, #ff5bd8 100%); }
.split-prism::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(7,8,11,.28) 1.6px, transparent 2.2px) 0 0 / 10px 10px; }
.split-focus { position: absolute; inset: -10%; background: repeating-conic-gradient(from 0deg at 62% 30%, rgba(255,255,255,.4) 0deg 1.6deg, transparent 1.6deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 62% 30%, transparent 18%, #000 60%); mask-image: radial-gradient(circle at 62% 30%, transparent 18%, #000 60%); animation: focus-flick .12s steps(2) infinite; }
@keyframes focus-flick { 50% { transform: rotate(2deg); transform-origin: 62% 30%; } }
.split-portrait { position: absolute; left: 60%; top: 28%; width: 0; height: 0; }
.split-face { filter: drop-shadow(-10px 6px 0 rgba(7,8,11,.35)); }
.split-a-edge { display: none; }
.split-b { position: absolute; inset: 0; clip-path: polygon(0 62%, 100% 30%, 100% 56%, 0 88%); background: #07080b; }
.split-tape { position: absolute; inset: 0; background: var(--accent); }
.split-tape.t1 { clip-path: polygon(0 62%, 100% 30%, 100% 31.4%, 0 63.4%); }
.split-tape.t2 { clip-path: polygon(0 86.6%, 100% 54.6%, 100% 56%, 0 88%); }
.split-sub { position: absolute; left: 5%; top: 67%; width: 62%; transform: rotate(var(--ang)); transform-origin: 0 0; font: 800 20px/1.25 var(--body); color: #fff; text-shadow: 0 2px 0 #000; }
.split-slash { position: absolute; left: 0; top: 62%; width: var(--diag, 140vmax); height: 4px; margin-top: -2px; background: #fff; transform-origin: 0 50%; box-shadow: 0 0 12px rgba(255,255,255,.6); }
.split-letter { position: absolute; right: 5%; top: 34%; visibility: hidden; font: 900 min(18vw, 96px)/1 var(--display); font-stretch: 62%; letter-spacing: .02em;
  background: linear-gradient(100deg, #7afcff, #ff5bd8 50%, #ffe45c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3px #000; filter: drop-shadow(0 5px 0 #000); }

/* serial plate */
.serial { position: absolute; left: 0; right: 0; top: 690px; height: 150px; }
.serial-ticker { position: absolute; left: -30px; right: -30px; top: 4px; height: 22px; overflow: hidden; transform: rotate(-3deg); opacity: 0;
  background: linear-gradient(90deg, rgba(255,91,216,0), rgba(255,91,216,.2) 20%, rgba(255,91,216,.2) 80%, rgba(255,91,216,0)); }
.serial-ticker-in { white-space: nowrap; font: 800 11px/22px var(--body); letter-spacing: .32em; color: #ffc2ee; animation: ticker 9s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.serial-plate { position: absolute; left: 50%; top: 34px; width: 272px; height: 98px; margin-left: -136px; opacity: 0; background: linear-gradient(180deg, #151620, #07080b); box-shadow: 0 14px 30px rgba(0,0,0,.6); }
.serial-border { position: absolute; inset: 0; padding: 2px; background: var(--prism); background-size: 200% 100%; animation: prism 2.4s linear infinite;
  -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); }
.serial-label { margin-top: 9px; text-align: center; font: 700 10px/1 var(--body); letter-spacing: .42em; color: rgba(244,246,251,.7); padding-left: .42em; }
.serial-num { display: flex; justify-content: center; align-items: center; height: 46px; font: 800 34px/44px var(--round); }
.serial-no, .serial-of, .reel b { background: linear-gradient(180deg, #fff6d0 0%, #ffd35a 45%, #b8862b 56%, #ffe9a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serial-no { font-size: 18px; margin-right: 8px; font-weight: 700; }
.serial-of { margin-left: 6px; }
.reel { position: relative; width: 30px; height: 44px; overflow: hidden; }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; }
.reel-strip b { display: block; height: 44px; line-height: 44px; text-align: center; font-weight: 800; }
.serial-cert { margin-top: 1px; text-align: center; font: 700 9px/1 var(--body); letter-spacing: .2em; color: rgba(255,233,168,.78); }
.serial-ring { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border: 3px solid #fff; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.serial.landed .serial-plate { animation: plate-sheen 2.4s var(--glide) infinite 1.4s; }
@keyframes plate-sheen { 0%, 70% { box-shadow: 0 14px 30px rgba(0,0,0,.6); } 85% { box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 26px rgba(255,211,90,.35); } }

/* results ribbon */
.ribbon { position: absolute; left: 50%; top: calc(18px + var(--safe-t)); transform: translateX(-50%) skewX(-12deg); display: flex; background: #000; border: 2px solid var(--accent); box-shadow: 5px 5px 0 rgba(0,0,0,.6); white-space: nowrap; }
.ribbon-in { display: flex; align-items: center; transform: skewX(12deg); padding: 9px 14px 10px; gap: 8px; }
.ribbon-in span { font: 900 13px/1 var(--display); font-stretch: 72%; letter-spacing: .08em; }
.ribbon-in span + span::before { content: "·"; margin-right: 8px; color: var(--accent); }
.ribbon-in .rb-0 { color: var(--accent); }
.ribbon-prism { border-color: transparent; }
.ribbon-prism::before { content: ""; position: absolute; inset: -2px; padding: 2px; background: var(--prism); background-size: 200% 100%; animation: prism 2.4s linear infinite;
  -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); }
.ribbon-prism .ribbon-in .rb-0 { color: #ffe45c; }
.ribbon-prism .ribbon-in .rb-1 { background: linear-gradient(100deg, #7afcff, #ff5bd8 50%, #ffe45c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =====================================================================
   Binder
   ===================================================================== */
.bnd-bg { background: radial-gradient(90% 60% at 50% 20%, #171a2a, var(--ink) 70%); }
.bnd-bg-grid { position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 80%); }
.bnd-bg-glow { position: absolute; inset: 0; background: radial-gradient(40% 25% at 50% 26%, rgba(255,91,216,.12), rgba(255,91,216,0) 70%); }
.bnd-head { position: absolute; left: 16px; right: 72px; top: calc(14px + var(--safe-t)); height: 48px; display: flex; align-items: center; gap: 14px; }
.bnd-back { position: relative; flex: none; }
.bnd-title { flex: 1; display: grid; gap: 3px; }
.bnd-title b { font: 900 30px/.9 var(--display); font-stretch: 70%; letter-spacing: .08em; transform: skewX(-10deg); transform-origin: left; }
.bnd-title span { font: 700 10px/1 var(--body); letter-spacing: .28em; color: rgba(244,246,251,.55); }
.bnd-count { font: 800 14px/1 var(--round); color: rgba(244,246,251,.6); }
.bnd-count b { font-size: 26px; color: #fff; }
.bnd-bar { position: absolute; left: 16px; right: 16px; top: calc(74px + var(--safe-t)); display: flex; align-items: center; gap: 10px; }
.bnd-bar span { font: 700 9px/1 var(--body); letter-spacing: .22em; color: rgba(244,246,251,.6); white-space: nowrap; }
.bnd-bar b { font: 800 13px/1 var(--round); min-width: 42px; text-align: right; }
.bnd-bar-track { position: relative; flex: 1; height: 8px; background: rgba(255,255,255,.1); transform: skewX(-20deg); overflow: hidden; }
.bnd-bar-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #5fd6a8, #7afcff 60%, #ff5bd8); }
.bnd-showcase { position: absolute; left: 0; right: 0; top: 104px; height: 280px; }
.bnd-spot { position: absolute; left: 50%; top: -30px; width: 360px; height: 330px; margin-left: -250px; background: radial-gradient(closest-side, rgba(255,210,250,.26), rgba(255,91,216,.1) 45%, rgba(255,91,216,0)); pointer-events: none; }
/* Under the grail card: a soft floor shadow that fades out at the edges, not a hard trapezoid plinth (Jesse, 2026-09-22). */
.bnd-stand { position: absolute; left: 34px; top: 226px; width: 230px; height: 40px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.85), rgba(4,3,8,.7) 30%, rgba(255,120,220,.16) 56%, rgba(255,120,220,.06) 68%, transparent 78%); filter: blur(2.5px); pointer-events: none; }
.bnd-hero-card { position: absolute; left: 76px; top: 6px; width: 146px; height: 204px; border-radius: 9px; overflow: hidden; background: #0b0c10; box-shadow: 0 0 0 2px var(--rc), 0 18px 34px rgba(0,0,0,.6), 0 0 38px color-mix(in srgb, var(--rc) 35%, transparent); transform-origin: 50% 100%; }
.bnd-hero-card.idle { animation: showcase-tilt 5s var(--glide) infinite alternate; }
@keyframes showcase-tilt { from { transform: perspective(700px) rotateY(-6deg); } to { transform: perspective(700px) rotateY(6deg); } }
.bnd-glints { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent); opacity: 0; animation: glints 2.2s steps(2) infinite; pointer-events: none; }
@keyframes glints { 50% { opacity: .85; } }
.bnd-hero-card.sweep .holo { animation: holo-sweep 1.1s var(--glide) 1; }
.bnd-serial { position: absolute; left: 248px; top: 44px; width: 166px; padding: 12px 12px 12px 14px; background: #07080b; box-shadow: inset 0 0 0 2px #ffd35a, 5px 5px 0 #000; transform: skewX(-8deg); display: grid; gap: 5px; }
.bnd-serial > * { transform: skewX(8deg); }
.bnd-serial span { font: 700 9px/1 var(--body); letter-spacing: .36em; color: rgba(244,246,251,.65); }
.bnd-serial b { font: 800 22px/1 var(--round); background: linear-gradient(180deg, #fff6d0, #ffd35a 45%, #b8862b 56%, #ffe9a8); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.bnd-serial em { font: 800 9px/1.3 var(--body); font-style: normal; letter-spacing: .14em; color: #ff9be6; }
.bnd-note { position: absolute; left: 252px; top: 150px; width: 160px; display: grid; gap: 4px; }
.bnd-note span { font: 900 11px/1 var(--display); letter-spacing: .12em; color: #ffc94a; }
.bnd-note small { font: 600 10px/1.35 var(--body); color: rgba(244,246,251,.6); }
.bnd-vault { position: absolute; left: 20px; top: 12px; font: 900 12px/1 var(--display); letter-spacing: .4em; color: rgba(255,91,216,.8); writing-mode: vertical-rl; transform: rotate(180deg); }
/* The pocket sheet scrolls. The page is a fixed window down to the CTA (top 820)
   and the grid flows inside it, so a set of any size is reachable: at 24 cards the
   grid is 1518px of pockets, and when it was pinned at inset 0 in a 332px box the
   overflow fell outside .scr (overflow: hidden) with nothing to scroll -- about
   fourteen cards were simply unreachable. .col is pointer-events: none with only
   buttons re-enabled, so the scroller has to opt back in to be touchable. */
.bnd-page { position: absolute; left: 12px; right: 12px; top: 392px; height: 408px; transform-origin: 0 50%; overflow-y: auto; overflow-x: hidden; pointer-events: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.bnd-page::-webkit-scrollbar { width: 0; height: 0; }
.bnd-page.no-hero { top: 150px; height: 650px; }
.bnd-page-shadow { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), transparent 60%); pointer-events: none; z-index: 2; opacity: 0; }
/* The padding is the clipping margin for pocket badges (NEW!, xN, FOIL all sit
   outside the pocket box) now that the sheet clips on both axes. */
.bnd-grid { display: grid; grid-template-columns: repeat(3, 110px); grid-auto-rows: 154px; justify-content: space-between; row-gap: 16px; padding: 12px 10px 14px; }
.pocket { position: relative; width: 110px; height: 154px; }
.pocket-outline { position: absolute; inset: -4px; border: 2px dashed rgba(244,246,251,.18); border-radius: 12px; }
.pocket.owned .pocket-outline { border: 2px solid rgba(244,246,251,.1); background: rgba(255,255,255,.02); }
.pocket-card { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #0b0c10; box-shadow: 0 0 0 2px var(--rc), 0 8px 16px rgba(0,0,0,.5); }
.pocket-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.pocket-empty b { font: 800 16px/1 var(--round); color: rgba(244,246,251,.35); }
.pocket-empty span { font: 700 9px/1.3 var(--body); letter-spacing: .18em; color: color-mix(in srgb, var(--rc, #fff) 55%, rgba(244,246,251,.4)); padding: 0 8px; }
.pocket.bonus .pocket-empty b { font-size: 12px; font-family: var(--display); letter-spacing: .12em; color: #ffc94a; }
.pocket.bonus .pocket-outline { border-color: rgba(255,201,74,.35); }
.pocket.bonus.done .pocket-outline { border-style: solid; border-color: #ffc94a; box-shadow: 0 0 18px rgba(255,201,74,.3); }
.pocket-count { position: absolute; right: -6px; top: -8px; padding: 3px 6px; background: #fff; color: #000; font: 800 11px/1 var(--round); font-style: normal; box-shadow: 2px 2px 0 #000; z-index: 3; }
.pocket-foil { position: absolute; left: -6px; bottom: -6px; padding: 3px 6px; font: 900 9px/1 var(--display); font-style: normal; letter-spacing: .12em; color: #000; background: linear-gradient(100deg, #7afcff, #ff5bd8, #ffe45c); z-index: 3; }
.pocket-new { position: absolute; left: -8px; top: -10px; padding: 4px 7px; background: #ff3b4a; color: #fff; font: 900 12px/1 var(--display); font-style: normal; letter-spacing: .08em; transform: rotate(-12deg); box-shadow: 2px 2px 0 #000; z-index: 3; }
.card-fb { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; padding: 6px; gap: 2px; background: linear-gradient(160deg, #1b1e25, #0b0c10); border-radius: inherit; }
.card-fb-art { position: relative; border-radius: 5px; overflow: hidden; background: #101320; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-fb-name { font: 700 10px/1.1 var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-fb-rarity { font: 700 7px/1 var(--body); letter-spacing: .2em; color: var(--rc); }
.card-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5; --hx: 50%;
  background: linear-gradient(115deg, rgba(255,79,216,0) 30%, rgba(255,79,216,.35) 42%, rgba(92,242,255,.35) 50%, rgba(255,211,90,.3) 58%, rgba(92,242,255,0) 70%); background-size: 260% 100%; background-position: var(--hx) 0; }
.holo.strong { opacity: .75; }
.pocket.twinkle .holo { animation: holo-sweep 1s var(--glide) 1; }
@keyframes holo-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.bnd-cta { top: 820px; --accent: var(--paper); }
.insp { position: absolute; inset: 0; pointer-events: auto; display: grid; place-items: center; }
.insp-back { position: absolute; inset: 0; background: #000; opacity: 0; }
.insp .insp-back { background: rgba(3,4,7,.96); }
.insp-tilt { position: relative; transform-style: preserve-3d; margin-top: -60px; }
.insp-card { position: relative; width: min(300px, 70vw); aspect-ratio: 63 / 88; border-radius: 16px; overflow: hidden; background: #0b0c10; box-shadow: 0 0 0 3px var(--rc), 0 30px 60px rgba(0,0,0,.7), 0 0 60px color-mix(in srgb, var(--rc) 30%, transparent); }
.insp-card .card-fb { padding: 12px; gap: 6px; }
.insp-card .card-fb-name { font-size: 20px; }
.insp-card .card-fb-rarity { font-size: 12px; }
.insp-label { position: absolute; left: 0; right: 0; top: calc(50% + min(190px, 35vw + 20px)); display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0; }
.insp-label b { font: 700 24px/1.1 var(--round); }
.insp-rarity { padding: 4px 12px; border: 1px solid var(--rc); color: var(--rc); font: 700 11px/1 var(--body); letter-spacing: .24em; background: color-mix(in srgb, var(--rc) 14%, transparent); }
.insp-label small { font: 700 11px/1 var(--body); letter-spacing: .16em; color: rgba(244,246,251,.7); }
.insp-label em { font: 600 12px/1 var(--body); color: #ff9be6; }
.insp-hint { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-b)); text-align: center; font: 700 10px/1 var(--body); letter-spacing: .3em; color: rgba(244,246,251,.45); }

/* =====================================================================
   Unlock: NEW CHALLENGER
   ===================================================================== */
.ul-bg { background: #030305; overflow: hidden; }
.ul-bg-glow { position: absolute; inset: 0; background: radial-gradient(55% 40% at 50% 46%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 75%), radial-gradient(90% 60% at 50% 110%, rgba(255,45,58,.22), rgba(255,45,58,0) 70%); }
.ul-bg-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.035) 0deg 6deg, transparent 6deg 18deg); animation: holo-spin 60s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 60%); mask-image: radial-gradient(circle, #000 20%, transparent 60%); }
.ul-tape { position: absolute; left: -60px; right: -60px; height: 48px; overflow: hidden; transform-origin: 50% 50%; box-shadow: 0 6px 0 rgba(0,0,0,.5); z-index: 5; }
.ul-tape.a { top: 150px; }
.ul-tape.b { top: 666px; }
.ul-tape-in { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #ff2d3a 0 22px, #0a0a0e 22px 44px); }
.ul-tape-in::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; bottom: 9px; background: #0a0a0e; }
.ul-marquee { position: absolute; left: 0; top: 9px; height: 30px; display: flex; white-space: nowrap; }
.ul-marquee span { font: 900 22px/30px var(--display); font-stretch: 70%; letter-spacing: .14em; color: #ff2d3a; padding-right: 18px; }
.ul-tape.a.run .ul-marquee { animation: marquee-l 3.2s linear infinite; }
.ul-tape.b.run .ul-marquee { animation: marquee-r 3.2s linear infinite; }
@keyframes marquee-l { to { transform: translateX(-33.333%); } }
@keyframes marquee-r { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
.ul-stage { position: absolute; left: 25px; top: 150px; width: 380px; height: 560px; }
.ul-riser { position: absolute; left: 20px; right: 20px; bottom: 0; height: 60px; background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); }
.ul-stage .pt-sil + .ul-riser, .ul-stage .pt { z-index: 1; }
.ul-plate { position: absolute; left: 30px; right: 30px; top: 574px; height: 70px; perspective: 600px; visibility: hidden; z-index: 6; }
.ul-name-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; transform-origin: 50% 50%; }
.ul-name-face b { font: 900 54px/1 var(--display); font-stretch: 62%; letter-spacing: .05em; transform: skewX(-10deg); text-shadow: 0 4px 0 #000, 5px 5px 0 var(--accent); white-space: nowrap; }
.ul-name-face.front b { color: #aeb4ff; text-shadow: 0 4px 0 #000, 5px 5px 0 #3c3f8a; }
.ul-name-face.back { transform: rotateX(90deg); }
.ul-plate.flipped .ul-name-face.back { transform: rotateX(0deg); }
.ul-plate.flipped .ul-name-face.front { opacity: 0; }
.ul-title { position: absolute; left: 0; right: 0; top: 728px; text-align: center; font: 800 14px/1 var(--round); letter-spacing: .16em; color: var(--accent); opacity: 0; text-shadow: 0 2px 0 #000; z-index: 6; }
.ul-title.on { opacity: 1; }
.ul-taunt { position: absolute; left: 24px; right: 24px; top: 752px; padding: 10px 14px; background: rgba(7,8,11,.9); border-left: 4px solid var(--accent); font: 700 15px/1.3 var(--body); opacity: 0; z-index: 6; }
.ul-taunt.on { opacity: 1; }
.ul-tap { position: absolute; left: 0; right: 0; top: 770px; text-align: center; font: 900 38px/1 var(--display); font-stretch: 70%; letter-spacing: .1em; opacity: 0; transition: opacity .2s; text-shadow: 0 3px 0 #000; }
.ul-tap.on { opacity: 1; animation: tap-pulse .7s var(--glide) infinite alternate; }
@keyframes tap-pulse { to { transform: scale(1.12); } }
.ul-roster { position: absolute; right: 16px; top: calc(18px + var(--safe-t)); height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(7,8,11,.85); border: 2px solid rgba(244,246,251,.7); transform: skewX(-10deg); z-index: 7; }
.ul-roster > * { transform: skewX(10deg); }
.ul-roster b { font: 800 14px/1 var(--round); }
.ul-roster em { position: absolute; right: -12px; top: -14px; padding: 3px 6px; background: var(--accent, #ff3b4a); color: #000; font: 900 13px/1 var(--display); font-style: normal; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s var(--pop); }
.ul-roster.plus em { opacity: 1; transform: scale(1) rotate(8deg); }
.ul-col { --accent: inherit; }
.ul-react { position: absolute; left: 14px; top: calc(70px + var(--safe-t)); max-width: 300px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--paper); color: var(--ink); opacity: 0; z-index: 7; transform-origin: 0 50%; clip-path: polygon(0 0, 100% 6%, 97% 100%, 3% 94%); }
.ul-react.on { opacity: 1; }
.ul-react-face { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--accent); }
.ul-react-text { font: 700 14px/1.25 var(--body); }
.ul-token-x { position: absolute; width: 56px; height: 56px; z-index: 9; pointer-events: none; }
.ul-token-y { position: absolute; inset: 0; }
.ul-token { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--accent); box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--accent); }
.ul-nice { top: 832px; left: 168px; right: 24px; opacity: 0; pointer-events: none; }
.ul-nice.on { pointer-events: auto; }
.ul-see { position: absolute; left: 24px; top: 840px; width: 132px; height: 50px; padding: 0 8px; font-size: 13px; letter-spacing: .1em; opacity: 0; pointer-events: none; display: none; }
.ul-see.on { display: inline-flex; pointer-events: auto; }

/* =====================================================================
   Wide screens: the column stays portrait, backdrops go full-bleed.
   ===================================================================== */
@media (min-aspect-ratio: 3/4) {
  .sel-ribbon { left: -200px; }
  .band { left: -4vw; right: -4vw; }
}

/* ---- reduced motion ---- */
.rm .tb-halftone, .rm .tb-holo, .rm .ul-bg-rays, .rm .passer, .rm .cta-sheen, .rm .band-lines, .rm .super-band-lines, .rm .split-focus, .rm .serial-ticker-in { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tb-halftone, .tb-holo, .ul-bg-rays, .passer, .cta-sheen, .band-lines, .super-band-lines, .split-focus, .serial-ticker-in, .chev, .hand, .ul-tap.on, .sel-cursor.idle { animation: none !important; }
}

/* A locked tile never shows a fallback slab: its initial and colour would spoil the reveal. */
.tile.locked .face-slab { display: none; }
.scr-hub:not(.story) .hub-neon { top: calc(200px + var(--safe-t)); }
.scr-hub:not(.story) .hub-say { top: calc(282px + var(--safe-t)); }
.scr-rip.summary .rip-corner { opacity: 0; }

/* =====================================================================
   Wide layout (html.wide, util.js layout): a 1400x800 canvas for landscape
   windows, arranged per screen like a console fighting game. Phone rules
   above stay exactly as they are; everything here is scoped to html.wide.
   --gx / --gy: design px of window beyond the canvas on each side, for
   pieces that bleed to the window's edge. .pcol keeps the phone column
   (the rip's overlays frame PackRip's card, which sizes to height).
   ===================================================================== */
html.wide .col { width: 1400px; height: 800px; margin: -400px 0 0 -700px; }
html.wide .pcol { width: 430px; height: 932px; margin: -466px 0 0 -215px; transform: scale(var(--sp)); }
html.wide .mute { right: calc(18px - var(--gx)); top: calc(18px - var(--gy)); }

/* ---- title: a VS screen ---- */
html.wide .t-panel { left: calc(-1 * var(--gx)); top: calc(-1 * var(--gy)); width: calc(1400px + 2 * var(--gx)); height: calc(800px + 2 * var(--gy)); }
html.wide .t-panel .pt { left: var(--gx); top: var(--gy); }
html.wide .t-left { clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); }
html.wide .t-right { clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }
html.wide .t-left .t-art { background: radial-gradient(50% 60% at 26% 40%, rgba(255,107,31,.22), transparent 70%); }
html.wide .t-right .t-art { background: radial-gradient(50% 60% at 74% 40%, rgba(198,255,61,.14), transparent 70%); }
html.wide .t-slash { left: 698px; top: calc(-1 * var(--gy)); height: calc(800px + 2 * var(--gy)); }
html.wide .t-edges { left: 0; top: calc(-1 * var(--gy)); width: 1400px; height: calc(800px + 2 * var(--gy)); }
html.wide .t-edge { top: -40px; height: calc(100% + 80px); transform: translateX(var(--dx)) rotate(11.86deg); }
html.wide .t-fade { left: calc(-1 * var(--gx)); right: calc(-1 * var(--gx)); bottom: calc(-1 * var(--gy)); height: 280px; }
html.wide .t-mark { top: 150px; }
html.wide .t-mark::before { content: ""; position: absolute; left: 50%; top: 40px; width: 720px; height: 380px; margin-left: -360px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7,8,11,.78), rgba(7,8,11,.45) 55%, rgba(7,8,11,0)); }
html.wide .t-crest { width: 76px; height: 76px; }
html.wide .t-astra { font-size: 176px; }
html.wide .t-wordwrap { width: 400px; }
html.wide .t-black { font-size: 28px; margin-top: 14px; }
html.wide .t-black i { width: 60px; }
html.wide .t-sub { font-size: 14px; margin-top: 18px; }
html.wide .t-start { bottom: 70px; font-size: 30px; }
html.wide .t-hold { bottom: 34px; }

/* ---- select: hero left, roster right ---- */
html.wide .sel-bg-glow { background: radial-gradient(40% 50% at 26% 42%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%); }
html.wide .sel-ribbon { left: calc(-20px - var(--gx)); right: auto; width: calc(820px + var(--gx)); top: 30px; height: 58px; }
html.wide .sel-ribbon-in { padding: 0 34px 0 calc(40px + var(--gx)); }
html.wide .sel-ribbon-text { font-size: 26px; }
html.wide .sel-ribbon-count { font-size: 16px; }
html.wide .sel-back { left: 30px; top: 108px; }
html.wide .sel-stage { left: 150px; top: 24px; width: 487px; height: 780px; }
html.wide .sel-accent { left: 47px; top: 60px; width: 468px; height: 672px; }
html.wide .sel-info { left: 44px; bottom: 64px; width: 340px; }
html.wide .sel-name { font-size: 108px; }
html.wide .sel-name.long { font-size: 86px; }
html.wide .sel-title { font-size: 16px; padding: 6px 12px 7px; margin-top: 10px; }
html.wide .sel-stats { width: 270px; gap: 7px; margin-top: 16px; }
html.wide .sel-stat { height: 30px; grid-template-columns: 66px 1fr; padding: 0 10px; }
html.wide .sel-stat span { font-size: 12px; }
html.wide .sel-stat b { font-size: 16px; }
html.wide .sel-luck i { width: 24px; height: 12px; }
html.wide .sel-bio { width: 300px; max-height: calc(14px * 1.45 * 4); font-size: 14px; line-height: 1.45; -webkit-line-clamp: 4; margin-top: 20px; }
html.wide .sel-roster { left: 720px; top: 150px; width: 640px; height: 380px; }
html.wide .tile-name { padding: 4px 0 5px; font-size: 13px; }
html.wide .tile-lock { inset: 0 0 22px; }
html.wide .tile-lock b { font-size: 46px; }
html.wide .lock-ico { width: 18px; height: 18px; right: 6px; top: 6px; }
html.wide .tile-new { font-size: 11px; padding: 3px 6px; }
html.wide .sel-cursor i { width: 20px; height: 20px; }
html.wide .sel-quote { left: 724px; right: 40px; top: 556px; height: 50px; padding: 0 20px; }
html.wide .sel-quote-text { font-size: 17px; }
html.wide .sel-quote-mark { font-size: 38px; }
html.wide .sel-tip { top: 520px; width: 280px; left: calc(var(--tx, 1040px) - 140px); }
html.wide .sel-lock { left: 740px; right: 56px; top: 660px; height: 78px; font-size: 34px; }
html.wide .super-band { left: calc(-120px - var(--gx)); right: calc(-120px - var(--gx)); top: 470px; height: 190px; }
html.wide .super-name { left: 650px; right: calc(-40px - var(--gx)); top: 462px; font-size: 156px; }
html.wide .super-name small { font-size: 46px; }
html.wide .super-title { left: 664px; top: 414px; font-size: 22px; }
html.wide .super-partner { right: 60px; top: 676px; }
html.wide .super-tagline { left: 664px; top: 690px; font-size: 17px; }
html.wide .super-quote { left: 650px; right: 60px; top: 724px; font-size: 18px; }

/* ---- hub: she stands centre-right behind the counter, packs to her left, menu on the right ---- */
html.wide .hub-far-svg { bottom: calc(50% - (480px - 400px) * var(--s)); }
html.wide .hub-passers { top: calc(50% + (364px - 400px) * var(--s)); }
html.wide .hub-counter { top: calc(50% + (500px - 400px) * var(--s)); }
html.wide .hub-awning { left: calc(-30px - var(--gx)); width: calc(1460px + 2 * var(--gx)); height: 110px; }
html.wide .hub-post { height: 440px; }
html.wide .hub-post.l { left: 150px; }
html.wide .hub-post.r { right: 150px; }
html.wide .hub-neon { left: 250px; top: 110px; }
html.wide .scr-hub:not(.story) .hub-neon { top: 150px; left: 250px; }
html.wide .hub-neon span { font-size: 58px; }
html.wide .hub-char { width: 1400px; height: 700px; }
html.wide .hub-packs { left: 350px; top: -66px; }
html.wide .hub-chalk { left: 1010px; top: 404px; }
html.wide .hub-hud { left: 30px; top: 26px; right: auto; transform: scale(1.18); transform-origin: 0 0; }
html.wide .hub-say { left: 470px; top: 118px; width: 250px; }
html.wide .hub-say-text { font-size: 17px; }
html.wide .hub-actions, html.wide .hub-actions { left: auto; right: 64px; top: 560px; width: 330px; flex-direction: column; flex-wrap: nowrap; row-gap: 14px; }
html.wide .hub-actions .pill-btn { flex: none; height: 52px; font-size: 17px; }
html.wide .hub-actions .hub-battle { flex: none; }
html.wide .hub-cta { left: 470px; right: 470px; top: 640px; height: 76px; font-size: 32px; }
html.wide .hub-cta-sub { top: 728px; font-size: 11px; }
html.wide .hub-hint { left: 526px; top: 604px; }
html.wide .hub-banner { top: 330px; }
html.wide .dlg { left: 280px; right: 280px; top: 580px; height: 168px; }
html.wide .dlg-text { font-size: 21px; left: 32px; right: 40px; top: 38px; }

/* ---- binder: the vault showcase on the left, the whole page of pockets on the right ---- */
html.wide .bnd-bg-glow { background: radial-gradient(26% 40% at 16% 40%, rgba(255,91,216,.13), rgba(255,91,216,0) 70%); }
html.wide .bnd-head { left: 40px; right: 120px; top: 26px; height: 56px; }
html.wide .bnd-title b { font-size: 38px; }
html.wide .bnd-title span { font-size: 12px; }
html.wide .bnd-count { font-size: 16px; }
html.wide .bnd-count b { font-size: 32px; }
html.wide .bnd-bar { left: 40px; right: 40px; top: 94px; }
html.wide .bnd-bar span { font-size: 11px; }
html.wide .bnd-bar b { font-size: 15px; }
html.wide .bnd-showcase { left: 0; right: auto; width: 420px; top: 128px; height: 580px; }
html.wide .bnd-spot { left: 50%; top: -10px; width: 440px; height: 440px; margin-left: -210px; }
html.wide .bnd-hero-card { left: 94px; top: 26px; width: 232px; height: 324px; border-radius: 13px; }
html.wide .bnd-stand { left: 40px; top: 348px; width: 340px; height: 46px; }
html.wide .bnd-serial { left: 72px; top: 418px; width: 276px; padding: 14px 16px; gap: 7px; }
html.wide .bnd-serial span { font-size: 11px; }
html.wide .bnd-serial b { font-size: 30px; }
html.wide .bnd-serial em { font-size: 11px; }
html.wide .bnd-note { left: 80px; top: 534px; width: 270px; }
html.wide .bnd-note span { font-size: 13px; }
html.wide .bnd-note small { font-size: 12px; }
html.wide .bnd-vault { left: 30px; top: 30px; font-size: 14px; }
html.wide .bnd-page { left: 440px; right: 30px; top: 124px; height: 580px; }
html.wide .bnd-page.no-hero { left: 30px; top: 124px; height: 580px; }
html.wide .bnd-grid { grid-template-columns: repeat(auto-fill, 132px); grid-auto-rows: 184px; justify-content: space-evenly; column-gap: 18px; row-gap: 20px; }
html.wide .pocket { width: 132px; height: 184px; }
html.wide .pocket-empty b { font-size: 19px; }
html.wide .pocket-empty span { font-size: 10px; }
html.wide .bnd-cta { left: 490px; right: 490px; top: 718px; height: 62px; }
html.wide .insp-card { width: min(34vw, 40vh); }
html.wide .insp-label { top: calc(50% - 60px + 28vh + 18px); }

/* ---- unlock: the challenger left of centre, the reveal on the right ---- */
html.wide .ul-bg-glow { background: radial-gradient(40% 50% at 38% 46%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 75%), radial-gradient(90% 60% at 50% 110%, rgba(255,45,58,.22), rgba(255,45,58,0) 70%); }
html.wide .ul-tape { left: calc(-140px - var(--gx)); right: calc(-140px - var(--gx)); height: 56px; }
html.wide .ul-tape.a { top: 96px; }
html.wide .ul-tape.b { top: 690px; }
html.wide .ul-stage { left: 290px; top: 64px; width: 486px; height: 717px; }
html.wide .ul-plate { left: 780px; right: 60px; top: 296px; height: 96px; }
html.wide .ul-name-face b { font-size: 84px; }
html.wide .ul-title { left: 780px; right: 60px; top: 404px; font-size: 18px; }
html.wide .ul-taunt { left: 800px; right: 80px; top: 440px; font-size: 18px; padding: 12px 18px; }
html.wide .ul-tap { left: 780px; right: 60px; top: 420px; font-size: 56px; }
html.wide .ul-roster { right: calc(84px - var(--gx)); top: 22px; }
html.wide .ul-react { left: 40px; top: 36px; max-width: 360px; }
html.wide .ul-see { left: 820px; top: 540px; width: 180px; height: 58px; font-size: 15px; }
html.wide .ul-nice { left: 1030px; right: 90px; top: 534px; height: 70px; z-index: 7; }
html.wide .ul-see { z-index: 7; }

/* ---- rip: PackRip's card sits mid-window, so its overlays keep the phone column (.pcol);
   the screen's corner chrome moves out to the window's corners ---- */
html.wide .rip-corner { left: calc(18px - var(--pgx)); top: 18px; }
html.wide .rip-hype { left: calc(76px - var(--pgx)); top: 26px; }
html.wide .rip-binder-btn { right: calc(24px - var(--pgx)); }
/* The city map is a persistent hub destination, alongside collection and battles. */
.hub-actions .hub-city { flex: 1 0 100%; border-color: #72e5cf; color: #b7fff0; }
html.wide .hub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.wide .hub-actions .hub-battle, html.wide .hub-actions .hub-city { grid-column: 1 / -1; }

.pocket-grade{position:absolute;bottom:8px;left:8px;z-index:5;background:#e5d9a5;color:#172522;border:1px solid #fff1b5;padding:4px 7px;border-radius:4px;font-size:10px;font-style:normal;font-weight:800}