/* The styles of vault.html, in a file of their own so the page stays small (tools/page-assets.js). */
@font-face {
  font-family: "Hacked";
  src: url("/fonts/HACKED.woff2?v=c2b61b1d67") format("woff2"), url("/fonts/HACKED.ttf?v=db3080d82f") format("truetype");
  font-display: swap;
}

:root {
  --bg: #050006;
  --ink: #ffffff;
  --dim: rgba(255,255,255,.8);
  --ghost: rgba(255,255,255,.7);
  --dead: rgba(255,255,255,.58);
  --pink: #ff2492;
  --hot: #ff67bd;
  --soft: #ffd1ee;
  --green: #7dff2b;
  --mint: #caffab;
  --cyan: #00ffd5;
  --violet: #9a3cff;
  --gold: #fffd78;
  --line: rgba(255,36,146,.33);
  --cut-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 28px 100%, 0 calc(100% - 26px));
  --cut-tile: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  --max: 1260px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Hacked", Impact, "Arial Black", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* the five rarities, as the game colours them */
  --r-common: #cfd6e6; --r-rare: #4da3ff; --r-epic: #b06bff; --r-legendary: #ffd84d; --r-mythic: #ff4fa3;
  /* what each rarity splits into when its edge tears: the far side of the wheel from it */
  --o-common: #ffd9a8; --o-rare: #ffa94d; --o-epic: #a8ff6b; --o-legendary: #4d8cff; --o-mythic: #4fffb4;
  /* a mystery pack, before it says what it is */
  --r-mystery: #aab2dc; --o-mystery: #dcd4aa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; color: var(--ink);
  background:
    radial-gradient(circle at 18% -8%, rgba(255,36,146,.28), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(154,60,255,.14), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(96,0,90,.22), transparent 62%),
    var(--bg);
  font-family: var(--sans);
  overflow-x: hidden;
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
body::after {
  z-index: 1000; opacity: .11;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 4px);
  background-size: 100% 4px; mix-blend-mode: screen;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }
[hidden] { display: none !important; }
body.sealed { overflow: hidden; }
/* Filled from custodia's answers, the vault showed its empty frame first and then jumped as they landed. What
   they fill shows once, filled; the hero above it never waits. A slow answer shows the counts' "Loading" after a
   moment (html.vault-slow), and what is below them still waits, since it would only be an empty frame. */
html.vault-pending:not(.vault-slow) .whoami, html.vault-pending :is(main > .block, body > footer) { opacity: 0; }
/* Only after waiting unseen: the kept view is simply there */
html.vault-fade :is(.whoami, main > .block, body > footer) { transition: opacity .25s ease; }

.font-hacked,
.btn,
.hero-title,
.section-title { font-family: "Hacked", Impact, "Arial Black", sans-serif; letter-spacing: .035em; }

/* ---------- buttons ---------- */
.btn {
  --btn-line: rgba(255,36,146,.72); --btn-bg: rgba(255,36,146,.15);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 18px; border: 1px solid var(--btn-line);
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 48%), var(--btn-bg);
  color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: .18em;
  clip-path: var(--cut-sm); cursor: pointer; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(125,255,43,.78); box-shadow: 0 0 28px rgba(255,36,146,.18); }
.btn.green { --btn-line: rgba(125,255,43,.64); --btn-bg: rgba(125,255,43,.12); color: var(--mint); }
.btn.dark { --btn-line: rgba(255,255,255,.18); --btn-bg: rgba(0,0,0,.46); color: rgba(255,255,255,.84); }
.btn.tiny { min-height: 36px; padding: 9px 11px; font-size: 13px; letter-spacing: .14em; }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 76px) 0 clamp(18px, 3vw, 30px); }
.kicker { margin: 0 0 10px; color: var(--green); font: 900 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; }
.hero-title { margin: 0; font-size: clamp(38px, 7vw, 76px); line-height: .96; text-transform: uppercase; text-shadow: 0 0 34px rgba(255,36,146,.45); }
.hero-title span:not(.lead) { color: var(--pink); }
.hero-copy { max-width: 62ch; margin: 18px 0 0; color: var(--dim); font-size: 15px; line-height: 1.6; }
.hero-more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: 14px; }
.hero-more a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.hero-more a:hover { color: var(--mint); }
.whoami { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); background: rgba(0,0,0,.42); clip-path: var(--cut-sm); font: 700 12px var(--mono); letter-spacing: .08em; color: var(--dim); }
.whoami b { color: #fff; }
.whoami .stat { display: inline-flex; gap: 8px; align-items: baseline; }
/* Signed out: the same card as the profile's gate (styles/profile.css .card and .gate) */
.gate {
  position: relative; padding: 50px 20px; text-align: center;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%), rgba(10,0,15,.72);
  box-shadow: 0 0 0 1px rgba(255,36,146,.1), 0 24px 70px rgba(0,0,0,.42), 0 0 54px rgba(255,36,146,.19);
  clip-path: var(--cut);
}
.gate-title { margin: 0 0 6px; font: 400 clamp(20px, 3vw, 26px) var(--display); letter-spacing: .035em; }
.gate p { color: var(--dim); max-width: 46ch; margin: 10px auto 22px; line-height: 1.55; }
.notice { margin: 14px 0 0; padding: 12px 16px; border: 1px solid rgba(255,36,146,.4); background: rgba(255,36,146,.08); color: var(--soft); font: 600 13px var(--sans); clip-path: var(--cut-sm); }

