/* Fonts are loaded from index.html (preconnect + ) so they fetch in parallel with this stylesheet instead of after it — was a render-blocking @import here. */ /* Root-level guard: never expose a horizontal scrollbar from a transient wide layer (rip FX, off-screen card fly-in animations). The base page background lives HERE (on the root) rather than on : the root's background is propagated across the whole viewport canvas on EVERY device, so it's identical on mobile and desktop. (body used background-attachment:fixed, which most mobile browsers ignore — that left the base white behind the lights on phones.) */ html { overflow-x: clip; /* CYBERPUNK CASINO base — near-black blue/violet with a neon HORIZON glow (magenta floor, cyan + purple sky) so the neon lights pop. On the root so it's propagated across the viewport canvas, mobile-safe + identical everywhere. */ background-color: #04050d; /* solid floor — never white */ background-image: radial-gradient(ellipse 130% 58% at 50% 102%, rgba(255,45,155,0.20), transparent 62%), radial-gradient(circle at 12% -6%, rgba(0,229,255,0.14), transparent 55%), radial-gradient(circle at 88% 6%, rgba(170,85,255,0.15), transparent 55%), linear-gradient(180deg, #04050d 0%, #080719 46%, #120a30 100%); background-repeat: no-repeat; background-size: cover; min-height: 100%; } :root { /* ── Obsidian + Antique Gold palette ── */ --bg-deep: #07090E; --bg-mid: #0D1118; --bg-panel: #131924; --gold: #C8A84B; --gold-bright: #E2C46A; --silver: #A8B0C0; --accent: #5B8CCC; --pink: #C8A84B; /* repurposed to gold for gradients */ --pink-bright: #E2C46A; --lavender: #7A90BC; --skyblue: #6AACED; --text-light: #EDE8DC; /* warm ivory */ --text-dim: #7A7060; /* warm gray */ --line: rgba(200,168,75,0.18); /* subtle gold border */ --font-display: 'Baloo 2', sans-serif; --font-body: 'Quicksand', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* ── Global tier colors ── */ --tier-common: #FFFFFF; --tier-uncommon: #60C8FF; --tier-rare: #C490FF; --tier-foil-chase: #FFD15C; } /* Tier CSS classes: any .tier-X element inherits the correct --tier-glow-color */ .tier-common { --tier-glow-color: var(--tier-common); } .tier-uncommon { --tier-glow-color: var(--tier-uncommon); } .tier-rare { --tier-glow-color: var(--tier-rare); } .tier-foil-chase { --tier-glow-color: var(--tier-foil-chase); } * { box-sizing: border-box; } body { margin: 0; background: transparent; /* base gradient now lives on — propagated to the viewport canvas, so it's mobile-safe + identical on every device (no background-attachment:fixed) */ color: var(--text-light); font-family: var(--font-body); font-weight: 500; min-height: 100vh; position: relative; overflow-x: clip; /* never expose a horizontal scrollbar from a transient wide layer (rip FX, off-screen card fly-in) */ } .skip-link { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; /* clamp to a point so it can't widen the page canvas */ } .skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; overflow: visible; background: var(--text-light); color: var(--bg-deep); padding: 6px 12px; z-index: 999; } /* ---------- header ---------- */ .ledger-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; /* one integrated, centered control cluster */ padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(42, 27, 87, 0.6); backdrop-filter: blur(6px); flex-wrap: wrap; gap: 10px; } /* Minimalistic: the build version isn't part of the user-facing controls. */ .app-version { display: none; } .brand { display: flex; align-items: center; gap: 10px; } .brand-icon { font-size: 22px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,209,92,0.6)); } .brand h1 { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.01em; margin: 0; color: var(--text-light); font-weight: 700; } .balance { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: rgba(255, 143, 203, 0.08); padding: 8px 18px; border-radius: 999px; } .balance .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .balance .amount { font-family: var(--font-display); font-size: 19px; color: var(--gold); font-weight: 700; } nav.tabs { display: flex; gap: 6px; } nav.tabs a { font-family: var(--font-display); font-size: 13px; text-decoration: none; color: var(--text-dim); padding: 8px 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; } nav.tabs a.active, nav.tabs a:hover { color: var(--text-light); background: rgba(255, 143, 203, 0.16); border-color: var(--line); } /* ---------- main layout ---------- */ main { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 0 24px 80px; /* no top edge — the game viewer sits topmost */ } /* Gallery view keeps a little breathing room up top (attract mode does not). */ #galleryView { padding-top: 24px; } .hall-title { text-align: center; margin-bottom: 28px; } .hall-title .eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-bright); margin-bottom: 6px; } .hall-title h2 { font-family: var(--font-display); font-size: 30px; margin: 0; font-weight: 700; color: var(--text-light); } /* floor-layout shows only during pull animation — pack + reveal centered */ .floor-layout { display: flex; flex-direction: column; align-items: center; padding: 0 24px; max-width: 600px; margin: 0 auto; } /* pool-panel inside floor-layout — compact strip below the animation */ .floor-layout .pool-panel { width: 100%; max-width: 500px; } /* ---------- pool panel (left): single-pool odds card ---------- */ .pool-panel { display: flex; flex-direction: column; } .odds-card { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,0.04), transparent), var(--bg-panel); border-radius: 18px; padding: 24px 22px; } .odds-desc { font-size: 13.5px; color: var(--text-dim); margin: 0 0 18px; line-height: 1.5; } .odds-stat { text-align: center; margin-bottom: 14px; } .odds-stat-number { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--pink-bright); margin-right: 8px; } .odds-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-dim); } .overview-bar-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); } .overview-bar-track span { display: block; height: 100%; transition: width 0.5s ease; } .overview-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); } .overview-legend .legend-row { display: flex; justify-content: space-between; align-items: center; } .overview-legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; } .overview-legend .legend-empty { opacity: 0.45; } .odds-payout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: center; } /* ---------- stage panel (right) ---------- */ .stage-panel { display: flex; flex-direction: column; gap: 16px; } .stage-frame { position: relative; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 50% 30%, rgba(183,156,255,0.12), transparent 60%), var(--bg-panel); min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .stage-sparkle-bg { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 15% 25%, #fff 100%, transparent), radial-gradient(1.4px 1.4px at 75% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 80%, #fff 100%, transparent), radial-gradient(1.4px 1.4px at 35% 65%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 50%, #fff 100%, transparent); opacity: 0.4; pointer-events: none; } /* idle-stage: see the full-width definition in the carousel section below */ .idle-pack { position: relative; width: 140px; height: 180px; margin: 0 auto 20px; animation: idleBob 3.2s ease-in-out infinite; } @keyframes idleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .idle-pack-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, var(--idle-color, var(--pink)) 0%, transparent 70%); opacity: 0.35; animation: idleGlow 3.2s ease-in-out infinite; filter: blur(4px); } @keyframes idleGlow { 0%, 100% { opacity: 0.25; transform: scale(0.92); } 50% { opacity: 0.45; transform: scale(1.05); } } .idle-pack-body { position: relative; width: 100%; height: 100%; border-radius: 14px; border: 2px solid var(--idle-color, var(--pink)); background: linear-gradient(145deg, rgba(255,255,255,0.08), transparent 60%), var(--bg-mid); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px color-mix(in srgb, var(--idle-color, var(--pink)) 30%, transparent); } .idle-pack-star { font-size: 36px; color: var(--idle-color, var(--pink)); animation: idleSpin 6s linear infinite; display: inline-block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--idle-color, var(--pink)) 60%, transparent)); } @keyframes idleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .idle-caption { font-family: var(--font-display); font-size: 15px; color: var(--text-dim); font-weight: 600; } /* sealed pack shown during the rip sequence */ .pack-shell { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 280px; z-index: 4; display: none; } .pack-shell.active { display: block; } .pack-half { position: absolute; left: 0; width: 100%; height: 50%; background: linear-gradient(135deg, #3a2470, #2a1b57 45%, #4a2e7a); border: 2px solid var(--pack-color, var(--pink)); } .pack-half.top { top: 0; border-bottom: none; border-radius: 14px 14px 0 0; background-image: repeating-linear-gradient(45deg, rgba(200,168,75,0.12) 0, rgba(200,168,75,0.12) 6px, transparent 6px, transparent 14px); } .pack-half.bottom { bottom: 0; border-top: none; border-radius: 0 0 14px 14px; background-image: repeating-linear-gradient(-45deg, rgba(200,168,75,0.12) 0, rgba(200,168,75,0.12) 6px, transparent 6px, transparent 14px); } .pack-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--pink-bright), var(--pack-color, var(--pink)) 70%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; color: var(--bg-deep); font-weight: 700; box-shadow: 0 0 18px color-mix(in srgb, var(--pack-color, var(--pink)) 60%, transparent); } .pack-shell.shaking { animation: packShake var(--shake-duration, 0.55s) ease-in-out; } @keyframes packShake { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 15% { transform: translate(calc(-50% - 6px), -50%) rotate(-2deg); } 30% { transform: translate(calc(-50% + 6px), -50%) rotate(2deg); } 45% { transform: translate(calc(-50% - 7px), -50%) rotate(-2.5deg); } 60% { transform: translate(calc(-50% + 7px), -50%) rotate(2.5deg); } 75% { transform: translate(calc(-50% - 4px), -50%) rotate(-1.5deg); } 90% { transform: translate(calc(-50% + 4px), -50%) rotate(1.5deg); } } .pack-shell.tearing .pack-half.top { animation: tearUp 0.45s ease-in forwards; } .pack-shell.tearing .pack-half.bottom { animation: tearDown 0.45s ease-in forwards; } .pack-shell.tearing .pack-seal { animation: sealPop 0.3s ease-in forwards; } @keyframes tearUp { to { transform: translateY(-160px) rotate(-12deg); opacity: 0; } } @keyframes tearDown { to { transform: translateY(160px) rotate(12deg); opacity: 0; } } @keyframes sealPop { to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } } /* card reveal */ .reveal-zone { position: relative; z-index: 3; text-align: center; perspective: 1200px; display: none; } .reveal-zone.active { display: block; } .tier-banner { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; opacity: 0; font-weight: 700; } .tier-banner.show { animation: bannerIn 0.4s ease forwards; } @keyframes bannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .card-flip-wrap { width: 200px; height: 280px; margin: 0 auto; cursor: pointer; opacity: 0; transform: scale(0.4); } .card-flip-wrap.revealed { animation: cardPopIn 0.5s cubic-bezier(.2,1.4,.4,1) forwards; } @keyframes cardPopIn { 0% { opacity: 0; transform: scale(0.3) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } .card-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; } .card-flip-inner.flipped { transform: rotateY(180deg); } .card-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; border: 2px solid var(--pink); background: var(--bg-mid); display: flex; align-items: center; justify-content: center; } .card-face img { width: 100%; height: 100%; object-fit: contain; display: block; } .card-face .img-broken { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-align: center; padding: 0 16px; } .card-face.back { transform: rotateY(180deg); } .card-face.placeholder-back { background: repeating-linear-gradient(45deg, rgba(200,168,75,0.08) 0, rgba(200,168,75,0.08) 8px, transparent 8px, transparent 16px), var(--bg-mid); } .card-flip-wrap.tier-uncommon .card-face { border-color: var(--lavender); box-shadow: 0 0 0 1px var(--lavender), 0 0 16px rgba(183,156,255,0.3); } .card-flip-wrap.tier-rare .card-face { border-color: var(--skyblue); box-shadow: 0 0 0 1px var(--skyblue), 0 0 26px rgba(126,212,255,0.35); } .card-flip-wrap.tier-foil-chase .card-face { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 54px rgba(255,209,92,0.5); animation: foilChasePulse 1.8s ease-in-out infinite; } .card-flip-wrap.tier-foil-chase .card-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(235,255,245,0.38) 48%, rgba(90,255,175,0.42) 52%, transparent 70%); background-size: 250% 250%; animation: holoSweep 2s ease-in-out infinite; pointer-events: none; } @keyframes foilChasePulse { 0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(255,209,92,0.35); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 60px rgba(255,209,92,0.7); } } @keyframes holoSweep { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .reveal-cardname { margin-top: 16px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text-light); } .reveal-hint { margin-top: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } /* flash + particles, scoped to the stage frame */ .flash-pulse { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; border-radius: 22px; } .flash-pulse.fire { animation: flashFire 0.5s ease-out; } @keyframes flashFire { 0% { opacity: 0; } 12% { opacity: 0.7; } 100% { opacity: 0; } } .particle-field { position: fixed; inset: 0; pointer-events: none; z-index: 9800; overflow: hidden; isolation: isolate; /* separate compositing layer — prevents pixel bleed */ } .particle { position: absolute; border-radius: 50%; will-change: transform, opacity; } /* console below the stage */ .stage-console { text-align: center; } .pull-lever { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; background: linear-gradient(180deg, var(--pink-bright), var(--pink)); color: var(--bg-deep); border: none; padding: 15px 44px; cursor: pointer; border-radius: 999px; font-weight: 700; transition: filter 0.15s ease, transform 0.1s ease; box-shadow: 0 6px 20px rgba(255,143,203,0.3); } .pull-lever:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .pull-lever:active:not(:disabled) { transform: translateY(1px); } .pull-lever:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .hint { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); } .error-msg { margin-top: 10px; font-size: 13px; color: #FF9FB0; } .reveal-actions { margin-top: 14px; display: none; gap: 12px; justify-content: center; } .reveal-actions.active { display: flex; } .btn-ghost { font-family: var(--font-display); font-size: 13px; background: transparent; border: 1px solid var(--line); color: var(--text-light); padding: 10px 20px; cursor: pointer; border-radius: 999px; font-weight: 600; transition: border-color .14s ease, color .14s ease, transform .1s ease; } .btn-ghost:hover { border-color: var(--pink); color: var(--pink-bright); transform: translateY(-1px); } .btn-ghost:active { transform: translateY(1px); } .btn-solid { font-family: var(--font-display); font-size: 13px; background: var(--gold); color: var(--bg-deep); border: none; padding: 10px 20px; cursor: pointer; border-radius: 999px; font-weight: 700; transition: filter .14s ease, transform .1s ease; } .btn-solid:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-solid:active { transform: translateY(1px); } /* ---------- cert lookup ---------- */ .cert-lookup-section { margin-top: 48px; margin-bottom: 4px; } .cert-lookup-inner { border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; background: rgba(255,255,255,0.025); } .cert-lookup-label { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-light); margin-bottom: 12px; } .cert-lookup-row { display: flex; gap: 10px; max-width: 420px; } .cert-input { flex: 1; background: var(--bg-mid); border: 1px solid var(--line); color: var(--text-light); padding: 11px 14px; font-family: var(--font-mono); font-size: 14px; border-radius: 10px; } .cert-input:focus { outline: 2px solid var(--pink-bright); outline-offset: 1px; } .cert-btn { font-family: var(--font-display); font-size: 14px; font-weight: 700; background: linear-gradient(180deg, var(--pink-bright), var(--pink)); color: var(--bg-deep); border: none; padding: 11px 22px; border-radius: 10px; cursor: pointer; white-space: nowrap; } .cert-btn:hover { filter: brightness(1.08); } .cert-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cert-result { margin-top: 16px; } .cert-card { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; } .cert-card img { width: 110px; object-fit: contain; border-radius: 10px; border: 2px solid var(--cert-color, var(--pink)); box-shadow: 0 0 16px color-mix(in srgb, var(--cert-color, var(--pink)) 30%, transparent); } .cert-card-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-light); margin-bottom: 4px; } .cert-card-tier { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; } .cert-card-rows { display: flex; flex-direction: column; gap: 6px; } .cert-card-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; } .cert-card-row .label { color: var(--text-dim); width: 110px; flex-shrink: 0; } .cert-card-row .val { color: var(--text-light); font-weight: 500; } .cert-card-row .val.value-num { color: var(--gold); font-size: 14px; font-weight: 700; } .cert-img-placeholder { width: 110px; border: 2px solid var(--cert-color, var(--pink)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--cert-color, var(--pink)); background: rgba(255,255,255,0.03); } .cert-local-match { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cert-local-tag { font-family: var(--font-mono); font-size: 11px; color: var(--skyblue); font-weight: 600; } .cert-local-value { font-family: var(--font-mono); font-size: 13px; color: var(--gold); font-weight: 700; } .cert-pulled-tag { font-family: var(--font-mono); font-size: 10px; background: rgba(255,159,176,0.15); color: #FF9FB0; padding: 2px 8px; border-radius: 999px; } .cert-avail-tag { font-family: var(--font-mono); font-size: 10px; background: rgba(126,212,255,0.12); color: var(--skyblue); padding: 2px 8px; border-radius: 999px; } .cert-not-in-vault { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 10px; } .cert-not-found { font-family: var(--font-mono); font-size: 12.5px; color: #FF9FB0; } @media (max-width: 500px) { .cert-card { grid-template-columns: 80px 1fr; } .cert-card img, .cert-img-placeholder { width: 80px; } } /* ---------- top hits showcase ---------- */ .top-hits-section { margin-top: 48px; } /* Chase Cards section heading */ .chase-heading { background: linear-gradient(135deg, #FFD15C 0%, #F0F8FF 40%, #C490FF 70%, #FFD15C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200%; animation: chaseGradientShift 5s linear infinite; font-size: 22px; } @keyframes chaseGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .top-hits-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; overflow: visible; } /* Unified floor card tile — identical structure to admin .lib-card */ .floor-card { border: 1px solid color-mix(in srgb, var(--tier-glow-color, #C8A84B) 65%, transparent); background: var(--bg-deep); border-radius: 10px; padding: 0; position: relative; cursor: pointer; overflow: hidden; /* No fixed aspect-ratio — image height defines card height */ } .floor-card img { width: 100%; height: auto; /* natural height — image defines the card height, no cropping */ object-fit: contain; object-position: center top; display: block; } /* (duplicate render-blocking @import removed — fonts now load from index.html head) */ /* Root-level guard: never expose a horizontal scrollbar from a transient wide layer (rip FX, off-screen card fly-in animations). The base page background lives HERE (on the root) rather than on : the root's background is propagated across the whole viewport canvas on EVERY device, so it's identical on mobile and desktop. (body used background-attachment:fixed, which most mobile browsers ignore — that left the base white behind the lights on phones.) */ html { overflow-x: clip; /* CYBERPUNK CASINO base — near-black blue/violet with a neon HORIZON glow (magenta floor, cyan + purple sky) so the neon lights pop. On the root so it's propagated across the viewport canvas, mobile-safe + identical everywhere. */ background-color: #04050d; /* solid floor — never white */ background-image: radial-gradient(ellipse 130% 58% at 50% 102%, rgba(255,45,155,0.20), transparent 62%), radial-gradient(circle at 12% -6%, rgba(0,229,255,0.14), transparent 55%), radial-gradient(circle at 88% 6%, rgba(170,85,255,0.15), transparent 55%), linear-gradient(180deg, #04050d 0%, #080719 46%, #120a30 100%); background-repeat: no-repeat; background-size: cover; min-height: 100%; } :root { /* ── Obsidian + Antique Gold palette ── */ --bg-deep: #07090E; --bg-mid: #0D1118; --bg-panel: #131924; --gold: #C8A84B; --gold-bright: #E2C46A; --silver: #A8B0C0; --accent: #5B8CCC; --pink: #C8A84B; /* repurposed to gold for gradients */ --pink-bright: #E2C46A; --lavender: #7A90BC; --skyblue: #6AACED; --text-light: #EDE8DC; /* warm ivory */ --text-dim: #7A7060; /* warm gray */ --line: rgba(200,168,75,0.18); /* subtle gold border */ --font-display: 'Baloo 2', sans-serif; --font-body: 'Quicksand', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* ── Global tier colors ── */ --tier-common: #FFFFFF; --tier-uncommon: #60C8FF; --tier-rare: #C490FF; --tier-foil-chase: #FFD15C; } /* Tier CSS classes: any .tier-X element inherits the correct --tier-glow-color */ .tier-common { --tier-glow-color: var(--tier-common); } .tier-uncommon { --tier-glow-color: var(--tier-uncommon); } .tier-rare { --tier-glow-color: var(--tier-rare); } .tier-foil-chase { --tier-glow-color: var(--tier-foil-chase); } * { box-sizing: border-box; } body { margin: 0; background: transparent; /* base gradient now lives on — propagated to the viewport canvas, so it's mobile-safe + identical on every device (no background-attachment:fixed) */ color: var(--text-light); font-family: var(--font-body); font-weight: 500; min-height: 100vh; position: relative; overflow-x: clip; /* never expose a horizontal scrollbar from a transient wide layer (rip FX, off-screen card fly-in) */ } .skip-link { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; /* clamp to a point so it can't widen the page canvas */ } .skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; overflow: visible; background: var(--text-light); color: var(--bg-deep); padding: 6px 12px; z-index: 999; } /* ---------- header ---------- */ .ledger-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; /* one integrated, centered control cluster */ padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(42, 27, 87, 0.6); backdrop-filter: blur(6px); flex-wrap: wrap; gap: 10px; } /* Minimalistic: the build version isn't part of the user-facing controls. */ .app-version { display: none; } .brand { display: flex; align-items: center; gap: 10px; } .brand-icon { font-size: 22px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,209,92,0.6)); } .brand h1 { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.01em; margin: 0; color: var(--text-light); font-weight: 700; } .balance { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: rgba(255, 143, 203, 0.08); padding: 8px 18px; border-radius: 999px; } .balance .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .balance .amount { font-family: var(--font-display); font-size: 19px; color: var(--gold); font-weight: 700; } nav.tabs { display: flex; gap: 6px; } nav.tabs a { font-family: var(--font-display); font-size: 13px; text-decoration: none; color: var(--text-dim); padding: 8px 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; } nav.tabs a.active, nav.tabs a:hover { color: var(--text-light); background: rgba(255, 143, 203, 0.16); border-color: var(--line); } /* ---------- main layout ---------- */ main { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 0 24px 80px; /* no top edge — the game viewer sits topmost */ } /* Gallery view keeps a little breathing room up top (attract mode does not). */ #galleryView { padding-top: 24px; } .hall-title { text-align: center; margin-bottom: 28px; } .hall-title .eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-bright); margin-bottom: 6px; } .hall-title h2 { font-family: var(--font-display); font-size: 30px; margin: 0; font-weight: 700; color: var(--text-light); } /* floor-layout shows only during pull animation — pack + reveal centered */ .floor-layout { display: flex; flex-direction: column; align-items: center; padding: 0 24px; max-width: 600px; margin: 0 auto; } /* pool-panel inside floor-layout — compact strip below the animation */ .floor-layout .pool-panel { width: 100%; max-width: 500px; } /* ---------- pool panel (left): single-pool odds card ---------- */ .pool-panel { display: flex; flex-direction: column; } .odds-card { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,0.04), transparent), var(--bg-panel); border-radius: 18px; padding: 24px 22px; } .odds-desc { font-size: 13.5px; color: var(--text-dim); margin: 0 0 18px; line-height: 1.5; } .odds-stat { text-align: center; margin-bottom: 14px; } .odds-stat-number { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--pink-bright); margin-right: 8px; } .odds-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-dim); } .overview-bar-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); } .overview-bar-track span { display: block; height: 100%; transition: width 0.5s ease; } .overview-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); } .overview-legend .legend-row { display: flex; justify-content: space-between; align-items: center; } .overview-legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; } .overview-legend .legend-empty { opacity: 0.45; } .odds-payout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: center; } /* ---------- stage panel (right) ---------- */ .stage-panel { display: flex; flex-direction: column; gap: 16px; } .stage-frame { position: relative; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 50% 30%, rgba(183,156,255,0.12), transparent 60%), var(--bg-panel); min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .stage-sparkle-bg { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 15% 25%, #fff 100%, transparent), radial-gradient(1.4px 1.4px at 75% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 80%, #fff 100%, transparent), radial-gradient(1.4px 1.4px at 35% 65%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 50%, #fff 100%, transparent); opacity: 0.4; pointer-events: none; } /* idle-stage: see the full-width definition in the carousel section below */ .idle-pack { position: relative; width: 140px; height: 180px; margin: 0 auto 20px; animation: idleBob 3.2s ease-in-out infinite; } @keyframes idleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .idle-pack-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, var(--idle-color, var(--pink)) 0%, transparent 70%); opacity: 0.35; animation: idleGlow 3.2s ease-in-out infinite; filter: blur(4px); } @keyframes idleGlow { 0%, 100% { opacity: 0.25; transform: scale(0.92); } 50% { opacity: 0.45; transform: scale(1.05); } } .idle-pack-body { position: relative; width: 100%; height: 100%; border-radius: 14px; border: 2px solid var(--idle-color, var(--pink)); background: linear-gradient(145deg, rgba(255,255,255,0.08), transparent 60%), var(--bg-mid); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px color-mix(in srgb, var(--idle-color, var(--pink)) 30%, transparent); } .idle-pack-star { font-size: 36px; color: var(--idle-color, var(--pink)); animation: idleSpin 6s linear infinite; display: inline-block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--idle-color, var(--pink)) 60%, transparent)); } @keyframes idleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .idle-caption { font-family: var(--font-display); font-size: 15px; color: var(--text-dim); font-weight: 600; } /* sealed pack shown during the rip sequence */ .pack-shell { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 280px; z-index: 4; display: none; } .pack-shell.active { display: block; } .pack-half { position: absolute; left: 0; width: 100%; height: 50%; background: linear-gradient(135deg, #3a2470, #2a1b57 45%, #4a2e7a); border: 2px solid var(--pack-color, var(--pink)); } .pack-half.top { top: 0; border-bottom: none; border-radius: 14px 14px 0 0; background-image: repeating-linear-gradient(45deg, rgba(200,168,75,0.12) 0, rgba(200,168,75,0.12) 6px, transparent 6px, transparent 14px); } .pack-half.bottom { bottom: 0; border-top: none; border-radius: 0 0 14px 14px; background-image: repeating-linear-gradient(-45deg, rgba(200,168,75,0.12) 0, rgba(200,168,75,0.12) 6px, transparent 6px, transparent 14px); } .pack-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--pink-bright), var(--pack-color, var(--pink)) 70%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; color: var(--bg-deep); font-weight: 700; box-shadow: 0 0 18px color-mix(in srgb, var(--pack-color, var(--pink)) 60%, transparent); } .pack-shell.shaking { animation: packShake var(--shake-duration, 0.55s) ease-in-out; } @keyframes packShake { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 15% { transform: translate(calc(-50% - 6px), -50%) rotate(-2deg); } 30% { transform: translate(calc(-50% + 6px), -50%) rotate(2deg); } 45% { transform: translate(calc(-50% - 7px), -50%) rotate(-2.5deg); } 60% { transform: translate(calc(-50% + 7px), -50%) rotate(2.5deg); } 75% { transform: translate(calc(-50% - 4px), -50%) rotate(-1.5deg); } 90% { transform: translate(calc(-50% + 4px), -50%) rotate(1.5deg); } } .pack-shell.tearing .pack-half.top { animation: tearUp 0.45s ease-in forwards; } .pack-shell.tearing .pack-half.bottom { animation: tearDown 0.45s ease-in forwards; } .pack-shell.tearing .pack-seal { animation: sealPop 0.3s ease-in forwards; } @keyframes tearUp { to { transform: translateY(-160px) rotate(-12deg); opacity: 0; } } @keyframes tearDown { to { transform: translateY(160px) rotate(12deg); opacity: 0; } } @keyframes sealPop { to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } } /* card reveal */ .reveal-zone { position: relative; z-index: 3; text-align: center; perspective: 1200px; display: none; } .reveal-zone.active { display: block; } .tier-banner { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; opacity: 0; font-weight: 700; } .tier-banner.show { animation: bannerIn 0.4s ease forwards; } @keyframes bannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .card-flip-wrap { width: 200px; height: 280px; margin: 0 auto; cursor: pointer; opacity: 0; transform: scale(0.4); } .card-flip-wrap.revealed { animation: cardPopIn 0.5s cubic-bezier(.2,1.4,.4,1) forwards; } @keyframes cardPopIn { 0% { opacity: 0; transform: scale(0.3) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } .card-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; } .card-flip-inner.flipped { transform: rotateY(180deg); } .card-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; border: 2px solid var(--pink); background: var(--bg-mid); display: flex; align-items: center; justify-content: center; } .card-face img { width: 100%; height: 100%; object-fit: contain; display: block; } .card-face .img-broken { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-align: center; padding: 0 16px; } .card-face.back { transform: rotateY(180deg); } .card-face.placeholder-back { background: repeating-linear-gradient(45deg, rgba(200,168,75,0.08) 0, rgba(200,168,75,0.08) 8px, transparent 8px, transparent 16px), var(--bg-mid); } .card-flip-wrap.tier-uncommon .card-face { border-color: var(--lavender); box-shadow: 0 0 0 1px var(--lavender), 0 0 16px rgba(183,156,255,0.3); } .card-flip-wrap.tier-rare .card-face { border-color: var(--skyblue); box-shadow: 0 0 0 1px var(--skyblue), 0 0 26px rgba(126,212,255,0.35); } .card-flip-wrap.tier-foil-chase .card-face { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 54px rgba(255,209,92,0.5); animation: foilChasePulse 1.8s ease-in-out infinite; } .card-flip-wrap.tier-foil-chase .card-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(235,255,245,0.38) 48%, rgba(90,255,175,0.42) 52%, transparent 70%); background-size: 250% 250%; animation: holoSweep 2s ease-in-out infinite; pointer-events: none; } @keyframes foilChasePulse { 0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(255,209,92,0.35); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 60px rgba(255,209,92,0.7); } } @keyframes holoSweep { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .reveal-cardname { margin-top: 16px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text-light); } .reveal-hint { margin-top: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } /* flash + particles, scoped to the stage frame */ .flash-pulse { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; border-radius: 22px; } .flash-pulse.fire { animation: flashFire 0.5s ease-out; } @keyframes flashFire { 0% { opacity: 0; } 12% { opacity: 0.7; } 100% { opacity: 0; } } .particle-field { position: fixed; inset: 0; pointer-events: none; z-index: 9800; overflow: hidden; isolation: isolate; /* separate compositing layer — prevents pixel bleed */ } .particle { position: absolute; border-radius: 50%; will-change: transform, opacity; } /* console below the stage */ .stage-console { text-align: center; } .pull-lever { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; background: linear-gradient(180deg, var(--pink-bright), var(--pink)); color: var(--bg-deep); border: none; padding: 15px 44px; cursor: pointer; border-radius: 999px; font-weight: 700; transition: filter 0.15s ease, transform 0.1s ease; box-shadow: 0 6px 20px rgba(255,143,203,0.3); } .pull-lever:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .pull-lever:active:not(:disabled) { transform: translateY(1px); } .pull-lever:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .hint { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); } .error-msg { margin-top: 10px; font-size: 13px; color: #FF9FB0; } .reveal-actions { margin-top: 14px; display: none; gap: 12px; justify-content: center; } .reveal-actions.active { display: flex; } .btn-ghost { font-family: var(--font-display); font-size: 13px; background: transparent; border: 1px solid var(--line); color: var(--text-light); padding: 10px 20px; cursor: pointer; border-radius: 999px; font-weight: 600; transition: border-color .14s ease, color .14s ease, transform .1s ease; } .btn-ghost:hover { border-color: var(--pink); color: var(--pink-bright); transform: translateY(-1px); } .btn-ghost:active { transform: translateY(1px); } .btn-solid { font-family: var(--font-display); font-size: 13px; background: var(--gold); color: var(--bg-deep); border: none; padding: 10px 20px; cursor: pointer; border-radius: 999px; font-weight: 700; transition: filter .14s ease, transform .1s ease; } .btn-solid:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-solid:active { transform: translateY(1px); } /* ---------- cert lookup ---------- */ .cert-lookup-section { margin-top: 48px; margin-bottom: 4px; } .cert-lookup-inner { border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; background: rgba(255,255,255,0.025); } .cert-lookup-label { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-light); margin-bottom: 12px; } .cert-lookup-row { display: flex; gap: 10px; max-width: 420px; } .cert-input { flex: 1; background: var(--bg-mid); border: 1px solid var(--line); color: var(--text-light); padding: 11px 14px; font-family: var(--font-mono); font-size: 14px; border-radius: 10px; } .cert-input:focus { outline: 2px solid var(--pink-bright); outline-offset: 1px; } .cert-btn { font-family: var(--font-display); font-size: 14px; font-weight: 700; background: linear-gradient(180deg, var(--pink-bright), var(--pink)); color: var(--bg-deep); border: none; padding: 11px 22px; border-radius: 10px; cursor: pointer; white-space: nowrap; } .cert-btn:hover { filter: brightness(1.08); } .cert-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cert-result { margin-top: 16px; } .cert-card { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; } .cert-card img { width: 110px; object-fit: contain; border-radius: 10px; border: 2px solid var(--cert-color, var(--pink)); box-shadow: 0 0 16px color-mix(in srgb, var(--cert-color, var(--pink)) 30%, transparent); } .cert-card-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-light); margin-bottom: 4px; } .cert-card-tier { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; } .cert-card-rows { display: flex; flex-direction: column; gap: 6px; } .cert-card-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; } .cert-card-row .label { color: var(--text-dim); width: 110px; flex-shrink: 0; } .cert-card-row .val { color: var(--text-light); font-weight: 500; } .cert-card-row .val.value-num { color: var(--gold); font-size: 14px; font-weight: 700; } .cert-img-placeholder { width: 110px; border: 2px solid var(--cert-color, var(--pink)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--cert-color, var(--pink)); background: rgba(255,255,255,0.03); } .cert-local-match { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cert-local-tag { font-family: var(--font-mono); font-size: 11px; color: var(--skyblue); font-weight: 600; } .cert-local-value { font-family: var(--font-mono); font-size: 13px; color: var(--gold); font-weight: 700; } .cert-pulled-tag { font-family: var(--font-mono); font-size: 10px; background: rgba(255,159,176,0.15); color: #FF9FB0; padding: 2px 8px; border-radius: 999px; } .cert-avail-tag { font-family: var(--font-mono); font-size: 10px; background: rgba(126,212,255,0.12); color: var(--skyblue); padding: 2px 8px; border-radius: 999px; } .cert-not-in-vault { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 10px; } .cert-not-found { font-family: var(--font-mono); font-size: 12.5px; color: #FF9FB0; } @media (max-width: 500px) { .cert-card { grid-template-columns: 80px 1fr; } .cert-card img, .cert-img-placeholder { width: 80px; } } /* ---------- top hits showcase ---------- */ .top-hits-section { margin-top: 48px; } /* Chase Cards section heading */ .chase-heading { background: linear-gradient(135deg, #FFD15C 0%, #F0F8FF 40%, #C490FF 70%, #FFD15C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200%; animation: chaseGradientShift 5s linear infinite; font-size: 22px; } @keyframes chaseGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .top-hits-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; overflow: visible; } /* Unified floor card tile — identical structure to admin .lib-card */ /* ---------- inventory ---------- */ .inventory-section { margin-top: 48px; } .inventory-section .section-head, .top-hits-section .section-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 20px; } .inventory-section h3, .top-hits-section h3 { font-family: var(--font-display); font-size: 18px; margin: 0; font-weight: 700; color: var(--text-light); } .section-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; overflow: visible; align-items: start; /* each card shrinks to its image height, no stretching */ } /* PERF: skip rendering + image decode for gallery cards that are scrolled off-screen. content-visibility:auto lets the browser bypass layout/paint for off-screen tiles (big win on long decks / lower-end Android), while contain-intrinsic-size reserves an approximate height so the scrollbar stays stable. `auto` makes the browser remember each card's REAL size once it has been rendered, so re-scrolling never jumps. Paired with the cards' loading="lazy" imgs, off-screen work is fully deferred. */ .inventory-grid .floor-card, #inventoryGrid .floor-card { content-visibility: auto; contain-intrinsic-size: 168px 236px; /* universal fallback */ contain-intrinsic-size: auto 168px auto 236px; /* modern: remember each card's real size */ } /* Phones: a denser 4-up grid (max 4 columns) so more of the collection is visible. */ @media (max-width: 640px) { .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } } /* inventory uses same .floor-card tile defined above */ .empty-state { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: center; padding: 30px 0; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; } /* ================================================================ CARD HOVER PREVIEW ================================================================ */ .card-hover-preview { position: fixed; z-index: 9000; width: 310px; background: rgba(14, 6, 32, 0.97); border: 1px solid rgba(200,168,75,0.2); border-radius: 20px; padding: 14px 14px 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04), 0 0 40px color-mix(in srgb, var(--tier-color, var(--pink)) 15%, transparent); pointer-events: none; opacity: 0; transform: scale(0.9) translateY(10px); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.22,.68,0,1.2); overflow: hidden; } .card-hover-preview.visible { opacity: 1; transform: scale(1) translateY(0); } .hp-glow { position: absolute; inset: -60px; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--glow, var(--pink)) 25%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hp-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--tier-color, var(--pink)) 50%, transparent); margin-bottom: 12px; object-fit: contain; /* Let the browser render at full native resolution */ image-rendering: high-quality; box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 24px color-mix(in srgb, var(--tier-color, var(--pink)) 40%, transparent); } .hp-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; } .hp-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-light); line-height: 1.25; } .hp-tier { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 3px; } .hp-grade { font-family: var(--font-mono); font-size: 13px; color: var(--gold); font-weight: 700; } .hp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .hp-value { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--gold); margin-top: 6px; } /* hoverable card — real magnification, not just a nudge */ /* Floor page cards: smooth pop, no overshoot bounce */ .hoverable-card { cursor: pointer; transition: transform 0.28s ease-out, filter 0.2s ease, box-shadow 0.2s ease; position: relative; z-index: 1; /* will-change only while actually hovering (set below) — keeping it on always promoted every card to its own layer and caused compositing jitter/bounce on mobile scroll. */ } @media (hover: hover) { .hoverable-card:hover { transform: scale(1.06); /* subtle lift — same feel as reveal cards */ z-index: 200; will-change: transform; filter: brightness(1.18); box-shadow: 0 0 0 2px var(--tier-glow-color, #EEEEEE), 0 0 24px var(--tier-glow-color, #EEEEEE), 0 0 50px color-mix(in srgb, var(--tier-glow-color, #EEEEEE) 50%, transparent) !important; } } /* Touch devices: never apply hover lifts/scales. On touch the :hover state sticks after a tap and while scrolling, so cards + the userbar pills appear to bounce around. Force them flat. */ @media (hover: none), (pointer: coarse) { .hoverable-card, .hoverable-card:hover, .sc-ticker-inner, .sc-ticker-inner:hover, .floor-card:hover, .pb-credits-btn:hover, .pb-name-btn:hover, .hero-stage .card-face:hover { transform: none !important; will-change: auto !important; } } /* Admin deck cards: gentle scale, buttons stay clickable */ .hoverable-lib-card { cursor: pointer; transition: transform 0.22s ease-out, filter 0.18s ease, box-shadow 0.18s ease; position: relative; z-index: 1; } .hoverable-lib-card:hover { transform: scale(1.22); z-index: 200; filter: brightness(1.1); box-shadow: 0 0 0 2px var(--tier-glow-color, #EEEEEE), 0 0 20px var(--tier-glow-color, #EEEEEE), 0 0 44px color-mix(in srgb, var(--tier-glow-color, #EEEEEE) 45%, transparent) !important; } /* CAROUSEL cards: NO transform change whatsoever — eliminates 3D hover jitter. The orbit transform must stay identical; only glow and brightness change. */ .sc-car-card.hoverable-card:hover { transform: rotateY(calc(var(--idx) * (360deg / var(--n)))) translateZ(350px) !important; filter: brightness(1.22) saturate(1.2) !important; box-shadow: 0 0 0 3px var(--tier-glow-color, #FFD15C), 0 0 24px var(--tier-glow-color, #FFD15C), 0 0 55px color-mix(in srgb, var(--tier-glow-color, #FFD15C) 60%, transparent) !important; } /* overflow:visible already set in each grid */ /* ================================================================ CINEMATIC ENTRANCE — RARE & LEGENDARY ================================================================ */ .entrance-screen { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; } .entrance-screen.active { visibility: visible; } .entrance-screen.done { opacity: 0 !important; transition: opacity 0.35s ease; } /* ----- beams (radial light rays behind card) ----- */ .entrance-beams { /* A big centred SQUARE (not a viewport rectangle) so the conic-gradient rays always overfill the screen at EVERY rotation angle — otherwise rotating a viewport-shaped box exposes its rectangular edge, which on a tall phone reads as a cropped box spinning around. Centre via margins, NOT transform, because the rareBeams/foilBeams keyframes own the transform (scale + rotate). */ position: absolute; inset: auto; top: 50%; left: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0; will-change: transform, opacity; } /* ----- screen flash overlay ----- */ .entrance-flash { position: absolute; inset: 0; opacity: 0; } /* ----- the card itself — fills much more of the screen ----- */ .entrance-card { position: relative; z-index: 2; /* Large enough to show real card detail */ width: min(440px, 65vw); max-height: 88vh; border-radius: 16px; overflow: hidden; opacity: 0; filter: brightness(1.4); } .entrance-card img { width: 100%; height: auto; display: block; border-radius: 16px; image-rendering: high-quality; } /* ---- RARE entrance: card blasts in from the left ---- */ .entrance-screen.rare { background: linear-gradient(135deg, rgba(10,20,50,0.96) 0%, rgba(5,10,30,0.99) 100%); animation: rareScreenIn 1.1s cubic-bezier(.22,1,.36,1) forwards; } .entrance-screen.rare .entrance-beams { animation: rareBeams 1.1s ease-out forwards; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(126,212,255,0.12) 5deg, transparent 10deg, transparent 28deg, rgba(126,212,255,0.08) 33deg, transparent 38deg, transparent 56deg, rgba(126,212,255,0.12) 61deg, transparent 66deg, transparent 84deg, rgba(126,212,255,0.08) 89deg, transparent 94deg, transparent 112deg, rgba(126,212,255,0.12) 117deg, transparent 122deg, transparent 140deg, rgba(126,212,255,0.08) 145deg, transparent 150deg, transparent 168deg, rgba(126,212,255,0.12) 173deg, transparent 178deg, transparent 196deg, rgba(126,212,255,0.08) 201deg, transparent 206deg, transparent 224deg, rgba(126,212,255,0.12) 229deg, transparent 234deg, transparent 252deg, rgba(126,212,255,0.08) 257deg, transparent 262deg ); } .entrance-screen.rare .entrance-flash { background: #6AACED; animation: rareFlash 1.1s ease forwards; } .entrance-screen.rare .entrance-card { animation: rareCardEntry 1.1s cubic-bezier(.22,1,.36,1) forwards; box-shadow: 0 0 60px #6AACED, 0 0 120px rgba(126,212,255,0.4), -20px 0 80px rgba(126,212,255,0.3); } @keyframes rareScreenIn { 0% { opacity: 0; } 5% { opacity: 1; } 100% { opacity: 1; } } @keyframes rareBeams { 0% { opacity: 0; transform: scale(0.5) rotate(-40deg); } 30% { opacity: 1; transform: scale(1.1) rotate(0deg); } 100% { opacity: 0.6; transform: scale(1.3) rotate(8deg); } } @keyframes rareFlash { 0% { opacity: 0; } 8% { opacity: 0.6; } 20% { opacity: 0; } 100% { opacity: 0; } } @keyframes rareCardEntry { 0% { opacity: 0; transform: translateX(-160vw) rotate(-20deg) scale(0.65); filter: blur(16px) brightness(2.5); } 30% { opacity: 1; filter: blur(4px) brightness(1.8); } 58% { transform: translateX(14px) rotate(2.5deg) scale(1.07); filter: blur(0) brightness(1.3); } 75% { transform: translateX(-6px) rotate(-1deg) scale(0.97); filter: blur(0) brightness(1.1); } 88% { transform: translateX(3px) rotate(0.5deg) scale(1.01); } 100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; filter: blur(0) brightness(1); } } /* ---- LEGENDARY entrance: zooms from a distant spark ---- */ .entrance-screen.foil-chase-old { background: radial-gradient(ellipse at center, rgba(40,20,0,0.98) 0%, rgba(5,2,15,0.99) 70%); animation: legScreenIn 1.8s cubic-bezier(.22,1,.36,1) forwards; } .entrance-screen.foil-chase-old .entrance-beams { animation: legBeams 1.8s ease-out forwards; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,209,92,0.14) 4deg, transparent 9deg, transparent 26deg, rgba(255,209,92,0.09) 30deg, transparent 35deg, transparent 52deg, rgba(255,209,92,0.14) 56deg, transparent 61deg, transparent 78deg, rgba(255,209,92,0.09) 82deg, transparent 87deg, transparent 104deg, rgba(255,209,92,0.14) 108deg, transparent 113deg, transparent 130deg, rgba(255,209,92,0.09) 134deg, transparent 139deg, transparent 156deg, rgba(255,255,255,0.1) 160deg, transparent 165deg, transparent 182deg, rgba(255,209,92,0.14) 186deg, transparent 191deg, transparent 208deg, rgba(255,209,92,0.09) 212deg, transparent 217deg ); } .entrance-screen.foil-chase-old .entrance-flash { background: radial-gradient(circle at center, #fff 0%, #FFD15C 35%, rgba(255,209,92,0.3) 65%, transparent 80%); animation: legFlash 1.8s ease forwards; } .entrance-screen.foil-chase-old .entrance-card { /* Legendary gets even more of the screen (size set on the img). */ animation: legCardEntry 1.8s cubic-bezier(.22,1,.36,1) forwards; box-shadow: 0 0 80px #FFD15C, 0 0 180px rgba(255,209,92,0.5), 0 0 300px rgba(255,209,92,0.2); } @keyframes legScreenIn { 0% { opacity: 0; } 4% { opacity: 1; } 100% { opacity: 1; } } @keyframes legBeams { 0% { opacity: 0; transform: scale(0.1) rotate(0deg); } 25% { opacity: 0.8; transform: scale(0.9) rotate(45deg); } 50% { opacity: 1; transform: scale(1.3) rotate(90deg); } 100% { opacity: 0.7; transform: scale(1.7) rotate(125deg); } } @keyframes legFlash { 0% { opacity: 0; } 18% { opacity: 0; } 28% { opacity: 1; } 42% { opacity: 0.15; } 55% { opacity: 0.75; } 72% { opacity: 0; } 100% { opacity: 0; } } /* ---- already-owned / replace state on floor PSA cert result ---- */ .cert-already-in-deck { opacity: 0.72; filter: grayscale(0.35); transition: opacity 0.2s, filter 0.2s; } .cert-already-in-deck:hover { opacity: 1; filter: grayscale(0); } .cert-already-owned { margin-bottom: 10px; } .cert-owned-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; border: 1px solid; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; } .cert-replace-btn { display: block; font-family: var(--font-mono); font-size: 11.5px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--pink-bright); padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .cert-replace-btn:hover { background: rgba(255,143,203,0.12); border-color: var(--pink-bright); } .cert-replace-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- LEGENDARY: deepest zoom — starts as a genuine single pixel ---- */ @keyframes legCardEntry { 0% { opacity: 0; transform: scale(0.003) rotate(900deg); filter: blur(22px) brightness(8) saturate(2); } 8% { opacity: 0.5; transform: scale(0.008) rotate(600deg); filter: blur(20px) brightness(7); } 20% { opacity: 0.8; transform: scale(0.04) rotate(340deg); filter: blur(14px) brightness(5); } 35% { opacity: 1; transform: scale(0.2) rotate(160deg); filter: blur(7px) brightness(3.5); } 50% { transform: scale(1.28) rotate(14deg); filter: blur(2px) brightness(2.2); } 63% { transform: scale(0.87) rotate(-6deg); filter: blur(0) brightness(1.35); } 74% { transform: scale(1.07) rotate(3deg); filter: blur(0) brightness(1.15); } 84% { transform: scale(0.97) rotate(-1deg); } 92% { transform: scale(1.02) rotate(0.4deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0) brightness(1); } } /* ================================================================ STAGE IDLE — 3D rotating card showcase (replaces idle pack) ================================================================ */ /* Full-width idle carousel stage */ /* hero-stage: always full-width; contents switch between carousel and animation */ .hero-stage { width: 100%; min-height: 360px; position: relative; /* Clip only horizontally (the conveyor wraps sideways); let cards + their glow show vertically so the carousel doesn't read as a hard-cropped band — it blends into the shared page background like the chase cards do. */ overflow-x: clip; overflow-y: visible; /* Transparent so the page's background flows through the game area too — keeps the whole app on one continuous background instead of a distinct box. */ background: transparent; /* Own horizontal drags for the spin gesture; let vertical scroll the page. */ touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* The per-band glow oval was REMOVED — it lit just the game area and made it read as a distinct, cropped box. The ambient glow now lives on the page-wide #stageFx layer so the whole view shares one continuous background. */ .hero-stage::before { content: none; } /* stage-frame fills the hero-stage during animation */ .hero-stage .stage-frame { position: absolute; inset: 0; border: none; border-radius: 0; min-height: unset; background: radial-gradient(circle at 50% 30%, rgba(183,156,255,0.10), transparent 60%), var(--bg-deep); } /* Compact odds bar shown below carousel during idle */ .idle-odds-bar { padding: 10px 32px 18px; display: flex; flex-direction: column; gap: 8px; max-width: 900px; margin: 0 auto; } /* 3D scene wrapper — perspective is set here, fills full idle stage */ .sc-scene { position: absolute; inset: 0; perspective: 800px; /* wide angle — 6 cards visible simultaneously */ perspective-origin: 50% 40%; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Ambient glow behind the carousel */ .sc-scene-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* The rotating ring — bigger cards in the full-width space */ .sc-carousel { position: relative; width: 128px; height: 180px; /* 5:7 ≈ PSA slab ratio */ transform-style: preserve-3d; animation: carouselSpin 0.9s linear infinite; z-index: 1; } @keyframes carouselSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /* Each card in the carousel */ .sc-car-card { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; } .sc-car-card img { width: 100%; height: auto; display: block; image-rendering: high-quality; transform: translateZ(0); } @keyframes kenBurnsOrbit { 0% { transform: scale(1.10) translate( 0%, 0%); } 25% { transform: scale(1.28) translate(-4%, 3%); } 50% { transform: scale(1.18) translate( 4%, -3%); } 75% { transform: scale(1.32) translate(-3%, -3%); } 100% { transform: scale(1.10) translate( 0%, 0%); } } /* Card label (name + grade) shown at bottom of each card */ .sc-car-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(10,4,28,0.85) 60%); padding: 20px 6px 5px; display: flex; flex-direction: column; gap: 1px; align-items: center; } .sc-car-grade { font-family: var(--font-display); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; } .sc-car-name { font-family: var(--font-body); font-size: 7px; color: rgba(255,255,255,0.7); text-align: center; line-height: 1.2; } /* carousel card hover now handled by .sc-car-card.hoverable-card:hover above */ /* ---------------------------------------------------------------- SPIN button — center overlay (NOT inside the 3D scene) ---------------------------------------------------------------- */ .sc-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: auto; } /* ---- RIP button — dark glass, gold border, dominant action ---- */ .spin-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 72px 20px; background: linear-gradient(180deg, rgba(7,9,14,0.96) 0%, rgba(7,9,14,0.99) 100%); border: 2px solid rgba(255,209,92,0.75); border-radius: 16px; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,209,92,0.15), 0 0 40px rgba(255,209,92,0.45), 0 0 80px rgba(196,144,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,209,92,0.15); animation: ripPulse 2.8s ease-in-out infinite; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } @keyframes ripPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,209,92,0.15), 0 0 35px rgba(255,209,92,0.4), 0 0 70px rgba(196,144,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 0 2px rgba(255,209,92,0.3), 0 0 60px rgba(255,209,92,0.65), 0 0 120px rgba(196,144,255,0.3), inset 0 1px 0 rgba(255,255,255,0.12); } } .spin-btn:not(:disabled):hover { transform: scale(1.06) translateY(-2px); border-color: rgba(255,209,92,1); box-shadow: 0 0 0 2px rgba(255,209,92,0.4), 0 0 70px rgba(255,209,92,0.8), 0 0 140px rgba(196,144,255,0.4), 0 16px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.14); animation: none; } .spin-btn:not(:disabled):active { transform: scale(0.97) translateY(0); } .spin-btn:disabled { opacity: 0.38; cursor: not-allowed; animation: none; border-color: rgba(255,209,92,0.2); } .spin-label { font-family: var(--font-display); font-size: 40px; font-weight: 900; letter-spacing: 0.28em; text-indent: 0.28em; /* compensate for letter-spacing on last char */ line-height: 1; background: linear-gradient(160deg, #FFD15C 0%, #FFF8DC 35%, #FFD15C 55%, #F0C040 80%, #FFD15C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 10px rgba(255,209,92,0.7)); } .spin-price { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; line-height: 1; } .spin-hint { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.38); text-align: center; letter-spacing: 0.04em; margin: 0; text-shadow: 0 0 12px rgba(0,0,0,0.8); } /* ================================================================ REVEAL ZONE — expanded state: card slides left, PSA panel right ================================================================ */ .reveal-zone .reveal-inner { display: flex; align-items: flex-start; justify-content: center; gap: 0; width: 100%; } /* card slides from center to left on expand */ .reveal-zone .card-flip-wrap { transition: transform 0.65s cubic-bezier(.22,1,.36,1), margin 0.65s ease; } .reveal-zone.expanded .reveal-inner { gap: 20px; } .reveal-zone.expanded .card-flip-wrap { transform: translateX(-10%) scale(0.85); flex-shrink: 0; } /* PSA stats panel slides in from right */ .reveal-psa-panel { width: 0; overflow: hidden; opacity: 0; text-align: center; /* centers the inline-flex PSA slab label on desktop too */ transition: width 0.65s cubic-bezier(.22,1,.36,1), opacity 0.5s ease 0.3s; flex-shrink: 0; } .reveal-zone.expanded .reveal-psa-panel { width: 180px; opacity: 1; } .rp-tier { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .rp-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-light); line-height: 1.25; margin-bottom: 4px; } .rp-value { font-family: var(--font-mono); font-size: 13px; font-weight: 700; margin-bottom: 12px; } .rp-stats { display: flex; flex-direction: column; gap: 3px; } .rp-row { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; padding: 3px 0; border-bottom: 1px solid rgba(200,168,75,0.1); white-space: nowrap; } .rp-label { font-family: var(--font-mono); color: rgba(200,168,75,0.55); flex-shrink: 0; } .rp-val { font-family: var(--font-mono); color: var(--text-light); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; } .rp-cert-link { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--skyblue, #60C8FF); text-decoration: none; } .rp-cert-link:hover { text-decoration: underline; } /* ================================================================ CAROUSEL CARD HOVER — border intensify only, NO scale/zoom ================================================================ */ /* carousel hover: see rule above */ /* ================================================================ CHASE CARDS SECTION — celebratory animated glow per card ================================================================ */ .chase-heading { font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: 0.04em; background: linear-gradient(90deg, #00e5ff, #ffffff 30%, #ff2d9b 52%, #a855ff 74%, #00e5ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% auto; filter: drop-shadow(0 0 10px rgba(0,229,255,.45)) drop-shadow(0 0 18px rgba(255,45,155,.3)); animation: chaseHeadingShimmer 4s linear infinite; } @keyframes chaseHeadingShimmer { from { background-position: 0% center; } to { background-position: 200% center; } } /* Each top-card pulses its tier glow on a staggered delay */ .floor-card.celebrate { animation: cardCelebrate 4s ease-in-out infinite; animation-delay: calc(var(--ci, 0) * 0.55s); } @keyframes cardCelebrate { 0%, 100% { filter: brightness(1) saturate(1); } 45% { filter: brightness(1.14) saturate(1.25); } 50% { filter: brightness(1.18) saturate(1.3); } 55% { filter: brightness(1.14) saturate(1.25); } } /* ================================================================ LAYOUT: chase cards (left) + odds panel (right) ================================================================ */ /* chase-odds-layout replaced by rip-layout */ @media (max-width: 860px) { .chase-odds-layout { grid-template-columns: 1fr; } } .odds-aside { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,0.04), transparent), var(--bg-panel); border-radius: 18px; padding: 22px; position: sticky; top: 12px; } .odds-aside-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-light); margin: 0 0 6px; } /* Pack animation stage — centered, only visible during pull */ /* ================================================================ CAROUSEL: full-width, high-res cards (contain, not cover) ================================================================ */ /* ================================================================ REVEAL in hero-stage: card fills the full display area ================================================================ */ .hero-stage .reveal-zone.active { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero-stage .reveal-inner { display: flex; align-items: center; /* vertically centre the front / back / PSA trio */ justify-content: center; gap: 28px; width: 100%; height: 100%; padding: 16px 32px; box-sizing: border-box; overflow: hidden; } /* Card is large, fills most of the hero stage height */ .hero-stage .card-flip-wrap { height: 100%; /* fill stage height */ width: auto; flex-shrink: 0; cursor: pointer; align-self: stretch; } /* Both faces shown flat side-by-side — natural aspect ratio, top-anchored */ .hero-stage .card-flip-inner { transform: none !important; transform-style: flat; position: relative; display: flex; flex-direction: row; align-items: flex-start; /* anchor both faces to top */ gap: 10px; height: 100%; } .hero-stage .card-face { position: relative !important; backface-visibility: visible !important; transform: none !important; flex-shrink: 0; height: 100%; width: auto; overflow: hidden; align-self: flex-start; /* anchor to top of reveal row */ } .hero-stage .card-flip-wrap .card-face img { /* Natural aspect ratio: width driven by height, never stretched */ height: 100%; width: auto; display: block; object-fit: none; /* no resizing — raw natural size at height=100% */ vertical-align: top; border-radius: 8px; } .hero-stage .card-flip-wrap .card-face img { width: 100%; height: 100%; object-fit: contain; object-position: center top; background: var(--bg-deep); image-rendering: high-quality; } /* In expanded mode, card stays large and doesn't translate left */ .hero-stage .reveal-zone.expanded .card-flip-wrap { transform: none; } /* PSA stats panel */ .hero-stage .reveal-psa-panel { width: 0; overflow: hidden; opacity: 0; flex-shrink: 0; transition: width 0.5s cubic-bezier(.22,1,.36,1), opacity 0.4s ease 0.2s; } .hero-stage .reveal-zone.expanded .reveal-psa-panel { width: 220px; opacity: 1; } /* Tier banner and card name in hero context */ .hero-stage .tier-banner.show { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; } .hero-stage .reveal-cardname { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 14px; z-index: 3; } /* ================================================================ NAV: main-tabs + admin corner button ================================================================ */ .main-tabs { display: flex; gap: 4px; } .tab-btn { font-family: var(--font-display); font-size: 14px; font-weight: 700; padding: 7px 20px; border: 1px solid rgba(200,168,75,0.15); background: transparent; color: var(--text-dim); border-radius: 8px; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; } .tab-btn:hover { background: rgba(200,168,75,0.08); color: var(--text-light); } .tab-btn.active { background: rgba(200,168,75,0.14); color: var(--text-light); border-color: rgba(200,168,75,0.4); } .admin-corner-btn { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.35); text-decoration: none; border: 1px solid rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 6px; transition: color 0.14s, border-color 0.14s; } .admin-corner-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); } /* ================================================================ GALLERY VIEW ================================================================ */ /* Gallery uses the SAME header language as the rip view (a gold pill tag) and a centered column, so the collection feels like part of the same app. */ .gallery-header { padding: 22px 16px 14px; } /* The userbar is pinned fixed-top (or docked in Admin) — it never docks in the gallery header's slot, so the header is just empty space that pushed the craft cards lower than the rip page's chase cards. Drop it so the two pages align. */ .gallery-header { display: none; } .gallery-title { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(200,168,75,0.22), rgba(200,168,75,0.06)); border: 1px solid rgba(200,168,75,0.38); box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); margin: 0; } .gallery-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); max-width: 1040px; margin: 9px auto 0; } .gallery-grid { padding: 0 16px 18px; max-width: 1040px; margin: 8px auto 0; } /* ================================================================ LIGHTBOX — right-click image zoom/pan ================================================================ */ .lightbox-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lightbox-img { max-height: 92vh; max-width: 90vw; object-fit: contain; image-rendering: high-quality; border-radius: 14px; user-select: none; box-shadow: 0 0 80px rgba(0,0,0,0.8); transition: none; } .lightbox-close { position: fixed; top: 20px; right: 24px; z-index: 9501; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 20px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.14s; } .lightbox-close:hover { background: rgba(255,255,255,0.22); } .lightbox-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); pointer-events: none; } /* ================================================================ Reveal action buttons styling ================================================================ */ .rip-again-btn { background: var(--pink-bright); color: #07090E; font-weight: 800; } .rip-again-btn:hover { background: #ffd0f0; } /* ================================================================ HEADER: header-right (admin + credits side by side) ================================================================ */ .ledger-bar { position: relative; /* ensure admin absolute fallback works */ } .header-right { display: flex; align-items: center; gap: 10px; margin-left: 0; /* centered with the toggle, not pushed to the edge */ } /* Override old absolute positioning */ .admin-corner-btn { position: static !important; transform: none !important; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.38); text-decoration: none; border: 1px solid rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 7px; transition: color 0.14s, border-color 0.14s, background 0.14s; white-space: nowrap; /* Button vs anchor reset so the "← Rip"