/* Gloss: black glass, white type, foil only where it belongs (the cards and the packs). */
:root {
  --bg: #060608; --bg2: #0c0c10; --card: #111116; --raise: #18181f; --line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.14);
  --text: #f4f4f6; --mute: #9b9ba6; --dim: #63636e; --up: #5fd49a; --dn: #ff6b6b;
  --sans: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --foil: linear-gradient(115deg, #e7dcff 0%, #b7e3ff 22%, #c9ffe6 42%, #fff1c4 62%, #ffd0ea 82%, #e7dcff 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.hide { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.02); font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); }
.btn.pri { position: relative; overflow: hidden; background: #f4f4f6; color: #0a0a0d; border-color: transparent; }
.btn.pri::after { content: ""; position: absolute; inset: 0; background: var(--foil); opacity: 0; transition: opacity 0.3s; mix-blend-mode: multiply; }
.btn.pri:hover::after { opacity: 0.55; }
.btn.big { height: 54px; padding: 0 28px; font-size: 16px; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 200; transform: translate(-50%, 16px); padding: 12px 18px; border-radius: 12px; background: #17171d; border: 1px solid var(--line2); font-size: 14px; opacity: 0; pointer-events: none; transition: 0.25s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(255, 107, 107, 0.5); }

/* ------------------------------------------------------------------ cards */
.gc { --w: 240px; --rx: 0deg; --ry: 0deg; --mx: 28%; --my: 18%; --flip: 0deg; width: var(--w); height: calc(var(--w) * 1.397); perspective: 900px; flex: none; }
.gc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gc.lit .gc-in { transition: transform 0.08s linear; }
.gc.down { --flip: 180deg; }
.gc-face { position: absolute; inset: 0; border-radius: calc(var(--w) * 0.065); transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gc-back { transform: translateZ(-4.8px) rotateY(180deg); }
.gc-edge { position: absolute; inset: 0; border-radius: calc(var(--w) * 0.065); background: linear-gradient(135deg, #3a3a44, #15151b 60%, #2a2a33); }
.gc-edge.e1 { transform: translateZ(-1.2px); } .gc-edge.e2 { transform: translateZ(-2.4px); } .gc-edge.e3 { transform: translateZ(-3.6px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.r-legendary .gc-edge, .r-epic .gc-edge { background: linear-gradient(135deg, color-mix(in srgb, var(--rar) 70%, #fff), color-mix(in srgb, var(--rar) 40%, #000) 60%, var(--rar)); }

/* front: certificate base */
.gc-base { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(70% 48% at 50% 46%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 72%),
    var(--art) center 46% / 132% auto no-repeat,
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #121218, #08080b 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.gc-frame { position: absolute; inset: calc(var(--w) * 0.035); border-radius: calc(var(--w) * 0.04); border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); transform: translateZ(4px); }
.gc-frame::before, .gc-frame::after { content: ""; position: absolute; width: 18%; height: 1px; left: 41%; background: linear-gradient(90deg, transparent, var(--rar), transparent); }
.gc-frame::before { top: -1px; } .gc-frame::after { bottom: -1px; }
.r-base .gc-frame { border-color: rgba(255, 255, 255, 0.1); }
.gc-top { position: absolute; left: 9%; right: 9%; top: 8.5%; display: flex; justify-content: space-between; align-items: flex-start; transform: translateZ(22px); }
.gc-top b { display: block; font-size: calc(var(--w) * 0.115); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.gc-top span { display: block; margin-top: 4px; font-size: calc(var(--w) * 0.046); color: rgba(255, 255, 255, 0.62); }
.gc-top em { font-style: normal; font-size: calc(var(--w) * 0.042); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35em 0.75em; border-radius: 999px; color: var(--rar); background: color-mix(in srgb, var(--rar) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rar) 35%, transparent); }
.gc-medal { position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) translateZ(46px); }
.gc-coin { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 48%, #0b0b0f) 0%, #0b0b0f 74%), #0b0b0f;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3), inset 0 0 14px rgba(0, 0, 0, 0.55), 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 36px color-mix(in srgb, var(--brand) 28%, transparent); }
.gc-coin::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%); pointer-events: none; }
.gc-coin svg { width: 44%; height: 44%; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.25)); }
.gc-coin b { font-size: calc(var(--w) * 0.08); }
.gc-bot { position: absolute; left: 9%; right: 9%; bottom: 8%; transform: translateZ(22px); }
.gc-bot b { display: block; font-size: calc(var(--w) * 0.1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.gc-bot span { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font: 500 calc(var(--w) * 0.044) / 1.3 var(--mono); color: rgba(255, 255, 255, 0.58); }
.gc-bot i { font-style: normal; } .gc-bot i.up { color: var(--up); } .gc-bot i.dn { color: var(--dn); }
/* foil and glare */
.gc-holo { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(2px); pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(var(--holo, 0.08) * 0.3); transition: opacity 0.35s;
  background: repeating-linear-gradient(115deg, hsl(320 70% 42%) 0%, hsl(220 75% 45%) 7%, hsl(165 70% 38%) 14%, hsl(48 80% 44%) 21%, hsl(320 70% 42%) 28%) calc(var(--mx) * 1.6) calc(var(--my) * 1.6) / 320% 320%;
  -webkit-mask: radial-gradient(70% 55% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.3) 50%, transparent 80%); mask: radial-gradient(70% 55% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.3) 50%, transparent 80%); }
.gc.lit .gc-holo, .gc.shine .gc-holo { opacity: var(--holo, 0.08); }
.r-base { --holo: 0.08; } .r-common { --holo: 0.14; } .r-uncommon { --holo: 0.2; } .r-rare { --holo: 0.3; } .r-epic { --holo: 0.42; } .r-legendary { --holo: 0.6; }
.r-legendary .gc-holo::after, .r-epic .gc-holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 0.6px, transparent 1.3px); background-size: 9px 11px; opacity: 0.4; }
.gc-glare { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(60px); pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 30%, transparent 60%); mix-blend-mode: overlay; }
.gc.lit .gc-glare { opacity: 1; }
.gc-back .gc-glare { transform: none; }
/* back */
.gc-bk { position: absolute; inset: 0; border-radius: inherit; background: url(/cards/back.jpg?v=1) center / cover no-repeat, #0a0a0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.gc-bkmark { position: absolute; left: 50%; top: 50%; width: 17%; transform: translate(-50%, -50%) translateZ(18px); color: transparent; }
.gc-bkmark svg { width: 100%; display: block; color: #e9ecf2; opacity: 0.95; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.gc:not(.lit) .gc-in { animation: none; }

/* cards with a studio artwork: the art fills the face, type sits on soft shade, the coin moves to the corner */
.gc.art .gc-base { background: var(--img) center 42% / cover no-repeat, #08080b; }
.gc.art .gc-base::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.86) 100%); }
.gc.art .gc-medal { left: auto; top: auto; right: 8%; bottom: 7.5%; width: 21%; transform: translateZ(40px); }
.gc.art .gc-coin svg { width: 46%; height: 46%; }
.gc.art .gc-bot span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc.art .gc-bot span i { display: block; margin-top: 2px; }
.gc.art .gc-bot { right: 33%; }
.gc.art .gc-top b, .gc.art .gc-bot b { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.gc.art .gc-frame { border-color: color-mix(in srgb, var(--rar) 70%, transparent); }

/* ------------------------------------------------------------------ packs: studio photos on black, feathered into the page */
.pk { --w: 230px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; width: var(--w); height: calc(var(--w) * 1.589); perspective: 1100px; flex: none; }
.pk-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pk.lit .pk-in { transition: transform 0.08s linear; }
.pk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6)); }
.pk-glare { position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px); opacity: 0; transition: opacity 0.3s; mix-blend-mode: overlay;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.85) 47%, transparent 60%) calc(var(--mx) * 2 - 100%) 0 / 230% 100% no-repeat, radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55), transparent 50%); }
.pk.lit .pk-glare { opacity: 1; }

/* odds: a glossy distribution bar and rows with rarity gems */
.dist { display: flex; gap: 3px; height: 10px; padding: 2px; border-radius: 99px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.dist i { min-width: 8px; border-radius: 99px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 70%, #000)); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 45%, transparent); }
.olist { display: grid; gap: 2px; margin-top: 14px; }
.orow { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-radius: 12px; font-size: 14px; transition: background 0.2s; }
.orow:hover { background: rgba(255, 255, 255, 0.04); }
.orow b { font-weight: 600; color: #f4f4f6; }
.orow .rng { font: 12.5px var(--mono); color: var(--mute); white-space: nowrap; }
.orow em { font: 600 14px var(--mono); font-style: normal; text-align: right; color: #f4f4f6; }
.gem { width: 10px; height: 10px; margin: 0 3px; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--rc) 75%, #fff) 30%, var(--rc) 60%, color-mix(in srgb, var(--rc) 55%, #000) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5); }
.orow.r-epic b, .orow.r-legendary b { background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 55%, #fff) 0%, var(--rc) 50%, color-mix(in srgb, var(--rc) 70%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orow.r-legendary .gem { animation: gemglint 3.2s ease-in-out infinite; }
@keyframes gemglint { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.8); } }