/* ---------- sections ---------- */
section.block { padding: clamp(22px, 4vw, 44px) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-title { margin: 0; font-size: clamp(22px, 3.4vw, 34px); text-transform: uppercase; }
.section-title small { display: block; margin-top: 6px; font: 800 13px var(--mono); letter-spacing: .24em; color: var(--green); }
.section-sub { margin: 0; color: var(--ghost); font: 600 12px var(--mono); letter-spacing: .06em; }

/* ---------- the unopened cards: lifted from the game's drop pack ---------- */
.pk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2.2vw, 22px); perspective: 1100px; margin-bottom: 20px; }
.pk-card { --w: clamp(112px, 16vw, 160px); position: relative; width: var(--w); height: calc(var(--w) * 1.42); padding: 0; border: 0; background: none; cursor: pointer; animation: pkDeal .55s var(--d) both cubic-bezier(.2,.9,.3,1.25); }
@keyframes pkDeal { from { opacity: 0; transform: translateY(46px) rotate(-8deg) scale(.8); } to { opacity: 1; transform: none; } }
.pk-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); z-index: 2; }
.pk-card.open .pk-inner { transform: rotateY(180deg); }
.pk-back, .pk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pk-back { background: linear-gradient(145deg, #1d1028, #0b0b14); border: 2px solid color-mix(in srgb, var(--rc) 55%, #333); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 0 22px color-mix(in srgb, var(--rc) 22%, transparent); }
.pk-back::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: repeating-linear-gradient(60deg, transparent 0 10px, rgba(255,255,255,.035) 10px 11px), repeating-linear-gradient(-60deg, transparent 0 10px, rgba(255,255,255,.035) 10px 11px); }
.pk-back i { position: relative; font-style: normal; font-size: 40px; color: var(--rc); text-shadow: 0 0 14px var(--rc); opacity: .85; animation: vmPulse 2.4s ease-in-out infinite; }
.pk-back small { position: relative; margin-top: 10px; font: 800 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--rc); opacity: .8; }
@keyframes vmPulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.pk-card:hover:not(.open) .pk-back { box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 26px color-mix(in srgb, var(--rc) 35%, transparent); }
.pk-card.charging .pk-back { animation: pkShake .11s linear infinite; box-shadow: 0 0 46px var(--rc), inset 0 0 44px color-mix(in srgb, var(--rc) 60%, transparent); }
@keyframes pkShake { 0% { transform: none; } 25% { transform: translate(-2px,1px) rotate(-1.6deg); } 50% { transform: translate(2px,-1px) rotate(1.6deg); } 75% { transform: translate(-1px,-2px); } 100% { transform: none; } }
.pk-face { transform: rotateY(180deg); padding: 10px; gap: 4px; text-align: center; background: radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--rc) 32%, #12101c), #0b0b14 72%); border: 2px solid var(--rc); box-shadow: 0 0 28px color-mix(in srgb, var(--rc) 60%, transparent); }
.pk-face em { font: 900 12.5px var(--mono); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--rc); }
.pk-face .pk-thumb { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 6px; border: 2px solid var(--rc); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--rc) 20%, transparent); }
.pk-g { font-style: normal; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.1; text-shadow: 0 0 14px currentColor; }
.pk-face b { font: 800 12px/1.2 var(--mono); color: #fff; }
.pk-face small { font: 600 13px var(--sans); color: rgba(255,255,255,.62); }
.pk-card.r-mythic.open .pk-face { animation: pkHue 3s linear infinite; }
@keyframes pkHue { to { filter: hue-rotate(360deg); } }
.pk-fx { position: absolute; left: 50%; top: 50%; width: 270%; height: 270%; transform: translate(-50%,-50%); pointer-events: none; z-index: 1; }
.pk-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pk-fx polyline { fill: none; stroke: var(--rc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--rc)) drop-shadow(0 0 7px var(--rc)); stroke-dasharray: 230; stroke-dashoffset: 230; animation: pkBolt 1.15s calc(var(--k) * .035s) ease-out forwards; }
@keyframes pkBolt { 0% { stroke-dashoffset: 230; opacity: 1; } 24% { stroke-dashoffset: 0; opacity: 1; } 34% { opacity: .25; } 44% { opacity: 1; } 56% { opacity: .4; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pk-rays { position: absolute; inset: 16%; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 70%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%); animation: pkRays 1.5s ease-out forwards, pkSpin 7s linear infinite; }
.pk-card.r-legendary .pk-rays, .pk-card.r-mythic .pk-rays { animation: pkRaysBig 1.5s ease-out forwards, pkSpin 4s linear infinite; }
@keyframes pkRays { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: .18; transform: scale(1); } }
@keyframes pkRaysBig { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: .45; transform: scale(1.08); } }
@keyframes pkSpin { to { rotate: 360deg; } }
.pk-fx i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); opacity: 0; animation: pkSpark var(--t) ease-out forwards; }
@keyframes pkSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)); } }
.pk-flash { position: fixed; inset: 0; z-index: 97; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, var(--rc, #fff), transparent 70%); }
.pk-flash.go { animation: pkFlash .75s ease-out; }
@keyframes pkFlash { 0% { opacity: 0; } 14% { opacity: .75; } 100% { opacity: 0; } }
.pk-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
/* a mystery pack: no rarity on its back until it opens, then its colour runs through them all */
.pk-card.mystery .pk-back { border-color: var(--r-mystery); animation: pkMyst 3.2s linear infinite; }
.pk-card.mystery .pk-back i { font-family: "Hacked", Impact, "Arial Black", sans-serif; font-size: 54px; }
.pk-card.mystery.charging .pk-back { animation: pkShake .11s linear infinite; }
@keyframes pkMyst {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--r-rare) 45%, transparent); }
  25% { box-shadow: 0 0 22px color-mix(in srgb, var(--r-epic) 45%, transparent); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--r-legendary) 45%, transparent); }
  75% { box-shadow: 0 0 22px color-mix(in srgb, var(--r-mythic) 45%, transparent); }
}
.pk-card.rolling .pk-back { animation: none; border-color: var(--rc); box-shadow: 0 0 40px var(--rc), inset 0 0 36px color-mix(in srgb, var(--rc) 45%, transparent); transition: border-color .08s linear, box-shadow .08s linear; }

/* ---------- the way in: the page says how many wait, the opening happens elsewhere ---------- */
.band { position: relative; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); width: 100%; padding: clamp(18px, 3vw, 32px) clamp(20px, 3.4vw, 38px); border: 1px solid color-mix(in srgb, var(--r-mystery) 60%, transparent); background: linear-gradient(115deg, rgba(255,36,146,.2), rgba(8,4,16,.74) 44%, rgba(154,60,255,.26)); clip-path: var(--cut); color: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(64deg, transparent 0 13px, rgba(255,255,255,.04) 13px 14px); }
.band::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.17), transparent); animation: bandSheen 3.8s ease-in-out infinite; }
/* moved, not placed: an animated left is a layout shift every frame. 450% of its own 40% is the band's 180% */
@keyframes bandSheen { 0% { transform: none; } 55%, 100% { transform: translateX(450%); } }
.band:hover { transform: translateY(-2px); border-color: var(--pink); box-shadow: 0 0 44px rgba(255,36,146,.3); }
.band-n { position: relative; font: 400 clamp(42px, 7vw, 70px)/.86 var(--display); color: #fff; text-shadow: 0 0 28px rgba(255,36,146,.8); }
.band-t { position: relative; flex: 1; font: 900 clamp(12px, 1.6vw, 16px) var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.band-go { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 19px; border: 1px solid rgba(125,255,43,.6); background: rgba(125,255,43,.12); color: var(--mint); font: 900 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.band-go i { font-style: normal; animation: bandNudge 1.5s ease-in-out infinite; }
@keyframes bandNudge { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }

/* ---------- the opening screen: the packs, and nothing else ---------- */
.ov { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; align-content: center; gap: clamp(14px, 3vh, 30px); padding: clamp(16px, 4vw, 46px); overflow: hidden auto; overscroll-behavior: contain; }
.ov-sky { position: fixed; inset: 0; background: radial-gradient(circle at 50% 44%, rgba(74,0,84,.6), rgba(2,0,5,.97) 64%), rgba(2,0,5,.97); backdrop-filter: blur(16px); transition: opacity .45s ease; }
.ov.through .ov-sky { opacity: 0; }
.ov .pk-row, .ov .pk-actions, .ov-left { position: relative; }
.ov-x { position: fixed; top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px); z-index: 3; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: rgba(255,255,255,.66); font-size: 21px; line-height: 1; cursor: pointer; transition: color .18s ease, border-color .18s ease, opacity .3s ease; }
.ov-x:hover { color: #fff; border-color: var(--pink); }
/* while a reward is on the screen nothing else on it competes */
.ov.busy .pk-row, .ov.busy .pk-actions, .ov.busy .ov-left, .ov.through .ov-x { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.ov-left { font: 900 13px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.ov .pk-row { margin: 0; max-width: 1100px; }
.ov .pk-card { --w: clamp(130px, 19vw, 206px); }
.ov .pk-card.gone { animation: none; opacity: 0; transition: opacity .3s ease; }

/* the reward once it is out: it takes the screen, then it goes home to the collection */
.ov-stage { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.ov-art { position: fixed; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; transform-origin: 50% 50%; display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 14px); width: min(80vw, 66vh); will-change: transform, opacity; }
.ov-art .ov-glow { position: absolute; inset: -18%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 50%, transparent), transparent 62%); filter: blur(34px); }
.ov-frame { position: relative; display: block; width: 100%; border-radius: 14px; border: 2px solid var(--rc); background: #06040c; box-shadow: 0 0 74px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 30px color-mix(in srgb, var(--rc) 22%, transparent); }
.ov-frame .shot { display: block; width: 100%; max-height: 68vh; object-fit: contain; border-radius: 12px; }
/* no picture: the drawn card is the whole of it, and it brings its own frame */
/* A drawn card (a favor, a persona, a character) brings its own frame and its own width, so the
   wrapper has to shrink to it and sit in the middle; left to itself it stayed full width, which
   put the card on the left and the gloss out in the empty half beside it. */
.ov-frame.bare { display: grid; place-items: center; width: 100%; border: 0; background: none; box-shadow: none; }
/* The drawn card takes the column's width and keeps a card's shape. It has to be named by both
   its classes: .sc-token sizes itself from a height of at least 250px for the showcase, and left
   to that it grew wider than the column and hung out of the side of it. */
.ov-frame.bare .sc-plate.sc-token { width: 100%; height: auto; max-height: 52vh; aspect-ratio: 1 / 1.42; }
.ov-frame.bare .ov-shine { display: none; }
/* The edge of a good one never sits still. Three things happen to it at once, and each one is
   turned up a rung at a time: it wobbles, something runs around it, and it tears. */
.ov-frame.wig { animation: ovWig var(--wig, 5s) ease-in-out infinite; }
@keyframes ovWig {
  0%, 100% { border-radius: 14px; rotate: 0deg; }
  16% { border-radius: 19px 11px 16px 13px / 12px 18px 11px 17px; rotate: .16deg; }
  33% { border-radius: 11px 18px 12px 17px / 17px 11px 18px 12px; rotate: -.2deg; }
  52% { border-radius: 17px 13px 19px 11px / 11px 16px 13px 19px; rotate: .12deg; }
  71% { border-radius: 12px 17px 11px 18px / 18px 12px 17px 11px; rotate: -.14deg; }
  88% { border-radius: 16px 14px 13px 16px / 14px 16px 15px 13px; rotate: .07deg; }
}
/* a second edge in the colour opposite it, half a beat behind, so the line reads as two */
.ov-wob { position: absolute; inset: -4px; border: 2px solid color-mix(in srgb, var(--op, var(--cyan)) 70%, transparent); border-radius: 16px; pointer-events: none; opacity: var(--wob, .5); animation: ovWob var(--wigb, 3.4s) ease-in-out infinite; }
@keyframes ovWob {
  0%, 100% { translate: 0 0; border-radius: 16px; }
  22% { translate: 2px -1px; border-radius: 21px 13px 18px 15px / 14px 20px 13px 19px; }
  48% { translate: -2px 2px; border-radius: 13px 20px 14px 19px / 19px 13px 20px 14px; }
  74% { translate: 1px 1px; border-radius: 19px 15px 21px 13px / 13px 18px 15px 21px; }
}
/* and a light that runs the whole way round, faster the better it is */
.ov-chase { position: absolute; inset: -3px; padding: 3px; border-radius: 17px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ov-chase i { position: absolute; inset: -60%; background: conic-gradient(transparent 0 64%, color-mix(in srgb, var(--rc) 75%, #fff) 76%, #fff 81%, color-mix(in srgb, var(--op, #fff) 80%, transparent) 86%, transparent 94%); animation: pkSpin var(--chase, 2.6s) linear infinite; }
.ov-rar { font: 900 clamp(12px, 1.5vw, 14px) var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 20px var(--rc); }
.ov-name { font: 800 clamp(17px, 2.6vw, 28px)/1.08 var(--sans); letter-spacing: .01em; text-transform: uppercase; text-align: center; color: #fff; }

/* ---------- she says something about it before it goes in ---------- */
.ov-talk { animation: ovTalkIn .5s .12s ease both; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(680px, 92vw); min-height: 0; padding: 12px 0 clamp(10px, 2vh, 18px); }
.ov-said { display: grid; gap: 8px; justify-items: stretch; width: 100%; }
.ov-line { margin: 0; padding: 11px 15px; border: 1px solid color-mix(in srgb, var(--rc, var(--pink)) 45%, transparent); border-left-width: 3px; background: rgba(8,4,16,.72); color: #fff; font: 500 14.5px/1.5 var(--sans); text-wrap: pretty; }
.ov-line.you { border-color: rgba(255,255,255,.22); border-left-width: 1px; border-right-width: 3px; margin-left: clamp(20px, 12%, 90px); background: rgba(255,255,255,.05); color: var(--dim); font-size: 13.5px; }
.ov-line.wait { color: var(--ghost); }
.ov-line.wait::after { content: "…"; animation: ovWait 1.2s steps(4) infinite; }
@keyframes ovWait { 0% { content: "."; } 33% { content: ".."; } 66% { content: "…"; } }
.ov-say { display: flex; gap: 8px; width: 100%; }
.ov-say input { flex: 1; min-width: 0; padding: 10px 13px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: #fff; font: 500 14px var(--sans); }
.ov-say input:focus { outline: none; border-color: var(--rc, var(--pink)); }
.ov-note { margin: 0; color: var(--ghost); font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.ov-note.cost { color: var(--gold); }
/* going back to the vault is a fade, not a cut: the tile it just landed on is already lit */
.ov.leaving { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
/* While she talks the reward stops being a layer over the screen and becomes the top of a
   column that is exactly the window: the card, then her words, then the way to answer and the
   way out. Nothing in it may grow past the bottom, so when there is more said than there is
   room for, it is the words that scroll -- the card above them and the buttons under them stay
   where they are. Her words used to float over the card instead, and covered its name. */
.ov.talking { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2vh, 22px); overflow: hidden; }
.ov.talking .ov-art { flex: 0 0 auto; position: static; translate: none; width: min(62vw, 34vh); }
.ov.talking .ov-talk { flex: 0 1 auto; }
/* what she said is the only part that gives: the way to answer and the way out never move */
.ov-talk > .ov-say, .ov-talk > .ov-note, .ov-talk > .btn { flex: none; }
/* the cards are done with: faded is not enough, they still held their row and pushed her off */
.ov.talking .pk-row, .ov.talking .pk-actions, .ov.talking .ov-left { display: none; }
.ov.talking .ov-art .shot { max-height: 34vh; }
.ov.talking .ov-art .ov-glow { display: none; }
@keyframes ovTalkIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ov-said { flex: 0 1 auto; min-height: 0; padding-right: 8px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--rc, var(--pink)) 55%, transparent) transparent; }
/* a drawn card is taller than a photograph; while she talks it gives way to her */
.ov.talking .ov-frame.bare .sc-plate.sc-token { max-height: 34vh; }

/* ---------- what a rarity is worth the moment it lands ---------- */
/* the gloss that runs across the picture as it arrives; the rarer it is, the more it keeps coming */
.ov-shine { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; overflow: hidden; }
.ov-shine::before { content: ""; position: absolute; inset: -30% -60%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 46%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.14) 54%, transparent 62%); translate: -80% 0; animation: ovShine 1.5s .3s ease-out var(--shines, 1) both; }
@keyframes ovShine { to { translate: 80% 0; } }
/* the ring that goes out of it, the spokes behind it, the beams past them, the whole wheel for a mythic */
.ov-fxback, .ov-fxfront { position: fixed; inset: 0; pointer-events: none; overflow: hidden; transition: opacity .3s ease; }
.ov-fxback { z-index: 1; }
.ov-fxfront { z-index: 3; }
.ov-ring { position: absolute; left: 50%; top: 50%; width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin; border: var(--rw, 3px) solid var(--rcol, var(--rc)); border-radius: 50%; opacity: 0; box-shadow: 0 0 46px color-mix(in srgb, var(--rcol, var(--rc)) 75%, transparent), inset 0 0 46px color-mix(in srgb, var(--rcol, var(--rc)) 40%, transparent); animation: ovRing 1.1s var(--d, 0s) cubic-bezier(.12,.76,.28,1) forwards; }
@keyframes ovRing { 0% { opacity: .95; transform: scale(.12); } 70% { opacity: .45; } 100% { opacity: 0; transform: scale(2.7); } }
.ov-rays { position: absolute; inset: -25%; opacity: 0; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 62%, transparent) 0 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 9%, #000 28%, transparent 68%); mask: radial-gradient(circle at 50% 50%, transparent 9%, #000 28%, transparent 68%); animation: ovRays 1.5s ease-out forwards, pkSpin 26s linear infinite; }
@keyframes ovRays { 0% { opacity: 0; transform: scale(.4); } 26% { opacity: .62; } 100% { opacity: var(--rays, .18); transform: scale(1); } }
.ov-beams { position: absolute; inset: -32%; opacity: 0; background: repeating-conic-gradient(from 12deg, color-mix(in srgb, var(--op, #fff) 78%, transparent) 0 1.1deg, transparent 1.1deg 45deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 32%, transparent 80%); mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 32%, transparent 80%); animation: ovRays 1.9s .12s ease-out forwards, pkSpin 44s linear infinite reverse; }
/* the game's vault flash: every rarity's colour at once, turning */
.ov-conic { position: absolute; inset: -20%; mix-blend-mode: screen; opacity: 0; background: conic-gradient(from 0deg, #ffd84d, #ff4fa3, #b06bff, #4dffe6, #ffd84d); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 6%, #000 24%, transparent 74%); mask: radial-gradient(circle at 50% 50%, transparent 6%, #000 24%, transparent 74%); animation: ovVault 2.3s ease-out forwards; }
@keyframes ovVault { 0% { opacity: 0; transform: scale(.25) rotate(0); } 10% { opacity: .82; } 55% { opacity: .5; } 100% { opacity: 0; transform: scale(2.4) rotate(190deg); } }
/* sparks off the edge, and glitter coming down over everything */
.ov-spark i { position: absolute; left: 50%; top: 50%; width: calc(var(--ps) * var(--len, 1)); height: var(--ps); margin: calc(var(--ps) / -2) 0 0 calc(var(--ps) / -2); border-radius: calc(var(--ps) / 2); background: linear-gradient(90deg, transparent, var(--sc)); box-shadow: 0 0 12px var(--sc); opacity: 0; animation: ovSpark var(--t) var(--d) cubic-bezier(.08,.72,.3,1) forwards; }
/* the colour of the thing hangs in the room while it is on the screen */
.ov-aura { position: absolute; inset: -30%; opacity: 0; background: radial-gradient(38% 30% at 30% 34%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 70%), radial-gradient(34% 28% at 70% 66%, color-mix(in srgb, var(--op, var(--rc)) 45%, transparent), transparent 70%); filter: blur(40px); animation: ovAura 1.2s ease-out forwards, pkSpin var(--spin, 26s) linear infinite; }
@keyframes ovAura { to { opacity: var(--aura, .5); } }
@keyframes ovSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(6vmin) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.25); } }
/* the air does not settle while a reward is up: sparks come off its edge, embers go up past it,
   dust turns over in the dark, and on a good one the room falls into it as it lands */
.ov-p { position: fixed; pointer-events: none; border-radius: 50%; background: var(--sc); box-shadow: 0 0 10px var(--sc); opacity: 0; }
.ov-p.edge { animation: ovEdge var(--t) cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes ovEdge { 0% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: var(--x) var(--y); scale: .2; } }
.ov-p.ember { border-radius: 1.5px; animation: ovEmber var(--t) linear forwards; }
@keyframes ovEmber { 0% { opacity: 0; translate: 0 0; } 14% { opacity: .9; } 100% { opacity: 0; translate: var(--x) var(--y); } }
.ov-p.dust { animation: ovDust var(--t) ease-in-out forwards; }
@keyframes ovDust { 0%, 100% { opacity: 0; scale: .2; } 50% { opacity: .9; scale: 1; } }
.ov-p.fall { animation: ovDrop var(--t) cubic-bezier(.5,0,.85,.4) forwards; }
@keyframes ovDrop { 0% { opacity: 0; translate: 0 0; scale: 1.4; } 20% { opacity: 1; } 100% { opacity: 0; translate: var(--x) var(--y); scale: .2; } }
.ov-glit i { position: absolute; top: -10vh; width: var(--gw); height: var(--gh); background: var(--sc); box-shadow: 0 0 9px var(--sc); opacity: 0; animation: ovFall var(--t) var(--d) linear forwards; }
@keyframes ovFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 9% { opacity: .95; } 100% { opacity: 0; transform: translateY(124vh) rotate(var(--sp)); } }
/* a mythic shakes the frame and wears every colour in its name */
.ov-frame.quake { animation: ovQuake .52s steps(2) 4; }
/* a mythic shakes while it is still wobbling: both, or the shake would switch the wobble off */
.ov-frame.wig.quake { animation: ovWig var(--wig, 5s) ease-in-out infinite, ovQuake .52s steps(2) 4; }
@keyframes ovQuake { 0%, 100% { translate: 0 0; } 25% { translate: -5px 3px; } 50% { translate: 5px -4px; } 75% { translate: -3px -2px; } }
.ov-art.r-legendary .ov-name, .ov-art.r-mythic .ov-name { background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ovSheen 3s linear infinite; }
.ov-art.r-legendary .ov-name { background-image: linear-gradient(90deg, #fff, var(--rc), #fff, var(--rc), #fff); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 70%, transparent)); }
.ov-art.r-mythic .ov-name { background-image: linear-gradient(90deg, #ffd84d, #ff4fa3, #b06bff, #4dffe6, #ffd84d); filter: drop-shadow(0 0 18px rgba(255,79,163,.65)); }
@keyframes ovSheen { to { background-position: 300% 0; } }
/* the edge tears the way the showcase's does, on the rarities worth tearing for */
.ov-frame::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--rc); border-radius: 14px; pointer-events: none; opacity: var(--g-ring, 0); clip-path: inset(var(--g-ring-t, 0) 0 var(--g-ring-b, 100%) 0); transform: translateX(var(--g-ring-x, 0)); filter: drop-shadow(var(--g-split, 0px) 0 var(--op, var(--cyan))) drop-shadow(calc(var(--g-split, 0px) * -1) 0 color-mix(in srgb, var(--rc) 70%, #fff)); }
.ov-frame .sc-fx b { border-radius: 14px; }
/* where it lands: the tile takes the hit */
.tile.landed { animation: tileLand .9s ease-out; }
@keyframes tileLand { 0% { box-shadow: 0 0 0 0 var(--rc); } 18% { box-shadow: 0 0 44px 6px var(--rc); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the creator's bench: packs handed to myself, to see the opening screen as often as I like */
.adminbar.bench { border-color: rgba(125,255,43,.34); }
.adminbar.bench b { color: var(--mint); }
.adminbar.bench .ed-check { margin: 0; color: var(--dim); font: 600 12px var(--sans); }
.tile-back { position: absolute; right: 8px; bottom: 8px; z-index: 3; padding: 4px 8px; border: 1px solid rgba(255,61,95,.55); background: rgba(24,2,8,.86); color: #ff9db0; font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.tile-back:hover { border-color: #ff3d5f; color: #fff; }
/* whether an opened picture goes into InVer_OS on their PC; on unless they switch it off */
.tile-prog { position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.74); color: var(--ghost); font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.tile-prog i { position: relative; width: 22px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.18); transition: background .15s; }
.tile-prog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tile-prog[aria-checked="true"] { border-color: rgba(125,255,43,.5); color: var(--mint); }
.tile-prog[aria-checked="true"] i { background: rgba(125,255,43,.55); }
.tile-prog[aria-checked="true"] i::after { transform: translateX(10px); }
.tile-prog:hover, .tile-prog:focus-visible { border-color: #fff; outline: none; }
.tile-prog.busy { opacity: .55; pointer-events: none; }
.tile-prog.err { border-color: #ff3d5f; color: #ff9db0; }

/* ---------- the collection ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); color: var(--dim); font: 800 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--pink); color: #fff; background: rgba(255,36,146,.16); box-shadow: 0 0 14px rgba(255,36,146,.25); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.tile { --rc: var(--r-common); position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid color-mix(in srgb, var(--rc) 38%, #1b1b26); background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 10%, #0b0b14), #07060c); clip-path: var(--cut-tile); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.tile.owned { border-color: color-mix(in srgb, var(--rc) 82%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 15%, #0b0b14), #07060c); }
.tile:hover { transform: translateY(-3px); border-color: var(--rc); }
.tile-art { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: rgba(0,0,0,.5); }
.tile-art img, .tile-art video { width: 100%; height: 100%; object-fit: cover; }
/* what you own is the card it came as: the tile's own edge is the frame */
.tile.owned .tile-art { padding: 6px; }
.tile.locked .tile-art img { filter: saturate(.7) contrast(1.05); }
/* nothing to show: the kind in its hexagon on the hatch, the card the reward comes as */
.tile-art.bare { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--rc) 9%, transparent) 6px 7px), rgba(0,0,0,.5); align-content: center; gap: 9px; }
.tile-hex { position: relative; display: grid; place-items: center; width: 56%; }
.tile-hex svg { width: 100%; height: auto; overflow: visible; }
.tile-hex polygon { fill: none; stroke: var(--rc); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 55%, transparent)); }
.tile-hex polygon.in { stroke-width: 2; opacity: .45; }
.tile-hex i { position: absolute; font-style: normal; font-size: clamp(20px, 2.4vw, 28px); line-height: 1; color: var(--rc); text-shadow: 0 0 16px currentColor; }
.tile-art .mark { color: rgba(255,255,255,.66); font: 800 9px var(--mono); letter-spacing: .38em; text-transform: uppercase; }
.tile.locked .tile-hex polygon, .tile.locked .tile-art .mark { opacity: .55; }
.tile-art .lock { position: absolute; right: 0; top: 0; padding: 5px 10px; background: rgba(0,0,0,.82); border: 1px solid rgba(255,255,255,.18); color: var(--ghost); font: 900 12.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.tile.owned .tile-art .lock { color: var(--mint); border-color: rgba(125,255,43,.6); background: rgba(125,255,43,.14); }
.tile.teased .tile-art .lock { color: var(--gold); border-color: rgba(255,253,120,.5); background: rgba(255,253,120,.1); }
/* an opened picture carries the program switch where its "Yours" tab would sit; the switch already says it is theirs */
.tile:not(.fresh) .tile-prog ~ .tile-art .lock { display: none; }
/* An 18+ picture they hold without having subscribed once: shown censored, with the way to see it */
.uncensor { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 3; white-space: normal; width: max-content; max-width: 88%; text-align: center; padding: 7px 12px; background: rgba(5,0,6,.88); border: 1px solid var(--pink, #ff2492); color: #ffd1ee; font: 900 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 18px rgba(255,36,146,.35); }
a.uncensor:hover { color: #caffab; border-color: #7dff2b; }
.sc-plate { position: relative; }
.tile-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.tile-rarity { font: 900 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--rc); }
.tile-name { font: 800 14px/1.3 var(--mono); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-kind { font: 600 13px var(--sans); color: var(--ghost); letter-spacing: .06em; text-transform: uppercase; }
.tile.fresh::after { content: "NEW"; position: absolute; left: 14px; top: 14px; padding: 2px 7px; background: var(--gold); color: #111; font: 900 12px var(--mono); letter-spacing: .12em; }
/* what she has just given you will not sit still: the same tear as the showcase, smaller. The
   tile is clip-path'd, so its flare has to be a filter and its shards are cut off at the edge. */
.tile.fresh { position: relative; }
.tile.g { filter: drop-shadow(0 0 var(--t-flare, 0px) color-mix(in srgb, var(--rc) 75%, transparent)); }
.tile.g::after { background: var(--t-spark, var(--gold)); }
.tile-fx { position: absolute; inset: -1px; pointer-events: none; }
.tile-fx b { position: absolute; inset: 0; display: block; border: 1px solid var(--rc); }
.tile-fx b.r1 { opacity: var(--t-r1, 0); clip-path: inset(var(--t-r1-t, 0) 0 var(--t-r1-b, 100%) 0); transform: translateX(var(--t-r1-x, 0)); border-color: var(--op, var(--cyan)); }
.tile-fx b.r2 { opacity: var(--t-r2, 0); clip-path: inset(var(--t-r2-t, 0) 0 var(--t-r2-b, 100%) 0); transform: translateX(var(--t-r2-x, 0)); border-color: color-mix(in srgb, var(--rc) 65%, #fff); }
.tile-fx i { position: absolute; width: var(--ps, 2px); height: var(--ps, 2px); border-radius: 50%; background: var(--rc); box-shadow: 0 0 7px var(--rc); opacity: .35; transform: translate(-50%, -50%); animation: scDrift var(--pt, 7s) var(--pdl, 0s) ease-in-out infinite alternate; }
.tile-fx i.s0 { left: var(--pa); top: 0; --dx: 0px; --dy: calc(var(--po) * -1); }
.tile-fx i.s1 { left: 100%; top: var(--pa); --dx: var(--po); --dy: 0px; }
.tile-fx i.s2 { left: var(--pa); top: 100%; --dx: 0px; --dy: var(--po); }
.tile-fx i.s3 { left: 0; top: var(--pa); --dx: calc(var(--po) * -1); --dy: 0px; }
.tile.g .tile-fx i { translate: 0 0 !important; opacity: 1 !important; width: calc(var(--ps, 2px) * var(--t-streak, 4)); height: calc(var(--ps, 2px) * .8); border-radius: 1px; background: var(--t-spark, var(--rc)); box-shadow: 0 0 9px var(--t-spark, var(--rc)); transform: translate(-50%, -50%) translateX(var(--t-drag, 0)); }
.empty { padding: 26px; border: 1px dashed rgba(255,255,255,.18); color: var(--ghost); font: 600 13px var(--sans); text-align: center; }

/* ---------- the viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(3,0,6,.86); backdrop-filter: blur(10px); }
.viewer-box { --rc: var(--r-common); position: relative; width: min(960px, 100%); max-height: 92svh; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid color-mix(in srgb, var(--rc) 55%, #222); background: #0a0710; box-shadow: 0 0 60px color-mix(in srgb, var(--rc) 30%, transparent); }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.viewer-head b { font: 800 14px var(--mono); }
.viewer-head em { font: 900 13px var(--mono); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--rc); margin-right: 10px; }
.viewer-foot .btn { flex: 0 0 auto; }
.viewer-foot { padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; color: var(--dim); font: 500 13px/1.5 var(--sans); }
.viewer-foot .meta { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ghost); }

/* ---------- one reward, shown off ----------
   A case that opens over the vault: its own artwork blurred behind the glass, the picture
   plated in its rarity, and what the vault knows about it beside it. */
.showcase { --rc: var(--r-common); position: relative; width: min(1180px, 100%); max-height: 92svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rc) 45%, rgba(255,255,255,.12)); background: #08060e; box-shadow: 0 0 90px color-mix(in srgb, var(--rc) 26%, transparent), 0 30px 80px rgba(0,0,0,.6); }
.sc-aura { position: absolute; inset: -10%; z-index: 0; background: no-repeat center / cover; filter: blur(70px) saturate(1.5); opacity: .6; }
.sc-aura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 22%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%), linear-gradient(180deg, rgba(5,0,10,.7), rgba(5,0,10,.9)); }
/* the bar: the way back, and where this one sits in the collection */
.sc-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px clamp(14px, 3vw, 34px); border-bottom: 1px solid color-mix(in srgb, var(--rc) 20%, rgba(255,255,255,.08)); }
.sc-back { display: inline-flex; align-items: center; gap: 11px; padding: 6px 10px 6px 0; border: 0; background: none; color: var(--dim); font: 800 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
.sc-back span[aria-hidden] { font-size: 16px; line-height: 1; color: var(--rc); }
.sc-back:hover { color: #fff; }
.sc-count { font: 800 12px var(--mono); letter-spacing: .2em; color: rgba(255,255,255,.66); }
.sc-count b { color: var(--rc); font-weight: 900; }
.sc-body { position: relative; z-index: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr) clamp(320px, 34%, 480px); min-height: 0; }
/* the rail, like the spine of the book it is kept in */
.sc-rail { display: grid; align-content: space-between; justify-items: center; gap: 12px; padding: 20px 0; border-right: 1px solid rgba(255,255,255,.06); writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(255,255,255,.66); font: 800 12px var(--mono); letter-spacing: .36em; text-transform: uppercase; white-space: nowrap; }
.sc-rail i { writing-mode: horizontal-tb; transform: rotate(180deg); font-style: normal; font-size: 12px; color: var(--rc); }
.sc-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(10px, 1.6vw, 18px); place-items: center; min-width: 0; min-height: 0; padding: clamp(14px, 2.4vw, 34px) clamp(14px, 2.4vw, 34px) clamp(12px, 1.6vw, 22px); }
.sc-art { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; max-width: 100%; width: 100%; }
.sc-art img, .sc-art video { display: block; min-height: 0; max-width: 100%; max-height: min(56svh, calc(92svh - 250px)); object-fit: contain; }
/* the plate: two lines of its rarity, a diamond at each corner, and the glow around it */
.sc-plate { position: relative; display: grid; place-items: center; min-height: 0; max-width: 100%; max-height: 100%; padding: clamp(10px, 1.2vw, 16px); border: 2px solid color-mix(in srgb, var(--rc) 85%, transparent); border-radius: 16px; background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--rc) 7%, transparent) 7px 8px), linear-gradient(150deg, color-mix(in srgb, var(--rc) 14%, #0a0612), #06040b 72%); box-shadow: 0 0 60px color-mix(in srgb, var(--rc) 30%, transparent), inset 0 0 34px color-mix(in srgb, var(--rc) 10%, transparent); }
.sc-plate::before { content: ""; position: absolute; inset: clamp(5px, .6vw, 8px); border: 1px solid color-mix(in srgb, var(--rc) 36%, transparent); border-radius: 10px; pointer-events: none; }
/* The tear. Nothing inside the card is touched: it is the edge that breaks. The ring and its
   three shards are clipped to slices and slid out of true, frame by frame from glitchBurst, and
   the motes drifting around the card are dragged onto the line while it lasts. */
.sc-plate::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--rc); border-radius: 16px; pointer-events: none; opacity: var(--g-ring, 0); clip-path: inset(var(--g-ring-t, 0) 0 var(--g-ring-b, 100%) 0); transform: translateX(var(--g-ring-x, 0)); filter: drop-shadow(var(--g-split, 0px) 0 var(--op, var(--cyan))) drop-shadow(calc(var(--g-split, 0px) * -1) 0 color-mix(in srgb, var(--rc) 70%, #fff)); }
.sc-fx { position: absolute; inset: -2px; pointer-events: none; }
/* three shards of the edge: one cyan, one pink, one a thin white scan */
.sc-fx b { position: absolute; inset: 0; display: block; border: 2px solid var(--rc); border-radius: 16px; }
.sc-fx b.r1 { opacity: var(--g-r1, 0); clip-path: inset(var(--g-r1-t, 0) 0 var(--g-r1-b, 100%) 0); transform: translateX(var(--g-r1-x, 0)); border-color: var(--op, var(--cyan)); }
.sc-fx b.r2 { opacity: var(--g-r2, 0); clip-path: inset(var(--g-r2-t, 0) 0 var(--g-r2-b, 100%) 0); transform: translateX(var(--g-r2-x, 0)); border-color: color-mix(in srgb, var(--rc) 65%, #fff); }
.sc-fx b.r3 { opacity: var(--g-r3, 0); clip-path: inset(var(--g-r3-t, 0) 0 var(--g-r3-b, 100%) 0); transform: translateX(var(--g-r3-x, 0)); border-color: rgba(255,255,255,.9); border-width: 1px; }
/* the motes: they hang around the edge and breathe in and out of it */
.sc-fx i { position: absolute; width: var(--ps, 3px); height: var(--ps, 3px); border-radius: 50%; background: var(--rc); box-shadow: 0 0 9px var(--rc); opacity: .4; transform: translate(-50%, -50%); animation: scDrift var(--pt, 7s) var(--pdl, 0s) ease-in-out infinite alternate; }
.sc-fx i.s0 { left: var(--pa); top: 0; --dx: 0px; --dy: calc(var(--po) * -1); }
.sc-fx i.s1 { left: 100%; top: var(--pa); --dx: var(--po); --dy: 0px; }
.sc-fx i.s2 { left: var(--pa); top: 100%; --dx: 0px; --dy: var(--po); }
.sc-fx i.s3 { left: 0; top: var(--pa); --dx: calc(var(--po) * -1); --dy: 0px; }
@keyframes scDrift { from { translate: 0 0; opacity: .18; } to { translate: var(--dx) var(--dy); opacity: .6; } }
/* while the edge tears they snap back onto it and smear along it */
.sc-plate.g .sc-fx i, .ov-frame.g .sc-fx i { translate: 0 0 !important; opacity: 1 !important; width: calc(var(--ps, 3px) * var(--g-streak, 4)); height: calc(var(--ps, 3px) * .8); border-radius: 1px; background: var(--g-spark, var(--cyan)); box-shadow: 0 0 12px var(--g-spark, var(--cyan)); transform: translate(-50%, -50%) translateX(var(--g-drag, 0)); }
/* a favor, a persona, a character: no artwork, so the kind itself is the card */
.sc-token { height: clamp(250px, 38svh, 390px); width: auto; aspect-ratio: 1 / 1.42; align-content: center; gap: clamp(10px, 1.4vw, 18px); }
.sc-hex { position: relative; display: grid; place-items: center; width: clamp(96px, 11vw, 132px); }
.sc-hex svg { width: 100%; height: auto; overflow: visible; }
.sc-hex polygon { fill: none; stroke: var(--rc); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 70%, transparent)); }
.sc-hex polygon.in { stroke-width: 2; opacity: .5; }
.sc-hex .glyph { position: absolute; font-style: normal; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; color: var(--rc); text-shadow: 0 0 22px currentColor; }
.sc-token b { color: var(--rc); font: 400 clamp(20px, 2.4vw, 30px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 26px color-mix(in srgb, var(--rc) 60%, transparent); }
.sc-token em { font-style: normal; color: rgba(255,255,255,.66); font: 800 12px var(--mono); letter-spacing: .42em; text-transform: uppercase; }
/* under the plate, the way a collection labels what it has on the wall */
.sc-strip { display: flex; align-items: center; gap: clamp(9px, 1.6vw, 20px); width: min(100%, 900px); margin: 0; color: rgba(255,255,255,.62); font: 800 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.sc-strip b { font-weight: 800; white-space: nowrap; }
.sc-strip em { font-style: normal; color: var(--rc); font-size: 12px; }
.sc-strip span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 40%, rgba(255,255,255,.18)), transparent); }
.sc-side { display: flex; flex-direction: column; gap: 15px; padding: clamp(18px, 2.2vw, 34px) clamp(18px, 2.4vw, 38px); overflow: auto; border-left: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(6,2,12,.46), rgba(6,2,12,.76)); }
.sc-brand { display: flex; align-items: baseline; gap: 9px; color: #fff; font: 800 16px var(--sans); letter-spacing: .01em; }
.sc-brand em { font-style: normal; color: var(--rc); font: 900 13px var(--mono); letter-spacing: .28em; text-transform: uppercase; }
/* the rarity on its own plaque */
.sc-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 11px; padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--rc) 75%, transparent); background: color-mix(in srgb, var(--rc) 14%, rgba(0,0,0,.45)); clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%); color: var(--rc); font: 900 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 45%, transparent)); }
.sc-badge::before, .sc-badge::after { content: "◈"; font-size: 12px; opacity: .75; }
.sc-name { margin: 0; color: #fff; font: 800 clamp(29px, 3.8vw, 46px)/1.08 var(--sans); letter-spacing: .012em; text-transform: uppercase; text-shadow: 0 0 44px color-mix(in srgb, var(--rc) 50%, transparent); }
.sc-text { margin: 0; color: rgba(255,255,255,.78); font: 500 13px/1.75 var(--mono); letter-spacing: .02em; }
.sc-text:empty { display: none; }
/* what the vault knows: where it came from, and how thin the crowd is at this rarity */
.sc-prov { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.sc-prov dl { display: grid; gap: 7px; margin: 0; min-width: 0; }
.sc-prov dt { color: var(--rc); font: 900 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; }
.sc-prov dd { margin: 0; color: rgba(255,255,255,.74); font: 600 12px var(--mono); letter-spacing: .06em; }
.sc-emblem { flex: 0 0 auto; font-style: normal; font-size: 34px; line-height: 1; color: color-mix(in srgb, var(--rc) 85%, transparent); text-shadow: 0 0 24px color-mix(in srgb, var(--rc) 50%, transparent); }
.sc-forms:empty { display: none; }
.sc-forms .favor-box { padding: 0; background: none; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.sc-primary { display: contents; }
.sc-btn { flex: 1 1 165px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--rc) 72%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 20%, transparent), rgba(0,0,0,.45)); color: #fff; clip-path: var(--cut-sm); font: 800 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.sc-btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 34%, transparent), rgba(0,0,0,.45)); }
.sc-btn i { font-style: normal; color: var(--rc); font-size: 14px; }
.sc-btn.ghost { border-color: rgba(255,255,255,.2); background: rgba(0,0,0,.42); color: rgba(255,255,255,.84); }
.sc-btn.ghost:hover { background: rgba(255,255,255,.08); }
.sc-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
/* what Discord has seen of it */
.sc-status:empty { display: none; }
.sc-status { display: grid; gap: 7px; }
.sc-disc { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 13px 15px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.5); color: rgba(255,255,255,.86); font: 600 13px var(--sans); text-align: left; }
.sc-disc .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.sc-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 11px clamp(14px, 3vw, 34px); border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.66); font: 700 12.5px var(--mono); letter-spacing: .26em; text-transform: uppercase; }
/* the picture alone, with nothing of ours on it */
.sc-plain { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,0,5,.97); cursor: zoom-out; }
/* The picture used to be measured against the span holding it, and that span is as wide as the
   picture, so nothing ever constrained it: a big file filled the screen and hung off every edge
   with no way to scroll. It is measured against the window instead. */
.sc-plain [data-plain-media] { display: flex; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
.sc-plain img, .sc-plain video { max-width: calc(100vw - 32px); max-height: calc(100svh - 56px); width: auto; height: auto; object-fit: contain; }
.sc-plain p { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; color: var(--ghost); font: 700 13px var(--mono); letter-spacing: .24em; text-transform: uppercase; }
@media (max-width: 900px) {
  .sc-body { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: auto; }
  .sc-rail, .sc-foot, .sc-brand { display: none; }
  .sc-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .sc-stage { padding-bottom: 10px; }
  .sc-art img, .sc-art video, .sc-plate { max-height: 42svh; }
  .sc-name { font-size: clamp(28px, 9vw, 40px); }
}
.favor-box { width: 100%; padding: 22px; display: grid; gap: 14px; background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 70%); }
.favor-box .glyph { justify-self: center; }
.favor-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.4); color: var(--dim); font: 500 13px/1.5 var(--sans); }
.favor-row b { font: 900 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rc); }
.favor-row audio { width: 100%; margin-top: 4px; }
.favor-form { display: grid; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--rc) 45%, #222); background: rgba(0,0,0,.45); clip-path: var(--cut-sm); }
.favor-form p { margin: 0; color: var(--dim); font: 500 13px/1.5 var(--sans); }
.favor-form label { display: flex; justify-content: space-between; gap: 10px; font: 800 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.favor-form .count { color: var(--ghost); }
.favor-form textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.5); color: #fff; font: 500 14px/1.5 var(--sans); resize: vertical; }
.favor-form textarea:focus { border-color: var(--pink); outline: none; }
.favor-form .btn { justify-self: start; }
.favor-note { color: var(--ghost) !important; font-size: 12px !important; }
.pk-back b.pk-live { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--mint); background: rgba(0,0,0,.6); border: 1px solid rgba(125,255,43,.5); border-radius: 999px; padding: 2px 7px; }
.pk-note { color: var(--ghost); font-size: 12px; }
.live-choice-text { margin: 0; padding: 14px 16px 0; line-height: 1.5; }
.live-choice-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; }
.x { min-width: 36px; }

/* ---------- the creator's editor ---------- */
.adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px dashed rgba(154,60,255,.45); background: rgba(154,60,255,.07); clip-path: var(--cut-sm); }
.adminbar > b { margin-right: auto; font: 900 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #c58cff; }
.adminbar select, .adminbar input[type=text] { min-height: 36px; padding: 8px 10px; border: 1px solid rgba(154,60,255,.36); background: rgba(0,0,0,.5); color: #fff; font: 600 12px var(--sans); }
.adminbar .btn[aria-pressed="true"] { --btn-line: rgba(154,60,255,.9); --btn-bg: rgba(154,60,255,.28); color: #fff; }
.adminbar .status { flex-basis: 100%; min-height: 1em; color: var(--ghost); font: 600 12px var(--mono); }
.adminbar .status.bad, .ed-msg.bad { color: var(--hot); }
.tile.retired { opacity: .42; }
.tile-art .lock.admin { color: #c58cff; border-color: rgba(154,60,255,.5); }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; overflow: auto; }
.ed-media { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 240px; padding: 12px; background: #000; }
.ed-media video { max-width: 100%; max-height: 62svh; }
.ed-media video.framed, .ed-stage.frame img { max-height: 34svh; }
.ed-media .glyph { font-size: 72px; color: var(--rc); text-shadow: 0 0 24px currentColor; }
.ed-stage { position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; cursor: crosshair; }
.ed-stage img { display: block; max-width: 100%; max-height: 62svh; }
.ed-box { position: absolute; border: 2px solid var(--mint); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 18px rgba(125,255,43,.5); pointer-events: none; }
.ed-form { display: grid; gap: 12px; padding: 16px; align-content: start; }
.ed-field > label, .ed-teaser > b { display: block; margin-bottom: 5px; color: #c58cff; font: 900 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.ed-field input[type=text], .ed-field input[type=number], .ed-field select, .ed-field textarea { width: 100%; padding: 9px 11px; border: 1px solid rgba(154,60,255,.36); background: rgba(0,0,0,.42); color: #fff; font: 500 13px var(--sans); }
.ed-field textarea { min-height: 84px; resize: vertical; }
.ed-field .help { margin: 5px 0 0; color: var(--ghost); font: 500 12px/1.4 var(--sans); }
.ed-field > label.ed-check { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--soft); font: 800 12px var(--mono); letter-spacing: .12em; }
.ed-teaser { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.4); }
.ed-teaser img { max-width: 160px; max-height: 220px; border: 1px solid rgba(255,255,255,.14); }
.ed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-msg { color: var(--ghost); font: 600 12px var(--mono); }
/* the one button in here that takes something away from somebody */
.btn.danger { --btn-line: rgba(255,60,60,.6); --btn-bg: rgba(255,60,60,.12); color: #ff9a9a; margin-right: auto; }
.btn.danger:hover { border-color: rgba(255,60,60,.95); box-shadow: 0 0 22px rgba(255,60,60,.25); }
.btn.danger.sure { --btn-line: rgba(255,60,60,1); --btn-bg: rgba(255,60,60,.3); color: #fff; }
.ed-media .btn[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 760px) { .ed-grid { grid-template-columns: 1fr; } }

/* ---------- a link's pack ---------- */
.claim { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; align-content: center; gap: 22px; padding: 20px; background: rgba(3,0,6,.9); backdrop-filter: blur(10px); overflow: hidden; }
.claim-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 300px; --rc: var(--pink); }
.claim-card { position: relative; width: 190px; height: 270px; animation: pkDeal .6s both cubic-bezier(.2,.9,.3,1.25); }
.claim-card .pk-back i { font-family: "Hacked", Impact, "Arial Black", sans-serif; font-size: 60px; }
.claim-card.charging .pk-back { animation: pkShake .11s linear infinite; box-shadow: 0 0 50px var(--rc), inset 0 0 44px color-mix(in srgb, var(--rc) 60%, transparent); }
.claim-card.glitch { animation: clGlitch .1s steps(2) infinite; filter: drop-shadow(-5px 0 rgba(255,36,146,.95)) drop-shadow(5px 0 rgba(0,255,213,.95)); }
.claim-card.dead { opacity: .35; filter: grayscale(1); }
.claim-card.dealt { animation: clDealt .65s ease-in forwards; }
@keyframes clDealt { to { transform: translateY(40vh) scale(.4) rotate(12deg); opacity: 0; } }
@keyframes clGlitch {
  0% { transform: none; clip-path: inset(0); }
  20% { transform: translate(-7px, 2px) skewX(8deg); clip-path: inset(10% 0 45% 0); }
  40% { transform: translate(6px, -3px) skewX(-6deg); clip-path: inset(52% 0 6% 0); }
  60% { transform: translate(-3px, 5px); clip-path: inset(28% 0 28% 0); }
  80% { transform: translate(4px, -1px) skewX(3deg); clip-path: inset(0 0 70% 0); }
  100% { transform: none; clip-path: inset(0); }
}
.claim-static { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,36,146,.06) 0 2px, transparent 2px 5px); }
.claim.static .claim-static { opacity: .85; animation: clStatic .09s steps(3) infinite; }
@keyframes clStatic { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 -36px, 14px 0; } }
.claim-shard { position: absolute; pointer-events: none; animation: clShard .9s cubic-bezier(.15,.6,.3,1) forwards; }
@keyframes clShard { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.claim-denied { display: grid; justify-items: center; gap: 14px; max-width: 480px; text-align: center; }
.claim-denied p { margin: 0; color: var(--dim); font: 500 14px/1.55 var(--sans); }
.claim-glitch { position: relative; font-family: "Hacked", Impact, "Arial Black", sans-serif; font-size: clamp(34px, 8vw, 64px); letter-spacing: .04em; color: #fff; text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); animation: clFlicker 1.3s steps(1) both; }
.claim-glitch::before, .claim-glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.claim-glitch::before { color: var(--pink); transform: translateX(-3px); animation: clSlice 1.6s steps(2) infinite; }
.claim-glitch::after { color: var(--cyan); transform: translateX(3px); animation: clSlice 1.1s steps(2) infinite reverse; }
@keyframes clSlice { 0% { clip-path: inset(0 0 80% 0); } 25% { clip-path: inset(40% 0 35% 0); } 50% { clip-path: inset(75% 0 5% 0); } 75% { clip-path: inset(15% 0 60% 0); } 100% { clip-path: inset(55% 0 20% 0); } }
@keyframes clFlicker { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .15; } 20% { opacity: 1; } 34% { opacity: .35; } 38% { opacity: 1; } 100% { opacity: 1; } }

/* ---------- the creator's game pools ---------- */
.gp-note { grid-column: 1 / -1; margin: 0; color: var(--dim); font: 500 13px var(--sans); }
.gp-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(154,60,255,.4); }
.gp-head b { font: 900 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c58cff; }
.gp-head span, .gp-set { color: var(--ghost); font: 700 13px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.gp-set { grid-column: 1 / -1; margin-top: 2px; color: var(--dim); }

/* ---------- banners ---------- */
/* the banners: small tiles, each opens its banner in a box */
.bn-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 12px; }
.bn-tile { --rc: var(--pink); display: grid; padding: 0; border: 1px solid color-mix(in srgb, var(--rc) 38%, #1b1b26); background: #0a0710; color: #fff; text-align: left; cursor: pointer; clip-path: var(--cut-tile); transition: transform .18s ease, border-color .18s ease; }
.bn-tile:hover, .bn-tile:focus-visible { transform: translateY(-2px); border-color: var(--rc); }
.bn-tile.done { opacity: .62; }
.bn-tile-art { aspect-ratio: 7 / 2; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 28%, #12081a), #07060c); }
.bn-tile-art img, .bn-box-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-tile-body { display: grid; gap: 6px; padding: 9px 11px 11px; }
.bn-tile-name { overflow: hidden; font-family: "Hacked", Impact, "Arial Black", sans-serif; font-size: 17px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.bn-tile-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ghost); font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.bn-tile-meta b { color: #fff; }
.bn-bar { height: 3px; background: rgba(255,255,255,.1); }
.bn-bar i { display: block; height: 100%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.bn-box { position: relative; width: min(600px, 100%); max-height: 92svh; overflow: auto; border: 1px solid rgba(255,36,146,.45); background: #0a0710; box-shadow: 0 0 60px rgba(255,36,146,.16); }
.bn-box-art { height: clamp(96px, 24vw, 150px); overflow: hidden; background: #07060c; }
.bn-box-x { position: absolute; top: 8px; right: 8px; z-index: 1; }
.bn-box-in { display: grid; gap: 12px; padding: 14px 16px 16px; }
.bn-box-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.bn-box-head h3 { margin: 0; font-family: "Hacked", Impact, "Arial Black", sans-serif; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; }
.bn-desc { margin: 0; color: var(--dim); font-size: 13px; }
.bn-label { color: var(--ghost); font: 800 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.bn-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
.bn-th { --rc: var(--r-common); position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rc) 70%, transparent); background: #07060c; }
.bn-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn-th:not(.own) img { filter: saturate(.55) brightness(.75); }
.bn-th > i { font-style: normal; font-size: 16px; color: var(--rc); opacity: .75; }
.bn-th.own::after { content: "\2713"; position: absolute; top: 2px; right: 4px; color: var(--mint); font: 900 12px var(--mono); text-shadow: 0 0 4px #000; }
.bn-favs { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-fav { --rc: var(--r-common); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); color: var(--soft); font: 700 12px var(--sans); }
.bn-fav i { font-style: normal; color: var(--rc); }
.bn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.bn-meta { color: var(--ghost); font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.bn-meta b { color: #fff; }
.bn-note { flex-basis: 100%; min-height: 1.2em; margin: 0; color: var(--dim); font: 600 12px var(--sans); }
.bn-note.hit { color: var(--gold); }
.bn-note.bad { color: var(--hot); }
.bn-box.rolling .bn-roll { opacity: .55; pointer-events: none; animation: pkShake .11s linear infinite; }
.bn-pic { display: grid; gap: 8px; }
.bn-pic img { width: 100%; aspect-ratio: var(--pf-ratio, 7 / 2); object-fit: cover; border: 1px solid rgba(154,60,255,.36); }
.bn-done { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(255,216,77,.45); background: rgba(255,216,77,.06); }
/* the header's place is held while it loads, so the box does not grow under the buttons when it lands */
.bn-done [data-bn-header-art] { display: block; aspect-ratio: 3 / 1; background: rgba(255,216,77,.04); }
.bn-done img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border: 1px solid rgba(255,216,77,.35); }
.bn-done b { color: var(--gold); font: 900 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.bn-done p { margin: 0; color: var(--dim); font-size: 12px; }
.bn-locked { color: var(--ghost); font: 700 12px var(--sans); }
.bn-crop { display: grid; gap: 8px; }
.bn-crop-frame { position: relative; aspect-ratio: var(--pf-ratio, 7 / 2); overflow: hidden; background: #000; border: 1px solid var(--pink); cursor: grab; touch-action: none; user-select: none; }
.bn-crop-frame.dragging { cursor: grabbing; }
.bn-crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.bn-zoom { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font: 800 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bn-zoom input { width: 160px; accent-color: var(--pink); }
.bn-pick { max-height: 180px; overflow: auto; padding: 8px; border: 1px solid rgba(154,60,255,.3); }
.bn-side { display: grid; align-content: start; min-width: 0; }
.bn-raffles { margin: 16px 16px 0; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bn-drop summary { position: relative; overflow: hidden; padding: 9px 32px 9px 11px; border: 1px solid rgba(154,60,255,.36); background: rgba(0,0,0,.42); color: #fff; font: 500 13px var(--sans); white-space: nowrap; text-overflow: ellipsis; list-style: none; cursor: pointer; }
.bn-drop summary::-webkit-details-marker { display: none; }
.bn-drop summary::after { content: "\25BE"; position: absolute; top: 50%; right: 12px; color: #c58cff; transform: translateY(-50%); }
.bn-drop[open] summary::after { content: "\25B4"; }
.bn-drop summary.none { color: var(--ghost); }
.bn-drop-list.lk-kinds { display: grid; gap: 9px; max-height: 240px; overflow: auto; padding: 10px 11px; border: 1px solid rgba(154,60,255,.36); border-top: 0; background: #0a0710; }
.bn-drop-list label { text-transform: none; letter-spacing: .04em; }
.bn-drop-list em { color: var(--ghost); font-style: normal; }
.bn-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); --rc: #c58cff; }

/* ---------- the creator's links ---------- */
.links-box { grid-template-rows: auto 1fr; }
.links-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); min-height: 0; overflow: auto; }
.links-list { display: grid; gap: 10px; padding: 16px; align-content: start; }
.links-form input[type=datetime-local] { width: 100%; padding: 9px 11px; border: 1px solid rgba(154,60,255,.36); background: rgba(0,0,0,.42); color: #fff; font: 500 13px var(--sans); color-scheme: dark; }
.lk-row { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(154,60,255,.36); background: rgba(0,0,0,.4); }
.lk-row.off { opacity: .55; }
.lk-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-top b { margin-right: auto; font: 800 13px var(--mono); }
.lk-badge { padding: 2px 7px; border: 1px solid rgba(255,255,255,.2); color: var(--mint); font: 800 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.lk-meta { color: var(--ghost); font: 600 12px var(--mono); }
.lk-url { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.5); color: var(--soft); font: 600 12px var(--mono); }
.lk-claims summary { cursor: pointer; color: #c58cff; font: 800 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lk-claims div { padding: 3px 0; color: var(--dim); font: 500 12px var(--sans); }
.lk-odds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lk-odd { display: grid; gap: 4px; color: var(--rc); font: 800 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lk-odd input { width: 100%; padding: 7px 6px; border: 1px solid color-mix(in srgb, var(--rc) 45%, #222); background: rgba(0,0,0,.42); color: #fff; font: 600 12px var(--mono); }
.lk-kinds { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lk-kinds label { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); font: 800 12px var(--mono); letter-spacing: .1em; }
@media (max-width: 760px) { .links-body { grid-template-columns: 1fr; } .lk-odds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

footer { padding: 36px 0 44px; color: var(--dead); font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  /* the cards themselves stay: only what moves is taken away */
  .pk-card, .pk-back i, .pk-card.charging .pk-back, .pk-card.mystery .pk-back, .pk-card.r-mythic.open .pk-face,
  .claim-card, .claim-card.charging .pk-back, .claim-card.glitch, .claim-card.dealt, .claim-glitch,
  .band::after, .band-go i, .tile.landed { animation: none !important; }
  .pk-fx, .pk-flash, .claim-static, .claim-shard, .claim-glitch::before, .claim-glitch::after,
  .ov-art .ov-glow, .sc-plate::after, .sc-fx, .tile-fx { display: none !important; }
  .pk-inner, .ov-sky, .ov .pk-card.gone { transition: none; }
}